/**
 * auth.css — 인증 페이지 공용 스타일
 * 시안: /var/services/web/.design/neisme/2026/auth/login.md §5
 *        register.md §5, modify.md §5, modify_password.md §5, forgot-password.md §5
 *
 * tokens.css → design.css → auth.css 순서로 로드 (chrome 스타일은 design.css 통합).
 * 색·폰트·간격 하드코딩 금지 — tokens.css 변수만 사용.
 */

/* ─── auth-page wrapper ───────────────────────────────────────────────────── */

.auth-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-12, 3rem) var(--space-4, 1rem);
  min-height: calc(100vh - var(--header-height, 64px) - 200px);
}

/* ─── auth-card ───────────────────────────────────────────────────────────── */

.auth-card {
  width: 100%;
  max-width: 480px;
  padding: var(--space-8, 2rem);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}
/* register / modify 는 약간 넓게 */
.auth-card--wide { max-width: 520px; }

.auth-card__brand {
  display: inline-flex;
  align-self: flex-start;
  text-decoration: none;
  margin-bottom: var(--space-2, 0.5rem);
}
.auth-card__brand .site-brand__mark {
  width: 32px; height: 32px;
  font-size: var(--fs-md, 1rem);
}
.auth-card__title {
  margin: 0;
  font-size: var(--fs-2xl, 1.5rem);
  font-weight: var(--fw-bold, 700);
  color: var(--color-fg);
  letter-spacing: var(--letter-tight, -0.01em);
}
.auth-card__lead {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: var(--fs-sm, 0.875rem);
  color: var(--color-fg-muted);
  line-height: var(--line-base, 1.5);
}
.auth-card__lead a {
  color: var(--color-primary);
  text-decoration: none;
}
.auth-card__lead a:hover { text-decoration: underline; }

.auth-card__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  margin: var(--space-2, 0.5rem) 0;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-fg-subtle);
}
.auth-card__divider::before,
.auth-card__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.auth-card__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  margin-bottom: var(--space-2, 0.5rem);
  font-size: var(--fs-sm, 0.875rem);
  color: var(--color-fg-muted);
  text-decoration: none;
  align-self: flex-start;
}
.auth-card__back:hover { color: var(--color-fg); }

.auth-card__sep {
  margin: var(--space-2, 0.5rem) 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.auth-card__footer-text {
  margin: 0;
  font-size: var(--fs-sm, 0.875rem);
  color: var(--color-fg-muted);
  text-align: center;
}
.auth-card__footer-link {
  color: var(--color-primary);
  font-weight: var(--fw-semibold, 600);
  text-decoration: none;
}
.auth-card__footer-link:hover { text-decoration: underline; }

/* ─── auth-page__help ─────────────────────────────────────────────────────── */

.auth-page__help {
  margin: var(--space-6, 1.5rem) 0 0;
  font-size: var(--fs-sm, 0.875rem);
  color: var(--color-fg-muted);
  text-align: center;
}
.auth-page__help a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--fw-semibold, 600);
}
.auth-page__help a:hover { text-decoration: underline; }

/* ─── auth-form ───────────────────────────────────────────────────────────── */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
  margin-top: var(--space-2, 0.5rem);
}

/* ─── form-field ──────────────────────────────────────────────────────────── */

.form-field { display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); }

.form-field__label-row {
  display: flex; align-items: baseline; justify-content: space-between;
}
.form-field__label {
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--color-fg);
}
.form-field__required {
  color: var(--color-danger);
  font-weight: var(--fw-bold, 700);
  margin-left: 1px;
}
.form-field__hint {
  font-size: var(--fs-xs, 0.75rem);
  font-weight: var(--fw-regular, 400);
  color: var(--color-fg-muted);
}
.form-field__hint-link {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-primary);
  text-decoration: none;
}
.form-field__hint-link:hover { text-decoration: underline; }

.form-field__input-wrap { position: relative; }

.form-field__input {
  width: 100%;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-size: var(--fs-base, 1rem);  /* 16px — iOS zoom 회피 */
  font-family: inherit;
  color: var(--color-fg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 6px);
  box-sizing: border-box;
  transition: border-color var(--duration-fast, 150ms) var(--ease-out, ease),
              box-shadow var(--duration-fast, 150ms) var(--ease-out, ease);
}
.form-field__input:hover { border-color: var(--color-border-strong); }
.form-field__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.form-field__input[aria-invalid="true"] { border-color: var(--color-danger); }
.form-field__input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--color-danger-soft, #fee2e2);
}
.form-field__input:disabled,
.form-field__input[readonly] {
  background: var(--color-surface);
  color: var(--color-fg-muted);
  cursor: not-allowed;
}
.form-field__input[readonly] { border-style: dashed; }

.form-field__error {
  margin: 0;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-danger);
}
.form-field__help {
  margin: 0;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-fg-muted);
  line-height: var(--line-base, 1.5);
}

/* 비밀번호 reveal 버튼 */
.form-field__reveal-btn {
  position: absolute;
  right: var(--space-2, 0.5rem);
  top: 50%;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  color: var(--color-fg-muted);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
}
.form-field__reveal-btn:hover { color: var(--color-fg); background: var(--color-surface); }
.form-field__reveal-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* userid 인라인 상태 표시 */
.form-field__status {
  position: absolute;
  right: var(--space-3, 0.75rem);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-xs, 0.75rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--color-fg-muted);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
}
.form-field__status[data-status="checking"] { color: var(--color-fg-muted); }
.form-field__status[data-status="ok"]       { color: var(--color-success, #16a34a); }
.form-field__status[data-status="taken"],
.form-field__status[data-status="invalid"]  { color: var(--color-danger); }
.form-field__status[data-status="idle"]     { display: none; }

/* ─── 비밀번호 강도 미터 ──────────────────────────────────────────────────── */

.pwd-strength {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-top: var(--space-1, 0.25rem);
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-fg-muted);
}
.pwd-strength__bar {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  height: 6px;
}
.pwd-strength__bar > span {
  background: var(--color-border);
  border-radius: var(--radius-sm, 4px);
  transition: background var(--duration-fast, 150ms) var(--ease-out, ease);
}
.pwd-strength[data-strength="1"] .pwd-strength__bar > span:nth-child(-n+1) { background: var(--color-danger); }
.pwd-strength[data-strength="2"] .pwd-strength__bar > span:nth-child(-n+2) { background: var(--color-warn, #f59e0b); }
.pwd-strength[data-strength="3"] .pwd-strength__bar > span:nth-child(-n+3) { background: var(--color-warn, #f59e0b); }
.pwd-strength[data-strength="4"] .pwd-strength__bar > span:nth-child(-n+4) { background: var(--color-success, #16a34a); }
.pwd-strength[data-strength="5"] .pwd-strength__bar > span:nth-child(-n+5) { background: var(--color-success, #16a34a); }

.pwd-strength__label { color: var(--color-fg-muted); }
.pwd-strength[data-strength="1"] .pwd-strength__label { color: var(--color-danger); }
.pwd-strength[data-strength="2"] .pwd-strength__label,
.pwd-strength[data-strength="3"] .pwd-strength__label { color: var(--color-warn-active, var(--color-warn, #f59e0b)); }
.pwd-strength[data-strength="4"] .pwd-strength__label,
.pwd-strength[data-strength="5"] .pwd-strength__label { color: var(--color-success-active, var(--color-success, #16a34a)); }

/* ─── 체크박스 (커스텀) ───────────────────────────────────────────────────── */

.form-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-sm, 0.875rem);
  color: var(--color-fg);
}
.form-checkbox input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
.form-checkbox__box {
  width: 18px; height: 18px;
  border: 1.5px solid var(--color-border-strong, var(--color-border));
  border-radius: var(--radius-sm, 4px);
  background: var(--color-bg);
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--duration-fast, 150ms) var(--ease-out, ease),
              background var(--duration-fast, 150ms) var(--ease-out, ease);
}
.form-checkbox input:checked + .form-checkbox__box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.form-checkbox input:checked + .form-checkbox__box::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 6px; height: 10px;
  border: solid var(--color-primary-fg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.form-checkbox input:focus-visible + .form-checkbox__box {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.form-checkbox__hint {
  color: var(--color-fg-muted);
  font-weight: var(--fw-regular, 400);
}
.form-checkbox__required { color: var(--color-danger); font-weight: var(--fw-semibold, 600); }
.form-checkbox__optional { color: var(--color-fg-muted); }
.form-checkbox a { color: var(--color-primary); text-decoration: underline; }

/* ─── 약관 fieldset ───────────────────────────────────────────────────────── */

.form-fieldset {
  border: 0;
  margin: 0;
  padding: var(--space-4, 1rem);
  background: var(--color-surface);
  border-radius: var(--radius-md, 6px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

/* ─── alert ───────────────────────────────────────────────────────────────── */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  border-radius: var(--radius-md, 6px);
  font-size: var(--fs-sm, 0.875rem);
  line-height: var(--line-base, 1.5);
}
/* fallback var 패턴으로 dark 에서 *-active 가 없으면 base hue 폴백 */
.alert--error   {
  background: var(--color-danger-soft, #fee2e2);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}
.alert--warn    {
  background: var(--color-warn-soft, #fef3c7);
  color: var(--color-warn-active, var(--color-warn, #f59e0b));
  border: 1px solid var(--color-warn, #f59e0b);
}
.alert--success {
  background: var(--color-success-soft, #dcfce7);
  color: var(--color-success-active, var(--color-success, #16a34a));
  border: 1px solid var(--color-success, #16a34a);
}
.alert--info    {
  background: var(--color-info-soft, #e0f2fe);
  color: var(--color-info-active, var(--color-info, #0ea5e9));
  border: 1px solid var(--color-info, #0ea5e9);
}
.alert svg { flex-shrink: 0; margin-top: 1px; }

/* ─── btn-full + busy ─────────────────────────────────────────────────────── */

.btn-full { width: 100%; justify-content: center; }
.btn[data-busy="true"] .btn__label { opacity: 0.6; }
.btn[data-busy="true"] .btn__spinner {
  display: inline-block !important;
  width: 14px; height: 14px;
  margin-left: var(--space-2, 0.5rem);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: auth-spin var(--duration-slow, 500ms) linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn[data-busy="true"] .btn__spinner { animation: none; }
  .pwd-strength__bar > span { transition: none; }
}

/* ─── 계정 관리 (modify.php) ─────────────────────────────────────────────── */

.auth-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}
.auth-actions__title {
  margin: 0;
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--color-fg-muted);
}
.auth-actions__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 1px;
  background: var(--color-border);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
}
.auth-actions__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: var(--color-bg);
  color: var(--color-fg);
  text-decoration: none;
  font-size: var(--fs-sm, 0.875rem);
  transition: background var(--duration-fast, 150ms) var(--ease-out, ease);
}
.auth-actions__item:hover,
.auth-actions__item:focus-visible { background: var(--color-surface); }
.auth-actions__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.auth-actions__label { display: inline-flex; align-items: center; gap: var(--space-2, 0.5rem); }
.auth-actions__chevron { color: var(--color-fg-subtle); }
.auth-actions__chip {
  display: inline-grid; place-items: center;
  padding: 0 var(--space-2, 0.5rem);
  font-size: var(--fs-xs, 0.75rem);
  font-weight: var(--fw-semibold, 600);
  background: var(--color-surface);
  color: var(--color-fg-muted);
  border-radius: var(--radius-full, 9999px);
  height: 18px;
}
.auth-actions__chip--success {
  background: var(--color-success-soft, #dcfce7);
  color: var(--color-success-active, var(--color-success, #16a34a));
}
.auth-actions__chip--danger {
  background: var(--color-danger-soft, #fee2e2);
  color: var(--color-danger);
}
.auth-actions__item--danger .auth-actions__label { color: var(--color-danger); }

/* ─── auth-result (forgot-password 성공 화면) ─────────────────────────────── */

.auth-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-4, 1rem) 0;
}
.auth-result__icon {
  display: inline-grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-primary-soft);
  color: var(--color-primary-soft-fg);
}
.auth-result__title {
  margin: 0;
  font-size: var(--fs-lg, 1.125rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--color-fg);
}
.auth-result__msg { margin: 0; font-size: var(--fs-sm, 0.875rem); color: var(--color-fg); line-height: var(--line-base, 1.5); }
.auth-result__sub { margin: 0; font-size: var(--fs-xs, 0.75rem); color: var(--color-fg-muted); }
.auth-result__resend {
  margin-top: var(--space-2, 0.5rem);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-2, 0.5rem);
}
.btn__cooldown {
  margin-left: var(--space-1, 0.25rem);
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-fg-muted);
  font-weight: var(--fw-regular, 400);
}
.btn:disabled .btn__cooldown { color: var(--color-fg-subtle); }

/* ─── auth-result 성공/경고 변형 (reset_password.md §8) ─────────────────── */

.auth-result__icon--success {
  background: var(--color-success-soft);
  color: var(--color-success-active, var(--color-success));
}
.auth-result__icon--warn {
  background: var(--color-warn-soft);
  color: var(--color-warn-active, var(--color-warn));
}
.auth-result--warn .auth-result__title {
  color: var(--color-warn-active, var(--color-warn));
}

/* ─── 모바일 ─────────────────────────────────────────────────────────────── */

@media (max-width: 639.98px) {
  .auth-page { padding: var(--space-6, 1.5rem) 0; min-height: auto; }
  .auth-card {
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
    background: transparent;
  }
}