/* Readspace — generated from tokens.json */
@font-face { font-family: "Pretendard Variable"; src: url("../fonts/PretendardVariable.302ec55f5b43.woff2") format("woff2"); font-weight: 45 920; font-style: normal; font-display: swap; }
:root, [data-theme="light"] {
  --bg: #ffffff;
  --surface: #f9fafb;
  --surface-sunken: #f2f4f6;
  --surface-raised: #ffffff;
  --border: #e5e8eb;
  --border-strong: #d1d6db;
  --text: #191f28;
  --text-body: #333d4b;
  --text-subtle: #4e5968;
  --text-secondary: #6b7684;
  --text-disabled: #b0b8c1;
  --primary: #3182f6;
  --primary-strong: #2171ea;
  --primary-strong-hover: #1b64da;
  --primary-text: #1b64da;
  --primary-soft: #e8f3ff;
  --on-primary: #ffffff;
  --success: #139a43;
  --success-text: #15803d;
  --success-soft: #eaf7ee;
  --warning-text: #b45309;
  --warning-soft: #fff5e6;
  --danger-text: #d02323;
  --danger-soft: #fef0f0;
  --scrim: #191f2866;
  --scrim-strong: #0b0d10e6;
  --on-scrim: #ffffff;
  --syntax-keyword: #c2255c;
  --syntax-string: #1a7f4b;
  --syntax-number: #b45309;
  --syntax-function: #1b64da;
  --syntax-attr: #7a3dc8;
  --syntax-comment: #637081;
  --cover-blue: #2f5bd3;
  --cover-teal: #0f766e;
  --cover-ink: #2a3240;
  --cover-orange: #bf4f1b;
  --cover-berry: #a3365f;
  --cover-green: #23704f;
  --cover-violet: #5b4bc4;
  --cover-amber: #94650f;
  --on-cover: #ffffff;
  --shadow-xs: 0 1px 2px #191f280f;
  --shadow-sm: 0 1px 3px #191f2814, 0 1px 2px #191f280a;
  --shadow-md: 0 6px 16px -4px #191f281a, 0 2px 4px #191f280a;
  --shadow-lg: 0 16px 40px -8px #191f2829, 0 4px 12px #191f2810;
  --shadow-cover: 0 1px 2px #191f281f, 0 8px 18px -6px #191f2840;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #3182f6;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111318;
    --surface: #16191e;
    --surface-sunken: #1e2228;
    --surface-raised: #1a1d23;
    --border: #2a2f37;
    --border-strong: #3a404a;
    --text: #f2f4f6;
    --text-body: #d1d6db;
    --text-subtle: #b0b8c1;
    --text-secondary: #8b95a1;
    --text-disabled: #4e5968;
    --primary: #4c9aff;
    --primary-strong: #2171ea;
    --primary-strong-hover: #1b64da;
    --primary-text: #6aadff;
    --primary-soft: #172a45;
    --on-primary: #ffffff;
    --success: #22c55e;
    --success-text: #4ade80;
    --success-soft: #12281a;
    --warning-text: #fbbf24;
    --warning-soft: #2e2210;
    --danger-text: #f87171;
    --danger-soft: #301617;
    --scrim: #000000a3;
    --scrim-strong: #000000eb;
    --syntax-keyword: #ff7aa8;
    --syntax-string: #6edc9a;
    --syntax-number: #fbbf24;
    --syntax-function: #6aadff;
    --syntax-attr: #c4a1ff;
    --syntax-comment: #8b95a1;
    --shadow-xs: 0 1px 2px #00000066;
    --shadow-sm: 0 1px 3px #00000080;
    --shadow-md: 0 8px 20px -4px #000000a3;
    --shadow-lg: 0 20px 48px -8px #000000c2;
    --shadow-cover: 0 2px 4px #00000080, 0 10px 22px -6px #000000b3;
    --focus-ring: 0 0 0 2px #111318, 0 0 0 4px #4c9aff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111318;
  --surface: #16191e;
  --surface-sunken: #1e2228;
  --surface-raised: #1a1d23;
  --border: #2a2f37;
  --border-strong: #3a404a;
  --text: #f2f4f6;
  --text-body: #d1d6db;
  --text-subtle: #b0b8c1;
  --text-secondary: #8b95a1;
  --text-disabled: #4e5968;
  --primary: #4c9aff;
  --primary-strong: #2171ea;
  --primary-strong-hover: #1b64da;
  --primary-text: #6aadff;
  --primary-soft: #172a45;
  --on-primary: #ffffff;
  --success: #22c55e;
  --success-text: #4ade80;
  --success-soft: #12281a;
  --warning-text: #fbbf24;
  --warning-soft: #2e2210;
  --danger-text: #f87171;
  --danger-soft: #301617;
  --scrim: #000000a3;
  --scrim-strong: #000000eb;
  --syntax-keyword: #ff7aa8;
  --syntax-string: #6edc9a;
  --syntax-number: #fbbf24;
  --syntax-function: #6aadff;
  --syntax-attr: #c4a1ff;
  --syntax-comment: #8b95a1;
  --shadow-xs: 0 1px 2px #00000066;
  --shadow-sm: 0 1px 3px #00000080;
  --shadow-md: 0 8px 20px -4px #000000a3;
  --shadow-lg: 0 20px 48px -8px #000000c2;
  --shadow-cover: 0 2px 4px #00000080, 0 10px 22px -6px #000000b3;
  --focus-ring: 0 0 0 2px #111318, 0 0 0 4px #4c9aff;
  color-scheme: dark;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --size-control-sm: 32px;
  --size-control-md: 40px;
  --size-control-lg: 48px;
  --size-header: 56px;
  --size-sidebar: 272px;
  --size-toc: 208px;
  --size-prose: 720px;
  --size-container: 1200px;
  --layer-header: 30;
  --layer-drawer: 40;
  --layer-menu: 50;
  --layer-dialog: 60;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "D2Coding", monospace;
}
.display { font-family: var(--font-sans); font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; }
.title { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.015em; }
.headline { font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; }
.overline { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.02em; }
.prose-h1 { font-family: var(--font-sans); font-size: 34px; line-height: 44px; font-weight: 700; letter-spacing: -0.025em; }
.prose-lead { font-family: var(--font-sans); font-size: 18px; line-height: 30px; font-weight: 400; }
.prose-h2 { font-family: var(--font-sans); font-size: 26px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; }
.prose-h3 { font-family: var(--font-sans); font-size: 21px; line-height: 30px; font-weight: 700; letter-spacing: -0.015em; }
.prose-h4 { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.prose-body { font-family: var(--font-sans); font-size: 17px; line-height: 1.8; font-weight: 400; }
.prose-small { font-family: var(--font-sans); font-size: 15px; line-height: 24px; font-weight: 400; }
.prose-caption { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.code { font-family: var(--font-mono); font-size: 14px; line-height: 1.7; font-weight: 400; }
.code-inline { font-family: var(--font-mono); font-size: 0.875em; line-height: 1.6; font-weight: 500; }