:root { color-scheme: light dark; }
body {
  margin: 0;
  padding: 2.5rem 1.25rem;
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1a1a1a;
  background: #fff;
}
main { max-width: 32rem; margin: 0 auto; }
h1 { font-size: 1.5rem; margin: 0 0 0.75rem; }
p { margin: 0 0 1rem; }
/*
 * ⚠️ `.button`이 `display: inline-block`이라 `[hidden]`의 기본 `display: none`을 이긴다.
 * 이 규칙이 없으면 "JS가 채우기 전에는 숨긴다"는 계약이 조용히 깨져 **주소 없는 버튼이
 * 그대로 보인다** — 정확히 우리가 없애려던 죽은 버튼이다. 순서상 `.button`보다 뒤에
 * 두거나 `!important`가 필요한데, 의도를 분명히 하려고 후자를 쓴다.
 */
[hidden] { display: none !important; }
.button {
  display: inline-block;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  background: #4a90d9;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.muted { color: #666; font-size: 0.875rem; }
@media (prefers-color-scheme: dark) {
  body { color: #f2f2f2; background: #121212; }
  .muted { color: #a0a0a0; }
}