/* ==========================================
    로그인 (login) 페이지
   ========================================== */
/* 콘텐츠가 하나 뿐이여서 body로 묶어서 flex로 가운데 정렬*/
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  background-color: var(--color-bg-soft);
}
/* 로그인 박스 컨테이너 */
.login-container {
  display: flex;
  flex-direction: column; /* 세로 정렬 */
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 30px;
  background-color: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 은은한 그림자 */
}
/* 아이디 비밀번호 폼 */
/*타입 선택자로 스타일*/
input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
/* 입력창 아래 검증 오류 문구 */
.form-error {
  margin: -8px 0 12px; /* 위로 8px 당김*/
  color: var(--color-state-urgent);
  font-size: var(--font-xs);
}
/* 로그인 버튼 스타일은 공통 .btn .btn--primary .btn--lg .btn--block */
.login-btn {
  margin-top: 4px;
}
/* 옵션 영역 (로그인 유지 등) */
.login-options {
  display: flex; /*한줄로 정렬*/
  justify-content: space-between; /*가로정렬 양끝으로*/
  align-items: center;
  margin-bottom: 20px;
  font-size: var(--font-sm);
}
/* 링크 스타일 (아이디/비번 찾기) */
.links {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  gap: 15px;
}
.links a {
  color: var(--color-text-sub);
  font-size: var(--font-sm);
}
/* 로고 이미지 위치 조정*/
.logo {
  display: block; /* img는 기본적으로 inline(여백)이 생김 block을 썻을 시 미세한 기본 여백이 사라짐*/
  width: fit-content;
  margin: 0 auto 30px;
}
.logo img {
  width: 150px; /* 헤더 로고와 동일. 없으면 원본 크기라 모바일에서 넘침 */
  height: auto;
  display: block;
}
.promotion-area {
  width: 100%;
  max-width: 400px;
  margin-bottom: 40px; /* 푸터와의 간격 */
}
.promotion-banner img {
  width: 100%;
  border-radius: var(--radius-sm);
  display: block;
}
/* 푸터 영역 */
.footer_wrapper {
  text-align: center;
  color: var(--color-text-sub);
  font-size: var(--font-sm);
}
.footer_bottom img {
  display: block;
  margin: 0 auto 30px;
  max-width: 40%;
  margin-top: 20px;
}
.footer_inner {
  margin-bottom: 20px;
}
.footer_inner a {
  margin: 0 20px;
  color: var(--color-text-sub);
}
/* 체험 계정으로 로그인 버튼 (스타일은 공통 .btn .btn--ghost) */
#demo-login-btn {
  margin-top: 10px;
}