@charset "UTF-8";
/**
 * pages/login.css — 시스템 로그인 페이지 전용. 가운데 카드형.
 * head 에 { "css": "login" } 로 로드. 상태: .login-form.is-otp-sent / .is-error.
 */
/**
 * SCSS 변수 (연산/믹스인용) — CSS 출력 없음. 어디서든 @use 해도 중복 생성 안 됨.
 * (CSS custom properties(:root)는 _tokens.scss 에서 출력.)
 */
/* 레이아웃 폭 (PC 전용) */
/**
 * 타이포 스케일 (단일 소스) — @Guide_Typography 기준. key = font-size(px).
 * 여기만 고치면 font() 믹스인과 --fs-* / --lh-* 토큰이 함께 갱신됨.
 */
/**
 * pages/login.css — 시스템 로그인 페이지 전용. 가운데 카드형.
 * head 에 { "css": "login" } 로 로드. 상태: .login-form.is-otp-sent / .is-error.
 */
/**
 * 공용 믹스인 — `@use '../common/mixins' as *;`
 */
/**
 * 타이포 스케일 적용(size + line-height 한 쌍). 예: `@include font(20);`
 * weight는 별도(`font-weight: var(--fw-bold);`). 허용 키는 $font-scale.
 */
/* 중앙 카드형 → 전역 최소폭(#wrap 1200) 해제.
 * (min-width 있으면 축소 시 콘텐츠는 문서 중앙 / fixed 모달·딤은 뷰포트 중앙 → 어긋남) */
#wrap {
  min-width: 0;
  background: #fff;
}

.inner {
  width: 100%;
  max-width: calc(var(--content-width) + 48px);
  padding: 0 24px;
}

/* 페이지 (헤더 아래 상단 정렬). min-height 960 → 창이 낮아도 카드가 여백 유지(뭉개짐 방지) */
.login {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  min-height: 960px;
  padding-top: 100px;
  background: #fff;
}

/* 카드 (536 = 440 + 좌우 48) */
.login-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 536px;
  padding: 40px 48px;
  background: var(--n-40);
  border: 1px solid var(--n-200);
  border-radius: 0;
}

.login-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.login-sub {
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--n-500);
}

.login-title {
  font-size: 24px;
  line-height: 36px;
  font-weight: var(--fw-bold);
  color: var(--n-900);
}

.login-input-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-pw {
  position: relative;
}
.login-pw .input {
  padding-right: 44px;
}
.login-pw-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--n-500);
  cursor: pointer;
}

.login-otp {
  display: flex;
  gap: 8px;
}
.login-otp .input {
  flex: 1 1 auto;
  min-width: 0;
}
.login-otp .btn-otp {
  flex: 0 0 auto;
  min-width: 100px;
  padding: 0 14px;
}

/* 6자리 코드 — 기본 숨김, OTP 전송 후 노출 */
.login-code {
  display: none;
}

/* 오류 메시지 — 기본 숨김, 오류 상태에서 노출 */
.login-error {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 16px;
  background: var(--r-100);
}
.login-error .ico {
  color: var(--color-error);
}
.login-error span {
  font-size: 13px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--color-error);
}

/* 네이비 버튼(.btn-navy)은 공통 _button.scss 로 이동 */
.login-links {
  display: flex;
  align-items: center;
}
.login-links a {
  flex: 1 1 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--n-600);
  text-align: center;
}

.login-links-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 12px;
  background: var(--n-300);
}

/* 상태별 노출 */
/* OTP 전송 시 인증코드 입력칸 노출 */
.login-form.is-otp-sent .login-code {
  display: block;
}

/* 로그인 실패 시 에러 메시지 노출 (개발 연동) */
.login-form.is-error .login-error {
  display: flex;
}

/* OTP 재전송 = 전송 버튼(line)과 동일 스타일, 라벨만 '재전송'으로 변경(JS) */
/* 로그인 플로우 팝업 (공통 .modal-* 은 _modal.scss. 여기선 폼형 변형만) */
.modal-box--terms {
  width: 690px;
}

.modal-box--pw {
  width: 800px;
}

/* 폼형 바디: 표준(가운데·min150) 대신 좌측·상단 정렬 + 폼 ↔ 확인 gap 30 */
.modal-box--terms .modal-body,
.modal-box--pw .modal-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 30px;
  min-height: 0;
  padding: 30px 20px 20px;
}

.terms-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.terms-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 약관 본문 박스 — 고정높이 + Figma 스크롤바(우측 반투명 라운드, 8px 인셋) */
.terms-text {
  box-sizing: border-box;
  height: 190px;
  padding: 20px;
  border-right: 8px solid transparent;
  overflow-y: scroll;
  background: var(--n-40);
  border-radius: 10px;
}
.terms-text::-webkit-scrollbar {
  width: 5px;
}
.terms-text::-webkit-scrollbar-track {
  margin: 8px 0;
  background: transparent;
}
.terms-text::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50px;
}

.terms-text-body {
  min-height: 210px;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: #616161;
}

/* 약관 동의 체크 행 gap 5 (체크 색은 아래 로그인 플로우 네이비 오버라이드) */
.terms-check {
  gap: 5px;
}

/* 로그인 플로우 체크박스 = 네이비(DB-700) — 컴포넌트 기본(Primary)을 로그인 톤에 맞춰 오버라이드 */
.login-remember.check:not(.check--radio) input:checked ~ .check-box,
.terms-check.check:not(.check--radio) input:checked ~ .check-box {
  border-color: var(--db-700);
  background: var(--db-700);
}

/* ID·비밀번호 변경 팝업 (800, 2단) — 폭은 위 .modal-box--pw */
.pw-form {
  display: flex;
  gap: 20px;
  width: 100%;
}

.pw-col {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: 30px;
}

.pw-divider {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  background: var(--n-100);
}

.pw-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pw-col-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--fw-bold);
  color: var(--n-900);
}

.pw-desc {
  padding-left: 20px;
  list-style: disc;
  font-size: 13px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: #616161;
}

.pw-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 4px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-semibold);
  color: var(--n-900);
}

.field-row {
  display: flex;
  gap: 6px;
}
.field-row .input {
  flex: 1 1 auto;
  min-width: 0;
}
.field-row .btn {
  flex: 0 0 auto;
  height: 44px;
}

/* 읽기전용 필드(현재 ID·현재 비밀번호) — Figma: 흰색 배경 */
.field .input[readonly] {
  background: #fff;
}

/* 비밀번호 변경 오류 메시지 — 기본 숨김, 검증 실패 시 노출(개발 연동) */
.pw-error {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 16px;
  background: var(--r-100);
}
.pw-error .ico {
  color: var(--color-error);
}
.pw-error span {
  font-size: 13px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--color-error);
}