:root {
  color-scheme: light;
  --color-navy-950: #0b1220;
  --color-navy-900: #122033;
  --color-navy-850: #17263b;
  --color-navy-800: #1c2f46;
  --color-navy-700: #28415e;
  --color-navy-600: #40556f;
  --color-ivory-50: #fffdfa;
  --color-ivory-100: #fbf8f2;
  --color-ivory-150: #f5efe5;
  --color-ivory-200: #ede3d4;
  --color-ivory-250: #dfd1be;
  --color-stone-100: #ebe5dd;
  --color-stone-200: #d3cbc2;
  --color-stone-400: #817870;
  --color-stone-500: #685f57;
  --color-gold-100: #f8f1dd;
  --color-gold-300: #e6cc93;
  --color-gold-500: #c7a86a;
  --color-gold-700: #6f5123;
  --color-success-100: #edf8f0;
  --color-success-500: #2f7a51;
  --color-warning-100: #fef3e7;
  --color-warning-500: #cb7d26;
  --color-danger-100: #fceceb;
  --color-danger-500: #be4a46;
  --color-info-100: #edf3fe;
  --color-info-500: #365db7;
  --color-white: #ffffff;
  --color-black: #111111;
  --color-text-primary: rgba(18, 32, 51, 0.98);
  --color-text-secondary: rgba(18, 32, 51, 0.94);
  --color-text-tertiary: rgba(18, 32, 51, 0.93);
  --color-text-placeholder: rgba(61, 73, 88, 0.98);
  --color-text-disabled: rgba(18, 32, 51, 0.78);
  --color-text-inverse: rgba(255, 255, 255, 0.96);
  --color-text-inverse-secondary: rgba(255, 255, 255, 0.99);
  --color-text-inverse-tertiary: rgba(255, 255, 255, 0.95);
  --color-border-soft: rgba(18, 32, 51, 0.08);
  --color-border-medium: rgba(18, 32, 51, 0.14);
  --color-border-strong: rgba(18, 32, 51, 0.2);
  --color-surface: rgba(255, 255, 255, 0.84);
  --color-surface-strong: rgba(255, 255, 255, 0.96);
  --color-surface-contrast: rgba(12, 21, 33, 0.92);
  --color-surface-muted: rgba(245, 239, 229, 0.78);
  --color-overlay: rgba(10, 16, 28, 0.56);
  --color-overlay-strong: rgba(10, 16, 28, 0.78);
  --font-sans: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
  --font-serif: "Iropke Batang", "Nanum Myeongjo", "Times New Roman", serif;
  --font-mono: "SFMono-Regular", "Consolas", monospace;
  --font-scale: 1;
  --line-tight: 1.24;
  --line-normal: 1.55;
  --line-relaxed: 1.72;
  --text-11: 0.6875rem;
  --text-12: 0.75rem;
  --text-13: 0.8125rem;
  --text-14: 0.875rem;
  --text-15: 0.9375rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-20: 1.25rem;
  --text-24: 1.5rem;
  --text-28: 1.75rem;
  --text-32: 2rem;
  --text-40: 2.5rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-6: 0.375rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-14: 0.875rem;
  --space-16: 1rem;
  --space-18: 1.125rem;
  --space-20: 1.25rem;
  --space-22: 1.375rem;
  --space-24: 1.5rem;
  --space-28: 1.75rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-56: 3.5rem;
  --space-64: 4rem;
  --space-72: 4.5rem;
  --radius-sm: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.125rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 999px;
  --shadow-soft: 0 10px 30px rgba(23, 38, 59, 0.08);
  --shadow-medium: 0 16px 40px rgba(18, 32, 51, 0.12);
  --shadow-strong: 0 24px 60px rgba(18, 32, 51, 0.16);
  --shadow-glow: 0 18px 36px rgba(199, 168, 106, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --blur-soft: 18px;
  --content-width: 1440px;
  --sidebar-width: 18rem;
  --topbar-height: 5.5rem;
  --mobile-header-height: 4.75rem;
  --mobile-tabbar-height: 5.25rem;
  --motion-fast: 180ms cubic-bezier(0.22, 1, 0.36, 1);
  --motion-base: 280ms cubic-bezier(0.22, 1, 0.36, 1);
  --motion-slow: 520ms cubic-bezier(0.22, 1, 0.36, 1);
  --motion-turn: 760ms cubic-bezier(0.65, 0.05, 0.18, 1);
  --page-paper: #f8f3ea;
  --page-paper-edge: #ece2d2;
  --page-shadow: rgba(12, 21, 33, 0.22);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

html.is-large-text {
  --font-scale: 1.08;
}

html.is-high-contrast {
  --color-text-primary: rgba(8, 12, 18, 0.98);
  --color-text-secondary: rgba(8, 12, 18, 0.9);
  --color-text-tertiary: rgba(8, 12, 18, 0.86);
  --color-text-placeholder: rgba(8, 12, 18, 0.86);
  --color-text-disabled: rgba(8, 12, 18, 0.74);
  --color-text-inverse: rgba(255, 255, 255, 1);
  --color-text-inverse-secondary: rgba(255, 255, 255, 0.96);
  --color-text-inverse-tertiary: rgba(255, 255, 255, 0.88);
  --color-border-soft: rgba(8, 12, 18, 0.16);
  --color-border-medium: rgba(8, 12, 18, 0.26);
  --color-surface: rgba(255, 255, 255, 0.94);
  --color-surface-strong: rgba(255, 255, 255, 1);
  --shadow-soft: 0 0 0 1px rgba(8, 12, 18, 0.12), 0 14px 36px rgba(8, 12, 18, 0.08);
}

html.is-reduced-motion {
  --motion-fast: 1ms linear;
  --motion-base: 1ms linear;
  --motion-slow: 1ms linear;
  --motion-turn: 1ms linear;
  scroll-behavior: auto;
}

@media (prefers-reduced-motion: reduce) {
  html {
    --motion-fast: 1ms linear;
    --motion-base: 1ms linear;
    --motion-slow: 1ms linear;
    --motion-turn: 1ms linear;
    scroll-behavior: auto;
  }
}

@media (max-width: 1024px) {
  :root {
    --sidebar-width: 16.5rem;
    --topbar-height: 5rem;
  }
}

@media (max-width: 767px) {
  :root {
    --mobile-header-height: 4.5rem;
    --mobile-tabbar-height: 5rem;
  }
}