:root {
  color-scheme: light;
  --ui-page: #f7f8f6;
  --ui-surface: #ffffff;
  --ui-surface-raised: #ffffff;
  --ui-surface-muted: #f0f3ee;
  --ui-text: #20251f;
  --ui-text-secondary: #626960;
  --ui-text-tertiary: #626960;
  --ui-border: #dce1d9;
  --ui-border-strong: #c5ccc3;
  --ui-primary: #2f6b4f;
  --ui-primary-hover: #275c44;
  --ui-primary-contrast: #ffffff;
  --ui-accent: #b9dc69;
  --ui-accent-soft: #eef7d8;
  --ui-success: #397a53;
  --ui-success-soft: #e8f4eb;
  --ui-warning: #9a651e;
  --ui-warning-soft: #fff4d8;
  --ui-danger: #ad4545;
  --ui-danger-soft: #faeaea;
  --ui-code: #171b18;
  --ui-code-text: #dce8dd;
  --ui-overlay: rgba(17, 23, 19, 0.45);
  --ui-shadow-sm: 0 1px 2px rgba(27, 36, 29, 0.05);
  --ui-shadow-md: 0 12px 32px rgba(27, 36, 29, 0.08);
  --ui-radius-sm: 6px;
  --ui-radius-md: 10px;
  --ui-radius-lg: 16px;
  --ui-radius-xs: 4px;
  --ui-radius-pill: 999px;
  --ui-font-meta: 12px;
  --ui-font-small: 13px;
  --ui-font-body: 14px;
  --ui-font-input: 15px;
  --ui-font-prose: 16px;
  --ui-font-heading: 18px;
  --ui-font-page-min: 24px;
  --ui-font-page-max: 30px;
  --ui-control-height: 40px;
  --ui-control-compact: 36px;
  --ui-code-key: #a8cfb0;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-space-12: 48px;
  --ui-space-16: 64px;
  --ui-header-height: 48px;
  --ui-sidebar-width: 232px;
  --ui-content-width: 1200px;
  --ui-font: "Segoe UI", "Noto Sans KR", Arial, sans-serif;
  --ui-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ui-page: #171a18;
  --ui-surface: #1f2421;
  --ui-surface-raised: #252b27;
  --ui-surface-muted: #292f2b;
  --ui-text: #eef2ed;
  --ui-text-secondary: #a2ada3;
  --ui-text-tertiary: #a2ada3;
  --ui-border: #353e37;
  --ui-border-strong: #4a554c;
  --ui-primary: #96c5a2;
  --ui-primary-hover: #aed3b6;
  --ui-primary-contrast: #152319;
  --ui-accent: #b9dc69;
  --ui-accent-soft: #2e3826;
  --ui-success: #96c5a2;
  --ui-success-soft: #24382b;
  --ui-warning: #e3b767;
  --ui-warning-soft: #3a3021;
  --ui-danger: #e79a98;
  --ui-danger-soft: #3f2929;
  --ui-code: #101311;
  --ui-code-text: #dce8dd;
  --ui-overlay: rgba(5, 8, 6, 0.68);
  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
  --ui-shadow-md: 0 14px 36px rgba(0, 0, 0, 0.25);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ui-page); scroll-behavior: smooth; }
body { margin: 0; color: var(--ui-text); background: var(--ui-page); font-family: var(--ui-font); font-size: var(--ui-font-body); line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img, svg { display: block; }
h1, h2, h3, p { margin-top: 0; }
code, pre { font-family: var(--ui-mono); }
::selection { color: #20251f; background: var(--ui-accent); }
[hidden] { display: none !important; }

.ui-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}