/**
 * KDS 2.0 디자인 토큰 (Beta, 2026-09 기준 키트 변수 전체)
 * 모드: 기본(라이트) :root / [data-mode="agent"|"dark"|"dark-agent"]
 * 플랫폼 여백: [data-platform="tablet"|"desktop"]  ·  표 밀도: [data-density="wide"|"compact"]
 * 이 파일은 고치지 말고, 필요한 값은 별도 CSS에서 var(--토큰)으로 가져다 쓰세요.
 */

:root {
  /* ── palette (257) ── */
  --static-white: #ffffff;
  --static-black: #131415;
  --gray-25: #f8f9fa;
  --gray-50: #f3f4f6;
  --gray-75: #eeeff2;
  --gray-100: #e9eaee;
  --gray-150: #d5d8dd;
  --gray-200: #c7cad1;
  --gray-250: #b9bdc5;
  --gray-300: #adb1b9;
  --gray-350: #9fa4ad;
  --gray-400: #8b8f97;
  --gray-450: #7a7e86;
  --gray-500: #6f737b;
  --gray-550: #61646b;
  --gray-600: #55585d;
  --gray-650: #4a4c50;
  --gray-700: #3d3f43;
  --gray-750: #313235;
  --gray-800: #232425;
  --gray-850: #1e1f20;
  --gray-900: #191a1b;
  --red-100: #fce9e9;
  --red-150: #fadbdc;
  --red-200: #f2a6a9;
  --red-300: #ec797d;
  --red-400: #e54d53;
  --red-500: #e0282f;
  --red-600: #bb1b21;
  --red-700: #8a1418;
  --red-800: #3e090b;
  --teal-100: #e1f5f5;
  --teal-150: #cdeeee;
  --teal-200: #a9e5e1;
  --teal-300: #4cc8c3;
  --teal-400: #00a39b;
  --teal-500: #007f7f;
  --teal-600: #005e66;
  --teal-700: #00484e;
  --teal-800: #002629;
  --blue-100: #d9f2ff;
  --blue-150: #c2ebff;
  --blue-200: #80d4ff;
  --blue-300: #50b6fe;
  --blue-400: #148aff;
  --blue-500: #005ccc;
  --blue-600: #0049a3;
  --blue-700: #003676;
  --blue-800: #001e42;
  --green-100: #e5f5e1;
  --green-150: #d0edc9;
  --green-200: #8dd47d;
  --green-300: #3ab21f;
  --green-400: #1c9900;
  --green-500: #167a00;
  --green-600: #136600;
  --green-700: #0c4200;
  --green-800: #072900;
  --yellow-100: #fff3e5;
  --yellow-150: #ffe8d1;
  --yellow-200: #ffb870;
  --yellow-300: #fe9d38;
  --yellow-400: #e57300;
  --yellow-500: #b85c00;
  --yellow-600: #8f4800;
  --yellow-700: #663300;
  --yellow-800: #3d1f00;
  --olive-100: #ebf5d8;
  --olive-150: #e2f0c6;
  --olive-200: #b3d96d;
  --olive-300: #82b620;
  --olive-400: #639900;
  --olive-500: #538000;
  --olive-600: #426600;
  --olive-700: #2e4700;
  --olive-800: #1e2e00;
  --purple-100: #efebff;
  --purple-150: #e7e0ff;
  --purple-200: #c7b8ff;
  --purple-300: #af99ff;
  --purple-400: #8666ff;
  --purple-500: #6941ff;
  --purple-600: #4c00e5;
  --purple-700: #3900ad;
  --purple-800: #1e005c;
  --opacity-black-0: #13141500;
  --opacity-black-5: #1314150d;
  --opacity-black-10: #1314151a;
  --opacity-black-15: #13141526;
  --opacity-black-20: #13141533;
  --opacity-black-25: #13141540;
  --opacity-black-30: #1314154d;
  --opacity-black-35: #13141559;
  --opacity-black-40: #13141566;
  --opacity-black-45: #13141573;
  --opacity-black-50: #13141580;
  --opacity-black-55: #1314158c;
  --opacity-black-60: #13141599;
  --opacity-black-65: #131415a6;
  --opacity-black-70: #131415b2;
  --opacity-black-75: #131415bf;
  --opacity-black-80: #131415cc;
  --opacity-black-85: #131415d9;
  --opacity-black-90: #131415e5;
  --opacity-black-95: #131415f2;
  --opacity-white-0: #ffffff00;
  --opacity-white-5: #ffffff0d;
  --opacity-white-10: #ffffff1a;
  --opacity-white-15: #ffffff26;
  --opacity-white-20: #ffffff33;
  --opacity-white-25: #ffffff40;
  --opacity-white-30: #ffffff4d;
  --opacity-white-35: #ffffff59;
  --opacity-white-40: #ffffff66;
  --opacity-white-45: #ffffff73;
  --opacity-white-50: #ffffff80;
  --opacity-white-55: #ffffff8c;
  --opacity-white-60: #ffffff99;
  --opacity-white-65: #ffffffa6;
  --opacity-white-70: #ffffffb2;
  --opacity-white-75: #ffffffbf;
  --opacity-white-80: #ffffffcc;
  --opacity-white-85: #ffffffd9;
  --opacity-white-90: #ffffffe5;
  --opacity-white-95: #fffffff2;
  --graphic-red-100: #ffd9db;
  --graphic-red-200: #ffb5b9;
  --graphic-red-300: #f2555c;
  --graphic-red-400: #d94c52;
  --graphic-yellow-100: #ffeac9;
  --graphic-yellow-200: #ffd696;
  --graphic-yellow-300: #ffa82e;
  --graphic-yellow-400: #e59729;
  --graphic-green-100: #dcf8ed;
  --graphic-green-200: #a6ebd1;
  --graphic-green-300: #3abd8b;
  --graphic-green-400: #33a378;
  --graphic-teal-100: #beeff1;
  --graphic-teal-200: #91e3e6;
  --graphic-teal-300: #05b0b9;
  --graphic-teal-400: #0499a1;
  --graphic-blue-100: #cdeeff;
  --graphic-blue-200: #9dddff;
  --graphic-blue-300: #2ba7e8;
  --graphic-blue-400: #2695cf;
  --graphic-violet-blue-100: #d2e0ff;
  --graphic-violet-blue-200: #adc6ff;
  --graphic-violet-blue-300: #4e7cf5;
  --graphic-violet-blue-400: #466fdb;
  --graphic-purple-100: #efebff;
  --graphic-purple-200: #c7b8ff;
  --graphic-purple-300: #8666ff;
  --graphic-purple-400: #795ce5;
  --graphic-light-gray-100: #f3f4f6;
  --graphic-light-gray-200: #e8e9ec;
  --graphic-light-gray-300: #d0d5dc;
  --graphic-light-gray-400: #b2b7bf;
  --graphic-light-gray-500: #b4bac5;
  --graphic-light-gray-600: #737881;
  --graphic-dark-gray-100: #f3f4f6;
  --graphic-dark-gray-200: #c4c5c8;
  --graphic-dark-gray-300: #c3c7d2;
  --graphic-dark-gray-400: #979ca4;
  --graphic-dark-gray-500: #838996;
  --graphic-dark-gray-600: #5f636b;
  --brand-myk-red-200: #fbb3a2;
  --brand-myk-red-300: #fb6977;
  --brand-myk-red-400: #fe2e36;
  --brand-myk-teal-300: #05b0b9;
  --banner-pink-100: #ede8eb;
  --banner-pink-200: #e5dce1;
  --banner-pink-300: #b86a95;
  --banner-pink-400: #ad618b;
  --banner-pink-500: #99597c;
  --banner-pink-600: #8f5374;
  --banner-pink-700: #42383e;
  --banner-pink-800: #383034;
  --banner-red-100: #ede8e9;
  --banner-red-200: #e5dcdd;
  --banner-red-300: #ba6c70;
  --banner-red-400: #b06266;
  --banner-red-500: #9b5a5d;
  --banner-red-600: #915457;
  --banner-red-700: #423839;
  --banner-red-800: #383030;
  --banner-brown-100: #edebe8;
  --banner-brown-200: #e5e1dc;
  --banner-brown-300: #8f7d6a;
  --banner-brown-400: #857360;
  --banner-brown-500: #716253;
  --banner-brown-600: #66594c;
  --banner-brown-700: #423d38;
  --banner-brown-800: #383430;
  --banner-olive-100: #ebede8;
  --banner-olive-200: #e2e5dc;
  --banner-olive-300: #7b8567;
  --banner-olive-400: #707a5d;
  --banner-olive-500: #5e6650;
  --banner-olive-600: #555c48;
  --banner-olive-700: #3f4238;
  --banner-olive-800: #353830;
  --banner-green-100: #e8edeb;
  --banner-green-200: #dce5e2;
  --banner-green-300: #69877c;
  --banner-green-400: #5f7c71;
  --banner-green-500: #51685f;
  --banner-green-600: #495e56;
  --banner-green-700: #38423e;
  --banner-green-800: #303835;
  --banner-teal-100: #e8eded;
  --banner-teal-200: #dce5e5;
  --banner-teal-300: #688684;
  --banner-teal-400: #5e7b7a;
  --banner-teal-500: #506766;
  --banner-teal-600: #485d5c;
  --banner-teal-700: #384242;
  --banner-teal-800: #303838;
  --banner-skyblue-100: #e8eced;
  --banner-skyblue-200: #dce3e5;
  --banner-skyblue-300: #677e85;
  --banner-skyblue-400: #5d737a;
  --banner-skyblue-500: #506166;
  --banner-skyblue-600: #48575c;
  --banner-skyblue-700: #384042;
  --banner-skyblue-800: #303638;
  --banner-blue-100: #e8ebed;
  --banner-blue-200: #dce1e5;
  --banner-blue-300: #6f7f8f;
  --banner-blue-400: #657585;
  --banner-blue-500: #586470;
  --banner-blue-600: #505b66;
  --banner-blue-700: #383d42;
  --banner-blue-800: #303438;
  --banner-violetblue-100: #e8e9ed;
  --banner-violetblue-200: #dcdee5;
  --banner-violetblue-300: #767b98;
  --banner-violetblue-400: #6b708d;
  --banner-violetblue-500: #5e6279;
  --banner-violetblue-600: #56596f;
  --banner-violetblue-700: #383a42;
  --banner-violetblue-800: #303138;
  --banner-purple-100: #e9e8ed;
  --banner-purple-200: #dedce5;
  --banner-purple-300: #857bab;
  --banner-purple-400: #7a70a0;
  --banner-purple-500: #6d658c;
  --banner-purple-600: #655d82;
  --banner-purple-700: #3a3842;
  --banner-purple-800: #323038;
  --banner-gray-100: #f1f1f1;
  --banner-gray-200: #dedede;
  --banner-gray-300: #6f737b;
  --banner-gray-400: #6f737b;
  --banner-gray-500: #6f737b;
  --banner-gray-600: #6f737b;
  --banner-gray-700: #383a3d;
  --banner-gray-800: #343538;
  /* ── color (337) ── */
  --background-default: var(--static-white);
  --surface-primary-01: var(--static-white);
  --surface-primary-02: var(--gray-25);
  --surface-primary-03: var(--static-white);
  --surface-primary-04: var(--static-white);
  --fill-primary: var(--gray-900);
  --fill-primary-hover: var(--gray-750);
  --fill-primary-pressed: var(--gray-700);
  --fill-secondary-01: var(--gray-100);
  --fill-secondary-02: var(--gray-100);
  --fill-secondary-03: var(--gray-100);
  --fill-secondary-04: var(--gray-100);
  --fill-secondary-hover-01: var(--gray-150);
  --fill-secondary-hover-02: var(--gray-150);
  --fill-secondary-hover-03: var(--gray-150);
  --fill-secondary-hover-04: var(--gray-150);
  --fill-secondary-pressed-01: var(--gray-200);
  --fill-secondary-pressed-02: var(--gray-200);
  --fill-secondary-pressed-03: var(--gray-200);
  --fill-secondary-pressed-04: var(--gray-200);
  --fill-tertiary: var(--opacity-black-0);
  --fill-tertiary-hover-01: var(--gray-50);
  --fill-tertiary-hover-02: var(--gray-100);
  --fill-tertiary-hover-03: var(--gray-50);
  --fill-tertiary-hover-04: var(--gray-50);
  --fill-tertiary-pressed-01: var(--gray-100);
  --fill-tertiary-pressed-02: var(--gray-150);
  --fill-tertiary-pressed-03: var(--gray-100);
  --fill-tertiary-pressed-04: var(--gray-100);
  --text-primary: var(--gray-900);
  --text-secondary-01: var(--gray-600);
  --text-secondary-02: var(--gray-650);
  --text-secondary-03: var(--gray-600);
  --text-secondary-04: var(--gray-600);
  --text-tertiary-01: var(--gray-500);
  --text-tertiary-02: var(--gray-550);
  --text-tertiary-03: var(--gray-500);
  --text-tertiary-04: var(--gray-500);
  --text-disabled-01: var(--gray-300);
  --text-disabled-02: var(--gray-350);
  --text-disabled-03: var(--gray-300);
  --text-disabled-04: var(--gray-300);
  --text-on-dark-disabled: var(--gray-600);
  --text-inverse: var(--static-white);
  --text-feedback-complete: var(--gray-900);
  --text-feedback-info-01: var(--teal-500);
  --text-feedback-info-02: var(--teal-600);
  --text-feedback-info-03: var(--teal-500);
  --text-feedback-info-04: var(--teal-500);
  --text-feedback-critical-01: var(--red-500);
  --text-feedback-critical-02: var(--red-600);
  --text-feedback-critical-03: var(--red-500);
  --text-feedback-critical-04: var(--red-500);
  --icon-primary: var(--gray-900);
  --icon-secondary-01: var(--gray-600);
  --icon-secondary-02: var(--gray-650);
  --icon-secondary-03: var(--gray-600);
  --icon-secondary-04: var(--gray-600);
  --icon-tertiary-01: var(--gray-500);
  --icon-tertiary-02: var(--gray-550);
  --icon-tertiary-03: var(--gray-500);
  --icon-tertiary-04: var(--gray-500);
  --icon-disabled-01: var(--gray-300);
  --icon-disabled-02: var(--gray-350);
  --icon-disabled-03: var(--gray-300);
  --border-primary-01: var(--gray-400);
  --border-primary-02: var(--gray-400);
  --border-primary-03: var(--gray-400);
  --border-primary-04: var(--gray-400);
  --border-primary-hover-01: var(--gray-600);
  --border-primary-hover-02: var(--gray-650);
  --border-primary-hover-03: var(--gray-600);
  --border-primary-hover-04: var(--gray-600);
  --border-primary-pressed: var(--gray-900);
  --border-primary-focused: var(--gray-900);
  --border-secondary-01: var(--gray-100);
  --dim-overlay: var(--opacity-black-65);
  --border-secondary-02: var(--gray-150);
  --border-secondary-03: var(--gray-100);
  --border-secondary-04: var(--gray-100);
  --border-tertiary-01: var(--gray-50);
  --border-tertiary-02: var(--gray-75);
  --border-tertiary-03: var(--gray-50);
  --border-tertiary-04: var(--gray-50);
  --border-subtle-01: var(--gray-150);
  --border-subtle-02: var(--gray-150);
  --border-subtle-03: var(--gray-150);
  --border-subtle-04: var(--gray-150);
  --border-disabled-01: var(--gray-150);
  --border-disabled-02: var(--gray-150);
  --border-disabled-03: var(--gray-150);
  --border-disabled-04: var(--gray-150);
  --border-opacity-white: var(--opacity-white-65);
  --border-inverse: var(--gray-900);
  --fill-disabled-01: var(--gray-50);
  --fill-disabled-02: var(--gray-75);
  --icon-disabled-04: var(--gray-300);
  --icon-inverse: var(--static-white);
  --icon-feedback-complete: var(--gray-900);
  --icon-feedback-info-01: var(--teal-500);
  --icon-feedback-info-02: var(--teal-600);
  --icon-feedback-info-03: var(--teal-500);
  --icon-feedback-info-04: var(--teal-500);
  --icon-feedback-critical-01: var(--red-500);
  --icon-feedback-critical-02: var(--red-600);
  --icon-feedback-critical-03: var(--red-500);
  --icon-feedback-critical-04: var(--red-500);
  --fill-disabled-03: var(--gray-50);
  --fill-disabled-04: var(--gray-50);
  --fill-opacity-white: var(--opacity-white-65);
  --border-on-dark-disabled: var(--gray-600);
  --border-feedback-critical: var(--red-500);
  --fill-on-white-inverse: var(--static-white);
  --fill-on-dark-inverse: var(--gray-700);
  --fill-on-dark-hover: var(--gray-750);
  --fill-on-dark-pressed: var(--gray-800);
  --fill-accent-primary: var(--red-500);
  --fill-accent-primary-hover: var(--red-600);
  --fill-accent-primary-pressed: var(--red-700);
  --fill-feedback-info: var(--teal-500);
  --fill-feedback-critical-hover: var(--red-100);
  --fill-feedback-critical-pressed: var(--red-150);
  --link-link-primary: var(--blue-500);
  --indicator-dot-fill-default: #191a1b80;
  --indicator-dot-fill-default-active: var(--gray-900);
  --indicator-number-indicator-default-bg: var(--gray-600);
  --indicator-number-indicator-default-current: var(--static-white);
  --indicator-number-indicator-default-total: var(--gray-150);
  --indicator-number-indicator-default-icon: var(--static-white);
  --indicator-number-indicator-inverse-bg: var(--static-white);
  --indicator-number-indicator-inverse-current: var(--static-black);
  --indicator-number-indicator-inverse-total: var(--text-tertiary-01);
  --indicator-number-indicator-inverse-icon: var(--static-black);
  --indicator-dot-fill-inverse: var(--opacity-white-45);
  --slider-handle-fill-default: var(--static-white);
  --switch-handle-fill-default: var(--static-white);
  --switch-handle-fill-disabled: var(--static-white);
  --slider-handle-fill-disabled: var(--gray-50);
  --slider-handle-border-default: var(--gray-100);
  --slider-handle-border-disabled: var(--gray-100);
  --indicator-dot-fill-inverse-active: var(--opacity-white-95);
  --link-link-primary-hover: var(--blue-700);
  --switch-fill-disabled: var(--gray-150);
  --link-link-primary-pressed: var(--blue-700);
  --tag-membership-fill-vvip: var(--red-500);
  --chip-fill-inactive-default: var(--gray-50);
  --chip-fill-inactive-hover: var(--gray-100);
  --chip-fill-inactive-pressed: var(--gray-150);
  --notification-fill-default: var(--gray-500);
  --notification-icon-default: var(--static-white);
  --notification-icon-info: var(--teal-400);
  --notification-icon-critical: var(--red-400);
  --table-cell-header-fill: var(--gray-50);
  --dim-gradient-chip-end: var(--opacity-white-0);
  --dim-gradient-chip-start: var(--static-white);
  --dim-gradient-prompt-area-end: #ffffff00;
  --dim-gradient-prompt-area-start: var(--surface-primary-04);
  --dim-gradient-bg-end: #ffffff00;
  --dim-gradient-bg-start: var(--background-default);
  --dim-gradient-sheet-end: #ffffff00;
  --dim-gradient-sheet-start: var(--surface-primary-04);
  --gradient-skeleton-element: var(--gray-50);
  --gradient-skeleton-end-start: #ffffff00;
  --gradient-skeleton-stop: #ffffff80;
  --gradient-graph-accent-alpha: #4cc8c300;
  --gradient-graph-top-end: var(--teal-300);
  --gradient-graph-top-start: var(--teal-500);
  --gradient-graph-bottom-end: var(--teal-200);
  --gradient-graph-bottom-start: var(--teal-400);
  --gradient-ai-text-start: var(--text-secondary-01);
  --gradient-ai-text-stop-01: var(--brand-myk-red-400);
  --gradient-ai-text-stop-02: var(--brand-myk-red-400);
  --gradient-ai-text-stop-03: var(--teal-400);
  --gradient-ai-text-end: var(--text-secondary-01);
  --gradient-graph-layer-end: var(--teal-100);
  --gradient-ai-solid-start: var(--brand-myk-red-400);
  --gradient-ai-solid-stop-01: var(--brand-myk-red-300);
  --gradient-ai-solid-stop-02: var(--brand-myk-red-200);
  --gradient-ai-solid-stop-03: var(--brand-myk-teal-300);
  --gradient-ai-solid-end: var(--teal-400);
  --gradient-ai-border-stop-01: var(--brand-myk-red-400);
  --gradient-ai-border-stop-02: var(--brand-myk-teal-300);
  --gradient-graph-layer-start: var(--background-default);
  --gradient-ai-indicator-end: var(--gray-900);
  --gradient-ai-indicator-stop: var(--gray-400);
  --gradient-ai-indicator-start: var(--gray-600);
  --gradient-ai-indicator-accent-end: var(--teal-100);
  --gradient-ai-indicator-accent-start: var(--teal-500);
  --tag-membership-fill-vip: var(--gray-900);
  --tag-membership-fill-gold: var(--yellow-300);
  --tag-membership-fill-silver: var(--gray-500);
  --tag-membership-fill-silver-02: var(--gray-500);
  --tag-membership-fill-white: var(--gray-100);
  --tag-membership-fill-white-02: var(--gray-100);
  --tag-membership-fill-standard: var(--gray-100);
  --tag-membership-fill-standard-02: var(--gray-100);
  --tag-membership-fill-all: var(--blue-500);
  --tag-membership-text-primary: var(--gray-900);
  --tag-membership-text-secondary: var(--gray-600);
  --tag-membership-text-secondary-02: var(--gray-600);
  --tag-membership-text-inverse: var(--static-white);
  --tag-status-fill-default: var(--gray-100);
  --tag-status-fill-default-02: var(--gray-100);
  --tag-status-fill-progress: var(--blue-100);
  --tag-status-fill-progress-02: var(--blue-100);
  --tag-status-fill-positive: var(--green-100);
  --tag-status-fill-positive-02: var(--green-100);
  --tag-status-fill-complete: var(--gray-100);
  --tag-status-fill-complete-02: var(--gray-100);
  --tag-status-fill-info: var(--teal-100);
  --tag-status-fill-info-02: var(--teal-100);
  --tag-status-fill-warning: var(--yellow-100);
  --tag-status-fill-warning-02: var(--yellow-100);
  --tag-status-fill-critical: var(--red-100);
  --tag-status-fill-critical-02: var(--red-100);
  --tag-status-fill-custom-a: var(--olive-100);
  --tag-status-fill-custom-a-02: var(--olive-100);
  --tag-status-fill-custom-b: var(--purple-100);
  --tag-status-fill-custom-b-02: var(--purple-100);
  --tag-status-fill-neutral: var(--gray-100);
  --tag-status-fill-inverse: var(--static-white);
  --tag-status-fill-disabled: var(--gray-50);
  --tag-status-fill-disabled-02: var(--gray-50);
  --tag-status-text-default: var(--gray-600);
  --tag-status-text-progress: var(--blue-600);
  --tag-status-text-positive: var(--green-600);
  --tag-status-text-complete: var(--gray-900);
  --tag-status-text-info: var(--teal-600);
  --tag-status-text-warning: var(--yellow-600);
  --tag-status-text-critical: var(--red-600);
  --tag-status-text-custom-a: var(--olive-600);
  --tag-status-text-custom-b: var(--purple-600);
  --tag-status-text-neutral: var(--gray-600);
  --tag-status-text-inverse: var(--gray-650);
  --tag-status-text-disabled: var(--gray-300);
  --tag-status-text-lighten-default: var(--gray-500);
  --tag-status-text-lighten-default-02: var(--gray-500);
  --tag-status-text-lighten-progress: var(--blue-500);
  --tag-status-text-lighten-progress-02: var(--blue-500);
  --tag-status-text-lighten-positive: var(--green-500);
  --tag-status-text-lighten-positive-02: var(--green-500);
  --tag-status-text-lighten-complete: var(--gray-800);
  --tag-status-text-lighten-complete-02: var(--gray-800);
  --tag-status-text-lighten-info: var(--teal-500);
  --tag-status-text-lighten-info-02: var(--teal-500);
  --tag-status-text-lighten-warning: var(--yellow-500);
  --tag-status-text-lighten-warning-02: var(--yellow-500);
  --tag-status-text-lighten-critical: var(--red-500);
  --tag-status-text-lighten-critical-02: var(--red-500);
  --tag-status-text-lighten-custom-a: var(--olive-500);
  --tag-status-text-lighten-custom-a-02: var(--olive-500);
  --tag-status-text-lighten-custom-b: var(--purple-500);
  --tag-status-text-lighten-custom-b-02: var(--purple-500);
  --tag-status-text-lighten-neutral: var(--gray-500);
  --tag-status-text-lighten-inverse: var(--static-white);
  --tag-status-text-lighten-disabled: var(--gray-300);
  --tag-status-text-lighten-disabled-02: var(--gray-300);
  --tag-category-fill-basic: var(--gray-100);
  --tag-category-fill-basic-02: var(--gray-100);
  --tag-category-fill-recommend: var(--teal-100);
  --tag-category-fill-recommend-02: var(--teal-100);
  --tag-category-fill-sale: var(--red-100);
  --tag-category-fill-sale-02: var(--red-100);
  --tag-category-fill-hot: var(--blue-100);
  --tag-category-fill-hot-02: var(--blue-100);
  --tag-category-fill-new: var(--purple-100);
  --tag-category-fill-new-02: var(--purple-100);
  --tag-category-text-basic: var(--gray-600);
  --tag-category-text-basic-02: var(--gray-600);
  --tag-category-text-recommend: var(--teal-600);
  --tag-category-text-sale: var(--red-600);
  --tag-category-text-hot: var(--blue-600);
  --tag-category-text-new: var(--purple-600);
  --icon-feedback-on-dark-info: var(--teal-300);
  --icon-feedback-on-dark-critical: var(--red-300);
  --surface-on-white-inverse: var(--gray-25);
  --border-feedback-info: var(--teal-400);
  --fill-feedback-info-disabled: var(--border-disabled-01);
  --graphic-red-main: var(--graphic-red-300);
  --graphic-red-sub: var(--graphic-red-200);
  --graphic-red-sub-light: var(--graphic-red-100);
  --graphic-yellow-main: var(--graphic-yellow-300);
  --graphic-yellow-sub: var(--graphic-yellow-200);
  --graphic-yellow-sub-light: var(--graphic-yellow-100);
  --graphic-green-main: var(--graphic-green-300);
  --graphic-teal-main: var(--graphic-teal-300);
  --graphic-teal-sub: var(--graphic-teal-200);
  --graphic-teal-sub-light: var(--graphic-teal-100);
  --graphic-blue-main: var(--graphic-blue-300);
  --graphic-blue-sub: var(--graphic-blue-200);
  --graphic-blue-sub-light: var(--graphic-blue-100);
  --graphic-green-sub: var(--graphic-green-200);
  --graphic-green-sub-light: var(--graphic-green-100);
  --graphic-violet-blue-main: var(--graphic-violet-blue-300);
  --graphic-violet-blue-sub: var(--graphic-violet-blue-200);
  --graphic-violet-blue-sub-light: var(--graphic-violet-blue-100);
  --graphic-purple-main: var(--graphic-purple-300);
  --graphic-purple-sub: var(--graphic-purple-200);
  --graphic-purple-sub-light: var(--graphic-purple-100);
  --graphic-light-gray-main: var(--graphic-light-gray-500);
  --graphic-light-gray-sub: var(--graphic-light-gray-300);
  --graphic-light-gray-sub-light: var(--graphic-light-gray-100);
  --graphic-dark-gray-main: var(--graphic-dark-gray-500);
  --graphic-dark-gray-sub: var(--graphic-dark-gray-300);
  --graphic-dark-gray-sub-light: var(--graphic-dark-gray-100);
  --banner-bg-soft-pink: var(--banner-pink-100);
  --banner-bg-soft-red: var(--banner-red-100);
  --banner-bg-soft-brown: var(--banner-brown-100);
  --banner-bg-soft-olive: var(--banner-olive-100);
  --banner-bg-soft-green: var(--banner-green-100);
  --banner-bg-soft-teal: var(--banner-teal-100);
  --banner-bg-soft-skyblue: var(--banner-skyblue-100);
  --banner-bg-soft-blue: var(--banner-blue-100);
  --banner-bg-soft-violetblue: var(--banner-violetblue-100);
  --banner-bg-soft-purple: var(--banner-purple-100);
  --banner-bg-soft-gray: var(--banner-gray-100);
  --banner-bg-solid-pink: var(--banner-pink-300);
  --banner-bg-solid-red: var(--banner-red-300);
  --banner-bg-solid-brown: var(--banner-brown-300);
  --banner-bg-solid-olive: var(--banner-olive-300);
  --banner-bg-solid-green: var(--banner-green-300);
  --banner-bg-solid-teal: var(--banner-teal-300);
  --banner-bg-solid-skyblue: var(--banner-skyblue-300);
  --banner-bg-solid-blue: var(--banner-blue-300);
  --banner-bg-solid-violetblue: var(--banner-violetblue-300);
  --banner-bg-solid-purple: var(--banner-purple-300);
  --banner-bg-solid-gray: var(--banner-gray-300);
  --banner-text-title-soft: var(--gray-900);
  --banner-text-title-solid: var(--static-white);
  --banner-text-subtitle-soft: var(--gray-600);
  --banner-text-subtitle-solid: var(--static-white);
  --banner-icon-soft: var(--gray-900);
  --banner-icon-solid: var(--static-white);
  --banner-button-bg-soft: var(--gray-900);
  --banner-button-bg-solid: var(--static-white);
  --banner-button-text-soft: var(--static-white);
  --banner-button-text-solid: var(--gray-900);
  /* ── typography (42) ── */
  --text-display-xlarge: var(--font-size-60);
  --font-family-kt-flow: kt flow;
  --text-display-large: var(--font-size-40);
  --text-display-medium: var(--font-size-36);
  --text-heading-large: var(--font-size-32);
  --text-heading-medium: var(--font-size-24);
  --text-heading-small: var(--font-size-22);
  --text-title-large: var(--font-size-20);
  --text-title-medium: var(--font-size-18);
  --text-title-small: var(--font-size-16);
  --text-body-large: var(--font-size-16);
  --text-body-medium: var(--font-size-15);
  --text-body-small: var(--font-size-14);
  --text-label-large: var(--font-size-17);
  --text-label-medium: var(--font-size-15);
  --text-label-small: var(--font-size-13);
  --text-label-xsmall: var(--font-size-10);
  --text-caption-medium: var(--font-size-12);
  --font-family-pretendard: Pretendard;
  --font-size-60: 60px;
  --font-size-40: 40px;
  --font-size-36: 36px;
  --font-size-32: 32px;
  --font-size-24: 24px;
  --font-size-22: 22px;
  --font-size-20: 20px;
  --font-size-18: 18px;
  --font-size-17: 17px;
  --font-size-16: 16px;
  --font-size-15: 15px;
  --font-size-14: 14px;
  --font-size-13: 13px;
  --font-size-12: 12px;
  --font-size-10: 10px;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --line-height-default: 148%;
  --line-height-reading-1: 170%;
  --line-height-reading-2: 158%;
  --line-height-reading-3: 130%;
  /* ── breakpoint (17) ── */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --margin-platform: var(--space-20);
  --gutter-platform: var(--space-12);
  /* ── radius (10) ── */
  --radius-0: 0;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-circle: 999px;
  --stroke-border: 1px;
  /* ── elevation (14) ── */
  --elevation-x-0: 0;
  --elevation-y-0: 0;
  --elevation-y-2: 2px;
  --elevation-y-4: 4px;
  --elevation-y-8: 8px;
  --elevation-blur-2: 2px;
  --elevation-blur-4: 4px;
  --elevation-blur-8: 8px;
  --elevation-blur-12: 12px;
  --elevation-level-0: var(--background-default);
  --elevation-level-1: var(--surface-primary-01);
  --elevation-level-2: var(--surface-primary-02);
  --elevation-level-3: var(--surface-primary-03);
  --elevation-level-4: var(--surface-primary-04);
  /* ── motion (8) ── */
  --motion-easing-linear: cubic-bezier (0,0,1,1);
  --motion-duration-short: 100ms;
  --motion-duration-medium: 200ms;
  --motion-duration-long: 300ms;
  --motion-duration-loop: 1000ms;
  --motion-easing-ease-in: cubic-bezier (0.4,0,1,1);
  --motion-easing-ease-out: cubic-bezier (0,0,0.5,1);
  --motion-easing-ease-in-out: cubic-bezier (0.4,0,0.5,1);
  /* ── iconography (7) ── */
  --icon-size-xxsmall: 12px;
  --icon-size-xsmall: 16px;
  --icon-size-small: 20px;
  --icon-size-medium: 24px;
  --icon-size-large: 32px;
  --icon-size-xlarge: 48px;
  --icon-size-xxlarge: 56px;
  /* ── data-table (3) ── */
  --data-table-density-vertical-padding: var(--space-16);
  --data-table-density-horizontal-padding: var(--space-20);
  --data-table-density-min-height: 56px;
  /* ── data-visual (35) ── */
  --data-visual-default-gray: var(--gray-300);
  --data-visual-default-teal: var(--teal-400);
  --data-visual-default-yellow: var(--yellow-300);
  --data-visual-default-blue: var(--blue-400);
  --data-visual-default-purple: var(--purple-400);
  --data-visual-default-red: var(--red-400);
  --data-visual-default-olive: var(--olive-400);
  --data-visual-default-navy: #5466bb;
  --data-visual-default-magenta: #e85fb3;
  --data-visual-default-green: var(--green-400);
  --data-visual-default-lemon: #b4900e;
  --data-visual-light-teal: var(--teal-300);
  --data-visual-light-yellow: var(--yellow-300);
  --data-visual-light-blue: var(--blue-300);
  --data-visual-light-purple: var(--purple-300);
  --data-visual-light-red: var(--red-300);
  --data-visual-light-olive: var(--olive-300);
  --data-visual-light-navy: #6676c2;
  --data-visual-light-magenta: #e968b7;
  --data-visual-light-green: var(--green-300);
  --data-visual-light-lemon: #dfb91f;
  --data-visual-strong-teal: var(--teal-500);
  --data-visual-strong-yellow: var(--yellow-500);
  --data-visual-strong-blue: var(--blue-500);
  --data-visual-strong-purple: var(--purple-500);
  --data-visual-strong-red: var(--red-500);
  --data-visual-strong-olive: var(--olive-500);
  --data-visual-strong-navy: #3a4992;
  --data-visual-strong-magenta: #e236a0;
  --data-visual-strong-green: var(--green-500);
  --data-visual-strong-lemon: #8e720b;
  --data-visual-sequential-teal-1: var(--teal-400);
  --data-visual-sequential-teal-2: var(--teal-500);
  --data-visual-sequential-teal-3: var(--teal-600);
  --data-visual-sequential-teal-4: var(--teal-800);
}

[data-mode="agent"] {
  /* color · light/agent (127 overrides) */
  --background-default: var(--gray-50);
  --surface-primary-01: var(--gray-50);
  --surface-primary-02: var(--static-white);
  --surface-primary-03: var(--gray-50);
  --fill-secondary-01: var(--gray-150);
  --fill-secondary-03: var(--gray-150);
  --fill-secondary-hover-01: var(--gray-200);
  --fill-secondary-hover-03: var(--gray-200);
  --fill-secondary-pressed-01: var(--gray-250);
  --fill-secondary-pressed-03: var(--gray-250);
  --fill-tertiary-hover-01: var(--gray-100);
  --fill-tertiary-hover-02: var(--gray-50);
  --fill-tertiary-hover-03: var(--gray-100);
  --fill-tertiary-pressed-01: var(--gray-150);
  --fill-tertiary-pressed-02: var(--gray-100);
  --fill-tertiary-pressed-03: var(--gray-150);
  --text-secondary-01: var(--gray-650);
  --text-secondary-02: var(--gray-600);
  --text-secondary-03: var(--gray-650);
  --text-tertiary-01: var(--gray-550);
  --text-tertiary-02: var(--gray-500);
  --text-tertiary-03: var(--gray-550);
  --text-disabled-01: var(--gray-350);
  --text-disabled-02: var(--gray-300);
  --text-disabled-03: var(--gray-350);
  --text-feedback-info-01: var(--teal-600);
  --text-feedback-info-02: var(--teal-500);
  --text-feedback-info-03: var(--teal-600);
  --text-feedback-critical-01: var(--red-600);
  --text-feedback-critical-02: var(--red-500);
  --text-feedback-critical-03: var(--red-600);
  --icon-secondary-01: var(--gray-650);
  --icon-secondary-02: var(--gray-600);
  --icon-secondary-03: var(--gray-650);
  --icon-tertiary-01: var(--gray-550);
  --icon-tertiary-02: var(--gray-500);
  --icon-tertiary-03: var(--gray-550);
  --icon-disabled-01: var(--gray-350);
  --icon-disabled-02: var(--gray-300);
  --icon-disabled-03: var(--gray-350);
  --border-primary-01: var(--gray-450);
  --border-primary-03: var(--gray-450);
  --border-primary-hover-01: var(--gray-650);
  --border-primary-hover-02: var(--gray-600);
  --border-primary-hover-03: var(--gray-650);
  --border-secondary-01: var(--gray-150);
  --border-secondary-02: var(--gray-100);
  --border-secondary-03: var(--gray-150);
  --border-tertiary-01: var(--gray-100);
  --border-tertiary-03: var(--gray-100);
  --border-subtle-01: var(--gray-200);
  --border-subtle-03: var(--gray-200);
  --border-disabled-01: var(--gray-200);
  --border-disabled-03: var(--gray-250);
  --fill-disabled-01: var(--gray-100);
  --fill-disabled-02: var(--gray-50);
  --icon-feedback-info-01: var(--teal-600);
  --icon-feedback-info-02: var(--teal-500);
  --icon-feedback-info-03: var(--teal-600);
  --icon-feedback-critical-01: var(--red-600);
  --icon-feedback-critical-02: var(--red-500);
  --icon-feedback-critical-03: var(--red-600);
  --fill-disabled-03: var(--gray-100);
  --fill-feedback-critical-hover: var(--red-150);
  --fill-feedback-critical-pressed: var(--red-200);
  --switch-fill-disabled: var(--gray-200);
  --chip-fill-inactive-default: var(--static-white);
  --table-cell-header-fill: var(--gray-100);
  --dim-gradient-chip-end: #f3f4f600;
  --dim-gradient-chip-start: var(--gray-50);
  --dim-gradient-bg-end: #f3f4f600;
  --gradient-skeleton-element: var(--gray-75);
  --tag-membership-fill-silver: var(--gray-550);
  --tag-membership-fill-white: var(--gray-150);
  --tag-membership-fill-standard: var(--gray-150);
  --tag-membership-text-secondary: var(--gray-650);
  --tag-status-fill-default: var(--gray-150);
  --tag-status-fill-progress: var(--blue-150);
  --tag-status-fill-positive: var(--green-150);
  --tag-status-fill-complete: var(--gray-150);
  --tag-status-fill-info: var(--teal-150);
  --tag-status-fill-warning: var(--yellow-150);
  --tag-status-fill-critical: var(--red-150);
  --tag-status-fill-custom-a: var(--olive-150);
  --tag-status-fill-custom-b: var(--purple-150);
  --tag-status-fill-disabled: var(--gray-100);
  --tag-status-text-default: var(--gray-650);
  --tag-status-text-disabled: var(--gray-350);
  --tag-status-text-lighten-default: var(--gray-550);
  --tag-status-text-lighten-progress: var(--blue-600);
  --tag-status-text-lighten-positive: var(--green-600);
  --tag-status-text-lighten-complete: var(--gray-850);
  --tag-status-text-lighten-info: var(--teal-600);
  --tag-status-text-lighten-warning: var(--yellow-600);
  --tag-status-text-lighten-critical: var(--red-600);
  --tag-status-text-lighten-custom-a: var(--olive-600);
  --tag-status-text-lighten-custom-b: var(--purple-600);
  --tag-status-text-lighten-disabled: var(--gray-350);
  --tag-category-fill-basic: var(--gray-150);
  --tag-category-fill-recommend: var(--teal-150);
  --tag-category-fill-sale: var(--red-150);
  --tag-category-fill-hot: var(--blue-150);
  --tag-category-fill-new: var(--purple-150);
  --tag-category-text-basic: var(--gray-650);
  --banner-bg-soft-pink: var(--banner-pink-200);
  --banner-bg-soft-red: var(--banner-red-200);
  --banner-bg-soft-brown: var(--banner-brown-200);
  --banner-bg-soft-olive: var(--banner-olive-200);
  --banner-bg-soft-green: var(--banner-green-200);
  --banner-bg-soft-teal: var(--banner-teal-200);
  --banner-bg-soft-skyblue: var(--banner-skyblue-200);
  --banner-bg-soft-blue: var(--banner-blue-200);
  --banner-bg-soft-violetblue: var(--banner-violetblue-200);
  --banner-bg-soft-purple: var(--banner-purple-200);
  --banner-bg-soft-gray: var(--banner-gray-200);
  --banner-bg-solid-pink: var(--banner-pink-400);
  --banner-bg-solid-red: var(--banner-red-400);
  --banner-bg-solid-brown: var(--banner-brown-400);
  --banner-bg-solid-olive: var(--banner-olive-400);
  --banner-bg-solid-green: var(--banner-green-400);
  --banner-bg-solid-teal: var(--banner-teal-400);
  --banner-bg-solid-skyblue: var(--banner-skyblue-400);
  --banner-bg-solid-blue: var(--banner-blue-400);
  --banner-bg-solid-violetblue: var(--banner-violetblue-400);
  --banner-bg-solid-purple: var(--banner-purple-400);
  --banner-bg-solid-gray: var(--banner-gray-400);
  --banner-text-subtitle-soft: var(--gray-650);
}

[data-mode="dark"] {
  /* color · dark/default (295 overrides) */
  --background-default: var(--gray-800);
  --surface-primary-01: var(--gray-800);
  --surface-primary-02: var(--gray-750);
  --surface-primary-03: var(--gray-700);
  --surface-primary-04: var(--gray-750);
  --fill-primary: var(--gray-100);
  --fill-primary-hover: var(--gray-150);
  --fill-primary-pressed: var(--gray-200);
  --fill-secondary-01: var(--gray-650);
  --fill-secondary-02: var(--gray-600);
  --fill-secondary-03: var(--gray-550);
  --fill-secondary-04: var(--gray-600);
  --fill-secondary-hover-01: var(--gray-600);
  --fill-secondary-hover-02: var(--gray-550);
  --fill-secondary-hover-03: var(--gray-500);
  --fill-secondary-hover-04: var(--gray-550);
  --fill-secondary-pressed-01: var(--gray-550);
  --fill-secondary-pressed-02: var(--gray-500);
  --fill-secondary-pressed-03: var(--gray-450);
  --fill-secondary-pressed-04: var(--gray-500);
  --fill-tertiary-hover-01: var(--gray-750);
  --fill-tertiary-hover-02: var(--gray-700);
  --fill-tertiary-hover-03: var(--gray-650);
  --fill-tertiary-hover-04: var(--gray-700);
  --fill-tertiary-pressed-01: var(--gray-700);
  --fill-tertiary-pressed-02: var(--gray-650);
  --fill-tertiary-pressed-03: var(--gray-600);
  --fill-tertiary-pressed-04: var(--gray-650);
  --text-primary: var(--static-white);
  --text-secondary-01: var(--gray-200);
  --text-secondary-02: var(--gray-250);
  --text-secondary-03: var(--gray-200);
  --text-secondary-04: var(--gray-200);
  --text-tertiary-01: var(--gray-400);
  --text-tertiary-02: var(--gray-350);
  --text-tertiary-03: var(--gray-400);
  --text-tertiary-04: var(--gray-350);
  --text-disabled-01: var(--gray-600);
  --text-disabled-02: var(--gray-550);
  --text-disabled-03: var(--gray-500);
  --text-disabled-04: var(--gray-550);
  --text-on-dark-disabled: var(--gray-300);
  --text-inverse: var(--gray-900);
  --text-feedback-complete: var(--static-white);
  --text-feedback-info-01: var(--teal-400);
  --text-feedback-info-02: var(--teal-500);
  --text-feedback-info-03: var(--teal-400);
  --text-feedback-info-04: var(--teal-400);
  --text-feedback-critical-01: var(--red-400);
  --text-feedback-critical-02: var(--red-500);
  --text-feedback-critical-03: var(--red-400);
  --text-feedback-critical-04: var(--red-400);
  --icon-primary: var(--gray-50);
  --icon-secondary-01: var(--gray-200);
  --icon-secondary-02: var(--gray-250);
  --icon-secondary-03: var(--gray-200);
  --icon-secondary-04: var(--gray-200);
  --icon-tertiary-01: var(--gray-400);
  --icon-tertiary-02: var(--gray-350);
  --icon-tertiary-03: var(--gray-400);
  --icon-tertiary-04: var(--gray-350);
  --icon-disabled-01: var(--gray-600);
  --icon-disabled-02: var(--gray-550);
  --icon-disabled-03: var(--gray-500);
  --border-primary-01: var(--gray-450);
  --border-primary-03: var(--gray-350);
  --border-primary-hover-01: var(--gray-350);
  --border-primary-hover-02: var(--gray-500);
  --border-primary-hover-03: var(--gray-450);
  --border-primary-hover-04: var(--gray-450);
  --border-primary-pressed: var(--gray-50);
  --border-primary-focused: var(--gray-50);
  --border-secondary-01: var(--gray-650);
  --border-secondary-02: var(--gray-700);
  --border-secondary-03: var(--gray-650);
  --border-secondary-04: var(--gray-650);
  --border-tertiary-01: var(--gray-750);
  --border-tertiary-02: var(--gray-700);
  --border-tertiary-03: var(--gray-750);
  --border-tertiary-04: var(--gray-750);
  --border-subtle-01: var(--gray-650);
  --border-subtle-02: var(--gray-600);
  --border-subtle-03: var(--gray-550);
  --border-subtle-04: var(--gray-600);
  --border-disabled-01: var(--gray-650);
  --border-disabled-02: var(--gray-600);
  --border-disabled-03: var(--gray-550);
  --border-disabled-04: var(--gray-600);
  --border-opacity-white: var(--opacity-white-5);
  --border-inverse: var(--gray-50);
  --fill-disabled-01: var(--gray-750);
  --fill-disabled-02: var(--gray-700);
  --icon-disabled-04: var(--gray-550);
  --icon-inverse: var(--gray-900);
  --icon-feedback-complete: var(--gray-50);
  --icon-feedback-info-01: var(--teal-400);
  --icon-feedback-info-02: var(--teal-500);
  --icon-feedback-info-03: var(--teal-400);
  --icon-feedback-info-04: var(--teal-400);
  --icon-feedback-critical-01: var(--red-400);
  --icon-feedback-critical-02: var(--red-500);
  --icon-feedback-critical-03: var(--red-400);
  --icon-feedback-critical-04: var(--red-400);
  --fill-disabled-03: var(--gray-650);
  --fill-disabled-04: var(--gray-700);
  --fill-opacity-white: var(--opacity-white-5);
  --border-on-dark-disabled: var(--gray-200);
  --border-feedback-critical: var(--red-400);
  --fill-on-white-inverse: var(--gray-750);
  --fill-on-dark-inverse: var(--gray-100);
  --fill-on-dark-hover: var(--gray-150);
  --fill-on-dark-pressed: var(--gray-200);
  --fill-accent-primary: var(--red-400);
  --fill-accent-primary-hover: var(--red-300);
  --fill-accent-primary-pressed: var(--red-200);
  --fill-feedback-info: var(--teal-400);
  --fill-feedback-critical-hover: var(--gray-700);
  --fill-feedback-critical-pressed: var(--gray-500);
  --link-link-primary: var(--blue-400);
  --indicator-dot-fill-default: var(--opacity-white-45);
  --indicator-dot-fill-default-active: var(--opacity-white-95);
  --indicator-number-indicator-default-bg: var(--static-white);
  --indicator-number-indicator-default-current: var(--static-black);
  --indicator-number-indicator-default-total: var(--text-tertiary-01);
  --indicator-number-indicator-default-icon: var(--static-black);
  --indicator-number-indicator-inverse-bg: var(--gray-600);
  --indicator-number-indicator-inverse-current: var(--static-white);
  --indicator-number-indicator-inverse-total: var(--gray-150);
  --indicator-number-indicator-inverse-icon: var(--static-white);
  --indicator-dot-fill-inverse: #191a1b80;
  --switch-handle-fill-default: var(--gray-900);
  --switch-handle-fill-disabled: var(--gray-900);
  --slider-handle-fill-disabled: var(--gray-650);
  --slider-handle-border-disabled: var(--gray-700);
  --indicator-dot-fill-inverse-active: var(--gray-900);
  --link-link-primary-hover: var(--blue-600);
  --switch-fill-disabled: var(--gray-650);
  --link-link-primary-pressed: var(--blue-600);
  --tag-membership-fill-vvip: var(--red-400);
  --chip-fill-inactive-default: var(--gray-650);
  --chip-fill-inactive-hover: var(--gray-600);
  --chip-fill-inactive-pressed: var(--gray-550);
  --notification-fill-default: var(--gray-650);
  --notification-icon-default: var(--gray-50);
  --table-cell-header-fill: var(--gray-850);
  --dim-gradient-chip-end: #23242500;
  --dim-gradient-chip-start: var(--gray-800);
  --dim-gradient-prompt-area-end: #31323500;
  --dim-gradient-bg-end: #23242500;
  --dim-gradient-sheet-end: #31323500;
  --gradient-skeleton-element: var(--gray-700);
  --gradient-skeleton-end-start: #61646b00;
  --gradient-skeleton-stop: #61646b80;
  --gradient-graph-top-end: var(--teal-200);
  --gradient-graph-top-start: var(--teal-400);
  --gradient-graph-bottom-end: var(--teal-600);
  --gradient-graph-bottom-start: var(--teal-300);
  --gradient-ai-text-stop-01: var(--red-400);
  --gradient-ai-text-stop-02: var(--red-400);
  --gradient-ai-text-stop-03: var(--teal-300);
  --gradient-graph-layer-end: var(--teal-800);
  --gradient-ai-border-stop-01: var(--red-400);
  --gradient-ai-indicator-end: var(--static-white);
  --gradient-ai-indicator-stop: var(--gray-500);
  --gradient-ai-indicator-start: var(--gray-300);
  --gradient-ai-indicator-accent-end: var(--teal-700);
  --gradient-ai-indicator-accent-start: var(--teal-400);
  --tag-membership-fill-vip: var(--gray-100);
  --tag-membership-fill-silver: var(--gray-400);
  --tag-membership-fill-silver-02: var(--gray-400);
  --tag-membership-fill-white: var(--gray-600);
  --tag-membership-fill-white-02: var(--gray-600);
  --tag-membership-fill-standard: var(--gray-700);
  --tag-membership-fill-standard-02: var(--gray-700);
  --tag-membership-fill-all: var(--blue-400);
  --tag-membership-text-primary: var(--static-white);
  --tag-membership-text-secondary: var(--static-white);
  --tag-membership-text-secondary-02: var(--static-white);
  --tag-membership-text-inverse: var(--gray-900);
  --tag-status-fill-default: var(--gray-700);
  --tag-status-fill-default-02: var(--gray-700);
  --tag-status-fill-progress: var(--blue-700);
  --tag-status-fill-progress-02: var(--blue-700);
  --tag-status-fill-positive: var(--green-700);
  --tag-status-fill-positive-02: var(--green-700);
  --tag-status-fill-complete: var(--gray-600);
  --tag-status-fill-complete-02: var(--gray-600);
  --tag-status-fill-info: var(--teal-700);
  --tag-status-fill-info-02: var(--teal-700);
  --tag-status-fill-warning: var(--yellow-700);
  --tag-status-fill-warning-02: var(--yellow-700);
  --tag-status-fill-critical: var(--red-700);
  --tag-status-fill-critical-02: var(--red-700);
  --tag-status-fill-custom-a: var(--olive-700);
  --tag-status-fill-custom-a-02: var(--olive-700);
  --tag-status-fill-custom-b: var(--purple-700);
  --tag-status-fill-custom-b-02: var(--purple-700);
  --tag-status-fill-neutral: #3b3d40;
  --tag-status-fill-inverse: var(--gray-800);
  --tag-status-fill-disabled: var(--gray-700);
  --tag-status-fill-disabled-02: var(--gray-700);
  --tag-status-text-default: var(--static-white);
  --tag-status-text-progress: var(--blue-100);
  --tag-status-text-positive: var(--green-100);
  --tag-status-text-complete: var(--static-white);
  --tag-status-text-info: var(--teal-100);
  --tag-status-text-warning: var(--yellow-100);
  --tag-status-text-critical: var(--red-100);
  --tag-status-text-custom-a: var(--olive-100);
  --tag-status-text-custom-b: var(--purple-100);
  --tag-status-text-neutral: var(--static-white);
  --tag-status-text-inverse: var(--static-white);
  --tag-status-text-disabled: var(--gray-600);
  --tag-status-text-lighten-default: var(--static-white);
  --tag-status-text-lighten-default-02: var(--static-white);
  --tag-status-text-lighten-progress: var(--blue-400);
  --tag-status-text-lighten-progress-02: var(--blue-400);
  --tag-status-text-lighten-positive: var(--green-400);
  --tag-status-text-lighten-positive-02: var(--green-400);
  --tag-status-text-lighten-complete: var(--static-white);
  --tag-status-text-lighten-complete-02: var(--static-white);
  --tag-status-text-lighten-info: var(--teal-400);
  --tag-status-text-lighten-info-02: var(--teal-400);
  --tag-status-text-lighten-warning: var(--yellow-400);
  --tag-status-text-lighten-warning-02: var(--yellow-400);
  --tag-status-text-lighten-critical: var(--red-400);
  --tag-status-text-lighten-critical-02: var(--red-400);
  --tag-status-text-lighten-custom-a: var(--olive-400);
  --tag-status-text-lighten-custom-a-02: var(--olive-400);
  --tag-status-text-lighten-custom-b: var(--purple-400);
  --tag-status-text-lighten-custom-b-02: var(--purple-400);
  --tag-status-text-lighten-neutral: var(--static-white);
  --tag-status-text-lighten-inverse: var(--gray-800);
  --tag-status-text-lighten-disabled: var(--gray-600);
  --tag-status-text-lighten-disabled-02: var(--gray-600);
  --tag-category-fill-basic: var(--gray-700);
  --tag-category-fill-basic-02: var(--gray-700);
  --tag-category-fill-recommend: var(--teal-700);
  --tag-category-fill-recommend-02: var(--teal-700);
  --tag-category-fill-sale: var(--red-700);
  --tag-category-fill-sale-02: var(--red-700);
  --tag-category-fill-hot: var(--blue-700);
  --tag-category-fill-hot-02: var(--blue-700);
  --tag-category-fill-new: var(--purple-700);
  --tag-category-fill-new-02: var(--purple-700);
  --tag-category-text-basic: var(--static-white);
  --tag-category-text-basic-02: var(--static-white);
  --tag-category-text-recommend: var(--teal-100);
  --tag-category-text-sale: var(--red-100);
  --tag-category-text-hot: var(--blue-100);
  --tag-category-text-new: var(--purple-100);
  --icon-feedback-on-dark-info: var(--teal-500);
  --icon-feedback-on-dark-critical: var(--red-500);
  --surface-on-white-inverse: var(--gray-700);
  --border-feedback-info: var(--teal-300);
  --graphic-red-main: var(--graphic-red-400);
  --graphic-yellow-main: var(--graphic-yellow-400);
  --graphic-green-main: var(--graphic-green-400);
  --graphic-teal-main: var(--graphic-teal-400);
  --graphic-blue-main: var(--graphic-blue-400);
  --graphic-violet-blue-main: var(--graphic-violet-blue-400);
  --graphic-purple-main: var(--graphic-purple-400);
  --graphic-light-gray-main: var(--graphic-light-gray-600);
  --graphic-light-gray-sub: var(--graphic-light-gray-400);
  --graphic-light-gray-sub-light: var(--graphic-light-gray-200);
  --graphic-dark-gray-main: var(--graphic-dark-gray-600);
  --graphic-dark-gray-sub: var(--graphic-dark-gray-400);
  --graphic-dark-gray-sub-light: var(--graphic-dark-gray-200);
  --banner-bg-soft-pink: var(--banner-pink-700);
  --banner-bg-soft-red: var(--banner-red-700);
  --banner-bg-soft-brown: var(--banner-brown-700);
  --banner-bg-soft-olive: var(--banner-olive-700);
  --banner-bg-soft-green: var(--banner-green-700);
  --banner-bg-soft-teal: var(--banner-teal-700);
  --banner-bg-soft-skyblue: var(--banner-skyblue-700);
  --banner-bg-soft-blue: var(--banner-blue-700);
  --banner-bg-soft-violetblue: var(--banner-violetblue-700);
  --banner-bg-soft-purple: var(--banner-purple-700);
  --banner-bg-soft-gray: var(--banner-gray-700);
  --banner-bg-solid-pink: var(--banner-pink-500);
  --banner-bg-solid-red: var(--banner-red-500);
  --banner-bg-solid-brown: var(--banner-brown-500);
  --banner-bg-solid-olive: var(--banner-olive-500);
  --banner-bg-solid-green: var(--banner-green-500);
  --banner-bg-solid-teal: var(--banner-teal-500);
  --banner-bg-solid-skyblue: var(--banner-skyblue-500);
  --banner-bg-solid-blue: var(--banner-blue-500);
  --banner-bg-solid-violetblue: var(--banner-violetblue-500);
  --banner-bg-solid-purple: var(--banner-purple-500);
  --banner-bg-solid-gray: var(--banner-gray-500);
  --banner-text-title-soft: var(--static-white);
  --banner-text-subtitle-soft: var(--static-white);
  --banner-icon-soft: var(--static-white);
  --banner-button-bg-soft: var(--gray-100);
  --banner-button-text-soft: var(--gray-900);
}

[data-mode="dark-agent"] {
  /* color · dark/agent (292 overrides) */
  --background-default: var(--gray-900);
  --surface-primary-01: var(--gray-900);
  --surface-primary-02: var(--gray-800);
  --surface-primary-03: var(--gray-750);
  --surface-primary-04: var(--gray-800);
  --fill-primary: var(--gray-100);
  --fill-primary-hover: var(--gray-150);
  --fill-primary-pressed: var(--gray-200);
  --fill-secondary-01: var(--gray-700);
  --fill-secondary-02: var(--gray-650);
  --fill-secondary-03: var(--gray-600);
  --fill-secondary-04: var(--gray-650);
  --fill-secondary-hover-01: var(--gray-650);
  --fill-secondary-hover-02: var(--gray-600);
  --fill-secondary-hover-03: var(--gray-550);
  --fill-secondary-hover-04: var(--gray-600);
  --fill-secondary-pressed-01: var(--gray-600);
  --fill-secondary-pressed-02: var(--gray-550);
  --fill-secondary-pressed-03: var(--gray-500);
  --fill-secondary-pressed-04: var(--gray-550);
  --fill-tertiary-hover-01: var(--gray-800);
  --fill-tertiary-hover-02: var(--gray-750);
  --fill-tertiary-hover-03: var(--gray-700);
  --fill-tertiary-hover-04: var(--gray-750);
  --fill-tertiary-pressed-01: var(--gray-750);
  --fill-tertiary-pressed-02: var(--gray-700);
  --fill-tertiary-pressed-03: var(--gray-650);
  --fill-tertiary-pressed-04: var(--gray-700);
  --text-primary: var(--static-white);
  --text-secondary-01: var(--gray-200);
  --text-secondary-02: var(--gray-200);
  --text-secondary-03: var(--gray-250);
  --text-secondary-04: var(--gray-200);
  --text-tertiary-01: var(--gray-400);
  --text-tertiary-02: var(--gray-400);
  --text-tertiary-03: var(--gray-350);
  --text-tertiary-04: var(--gray-400);
  --text-disabled-01: var(--gray-650);
  --text-disabled-02: var(--gray-600);
  --text-disabled-03: var(--gray-550);
  --text-disabled-04: var(--gray-600);
  --text-on-dark-disabled: var(--gray-300);
  --text-inverse: var(--gray-900);
  --text-feedback-complete: var(--static-white);
  --text-feedback-info-01: var(--teal-400);
  --text-feedback-info-02: var(--teal-400);
  --text-feedback-info-04: var(--teal-400);
  --text-feedback-critical-01: var(--red-400);
  --text-feedback-critical-02: var(--red-400);
  --text-feedback-critical-04: var(--red-400);
  --icon-primary: var(--gray-50);
  --icon-secondary-01: var(--gray-200);
  --icon-secondary-02: var(--gray-200);
  --icon-secondary-03: var(--gray-250);
  --icon-secondary-04: var(--gray-200);
  --icon-tertiary-01: var(--gray-400);
  --icon-tertiary-02: var(--gray-400);
  --icon-tertiary-03: var(--gray-350);
  --icon-tertiary-04: var(--gray-400);
  --icon-disabled-01: var(--gray-650);
  --icon-disabled-02: var(--gray-600);
  --icon-disabled-03: var(--gray-550);
  --border-primary-01: var(--gray-500);
  --border-primary-02: var(--gray-450);
  --border-primary-04: var(--gray-450);
  --border-primary-hover-01: var(--gray-350);
  --border-primary-hover-02: var(--gray-450);
  --border-primary-hover-03: var(--gray-500);
  --border-primary-hover-04: var(--gray-500);
  --border-primary-pressed: var(--gray-50);
  --border-primary-focused: var(--gray-50);
  --border-secondary-01: var(--gray-650);
  --border-secondary-02: var(--gray-650);
  --border-secondary-03: var(--gray-700);
  --border-secondary-04: var(--gray-650);
  --border-tertiary-01: var(--gray-800);
  --border-tertiary-02: var(--gray-750);
  --border-tertiary-03: var(--gray-800);
  --border-tertiary-04: var(--gray-750);
  --border-subtle-01: var(--gray-700);
  --border-subtle-02: var(--gray-650);
  --border-subtle-03: var(--gray-600);
  --border-subtle-04: var(--gray-650);
  --border-disabled-01: var(--gray-700);
  --border-disabled-02: var(--gray-650);
  --border-disabled-03: var(--gray-600);
  --border-disabled-04: var(--gray-650);
  --border-opacity-white: var(--opacity-white-5);
  --border-inverse: var(--gray-50);
  --fill-disabled-01: var(--gray-800);
  --fill-disabled-02: var(--gray-750);
  --icon-disabled-04: var(--gray-600);
  --icon-inverse: var(--gray-900);
  --icon-feedback-complete: var(--gray-50);
  --icon-feedback-info-01: var(--teal-400);
  --icon-feedback-info-02: var(--teal-400);
  --icon-feedback-info-04: var(--teal-400);
  --icon-feedback-critical-01: var(--red-400);
  --icon-feedback-critical-02: var(--red-400);
  --icon-feedback-critical-04: var(--red-400);
  --fill-disabled-03: var(--gray-700);
  --fill-disabled-04: var(--gray-750);
  --fill-opacity-white: var(--opacity-white-5);
  --border-on-dark-disabled: var(--gray-200);
  --border-feedback-critical: var(--red-400);
  --fill-on-white-inverse: var(--gray-800);
  --fill-on-dark-inverse: var(--gray-100);
  --fill-on-dark-hover: var(--gray-150);
  --fill-on-dark-pressed: var(--gray-200);
  --fill-accent-primary: var(--red-400);
  --fill-accent-primary-hover: var(--red-300);
  --fill-accent-primary-pressed: var(--red-200);
  --fill-feedback-info: var(--teal-400);
  --fill-feedback-critical-hover: var(--gray-700);
  --fill-feedback-critical-pressed: var(--gray-500);
  --link-link-primary: var(--blue-400);
  --indicator-dot-fill-default: var(--opacity-white-45);
  --indicator-dot-fill-default-active: var(--opacity-white-95);
  --indicator-number-indicator-default-bg: var(--static-white);
  --indicator-number-indicator-default-current: var(--static-black);
  --indicator-number-indicator-default-total: var(--text-tertiary-01);
  --indicator-number-indicator-default-icon: var(--static-black);
  --indicator-number-indicator-inverse-bg: var(--gray-600);
  --indicator-number-indicator-inverse-current: var(--static-white);
  --indicator-number-indicator-inverse-total: var(--gray-150);
  --indicator-number-indicator-inverse-icon: var(--static-white);
  --indicator-dot-fill-inverse: #191a1b80;
  --switch-handle-fill-default: var(--gray-900);
  --switch-handle-fill-disabled: var(--gray-900);
  --slider-handle-fill-disabled: var(--gray-650);
  --slider-handle-border-disabled: var(--gray-700);
  --indicator-dot-fill-inverse-active: var(--gray-900);
  --link-link-primary-hover: var(--blue-600);
  --switch-fill-disabled: var(--gray-700);
  --link-link-primary-pressed: var(--blue-600);
  --tag-membership-fill-vvip: var(--red-400);
  --chip-fill-inactive-default: var(--gray-700);
  --chip-fill-inactive-hover: var(--gray-650);
  --chip-fill-inactive-pressed: var(--gray-600);
  --notification-fill-default: var(--gray-650);
  --notification-icon-default: var(--gray-50);
  --table-cell-header-fill: var(--static-black);
  --dim-gradient-chip-end: #191a1b00;
  --dim-gradient-chip-start: var(--gray-900);
  --dim-gradient-prompt-area-end: #23242500;
  --dim-gradient-bg-end: #191a1b00;
  --dim-gradient-sheet-end: #23242500;
  --gradient-skeleton-element: var(--gray-750);
  --gradient-skeleton-end-start: #55585d00;
  --gradient-skeleton-stop: #55585d80;
  --gradient-graph-top-end: var(--teal-200);
  --gradient-graph-top-start: var(--teal-400);
  --gradient-graph-bottom-end: var(--teal-600);
  --gradient-graph-bottom-start: var(--teal-300);
  --gradient-ai-text-stop-01: var(--red-400);
  --gradient-ai-text-stop-02: var(--red-400);
  --gradient-ai-text-stop-03: var(--teal-300);
  --gradient-graph-layer-end: var(--teal-800);
  --gradient-ai-border-stop-01: var(--red-400);
  --gradient-ai-indicator-end: var(--static-white);
  --gradient-ai-indicator-stop: var(--gray-500);
  --gradient-ai-indicator-start: var(--gray-300);
  --gradient-ai-indicator-accent-end: var(--teal-700);
  --gradient-ai-indicator-accent-start: var(--teal-400);
  --tag-membership-fill-vip: var(--gray-100);
  --tag-membership-fill-silver: var(--gray-400);
  --tag-membership-fill-silver-02: var(--gray-400);
  --tag-membership-fill-white: var(--gray-600);
  --tag-membership-fill-white-02: var(--gray-600);
  --tag-membership-fill-standard: var(--gray-700);
  --tag-membership-fill-standard-02: var(--gray-700);
  --tag-membership-fill-all: var(--blue-400);
  --tag-membership-text-primary: var(--static-white);
  --tag-membership-text-secondary: var(--static-white);
  --tag-membership-text-secondary-02: var(--static-white);
  --tag-membership-text-inverse: var(--gray-900);
  --tag-status-fill-default: var(--gray-700);
  --tag-status-fill-default-02: var(--gray-700);
  --tag-status-fill-progress: var(--blue-700);
  --tag-status-fill-progress-02: var(--blue-700);
  --tag-status-fill-positive: var(--green-700);
  --tag-status-fill-positive-02: var(--green-700);
  --tag-status-fill-complete: var(--gray-600);
  --tag-status-fill-complete-02: var(--gray-600);
  --tag-status-fill-info: var(--teal-700);
  --tag-status-fill-info-02: var(--teal-700);
  --tag-status-fill-warning: var(--yellow-700);
  --tag-status-fill-warning-02: var(--yellow-700);
  --tag-status-fill-critical: var(--red-700);
  --tag-status-fill-critical-02: var(--red-700);
  --tag-status-fill-custom-a: var(--olive-700);
  --tag-status-fill-custom-a-02: var(--olive-700);
  --tag-status-fill-custom-b: var(--purple-700);
  --tag-status-fill-custom-b-02: var(--purple-700);
  --tag-status-fill-neutral: #3b3d40;
  --tag-status-fill-inverse: var(--gray-800);
  --tag-status-fill-disabled: var(--gray-700);
  --tag-status-fill-disabled-02: var(--gray-700);
  --tag-status-text-default: var(--static-white);
  --tag-status-text-progress: var(--blue-100);
  --tag-status-text-positive: var(--green-100);
  --tag-status-text-complete: var(--static-white);
  --tag-status-text-info: var(--teal-100);
  --tag-status-text-warning: var(--yellow-100);
  --tag-status-text-critical: var(--red-100);
  --tag-status-text-custom-a: var(--olive-100);
  --tag-status-text-custom-b: var(--purple-100);
  --tag-status-text-neutral: var(--static-white);
  --tag-status-text-inverse: var(--static-white);
  --tag-status-text-disabled: var(--gray-600);
  --tag-status-text-lighten-default: var(--static-white);
  --tag-status-text-lighten-default-02: var(--static-white);
  --tag-status-text-lighten-progress: var(--blue-400);
  --tag-status-text-lighten-progress-02: var(--blue-400);
  --tag-status-text-lighten-positive: var(--green-400);
  --tag-status-text-lighten-positive-02: var(--green-400);
  --tag-status-text-lighten-complete: var(--static-white);
  --tag-status-text-lighten-complete-02: var(--static-white);
  --tag-status-text-lighten-info: var(--teal-400);
  --tag-status-text-lighten-info-02: var(--teal-400);
  --tag-status-text-lighten-warning: var(--yellow-400);
  --tag-status-text-lighten-warning-02: var(--yellow-400);
  --tag-status-text-lighten-critical: var(--red-400);
  --tag-status-text-lighten-critical-02: var(--red-400);
  --tag-status-text-lighten-custom-a: var(--olive-400);
  --tag-status-text-lighten-custom-a-02: var(--olive-400);
  --tag-status-text-lighten-custom-b: var(--purple-400);
  --tag-status-text-lighten-custom-b-02: var(--purple-400);
  --tag-status-text-lighten-neutral: var(--static-white);
  --tag-status-text-lighten-inverse: var(--gray-800);
  --tag-status-text-lighten-disabled: var(--gray-600);
  --tag-status-text-lighten-disabled-02: var(--gray-600);
  --tag-category-fill-basic: var(--gray-700);
  --tag-category-fill-basic-02: var(--gray-700);
  --tag-category-fill-recommend: var(--teal-700);
  --tag-category-fill-recommend-02: var(--teal-700);
  --tag-category-fill-sale: var(--red-700);
  --tag-category-fill-sale-02: var(--red-700);
  --tag-category-fill-hot: var(--blue-700);
  --tag-category-fill-hot-02: var(--blue-700);
  --tag-category-fill-new: var(--purple-700);
  --tag-category-fill-new-02: var(--purple-700);
  --tag-category-text-basic: var(--static-white);
  --tag-category-text-basic-02: var(--static-white);
  --tag-category-text-recommend: var(--teal-100);
  --tag-category-text-sale: var(--red-100);
  --tag-category-text-hot: var(--blue-100);
  --tag-category-text-new: var(--purple-100);
  --icon-feedback-on-dark-info: var(--teal-500);
  --icon-feedback-on-dark-critical: var(--red-500);
  --surface-on-white-inverse: var(--gray-750);
  --border-feedback-info: var(--teal-300);
  --graphic-red-main: var(--graphic-red-400);
  --graphic-yellow-main: var(--graphic-yellow-400);
  --graphic-green-main: var(--graphic-green-400);
  --graphic-teal-main: var(--graphic-teal-400);
  --graphic-blue-main: var(--graphic-blue-400);
  --graphic-violet-blue-main: var(--graphic-violet-blue-400);
  --graphic-purple-main: var(--graphic-purple-400);
  --graphic-light-gray-main: var(--graphic-light-gray-600);
  --graphic-light-gray-sub: var(--graphic-light-gray-400);
  --graphic-light-gray-sub-light: var(--graphic-light-gray-200);
  --graphic-dark-gray-main: var(--graphic-dark-gray-600);
  --graphic-dark-gray-sub: var(--graphic-dark-gray-400);
  --graphic-dark-gray-sub-light: var(--graphic-dark-gray-200);
  --banner-bg-soft-pink: var(--banner-pink-800);
  --banner-bg-soft-red: var(--banner-red-800);
  --banner-bg-soft-brown: var(--banner-brown-800);
  --banner-bg-soft-olive: var(--banner-olive-800);
  --banner-bg-soft-green: var(--banner-green-800);
  --banner-bg-soft-teal: var(--banner-teal-800);
  --banner-bg-soft-skyblue: var(--banner-skyblue-800);
  --banner-bg-soft-blue: var(--banner-blue-800);
  --banner-bg-soft-violetblue: var(--banner-violetblue-800);
  --banner-bg-soft-purple: var(--banner-purple-800);
  --banner-bg-soft-gray: var(--banner-gray-800);
  --banner-bg-solid-pink: var(--banner-pink-600);
  --banner-bg-solid-red: var(--banner-red-600);
  --banner-bg-solid-brown: var(--banner-brown-600);
  --banner-bg-solid-olive: var(--banner-olive-600);
  --banner-bg-solid-green: var(--banner-green-600);
  --banner-bg-solid-teal: var(--banner-teal-600);
  --banner-bg-solid-skyblue: var(--banner-skyblue-600);
  --banner-bg-solid-blue: var(--banner-blue-600);
  --banner-bg-solid-violetblue: var(--banner-violetblue-600);
  --banner-bg-solid-purple: var(--banner-purple-600);
  --banner-bg-solid-gray: var(--banner-gray-600);
  --banner-text-title-soft: var(--static-white);
  --banner-text-subtitle-soft: var(--static-white);
  --banner-icon-soft: var(--static-white);
  --banner-button-bg-soft: var(--gray-100);
  --banner-button-text-soft: var(--gray-900);
}

[data-platform="desktop"] {
  /* breakpoint · desktop (2 overrides) */
  --margin-platform: var(--space-24);
  --gutter-platform: var(--space-20);
}

[data-platform="tablet"] {
  /* breakpoint · tablet (1 overrides) */
  --gutter-platform: var(--space-16);
}

[data-density="wide"] {
  /* data-table · wide (2 overrides) */
  --data-table-density-vertical-padding: var(--space-24);
  --data-table-density-min-height: 72px;
}

[data-density="compact"] {
  /* data-table · compact (2 overrides) */
  --data-table-density-vertical-padding: var(--space-8);
  --data-table-density-min-height: 40px;
}

[data-mode="dark"], [data-mode="dark-agent"] {
  /* data-visual · Dark (35 overrides) */
  --data-visual-default-gray: var(--gray-200);
  --data-visual-default-teal: var(--teal-300);
  --data-visual-default-yellow: var(--yellow-200);
  --data-visual-default-blue: var(--blue-300);
  --data-visual-default-purple: var(--purple-300);
  --data-visual-default-red: var(--red-300);
  --data-visual-default-olive: var(--olive-300);
  --data-visual-default-navy: #6676c2;
  --data-visual-default-magenta: #e968b7;
  --data-visual-default-green: var(--green-300);
  --data-visual-default-lemon: #dfb91f;
  --data-visual-light-teal: var(--teal-200);
  --data-visual-light-yellow: var(--yellow-200);
  --data-visual-light-blue: var(--blue-200);
  --data-visual-light-purple: var(--purple-200);
  --data-visual-light-red: var(--red-200);
  --data-visual-light-olive: var(--olive-200);
  --data-visual-light-navy: #929dd3;
  --data-visual-light-magenta: #ef94cc;
  --data-visual-light-green: var(--green-200);
  --data-visual-light-lemon: #ecd579;
  --data-visual-strong-teal: var(--teal-400);
  --data-visual-strong-yellow: var(--yellow-400);
  --data-visual-strong-blue: var(--blue-400);
  --data-visual-strong-purple: var(--purple-400);
  --data-visual-strong-red: var(--red-400);
  --data-visual-strong-olive: var(--olive-400);
  --data-visual-strong-navy: #6676c2;
  --data-visual-strong-magenta: #e85fb3;
  --data-visual-strong-green: var(--green-400);
  --data-visual-strong-lemon: #b4900e;
  --data-visual-sequential-teal-1: var(--teal-300);
  --data-visual-sequential-teal-2: var(--teal-400);
  --data-visual-sequential-teal-3: var(--teal-500);
  --data-visual-sequential-teal-4: var(--teal-600);
}

/* ══ 파생 토큰 (Figma 변수가 아닌, 이펙트 스타일·문서 규격에서 합성) ══ */
:root {
  /* elevation — 이펙트 스타일 5종 합성 (effect-styles.json). 2.0은 2레이어 섀도우 */
  --shadow-1: 0 var(--elevation-y-2) var(--elevation-blur-4) 0 var(--opacity-black-10), 0 0 var(--elevation-blur-2) 0 var(--opacity-black-5);
  --shadow-2: 0 var(--elevation-y-4) var(--elevation-blur-8) 0 var(--opacity-black-10), 0 0 var(--elevation-blur-4) 0 var(--opacity-black-5);
  --shadow-3: 0 var(--elevation-y-8) var(--elevation-blur-12) 0 var(--opacity-black-20), 0 0 var(--elevation-blur-8) 0 var(--opacity-black-5);
  --shadow-handle: 0 var(--elevation-y-2) var(--elevation-blur-4) 0 var(--opacity-black-25), 0 0 var(--elevation-y-2) 0 var(--opacity-black-10);
  --shadow-topnavi: 0 0 var(--elevation-blur-4) 0 var(--opacity-black-15);
  /* 구 이름 호환 */
  --elevation-shadow-1: var(--shadow-1);
  --elevation-shadow-2: var(--shadow-2);
  --elevation-shadow-3: var(--shadow-3);

  /* breakpoint 경계 — Breakpoint 페이지 문서 규격 (변수 아님, foundation-breakpoint.md) */
  --breakpoint-xsmall-max: 359px;
  --breakpoint-small-min: 360px;
  --breakpoint-small-max: 767px;
  --breakpoint-medium-min: 768px;
  --breakpoint-medium-max: 1279px;
  --breakpoint-large-min: 1280px;
  --breakpoint-large-max: 1919px;
  --breakpoint-xlarge-min: 1920px;
  /* 플랫폼별 마진·거터 — 변수 margin/platform·gutter/platform 의 3모드 값을 풀어 쓴 별칭 (구 이름 호환) */
  --breakpoint-mobile-margin: var(--space-20);
  --breakpoint-mobile-gutter: var(--space-12);
  --breakpoint-tablet-margin: var(--space-20);
  --breakpoint-tablet-gutter: var(--space-16);
  --breakpoint-desktop-margin: var(--space-24);
  --breakpoint-desktop-gutter: var(--space-20);

  /* typography 보조 — 텍스트 스타일(text-styles.json)에서 관찰된 행간·자간 상수 */
  --line-height-display: 1.3;
  --line-height-reading: 1.58;
  --letter-spacing-base: 0;
  --letter-spacing-display: -0.01em;
}