/*
 * 인증 화면 전용 스타일 — login.php · signup.php · find-password.php (design.css 뒤에 싣는다)
 * 인증 카드·체크박스·소셜 버튼·단계 표시 본체는 design.css '인증' 블록에 있다. 여기엔 운영 이관에서 생긴 것만 둔다.
 * 원본 시안(web/design/login.html 등)은 <style> 이 없고, 인라인 style 로 준 여백을 여기 클래스로 옮겼다.
 */

/* 안내 줄 — 제목 아래 · 폼 위 */
.auth-card .auth-msg { margin-top: 20px; }
.auth-card .auth-msg + .auth-form { margin-top: 20px; }
.form-msg a { color: var(--text); font-weight: 700; }
.form-msg b { color: var(--text); }

/* 버튼 처리 중 · 비활성 — 공용 .btn 에 disabled 모양이 없다 */
.auth-card .btn:disabled, .auth-card .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.auth-card .btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.auth-card .btn-ghost { height: 40px; }

/* 칸 아래 성공 안내 (아이디 사용 가능) — 라임 글자는 어두운 카드 위라 대비가 충분하다 */
.field-hint.is-ok { color: var(--primary); }
.field-hint.is-bad { color: var(--danger-text); }
/* 오류가 뜬 칸은 안내 문구를 숨긴다 — 두 줄이 겹쳐 무엇을 고칠지 흐려진다 */
.field:has(.field-error:not([hidden])) .field-hint { display: none; }
.field > label small { font-weight: 500; }

/* 소셜 버튼 — 애플을 끄면 3개라 4칸 격자에 빈칸이 남는다. 폰에서도 3개는 한 줄에 들어간다 */
.sns-btns.sns-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sns-btns.sns-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sns-btns.sns-count-1 { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 480px) {
  .sns-btns.sns-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 약관 오류 줄 */
.terms-list + .field-error { margin-top: 10px; }
.check input.is-error { border-color: var(--danger-text); }

/* ── 계정 찾기 ─────────────────────────────────────────────────────── */
/* 시안 인라인: 알약 탭 display:flex · margin-top:24px · 버튼 flex:1 */
.auth-seg { display: flex; margin-top: 24px; }
.auth-seg button { flex: 1; padding: 0 12px; }
.auth-card .wizard { margin-top: 24px; }
.wizard + .form-msg { margin-bottom: 18px; }
.wizard ~ .auth-form { margin-top: 0; }
[data-flow="id"] > .form-msg-error { margin-top: 24px; }
[data-flow="id"] > .form-msg-error:not([hidden]) + .auth-form { margin-top: 18px; }
.auth-note { margin-top: 20px; }
.code-input { letter-spacing: .2em; font-variant-numeric: tabular-nums; }
[data-timer] { font-variant-numeric: tabular-nums; }
.find-result { margin-top: 24px; }
.find-result-actions { display: grid; gap: 10px; margin-top: 16px; }
.find-result-actions .btn { width: 100%; }