/* 인증 페이지 (로그인 / 비밀번호 설정·변경·리셋 / forgot).
   base.html 을 상속받지 않는 stand-alone 페이지용 레이아웃.
   모든 색/간격/폰트는 --kcp-* 토큰만. */

.auth-body {
  margin: 0;
  font-family: var(--kcp-font-sans);
  background: var(--kcp-bg-subtle);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card-wrap {
  width: 100%;
  max-width: 440px;
  padding: var(--kcp-space-6);
}

.auth-card {
  padding: var(--kcp-space-7) var(--kcp-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--kcp-space-3);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--kcp-space-3);
  margin-bottom: var(--kcp-space-2);
}
.auth-brand .brand-mark {
  width: 40px;
  height: 40px;
}
.auth-brand .brand-mark svg { width: 100%; height: 100%; }
.auth-brand .brand-name {
  font-size: var(--kcp-text-lg);
  font-weight: var(--kcp-weight-black);
  letter-spacing: var(--kcp-tracking-tight);
  color: var(--kcp-fg);
}
.auth-brand .brand-sub {
  font-size: var(--kcp-text-xs);
  color: var(--kcp-fg-tertiary);
}

.auth-h1 {
  margin: var(--kcp-space-2) 0 0;
  font-size: var(--kcp-text-xl);
  font-weight: var(--kcp-weight-bold);
  color: var(--kcp-fg);
}

.auth-sub {
  margin: 0 0 var(--kcp-space-3);
  color: var(--kcp-fg-secondary);
  font-size: var(--kcp-text-sm);
  line-height: 1.5;
}
.auth-sub code {
  font-family: var(--kcp-font-mono);
  font-size: var(--kcp-text-xs);
  background: var(--kcp-bg-subtle);
  padding: 1px var(--kcp-space-2);
  border-radius: var(--kcp-radius-xs);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--kcp-space-3);
}

.auth-form .cl-field-label {
  margin-top: var(--kcp-space-2);
}

.auth-form .cl-input {
  min-height: 44px;        /* tap-target */
}

.auth-actions {
  display: flex;
  justify-content: stretch;
  margin-top: var(--kcp-space-3);
}
.auth-actions .btn {
  flex: 1 1 auto;
  min-height: 48px;
}

.auth-foot {
  margin-top: var(--kcp-space-3);
  font-size: var(--kcp-text-sm);
  text-align: center;
}
.auth-foot a {
  color: var(--kcp-blue-700);
  text-decoration: none;
}
.auth-foot a:hover { text-decoration: underline; }
.auth-foot a:focus-visible {
  outline: none;
  box-shadow: var(--kcp-shadow-focus);
  border-radius: var(--kcp-radius-sm);
}

/* /account/password 페이지는 base.html 안에서 렌더 — 카드 폭 제한. */
.auth-inline-card {
  max-width: 560px;
  margin: 0 auto;
}

/* CD web-auth-experience (2026-07-17) — 히어로 beacon · eye 토글 · 강도계 · 일치 · CapsLock */
.auth-beacon { display: inline-flex; align-items: center; gap: var(--kcp-space-2);
  font-size: var(--kcp-text-caption); font-weight: 600; color: var(--kcp-color-primary);
  background: var(--kcp-color-primary-tint, var(--kcp-color-surface-2)); border-radius: var(--kcp-radius-pill);
  padding: var(--kcp-space-1) var(--kcp-space-3); margin-bottom: var(--kcp-space-4); }
.auth-beacon-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kcp-color-success); flex: none; }
.auth-pw-wrap { position: relative; display: block; }
.auth-pw-wrap .cl-input { width: 100%; padding-right: 2.6rem; }
.auth-eye { position: absolute; top: 50%; right: var(--kcp-space-2); transform: translateY(-50%);
  width: 2rem; height: 2rem; min-height: 2rem; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--kcp-color-text-tertiary); cursor: pointer; border-radius: var(--kcp-radius-sm); }
.auth-eye:hover { color: var(--kcp-color-text-secondary); }
.auth-eye:focus-visible { outline: none; box-shadow: var(--kcp-shadow-focus); }
.auth-eye i, .auth-eye .lucide { width: 16px; height: 16px; }
.auth-caps { display: flex; align-items: center; gap: var(--kcp-space-1); margin-top: var(--kcp-space-1);
  font-size: var(--kcp-text-caption); color: var(--kcp-color-warning); font-weight: 600; }
.auth-caps i, .auth-caps .lucide { width: 13px; height: 13px; }
.auth-strength { margin: var(--kcp-space-2) 0 var(--kcp-space-1); }
.auth-bars { display: flex; gap: var(--kcp-space-1); }
.auth-bars i { flex: 1; height: 4px; border-radius: var(--kcp-radius-pill); background: var(--kcp-color-border); }
.auth-bars i.on.t-bad { background: var(--kcp-color-error); }
.auth-bars i.on.t-warn { background: var(--kcp-color-warning); }
.auth-bars i.on.t-ok { background: var(--kcp-color-success); }
.auth-pw-meta { display: flex; justify-content: space-between; gap: var(--kcp-space-2); margin-top: var(--kcp-space-1);
  font-size: var(--kcp-text-caption); }
.auth-pw-lv { font-weight: 700; }
.auth-pw-lv.t-bad { color: var(--kcp-color-error); }
.auth-pw-lv.t-warn { color: var(--kcp-color-warning); }
.auth-pw-lv.t-ok { color: var(--kcp-color-success); }
.auth-match { display: flex; align-items: center; gap: var(--kcp-space-1); margin-top: var(--kcp-space-1);
  font-size: var(--kcp-text-caption); font-weight: 600; }
.auth-match i, .auth-match .lucide { width: 13px; height: 13px; }
.auth-match.t-ok { color: var(--kcp-color-success); }
.auth-match.t-bad { color: var(--kcp-color-error); }

@media (max-width: 720px) {
  .auth-card-wrap { padding: var(--kcp-space-3); }
  .auth-card { padding: var(--kcp-space-5) var(--kcp-space-4); }
}