@font-face {
  font-family: 'Pretendard';
  src: url('fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 45 930;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --stage: #000000;
  --ink: rgba(255, 255, 255, 0.85);
  --ink-2: rgba(255, 255, 255, 0.6);
  --ink-3: rgba(255, 255, 255, 0.35);
  --line: rgba(255, 255, 255, 0.12);
  --primary: #0A84FF;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --stage: #ffffff;
    --ink: rgba(0, 0, 0, 0.85);
    --ink-2: rgba(0, 0, 0, 0.6);
    --ink-3: rgba(0, 0, 0, 0.35);
    --line: rgba(0, 0, 0, 0.1);
    --primary: #007AFF;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--stage); }
body {
  color: var(--ink);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  line-height: 1.7;
}

.doc { max-width: 760px; margin: 0 auto; padding: 40px 20px 56px; }
.back { margin: 0 0 28px; font-size: 14px; }
.back a { color: var(--ink-2); text-decoration: none; }
.back a:hover { color: var(--ink); }

h1 { margin: 0 0 16px; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
h2 { margin: 36px 0 10px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
p, li { font-size: 15px; color: var(--ink); }
p { margin: 0 0 10px; }
.lead { color: var(--ink-2); }
ul { margin: 0 0 10px; padding-left: 20px; }
li { margin: 4px 0; }
b { font-weight: 600; }
a { color: var(--primary); }
a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.doc-foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); }
.doc-foot p { margin: 0 0 4px; font-size: 12px; color: var(--ink-3); }

@media (max-width: 480px) {
  .doc { padding: 28px 16px 40px; }
  h1 { font-size: 24px; }
  h2 { font-size: 17px; }
}
