:root {
  --bg: #f4f6f9; --surface: #ffffff; --surface-2: #eef1f6; --ink: #18213a; --ink-2: #4b556f;
  --line: #d8dee9; --pen: #2f55d4; --pen-ink: #ffffff; --hl: #ffe45c; --danger: #b42318;
  color-scheme: light; box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0e1321; --surface: #161d30; --surface-2: #1d263d; --ink: #e8ecf6; --ink-2: #a8b2cb;
    --line: #2b3652; --pen: #86a2ff; --pen-ink: #0e1321; --hl: #f2d64a; --danger: #ff8a80; color-scheme: dark; }
}
*, *::before, *::after { box-sizing: inherit; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Public Sans', 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.5; }
:focus-visible { outline: 3px solid var(--pen); outline-offset: 2px; }
.stage { min-height: 100%; display: grid; place-items: center; padding: 28px 18px; }
.card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 34px 30px 30px; }
.mark { position: relative; width: 58px; height: 58px; margin-bottom: 22px; }
.sheet { position: absolute; width: 38px; height: 50px; border-radius: 3px; border: 1px solid var(--line); background: var(--surface); }
.s3 { left: 20px; top: 0; transform: rotate(9deg); background: #101a2e; border-color: #101a2e; }
.s2 { left: 11px; top: 3px; transform: rotate(3deg); background: var(--surface-2); }
.s1 { left: 2px; top: 6px; transform: rotate(-4deg); padding: 9px 7px; }
.s1 i { display: block; height: 4px; border-radius: 2px; background: var(--line); margin-bottom: 6px; }
.s1 i:first-child { background: var(--hl); width: 70%; }
h1 { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; font-weight: 600; font-size: 30px; line-height: 1.12; margin: 0 0 6px; letter-spacing: -0.01em; }
.sub { margin: 0 0 22px; color: var(--ink-2); }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
label { font-weight: 600; font-size: 15px; }
input { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; }
.pw { position: relative; }
.pw input { padding-right: 70px; }
.pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); background: transparent; border: 0; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.go { width: 100%; font: inherit; font-weight: 600; color: var(--pen-ink); background: var(--pen); border: 1px solid var(--pen); border-radius: 8px; padding: 12px 16px; cursor: pointer; margin-top: 4px; }
.go:disabled { opacity: .6; cursor: progress; }
.notice { border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 10px 12px; font-size: 14.5px; margin-bottom: 16px; }
.notice.err { border-color: var(--danger); }
.hidden { display: none !important; }