:root {
  --bg: #f7f7f8; --card: #ffffff; --fg: #18181b; --muted: #71717a;
  --line: #e4e4e7; --accent: #2563eb; --danger: #dc2626;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0b0b0d; --card: #16161a; --fg: #f4f4f5; --muted: #a1a1aa;
          --line: #27272a; --accent: #60a5fa; --danger: #f87171; }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
               "Noto Sans KR", system-ui, sans-serif;
  display: grid; place-items: center; padding: 1.5rem;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}
.gate { width: 100%; max-width: 340px; text-align: center; }
.brand { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.brand-mark { font-size: 2rem; }
h1 { font-size: 1.6rem; margin: 0; letter-spacing: -0.02em; }
.sub { color: var(--muted); margin: .4rem 0 2rem; font-size: .95rem; }
form { display: grid; gap: .7rem; }
input {
  width: 100%; padding: .95rem 1rem; font-size: 1.05rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card); color: var(--fg);
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
button {
  padding: .95rem 1rem; font-size: 1.05rem; font-weight: 600; border: 0; border-radius: 12px;
  background: var(--accent); color: #fff; cursor: pointer;
}
button:disabled { opacity: .55; cursor: progress; }
.msg { min-height: 1.3em; margin: .2rem 0 0; font-size: .9rem; color: var(--danger); }
.msg.info { color: var(--muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}