/* WIZON 디자인 시스템 1.0.0 · 디자인 토큰 — tokens.json 에서 생성(python3 tokens/build.py). 직접 고치지 말 것. */
/* 테마: OS 설정을 따른다. 강제는 <html data-theme="dark|light">, 부분 영역도 data-theme 로 바꿀 수 있다. */
/* 글자 스타일: font: var(--wz-typography-body); letter-spacing: var(--wz-typography-body-letter-spacing); */

/* 1. Primitive — 원시값 */
:root {
  --wz-color-blue-50: #EEF3FF;
  --wz-color-blue-100: #DCE6FF;
  --wz-color-blue-200: #B9CCFF;
  --wz-color-blue-300: #8AABFF;
  --wz-color-blue-400: #5682FF;
  --wz-color-blue-500: #1655FF;
  --wz-color-blue-600: #0F44D6;
  --wz-color-blue-700: #0B35A8;
  --wz-color-blue-750: #0A2E91;
  --wz-color-blue-800: #08277A;
  --wz-color-blue-900: #061A52;
  --wz-color-sky-50: #F2F6FF;
  --wz-color-sky-100: #DCEBFF;
  --wz-color-sky-200: #BBD8FF;
  --wz-color-sky-300: #9BC3FF;
  --wz-color-sky-400: #73B0FF;
  --wz-color-neutral-50: #F5F7FB;
  --wz-color-neutral-100: #EBEFF5;
  --wz-color-neutral-200: #DCE2EC;
  --wz-color-neutral-300: #B8C2D4;
  --wz-color-neutral-400: #949FB4;
  --wz-color-neutral-500: #7F8AA1;
  --wz-color-neutral-600: #646F88;
  --wz-color-neutral-700: #4E5970;
  --wz-color-neutral-800: #2C3954;
  --wz-color-neutral-825: #25324B;
  --wz-color-neutral-850: #1E2A42;
  --wz-color-neutral-900: #172136;
  --wz-color-neutral-925: #111B2E;
  --wz-color-neutral-950: #0B1220;
  --wz-color-midnight: #04021A;
  --wz-color-white: #FFFFFF;
  --wz-color-gray: #707781;
  --wz-color-green-50: #E8F8EC;
  --wz-color-green-400: #30D158;
  --wz-color-green-500: #34C759;
  --wz-color-green-700: #1A7F37;
  --wz-color-green-950: #0C2615;
  --wz-color-red-50: #FFF1F0;
  --wz-color-red-200: #FF8E86;
  --wz-color-red-300: #FF6961;
  --wz-color-red-400: #FF453A;
  --wz-color-red-500: #FF3B30;
  --wz-color-red-700: #D70015;
  --wz-color-red-800: #9F1116;
  --wz-color-red-900: #6A1313;
  --wz-color-red-950: #3A0F0D;
  --wz-color-orange-50: #FFF4E5;
  --wz-color-orange-400: #FF9F0A;
  --wz-color-orange-500: #C87500;
  --wz-color-orange-700: #B25000;
  --wz-color-orange-950: #3A2205;
  --wz-color-teal-400: #2EC4A0;
  --wz-color-teal-500: #009B7D;
  --wz-color-magenta-400: #E86AB8;
  --wz-color-magenta-500: #D6409F;
  --wz-color-cyan-400: #70D7FF;
  --wz-color-cyan-500: #0691D1;
  --wz-color-brown-400: #C48A5A;
  --wz-color-brown-500: #7A4A21;
  --wz-color-neutral-alpha-950-48: rgba(11, 18, 32, 0.48);
  --wz-color-neutral-alpha-950-72: rgba(11, 18, 32, 0.72);
  --wz-space-4: 4px;
  --wz-space-8: 8px;
  --wz-space-12: 12px;
  --wz-space-16: 16px;
  --wz-space-24: 24px;
  --wz-space-32: 32px;
  --wz-space-48: 48px;
  --wz-space-64: 64px;
  --wz-radius-4: 4px;
  --wz-radius-8: 8px;
  --wz-radius-12: 12px;
  --wz-radius-16: 16px;
  --wz-radius-24: 24px;
  --wz-radius-full: 9999px;
  --wz-font-family-korean: "WIZON Quote", "Pretendard", "Inter", system-ui, sans-serif;
  --wz-font-family-latin: "WIZON Quote", "Inter", "Pretendard", system-ui, sans-serif;
  --wz-font-family-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  --wz-font-size-13: 0.8125rem;
  --wz-font-size-14: 0.875rem;
  --wz-font-size-15: 0.9375rem;
  --wz-font-size-17: 1.0625rem;
  --wz-font-size-20: 1.25rem;
  --wz-font-size-22: 1.375rem;
  --wz-font-size-28: 1.75rem;
  --wz-font-size-40: 2.5rem;
  --wz-font-size-64: 4rem;
  --wz-font-size-128: 8rem;
  --wz-font-line-height-18: 1.125rem;
  --wz-font-line-height-20: 1.25rem;
  --wz-font-line-height-22: 1.375rem;
  --wz-font-line-height-26: 1.625rem;
  --wz-font-line-height-30: 1.875rem;
  --wz-font-line-height-36: 2.25rem;
  --wz-font-line-height-48: 3rem;
  --wz-font-line-height-72: 4.5rem;
  --wz-font-line-height-128: 8rem;
  --wz-font-weight-regular: 400;
  --wz-font-weight-medium: 500;
  --wz-font-weight-bold: 700;
  --wz-font-letter-spacing-tight: -0.02em;
  --wz-font-letter-spacing-normal: 0em;
  --wz-motion-duration-fast: 150ms;
  --wz-motion-duration-normal: 250ms;
  --wz-motion-duration-slow: 400ms;
  --wz-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --wz-motion-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
}

/* 2. Semantic — 모드 무관 (글자 합성 · z 계층) */
:root {
  --wz-typography-large-title: var(--wz-font-weight-bold) var(--wz-font-size-64)/var(--wz-font-line-height-72) var(--wz-font-family-korean);
  --wz-typography-large-title-letter-spacing: -0.02em;
  --wz-typography-title: var(--wz-font-weight-bold) var(--wz-font-size-40)/var(--wz-font-line-height-48) var(--wz-font-family-korean);
  --wz-typography-title-letter-spacing: -0.02em;
  --wz-typography-title-small: var(--wz-font-weight-bold) var(--wz-font-size-28)/var(--wz-font-line-height-36) var(--wz-font-family-korean);
  --wz-typography-title-small-letter-spacing: -0.02em;
  --wz-typography-headline: var(--wz-font-weight-bold) var(--wz-font-size-22)/var(--wz-font-line-height-30) var(--wz-font-family-korean);
  --wz-typography-headline-letter-spacing: 0em;
  --wz-typography-lead: var(--wz-font-weight-regular) var(--wz-font-size-20)/var(--wz-font-line-height-30) var(--wz-font-family-korean);
  --wz-typography-lead-letter-spacing: 0em;
  --wz-typography-subheadline: var(--wz-font-weight-medium) var(--wz-font-size-15)/var(--wz-font-line-height-20) var(--wz-font-family-korean);
  --wz-typography-subheadline-letter-spacing: 0em;
  --wz-typography-body: var(--wz-font-weight-regular) var(--wz-font-size-17)/var(--wz-font-line-height-26) var(--wz-font-family-korean);
  --wz-typography-body-letter-spacing: 0em;
  --wz-typography-body-medium: var(--wz-font-weight-medium) var(--wz-font-size-17)/var(--wz-font-line-height-26) var(--wz-font-family-korean);
  --wz-typography-body-medium-letter-spacing: 0em;
  --wz-typography-body-dense: var(--wz-font-weight-regular) var(--wz-font-size-14)/var(--wz-font-line-height-20) var(--wz-font-family-korean);
  --wz-typography-body-dense-letter-spacing: 0em;
  --wz-typography-body-small: var(--wz-font-weight-regular) var(--wz-font-size-14)/var(--wz-font-line-height-22) var(--wz-font-family-korean);
  --wz-typography-body-small-letter-spacing: 0em;
  --wz-typography-caption: var(--wz-font-weight-medium) var(--wz-font-size-13)/var(--wz-font-line-height-18) var(--wz-font-family-korean);
  --wz-typography-caption-letter-spacing: 0em;
  --wz-typography-display: var(--wz-font-weight-bold) var(--wz-font-size-128)/var(--wz-font-line-height-128) var(--wz-font-family-korean);
  --wz-typography-display-letter-spacing: -0.02em;
  --wz-typography-measure-prose: 35em;
  --wz-z-dropdown: 1000;
  --wz-z-sticky: 1100;
  --wz-z-overlay: 1200;
  --wz-z-modal: 1300;
  --wz-z-toast: 1400;
  --wz-z-tooltip: 1500;
  --wz-z-skip-link: 1600;
}

/* 2. Semantic — 라이트(기본) */
:root, [data-theme="light"] {
  color-scheme: light;
  --wz-color-brand-primary: var(--wz-color-blue-500);
  --wz-color-brand-ink: var(--wz-color-midnight);
  --wz-color-bg-default: var(--wz-color-neutral-50);
  --wz-color-bg-subtle: var(--wz-color-neutral-100);
  --wz-color-surface-default: var(--wz-color-white);
  --wz-color-surface-raised: var(--wz-color-white);
  --wz-color-surface-default-hover: var(--wz-color-neutral-50);
  --wz-color-surface-default-pressed: var(--wz-color-neutral-100);
  --wz-color-surface-raised-hover: var(--wz-color-neutral-50);
  --wz-color-surface-raised-pressed: var(--wz-color-neutral-100);
  --wz-color-text-primary: var(--wz-color-neutral-900);
  --wz-color-text-secondary: var(--wz-color-neutral-700);
  --wz-color-text-tertiary: var(--wz-color-neutral-600);
  --wz-color-text-disabled: var(--wz-color-neutral-400);
  --wz-color-text-inverse: var(--wz-color-white);
  --wz-color-action-primary: var(--wz-color-blue-500);
  --wz-color-action-primary-hover: var(--wz-color-blue-600);
  --wz-color-action-primary-pressed: var(--wz-color-blue-700);
  --wz-color-action-subtle: var(--wz-color-blue-50);
  --wz-color-action-subtle-hover: var(--wz-color-blue-100);
  --wz-color-action-subtle-pressed: var(--wz-color-blue-200);
  --wz-color-action-disabled: var(--wz-color-neutral-200);
  --wz-color-border-default: var(--wz-color-neutral-200);
  --wz-color-border-strong: var(--wz-color-neutral-500);
  --wz-color-border-focus: var(--wz-color-blue-500);
  --wz-color-status-success: var(--wz-color-green-700);
  --wz-color-status-success-subtle: var(--wz-color-green-50);
  --wz-color-status-warning: var(--wz-color-orange-700);
  --wz-color-status-warning-subtle: var(--wz-color-orange-50);
  --wz-color-status-danger: var(--wz-color-red-700);
  --wz-color-status-danger-hover: var(--wz-color-red-800);
  --wz-color-status-danger-pressed: var(--wz-color-red-900);
  --wz-color-status-danger-subtle: var(--wz-color-red-50);
  --wz-color-status-info: var(--wz-color-blue-600);
  --wz-color-status-info-subtle: var(--wz-color-blue-50);
  --wz-color-data-1: var(--wz-color-blue-500);
  --wz-color-data-2: var(--wz-color-orange-500);
  --wz-color-data-3: var(--wz-color-teal-500);
  --wz-color-data-4: var(--wz-color-magenta-500);
  --wz-color-data-5: var(--wz-color-cyan-500);
  --wz-color-data-6: var(--wz-color-brown-500);
  --wz-color-data-muted: var(--wz-color-neutral-300);
  --wz-color-scrim: var(--wz-color-neutral-alpha-950-48);
  --wz-shadow-1: 0px 8px 24px 0px rgba(15, 26, 51, 0.1);
  --wz-shadow-2: 0px 16px 48px 0px rgba(15, 26, 51, 0.16);
  --wz-control-height-s: 36px;
  --wz-control-height-m: 44px;
  --wz-control-height-l: 52px;
  --wz-control-hit-min: 44px;
  --wz-focus-ring-width: 2px;
  --wz-focus-ring-offset: 2px;
  --wz-icon-size-16: 16px;
  --wz-icon-size-20: 20px;
  --wz-icon-size-24: 24px;
  --wz-icon-size-32: 32px;
  --wz-icon-stroke-16: 2px;
  --wz-icon-stroke-20: 2px;
  --wz-icon-stroke-24: 1.5px;
  --wz-icon-stroke-32: 1.5px;
  --wz-elevation-raised-shadow: var(--wz-shadow-1);
  --wz-elevation-raised-surface: var(--wz-color-surface-raised);
  --wz-elevation-overlay-shadow: var(--wz-shadow-2);
  --wz-elevation-overlay-surface: var(--wz-color-surface-raised);
  --wz-elevation-modal-shadow: var(--wz-shadow-2);
  --wz-elevation-modal-surface: var(--wz-color-surface-raised);
  --wz-breakpoint-desktop: 1024px;
}

/* 2. Semantic — 다크 */
[data-theme="dark"] {
  color-scheme: dark;
  --wz-color-bg-default: var(--wz-color-neutral-950);
  --wz-color-bg-subtle: var(--wz-color-neutral-900);
  --wz-color-surface-default: var(--wz-color-neutral-925);
  --wz-color-surface-raised: var(--wz-color-neutral-850);
  --wz-color-surface-default-hover: var(--wz-color-neutral-900);
  --wz-color-surface-default-pressed: var(--wz-color-neutral-850);
  --wz-color-surface-raised-hover: var(--wz-color-neutral-825);
  --wz-color-surface-raised-pressed: var(--wz-color-neutral-800);
  --wz-color-text-primary: var(--wz-color-sky-50);
  --wz-color-text-secondary: var(--wz-color-neutral-300);
  --wz-color-text-tertiary: var(--wz-color-neutral-400);
  --wz-color-text-disabled: var(--wz-color-neutral-700);
  --wz-color-text-inverse: var(--wz-color-neutral-950);
  --wz-color-action-primary: var(--wz-color-sky-300);
  --wz-color-action-primary-hover: var(--wz-color-sky-200);
  --wz-color-action-primary-pressed: var(--wz-color-sky-400);
  --wz-color-action-subtle: var(--wz-color-blue-900);
  --wz-color-action-subtle-hover: var(--wz-color-blue-800);
  --wz-color-action-subtle-pressed: var(--wz-color-blue-750);
  --wz-color-action-disabled: var(--wz-color-neutral-850);
  --wz-color-border-default: var(--wz-color-neutral-800);
  --wz-color-border-focus: var(--wz-color-sky-300);
  --wz-color-status-success: var(--wz-color-green-400);
  --wz-color-status-success-subtle: var(--wz-color-green-950);
  --wz-color-status-warning: var(--wz-color-orange-400);
  --wz-color-status-warning-subtle: var(--wz-color-orange-950);
  --wz-color-status-danger: var(--wz-color-red-300);
  --wz-color-status-danger-hover: var(--wz-color-red-200);
  --wz-color-status-danger-pressed: var(--wz-color-red-500);
  --wz-color-status-danger-subtle: var(--wz-color-red-950);
  --wz-color-status-info: var(--wz-color-sky-300);
  --wz-color-status-info-subtle: var(--wz-color-blue-900);
  --wz-color-data-1: var(--wz-color-blue-400);
  --wz-color-data-2: var(--wz-color-orange-400);
  --wz-color-data-3: var(--wz-color-teal-400);
  --wz-color-data-4: var(--wz-color-magenta-400);
  --wz-color-data-5: var(--wz-color-cyan-400);
  --wz-color-data-6: var(--wz-color-brown-400);
  --wz-color-data-muted: var(--wz-color-neutral-700);
  --wz-color-scrim: var(--wz-color-neutral-alpha-950-72);
  --wz-shadow-1: none;
  --wz-shadow-2: none;
  --wz-elevation-raised-shadow: var(--wz-shadow-1);
  --wz-elevation-raised-surface: var(--wz-color-surface-raised);
  --wz-elevation-overlay-shadow: var(--wz-shadow-2);
  --wz-elevation-overlay-surface: var(--wz-color-neutral-825);
  --wz-elevation-modal-shadow: var(--wz-shadow-2);
  --wz-elevation-modal-surface: var(--wz-color-neutral-825);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --wz-color-bg-default: var(--wz-color-neutral-950);
    --wz-color-bg-subtle: var(--wz-color-neutral-900);
    --wz-color-surface-default: var(--wz-color-neutral-925);
    --wz-color-surface-raised: var(--wz-color-neutral-850);
    --wz-color-surface-default-hover: var(--wz-color-neutral-900);
    --wz-color-surface-default-pressed: var(--wz-color-neutral-850);
    --wz-color-surface-raised-hover: var(--wz-color-neutral-825);
    --wz-color-surface-raised-pressed: var(--wz-color-neutral-800);
    --wz-color-text-primary: var(--wz-color-sky-50);
    --wz-color-text-secondary: var(--wz-color-neutral-300);
    --wz-color-text-tertiary: var(--wz-color-neutral-400);
    --wz-color-text-disabled: var(--wz-color-neutral-700);
    --wz-color-text-inverse: var(--wz-color-neutral-950);
    --wz-color-action-primary: var(--wz-color-sky-300);
    --wz-color-action-primary-hover: var(--wz-color-sky-200);
    --wz-color-action-primary-pressed: var(--wz-color-sky-400);
    --wz-color-action-subtle: var(--wz-color-blue-900);
    --wz-color-action-subtle-hover: var(--wz-color-blue-800);
    --wz-color-action-subtle-pressed: var(--wz-color-blue-750);
    --wz-color-action-disabled: var(--wz-color-neutral-850);
    --wz-color-border-default: var(--wz-color-neutral-800);
    --wz-color-border-focus: var(--wz-color-sky-300);
    --wz-color-status-success: var(--wz-color-green-400);
    --wz-color-status-success-subtle: var(--wz-color-green-950);
    --wz-color-status-warning: var(--wz-color-orange-400);
    --wz-color-status-warning-subtle: var(--wz-color-orange-950);
    --wz-color-status-danger: var(--wz-color-red-300);
    --wz-color-status-danger-hover: var(--wz-color-red-200);
    --wz-color-status-danger-pressed: var(--wz-color-red-500);
    --wz-color-status-danger-subtle: var(--wz-color-red-950);
    --wz-color-status-info: var(--wz-color-sky-300);
    --wz-color-status-info-subtle: var(--wz-color-blue-900);
    --wz-color-data-1: var(--wz-color-blue-400);
    --wz-color-data-2: var(--wz-color-orange-400);
    --wz-color-data-3: var(--wz-color-teal-400);
    --wz-color-data-4: var(--wz-color-magenta-400);
    --wz-color-data-5: var(--wz-color-cyan-400);
    --wz-color-data-6: var(--wz-color-brown-400);
    --wz-color-data-muted: var(--wz-color-neutral-700);
    --wz-color-scrim: var(--wz-color-neutral-alpha-950-72);
    --wz-shadow-1: none;
    --wz-shadow-2: none;
    --wz-elevation-raised-shadow: var(--wz-shadow-1);
    --wz-elevation-raised-surface: var(--wz-color-surface-raised);
    --wz-elevation-overlay-shadow: var(--wz-shadow-2);
    --wz-elevation-overlay-surface: var(--wz-color-neutral-825);
    --wz-elevation-modal-shadow: var(--wz-shadow-2);
    --wz-elevation-modal-surface: var(--wz-color-neutral-825);
  }
}

/* 3. Component — 테마 경계마다 다시 풀리도록 [data-theme] 에도 선언 */
:root, [data-theme] {
  --wz-icon-color-default: var(--wz-color-text-primary);
  --wz-icon-color-subtle: var(--wz-color-text-secondary);
  --wz-icon-color-accent: var(--wz-color-action-primary);
  --wz-icon-color-success: var(--wz-color-status-success);
  --wz-icon-color-warning: var(--wz-color-status-warning);
  --wz-icon-color-danger: var(--wz-color-status-danger);
  --wz-icon-color-info: var(--wz-color-status-info);
  --wz-icon-color-disabled: var(--wz-color-text-disabled);
  --wz-icon-color-on-fill: var(--wz-color-text-inverse);
  --wz-button-primary-bg: var(--wz-color-action-primary);
  --wz-button-primary-bg-hover: var(--wz-color-action-primary-hover);
  --wz-button-primary-bg-pressed: var(--wz-color-action-primary-pressed);
  --wz-button-primary-bg-disabled: var(--wz-color-action-disabled);
  --wz-button-primary-fg: var(--wz-color-text-inverse);
  --wz-button-primary-fg-disabled: var(--wz-color-text-disabled);
  --wz-button-primary-radius: var(--wz-radius-12);
  --wz-button-height-m: var(--wz-control-height-m);
  --wz-button-height-s: var(--wz-control-height-s);
  --wz-button-padding-x-m: var(--wz-space-24);
  --wz-button-padding-x-s: var(--wz-space-16);
  --wz-button-secondary-bg: var(--wz-color-action-subtle);
  --wz-button-secondary-bg-hover: var(--wz-color-action-subtle-hover);
  --wz-button-secondary-bg-pressed: var(--wz-color-action-subtle-pressed);
  --wz-button-secondary-fg: var(--wz-color-action-primary);
  --wz-button-secondary-fg-hover: var(--wz-color-action-primary-hover);
  --wz-button-secondary-fg-pressed: var(--wz-color-action-primary-pressed);
  --wz-button-tertiary-bg-hover: var(--wz-color-action-subtle);
  --wz-button-tertiary-bg-pressed: var(--wz-color-action-subtle-hover);
  --wz-button-tertiary-fg: var(--wz-color-action-primary);
  --wz-button-tertiary-fg-pressed: var(--wz-color-action-primary-hover);
  --wz-button-danger-bg: var(--wz-color-status-danger);
  --wz-button-danger-bg-hover: var(--wz-color-status-danger-hover);
  --wz-button-danger-bg-pressed: var(--wz-color-status-danger-pressed);
  --wz-button-danger-fg: var(--wz-color-text-inverse);
  --wz-button-danger-fg-hover: var(--wz-color-text-inverse);
  --wz-button-danger-fg-pressed: var(--wz-color-text-inverse);
  --wz-card-bg: var(--wz-color-surface-raised);
  --wz-card-radius: var(--wz-radius-24);
  --wz-card-padding: var(--wz-space-32);
  --wz-card-shadow: var(--wz-shadow-1);
  --wz-card-border: var(--wz-color-border-strong);
  --wz-card-bg-hover: var(--wz-color-surface-raised-hover);
  --wz-card-bg-pressed: var(--wz-color-surface-raised-pressed);
  --wz-card-gap: var(--wz-space-16);
  --wz-checkbox-size: var(--wz-space-24);
  --wz-checkbox-radius: var(--wz-radius-4);
  --wz-checkbox-gap: var(--wz-space-12);
  --wz-checkbox-bg: var(--wz-color-surface-default);
  --wz-checkbox-bg-hover: var(--wz-color-surface-default-hover);
  --wz-checkbox-bg-pressed: var(--wz-color-surface-default-pressed);
  --wz-checkbox-border: var(--wz-color-border-strong);
  --wz-checkbox-border-hover: var(--wz-color-action-primary);
  --wz-checkbox-bg-checked: var(--wz-color-action-primary);
  --wz-checkbox-bg-checked-hover: var(--wz-color-action-primary-hover);
  --wz-checkbox-bg-checked-pressed: var(--wz-color-action-primary-pressed);
  --wz-checkbox-fg-checked: var(--wz-color-text-inverse);
  --wz-checkbox-fg-checked-hover: var(--wz-color-text-inverse);
  --wz-checkbox-fg-checked-pressed: var(--wz-color-text-inverse);
  --wz-switch-track-width: var(--wz-space-48);
  --wz-switch-track-height: var(--wz-space-32);
  --wz-switch-thumb-size: var(--wz-space-24);
  --wz-switch-thumb-offset: var(--wz-space-4);
  --wz-switch-gap: var(--wz-space-12);
  --wz-switch-bg: var(--wz-color-surface-default);
  --wz-switch-bg-hover: var(--wz-color-surface-default-hover);
  --wz-switch-bg-pressed: var(--wz-color-surface-default-pressed);
  --wz-switch-fg: var(--wz-color-text-secondary);
  --wz-switch-fg-hover: var(--wz-color-text-secondary);
  --wz-switch-fg-pressed: var(--wz-color-text-secondary);
  --wz-switch-border: var(--wz-color-border-strong);
  --wz-switch-border-hover: var(--wz-color-action-primary);
  --wz-switch-bg-checked: var(--wz-color-action-primary);
  --wz-switch-bg-checked-hover: var(--wz-color-action-primary-hover);
  --wz-switch-bg-checked-pressed: var(--wz-color-action-primary-pressed);
  --wz-switch-fg-checked: var(--wz-color-text-inverse);
  --wz-switch-fg-checked-hover: var(--wz-color-text-inverse);
  --wz-switch-fg-checked-pressed: var(--wz-color-text-inverse);
  --wz-spinner-size-s: var(--wz-icon-size-20);
  --wz-spinner-size-m: var(--wz-icon-size-32);
  --wz-spinner-stroke-s: var(--wz-icon-stroke-20);
  --wz-spinner-stroke-m: var(--wz-icon-stroke-32);
  --wz-spinner-bar-height: var(--wz-space-8);
  --wz-spinner-fg: var(--wz-color-action-primary);
  --wz-spinner-bg: var(--wz-color-action-subtle);
  --wz-input-bg: var(--wz-color-surface-default);
  --wz-input-fg-placeholder: var(--wz-color-text-tertiary);
  --wz-input-border: var(--wz-color-border-strong);
  --wz-input-border-focus: var(--wz-color-border-focus);
  --wz-input-radius: var(--wz-radius-12);
  --wz-input-border-error: var(--wz-color-status-danger);
  --wz-input-height: var(--wz-control-height-m);
  --wz-tag-radius: var(--wz-radius-8);
  --wz-tag-padding-x: var(--wz-space-8);
  --wz-tag-padding-y: var(--wz-space-4);
  --wz-prose-quote-bar-width: var(--wz-space-4);
  --wz-prose-link-underline-offset: 0.2em;
}

/* 4. 웹 역할 글자 — 휴대폰·태블릿(< 1024px) 값. PC 값은 아래 min-width 미디어 쿼리(정본 breakpoint.desktop — 미디어 쿼리는 var() 를 못 씀). */
/*    쓰는 법: font: var(--wz-typography-web-scene); letter-spacing: var(--wz-typography-web-scene-letter-spacing); */
:root {
  --wz-typography-web-hero: var(--wz-typography-title);
  --wz-typography-web-hero-letter-spacing: var(--wz-typography-title-letter-spacing);
  --wz-typography-web-scene: var(--wz-typography-title-small);
  --wz-typography-web-scene-letter-spacing: var(--wz-typography-title-small-letter-spacing);
  --wz-typography-web-display: var(--wz-typography-large-title);
  --wz-typography-web-display-letter-spacing: var(--wz-typography-large-title-letter-spacing);
  --wz-typography-web-tlabel: var(--wz-typography-caption);
  --wz-typography-web-tlabel-letter-spacing: var(--wz-typography-caption-letter-spacing);
  --wz-typography-web-label: var(--wz-typography-caption);
  --wz-typography-web-label-letter-spacing: var(--wz-typography-caption-letter-spacing);
  --wz-typography-web-idx: var(--wz-font-weight-bold) var(--wz-font-size-13)/var(--wz-font-line-height-18) var(--wz-font-family-korean);
  --wz-typography-web-idx-letter-spacing: 0em;
  --wz-typography-web-pin: var(--wz-typography-caption);
  --wz-typography-web-pin-letter-spacing: var(--wz-typography-caption-letter-spacing);
  --wz-typography-web-lock: var(--wz-typography-caption);
  --wz-typography-web-lock-letter-spacing: var(--wz-typography-caption-letter-spacing);
}

@media (min-width: 1024px) {
  :root {
    --wz-typography-web-hero: var(--wz-typography-large-title);
    --wz-typography-web-hero-letter-spacing: var(--wz-typography-large-title-letter-spacing);
    --wz-typography-web-scene: var(--wz-typography-title);
    --wz-typography-web-scene-letter-spacing: var(--wz-typography-title-letter-spacing);
    --wz-typography-web-display: var(--wz-typography-display);
    --wz-typography-web-display-letter-spacing: var(--wz-typography-display-letter-spacing);
    --wz-typography-web-tlabel: var(--wz-typography-subheadline);
    --wz-typography-web-tlabel-letter-spacing: var(--wz-typography-subheadline-letter-spacing);
    --wz-typography-web-label: var(--wz-typography-subheadline);
    --wz-typography-web-label-letter-spacing: var(--wz-typography-subheadline-letter-spacing);
    --wz-typography-web-idx: var(--wz-font-weight-bold) var(--wz-font-size-15)/var(--wz-font-line-height-20) var(--wz-font-family-korean);
    --wz-typography-web-idx-letter-spacing: 0em;
    --wz-typography-web-pin: var(--wz-typography-subheadline);
    --wz-typography-web-pin-letter-spacing: var(--wz-typography-subheadline-letter-spacing);
    --wz-typography-web-lock: var(--wz-typography-subheadline);
    --wz-typography-web-lock-letter-spacing: var(--wz-typography-subheadline-letter-spacing);
  }
}

/* 5. ::backdrop — 하한(크롬 99~121 · 사파리 15.4~17.3 · 파이어폭스 98~119)의 ::backdrop 은 :root 변수를 물려받지 않는다.
   그래서 쓰는 변수를 여기 리터럴로 직접 선언한다(R8). 테마는 문서 루트를 따른다. tokens.json 의 com.wizon.backdrop 토큰에서 생성. */
::backdrop {
  --wz-color-scrim: rgba(11, 18, 32, 0.48);
}

:root[data-theme="dark"] ::backdrop {
  --wz-color-scrim: rgba(11, 18, 32, 0.72);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) ::backdrop {
    --wz-color-scrim: rgba(11, 18, 32, 0.72);
  }
}

/* 6. 인쇄 — 화면 테마(다크·OS 다크)와 상관없이 라이트 색으로 찍는다(설계 글자규칙 4 (다) ⑩ · 묶음 4). 글자 크기·쪽 나눔은 바탕(base.css) 인쇄 블록. */
@media print {
  :root, [data-theme], :root:not([data-theme="light"]) {
    color-scheme: light;
    --wz-color-bg-default: var(--wz-color-neutral-50);
    --wz-color-bg-subtle: var(--wz-color-neutral-100);
    --wz-color-surface-default: var(--wz-color-white);
    --wz-color-surface-raised: var(--wz-color-white);
    --wz-color-surface-default-hover: var(--wz-color-neutral-50);
    --wz-color-surface-default-pressed: var(--wz-color-neutral-100);
    --wz-color-surface-raised-hover: var(--wz-color-neutral-50);
    --wz-color-surface-raised-pressed: var(--wz-color-neutral-100);
    --wz-color-text-primary: var(--wz-color-neutral-900);
    --wz-color-text-secondary: var(--wz-color-neutral-700);
    --wz-color-text-tertiary: var(--wz-color-neutral-600);
    --wz-color-text-disabled: var(--wz-color-neutral-400);
    --wz-color-text-inverse: var(--wz-color-white);
    --wz-color-action-primary: var(--wz-color-blue-500);
    --wz-color-action-primary-hover: var(--wz-color-blue-600);
    --wz-color-action-primary-pressed: var(--wz-color-blue-700);
    --wz-color-action-subtle: var(--wz-color-blue-50);
    --wz-color-action-subtle-hover: var(--wz-color-blue-100);
    --wz-color-action-subtle-pressed: var(--wz-color-blue-200);
    --wz-color-action-disabled: var(--wz-color-neutral-200);
    --wz-color-border-default: var(--wz-color-neutral-200);
    --wz-color-border-focus: var(--wz-color-blue-500);
    --wz-color-status-success: var(--wz-color-green-700);
    --wz-color-status-success-subtle: var(--wz-color-green-50);
    --wz-color-status-warning: var(--wz-color-orange-700);
    --wz-color-status-warning-subtle: var(--wz-color-orange-50);
    --wz-color-status-danger: var(--wz-color-red-700);
    --wz-color-status-danger-hover: var(--wz-color-red-800);
    --wz-color-status-danger-pressed: var(--wz-color-red-900);
    --wz-color-status-danger-subtle: var(--wz-color-red-50);
    --wz-color-status-info: var(--wz-color-blue-600);
    --wz-color-status-info-subtle: var(--wz-color-blue-50);
    --wz-color-data-1: var(--wz-color-blue-500);
    --wz-color-data-2: var(--wz-color-orange-500);
    --wz-color-data-3: var(--wz-color-teal-500);
    --wz-color-data-4: var(--wz-color-magenta-500);
    --wz-color-data-5: var(--wz-color-cyan-500);
    --wz-color-data-6: var(--wz-color-brown-500);
    --wz-color-data-muted: var(--wz-color-neutral-300);
    --wz-color-scrim: var(--wz-color-neutral-alpha-950-48);
    --wz-shadow-1: 0px 8px 24px 0px rgba(15, 26, 51, 0.1);
    --wz-shadow-2: 0px 16px 48px 0px rgba(15, 26, 51, 0.16);
    --wz-elevation-raised-shadow: var(--wz-shadow-1);
    --wz-elevation-raised-surface: var(--wz-color-surface-raised);
    --wz-elevation-overlay-shadow: var(--wz-shadow-2);
    --wz-elevation-overlay-surface: var(--wz-color-surface-raised);
    --wz-elevation-modal-shadow: var(--wz-shadow-2);
    --wz-elevation-modal-surface: var(--wz-color-surface-raised);
    /* 아이콘 on-fill — 채운 면이 인쇄에서 빠지므로(06 버튼·체크 인쇄 규칙) 기본 글자 색(ADR-0243 ④ · 설계 3.1) */
    --wz-icon-color-on-fill: var(--wz-color-text-primary);
  }
}

/* 7. 대비 높이기(OS «대비 증가» — prefers-contrast: more) — 약한 글자 색을 기본 글자 색으로(설계 글자규칙 4 (다) ⑥ · 묶음 4). 인쇄 블록 뒤에 둔다. */
@media (prefers-contrast: more) {
  :root, [data-theme], :root:not([data-theme="light"]) {
    /* wz-하한: 없어도 동작 — 대비 높이기 설정을 모르는 브라우저(파이어폭스 98~100)는 평소 글자 색 그대로 보임 */
    --wz-color-text-secondary: var(--wz-color-text-primary);
    --wz-color-text-tertiary: var(--wz-color-text-primary);
  }

  :root, [data-theme="light"] {
    /* wz-하한: 없어도 동작 — 대비 높이기 설정을 모르는 브라우저(파이어폭스 98~100)는 평소 글자 색 그대로 보임 */
    /* 입력 칸 예시 글만 기본 글자가 아니라 보조 글자의 평소 값(7:1 이상) — 입력값과 구별(ADR-0232 ⑦) */
    --wz-input-fg-placeholder: var(--wz-color-neutral-700);
  }

  [data-theme="dark"] {
    /* wz-하한: 없어도 동작 — 대비 높이기 설정을 모르는 브라우저(파이어폭스 98~100)는 평소 글자 색 그대로 보임 */
    /* 입력 칸 예시 글만 기본 글자가 아니라 보조 글자의 평소 값(7:1 이상) — 입력값과 구별(ADR-0232 ⑦) */
    --wz-input-fg-placeholder: var(--wz-color-neutral-300);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      /* wz-하한: 없어도 동작 — 대비 높이기 설정을 모르는 브라우저(파이어폭스 98~100)는 평소 글자 색 그대로 보임 */
      /* 입력 칸 예시 글만 기본 글자가 아니라 보조 글자의 평소 값(7:1 이상) — 입력값과 구별(ADR-0232 ⑦) */
      --wz-input-fg-placeholder: var(--wz-color-neutral-300);
    }
  }

  @media print {
    :root, [data-theme], :root:not([data-theme="light"]) {
      /* wz-하한: 없어도 동작 — 대비 높이기 설정을 모르는 브라우저(파이어폭스 98~100)는 평소 글자 색 그대로 보임 */
      /* 입력 칸 예시 글만 기본 글자가 아니라 보조 글자의 평소 값(7:1 이상) — 입력값과 구별(ADR-0232 ⑦) */
      --wz-input-fg-placeholder: var(--wz-color-neutral-700);
    }
  }
}

/* 8. 강제 색(윈도 고대비 — forced-colors: active) — 아이콘 칠 역할 변수 자체를 시스템 색으로(ADR-0243 ④ · 설계 3.2 ④). 역할 변수로 칠한 부품은
   규칙 순서와 상관없이 시스템 색이 된다(부품 규칙이 부품의 강제 색 칠을 덮어 아이콘이 1:1 로 사라지던 함정 — 설계 M4). 맨 뒤에 둔다. */
@media (forced-colors: active) {
  :root, [data-theme], :root:not([data-theme="light"]) {
    /* wz-하한: 없어도 동작 — 강제 색 모드가 없는 브라우저는 이 규칙이 필요 없음 */
    --wz-icon-color-default: CanvasText;
    --wz-icon-color-subtle: CanvasText;
    --wz-icon-color-accent: CanvasText;
    --wz-icon-color-success: CanvasText;
    --wz-icon-color-warning: CanvasText;
    --wz-icon-color-danger: CanvasText;
    --wz-icon-color-info: CanvasText;
    --wz-icon-color-disabled: GrayText;
    --wz-icon-color-on-fill: HighlightText;
  }
}