/* 로그인 / 회원가입 전용 */

.auth-wrap { display: flex; justify-content: center; align-items: flex-start; padding-block: clamp(8px, 4vw, 40px); }
.auth-card { color-scheme: dark; width: 100%; max-width: 460px; padding: var(--sp-10) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-6); }
.auth-card--wide { max-width: 640px; gap: var(--sp-8); }
.auth-card__head { display: flex; flex-direction: column; gap: var(--sp-2); text-align: center; align-items: center; }
.auth-card__brand { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: 0.16em; color: var(--accent); }
.auth-card__title { font-size: clamp(24px, 3vw, 30px); font-weight: 800; letter-spacing: -0.03em; }
.auth-card__desc { font-size: 14px; color: var(--muted); max-width: 42ch; }
.auth-card__foot { text-align: center; font-size: 14px; color: var(--muted); }
.auth-card__foot a { font-weight: 600; margin-left: var(--sp-1); }

.auth-fields { display: flex; flex-direction: column; gap: var(--sp-5); }
.auth-options { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; font-size: 14px; }
.auth-options a { font-size: 13px; }

/* 회원가입 구역 */
.form-group { display: flex; flex-direction: column; gap: var(--sp-5); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.form-group__title { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent); }
.required { color: var(--pink); margin-left: 2px; }
.input-row { display: flex; gap: var(--sp-2); }
.input-row .input { flex: 1; min-width: 0; }
.input-row .btn { flex-shrink: 0; }

/* 라디오 선택 */
.choice-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: start; }
.choice-row__label { font-size: 13px; font-weight: 600; color: var(--text-sub); padding-top: 10px; }
.choices { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { min-height: 40px; padding: 0 var(--sp-4); display: inline-flex; align-items: center; font-size: 14px; color: var(--text-sub); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.choice span:hover { border-color: var(--accent-line); color: var(--text-strong); }
.choice input:checked + span { background: rgba(139,92,246,0.22); border-color: var(--accent); color: var(--text-strong); font-weight: 600; }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.terms { max-height: 180px; overflow-y: auto; padding: var(--sp-4) var(--sp-5); font-size: 13px; line-height: 1.8; color: var(--muted); background: rgba(0,0,0,0.22); border: 1px solid var(--line); border-radius: 8px; }
.form-actions { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-3); }

@media (max-width: 480px) {
  .auth-wrap { padding-block: 0; }
  .auth-card { padding: var(--sp-8) var(--sp-5); gap: var(--sp-5); }
  .auth-card--wide { gap: var(--sp-6); }
  .choice-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .choice-row__label { padding-top: 0; }
  .form-actions { grid-template-columns: 1fr; }
  .form-actions .btn--primary { order: -1; }
}

/* 입력 오류 / 안내 */
.input.is-error { border-color: var(--pink); }
.field__error { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.5; color: #FF9BB8; }
.field__error::before { content: "!"; flex: none; width: 18px; height: 18px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px; font-weight: 800; color: #1a0f14; background: #FF9BB8; }
.input.is-error { box-shadow: 0 0 0 3px rgba(255,155,184,.18); }
/* 회원가입 고칠 곳 목록 (signup.html): 맨 위에 몇 곳 · 무엇이 틀렸는지, 누르면 그 칸으로 */
.su-errors { padding: var(--sp-4) var(--sp-5); background: rgba(154,61,110,0.18); border: 1px solid rgba(255,155,184,0.55); border-radius: var(--radius-sm); outline: none; scroll-margin-top: 96px; }
.su-errors__title { display: block; font-size: 16px; color: var(--text-strong); }
.su-errors__list { margin: var(--sp-2) 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.su-errors__list a { display: block; padding: 8px 0; min-height: 24px; font-size: 15px; color: #FFC2D4; text-decoration: underline; text-underline-offset: 3px; }
.su-errors__list a:hover { color: #fff; }
#s-main, .field { scroll-margin-top: 110px; }
/* 이메일 인증번호 줄 (signup.html) */
.su-code { margin-top: var(--sp-2); }
.su-code .input { letter-spacing: .3em; font-size: 18px; font-variant-numeric: tabular-nums; }
.su-code .input:placeholder-shown { letter-spacing: normal; font-size: 16px; }
.su-mailmsg { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-sub); }
.su-mailmsg.is-ok { font-weight: 700; color: #6CC08E; }
.su-mailmsg.is-ok::before { content: "✓ "; }
.su-mailmsg.is-bad { font-weight: 600; color: #FF9BB8; }
.form-group.is-error .mc-pick { outline: 2px solid rgba(255,155,184,.6); outline-offset: 4px; border-radius: var(--radius-sm); }
.field__ok { font-size: 12px; color: #6CC08E; }
.form-alert { padding: var(--sp-3) var(--sp-4); font-size: 14px; color: var(--text-strong); background: rgba(154,61,110,0.18); border: 1px solid rgba(217,147,184,0.4); border-radius: var(--radius-sm); }
.form-alert--ok { background: rgba(62,154,99,0.16); border-color: rgba(108,192,142,0.4); }

/* ---------- 알약 탭 (계정 찾기) ---------- */
.auth-tabs { justify-content: center; }
.pills [role="tab"][aria-selected="true"] { background: var(--primary); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 0 0 3px rgba(139,92,246,.14); }

/* 계정 찾기 안내 */
.auth-guide { font-size: 14px; line-height: 1.7; color: var(--text-sub); }
.auth-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: var(--sp-3); }
.auth-steps li { counter-increment: step; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--sp-3); font-size: 14px; }
.auth-steps li::before { content: counter(step); grid-row: span 2; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 50%; }
.auth-steps b { color: var(--text-strong); }
.auth-steps span { font-size: 13px; color: var(--muted); }

/* 가입 완료 */
.auth-card--done { max-width: 520px; }
.done-mark { width: 72px; height: 72px; margin-bottom: var(--sp-2); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #5DBB86; background: rgba(93,187,134,.15); border: 1px solid rgba(93,187,134,.5); }
.done-id { color: var(--text-strong); }
.done-next { padding: var(--sp-4) var(--sp-5); font-size: 14px; line-height: 1.9; color: var(--text-sub); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.done-next b { color: var(--text); }
.done-next ol { margin: 0; padding-left: var(--sp-5); }
.done-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: calc(var(--sp-3) * -1); }
@media (max-width: 480px) {
  .done-actions { grid-template-columns: 1fr; }
}