:root {
  --bg: #ffffff;
  --ink: #2f3437;
  --muted: #8a8f94;
  --line: #e9e9e7;
  --accent: #2f7de1;
  font-family: "Pretendard", "Noto Sans KR", "Noto Sans CJK KR", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #191919;
    --ink: #e6e6e6;
    --muted: #8f8f8f;
    --line: #2f2f2f;
    --accent: #5a9cf0;
  }
}

body { margin: 0; }
#app { width: 320px; margin: 18vh auto; display: flex; flex-direction: column; gap: 10px; }
form { display: flex; flex-direction: column; gap: 10px; }
h1 { margin: 0 0 8px; font-size: 28px; }
.muted { margin: 0 0 4px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.error { margin: 0; color: #c4554d; font-size: 14px; }
input { font: inherit; color: inherit; border: 1px solid var(--line); border-radius: 6px; padding: 9px 12px; background: none; }
button { font: inherit; border: 0; cursor: pointer; background: var(--accent); color: white; padding: 9px; border-radius: 6px; }
.links { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.links a { color: var(--accent); }