/* 로그인 화면 — 새 화면(웹판)의 토큰·바탕(/w/공통/tokens.css·base.css) 위에 배치만. 색은 토큰으로만. */
body { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
       padding: var(--space-4); background: var(--side); }
.판 { width: 100%; max-width: 400px; background: var(--paper); border: 1px solid var(--line);
      border-radius: var(--radius-md); padding: var(--space-6); }
.머리 { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.머리 .타일 { width: 36px; height: 36px; padding: 7px; border-radius: 9px; }
.머리 h1 { font-size: var(--text-lg); }
.작은 { margin: 0; font-size: var(--text-xs); color: var(--muted); }
.안내 { margin: 0 0 var(--space-4); font-size: var(--text-sm); }
form { display: flex; flex-direction: column; gap: var(--space-4); }
form[hidden] { display: none; }
label { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm); font-weight: 600; }
label small { font-weight: 400; color: var(--muted); }
input { width: 100%; min-height: var(--tap); padding: 0 var(--space-3); font: inherit; font-weight: 400; font-size: var(--text-md);
        color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
        transition: border-color var(--dur-fast) var(--ease-out); }
input:hover { border-color: var(--muted); }
input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--accent); }
input:user-invalid { border-color: var(--bad); }
form .단추 { width: 100%; margin-top: var(--space-2); }
form .단추:disabled { cursor: progress; }
#알림 { min-height: 1.5em; margin: var(--space-4) 0 0; color: var(--bad); font-size: var(--text-sm); }
#알림:empty { margin: 0; min-height: 0; }
@media (max-width: 420px) {
  body { align-items: flex-start; padding: 0; background: var(--paper); }
  .판 { border: 0; border-radius: 0; padding: var(--space-8) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { input { transition: none; } }