:root {
  --bg: #f7f6f2; --surface-raised: #ffffff; --wash: #efeee9;
  --ink-1: #141413; --ink-2: #55534d; --ink-3: #6e6c64;
  --rule: #e2e0d9; --rule-strong: #c9c7bf; --critical: #b42f2f; --focus: #141413;
  --kakao: #FEE500; --kakao-ink: rgba(0, 0, 0, .85); --naver: #03C75A;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --ctl: 6px; --dur-1: 120ms; --ease: cubic-bezier(.2, 0, 0, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141413; --surface-raised: #1f1f1d; --wash: #1f1f1d;
    --ink-1: #f2f1ec; --ink-2: #b8b6ad; --ink-3: #8f8d85;
    --rule: #2a2a27; --rule-strong: #3a3935; --critical: #e66767; --focus: #f2f1ec;
  }
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink-1); }
body {
  margin: 0; font: 400 15px/1.6 "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif;
  word-break: keep-all; overflow-wrap: anywhere;
}
.wrap { max-width: 400px; margin: 0 auto; padding: var(--s-8) var(--s-5) var(--s-16); text-align: left; }
.wordmark { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-10); font-size: 15px; font-weight: 600; }
.logo { flex: none; }
h1 { margin: 0 0 var(--s-2); font-size: 28px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }
h2 { margin: var(--s-8) 0 var(--s-2); font-size: 17px; line-height: 1.4; font-weight: 600; }
.sub { margin: 0 0 var(--s-8); color: var(--ink-2); }
p, ul { margin: 0 0 var(--s-3); }
ul { padding-left: var(--s-5); }
a { color: var(--ink-1); text-underline-offset: 3px; }
code { font-size: 13px; }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
label { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
input {
  height: 48px; padding: 0 var(--s-3); border: 1px solid var(--rule-strong); border-radius: var(--ctl);
  background: var(--surface-raised); color: var(--ink-1); font: inherit; width: 100%;
}
.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2); width: 100%; height: 48px; padding: 0 var(--s-4);
  border: 1px solid transparent; border-radius: var(--ctl); box-shadow: none;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color var(--dur-1) var(--ease);
}
.btn-kakao { background: var(--kakao); color: var(--kakao-ink); }
.btn-naver { background: var(--naver); color: #fff; }
.btn-google { background: #fff; color: #141413; border-color: var(--rule-strong); }
.btn-primary { background: var(--ink-1); color: var(--bg); }
.btn-secondary { background: transparent; color: var(--ink-1); border-color: var(--rule-strong); }
.btn-critical { background: var(--critical); color: #fff; }
.btn:hover:not(:disabled) { filter: brightness(.96); }
.btn:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] { opacity: .6; }
.soon { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.btn-kakao .soon, .btn-naver .soon, .btn-google .soon { color: inherit; opacity: .75; }
.divider { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-8) 0 var(--s-4); color: var(--ink-3); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.links { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-4); font-size: 13px; }
.msg { min-height: 1.5em; margin-top: var(--s-3); font-size: 13px; color: var(--ink-2); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); margin: var(--s-6) 0 var(--s-8); }
.facts dt { color: var(--ink-3); font-size: 13px; }
.facts dd { margin: 0; }
.danger { margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: var(--s-3); }
.danger h2 { margin: 0; color: var(--critical); }
.danger p { margin: 0; color: var(--ink-2); }
footer { margin-top: var(--s-16); font-size: 13px; color: var(--ink-3); }
footer a { color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
[hidden] { display: none !important; }