/* 앱과 같은 색이다 (app/lib/design/tokens.dart 의 안개 세이지). 값을 바꾸려면
   두 곳을 같이 본다 — 메일·이 화면·앱이 한 벌로 보여야 한다. */
:root{
  --paper:#F6F5F0; --surface:#FFFFFF; --ink:#3A3A33; --muted:#6C6859;
  --line:#E6E3DA; --accent:#4B564D; --coral:#B04D3F;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#141614; --surface:#1C1F1C; --ink:#E7E5DC; --muted:#9A968A;
    --line:#2C302C; --accent:#A9BCA9; --coral:#E4998C;
  }
}
*{box-sizing:border-box}
/* form·section 에 display 를 주면 UA 의 `[hidden]{display:none}` 을 이겨서
   숨긴 화면이 같이 보인다 — 인증 성공 밑에 비밀번호 폼이 뜨던 원인. */
[hidden]{display:none !important}
body{
  margin:0; min-height:100dvh; padding:24px;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper); color:var(--ink);
  font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-size:16px; line-height:1.7;
}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:32px; width:100%; max-width:420px;
  display:flex; flex-direction:column; gap:12px;
}
.brand{margin:0 0 8px; font-weight:700; font-size:17px}
h1{margin:0; font-size:22px; line-height:1.4; letter-spacing:-.01em; text-wrap:balance}
.body{margin:0; color:var(--ink)}
.hint{margin:8px 0 0; color:var(--muted); font-size:14px}
.error{margin:0; color:var(--coral); font-size:14px}
.field{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.field span{font-size:13px; color:var(--muted)}
input{
  font:inherit; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:12px; padding:14px 16px; width:100%;
}
input:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
button{
  font:inherit; font-weight:700; margin-top:20px; width:100%;
  background:var(--accent); color:var(--surface);
  border:0; border-radius:12px; padding:16px; cursor:pointer;
}
button[disabled]{opacity:.5; cursor:default}
form{display:flex; flex-direction:column; gap:4px; margin:0}