/* =============================================================================
 * swnm 인증 화면 레이아웃 — <ui:auth-layout> 전용 (로그인/비밀번호 재설정)
 * (2026-06-24 · jiwon · tasks/20260624-auth-ui)
 * -----------------------------------------------------------------------------
 * 로그인 "전(前)" 화면용. 헤더/사이드바 셸이 없는 중앙정렬 카드.
 * 색·간격·타이포 = tokens.css 토큰. 인증 고유 치수(560 카드·44 타이틀·스텝 점)만 로컬.
 * (고정 대비 글자 #FFFFFF = 색 위 흰 글자 예외, DS §1 허용.)
 * ============================================================================= */

/* ===== 페이지 바탕 + 중앙 정렬 ===== */
.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-page);
  padding: var(--space-6);                  /* 24 */
  font-family: var(--font-sans);
}

/* ===== 카드 ===== */
.auth-card {
  width: 100%;
  max-width: 560px;                         /* 인증 카드 고유 폭 */
  background: var(--bg-surface);
  border: 1px solid var(--border);          /* ui-card 방식 — 라이트서 흰 페이지 위 카드 또렷하게 */
  border-radius: var(--radius-lg);          /* 12 */
  padding: var(--space-7);                  /* 32 */
}

/* ===== 상단 줄: 뒤로가기 ↔ 스텝 인디케이터 (양 끝 정렬) ===== */
.auth-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  margin-bottom: var(--space-6);            /* 24 */
}

/* ===== 스텝 인디케이터 (1●─2○) — 인증 전용, auth-layout step 속성이 렌더 ===== */
.auth-steps { display: flex; align-items: center; gap: 0; }
.auth-steps__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border-strong);
  background: var(--border-strong);
  display: grid;
  place-items: center;
  font-size: 10px;                          /* 점 안 숫자 — 고유 미세 치수 */
  font-weight: var(--fw-bold);
  color: transparent;
}
.auth-steps__dot.is-active {
  width: 18px;
  height: 18px;
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;                           /* 색 위 고정 대비 글자 (예외) */
}
.auth-steps__line {
  width: 38px;
  border-top: 2px dashed var(--border-strong);
}

/* ===== 로고 (브랜드 멀티컬러 → <img>, 테마별 변형 스왑) ===== */
.auth-logo-wrap { text-align: center; margin-bottom: var(--space-7); }   /* 32 */
.auth-logo { display: inline-block; height: 33px; width: auto; }
.auth-logo--light { display: none; }                          /* 기본(다크): 흰 글자 로고 */
html[data-theme="light"] .auth-logo--dark { display: none; }  /* 라이트: 컬러 로고로 스왑 */
html[data-theme="light"] .auth-logo--light { display: inline-block; }

/* ===== 타이틀 / 서브타이틀 ===== */
.auth-head { text-align: center; margin-bottom: var(--space-7); }        /* 32 (head ↔ 폼) */
.auth-title {
  font-size: 44px;                          /* 인증 타이틀 고유 크기 (--font-2xl=24 초과) */
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  margin: 0 0 var(--space-6);               /* 24 (타이틀 ↔ 서브) */
  line-height: 1.2;
}
.auth-subtitle {
  font-size: var(--font-xl);                /* 20 */
  color: var(--text-muted);
  margin: 0;
}

/* ===== 폼 묶음 — 입력 묶음 ↔ 버튼 간격 ===== */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);                      /* 32 */
}
.auth-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);                      /* 12 (필드 간) */
}

/* 옵션 줄 (Remember me ↔ Forgot password) */
.auth-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 인증 화면 링크 — 두 테마 공통 --primary (accent는 라이트서 안 읽힘) */
.auth-link {
  color: var(--primary);
  font-size: var(--font-md);
  text-decoration: none;
}
.auth-link:hover { text-decoration: underline; }

/* 이메일+코드발송처럼 입력 옆 버튼을 한 줄로 */
.auth-inline {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
}
.auth-inline > .ui-input-wrap { flex: 1 1 auto; }

/* 입력 도움말/에러 한 줄 (인증코드 안내 등) */
.auth-hint {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.auth-hint:empty { display: none; }
.auth-hint--error { color: var(--status-critical); }

/* ===== 반응형 — 좁은 화면에서 타이틀 축소 (정해진 BP만) ===== */
@media (max-width: 1024px) {
  .auth-title { font-size: var(--font-2xl); }   /* 24 */
}