/* 자동 생성 — spec/tokens/*.yaml 에서 scripts/build-tokens.mjs 가 만든다. 직접 고치지 않는다. */

/* 고정 값: 팔레트 · 간격 · 곡률 · 타이포 · 움직임 */
:root {
  --handy-breakpoint-md: 768px;
  --handy-breakpoint-lg: 1024px;
  --handy-dimension-x0_5: 2px;
  --handy-dimension-x1: 4px;
  --handy-dimension-x1_5: 6px;
  --handy-dimension-x2: 8px;
  --handy-dimension-x2_5: 10px;
  --handy-dimension-x3: 12px;
  --handy-dimension-x4: 16px;
  --handy-dimension-x5: 20px;
  --handy-dimension-x6: 24px;
  --handy-dimension-x8: 32px;
  --handy-dimension-x10: 40px;
  --handy-dimension-x12: 48px;
  --handy-dimension-x16: 64px;
  --handy-dimension-x20: 80px;
  --handy-dimension-x24: 96px;
  --handy-dimension-spacing-x-global-gutter: var(--handy-dimension-x6);
  --handy-dimension-spacing-x-card-padding: var(--handy-dimension-x6);
  --handy-dimension-spacing-y-between-text: var(--handy-dimension-x2);
  --handy-dimension-spacing-y-between-items: var(--handy-dimension-x3);
  --handy-dimension-spacing-y-between-components: var(--handy-dimension-x5);
  --handy-dimension-spacing-y-between-blocks: var(--handy-dimension-x12);
  --handy-dimension-spacing-y-section: 120px;
  --handy-dimension-spacing-y-section-lg: 160px;
  --handy-dimension-spacing-y-section-head: var(--handy-dimension-x16);
  --handy-dimension-spacing-y-section-head-lg: 104px;
  --handy-dimension-control-sm: 32px;
  --handy-dimension-control-md: 40px;
  --handy-dimension-control-lg: 48px;
  --handy-dimension-control-xl: 56px;
  --handy-dimension-container-max: 1160px;
  --handy-dimension-container-narrow: 760px;
  --handy-dimension-container-text: 1000px;
  --handy-dimension-container-wide: 1400px;
  --handy-duration-fast: 120ms;
  --handy-duration-base: 200ms;
  --handy-duration-slow: 320ms;
  --handy-timing-function-easing: cubic-bezier(0.2, 0.7, 0.3, 1);
  --handy-timing-function-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --handy-color-palette-gray-00: #FFFFFF;
  --handy-color-palette-gray-100: #F5F7F9;
  --handy-color-palette-gray-200: #EBEDEF;
  --handy-color-palette-gray-300: #DCDEE1;
  --handy-color-palette-gray-400: #C0C4CB;
  --handy-color-palette-gray-500: #9A9FA5;
  --handy-color-palette-gray-600: #6F7379;
  --handy-color-palette-gray-700: #595C61;
  --handy-color-palette-gray-800: #3D4044;
  --handy-color-palette-gray-900: #24272A;
  --handy-color-palette-gray-950: #181B1E;
  --handy-color-palette-gray-1000: #0F1215;
  --handy-color-palette-navy-100: #EDF4FE;
  --handy-color-palette-navy-200: #D5E4F9;
  --handy-color-palette-navy-300: #B2CDF1;
  --handy-color-palette-navy-400: #89B0E6;
  --handy-color-palette-navy-500: #6091D3;
  --handy-color-palette-navy-600: #3B71BA;
  --handy-color-palette-navy-700: #20569D;
  --handy-color-palette-navy-800: #003C80;
  --handy-color-palette-navy-900: #002B5F;
  --handy-color-palette-navy-1000: #001F49;
  --handy-color-palette-green-100: #EBF7F0;
  --handy-color-palette-green-200: #D2EADD;
  --handy-color-palette-green-300: #ABD6BF;
  --handy-color-palette-green-400: #7ABE9D;
  --handy-color-palette-green-500: #4BA47D;
  --handy-color-palette-green-600: #0E8A5F;
  --handy-color-palette-green-700: #00714C;
  --handy-color-palette-green-800: #00583A;
  --handy-color-palette-green-900: #004029;
  --handy-color-palette-green-1000: #002F1D;
  --handy-color-palette-orange-100: #FEF0E9;
  --handy-color-palette-orange-200: #F9DCCD;
  --handy-color-palette-orange-300: #EEBDA3;
  --handy-color-palette-orange-400: #E09871;
  --handy-color-palette-orange-500: #CC7542;
  --handy-color-palette-orange-600: #B45309;
  --handy-color-palette-orange-700: #944200;
  --handy-color-palette-orange-800: #753200;
  --handy-color-palette-orange-900: #562300;
  --handy-color-palette-orange-1000: #411900;
  --handy-color-palette-red-100: #FFEFED;
  --handy-color-palette-red-200: #FFD9D3;
  --handy-color-palette-red-300: #FFB7AE;
  --handy-color-palette-red-400: #FC8D80;
  --handy-color-palette-red-500: #EE6458;
  --handy-color-palette-red-600: #D93B34;
  --handy-color-palette-red-700: #BB1518;
  --handy-color-palette-red-800: #940009;
  --handy-color-palette-red-900: #6C0005;
  --handy-color-palette-red-1000: #4F0002;
  --handy-color-palette-static-white: #FFFFFF;
  --handy-color-palette-static-black: #000000;
  --handy-color-palette-static-white-alpha-50: rgba(255, 255, 255, 0.05);
  --handy-color-palette-static-white-alpha-100: rgba(255, 255, 255, 0.1);
  --handy-color-palette-static-white-alpha-150: rgba(255, 255, 255, 0.15);
  --handy-color-palette-static-white-alpha-200: rgba(255, 255, 255, 0.2);
  --handy-color-palette-static-white-alpha-300: rgba(255, 255, 255, 0.3);
  --handy-color-palette-static-white-alpha-400: rgba(255, 255, 255, 0.4);
  --handy-color-palette-static-white-alpha-500: rgba(255, 255, 255, 0.5);
  --handy-color-palette-static-white-alpha-600: rgba(255, 255, 255, 0.6);
  --handy-color-palette-static-white-alpha-700: rgba(255, 255, 255, 0.7);
  --handy-color-palette-static-white-alpha-800: rgba(255, 255, 255, 0.8);
  --handy-color-palette-static-white-alpha-900: rgba(255, 255, 255, 0.9);
  --handy-color-palette-static-black-alpha-50: rgba(0, 0, 0, 0.05);
  --handy-color-palette-static-black-alpha-100: rgba(0, 0, 0, 0.1);
  --handy-color-palette-static-black-alpha-150: rgba(0, 0, 0, 0.15);
  --handy-color-palette-static-black-alpha-200: rgba(0, 0, 0, 0.2);
  --handy-color-palette-static-black-alpha-300: rgba(0, 0, 0, 0.3);
  --handy-color-palette-static-black-alpha-400: rgba(0, 0, 0, 0.4);
  --handy-color-palette-static-black-alpha-500: rgba(0, 0, 0, 0.5);
  --handy-color-palette-static-black-alpha-600: rgba(0, 0, 0, 0.6);
  --handy-color-palette-static-black-alpha-700: rgba(0, 0, 0, 0.7);
  --handy-color-palette-static-black-alpha-800: rgba(0, 0, 0, 0.8);
  --handy-color-palette-static-black-alpha-900: rgba(0, 0, 0, 0.9);
  --handy-radius-r1: 4px;
  --handy-radius-r2: 8px;
  --handy-radius-r2_5: 10px;
  --handy-radius-r3_5: 14px;
  --handy-radius-r4: 16px;
  --handy-radius-r6: 24px;
  --handy-radius-full: 9999px;
  --handy-font-family-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", Roboto, "Malgun Gothic", sans-serif;
  --handy-font-size-t1: 11px;
  --handy-font-size-t2: 12px;
  --handy-font-size-t3: 13px;
  --handy-font-size-t4: 14px;
  --handy-font-size-t5: 15px;
  --handy-font-size-t6: 16px;
  --handy-font-size-t7: 17px;
  --handy-font-size-t8: 18px;
  --handy-font-size-t9: 20px;
  --handy-font-size-t10: 24px;
  --handy-font-size-t11: 28px;
  --handy-font-size-t12: 32px;
  --handy-font-size-t13: 40px;
  --handy-font-size-t14: 60px;
  --handy-font-weight-regular: 400;
  --handy-font-weight-medium: 500;
  --handy-font-weight-semibold: 600;
  --handy-font-weight-bold: 700;
  --handy-letter-spacing-display: -0.04em;
  --handy-letter-spacing-title: -0.028em;
  --handy-letter-spacing-heading: -0.024em;
  --handy-letter-spacing-headline: -0.022em;
  --handy-letter-spacing-body: -0.02em;
  --handy-line-height-tight: 1.18;
  --handy-line-height-normal: 1.5;
  --handy-line-height-reading: 1.7;
  --handy-text-style-display-font-size: var(--handy-font-size-t14);
  --handy-text-style-display-font-weight: var(--handy-font-weight-bold);
  --handy-text-style-display-line-height: 1.25;
  --handy-text-style-display-letter-spacing: var(--handy-letter-spacing-display);
  --handy-text-style-title-1-font-size: var(--handy-font-size-t13);
  --handy-text-style-title-1-font-weight: var(--handy-font-weight-bold);
  --handy-text-style-title-1-line-height: 1.28;
  --handy-text-style-title-1-letter-spacing: -0.035em;
  --handy-text-style-title-2-font-size: var(--handy-font-size-t12);
  --handy-text-style-title-2-font-weight: var(--handy-font-weight-bold);
  --handy-text-style-title-2-line-height: 1.3;
  --handy-text-style-title-2-letter-spacing: -0.03em;
  --handy-text-style-title-3-font-size: var(--handy-font-size-t8);
  --handy-text-style-title-3-font-weight: var(--handy-font-weight-bold);
  --handy-text-style-title-3-line-height: 1.45;
  --handy-text-style-title-3-letter-spacing: var(--handy-letter-spacing-headline);
  --handy-text-style-lead-font-size: var(--handy-font-size-t6);
  --handy-text-style-lead-font-weight: var(--handy-font-weight-regular);
  --handy-text-style-lead-line-height: 1.75;
  --handy-text-style-lead-letter-spacing: var(--handy-letter-spacing-body);
  --handy-text-style-body-font-size: var(--handy-font-size-t5);
  --handy-text-style-body-font-weight: var(--handy-font-weight-regular);
  --handy-text-style-body-line-height: var(--handy-line-height-reading);
  --handy-text-style-body-letter-spacing: var(--handy-letter-spacing-body);
  --handy-text-style-ui-font-size: var(--handy-font-size-t4);
  --handy-text-style-ui-font-weight: var(--handy-font-weight-regular);
  --handy-text-style-ui-line-height: var(--handy-line-height-normal);
  --handy-text-style-ui-letter-spacing: var(--handy-letter-spacing-body);
  --handy-text-style-ui-strong-font-size: var(--handy-font-size-t4);
  --handy-text-style-ui-strong-font-weight: var(--handy-font-weight-semibold);
  --handy-text-style-ui-strong-line-height: var(--handy-line-height-normal);
  --handy-text-style-ui-strong-letter-spacing: var(--handy-letter-spacing-body);
  --handy-text-style-caption-font-size: var(--handy-font-size-t3);
  --handy-text-style-caption-font-weight: var(--handy-font-weight-regular);
  --handy-text-style-caption-line-height: var(--handy-line-height-normal);
  --handy-text-style-caption-letter-spacing: var(--handy-letter-spacing-body);
  --handy-text-style-label-font-size: var(--handy-font-size-t3);
  --handy-text-style-label-font-weight: var(--handy-font-weight-semibold);
  --handy-text-style-label-line-height: var(--handy-line-height-normal);
  --handy-text-style-label-letter-spacing: var(--handy-letter-spacing-body);
}

/* 색 모드 — <html data-handy-color-mode="system | light-only | dark-only">. 속성이 없으면 system.
   하위 요소에 붙이면 그 영역만 모드를 바꾼다. 다크 값은 아래 두 곳에 같은 목록으로 생성된다. */
:root,
[data-handy-color-mode="light-only"] {
  --handy-color-fg-neutral: var(--handy-color-palette-gray-1000);
  --handy-color-fg-neutral-muted: var(--handy-color-palette-gray-700);
  --handy-color-fg-neutral-subtle: var(--handy-color-palette-gray-600);
  --handy-color-fg-placeholder: var(--handy-color-palette-gray-500);
  --handy-color-fg-disabled: var(--handy-color-palette-gray-500);
  --handy-color-fg-neutral-inverted: var(--handy-color-palette-gray-00);
  --handy-color-fg-brand: var(--handy-color-palette-navy-800);
  --handy-color-fg-brand-contrast: var(--handy-color-palette-gray-00);
  --handy-color-fg-positive: var(--handy-color-palette-green-700);
  --handy-color-fg-warning: var(--handy-color-palette-orange-700);
  --handy-color-fg-critical: var(--handy-color-palette-red-700);
  --handy-color-fg-critical-contrast: var(--handy-color-palette-gray-00);
  --handy-color-fg-rating: #F5A623;
  --handy-color-bg-layer-default: var(--handy-color-palette-gray-00);
  --handy-color-bg-layer-basement: var(--handy-color-palette-gray-100);
  --handy-color-bg-layer-floating: var(--handy-color-palette-gray-00);
  --handy-color-bg-layer-fill: var(--handy-color-palette-gray-200);
  --handy-color-bg-neutral-weak: var(--handy-color-palette-gray-200);
  --handy-color-bg-neutral-weak-hover: var(--handy-color-palette-gray-300);
  --handy-color-bg-neutral-weak-pressed: var(--handy-color-palette-gray-400);
  --handy-color-bg-neutral-inverted: var(--handy-color-palette-gray-900);
  --handy-color-bg-neutral-solid: var(--handy-color-palette-gray-1000);
  --handy-color-bg-neutral-solid-hover: var(--handy-color-palette-gray-900);
  --handy-color-bg-neutral-solid-pressed: var(--handy-color-palette-static-black);
  --handy-color-bg-brand-solid: var(--handy-color-palette-navy-800);
  --handy-color-bg-brand-solid-hover: var(--handy-color-palette-navy-900);
  --handy-color-bg-brand-solid-pressed: var(--handy-color-palette-navy-1000);
  --handy-color-bg-brand-strong: var(--handy-color-palette-navy-800);
  --handy-color-bg-neutral-strong: var(--handy-color-palette-gray-1000);
  --handy-color-bg-brand-weak: var(--handy-color-palette-navy-100);
  --handy-color-bg-brand-weak-hover: var(--handy-color-palette-navy-200);
  --handy-color-bg-positive-weak: var(--handy-color-palette-green-100);
  --handy-color-bg-warning-weak: var(--handy-color-palette-orange-100);
  --handy-color-bg-critical-weak: var(--handy-color-palette-red-100);
  --handy-color-bg-critical-solid: var(--handy-color-palette-red-600);
  --handy-color-bg-critical-solid-hover: var(--handy-color-palette-red-700);
  --handy-color-bg-critical-solid-pressed: var(--handy-color-palette-red-800);
  --handy-color-bg-disabled: var(--handy-color-palette-gray-200);
  --handy-color-bg-overlay: rgba(15, 18, 21, 0.5);
  --handy-color-stroke-neutral-muted: rgba(15, 18, 21, 0.12);
  --handy-color-stroke-neutral-subtle: rgba(15, 18, 21, 0.07);
  --handy-color-stroke-neutral-contrast: rgba(15, 18, 21, 0.26);
  --handy-color-stroke-brand: var(--handy-color-palette-navy-800);
  --handy-color-stroke-critical: var(--handy-color-palette-red-600);
  --handy-color-stroke-positive: var(--handy-color-palette-green-600);
  --handy-color-stroke-warning: var(--handy-color-palette-orange-600);
  --handy-color-stroke-focus-ring: var(--handy-color-palette-navy-500);
  --handy-color-data-brand-1: var(--handy-color-palette-navy-200);
  --handy-color-data-brand-2: var(--handy-color-palette-navy-400);
  --handy-color-data-brand-3: var(--handy-color-palette-navy-600);
  --handy-color-data-brand-4: var(--handy-color-palette-navy-800);
  --handy-color-data-on-brand-1: var(--handy-color-palette-navy-900);
  --handy-color-data-on-brand-2: var(--handy-color-palette-navy-1000);
  --handy-color-data-on-brand-3: var(--handy-color-palette-gray-00);
  --handy-color-data-on-brand-4: var(--handy-color-palette-gray-00);
  --handy-shadow-s1: 0 1px 2px rgba(15, 18, 21, 0.04);
  --handy-shadow-s2: 0 1px 3px rgba(15, 18, 21, 0.05), 0 4px 12px rgba(15, 18, 21, 0.03);
  --handy-shadow-s3: 0 4px 12px rgba(15, 18, 21, 0.10), 0 8px 28px rgba(15, 18, 21, 0.06);
  --handy-shadow-s4: 0 8px 24px rgba(15, 18, 21, 0.12), 0 16px 48px rgba(15, 18, 21, 0.08);
  --handy-shadow-spread: 0 0 24px rgba(15, 18, 21, 0.10), 0 0 64px rgba(15, 18, 21, 0.08);
  --handy-shadow-sticky-bottom: 0 -4px 20px rgba(15, 18, 21, 0.07);
  --handy-shadow-focus-ring: 0 0 0 3px color-mix(in srgb, var(--handy-color-stroke-focus-ring) 35%, transparent);
  --handy-shadow-focus-ring-critical: 0 0 0 3px color-mix(in srgb, var(--handy-color-stroke-critical) 30%, transparent);
  --handy-shadow-field-focus: inset 0 0 0 1px var(--handy-color-stroke-brand);
  --handy-shadow-field-focus-critical: inset 0 0 0 1px var(--handy-color-stroke-critical);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-handy-color-mode="light-only"]),
  [data-handy-color-mode="system"] {
    --handy-color-fg-neutral: var(--handy-color-palette-gray-100);
    --handy-color-fg-neutral-muted: var(--handy-color-palette-gray-400);
    --handy-color-fg-neutral-subtle: var(--handy-color-palette-gray-500);
    --handy-color-fg-placeholder: var(--handy-color-palette-gray-600);
    --handy-color-fg-disabled: var(--handy-color-palette-gray-600);
    --handy-color-fg-neutral-inverted: var(--handy-color-palette-gray-1000);
    --handy-color-fg-brand: var(--handy-color-palette-navy-400);
    --handy-color-fg-brand-contrast: var(--handy-color-palette-navy-800);
    --handy-color-fg-positive: var(--handy-color-palette-green-400);
    --handy-color-fg-warning: var(--handy-color-palette-orange-400);
    --handy-color-fg-critical: var(--handy-color-palette-red-400);
    --handy-color-fg-critical-contrast: var(--handy-color-palette-gray-00);
    --handy-color-fg-rating: #F5B342;
    --handy-color-bg-layer-default: var(--handy-color-palette-gray-1000);
    --handy-color-bg-layer-basement: var(--handy-color-palette-gray-950);
    --handy-color-bg-layer-floating: var(--handy-color-palette-gray-900);
    --handy-color-bg-layer-fill: var(--handy-color-palette-gray-800);
    --handy-color-bg-neutral-weak: var(--handy-color-palette-gray-900);
    --handy-color-bg-neutral-weak-hover: var(--handy-color-palette-gray-800);
    --handy-color-bg-neutral-weak-pressed: var(--handy-color-palette-gray-700);
    --handy-color-bg-neutral-inverted: var(--handy-color-palette-gray-100);
    --handy-color-bg-neutral-solid: var(--handy-color-palette-gray-100);
    --handy-color-bg-neutral-solid-hover: var(--handy-color-palette-gray-200);
    --handy-color-bg-neutral-solid-pressed: var(--handy-color-palette-gray-300);
    --handy-color-bg-brand-solid: var(--handy-color-palette-gray-100);
    --handy-color-bg-brand-solid-hover: var(--handy-color-palette-gray-200);
    --handy-color-bg-brand-solid-pressed: var(--handy-color-palette-gray-300);
    --handy-color-bg-brand-strong: var(--handy-color-palette-navy-900);
    --handy-color-bg-neutral-strong: var(--handy-color-palette-gray-900);
    --handy-color-bg-brand-weak: var(--handy-color-palette-navy-1000);
    --handy-color-bg-brand-weak-hover: var(--handy-color-palette-navy-900);
    --handy-color-bg-positive-weak: var(--handy-color-palette-green-1000);
    --handy-color-bg-warning-weak: var(--handy-color-palette-orange-1000);
    --handy-color-bg-critical-weak: var(--handy-color-palette-red-1000);
    --handy-color-bg-critical-solid: var(--handy-color-palette-red-600);
    --handy-color-bg-critical-solid-hover: var(--handy-color-palette-red-700);
    --handy-color-bg-critical-solid-pressed: var(--handy-color-palette-red-800);
    --handy-color-bg-disabled: var(--handy-color-palette-gray-900);
    --handy-color-bg-overlay: rgba(0, 0, 0, 0.6);
    --handy-color-stroke-neutral-muted: rgba(255, 255, 255, 0.14);
    --handy-color-stroke-neutral-subtle: rgba(255, 255, 255, 0.08);
    --handy-color-stroke-neutral-contrast: rgba(255, 255, 255, 0.26);
    --handy-color-stroke-brand: var(--handy-color-palette-navy-400);
    --handy-color-stroke-critical: var(--handy-color-palette-red-400);
    --handy-color-stroke-positive: var(--handy-color-palette-green-400);
    --handy-color-stroke-warning: var(--handy-color-palette-orange-400);
    --handy-color-stroke-focus-ring: var(--handy-color-palette-navy-400);
    --handy-color-data-brand-1: var(--handy-color-palette-navy-900);
    --handy-color-data-brand-2: var(--handy-color-palette-navy-700);
    --handy-color-data-brand-3: var(--handy-color-palette-navy-500);
    --handy-color-data-brand-4: var(--handy-color-palette-navy-300);
    --handy-color-data-on-brand-1: var(--handy-color-palette-navy-200);
    --handy-color-data-on-brand-2: var(--handy-color-palette-gray-00);
    --handy-color-data-on-brand-3: var(--handy-color-palette-navy-1000);
    --handy-color-data-on-brand-4: var(--handy-color-palette-navy-1000);
    --handy-shadow-s1: 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --handy-shadow-s2: 0 2px 8px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
    --handy-shadow-s3: 0 4px 16px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.4);
    --handy-shadow-s4: 0 8px 28px rgba(0, 0, 0, 0.5), 0 24px 60px rgba(0, 0, 0, 0.45);
    --handy-shadow-spread: 0 0 24px rgba(0, 0, 0, 0.5), 0 0 64px rgba(0, 0, 0, 0.4);
    --handy-shadow-sticky-bottom: 0 -4px 20px rgba(0, 0, 0, 0.4);
    --handy-shadow-focus-ring: 0 0 0 3px color-mix(in srgb, var(--handy-color-stroke-focus-ring) 35%, transparent);
    --handy-shadow-focus-ring-critical: 0 0 0 3px color-mix(in srgb, var(--handy-color-stroke-critical) 30%, transparent);
    --handy-shadow-field-focus: inset 0 0 0 1px var(--handy-color-stroke-brand);
    --handy-shadow-field-focus-critical: inset 0 0 0 1px var(--handy-color-stroke-critical);
    color-scheme: dark;
  }
}

[data-handy-color-mode="dark-only"] {
  --handy-color-fg-neutral: var(--handy-color-palette-gray-100);
  --handy-color-fg-neutral-muted: var(--handy-color-palette-gray-400);
  --handy-color-fg-neutral-subtle: var(--handy-color-palette-gray-500);
  --handy-color-fg-placeholder: var(--handy-color-palette-gray-600);
  --handy-color-fg-disabled: var(--handy-color-palette-gray-600);
  --handy-color-fg-neutral-inverted: var(--handy-color-palette-gray-1000);
  --handy-color-fg-brand: var(--handy-color-palette-navy-400);
  --handy-color-fg-brand-contrast: var(--handy-color-palette-navy-800);
  --handy-color-fg-positive: var(--handy-color-palette-green-400);
  --handy-color-fg-warning: var(--handy-color-palette-orange-400);
  --handy-color-fg-critical: var(--handy-color-palette-red-400);
  --handy-color-fg-critical-contrast: var(--handy-color-palette-gray-00);
  --handy-color-fg-rating: #F5B342;
  --handy-color-bg-layer-default: var(--handy-color-palette-gray-1000);
  --handy-color-bg-layer-basement: var(--handy-color-palette-gray-950);
  --handy-color-bg-layer-floating: var(--handy-color-palette-gray-900);
  --handy-color-bg-layer-fill: var(--handy-color-palette-gray-800);
  --handy-color-bg-neutral-weak: var(--handy-color-palette-gray-900);
  --handy-color-bg-neutral-weak-hover: var(--handy-color-palette-gray-800);
  --handy-color-bg-neutral-weak-pressed: var(--handy-color-palette-gray-700);
  --handy-color-bg-neutral-inverted: var(--handy-color-palette-gray-100);
  --handy-color-bg-neutral-solid: var(--handy-color-palette-gray-100);
  --handy-color-bg-neutral-solid-hover: var(--handy-color-palette-gray-200);
  --handy-color-bg-neutral-solid-pressed: var(--handy-color-palette-gray-300);
  --handy-color-bg-brand-solid: var(--handy-color-palette-gray-100);
  --handy-color-bg-brand-solid-hover: var(--handy-color-palette-gray-200);
  --handy-color-bg-brand-solid-pressed: var(--handy-color-palette-gray-300);
  --handy-color-bg-brand-strong: var(--handy-color-palette-navy-900);
  --handy-color-bg-neutral-strong: var(--handy-color-palette-gray-900);
  --handy-color-bg-brand-weak: var(--handy-color-palette-navy-1000);
  --handy-color-bg-brand-weak-hover: var(--handy-color-palette-navy-900);
  --handy-color-bg-positive-weak: var(--handy-color-palette-green-1000);
  --handy-color-bg-warning-weak: var(--handy-color-palette-orange-1000);
  --handy-color-bg-critical-weak: var(--handy-color-palette-red-1000);
  --handy-color-bg-critical-solid: var(--handy-color-palette-red-600);
  --handy-color-bg-critical-solid-hover: var(--handy-color-palette-red-700);
  --handy-color-bg-critical-solid-pressed: var(--handy-color-palette-red-800);
  --handy-color-bg-disabled: var(--handy-color-palette-gray-900);
  --handy-color-bg-overlay: rgba(0, 0, 0, 0.6);
  --handy-color-stroke-neutral-muted: rgba(255, 255, 255, 0.14);
  --handy-color-stroke-neutral-subtle: rgba(255, 255, 255, 0.08);
  --handy-color-stroke-neutral-contrast: rgba(255, 255, 255, 0.26);
  --handy-color-stroke-brand: var(--handy-color-palette-navy-400);
  --handy-color-stroke-critical: var(--handy-color-palette-red-400);
  --handy-color-stroke-positive: var(--handy-color-palette-green-400);
  --handy-color-stroke-warning: var(--handy-color-palette-orange-400);
  --handy-color-stroke-focus-ring: var(--handy-color-palette-navy-400);
  --handy-color-data-brand-1: var(--handy-color-palette-navy-900);
  --handy-color-data-brand-2: var(--handy-color-palette-navy-700);
  --handy-color-data-brand-3: var(--handy-color-palette-navy-500);
  --handy-color-data-brand-4: var(--handy-color-palette-navy-300);
  --handy-color-data-on-brand-1: var(--handy-color-palette-navy-200);
  --handy-color-data-on-brand-2: var(--handy-color-palette-gray-00);
  --handy-color-data-on-brand-3: var(--handy-color-palette-navy-1000);
  --handy-color-data-on-brand-4: var(--handy-color-palette-navy-1000);
  --handy-shadow-s1: 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --handy-shadow-s2: 0 2px 8px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
  --handy-shadow-s3: 0 4px 16px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.4);
  --handy-shadow-s4: 0 8px 28px rgba(0, 0, 0, 0.5), 0 24px 60px rgba(0, 0, 0, 0.45);
  --handy-shadow-spread: 0 0 24px rgba(0, 0, 0, 0.5), 0 0 64px rgba(0, 0, 0, 0.4);
  --handy-shadow-sticky-bottom: 0 -4px 20px rgba(0, 0, 0, 0.4);
  --handy-shadow-focus-ring: 0 0 0 3px color-mix(in srgb, var(--handy-color-stroke-focus-ring) 35%, transparent);
  --handy-shadow-focus-ring-critical: 0 0 0 3px color-mix(in srgb, var(--handy-color-stroke-critical) 30%, transparent);
  --handy-shadow-field-focus: inset 0 0 0 1px var(--handy-color-stroke-brand);
  --handy-shadow-field-focus-critical: inset 0 0 0 1px var(--handy-color-stroke-critical);
  color-scheme: dark;
}

/* 모바일: 기본 단계(xN)는 그대로, 용도별 간격만 줄어든다 (D16) */
@media (max-width: 767px) {
  :root {
    --handy-dimension-spacing-x-global-gutter: var(--handy-dimension-x4);
    --handy-dimension-spacing-x-card-padding: var(--handy-dimension-x5);
    --handy-dimension-spacing-y-between-blocks: 36px;
    --handy-dimension-spacing-y-section: 72px;
    --handy-dimension-spacing-y-section-lg: 88px;
    --handy-dimension-spacing-y-section-head: 40px;
    --handy-dimension-spacing-y-section-head-lg: 56px;
    --handy-dimension-control-xl: 52px;
  }
}

/* 글자 스타일 — 크기·굵기·행간·자간 한 묶음. React <Text variant> · Tailwind text-style-* 와 같다 */
.text-style-display {
  font-size: var(--handy-text-style-display-font-size);
  font-weight: var(--handy-text-style-display-font-weight);
  line-height: var(--handy-text-style-display-line-height);
  letter-spacing: var(--handy-text-style-display-letter-spacing);
}
.text-style-title-1 {
  font-size: var(--handy-text-style-title-1-font-size);
  font-weight: var(--handy-text-style-title-1-font-weight);
  line-height: var(--handy-text-style-title-1-line-height);
  letter-spacing: var(--handy-text-style-title-1-letter-spacing);
}
.text-style-title-2 {
  font-size: var(--handy-text-style-title-2-font-size);
  font-weight: var(--handy-text-style-title-2-font-weight);
  line-height: var(--handy-text-style-title-2-line-height);
  letter-spacing: var(--handy-text-style-title-2-letter-spacing);
}
.text-style-title-3 {
  font-size: var(--handy-text-style-title-3-font-size);
  font-weight: var(--handy-text-style-title-3-font-weight);
  line-height: var(--handy-text-style-title-3-line-height);
  letter-spacing: var(--handy-text-style-title-3-letter-spacing);
}
.text-style-lead {
  font-size: var(--handy-text-style-lead-font-size);
  font-weight: var(--handy-text-style-lead-font-weight);
  line-height: var(--handy-text-style-lead-line-height);
  letter-spacing: var(--handy-text-style-lead-letter-spacing);
}
.text-style-body {
  font-size: var(--handy-text-style-body-font-size);
  font-weight: var(--handy-text-style-body-font-weight);
  line-height: var(--handy-text-style-body-line-height);
  letter-spacing: var(--handy-text-style-body-letter-spacing);
}
.text-style-ui {
  font-size: var(--handy-text-style-ui-font-size);
  font-weight: var(--handy-text-style-ui-font-weight);
  line-height: var(--handy-text-style-ui-line-height);
  letter-spacing: var(--handy-text-style-ui-letter-spacing);
}
.text-style-ui-strong {
  font-size: var(--handy-text-style-ui-strong-font-size);
  font-weight: var(--handy-text-style-ui-strong-font-weight);
  line-height: var(--handy-text-style-ui-strong-line-height);
  letter-spacing: var(--handy-text-style-ui-strong-letter-spacing);
}
.text-style-caption {
  font-size: var(--handy-text-style-caption-font-size);
  font-weight: var(--handy-text-style-caption-font-weight);
  line-height: var(--handy-text-style-caption-line-height);
  letter-spacing: var(--handy-text-style-caption-letter-spacing);
}
.text-style-label {
  font-size: var(--handy-text-style-label-font-size);
  font-weight: var(--handy-text-style-label-font-weight);
  line-height: var(--handy-text-style-label-line-height);
  letter-spacing: var(--handy-text-style-label-letter-spacing);
}