/*! Moonwave UX 1.9.0 · all in one
 *  tokens + type + components + app layer
 *  https://ux.moonwave.kr
 */
/* ── 1. Primitive · 색 · 모션 · 반경 · 간격 ── */
:root {
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --motion-easing-linear: cubic-bezier(0,0,1,1);
  --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);
  --motion-duration-short: 100ms;
  --motion-duration-medium: 200ms;
  --motion-duration-long: 300ms;
  --motion-duration-loop: 1000ms;
  --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-200: #f2a6a9;
  --red-300: #ec797e;
  --red-400: #e54d53;
  --red-500: #e0282f;
  --red-600: #bb1b21;
  --red-700: #8a1418;
  --red-800: #3e090b;
  --teal-100: #e1f5f5;
  --teal-200: #b1e7e4;
  --teal-300: #63cfca;
  --teal-400: #00b1a8;
  --teal-500: #007f7f;
  --teal-600: #005e66;
  --teal-700: #00484e;
  --teal-800: #002629;
  --purple-100: #efebff;
  --purple-200: #c7b8ff;
  --purple-300: #ae99ff;
  --purple-400: #8666ff;
  --purple-500: #6941ff;
  --purple-600: #4c00e5;
  --purple-700: #3900ad;
  --purple-800: #1e005c;
  --blue-100: #dbf4ff;
  --blue-200: #5ccbff;
  --blue-300: #1fb7ff;
  --blue-400: #0099e0;
  --blue-500: #007db8;
  --blue-600: #006899;
  --blue-700: #004c70;
  --blue-800: #002d42;
  --opacity-black-0: rgba(19, 20, 21, 0);
  --opacity-black-5: rgba(19, 20, 21, 0.05);
  --opacity-black-10: rgba(19, 20, 21, 0.1);
  --opacity-black-15: rgba(19, 20, 21, 0.15);
  --opacity-black-20: rgba(19, 20, 21, 0.2);
  --opacity-black-25: rgba(19, 20, 21, 0.25);
  --opacity-black-30: rgba(19, 20, 21, 0.3);
  --opacity-black-35: rgba(19, 20, 21, 0.35);
  --opacity-black-40: rgba(19, 20, 21, 0.4);
  --opacity-black-45: rgba(19, 20, 21, 0.45);
  --opacity-black-50: rgba(19, 20, 21, 0.5);
  --opacity-black-55: rgba(19, 20, 21, 0.55);
  --opacity-black-60: rgba(19, 20, 21, 0.6);
  --opacity-black-65: rgba(19, 20, 21, 0.65);
  --opacity-black-70: rgba(19, 20, 21, 0.7);
  --opacity-black-75: rgba(19, 20, 21, 0.75);
  --opacity-black-80: rgba(19, 20, 21, 0.8);
  --opacity-black-85: rgba(19, 20, 21, 0.85);
  --opacity-black-90: rgba(19, 20, 21, 0.9);
  --opacity-black-95: rgba(19, 20, 21, 0.95);
  --opacity-white-0: rgba(255, 255, 255, 0);
  --opacity-white-5: rgba(255, 255, 255, 0.05);
  --opacity-white-10: rgba(255, 255, 255, 0.1);
  --opacity-white-15: rgba(255, 255, 255, 0.15);
  --opacity-white-20: rgba(255, 255, 255, 0.2);
  --opacity-white-25: rgba(255, 255, 255, 0.25);
  --opacity-white-30: rgba(255, 255, 255, 0.3);
  --opacity-white-35: rgba(255, 255, 255, 0.35);
  --opacity-white-40: rgba(255, 255, 255, 0.4);
  --opacity-white-45: rgba(255, 255, 255, 0.45);
  --opacity-white-50: rgba(255, 255, 255, 0.5);
  --opacity-white-55: rgba(255, 255, 255, 0.55);
  --opacity-white-60: rgba(255, 255, 255, 0.6);
  --opacity-white-65: rgba(255, 255, 255, 0.65);
  --opacity-white-70: rgba(255, 255, 255, 0.7);
  --opacity-white-75: rgba(255, 255, 255, 0.75);
  --opacity-white-80: rgba(255, 255, 255, 0.8);
  --opacity-white-85: rgba(255, 255, 255, 0.85);
  --opacity-white-90: rgba(255, 255, 255, 0.9);
  --opacity-white-95: rgba(255, 255, 255, 0.95);
  --yellow-100: #fff3e5;
  --yellow-200: #ffb870;
  --yellow-300: #ff8c1a;
  --yellow-400: #e07000;
  --yellow-500: #b85c00;
  --yellow-600: #8f4800;
  --yellow-700: #663300;
  --yellow-800: #3d1f00;
  --radius-0: 0;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-circle: 999px;
  --size-12: 12px;
  --size-16: 16px;
  --size-20: 20px;
  --size-24: 24px;
  --size-32: 32px;
  --size-48: 48px;
  --size-56: 56px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --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;
}

/* ── 2. Semantic · light (기본) · light-white 테마 ── */
:root,
[data-theme="light"],
[data-theme="light-white"] {
  --opacity-dot-primary: var(--opacity-black-60);
  --opacity-dot-secondary: var(--opacity-black-15);
  --opacity-onboarding-card-primary: var(--opacity-white-65);
  --background-primary: var(--static-white);
  --background-secondary: var(--gray-50);
  --surface-primary: var(--static-white);
  --surface-secondary: var(--gray-50);
  --surface-floating: var(--static-white);
  --surface-inverse: var(--gray-700);
  --surface-disabled: var(--gray-100);
  --icon-primary: var(--gray-900);
  --icon-secondary: var(--gray-600);
  --icon-tertiary: var(--gray-400);
  --icon-inverse: var(--static-white);
  --icon-disabled: var(--gray-200);
  --icon-accent-primary: var(--red-500);
  --icon-accent-secondary: var(--teal-500);
  --icon-feedback-success: var(--gray-900);
  --icon-feedback-info: var(--teal-500);
  --icon-feedback-critical: var(--red-500);
  --icon-feedback-on-dark-info: var(--teal-400);
  --icon-feedback-on-dark-critical: var(--red-300);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-500);
  --text-inverse: var(--static-white);
  --text-disabled: var(--gray-300);
  --text-feedback-success: var(--gray-900);
  --text-feedback-info: var(--teal-500);
  --text-feedback-critical: var(--red-500);
  --text-accent-primary: var(--red-500);
  --text-accent-secondary: var(--teal-500);
  --text-link-default: var(--blue-500);
  --text-link-hover: var(--blue-700);
  --text-link-pressed: var(--blue-700);
  --fill-inverse: var(--static-white);
  --fill-primary-default: var(--gray-900);
  --fill-primary-hover: var(--gray-700);
  --fill-primary-pressed: var(--gray-500);
  --fill-primary-disabled: var(--gray-50);
  --fill-accent-primary-default: var(--red-500);
  --fill-accent-primary-hover: var(--red-600);
  --fill-accent-primary-pressed: var(--red-700);
  --fill-accent-primary-disabled: var(--gray-50);
  --fill-accent-secondary-default: var(--teal-500);
  --fill-accent-secondary-hover: var(--teal-600);
  --fill-accent-secondary-pressed: var(--teal-700);
  --fill-accent-secondary-disabled: var(--gray-50);
  --fill-secondary-default: var(--gray-100);
  --fill-secondary-hover: var(--gray-200);
  --fill-secondary-pressed: var(--gray-300);
  --fill-secondary-disabled: var(--gray-50);
  --fill-tertiary-default: var(--opacity-black-0);
  --fill-tertiary-hover: var(--gray-100);
  --fill-tertiary-pressed: var(--gray-200);
  --fill-tertiary-disabled: var(--gray-50);
  --dim-overlay: var(--opacity-black-65);
  --border-primary: var(--gray-400);
  --border-secondary: var(--gray-100);
  --border-tertiary: var(--gray-50);
  --border-inverse: var(--gray-900);
  --border-disabled: var(--gray-200);
  --border-accent-primary: var(--red-500);
  --border-accent-secondary: var(--teal-400);
  --border-feedback-critical: var(--red-500);
  --tag-membership-fill-vvip: var(--red-500);
  --tag-membership-fill-vip: var(--gray-900);
  --tag-membership-fill-gold: var(--yellow-500);
  --tag-membership-fill-silver: var(--gray-500);
  --tag-membership-fill-white: var(--gray-100);
  --tag-membership-fill-standard: 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-inverse: var(--static-white);
  --tag-status-fill-default: var(--gray-100);
  --tag-status-fill-success: var(--gray-100);
  --tag-status-fill-info: var(--teal-100);
  --tag-status-fill-critical: var(--red-100);
  --tag-status-fill-warning: var(--yellow-100);
  --tag-status-fill-progress: var(--blue-100);
  --tag-status-fill-disabled: var(--gray-50);
  --tag-status-text-default: var(--gray-600);
  --tag-status-text-success: var(--gray-900);
  --tag-status-text-info: var(--teal-600);
  --tag-status-text-critical: var(--red-600);
  --tag-status-text-warning: var(--yellow-600);
  --tag-status-text-progress: var(--blue-600);
  --tag-status-text-disabled: var(--gray-300);
  --tag-category-fill-basic: var(--gray-100);
  --tag-category-fill-recommend: var(--teal-100);
  --tag-category-fill-sale: var(--red-100);
  --tag-category-fill-hot: var(--blue-100);
  --tag-category-fill-new: var(--purple-100);
  --tag-category-text-basic: 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);
  --handle-switch-fill-default: var(--static-white);
  --handle-switch-fill-disabled: var(--static-white);
  --handle-slider-fill-default: var(--static-white);
  --handle-slider-fill-disabled: var(--gray-50);
  --handle-slider-border-default: var(--gray-100);
  --handle-slider-border-disabled: var(--gray-100);
  --gradient-surface-primary: linear-gradient(90deg, var(--opacity-white-0) 0%, var(--static-white) 100%);
  --gradient-surface-secondary: linear-gradient(90deg, #f3f4f600 0%, var(--gray-50) 100%);
  --gradient-accent-secondary: linear-gradient(90deg, #007f7f00 0%, var(--teal-500) 100%);
  --gradient-skeleton: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 30%, rgba(255, 255, 255, 0.50) 45%, rgba(255, 255, 255, 0.50) 55%, rgba(255, 255, 255, 0.00) 70%);
  --gradient-ai-indicator: linear-gradient(90deg, #191A1B 0%, #8B8F97 58%, #55585D 100%);
}

/* ── 2. Semantic · light-gray 테마 ── */
[data-theme="light-gray"] {
  --opacity-dot-primary: var(--opacity-black-60);
  --opacity-dot-secondary: var(--opacity-black-15);
  --opacity-onboarding-card-primary: var(--opacity-white-65);
  --background-primary: #f3f4f6;
  --background-secondary: var(--gray-50);
  --surface-primary: var(--static-white);
  --surface-secondary: #f3f4f6;
  --surface-floating: var(--static-white);
  --surface-inverse: var(--gray-700);
  --surface-disabled: var(--gray-100);
  --icon-primary: var(--gray-900);
  --icon-secondary: var(--gray-650);
  --icon-tertiary: var(--gray-450);
  --icon-inverse: var(--static-white);
  --icon-disabled: var(--gray-250);
  --icon-accent-primary: var(--red-500);
  --icon-accent-secondary: var(--teal-500);
  --icon-feedback-success: var(--gray-900);
  --icon-feedback-info: var(--teal-500);
  --icon-feedback-critical: var(--red-500);
  --icon-feedback-on-dark-info: var(--teal-400);
  --icon-feedback-on-dark-critical: var(--red-300);
  --text-secondary: var(--gray-750);
  --text-primary: var(--gray-900);
  --text-tertiary: var(--gray-550);
  --text-inverse: var(--static-white);
  --text-disabled: var(--gray-350);
  --text-feedback-success: var(--gray-900);
  --text-feedback-info: var(--teal-600);
  --text-feedback-critical: var(--red-600);
  --text-accent-primary: var(--red-600);
  --text-accent-secondary: var(--teal-600);
  --text-link-default: var(--blue-500);
  --text-link-hover: var(--blue-700);
  --text-link-pressed: var(--blue-700);
  --border-primary: var(--gray-450);
  --border-inverse: var(--gray-900);
  --border-tertiary: var(--gray-100);
  --border-secondary: var(--gray-150);
  --border-disabled: var(--gray-250);
  --border-accent-primary: var(--red-500);
  --border-accent-secondary: var(--teal-400);
  --border-feedback-critical: var(--red-500);
  --fill-inverse: var(--static-white);
  --fill-primary-disabled: var(--gray-100);
  --fill-primary-default: var(--gray-900);
  --fill-primary-hover: var(--gray-750);
  --fill-primary-pressed: var(--gray-550);
  --fill-accent-primary-default: var(--red-500);
  --fill-accent-primary-hover: var(--red-600);
  --fill-accent-primary-pressed: var(--red-700);
  --fill-accent-primary-disabled: var(--gray-100);
  --fill-accent-secondary-default: var(--teal-500);
  --fill-accent-secondary-hover: var(--teal-600);
  --fill-accent-secondary-pressed: var(--teal-700);
  --fill-accent-secondary-disabled: var(--gray-100);
  --fill-secondary-default: var(--gray-150);
  --fill-secondary-hover: var(--gray-250);
  --fill-secondary-pressed: var(--gray-350);
  --fill-secondary-disabled: var(--gray-100);
  --fill-tertiary-default: var(--opacity-black-0);
  --fill-tertiary-hover: var(--gray-150);
  --fill-tertiary-pressed: var(--gray-250);
  --fill-tertiary-disabled: var(--gray-100);
  --dim-overlay: var(--opacity-black-65);
  --tag-membership-fill-vvip: var(--red-500);
  --tag-membership-fill-vip: var(--gray-900);
  --tag-membership-fill-gold: var(--yellow-500);
  --tag-membership-fill-silver: var(--gray-500);
  --tag-membership-fill-white: var(--gray-100);
  --tag-membership-fill-standard: 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-inverse: var(--static-white);
  --tag-status-fill-default: var(--gray-100);
  --tag-status-fill-success: var(--gray-100);
  --tag-status-fill-info: var(--teal-100);
  --tag-status-fill-critical: var(--red-100);
  --tag-status-fill-warning: var(--yellow-100);
  --tag-status-fill-progress: var(--blue-100);
  --tag-status-fill-disabled: var(--gray-50);
  --tag-status-text-default: var(--gray-600);
  --tag-status-text-success: var(--gray-900);
  --tag-status-text-info: var(--teal-600);
  --tag-status-text-critical: var(--red-600);
  --tag-status-text-warning: var(--yellow-600);
  --tag-status-text-progress: var(--blue-600);
  --tag-status-text-disabled: var(--gray-300);
  --tag-category-fill-basic: var(--gray-100);
  --tag-category-fill-recommend: var(--teal-100);
  --tag-category-fill-sale: var(--red-100);
  --tag-category-fill-hot: var(--blue-100);
  --tag-category-fill-new: var(--purple-100);
  --tag-category-text-basic: 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);
  --handle-default: var(--static-white);
  --handle-disabled: var(--static-white);
  --gradient-surface-primary: linear-gradient(90deg, #f3f4f600 0%, var(--gray-50) 100%);
  --gradient-surface-secondary: linear-gradient(90deg, #f3f4f600 0%, var(--gray-50) 100%);
  --gradient-accent-secondary: linear-gradient(90deg, #007f7f00 0%, var(--teal-500) 100%);
  --gradient-skeleton: linear-gradient(90deg, rgba(19, 20, 21, 0.15) 30%, rgba(19, 20, 21, 0.60) 45%, rgba(19, 20, 21, 0.60) 55%, rgba(19, 20, 21, 0.15) 70%);
  --gradient-ai-indicator: linear-gradient(90deg, #191A1B 0%, #8B8F97 58%, #55585D 100%);
}

/* ── 2. Semantic · dark 테마 ── */
[data-theme="dark"] {
  --opacity-dot-primary: var(--opacity-white-95);
  --opacity-dot-secondary: var(--opacity-white-45);
  --opacity-onboarding-card-primary: var(--opacity-white-15);
  --background-primary: var(--gray-800);
  --background-secondary: var(--gray-900);
  --surface-primary: var(--gray-800);
  --surface-secondary: var(--gray-600);
  --surface-floating: var(--gray-700);
  --surface-inverse: var(--static-white);
  --surface-disabled: var(--static-white);
  --icon-primary: var(--gray-50);
  --icon-secondary: var(--gray-300);
  --icon-tertiary: var(--gray-500);
  --icon-inverse: var(--gray-900);
  --icon-disabled: var(--gray-600);
  --icon-accent-primary: var(--red-400);
  --icon-accent-secondary: var(--teal-400);
  --icon-feedback-success: var(--gray-50);
  --icon-feedback-info: var(--teal-400);
  --icon-feedback-critical: var(--red-400);
  --icon-feedback-on-dark-info: var(--teal-500);
  --icon-feedback-on-dark-critical: var(--red-500);
  --text-primary: var(--static-white);
  --text-secondary: var(--gray-200);
  --text-tertiary: var(--gray-400);
  --text-inverse: var(--gray-900);
  --text-disabled: var(--gray-600);
  --text-feedback-success: var(--static-white);
  --text-feedback-info: var(--teal-400);
  --text-feedback-critical: var(--red-400);
  --text-accent-primary: var(--red-400);
  --text-accent-secondary: var(--teal-400);
  --text-link-default: var(--blue-400);
  --text-link-hover: var(--blue-600);
  --text-link-pressed: var(--blue-600);
  --fill-inverse: var(--gray-900);
  --fill-primary-default: var(--gray-100);
  --fill-primary-hover: var(--gray-300);
  --fill-primary-pressed: var(--gray-500);
  --fill-primary-disabled: var(--gray-700);
  --fill-accent-primary-default: var(--red-400);
  --fill-accent-primary-hover: var(--red-300);
  --fill-accent-primary-pressed: var(--red-200);
  --fill-accent-primary-disabled: var(--gray-700);
  --fill-accent-secondary-default: var(--teal-400);
  --fill-accent-secondary-hover: var(--teal-300);
  --fill-accent-secondary-pressed: var(--teal-200);
  --fill-accent-secondary-disabled: var(--gray-700);
  --fill-secondary-default: var(--gray-700);
  --fill-secondary-hover: var(--gray-500);
  --fill-secondary-pressed: var(--gray-400);
  --fill-secondary-disabled: var(--gray-700);
  --fill-tertiary-default: var(--opacity-black-0);
  --fill-tertiary-hover: var(--gray-700);
  --fill-tertiary-pressed: var(--gray-500);
  --fill-tertiary-disabled: var(--gray-700);
  --dim-overlay: var(--opacity-black-65);
  --border-primary: var(--gray-400);
  --border-secondary: var(--gray-600);
  --border-tertiary: var(--gray-700);
  --border-inverse: var(--gray-50);
  --border-disabled: var(--gray-700);
  --border-accent-primary: var(--red-400);
  --border-accent-secondary: var(--teal-300);
  --border-feedback-critical: var(--red-400);
  --tag-membership-fill-vvip: var(--red-400);
  --tag-membership-fill-vip: var(--gray-100);
  --tag-membership-fill-gold: var(--yellow-400);
  --tag-membership-fill-silver: var(--gray-400);
  --tag-membership-fill-white: var(--gray-600);
  --tag-membership-fill-standard: 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-inverse: var(--gray-900);
  --tag-status-fill-default: var(--gray-700);
  --tag-status-fill-success: var(--gray-600);
  --tag-status-fill-info: var(--teal-700);
  --tag-status-fill-critical: var(--red-700);
  --tag-status-fill-warning: var(--yellow-700);
  --tag-status-fill-progress: var(--blue-700);
  --tag-status-fill-disabled: var(--gray-700);
  --tag-status-text-default: var(--static-white);
  --tag-status-text-success: var(--static-white);
  --tag-status-text-info: var(--teal-100);
  --tag-status-text-critical: var(--red-100);
  --tag-status-text-warning: var(--yellow-100);
  --tag-status-text-progress: var(--blue-100);
  --tag-status-text-disabled: var(--gray-600);
  --tag-category-fill-basic: var(--gray-700);
  --tag-category-fill-recommend: var(--teal-700);
  --tag-category-fill-sale: var(--red-700);
  --tag-category-fill-hot: var(--blue-700);
  --tag-category-fill-new: var(--purple-700);
  --tag-category-text-basic: 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);
  --handle-switch-fill-default: var(--static-white);
  --handle-switch-fill-disabled: var(--gray-650);
  --handle-slider-fill-default: var(--static-white);
  --handle-slider-fill-disabled: var(--gray-650);
  --handle-slider-border-default: var(--gray-100);
  --handle-slider-border-disabled: var(--gray-700);
  --gradient-surface-primary: linear-gradient(90deg, #23242500 0%, var(--gray-800) 100%);
  --gradient-surface-secondary: linear-gradient(90deg, #31323500 0%, var(--gray-750) 100%);
  --gradient-accent-secondary: linear-gradient(90deg, #00b1a800 0%, var(--teal-400) 100%);
  --gradient-skeleton: linear-gradient(90deg, rgba(19, 20, 21, 0.15) 30%, rgba(19, 20, 21, 0.60) 45%, rgba(19, 20, 21, 0.60) 55%, rgba(19, 20, 21, 0.15) 70%);
  --gradient-ai-indicator: linear-gradient(90deg, #191A1B 0%, #8B8F97 58%, #55585D 100%);
}

/* ── 1. Primitive · 타이포그래피 ── */
:root, [data-theme], [data-mode] {
  --font-family-default: Pretendard;
  --font-family-brand: Pretendard;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-10: 10px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-17: 17px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-32: 32px;
  --font-size-36: 36px;
  --font-size-40: 40px;
  --font-size-60: 60px;
  --line-height-default-148: 148%;
  --line-height-reading-130: 130%;
  --line-height-reading-158: 158%;
  --line-height-reading-170: 170%;
  --letter-spacing-default: 0%;
  --letter-spacing-tight: -1%;
  --display-xlarge-medium-font-family: var(--font-family-default);
  --display-xlarge-medium-font-weight: var(--font-weight-medium);
  --display-xlarge-medium-font-size: var(--font-size-60);
  --display-xlarge-medium-line-height: var(--line-height-reading-130);
  --display-xlarge-medium-letter-spacing: var(--letter-spacing-tight);
  --display-xlarge-bold-font-family: var(--font-family-default);
  --display-xlarge-bold-font-weight: var(--font-weight-bold);
  --display-xlarge-bold-font-size: var(--font-size-60);
  --display-xlarge-bold-line-height: var(--line-height-reading-130);
  --display-xlarge-bold-letter-spacing: var(--letter-spacing-tight);
  --display-large-medium-font-family: var(--font-family-default);
  --display-large-medium-font-weight: var(--font-weight-medium);
  --display-large-medium-font-size: var(--font-size-40);
  --display-large-medium-line-height: var(--line-height-reading-130);
  --display-large-medium-letter-spacing: var(--letter-spacing-tight);
  --display-large-bold-font-family: var(--font-family-default);
  --display-large-bold-font-weight: var(--font-weight-bold);
  --display-large-bold-font-size: var(--font-size-40);
  --display-large-bold-line-height: var(--line-height-reading-130);
  --display-large-bold-letter-spacing: var(--letter-spacing-tight);
  --display-medium-medium-font-family: var(--font-family-default);
  --display-medium-medium-font-weight: var(--font-weight-medium);
  --display-medium-medium-font-size: var(--font-size-36);
  --display-medium-medium-line-height: var(--line-height-default-148);
  --display-medium-medium-letter-spacing: var(--letter-spacing-default);
  --display-medium-bold-font-family: var(--font-family-default);
  --display-medium-bold-font-weight: var(--font-weight-bold);
  --display-medium-bold-font-size: var(--font-size-36);
  --display-medium-bold-line-height: var(--line-height-default-148);
  --display-medium-bold-letter-spacing: var(--letter-spacing-default);
  --heading-large-medium-font-family: var(--font-family-default);
  --heading-large-medium-font-weight: var(--font-weight-medium);
  --heading-large-medium-font-size: var(--font-size-32);
  --heading-large-medium-line-height: var(--line-height-default-148);
  --heading-large-medium-letter-spacing: var(--letter-spacing-default);
  --heading-large-bold-font-family: var(--font-family-default);
  --heading-large-bold-font-weight: var(--font-weight-bold);
  --heading-large-bold-font-size: var(--font-size-32);
  --heading-large-bold-line-height: var(--line-height-default-148);
  --heading-large-bold-letter-spacing: var(--letter-spacing-default);
  --heading-medium-medium-font-family: var(--font-family-default);
  --heading-medium-medium-font-weight: var(--font-weight-medium);
  --heading-medium-medium-font-size: var(--font-size-24);
  --heading-medium-medium-line-height: var(--line-height-default-148);
  --heading-medium-medium-letter-spacing: var(--letter-spacing-default);
  --heading-medium-bold-font-family: var(--font-family-default);
  --heading-medium-bold-font-weight: var(--font-weight-bold);
  --heading-medium-bold-font-size: var(--font-size-24);
  --heading-medium-bold-line-height: var(--line-height-default-148);
  --heading-medium-bold-letter-spacing: var(--letter-spacing-default);
  --heading-small-medium-font-family: var(--font-family-default);
  --heading-small-medium-font-weight: var(--font-weight-medium);
  --heading-small-medium-font-size: var(--font-size-22);
  --heading-small-medium-line-height: var(--line-height-default-148);
  --heading-small-medium-letter-spacing: var(--letter-spacing-default);
  --heading-small-bold-font-family: var(--font-family-default);
  --heading-small-bold-font-weight: var(--font-weight-bold);
  --heading-small-bold-font-size: var(--font-size-22);
  --heading-small-bold-line-height: var(--line-height-default-148);
  --heading-small-bold-letter-spacing: var(--letter-spacing-default);
  --title-large-medium-font-family: var(--font-family-default);
  --title-large-medium-font-weight: var(--font-weight-medium);
  --title-large-medium-font-size: var(--font-size-20);
  --title-large-medium-line-height: var(--line-height-default-148);
  --title-large-medium-letter-spacing: var(--letter-spacing-default);
  --title-large-bold-font-family: var(--font-family-default);
  --title-large-bold-font-weight: var(--font-weight-bold);
  --title-large-bold-font-size: var(--font-size-20);
  --title-large-bold-line-height: var(--line-height-default-148);
  --title-large-bold-letter-spacing: var(--letter-spacing-default);
  --title-medium-medium-font-family: var(--font-family-default);
  --title-medium-medium-font-weight: var(--font-weight-medium);
  --title-medium-medium-font-size: var(--font-size-18);
  --title-medium-medium-line-height: var(--line-height-default-148);
  --title-medium-medium-letter-spacing: var(--letter-spacing-default);
  --title-medium-bold-font-family: var(--font-family-default);
  --title-medium-bold-font-weight: var(--font-weight-bold);
  --title-medium-bold-font-size: var(--font-size-18);
  --title-medium-bold-line-height: var(--line-height-default-148);
  --title-medium-bold-letter-spacing: var(--letter-spacing-default);
  --title-small-medium-font-family: var(--font-family-default);
  --title-small-medium-font-weight: var(--font-weight-medium);
  --title-small-medium-font-size: var(--font-size-16);
  --title-small-medium-line-height: var(--line-height-default-148);
  --title-small-medium-letter-spacing: var(--letter-spacing-default);
  --title-small-bold-font-family: var(--font-family-default);
  --title-small-bold-font-weight: var(--font-weight-bold);
  --title-small-bold-font-size: var(--font-size-16);
  --title-small-bold-line-height: var(--line-height-default-148);
  --title-small-bold-letter-spacing: var(--letter-spacing-default);
  --body-large-medium-font-family: var(--font-family-default);
  --body-large-medium-font-weight: var(--font-weight-medium);
  --body-large-medium-font-size: var(--font-size-16);
  --body-large-medium-line-height: var(--line-height-default-148);
  --body-large-medium-letter-spacing: var(--letter-spacing-default);
  --body-large-bold-font-family: var(--font-family-default);
  --body-large-bold-font-weight: var(--font-weight-bold);
  --body-large-bold-font-size: var(--font-size-16);
  --body-large-bold-line-height: var(--line-height-default-148);
  --body-large-bold-letter-spacing: var(--letter-spacing-default);
  --body-medium-medium-font-family: var(--font-family-default);
  --body-medium-medium-font-weight: var(--font-weight-medium);
  --body-medium-medium-font-size: var(--font-size-15);
  --body-medium-medium-line-height: var(--line-height-default-148);
  --body-medium-medium-letter-spacing: var(--letter-spacing-default);
  --body-medium-bold-font-family: var(--font-family-default);
  --body-medium-bold-font-weight: var(--font-weight-bold);
  --body-medium-bold-font-size: var(--font-size-15);
  --body-medium-bold-line-height: var(--line-height-default-148);
  --body-medium-bold-letter-spacing: var(--letter-spacing-default);
  --body-small-medium-font-family: var(--font-family-default);
  --body-small-medium-font-weight: var(--font-weight-medium);
  --body-small-medium-font-size: var(--font-size-14);
  --body-small-medium-line-height: var(--line-height-default-148);
  --body-small-medium-letter-spacing: var(--letter-spacing-default);
  --body-small-semibold-font-family: var(--font-family-default);
  --body-small-semibold-font-weight: var(--font-weight-semibold);
  --body-small-semibold-font-size: var(--font-size-14);
  --body-small-semibold-line-height: var(--line-height-default-148);
  --body-small-semibold-letter-spacing: var(--letter-spacing-default);
  --body-small-bold-font-family: var(--font-family-default);
  --body-small-bold-font-weight: var(--font-weight-bold);
  --body-small-bold-font-size: var(--font-size-14);
  --body-small-bold-line-height: var(--line-height-default-148);
  --body-small-bold-letter-spacing: var(--letter-spacing-default);
  --body-reading-large-medium-font-family: var(--font-family-default);
  --body-reading-large-medium-font-weight: var(--font-weight-medium);
  --body-reading-large-medium-font-size: var(--font-size-16);
  --body-reading-large-medium-line-height: var(--line-height-reading-170);
  --body-reading-large-medium-letter-spacing: var(--letter-spacing-default);
  --body-reading-large-bold-font-family: var(--font-family-default);
  --body-reading-large-bold-font-weight: var(--font-weight-bold);
  --body-reading-large-bold-font-size: var(--font-size-16);
  --body-reading-large-bold-line-height: var(--line-height-reading-170);
  --body-reading-large-bold-letter-spacing: var(--letter-spacing-default);
  --body-reading-medium-medium-font-family: var(--font-family-default);
  --body-reading-medium-medium-font-weight: var(--font-weight-medium);
  --body-reading-medium-medium-font-size: var(--font-size-15);
  --body-reading-medium-medium-line-height: var(--line-height-reading-158);
  --body-reading-medium-medium-letter-spacing: var(--letter-spacing-default);
  --body-reading-medium-bold-font-family: var(--font-family-default);
  --body-reading-medium-bold-font-weight: var(--font-weight-bold);
  --body-reading-medium-bold-font-size: var(--font-size-15);
  --body-reading-medium-bold-line-height: var(--line-height-reading-158);
  --body-reading-medium-bold-letter-spacing: var(--letter-spacing-default);
  --body-reading-small-medium-font-family: var(--font-family-default);
  --body-reading-small-medium-font-weight: var(--font-weight-medium);
  --body-reading-small-medium-font-size: var(--font-size-14);
  --body-reading-small-medium-line-height: var(--line-height-reading-158);
  --body-reading-small-medium-letter-spacing: var(--letter-spacing-default);
  --body-reading-small-bold-font-family: var(--font-family-default);
  --body-reading-small-bold-font-weight: var(--font-weight-bold);
  --body-reading-small-bold-font-size: var(--font-size-14);
  --body-reading-small-bold-line-height: var(--line-height-reading-158);
  --body-reading-small-bold-letter-spacing: var(--letter-spacing-default);
  --label-large-medium-font-family: var(--font-family-default);
  --label-large-medium-font-weight: var(--font-weight-medium);
  --label-large-medium-font-size: var(--font-size-17);
  --label-large-medium-line-height: var(--line-height-default-148);
  --label-large-medium-letter-spacing: var(--letter-spacing-default);
  --label-medium-semibold-font-family: var(--font-family-default);
  --label-medium-semibold-font-weight: var(--font-weight-semibold);
  --label-medium-semibold-font-size: var(--font-size-15);
  --label-medium-semibold-line-height: var(--line-height-default-148);
  --label-medium-semibold-letter-spacing: var(--letter-spacing-default);
  --label-small-medium-font-family: var(--font-family-default);
  --label-small-medium-font-weight: var(--font-weight-medium);
  --label-small-medium-font-size: var(--font-size-13);
  --label-small-medium-line-height: var(--line-height-default-148);
  --label-small-medium-letter-spacing: var(--letter-spacing-default);
  --label-small-bold-font-family: var(--font-family-default);
  --label-small-bold-font-weight: var(--font-weight-bold);
  --label-small-bold-font-size: var(--font-size-13);
  --label-small-bold-line-height: var(--line-height-default-148);
  --label-small-bold-letter-spacing: var(--letter-spacing-default);
  --label-xsmall-semibold-font-family: var(--font-family-default);
  --label-xsmall-semibold-font-weight: var(--font-weight-semibold);
  --label-xsmall-semibold-font-size: var(--font-size-10);
  --label-xsmall-semibold-letter-spacing: var(--letter-spacing-default);
  --label-xsmall-bold-font-family: var(--font-family-default);
  --label-xsmall-bold-font-weight: var(--font-weight-bold);
  --label-xsmall-bold-font-size: var(--font-size-10);
  --label-xsmall-bold-letter-spacing: var(--letter-spacing-default);
  --caption-medium-medium-font-family: var(--font-family-default);
  --caption-medium-medium-font-weight: var(--font-weight-medium);
  --caption-medium-medium-font-size: var(--font-size-12);
  --caption-medium-medium-line-height: var(--line-height-default-148);
  --caption-medium-medium-letter-spacing: var(--letter-spacing-default);
  --caption-medium-semibold-font-family: var(--font-family-default);
  --caption-medium-semibold-font-weight: var(--font-weight-semibold);
  --caption-medium-semibold-font-size: var(--font-size-12);
  --caption-medium-semibold-line-height: var(--line-height-default-148);
  --caption-medium-semibold-letter-spacing: var(--letter-spacing-default);
}

/* ── 1. Primitive · 그림자와 높이 ── */
:root, [data-theme], [data-mode] {
  --shadow-1-1-blur: 2;
  --shadow-1-1-spread: 0;
  --shadow-1-1-color: var(--opacity-black-5);
  --shadow-1-1-type: dropShadow;
  --shadow-1-1-offset-x: 0;
  --shadow-1-1-offset-y: 0;
  --shadow-1-2-blur: 4;
  --shadow-1-2-spread: 0;
  --shadow-1-2-color: var(--opacity-black-10);
  --shadow-1-2-type: dropShadow;
  --shadow-1-2-offset-x: 0;
  --shadow-1-2-offset-y: 2;
  --shadow-2-1-blur: 4;
  --shadow-2-1-spread: 0;
  --shadow-2-1-color: var(--opacity-black-5);
  --shadow-2-1-type: dropShadow;
  --shadow-2-1-offset-x: 0;
  --shadow-2-1-offset-y: 0;
  --shadow-2-2-blur: 8;
  --shadow-2-2-spread: 0;
  --shadow-2-2-color: var(--opacity-black-10);
  --shadow-2-2-type: dropShadow;
  --shadow-2-2-offset-x: 0;
  --shadow-2-2-offset-y: 4;
  --shadow-3-1-blur: 8;
  --shadow-3-1-spread: 0;
  --shadow-3-1-color: var(--opacity-black-5);
  --shadow-3-1-type: dropShadow;
  --shadow-3-1-offset-x: 0;
  --shadow-3-1-offset-y: 0;
  --shadow-3-2-blur: 12;
  --shadow-3-2-spread: 0;
  --shadow-3-2-color: var(--opacity-black-10);
  --shadow-3-2-type: dropShadow;
  --shadow-3-2-offset-x: 0;
  --shadow-3-2-offset-y: 8;
  --shadow-1: 0px 0px 2px 0px var(--opacity-black-5), 0px 2px 4px 0px var(--opacity-black-10);
  --shadow-2: 0px 0px 4px 0px var(--opacity-black-5), 0px 4px 8px 0px var(--opacity-black-10);
  --shadow-3: 0px 0px 8px 0px var(--opacity-black-5), 0px 8px 12px 0px var(--opacity-black-10);
  --elevation-level-0-fill: var(--background-primary);
  --elevation-level-1-fill: var(--surface-primary);
  --elevation-level-2-fill: var(--surface-primary);
  --elevation-level-2-box-shadow: var(--shadow-1);
  --elevation-level-3-fill: var(--surface-floating);
  --elevation-level-3-box-shadow: var(--shadow-2);
  --elevation-level-4-fill: var(--surface-primary);
  --elevation-level-4-box-shadow: var(--shadow-3);
}

/* ── 1. Primitive · 그리드 여백 ── */
:root, [data-theme], [data-mode] {
  --mobile-margin-spacing: var(--space-20);
  --mobile-gutter-spacing: var(--space-12);
  --tablet-margin-spacing: var(--space-20);
  --tablet-gutter-spacing: var(--space-16);
  --desktop-margin-spacing: var(--space-24);
  --desktop-gutter-spacing: var(--space-20);
}

:root, [data-theme], [data-mode] {
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-style-primary-style: solid;
  --border-style-secondary-style: solid;
  --border-style-tertiary-style: solid;
  --border-style-inverse-1-style: solid;
  --border-style-inverse-2-style: solid;
  --border-style-disabled-style: solid;
  --border-style-empty-color: 0;
  --border-style-empty-style: 0;
  --border-style-accent-primary-style: solid;
  --border-style-accent-secondary-style: solid;
  --border-style-feedback-critical-1-style: solid;
  --border-style-feedback-critical-2-style: solid;
  --border-style-handle-slider-default-width: 1px;
  --border-style-handle-slider-disabled-width: 1px;
  --border-style-primary-width: var(--border-width-1);
  --border-style-secondary-width: var(--border-width-1);
  --border-style-tertiary-width: var(--border-width-1);
  --border-style-inverse-1-width: var(--border-width-1);
  --border-style-inverse-2-width: var(--border-width-2);
  --border-style-disabled-width: var(--border-width-1);
  --border-style-empty-width: var(--border-width-0);
  --border-style-accent-primary-width: var(--border-width-1);
  --border-style-accent-secondary-width: var(--border-width-1);
  --border-style-feedback-critical-1-width: var(--border-width-1);
  --border-style-feedback-critical-2-width: var(--border-width-2);
  --border-style-primary-color: var(--border-primary);
  --border-style-secondary-color: var(--border-secondary);
  --border-style-tertiary-color: var(--border-tertiary);
  --border-style-inverse-1-color: var(--border-inverse);
  --border-style-inverse-2-color: var(--border-inverse);
  --border-style-disabled-color: var(--border-disabled);
  --border-style-accent-primary-color: var(--border-accent-primary);
  --border-style-accent-secondary-color: var(--border-accent-secondary);
  --border-style-feedback-critical-1-color: var(--border-feedback-critical);
  --border-style-feedback-critical-2-color: var(--border-feedback-critical);
  --border-style-handle-slider-default-color: var(--handle-slider-border-default);
  --border-style-handle-slider-disabled-color: var(--handle-slider-border-disabled);
}

:root, [data-theme], [data-mode] {
  /* bottom */
  --bottom-navigation-container-default-border-color: var(--border-secondary);
  --bottom-navigation-container-default-border-style: solid;
  --bottom-navigation-container-default-border-top: 1px;
  --bottom-navigation-container-default-border-width: var(--border-width-1);
  --bottom-navigation-container-default-fill: var(--surface-primary);
  --bottom-navigation-item-container-default-height: 56px;
  --bottom-navigation-item-container-default-item-spacing: var(--space-2);
  --bottom-navigation-item-icon-color-default-fill: var(--icon-tertiary);
  --bottom-navigation-item-icon-color-disabled-fill: var(--icon-disabled);
  --bottom-navigation-item-icon-color-selected-fill: var(--icon-primary);
  --bottom-navigation-item-icon-size-default-sizing: var(--size-24);
  --bottom-navigation-item-label-default-fill: var(--text-tertiary);
  --bottom-navigation-item-label-default-typography-font-family: var(--font-family-default);
  --bottom-navigation-item-label-default-typography-font-size: var(--font-size-10);
  --bottom-navigation-item-label-default-typography-font-weight: var(--font-weight-semibold);
  --bottom-navigation-item-label-default-typography-letter-spacing: var(--letter-spacing-default);
  --bottom-navigation-item-label-disabled-fill: var(--text-disabled);
  --bottom-navigation-item-label-disabled-typography-font-family: var(--font-family-default);
  --bottom-navigation-item-label-disabled-typography-font-size: var(--font-size-10);
  --bottom-navigation-item-label-disabled-typography-font-weight: var(--font-weight-semibold);
  --bottom-navigation-item-label-disabled-typography-letter-spacing: var(--letter-spacing-default);
  --bottom-navigation-item-label-selected-fill: var(--text-primary);
  --bottom-navigation-item-label-selected-typography-font-family: var(--font-family-default);
  --bottom-navigation-item-label-selected-typography-font-size: var(--font-size-10);
  --bottom-navigation-item-label-selected-typography-font-weight: var(--font-weight-bold);
  --bottom-navigation-item-label-selected-typography-letter-spacing: var(--letter-spacing-default);

}

:root, [data-theme], [data-mode] {
  /* bottom */
  --bottom-sheet-container-default-border-radius-top-left: var(--radius-16);
  --bottom-sheet-container-default-border-radius-top-right: var(--radius-16);
  --bottom-sheet-container-default-fill: var(--surface-primary);
  --bottom-sheet-container-default-item-spacing: 0;
  --bottom-sheet-contents-container-default-border-radius: 0;
  --bottom-sheet-contents-container-default-horizontal-padding: var(--space-20);
  --bottom-sheet-contents-container-default-vertical-padding: var(--space-16);
  --bottom-sheet-footer-container-default-horizontal-padding: var(--space-20);
  --bottom-sheet-footer-container-default-item-spacing: var(--space-8);
  --bottom-sheet-footer-container-default-vertical-padding: var(--space-8);
  --bottom-sheet-header-container-default-border-radius: 0;
  --bottom-sheet-header-container-default-item-spacing: var(--space-8);
  --bottom-sheet-header-container-default-min-width: 360px;
  --bottom-sheet-header-container-default-padding-bottom: 0;
  --bottom-sheet-header-container-default-padding-left: var(--space-20);
  --bottom-sheet-header-container-default-padding-right: var(--space-8);
  --bottom-sheet-header-container-default-padding-top: var(--space-16);
  --bottom-sheet-header-icon-color-default-fill: var(--icon-primary);
  --bottom-sheet-header-icon-container-default-sizing: 44px;
  --bottom-sheet-header-icon-size-default-sizing: var(--size-24);
  --bottom-sheet-header-text-body-fill: var(--text-tertiary);
  --bottom-sheet-header-text-body-typography-font-family: var(--font-family-default);
  --bottom-sheet-header-text-body-typography-font-size: var(--font-size-15);
  --bottom-sheet-header-text-body-typography-font-weight: var(--font-weight-medium);
  --bottom-sheet-header-text-body-typography-letter-spacing: var(--letter-spacing-default);
  --bottom-sheet-header-text-body-typography-line-height: var(--line-height-default-148);
  --bottom-sheet-header-text-header-fill: var(--text-primary);
  --bottom-sheet-header-text-header-typography-font-family: var(--font-family-default);
  --bottom-sheet-header-text-header-typography-font-size: var(--font-size-20);
  --bottom-sheet-header-text-header-typography-font-weight: var(--font-weight-bold);
  --bottom-sheet-header-text-header-typography-letter-spacing: var(--letter-spacing-default);
  --bottom-sheet-header-text-header-typography-line-height: var(--line-height-default-148);

}

:root, [data-theme], [data-mode] {
  /* button */
  --button-container-large-default-border-radius: var(--radius-8);
  --button-container-large-default-height: 48px;
  --button-container-large-default-padding-left: var(--space-16);
  --button-container-large-default-padding-right: var(--space-16);
  --button-container-large-icon-left-border-radius: var(--radius-8);
  --button-container-large-icon-left-height: 48px;
  --button-container-large-icon-left-item-spacing: var(--space-4);
  --button-container-large-icon-left-padding-left: var(--space-12);
  --button-container-large-icon-left-padding-right: var(--space-16);
  --button-container-large-icon-right-border-radius: var(--radius-8);
  --button-container-large-icon-right-height: 48px;
  --button-container-large-icon-right-item-spacing: var(--space-4);
  --button-container-large-icon-right-padding-left: var(--space-16);
  --button-container-large-icon-right-padding-right: var(--space-12);
  --button-container-medium-default-border-radius: var(--radius-8);
  --button-container-medium-default-height: 44px;
  --button-container-medium-default-padding-left: var(--space-16);
  --button-container-medium-default-padding-right: var(--space-16);
  --button-container-medium-icon-left-border-radius: var(--radius-8);
  --button-container-medium-icon-left-height: 44px;
  --button-container-medium-icon-left-item-spacing: var(--space-4);
  --button-container-medium-icon-left-padding-left: var(--space-12);
  --button-container-medium-icon-left-padding-right: var(--space-16);
  --button-container-medium-icon-right-border-radius: var(--radius-8);
  --button-container-medium-icon-right-height: 44px;
  --button-container-medium-icon-right-item-spacing: var(--space-4);
  --button-container-medium-icon-right-padding-left: var(--space-16);
  --button-container-medium-icon-right-padding-right: var(--space-12);
  --button-container-small-default-border-radius: var(--radius-4);
  --button-container-small-default-height: 32px;
  --button-container-small-default-padding-left: var(--space-12);
  --button-container-small-default-padding-right: var(--space-12);
  --button-container-small-icon-left-border-radius: var(--radius-4);
  --button-container-small-icon-left-height: 32px;
  --button-container-small-icon-left-padding-left: var(--space-8);
  --button-container-small-icon-left-padding-right: var(--space-12);
  --button-container-small-icon-right-border-radius: var(--radius-4);
  --button-container-small-icon-right-height: 32px;
  --button-container-small-icon-right-item-spacing: var(--space-4);
  --button-container-small-icon-right-padding-left: var(--space-12);
  --button-container-small-icon-right-padding-right: var(--space-8);
  --button-fill-accent-primary-default-border-color: 0;
  --button-fill-accent-primary-default-border-style: 0;
  --button-fill-accent-primary-default-border-width: var(--border-width-0);
  --button-fill-accent-primary-default-fill: var(--fill-accent-primary-default);
  --button-fill-accent-primary-disabled-border-color: 0;
  --button-fill-accent-primary-disabled-border-style: 0;
  --button-fill-accent-primary-disabled-border-width: var(--border-width-0);
  --button-fill-accent-primary-disabled-fill: var(--fill-accent-primary-disabled);
  --button-fill-accent-primary-hover-border-color: 0;
  --button-fill-accent-primary-hover-border-style: 0;
  --button-fill-accent-primary-hover-border-width: var(--border-width-0);
  --button-fill-accent-primary-hover-fill: var(--fill-accent-primary-hover);
  --button-fill-accent-primary-pressed-border-color: 0;
  --button-fill-accent-primary-pressed-border-style: 0;
  --button-fill-accent-primary-pressed-border-width: var(--border-width-0);
  --button-fill-accent-primary-pressed-fill: var(--fill-accent-primary-pressed);
  --button-fill-primary-default-border-color: 0;
  --button-fill-primary-default-border-style: 0;
  --button-fill-primary-default-border-width: var(--border-width-0);
  --button-fill-primary-default-fill: var(--fill-primary-default);
  --button-fill-primary-disabled-border-color: 0;
  --button-fill-primary-disabled-border-style: 0;
  --button-fill-primary-disabled-border-width: var(--border-width-0);
  --button-fill-primary-disabled-fill: var(--fill-primary-disabled);
  --button-fill-primary-hover-border-color: 0;
  --button-fill-primary-hover-border-style: 0;
  --button-fill-primary-hover-border-width: var(--border-width-0);
  --button-fill-primary-hover-fill: var(--fill-primary-hover);
  --button-fill-primary-pressed-border-color: 0;
  --button-fill-primary-pressed-border-style: 0;
  --button-fill-primary-pressed-border-width: var(--border-width-0);
  --button-fill-primary-pressed-fill: var(--fill-primary-pressed);
  --button-fill-secondary-default-border-color: 0;
  --button-fill-secondary-default-border-style: 0;
  --button-fill-secondary-default-border-width: var(--border-width-0);
  --button-fill-secondary-default-fill: var(--fill-secondary-default);
  --button-fill-secondary-disabled-border-color: 0;
  --button-fill-secondary-disabled-border-style: 0;
  --button-fill-secondary-disabled-border-width: var(--border-width-0);
  --button-fill-secondary-disabled-fill: var(--fill-secondary-disabled);
  --button-fill-secondary-hover-border-color: 0;
  --button-fill-secondary-hover-border-style: 0;
  --button-fill-secondary-hover-border-width: var(--border-width-0);
  --button-fill-secondary-hover-fill: var(--fill-secondary-hover);
  --button-fill-secondary-pressed-border-color: 0;
  --button-fill-secondary-pressed-border-style: 0;
  --button-fill-secondary-pressed-border-width: var(--border-width-0);
  --button-fill-secondary-pressed-fill: var(--fill-secondary-pressed);
  --button-fill-tertiary-default-border-color: var(--border-primary);
  --button-fill-tertiary-default-border-style: solid;
  --button-fill-tertiary-default-border-width: var(--border-width-1);
  --button-fill-tertiary-default-fill: var(--fill-tertiary-default);
  --button-fill-tertiary-disabled-border-color: var(--border-disabled);
  --button-fill-tertiary-disabled-border-style: solid;
  --button-fill-tertiary-disabled-border-width: var(--border-width-1);
  --button-fill-tertiary-disabled-fill: var(--fill-tertiary-disabled);
  --button-fill-tertiary-hover-border-color: var(--border-primary);
  --button-fill-tertiary-hover-border-style: solid;
  --button-fill-tertiary-hover-border-width: var(--border-width-1);
  --button-fill-tertiary-hover-fill: var(--fill-tertiary-hover);
  --button-fill-tertiary-pressed-border-color: var(--border-primary);
  --button-fill-tertiary-pressed-border-style: solid;
  --button-fill-tertiary-pressed-border-width: var(--border-width-1);
  --button-fill-tertiary-pressed-fill: var(--fill-tertiary-pressed);
  --button-icon-color-accent-primary-default-fill: var(--static-white);
  --button-icon-color-accent-primary-disabled-fill: var(--icon-disabled);
  --button-icon-color-secondary-default-fill: var(--icon-primary);
  --button-icon-color-secondary-disabled-fill: var(--icon-disabled);
  --button-icon-color-tertiary-default-fill: var(--icon-primary);
  --button-icon-color-tertiary-disabled-fill: var(--icon-disabled);
  --button-icon-size-icon-button-large-sizing: var(--size-20);
  --button-icon-size-icon-button-medium-sizing: var(--size-16);
  --button-icon-size-icon-button-small-sizing: var(--size-16);
  --button-icon-size-icon-only-large-sizing: var(--size-24);
  --button-icon-size-icon-only-medium-sizing: var(--size-24);
  --button-icon-size-icon-only-small-sizing: var(--size-20);
  --button-text-color-accent-primary-default-fill: var(--static-white);
  --button-text-color-accent-primary-disabled-fill: var(--text-disabled);
  --button-text-color-primary-default-fill: var(--text-inverse);
  --button-text-color-primary-disabled-fill: var(--text-disabled);
  --button-text-color-secondary-default-fill: var(--text-primary);
  --button-text-color-secondary-disabled-fill: var(--text-disabled);
  --button-text-color-tertiary-default-fill: var(--text-primary);
  --button-text-color-tertiary-disabled-fill: var(--text-disabled);
  --button-text-size-large-typography-font-family: var(--font-family-default);
  --button-text-size-large-typography-font-size: var(--font-size-15);
  --button-text-size-large-typography-font-weight: var(--font-weight-semibold);
  --button-text-size-large-typography-letter-spacing: var(--letter-spacing-default);
  --button-text-size-large-typography-line-height: var(--line-height-default-148);
  --button-text-size-medium-typography-font-family: var(--font-family-default);
  --button-text-size-medium-typography-font-size: var(--font-size-13);
  --button-text-size-medium-typography-font-weight: var(--font-weight-medium);
  --button-text-size-medium-typography-letter-spacing: var(--letter-spacing-default);
  --button-text-size-medium-typography-line-height: var(--line-height-default-148);
  --button-text-size-small-typography-font-family: var(--font-family-default);
  --button-text-size-small-typography-font-size: var(--font-size-13);
  --button-text-size-small-typography-font-weight: var(--font-weight-medium);
  --button-text-size-small-typography-letter-spacing: var(--letter-spacing-default);
  --button-text-size-small-typography-line-height: var(--line-height-default-148);

}

:root, [data-theme], [data-mode] {
  /* card */
  --card-contents-container-contents-fill: var(--surface-primary);
  --card-contents-container-contents-sizing: 320px;
  --card-contents-container-image-fill: var(--surface-secondary);
  --card-contents-container-image-sizing: 320px;
  --card-full-image-image-large-container-default-border-radius: var(--radius-12);
  --card-full-image-image-large-container-default-height: 320px;
  --card-full-image-image-large-container-default-width: 320px;
  --card-full-image-image-medium-container-default-border-radius: var(--radius-12);
  --card-full-image-image-medium-container-default-height: 240px;
  --card-full-image-image-medium-container-default-width: 240px;
  --card-full-image-title-large-container-default-horizontal-padding: var(--space-24);
  --card-full-image-title-large-container-default-item-spacing: var(--space-4);
  --card-full-image-title-large-container-default-padding-bottom: 0;
  --card-full-image-title-large-container-default-padding-top: var(--space-24);
  --card-full-image-title-large-container-default-width: 320px;
  --card-full-image-title-large-text-body-default-fill: var(--gray-500);
  --card-full-image-title-large-text-body-default-typography-font-family: var(--font-family-default);
  --card-full-image-title-large-text-body-default-typography-font-size: var(--font-size-14);
  --card-full-image-title-large-text-body-default-typography-font-weight: var(--font-weight-medium);
  --card-full-image-title-large-text-body-default-typography-letter-spacing: var(--letter-spacing-default);
  --card-full-image-title-large-text-body-default-typography-line-height: var(--line-height-default-148);
  --card-full-image-title-large-text-body-on-dark-fill: var(--static-white);
  --card-full-image-title-large-text-body-on-dark-typography-font-family: var(--font-family-default);
  --card-full-image-title-large-text-body-on-dark-typography-font-size: var(--font-size-14);
  --card-full-image-title-large-text-body-on-dark-typography-font-weight: var(--font-weight-medium);
  --card-full-image-title-large-text-body-on-dark-typography-letter-spacing: var(--letter-spacing-default);
  --card-full-image-title-large-text-body-on-dark-typography-line-height: var(--line-height-default-148);
  --card-full-image-title-large-text-title-default-fill: var(--gray-900);
  --card-full-image-title-large-text-title-default-typography-font-family: var(--font-family-default);
  --card-full-image-title-large-text-title-default-typography-font-size: var(--font-size-24);
  --card-full-image-title-large-text-title-default-typography-font-weight: var(--font-weight-bold);
  --card-full-image-title-large-text-title-default-typography-letter-spacing: var(--letter-spacing-default);
  --card-full-image-title-large-text-title-default-typography-line-height: var(--line-height-default-148);
  --card-full-image-title-large-text-title-on-dark-fill: var(--static-white);
  --card-full-image-title-large-text-title-on-dark-typography-font-family: var(--font-family-default);
  --card-full-image-title-large-text-title-on-dark-typography-font-size: var(--font-size-24);
  --card-full-image-title-large-text-title-on-dark-typography-font-weight: var(--font-weight-bold);
  --card-full-image-title-large-text-title-on-dark-typography-letter-spacing: var(--letter-spacing-default);
  --card-full-image-title-large-text-title-on-dark-typography-line-height: var(--line-height-default-148);
  --card-full-image-title-medium-container-default-horizontal-padding: var(--space-20);
  --card-full-image-title-medium-container-default-item-spacing: var(--space-2);
  --card-full-image-title-medium-container-default-padding-bottom: 0;
  --card-full-image-title-medium-container-default-padding-top: var(--space-20);
  --card-full-image-title-medium-container-default-width: 320px;
  --card-full-image-title-medium-text-body-default-fill: var(--gray-500);
  --card-full-image-title-medium-text-body-default-typography-font-family: var(--font-family-default);
  --card-full-image-title-medium-text-body-default-typography-font-size: var(--font-size-13);
  --card-full-image-title-medium-text-body-default-typography-font-weight: var(--font-weight-medium);
  --card-full-image-title-medium-text-body-default-typography-letter-spacing: var(--letter-spacing-default);
  --card-full-image-title-medium-text-body-default-typography-line-height: var(--line-height-default-148);
  --card-full-image-title-medium-text-body-on-dark-fill: var(--static-white);
  --card-full-image-title-medium-text-body-on-dark-typography-font-family: var(--font-family-default);
  --card-full-image-title-medium-text-body-on-dark-typography-font-size: var(--font-size-13);
  --card-full-image-title-medium-text-body-on-dark-typography-font-weight: var(--font-weight-medium);
  --card-full-image-title-medium-text-body-on-dark-typography-letter-spacing: var(--letter-spacing-default);
  --card-full-image-title-medium-text-body-on-dark-typography-line-height: var(--line-height-default-148);
  --card-full-image-title-medium-text-title-default-fill: var(--gray-900);
  --card-full-image-title-medium-text-title-default-typography-font-family: var(--font-family-default);
  --card-full-image-title-medium-text-title-default-typography-font-size: var(--font-size-20);
  --card-full-image-title-medium-text-title-default-typography-font-weight: var(--font-weight-bold);
  --card-full-image-title-medium-text-title-default-typography-letter-spacing: var(--letter-spacing-default);
  --card-full-image-title-medium-text-title-default-typography-line-height: var(--line-height-default-148);
  --card-full-image-title-medium-text-title-on-dark-fill: var(--static-white);
  --card-full-image-title-medium-text-title-on-dark-typography-font-family: var(--font-family-default);
  --card-full-image-title-medium-text-title-on-dark-typography-font-size: var(--font-size-20);
  --card-full-image-title-medium-text-title-on-dark-typography-font-weight: var(--font-weight-bold);
  --card-full-image-title-medium-text-title-on-dark-typography-letter-spacing: var(--letter-spacing-default);
  --card-full-image-title-medium-text-title-on-dark-typography-line-height: var(--line-height-default-148);
  --card-image-text-large-button-container-default-padding-top: var(--space-12);
  --card-image-text-large-container-default-border-radius: var(--radius-12);
  --card-image-text-large-container-default-sizing: 320px;
  --card-image-text-large-image-container-default-fill: var(--surface-secondary);
  --card-image-text-large-image-container-default-height: 180px;
  --card-image-text-large-text-container-default-fill: var(--surface-primary);
  --card-image-text-large-text-container-default-horizontal-padding: var(--space-20);
  --card-image-text-large-text-container-default-item-spacing: var(--space-2);
  --card-image-text-large-text-container-default-padding-bottom: var(--space-24);
  --card-image-text-large-text-container-default-padding-top: var(--space-16);
  --card-image-text-large-text-subtitle-fill: var(--text-tertiary);
  --card-image-text-large-text-subtitle-typography-font-family: var(--font-family-default);
  --card-image-text-large-text-subtitle-typography-font-size: var(--font-size-13);
  --card-image-text-large-text-subtitle-typography-font-weight: var(--font-weight-medium);
  --card-image-text-large-text-subtitle-typography-letter-spacing: var(--letter-spacing-default);
  --card-image-text-large-text-subtitle-typography-line-height: var(--line-height-default-148);
  --card-image-text-large-text-title-fill: var(--text-primary);
  --card-image-text-large-text-title-typography-font-family: var(--font-family-default);
  --card-image-text-large-text-title-typography-font-size: var(--font-size-18);
  --card-image-text-large-text-title-typography-font-weight: var(--font-weight-bold);
  --card-image-text-large-text-title-typography-letter-spacing: var(--letter-spacing-default);
  --card-image-text-large-text-title-typography-line-height: var(--line-height-default-148);
  --card-image-text-medium-button-container-default-padding-top: var(--space-8);
  --card-image-text-medium-container-default-border-radius: var(--radius-12);
  --card-image-text-medium-container-default-sizing: 240px;
  --card-image-text-medium-image-container-default-fill: var(--surface-secondary);
  --card-image-text-medium-image-container-default-height: 136px;
  --card-image-text-medium-text-container-default-fill: var(--surface-primary);
  --card-image-text-medium-text-container-default-horizontal-padding: var(--space-20);
  --card-image-text-medium-text-container-default-item-spacing: var(--space-2);
  --card-image-text-medium-text-container-default-vertical-padding: var(--space-16);
  --card-image-text-medium-text-subtitle-fill: var(--text-tertiary);
  --card-image-text-medium-text-subtitle-typography-font-family: var(--font-family-default);
  --card-image-text-medium-text-subtitle-typography-font-size: var(--font-size-13);
  --card-image-text-medium-text-subtitle-typography-font-weight: var(--font-weight-medium);
  --card-image-text-medium-text-subtitle-typography-letter-spacing: var(--letter-spacing-default);
  --card-image-text-medium-text-subtitle-typography-line-height: var(--line-height-default-148);
  --card-image-text-medium-text-title-fill: var(--text-primary);
  --card-image-text-medium-text-title-typography-font-family: var(--font-family-default);
  --card-image-text-medium-text-title-typography-font-size: var(--font-size-18);
  --card-image-text-medium-text-title-typography-font-weight: var(--font-weight-bold);
  --card-image-text-medium-text-title-typography-letter-spacing: var(--letter-spacing-default);
  --card-image-text-medium-text-title-typography-line-height: var(--line-height-default-148);

}

:root, [data-theme], [data-mode] {
  /* checkbox */
  --checkbox-icon-container-default-sizing: var(--size-24);
  --checkbox-icon-fill-active-default-fill: var(--fill-primary-default);
  --checkbox-icon-fill-active-default-sizing: var(--size-20);
  --checkbox-icon-fill-active-disabled-fill: var(--fill-primary-disabled);
  --checkbox-icon-fill-active-disabled-sizing: var(--size-20);
  --checkbox-icon-fill-active-hover-fill: var(--fill-primary-hover);
  --checkbox-icon-fill-active-hover-sizing: var(--size-20);
  --checkbox-icon-fill-default-default-border-color: var(--border-primary);
  --checkbox-icon-fill-default-default-border-style: solid;
  --checkbox-icon-fill-default-default-border-width: var(--border-width-1);
  --checkbox-icon-fill-default-default-fill: var(--fill-tertiary-default);
  --checkbox-icon-fill-default-default-sizing: var(--size-20);
  --checkbox-icon-fill-default-disabled-border: var(--border-disabled);
  --checkbox-icon-fill-default-disabled-fill: var(--fill-tertiary-disabled);
  --checkbox-icon-fill-default-disabled-sizing: var(--size-20);
  --checkbox-icon-fill-default-hover-border-color: var(--border-primary);
  --checkbox-icon-fill-default-hover-border-style: solid;
  --checkbox-icon-fill-default-hover-border-width: var(--border-width-1);
  --checkbox-icon-fill-default-hover-fill: var(--fill-tertiary-hover);
  --checkbox-icon-fill-default-hover-sizing: var(--size-20);
  --checkbox-icon-icon-color-active-default-fill: var(--icon-inverse);
  --checkbox-icon-icon-color-active-disabled-fill: var(--icon-disabled);
  --checkbox-icon-icon-color-active-hover-fill: var(--icon-inverse);
  --checkbox-icon-icon-color-default-default-fill: var(--icon-tertiary);
  --checkbox-icon-icon-color-default-disabled-fill: var(--icon-disabled);
  --checkbox-icon-icon-color-default-hover-fill: var(--icon-tertiary);
  --checkbox-list-container-default-height: 44px;
  --checkbox-list-container-default-horizontal-padding: var(--space-20);
  --checkbox-list-container-default-item-spacing: var(--space-4);
  --checkbox-list-container-default-min-width: 360px;
  --checkbox-list-text-default-fill: var(--text-primary);
  --checkbox-list-text-default-typography-font-family: var(--font-family-default);
  --checkbox-list-text-default-typography-font-size: var(--font-size-15);
  --checkbox-list-text-default-typography-font-weight: var(--font-weight-medium);
  --checkbox-list-text-default-typography-letter-spacing: var(--letter-spacing-default);
  --checkbox-list-text-default-typography-line-height: var(--line-height-default-148);
  --checkbox-list-text-disabled-fill: var(--text-disabled);
  --checkbox-list-text-disabled-typography-font-family: var(--font-family-default);
  --checkbox-list-text-disabled-typography-font-size: var(--font-size-15);
  --checkbox-list-text-disabled-typography-font-weight: var(--font-weight-medium);
  --checkbox-list-text-disabled-typography-letter-spacing: var(--letter-spacing-default);
  --checkbox-list-text-disabled-typography-line-height: var(--line-height-default-148);
  --checkbox-list-text-selected-fill: var(--text-primary);
  --checkbox-list-text-selected-typography-font-family: var(--font-family-default);
  --checkbox-list-text-selected-typography-font-size: var(--font-size-15);
  --checkbox-list-text-selected-typography-font-weight: var(--font-weight-bold);
  --checkbox-list-text-selected-typography-letter-spacing: var(--letter-spacing-default);
  --checkbox-list-text-selected-typography-line-height: var(--line-height-default-148);
  --checkbox-select-container-default-border-color: var(--border-primary);
  --checkbox-select-container-default-border-radius: var(--radius-8);
  --checkbox-select-container-default-border-style: solid;
  --checkbox-select-container-default-border-width: var(--border-width-1);
  --checkbox-select-container-default-box-shadow: none;
  --checkbox-select-container-default-fill: var(--surface-primary);
  --checkbox-select-container-default-height: 48px;
  --checkbox-select-container-default-horizontal-padding: var(--space-16);
  --checkbox-select-container-default-item-spacing: var(--space-4);
  --checkbox-select-container-default-vertical-padding: var(--space-16);
  --checkbox-select-container-disabled-border-color: var(--border-disabled);
  --checkbox-select-container-disabled-border-radius: var(--radius-8);
  --checkbox-select-container-disabled-border-style: solid;
  --checkbox-select-container-disabled-border-width: var(--border-width-1);
  --checkbox-select-container-disabled-box-shadow: none;
  --checkbox-select-container-disabled-fill: var(--surface-primary);
  --checkbox-select-container-disabled-height: 48px;
  --checkbox-select-container-disabled-horizontal-padding: var(--space-16);
  --checkbox-select-container-disabled-item-spacing: var(--space-4);
  --checkbox-select-container-disabled-vertical-padding: var(--space-16);
  --checkbox-select-container-selected-border-color: var(--border-inverse);
  --checkbox-select-container-selected-border-radius: var(--radius-8);
  --checkbox-select-container-selected-border-style: solid;
  --checkbox-select-container-selected-border-width: var(--border-width-2);
  --checkbox-select-container-selected-box-shadow: var(--shadow-2);
  --checkbox-select-container-selected-fill: var(--surface-primary);
  --checkbox-select-container-selected-height: 48px;
  --checkbox-select-container-selected-horizontal-padding: var(--space-16);
  --checkbox-select-container-selected-item-spacing: var(--space-4);
  --checkbox-select-container-selected-vertical-padding: var(--space-16);
  --checkbox-select-text-default-fill: var(--text-primary);
  --checkbox-select-text-default-typography-font-family: var(--font-family-default);
  --checkbox-select-text-default-typography-font-size: var(--font-size-14);
  --checkbox-select-text-default-typography-font-weight: var(--font-weight-medium);
  --checkbox-select-text-default-typography-letter-spacing: var(--letter-spacing-default);
  --checkbox-select-text-default-typography-line-height: var(--line-height-default-148);
  --checkbox-select-text-disabled-fill: var(--text-disabled);
  --checkbox-select-text-disabled-typography-font-family: var(--font-family-default);
  --checkbox-select-text-disabled-typography-font-size: var(--font-size-14);
  --checkbox-select-text-disabled-typography-font-weight: var(--font-weight-medium);
  --checkbox-select-text-disabled-typography-letter-spacing: var(--letter-spacing-default);
  --checkbox-select-text-disabled-typography-line-height: var(--line-height-default-148);
  --checkbox-select-text-selected-fill: var(--text-primary);
  --checkbox-select-text-selected-typography-font-family: var(--font-family-default);
  --checkbox-select-text-selected-typography-font-size: var(--font-size-14);
  --checkbox-select-text-selected-typography-font-weight: var(--font-weight-bold);
  --checkbox-select-text-selected-typography-letter-spacing: var(--letter-spacing-default);
  --checkbox-select-text-selected-typography-line-height: var(--line-height-reading-158);

}

:root, [data-theme], [data-mode] {
  /* chip */
  --chip-group-container-default-item-spacing: 6px;
  --chip-group-dim-gradient-default-fill: var(--gradient-surface-primary);
  --chip-group-dim-gradient-default-height: 36px;
  --chip-group-dim-gradient-default-width: 40px;
  --chip-group-dim-gradient-filter-chip-group-fill: var(--gradient-surface-primary);
  --chip-group-dim-gradient-filter-chip-group-height: 36px;
  --chip-group-dim-gradient-filter-chip-group-width: 64px;

  /* filter */
  --filter-chip-container-default-border-radius: var(--radius-circle);
  --filter-chip-container-default-height: 36px;
  --filter-chip-container-default-item-spacing: 1px;
  --filter-chip-container-default-padding-left: var(--space-12);
  --filter-chip-container-default-padding-right: 10px;
  --filter-chip-container-default-vertical-padding: var(--space-8);
  --filter-chip-icon-size-default-sizing: var(--size-16);
  --filter-chip-off-fill-default-fill: var(--fill-secondary-default);
  --filter-chip-off-fill-disabled-fill: var(--fill-secondary-disabled);
  --filter-chip-off-fill-hover-fill: var(--fill-secondary-hover);
  --filter-chip-off-fill-pressed-fill: var(--fill-secondary-pressed);
  --filter-chip-off-icon-color-default-fill: var(--icon-secondary);
  --filter-chip-off-icon-color-disabled-fill: var(--icon-disabled);
  --filter-chip-off-icon-color-hover-fill: var(--icon-secondary);
  --filter-chip-off-icon-color-pressed-fill: var(--icon-secondary);
  --filter-chip-off-text-color-default-fill: var(--text-secondary);
  --filter-chip-off-text-color-disabled-fill: var(--text-disabled);
  --filter-chip-off-text-color-hover-fill: var(--text-secondary);
  --filter-chip-off-text-color-pressed-fill: var(--text-secondary);
  --filter-chip-on-fill-default-fill: var(--fill-primary-default);
  --filter-chip-on-fill-disabled-fill: var(--fill-primary-disabled);
  --filter-chip-on-fill-hover-fill: var(--fill-primary-hover);
  --filter-chip-on-fill-pressed-fill: var(--fill-primary-pressed);
  --filter-chip-on-icon-color-default-fill: var(--icon-inverse);
  --filter-chip-on-icon-color-disabled-fill: var(--icon-disabled);
  --filter-chip-on-icon-color-hover-fill: var(--icon-inverse);
  --filter-chip-on-icon-color-pressed-fill: var(--icon-inverse);
  --filter-chip-on-text-color-default-fill: var(--text-inverse);
  --filter-chip-on-text-color-disabled-fill: var(--text-disabled);
  --filter-chip-on-text-color-hover-fill: var(--text-inverse);
  --filter-chip-on-text-color-pressed-fill: var(--text-inverse);
  --filter-chip-text-size-default-typography-font-family: var(--font-family-default);
  --filter-chip-text-size-default-typography-font-size: var(--font-size-14);
  --filter-chip-text-size-default-typography-font-weight: var(--font-weight-semibold);
  --filter-chip-text-size-default-typography-letter-spacing: var(--letter-spacing-default);
  --filter-chip-text-size-default-typography-line-height: var(--line-height-default-148);

  /* folder */
  --folder-chip-group-container-collapsed-height: 36px;
  --folder-chip-group-container-collapsed-item-spacing: var(--space-4);
  --folder-chip-group-container-expanded-height: 80px;
  --folder-chip-group-container-expanded-item-spacing: var(--space-4);

  /* input */
  --input-chip-container-default-border-radius: var(--radius-circle);
  --input-chip-container-default-height: 36px;
  --input-chip-container-default-item-spacing: 1px;
  --input-chip-container-default-padding-left: var(--space-12);
  --input-chip-container-default-padding-right: 10px;
  --input-chip-container-default-vertical-padding: var(--space-8);
  --input-chip-icon-size-default-sizing: var(--size-16);
  --input-chip-off-fill-default-fill: var(--fill-secondary-default);
  --input-chip-off-fill-disabled-fill: var(--fill-secondary-disabled);
  --input-chip-off-fill-hover-fill: var(--fill-secondary-hover);
  --input-chip-off-fill-pressed-fill: var(--fill-secondary-pressed);
  --input-chip-off-icon-color-default-fill: var(--icon-secondary);
  --input-chip-off-icon-color-disabled-fill: var(--icon-disabled);
  --input-chip-off-icon-color-hover-fill: var(--icon-secondary);
  --input-chip-off-icon-color-pressed-fill: var(--icon-secondary);
  --input-chip-off-text-color-default-fill: var(--text-secondary);
  --input-chip-off-text-color-disabled-fill: var(--text-disabled);
  --input-chip-off-text-color-hover-fill: var(--text-secondary);
  --input-chip-off-text-color-pressed-fill: var(--text-secondary);
  --input-chip-on-fill-default-fill: var(--fill-primary-default);
  --input-chip-on-fill-disabled-fill: var(--fill-primary-disabled);
  --input-chip-on-fill-hover-fill: var(--fill-primary-hover);
  --input-chip-on-fill-pressed-fill: var(--fill-primary-pressed);
  --input-chip-on-icon-color-default-fill: var(--icon-inverse);
  --input-chip-on-icon-color-disabled-fill: var(--icon-disabled);
  --input-chip-on-icon-color-hover-fill: var(--icon-inverse);
  --input-chip-on-icon-color-pressed-fill: var(--icon-inverse);
  --input-chip-on-text-color-default-fill: var(--text-inverse);
  --input-chip-on-text-color-disabled-fill: var(--text-disabled);
  --input-chip-on-text-color-hover-fill: var(--text-inverse);
  --input-chip-on-text-color-pressed-fill: var(--text-inverse);
  --input-chip-text-size-default-typography-font-family: var(--font-family-default);
  --input-chip-text-size-default-typography-font-size: var(--font-size-14);
  --input-chip-text-size-default-typography-font-weight: var(--font-weight-semibold);
  --input-chip-text-size-default-typography-letter-spacing: var(--letter-spacing-default);
  --input-chip-text-size-default-typography-line-height: var(--line-height-default-148);

  /* select */
  --select-chip-container-default-border-radius: var(--radius-circle);
  --select-chip-container-default-height: 36px;
  --select-chip-container-default-horizontal-padding: var(--space-12);
  --select-chip-container-default-item-spacing: var(--space-4);
  --select-chip-container-default-vertical-padding: var(--space-8);
  --select-chip-off-fill-default-fill: var(--fill-secondary-default);
  --select-chip-off-fill-disabled-fill: var(--fill-secondary-disabled);
  --select-chip-off-fill-hover-fill: var(--fill-secondary-hover);
  --select-chip-off-fill-pressed-fill: var(--fill-secondary-pressed);
  --select-chip-off-text-color-default-fill: var(--text-secondary);
  --select-chip-off-text-color-disabled-fill: var(--text-disabled);
  --select-chip-off-text-color-hover-fill: var(--text-secondary);
  --select-chip-off-text-color-pressed-fill: var(--text-secondary);
  --select-chip-on-fill-default-fill: var(--fill-primary-default);
  --select-chip-on-fill-disabled-fill: var(--fill-primary-disabled);
  --select-chip-on-fill-hover-fill: var(--fill-primary-hover);
  --select-chip-on-fill-pressed-fill: var(--fill-primary-pressed);
  --select-chip-on-text-color-default-fill: var(--text-inverse);
  --select-chip-on-text-color-disabled-fill: var(--text-disabled);
  --select-chip-on-text-color-hover-fill: var(--text-inverse);
  --select-chip-on-text-color-pressed-fill: var(--text-inverse);
  --select-chip-text-size-default-typography-font-family: var(--font-family-default);
  --select-chip-text-size-default-typography-font-size: var(--font-size-14);
  --select-chip-text-size-default-typography-font-weight: var(--font-weight-semibold);
  --select-chip-text-size-default-typography-letter-spacing: var(--letter-spacing-default);
  --select-chip-text-size-default-typography-line-height: var(--line-height-default-148);

  /* toggle */
  --toggle-button-container-default-border-radius: var(--radius-circle);
  --toggle-button-container-default-sizing: 36px;
  --toggle-button-fill-default-fill: var(--fill-secondary-default);
  --toggle-button-icon-color-default-fill: var(--icon-primary);

}

:root, [data-theme], [data-mode] {
  /* divider */
  --divider-container-full-width-height: 48px;
  --divider-container-full-width-horizontal-padding: 0;
  --divider-container-full-width-vertical-padding: var(--space-20);
  --divider-container-full-width-width: 360px;
  --divider-container-inset-height: 40px;
  --divider-container-inset-horizontal-padding: var(--space-20);
  --divider-container-inset-vertical-padding: var(--space-20);
  --divider-container-inset-width: 360px;
  --divider-height-full-width-fill: var(--border-tertiary);
  --divider-height-full-width-height: 8px;
  --divider-height-inset-fill: var(--border-secondary);
  --divider-height-inset-height: 1px;

}

:root, [data-theme], [data-mode] {
  /* dropdown */
  --dropdown-container-default-border-radius: var(--radius-8);
  --dropdown-container-default-item-spacing: var(--space-8);
  --dropdown-container-default-min-width: 320px;
  --dropdown-container-default-padding-left: var(--space-16);
  --dropdown-container-default-padding-right: var(--space-12);
  --dropdown-container-default-vertical-padding: var(--space-16);
  --dropdown-container-expanded-border-radius: var(--radius-8);
  --dropdown-container-expanded-item-spacing: var(--space-2);
  --dropdown-container-expanded-min-width: 320px;
  --dropdown-container-expanded-padding-left: var(--space-16);
  --dropdown-container-expanded-padding-right: var(--space-12);
  --dropdown-container-expanded-vertical-padding: var(--space-12);
  --dropdown-container-input-area-item-spacing: var(--space-2);
  --dropdown-fill-complete-border-color: var(--border-primary);
  --dropdown-fill-complete-border-style: solid;
  --dropdown-fill-complete-border-width: var(--border-width-1);
  --dropdown-fill-complete-error-border-color: var(--border-feedback-critical);
  --dropdown-fill-complete-error-border-style: solid;
  --dropdown-fill-complete-error-border-width: var(--border-width-1);
  --dropdown-fill-complete-error-fill: var(--fill-tertiary-default);
  --dropdown-fill-complete-fill: var(--fill-tertiary-default);
  --dropdown-fill-complete-focused-border-color: var(--border-inverse);
  --dropdown-fill-complete-focused-border-style: solid;
  --dropdown-fill-complete-focused-border-width: var(--border-width-2);
  --dropdown-fill-complete-focused-box-shadow: var(--shadow-2);
  --dropdown-fill-complete-focused-fill: var(--fill-tertiary-default);
  --dropdown-fill-default-border-color: var(--border-primary);
  --dropdown-fill-default-border-style: solid;
  --dropdown-fill-default-border-width: var(--border-width-1);
  --dropdown-fill-default-fill: var(--fill-tertiary-default);
  --dropdown-fill-disabled-border-color: var(--border-disabled);
  --dropdown-fill-disabled-border-style: solid;
  --dropdown-fill-disabled-border-width: var(--border-width-1);
  --dropdown-fill-disabled-fill: var(--fill-tertiary-disabled);
  --dropdown-fill-error-border-color: var(--border-feedback-critical);
  --dropdown-fill-error-border-style: solid;
  --dropdown-fill-error-border-width: var(--border-width-1);
  --dropdown-fill-error-fill: var(--fill-tertiary-default);
  --dropdown-fill-focused-border-color: var(--border-inverse);
  --dropdown-fill-focused-border-style: solid;
  --dropdown-fill-focused-border-width: var(--border-width-2);
  --dropdown-fill-focused-box-shadow: var(--shadow-2);
  --dropdown-fill-focused-fill: var(--fill-tertiary-default);
  --dropdown-fill-hover-border-color: var(--border-primary);
  --dropdown-fill-hover-border-style: solid;
  --dropdown-fill-hover-border-width: var(--border-width-1);
  --dropdown-fill-hover-fill: var(--fill-tertiary-hover);
  --dropdown-icon-container-default-sizing: 40px;
  --dropdown-icon-icon-color-default-fill: var(--icon-primary);
  --dropdown-icon-icon-color-disabled-fill: var(--icon-disabled);
  --dropdown-icon-icon-size-default-sizing: var(--size-20);
  --dropdown-text-body-complete-error-fill: var(--text-primary);
  --dropdown-text-body-complete-error-typography-font-family: var(--font-family-default);
  --dropdown-text-body-complete-error-typography-font-size: var(--font-size-15);
  --dropdown-text-body-complete-error-typography-font-weight: var(--font-weight-medium);
  --dropdown-text-body-complete-error-typography-letter-spacing: var(--letter-spacing-default);
  --dropdown-text-body-complete-error-typography-line-height: var(--line-height-default-148);
  --dropdown-text-body-complete-fill: var(--text-primary);
  --dropdown-text-body-complete-focused-fill: var(--text-primary);
  --dropdown-text-body-complete-focused-typography-font-family: var(--font-family-default);
  --dropdown-text-body-complete-focused-typography-font-size: var(--font-size-15);
  --dropdown-text-body-complete-focused-typography-font-weight: var(--font-weight-medium);
  --dropdown-text-body-complete-focused-typography-letter-spacing: var(--letter-spacing-default);
  --dropdown-text-body-complete-focused-typography-line-height: var(--line-height-default-148);
  --dropdown-text-body-complete-typography-font-family: var(--font-family-default);
  --dropdown-text-body-complete-typography-font-size: var(--font-size-15);
  --dropdown-text-body-complete-typography-font-weight: var(--font-weight-medium);
  --dropdown-text-body-complete-typography-letter-spacing: var(--letter-spacing-default);
  --dropdown-text-body-complete-typography-line-height: var(--line-height-default-148);
  --dropdown-text-label-complete-error-fill: var(--text-tertiary);
  --dropdown-text-label-complete-error-typography-font-family: var(--font-family-default);
  --dropdown-text-label-complete-error-typography-font-size: var(--font-size-13);
  --dropdown-text-label-complete-error-typography-font-weight: var(--font-weight-medium);
  --dropdown-text-label-complete-error-typography-letter-spacing: var(--letter-spacing-default);
  --dropdown-text-label-complete-error-typography-line-height: var(--line-height-default-148);
  --dropdown-text-label-complete-fill: var(--text-tertiary);
  --dropdown-text-label-complete-focused-fill: var(--text-tertiary);
  --dropdown-text-label-complete-focused-typography-font-family: var(--font-family-default);
  --dropdown-text-label-complete-focused-typography-font-size: var(--font-size-13);
  --dropdown-text-label-complete-focused-typography-font-weight: var(--font-weight-medium);
  --dropdown-text-label-complete-focused-typography-letter-spacing: var(--letter-spacing-default);
  --dropdown-text-label-complete-focused-typography-line-height: var(--line-height-default-148);
  --dropdown-text-label-complete-typography-font-family: var(--font-family-default);
  --dropdown-text-label-complete-typography-font-size: var(--font-size-13);
  --dropdown-text-label-complete-typography-font-weight: var(--font-weight-medium);
  --dropdown-text-label-complete-typography-letter-spacing: var(--letter-spacing-default);
  --dropdown-text-label-complete-typography-line-height: var(--line-height-default-148);
  --dropdown-text-label-default-fill: var(--text-tertiary);
  --dropdown-text-label-default-typography-font-family: var(--font-family-default);
  --dropdown-text-label-default-typography-font-size: var(--font-size-15);
  --dropdown-text-label-default-typography-font-weight: var(--font-weight-medium);
  --dropdown-text-label-default-typography-letter-spacing: var(--letter-spacing-default);
  --dropdown-text-label-default-typography-line-height: var(--line-height-default-148);
  --dropdown-text-label-disabled-fill: var(--text-disabled);
  --dropdown-text-label-disabled-typography-font-family: var(--font-family-default);
  --dropdown-text-label-disabled-typography-font-size: var(--font-size-15);
  --dropdown-text-label-disabled-typography-font-weight: var(--font-weight-medium);
  --dropdown-text-label-disabled-typography-letter-spacing: var(--letter-spacing-default);
  --dropdown-text-label-disabled-typography-line-height: var(--line-height-default-148);
  --dropdown-text-label-error-fill: var(--text-tertiary);
  --dropdown-text-label-error-typography-font-family: var(--font-family-default);
  --dropdown-text-label-error-typography-font-size: var(--font-size-15);
  --dropdown-text-label-error-typography-font-weight: var(--font-weight-medium);
  --dropdown-text-label-error-typography-letter-spacing: var(--letter-spacing-default);
  --dropdown-text-label-error-typography-line-height: var(--line-height-default-148);
  --dropdown-text-label-focused-fill: var(--text-tertiary);
  --dropdown-text-label-focused-typography-font-family: var(--font-family-default);
  --dropdown-text-label-focused-typography-font-size: var(--font-size-15);
  --dropdown-text-label-focused-typography-font-weight: var(--font-weight-medium);
  --dropdown-text-label-focused-typography-letter-spacing: var(--letter-spacing-default);
  --dropdown-text-label-focused-typography-line-height: var(--line-height-default-148);
  --dropdown-text-label-hover-fill: var(--text-tertiary);
  --dropdown-text-label-hover-typography-font-family: var(--font-family-default);
  --dropdown-text-label-hover-typography-font-size: var(--font-size-15);
  --dropdown-text-label-hover-typography-font-weight: var(--font-weight-medium);
  --dropdown-text-label-hover-typography-letter-spacing: var(--letter-spacing-default);
  --dropdown-text-label-hover-typography-line-height: var(--line-height-default-148);

}

:root, [data-theme], [data-mode] {
  /* fab */
  --fab-menu-container-default-item-spacing: var(--space-20);
  --fab-menu-item-container-default-height: 48px;
  --fab-menu-item-container-default-item-spacing: var(--space-12);
  --fab-menu-item-text-color-default-fill: var(--static-white);
  --fab-menu-item-text-default-typography-font-family: var(--font-family-default);
  --fab-menu-item-text-default-typography-font-size: var(--font-size-15);
  --fab-menu-item-text-default-typography-font-weight: var(--font-weight-semibold);
  --fab-menu-item-text-default-typography-letter-spacing: var(--letter-spacing-default);
  --fab-menu-item-text-default-typography-line-height: var(--line-height-default-148);

  /* floating */
  --floating-action-button-extended-fab-container-default-border-radius: var(--radius-circle);
  --floating-action-button-extended-fab-container-default-box-shadow: var(--shadow-2);
  --floating-action-button-extended-fab-container-default-height: var(--size-48);
  --floating-action-button-extended-fab-container-default-item-spacing: var(--space-4);
  --floating-action-button-extended-fab-container-default-padding-left: var(--space-12);
  --floating-action-button-extended-fab-container-default-padding-right: var(--space-16);
  --floating-action-button-extended-fab-fill-default-fill: var(--fill-primary-default);
  --floating-action-button-extended-fab-fill-hover-fill: var(--fill-primary-hover);
  --floating-action-button-extended-fab-fill-pressed-fill: var(--fill-primary-pressed);
  --floating-action-button-extended-fab-icon-color-default-fill: var(--text-inverse);
  --floating-action-button-extended-fab-icon-size-default-sizing: var(--size-24);
  --floating-action-button-extended-fab-text-color-default-fill: var(--text-inverse);
  --floating-action-button-extended-fab-text-default-typography-font-family: var(--font-family-default);
  --floating-action-button-extended-fab-text-default-typography-font-size: var(--font-size-15);
  --floating-action-button-extended-fab-text-default-typography-font-weight: var(--font-weight-semibold);
  --floating-action-button-extended-fab-text-default-typography-letter-spacing: var(--letter-spacing-default);
  --floating-action-button-extended-fab-text-default-typography-line-height: var(--line-height-default-148);
  --floating-action-button-fab-container-default-border-radius: var(--radius-circle);
  --floating-action-button-fab-container-default-box-shadow: var(--shadow-2);
  --floating-action-button-fab-container-default-horizontal-padding: var(--space-12);
  --floating-action-button-fab-container-default-item-spacing: var(--space-4);
  --floating-action-button-fab-container-default-sizing: var(--size-48);
  --floating-action-button-fab-container-default-vertical-padding: var(--space-12);
  --floating-action-button-fab-fill-default-fill: var(--fill-primary-default);
  --floating-action-button-fab-fill-hover-fill: var(--fill-primary-hover);
  --floating-action-button-fab-fill-pressed-fill: var(--fill-primary-pressed);
  --floating-action-button-fab-icon-color-default-fill: var(--text-inverse);
  --floating-action-button-fab-icon-size-default-sizing: var(--size-24);
  --floating-action-button-inverse-container-default-border-radius: var(--radius-circle);
  --floating-action-button-inverse-container-default-box-shadow: var(--shadow-2);
  --floating-action-button-inverse-container-default-horizontal-padding: var(--space-12);
  --floating-action-button-inverse-container-default-item-spacing: var(--space-4);
  --floating-action-button-inverse-container-default-sizing: var(--size-48);
  --floating-action-button-inverse-container-default-vertical-padding: var(--space-12);
  --floating-action-button-inverse-fill-default-fill: var(--static-white);
  --floating-action-button-inverse-fill-hover-fill: var(--gray-100);
  --floating-action-button-inverse-fill-pressed-fill: var(--gray-200);
  --floating-action-button-inverse-icon-color-default-fill: var(--gray-900);
  --floating-action-button-inverse-icon-size-default-sizing: var(--size-24);

}

:root, [data-theme], [data-mode] {
  /* controller */
  --controller-playback-icon-color-default-fill: var(--static-white);
  --controller-playback-icon-size-default-sizing: var(--size-12);

  /* dot */
  --dot-indicator-container-default-item-spacing: 6px;
  --dot-item-dot-size-default-sizing: 6px;
  --dot-item-fill-default-active-fill: var(--opacity-dot-primary);
  --dot-item-fill-default-inactive-fill: var(--opacity-dot-secondary);
  --dot-item-fill-inverse-active-fill: var(--opacity-white-95);
  --dot-item-fill-inverse-inactive-fill: var(--opacity-white-45);

  /* number */
  --number-indicator-container-basic-border-radius: var(--radius-circle);
  --number-indicator-container-basic-height: 24px;
  --number-indicator-container-basic-horizontal-padding: var(--space-8);
  --number-indicator-container-basic-item-spacing: var(--space-2);
  --number-indicator-container-playback-border-radius: var(--radius-circle);
  --number-indicator-container-playback-height: 24px;
  --number-indicator-container-playback-item-spacing: var(--space-4);
  --number-indicator-container-playback-padding-left: var(--space-8);
  --number-indicator-container-playback-padding-right: 6px;
  --number-indicator-container-selector-border-radius: var(--radius-circle);
  --number-indicator-container-selector-height: 24px;
  --number-indicator-container-selector-item-spacing: var(--space-4);
  --number-indicator-container-selector-padding-left: var(--space-8);
  --number-indicator-container-selector-padding-right: 6px;
  --number-indicator-fill-default-fill: var(--opacity-black-50);
  --number-indicator-icon-color-default-fill: var(--static-white);
  --number-indicator-icon-size-default-sizing: var(--size-12);
  --number-indicator-text-color-current-fill: var(--static-white);
  --number-indicator-text-color-total-fill: var(--opacity-white-60);
  --number-indicator-text-size-default-typography-font-family: var(--font-family-default);
  --number-indicator-text-size-default-typography-font-size: var(--font-size-12);
  --number-indicator-text-size-default-typography-font-weight: var(--font-weight-medium);
  --number-indicator-text-size-default-typography-letter-spacing: var(--letter-spacing-default);
  --number-indicator-text-size-default-typography-line-height: var(--line-height-default-148);

  /* progress */
  --progress-indicator-border-color-container-default-border-radius: var(--radius-circle);
  --progress-indicator-border-color-container-default-height: 4px;
  --progress-indicator-border-color-empty-fill: var(--border-secondary);
  --progress-indicator-border-color-fill-fill: var(--border-accent-primary);
  --progress-indicator-container-default-border-radius: var(--radius-circle);
  --progress-indicator-container-default-item-spacing: var(--space-4);

}

:root, [data-theme], [data-mode] {
  /* list */
  --list-image-container-default-horizontal-padding: var(--space-20);
  --list-image-container-default-item-spacing: var(--space-12);
  --list-image-container-default-width: 360px;
  --list-item-image-image-container-default-fill: var(--surface-primary);
  --list-item-image-image-container-default-item-spacing: var(--space-16);
  --list-item-image-image-container-default-width: 320px;
  --list-item-image-image-container-multi-column-item-spacing: var(--space-8);
  --list-item-image-image-container-multi-column-width: 128px;
  --list-item-image-image-image-container-default-border-color: var(--border-secondary);
  --list-item-image-image-image-container-default-border-radius: var(--radius-circle);
  --list-item-image-image-image-container-default-border-style: solid;
  --list-item-image-image-image-container-default-border-width: var(--border-width-1);
  --list-item-image-image-image-container-default-fill: var(--surface-secondary);
  --list-item-image-image-image-container-default-sizing: 64px;
  --list-item-image-image-image-container-multi-column-border-color: var(--border-secondary);
  --list-item-image-image-image-container-multi-column-border-radius: var(--radius-8);
  --list-item-image-image-image-container-multi-column-border-style: solid;
  --list-item-image-image-image-container-multi-column-border-width: var(--border-width-1);
  --list-item-image-image-image-container-multi-column-fill: var(--surface-secondary);
  --list-item-image-image-image-container-multi-column-sizing: 128px;
  --list-item-image-image-text-area-default-item-spacing: var(--space-4);
  --list-item-image-image-text-area-default-min-width: 240px;
  --list-item-image-image-text-area-multi-column-item-spacing: var(--space-4);
  --list-item-image-image-text-area-multi-column-min-width: 128px;
  --list-item-image-image-text-body-fill: var(--text-primary);
  --list-item-image-image-text-body-typography-font-family: var(--font-family-default);
  --list-item-image-image-text-body-typography-font-size: var(--font-size-15);
  --list-item-image-image-text-body-typography-font-weight: var(--font-weight-bold);
  --list-item-image-image-text-body-typography-letter-spacing: var(--letter-spacing-default);
  --list-item-image-image-text-body-typography-line-height: var(--line-height-default-148);
  --list-item-image-image-text-label-fill: var(--text-tertiary);
  --list-item-image-image-text-label-typography-font-family: var(--font-family-default);
  --list-item-image-image-text-label-typography-font-size: var(--font-size-13);
  --list-item-image-image-text-label-typography-font-weight: var(--font-weight-medium);
  --list-item-image-image-text-label-typography-letter-spacing: var(--letter-spacing-default);
  --list-item-image-image-text-label-typography-line-height: var(--line-height-default-148);
  --list-item-image-product-container-default-item-spacing: var(--space-16);
  --list-item-image-product-container-default-width: 320px;
  --list-item-image-product-container-multi-column-item-spacing: var(--space-8);
  --list-item-image-product-container-multi-column-width: 154px;
  --list-item-image-product-heart-button-container-default-sizing: 44px;
  --list-item-image-product-heart-button-icon-color-active-box-shadow: none;
  --list-item-image-product-heart-button-icon-color-active-fill: var(--text-accent-primary);
  --list-item-image-product-heart-button-icon-color-default-box-shadow: var(--shadow-2);
  --list-item-image-product-heart-button-icon-color-default-fill: var(--icon-inverse);
  --list-item-image-product-heart-button-icon-size-default-sizing: var(--size-24);
  --list-item-image-product-image-container-default-border-color: var(--border-secondary);
  --list-item-image-product-image-container-default-border-radius: var(--radius-8);
  --list-item-image-product-image-container-default-border-style: solid;
  --list-item-image-product-image-container-default-border-width: var(--border-width-1);
  --list-item-image-product-image-container-default-fill: var(--surface-secondary);
  --list-item-image-product-image-container-default-sizing: 104px;
  --list-item-image-product-image-container-multi-column-border-color: var(--border-secondary);
  --list-item-image-product-image-container-multi-column-border-radius: var(--radius-8);
  --list-item-image-product-image-container-multi-column-border-style: solid;
  --list-item-image-product-image-container-multi-column-border-width: var(--border-width-1);
  --list-item-image-product-image-container-multi-column-fill: var(--surface-secondary);
  --list-item-image-product-image-container-multi-column-sizing: 154px;
  --list-item-image-product-tag-area-default-item-spacing: var(--space-4);
  --list-item-image-product-tag-area-default-min-width: 200px;
  --list-item-image-product-tag-area-multi-column-item-spacing: var(--space-4);
  --list-item-image-product-tag-area-multi-column-width: 154px;
  --list-item-image-product-text-area-default-item-spacing: var(--space-8);
  --list-item-image-product-text-area-default-min-width: 200px;
  --list-item-image-product-text-area-multi-column-item-spacing: 6px;
  --list-item-image-product-text-area-multi-column-width: 154px;
  --list-item-image-product-text-body-fill: var(--text-primary);
  --list-item-image-product-text-body-typography-font-family: var(--font-family-default);
  --list-item-image-product-text-body-typography-font-size: var(--font-size-14);
  --list-item-image-product-text-body-typography-font-weight: var(--font-weight-medium);
  --list-item-image-product-text-body-typography-letter-spacing: var(--letter-spacing-default);
  --list-item-image-product-text-body-typography-line-height: var(--line-height-reading-158);
  --list-item-image-product-text-discount-rate-fill: var(--text-accent-primary);
  --list-item-image-product-text-discount-rate-typography-font-family: var(--font-family-default);
  --list-item-image-product-text-discount-rate-typography-font-size: var(--font-size-13);
  --list-item-image-product-text-discount-rate-typography-font-weight: var(--font-weight-bold);
  --list-item-image-product-text-discount-rate-typography-letter-spacing: var(--letter-spacing-default);
  --list-item-image-product-text-discount-rate-typography-line-height: var(--line-height-default-148);
  --list-item-image-product-text-label-fill: var(--text-tertiary);
  --list-item-image-product-text-label-typography-font-family: var(--font-family-default);
  --list-item-image-product-text-label-typography-font-size: var(--font-size-12);
  --list-item-image-product-text-label-typography-font-weight: var(--font-weight-medium);
  --list-item-image-product-text-label-typography-letter-spacing: var(--letter-spacing-default);
  --list-item-image-product-text-label-typography-line-height: var(--line-height-default-148);
  --list-item-image-product-text-price-fill: var(--text-primary);
  --list-item-image-product-text-price-typography-font-family: var(--font-family-default);
  --list-item-image-product-text-price-typography-font-size: var(--font-size-15);
  --list-item-image-product-text-price-typography-font-weight: var(--font-weight-bold);
  --list-item-image-product-text-price-typography-letter-spacing: var(--letter-spacing-default);
  --list-item-image-product-text-price-typography-line-height: var(--line-height-default-148);
  --list-logo-container-default-item-spacing: var(--space-16);
  --list-logo-container-default-width: 320px;
  --list-product-1column-container-default-item-spacing: var(--space-16);
  --list-product-1column-container-default-width: 320px;
  --list-product-2column-container-default-item-spacing: var(--space-16);
  --list-product-2column-container-default-width: 320px;
  --list-text-container-default-fill: var(--surface-primary);
  --list-text-container-default-horizontal-padding: var(--space-20);
  --list-text-container-default-item-spacing: var(--space-8);
  --list-text-container-default-min-height: 48px;
  --list-text-container-default-min-width: 360px;
  --list-text-container-default-vertical-padding: var(--space-12);
  --list-text-container-headline-item-spacing: var(--space-4);
  --list-text-container-trailing-element-item-spacing: var(--space-2);
  --list-text-icon-color-default-fill: var(--icon-tertiary);
  --list-text-icon-size-default-sizing: var(--size-20);
  --list-text-text-body-fill: var(--text-tertiary);
  --list-text-text-body-typography-font-family: var(--font-family-default);
  --list-text-text-body-typography-font-size: var(--font-size-13);
  --list-text-text-body-typography-font-weight: var(--font-weight-medium);
  --list-text-text-body-typography-letter-spacing: var(--letter-spacing-default);
  --list-text-text-body-typography-line-height: var(--line-height-default-148);
  --list-text-text-headline-fill: var(--text-primary);
  --list-text-text-headline-typography-font-family: var(--font-family-default);
  --list-text-text-headline-typography-font-size: var(--font-size-15);
  --list-text-text-headline-typography-font-weight: var(--font-weight-medium);
  --list-text-text-headline-typography-letter-spacing: var(--letter-spacing-default);
  --list-text-text-headline-typography-line-height: var(--line-height-default-148);
  --list-text-text-trailing-fill: var(--text-primary);
  --list-text-text-trailing-typography-font-family: var(--font-family-default);
  --list-text-text-trailing-typography-font-size: var(--font-size-15);
  --list-text-text-trailing-typography-font-weight: var(--font-weight-bold);
  --list-text-text-trailing-typography-letter-spacing: var(--letter-spacing-default);
  --list-text-text-trailing-typography-line-height: var(--line-height-default-148);

}

:root, [data-theme], [data-mode] {
  /* loading */
  --loading-container-large-sizing: 56px;
  --loading-container-medium-sizing: 40px;
  --loading-container-small-sizing: 28px;
  --loading-fill-default-fill: var(--icon-secondary);

  /* skeleton */
  --skeleton-container-circle-border-radius: var(--radius-circle);
  --skeleton-container-circle-height: 200px;
  --skeleton-container-circle-width: 200px;
  --skeleton-container-rectangle-height: 200px;
  --skeleton-container-rectangle-width: 200px;
  --skeleton-container-text-border-radius: var(--radius-4);
  --skeleton-container-text-height: 24px;
  --skeleton-container-text-width: 200px;
  --skeleton-fill-default-fill: var(--surface-secondary);
  --skeleton-gradient-fill-defaut-fill: var(--gradient-skeleton);
  --skeleton-gradient-fill-defaut-sizing: 500px;

}

:root, [data-theme], [data-mode] {
  /* notification */
  --notification-icon-feedback-critical-fill: var(--icon-feedback-on-dark-critical);
  --notification-icon-feedback-info-fill: var(--icon-feedback-on-dark-info);
  --notification-icon-feedback-success-fill: var(--icon-inverse);
  --notification-icon-icon-size-default-sizing: var(--size-20);
  --notification-snackbar-basic-button-area-action-height: 48px;
  --notification-snackbar-basic-button-area-action-horizontal-padding: var(--space-8);
  --notification-snackbar-basic-button-area-close-sizing: 48px;
  --notification-snackbar-basic-text-area-default-padding-left: var(--space-20);
  --notification-snackbar-basic-text-area-default-vertical-padding: var(--space-12);
  --notification-snackbar-container-default-border-radius: var(--radius-circle);
  --notification-snackbar-container-default-box-shadow: var(--shadow-3);
  --notification-snackbar-container-default-height: 48px;
  --notification-snackbar-container-default-item-spacing: var(--space-4);
  --notification-snackbar-container-default-padding-right: var(--space-4);
  --notification-snackbar-fill-default-fill: var(--surface-inverse);
  --notification-snackbar-icon-button-area-action-height: 48px;
  --notification-snackbar-icon-button-area-action-horizontal-padding: var(--space-8);
  --notification-snackbar-icon-button-area-close-sizing: 48px;
  --notification-snackbar-icon-text-area-default-horizontal-padding: var(--space-20);
  --notification-snackbar-icon-text-area-default-item-spacing: var(--space-4);
  --notification-snackbar-icon-text-area-default-vertical-padding: var(--space-12);
  --notification-snackbar-text-default-fill: var(--text-inverse);
  --notification-snackbar-text-default-typography-font-family: var(--font-family-default);
  --notification-snackbar-text-default-typography-font-size: var(--font-size-13);
  --notification-snackbar-text-default-typography-font-weight: var(--font-weight-medium);
  --notification-snackbar-text-default-typography-letter-spacing: var(--letter-spacing-default);
  --notification-snackbar-text-default-typography-line-height: var(--line-height-default-148);
  --notification-toast-basic-button-area-close-sizing: 48px;
  --notification-toast-basic-container-action-border-radius: var(--radius-circle);
  --notification-toast-basic-container-action-box-shadow: var(--shadow-3);
  --notification-toast-basic-container-action-height: 48px;
  --notification-toast-basic-container-action-horizontal-padding: var(--space-20);
  --notification-toast-basic-container-action-vertical-padding: var(--space-12);
  --notification-toast-basic-container-close-border-radius: var(--radius-circle);
  --notification-toast-basic-container-close-box-shadow: var(--shadow-3);
  --notification-toast-basic-container-close-height: 48px;
  --notification-toast-basic-container-close-horizontal-padding: var(--space-20);
  --notification-toast-basic-container-close-item-spacing: var(--space-4);
  --notification-toast-basic-container-close-vertical-padding: var(--space-12);
  --notification-toast-basic-text-area-close-padding-left: var(--space-20);
  --notification-toast-basic-text-area-close-vertical-padding: var(--space-12);
  --notification-toast-fill-default-fill: var(--surface-inverse);
  --notification-toast-icon-button-area-close-sizing: 48px;
  --notification-toast-icon-container-action-border-radius: var(--radius-circle);
  --notification-toast-icon-container-action-box-shadow: var(--shadow-3);
  --notification-toast-icon-container-action-height: 48px;
  --notification-toast-icon-container-action-item-spacing: var(--space-4);
  --notification-toast-icon-container-action-padding-right: var(--space-4);
  --notification-toast-icon-container-close-border-radius: var(--radius-circle);
  --notification-toast-icon-container-close-box-shadow: var(--shadow-3);
  --notification-toast-icon-container-close-height: 48px;
  --notification-toast-icon-container-close-item-spacing: var(--space-4);
  --notification-toast-icon-container-close-padding-right: var(--space-4);
  --notification-toast-icon-text-area-close-item-spacing: var(--space-4);
  --notification-toast-icon-text-area-close-padding-left: var(--space-16);
  --notification-toast-icon-text-area-close-vertical-padding: var(--space-12);
  --notification-toast-text-default-fill: var(--text-inverse);
  --notification-toast-text-default-typography-font-family: var(--font-family-default);
  --notification-toast-text-default-typography-font-size: var(--font-size-13);
  --notification-toast-text-default-typography-font-weight: var(--font-weight-medium);
  --notification-toast-text-default-typography-letter-spacing: var(--letter-spacing-default);
  --notification-toast-text-default-typography-line-height: var(--line-height-default-148);

}

:root, [data-theme], [data-mode] {
  /* center */
  --center-popup-button-spacing-spacing: var(--space-8);
  --center-popup-container-default-border-radius: var(--radius-12);
  --center-popup-container-default-box-shadow: var(--shadow-3);
  --center-popup-container-default-fill: var(--surface-primary);
  --center-popup-container-default-horizontal-padding: var(--space-24);
  --center-popup-container-default-item-spacing: var(--space-24);
  --center-popup-container-default-padding-bottom: var(--space-24);
  --center-popup-container-default-padding-top: 28px;
  --center-popup-text-body-fill: var(--text-secondary);
  --center-popup-text-body-padding-top: var(--space-8);
  --center-popup-text-body-typography-font-family: var(--font-family-default);
  --center-popup-text-body-typography-font-size: var(--font-size-15);
  --center-popup-text-body-typography-font-weight: var(--font-weight-medium);
  --center-popup-text-body-typography-letter-spacing: var(--letter-spacing-default);
  --center-popup-text-body-typography-line-height: var(--line-height-default-148);
  --center-popup-text-max-line-body-number: 2;
  --center-popup-text-max-line-title-number: 1;
  --center-popup-text-title-fill: var(--text-primary);
  --center-popup-text-title-typography-font-family: var(--font-family-default);
  --center-popup-text-title-typography-font-size: var(--font-size-18);
  --center-popup-text-title-typography-font-weight: var(--font-weight-bold);
  --center-popup-text-title-typography-letter-spacing: var(--letter-spacing-default);
  --center-popup-text-title-typography-line-height: var(--line-height-default-148);

  /* full */
  --full-popup-container-button-area-horizontal-padding: var(--space-20);
  --full-popup-container-button-area-item-spacing: var(--space-8);
  --full-popup-container-button-area-vertical-padding: var(--space-8);
  --full-popup-container-contents-fill: var(--surface-primary);
  --full-popup-container-contents-horizontal-padding: var(--space-20);
  --full-popup-container-contents-vertical-padding: var(--space-20);
  --full-popup-text-max-line-title-number: 2;
  --full-popup-text-title-fill: var(--text-primary);
  --full-popup-text-title-horizontal-padding: var(--space-20);
  --full-popup-text-title-padding-bottom: 0;
  --full-popup-text-title-padding-top: var(--space-16);
  --full-popup-text-title-typography-font-family: var(--font-family-default);
  --full-popup-text-title-typography-font-size: var(--font-size-20);
  --full-popup-text-title-typography-font-weight: var(--font-weight-bold);
  --full-popup-text-title-typography-letter-spacing: var(--letter-spacing-default);
  --full-popup-text-title-typography-line-height: var(--line-height-default-148);
  --full-popup-text-title-width: 100%;

}

:root, [data-theme], [data-mode] {
  /* radiobutton */
  --radiobutton-icon-container-size-sizing: var(--size-24);
  --radiobutton-icon-fill-active-default-fill: var(--fill-primary-default);
  --radiobutton-icon-fill-active-default-sizing: var(--size-20);
  --radiobutton-icon-fill-active-disabled-fill: var(--fill-primary-disabled);
  --radiobutton-icon-fill-active-disabled-sizing: var(--size-20);
  --radiobutton-icon-fill-active-hover-fill: var(--fill-primary-hover);
  --radiobutton-icon-fill-active-hover-sizing: var(--size-20);
  --radiobutton-icon-fill-default-default-border-color: var(--border-primary);
  --radiobutton-icon-fill-default-default-border-style: solid;
  --radiobutton-icon-fill-default-default-border-width: var(--border-width-1);
  --radiobutton-icon-fill-default-default-fill: var(--fill-tertiary-default);
  --radiobutton-icon-fill-default-default-sizing: var(--size-20);
  --radiobutton-icon-fill-default-disabled-border-color: var(--border-disabled);
  --radiobutton-icon-fill-default-disabled-border-style: solid;
  --radiobutton-icon-fill-default-disabled-border-width: var(--border-width-1);
  --radiobutton-icon-fill-default-disabled-fill: var(--fill-tertiary-disabled);
  --radiobutton-icon-fill-default-disabled-sizing: var(--size-20);
  --radiobutton-icon-fill-default-hover-border-color: var(--border-primary);
  --radiobutton-icon-fill-default-hover-border-style: solid;
  --radiobutton-icon-fill-default-hover-border-width: var(--border-width-1);
  --radiobutton-icon-fill-default-hover-fill: var(--fill-tertiary-hover);
  --radiobutton-icon-fill-default-hover-sizing: var(--size-20);
  --radiobutton-icon-icon-color-default-fill: var(--icon-inverse);
  --radiobutton-icon-icon-color-disabled-fill: var(--icon-disabled);
  --radiobutton-icon-icon-color-hover-fill: var(--icon-inverse);
  --radiobutton-icon-icon-size-default-sizing: 8px;
  --radiobutton-list-container-default-height: 44px;
  --radiobutton-list-container-default-horizontal-padding: var(--space-20);
  --radiobutton-list-container-default-item-spacing: var(--space-4);
  --radiobutton-list-container-default-min-width: 360px;
  --radiobutton-list-text-default-fill: var(--text-primary);
  --radiobutton-list-text-default-typography-font-family: var(--font-family-default);
  --radiobutton-list-text-default-typography-font-size: var(--font-size-15);
  --radiobutton-list-text-default-typography-font-weight: var(--font-weight-medium);
  --radiobutton-list-text-default-typography-letter-spacing: var(--letter-spacing-default);
  --radiobutton-list-text-default-typography-line-height: var(--line-height-default-148);
  --radiobutton-list-text-disabled-fill: var(--text-disabled);
  --radiobutton-list-text-disabled-typography-font-family: var(--font-family-default);
  --radiobutton-list-text-disabled-typography-font-size: var(--font-size-15);
  --radiobutton-list-text-disabled-typography-font-weight: var(--font-weight-medium);
  --radiobutton-list-text-disabled-typography-letter-spacing: var(--letter-spacing-default);
  --radiobutton-list-text-disabled-typography-line-height: var(--line-height-default-148);
  --radiobutton-list-text-selected-fill: var(--text-primary);
  --radiobutton-list-text-selected-typography-font-family: var(--font-family-default);
  --radiobutton-list-text-selected-typography-font-size: var(--font-size-15);
  --radiobutton-list-text-selected-typography-font-weight: var(--font-weight-bold);
  --radiobutton-list-text-selected-typography-letter-spacing: var(--letter-spacing-default);
  --radiobutton-list-text-selected-typography-line-height: var(--line-height-default-148);

}

:root, [data-theme], [data-mode] {
  /* search */
  --search-outline-container-default-border-radius: var(--radius-8);
  --search-outline-container-default-item-spacing: var(--space-8);
  --search-outline-container-default-padding-left: var(--space-16);
  --search-outline-container-default-padding-right: var(--space-4);
  --search-outline-container-default-vertical-padding: var(--space-4);
  --search-outline-fill-complete-border-color: var(--border-primary);
  --search-outline-fill-complete-border-style: solid;
  --search-outline-fill-complete-border-width: var(--border-width-1);
  --search-outline-fill-complete-fill: var(--fill-tertiary-default);
  --search-outline-fill-default-border-color: var(--border-primary);
  --search-outline-fill-default-border-style: solid;
  --search-outline-fill-default-border-width: var(--border-width-1);
  --search-outline-fill-default-fill: var(--fill-tertiary-default);
  --search-outline-fill-disabled-border-color: var(--border-primary);
  --search-outline-fill-disabled-border-style: solid;
  --search-outline-fill-disabled-border-width: var(--border-width-1);
  --search-outline-fill-disabled-fill: var(--fill-tertiary-disabled);
  --search-outline-fill-focused-border-color: var(--border-inverse);
  --search-outline-fill-focused-border-style: solid;
  --search-outline-fill-focused-border-width: var(--border-width-2);
  --search-outline-fill-focused-box-shadow: var(--shadow-2);
  --search-outline-fill-focused-fill: var(--fill-tertiary-default);
  --search-outline-fill-hover-border-color: var(--border-primary);
  --search-outline-fill-hover-border-style: solid;
  --search-outline-fill-hover-border-width: var(--border-width-1);
  --search-outline-fill-hover-fill: var(--fill-tertiary-hover);
  --search-outline-fill-typing-border-color: var(--border-inverse);
  --search-outline-fill-typing-border-style: solid;
  --search-outline-fill-typing-border-width: var(--border-width-2);
  --search-outline-fill-typing-box-shadow: var(--shadow-2);
  --search-outline-fill-typing-fill: var(--fill-tertiary-default);
  --search-outline-icon-container-default-sizing: 40px;
  --search-outline-icon-fill-primary-complete-fill: var(--icon-primary);
  --search-outline-icon-fill-primary-default-fill: var(--icon-primary);
  --search-outline-icon-fill-primary-disabled-fill: var(--icon-disabled);
  --search-outline-icon-fill-primary-focused-fill: var(--icon-primary);
  --search-outline-icon-fill-primary-hover-fill: var(--icon-primary);
  --search-outline-icon-fill-primary-typing-fill: var(--icon-primary);
  --search-outline-icon-fill-tertiary-typing-fill: var(--icon-tertiary);
  --search-outline-icon-icon-size-default-sizing: var(--size-24);
  --search-outline-text-complete-fill: var(--text-primary);
  --search-outline-text-complete-typography-font-family: var(--font-family-default);
  --search-outline-text-complete-typography-font-size: var(--font-size-15);
  --search-outline-text-complete-typography-font-weight: var(--font-weight-medium);
  --search-outline-text-complete-typography-letter-spacing: var(--letter-spacing-default);
  --search-outline-text-complete-typography-line-height: var(--line-height-default-148);
  --search-outline-text-default-fill: var(--text-tertiary);
  --search-outline-text-default-typography-font-family: var(--font-family-default);
  --search-outline-text-default-typography-font-size: var(--font-size-15);
  --search-outline-text-default-typography-font-weight: var(--font-weight-medium);
  --search-outline-text-default-typography-letter-spacing: var(--letter-spacing-default);
  --search-outline-text-default-typography-line-height: var(--line-height-default-148);
  --search-outline-text-disabled-fill: var(--text-disabled);
  --search-outline-text-disabled-typography-font-family: var(--font-family-default);
  --search-outline-text-disabled-typography-font-size: var(--font-size-15);
  --search-outline-text-disabled-typography-font-weight: var(--font-weight-medium);
  --search-outline-text-disabled-typography-letter-spacing: var(--letter-spacing-default);
  --search-outline-text-disabled-typography-line-height: var(--line-height-default-148);
  --search-outline-text-focused-fill: var(--text-tertiary);
  --search-outline-text-focused-typography-font-family: var(--font-family-default);
  --search-outline-text-focused-typography-font-size: var(--font-size-15);
  --search-outline-text-focused-typography-font-weight: var(--font-weight-medium);
  --search-outline-text-focused-typography-letter-spacing: var(--letter-spacing-default);
  --search-outline-text-focused-typography-line-height: var(--line-height-default-148);
  --search-outline-text-hover-fill: var(--text-tertiary);
  --search-outline-text-hover-typography-font-family: var(--font-family-default);
  --search-outline-text-hover-typography-font-size: var(--font-size-15);
  --search-outline-text-hover-typography-font-weight: var(--font-weight-medium);
  --search-outline-text-hover-typography-letter-spacing: var(--letter-spacing-default);
  --search-outline-text-hover-typography-line-height: var(--line-height-default-148);
  --search-outline-text-typing-fill: var(--text-primary);
  --search-outline-text-typing-typography-font-family: var(--font-family-default);
  --search-outline-text-typing-typography-font-size: var(--font-size-15);
  --search-outline-text-typing-typography-font-weight: var(--font-weight-medium);
  --search-outline-text-typing-typography-letter-spacing: var(--letter-spacing-default);
  --search-outline-text-typing-typography-line-height: var(--line-height-default-148);
  --search-underline-container-back-button-off-border-color: var(--border-primary);
  --search-underline-container-back-button-off-border-style: solid;
  --search-underline-container-back-button-off-border-width: var(--border-width-1);
  --search-underline-container-back-button-off-border-width-bottom: var(--border-width-1);
  --search-underline-container-back-button-off-item-spacing: var(--space-8);
  --search-underline-container-back-button-off-padding-left: var(--space-16);
  --search-underline-container-back-button-off-padding-right: var(--space-8);
  --search-underline-container-back-button-off-vertical-padding: var(--space-4);
  --search-underline-container-back-button-on-border-color: var(--border-primary);
  --search-underline-container-back-button-on-border-style: solid;
  --search-underline-container-back-button-on-border-width: var(--border-width-1);
  --search-underline-container-back-button-on-border-width-bottom: var(--border-width-1);
  --search-underline-container-back-button-on-item-spacing: var(--space-8);
  --search-underline-container-back-button-on-padding-left: var(--space-2);
  --search-underline-container-back-button-on-padding-right: var(--space-8);
  --search-underline-container-back-button-on-vertical-padding: var(--space-4);
  --search-underline-fill-complete-border-color: var(--border-primary);
  --search-underline-fill-complete-border-style: solid;
  --search-underline-fill-complete-border-width: var(--border-width-1);
  --search-underline-fill-complete-fill: var(--fill-tertiary-default);
  --search-underline-fill-default-border-color: var(--border-primary);
  --search-underline-fill-default-border-style: solid;
  --search-underline-fill-default-border-width: var(--border-width-1);
  --search-underline-fill-default-fill: var(--fill-tertiary-default);
  --search-underline-fill-disabled-border-color: var(--border-disabled);
  --search-underline-fill-disabled-border-style: solid;
  --search-underline-fill-disabled-border-width: var(--border-width-1);
  --search-underline-fill-disabled-fill: var(--fill-tertiary-disabled);
  --search-underline-fill-focused-border-color: var(--border-inverse);
  --search-underline-fill-focused-border-style: solid;
  --search-underline-fill-focused-border-width: var(--border-width-2);
  --search-underline-fill-focused-fill: var(--fill-tertiary-default);
  --search-underline-fill-hover-border-color: var(--border-primary);
  --search-underline-fill-hover-border-style: solid;
  --search-underline-fill-hover-border-width: var(--border-width-1);
  --search-underline-fill-typing-border-color: var(--border-inverse);
  --search-underline-fill-typing-border-style: solid;
  --search-underline-fill-typing-border-width: var(--border-width-2);
  --search-underline-fill-typing-fill: var(--fill-tertiary-default);
  --search-underline-icon-container-default-sizing: 44px;
  --search-underline-icon-fill-primary-complete-fill: var(--icon-primary);
  --search-underline-icon-fill-primary-default-fill: var(--icon-primary);
  --search-underline-icon-fill-primary-disabled-fill: var(--icon-disabled);
  --search-underline-icon-fill-primary-focused-fill: var(--icon-primary);
  --search-underline-icon-fill-primary-hover-fill: var(--icon-primary);
  --search-underline-icon-fill-primary-typing-fill: var(--icon-primary);
  --search-underline-icon-fill-tertiary-typing-fill: var(--icon-tertiary);
  --search-underline-icon-icon-size-default-sizing: var(--size-24);
  --search-underline-text-complete-fill: var(--text-primary);
  --search-underline-text-complete-typography-font-family: var(--font-family-default);
  --search-underline-text-complete-typography-font-size: var(--font-size-15);
  --search-underline-text-complete-typography-font-weight: var(--font-weight-medium);
  --search-underline-text-complete-typography-letter-spacing: var(--letter-spacing-default);
  --search-underline-text-complete-typography-line-height: var(--line-height-default-148);
  --search-underline-text-default-fill: var(--text-tertiary);
  --search-underline-text-default-typography-font-family: var(--font-family-default);
  --search-underline-text-default-typography-font-size: var(--font-size-15);
  --search-underline-text-default-typography-font-weight: var(--font-weight-medium);
  --search-underline-text-default-typography-letter-spacing: var(--letter-spacing-default);
  --search-underline-text-default-typography-line-height: var(--line-height-default-148);
  --search-underline-text-disabled-fill: var(--text-disabled);
  --search-underline-text-disabled-typography-font-family: var(--font-family-default);
  --search-underline-text-disabled-typography-font-size: var(--font-size-15);
  --search-underline-text-disabled-typography-font-weight: var(--font-weight-medium);
  --search-underline-text-disabled-typography-letter-spacing: var(--letter-spacing-default);
  --search-underline-text-disabled-typography-line-height: var(--line-height-default-148);
  --search-underline-text-focused-fill: var(--text-tertiary);
  --search-underline-text-focused-typography-font-family: var(--font-family-default);
  --search-underline-text-focused-typography-font-size: var(--font-size-15);
  --search-underline-text-focused-typography-font-weight: var(--font-weight-medium);
  --search-underline-text-focused-typography-letter-spacing: var(--letter-spacing-default);
  --search-underline-text-focused-typography-line-height: var(--line-height-default-148);
  --search-underline-text-hover-fill: var(--text-tertiary);
  --search-underline-text-hover-typography-font-family: var(--font-family-default);
  --search-underline-text-hover-typography-font-size: var(--font-size-15);
  --search-underline-text-hover-typography-font-weight: var(--font-weight-medium);
  --search-underline-text-hover-typography-letter-spacing: var(--letter-spacing-default);
  --search-underline-text-hover-typography-line-height: var(--line-height-default-148);
  --search-underline-text-typing-fill: var(--text-primary);
  --search-underline-text-typing-typography-font-family: var(--font-family-default);
  --search-underline-text-typing-typography-font-size: var(--font-size-15);
  --search-underline-text-typing-typography-font-weight: var(--font-weight-medium);
  --search-underline-text-typing-typography-letter-spacing: var(--letter-spacing-default);
  --search-underline-text-typing-typography-line-height: var(--line-height-default-148);

}

:root, [data-theme], [data-mode] {
  /* shadow */
  --shadow-handle-1-blur: 2;
  --shadow-handle-1-color: var(--opacity-black-10);
  --shadow-handle-1-offset-x: 0;
  --shadow-handle-1-offset-y: 0;
  --shadow-handle-1-spread: 0;
  --shadow-handle-1-type: dropShadow;
  --shadow-handle-2-blur: 4;
  --shadow-handle-2-color: var(--opacity-black-25);
  --shadow-handle-2-offset-x: 0;
  --shadow-handle-2-offset-y: 2;
  --shadow-handle-2-spread: 0;
  --shadow-handle-2-type: dropShadow;

  /* slider */
  --slider-container-default-item-spacing: var(--space-8);
  --slider-container-slider-item-spacing: var(--space-4);
  --slider-fill-active-default-border-radius: 999px;
  --slider-fill-active-default-fill: var(--fill-accent-secondary-default);
  --slider-fill-active-default-height: 8px;
  --slider-fill-active-disabled-border-radius: 999px;
  --slider-fill-active-disabled-fill: var(--border-disabled);
  --slider-fill-active-disabled-height: 8px;
  --slider-fill-active-hover-border-radius: 999px;
  --slider-fill-active-hover-fill: var(--fill-accent-secondary-default);
  --slider-fill-active-hover-height: 8px;
  --slider-fill-default-default-border-radius: 999px;
  --slider-fill-default-default-fill: var(--fill-secondary-default);
  --slider-fill-default-default-height: 8px;
  --slider-fill-default-disabled-fill: var(--fill-secondary-disabled);
  --slider-fill-default-disabled-height: 8px;
  --slider-fill-default-hover-border-radius: 999px;
  --slider-fill-default-hover-fill: var(--fill-secondary-default);
  --slider-fill-default-hover-height: 8px;
  --slider-handle-default-border-color: var(--border-secondary);
  --slider-handle-default-border-style: solid;
  --slider-handle-default-border-width: var(--border-width-1);
  --slider-handle-default-box-shadow: 0px 0px 2px 0px var(--opacity-black-10), 0px 2px 4px 0px var(--opacity-black-25);
  --slider-handle-default-fill: var(--surface-primary);
  --slider-handle-default-sizing: var(--size-24);
  --slider-handle-disabled-border-color: var(--border-secondary);
  --slider-handle-disabled-border-style: solid;
  --slider-handle-disabled-border-width: var(--border-width-1);
  --slider-handle-disabled-box-shadow: 0px 0px 2px 0px var(--opacity-black-10), 0px 2px 4px 0px var(--opacity-black-25);
  --slider-handle-disabled-fill: var(--fill-secondary-disabled);
  --slider-handle-disabled-sizing: var(--size-24);
  --slider-handle-hover-border-color: var(--border-secondary);
  --slider-handle-hover-border-style: solid;
  --slider-handle-hover-border-width: var(--border-width-1);
  --slider-handle-hover-box-shadow: 0px 0px 2px 0px var(--opacity-black-10), 0px 2px 4px 0px var(--opacity-black-25);
  --slider-handle-hover-fill: var(--surface-primary);
  --slider-handle-hover-sizing: var(--size-32);
  --slider-popover-fill-default-border-radius: var(--radius-6);
  --slider-popover-fill-default-fill: var(--surface-inverse);
  --slider-popover-fill-default-horizontal-padding: var(--space-12);
  --slider-popover-fill-default-vertical-padding: var(--space-8);
  --slider-popover-text-default-fill: var(--text-inverse);
  --slider-popover-text-default-typography-font-family: var(--font-family-default);
  --slider-popover-text-default-typography-font-size: var(--font-size-12);
  --slider-popover-text-default-typography-font-weight: var(--font-weight-medium);
  --slider-popover-text-default-typography-letter-spacing: var(--letter-spacing-default);
  --slider-popover-text-default-typography-line-height: var(--line-height-default-148);
  --slider-range-container-default-border-color: var(--border-primary);
  --slider-range-container-default-border-radius: var(--radius-8);
  --slider-range-container-default-border-style: solid;
  --slider-range-container-default-border-width: var(--border-width-1);
  --slider-range-container-default-fill: var(--fill-tertiary-default);
  --slider-range-container-default-height: 48px;
  --slider-range-container-default-horizontal-padding: var(--space-16);
  --slider-range-container-default-item-spacing: var(--space-4);
  --slider-range-container-disabled-border-color: var(--border-disabled);
  --slider-range-container-disabled-border-radius: var(--radius-8);
  --slider-range-container-disabled-border-style: solid;
  --slider-range-container-disabled-border-width: var(--border-width-1);
  --slider-range-container-disabled-fill: var(--fill-tertiary-disabled);
  --slider-range-container-disabled-height: 48px;
  --slider-range-container-disabled-horizontal-padding: var(--space-16);
  --slider-range-container-disabled-item-spacing: var(--space-4);
  --slider-range-text-label-default-fill: var(--text-primary);
  --slider-range-text-label-default-typography-font-family: var(--font-family-default);
  --slider-range-text-label-default-typography-font-size: var(--font-size-15);
  --slider-range-text-label-default-typography-font-weight: var(--font-weight-medium);
  --slider-range-text-label-default-typography-letter-spacing: var(--letter-spacing-default);
  --slider-range-text-label-default-typography-line-height: var(--line-height-default-148);
  --slider-range-text-label-disabled-fill: var(--text-disabled);
  --slider-range-text-label-disabled-typography-font-family: var(--font-family-default);
  --slider-range-text-label-disabled-typography-font-size: var(--font-size-15);
  --slider-range-text-label-disabled-typography-font-weight: var(--font-weight-medium);
  --slider-range-text-label-disabled-typography-letter-spacing: var(--letter-spacing-default);
  --slider-range-text-label-disabled-typography-line-height: var(--line-height-default-148);
  --slider-range-text-unit-default-fill: var(--text-tertiary);
  --slider-range-text-unit-default-typography-font-family: var(--font-family-default);
  --slider-range-text-unit-default-typography-font-size: var(--font-size-13);
  --slider-range-text-unit-default-typography-font-weight: var(--font-weight-medium);
  --slider-range-text-unit-default-typography-letter-spacing: var(--letter-spacing-default);
  --slider-range-text-unit-default-typography-line-height: var(--line-height-default-148);
  --slider-range-text-unit-disabled-fill: var(--text-disabled);
  --slider-range-text-unit-disabled-typography-font-family: var(--font-family-default);
  --slider-range-text-unit-disabled-typography-font-size: var(--font-size-13);
  --slider-range-text-unit-disabled-typography-font-weight: var(--font-weight-medium);
  --slider-range-text-unit-disabled-typography-letter-spacing: var(--letter-spacing-default);
  --slider-range-text-unit-disabled-typography-line-height: var(--line-height-default-148);
  --slider-text-label-default-fill: var(--text-tertiary);
  --slider-text-label-default-typography-font-family: var(--font-family-default);
  --slider-text-label-default-typography-font-size: var(--font-size-13);
  --slider-text-label-default-typography-font-weight: var(--font-weight-medium);
  --slider-text-label-default-typography-letter-spacing: var(--letter-spacing-default);
  --slider-text-label-default-typography-line-height: var(--line-height-default-148);
  --slider-text-label-disabled-fill: var(--text-disabled);
  --slider-text-label-disabled-typography-font-family: var(--font-family-default);
  --slider-text-label-disabled-typography-font-size: var(--font-size-13);
  --slider-text-label-disabled-typography-font-weight: var(--font-weight-medium);
  --slider-text-label-disabled-typography-letter-spacing: var(--letter-spacing-default);
  --slider-text-label-disabled-typography-line-height: var(--line-height-default-148);
  --slider-text-title-default-fill: var(--text-primary);
  --slider-text-title-default-typography-font-family: var(--font-family-default);
  --slider-text-title-default-typography-font-size: var(--font-size-15);
  --slider-text-title-default-typography-font-weight: var(--font-weight-bold);
  --slider-text-title-default-typography-letter-spacing: var(--letter-spacing-default);
  --slider-text-title-default-typography-line-height: var(--line-height-default-148);
  --slider-text-title-disabled-fill: var(--text-disabled);
  --slider-text-title-disabled-typography-font-family: var(--font-family-default);
  --slider-text-title-disabled-typography-font-size: var(--font-size-15);
  --slider-text-title-disabled-typography-font-weight: var(--font-weight-bold);
  --slider-text-title-disabled-typography-letter-spacing: var(--letter-spacing-default);
  --slider-text-title-disabled-typography-line-height: var(--line-height-default-148);

}

:root, [data-theme], [data-mode] {
  /* switch */
  --switch-container-size-medium-border-radius: var(--radius-circle);
  --switch-container-size-medium-height: 28px;
  --switch-container-size-medium-padding-left: 3px;
  --switch-container-size-medium-vertical-padding: 3px;
  --switch-container-size-medium-width: 48px;
  --switch-container-size-small-border-radius: var(--radius-circle);
  --switch-container-size-small-height: 24px;
  --switch-container-size-small-padding-left: 3px;
  --switch-container-size-small-vertical-padding: 3px;
  --switch-container-size-small-width: 40px;
  --switch-fill-active-off-default-fill: var(--icon-tertiary);
  --switch-fill-active-off-disabled-fill: var(--fill-secondary-disabled);
  --switch-fill-active-on-default-fill: var(--fill-accent-secondary-default);
  --switch-fill-active-on-disabled-fill: var(--fill-accent-secondary-disabled);
  --switch-handle-fill-default-box-shadow: 0px 0px 2px 0px var(--opacity-black-10), 0px 2px 4px 0px var(--opacity-black-25);
  --switch-handle-fill-default-fill: var(--handle-switch-fill-default);
  --switch-handle-fill-disabled-fill: var(--handle-switch-fill-disabled);
  --switch-handle-size-medium-border-radius: var(--radius-circle);
  --switch-handle-size-medium-sizing: 22px;
  --switch-handle-size-small-border-radius: var(--radius-circle);
  --switch-handle-size-small-sizing: 18px;

}

:root, [data-theme], [data-mode] {
  /* tab */
  --tab-fixed-fill-default-border-color: var(--border-secondary);
  --tab-fixed-fill-default-border-style: solid;
  --tab-fixed-fill-default-border-width: var(--border-width-1);
  --tab-fixed-fill-default-height: 48px;
  --tab-fixed-fill-default-horizontal-padding: var(--space-4);
  --tab-fixed-fill-disabled-border-color: var(--border-secondary);
  --tab-fixed-fill-disabled-border-style: solid;
  --tab-fixed-fill-disabled-border-width: var(--border-width-1);
  --tab-fixed-fill-disabled-height: 48px;
  --tab-fixed-fill-disabled-horizontal-padding: var(--space-4);
  --tab-fixed-fill-selected-border-color: var(--border-inverse);
  --tab-fixed-fill-selected-border-style: solid;
  --tab-fixed-fill-selected-border-width: var(--border-width-2);
  --tab-fixed-fill-selected-height: 48px;
  --tab-fixed-fill-selected-horizontal-padding: var(--space-4);
  --tab-fixed-text-default-fill: var(--text-secondary);
  --tab-fixed-text-default-typography-font-family: var(--font-family-default);
  --tab-fixed-text-default-typography-font-size: var(--font-size-15);
  --tab-fixed-text-default-typography-font-weight: var(--font-weight-medium);
  --tab-fixed-text-default-typography-letter-spacing: var(--letter-spacing-default);
  --tab-fixed-text-default-typography-line-height: var(--line-height-default-148);
  --tab-fixed-text-disabled-fill: var(--text-disabled);
  --tab-fixed-text-disabled-typography-font-family: var(--font-family-default);
  --tab-fixed-text-disabled-typography-font-size: var(--font-size-15);
  --tab-fixed-text-disabled-typography-font-weight: var(--font-weight-medium);
  --tab-fixed-text-disabled-typography-letter-spacing: var(--letter-spacing-default);
  --tab-fixed-text-disabled-typography-line-height: var(--line-height-default-148);
  --tab-fixed-text-selected-fill: var(--text-primary);
  --tab-fixed-text-selected-typography-font-family: var(--font-family-default);
  --tab-fixed-text-selected-typography-font-size: var(--font-size-15);
  --tab-fixed-text-selected-typography-font-weight: var(--font-weight-bold);
  --tab-fixed-text-selected-typography-letter-spacing: var(--letter-spacing-default);
  --tab-fixed-text-selected-typography-line-height: var(--line-height-default-148);
  --tab-scrollable-fill-default-border-color: var(--border-secondary);
  --tab-scrollable-fill-default-border-style: solid;
  --tab-scrollable-fill-default-border-width: var(--border-width-1);
  --tab-scrollable-fill-default-height: 48px;
  --tab-scrollable-fill-default-horizontal-padding: var(--space-4);
  --tab-scrollable-fill-disabled-border-color: var(--border-secondary);
  --tab-scrollable-fill-disabled-border-style: solid;
  --tab-scrollable-fill-disabled-border-width: var(--border-width-1);
  --tab-scrollable-fill-disabled-height: 48px;
  --tab-scrollable-fill-disabled-horizontal-padding: var(--space-4);
  --tab-scrollable-fill-selected-border-color: var(--border-inverse);
  --tab-scrollable-fill-selected-border-style: solid;
  --tab-scrollable-fill-selected-border-width: var(--border-width-2);
  --tab-scrollable-fill-selected-height: 48px;
  --tab-scrollable-fill-selected-horizontal-padding: var(--space-4);
  --tab-scrollable-group-container-default-horizontal-padding: var(--space-20);
  --tab-scrollable-group-container-default-item-spacing: var(--space-16);
  --tab-scrollable-text-default-fill: var(--text-secondary);
  --tab-scrollable-text-default-typography-font-family: var(--font-family-default);
  --tab-scrollable-text-default-typography-font-size: var(--font-size-15);
  --tab-scrollable-text-default-typography-font-weight: var(--font-weight-medium);
  --tab-scrollable-text-default-typography-letter-spacing: var(--letter-spacing-default);
  --tab-scrollable-text-default-typography-line-height: var(--line-height-default-148);
  --tab-scrollable-text-disabled-fill: var(--text-disabled);
  --tab-scrollable-text-disabled-typography-font-family: var(--font-family-default);
  --tab-scrollable-text-disabled-typography-font-size: var(--font-size-15);
  --tab-scrollable-text-disabled-typography-font-weight: var(--font-weight-medium);
  --tab-scrollable-text-disabled-typography-letter-spacing: var(--letter-spacing-default);
  --tab-scrollable-text-disabled-typography-line-height: var(--line-height-default-148);
  --tab-scrollable-text-selected-fill: var(--text-primary);
  --tab-scrollable-text-selected-typography-font-family: var(--font-family-default);
  --tab-scrollable-text-selected-typography-font-size: var(--font-size-15);
  --tab-scrollable-text-selected-typography-font-weight: var(--font-weight-bold);
  --tab-scrollable-text-selected-typography-letter-spacing: var(--letter-spacing-default);
  --tab-scrollable-text-selected-typography-line-height: var(--line-height-default-148);

}

:root, [data-theme], [data-mode] {
  /* tag */
  --tag-category-container-large-border-radius: var(--radius-4);
  --tag-category-container-large-horizontal-padding: 6px;
  --tag-category-container-large-vertical-padding: 3px;
  --tag-category-container-medium-border-radius: var(--radius-4);
  --tag-category-container-medium-horizontal-padding: 6px;
  --tag-category-container-medium-vertical-padding: 4px;
  --tag-category-container-small-border-radius: var(--radius-4);
  --tag-category-container-small-horizontal-padding: var(--space-4);
  --tag-category-container-small-vertical-padding: 3px;
  --tag-category-fill-basic-fill: var(--tag-category-fill-basic);
  --tag-category-fill-hot-fill: var(--tag-category-fill-hot);
  --tag-category-fill-new-fill: var(--tag-category-fill-new);
  --tag-category-fill-recommand-fill: var(--tag-category-fill-recommend);
  --tag-category-fill-sale-fill: var(--tag-category-fill-sale);
  --tag-category-text-color-basic-fill: var(--tag-category-text-basic);
  --tag-category-text-color-hot-fill: var(--tag-category-text-hot);
  --tag-category-text-color-new-fill: var(--tag-category-text-new);
  --tag-category-text-color-recommand-fill: var(--tag-category-text-recommend);
  --tag-category-text-color-sale-fill: var(--tag-category-text-sale);
  --tag-category-text-size-large-typography-font-family: var(--font-family-default);
  --tag-category-text-size-large-typography-font-size: var(--font-size-12);
  --tag-category-text-size-large-typography-font-weight: var(--font-weight-semibold);
  --tag-category-text-size-large-typography-letter-spacing: var(--letter-spacing-default);
  --tag-category-text-size-large-typography-line-height: var(--line-height-default-148);
  --tag-category-text-size-medium-typography-font-family: var(--font-family-default);
  --tag-category-text-size-medium-typography-font-size: var(--font-size-10);
  --tag-category-text-size-medium-typography-font-weight: var(--font-weight-semibold);
  --tag-category-text-size-medium-typography-letter-spacing: var(--letter-spacing-default);
  --tag-category-text-size-small-typography-font-family: var(--font-family-default);
  --tag-category-text-size-small-typography-font-size: var(--font-size-10);
  --tag-category-text-size-small-typography-font-weight: var(--font-weight-semibold);
  --tag-category-text-size-small-typography-letter-spacing: var(--letter-spacing-default);
  --tag-membership-container-large-border-radius: var(--radius-4);
  --tag-membership-container-large-horizontal-padding: 6px;
  --tag-membership-container-large-vertical-padding: 3px;
  --tag-membership-container-medium-border-radius: var(--radius-4);
  --tag-membership-container-medium-horizontal-padding: 6px;
  --tag-membership-container-medium-vertical-padding: 4px;
  --tag-membership-container-small-border-radius: var(--radius-4);
  --tag-membership-container-small-horizontal-padding: var(--space-4);
  --tag-membership-container-small-vertical-padding: 3px;
  --tag-membership-fill-all-fill: var(--tag-membership-fill-all);
  --tag-membership-fill-gold-fill: var(--tag-membership-fill-gold);
  --tag-membership-fill-silver-fill: var(--tag-membership-fill-silver);
  --tag-membership-fill-standard-fill: var(--tag-membership-fill-standard);
  --tag-membership-fill-vip-fill: var(--tag-membership-fill-vip);
  --tag-membership-fill-vvip-fill: var(--tag-membership-fill-vvip);
  --tag-membership-fill-white-fill: var(--tag-membership-fill-white);
  --tag-membership-text-color-all-fill: var(--tag-membership-text-inverse);
  --tag-membership-text-color-gold-fill: var(--tag-membership-text-inverse);
  --tag-membership-text-color-silver-fill: var(--tag-membership-text-inverse);
  --tag-membership-text-color-standard-fill: var(--tag-membership-text-secondary);
  --tag-membership-text-color-vip-fill: var(--tag-membership-text-inverse);
  --tag-membership-text-color-vvip-fill: var(--tag-membership-text-inverse);
  --tag-membership-text-color-white-fill: var(--tag-membership-text-primary);
  --tag-membership-text-size-large-typography-font-family: var(--font-family-default);
  --tag-membership-text-size-large-typography-font-size: var(--font-size-12);
  --tag-membership-text-size-large-typography-font-weight: var(--font-weight-semibold);
  --tag-membership-text-size-large-typography-letter-spacing: var(--letter-spacing-default);
  --tag-membership-text-size-large-typography-line-height: var(--line-height-default-148);
  --tag-membership-text-size-medium-typography-font-family: var(--font-family-default);
  --tag-membership-text-size-medium-typography-font-size: var(--font-size-10);
  --tag-membership-text-size-medium-typography-font-weight: var(--font-weight-semibold);
  --tag-membership-text-size-medium-typography-letter-spacing: var(--letter-spacing-default);
  --tag-membership-text-size-small-typography-font-family: var(--font-family-default);
  --tag-membership-text-size-small-typography-font-size: var(--font-size-10);
  --tag-membership-text-size-small-typography-font-weight: var(--font-weight-semibold);
  --tag-membership-text-size-small-typography-letter-spacing: var(--letter-spacing-default);
  --tag-status-container-large-border-radius: var(--radius-4);
  --tag-status-container-large-horizontal-padding: 6px;
  --tag-status-container-large-vertical-padding: 3px;
  --tag-status-container-medium-border-radius: var(--radius-4);
  --tag-status-container-medium-horizontal-padding: 6px;
  --tag-status-container-medium-vertical-padding: 4px;
  --tag-status-container-small-border-radius: var(--radius-4);
  --tag-status-container-small-horizontal-padding: var(--space-4);
  --tag-status-container-small-vertical-padding: 3px;
  --tag-status-fill-critical-fill: var(--tag-status-fill-critical);
  --tag-status-fill-default-fill: var(--tag-status-fill-default);
  --tag-status-fill-disabled-fill: var(--tag-status-fill-disabled);
  --tag-status-fill-info-fill: var(--tag-status-fill-info);
  --tag-status-fill-progress-fill: var(--tag-status-fill-progress);
  --tag-status-fill-success-fill: var(--tag-status-fill-success);
  --tag-status-fill-warning-fill: var(--tag-status-fill-warning);
  --tag-status-text-color-critical-fill: var(--tag-status-text-critical);
  --tag-status-text-color-default-fill: var(--tag-status-text-default);
  --tag-status-text-color-disabled-fill: var(--tag-status-text-disabled);
  --tag-status-text-color-info-fill: var(--tag-status-text-info);
  --tag-status-text-color-progress-fill: var(--tag-status-text-progress);
  --tag-status-text-color-success-fill: var(--tag-status-text-success);
  --tag-status-text-color-warning-fill: var(--tag-status-text-warning);
  --tag-status-text-size-large-typography-font-family: var(--font-family-default);
  --tag-status-text-size-large-typography-font-size: var(--font-size-12);
  --tag-status-text-size-large-typography-font-weight: var(--font-weight-semibold);
  --tag-status-text-size-large-typography-letter-spacing: var(--letter-spacing-default);
  --tag-status-text-size-large-typography-line-height: var(--line-height-default-148);
  --tag-status-text-size-medium-typography-font-family: var(--font-family-default);
  --tag-status-text-size-medium-typography-font-size: var(--font-size-10);
  --tag-status-text-size-medium-typography-font-weight: var(--font-weight-semibold);
  --tag-status-text-size-medium-typography-letter-spacing: var(--letter-spacing-default);
  --tag-status-text-size-small-typography-font-family: var(--font-family-default);
  --tag-status-text-size-small-typography-font-size: var(--font-size-10);
  --tag-status-text-size-small-typography-font-weight: var(--font-weight-semibold);
  --tag-status-text-size-small-typography-letter-spacing: var(--letter-spacing-default);

}

:root, [data-theme], [data-mode] {
  /* text */
  --text-button-chevron-container-compact-large-border-radius: var(--radius-4);
  --text-button-chevron-container-compact-large-height: 24px;
  --text-button-chevron-container-compact-large-padding-left: 0;
  --text-button-chevron-container-compact-large-padding-right: 0;
  --text-button-chevron-container-compact-medium-border-radius: var(--radius-4);
  --text-button-chevron-container-compact-medium-height: 20px;
  --text-button-chevron-container-compact-medium-padding-left: 0;
  --text-button-chevron-container-compact-medium-padding-right: 0;
  --text-button-chevron-container-compact-small-border-radius: var(--radius-4);
  --text-button-chevron-container-compact-small-height: 20px;
  --text-button-chevron-container-compact-small-padding-left: 0;
  --text-button-chevron-container-compact-small-padding-right: 0;
  --text-button-chevron-container-default-large-border-radius: var(--radius-8);
  --text-button-chevron-container-default-large-height: 48px;
  --text-button-chevron-container-default-large-item-spacing: 0;
  --text-button-chevron-container-default-large-padding-left: var(--space-16);
  --text-button-chevron-container-default-large-padding-right: var(--space-8);
  --text-button-chevron-container-default-medium-border-radius: var(--radius-8);
  --text-button-chevron-container-default-medium-height: 44px;
  --text-button-chevron-container-default-medium-item-spacing: 0;
  --text-button-chevron-container-default-medium-padding-left: var(--space-16);
  --text-button-chevron-container-default-medium-padding-right: var(--space-12);
  --text-button-chevron-container-default-small-border-radius: var(--radius-4);
  --text-button-chevron-container-default-small-height: 32px;
  --text-button-chevron-container-default-small-item-spacing: 0;
  --text-button-chevron-container-default-small-padding-left: var(--space-12);
  --text-button-chevron-container-default-small-padding-right: var(--space-8);
  --text-button-chevron-fill-default-fill: var(--fill-tertiary-default);
  --text-button-chevron-fill-hover-fill: var(--fill-tertiary-hover);
  --text-button-chevron-fill-pressed-fill: var(--fill-tertiary-pressed);
  --text-button-chevron-icon-color-default-fill: var(--icon-primary);
  --text-button-chevron-icon-color-disabled-fill: var(--icon-disabled);
  --text-button-chevron-text-color-default-fill: var(--text-primary);
  --text-button-chevron-text-color-disabled-fill: var(--text-disabled);
  --text-button-ghost-container-compact-large-border-radius: var(--radius-4);
  --text-button-ghost-container-compact-large-height: 24px;
  --text-button-ghost-container-compact-large-horizontal-padding: 0;
  --text-button-ghost-container-compact-medium-border-radius: var(--radius-4);
  --text-button-ghost-container-compact-medium-height: 20px;
  --text-button-ghost-container-compact-medium-horizontal-padding: 0;
  --text-button-ghost-container-compact-small-border-radius: var(--radius-4);
  --text-button-ghost-container-compact-small-height: 20px;
  --text-button-ghost-container-compact-small-horizontal-padding: 0;
  --text-button-ghost-container-default-large-border-radius: var(--radius-8);
  --text-button-ghost-container-default-large-height: 48px;
  --text-button-ghost-container-default-large-horizontal-padding: var(--space-16);
  --text-button-ghost-container-default-medium-border-radius: var(--radius-8);
  --text-button-ghost-container-default-medium-height: 44px;
  --text-button-ghost-container-default-medium-horizontal-padding: var(--space-16);
  --text-button-ghost-container-default-small-border-radius: var(--radius-4);
  --text-button-ghost-container-default-small-height: 32px;
  --text-button-ghost-container-default-small-horizontal-padding: var(--space-12);
  --text-button-ghost-fill-default-fill: var(--fill-tertiary-default);
  --text-button-ghost-fill-hover-fill: var(--fill-tertiary-hover);
  --text-button-ghost-fill-pressed-fill: var(--fill-tertiary-pressed);
  --text-button-ghost-text-color-default-fill: var(--text-primary);
  --text-button-ghost-text-color-disabled-fill: var(--text-disabled);
  --text-button-icon-size-default-sizing: var(--size-16);
  --text-button-text-size-large-typography-font-family: var(--font-family-default);
  --text-button-text-size-large-typography-font-size: var(--font-size-15);
  --text-button-text-size-large-typography-font-weight: var(--font-weight-medium);
  --text-button-text-size-large-typography-letter-spacing: var(--letter-spacing-default);
  --text-button-text-size-large-typography-line-height: var(--line-height-default-148);
  --text-button-text-size-medium-typography-font-family: var(--font-family-default);
  --text-button-text-size-medium-typography-font-size: var(--font-size-13);
  --text-button-text-size-medium-typography-font-weight: var(--font-weight-medium);
  --text-button-text-size-medium-typography-letter-spacing: var(--letter-spacing-default);
  --text-button-text-size-medium-typography-line-height: var(--line-height-default-148);
  --text-button-text-size-small-typography-font-family: var(--font-family-default);
  --text-button-text-size-small-typography-font-size: var(--font-size-13);
  --text-button-text-size-small-typography-font-weight: var(--font-weight-medium);
  --text-button-text-size-small-typography-letter-spacing: var(--letter-spacing-default);
  --text-button-text-size-small-typography-line-height: var(--line-height-default-148);
  --text-button-underline-container-compact-large-border-radius: var(--radius-4);
  --text-button-underline-container-compact-large-height: 24px;
  --text-button-underline-container-compact-large-horizontal-padding: var(--space-4);
  --text-button-underline-container-compact-medium-border-radius: var(--radius-4);
  --text-button-underline-container-compact-medium-height: 20px;
  --text-button-underline-container-compact-medium-horizontal-padding: var(--space-4);
  --text-button-underline-container-compact-small-border-radius: var(--radius-4);
  --text-button-underline-container-compact-small-height: 20px;
  --text-button-underline-container-compact-small-horizontal-padding: var(--space-4);
  --text-button-underline-container-default-large-border-radius: var(--radius-8);
  --text-button-underline-container-default-large-height: 48px;
  --text-button-underline-container-default-large-horizontal-padding: var(--space-16);
  --text-button-underline-container-default-medium-border-radius: var(--radius-8);
  --text-button-underline-container-default-medium-height: 44px;
  --text-button-underline-container-default-medium-horizontal-padding: var(--space-16);
  --text-button-underline-container-default-small-border-radius: var(--radius-4);
  --text-button-underline-container-default-small-height: 32px;
  --text-button-underline-container-default-small-horizontal-padding: var(--space-12);
  --text-button-underline-fill-default-fill: var(--fill-tertiary-default);
  --text-button-underline-fill-hover-fill: var(--fill-tertiary-hover);
  --text-button-underline-fill-pressed-fill: var(--fill-tertiary-pressed);
  --text-button-underline-text-color-default-fill: var(--text-primary);
  --text-button-underline-text-color-disabled-fill: var(--text-disabled);
  --text-button-underline-text-line-color-default-border-bottom: 1px;
  --text-button-underline-text-line-color-default-border-color: var(--border-inverse);
  --text-button-underline-text-line-color-default-border-style: solid;
  --text-button-underline-text-line-color-default-border-width: var(--border-width-1);
  --text-button-underline-text-line-color-default-fill: var(--text-primary);
  --text-button-underline-text-line-color-disabled-border-bottom: 1px;
  --text-button-underline-text-line-color-disabled-border-color: var(--border-disabled);
  --text-button-underline-text-line-color-disabled-border-style: solid;
  --text-button-underline-text-line-color-disabled-border-width: var(--border-width-1);

}

:root, [data-theme], [data-mode] {
  /* help */
  --help-text-container-default-min-width: 320px;
  --help-text-container-default-padding-left: var(--space-4);
  --help-text-text-caption-default-fill: var(--text-tertiary);
  --help-text-text-caption-default-typography-font-family: var(--font-family-default);
  --help-text-text-caption-default-typography-font-size: var(--font-size-12);
  --help-text-text-caption-default-typography-font-weight: var(--font-weight-medium);
  --help-text-text-caption-default-typography-letter-spacing: var(--letter-spacing-default);
  --help-text-text-caption-default-typography-line-height: var(--line-height-default-148);
  --help-text-text-caption-error-fill: var(--text-feedback-critical);
  --help-text-text-caption-error-typography-font-family: var(--font-family-default);
  --help-text-text-caption-error-typography-font-size: var(--font-size-12);
  --help-text-text-caption-error-typography-font-weight: var(--font-weight-medium);
  --help-text-text-caption-error-typography-letter-spacing: var(--letter-spacing-default);
  --help-text-text-caption-error-typography-line-height: var(--line-height-default-148);
  --help-text-text-caption-info-fill: var(--text-feedback-info);
  --help-text-text-caption-info-typography-font-family: var(--font-family-default);
  --help-text-text-caption-info-typography-font-size: var(--font-size-12);
  --help-text-text-caption-info-typography-font-weight: var(--font-weight-medium);
  --help-text-text-caption-info-typography-letter-spacing: var(--letter-spacing-default);
  --help-text-text-caption-info-typography-line-height: var(--line-height-default-148);
  --help-text-text-caption-success-fill: var(--text-feedback-success);
  --help-text-text-caption-success-typography-font-family: var(--font-family-default);
  --help-text-text-caption-success-typography-font-size: var(--font-size-12);
  --help-text-text-caption-success-typography-font-weight: var(--font-weight-medium);
  --help-text-text-caption-success-typography-letter-spacing: var(--letter-spacing-default);
  --help-text-text-caption-success-typography-line-height: var(--line-height-default-148);

  /* textfield */
  --textfield-area-container-default-border-radius: var(--radius-8);
  --textfield-area-container-default-horizontal-padding: var(--space-16);
  --textfield-area-container-default-min-height: 100px;
  --textfield-area-container-default-min-width: 320px;
  --textfield-area-container-default-vertical-padding: var(--space-16);
  --textfield-area-fill-default-complete-border-color: var(--border-primary);
  --textfield-area-fill-default-complete-border-style: solid;
  --textfield-area-fill-default-complete-border-width: var(--border-width-1);
  --textfield-area-fill-default-complete-error-border-color: var(--border-feedback-critical);
  --textfield-area-fill-default-complete-error-border-style: solid;
  --textfield-area-fill-default-complete-error-border-width: var(--border-width-1);
  --textfield-area-fill-default-complete-error-fill: var(--fill-tertiary-default);
  --textfield-area-fill-default-complete-fill: var(--fill-tertiary-default);
  --textfield-area-fill-default-default-border-color: var(--border-primary);
  --textfield-area-fill-default-default-border-style: solid;
  --textfield-area-fill-default-default-border-width: var(--border-width-1);
  --textfield-area-fill-default-default-fill: var(--fill-tertiary-default);
  --textfield-area-fill-default-disabled-border-color: var(--border-disabled);
  --textfield-area-fill-default-disabled-border-style: solid;
  --textfield-area-fill-default-disabled-border-width: var(--border-width-1);
  --textfield-area-fill-default-disabled-fill: var(--fill-tertiary-disabled);
  --textfield-area-fill-default-error-border-color: var(--border-feedback-critical);
  --textfield-area-fill-default-error-border-style: solid;
  --textfield-area-fill-default-error-border-width: var(--border-width-1);
  --textfield-area-fill-default-error-fill: var(--fill-tertiary-default);
  --textfield-area-fill-default-focused-border-color: var(--border-inverse);
  --textfield-area-fill-default-focused-border-style: solid;
  --textfield-area-fill-default-focused-border-width: var(--border-width-2);
  --textfield-area-fill-default-focused-box-shadow: var(--shadow-2);
  --textfield-area-fill-default-focused-fill: var(--fill-tertiary-default);
  --textfield-area-fill-default-hover-border-color: var(--border-primary);
  --textfield-area-fill-default-hover-border-style: solid;
  --textfield-area-fill-default-hover-border-width: var(--border-width-1);
  --textfield-area-fill-default-hover-fill: var(--fill-tertiary-hover);
  --textfield-area-fill-default-pressed-border-color: var(--border-primary);
  --textfield-area-fill-default-pressed-border-style: solid;
  --textfield-area-fill-default-pressed-border-width: var(--border-width-1);
  --textfield-area-fill-default-pressed-fill: var(--fill-tertiary-pressed);
  --textfield-area-fill-default-read-only-border-color: var(--border-primary);
  --textfield-area-fill-default-read-only-border-style: solid;
  --textfield-area-fill-default-read-only-border-width: var(--border-width-1);
  --textfield-area-fill-default-read-only-fill: var(--fill-tertiary-disabled);
  --textfield-area-fill-default-typing-border-color: var(--border-inverse);
  --textfield-area-fill-default-typing-border-style: solid;
  --textfield-area-fill-default-typing-border-width: var(--border-width-2);
  --textfield-area-fill-default-typing-box-shadow: var(--shadow-2);
  --textfield-area-fill-default-typing-error-border-color: var(--border-feedback-critical);
  --textfield-area-fill-default-typing-error-border-style: solid;
  --textfield-area-fill-default-typing-error-border-width: var(--border-width-2);
  --textfield-area-fill-default-typing-error-box-shadow: var(--shadow-2);
  --textfield-area-fill-default-typing-error-fill: var(--fill-tertiary-default);
  --textfield-area-fill-default-typing-fill: var(--fill-tertiary-default);
  --textfield-area-text-body-complete-error-fill: var(--text-primary);
  --textfield-area-text-body-complete-error-typography-font-family: var(--font-family-default);
  --textfield-area-text-body-complete-error-typography-font-size: var(--font-size-15);
  --textfield-area-text-body-complete-error-typography-font-weight: var(--font-weight-medium);
  --textfield-area-text-body-complete-error-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-area-text-body-complete-error-typography-line-height: var(--line-height-default-148);
  --textfield-area-text-body-complete-fill: var(--text-primary);
  --textfield-area-text-body-complete-typography-font-family: var(--font-family-default);
  --textfield-area-text-body-complete-typography-font-size: var(--font-size-15);
  --textfield-area-text-body-complete-typography-font-weight: var(--font-weight-medium);
  --textfield-area-text-body-complete-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-area-text-body-complete-typography-line-height: var(--line-height-default-148);
  --textfield-area-text-body-focused-fill: var(--text-tertiary);
  --textfield-area-text-body-focused-typography-font-family: var(--font-family-default);
  --textfield-area-text-body-focused-typography-font-size: var(--font-size-15);
  --textfield-area-text-body-focused-typography-font-weight: var(--font-weight-medium);
  --textfield-area-text-body-focused-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-area-text-body-focused-typography-line-height: var(--line-height-default-148);
  --textfield-area-text-body-read-only-fill: var(--text-primary);
  --textfield-area-text-body-read-only-typography-font-family: var(--font-family-default);
  --textfield-area-text-body-read-only-typography-font-size: var(--font-size-15);
  --textfield-area-text-body-read-only-typography-font-weight: var(--font-weight-medium);
  --textfield-area-text-body-read-only-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-area-text-body-read-only-typography-line-height: var(--line-height-default-148);
  --textfield-area-text-body-typing-error-fill: var(--text-primary);
  --textfield-area-text-body-typing-error-typography-font-family: var(--font-family-default);
  --textfield-area-text-body-typing-error-typography-font-size: var(--font-size-15);
  --textfield-area-text-body-typing-error-typography-font-weight: var(--font-weight-medium);
  --textfield-area-text-body-typing-error-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-area-text-body-typing-error-typography-line-height: var(--line-height-default-148);
  --textfield-area-text-body-typing-fill: var(--text-primary);
  --textfield-area-text-body-typing-typography-font-family: var(--font-family-default);
  --textfield-area-text-body-typing-typography-font-size: var(--font-size-15);
  --textfield-area-text-body-typing-typography-font-weight: var(--font-weight-medium);
  --textfield-area-text-body-typing-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-area-text-body-typing-typography-line-height: var(--line-height-default-148);
  --textfield-area-text-counter-default-fill: var(--text-tertiary);
  --textfield-area-text-counter-default-typography-font-family: var(--font-family-default);
  --textfield-area-text-counter-default-typography-font-size: var(--font-size-12);
  --textfield-area-text-counter-default-typography-font-weight: var(--font-weight-medium);
  --textfield-area-text-counter-default-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-area-text-counter-default-typography-line-height: var(--line-height-default-148);
  --textfield-area-text-counter-disabled-fill: var(--text-disabled);
  --textfield-area-text-counter-disabled-typography-font-family: var(--font-family-default);
  --textfield-area-text-counter-disabled-typography-font-size: var(--font-size-12);
  --textfield-area-text-counter-disabled-typography-font-weight: var(--font-weight-medium);
  --textfield-area-text-counter-disabled-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-area-text-counter-disabled-typography-line-height: var(--line-height-default-148);
  --textfield-area-text-label-complete-error-fill: var(--text-tertiary);
  --textfield-area-text-label-complete-error-typography-font-family: var(--font-family-default);
  --textfield-area-text-label-complete-error-typography-font-size: var(--font-size-13);
  --textfield-area-text-label-complete-error-typography-font-weight: var(--font-weight-medium);
  --textfield-area-text-label-complete-error-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-area-text-label-complete-error-typography-line-height: var(--line-height-default-148);
  --textfield-area-text-label-complete-fill: var(--text-tertiary);
  --textfield-area-text-label-complete-typography-font-family: var(--font-family-default);
  --textfield-area-text-label-complete-typography-font-size: var(--font-size-13);
  --textfield-area-text-label-complete-typography-font-weight: var(--font-weight-medium);
  --textfield-area-text-label-complete-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-area-text-label-complete-typography-line-height: var(--line-height-default-148);
  --textfield-area-text-label-default-fill: var(--text-tertiary);
  --textfield-area-text-label-default-typography-font-family: var(--font-family-default);
  --textfield-area-text-label-default-typography-font-size: var(--font-size-15);
  --textfield-area-text-label-default-typography-font-weight: var(--font-weight-medium);
  --textfield-area-text-label-default-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-area-text-label-default-typography-line-height: var(--line-height-default-148);
  --textfield-area-text-label-disabled-fill: var(--text-disabled);
  --textfield-area-text-label-disabled-typography-font-family: var(--font-family-default);
  --textfield-area-text-label-disabled-typography-font-size: var(--font-size-15);
  --textfield-area-text-label-disabled-typography-font-weight: var(--font-weight-medium);
  --textfield-area-text-label-disabled-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-area-text-label-disabled-typography-line-height: var(--line-height-default-148);
  --textfield-area-text-label-error-fill: var(--text-tertiary);
  --textfield-area-text-label-error-typography-font-family: var(--font-family-default);
  --textfield-area-text-label-error-typography-font-size: var(--font-size-15);
  --textfield-area-text-label-error-typography-font-weight: var(--font-weight-medium);
  --textfield-area-text-label-error-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-area-text-label-error-typography-line-height: var(--line-height-default-148);
  --textfield-area-text-label-focused-fill: var(--text-tertiary);
  --textfield-area-text-label-focused-typography-font-family: var(--font-family-default);
  --textfield-area-text-label-focused-typography-font-size: var(--font-size-13);
  --textfield-area-text-label-focused-typography-font-weight: var(--font-weight-medium);
  --textfield-area-text-label-focused-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-area-text-label-focused-typography-line-height: var(--line-height-default-148);
  --textfield-area-text-label-hover-fill: var(--text-tertiary);
  --textfield-area-text-label-hover-typography-font-family: var(--font-family-default);
  --textfield-area-text-label-hover-typography-font-size: var(--font-size-15);
  --textfield-area-text-label-hover-typography-font-weight: var(--font-weight-medium);
  --textfield-area-text-label-hover-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-area-text-label-hover-typography-line-height: var(--line-height-default-148);
  --textfield-area-text-label-pressed-fill: var(--text-tertiary);
  --textfield-area-text-label-pressed-typography-font-family: var(--font-family-default);
  --textfield-area-text-label-pressed-typography-font-size: var(--font-size-15);
  --textfield-area-text-label-pressed-typography-font-weight: var(--font-weight-medium);
  --textfield-area-text-label-pressed-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-area-text-label-pressed-typography-line-height: var(--line-height-default-148);
  --textfield-area-text-label-read-only-fill: var(--text-tertiary);
  --textfield-area-text-label-read-only-typography-font-family: var(--font-family-default);
  --textfield-area-text-label-read-only-typography-font-size: var(--font-size-13);
  --textfield-area-text-label-read-only-typography-font-weight: var(--font-weight-medium);
  --textfield-area-text-label-read-only-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-area-text-label-read-only-typography-line-height: var(--line-height-default-148);
  --textfield-area-text-label-typing-error-fill: var(--text-tertiary);
  --textfield-area-text-label-typing-error-typography-font-family: var(--font-family-default);
  --textfield-area-text-label-typing-error-typography-font-size: var(--font-size-13);
  --textfield-area-text-label-typing-error-typography-font-weight: var(--font-weight-medium);
  --textfield-area-text-label-typing-error-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-area-text-label-typing-error-typography-line-height: var(--line-height-default-148);
  --textfield-area-text-label-typing-fill: var(--text-tertiary);
  --textfield-area-text-label-typing-typography-font-family: var(--font-family-default);
  --textfield-area-text-label-typing-typography-font-size: var(--font-size-13);
  --textfield-area-text-label-typing-typography-font-weight: var(--font-weight-medium);
  --textfield-area-text-label-typing-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-area-text-label-typing-typography-line-height: var(--line-height-default-148);
  --textfield-input-container-default-border-radius: var(--radius-8);
  --textfield-input-container-default-horizontal-padding: var(--space-16);
  --textfield-input-container-default-min-width: 320px;
  --textfield-input-container-default-vertical-padding: var(--space-16);
  --textfield-input-container-expanded-border-radius: var(--radius-8);
  --textfield-input-container-expanded-horizontal-padding: var(--space-16);
  --textfield-input-container-expanded-min-width: 320px;
  --textfield-input-container-expanded-vertical-padding: var(--space-12);
  --textfield-input-fill-default-complete-border-color: var(--border-primary);
  --textfield-input-fill-default-complete-border-style: solid;
  --textfield-input-fill-default-complete-border-width: var(--border-width-1);
  --textfield-input-fill-default-complete-error-border-color: var(--border-feedback-critical);
  --textfield-input-fill-default-complete-error-border-style: solid;
  --textfield-input-fill-default-complete-error-border-width: var(--border-width-1);
  --textfield-input-fill-default-complete-error-fill: var(--fill-tertiary-default);
  --textfield-input-fill-default-complete-fill: var(--fill-tertiary-default);
  --textfield-input-fill-default-default-border-color: var(--border-primary);
  --textfield-input-fill-default-default-border-style: solid;
  --textfield-input-fill-default-default-border-width: var(--border-width-1);
  --textfield-input-fill-default-default-fill: var(--fill-tertiary-default);
  --textfield-input-fill-default-disabled-border-color: var(--border-disabled);
  --textfield-input-fill-default-disabled-border-style: solid;
  --textfield-input-fill-default-disabled-border-width: var(--border-width-1);
  --textfield-input-fill-default-disabled-fill: var(--fill-tertiary-disabled);
  --textfield-input-fill-default-error-border-color: var(--border-feedback-critical);
  --textfield-input-fill-default-error-border-style: solid;
  --textfield-input-fill-default-error-border-width: var(--border-width-1);
  --textfield-input-fill-default-error-fill: var(--fill-tertiary-default);
  --textfield-input-fill-default-focused-border-color: var(--border-inverse);
  --textfield-input-fill-default-focused-border-style: solid;
  --textfield-input-fill-default-focused-border-width: var(--border-width-2);
  --textfield-input-fill-default-focused-box-shadow: var(--shadow-2);
  --textfield-input-fill-default-focused-fill: var(--fill-tertiary-default);
  --textfield-input-fill-default-hover-border-color: var(--border-primary);
  --textfield-input-fill-default-hover-border-style: solid;
  --textfield-input-fill-default-hover-border-width: var(--border-width-1);
  --textfield-input-fill-default-hover-fill: var(--fill-tertiary-hover);
  --textfield-input-fill-default-read-only-border-color: var(--border-primary);
  --textfield-input-fill-default-read-only-border-style: solid;
  --textfield-input-fill-default-read-only-border-width: var(--border-width-1);
  --textfield-input-fill-default-read-only-fill: var(--fill-tertiary-disabled);
  --textfield-input-fill-default-typing-border-color: var(--border-inverse);
  --textfield-input-fill-default-typing-border-style: solid;
  --textfield-input-fill-default-typing-border-width: var(--border-width-2);
  --textfield-input-fill-default-typing-box-shadow: var(--shadow-2);
  --textfield-input-fill-default-typing-error-border-color: var(--border-feedback-critical);
  --textfield-input-fill-default-typing-error-border-style: solid;
  --textfield-input-fill-default-typing-error-border-width: var(--border-width-2);
  --textfield-input-fill-default-typing-error-box-shadow: var(--shadow-2);
  --textfield-input-fill-default-typing-error-fill: var(--fill-tertiary-default);
  --textfield-input-fill-default-typing-fill: var(--fill-tertiary-default);
  --textfield-input-icon-container-default-sizing: 44px;
  --textfield-input-icon-fill-secondary-fill: var(--icon-secondary);
  --textfield-input-icon-fill-tertiary-fill: var(--icon-tertiary);
  --textfield-input-icon-icon-size-default-sizing: var(--size-24);
  --textfield-input-text-body-complete-error-fill: var(--text-primary);
  --textfield-input-text-body-complete-error-typography-font-family: var(--font-family-default);
  --textfield-input-text-body-complete-error-typography-font-size: var(--font-size-15);
  --textfield-input-text-body-complete-error-typography-font-weight: var(--font-weight-medium);
  --textfield-input-text-body-complete-error-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-input-text-body-complete-error-typography-line-height: var(--line-height-default-148);
  --textfield-input-text-body-complete-fill: var(--text-primary);
  --textfield-input-text-body-complete-typography-font-family: var(--font-family-default);
  --textfield-input-text-body-complete-typography-font-size: var(--font-size-15);
  --textfield-input-text-body-complete-typography-font-weight: var(--font-weight-medium);
  --textfield-input-text-body-complete-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-input-text-body-complete-typography-line-height: var(--line-height-default-148);
  --textfield-input-text-body-focused-fill: var(--text-tertiary);
  --textfield-input-text-body-focused-typography-font-family: var(--font-family-default);
  --textfield-input-text-body-focused-typography-font-size: var(--font-size-15);
  --textfield-input-text-body-focused-typography-font-weight: var(--font-weight-medium);
  --textfield-input-text-body-focused-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-input-text-body-focused-typography-line-height: var(--line-height-default-148);
  --textfield-input-text-body-read-only-fill: var(--text-primary);
  --textfield-input-text-body-read-only-typography-font-family: var(--font-family-default);
  --textfield-input-text-body-read-only-typography-font-size: var(--font-size-15);
  --textfield-input-text-body-read-only-typography-font-weight: var(--font-weight-medium);
  --textfield-input-text-body-read-only-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-input-text-body-read-only-typography-line-height: var(--line-height-default-148);
  --textfield-input-text-body-typing-error-fill: var(--text-primary);
  --textfield-input-text-body-typing-error-typography-font-family: var(--font-family-default);
  --textfield-input-text-body-typing-error-typography-font-size: var(--font-size-15);
  --textfield-input-text-body-typing-error-typography-font-weight: var(--font-weight-medium);
  --textfield-input-text-body-typing-error-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-input-text-body-typing-error-typography-line-height: var(--line-height-default-148);
  --textfield-input-text-body-typing-fill: var(--text-primary);
  --textfield-input-text-body-typing-typography-font-family: var(--font-family-default);
  --textfield-input-text-body-typing-typography-font-size: var(--font-size-15);
  --textfield-input-text-body-typing-typography-font-weight: var(--font-weight-medium);
  --textfield-input-text-body-typing-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-input-text-body-typing-typography-line-height: var(--line-height-default-148);
  --textfield-input-text-label-complete-error-fill: var(--text-tertiary);
  --textfield-input-text-label-complete-error-typography-font-family: var(--font-family-default);
  --textfield-input-text-label-complete-error-typography-font-size: var(--font-size-13);
  --textfield-input-text-label-complete-error-typography-font-weight: var(--font-weight-medium);
  --textfield-input-text-label-complete-error-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-input-text-label-complete-error-typography-line-height: var(--line-height-default-148);
  --textfield-input-text-label-complete-fill: var(--text-tertiary);
  --textfield-input-text-label-complete-typography-font-family: var(--font-family-default);
  --textfield-input-text-label-complete-typography-font-size: var(--font-size-13);
  --textfield-input-text-label-complete-typography-font-weight: var(--font-weight-medium);
  --textfield-input-text-label-complete-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-input-text-label-complete-typography-line-height: var(--line-height-default-148);
  --textfield-input-text-label-default-fill: var(--text-tertiary);
  --textfield-input-text-label-default-typography-font-family: var(--font-family-default);
  --textfield-input-text-label-default-typography-font-size: var(--font-size-15);
  --textfield-input-text-label-default-typography-font-weight: var(--font-weight-medium);
  --textfield-input-text-label-default-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-input-text-label-default-typography-line-height: var(--line-height-default-148);
  --textfield-input-text-label-disabled-fill: var(--text-disabled);
  --textfield-input-text-label-disabled-typography-font-family: var(--font-family-default);
  --textfield-input-text-label-disabled-typography-font-size: var(--font-size-15);
  --textfield-input-text-label-disabled-typography-font-weight: var(--font-weight-medium);
  --textfield-input-text-label-disabled-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-input-text-label-disabled-typography-line-height: var(--line-height-default-148);
  --textfield-input-text-label-error-fill: var(--text-tertiary);
  --textfield-input-text-label-error-typography-font-family: var(--font-family-default);
  --textfield-input-text-label-error-typography-font-size: var(--font-size-15);
  --textfield-input-text-label-error-typography-font-weight: var(--font-weight-medium);
  --textfield-input-text-label-error-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-input-text-label-error-typography-line-height: var(--line-height-default-148);
  --textfield-input-text-label-focused-fill: var(--text-tertiary);
  --textfield-input-text-label-focused-typography-font-family: var(--font-family-default);
  --textfield-input-text-label-focused-typography-font-size: var(--font-size-13);
  --textfield-input-text-label-focused-typography-font-weight: var(--font-weight-medium);
  --textfield-input-text-label-focused-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-input-text-label-focused-typography-line-height: var(--line-height-default-148);
  --textfield-input-text-label-hover-fill: var(--text-tertiary);
  --textfield-input-text-label-hover-typography-font-family: var(--font-family-default);
  --textfield-input-text-label-hover-typography-font-size: var(--font-size-15);
  --textfield-input-text-label-hover-typography-font-weight: var(--font-weight-medium);
  --textfield-input-text-label-hover-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-input-text-label-hover-typography-line-height: var(--line-height-default-148);
  --textfield-input-text-label-read-only-fill: var(--text-tertiary);
  --textfield-input-text-label-read-only-typography-font-family: var(--font-family-default);
  --textfield-input-text-label-read-only-typography-font-size: var(--font-size-13);
  --textfield-input-text-label-read-only-typography-font-weight: var(--font-weight-medium);
  --textfield-input-text-label-read-only-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-input-text-label-read-only-typography-line-height: var(--line-height-default-148);
  --textfield-input-text-label-typing-error-fill: var(--text-tertiary);
  --textfield-input-text-label-typing-error-typography-font-family: var(--font-family-default);
  --textfield-input-text-label-typing-error-typography-font-size: var(--font-size-13);
  --textfield-input-text-label-typing-error-typography-font-weight: var(--font-weight-medium);
  --textfield-input-text-label-typing-error-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-input-text-label-typing-error-typography-line-height: var(--line-height-default-148);
  --textfield-input-text-label-typing-fill: var(--text-tertiary);
  --textfield-input-text-label-typing-typography-font-family: var(--font-family-default);
  --textfield-input-text-label-typing-typography-font-size: var(--font-size-13);
  --textfield-input-text-label-typing-typography-font-weight: var(--font-weight-medium);
  --textfield-input-text-label-typing-typography-letter-spacing: var(--letter-spacing-default);
  --textfield-input-text-label-typing-typography-line-height: var(--line-height-default-148);

}

:root, [data-theme], [data-mode] {
  /* tooltip */
  --tooltip-container-auto-border-radius: var(--radius-6);
  --tooltip-container-auto-box-shadow: var(--shadow-2);
  --tooltip-container-auto-fill: var(--surface-inverse);
  --tooltip-container-auto-horizontal-padding: var(--space-12);
  --tooltip-container-auto-vertical-padding: var(--space-8);
  --tooltip-container-toggle-border-color: var(--border-secondary);
  --tooltip-container-toggle-border-radius: var(--radius-6);
  --tooltip-container-toggle-border-style: solid;
  --tooltip-container-toggle-border-width: var(--border-width-1);
  --tooltip-container-toggle-box-shadow: var(--shadow-2);
  --tooltip-container-toggle-fill: var(--surface-primary);
  --tooltip-container-toggle-item-spacing: var(--space-4);
  --tooltip-container-toggle-padding-left: var(--space-12);
  --tooltip-container-toggle-padding-right: var(--space-8);
  --tooltip-container-toggle-vertical-padding: var(--space-8);
  --tooltip-icon-container-default-horizontal-padding: var(--space-2);
  --tooltip-icon-container-default-sizing: var(--size-20);
  --tooltip-icon-container-default-vertical-padding: var(--space-2);
  --tooltip-icon-fill-primary-fill: var(--icon-secondary);
  --tooltip-icon-icon-size-default-sizing: var(--size-16);
  --tooltip-text-inverse-fill: var(--text-inverse);
  --tooltip-text-inverse-typography-font-family: var(--font-family-default);
  --tooltip-text-inverse-typography-font-size: var(--font-size-12);
  --tooltip-text-inverse-typography-font-weight: var(--font-weight-medium);
  --tooltip-text-inverse-typography-letter-spacing: var(--letter-spacing-default);
  --tooltip-text-inverse-typography-line-height: var(--line-height-default-148);
  --tooltip-text-secondary-fill: var(--text-secondary);
  --tooltip-text-secondary-typography-font-family: var(--font-family-default);
  --tooltip-text-secondary-typography-font-size: var(--font-size-12);
  --tooltip-text-secondary-typography-font-weight: var(--font-weight-medium);
  --tooltip-text-secondary-typography-letter-spacing: var(--letter-spacing-default);
  --tooltip-text-secondary-typography-line-height: var(--line-height-default-148);

}

:root, [data-theme], [data-mode] {
  /* shadow */
  --shadow-topnavi-blur: 4px;
  --shadow-topnavi-color: var(--opacity-black-15);
  --shadow-topnavi-offset-x: 0;
  --shadow-topnavi-offset-y: 0;
  --shadow-topnavi-spread: 0;
  --shadow-topnavi-type: dropShadow;

  /* top */
  --top-navigation-item-container-default-fill: var(--surface-primary);
  --top-navigation-item-container-default-height: 52px;
  --top-navigation-item-container-default-horizontal-padding: var(--space-8);
  --top-navigation-item-container-default-min-width: 360px;
  --top-navigation-item-container-default-vertical-padding: var(--space-4);
  --top-navigation-item-container-scrolling-box-shadow-blur: 4px;
  --top-navigation-item-container-scrolling-box-shadow-color: var(--opacity-black-15);
  --top-navigation-item-container-scrolling-box-shadow-offset-x: 0;
  --top-navigation-item-container-scrolling-box-shadow-offset-y: 0;
  --top-navigation-item-container-scrolling-box-shadow-spread: 0;
  --top-navigation-item-container-scrolling-box-shadow-type: dropShadow;
  --top-navigation-item-container-scrolling-fill: var(--surface-primary);
  --top-navigation-item-container-scrolling-height: 52px;
  --top-navigation-item-container-scrolling-horizontal-padding: var(--space-8);
  --top-navigation-item-container-scrolling-min-width: 360px;
  --top-navigation-item-container-scrolling-vertical-padding: var(--space-4);
  --top-navigation-item-container-search-border-color: var(--border-primary);
  --top-navigation-item-container-search-border-style: solid;
  --top-navigation-item-container-search-border-width: var(--border-width-1);
  --top-navigation-item-container-search-border-width-bottom: 1px;
  --top-navigation-item-container-search-fill: var(--surface-primary);
  --top-navigation-item-container-search-height: 52px;
  --top-navigation-item-container-search-horizontal-padding: var(--space-8);
  --top-navigation-item-container-search-min-width: 360px;
  --top-navigation-item-container-search-vertical-padding: var(--space-4);
  --top-navigation-item-icon-container-default-sizing: 44px;
  --top-navigation-item-icon-fill-default-fill: var(--icon-primary);
  --top-navigation-item-icon-icon-size-default-sizing: var(--size-24);
  --top-navigation-item-title-ci-container-default-horizontal-padding: var(--space-4);
  --top-navigation-item-title-ci-container-default-min-height: 44px;
  --top-navigation-item-title-ci-container-default-min-width: 120px;
  --top-navigation-item-title-text-default-fill: var(--text-primary);
  --top-navigation-item-title-text-default-typography-font-family: var(--font-family-default);
  --top-navigation-item-title-text-default-typography-font-size: var(--font-size-16);
  --top-navigation-item-title-text-default-typography-font-weight: var(--font-weight-bold);
  --top-navigation-item-title-text-default-typography-letter-spacing: var(--letter-spacing-default);
  --top-navigation-item-title-text-default-typography-line-height: var(--line-height-default-148);

}

/* ── 4. Moonwave 브랜드 레이어 ── */
/* Moonwave 브랜드 레이어
 * 기능 토큰(표면·글자·테두리·간격·반경) 위에 얹는 Moonwave만의 층이에요.
 * 여기 있는 값만 Moonwave가 직접 정한 색이고, 나머지 화면은 모두 semantic 토큰으로 그려요.
 * 서비스 고유 색이 필요하면 이 파일을 고치지 말고 --<service>-* 이름으로 서비스 안에 추가하세요.
 */
:root,
[data-theme="light"],
[data-theme="light-white"],
[data-theme="light-gray"] {
  color-scheme: light;

  /* 강조 — 달빛 파랑. 한 화면에 한 곳만 써요. 글자에는 strong을 써요(흰 배경 6.8:1). */
  --mw-accent: #527f9c;
  --mw-accent-strong: #315f7e;
  --mw-accent-pressed: #234a63;
  --mw-accent-soft: #e8f1f5;
  --mw-on-accent: var(--static-white);
  /* 흰 글자를 올리는 면: 달빛 파랑을 한 톤 낮춰 4.5:1을 맞춰요 */
  --mw-accent-fill: #4f7b98;
  --mw-focus: #315f7e;

  /* 상태 — 서비스가 살아 있는지, 손봐야 하는지 */
  --mw-ok: var(--teal-500);
  --mw-ok-soft: var(--teal-100);
  --mw-warn: var(--yellow-400);
  --mw-warn-soft: var(--yellow-100);
  --mw-critical: var(--red-500);
  --mw-critical-soft: var(--red-100);
  --mw-idle: var(--gray-300);

  /* 시세 — 한국 관례: 오름은 빨강, 내림은 파랑. 색만으로 알리지 않고 부호나 ▲▼를 함께 써요. */
  --mw-gain: #d71826;
  --mw-gain-strong: #bb1b21;
  --mw-gain-soft: #fce9e9;
  --mw-gain-on-soft: #bb1b21;
  --mw-loss: #2f6eba;
  --mw-loss-strong: #0049a3;
  --mw-loss-soft: #d9f2ff;
  --mw-loss-on-soft: #0049a3;
  --mw-flat: var(--text-tertiary);

  /* 데이터 시각화 — 단일 계열, 강조, 배경 막대 */
  --mw-viz: #00a39b;
  --mw-viz-strong: #007f7f;
  --mw-viz-soft: #4cc8c3;
  --mw-viz-deemph: #c7cad1;
  --mw-viz-area-alpha: 0.1;
  /* 범주 — 순서를 바꾸거나 돌려 쓰지 않아요. 9번째부터는 '기타'로 묶어요. */
  --mw-cat-1: #00a39b;
  --mw-cat-2: #ef6800;
  --mw-cat-3: #8666ff;
  --mw-cat-4: #e0288d;
  --mw-cat-5: #546bff;
  --mw-cat-6: #639900;
  --mw-cat-7: #009dcc;
  --mw-cat-8: #00804f;
  --mw-cat-other: #8b8f97;
  /* 크기 — 옅은 값에서 짙은 값으로 */
  --mw-seq-0: #e1f5f5;
  --mw-seq-1: #a9e5e1;
  --mw-seq-2: #4cc8c3;
  --mw-seq-3: #00a39b;
  --mw-seq-4: #007f7f;
  --mw-seq-5: #005e66;
  --mw-seq-6: #00484e;
  --mw-seq-7: #002629;
  /* 양방향 — 내림 5→1, 가운데, 오름 1→5 */
  --mw-div-loss-5: #0049a3;
  --mw-div-loss-4: #148aff;
  --mw-div-loss-3: #50b6fe;
  --mw-div-loss-2: #80d4ff;
  --mw-div-loss-1: #c2ebff;
  --mw-div-mid: #eeeff2;
  --mw-div-gain-1: #fadbdc;
  --mw-div-gain-2: #f2a6a9;
  --mw-div-gain-3: #ec797d;
  --mw-div-gain-4: #e0282f;
  --mw-div-gain-5: #8a1418;
  /* 사람 — 가족 구성원을 구분할 때. 범주 색과 겹치지 않게 5·4번을 써요. */
  --mw-person-1: var(--mw-cat-5);
  --mw-person-2: var(--mw-cat-4);

  /* 강조색을 기능 토큰에 연결 — 컴포넌트의 accent 변형이 Moonwave 색을 따르게 해요 */
  --text-accent-primary: var(--mw-accent-strong);
  --icon-accent-primary: var(--mw-accent);
  --border-accent-primary: var(--mw-accent);
  --fill-accent-primary-default: var(--mw-accent-fill);
  --fill-accent-primary-hover: var(--mw-accent-strong);
  --fill-accent-primary-pressed: var(--mw-accent-pressed);

  /* 보조 바탕(gray-50)과 옅은 강조 바탕 위에서도 4.5:1이 되도록, 밝은 테마의 tertiary 글자를 한 단계 진하게 써요 */
  --text-tertiary: var(--gray-550);
}

[data-theme="dark"] {
  color-scheme: dark;

  --mw-accent: #a9dce9;
  --mw-accent-strong: #d4eef2;
  --mw-accent-pressed: #eaf7f9;
  --mw-accent-soft: #19344a;
  --mw-on-accent: #0b172a;
  --mw-accent-fill: var(--mw-accent);
  --mw-flat: var(--text-tertiary);
  --text-tertiary: var(--gray-400);
  --mw-focus: #a9dce9;

  --mw-ok: var(--teal-400);
  --mw-ok-soft: var(--teal-700);
  --mw-warn: var(--yellow-300);
  --mw-warn-soft: var(--yellow-700);
  --mw-critical: var(--red-400);
  --mw-critical-soft: var(--red-700);
  --mw-idle: var(--gray-600);

  --mw-gain: #f4525c;
  --mw-gain-strong: #ec797d;
  --mw-gain-soft: #3e090b;
  --mw-gain-on-soft: #f2a6a9;
  --mw-loss: #4590ea;
  --mw-loss-strong: #50b6fe;
  --mw-loss-soft: #001e42;
  --mw-loss-on-soft: #80d4ff;

  --mw-viz: #00a39b;
  --mw-viz-strong: #4cc8c3;
  --mw-viz-soft: #007f7f;
  --mw-viz-deemph: #4a4c50;
  --mw-viz-area-alpha: 0.14;
  --mw-cat-2: #c86400;
  --mw-cat-other: #6f737b;
  --mw-seq-0: #002629;
  --mw-seq-1: #00484e;
  --mw-seq-2: #005e66;
  --mw-seq-3: #007f7f;
  --mw-seq-4: #00a39b;
  --mw-seq-5: #4cc8c3;
  --mw-seq-6: #a9e5e1;
  --mw-seq-7: #e1f5f5;
  --mw-div-mid: #313235;

  --text-accent-primary: var(--mw-accent);
  --icon-accent-primary: var(--mw-accent);
  --border-accent-primary: var(--mw-accent);
  --fill-accent-primary-default: var(--mw-accent);
  --fill-accent-primary-hover: var(--mw-accent-strong);
  --fill-accent-primary-pressed: var(--mw-accent-pressed);
}

/* 테마와 상관없이 같은 값 — 브랜드 캔버스, 마크, 뼈대 치수, 움직임 */
:root {
  /* 마크: 어두운 타일, 흰 글리프, 붉은 점 */
  --mw-tile: #222222;
  --mw-glyph: var(--static-white);
  --mw-signal: #d71826;

  /* 캔버스: 서비스 히어로는 night, 브랜드 페이지는 graphite */
  --mw-night: #070d19;
  --mw-night-2: #101c30;
  --mw-graphite: #101112;
  --mw-graphite-2: #171819;
  --mw-pearl: #edece8;
  --mw-hero-gradient: radial-gradient(circle at 75% 45%, #254966, #14283e 38%, var(--mw-night) 86%);
  --mw-hero-ink: #f4f8fa;
  --mw-hero-muted: #cad9e2;
  --mw-hero-kicker: #b7e1e9;

  /* 동반자(Wavie) 팔레트 — AI 화면의 빛 */
  --mw-wavie-cyan: #a9dce9;
  --mw-wavie-blue: #729ec4;
  --mw-wavie-lavender: #b2bfd8;
  --mw-wavie-peach: #dfc4a0;

  /* 뼈대 */
  --mw-nav-w: 248px;
  --mw-panel-w: 440px;
  --mw-top-h: 72px;
  --mw-top-h-mobile: 56px;
  --mw-tabbar-h: 56px;
  --mw-rail-w: 64px;
  --mw-page-max: 1560px;
  --mw-page-pad: var(--space-32);
  --mw-reading-max: 760px;
  --mw-touch: 44px;

  /* 키트의 판: 서비스가 들고 있는 키트 사본이 지금 판인지 화면 점검이 이 값으로 알아요 */
  --mw-kit: "1.9";

  /* 정해진 자리의 값 — 공통 단계에 없고, 이름에 적힌 자리에만 써요 */
  --mw-font-size-11: 11px;
  --mw-font-size-28: 28px;
  --mw-radius-sheet: 22px;
  --mw-radius-login: 24px;

  /* 움직임 — 길이는 --motion-duration-short · medium · long(100 · 200 · 300ms)을 써요 */
  --mw-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --mw-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --mw-ease-pop: cubic-bezier(0.32, 1.6, 0.5, 1);
  --mw-duration-sheet: 420ms;
  --mw-duration-modal: 380ms;

  /* 글꼴 — 직접 호스팅한 Pretendard. 외부 CDN은 쓰지 않아요. */
  --font-family-default: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-family-brand: var(--font-family-default);
  --mw-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* 빠진 토큰 채우기 — 부품 스타일이 쓰지만 토큰 파일에 정의가 없던 이름이에요. 없으면 그 속성이 조용히 무시돼요. */
:root, [data-theme], [data-mode] {
  --space-6: 6px;
  --color-surface-default: var(--surface-primary);
  --border-accent-primary-default: var(--border-accent-primary);
  --text-button-chevron-container-compact-large-item-spacing: 0;
  --text-button-chevron-container-compact-medium-item-spacing: 0;
  --text-button-chevron-container-compact-small-item-spacing: 0;
  /* 10px 글자의 태그: 높이 20 · 18px가 되도록 줄 높이 12px */
  --tag-category-text-size-medium-typography-line-height: 120%;
  --tag-category-text-size-small-typography-line-height: 120%;
  --tag-status-text-size-medium-typography-line-height: 120%;
  --tag-status-text-size-small-typography-line-height: 120%;
  --tag-membership-text-size-medium-typography-line-height: 120%;
  --tag-membership-text-size-small-typography-line-height: 120%;
}

/* ── 5. Agent 모드 ── */
/* Agent Mode — Moonwave UX extra component */

/* AI 화면(Wavie · Bot · RAG)에 쓰는 색 세트예요. 배경이 한 단계 내려가고(라이트는 gray 50, 다크는 gray 900),
   그 위에 놓이는 글자 · 아이콘 · 테두리 · 채움이 대비를 지키도록 한 단계씩 옮겨 가요.

   쓰는 법
     <html data-mode="agent">                      라이트
     <html data-theme="dark" data-mode="agent">     다크
   화면 일부에만 붙여도 semantic 변수를 직접 읽는 스타일(AI 컴포넌트)은 바뀌어요.
   컴포넌트 토큰을 거치는 키트 컴포넌트까지 바꾸려면 html에 붙이세요. 이 파일은 moonwave-tokens 다음에 불러와요.

   값을 고른 기준
     키트의 semantic 변수는 한 벌이라서, 면의 단계(01 배경 · 02 카드 · 03 카드 안 · 04 떠 있는 면)마다 다른 값 가운데
     배경과 카드 두 곳에서 모두 대비가 유지되는 쪽을 골랐어요. 라이트는 회색 배경 기준(01), 다크는 카드 기준(02)이에요.
     각 줄 끝의 주석은 그 값을 가져온 역할 이름이에요. Agent 세트가 기본 세트와 같은 역할은 넣지 않았어요. */

[data-mode="agent"] {
  /* 배경과 면 */
  --background-primary: var(--gray-50); /* background / default */
  --surface-primary: var(--static-white); /* surface / primary-02 */
  --surface-secondary: var(--gray-50); /* surface / primary-03 */
  --surface-floating: var(--static-white); /* surface / primary-04 */

  /* 글자 */
  --text-secondary: var(--gray-650); /* text / secondary-01 */
  --text-tertiary: var(--gray-550); /* text / tertiary-01 */
  --text-disabled: var(--gray-350); /* text / disabled-01 */
  --text-feedback-info: var(--teal-600); /* text / feedback-info-01 */
  --text-feedback-critical: var(--red-600); /* text / feedback-critical-01 */

  /* 아이콘 */
  --icon-secondary: var(--gray-650); /* icon / secondary-01 */
  --icon-tertiary: var(--gray-550); /* icon / tertiary-01 */
  --icon-disabled: var(--gray-350); /* icon / disabled-01 */
  --icon-feedback-info: var(--teal-600); /* icon / feedback-Info-01 */
  --icon-feedback-critical: var(--red-600); /* icon / feedback-critical-01 */

  /* 테두리 */
  --border-primary: var(--gray-450); /* border / primary-01 */
  --border-secondary: var(--gray-150); /* border / secondary-01 */
  --border-tertiary: var(--gray-100); /* border / tertiary-01 */
  --border-disabled: var(--gray-200); /* border / disabled-01 */

  /* 채움 */
  --fill-secondary-default: var(--gray-150); /* fill / secondary-01 */
  --fill-secondary-hover: var(--gray-200); /* fill / secondary-hover-01 */
  --fill-secondary-pressed: var(--gray-250); /* fill / secondary-pressed-01 */
  --fill-tertiary-hover: var(--gray-100); /* fill / tertiary-hover-01 */
  --fill-tertiary-pressed: var(--gray-150); /* fill / tertiary-pressed-01 */
  --fill-primary-disabled: var(--gray-100); /* fill / disabled-01 */
  --fill-secondary-disabled: var(--gray-100); /* fill / disabled-01 */
  --fill-tertiary-disabled: var(--gray-100); /* fill / disabled-01 */
  --fill-accent-primary-disabled: var(--gray-100); /* fill / disabled-01 */
  --fill-accent-secondary-disabled: var(--gray-100); /* fill / disabled-01 */

  /* 태그 */
  --tag-status-fill-default: var(--gray-150); /* tag / status / fill / default */
  --tag-status-fill-success: var(--gray-150); /* tag / status / fill / complete */
  --tag-status-fill-info: #cdeeee; /* tag / status / fill / info = teal 150. 키트에 이 단계의 primitive가 없어서 값을 직접 썼어요 */
  --tag-status-fill-critical: #fadbdc; /* tag / status / fill / critical = red 150. 키트에 이 단계의 primitive가 없어서 값을 직접 썼어요 */
  --tag-status-fill-warning: #ffe8d1; /* tag / status / fill / warning = yellow 150. 키트에 이 단계의 primitive가 없어서 값을 직접 썼어요 */
  --tag-status-fill-progress: #c2ebff; /* tag / status / fill / progress = blue 150. 키트에 이 단계의 primitive가 없어서 값을 직접 썼어요 */
  --tag-status-fill-disabled: var(--gray-100); /* tag / status / fill / disabled */
  --tag-status-text-default: var(--gray-650); /* tag / status / text / default */
  --tag-status-text-disabled: var(--gray-350); /* tag / status / text / disabled */
  --tag-category-fill-basic: var(--gray-150); /* tag / category / fill / basic */
  --tag-category-fill-recommend: #cdeeee; /* tag / category / fill / recommend = teal 150. 키트에 이 단계의 primitive가 없어서 값을 직접 썼어요 */
  --tag-category-fill-sale: #fadbdc; /* tag / category / fill / sale = red 150. 키트에 이 단계의 primitive가 없어서 값을 직접 썼어요 */
  --tag-category-fill-hot: #c2ebff; /* tag / category / fill / hot = blue 150. 키트에 이 단계의 primitive가 없어서 값을 직접 썼어요 */
  --tag-category-fill-new: #e7e0ff; /* tag / category / fill / new = purple 150. 키트에 이 단계의 primitive가 없어서 값을 직접 썼어요 */
  --tag-category-text-basic: var(--gray-650); /* tag / category / text / basic */
  --tag-membership-fill-silver: var(--gray-550); /* tag / membership / fill / silver */
  --tag-membership-fill-standard: var(--gray-150); /* tag / membership / fill / standard */
  --tag-membership-fill-white: var(--gray-150); /* tag / membership / fill / white */
  --tag-membership-text-secondary: var(--gray-650); /* tag / membership / text / secondary */

  /* AI 진행 표시 그라데이션: gradient / ai-indicator end → stop → start */
  --gradient-ai-indicator: linear-gradient(90deg, var(--gray-900) 0%, var(--gray-400) 58%, var(--gray-600) 100%);
}

/* 다크 */

[data-theme="dark"][data-mode="agent"],
[data-theme="dark"] [data-mode="agent"] {
  /* 배경과 면 */
  --background-primary: var(--gray-900); /* background / default */
  --surface-primary: var(--gray-800); /* surface / primary-02 */
  --surface-secondary: var(--gray-750); /* surface / primary-03 */
  --surface-floating: var(--gray-800); /* surface / primary-04 */

  /* 글자 */
  --text-secondary: var(--gray-200); /* text / secondary-02 */
  --text-tertiary: var(--gray-400); /* text / tertiary-02 */
  --text-disabled: var(--gray-600); /* text / disabled-02 */
  --text-feedback-info: var(--teal-400); /* text / feedback-info-02 */
  --text-feedback-critical: var(--red-400); /* text / feedback-critical-02 */

  /* 아이콘 */
  --icon-secondary: var(--gray-200); /* icon / secondary-02 */
  --icon-tertiary: var(--gray-400); /* icon / tertiary-02 */
  --icon-disabled: var(--gray-600); /* icon / disabled-02 */
  --icon-feedback-info: var(--teal-400); /* icon / feedback-Info-02 */
  --icon-feedback-critical: var(--red-400); /* icon / feedback-critical-02 */

  /* 테두리 */
  --border-primary: var(--gray-450); /* border / primary-02 */
  --border-secondary: var(--gray-650); /* border / secondary-02 */
  --border-tertiary: var(--gray-750); /* border / tertiary-02 */
  --border-disabled: var(--gray-650); /* border / disabled-02 */

  /* 채움 */
  --fill-secondary-default: var(--gray-650); /* fill / secondary-02 */
  --fill-secondary-hover: var(--gray-600); /* fill / secondary-hover-02 */
  --fill-secondary-pressed: var(--gray-550); /* fill / secondary-pressed-02 */
  --fill-tertiary-hover: var(--gray-750); /* fill / tertiary-hover-02 */
  --fill-tertiary-pressed: var(--gray-700); /* fill / tertiary-pressed-02 */
  --fill-primary-disabled: var(--gray-750); /* fill / disabled-02 */
  --fill-secondary-disabled: var(--gray-750); /* fill / disabled-02 */
  --fill-tertiary-disabled: var(--gray-750); /* fill / disabled-02 */
  --fill-accent-primary-disabled: var(--gray-750); /* fill / disabled-02 */
  --fill-accent-secondary-disabled: var(--gray-750); /* fill / disabled-02 */

  /* 태그 */
  --tag-status-fill-default: var(--gray-700); /* tag / status / fill / default */
  --tag-status-fill-success: var(--gray-600); /* tag / status / fill / complete */
  --tag-status-fill-info: var(--teal-700); /* tag / status / fill / info */
  --tag-status-fill-critical: var(--red-700); /* tag / status / fill / critical */
  --tag-status-fill-warning: var(--yellow-700); /* tag / status / fill / warning */
  --tag-status-fill-progress: var(--blue-700); /* tag / status / fill / progress */
  --tag-status-fill-disabled: var(--gray-700); /* tag / status / fill / disabled */
  --tag-status-text-default: var(--static-white); /* tag / status / text / default */
  --tag-status-text-disabled: var(--gray-600); /* tag / status / text / disabled */
  --tag-category-fill-basic: var(--gray-700); /* tag / category / fill / basic */
  --tag-category-fill-recommend: var(--teal-700); /* tag / category / fill / recommend */
  --tag-category-fill-sale: var(--red-700); /* tag / category / fill / sale */
  --tag-category-fill-hot: var(--blue-700); /* tag / category / fill / hot */
  --tag-category-fill-new: var(--purple-700); /* tag / category / fill / new */
  --tag-category-text-basic: var(--static-white); /* tag / category / text / basic */
  --tag-membership-fill-silver: var(--gray-400); /* tag / membership / fill / silver */
  --tag-membership-fill-standard: var(--gray-700); /* tag / membership / fill / standard */
  --tag-membership-fill-white: var(--gray-600); /* tag / membership / fill / white */
  --tag-membership-text-secondary: var(--static-white); /* tag / membership / text / secondary */

  /* AI 진행 표시 그라데이션: gradient / ai-indicator end → stop → start */
  --gradient-ai-indicator: linear-gradient(90deg, var(--static-white) 0%, var(--gray-500) 58%, var(--gray-300) 100%);
}

.display-xlarge-medium {
  font-family: var(--display-xlarge-medium-font-family);
  font-weight: var(--display-xlarge-medium-font-weight);
  font-size: var(--display-xlarge-medium-font-size);
  line-height: var(--display-xlarge-medium-line-height);
  letter-spacing: var(--display-xlarge-medium-letter-spacing);
}
.display-xlarge-bold {
  font-family: var(--display-xlarge-bold-font-family);
  font-weight: var(--display-xlarge-bold-font-weight);
  font-size: var(--display-xlarge-bold-font-size);
  line-height: var(--display-xlarge-bold-line-height);
  letter-spacing: var(--display-xlarge-bold-letter-spacing);
}
.display-large-medium {
  font-family: var(--display-large-medium-font-family);
  font-weight: var(--display-large-medium-font-weight);
  font-size: var(--display-large-medium-font-size);
  line-height: var(--display-large-medium-line-height);
  letter-spacing: var(--display-large-medium-letter-spacing);
}
.display-large-bold {
  font-family: var(--display-large-bold-font-family);
  font-weight: var(--display-large-bold-font-weight);
  font-size: var(--display-large-bold-font-size);
  line-height: var(--display-large-bold-line-height);
  letter-spacing: var(--display-large-bold-letter-spacing);
}
.display-medium-medium {
  font-family: var(--display-medium-medium-font-family);
  font-weight: var(--display-medium-medium-font-weight);
  font-size: var(--display-medium-medium-font-size);
  line-height: var(--display-medium-medium-line-height);
  letter-spacing: var(--display-medium-medium-letter-spacing);
}
.display-medium-bold {
  font-family: var(--display-medium-bold-font-family);
  font-weight: var(--display-medium-bold-font-weight);
  font-size: var(--display-medium-bold-font-size);
  line-height: var(--display-medium-bold-line-height);
  letter-spacing: var(--display-medium-bold-letter-spacing);
}
.heading-large-medium {
  font-family: var(--heading-large-medium-font-family);
  font-weight: var(--heading-large-medium-font-weight);
  font-size: var(--heading-large-medium-font-size);
  line-height: var(--heading-large-medium-line-height);
  letter-spacing: var(--heading-large-medium-letter-spacing);
}
.heading-large-bold {
  font-family: var(--heading-large-bold-font-family);
  font-weight: var(--heading-large-bold-font-weight);
  font-size: var(--heading-large-bold-font-size);
  line-height: var(--heading-large-bold-line-height);
  letter-spacing: var(--heading-large-bold-letter-spacing);
}
.heading-medium-medium {
  font-family: var(--heading-medium-medium-font-family);
  font-weight: var(--heading-medium-medium-font-weight);
  font-size: var(--heading-medium-medium-font-size);
  line-height: var(--heading-medium-medium-line-height);
  letter-spacing: var(--heading-medium-medium-letter-spacing);
}
.heading-medium-bold {
  font-family: var(--heading-medium-bold-font-family);
  font-weight: var(--heading-medium-bold-font-weight);
  font-size: var(--heading-medium-bold-font-size);
  line-height: var(--heading-medium-bold-line-height);
  letter-spacing: var(--heading-medium-bold-letter-spacing);
}
.heading-small-medium {
  font-family: var(--heading-small-medium-font-family);
  font-weight: var(--heading-small-medium-font-weight);
  font-size: var(--heading-small-medium-font-size);
  line-height: var(--heading-small-medium-line-height);
  letter-spacing: var(--heading-small-medium-letter-spacing);
}
.heading-small-bold {
  font-family: var(--heading-small-bold-font-family);
  font-weight: var(--heading-small-bold-font-weight);
  font-size: var(--heading-small-bold-font-size);
  line-height: var(--heading-small-bold-line-height);
  letter-spacing: var(--heading-small-bold-letter-spacing);
}
.title-large-medium {
  font-family: var(--title-large-medium-font-family);
  font-weight: var(--title-large-medium-font-weight);
  font-size: var(--title-large-medium-font-size);
  line-height: var(--title-large-medium-line-height);
  letter-spacing: var(--title-large-medium-letter-spacing);
}
.title-large-bold {
  font-family: var(--title-large-bold-font-family);
  font-weight: var(--title-large-bold-font-weight);
  font-size: var(--title-large-bold-font-size);
  line-height: var(--title-large-bold-line-height);
  letter-spacing: var(--title-large-bold-letter-spacing);
}
.title-medium-medium {
  font-family: var(--title-medium-medium-font-family);
  font-weight: var(--title-medium-medium-font-weight);
  font-size: var(--title-medium-medium-font-size);
  line-height: var(--title-medium-medium-line-height);
  letter-spacing: var(--title-medium-medium-letter-spacing);
}
.title-medium-bold {
  font-family: var(--title-medium-bold-font-family);
  font-weight: var(--title-medium-bold-font-weight);
  font-size: var(--title-medium-bold-font-size);
  line-height: var(--title-medium-bold-line-height);
  letter-spacing: var(--title-medium-bold-letter-spacing);
}
.title-small-medium {
  font-family: var(--title-small-medium-font-family);
  font-weight: var(--title-small-medium-font-weight);
  font-size: var(--title-small-medium-font-size);
  line-height: var(--title-small-medium-line-height);
  letter-spacing: var(--title-small-medium-letter-spacing);
}
.title-small-bold {
  font-family: var(--title-small-bold-font-family);
  font-weight: var(--title-small-bold-font-weight);
  font-size: var(--title-small-bold-font-size);
  line-height: var(--title-small-bold-line-height);
  letter-spacing: var(--title-small-bold-letter-spacing);
}
.body-large-medium {
  font-family: var(--body-large-medium-font-family);
  font-weight: var(--body-large-medium-font-weight);
  font-size: var(--body-large-medium-font-size);
  line-height: var(--body-large-medium-line-height);
  letter-spacing: var(--body-large-medium-letter-spacing);
}
.body-large-bold {
  font-family: var(--body-large-bold-font-family);
  font-weight: var(--body-large-bold-font-weight);
  font-size: var(--body-large-bold-font-size);
  line-height: var(--body-large-bold-line-height);
  letter-spacing: var(--body-large-bold-letter-spacing);
}
.body-medium-medium {
  font-family: var(--body-medium-medium-font-family);
  font-weight: var(--body-medium-medium-font-weight);
  font-size: var(--body-medium-medium-font-size);
  line-height: var(--body-medium-medium-line-height);
  letter-spacing: var(--body-medium-medium-letter-spacing);
}
.body-medium-bold {
  font-family: var(--body-medium-bold-font-family);
  font-weight: var(--body-medium-bold-font-weight);
  font-size: var(--body-medium-bold-font-size);
  line-height: var(--body-medium-bold-line-height);
  letter-spacing: var(--body-medium-bold-letter-spacing);
}
.body-small-medium {
  font-family: var(--body-small-medium-font-family);
  font-weight: var(--body-small-medium-font-weight);
  font-size: var(--body-small-medium-font-size);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
}
.body-small-semibold {
  font-family: var(--body-small-semibold-font-family);
  font-weight: var(--body-small-semibold-font-weight);
  font-size: var(--body-small-semibold-font-size);
  line-height: var(--body-small-semibold-line-height);
  letter-spacing: var(--body-small-semibold-letter-spacing);
}
.body-small-bold {
  font-family: var(--body-small-bold-font-family);
  font-weight: var(--body-small-bold-font-weight);
  font-size: var(--body-small-bold-font-size);
  line-height: var(--body-small-bold-line-height);
  letter-spacing: var(--body-small-bold-letter-spacing);
}
.body-reading-large-medium {
  font-family: var(--body-reading-large-medium-font-family);
  font-weight: var(--body-reading-large-medium-font-weight);
  font-size: var(--body-reading-large-medium-font-size);
  line-height: var(--body-reading-large-medium-line-height);
  letter-spacing: var(--body-reading-large-medium-letter-spacing);
}
.body-reading-large-bold {
  font-family: var(--body-reading-large-bold-font-family);
  font-weight: var(--body-reading-large-bold-font-weight);
  font-size: var(--body-reading-large-bold-font-size);
  line-height: var(--body-reading-large-bold-line-height);
  letter-spacing: var(--body-reading-large-bold-letter-spacing);
}
.body-reading-medium-medium {
  font-family: var(--body-reading-medium-medium-font-family);
  font-weight: var(--body-reading-medium-medium-font-weight);
  font-size: var(--body-reading-medium-medium-font-size);
  line-height: var(--body-reading-medium-medium-line-height);
  letter-spacing: var(--body-reading-medium-medium-letter-spacing);
}
.body-reading-medium-bold {
  font-family: var(--body-reading-medium-bold-font-family);
  font-weight: var(--body-reading-medium-bold-font-weight);
  font-size: var(--body-reading-medium-bold-font-size);
  line-height: var(--body-reading-medium-bold-line-height);
  letter-spacing: var(--body-reading-medium-bold-letter-spacing);
}
.body-reading-small-medium {
  font-family: var(--body-reading-small-medium-font-family);
  font-weight: var(--body-reading-small-medium-font-weight);
  font-size: var(--body-reading-small-medium-font-size);
  line-height: var(--body-reading-small-medium-line-height);
  letter-spacing: var(--body-reading-small-medium-letter-spacing);
}
.body-reading-small-bold {
  font-family: var(--body-reading-small-bold-font-family);
  font-weight: var(--body-reading-small-bold-font-weight);
  font-size: var(--body-reading-small-bold-font-size);
  line-height: var(--body-reading-small-bold-line-height);
  letter-spacing: var(--body-reading-small-bold-letter-spacing);
}
.label-large-medium {
  font-family: var(--label-large-medium-font-family);
  font-weight: var(--label-large-medium-font-weight);
  font-size: var(--label-large-medium-font-size);
  line-height: var(--label-large-medium-line-height);
  letter-spacing: var(--label-large-medium-letter-spacing);
}
.label-medium-semibold {
  font-family: var(--label-medium-semibold-font-family);
  font-weight: var(--label-medium-semibold-font-weight);
  font-size: var(--label-medium-semibold-font-size);
  line-height: var(--label-medium-semibold-line-height);
  letter-spacing: var(--label-medium-semibold-letter-spacing);
}
.label-small-medium {
  font-family: var(--label-small-medium-font-family);
  font-weight: var(--label-small-medium-font-weight);
  font-size: var(--label-small-medium-font-size);
  line-height: var(--label-small-medium-line-height);
  letter-spacing: var(--label-small-medium-letter-spacing);
}
.label-small-bold {
  font-family: var(--label-small-bold-font-family);
  font-weight: var(--label-small-bold-font-weight);
  font-size: var(--label-small-bold-font-size);
  line-height: var(--label-small-bold-line-height);
  letter-spacing: var(--label-small-bold-letter-spacing);
}
.label-xsmall-semibold {
  font-family: var(--label-xsmall-semibold-font-family);
  font-weight: var(--label-xsmall-semibold-font-weight);
  font-size: var(--label-xsmall-semibold-font-size);
  letter-spacing: var(--label-xsmall-semibold-letter-spacing);
}
.label-xsmall-bold {
  font-family: var(--label-xsmall-bold-font-family);
  font-weight: var(--label-xsmall-bold-font-weight);
  font-size: var(--label-xsmall-bold-font-size);
  letter-spacing: var(--label-xsmall-bold-letter-spacing);
}
.caption-medium-medium {
  font-family: var(--caption-medium-medium-font-family);
  font-weight: var(--caption-medium-medium-font-weight);
  font-size: var(--caption-medium-medium-font-size);
  line-height: var(--caption-medium-medium-line-height);
  letter-spacing: var(--caption-medium-medium-letter-spacing);
}
.caption-medium-semibold {
  font-family: var(--caption-medium-semibold-font-family);
  font-weight: var(--caption-medium-semibold-font-weight);
  font-size: var(--caption-medium-semibold-font-size);
  line-height: var(--caption-medium-semibold-line-height);
  letter-spacing: var(--caption-medium-semibold-letter-spacing);
}

/* ── Button ── */
.mw-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  gap: var(--space-4);
  padding-top: 0;
  padding-bottom: 0;
}

.mw-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Sizes */

.mw-button--small {
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: var(--button-container-small-default-padding-left);
  padding-right: var(--button-container-small-default-padding-right);
  font-size: var(--button-text-size-small-typography-font-size);
  line-height: var(--button-text-size-small-typography-line-height);
  font-family: var(--button-text-size-small-typography-font-family);
  font-weight: var(--button-text-size-small-typography-font-weight);
  letter-spacing: var(--button-text-size-small-typography-letter-spacing);
  border-radius: var(--button-container-small-default-border-radius);
}

.mw-button--medium {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: var(--button-container-medium-default-padding-left);
  padding-right: var(--button-container-medium-default-padding-right);
  font-size: var(--button-text-size-medium-typography-font-size);
  line-height: var(--button-text-size-medium-typography-line-height);
  font-family: var(--button-text-size-medium-typography-font-family);
  font-weight: var(--button-text-size-medium-typography-font-weight);
  letter-spacing: var(--button-text-size-medium-typography-letter-spacing);
  border-radius: var(--button-container-medium-default-border-radius);
}

.mw-button--large {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: var(--button-container-large-default-padding-left);
  padding-right: var(--button-container-large-default-padding-right);
  font-size: var(--button-text-size-large-typography-font-size);
  line-height: var(--button-text-size-large-typography-line-height);
  font-family: var(--button-text-size-large-typography-font-family);
  font-weight: var(--button-text-size-large-typography-font-weight);
  letter-spacing: var(--button-text-size-large-typography-letter-spacing);
  border-radius: var(--button-container-large-default-border-radius);
}

/* Variants */

.mw-button--primary {
  background-color: var(--button-fill-primary-default-fill);
  color: var(--button-text-color-primary-default-fill);
  border: var(--button-fill-primary-default-border-width) solid transparent;
}

.mw-button--primary:hover:not(:disabled) {
  background-color: var(--button-fill-primary-hover-fill);
  border-width: var(--button-fill-primary-hover-border-width);
}

.mw-button--primary:active:not(:disabled) {
  background-color: var(--button-fill-primary-pressed-fill);
  border-width: var(--button-fill-primary-pressed-border-width);
}

.mw-button--primary:disabled {
  background-color: var(--button-fill-primary-disabled-fill);
  color: var(--button-text-color-primary-disabled-fill);
  border-width: var(--button-fill-primary-disabled-border-width);
}

.mw-button--secondary {
  background-color: var(--button-fill-secondary-default-fill);
  color: var(--button-text-color-secondary-default-fill);
  border: var(--button-fill-secondary-default-border-width) solid transparent;
}

.mw-button--secondary:hover:not(:disabled) {
  background-color: var(--button-fill-secondary-hover-fill);
  border-width: var(--button-fill-secondary-hover-border-width);
}

.mw-button--secondary:active:not(:disabled) {
  background-color: var(--button-fill-secondary-pressed-fill);
  border-width: var(--button-fill-secondary-pressed-border-width);
}

.mw-button--secondary:disabled {
  background-color: var(--button-fill-secondary-disabled-fill);
  color: var(--button-text-color-secondary-disabled-fill);
  border-width: var(--button-fill-secondary-disabled-border-width);
}

.mw-button--tertiary {
  background-color: var(--button-fill-tertiary-default-fill);
  color: var(--button-text-color-tertiary-default-fill);
  border: var(--button-fill-tertiary-default-border-width)
    var(--button-fill-tertiary-default-border-style)
    var(--button-fill-tertiary-default-border-color);
}

.mw-button--tertiary:hover:not(:disabled) {
  background-color: var(--button-fill-tertiary-hover-fill);
  border: var(--button-fill-tertiary-hover-border-width)
    var(--button-fill-tertiary-hover-border-style)
    var(--button-fill-tertiary-hover-border-color);
}

.mw-button--tertiary:active:not(:disabled) {
  background-color: var(--button-fill-tertiary-pressed-fill);
  border: var(--button-fill-tertiary-pressed-border-width)
    var(--button-fill-tertiary-pressed-border-style)
    var(--button-fill-tertiary-pressed-border-color);
}

.mw-button--tertiary:disabled {
  background-color: var(--button-fill-tertiary-disabled-fill);
  color: var(--button-text-color-tertiary-disabled-fill);
  border: var(--button-fill-tertiary-disabled-border-width)
    var(--button-fill-tertiary-disabled-border-style)
    var(--button-fill-tertiary-disabled-border-color);
}

.mw-button--accent-primary {
  background-color: var(--button-fill-accent-primary-default-fill);
  color: var(--button-text-color-accent-primary-default-fill);
  border: var(--button-fill-accent-primary-default-border-width) solid
    transparent;
}

.mw-button--accent-primary:hover:not(:disabled) {
  background-color: var(--button-fill-accent-primary-hover-fill);
  border-width: var(--button-fill-accent-primary-hover-border-width);
}

.mw-button--accent-primary:active:not(:disabled) {
  background-color: var(--button-fill-accent-primary-pressed-fill);
  border-width: var(--button-fill-accent-primary-pressed-border-width);
}

.mw-button--accent-primary:disabled {
  background-color: var(--button-fill-accent-primary-disabled-fill);
  color: var(--button-text-color-accent-primary-disabled-fill);
  border-width: var(--button-fill-accent-primary-disabled-border-width);
}

/* Icon Styles */

.mw-button svg,
.mw-button .mw-button__icon {
  flex-shrink: 0;
}

/* Icon sizes - with text */

.mw-button--small svg,
.mw-button--small .mw-button__icon {
  width: var(--button-icon-size-icon-button-small-sizing);
  height: var(--button-icon-size-icon-button-small-sizing);
}

.mw-button--medium svg,
.mw-button--medium .mw-button__icon {
  width: var(--button-icon-size-icon-button-medium-sizing);
  height: var(--button-icon-size-icon-button-medium-sizing);
}

.mw-button--large svg,
.mw-button--large .mw-button__icon {
  width: var(--button-icon-size-icon-button-large-sizing);
  height: var(--button-icon-size-icon-button-large-sizing);
}

/* Icon sizes - icon only */

.mw-button--icon-only.mw-button--small {
  aspect-ratio: 1;
  padding-left: 6px;
  padding-right: 6px;
}

.mw-button--icon-only.mw-button--small svg,
.mw-button--icon-only.mw-button--small .mw-button__icon {
  width: var(--button-icon-size-icon-only-small-sizing);
  height: var(--button-icon-size-icon-only-small-sizing);
}

.mw-button--icon-only.mw-button--medium {
  aspect-ratio: 1;
  padding-left: 10px;
  padding-right: 10px;
}

.mw-button--icon-only.mw-button--medium svg,
.mw-button--icon-only.mw-button--medium .mw-button__icon {
  width: var(--button-icon-size-icon-only-medium-sizing);
  height: var(--button-icon-size-icon-only-medium-sizing);
}

.mw-button--icon-only.mw-button--large {
  aspect-ratio: 1;
  padding-left: 12px;
  padding-right: 12px;
}

.mw-button--icon-only.mw-button--large svg,
.mw-button--icon-only.mw-button--large .mw-button__icon {
  width: var(--button-icon-size-icon-only-large-sizing);
  height: var(--button-icon-size-icon-only-large-sizing);
}

.mw-button--primary svg,
.mw-button--primary .mw-button__icon {
  color: var(--button-icon-color-accent-primary-default-fill);
}

.mw-button--primary:disabled svg,
.mw-button--primary:disabled .mw-button__icon {
  color: var(--button-icon-color-accent-primary-disabled-fill);
}

.mw-button--secondary svg,
.mw-button--secondary .mw-button__icon {
  color: var(--button-icon-color-secondary-default-fill);
}

.mw-button--secondary:disabled svg,
.mw-button--secondary:disabled .mw-button__icon {
  color: var(--button-icon-color-secondary-disabled-fill);
}

.mw-button--tertiary svg,
.mw-button--tertiary .mw-button__icon {
  color: var(--button-icon-color-tertiary-default-fill);
}

.mw-button--tertiary:disabled svg,
.mw-button--tertiary:disabled .mw-button__icon {
  color: var(--button-icon-color-tertiary-disabled-fill);
}

.mw-button--accent-primary svg,
.mw-button--accent-primary .mw-button__icon {
  color: var(--button-icon-color-accent-primary-default-fill);
}

.mw-button--accent-primary:disabled svg,
.mw-button--accent-primary:disabled .mw-button__icon {
  color: var(--button-icon-color-accent-primary-disabled-fill);
}

/* Icon Position Padding Adjustments */

/* 버튼 컴포넌트가 children을 분석하여 클래스를 추가함 */

/* 아이콘이 왼쪽에 있을 때 */

.mw-button--icon-left.mw-button--small {
  padding-left: var(--button-container-small-icon-left-padding-left);
  padding-right: var(--button-container-small-icon-left-padding-right);
  gap: var(--space-4);
}

.mw-button--icon-left.mw-button--medium {
  padding-left: var(--button-container-medium-icon-left-padding-left);
  padding-right: var(--button-container-medium-icon-left-padding-right);
  gap: var(--button-container-medium-icon-left-item-spacing);
}

.mw-button--icon-left.mw-button--large {
  padding-left: var(--button-container-large-icon-left-padding-left);
  padding-right: var(--button-container-large-icon-left-padding-right);
  gap: var(--button-container-large-icon-left-item-spacing);
}

/* 아이콘이 오른쪽에 있을 때 */

.mw-button--icon-right.mw-button--small {
  padding-left: var(--button-container-small-icon-right-padding-left);
  padding-right: var(--button-container-small-icon-right-padding-right);
  gap: var(--button-container-small-icon-right-item-spacing);
}

.mw-button--icon-right.mw-button--medium {
  padding-left: var(--button-container-medium-icon-right-padding-left);
  padding-right: var(--button-container-medium-icon-right-padding-right);
  gap: var(--button-container-medium-icon-right-item-spacing);
}

.mw-button--icon-right.mw-button--large {
  padding-left: var(--button-container-large-icon-right-padding-left);
  padding-right: var(--button-container-large-icon-right-padding-right);
  gap: var(--button-container-large-icon-right-item-spacing);
}

/* ── TextButton ── */
.mw-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  background-color: transparent;
  padding-top: 0;
  padding-bottom: 0;
}

.mw-text-button:disabled {
  cursor: not-allowed;
}

/* Sizes - Base Typography */

.mw-text-button--small {
  font-size: var(--text-button-text-size-small-typography-font-size);
  line-height: var(--text-button-text-size-small-typography-line-height);
  font-family: var(--text-button-text-size-small-typography-font-family);
  font-weight: var(--text-button-text-size-small-typography-font-weight);
  letter-spacing: var(--text-button-text-size-small-typography-letter-spacing);
}

.mw-text-button--medium {
  font-size: var(--text-button-text-size-medium-typography-font-size);
  line-height: var(--text-button-text-size-medium-typography-line-height);
  font-family: var(--text-button-text-size-medium-typography-font-family);
  font-weight: var(--text-button-text-size-medium-typography-font-weight);
  letter-spacing: var(--text-button-text-size-medium-typography-letter-spacing);
}

.mw-text-button--large {
  font-size: var(--text-button-text-size-large-typography-font-size);
  line-height: var(--text-button-text-size-large-typography-line-height);
  font-family: var(--text-button-text-size-large-typography-font-family);
  font-weight: var(--text-button-text-size-large-typography-font-weight);
  letter-spacing: var(--text-button-text-size-large-typography-letter-spacing);
}

/* ========== Chevron Variant ========== */

/* Chevron - Default Density */

.mw-text-button--chevron.mw-text-button--default.mw-text-button--small {
  height: var(--text-button-chevron-container-default-small-height);
  padding-left: var(--text-button-chevron-container-default-small-padding-left);
  padding-right: var(
    --text-button-chevron-container-default-small-padding-right
  );
  border-radius: var(
    --text-button-chevron-container-default-small-border-radius
  );
  gap: var(--text-button-chevron-container-default-small-item-spacing);
}

.mw-text-button--chevron.mw-text-button--default.mw-text-button--medium {
  height: var(--text-button-chevron-container-default-medium-height);
  padding-left: var(
    --text-button-chevron-container-default-medium-padding-left
  );
  padding-right: var(
    --text-button-chevron-container-default-medium-padding-right
  );
  border-radius: var(
    --text-button-chevron-container-default-medium-border-radius
  );
  gap: var(--text-button-chevron-container-default-medium-item-spacing);
}

.mw-text-button--chevron.mw-text-button--default.mw-text-button--large {
  height: var(--text-button-chevron-container-default-large-height);
  padding-left: var(--text-button-chevron-container-default-large-padding-left);
  padding-right: var(
    --text-button-chevron-container-default-large-padding-right
  );
  border-radius: var(
    --text-button-chevron-container-default-large-border-radius
  );
  gap: var(--text-button-chevron-container-default-large-item-spacing);
}

/* Chevron - Compact Density */

.mw-text-button--chevron.mw-text-button--compact.mw-text-button--small {
  height: var(--text-button-chevron-container-compact-small-height);
  padding-left: var(--text-button-chevron-container-compact-small-padding-left);
  padding-right: var(
    --text-button-chevron-container-compact-small-padding-right
  );
  border-radius: var(
    --text-button-chevron-container-compact-small-border-radius
  );
  gap: var(--text-button-chevron-container-compact-small-item-spacing);
}

.mw-text-button--chevron.mw-text-button--compact.mw-text-button--medium {
  height: var(--text-button-chevron-container-compact-medium-height);
  padding-left: var(
    --text-button-chevron-container-compact-medium-padding-left
  );
  padding-right: var(
    --text-button-chevron-container-compact-medium-padding-right
  );
  border-radius: var(
    --text-button-chevron-container-compact-medium-border-radius
  );
  gap: var(--text-button-chevron-container-compact-medium-item-spacing);
}

.mw-text-button--chevron.mw-text-button--compact.mw-text-button--large {
  height: var(--text-button-chevron-container-compact-large-height);
  padding-left: var(--text-button-chevron-container-compact-large-padding-left);
  padding-right: var(
    --text-button-chevron-container-compact-large-padding-right
  );
  border-radius: var(
    --text-button-chevron-container-compact-large-border-radius
  );
  gap: var(--text-button-chevron-container-compact-large-item-spacing);
}

/* Chevron - States */

.mw-text-button--chevron {
  color: var(--text-button-chevron-text-color-default-fill);
  background-color: var(--text-button-chevron-fill-default-fill);
}

.mw-text-button--chevron:hover:not(:disabled) {
  background-color: var(--text-button-chevron-fill-hover-fill);
}

.mw-text-button--chevron:active:not(:disabled) {
  background-color: var(--text-button-chevron-fill-pressed-fill);
}

.mw-text-button--chevron:disabled {
  color: var(--text-button-chevron-text-color-disabled-fill);
}

.mw-text-button--chevron svg {
  color: var(--text-button-chevron-icon-color-default-fill);
}

.mw-text-button--chevron:disabled svg {
  color: var(--text-button-chevron-icon-color-disabled-fill);
}

/* ========== Ghost Variant ========== */

/* Ghost - Default Density */

.mw-text-button--ghost.mw-text-button--default.mw-text-button--small {
  height: var(--text-button-ghost-container-default-small-height);
  padding-left: var(
    --text-button-ghost-container-default-small-horizontal-padding
  );
  padding-right: var(
    --text-button-ghost-container-default-small-horizontal-padding
  );
  border-radius: var(--text-button-ghost-container-default-small-border-radius);
}

.mw-text-button--ghost.mw-text-button--default.mw-text-button--medium {
  height: var(--text-button-ghost-container-default-medium-height);
  padding-left: var(
    --text-button-ghost-container-default-medium-horizontal-padding
  );
  padding-right: var(
    --text-button-ghost-container-default-medium-horizontal-padding
  );
  border-radius: var(
    --text-button-ghost-container-default-medium-border-radius
  );
}

.mw-text-button--ghost.mw-text-button--default.mw-text-button--large {
  height: var(--text-button-ghost-container-default-large-height);
  padding-left: var(
    --text-button-ghost-container-default-large-horizontal-padding
  );
  padding-right: var(
    --text-button-ghost-container-default-large-horizontal-padding
  );
  border-radius: var(--text-button-ghost-container-default-large-border-radius);
}

/* Ghost - Compact Density */

.mw-text-button--ghost.mw-text-button--compact.mw-text-button--small {
  height: var(--text-button-ghost-container-compact-small-height);
  padding-left: var(
    --text-button-ghost-container-compact-small-horizontal-padding
  );
  padding-right: var(
    --text-button-ghost-container-compact-small-horizontal-padding
  );
  border-radius: var(--text-button-ghost-container-compact-small-border-radius);
}

.mw-text-button--ghost.mw-text-button--compact.mw-text-button--medium {
  height: var(--text-button-ghost-container-compact-medium-height);
  padding-left: var(
    --text-button-ghost-container-compact-medium-horizontal-padding
  );
  padding-right: var(
    --text-button-ghost-container-compact-medium-horizontal-padding
  );
  border-radius: var(
    --text-button-ghost-container-compact-medium-border-radius
  );
}

.mw-text-button--ghost.mw-text-button--compact.mw-text-button--large {
  height: var(--text-button-ghost-container-compact-large-height);
  padding-left: var(
    --text-button-ghost-container-compact-large-horizontal-padding
  );
  padding-right: var(
    --text-button-ghost-container-compact-large-horizontal-padding
  );
  border-radius: var(--text-button-ghost-container-compact-large-border-radius);
}

/* Ghost - States */

.mw-text-button--ghost {
  color: var(--text-button-ghost-text-color-default-fill);
  background-color: var(--text-button-ghost-fill-default-fill);
}

.mw-text-button--ghost:hover:not(:disabled) {
  background-color: var(--text-button-ghost-fill-hover-fill);
}

.mw-text-button--ghost:active:not(:disabled) {
  background-color: var(--text-button-ghost-fill-pressed-fill);
}

.mw-text-button--ghost:disabled {
  color: var(--text-button-ghost-text-color-disabled-fill);
}

/* ========== Underline Variant ========== */

/* Underline - Default Density */

.mw-text-button--underline.mw-text-button--default.mw-text-button--small {
  height: var(--text-button-underline-container-default-small-height);
  padding-left: var(
    --text-button-underline-container-default-small-horizontal-padding
  );
  padding-right: var(
    --text-button-underline-container-default-small-horizontal-padding
  );
  border-radius: var(
    --text-button-underline-container-default-small-border-radius
  );
}

.mw-text-button--underline.mw-text-button--default.mw-text-button--medium {
  height: var(--text-button-underline-container-default-medium-height);
  padding-left: var(
    --text-button-underline-container-default-medium-horizontal-padding
  );
  padding-right: var(
    --text-button-underline-container-default-medium-horizontal-padding
  );
  border-radius: var(
    --text-button-underline-container-default-medium-border-radius
  );
}

.mw-text-button--underline.mw-text-button--default.mw-text-button--large {
  height: var(--text-button-underline-container-default-large-height);
  padding-left: var(
    --text-button-underline-container-default-large-horizontal-padding
  );
  padding-right: var(
    --text-button-underline-container-default-large-horizontal-padding
  );
  border-radius: var(
    --text-button-underline-container-default-large-border-radius
  );
}

/* Underline - Compact Density */

.mw-text-button--underline.mw-text-button--compact.mw-text-button--small {
  height: var(--text-button-underline-container-compact-small-height);
  padding-left: var(
    --text-button-underline-container-compact-small-horizontal-padding
  );
  padding-right: var(
    --text-button-underline-container-compact-small-horizontal-padding
  );
  border-radius: var(
    --text-button-underline-container-compact-small-border-radius
  );
}

.mw-text-button--underline.mw-text-button--compact.mw-text-button--medium {
  height: var(--text-button-underline-container-compact-medium-height);
  padding-left: var(
    --text-button-underline-container-compact-medium-horizontal-padding
  );
  padding-right: var(
    --text-button-underline-container-compact-medium-horizontal-padding
  );
  border-radius: var(
    --text-button-underline-container-compact-medium-border-radius
  );
}

.mw-text-button--underline.mw-text-button--compact.mw-text-button--large {
  height: var(--text-button-underline-container-compact-large-height);
  padding-left: var(
    --text-button-underline-container-compact-large-horizontal-padding
  );
  padding-right: var(
    --text-button-underline-container-compact-large-horizontal-padding
  );
  border-radius: var(
    --text-button-underline-container-compact-large-border-radius
  );
}

/* Underline - States */

.mw-text-button--underline {
  color: var(--text-button-underline-text-color-default-fill);
  background-color: var(--text-button-underline-fill-default-fill);
}

.mw-text-button--underline:hover:not(:disabled) {
  background-color: var(--text-button-underline-fill-hover-fill);
}

.mw-text-button--underline:active:not(:disabled) {
  background-color: var(--text-button-underline-fill-pressed-fill);
}

.mw-text-button--underline:disabled {
  color: var(--text-button-underline-text-color-disabled-fill);
}

/* Underline - Text Line (underline decoration) */

.mw-text-button--underline span {
  border-bottom: var(
      --text-button-underline-text-line-color-default-border-width
    )
    var(--text-button-underline-text-line-color-default-border-style)
    var(--text-button-underline-text-line-color-default-border-color);
  /* padding-bottom: var(--text-button-underline-text-line-color-default-border-bottom); */
}

.mw-text-button--underline:disabled span {
  border-bottom: var(
      --text-button-underline-text-line-color-disabled-border-width
    )
    var(--text-button-underline-text-line-color-disabled-border-style)
    var(--text-button-underline-text-line-color-disabled-border-color);
  /* padding-bottom: var(--text-button-underline-text-line-color-disabled-border-bottom); */
}

/* ========== Icon Styles ========== */

.mw-text-button svg,
.mw-text-button .mw-text-button__icon {
  flex-shrink: 0;
  width: var(--text-button-icon-size-default-sizing);
  height: var(--text-button-icon-size-default-sizing);
}

/* ── ButtonGroup ── */
.mw-button-group {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-20);
  border-radius: var(--radius-8);
  background-color: var(--color-surface-default);
}

.mw-button-group > * {
  flex: 1;
  min-width: 0;
}

/* 아이콘만 있는 버튼은 늘어나지 않도록 고정 */

.mw-button-group > .mw-button--icon-only {
  flex: 0 0 auto;
}

/* Transparent variant for tertiary button groups */

.mw-button-group--transparent {
  background-color: transparent;
  padding: 0;
}

/* ── FloatingActionButton ── */
.mw-fab {
  /* 기본 스타일 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  gap: var(--floating-action-button-fab-container-default-item-spacing);
}

.mw-fab:disabled {
  cursor: not-allowed;
}

/* FAB Type - 아이콘만 */

.mw-fab--fab {
  width: var(--floating-action-button-fab-container-default-sizing);
  height: var(--floating-action-button-fab-container-default-sizing);
  padding: var(--floating-action-button-fab-container-default-vertical-padding);
  border-radius: var(--floating-action-button-fab-container-default-border-radius);
  box-shadow: var(--floating-action-button-fab-container-default-box-shadow);
  background-color: var(--floating-action-button-fab-fill-default-fill);
}

.mw-fab--fab:hover:not(:disabled) {
  background-color: var(--floating-action-button-fab-fill-hover-fill);
}

.mw-fab--fab:active:not(:disabled) {
  background-color: var(--floating-action-button-fab-fill-pressed-fill);
}

/* FAB Icon Styles */

.mw-fab--fab svg {
  width: var(--floating-action-button-fab-icon-size-default-sizing);
  height: var(--floating-action-button-fab-icon-size-default-sizing);
  color: var(--floating-action-button-fab-icon-color-default-fill);
  fill: currentColor;
}

/* Extended FAB Type - 아이콘 + 텍스트 */

.mw-fab--extended {
  height: var(--floating-action-button-extended-fab-container-default-height);
  padding-left: var(--floating-action-button-extended-fab-container-default-padding-left);
  padding-right: var(--floating-action-button-extended-fab-container-default-padding-right);
  gap: var(--floating-action-button-extended-fab-container-default-item-spacing);
  border-radius: var(--floating-action-button-extended-fab-container-default-border-radius);
  box-shadow: var(--floating-action-button-extended-fab-container-default-box-shadow);
  background-color: var(--floating-action-button-extended-fab-fill-default-fill);

  font-family: var(--floating-action-button-extended-fab-text-default-typography-font-family);
  font-size: var(--floating-action-button-extended-fab-text-default-typography-font-size);
  font-weight: var(--floating-action-button-extended-fab-text-default-typography-font-weight);
  letter-spacing: var(--floating-action-button-extended-fab-text-default-typography-letter-spacing);
  line-height: var(--floating-action-button-extended-fab-text-default-typography-line-height);
  color: var(--floating-action-button-extended-fab-text-color-default-fill);
}

.mw-fab--extended:hover:not(:disabled) {
  background-color: var(--floating-action-button-extended-fab-fill-hover-fill);
}

.mw-fab--extended:active:not(:disabled) {
  background-color: var(--floating-action-button-extended-fab-fill-pressed-fill);
}

/* Extended FAB Icon Styles */

.mw-fab--extended svg {
  width: var(--floating-action-button-extended-fab-icon-size-default-sizing);
  height: var(--floating-action-button-extended-fab-icon-size-default-sizing);
  color: var(--floating-action-button-extended-fab-icon-color-default-fill);
  fill: currentColor;
}

/* Inverse FAB Type - 역색상 아이콘 버튼 */

.mw-fab--inverse {
  width: var(--floating-action-button-inverse-container-default-sizing);
  height: var(--floating-action-button-inverse-container-default-sizing);
  padding: var(--floating-action-button-inverse-container-default-vertical-padding);
  border-radius: var(--floating-action-button-inverse-container-default-border-radius);
  box-shadow: var(--floating-action-button-inverse-container-default-box-shadow);
  background-color: var(--floating-action-button-inverse-fill-default-fill);
  gap: var(--floating-action-button-inverse-container-default-item-spacing);
}

.mw-fab--inverse:hover:not(:disabled) {
  background-color: var(--floating-action-button-inverse-fill-hover-fill);
}

.mw-fab--inverse:active:not(:disabled) {
  background-color: var(--floating-action-button-inverse-fill-pressed-fill);
}

/* Inverse FAB Icon Styles */

.mw-fab--inverse svg {
  width: var(--floating-action-button-inverse-icon-size-default-sizing);
  height: var(--floating-action-button-inverse-icon-size-default-sizing);
  color: var(--floating-action-button-inverse-icon-color-default-fill);
  fill: currentColor;
}

.mw-fab-menu-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--fab-menu-container-default-item-spacing);
}

.mw-fab-menu {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--fab-menu-item-container-default-item-spacing);
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.mw-fab-menu--open {
  opacity: 1;
  pointer-events: auto;
}

/* 메뉴 아이템 애니메이션 */

.mw-fab-menu--open > * {
  animation: fabMenuItemSlideIn 0.2s ease forwards;
}

@keyframes fabMenuItemSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mw-fab-menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--fab-menu-item-container-default-item-spacing);
}

.mw-fab-menu-item__label {
  /* FAB Menu Item 텍스트 스타일 사용 */
  font-family: var(--fab-menu-item-text-default-typography-font-family);
  font-size: var(--fab-menu-item-text-default-typography-font-size);
  font-weight: var(--fab-menu-item-text-default-typography-font-weight);
  letter-spacing: var(--fab-menu-item-text-default-typography-letter-spacing);
  line-height: var(--fab-menu-item-text-default-typography-line-height);
  color: var(--fab-menu-item-text-color-default-fill);
  text-align: right;
}

.mw-fab-menu-item__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--floating-action-button-inverse-container-default-sizing);
  height: var(--floating-action-button-inverse-container-default-sizing);
  padding: var(--floating-action-button-inverse-container-default-vertical-padding);
  border: none;
  border-radius: var(--floating-action-button-inverse-container-default-border-radius);
  box-shadow: var(--floating-action-button-inverse-container-default-box-shadow);
  background-color: var(--floating-action-button-inverse-fill-default-fill);
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.mw-fab-menu-item__button:hover:not(:disabled) {
  background-color: var(--floating-action-button-inverse-fill-hover-fill);
}

.mw-fab-menu-item__button:active:not(:disabled) {
  background-color: var(--floating-action-button-inverse-fill-pressed-fill);
}

.mw-fab-menu-item__button:disabled {
  cursor: not-allowed;
}

.mw-fab-menu-item__button svg {
  width: var(--floating-action-button-inverse-icon-size-default-sizing);
  height: var(--floating-action-button-inverse-icon-size-default-sizing);
  color: var(--floating-action-button-inverse-icon-color-default-fill);
  fill: currentColor;
}

/* ── TextField ── */
/* Container */

.mw-textfield-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

/* Base TextField */

.mw-textfield {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-width: var(--textfield-input-container-default-min-width);
  padding: var(--textfield-input-container-default-vertical-padding)
    var(--textfield-input-container-default-horizontal-padding);
  border-radius: var(--textfield-input-container-default-border-radius);
  gap: 0;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  border: none;
  background-clip: padding-box;
  box-sizing: border-box;
}

.mw-textfield::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Input Area */

.mw-textfield__input-area {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  transition: padding-top 0.2s ease;
}

/* Focused/Typing/Complete 상태 - padding 추가로 공간 확보 */

.mw-textfield--focused .mw-textfield__input-area,
.mw-textfield--typing .mw-textfield__input-area,
.mw-textfield--complete .mw-textfield__input-area {
  padding-top: 22px;
}

/* Label */

.mw-textfield__label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: var(--textfield-input-text-label-default-fill);
  font-family: var(--textfield-input-text-label-default-typography-font-family);
  font-size: var(--textfield-input-text-label-default-typography-font-size);
  font-weight: var(--textfield-input-text-label-default-typography-font-weight);
  line-height: var(--textfield-input-text-label-default-typography-line-height);
  letter-spacing: var(
    --textfield-input-text-label-default-typography-letter-spacing
  );
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  transition: color 0.2s ease, font-size 0.2s ease;
  cursor: text;
  pointer-events: none;
  z-index: 2;
}

/* Focused 상태 */

.mw-textfield--focused .mw-textfield__label {
  color: var(--textfield-input-text-label-focused-fill);
  font-family: var(--textfield-input-text-label-focused-typography-font-family);
  font-size: var(--textfield-input-text-label-focused-typography-font-size);
  font-weight: var(--textfield-input-text-label-focused-typography-font-weight);
  line-height: var(--textfield-input-text-label-focused-typography-line-height);
  letter-spacing: var(
    --textfield-input-text-label-focused-typography-letter-spacing
  );
}

/* Typing 상태 */

.mw-textfield--typing .mw-textfield__label {
  color: var(--textfield-input-text-label-typing-fill);
  font-family: var(--textfield-input-text-label-typing-typography-font-family);
  font-size: var(--textfield-input-text-label-typing-typography-font-size);
  font-weight: var(--textfield-input-text-label-typing-typography-font-weight);
  line-height: var(--textfield-input-text-label-typing-typography-line-height);
  letter-spacing: var(
    --textfield-input-text-label-typing-typography-letter-spacing
  );
}

/* Complete 상태 */

.mw-textfield--complete .mw-textfield__label {
  color: var(--textfield-input-text-label-complete-fill);
  font-family: var(
    --textfield-input-text-label-complete-typography-font-family
  );
  font-size: var(--textfield-input-text-label-complete-typography-font-size);
  font-weight: var(
    --textfield-input-text-label-complete-typography-font-weight
  );
  line-height: var(
    --textfield-input-text-label-complete-typography-line-height
  );
  letter-spacing: var(
    --textfield-input-text-label-complete-typography-letter-spacing
  );
}

/* Input */

.mw-textfield__input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  font-family: var(--textfield-input-text-body-typing-typography-font-family);
  font-size: var(--textfield-input-text-body-typing-typography-font-size);
  font-weight: var(--textfield-input-text-body-typing-typography-font-weight);
  line-height: var(--textfield-input-text-body-typing-typography-line-height);
  letter-spacing: var(
    --textfield-input-text-body-typing-typography-letter-spacing
  );
  /* Default: 일반 흐름에 배치 */
  position: relative;
  color: transparent;
  caret-color: transparent;
  transition: color 0.2s ease, caret-color 0.2s ease;
  cursor: text;
  z-index: 1;
}

/* number input 스피너 숨기기 */

/* Chrome, Safari, Edge, Opera */

.mw-textfield__input::-webkit-outer-spin-button,
.mw-textfield__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */

.mw-textfield__input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.mw-textfield__input::placeholder {
  color: var(--textfield-input-text-label-default-fill);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Focused 상태 */

.mw-textfield--focused .mw-textfield__input {
  color: var(--textfield-input-text-body-focused-fill);
  caret-color: var(--textfield-input-text-body-focused-fill);
}

.mw-textfield--focused .mw-textfield__input::placeholder {
  opacity: 0.6;
}

/* Typing 상태 */

.mw-textfield--typing .mw-textfield__input {
  color: var(--textfield-input-text-body-typing-fill);
  caret-color: var(--textfield-input-text-body-typing-fill);
}

/* Complete 상태 */

.mw-textfield--complete .mw-textfield__input {
  color: var(--textfield-input-text-body-complete-fill);
  caret-color: var(--textfield-input-text-body-complete-fill);
}

/* Icon Container */

.mw-textfield__icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--textfield-input-icon-container-default-sizing);
  height: var(--textfield-input-icon-container-default-sizing);
}

.mw-textfield__icon-container svg {
  width: var(--textfield-input-icon-icon-size-default-sizing);
  height: var(--textfield-input-icon-icon-size-default-sizing);
  color: var(--textfield-input-icon-fill-tertiary-fill);
}

/* Icon Button (for password toggle) */

.mw-textfield__icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  outline: none;
}

.mw-textfield__icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Clear Button Container */

.mw-textfield__clear-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--textfield-input-icon-container-default-sizing);
  height: var(--textfield-input-icon-container-default-sizing);
  align-self: center;
}

/* Clear Button */

.mw-textfield__clear-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--textfield-input-icon-container-default-sizing);
  height: var(--textfield-input-icon-container-default-sizing);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  outline: none;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  position: relative;
  z-index: 10;
}

.mw-textfield__clear-button:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.mw-textfield__clear-button:active {
  background-color: rgba(0, 0, 0, 0.08);
}

.mw-textfield__clear-button svg {
  width: 24px;
  height: 24px;
  color: var(--textfield-input-icon-fill-tertiary-fill);
}

/* Password Toggle Button Container */

.mw-textfield__password-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--textfield-input-icon-container-default-sizing);
  height: var(--textfield-input-icon-container-default-sizing);
  align-self: center;
}

/* Password Toggle Button */

.mw-textfield__password-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--textfield-input-icon-container-default-sizing);
  height: var(--textfield-input-icon-container-default-sizing);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  outline: none;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  position: relative;
  z-index: 10;
}

.mw-textfield__password-button:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.mw-textfield__password-button:active {
  background-color: rgba(0, 0, 0, 0.08);
}

.mw-textfield__password-button svg {
  width: 24px;
  height: 24px;
  color: var(--textfield-input-icon-fill-tertiary-fill);
}

/* Helper Text 스타일은 HelperText 컴포넌트로 이동 */

/* ========== States ========== */

/* Default State */

.mw-textfield--default {
  background-color: var(--textfield-input-fill-default-default-fill);
}

.mw-textfield--default::before {
  border: var(--textfield-input-fill-default-default-border-width)
    var(--textfield-input-fill-default-default-border-style)
    var(--textfield-input-fill-default-default-border-color);
}

/* Hover State */

.mw-textfield--default:hover {
  background-color: var(--textfield-input-fill-default-hover-fill);
}

.mw-textfield--default:hover::before {
  border-color: var(--textfield-input-fill-default-hover-border-color);
}

/* Focused State */

.mw-textfield--focused {
  background-color: var(--textfield-input-fill-default-focused-fill);
  box-shadow: var(--textfield-input-fill-default-focused-box-shadow);
}

.mw-textfield--focused::before {
  border: var(--textfield-input-fill-default-focused-border-width)
    var(--textfield-input-fill-default-focused-border-style)
    var(--textfield-input-fill-default-focused-border-color);
}

/* Typing State */

.mw-textfield--typing {
  background-color: var(--textfield-input-fill-default-typing-fill);
  box-shadow: var(--textfield-input-fill-default-typing-box-shadow);
}

.mw-textfield--typing::before {
  border: var(--textfield-input-fill-default-typing-border-width)
    var(--textfield-input-fill-default-typing-border-style)
    var(--textfield-input-fill-default-typing-border-color);
}

/* Complete State */

.mw-textfield--complete {
  background-color: var(--textfield-input-fill-default-complete-fill);
}

.mw-textfield--complete::before {
  border: var(--textfield-input-fill-default-complete-border-width)
    var(--textfield-input-fill-default-complete-border-style)
    var(--textfield-input-fill-default-complete-border-color);
}

.mw-textfield--complete .mw-textfield__label {
  color: var(--textfield-input-text-label-complete-fill);
}

.mw-textfield--complete .mw-textfield__input {
  color: var(--textfield-input-text-body-complete-fill);
}

/* Complete State Hover */

.mw-textfield--complete:hover {
  background-color: var(--textfield-input-fill-default-hover-fill);
}

.mw-textfield--complete:hover::before {
  border-color: var(--textfield-input-fill-default-hover-border-color);
}

/* Error State */

.mw-textfield--error::before {
  border: var(--textfield-input-fill-default-error-border-width)
    var(--textfield-input-fill-default-error-border-style)
    var(--textfield-input-fill-default-error-border-color) !important;
}

.mw-textfield--error .mw-textfield__label {
  color: var(--textfield-input-text-label-error-fill);
  font-family: var(--textfield-input-text-label-error-typography-font-family);
  font-size: var(--textfield-input-text-label-error-typography-font-size);
  font-weight: var(--textfield-input-text-label-error-typography-font-weight);
  line-height: var(--textfield-input-text-label-error-typography-line-height);
  letter-spacing: var(--textfield-input-text-label-error-typography-letter-spacing);
}

/* Error State - Focused/Typing 시에는 굵은 2px border */

.mw-textfield--error.mw-textfield--focused::before,
.mw-textfield--error.mw-textfield--typing::before {
  border: 2px var(--textfield-input-fill-default-error-border-style)
    var(--textfield-input-fill-default-error-border-color) !important;
}

/* Error + Complete 상태 (값이 있을 때) */

.mw-textfield--error.mw-textfield--complete .mw-textfield__label {
  color: var(--textfield-input-text-label-complete-error-fill);
  font-family: var(--textfield-input-text-label-complete-error-typography-font-family);
  font-size: var(--textfield-input-text-label-complete-error-typography-font-size);
  font-weight: var(--textfield-input-text-label-complete-error-typography-font-weight);
  line-height: var(--textfield-input-text-label-complete-error-typography-line-height);
  letter-spacing: var(--textfield-input-text-label-complete-error-typography-letter-spacing);
}

/* Error + Typing/Focused 상태 (입력 중) */

.mw-textfield--error.mw-textfield--typing .mw-textfield__label,
.mw-textfield--error.mw-textfield--focused .mw-textfield__label {
  color: var(--textfield-input-text-label-typing-error-fill);
  font-family: var(--textfield-input-text-label-typing-error-typography-font-family);
  font-size: var(--textfield-input-text-label-typing-error-typography-font-size);
  font-weight: var(--textfield-input-text-label-typing-error-typography-font-weight);
  line-height: var(--textfield-input-text-label-typing-error-typography-line-height);
  letter-spacing: var(--textfield-input-text-label-typing-error-typography-letter-spacing);
}

/* Disabled State - error보다 우선순위 높음 */

.mw-textfield--disabled {
  background-color: var(
    --textfield-input-fill-default-disabled-fill
  ) !important;
  cursor: not-allowed;
}

.mw-textfield--disabled::before {
  border: var(--textfield-input-fill-default-disabled-border-width)
    var(--textfield-input-fill-default-disabled-border-style)
    var(--textfield-input-fill-default-disabled-border-color) !important;
}

/* Disabled + Error - disabled가 우선 적용 */

.mw-textfield--disabled.mw-textfield--error {
  background-color: var(
    --textfield-input-fill-default-disabled-fill
  ) !important;
}

.mw-textfield--disabled.mw-textfield--error::before {
  border: var(--textfield-input-fill-default-disabled-border-width)
    var(--textfield-input-fill-default-disabled-border-style)
    var(--textfield-input-fill-default-disabled-border-color) !important;
}

.mw-textfield--disabled .mw-textfield__label {
  color: var(--textfield-input-text-label-disabled-fill);
}

.mw-textfield--disabled .mw-textfield__input {
  color: var(--textfield-input-text-label-disabled-fill);
  cursor: not-allowed;
}

/* Read-only State */

.mw-textfield--read-only {
  background-color: var(--textfield-input-fill-default-read-only-fill);
  cursor: default;
}

.mw-textfield--read-only::before {
  border: var(--textfield-input-fill-default-read-only-border-width)
    var(--textfield-input-fill-default-read-only-border-style)
    var(--textfield-input-fill-default-read-only-border-color);
}

.mw-textfield--read-only .mw-textfield__label {
  color: var(--textfield-input-text-label-read-only-fill);
}

.mw-textfield--read-only .mw-textfield__input {
  color: var(--textfield-input-text-body-read-only-fill);
  cursor: default;
}

/* ========== Type Specific Styles ========== */

/* Password Type - ensure proper spacing for eye icon */

.mw-textfield--type-password .mw-textfield__input-area {
  padding-right: 0;
}

/* ========== Right Content (서브컴포넌트) ========== */

/* Right Content Container */

.mw-textfield__right-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: var(--space-8);
  align-self: center;
}

/* Icon Button Custom */

.mw-textfield__icon-button-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--textfield-input-icon-container-default-sizing);
  height: var(--textfield-input-icon-container-default-sizing);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  outline: none;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.mw-textfield__icon-button-custom:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.mw-textfield__icon-button-custom:active {
  background-color: rgba(0, 0, 0, 0.08);
}

.mw-textfield__icon-button-custom:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.mw-textfield__icon-button-custom svg {
  width: 24px;
  height: 24px;
  color: var(--textfield-input-icon-fill-tertiary-fill);
}

/* Timer - 디자인 토큰 기반 */

.mw-textfield__timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 33px;
  color: var(--help-text-text-caption-default-fill);
  font-family: var(--help-text-text-caption-default-typography-font-family);
  font-size: var(--help-text-text-caption-default-typography-font-size);
  font-weight: var(--help-text-text-caption-default-typography-font-weight);
  line-height: var(--help-text-text-caption-default-typography-line-height);
  letter-spacing: var(
    --help-text-text-caption-default-typography-letter-spacing
  );
  white-space: nowrap;
  text-align: left;
}

/* ========== Formatted Input (주민등록번호, 사업자등록번호 등) ========== */

/* Multiple Inputs Container */

.mw-textfield__formatted-inputs {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  position: relative;
}

/* Segment Wrapper (input + display overlay) */

.mw-textfield__formatted-segment-wrapper {
  position: relative;
  display: inline-flex;
  min-height: 22px;
}

/* Segment Input (투명하지만 클릭 가능하도록 여유 공간 확보) */

.mw-textfield__formatted-segment-input {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  opacity: 0;
  z-index: 2;
  cursor: text;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  font-family: var(--textfield-input-text-body-typing-typography-font-family);
  font-size: var(--textfield-input-text-body-typing-typography-font-size);
  font-weight: var(--textfield-input-text-body-typing-typography-font-weight);
  line-height: var(--textfield-input-text-body-typing-typography-line-height);
  letter-spacing: var(
    --textfield-input-text-body-typing-typography-letter-spacing
  );
}

/* Segment Display (visual) */

.mw-textfield__formatted-segment-display {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  z-index: 1;
  pointer-events: none;
  font-family: var(--textfield-input-text-body-typing-typography-font-family);
  font-size: var(--textfield-input-text-body-typing-typography-font-size);
  font-weight: var(--textfield-input-text-body-typing-typography-font-weight);
  line-height: var(--textfield-input-text-body-typing-typography-line-height);
  letter-spacing: var(
    --textfield-input-text-body-typing-typography-letter-spacing
  );
  color: var(--textfield-input-text-body-typing-fill);
}

/* Individual Character */

.mw-textfield__formatted-char {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10px;
  text-align: center;
}

/* Fixed Width Character (fill circle과 숫자 간격 통일이 필요한 경우) */

.mw-textfield__formatted-char--fixed-width {
  width: 16px;
  flex-shrink: 0;
}

/* Placeholder Character (동그라미) */

.mw-textfield__formatted-char--placeholder {
  color: var(--textfield-input-text-label-default-fill);
  opacity: 0.6;
}

/* Hidden Segment Display */

.mw-textfield__formatted-segment-display--hidden {
  opacity: 0;
}

/* Separator (하이픈 등) - 디자인 토큰 기반 */

.mw-textfield__formatted-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 2px;
  background-color: var(--textfield-input-icon-fill-tertiary-fill);
  color: transparent; /* 텍스트 숨김 */
  font-size: 0; /* 텍스트 공간 제거 */
  margin: 0 2px; /* 좌우 여백 */
}

/* Hidden Separator */

.mw-textfield__formatted-separator--hidden {
  opacity: 0;
}

/* Focused 상태 */

.mw-textfield--focused .mw-textfield__formatted-segment-display {
  color: var(--textfield-input-text-body-focused-fill);
}

.mw-textfield--focused .mw-textfield__formatted-separator {
  background-color: var(--textfield-input-icon-fill-tertiary-fill);
}

/* Typing 상태 */

.mw-textfield--typing .mw-textfield__formatted-segment-display {
  color: var(--textfield-input-text-body-typing-fill);
}

.mw-textfield--typing .mw-textfield__formatted-separator {
  background-color: var(--textfield-input-icon-fill-tertiary-fill);
}

/* Complete 상태 */

.mw-textfield--complete .mw-textfield__formatted-segment-display {
  color: var(--textfield-input-text-body-complete-fill);
}

.mw-textfield--complete .mw-textfield__formatted-separator {
  background-color: var(--textfield-input-icon-fill-tertiary-fill);
}

/* Error State - TextField와 동일한 처리 */

.mw-textfield--error::before {
  border: var(--textfield-input-fill-default-error-border-width)
    var(--textfield-input-fill-default-error-border-style)
    var(--textfield-input-fill-default-error-border-color) !important;
}

/* Error State - Focused/Typing 시에는 굵은 2px border */

.mw-textfield--error.mw-textfield--focused::before,
.mw-textfield--error.mw-textfield--typing::before {
  border: 2px var(--textfield-input-fill-default-error-border-style)
    var(--textfield-input-fill-default-error-border-color) !important;
}

/* Disabled + Error - disabled가 우선 적용 */

.mw-textfield--disabled.mw-textfield--error {
  background-color: var(
    --textfield-input-fill-default-disabled-fill
  ) !important;
}

.mw-textfield--disabled.mw-textfield--error::before {
  border: var(--textfield-input-fill-default-disabled-border-width)
    var(--textfield-input-fill-default-disabled-border-style)
    var(--textfield-input-fill-default-disabled-border-color) !important;
}

/* Helper Text 스타일은 HelperText 컴포넌트로 이동 */

/* Error 상태에서는 텍스트 색상 변경하지 않음 (border만 변경) */

/* Disabled 상태 */

.mw-textfield--disabled .mw-textfield__formatted-segment-display {
  color: var(--textfield-input-text-label-disabled-fill);
}

.mw-textfield--disabled .mw-textfield__formatted-separator {
  background-color: var(--textfield-input-text-label-disabled-fill);
}

/* Read-only 상태 */

.mw-textfield--read-only .mw-textfield__formatted-segment-display {
  color: var(--textfield-input-text-body-read-only-fill);
}

.mw-textfield--read-only .mw-textfield__formatted-separator {
  background-color: var(--textfield-input-icon-fill-tertiary-fill);
}

/* ── TextArea ── */
/* Container - HelperText와의 간격 관리 */

.mw-textarea-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

.mw-textarea {
  /* 기본 컨테이너 스타일 */
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: var(--textfield-area-container-default-min-width);
  min-height: var(--textfield-area-container-default-min-height);
  border-radius: var(--textfield-area-container-default-border-radius);
  background-color: var(--textfield-area-fill-default-default-fill);
  border: none;
  box-sizing: border-box;
  padding: var(--textfield-area-container-default-vertical-padding)
    var(--textfield-area-container-default-horizontal-padding);
  gap: var(--space-4);
  transition: all 0.2s ease;
  outline: none;
}

.mw-textarea::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  border: var(--textfield-area-fill-default-default-border-width)
    var(--textfield-area-fill-default-default-border-style)
    var(--textfield-area-fill-default-default-border-color);
  box-shadow: 0 0 0 0 transparent;
}

/* Read Only State - 최상단 적용으로 우선순위 확보 */

.mw-textarea--read-only {
  background-color: var(--textfield-area-fill-default-read-only-fill);
  cursor: default;
}

.mw-textarea--read-only::before {
  border: var(--textfield-area-fill-default-read-only-border-width)
    var(--textfield-area-fill-default-read-only-border-style)
    var(--textfield-area-fill-default-read-only-border-color);
}

.mw-textarea--read-only .mw-textarea__label {
  color: var(--textfield-area-text-label-read-only-fill);
  font-size: var(--textfield-area-text-label-read-only-typography-font-size);
  margin-bottom: var(--space-4);
}

.mw-textarea--read-only .mw-textarea__textarea {
  color: var(--textfield-area-text-body-read-only-fill);
  cursor: default;
  pointer-events: none;
  /* read-only 상태에서는 기본적으로 숨김 */
  opacity: 0;
  height: 0;
  min-height: 0;
  overflow: hidden;
}

/* read-only 상태에서 값이 있을 때는 표시 */

.mw-textarea--read-only.mw-textarea--has-value .mw-textarea__textarea {
  opacity: 1 !important;
}

/* Hover State */

.mw-textarea:hover:not(:disabled):not(.mw-textarea--error):not(
    .mw-textarea--read-only
  ) {
  background-color: var(--textfield-area-fill-default-hover-fill);
}

.mw-textarea:hover:not(:disabled):not(.mw-textarea--error):not(
    .mw-textarea--read-only
  )::before {
  border-color: var(--textfield-area-fill-default-hover-border-color);
}

/* Focused State */

.mw-textarea:focus-within:not(:disabled):not(.mw-textarea--error):not(
    .mw-textarea--read-only
  ) {
  background-color: var(--textfield-area-fill-default-focused-fill);
}

.mw-textarea:focus-within:not(:disabled):not(.mw-textarea--error):not(
    .mw-textarea--read-only
  )::before {
  border-width: var(--textfield-area-fill-default-focused-border-width);
  border-style: var(--textfield-area-fill-default-focused-border-style);
  border-color: var(--textfield-area-fill-default-focused-border-color);
  box-shadow: var(--textfield-area-fill-default-focused-box-shadow);
  /* border가 두꺼워지는 만큼 안쪽으로 이동 */
  inset: calc(
    var(--textfield-area-fill-default-focused-border-width) -
      var(--textfield-area-fill-default-default-border-width)
  );
}

/* Typing State */

.mw-textarea--typing {
  background-color: var(--textfield-area-fill-default-typing-fill);
}

.mw-textarea--typing::before {
  border-width: var(--textfield-area-fill-default-typing-border-width);
  border-style: var(--textfield-area-fill-default-typing-border-style);
  border-color: var(--textfield-area-fill-default-typing-border-color);
  box-shadow: var(--textfield-area-fill-default-typing-box-shadow);
  /* border가 두꺼워지는 만큼 안쪽으로 이동 */
  inset: calc(
    var(--textfield-area-fill-default-typing-border-width) -
      var(--textfield-area-fill-default-default-border-width)
  );
}

/* Disabled State */

.mw-textarea:disabled,
.mw-textarea--disabled {
  background-color: var(--textfield-area-fill-default-disabled-fill);
  cursor: not-allowed;
}

.mw-textarea:disabled::before,
.mw-textarea--disabled::before {
  border: var(--textfield-area-fill-default-disabled-border-width)
    var(--textfield-area-fill-default-disabled-border-style)
    var(--textfield-area-fill-default-disabled-border-color) !important;
}

/* Disabled + Error - disabled가 우선 적용 */

.mw-textarea--disabled.mw-textarea--error {
  background-color: var(--textfield-area-fill-default-disabled-fill) !important;
}

.mw-textarea--disabled.mw-textarea--error::before {
  border: var(--textfield-area-fill-default-disabled-border-width)
    var(--textfield-area-fill-default-disabled-border-style)
    var(--textfield-area-fill-default-disabled-border-color) !important;
}

/* Error State */

.mw-textarea--error {
  background-color: var(--textfield-area-fill-default-error-fill);
}

.mw-textarea--error::before {
  border: var(--textfield-area-fill-default-error-border-width)
    var(--textfield-area-fill-default-error-border-style)
    var(--textfield-area-fill-default-error-border-color) !important;
}

.mw-textarea--error:focus-within:not(:disabled)::before,
.mw-textarea--error.mw-textarea--typing::before {
  border-width: var(
    --textfield-area-fill-default-typing-error-border-width
  ) !important;
  border-style: var(
    --textfield-area-fill-default-typing-error-border-style
  ) !important;
  border-color: var(
    --textfield-area-fill-default-typing-error-border-color
  ) !important;
  box-shadow: var(--textfield-area-fill-default-typing-error-box-shadow);
  /* border가 두꺼워지는 만큼 안쪽으로 이동 */
  inset: calc(
    var(--textfield-area-fill-default-typing-error-border-width) -
      var(--textfield-area-fill-default-error-border-width)
  );
}

/* Complete State */

.mw-textarea--complete {
  background-color: var(--textfield-area-fill-default-complete-fill);
}

.mw-textarea--complete::before {
  border: var(--textfield-area-fill-default-complete-border-width)
    var(--textfield-area-fill-default-complete-border-style)
    var(--textfield-area-fill-default-complete-border-color);
}

/* Input Area */

.mw-textarea__input-area {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  overflow: hidden;
}

/* Label */

.mw-textarea__label {
  color: var(--textfield-area-text-label-default-fill);
  font-family: var(--textfield-area-text-label-default-typography-font-family);
  font-size: var(--textfield-area-text-label-default-typography-font-size);
  font-weight: var(--textfield-area-text-label-default-typography-font-weight);
  line-height: var(--textfield-area-text-label-default-typography-line-height);
  letter-spacing: var(
    --textfield-area-text-label-default-typography-letter-spacing
  );
  margin: 0;
  text-align: left;
  transition: all 0.2s ease;
  /* 기본 상태에서는 공간을 차지하지 않음 */
  flex-shrink: 0;
}

/* Label States */

.mw-textarea:focus-within .mw-textarea__label,
.mw-textarea--typing .mw-textarea__label,
.mw-textarea--has-value .mw-textarea__label {
  color: var(--textfield-area-text-label-focused-fill);
  font-size: var(--textfield-area-text-label-focused-typography-font-size);
  margin-bottom: var(--space-4);
}

/* read-only 상태에서 값이 있을 때 label 스타일 */

.mw-textarea--read-only.mw-textarea--has-value .mw-textarea__label {
  color: var(--textfield-area-text-label-read-only-fill);
  font-size: var(--textfield-area-text-label-read-only-typography-font-size);
  margin-bottom: var(--space-4);
}

.mw-textarea--complete .mw-textarea__label {
  color: var(--textfield-area-text-label-complete-fill);
  font-size: var(--textfield-area-text-label-complete-typography-font-size);
  margin-bottom: var(--space-4);
}

.mw-textarea--error .mw-textarea__label {
  color: var(--textfield-area-text-label-error-fill);
  font-size: var(--textfield-area-text-label-error-typography-font-size);
}

/* Error + Complete 상태 (값이 있을 때) */

.mw-textarea--error.mw-textarea--complete .mw-textarea__label,
.mw-textarea--error.mw-textarea--has-value .mw-textarea__label {
  color: var(--textfield-area-text-label-complete-error-fill);
  font-size: var(--textfield-area-text-label-complete-error-typography-font-size);
  margin-bottom: var(--space-4);
}

/* Error + Typing 상태 (입력 중) */

.mw-textarea--error.mw-textarea--typing .mw-textarea__label,
.mw-textarea--error:focus-within .mw-textarea__label {
  color: var(--textfield-area-text-label-typing-error-fill);
  font-size: var(--textfield-area-text-label-typing-error-typography-font-size);
  margin-bottom: var(--space-4);
}

.mw-textarea:disabled .mw-textarea__label,
.mw-textarea--disabled .mw-textarea__label {
  color: var(--textfield-area-text-label-disabled-fill);
}

/* Textarea Element */

.mw-textarea__textarea {
  position: relative;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  width: 100%;
  overflow: hidden;
  min-height: 0;

  /* Default text style */
  font-family: var(--textfield-area-text-body-focused-typography-font-family);
  font-size: var(--textfield-area-text-body-focused-typography-font-size);
  font-weight: var(--textfield-area-text-body-focused-typography-font-weight);
  line-height: var(--textfield-area-text-body-focused-typography-line-height);
  letter-spacing: var(
    --textfield-area-text-body-focused-typography-letter-spacing
  );

  /* Remove default styles */
  padding: 0;
  margin: 0;

  /* 기본 상태에서는 완전히 숨김 */
  opacity: 0;
  color: var(--textfield-area-text-body-focused-fill);
  transition: opacity 0.2s ease, color 0.2s ease;
}

/* 포커스 안됐고 값도 없을 때는 높이를 0으로 */

.mw-textarea:not(.mw-textarea--typing):not(.mw-textarea--has-value):not(
    :focus-within
  )
  .mw-textarea__textarea {
  height: 0;
  min-height: 0;
  overflow: hidden;
}

.mw-textarea__textarea::placeholder {
  color: var(--textfield-area-text-body-focused-fill);
  opacity: 0.6;
  font-weight: var(--textfield-area-text-body-focused-typography-font-weight);
}

/* Textarea States */

.mw-textarea--typing .mw-textarea__textarea,
.mw-textarea:focus-within .mw-textarea__textarea,
.mw-textarea--has-value .mw-textarea__textarea {
  opacity: 1;
  color: var(--textfield-area-text-body-typing-fill);
  font-weight: var(--textfield-area-text-body-typing-typography-font-weight);
}

.mw-textarea--complete .mw-textarea__textarea {
  color: var(--textfield-area-text-body-complete-fill);
  font-weight: var(--textfield-area-text-body-complete-typography-font-weight);
}

.mw-textarea--error .mw-textarea__textarea {
  color: var(--textfield-area-text-body-complete-error-fill);
  font-weight: var(--textfield-area-text-body-complete-error-typography-font-weight);
}

.mw-textarea--error.mw-textarea--typing .mw-textarea__textarea {
  color: var(--textfield-area-text-body-typing-error-fill);
  font-weight: var(
    --textfield-area-text-body-typing-error-typography-font-weight
  );
}

.mw-textarea:disabled .mw-textarea__textarea,
.mw-textarea--disabled .mw-textarea__textarea {
  color: var(--textfield-area-text-body-read-only-fill);
  cursor: not-allowed;
}

/* Counter */

.mw-textarea__counter {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 0;
  padding-top: var(--space-4);
}

.mw-textarea__counter-text {
  color: var(--textfield-area-text-counter-default-fill);
  font-family: var(
    --textfield-area-text-counter-default-typography-font-family
  );
  font-size: var(--textfield-area-text-counter-default-typography-font-size);
  font-weight: var(
    --textfield-area-text-counter-default-typography-font-weight
  );
  line-height: var(
    --textfield-area-text-counter-default-typography-line-height
  );
  letter-spacing: var(
    --textfield-area-text-counter-default-typography-letter-spacing
  );
  margin: 0;
}

.mw-textarea:disabled .mw-textarea__counter-text,
.mw-textarea--disabled .mw-textarea__counter-text {
  color: var(--textfield-area-text-counter-disabled-fill);
}

/* Default Size Variant */

/* Helper Text 스타일은 HelperText 컴포넌트로 이동 */

/* ── HelperText ── */
.mw-helper-text {
  /* 기본 컨테이너 스타일 */
  display: block;
  min-width: var(--help-text-container-default-min-width);
  padding-left: var(--help-text-container-default-padding-left);
  margin: 0;
  /* margin-top은 부모 컨테이너의 gap으로 관리됨 */
}

/* Type: Default */

.mw-helper-text--default {
  color: var(--help-text-text-caption-default-fill);
  font-family: var(--help-text-text-caption-default-typography-font-family);
  font-size: var(--help-text-text-caption-default-typography-font-size);
  font-weight: var(--help-text-text-caption-default-typography-font-weight);
  line-height: var(--help-text-text-caption-default-typography-line-height);
  letter-spacing: var(
    --help-text-text-caption-default-typography-letter-spacing
  );
}

/* Type: Error */

.mw-helper-text--error {
  color: var(--help-text-text-caption-error-fill);
  font-family: var(--help-text-text-caption-error-typography-font-family);
  font-size: var(--help-text-text-caption-error-typography-font-size);
  font-weight: var(--help-text-text-caption-error-typography-font-weight);
  line-height: var(--help-text-text-caption-error-typography-line-height);
  letter-spacing: var(
    --help-text-text-caption-error-typography-letter-spacing
  );
}

/* Type: Success */

.mw-helper-text--success {
  color: var(--help-text-text-caption-success-fill);
  font-family: var(--help-text-text-caption-success-typography-font-family);
  font-size: var(--help-text-text-caption-success-typography-font-size);
  font-weight: var(--help-text-text-caption-success-typography-font-weight);
  line-height: var(--help-text-text-caption-success-typography-line-height);
  letter-spacing: var(
    --help-text-text-caption-success-typography-letter-spacing
  );
}

/* Type: Info */

.mw-helper-text--info {
  color: var(--help-text-text-caption-info-fill);
  font-family: var(--help-text-text-caption-info-typography-font-family);
  font-size: var(--help-text-text-caption-info-typography-font-size);
  font-weight: var(--help-text-text-caption-info-typography-font-weight);
  line-height: var(--help-text-text-caption-info-typography-line-height);
  letter-spacing: var(--help-text-text-caption-info-typography-letter-spacing);
}

/* ── Search ── */
/* Container */

.mw-search-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

/* Base Search */

.mw-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: var(--search-outline-container-default-border-radius);
  gap: var(--search-outline-container-default-item-spacing);
  transition: background-color 0.2s ease, box-shadow 0.2s ease,
    border-color 0.2s ease;
  border: none;
  background-clip: padding-box;
  box-sizing: border-box;
}

.mw-search::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Back Button Modifier - input-area에 적용 */

.mw-search--back-button .mw-search__back-button-container {
  margin-right: calc(var(--search-outline-container-default-item-spacing) * -1);
}

.mw-search--back-button .mw-search__input-area {
  padding-left: 0;
}

/* Type Modifiers */

.mw-search--type-outline {
  min-width: 320px;
}

.mw-search--type-underline {
  border-radius: 0;
  min-width: 360px;
  box-shadow: none !important;
  gap: var(--search-underline-container-back-button-off-item-spacing);
}

/* Underline 타입의 border transition */

.mw-search--type-underline::before {
  transition: border-color 0.1s ease, border-width 0.1s ease;
}

.mw-search--type-underline .mw-search__input-area {
  height: var(--search-underline-icon-container-default-sizing);
  padding: var(--search-underline-container-back-button-off-vertical-padding) 0
    var(--search-underline-container-back-button-off-vertical-padding)
    var(--search-underline-container-back-button-off-padding-left);
}

.mw-search--type-underline.mw-search--back-button {
  gap: var(--search-underline-container-back-button-on-item-spacing);
}

.mw-search--type-underline.mw-search--back-button .mw-search__input-area {
  height: var(--search-underline-icon-container-default-sizing);
  padding: var(--search-underline-container-back-button-on-vertical-padding) 0
    var(--search-underline-container-back-button-on-vertical-padding) 0;
}

.mw-search--type-underline.mw-search--back-button .mw-search__back-button-container {
  margin-right: calc(var(--search-underline-container-back-button-on-item-spacing) * -1);
}

.mw-search--type-underline .mw-search__icons-container {
  padding-right: var(--search-underline-container-back-button-off-padding-right);
}

.mw-search--type-underline.mw-search--back-button .mw-search__icons-container {
  padding-right: var(--search-underline-container-back-button-on-padding-right);
}

.mw-search--type-underline .mw-search__input {
  font-family: var(--search-underline-text-default-typography-font-family);
  font-size: var(--search-underline-text-default-typography-font-size);
  font-weight: var(--search-underline-text-default-typography-font-weight);
  line-height: var(--search-underline-text-default-typography-line-height);
  letter-spacing: var(
    --search-underline-text-default-typography-letter-spacing
  );
  color: var(--search-underline-text-default-fill);
}

.mw-search--type-underline .mw-search__input::placeholder {
  color: var(--search-underline-text-default-fill);
}

.mw-search--type-underline .mw-search__back-button-container {
  width: var(--search-underline-icon-container-default-sizing);
  height: var(--search-underline-icon-container-default-sizing);
}

.mw-search--type-underline .mw-search__back-button {
  width: var(--search-underline-icon-container-default-sizing);
  height: var(--search-underline-icon-container-default-sizing);
}

.mw-search--type-underline .mw-search__back-button svg {
  width: var(--search-underline-icon-icon-size-default-sizing);
  height: var(--search-underline-icon-icon-size-default-sizing);
  color: var(--search-underline-icon-fill-primary-default-fill);
}

.mw-search--type-underline .mw-search__clear-button svg {
  width: var(--search-underline-icon-icon-size-default-sizing);
  height: var(--search-underline-icon-icon-size-default-sizing);
  color: var(--search-underline-icon-fill-tertiary-typing-fill);
}

.mw-search--type-underline .mw-search__search-button svg {
  width: var(--search-underline-icon-icon-size-default-sizing);
  height: var(--search-underline-icon-icon-size-default-sizing);
  color: var(--search-underline-icon-fill-primary-default-fill);
}

/* Underline 타입에서 아이콘 컨테이너 크기 조정 */

.mw-search--type-underline .mw-search__back-button-container,
.mw-search--type-underline .mw-search__clear-button-container,
.mw-search--type-underline .mw-search__search-button-container {
  width: var(--search-underline-icon-container-default-sizing);
  height: var(--search-underline-icon-container-default-sizing);
}

.mw-search--type-underline .mw-search__back-button,
.mw-search--type-underline .mw-search__clear-button,
.mw-search--type-underline .mw-search__search-button {
  width: var(--search-underline-icon-container-default-sizing);
  height: var(--search-underline-icon-container-default-sizing);
}

/* Input Area */

.mw-search__input-area {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  height: var(--search-outline-icon-container-default-sizing);
  padding: var(--search-outline-container-default-vertical-padding) 0
    var(--search-outline-container-default-vertical-padding)
    var(--search-outline-container-default-padding-left);
}

/* Input */

.mw-search__input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  font-family: var(--search-outline-text-default-typography-font-family);
  font-size: var(--search-outline-text-default-typography-font-size);
  font-weight: var(--search-outline-text-default-typography-font-weight);
  line-height: var(--search-outline-text-default-typography-line-height);
  letter-spacing: var(--search-outline-text-default-typography-letter-spacing);
  color: var(--search-outline-text-default-fill);
  transition: color 0.2s ease;
  cursor: text;
}

.mw-search__input::placeholder {
  color: var(--search-outline-text-default-fill);
  transition: color 0.2s ease;
}

/* Back Button Container */

.mw-search__back-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--search-outline-icon-container-default-sizing);
  height: var(--search-outline-icon-container-default-sizing);
}

/* Back Button */

.mw-search__back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--search-outline-icon-container-default-sizing);
  height: var(--search-outline-icon-container-default-sizing);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  outline: none;
  border-radius: var(--radius-4);
  transition: background-color 0.2s ease;
  position: relative;
  z-index: 10;
}

.mw-search__back-button:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.04);
}

.mw-search__back-button:active:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.08);
}

.mw-search__back-button svg {
  width: var(--search-outline-icon-icon-size-default-sizing);
  height: var(--search-outline-icon-icon-size-default-sizing);
  color: var(--search-outline-icon-fill-primary-default-fill);
}

/* Clear Button Container */

.mw-search__clear-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--search-outline-icon-container-default-sizing);
  height: var(--search-outline-icon-container-default-sizing);
}

/* Clear Button */

.mw-search__clear-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--search-outline-icon-container-default-sizing);
  height: var(--search-outline-icon-container-default-sizing);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  outline: none;
  border-radius: var(--radius-4);
  transition: background-color 0.2s ease;
  position: relative;
  z-index: 10;
}

.mw-search__clear-button:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.04);
}

.mw-search__clear-button:active:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.08);
}

.mw-search__clear-button svg {
  width: var(--search-outline-icon-icon-size-default-sizing);
  height: var(--search-outline-icon-icon-size-default-sizing);
  color: var(--search-outline-icon-fill-tertiary-typing-fill);
}

/* Icons Container */

.mw-search__icons-container {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: var(--search-outline-container-default-padding-right);
}

/* Search Button Container */

.mw-search__search-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--search-outline-icon-container-default-sizing);
  height: var(--search-outline-icon-container-default-sizing);
}

/* Search Button */

.mw-search__search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--search-outline-icon-container-default-sizing);
  height: var(--search-outline-icon-container-default-sizing);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  outline: none;
  border-radius: var(--radius-4);
  transition: background-color 0.2s ease;
  position: relative;
  z-index: 10;
}

.mw-search__search-button:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.04);
}

.mw-search__search-button:active:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.08);
}

.mw-search__search-button svg {
  width: var(--search-outline-icon-icon-size-default-sizing);
  height: var(--search-outline-icon-icon-size-default-sizing);
  color: var(--search-outline-icon-fill-primary-default-fill);
}

/* ========== States ========== */

/* Default State - Outline */

.mw-search--default {
  background-color: var(--search-outline-fill-default-fill);
}

.mw-search--default::before {
  border: var(--search-outline-fill-default-border-width)
    var(--search-outline-fill-default-border-style)
    var(--search-outline-fill-default-border-color);
}

/* Default State - Underline */

.mw-search--type-underline.mw-search--default {
  background-color: transparent;
}

.mw-search--type-underline.mw-search--default::before {
  border: none;
  border-bottom: var(--search-underline-fill-default-border-width)
    var(--search-underline-fill-default-border-style)
    var(--search-underline-fill-default-border-color);
}

/* Hover State - Outline */

.mw-search--default:hover {
  background-color: var(--search-outline-fill-hover-fill);
}

/* Underline 타입은 hover 시 배경색 제거 */

.mw-search--type-underline.mw-search--default:hover {
  background-color: transparent;
}

.mw-search--default:hover::before {
  border-color: var(--search-outline-fill-hover-border-color);
}

/* Hover State - Underline */

.mw-search--type-underline.mw-search--default:hover::before {
  border-bottom-color: var(--search-underline-fill-hover-border-color);
}

/* Focused State - Outline */

.mw-search--focused {
  background-color: var(--search-outline-fill-focused-fill);
  box-shadow: var(--search-outline-fill-focused-box-shadow);
}

.mw-search--focused::before {
  border: var(--search-outline-fill-focused-border-width)
    var(--search-outline-fill-focused-border-style)
    var(--search-outline-fill-focused-border-color);
}

/* Focused State - Underline */

.mw-search--type-underline.mw-search--focused {
  background-color: transparent;
  box-shadow: none !important;
}

.mw-search--type-underline.mw-search--focused::before {
  border: none;
  border-bottom: var(--search-underline-fill-focused-border-width)
    var(--search-underline-fill-focused-border-style)
    var(--search-underline-fill-focused-border-color);
}

/* Typing State - Outline */

.mw-search--typing {
  background-color: var(--search-outline-fill-typing-fill);
  box-shadow: var(--search-outline-fill-typing-box-shadow);
}

.mw-search--typing::before {
  border: var(--search-outline-fill-typing-border-width)
    var(--search-outline-fill-typing-border-style)
    var(--search-outline-fill-typing-border-color);
}

/* Typing State - Underline */

.mw-search--type-underline.mw-search--typing {
  background-color: transparent;
  box-shadow: none !important;
}

.mw-search--type-underline.mw-search--typing::before {
  border: none;
  border-bottom: var(--search-underline-fill-typing-border-width)
    var(--search-underline-fill-typing-border-style)
    var(--search-underline-fill-typing-border-color);
}

/* Complete State - Outline */

.mw-search--complete {
  background-color: var(--search-outline-fill-complete-fill);
}

.mw-search--complete::before {
  border: var(--search-outline-fill-complete-border-width)
    var(--search-outline-fill-complete-border-style)
    var(--search-outline-fill-complete-border-color);
}

/* Complete State - Underline */

.mw-search--type-underline.mw-search--complete {
  background-color: transparent;
}

.mw-search--type-underline.mw-search--complete::before {
  border: none;
  border-bottom: var(--search-underline-fill-complete-border-width)
    var(--search-underline-fill-complete-border-style)
    var(--search-underline-fill-complete-border-color);
}

/* Complete State Hover - Outline */

.mw-search--complete:hover {
  background-color: var(--search-outline-fill-hover-fill);
}

/* Underline 타입은 complete 상태 hover 시 배경색 제거 */

.mw-search--type-underline.mw-search--complete:hover {
  background-color: transparent;
}

.mw-search--complete:hover::before {
  border-color: var(--search-outline-fill-hover-border-color);
}

/* Complete State Hover - Underline */

.mw-search--type-underline.mw-search--complete:hover::before {
  border-bottom-color: var(--search-underline-fill-hover-border-color);
}

/* Disabled State - Outline */

.mw-search--disabled {
  background-color: var(--search-outline-fill-disabled-fill);
  cursor: not-allowed;
}

.mw-search--disabled::before {
  border: var(--search-outline-fill-disabled-border-width)
    var(--search-outline-fill-disabled-border-style)
    var(--search-outline-fill-disabled-border-color);
}

/* Disabled State - Underline */

.mw-search--type-underline.mw-search--disabled {
  background-color: var(--search-underline-fill-disabled-fill);
}

.mw-search--type-underline.mw-search--disabled::before {
  border: none;
  border-bottom: var(--search-underline-fill-disabled-border-width)
    var(--search-underline-fill-disabled-border-style)
    var(--search-underline-fill-disabled-border-color);
}

/* ========== Text State Variants ========== */

/* Focused Text */

.mw-search--focused .mw-search__input,
.mw-search--focused .mw-search__input::placeholder {
  color: var(--search-outline-text-focused-fill);
}

.mw-search--type-underline.mw-search--focused .mw-search__input,
.mw-search--type-underline.mw-search--focused .mw-search__input::placeholder {
  color: var(--search-underline-text-focused-fill);
}

/* Typing Text */

.mw-search--typing .mw-search__input,
.mw-search--typing .mw-search__input::placeholder {
  color: var(--search-outline-text-typing-fill);
}

.mw-search--type-underline.mw-search--typing .mw-search__input,
.mw-search--type-underline.mw-search--typing .mw-search__input::placeholder {
  color: var(--search-underline-text-typing-fill);
}

/* Complete Text */

.mw-search--complete .mw-search__input,
.mw-search--complete .mw-search__input::placeholder {
  color: var(--search-outline-text-complete-fill);
}

.mw-search--type-underline.mw-search--complete .mw-search__input,
.mw-search--type-underline.mw-search--complete .mw-search__input::placeholder {
  color: var(--search-underline-text-complete-fill);
}

/* Disabled Text */

.mw-search--disabled .mw-search__input,
.mw-search--disabled .mw-search__input::placeholder {
  color: var(--search-outline-text-disabled-fill);
  cursor: not-allowed;
}

.mw-search--type-underline.mw-search--disabled .mw-search__input,
.mw-search--type-underline.mw-search--disabled .mw-search__input::placeholder {
  color: var(--search-underline-text-disabled-fill);
  cursor: not-allowed;
}

/* ========== Icon State Variants ========== */

/* Complete Icons */

.mw-search--complete .mw-search__search-button svg {
  color: var(--search-outline-icon-fill-primary-complete-fill);
}

.mw-search--type-underline.mw-search--complete .mw-search__search-button svg {
  color: var(--search-underline-icon-fill-primary-complete-fill);
}

/* Focused Icons */

.mw-search--focused .mw-search__search-button svg {
  color: var(--search-outline-icon-fill-primary-focused-fill);
}

.mw-search--type-underline.mw-search--focused .mw-search__search-button svg {
  color: var(--search-underline-icon-fill-primary-focused-fill);
}

/* Typing Icons */

.mw-search--typing .mw-search__search-button svg {
  color: var(--search-outline-icon-fill-primary-typing-fill);
}

.mw-search--type-underline.mw-search--typing .mw-search__search-button svg {
  color: var(--search-underline-icon-fill-primary-typing-fill);
}

/* Disabled Icons */

.mw-search--disabled .mw-search__search-button svg,
.mw-search--disabled .mw-search__back-button svg {
  color: var(--search-outline-icon-fill-primary-disabled-fill);
}

.mw-search--type-underline.mw-search--disabled .mw-search__search-button svg,
.mw-search--type-underline.mw-search--disabled .mw-search__back-button svg {
  color: var(--search-underline-icon-fill-primary-disabled-fill);
}

.mw-search--disabled .mw-search__search-button,
.mw-search--disabled .mw-search__back-button,
.mw-search--disabled .mw-search__clear-button {
  cursor: not-allowed;
}

/* ── Dropdown ── */
.mw-dropdown {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease;
  outline: none;
  position: relative;
  box-sizing: border-box;
  min-width: var(--dropdown-container-default-min-width);
  background-clip: padding-box;
  border-radius: var(--dropdown-container-default-border-radius);
}

.mw-dropdown::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Default State */

.mw-dropdown--default {
  background-color: var(--dropdown-fill-default-fill);
  border: none;
  padding: 0 var(--dropdown-container-default-padding-right) 0 0;
  gap: var(--dropdown-container-default-item-spacing);
}

.mw-dropdown--default::before {
  border: var(--dropdown-fill-default-border-width)
    var(--dropdown-fill-default-border-style)
    var(--dropdown-fill-default-border-color);
}

.mw-dropdown--default:hover::before {
  border-color: var(--dropdown-fill-hover-border-color);
}

.mw-dropdown--default:focus::before,
.mw-dropdown--default:focus-visible::before {
  border: var(--dropdown-fill-focused-border-width)
    var(--dropdown-fill-focused-border-style)
    var(--dropdown-fill-focused-border-color);
}

.mw-dropdown--default:hover {
  background-color: var(--dropdown-fill-hover-fill);
}

.mw-dropdown--default:focus,
.mw-dropdown--default:focus-visible {
  background-color: var(--dropdown-fill-focused-fill);
  box-shadow: var(--dropdown-fill-focused-box-shadow);
}

/* Complete State */

.mw-dropdown--complete {
  background-color: var(--dropdown-fill-complete-fill);
  border: none;
  padding: 0 var(--dropdown-container-expanded-padding-right) 0 0;
  gap: var(--dropdown-container-expanded-item-spacing);
}

.mw-dropdown--complete::before {
  border: var(--dropdown-fill-complete-border-width)
    var(--dropdown-fill-complete-border-style)
    var(--dropdown-fill-complete-border-color);
}

.mw-dropdown--complete:hover::before {
  border-color: var(--dropdown-fill-complete-border-color);
}

.mw-dropdown--complete:focus::before,
.mw-dropdown--complete:focus-visible::before {
  border: var(--dropdown-fill-complete-focused-border-width)
    var(--dropdown-fill-complete-focused-border-style)
    var(--dropdown-fill-complete-focused-border-color);
}

.mw-dropdown--complete:hover {
  background-color: var(--dropdown-fill-complete-fill);
}

.mw-dropdown--complete:focus,
.mw-dropdown--complete:focus-visible {
  background-color: var(--dropdown-fill-complete-focused-fill);
  box-shadow: var(--dropdown-fill-complete-focused-box-shadow);
}

/* Disabled State */

.mw-dropdown--disabled {
  background-color: var(--dropdown-fill-disabled-fill);
  border: none;
  padding: 0 var(--dropdown-container-default-padding-right) 0 0;
  gap: var(--dropdown-container-default-item-spacing);
  cursor: not-allowed;
  pointer-events: none;
}

.mw-dropdown--disabled::before {
  border: var(--dropdown-fill-disabled-border-width)
    var(--dropdown-fill-disabled-border-style)
    var(--dropdown-fill-disabled-border-color);
}

/* Input Area - contains label and value */

.mw-dropdown__input-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

/* Default State - Input Area Padding */

.mw-dropdown--default .mw-dropdown__input-area {
  padding: var(--dropdown-container-default-vertical-padding) 0
    var(--dropdown-container-default-vertical-padding)
    var(--dropdown-container-default-padding-left);
}

/* Complete State - Input Area Padding */

.mw-dropdown--complete .mw-dropdown__input-area {
  padding: var(--dropdown-container-expanded-vertical-padding) 0
    var(--dropdown-container-expanded-vertical-padding)
    var(--dropdown-container-expanded-padding-left);
}

/* Disabled State - Input Area Padding */

.mw-dropdown--disabled .mw-dropdown__input-area {
  padding: var(--dropdown-container-default-vertical-padding) 0
    var(--dropdown-container-default-vertical-padding)
    var(--dropdown-container-default-padding-left);
}

/* Default State - Label Only */

.mw-dropdown--default .mw-dropdown__label {
  color: var(--dropdown-text-label-default-fill);
  font-family: var(--dropdown-text-label-default-typography-font-family);
  font-size: var(--dropdown-text-label-default-typography-font-size);
  font-weight: var(--dropdown-text-label-default-typography-font-weight);
  letter-spacing: var(--dropdown-text-label-default-typography-letter-spacing);
  line-height: var(--dropdown-text-label-default-typography-line-height);
}

.mw-dropdown--default .mw-dropdown__value {
  display: none;
}

/* Complete State - Label + Value */

.mw-dropdown--complete .mw-dropdown__input-area {
  gap: var(--dropdown-container-input-area-item-spacing);
}

.mw-dropdown--complete .mw-dropdown__label {
  color: var(--dropdown-text-label-complete-fill);
  font-family: var(--dropdown-text-label-complete-typography-font-family);
  font-size: var(--dropdown-text-label-complete-typography-font-size);
  font-weight: var(--dropdown-text-label-complete-typography-font-weight);
  letter-spacing: var(--dropdown-text-label-complete-typography-letter-spacing);
  line-height: var(--dropdown-text-label-complete-typography-line-height);
}

.mw-dropdown--complete .mw-dropdown__value {
  display: block;
  color: var(--dropdown-text-body-complete-fill);
  font-family: var(--dropdown-text-body-complete-typography-font-family);
  font-size: var(--dropdown-text-body-complete-typography-font-size);
  font-weight: var(--dropdown-text-body-complete-typography-font-weight);
  letter-spacing: var(--dropdown-text-body-complete-typography-letter-spacing);
  line-height: var(--dropdown-text-body-complete-typography-line-height);
}

/* Disabled State - Label + Value */

.mw-dropdown--disabled .mw-dropdown__input-area {
  gap: var(--dropdown-container-input-area-item-spacing);
}

.mw-dropdown--disabled .mw-dropdown__label {
  color: var(--dropdown-text-label-disabled-fill);
  font-family: var(--dropdown-text-label-disabled-typography-font-family);
  font-size: var(--dropdown-text-label-disabled-typography-font-size);
  font-weight: var(--dropdown-text-label-disabled-typography-font-weight);
  letter-spacing: var(--dropdown-text-label-disabled-typography-letter-spacing);
  line-height: var(--dropdown-text-label-disabled-typography-line-height);
}

.mw-dropdown--disabled .mw-dropdown__value {
  display: none;
}

/* Icon Container */

.mw-dropdown__icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--dropdown-icon-container-default-sizing);
  align-self: stretch;
  /* margin-top: var(--dropdown-container-default-vertical-padding); */
  /* padding-bottom: var(--dropdown-container-default-vertical-padding); */
  /* (vertical-padding * 2) + (label-font-size * 148 / 100) + input-area-gap + (value-font-size * 148 / 100) + item-spacing */
  /* 148% = 148/100 (line-height-default-148) */
  max-height: round(
    calc(
      (var(--dropdown-container-expanded-vertical-padding) * 2) +
        (var(--dropdown-text-label-complete-typography-font-size) * 148 / 100) +
        var(--dropdown-container-input-area-item-spacing) +
        (var(--dropdown-text-body-complete-typography-font-size) * 148 / 100) +
        var(--dropdown-container-expanded-item-spacing)
    ),
    1px
  );
}

/* Icon */

.mw-dropdown__icon {
  width: var(--dropdown-icon-icon-size-default-sizing);
  height: var(--dropdown-icon-icon-size-default-sizing);
  color: var(--dropdown-icon-icon-color-default-fill);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.mw-dropdown--disabled .mw-dropdown__icon {
  width: var(--dropdown-icon-icon-size-default-sizing);
  height: var(--dropdown-icon-icon-size-default-sizing);
  color: var(--dropdown-icon-icon-color-disabled-fill);
}

/* Focus 상태일 때 아이콘 180도 회전 */

.mw-dropdown--default:focus .mw-dropdown__icon,
.mw-dropdown--default:focus-visible .mw-dropdown__icon,
.mw-dropdown--complete:focus .mw-dropdown__icon,
.mw-dropdown--complete:focus-visible .mw-dropdown__icon {
  transform: rotate(180deg);
}

/* Error State */

.mw-dropdown--error {
  background-color: var(--dropdown-fill-error-fill);
  border: none;
  padding: 0 var(--dropdown-container-default-padding-right) 0 0;
  gap: var(--dropdown-container-default-item-spacing);
}

.mw-dropdown--error::before {
  border: var(--dropdown-fill-error-border-width)
    var(--dropdown-fill-error-border-style)
    var(--dropdown-fill-error-border-color);
}

.mw-dropdown--error .mw-dropdown__input-area {
  padding: var(--dropdown-container-default-vertical-padding) 0
    var(--dropdown-container-default-vertical-padding)
    var(--dropdown-container-default-padding-left);
}

.mw-dropdown--error .mw-dropdown__label {
  color: var(--dropdown-text-label-error-fill);
  font-family: var(--dropdown-text-label-error-typography-font-family);
  font-size: var(--dropdown-text-label-error-typography-font-size);
  font-weight: var(--dropdown-text-label-error-typography-font-weight);
  letter-spacing: var(--dropdown-text-label-error-typography-letter-spacing);
  line-height: var(--dropdown-text-label-error-typography-line-height);
}

.mw-dropdown--error .mw-dropdown__value {
  display: none;
}

/* Error State with Value (Complete + Error) */

.mw-dropdown--error.mw-dropdown--complete {
  padding: 0 var(--dropdown-container-expanded-padding-right) 0 0;
}

.mw-dropdown--error.mw-dropdown--complete .mw-dropdown__input-area {
  gap: var(--dropdown-container-input-area-item-spacing);
}

.mw-dropdown--error.mw-dropdown--complete .mw-dropdown__label {
  color: var(--dropdown-text-label-complete-error-fill);
  font-family: var(--dropdown-text-label-complete-error-typography-font-family);
  font-size: var(--dropdown-text-label-complete-error-typography-font-size);
  font-weight: var(--dropdown-text-label-complete-error-typography-font-weight);
  letter-spacing: var(
    --dropdown-text-label-complete-error-typography-letter-spacing
  );
  line-height: var(--dropdown-text-label-complete-error-typography-line-height);
}

.mw-dropdown--error.mw-dropdown--complete .mw-dropdown__value {
  display: block;
  color: var(--dropdown-text-body-complete-error-fill);
  font-family: var(--dropdown-text-body-complete-error-typography-font-family);
  font-size: var(--dropdown-text-body-complete-error-typography-font-size);
  font-weight: var(--dropdown-text-body-complete-error-typography-font-weight);
  letter-spacing: var(
    --dropdown-text-body-complete-error-typography-letter-spacing
  );
  line-height: var(--dropdown-text-body-complete-error-typography-line-height);
}

/* ── Checkbox ── */
/* 레이블 텍스트 */

.mw-checkbox-label {
  cursor: pointer;
  transition: color 0.2s ease;
  user-select: none;
}

/* Default State */

.mw-checkbox-label--default {
  color: var(--checkbox-list-text-default-fill);
  font-family: var(--checkbox-list-text-default-typography-font-family);
  font-size: var(--checkbox-list-text-default-typography-font-size);
  font-weight: var(--checkbox-list-text-default-typography-font-weight);
  letter-spacing: var(--checkbox-list-text-default-typography-letter-spacing);
  line-height: var(--checkbox-list-text-default-typography-line-height);
}

/* Selected State */

.mw-checkbox-label--selected {
  color: var(--checkbox-list-text-selected-fill);
  font-family: var(--checkbox-list-text-selected-typography-font-family);
  font-size: var(--checkbox-list-text-selected-typography-font-size);
  font-weight: var(--checkbox-list-text-selected-typography-font-weight);
  letter-spacing: var(--checkbox-list-text-selected-typography-letter-spacing);
  line-height: var(--checkbox-list-text-selected-typography-line-height);
}

/* Disabled State */

.mw-checkbox-label--disabled {
  color: var(--checkbox-list-text-disabled-fill);
  font-family: var(--checkbox-list-text-disabled-typography-font-family);
  font-size: var(--checkbox-list-text-disabled-typography-font-size);
  font-weight: var(--checkbox-list-text-disabled-typography-font-weight);
  letter-spacing: var(--checkbox-list-text-disabled-typography-letter-spacing);
  line-height: var(--checkbox-list-text-disabled-typography-line-height);
  cursor: not-allowed;
}

/* CheckboxList 컨테이너 */

.mw-checkbox-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

/* CheckboxSelect 컨테이너 */

.mw-checkbox-select {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--checkbox-select-container-default-item-spacing);
  width: 100%;
  min-height: var(--checkbox-select-container-default-height);
  padding: var(--checkbox-select-container-default-vertical-padding)
    var(--checkbox-select-container-default-horizontal-padding);
  border-radius: var(--checkbox-select-container-default-border-radius);
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
  /* border 대신 box-shadow 사용 (레이아웃 영향 없음) */
  border: none;
}

/* 실제 input은 숨기고 접근성 유지 */

.mw-checkbox-select__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Checkbox 컨테이너 */

.mw-checkbox-select__checkbox {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* 레이블 텍스트 */

.mw-checkbox-select__label {
  flex: 1;
  transition: color 0.2s ease;
}

/* Default State */

.mw-checkbox-select--default {
  background-color: var(--checkbox-select-container-default-fill);
  /* 모든 상태에서 2px 유지 (1px처럼 보이도록 투명 레이어 추가) */
  box-shadow:
    inset 0 0 0 1px var(--checkbox-select-container-default-border-color),
    inset 0 0 0 2px transparent;
}

.mw-checkbox-select--default .mw-checkbox-select__label {
  color: var(--checkbox-select-text-default-fill);
  font-family: var(--checkbox-select-text-default-typography-font-family);
  font-size: var(--checkbox-select-text-default-typography-font-size);
  font-weight: var(--checkbox-select-text-default-typography-font-weight);
  letter-spacing: var(--checkbox-select-text-default-typography-letter-spacing);
  line-height: var(--checkbox-select-text-default-typography-line-height);
}

/* Selected State */

.mw-checkbox-select--selected {
  background-color: var(--checkbox-select-container-selected-fill);
  /* 2px border를 box-shadow로 표현 + 피그마 shadow 반영 */
  box-shadow:
    inset 0 0 0 2px var(--checkbox-select-container-selected-border-color),
    0 0 0 0 rgba(20, 20, 20, 0.05),
    0 4px 8px 0 rgba(20, 20, 20, 0.1);
}

.mw-checkbox-select--selected .mw-checkbox-select__label {
  color: var(--checkbox-select-text-selected-fill);
  font-family: var(--checkbox-select-text-selected-typography-font-family);
  font-size: var(--checkbox-select-text-selected-typography-font-size);
  font-weight: var(--checkbox-select-text-selected-typography-font-weight);
  letter-spacing: var(--checkbox-select-text-selected-typography-letter-spacing);
  line-height: var(--checkbox-select-text-selected-typography-line-height);
}

/* Disabled State */

.mw-checkbox-select--disabled {
  background-color: var(--checkbox-select-container-disabled-fill);
  cursor: not-allowed;
  /* 모든 상태에서 2px 유지 (1px처럼 보이도록 투명 레이어 추가) */
  box-shadow:
    inset 0 0 0 1px var(--checkbox-select-container-disabled-border-color),
    inset 0 0 0 2px transparent;
}

.mw-checkbox-select--disabled .mw-checkbox-select__label {
  color: var(--checkbox-select-text-disabled-fill);
  font-family: var(--checkbox-select-text-disabled-typography-font-family);
  font-size: var(--checkbox-select-text-disabled-typography-font-size);
  font-weight: var(--checkbox-select-text-disabled-typography-font-weight);
  letter-spacing: var(--checkbox-select-text-disabled-typography-letter-spacing);
  line-height: var(--checkbox-select-text-disabled-typography-line-height);
}

/* Hover State (Default만 적용) */

.mw-checkbox-select--default:hover {
  box-shadow:
    inset 0 0 0 1px var(--checkbox-select-container-selected-border-color),
    inset 0 0 0 2px transparent;
}

/* ── CheckboxGroup ── */
/* Checkbox 컨테이너 (24x24) */

.mw-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--checkbox-icon-container-default-sizing);
  height: var(--checkbox-icon-container-default-sizing);
  cursor: pointer;
  flex-shrink: 0;
}

.mw-checkbox:disabled {
  cursor: not-allowed;
}

/* 실제 input은 숨기고 접근성 유지 */

.mw-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 체크박스 박스 (20x20) */

.mw-checkbox__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--checkbox-icon-fill-default-default-sizing);
  height: var(--checkbox-icon-fill-default-default-sizing);
  border-radius: var(--radius-circle);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

/* Default State - Unchecked */

.mw-checkbox--default .mw-checkbox__box {
  background-color: var(--checkbox-icon-fill-default-default-fill);
  border: var(--checkbox-icon-fill-default-default-border-width)
          var(--checkbox-icon-fill-default-default-border-style)
          var(--checkbox-icon-fill-default-default-border-color);
}

/* Default State - Checked */

.mw-checkbox--default .mw-checkbox__input:checked ~ .mw-checkbox__box {
  background-color: var(--checkbox-icon-fill-active-default-fill);
  border: var(--checkbox-icon-fill-default-default-border-width) solid transparent;
}

/* 체크 아이콘 (16x16 check icon) */

.mw-checkbox__icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  color: var(--checkbox-icon-icon-color-default-default-fill);
}

.mw-checkbox__icon svg {
  width: 100%;
  height: 100%;
}

.mw-checkbox--default .mw-checkbox__input:checked ~ .mw-checkbox__box .mw-checkbox__icon {
  color: var(--checkbox-icon-icon-color-active-default-fill);
}

/* Hover State - Unchecked */

.mw-checkbox:hover .mw-checkbox__input:not(:disabled) ~ .mw-checkbox__box {
  background-color: var(--checkbox-icon-fill-default-hover-fill);
  border: var(--checkbox-icon-fill-default-hover-border-width)
          var(--checkbox-icon-fill-default-hover-border-style)
          var(--checkbox-icon-fill-default-hover-border-color);
}

/* Hover State - Checked */

.mw-checkbox:hover .mw-checkbox__input:checked:not(:disabled) ~ .mw-checkbox__box {
  background-color: var(--checkbox-icon-fill-active-hover-fill);
  border: var(--checkbox-icon-fill-default-hover-border-width) solid transparent;
}

.mw-checkbox:hover .mw-checkbox__input:checked:not(:disabled) ~ .mw-checkbox__box .mw-checkbox__icon {
  color: var(--checkbox-icon-icon-color-active-hover-fill);
}

.mw-checkbox:hover .mw-checkbox__input:not(:checked):not(:disabled) ~ .mw-checkbox__box .mw-checkbox__icon {
  color: var(--checkbox-icon-icon-color-default-hover-fill);
}

/* Disabled State - Unchecked */

.mw-checkbox--disabled .mw-checkbox__box,
.mw-checkbox:disabled .mw-checkbox__box {
  background-color: var(--checkbox-icon-fill-default-disabled-fill);
  border: var(--checkbox-icon-fill-default-default-border-width)
          var(--checkbox-icon-fill-default-default-border-style)
          var(--checkbox-icon-fill-default-disabled-border);
}

/* Disabled State - Checked */

.mw-checkbox--disabled .mw-checkbox__input:checked ~ .mw-checkbox__box,
.mw-checkbox:disabled .mw-checkbox__input:checked ~ .mw-checkbox__box {
  background-color: var(--checkbox-icon-fill-active-disabled-fill);
  border: var(--checkbox-icon-fill-default-default-border-width) solid transparent;
}

.mw-checkbox--disabled .mw-checkbox__input:checked ~ .mw-checkbox__box .mw-checkbox__icon,
.mw-checkbox:disabled .mw-checkbox__input:checked ~ .mw-checkbox__box .mw-checkbox__icon {
  color: var(--checkbox-icon-icon-color-active-disabled-fill);
}

.mw-checkbox--disabled .mw-checkbox__input:not(:checked) ~ .mw-checkbox__box .mw-checkbox__icon,
.mw-checkbox:disabled .mw-checkbox__input:not(:checked) ~ .mw-checkbox__box .mw-checkbox__icon {
  color: var(--checkbox-icon-icon-color-default-disabled-fill);
}

/* CheckboxGroup 컨테이너 (44px 높이) - label 태그 */

.mw-checkbox-item {
  display: flex;
  align-items: center;
  gap: var(--checkbox-list-container-default-item-spacing);
  height: var(--checkbox-list-container-default-height);
  padding-left: var(--checkbox-list-container-default-horizontal-padding);
  padding-right: var(--checkbox-list-container-default-horizontal-padding);
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
}

.mw-checkbox-item:has(input:disabled) {
  cursor: not-allowed;
}

/* ── RadioButton ── */
/* RadioButton 컨테이너 (24x24) */

.mw-radiobutton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--radiobutton-icon-container-size-sizing);
  height: var(--radiobutton-icon-container-size-sizing);
  cursor: pointer;
  flex-shrink: 0;
}

.mw-radiobutton:disabled {
  cursor: not-allowed;
}

/* 실제 input은 숨기고 접근성 유지 */

.mw-radiobutton__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 라디오 버튼 원형 (20x20) */

.mw-radiobutton__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--radiobutton-icon-fill-default-default-sizing);
  height: var(--radiobutton-icon-fill-default-default-sizing);
  border-radius: var(--radius-circle);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

/* Default State - Unchecked */

.mw-radiobutton--default .mw-radiobutton__circle {
  background-color: var(--radiobutton-icon-fill-default-default-fill);
  border: var(--radiobutton-icon-fill-default-default-border-width)
          var(--radiobutton-icon-fill-default-default-border-style)
          var(--radiobutton-icon-fill-default-default-border-color);
}

/* Default State - Checked */

.mw-radiobutton--default .mw-radiobutton__input:checked ~ .mw-radiobutton__circle {
  background-color: var(--radiobutton-icon-fill-active-default-fill);
  border: var(--radiobutton-icon-fill-default-default-border-width) solid transparent;
}

/* Default State - Checked Icon */

.mw-radiobutton__icon {
  width: var(--radiobutton-icon-icon-size-default-sizing);
  height: var(--radiobutton-icon-icon-size-default-sizing);
  border-radius: var(--radius-circle);
  background-color: var(--radiobutton-icon-icon-color-default-fill);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mw-radiobutton--default .mw-radiobutton__input:checked ~ .mw-radiobutton__circle .mw-radiobutton__icon {
  opacity: 1;
}

/* Hover State - Unchecked */

.mw-radiobutton:hover .mw-radiobutton__input:not(:disabled) ~ .mw-radiobutton__circle {
  background-color: var(--radiobutton-icon-fill-default-hover-fill);
  border: var(--radiobutton-icon-fill-default-hover-border-width)
          var(--radiobutton-icon-fill-default-hover-border-style)
          var(--radiobutton-icon-fill-default-hover-border-color);
}

/* Hover State - Checked */

.mw-radiobutton:hover .mw-radiobutton__input:checked:not(:disabled) ~ .mw-radiobutton__circle {
  background-color: var(--radiobutton-icon-fill-active-hover-fill);
  border: var(--radiobutton-icon-fill-default-hover-border-width) solid transparent;
}

.mw-radiobutton:hover .mw-radiobutton__input:checked:not(:disabled) ~ .mw-radiobutton__circle .mw-radiobutton__icon {
  background-color: var(--radiobutton-icon-icon-color-hover-fill);
}

/* Disabled State - Unchecked */

.mw-radiobutton--disabled .mw-radiobutton__circle,
.mw-radiobutton:disabled .mw-radiobutton__circle {
  background-color: var(--radiobutton-icon-fill-default-disabled-fill);
  border: var(--radiobutton-icon-fill-default-disabled-border-width)
          var(--radiobutton-icon-fill-default-disabled-border-style)
          var(--radiobutton-icon-fill-default-disabled-border-color);
}

/* Disabled State - Checked */

.mw-radiobutton--disabled .mw-radiobutton__input:checked ~ .mw-radiobutton__circle,
.mw-radiobutton:disabled .mw-radiobutton__input:checked ~ .mw-radiobutton__circle {
  background-color: var(--radiobutton-icon-fill-active-disabled-fill);
  border: var(--radiobutton-icon-fill-default-disabled-border-width) solid transparent;
}

.mw-radiobutton--disabled .mw-radiobutton__input:checked ~ .mw-radiobutton__circle .mw-radiobutton__icon,
.mw-radiobutton:disabled .mw-radiobutton__input:checked ~ .mw-radiobutton__circle .mw-radiobutton__icon {
  background-color: var(--radiobutton-icon-icon-color-disabled-fill);
  opacity: 1;
}

/* RadioButtonGroup 컨테이너 (44px 높이) - label 태그 */

.mw-radiobutton-item {
  display: flex;
  align-items: center;
  gap: var(--radiobutton-list-container-default-item-spacing);
  height: var(--radiobutton-list-container-default-height);
  padding-left: var(--radiobutton-list-container-default-horizontal-padding);
  padding-right: var(--radiobutton-list-container-default-horizontal-padding);
  min-width: var(--radiobutton-list-container-default-min-width);
  cursor: pointer;
  user-select: none;
}

.mw-radiobutton-item:has(input:disabled) {
  cursor: not-allowed;
}

/* 텍스트 스타일 - Default */

.mw-radiobutton-item {
  color: var(--radiobutton-list-text-default-fill);
  font-family: var(--radiobutton-list-text-default-typography-font-family);
  font-size: var(--radiobutton-list-text-default-typography-font-size);
  font-weight: var(--radiobutton-list-text-default-typography-font-weight);
  letter-spacing: var(--radiobutton-list-text-default-typography-letter-spacing);
  line-height: var(--radiobutton-list-text-default-typography-line-height);
}

/* 텍스트 스타일 - Selected */

.mw-radiobutton-item:has(input:checked) {
  color: var(--radiobutton-list-text-selected-fill);
  font-family: var(--radiobutton-list-text-selected-typography-font-family);
  font-size: var(--radiobutton-list-text-selected-typography-font-size);
  font-weight: var(--radiobutton-list-text-selected-typography-font-weight);
  letter-spacing: var(--radiobutton-list-text-selected-typography-letter-spacing);
  line-height: var(--radiobutton-list-text-selected-typography-line-height);
}

/* 텍스트 스타일 - Disabled */

.mw-radiobutton-item:has(input:disabled) {
  color: var(--radiobutton-list-text-disabled-fill);
  font-family: var(--radiobutton-list-text-disabled-typography-font-family);
  font-size: var(--radiobutton-list-text-disabled-typography-font-size);
  font-weight: var(--radiobutton-list-text-disabled-typography-font-weight);
  letter-spacing: var(--radiobutton-list-text-disabled-typography-letter-spacing);
  line-height: var(--radiobutton-list-text-disabled-typography-line-height);
}

/* 레이블 텍스트 */

.mw-radiobutton-label {
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

/* Default State */

.mw-radiobutton-label--default {
  color: var(--radiobutton-list-text-default-fill);
  font-family: var(--radiobutton-list-text-default-typography-font-family);
  font-size: var(--radiobutton-list-text-default-typography-font-size);
  font-weight: var(--radiobutton-list-text-default-typography-font-weight);
  letter-spacing: var(--radiobutton-list-text-default-typography-letter-spacing);
  line-height: var(--radiobutton-list-text-default-typography-line-height);
}

/* Selected State */

.mw-radiobutton-label--selected {
  color: var(--radiobutton-list-text-selected-fill);
  font-family: var(--radiobutton-list-text-selected-typography-font-family);
  font-size: var(--radiobutton-list-text-selected-typography-font-size);
  font-weight: var(--radiobutton-list-text-selected-typography-font-weight);
  letter-spacing: var(--radiobutton-list-text-selected-typography-letter-spacing);
  line-height: var(--radiobutton-list-text-selected-typography-line-height);
}

/* Disabled State */

.mw-radiobutton-label--disabled {
  color: var(--radiobutton-list-text-disabled-fill);
  font-family: var(--radiobutton-list-text-disabled-typography-font-family);
  font-size: var(--radiobutton-list-text-disabled-typography-font-size);
  font-weight: var(--radiobutton-list-text-disabled-typography-font-weight);
  letter-spacing: var(--radiobutton-list-text-disabled-typography-letter-spacing);
  line-height: var(--radiobutton-list-text-disabled-typography-line-height);
  cursor: not-allowed;
}

/* RadioButtonList 컨테이너 */

.mw-radiobutton-list {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
  border-radius: var(--radius-8);
  width: 100%;
  box-sizing: border-box;
}

/* ── Switch ── */
.mw-switch {
  /* 기본 스타일 */
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  padding: 0;
  background: none;
}

.mw-switch:disabled {
  cursor: not-allowed;
}

/* Container - 스위치 배경 */

.mw-switch__container {
  position: relative;
  display: flex;
  align-items: center;
  transition: background-color 0.2s ease;
}

/* Handle - 스위치 핸들 (원형 토글) */

.mw-switch__handle {
  position: absolute;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sizes - Medium (28px) */

.mw-switch--medium .mw-switch__container {
  width: var(--switch-container-size-medium-width);
  height: var(--switch-container-size-medium-height);
  border-radius: var(--switch-container-size-medium-border-radius);
}

.mw-switch--medium .mw-switch__handle {
  width: var(--switch-handle-size-medium-sizing);
  height: var(--switch-handle-size-medium-sizing);
  border-radius: var(--switch-handle-size-medium-border-radius);
}

/* Sizes - Small (24px) */

.mw-switch--small .mw-switch__container {
  width: var(--switch-container-size-small-width);
  height: var(--switch-container-size-small-height);
  border-radius: var(--switch-container-size-small-border-radius);
}

.mw-switch--small .mw-switch__handle {
  width: var(--switch-handle-size-small-sizing);
  height: var(--switch-handle-size-small-sizing);
  border-radius: var(--switch-handle-size-small-border-radius);
}

/* Active States - Off (Default) */

.mw-switch:not(.mw-switch--checked) .mw-switch__container {
  background-color: var(--switch-fill-active-off-default-fill);
}

.mw-switch:not(.mw-switch--checked) .mw-switch__handle {
  background-color: var(--switch-handle-fill-default-fill);
  box-shadow: var(--switch-handle-fill-default-box-shadow);
  left: 3px;
}

.mw-switch--small:not(.mw-switch--checked) .mw-switch__handle {
  left: 3px;
}

/* Active States - On (Checked) */

.mw-switch.mw-switch--checked .mw-switch__container {
  background-color: var(--switch-fill-active-on-default-fill);
}

.mw-switch.mw-switch--checked .mw-switch__handle {
  background-color: var(--switch-handle-fill-default-fill);
  box-shadow: var(--switch-handle-fill-default-box-shadow);
}

/* Medium size - Checked handle position */

.mw-switch--medium.mw-switch--checked .mw-switch__handle {
  /* 48px (width) - 22px (handle) - 3px (padding) = 23px */
  left: 23px;
}

/* Small size - Checked handle position */

.mw-switch--small.mw-switch--checked .mw-switch__handle {
  /* 40px (width) - 18px (handle) - 3px (padding) = 19px */
  left: 19px;
}

/* Disabled States - Off */

.mw-switch:disabled:not(.mw-switch--checked) .mw-switch__container {
  background-color: var(--switch-fill-active-off-disabled-fill);
}

.mw-switch:disabled:not(.mw-switch--checked) .mw-switch__handle {
  background-color: var(--switch-handle-fill-disabled-fill);
  box-shadow: none;
}

/* Disabled States - On */

.mw-switch:disabled.mw-switch--checked .mw-switch__container {
  background-color: var(--switch-fill-active-on-disabled-fill);
}

.mw-switch:disabled.mw-switch--checked .mw-switch__handle {
  background-color: var(--switch-handle-fill-disabled-fill);
  box-shadow: none;
}

/* Focus States */

.mw-switch:focus-visible {
  outline: 2px solid var(--switch-fill-active-on-default-fill);
  outline-offset: 2px;
  border-radius: var(--switch-container-size-medium-border-radius);
}

.mw-switch--small:focus-visible {
  border-radius: var(--switch-container-size-small-border-radius);
}

/* Hidden native input */

.mw-switch__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ── Chip ── */
/* ============================================
   Select Chip
   ============================================ */

.mw-select-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--select-chip-container-default-height);
  padding-left: var(--select-chip-container-default-horizontal-padding);
  padding-right: var(--select-chip-container-default-horizontal-padding);
  padding-top: var(--select-chip-container-default-vertical-padding);
  padding-bottom: var(--select-chip-container-default-vertical-padding);
  border-radius: var(--select-chip-container-default-border-radius);
  gap: var(--select-chip-container-default-item-spacing);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  flex-shrink: 0;
  font-family: var(--select-chip-text-size-default-typography-font-family);
  font-size: var(--select-chip-text-size-default-typography-font-size);
  font-weight: var(--select-chip-text-size-default-typography-font-weight);
  line-height: var(--select-chip-text-size-default-typography-line-height);
  letter-spacing: var(
    --select-chip-text-size-default-typography-letter-spacing
  );
}

.mw-select-chip:disabled {
  cursor: not-allowed;
}

/* Select Chip - Off State */

.mw-select-chip--off {
  background-color: var(--select-chip-off-fill-default-fill);
  color: var(--select-chip-off-text-color-default-fill);
}

.mw-select-chip--off:hover:not(:disabled) {
  background-color: var(--select-chip-off-fill-hover-fill);
  color: var(--select-chip-off-text-color-hover-fill);
}

.mw-select-chip--off:active:not(:disabled) {
  background-color: var(--select-chip-off-fill-pressed-fill);
  color: var(--select-chip-off-text-color-pressed-fill);
}

.mw-select-chip--off:disabled {
  background-color: var(--select-chip-off-fill-disabled-fill);
  color: var(--select-chip-off-text-color-disabled-fill);
}

/* Select Chip - On State */

.mw-select-chip--on {
  background-color: var(--select-chip-on-fill-default-fill);
  color: var(--select-chip-on-text-color-default-fill);
}

.mw-select-chip--on:hover:not(:disabled) {
  background-color: var(--select-chip-on-fill-hover-fill);
  color: var(--select-chip-on-text-color-hover-fill);
}

.mw-select-chip--on:active:not(:disabled) {
  background-color: var(--select-chip-on-fill-pressed-fill);
  color: var(--select-chip-on-text-color-pressed-fill);
}

.mw-select-chip--on:disabled {
  background-color: var(--select-chip-on-fill-disabled-fill);
  color: var(--select-chip-on-text-color-disabled-fill);
}

/* ============================================
   Filter Chip
   ============================================ */

.mw-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--filter-chip-container-default-height);
  padding-left: var(--filter-chip-container-default-padding-left);
  padding-right: var(--filter-chip-container-default-padding-right);
  padding-top: var(--filter-chip-container-default-vertical-padding);
  padding-bottom: var(--filter-chip-container-default-vertical-padding);
  border-radius: var(--filter-chip-container-default-border-radius);
  gap: var(--filter-chip-container-default-item-spacing);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  flex-shrink: 0;
  font-family: var(--filter-chip-text-size-default-typography-font-family);
  font-size: var(--filter-chip-text-size-default-typography-font-size);
  font-weight: var(--filter-chip-text-size-default-typography-font-weight);
  line-height: var(--filter-chip-text-size-default-typography-line-height);
  letter-spacing: var(
    --filter-chip-text-size-default-typography-letter-spacing
  );
}

.mw-filter-chip:disabled {
  cursor: not-allowed;
}

/* Filter Chip Icon */

.mw-filter-chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mw-filter-chip svg {
  width: var(--filter-chip-icon-size-default-sizing);
  height: var(--filter-chip-icon-size-default-sizing);
  flex-shrink: 0;
  display: block;
}

/* Filter Chip - Off State */

.mw-filter-chip--off {
  background-color: var(--filter-chip-off-fill-default-fill);
  color: var(--filter-chip-off-text-color-default-fill);
}

.mw-filter-chip--off svg {
  color: var(--filter-chip-off-icon-color-default-fill);
}

.mw-filter-chip--off:hover:not(:disabled) {
  background-color: var(--filter-chip-off-fill-hover-fill);
  color: var(--filter-chip-off-text-color-hover-fill);
}

.mw-filter-chip--off:hover:not(:disabled) svg {
  color: var(--filter-chip-off-icon-color-hover-fill);
}

.mw-filter-chip--off:active:not(:disabled) {
  background-color: var(--filter-chip-off-fill-pressed-fill);
  color: var(--filter-chip-off-text-color-pressed-fill);
}

.mw-filter-chip--off:active:not(:disabled) svg {
  color: var(--filter-chip-off-icon-color-pressed-fill);
}

.mw-filter-chip--off:disabled {
  background-color: var(--filter-chip-off-fill-disabled-fill);
  color: var(--filter-chip-off-text-color-disabled-fill);
}

.mw-filter-chip--off:disabled svg {
  color: var(--filter-chip-off-icon-color-disabled-fill);
}

/* Filter Chip - On State */

.mw-filter-chip--on {
  background-color: var(--filter-chip-on-fill-default-fill);
  color: var(--filter-chip-on-text-color-default-fill);
}

.mw-filter-chip--on svg {
  color: var(--filter-chip-on-icon-color-default-fill);
}

.mw-filter-chip--on:hover:not(:disabled) {
  background-color: var(--filter-chip-on-fill-hover-fill);
  color: var(--filter-chip-on-text-color-hover-fill);
}

.mw-filter-chip--on:hover:not(:disabled) svg {
  color: var(--filter-chip-on-icon-color-hover-fill);
}

.mw-filter-chip--on:active:not(:disabled) {
  background-color: var(--filter-chip-on-fill-pressed-fill);
  color: var(--filter-chip-on-text-color-pressed-fill);
}

.mw-filter-chip--on:active:not(:disabled) svg {
  color: var(--filter-chip-on-icon-color-pressed-fill);
}

.mw-filter-chip--on:disabled {
  background-color: var(--filter-chip-on-fill-disabled-fill);
  color: var(--filter-chip-on-text-color-disabled-fill);
}

.mw-filter-chip--on:disabled svg {
  color: var(--filter-chip-on-icon-color-disabled-fill);
}

/* ============================================
   Input Chip
   ============================================ */

.mw-input-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--input-chip-container-default-height);
  padding-left: var(--input-chip-container-default-padding-left);
  padding-right: var(--input-chip-container-default-padding-right);
  padding-top: var(--input-chip-container-default-vertical-padding);
  padding-bottom: var(--input-chip-container-default-vertical-padding);
  border-radius: var(--input-chip-container-default-border-radius);
  gap: var(--input-chip-container-default-item-spacing);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  flex-shrink: 0;
  font-family: var(--input-chip-text-size-default-typography-font-family);
  font-size: var(--input-chip-text-size-default-typography-font-size);
  font-weight: var(--input-chip-text-size-default-typography-font-weight);
  line-height: var(--input-chip-text-size-default-typography-line-height);
  letter-spacing: var(--input-chip-text-size-default-typography-letter-spacing);
}

.mw-input-chip:disabled {
  cursor: not-allowed;
}

/* Input Chip Icon */

.mw-input-chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.mw-input-chip svg {
  width: var(--input-chip-icon-size-default-sizing);
  height: var(--input-chip-icon-size-default-sizing);
  flex-shrink: 0;
  display: block;
}

/* Input Chip - Off State */

.mw-input-chip--off {
  background-color: var(--input-chip-off-fill-default-fill);
  color: var(--input-chip-off-text-color-default-fill);
}

.mw-input-chip--off svg {
  color: var(--input-chip-off-icon-color-default-fill);
}

.mw-input-chip--off:hover:not(:disabled) {
  background-color: var(--input-chip-off-fill-hover-fill);
  color: var(--input-chip-off-text-color-hover-fill);
}

.mw-input-chip--off:hover:not(:disabled) svg {
  color: var(--input-chip-off-icon-color-hover-fill);
}

.mw-input-chip--off:active:not(:disabled) {
  background-color: var(--input-chip-off-fill-pressed-fill);
  color: var(--input-chip-off-text-color-pressed-fill);
}

.mw-input-chip--off:active:not(:disabled) svg {
  color: var(--input-chip-off-icon-color-pressed-fill);
}

.mw-input-chip--off:disabled {
  background-color: var(--input-chip-off-fill-disabled-fill);
  color: var(--input-chip-off-text-color-disabled-fill);
}

.mw-input-chip--off:disabled svg {
  color: var(--input-chip-off-icon-color-disabled-fill);
}

/* Input Chip - On State */

.mw-input-chip--on {
  background-color: var(--input-chip-on-fill-default-fill);
  color: var(--input-chip-on-text-color-default-fill);
}

.mw-input-chip--on svg {
  color: var(--input-chip-on-icon-color-default-fill);
}

.mw-input-chip--on:hover:not(:disabled) {
  background-color: var(--input-chip-on-fill-hover-fill);
  color: var(--input-chip-on-text-color-hover-fill);
}

.mw-input-chip--on:hover:not(:disabled) svg {
  color: var(--input-chip-on-icon-color-hover-fill);
}

.mw-input-chip--on:active:not(:disabled) {
  background-color: var(--input-chip-on-fill-pressed-fill);
  color: var(--input-chip-on-text-color-pressed-fill);
}

.mw-input-chip--on:active:not(:disabled) svg {
  color: var(--input-chip-on-icon-color-pressed-fill);
}

.mw-input-chip--on:disabled {
  background-color: var(--input-chip-on-fill-disabled-fill);
  color: var(--input-chip-on-text-color-disabled-fill);
}

.mw-input-chip--on:disabled svg {
  color: var(--input-chip-on-icon-color-disabled-fill);
}

/* ============================================
   Chip Group
   ============================================ */

.mw-chip-group-wrapper {
  position: relative;
  overflow: hidden;
}

.mw-chip-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--chip-group-container-default-item-spacing);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* 스크롤바 숨기기 (Webkit) */

.mw-chip-group::-webkit-scrollbar {
  display: none;
}

/* Dim Gradient - 오른쪽 끝에 페이드 효과 */

.mw-chip-group__gradient {
  position: absolute;
  right: 0;
  top: 0;
  width: var(--chip-group-dim-gradient-default-width);
  height: 100%;
  background: var(--chip-group-dim-gradient-default-fill);
  pointer-events: none;
  z-index: 1;
}

/* Filter Chip Group용 Dim Gradient */

.mw-chip-group__gradient--filter {
  width: var(--chip-group-dim-gradient-filter-chip-group-width);
  height: var(--chip-group-dim-gradient-filter-chip-group-height);
  background: var(--chip-group-dim-gradient-filter-chip-group-fill);
}

/* ============================================
   Folder Chip Group
   ============================================ */

.mw-folder-chip-group-wrapper {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--chip-group-container-default-item-spacing);
  overflow: hidden;
}

.mw-folder-chip-group {
  display: flex;
  align-items: flex-start;
  position: relative;
  transition: all 0.3s ease;
  flex: 1;
}

.mw-folder-chip-group--collapsed {
  flex-wrap: nowrap;
  gap: var(--chip-group-container-default-item-spacing); /* 6px */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* 접힌 상태에서 스크롤바 숨기기 */

.mw-folder-chip-group--collapsed::-webkit-scrollbar {
  display: none;
}

.mw-folder-chip-group--expanded {
  flex-wrap: wrap;
  column-gap: var(--chip-group-container-default-item-spacing); /* 6px */
  row-gap: var(--space-8); /* 8px */
  overflow: hidden;
}

/* Folder Chip Group Gradient - collapsed 상태에서만 표시 */

.mw-folder-chip-group__gradient {
  position: absolute;
  right: 42px; /* 토글 버튼 너비(36px) + gap(6px) */
  top: 0;
  width: var(--chip-group-dim-gradient-default-width);
  height: 36px; /* 칩 높이 */
  background: var(--chip-group-dim-gradient-default-fill, linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%));
  pointer-events: none;
  z-index: 1;
}

/* ============================================
   Folder Chip Group Toggle Button
   ============================================ */

.mw-folder-chip-group-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--toggle-button-container-default-sizing);
  height: var(--toggle-button-container-default-sizing);
  min-width: var(--toggle-button-container-default-sizing);
  min-height: var(--toggle-button-container-default-sizing);
  border-radius: var(--toggle-button-container-default-border-radius);
  background-color: var(--toggle-button-fill-default-fill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  padding: 0;
}

.mw-folder-chip-group-toggle svg {
  width: 16px;
  height: 16px;
  color: var(--toggle-button-icon-color-default-fill);
  transition: transform 0.3s ease;
}

.mw-folder-chip-group-toggle[data-expanded="true"] svg {
  transform: rotate(180deg);
}

.mw-folder-chip-group-toggle:hover {
  opacity: 0.8;
}

.mw-folder-chip-group-toggle:active {
  opacity: 0.6;
}

/* ── Slider ── */
.mw-slider-popover {
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--space-4);
  pointer-events: none;
  filter: drop-shadow(
      0px calc(var(--shadow-2-2-offset-y) * 1px)
        calc(var(--shadow-2-2-blur) * 1px)
        calc(var(--shadow-2-2-spread) * 1px) var(--shadow-2-2-color)
    )
    drop-shadow(
      0px calc(var(--shadow-2-1-offset-y) * 1px)
        calc(var(--shadow-2-1-blur) * 1px)
        calc(var(--shadow-2-1-spread) * 1px) var(--shadow-2-1-color)
    );
}

/* Text Container */

.mw-slider-popover__text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--slider-popover-fill-default-vertical-padding)
    var(--slider-popover-fill-default-horizontal-padding);
  background-color: var(--slider-popover-fill-default-fill);
  border-radius: var(--slider-popover-fill-default-border-radius);
  font-family: var(--slider-popover-text-default-typography-font-family);
  font-size: var(--slider-popover-text-default-typography-font-size);
  font-weight: var(--slider-popover-text-default-typography-font-weight);
  line-height: var(--slider-popover-text-default-typography-line-height);
  letter-spacing: var(--slider-popover-text-default-typography-letter-spacing);
  color: var(--slider-popover-text-default-fill);
  white-space: nowrap;
}

/* Caret Container */

.mw-slider-popover__caret-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  line-height: 0;
}

/* Caret SVG */

.mw-slider-popover__caret {
  width: 10px;
  height: 6px;
  display: block;
  margin-top: -1px;
}

.mw-slider-popover__caret-fill {
  fill: var(--slider-popover-fill-default-fill);
}

.mw-slider {
  display: flex;
  flex-direction: column;
  gap: var(--slider-container-default-item-spacing);
  width: 100%;
}

/* Header */

.mw-slider__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mw-slider__title {
  font-family: var(--slider-text-title-default-typography-font-family);
  font-size: var(--slider-text-title-default-typography-font-size);
  font-weight: var(--slider-text-title-default-typography-font-weight);
  line-height: var(--slider-text-title-default-typography-line-height);
  letter-spacing: var(--slider-text-title-default-typography-letter-spacing);
  color: var(--slider-text-title-default-fill);
}

.mw-slider__value {
  font-family: var(--slider-text-title-default-typography-font-family);
  font-size: var(--slider-text-title-default-typography-font-size);
  font-weight: var(--slider-text-title-default-typography-font-weight);
  line-height: var(--slider-text-title-default-typography-line-height);
  letter-spacing: var(--slider-text-title-default-typography-letter-spacing);
  color: var(--slider-text-title-default-fill);
}

/* Slider Container */

.mw-slider__container {
  display: flex;
  flex-direction: column;
  gap: var(--slider-container-slider-item-spacing);
}

/* Slider Track */

.mw-slider__track {
  position: relative;
  width: 100%;
  height: 24px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.mw-slider__track::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  height: var(--slider-fill-default-default-height);
  background-color: var(--slider-fill-default-default-fill);
  border-radius: var(--slider-fill-default-default-border-radius);
}

.mw-slider__track:hover::before {
  background-color: var(--slider-fill-default-hover-fill);
}

.mw-slider:disabled .mw-slider__track:hover::before,
.mw-slider--disabled .mw-slider__track:hover::before {
  background-color: var(--slider-fill-default-disabled-fill);
}

.mw-slider:disabled .mw-slider__track::before,
.mw-slider--disabled .mw-slider__track::before {
  background-color: var(--slider-fill-default-disabled-fill);
}

.mw-slider:disabled .mw-slider__track,
.mw-slider--disabled .mw-slider__track {
  cursor: not-allowed;
}

/* Slider Fill (Active) */

.mw-slider__fill {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: var(--slider-fill-active-default-height);
  background-color: var(--slider-fill-active-default-fill);
  border-radius: var(--slider-fill-active-default-border-radius);
  pointer-events: none;
  transition: width 0s;
}

.mw-slider__track:hover .mw-slider__fill {
  background-color: var(--slider-fill-active-hover-fill);
}

.mw-slider:disabled .mw-slider__track:hover .mw-slider__fill,
.mw-slider--disabled .mw-slider__track:hover .mw-slider__fill {
  background-color: var(--slider-fill-active-disabled-fill);
}

.mw-slider:disabled .mw-slider__fill,
.mw-slider--disabled .mw-slider__fill {
  background-color: var(--slider-fill-active-disabled-fill);
}

/* Slider Handle */

.mw-slider__handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--slider-handle-default-sizing);
  height: var(--slider-handle-default-sizing);
  background-color: var(--handle-slider-fill-default);
  border: var(--border-style-handle-slider-default-width)
    solid
    var(--border-style-handle-slider-default-color);
  border-radius: 50%;
  box-sizing: border-box;
  cursor: grab;
  z-index: 10;
  pointer-events: auto;
  transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease,
    border-color 0.2s ease;
  box-shadow: var(--slider-handle-default-box-shadow);
}

.mw-slider__handle:active {
  cursor: grabbing;
}

.mw-slider__handle:hover {
  width: var(--slider-handle-hover-sizing);
  height: var(--slider-handle-hover-sizing);
  background-color: var(--handle-slider-fill-default);
  border-color: var(--border-style-handle-slider-default-color);
  box-shadow: var(--slider-handle-hover-box-shadow);
}

.mw-slider:disabled .mw-slider__handle:hover,
.mw-slider--disabled .mw-slider__handle:hover {
  width: var(--slider-handle-disabled-sizing);
  height: var(--slider-handle-disabled-sizing);
  background-color: var(--handle-slider-fill-disabled);
  border-color: var(--border-style-handle-slider-disabled-color);
  box-shadow: var(--slider-handle-disabled-box-shadow);
}

.mw-slider:disabled .mw-slider__handle,
.mw-slider--disabled .mw-slider__handle {
  background-color: var(--handle-slider-fill-disabled);
  border-color: var(--border-style-handle-slider-disabled-color);
  cursor: not-allowed;
  width: var(--slider-handle-disabled-sizing);
  height: var(--slider-handle-disabled-sizing);
  box-shadow: var(--slider-handle-disabled-box-shadow);
}

/* Labels */

.mw-slider__labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mw-slider__label {
  font-family: var(--slider-text-label-default-typography-font-family);
  font-size: var(--slider-text-label-default-typography-font-size);
  font-weight: var(--slider-text-label-default-typography-font-weight);
  line-height: var(--slider-text-label-default-typography-line-height);
  letter-spacing: var(--slider-text-label-default-typography-letter-spacing);
  color: var(--slider-text-label-default-fill);
}

.mw-slider:disabled .mw-slider__label,
.mw-slider--disabled .mw-slider__label {
  font-family: var(--slider-text-label-disabled-typography-font-family);
  font-size: var(--slider-text-label-disabled-typography-font-size);
  font-weight: var(--slider-text-label-disabled-typography-font-weight);
  line-height: var(--slider-text-label-disabled-typography-line-height);
  letter-spacing: var(--slider-text-label-disabled-typography-letter-spacing);
  color: var(--slider-text-label-disabled-fill);
}

/* Disabled State */

.mw-slider--disabled {
  opacity: 1;
}

.mw-slider--disabled .mw-slider__title,
.mw-slider--disabled .mw-slider__value {
  font-family: var(--slider-text-title-disabled-typography-font-family);
  font-size: var(--slider-text-title-disabled-typography-font-size);
  font-weight: var(--slider-text-title-disabled-typography-font-weight);
  line-height: var(--slider-text-title-disabled-typography-line-height);
  letter-spacing: var(--slider-text-title-disabled-typography-letter-spacing);
  color: var(--slider-text-title-disabled-fill);
}

/* Range Slider - Input Boxes */

.mw-slider__inputs {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.mw-slider__input-wrapper {
  flex: 1;
}

.mw-slider__input-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--slider-range-container-default-item-spacing);
  height: var(--slider-range-container-default-height);
  padding: 0 var(--slider-range-container-default-horizontal-padding);
  background-color: var(--slider-range-container-default-fill);
  border: var(--slider-range-container-default-border-width)
    var(--slider-range-container-default-border-style)
    var(--slider-range-container-default-border-color);
  border-radius: var(--slider-range-container-default-border-radius);
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.mw-slider__input-container:focus-within {
  border-color: var(--border-accent-primary-default);
}

.mw-slider__input {
  flex: 1;
  min-width: 0;
  height: auto;
  padding: 0;
  background-color: transparent;
  border: none;
  font-family: var(--slider-range-text-label-default-typography-font-family);
  font-size: var(--slider-range-text-label-default-typography-font-size);
  font-weight: var(--slider-range-text-label-default-typography-font-weight);
  line-height: var(--slider-range-text-label-default-typography-line-height);
  letter-spacing: var(
    --slider-range-text-label-default-typography-letter-spacing
  );
  color: var(--slider-range-text-label-default-fill);
  text-align: left;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Chrome, Safari, Edge, Opera - 숫자 증감 버튼 제거 */

.mw-slider__input::-webkit-outer-spin-button,
.mw-slider__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mw-slider__input:disabled {
  color: var(--slider-range-text-label-disabled-fill);
  cursor: not-allowed;
}

.mw-slider__input-container:has(.mw-slider__input:disabled) {
  background-color: var(--slider-range-container-disabled-fill);
  border: var(--slider-range-container-disabled-border-width)
    var(--slider-range-container-disabled-border-style)
    var(--slider-range-container-disabled-border-color);
}

.mw-slider__input-unit {
  flex-shrink: 0;
  font-family: var(--slider-range-text-unit-default-typography-font-family);
  font-size: var(--slider-range-text-unit-default-typography-font-size);
  font-weight: var(--slider-range-text-unit-default-typography-font-weight);
  line-height: var(--slider-range-text-unit-default-typography-line-height);
  letter-spacing: var(
    --slider-range-text-unit-default-typography-letter-spacing
  );
  color: var(--slider-range-text-unit-default-fill);
}

.mw-slider__input-container:has(.mw-slider__input:disabled)
  .mw-slider__input-unit {
  color: var(--slider-range-text-unit-disabled-fill);
}

.mw-slider__input-separator {
  font-family: var(--slider-range-text-label-default-typography-font-family);
  font-size: var(--slider-range-text-label-default-typography-font-size);
  font-weight: var(--slider-range-text-label-default-typography-font-weight);
  line-height: var(--slider-range-text-label-default-typography-line-height);
  letter-spacing: var(
    --slider-range-text-label-default-typography-letter-spacing
  );
  color: var(--slider-range-text-label-default-fill);
}

.mw-slider__inputs:has(.mw-slider__input:disabled) .mw-slider__input-separator {
  color: var(--slider-range-text-label-disabled-fill);
}

/* ── Tab ── */
/* Base Tab */

.mw-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: border-bottom-color 0.2s ease, color 0.2s ease;
  outline: none;
  padding-top: 0;
  padding-bottom: 0;
  min-width: 0;
  font-family: var(--tab-fixed-text-default-typography-font-family);
  letter-spacing: var(--tab-fixed-text-default-typography-letter-spacing);
  line-height: var(--tab-fixed-text-default-typography-line-height);
  position: relative;
  z-index: 1;
}

.mw-tab:disabled {
  cursor: not-allowed;
}

/* Fixed Tab */

.mw-tab--fixed {
  flex: 1;
  height: var(--tab-fixed-fill-default-height);
  padding-left: var(--tab-fixed-fill-default-horizontal-padding);
  padding-right: var(--tab-fixed-fill-default-horizontal-padding);
  border-bottom: var(--tab-fixed-fill-selected-border-width)
    var(--tab-fixed-fill-selected-border-style) transparent;
}

.mw-tab--fixed.mw-tab--default {
  color: var(--tab-fixed-text-default-fill);
  font-size: var(--tab-fixed-text-default-typography-font-size);
  font-weight: var(--tab-fixed-text-default-typography-font-weight);
}

.mw-tab--fixed.mw-tab--selected {
  color: var(--tab-fixed-text-selected-fill);
  font-size: var(--tab-fixed-text-selected-typography-font-size);
  font-weight: var(--tab-fixed-text-selected-typography-font-weight);
  border-bottom-color: var(--tab-fixed-fill-selected-border-color);
}

.mw-tab--fixed.mw-tab--disabled {
  color: var(--tab-fixed-text-disabled-fill);
  font-size: var(--tab-fixed-text-disabled-typography-font-size);
  font-weight: var(--tab-fixed-text-disabled-typography-font-weight);
  border-bottom-color: var(--tab-fixed-fill-disabled-border-color);
}

/* Scrollable Tab */

.mw-tab--scrollable {
  flex: 0 0 auto;
  height: var(--tab-scrollable-fill-default-height);
  padding-left: var(--tab-scrollable-fill-default-horizontal-padding);
  padding-right: var(--tab-scrollable-fill-default-horizontal-padding);
  padding-bottom: var(--tab-scrollable-fill-default-border-width);
  font-family: var(--tab-scrollable-text-default-typography-font-family);
  letter-spacing: var(--tab-scrollable-text-default-typography-letter-spacing);
  line-height: var(--tab-scrollable-text-default-typography-line-height);
  box-sizing: border-box;
}

.mw-tab--scrollable.mw-tab--default {
  color: var(--tab-scrollable-text-default-fill);
  font-size: var(--tab-scrollable-text-default-typography-font-size);
  font-weight: var(--tab-scrollable-text-default-typography-font-weight);
}

.mw-tab--scrollable.mw-tab--selected {
  color: var(--tab-scrollable-text-selected-fill);
  font-size: var(--tab-scrollable-text-selected-typography-font-size);
  font-weight: var(--tab-scrollable-text-selected-typography-font-weight);
}

.mw-tab--scrollable.mw-tab--selected::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--tab-scrollable-fill-selected-border-width);
  background-color: var(--tab-scrollable-fill-selected-border-color);
  z-index: 2;
}

.mw-tab--scrollable.mw-tab--disabled {
  color: var(--tab-scrollable-text-disabled-fill);
  font-size: var(--tab-scrollable-text-disabled-typography-font-size);
  font-weight: var(--tab-scrollable-text-disabled-typography-font-weight);
}

/* Hover State */

.mw-tab--default:hover:not(:disabled) {
  opacity: 0.9;
}

/* Focus State */

.mw-tab:focus-visible {
  outline: 2px solid var(--border-inverse);
  outline-offset: -2px;
}

/* TabGroup Container */

.mw-tab-group {
  display: flex;
  width: 100%;
  position: relative;
}

/* Fixed TabGroup */

.mw-tab-group--fixed {
  width: 100%;
  position: relative;
}

.mw-tab-group--fixed::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--tab-fixed-fill-default-border-width);
  background-color: var(--tab-fixed-fill-default-border-color);
  z-index: 0;
}

/* Scrollable TabGroup */

.mw-tab-group--scrollable {
  box-sizing: border-box;
  overflow-x: scroll;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  gap: var(--tab-scrollable-group-container-default-item-spacing);
  position: relative;
  padding-left: var(--tab-scrollable-group-container-default-horizontal-padding);
  padding-right: var(--tab-scrollable-group-container-default-horizontal-padding);
  background-image: linear-gradient(
    to bottom,
    transparent calc(100% - var(--tab-scrollable-fill-default-border-width)),
    var(--tab-scrollable-fill-default-border-color)
      calc(100% - var(--tab-scrollable-fill-default-border-width))
  );
  background-repeat: repeat-x;
  background-size: 100% 100%;
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */

.mw-tab-group--scrollable::-webkit-scrollbar {
  display: none;
}

/* ── Tag ── */
.mw-tag {
  /* Base styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: default;
  user-select: none;
}

/* Sizes - Membership */

.mw-tag--large.mw-tag--membership-vvip,
.mw-tag--large.mw-tag--membership-vip,
.mw-tag--large.mw-tag--membership-gold,
.mw-tag--large.mw-tag--membership-silver,
.mw-tag--large.mw-tag--membership-all,
.mw-tag--large.mw-tag--membership-standard,
.mw-tag--large.mw-tag--membership-white {
  border-radius: var(--tag-membership-container-large-border-radius);
  padding-left: var(--tag-membership-container-large-horizontal-padding);
  padding-right: var(--tag-membership-container-large-horizontal-padding);
  padding-top: var(--tag-membership-container-large-vertical-padding);
  padding-bottom: var(--tag-membership-container-large-vertical-padding);
  font-size: var(--tag-membership-text-size-large-typography-font-size);
  line-height: var(--tag-membership-text-size-large-typography-line-height);
  font-family: var(--tag-membership-text-size-large-typography-font-family);
  font-weight: var(--tag-membership-text-size-large-typography-font-weight);
  letter-spacing: var(--tag-membership-text-size-large-typography-letter-spacing);
}

.mw-tag--medium.mw-tag--membership-vvip,
.mw-tag--medium.mw-tag--membership-vip,
.mw-tag--medium.mw-tag--membership-gold,
.mw-tag--medium.mw-tag--membership-silver,
.mw-tag--medium.mw-tag--membership-all,
.mw-tag--medium.mw-tag--membership-standard,
.mw-tag--medium.mw-tag--membership-white {
  border-radius: var(--tag-membership-container-medium-border-radius);
  padding-left: var(--tag-membership-container-medium-horizontal-padding);
  padding-right: var(--tag-membership-container-medium-horizontal-padding);
  padding-top: var(--tag-membership-container-medium-vertical-padding);
  padding-bottom: var(--tag-membership-container-medium-vertical-padding);
  font-size: var(--tag-membership-text-size-medium-typography-font-size);
  line-height: var(--tag-membership-text-size-medium-typography-line-height);
  font-family: var(--tag-membership-text-size-medium-typography-font-family);
  font-weight: var(--tag-membership-text-size-medium-typography-font-weight);
  letter-spacing: var(--tag-membership-text-size-medium-typography-letter-spacing);
}

.mw-tag--small.mw-tag--membership-vvip,
.mw-tag--small.mw-tag--membership-vip,
.mw-tag--small.mw-tag--membership-gold,
.mw-tag--small.mw-tag--membership-silver,
.mw-tag--small.mw-tag--membership-all,
.mw-tag--small.mw-tag--membership-standard,
.mw-tag--small.mw-tag--membership-white {
  border-radius: var(--tag-membership-container-small-border-radius);
  padding-left: var(--tag-membership-container-small-horizontal-padding);
  padding-right: var(--tag-membership-container-small-horizontal-padding);
  padding-top: var(--tag-membership-container-small-vertical-padding);
  padding-bottom: var(--tag-membership-container-small-vertical-padding);
  font-size: var(--tag-membership-text-size-small-typography-font-size);
  line-height: var(--tag-membership-text-size-small-typography-line-height);
  font-family: var(--tag-membership-text-size-small-typography-font-family);
  font-weight: var(--tag-membership-text-size-small-typography-font-weight);
  letter-spacing: var(--tag-membership-text-size-small-typography-letter-spacing);
}

/* Sizes - Category */

.mw-tag--large.mw-tag--category-basic,
.mw-tag--large.mw-tag--category-hot,
.mw-tag--large.mw-tag--category-new,
.mw-tag--large.mw-tag--category-recommand,
.mw-tag--large.mw-tag--category-sale {
  border-radius: var(--tag-category-container-large-border-radius);
  padding-left: var(--tag-category-container-large-horizontal-padding);
  padding-right: var(--tag-category-container-large-horizontal-padding);
  padding-top: var(--tag-category-container-large-vertical-padding);
  padding-bottom: var(--tag-category-container-large-vertical-padding);
  font-size: var(--tag-category-text-size-large-typography-font-size);
  line-height: var(--tag-category-text-size-large-typography-line-height);
  font-family: var(--tag-category-text-size-large-typography-font-family);
  font-weight: var(--tag-category-text-size-large-typography-font-weight);
  letter-spacing: var(--tag-category-text-size-large-typography-letter-spacing);
}

.mw-tag--medium.mw-tag--category-basic,
.mw-tag--medium.mw-tag--category-hot,
.mw-tag--medium.mw-tag--category-new,
.mw-tag--medium.mw-tag--category-recommand,
.mw-tag--medium.mw-tag--category-sale {
  border-radius: var(--tag-category-container-medium-border-radius);
  padding-left: var(--tag-category-container-medium-horizontal-padding);
  padding-right: var(--tag-category-container-medium-horizontal-padding);
  padding-top: var(--tag-category-container-medium-vertical-padding);
  padding-bottom: var(--tag-category-container-medium-vertical-padding);
  font-size: var(--tag-category-text-size-medium-typography-font-size);
  line-height: var(--tag-category-text-size-medium-typography-line-height);
  font-family: var(--tag-category-text-size-medium-typography-font-family);
  font-weight: var(--tag-category-text-size-medium-typography-font-weight);
  letter-spacing: var(--tag-category-text-size-medium-typography-letter-spacing);
}

.mw-tag--small.mw-tag--category-basic,
.mw-tag--small.mw-tag--category-hot,
.mw-tag--small.mw-tag--category-new,
.mw-tag--small.mw-tag--category-recommand,
.mw-tag--small.mw-tag--category-sale {
  border-radius: var(--tag-category-container-small-border-radius);
  padding-left: var(--tag-category-container-small-horizontal-padding);
  padding-right: var(--tag-category-container-small-horizontal-padding);
  padding-top: var(--tag-category-container-small-vertical-padding);
  padding-bottom: var(--tag-category-container-small-vertical-padding);
  font-size: var(--tag-category-text-size-small-typography-font-size);
  line-height: var(--tag-category-text-size-small-typography-line-height);
  font-family: var(--tag-category-text-size-small-typography-font-family);
  font-weight: var(--tag-category-text-size-small-typography-font-weight);
  letter-spacing: var(--tag-category-text-size-small-typography-letter-spacing);
}

/* Sizes - Status */

.mw-tag--large.mw-tag--status-critical,
.mw-tag--large.mw-tag--status-default,
.mw-tag--large.mw-tag--status-disabled,
.mw-tag--large.mw-tag--status-info,
.mw-tag--large.mw-tag--status-progress,
.mw-tag--large.mw-tag--status-success,
.mw-tag--large.mw-tag--status-warning {
  border-radius: var(--tag-status-container-large-border-radius);
  padding-left: var(--tag-status-container-large-horizontal-padding);
  padding-right: var(--tag-status-container-large-horizontal-padding);
  padding-top: var(--tag-status-container-large-vertical-padding);
  padding-bottom: var(--tag-status-container-large-vertical-padding);
  font-size: var(--tag-status-text-size-large-typography-font-size);
  line-height: var(--tag-status-text-size-large-typography-line-height);
  font-family: var(--tag-status-text-size-large-typography-font-family);
  font-weight: var(--tag-status-text-size-large-typography-font-weight);
  letter-spacing: var(--tag-status-text-size-large-typography-letter-spacing);
}

.mw-tag--medium.mw-tag--status-critical,
.mw-tag--medium.mw-tag--status-default,
.mw-tag--medium.mw-tag--status-disabled,
.mw-tag--medium.mw-tag--status-info,
.mw-tag--medium.mw-tag--status-progress,
.mw-tag--medium.mw-tag--status-success,
.mw-tag--medium.mw-tag--status-warning {
  border-radius: var(--tag-status-container-medium-border-radius);
  padding-left: var(--tag-status-container-medium-horizontal-padding);
  padding-right: var(--tag-status-container-medium-horizontal-padding);
  padding-top: var(--tag-status-container-medium-vertical-padding);
  padding-bottom: var(--tag-status-container-medium-vertical-padding);
  font-size: var(--tag-status-text-size-medium-typography-font-size);
  line-height: var(--tag-status-text-size-medium-typography-line-height);
  font-family: var(--tag-status-text-size-medium-typography-font-family);
  font-weight: var(--tag-status-text-size-medium-typography-font-weight);
  letter-spacing: var(--tag-status-text-size-medium-typography-letter-spacing);
}

.mw-tag--small.mw-tag--status-critical,
.mw-tag--small.mw-tag--status-default,
.mw-tag--small.mw-tag--status-disabled,
.mw-tag--small.mw-tag--status-info,
.mw-tag--small.mw-tag--status-progress,
.mw-tag--small.mw-tag--status-success,
.mw-tag--small.mw-tag--status-warning {
  border-radius: var(--tag-status-container-small-border-radius);
  padding-left: var(--tag-status-container-small-horizontal-padding);
  padding-right: var(--tag-status-container-small-horizontal-padding);
  padding-top: var(--tag-status-container-small-vertical-padding);
  padding-bottom: var(--tag-status-container-small-vertical-padding);
  font-size: var(--tag-status-text-size-small-typography-font-size);
  line-height: var(--tag-status-text-size-small-typography-line-height);
  font-family: var(--tag-status-text-size-small-typography-font-family);
  font-weight: var(--tag-status-text-size-small-typography-font-weight);
  letter-spacing: var(--tag-status-text-size-small-typography-letter-spacing);
}

/* Membership Types */

.mw-tag--membership-vvip {
  background-color: var(--tag-membership-fill-vvip-fill);
  color: var(--tag-membership-text-color-vvip-fill);
}

.mw-tag--membership-vip {
  background-color: var(--tag-membership-fill-vip-fill);
  color: var(--tag-membership-text-color-vip-fill);
}

.mw-tag--membership-gold {
  background-color: var(--tag-membership-fill-gold-fill);
  color: var(--tag-membership-text-color-gold-fill);
}

.mw-tag--membership-silver {
  background-color: var(--tag-membership-fill-silver-fill);
  color: var(--tag-membership-text-color-silver-fill);
}

.mw-tag--membership-all {
  background-color: var(--tag-membership-fill-all-fill);
  color: var(--tag-membership-text-color-all-fill);
}

.mw-tag--membership-standard {
  background-color: var(--tag-membership-fill-standard-fill);
  color: var(--tag-membership-text-color-standard-fill);
}

.mw-tag--membership-white {
  background-color: var(--tag-membership-fill-white-fill);
  color: var(--tag-membership-text-color-white-fill);
}

/* Category Types */

.mw-tag--category-basic {
  background-color: var(--tag-category-fill-basic-fill);
  color: var(--tag-category-text-color-basic-fill);
}

.mw-tag--category-hot {
  background-color: var(--tag-category-fill-hot-fill);
  color: var(--tag-category-text-color-hot-fill);
}

.mw-tag--category-new {
  background-color: var(--tag-category-fill-new-fill);
  color: var(--tag-category-text-color-new-fill);
}

.mw-tag--category-recommand {
  background-color: var(--tag-category-fill-recommand-fill);
  color: var(--tag-category-text-color-recommand-fill);
}

.mw-tag--category-sale {
  background-color: var(--tag-category-fill-sale-fill);
  color: var(--tag-category-text-color-sale-fill);
}

/* Status Types */

.mw-tag--status-critical {
  background-color: var(--tag-status-fill-critical-fill);
  color: var(--tag-status-text-color-critical-fill);
}

.mw-tag--status-default {
  background-color: var(--tag-status-fill-default-fill);
  color: var(--tag-status-text-color-default-fill);
}

.mw-tag--status-disabled {
  background-color: var(--tag-status-fill-disabled-fill);
  color: var(--tag-status-text-color-disabled-fill);
}

.mw-tag--status-info {
  background-color: var(--tag-status-fill-info-fill);
  color: var(--tag-status-text-color-info-fill);
}

.mw-tag--status-progress {
  background-color: var(--tag-status-fill-progress-fill);
  color: var(--tag-status-text-color-progress-fill);
}

.mw-tag--status-success {
  background-color: var(--tag-status-fill-success-fill);
  color: var(--tag-status-text-color-success-fill);
}

.mw-tag--status-warning {
  background-color: var(--tag-status-fill-warning-fill);
  color: var(--tag-status-text-color-warning-fill);
}

/* ── Card ── */
.mw-card-title {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Large Size */

.mw-card-title--large {
  padding-top: var(--card-full-image-title-large-container-default-padding-top);
  padding-bottom: var(
    --card-full-image-title-large-container-default-padding-bottom
  );
  padding-left: var(
    --card-full-image-title-large-container-default-horizontal-padding
  );
  padding-right: var(
    --card-full-image-title-large-container-default-horizontal-padding
  );
  gap: var(--card-full-image-title-large-container-default-item-spacing);
  width: 100%;
}

.mw-card-title--large .mw-card-title__title {
  font-family: var(
    --card-full-image-title-large-text-title-default-typography-font-family
  );
  font-size: var(
    --card-full-image-title-large-text-title-default-typography-font-size
  );
  font-weight: var(
    --card-full-image-title-large-text-title-default-typography-font-weight
  );
  line-height: var(
    --card-full-image-title-large-text-title-default-typography-line-height
  );
  letter-spacing: var(
    --card-full-image-title-large-text-title-default-typography-letter-spacing
  );
  color: var(--card-full-image-title-large-text-title-default-fill);
  text-align: left;
}

.mw-card-title--large .mw-card-title__body {
  font-family: var(
    --card-full-image-title-large-text-body-default-typography-font-family
  );
  font-size: var(
    --card-full-image-title-large-text-body-default-typography-font-size
  );
  font-weight: var(
    --card-full-image-title-large-text-body-default-typography-font-weight
  );
  line-height: var(
    --card-full-image-title-large-text-body-default-typography-line-height
  );
  letter-spacing: var(
    --card-full-image-title-large-text-body-default-typography-letter-spacing
  );
  color: var(--card-full-image-title-large-text-body-default-fill);
}

/* Medium Size */

.mw-card-title--medium {
  padding-top: var(
    --card-full-image-title-medium-container-default-padding-top
  );
  padding-bottom: var(
    --card-full-image-title-medium-container-default-padding-bottom
  );
  padding-left: var(
    --card-full-image-title-medium-container-default-horizontal-padding
  );
  padding-right: var(
    --card-full-image-title-medium-container-default-horizontal-padding
  );
  gap: var(--card-full-image-title-medium-container-default-item-spacing);
  width: 100%;
}

.mw-card-title--medium .mw-card-title__title {
  font-family: var(
    --card-full-image-title-medium-text-title-default-typography-font-family
  );
  font-size: var(
    --card-full-image-title-medium-text-title-default-typography-font-size
  );
  font-weight: var(
    --card-full-image-title-medium-text-title-default-typography-font-weight
  );
  line-height: var(
    --card-full-image-title-medium-text-title-default-typography-line-height
  );
  letter-spacing: var(
    --card-full-image-title-medium-text-title-default-typography-letter-spacing
  );
  color: var(--card-full-image-title-medium-text-title-default-fill);
  text-align: left;
}

.mw-card-title--medium .mw-card-title__body {
  font-family: var(
    --card-full-image-title-medium-text-body-default-typography-font-family
  );
  font-size: var(
    --card-full-image-title-medium-text-body-default-typography-font-size
  );
  font-weight: var(
    --card-full-image-title-medium-text-body-default-typography-font-weight
  );
  line-height: var(
    --card-full-image-title-medium-text-body-default-typography-line-height
  );
  letter-spacing: var(
    --card-full-image-title-medium-text-body-default-typography-letter-spacing
  );
  color: var(--card-full-image-title-medium-text-body-default-fill);
}

/* On Dark */

.mw-card-title--large.mw-card-title--on-dark .mw-card-title__title {
  color: var(--card-full-image-title-large-text-title-on-dark-fill);
}

.mw-card-title--large.mw-card-title--on-dark .mw-card-title__body {
  color: var(--card-full-image-title-large-text-body-on-dark-fill);
}

.mw-card-title--medium.mw-card-title--on-dark .mw-card-title__title {
  color: var(--card-full-image-title-medium-text-title-on-dark-fill);
}

.mw-card-title--medium.mw-card-title--on-dark .mw-card-title__body {
  color: var(--card-full-image-title-medium-text-body-on-dark-fill);
}

/* Image+Text 레이아웃에서 사용 */

.mw-card-title--image-text {
  width: 100%;
  flex-shrink: 0;
}

.mw-card-title--image-text.mw-card-title--large {
  padding-top: var(--card-image-text-large-text-container-default-padding-top);
  padding-bottom: var(
    --card-image-text-large-text-container-default-padding-bottom
  );
  padding-left: var(
    --card-image-text-large-text-container-default-horizontal-padding
  );
  padding-right: var(
    --card-image-text-large-text-container-default-horizontal-padding
  );
  gap: var(--card-image-text-large-text-container-default-item-spacing);
}

.mw-card-title--image-text.mw-card-title--large .mw-card-title__title {
  font-family: var(--card-image-text-large-text-title-typography-font-family);
  font-size: var(--card-image-text-large-text-title-typography-font-size);
  font-weight: var(--card-image-text-large-text-title-typography-font-weight);
  line-height: var(--card-image-text-large-text-title-typography-line-height);
  letter-spacing: var(
    --card-image-text-large-text-title-typography-letter-spacing
  );
  color: var(--card-image-text-large-text-title-fill);
  text-align: left;
}

.mw-card-title--image-text.mw-card-title--large .mw-card-title__subtitle {
  font-family: var(
    --card-image-text-large-text-subtitle-typography-font-family
  );
  font-size: var(--card-image-text-large-text-subtitle-typography-font-size);
  font-weight: var(
    --card-image-text-large-text-subtitle-typography-font-weight
  );
  line-height: var(
    --card-image-text-large-text-subtitle-typography-line-height
  );
  letter-spacing: var(
    --card-image-text-large-text-subtitle-typography-letter-spacing
  );
  color: var(--card-image-text-large-text-subtitle-fill);
}

.mw-card-title--image-text.mw-card-title--medium {
  padding-top: var(
    --card-image-text-medium-text-container-default-vertical-padding
  );
  padding-bottom: var(
    --card-image-text-medium-text-container-default-vertical-padding
  );
  padding-left: var(
    --card-image-text-medium-text-container-default-horizontal-padding
  );
  padding-right: var(
    --card-image-text-medium-text-container-default-horizontal-padding
  );
  gap: var(--card-image-text-medium-text-container-default-item-spacing);
}

.mw-card-title--image-text.mw-card-title--medium .mw-card-title__title {
  font-family: var(--card-image-text-medium-text-title-typography-font-family);
  font-size: var(--card-image-text-medium-text-title-typography-font-size);
  font-weight: var(--card-image-text-medium-text-title-typography-font-weight);
  line-height: var(--card-image-text-medium-text-title-typography-line-height);
  letter-spacing: var(
    --card-image-text-medium-text-title-typography-letter-spacing
  );
  color: var(--card-image-text-medium-text-title-fill);
  text-align: left;
}

.mw-card-title--image-text.mw-card-title--medium .mw-card-title__subtitle {
  font-family: var(
    --card-image-text-medium-text-subtitle-typography-font-family
  );
  font-size: var(--card-image-text-medium-text-subtitle-typography-font-size);
  font-weight: var(
    --card-image-text-medium-text-subtitle-typography-font-weight
  );
  line-height: var(
    --card-image-text-medium-text-subtitle-typography-line-height
  );
  letter-spacing: var(
    --card-image-text-medium-text-subtitle-typography-letter-spacing
  );
  color: var(--card-image-text-medium-text-subtitle-fill);
}

.mw-card {
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Full Image Type */

.mw-card--full-image {
  border-radius: var(
    --card-full-image-image-large-container-default-border-radius
  );
}

.mw-card--full-image.mw-card--large {
  width: var(--card-full-image-image-large-container-default-width);
  height: var(--card-full-image-image-large-container-default-height);
  border-radius: var(
    --card-full-image-image-large-container-default-border-radius
  );
}

.mw-card--full-image.mw-card--medium {
  width: var(--card-full-image-image-medium-container-default-width);
  height: var(--card-full-image-image-medium-container-default-height);
  border-radius: var(
    --card-full-image-image-medium-container-default-border-radius
  );
}

/* Image+Text Type */

.mw-card--image-text {
  border-radius: var(--card-image-text-large-container-default-border-radius);
  background-color: var(--card-image-text-large-text-container-default-fill);
}

.mw-card--image-text.mw-card--large {
  width: var(--card-image-text-large-container-default-sizing);
  height: var(--card-image-text-large-container-default-sizing);
  border-radius: var(--card-image-text-large-container-default-border-radius);
}

.mw-card--image-text.mw-card--medium {
  width: var(--card-image-text-medium-container-default-sizing);
  height: var(--card-image-text-medium-container-default-sizing);
  border-radius: var(--card-image-text-medium-container-default-border-radius);
  background-color: var(--card-image-text-medium-text-container-default-fill);
}

/* Image+Text 타입의 이미지는 상단에 배치 */

.mw-card--image-text.mw-card--large .mw-card-image {
  flex: 1;
  min-height: 0;
  object-fit: cover;
  margin-left: calc(
    -1 * var(--card-image-text-large-text-container-default-horizontal-padding)
  );
  margin-right: calc(
    -1 * var(--card-image-text-large-text-container-default-horizontal-padding)
  );
  margin-top: calc(
    -1 * var(--card-image-text-large-text-container-default-padding-top)
  );
  width: calc(
    100% + 2 *
      var(--card-image-text-large-text-container-default-horizontal-padding)
  );
  border-radius: var(--card-image-text-large-container-default-border-radius)
    var(--card-image-text-large-container-default-border-radius) 0 0;
}

.mw-card--image-text.mw-card--medium .mw-card-image {
  flex: 1;
  min-height: 0;
  object-fit: cover;
  margin-left: calc(
    -1 * var(--card-image-text-medium-text-container-default-horizontal-padding)
  );
  margin-right: calc(
    -1 * var(--card-image-text-medium-text-container-default-horizontal-padding)
  );
  margin-top: calc(
    -1 * var(--card-image-text-medium-text-container-default-vertical-padding)
  );
  width: calc(
    100% + 2 *
      var(--card-image-text-medium-text-container-default-horizontal-padding)
  );
  border-radius: var(--card-image-text-medium-container-default-border-radius)
    var(--card-image-text-medium-container-default-border-radius) 0 0;
}

/* Full Image 타입의 Title은 상단에 오버레이 */

.mw-card--full-image .mw-card-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
}

.mw-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--card-contents-container-image-fill);
}

/* ── Divider ── */
.mw-divider {
  width: 100%;
  box-sizing: border-box;
}

/* Inset Type - 1px line with horizontal padding */

.mw-divider--inset {
  padding-top: var(--divider-container-inset-vertical-padding);
  padding-bottom: var(--divider-container-inset-vertical-padding);
}

.mw-divider--inset::after {
  content: "";
  display: block;
  margin-left: var(--divider-container-inset-horizontal-padding);
  margin-right: var(--divider-container-inset-horizontal-padding);
  height: var(--divider-height-inset-height);
  background-color: var(--divider-height-inset-fill);
}

/* Full Width Type - 8px height block with no horizontal padding */

.mw-divider--full-width {
  padding-top: var(--divider-container-full-width-vertical-padding);
  padding-bottom: var(--divider-container-full-width-vertical-padding);
}

.mw-divider--full-width::after {
  content: "";
  display: block;
  height: var(--divider-height-full-width-height);
  background-color: var(--divider-height-full-width-fill);
}

/* ── Indicator ── */
/* ========================================
   Dot Indicator
   ======================================== */

.mw-dot-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--dot-indicator-container-default-item-spacing);
}

.mw-dot-indicator__dot {
  width: var(--dot-item-dot-size-default-sizing);
  height: var(--dot-item-dot-size-default-sizing);
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

/* Default Theme */

.mw-dot-indicator--default .mw-dot-indicator__dot--active {
  background-color: var(--dot-item-fill-default-active-fill);
}

.mw-dot-indicator--default .mw-dot-indicator__dot--inactive {
  background-color: var(--dot-item-fill-default-inactive-fill);
}

/* Inverse Theme */

.mw-dot-indicator--inverse .mw-dot-indicator__dot--active {
  background-color: var(--dot-item-fill-inverse-active-fill);
}

.mw-dot-indicator--inverse .mw-dot-indicator__dot--inactive {
  background-color: var(--dot-item-fill-inverse-inactive-fill);
}

/* ========================================
   Number Indicator
   ======================================== */

.mw-number-indicator {
  display: inline-flex;
  align-items: center;
  background-color: var(--number-indicator-fill-default-fill);
  color: var(--number-indicator-text-color-current-fill);
  font-family: var(--number-indicator-text-size-default-typography-font-family);
  font-size: var(--number-indicator-text-size-default-typography-font-size);
  font-weight: var(--number-indicator-text-size-default-typography-font-weight);
  line-height: var(--number-indicator-text-size-default-typography-line-height);
  letter-spacing: var(--number-indicator-text-size-default-typography-letter-spacing);
}

/* Basic Type */

.mw-number-indicator--basic {
  height: var(--number-indicator-container-basic-height);
  padding-left: var(--number-indicator-container-basic-horizontal-padding);
  padding-right: var(--number-indicator-container-basic-horizontal-padding);
  border-radius: var(--number-indicator-container-basic-border-radius);
}

.mw-number-indicator--basic .mw-number-indicator__text {
  margin-right: var(--number-indicator-container-basic-item-spacing);
}

/* Playback Type */

.mw-number-indicator--playback {
  height: var(--number-indicator-container-playback-height);
  padding-left: var(--number-indicator-container-playback-padding-left);
  padding-right: var(--number-indicator-container-playback-padding-right);
  border-radius: var(--number-indicator-container-playback-border-radius);
}

.mw-number-indicator--playback .mw-number-indicator__text {
  margin-right: var(--number-indicator-container-basic-item-spacing);
}

.mw-number-indicator--playback .mw-number-indicator__total-wrapper {
  margin-right: var(--number-indicator-container-playback-item-spacing);
}

/* Selector Type */

.mw-number-indicator--selector {
  height: var(--number-indicator-container-selector-height);
  padding-left: var(--number-indicator-container-selector-padding-left);
  padding-right: var(--number-indicator-container-selector-padding-right);
  border-radius: var(--number-indicator-container-selector-border-radius);
}

.mw-number-indicator--selector .mw-number-indicator__text {
  margin-right: var(--number-indicator-container-basic-item-spacing);
}

.mw-number-indicator--selector .mw-number-indicator__total-wrapper {
  margin-right: var(--number-indicator-container-selector-item-spacing);
}

.mw-number-indicator__text {
  color: var(--number-indicator-text-color-current-fill);
}

.mw-number-indicator__total-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.mw-number-indicator__separator {
  color: var(--number-indicator-text-color-total-fill);
}

.mw-number-indicator__total {
  color: var(--number-indicator-text-color-total-fill);
}

.mw-number-indicator__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--number-indicator-icon-color-default-fill);
  width: var(--number-indicator-icon-size-default-sizing);
  height: var(--number-indicator-icon-size-default-sizing);
}

.mw-number-indicator__icon svg {
  width: 100%;
  height: 100%;
  color: inherit;
}

.mw-number-indicator__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--controller-playback-icon-color-default-fill);
  width: var(--controller-playback-icon-size-default-sizing);
  height: var(--controller-playback-icon-size-default-sizing);
}

.mw-number-indicator__button svg {
  width: 100%;
  height: 100%;
}

.mw-number-indicator__button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ========================================
   Progress Indicator
   ======================================== */

.mw-progress-indicator {
  display: flex;
  align-items: center;
  gap: var(--progress-indicator-container-default-item-spacing);
  width: 100%;
}

.mw-progress-indicator__item {
  flex: 1;
  min-width: 0;
  height: var(--progress-indicator-border-color-container-default-height);
  border-radius: var(--progress-indicator-border-color-container-default-border-radius);
  transition: background-color 0.3s ease;
}

.mw-progress-indicator__item--fill {
  background-color: var(--progress-indicator-border-color-fill-fill);
}

.mw-progress-indicator__item--empty {
  background-color: var(--progress-indicator-border-color-empty-fill);
}

/* ── Loading ── */
.mw-loading {
  /* 기본 스타일 */
  display: inline-block;
  animation: mw-loading-spin 1s linear infinite;
}

/* Sizes */

.mw-loading--small {
  width: var(--loading-container-small-sizing);
  height: var(--loading-container-small-sizing);
}

.mw-loading--medium {
  width: var(--loading-container-medium-sizing);
  height: var(--loading-container-medium-sizing);
}

.mw-loading--large {
  width: var(--loading-container-large-sizing);
  height: var(--loading-container-large-sizing);
}

/* 이미지 스타일 */

.mw-loading img {
  width: 100%;
  height: 100%;
  display: block;
}

/* 회전 애니메이션 */

@keyframes mw-loading-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ── Skeleton ── */
.mw-skeleton {
  /* 기본 스타일 */
  position: relative;
  display: inline-block;
  overflow: hidden;
  background-color: var(--skeleton-fill-default-fill);
}

/* Animation - Shimmer Effect */

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.mw-skeleton::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--skeleton-gradient-fill-defaut-sizing);
  height: 100%;
  background: var(--skeleton-gradient-fill-defaut-fill);
  animation: skeleton-shimmer 2s infinite ease-in-out;
}

/* Type Variants */

.mw-skeleton--text {
  width: var(--skeleton-container-text-width);
  height: var(--skeleton-container-text-height);
  border-radius: var(--skeleton-container-text-border-radius);
}

.mw-skeleton--rectangle {
  width: var(--skeleton-container-rectangle-width);
  height: var(--skeleton-container-rectangle-height);
}

.mw-skeleton--circle {
  width: var(--skeleton-container-circle-width);
  height: var(--skeleton-container-circle-height);
  border-radius: var(--skeleton-container-circle-border-radius);
}

/* ── Toast ── */
.mw-toast {
  /* 기본 스타일 */
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-width: 280px;
  background-color: var(--notification-toast-fill-default-fill);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-3);

  /* 위치 고정 */
  position: fixed;
  bottom: 42px;
  left: 50%;
  z-index: 1000;

  /* 애니메이션 */
  opacity: 0;
  transform: translate(-50%, 20px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* close 버튼이 없을 때는 중앙 정렬 */

.mw-toast:not(.mw-toast--with-close) {
  justify-content: center;
}

/* close 버튼이 있을 때는 양끝 정렬 */

.mw-toast--with-close {
  justify-content: space-between;
}

/* 애니메이션 상태 */

.mw-toast--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ========================================
   Type: Basic (텍스트만)
   ======================================== */

.mw-toast--basic {
  height: var(--notification-toast-basic-container-action-height);
  padding-top: var(--notification-toast-basic-container-action-vertical-padding);
  padding-bottom: var(--notification-toast-basic-container-action-vertical-padding);
  padding-left: var(--notification-toast-basic-container-action-horizontal-padding);
  padding-right: var(--notification-toast-basic-container-action-horizontal-padding);
}

/* Basic with Close */

.mw-toast--basic.mw-toast--with-close {
  height: var(--notification-toast-basic-container-close-height);
  padding-left: var(--notification-toast-basic-text-area-close-padding-left);
  padding-right: var(--space-4);
  padding-top: var(--notification-toast-basic-container-close-vertical-padding);
  padding-bottom: var(--notification-toast-basic-container-close-vertical-padding);
  gap: var(--notification-toast-basic-container-close-item-spacing);
}

/* ========================================
   Type: Icon (아이콘 + 텍스트)
   ======================================== */

.mw-toast--icon {
  height: var(--notification-toast-icon-container-close-height);
  padding-right: var(--notification-toast-icon-container-close-padding-right);
  padding-left: var(--notification-toast-icon-text-area-close-padding-left);
  padding-top: var(--notification-toast-icon-text-area-close-vertical-padding);
  padding-bottom: var(--notification-toast-icon-text-area-close-vertical-padding);
  gap: var(--notification-toast-icon-container-close-item-spacing);
}

/* ========================================
   Elements
   ======================================== */

/* Content (Icon + Text 그룹) */

.mw-toast__content {
  display: flex;
  align-items: center;
  gap: var(--notification-toast-icon-text-area-close-item-spacing);
}

/* Icon */

.mw-toast__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--notification-icon-icon-size-default-sizing);
  height: var(--notification-icon-icon-size-default-sizing);
  flex-shrink: 0;
}

.mw-toast__icon svg {
  width: 100%;
  height: 100%;
  color: var(--notification-icon-feedback-success-fill);
}

/* Text */

.mw-toast__text {
  color: var(--notification-toast-text-default-fill);
  font-family: var(--notification-toast-text-default-typography-font-family);
  font-size: var(--notification-toast-text-default-typography-font-size);
  font-weight: var(--notification-toast-text-default-typography-font-weight);
  letter-spacing: var(--notification-toast-text-default-typography-letter-spacing);
  line-height: var(--notification-toast-text-default-typography-line-height);
  text-align: center;
}

/* Close Button */

.mw-toast__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--notification-toast-text-default-fill);
}

.mw-toast--basic .mw-toast__close {
  width: var(--notification-toast-basic-button-area-close-sizing);
  height: var(--notification-toast-basic-button-area-close-sizing);
}

.mw-toast--icon .mw-toast__close {
  width: var(--notification-toast-icon-button-area-close-sizing);
  height: var(--notification-toast-icon-button-area-close-sizing);
}

.mw-toast__close svg {
  width: var(--notification-icon-icon-size-default-sizing);
  height: var(--notification-icon-icon-size-default-sizing);
}

/* ── Snackbar ── */
.mw-snackbar {
  /* 기본 스타일 */
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-width: 280px;
  height: var(--notification-snackbar-container-default-height);
  background-color: var(--notification-snackbar-fill-default-fill);
  border-radius: var(--notification-snackbar-container-default-border-radius);
  box-shadow: var(--notification-snackbar-container-default-box-shadow);
  padding-right: var(--notification-snackbar-container-default-padding-right);
  gap: var(--notification-snackbar-container-default-item-spacing);

  /* 위치 고정 */
  position: fixed;
  bottom: 42px;
  left: 50%;
  z-index: 1000;

  /* 애니메이션 */
  opacity: 0;
  transform: translate(-50%, 20px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* 애니메이션 상태 */

.mw-snackbar--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ========================================
   Icon Variants
   ======================================== */

/* 아이콘 없음 */

.mw-snackbar--no-icon .mw-snackbar__text {
  padding-left: var(--notification-snackbar-basic-text-area-default-padding-left);
  padding-top: var(--notification-snackbar-basic-text-area-default-vertical-padding);
  padding-bottom: var(--notification-snackbar-basic-text-area-default-vertical-padding);
}

/* 아이콘 있음 */

.mw-snackbar--with-icon {
  padding-left: var(--notification-snackbar-icon-text-area-default-horizontal-padding);
  padding-top: var(--notification-snackbar-icon-text-area-default-vertical-padding);
  padding-bottom: var(--notification-snackbar-icon-text-area-default-vertical-padding);
  gap: var(--notification-snackbar-icon-text-area-default-item-spacing);
}

/* ========================================
   Elements
   ======================================== */

/* Icon */

.mw-snackbar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--notification-icon-icon-size-default-sizing);
  height: var(--notification-icon-icon-size-default-sizing);
  flex-shrink: 0;
}

.mw-snackbar__icon svg {
  width: 100%;
  height: 100%;
  color: var(--notification-icon-feedback-success-fill);
}

/* Text */

.mw-snackbar__text {
  flex: 1;
  color: var(--notification-snackbar-text-default-fill);
  font-family: var(--notification-snackbar-text-default-typography-font-family);
  font-size: var(--notification-snackbar-text-default-typography-font-size);
  font-weight: var(--notification-snackbar-text-default-typography-font-weight);
  line-height: var(--notification-snackbar-text-default-typography-line-height);
  letter-spacing: var(--notification-snackbar-text-default-typography-letter-spacing);
  text-align: left;
}

/* Action Button (TextButton 컴포넌트) */

.mw-snackbar__action {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: var(--notification-snackbar-basic-button-area-action-height);
  padding-left: var(--notification-snackbar-basic-button-area-action-horizontal-padding);
  padding-right: var(--notification-snackbar-basic-button-area-action-horizontal-padding);
}

/* Close Button */

.mw-snackbar__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--notification-snackbar-basic-button-area-close-sizing);
  height: var(--notification-snackbar-basic-button-area-close-sizing);
  flex-shrink: 0;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

.mw-snackbar__close svg {
  width: var(--notification-icon-icon-size-default-sizing);
  height: var(--notification-icon-icon-size-default-sizing);
  color: var(--notification-snackbar-text-default-fill);
}

/* ── Tooltip ── */
.mw-tooltip {
  /* 기본 스타일 */
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}

/* Caret Tip Container */

.mw-tooltip__caret-container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  line-height: 0;
  position: relative;
  z-index: 1;
}

.mw-tooltip__caret {
  width: 14px;
  height: 8px;
  position: relative;
  display: block;
  line-height: 0;
}

.mw-tooltip__caret-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.mw-tooltip__caret-stroke {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Container */

.mw-tooltip__container {
  display: inline-flex;
  align-items: flex-start;
  border-radius: var(--tooltip-container-toggle-border-radius);
}

/* Text */

.mw-tooltip__text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  white-space: pre-line;
}

/* Close Button */

.mw-tooltip__close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tooltip-icon-container-default-sizing);
  height: var(--tooltip-icon-container-default-sizing);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.mw-tooltip__close-button svg {
  width: var(--tooltip-icon-icon-size-default-sizing);
  height: var(--tooltip-icon-icon-size-default-sizing);
}

/* Type: Toggle */

.mw-tooltip--toggle .mw-tooltip__container {
  background-color: var(--tooltip-container-toggle-fill);
  border: var(--tooltip-container-toggle-border-width)
    var(--tooltip-container-toggle-border-style)
    var(--tooltip-container-toggle-border-color);
  gap: var(--tooltip-container-toggle-item-spacing);
  padding: var(--tooltip-container-toggle-vertical-padding)
    var(--tooltip-container-toggle-padding-right)
    var(--tooltip-container-toggle-vertical-padding)
    var(--tooltip-container-toggle-padding-left);
}

.mw-tooltip--toggle .mw-tooltip__text {
  color: var(--tooltip-text-secondary-fill);
  font-family: var(--tooltip-text-secondary-typography-font-family);
  font-size: var(--tooltip-text-secondary-typography-font-size);
  font-weight: var(--tooltip-text-secondary-typography-font-weight);
  letter-spacing: var(--tooltip-text-secondary-typography-letter-spacing);
  line-height: var(--tooltip-text-secondary-typography-line-height);
}

.mw-tooltip--toggle {
  filter: drop-shadow(0px 4px 8px rgba(20, 20, 20, 0.1)) drop-shadow(0px 0px 4px rgba(20, 20, 20, 0.05));
}

.mw-tooltip--toggle .mw-tooltip__caret-fill {
  fill: var(--tooltip-container-toggle-fill);
}

.mw-tooltip--toggle .mw-tooltip__caret-stroke {
  fill: var(--tooltip-container-toggle-border-color);
}

/* Type: Auto */

.mw-tooltip--auto {
  filter: drop-shadow(0px 4px 8px rgba(20, 20, 20, 0.1)) drop-shadow(0px 0px 4px rgba(20, 20, 20, 0.05));
}

/* Auto 타입 - Top/Bottom 방향 화살표 크기 (12x6) */

.mw-tooltip--auto.mw-tooltip--top-center .mw-tooltip__caret,
.mw-tooltip--auto.mw-tooltip--top-left .mw-tooltip__caret,
.mw-tooltip--auto.mw-tooltip--top-right .mw-tooltip__caret,
.mw-tooltip--auto.mw-tooltip--bottom-center .mw-tooltip__caret,
.mw-tooltip--auto.mw-tooltip--bottom-left .mw-tooltip__caret,
.mw-tooltip--auto.mw-tooltip--bottom-right .mw-tooltip__caret {
  width: 12px;
  height: 6px;
}

/* Auto 타입 - Left/Right 방향 화살표 크기 (6x12) */

.mw-tooltip--auto.mw-tooltip--left-top .mw-tooltip__caret,
.mw-tooltip--auto.mw-tooltip--left-center .mw-tooltip__caret,
.mw-tooltip--auto.mw-tooltip--left-bottom .mw-tooltip__caret,
.mw-tooltip--auto.mw-tooltip--right-top .mw-tooltip__caret,
.mw-tooltip--auto.mw-tooltip--right-center .mw-tooltip__caret,
.mw-tooltip--auto.mw-tooltip--right-bottom .mw-tooltip__caret {
  width: 6px;
  height: 12px;
}

/* Auto 타입 - Top 방향 화살표와 엘리먼트 사이 4px 간격 */

.mw-tooltip--auto.mw-tooltip--top-center,
.mw-tooltip--auto.mw-tooltip--top-left,
.mw-tooltip--auto.mw-tooltip--top-right {
  padding-top: 4px;
}

/* Auto 타입 - Bottom 방향 화살표와 엘리먼트 사이 4px 간격 */

.mw-tooltip--auto.mw-tooltip--bottom-center,
.mw-tooltip--auto.mw-tooltip--bottom-left,
.mw-tooltip--auto.mw-tooltip--bottom-right {
  padding-bottom: 4px;
}

/* Auto 타입 - Left 방향 컨테이너 너비 조정 및 간격 */

.mw-tooltip--auto.mw-tooltip--left-top,
.mw-tooltip--auto.mw-tooltip--left-center,
.mw-tooltip--auto.mw-tooltip--left-bottom {
  padding-left: 4px;
}

.mw-tooltip--auto.mw-tooltip--left-top .mw-tooltip__caret-container,
.mw-tooltip--auto.mw-tooltip--left-center .mw-tooltip__caret-container,
.mw-tooltip--auto.mw-tooltip--left-bottom .mw-tooltip__caret-container {
  width: 6px;
}

/* Auto 타입 - Right 방향 컨테이너 너비 조정 및 간격 */

.mw-tooltip--auto.mw-tooltip--right-top,
.mw-tooltip--auto.mw-tooltip--right-center,
.mw-tooltip--auto.mw-tooltip--right-bottom {
  padding-right: 4px;
}

.mw-tooltip--auto.mw-tooltip--right-top .mw-tooltip__caret-container,
.mw-tooltip--auto.mw-tooltip--right-center .mw-tooltip__caret-container,
.mw-tooltip--auto.mw-tooltip--right-bottom .mw-tooltip__caret-container {
  width: 6px;
}

.mw-tooltip--auto .mw-tooltip__container {
  background-color: var(--tooltip-container-auto-fill);
  padding: var(--tooltip-container-auto-vertical-padding)
    var(--tooltip-container-auto-horizontal-padding);
  border-radius: var(--tooltip-container-auto-border-radius);
  border: none;
}

.mw-tooltip--auto .mw-tooltip__text {
  color: var(--tooltip-text-inverse-fill);
  font-family: var(--tooltip-text-inverse-typography-font-family);
  font-size: var(--tooltip-text-inverse-typography-font-size);
  font-weight: var(--tooltip-text-inverse-typography-font-weight);
  letter-spacing: var(--tooltip-text-inverse-typography-letter-spacing);
  line-height: var(--tooltip-text-inverse-typography-line-height);
}

.mw-tooltip--auto .mw-tooltip__caret-fill {
  fill: var(--tooltip-container-auto-fill);
}

.mw-tooltip--auto .mw-tooltip__caret-stroke {
  fill: var(--tooltip-container-auto-fill);
}

/* Position: Top Center */

.mw-tooltip--top-center .mw-tooltip__caret-container {
  justify-content: center;
  padding-left: var(--tooltip-container-toggle-padding-left);
  padding-right: var(--tooltip-container-toggle-padding-left);
}

.mw-tooltip--toggle.mw-tooltip--top-center .mw-tooltip__caret-container,
.mw-tooltip--toggle.mw-tooltip--top-left .mw-tooltip__caret-container,
.mw-tooltip--toggle.mw-tooltip--top-right .mw-tooltip__caret-container {
  margin-bottom: -1px;
}

/* Position: Top Left */

.mw-tooltip--top-left .mw-tooltip__caret-container {
  justify-content: flex-start;
  padding-left: var(--tooltip-container-toggle-padding-left);
  padding-right: var(--tooltip-container-toggle-padding-left);
}

/* Position: Top Right */

.mw-tooltip--top-right .mw-tooltip__caret-container {
  justify-content: flex-end;
  padding-left: var(--tooltip-container-toggle-padding-left);
  padding-right: var(--tooltip-container-toggle-padding-left);
}

/* Position: Bottom */

.mw-tooltip--bottom-center,
.mw-tooltip--bottom-left,
.mw-tooltip--bottom-right {
  flex-direction: column-reverse;
}

.mw-tooltip--toggle.mw-tooltip--bottom-center .mw-tooltip__caret-container,
.mw-tooltip--toggle.mw-tooltip--bottom-left .mw-tooltip__caret-container,
.mw-tooltip--toggle.mw-tooltip--bottom-right .mw-tooltip__caret-container {
  margin-top: -1px;
}

/* Position: Bottom Center */

.mw-tooltip--bottom-center .mw-tooltip__caret-container {
  justify-content: center;
  padding-left: var(--tooltip-container-toggle-padding-left);
  padding-right: var(--tooltip-container-toggle-padding-left);
}

/* Position: Bottom Left */

.mw-tooltip--bottom-left .mw-tooltip__caret-container {
  justify-content: flex-start;
  padding-left: var(--tooltip-container-toggle-padding-left);
  padding-right: var(--tooltip-container-toggle-padding-left);
}

/* Position: Bottom Right */

.mw-tooltip--bottom-right .mw-tooltip__caret-container {
  justify-content: flex-end;
  padding-left: var(--tooltip-container-toggle-padding-left);
  padding-right: var(--tooltip-container-toggle-padding-left);
}

/* Position: Left (화살표가 왼쪽에 위치, 가로 배치) */

.mw-tooltip--left-top,
.mw-tooltip--left-center,
.mw-tooltip--left-bottom {
  flex-direction: row;
  padding-top: 0;
  gap: 0;
  align-items: stretch;
}

.mw-tooltip--toggle.mw-tooltip--left-top .mw-tooltip__caret-container,
.mw-tooltip--toggle.mw-tooltip--left-center .mw-tooltip__caret-container,
.mw-tooltip--toggle.mw-tooltip--left-bottom .mw-tooltip__caret-container {
  margin-right: -1px;
}

.mw-tooltip--left-top .mw-tooltip__caret-container,
.mw-tooltip--left-center .mw-tooltip__caret-container,
.mw-tooltip--left-bottom .mw-tooltip__caret-container {
  width: 8px;
  flex-direction: column;
  align-self: stretch;
}

.mw-tooltip--left-top .mw-tooltip__caret,
.mw-tooltip--left-center .mw-tooltip__caret,
.mw-tooltip--left-bottom .mw-tooltip__caret {
  width: 8px;
  height: 14px;
  flex-shrink: 0;
}

/* Position: Left Top */

.mw-tooltip--left-top .mw-tooltip__caret-container {
  justify-content: flex-start;
  padding-top: 0;
  padding-bottom: 0;
}

.mw-tooltip--left-top .mw-tooltip__caret {
  margin-top: var(--tooltip-container-toggle-vertical-padding);
}

/* Position: Left Center */

.mw-tooltip--left-center .mw-tooltip__caret-container {
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

/* Position: Left Bottom */

.mw-tooltip--left-bottom .mw-tooltip__caret-container {
  justify-content: flex-end;
  padding-top: 0;
  padding-bottom: 0;
}

.mw-tooltip--left-bottom .mw-tooltip__caret {
  margin-bottom: var(--tooltip-container-toggle-vertical-padding);
}

/* Position: Right (화살표가 오른쪽에 위치, 가로 배치) */

.mw-tooltip--right-top,
.mw-tooltip--right-center,
.mw-tooltip--right-bottom {
  flex-direction: row-reverse;
  padding-top: 0;
  gap: 0;
  align-items: stretch;
}

.mw-tooltip--toggle.mw-tooltip--right-top .mw-tooltip__caret-container,
.mw-tooltip--toggle.mw-tooltip--right-center .mw-tooltip__caret-container,
.mw-tooltip--toggle.mw-tooltip--right-bottom .mw-tooltip__caret-container {
  margin-left: -1px;
}

.mw-tooltip--right-top .mw-tooltip__caret-container,
.mw-tooltip--right-center .mw-tooltip__caret-container,
.mw-tooltip--right-bottom .mw-tooltip__caret-container {
  width: 8px;
  flex-direction: column;
  align-self: stretch;
}

.mw-tooltip--right-top .mw-tooltip__caret,
.mw-tooltip--right-center .mw-tooltip__caret,
.mw-tooltip--right-bottom .mw-tooltip__caret {
  width: 8px;
  height: 14px;
  flex-shrink: 0;
}

/* Position: Right Top */

.mw-tooltip--right-top .mw-tooltip__caret-container {
  justify-content: flex-start;
  padding-top: 0;
  padding-bottom: 0;
}

.mw-tooltip--right-top .mw-tooltip__caret {
  margin-top: var(--tooltip-container-toggle-vertical-padding);
}

/* Position: Right Center */

.mw-tooltip--right-center .mw-tooltip__caret-container {
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

/* Position: Right Bottom */

.mw-tooltip--right-bottom .mw-tooltip__caret-container {
  justify-content: flex-end;
  padding-top: 0;
  padding-bottom: 0;
}

.mw-tooltip--right-bottom .mw-tooltip__caret {
  margin-bottom: var(--tooltip-container-toggle-vertical-padding);
}

/* ── Popup ── */
/* Popup Dim (배경 오버레이) */

.mw-popup__dim {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 9998;
  opacity: 0;
}

.mw-popup__dim[data-state="open"] {
  animation: mw-popup-overlay-show 250ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

.mw-popup__dim[data-state="closed"] {
  animation: mw-popup-overlay-hide 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Popup Container Wrapper */

.mw-popup__container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
}

.mw-popup__container > * {
  pointer-events: auto;
}

.mw-popup {
  /* 기본 스타일 */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  z-index: 10000;
}

/* Center Popup Type */

.mw-popup--center {
  background-color: var(--center-popup-container-default-fill);
  border-radius: var(--center-popup-container-default-border-radius);
  box-shadow: var(--center-popup-container-default-box-shadow);
  padding-left: var(--center-popup-container-default-horizontal-padding);
  padding-right: var(--center-popup-container-default-horizontal-padding);
  padding-top: var(--center-popup-container-default-padding-top);
  padding-bottom: var(--center-popup-container-default-padding-bottom);
  gap: var(--center-popup-container-default-item-spacing);
  min-width: 320px;
  min-height: 186px;
  justify-content: space-between;
}

/* Center Popup - Title Area */

.mw-popup--center .mw-popup__title-area {
  display: flex;
  flex-direction: column;
  gap: var(--center-popup-text-body-padding-top);
  text-align: center;
  flex: 1;
  min-height: 0;
  justify-content: center;
}

/* Center Popup - Title Text */

.mw-popup--center .mw-popup__title {
  color: var(--center-popup-text-title-fill);
  font-family: var(--center-popup-text-title-typography-font-family);
  font-size: var(--center-popup-text-title-typography-font-size);
  font-weight: var(--center-popup-text-title-typography-font-weight);
  line-height: var(--center-popup-text-title-typography-line-height);
  letter-spacing: var(--center-popup-text-title-typography-letter-spacing);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: var(--center-popup-text-max-line-title-number);
  -webkit-box-orient: vertical;
}

/* Center Popup - Body Text */

.mw-popup--center .mw-popup__body {
  color: var(--center-popup-text-body-fill);
  font-family: var(--center-popup-text-body-typography-font-family);
  font-size: var(--center-popup-text-body-typography-font-size);
  font-weight: var(--center-popup-text-body-typography-font-weight);
  line-height: var(--center-popup-text-body-typography-line-height);
  letter-spacing: var(--center-popup-text-body-typography-letter-spacing);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: var(--center-popup-text-max-line-body-number);
  -webkit-box-orient: vertical;
}

/* Center Popup - Button Group */

.mw-popup--center .mw-popup__button-group {
  display: flex;
  gap: var(--center-popup-button-spacing-spacing);
}

.mw-popup--center .mw-popup__button-group > * {
  flex: 1;
}

/* Full Popup Type */

.mw-popup--full {
  background-color: var(--full-popup-container-contents-fill);
  width: 100%;
  height: 100%;
  padding-bottom: max(34px, env(safe-area-inset-bottom));
}

/* Full Popup - Title Area */

.mw-popup--full .mw-popup__title-area {
  display: flex;
  align-items: center;
  padding-left: var(--full-popup-text-title-horizontal-padding);
  padding-right: var(--full-popup-text-title-horizontal-padding);
  padding-top: var(--full-popup-text-title-padding-top);
  padding-bottom: var(--full-popup-text-title-padding-bottom);
}

/* Full Popup - Title */

.mw-popup--full .mw-popup__title {
  color: var(--full-popup-text-title-fill);
  font-family: var(--full-popup-text-title-typography-font-family);
  font-size: var(--full-popup-text-title-typography-font-size);
  font-weight: var(--full-popup-text-title-typography-font-weight);
  line-height: var(--full-popup-text-title-typography-line-height);
  letter-spacing: var(--full-popup-text-title-typography-letter-spacing);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: var(--full-popup-text-max-line-title-number);
  -webkit-box-orient: vertical;
  width: var(--full-popup-text-title-width);
}

/* Full Popup - Contents */

.mw-popup--full .mw-popup__contents {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-left: var(--full-popup-container-contents-horizontal-padding);
  padding-right: var(--full-popup-container-contents-horizontal-padding);
  padding-top: var(--full-popup-container-contents-vertical-padding);
  padding-bottom: var(--full-popup-container-contents-vertical-padding);
  overflow: auto;
}

/* Full Popup - Button Area */

.mw-popup--full .mw-popup__button-area {
  display: flex;
  flex-direction: row;
  gap: var(--full-popup-container-button-area-item-spacing);
  padding-left: var(--full-popup-container-button-area-horizontal-padding);
  padding-right: var(--full-popup-container-button-area-horizontal-padding);
  padding-top: var(--full-popup-container-button-area-vertical-padding);
  padding-bottom: var(--full-popup-container-button-area-vertical-padding);
}

.mw-popup--full .mw-popup__button-area > * {
  flex: 1;
}

/* Animations */

/* Overlay Animations */

@keyframes mw-popup-overlay-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes mw-popup-overlay-hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Center Popup Animations */

.mw-popup--center[data-state="open"] {
  animation: mw-popup-content-show 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mw-popup--center[data-state="closed"] {
  animation: mw-popup-content-hide 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes mw-popup-content-show {
  0% {
    opacity: 0;
    transform: translate(0, 16px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes mw-popup-content-hide {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(0, 16px) scale(0.94);
  }
}

/* Full Popup Animations */

.mw-popup--full[data-state="open"] {
  animation: mw-popup-full-show 350ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

.mw-popup--full[data-state="closed"] {
  animation: mw-popup-full-hide 250ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes mw-popup-full-show {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mw-popup-full-hide {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

/* ── BottomSheet ── */
/* iOS Native Style Animation */
/* Overlay (Dim) - iOS style */
.mw-bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
}
.mw-bottom-sheet-overlay[data-state="open"] {
  animation: mw-bottom-sheet-overlay-in 350ms cubic-bezier(0.36, 0.66, 0.04, 1)
    forwards;
}
.mw-bottom-sheet-overlay[data-state="closed"] {
  animation: mw-bottom-sheet-overlay-out 250ms cubic-bezier(0.36, 0.66, 0.04, 1)
    forwards;
}
@keyframes mw-bottom-sheet-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mw-bottom-sheet-overlay-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* Container */
.mw-bottom-sheet-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
}
/* Main Component - iOS native animation */
.mw-bottom-sheet {
  border-top-left-radius: var(
    --bottom-sheet-container-default-border-radius-top-left
  );
  border-top-right-radius: var(
    --bottom-sheet-container-default-border-radius-top-right
  );
  background-color: var(--bottom-sheet-container-default-fill);
  display: flex;
  flex-direction: column;
  gap: var(--bottom-sheet-container-default-item-spacing);
  width: 100%;
  max-width: 100vw;
  max-height: 96vh;
  overflow: auto;
  pointer-events: auto;
  box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, 0.15),
    0 -2px 10px -2px rgba(0, 0, 0, 0.1);
  will-change: transform;
  transform: translateY(100%);
  padding-bottom: max(34px, env(safe-area-inset-bottom));
}
.mw-bottom-sheet[data-state="open"] {
  animation: mw-bottom-sheet-slide-in 500ms cubic-bezier(0.36, 0.66, 0.04, 1)
    forwards;
}
.mw-bottom-sheet[data-state="closed"] {
  animation: mw-bottom-sheet-slide-out 350ms cubic-bezier(0.36, 0.66, 0.04, 1)
    forwards;
}
/* iOS-style smooth slide up animation */
@keyframes mw-bottom-sheet-slide-in {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
/* iOS-style slide down animation */
@keyframes mw-bottom-sheet-slide-out {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}
/* Header */
.mw-bottom-sheet-header {
  border-radius: var(--bottom-sheet-header-container-default-border-radius);
  width: 100%;
  padding-top: var(--bottom-sheet-header-container-default-padding-top);
  padding-bottom: var(--bottom-sheet-header-container-default-padding-bottom);
  padding-left: var(--bottom-sheet-header-container-default-padding-left);
  padding-right: var(--bottom-sheet-header-container-default-padding-right);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bottom-sheet-header-container-default-item-spacing);
  box-sizing: border-box;
}
.mw-bottom-sheet-header__title-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: var(--space-8);
  gap: var(--space-8);
}
/* Title (Header Text) */
.mw-bottom-sheet-title {
  margin: 0;
  color: var(--bottom-sheet-header-text-header-fill);
  font-family: var(--bottom-sheet-header-text-header-typography-font-family);
  font-size: var(--bottom-sheet-header-text-header-typography-font-size);
  font-weight: var(--bottom-sheet-header-text-header-typography-font-weight);
  letter-spacing: var(
    --bottom-sheet-header-text-header-typography-letter-spacing
  );
  line-height: var(--bottom-sheet-header-text-header-typography-line-height);
  width: 100%;
}
/* Body (Supporting Text) */
.mw-bottom-sheet-body {
  margin: 0;
  color: var(--bottom-sheet-header-text-body-fill);
  font-family: var(--bottom-sheet-header-text-body-typography-font-family);
  font-size: var(--bottom-sheet-header-text-body-typography-font-size);
  font-weight: var(--bottom-sheet-header-text-body-typography-font-weight);
  letter-spacing: var(
    --bottom-sheet-header-text-body-typography-letter-spacing
  );
  line-height: var(--bottom-sheet-header-text-body-typography-line-height);
  width: 100%;
}
/* Close Button */
.mw-bottom-sheet-close-button {
  width: var(--bottom-sheet-header-icon-container-default-sizing);
  height: var(--bottom-sheet-header-icon-container-default-sizing);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: opacity 150ms ease;
  margin-left: auto;
  position: relative;
  z-index: 1;
}
.mw-bottom-sheet-close-button:hover {
  opacity: 0.7;
}
.mw-bottom-sheet-close-button:active {
  opacity: 0.5;
}
.mw-bottom-sheet-close-button svg {
  width: var(--bottom-sheet-header-icon-size-default-sizing);
  height: var(--bottom-sheet-header-icon-size-default-sizing);
  color: var(--bottom-sheet-header-icon-color-default-fill);
}
/* Content */
.mw-bottom-sheet-content {
  border-radius: var(--bottom-sheet-contents-container-default-border-radius);
  padding-top: var(--bottom-sheet-contents-container-default-vertical-padding);
  padding-bottom: var(
    --bottom-sheet-contents-container-default-vertical-padding
  );
  padding-left: var(
    --bottom-sheet-contents-container-default-horizontal-padding
  );
  padding-right: var(
    --bottom-sheet-contents-container-default-horizontal-padding
  );
  flex: 1;
  overflow-y: auto;
}
/* Footer */
.mw-bottom-sheet-footer {
  margin-top: auto;
  display: flex;
  flex-direction: row;
  gap: var(--bottom-sheet-footer-container-default-item-spacing);
  padding-top: var(--bottom-sheet-footer-container-default-vertical-padding);
  padding-left: var(--bottom-sheet-footer-container-default-horizontal-padding);
  padding-right: var(
    --bottom-sheet-footer-container-default-horizontal-padding
  );
  padding-bottom: var(--bottom-sheet-footer-container-default-vertical-padding);
  background-color: var(--bottom-sheet-container-default-fill);
}
.mw-bottom-sheet-footer > * {
  flex: 1;
  min-width: 0;
}
/* iOS style safe area for footer */

/* Full Image */
.mw-bottom-sheet-full-image {
  width: 100%;
  min-height: 420px;
  display: block;
  object-fit: cover;
  position: absolute;
}

/* ── TopNavigation ── */
.mw-top-navigation {
  /* 기본 스타일 */
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--top-navigation-item-container-default-fill);
  height: var(--top-navigation-item-container-default-height);
  padding-left: var(--top-navigation-item-container-default-horizontal-padding);
  padding-right: var(
    --top-navigation-item-container-default-horizontal-padding
  );
  padding-top: var(--top-navigation-item-container-default-vertical-padding);
  padding-bottom: var(--top-navigation-item-container-default-vertical-padding);
  min-width: var(--top-navigation-item-container-default-min-width);
}

/* Scrolling: Off */

.mw-top-navigation--scrolling-off {
  /* 기본 상태 - 추가 스타일 없음 */
}

/* Scrolling: On */

.mw-top-navigation--scrolling-on {
  background-color: var(--top-navigation-item-container-scrolling-fill);
  height: var(--top-navigation-item-container-scrolling-height);
  padding-left: var(
    --top-navigation-item-container-scrolling-horizontal-padding
  );
  padding-right: var(
    --top-navigation-item-container-scrolling-horizontal-padding
  );
  padding-top: var(--top-navigation-item-container-scrolling-vertical-padding);
  padding-bottom: var(
    --top-navigation-item-container-scrolling-vertical-padding
  );
  min-width: var(--top-navigation-item-container-scrolling-min-width);
  box-shadow: var(--top-navigation-item-container-scrolling-box-shadow-offset-x)
    var(--top-navigation-item-container-scrolling-box-shadow-offset-y)
    var(--top-navigation-item-container-scrolling-box-shadow-blur)
    var(--top-navigation-item-container-scrolling-box-shadow-spread)
    var(--top-navigation-item-container-scrolling-box-shadow-color);
}

/* Left Container */

.mw-top-navigation__left {
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
  z-index: 1;
}

/* Center Container - 항상 정중앙 정렬 */

.mw-top-navigation__center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

/* Icon Container (BackButton, IconButton) */

.mw-top-navigation__icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--top-navigation-item-icon-container-default-sizing);
  height: var(--top-navigation-item-icon-container-default-sizing);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  outline: none;
  transition: opacity 0.2s ease;
}

.mw-top-navigation__icon-container:hover {
  opacity: 0.8;
}

.mw-top-navigation__icon-container:active {
  opacity: 0.6;
}

.mw-top-navigation__icon-container svg {
  width: var(--top-navigation-item-icon-icon-size-default-sizing);
  height: var(--top-navigation-item-icon-icon-size-default-sizing);
  color: var(--top-navigation-item-icon-fill-default-fill);
}

/* Title/CI Container */

.mw-top-navigation__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--top-navigation-item-title-ci-container-default-min-height);
  min-width: var(--top-navigation-item-title-ci-container-default-min-width);
  padding-left: var(
    --top-navigation-item-title-ci-container-default-horizontal-padding
  );
  padding-right: var(
    --top-navigation-item-title-ci-container-default-horizontal-padding
  );
  flex: 1;
}

.mw-top-navigation__title-text {
  color: var(--top-navigation-item-title-text-default-fill);
  font-family: var(
    --top-navigation-item-title-text-default-typography-font-family
  );
  font-size: var(--top-navigation-item-title-text-default-typography-font-size);
  font-weight: var(
    --top-navigation-item-title-text-default-typography-font-weight
  );
  line-height: var(
    --top-navigation-item-title-text-default-typography-line-height
  );
  letter-spacing: var(
    --top-navigation-item-title-text-default-typography-letter-spacing
  );
}

/* Logo Container (Button) */

.mw-top-navigation__logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: opacity 0.2s ease;
}

.mw-top-navigation__logo:hover {
  opacity: 0.8;
}

.mw-top-navigation__logo:active {
  opacity: 0.6;
}

.mw-top-navigation__logo img,
.mw-top-navigation__logo svg {
  display: block;
  max-height: 100%;
  width: auto;
}

/* Right Container */

.mw-top-navigation__right {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
  z-index: 1;
}

/* Search Container - Search 컴포넌트를 포함할 때 padding 제거 */

.mw-top-navigation:has(.mw-search-container),
.mw-top-navigation:has(.mw-search) {
  padding: 0;
}

/* ── BottomNavigation ── */
/* Bottom Navigation 기본 스타일 */
.mw-bottom-navigation {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;

  /* 토큰 기반 스타일 */
  background-color: var(--bottom-navigation-container-default-fill);
  border-top: var(--bottom-navigation-container-default-border-top) var(--bottom-navigation-container-default-border-style) var(--bottom-navigation-container-default-border-color);
}
/* items 컨테이너 */
.mw-bottom-navigation__items {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0;
}
/* Bottom Navigation Item 기본 스타일 */
.mw-bottom-navigation-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  cursor: pointer;
  user-select: none;
  position: relative;

  /* 토큰 기반 스타일 */
  height: var(--bottom-navigation-item-container-default-height);
  gap: var(--bottom-navigation-item-container-default-item-spacing);
}
/* Bottom Navigation Item Icon */
.mw-bottom-navigation-item__icon {
  width: var(--bottom-navigation-item-icon-size-default-sizing);
  height: var(--bottom-navigation-item-icon-size-default-sizing);
  flex-shrink: 0;
}
/* Bottom Navigation Item Label */
.mw-bottom-navigation-item__label {
  font-family: var(
    --bottom-navigation-item-label-default-typography-font-family
  );
  font-size: var(--bottom-navigation-item-label-default-typography-font-size);
  font-weight: var(
    --bottom-navigation-item-label-default-typography-font-weight
  );
  letter-spacing: var(
    --bottom-navigation-item-label-default-typography-letter-spacing
  );
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Default State */
.mw-bottom-navigation-item--default .mw-bottom-navigation-item__icon {
  color: var(--bottom-navigation-item-icon-color-default-fill);
}
.mw-bottom-navigation-item--default .mw-bottom-navigation-item__label {
  color: var(--bottom-navigation-item-label-default-fill);
}
/* Selected State */
.mw-bottom-navigation-item--selected .mw-bottom-navigation-item__icon {
  color: var(--bottom-navigation-item-icon-color-selected-fill);
}
.mw-bottom-navigation-item--selected .mw-bottom-navigation-item__label {
  color: var(--bottom-navigation-item-label-selected-fill);
  font-weight: var(--bottom-navigation-item-label-selected-typography-font-weight);
}
/* Disabled State */
.mw-bottom-navigation-item--disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.mw-bottom-navigation-item--disabled .mw-bottom-navigation-item__icon {
  color: var(--bottom-navigation-item-icon-color-disabled-fill);
}
.mw-bottom-navigation-item--disabled .mw-bottom-navigation-item__label {
  color: var(--bottom-navigation-item-label-disabled-fill);
  font-family: var(
    --bottom-navigation-item-label-disabled-typography-font-family
  );
  font-size: var(--bottom-navigation-item-label-disabled-typography-font-size);
  font-weight: var(
    --bottom-navigation-item-label-disabled-typography-font-weight
  );
  letter-spacing: var(
    --bottom-navigation-item-label-disabled-typography-letter-spacing
  );
}

/* ── List ── */
.mw-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.mw-list-text {
  gap: var(--list-text-container-default-item-spacing);
}

.mw-list-logo {
  gap: var(--list-logo-container-default-item-spacing);
}

.mw-list-image {
  display: flex;
  flex-direction: row;
  gap: var(--list-image-container-default-item-spacing);
  overflow-x: auto;
  padding-left: var(--list-image-container-default-horizontal-padding);
  padding-right: var(--list-image-container-default-horizontal-padding);
}

.mw-list-product {
  gap: var(--list-product-1column-container-default-item-spacing);
}

.mw-list-product-grid {
  gap: var(--list-product-2column-container-default-item-spacing);
}

.mw-list-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.mw-list-item--text {
  flex-direction: row;
  gap: var(--list-text-container-default-item-spacing);
  min-width: var(--list-text-container-default-min-width);
  padding-top: var(--list-text-container-default-vertical-padding);
  padding-bottom: var(--list-text-container-default-vertical-padding);
  padding-left: var(--list-text-container-default-horizontal-padding);
  padding-right: var(--list-text-container-default-horizontal-padding);
  background-color: var(--list-text-container-default-fill);
  box-sizing: border-box;
}

.mw-list-item--image {
  flex-direction: row;
  gap: var(--list-item-image-image-container-default-item-spacing);
  min-width: var(--list-item-image-image-container-default-width);
  
  background-color: var(--list-item-image-image-container-default-fill);
}

.mw-list-item--multi {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--list-item-image-image-container-multi-column-item-spacing);
  width: var(--list-item-image-image-container-multi-column-width);
  padding: 0;
}

.mw-list-item--product-image {
  flex-direction: row;
  align-items: center;
  gap: var(--list-item-image-product-container-default-item-spacing);
  min-width: var(--list-item-image-product-container-default-width);
  padding: 0 var(--list-image-container-default-horizontal-padding);
}

.mw-list-item--product-multi {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--list-item-image-product-container-multi-column-item-spacing);
  width: var(--list-item-image-product-container-multi-column-width);
  padding: 0;
}

.mw-list-headline {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.mw-list-headline__title-area {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.mw-list-headline__text {
  color: var(--list-text-text-headline-fill);
  font-family: var(--list-text-text-headline-typography-font-family);
  font-size: var(--list-text-text-headline-typography-font-size);
  font-weight: var(--list-text-text-headline-typography-font-weight);
  letter-spacing: var(--list-text-text-headline-typography-letter-spacing);
  line-height: var(--list-text-text-headline-typography-line-height);
  
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mw-list-headline__body {
  color: var(--list-text-text-body-fill);
  font-family: var(--list-text-text-body-typography-font-family);
  font-size: var(--list-text-text-body-typography-font-size);
  font-weight: var(--list-text-text-body-typography-font-weight);
  letter-spacing: var(--list-text-text-body-typography-letter-spacing);
  line-height: var(--list-text-text-body-typography-line-height);
  
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mw-list-headline__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--list-text-icon-size-default-sizing);
  height: var(--list-text-icon-size-default-sizing);
  color: var(--list-text-icon-color-default-fill);
  
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.mw-list-button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  
  border: none;
  background: transparent;
  padding: 0;
  outline: none;
  
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  border-radius: var(--radius-4);
}

.mw-list-button__text {
  color: var(--list-text-text-trailing-fill);
  font-family: var(--list-text-text-trailing-typography-font-family);
  font-size: var(--list-text-text-trailing-typography-font-size);
  font-weight: var(--list-text-text-trailing-typography-font-weight);
  letter-spacing: var(--list-text-text-trailing-typography-letter-spacing);
  line-height: var(--list-text-text-trailing-typography-line-height);
}

.mw-list-button__icon {
  width: var(--list-text-icon-size-default-sizing);
  height: var(--list-text-icon-size-default-sizing);
  color: var(--list-text-icon-color-default-fill);
}

.mw-list-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mw-list-button:disabled .mw-list-button__text,
.mw-list-button:disabled .mw-list-button__icon {
  opacity: 0.6;
}

.mw-list-item-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mw-list-item-image--default {
  width: var(--list-item-image-image-image-container-default-sizing);
  height: var(--list-item-image-image-image-container-default-sizing);
  border-radius: var(
    --list-item-image-image-image-container-default-border-radius
  );
  border: var(--list-item-image-image-image-container-default-border-width)
    var(--list-item-image-image-image-container-default-border-style)
    var(--list-item-image-image-image-container-default-border-color);
  background-color: var(--list-item-image-image-image-container-default-fill);
}

.mw-list-item-image--multi {
  width: var(--list-item-image-image-image-container-multi-column-sizing);
  height: var(--list-item-image-image-image-container-multi-column-sizing);
  border-radius: var(
    --list-item-image-image-image-container-multi-column-border-radius
  );
  border: var(--list-item-image-image-image-container-multi-column-border-width)
    var(--list-item-image-image-image-container-multi-column-border-style)
    var(--list-item-image-image-image-container-multi-column-border-color);
  background-color: var(
    --list-item-image-image-image-container-multi-column-fill
  );
}

.mw-list-item-image--product {
  width: var(--list-item-image-product-image-container-default-sizing);
  height: var(--list-item-image-product-image-container-default-sizing);
  border-radius: var(
    --list-item-image-product-image-container-default-border-radius
  );
  border: var(--list-item-image-product-image-container-default-border-width)
    var(--list-item-image-product-image-container-default-border-style)
    var(--list-item-image-product-image-container-default-border-color);
  background-color: var(--list-item-image-product-image-container-default-fill);
}

.mw-list-item-image--product-multi {
  width: var(--list-item-image-product-image-container-multi-column-sizing);
  height: var(--list-item-image-product-image-container-multi-column-sizing);
  border-radius: var(
    --list-item-image-product-image-container-multi-column-border-radius
  );
  border: var(
      --list-item-image-product-image-container-multi-column-border-width
    )
    var(--list-item-image-product-image-container-multi-column-border-style)
    var(--list-item-image-product-image-container-multi-column-border-color);
  background-color: var(
    --list-item-image-product-image-container-multi-column-fill
  );
}

.mw-list-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.mw-list-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: var(--list-item-image-image-text-area-default-min-width);
}

.mw-list-title--multi {
  width: var(--list-item-image-image-text-area-multi-column-min-width);
  min-width: unset;
}

.mw-list-title__body {
  color: var(--list-item-image-image-text-body-fill);
  font-family: var(--list-item-image-image-text-body-typography-font-family);
  font-size: var(--list-item-image-image-text-body-typography-font-size);
  font-weight: var(--list-item-image-image-text-body-typography-font-weight);
  letter-spacing: var(
    --list-item-image-image-text-body-typography-letter-spacing
  );
  line-height: var(--list-item-image-image-text-body-typography-line-height);
  
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mw-list-title__label {
  color: var(--list-item-image-image-text-label-fill);
  font-family: var(--list-item-image-image-text-label-typography-font-family);
  font-size: var(--list-item-image-image-text-label-typography-font-size);
  font-weight: var(--list-item-image-image-text-label-typography-font-weight);
  letter-spacing: var(
    --list-item-image-image-text-label-typography-letter-spacing
  );
  line-height: var(--list-item-image-image-text-label-typography-line-height);
  
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mw-list-product-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  min-width: var(--list-item-image-product-text-area-default-min-width);
  justify-content: center;
  height: 100%;
}

.mw-list-product-title--multi {
  width: var(--list-item-image-product-text-area-multi-column-width);
  min-width: unset;
  gap: 6px;
  padding-top: 0;
  padding-bottom: 0;
  height: auto;
  justify-content: flex-start;
}

.mw-list-product-title__product {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mw-list-product-title__text {
  display: flex;
  flex-direction: column;
}

.mw-list-product-title__body {
  color: var(--list-item-image-product-text-body-fill);
  font-family: var(--list-item-image-product-text-body-typography-font-family);
  font-size: var(--list-item-image-product-text-body-typography-font-size);
  font-weight: var(--list-item-image-product-text-body-typography-font-weight);
  letter-spacing: var(
    --list-item-image-product-text-body-typography-letter-spacing
  );
  line-height: var(--list-item-image-product-text-body-typography-line-height);
  
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mw-list-product-title__label {
  color: var(--list-item-image-product-text-label-fill);
  font-family: var(--list-item-image-product-text-label-typography-font-family);
  font-size: var(--list-item-image-product-text-label-typography-font-size);
  font-weight: var(--list-item-image-product-text-label-typography-font-weight);
  letter-spacing: var(
    --list-item-image-product-text-label-typography-letter-spacing
  );
  line-height: var(--list-item-image-product-text-label-typography-line-height);
  
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mw-list-product-title__price {
  color: var(--list-item-image-product-text-price-fill);
  font-family: var(--list-item-image-product-text-price-typography-font-family);
  font-size: var(--list-item-image-product-text-price-typography-font-size);
  font-weight: var(--list-item-image-product-text-price-typography-font-weight);
  letter-spacing: var(
    --list-item-image-product-text-price-typography-letter-spacing
  );
  line-height: var(--list-item-image-product-text-price-typography-line-height);
}

.mw-list-product-title__original-price {
  color: var(--text-tertiary);
  font-family: var(--font-family-default);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-default-148);
  text-decoration: line-through;
}

.mw-list-product-title__price-area {
  display: flex;
  margin-top: var(--space-2);
  gap: var(--space-4);
  align-items: center;
}

.mw-list-product-title__discount-rate {
  color: var(--list-item-image-product-text-discount-rate-fill);
  font-family: var(
    --list-item-image-product-text-discount-rate-typography-font-family
  );
  font-size: var(
    --list-item-image-product-text-discount-rate-typography-font-size
  );
  font-weight: var(
    --list-item-image-product-text-discount-rate-typography-font-weight
  );
  letter-spacing: var(
    --list-item-image-product-text-discount-rate-typography-letter-spacing
  );
  line-height: var(
    --list-item-image-product-text-discount-rate-typography-line-height
  );
}

.mw-list-item-image-icon-button {
  position: absolute;
  bottom: 0;
  right: 0;
  width: var(--list-item-image-product-heart-button-container-default-sizing);
  height: var(--list-item-image-product-heart-button-container-default-sizing);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline: none;
}

.mw-list-item-image-icon-button svg {
  width: var(--list-item-image-product-heart-button-icon-size-default-sizing);
  height: var(--list-item-image-product-heart-button-icon-size-default-sizing);
  color: var(--list-item-image-product-heart-button-icon-color-default-fill);
  filter: drop-shadow(0 4px 8px var(--opacity-black-10, rgba(20, 20, 20, 0.1)))
    drop-shadow(0 0 4px var(--opacity-black-5, rgba(20, 20, 20, 0.05)));
}

.mw-list-item-image-icon-button[aria-label*="취소"] svg {
  color: var(--list-item-image-product-heart-button-icon-color-active-fill);
  filter: none;
}

.mw-list-product-tags {
  display: flex;
  align-items: center;
  gap: var(--list-item-image-product-tag-area-default-item-spacing);
  flex-wrap: wrap;
  min-width: var(--list-item-image-product-tag-area-default-min-width);
}

.mw-list-product-tags--multi {
  width: var(--list-item-image-product-tag-area-multi-column-width);
  gap: var(--list-item-image-product-tag-area-multi-column-item-spacing);
}

/* ── Accordion ── */
/* Accordion — Moonwave UX extra component */

/* 구조: details(item) > summary(header) + body 예요. 스크립트 없이 열리고 닫혀요.
   기본값은 모바일 여백(왼쪽 20 · 오른쪽 12)이고, 데스크톱은 --desktop 변형을 붙여요. */

.mw-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--surface-primary);
}

/* Container + Divider: 항목마다 위쪽에 1px 구분선이 있어요 */

.mw-accordion__item {
  display: block;
  box-sizing: border-box;
  border-top: var(--border-width-1) solid var(--border-secondary);
}

/* Header: 줄 전체가 누르는 영역이에요 */

.mw-accordion__header {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: var(--space-16) var(--space-12) var(--space-16) var(--space-20);
  border: 0;
  background-color: var(--surface-primary);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  list-style: none;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-accordion__header::-webkit-details-marker {
  display: none;
}

.mw-accordion__header::marker {
  content: "";
}

@media (hover: hover) {
  .mw-accordion__header:hover {
    background-color: var(--fill-tertiary-hover);
  }
}

.mw-accordion__header:active {
  background-color: var(--fill-tertiary-pressed);
}

.mw-accordion__header:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: calc(var(--border-width-2) * -1);
}

/* Label + Title: 왼쪽 정렬로 위아래에 쌓아요 */

.mw-accordion__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.mw-accordion__label {
  color: var(--text-tertiary);
  font-family: var(--label-small-medium-font-family);
  font-weight: var(--label-small-medium-font-weight);
  font-size: var(--label-small-medium-font-size);
  line-height: var(--label-small-medium-line-height);
  letter-spacing: var(--label-small-medium-letter-spacing);
}

.mw-accordion__title {
  color: var(--text-primary);
  font-family: var(--title-small-bold-font-family);
  font-weight: var(--title-small-bold-font-weight);
  font-size: var(--title-small-bold-font-size);
  line-height: var(--title-small-bold-line-height);
  letter-spacing: var(--title-small-bold-letter-spacing);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* Accordion Icon: 오른쪽 끝, 글자 묶음의 세로 가운데예요. 열리면 위를 향해요 */

.mw-accordion__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--size-24);
  height: var(--size-24);
  color: var(--icon-tertiary);
}

.mw-accordion__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mw-accordion__item[open] > .mw-accordion__header .mw-accordion__icon,
.mw-accordion__item--open > .mw-accordion__header .mw-accordion__icon,
.mw-accordion__header[aria-expanded="true"] .mw-accordion__icon {
  transform: rotate(180deg);
}

/* Body: 머리줄과 같은 왼쪽 시작선(20)에서 시작하고, 바탕색으로 머리줄과 나눠요 */

.mw-accordion__body {
  box-sizing: border-box;
  margin: 0;
  padding: var(--space-16) var(--space-20);
  background-color: var(--surface-secondary);
  color: var(--text-secondary);
  font-family: var(--body-medium-medium-font-family);
  font-weight: var(--body-medium-medium-font-weight);
  font-size: var(--body-medium-medium-font-size);
  line-height: var(--body-medium-medium-line-height);
  letter-spacing: var(--body-medium-medium-letter-spacing);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.mw-accordion__body p {
  margin: 0;
}

.mw-accordion__body p + p {
  margin-top: var(--space-20);
}

/* Desktop: 좌우 여백이 20으로 같고 아이콘이 더 진해요 */

.mw-accordion--desktop .mw-accordion__header {
  padding-right: var(--space-20);
}

.mw-accordion--desktop .mw-accordion__icon {
  color: var(--icon-primary);
}

/* Motion */

@media (prefers-reduced-motion: no-preference) {
  .mw-accordion__icon {
    transition: transform var(--motion-duration-medium) var(--motion-easing-ease-out);
  }

  .mw-accordion__item[open] > .mw-accordion__body,
  .mw-accordion__item--open > .mw-accordion__body {
    animation: mw-accordion-reveal var(--motion-duration-medium) var(--motion-easing-ease-out);
  }
}

@keyframes mw-accordion-reveal {
  from {
    opacity: 0;
    transform: translateY(calc(var(--space-4) * -1));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 높이: 본문이 열릴 때 300ms, 닫힐 때 200ms로 자라고 줄어요(위의 나타남과 함께예요). 이 전환을 모르는 브라우저와
   움직임을 줄인 기기에서는 바로 열리고 닫혀요. 같은 name을 준 항목은 하나만 열려요(<details name="…">). */

@media (prefers-reduced-motion: no-preference) {
  @supports selector(::details-content) and (interpolate-size: allow-keywords) {
    .mw-accordion__item {
      interpolate-size: allow-keywords;
    }

    .mw-accordion__item::details-content {
      block-size: 0;
      overflow: clip;
      transition:
        block-size var(--motion-duration-medium) var(--motion-easing-ease-out),
        content-visibility var(--motion-duration-medium) allow-discrete;
    }

    .mw-accordion__item[open]::details-content {
      block-size: auto;
      transition:
        block-size var(--motion-duration-long) var(--motion-easing-ease-out),
        content-visibility var(--motion-duration-long) allow-discrete;
    }
  }
}

/* ── 어두운 테마의 대비 ──
   본문이 놓이는 면(--surface-secondary)이 어두운 테마에서는 밝은 회색이라, --text-secondary로는 4.35:1이에요.
   본문색으로 올려 4.5:1을 넘겨요 (foundations/accessibility 대비). 밝은 테마는 그대로예요. */

[data-theme="dark"] .mw-accordion__body {
  color: var(--text-primary);
}

/* ── AiNavigationBar ── */
/* AI Navigation Bar — Moonwave UX extra component */

/* AI 화면의 내비게이션이에요. 새 대화 · 대화 검색 같은 핵심 메뉴와 프로젝트 · 대화 기록을 담아요.
   --drawer : 모바일. 화면 왼쪽에서 열리는 서랍이고 뒤에는 __scrim을 깔아요. 감싸는 앱 셸에 position: relative가 있어야 해요.
   --open   : 데스크톱. 본문 옆에 나란히 놓이는 펼친 사이드바예요.
   --closed : 데스크톱. 아이콘만 남긴 좁은 레일이에요. */

.mw-ai-navigation-bar {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: var(--mw-nav-w, 248px);
  height: 100%;
  min-height: 0;
  background-color: var(--surface-primary);
  color: var(--text-primary);
  transition: width var(--motion-duration-medium) var(--motion-easing-ease-in-out),
    transform var(--motion-duration-medium) var(--motion-easing-ease-in-out);
}

/* 위쪽 고정: 로고 + 접기 버튼 */

.mw-ai-navigation-bar__header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: 44px;
  padding: var(--space-8) var(--space-8) var(--space-4) var(--space-12);
}

.mw-ai-navigation-bar__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  min-height: 44px;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  outline: none;
  font-family: var(--title-small-bold-font-family);
  font-weight: var(--title-small-bold-font-weight);
  font-size: var(--title-small-bold-font-size);
  line-height: var(--title-small-bold-line-height);
  letter-spacing: var(--title-small-bold-letter-spacing);
}

.mw-ai-navigation-bar__logo:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
  border-radius: var(--radius-4);
}

.mw-ai-navigation-bar__toggle,
.mw-ai-navigation-bar__setting {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--fill-tertiary-default);
  color: var(--icon-primary);
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-ai-navigation-bar__toggle svg,
.mw-ai-navigation-bar__setting svg {
  width: var(--size-24);
  height: var(--size-24);
}

/* 접힌 레일의 맨 위 버튼: 평소에는 로고(__toggle-rest), 커서를 올리거나 포커스가 가면 펼치기 아이콘(__toggle-hover)을 보여요 */

.mw-ai-navigation-bar__toggle-rest,
.mw-ai-navigation-bar__toggle-hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mw-ai-navigation-bar__toggle-hover {
  display: none;
}

@media (hover: hover) {
  .mw-ai-navigation-bar__toggle:hover > .mw-ai-navigation-bar__toggle-rest {
    display: none;
  }

  .mw-ai-navigation-bar__toggle:hover > .mw-ai-navigation-bar__toggle-hover {
    display: inline-flex;
  }
}

.mw-ai-navigation-bar__toggle:focus-visible > .mw-ai-navigation-bar__toggle-rest {
  display: none;
}

.mw-ai-navigation-bar__toggle:focus-visible > .mw-ai-navigation-bar__toggle-hover {
  display: inline-flex;
}

/* 메뉴 목록 */

.mw-ai-navigation-bar__menu {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0 var(--space-8);
  list-style: none;
}

/* 가운데 스크롤 영역: 프로젝트와 대화 기록. 아래쪽 끝은 흐리게 사라져요 */

.mw-ai-navigation-bar__scroll {
  flex: 1;
  min-height: 0;
  padding-bottom: var(--space-24);
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(180deg, var(--static-black) calc(100% - var(--space-32)), var(--opacity-black-0) 100%);
  mask-image: linear-gradient(180deg, var(--static-black) calc(100% - var(--space-32)), var(--opacity-black-0) 100%);
}

.mw-ai-navigation-bar__section {
  margin: 0;
  padding: var(--space-20) var(--space-20) var(--space-4);
  color: var(--text-tertiary);
  font-family: var(--label-small-medium-font-family);
  font-weight: var(--label-small-medium-font-weight);
  font-size: var(--label-small-medium-font-size);
  line-height: var(--label-small-medium-line-height);
  letter-spacing: var(--label-small-medium-letter-spacing);
}

/* 메뉴 항목: 아이콘 + 레이블. 강조 배경은 패널 가장자리에서 8px 안쪽에 그려요 */

.mw-ai-navigation-bar__row {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.mw-ai-navigation-bar__item {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-12);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: var(--space-8) var(--space-12);
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--fill-tertiary-default);
  color: var(--text-primary);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
  font-family: var(--body-medium-medium-font-family);
  font-weight: var(--body-medium-medium-font-weight);
  font-size: var(--body-medium-medium-font-size);
  line-height: var(--body-medium-medium-line-height);
  letter-spacing: var(--body-medium-medium-letter-spacing);
}

.mw-ai-navigation-bar__item > svg {
  flex-shrink: 0;
  width: var(--size-24);
  height: var(--size-24);
  color: var(--icon-primary);
}

.mw-ai-navigation-bar__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) {
  .mw-ai-navigation-bar__item:hover,
  .mw-ai-navigation-bar__toggle:hover,
  .mw-ai-navigation-bar__setting:hover,
  .mw-ai-navigation-bar__profile:hover {
    background-color: var(--fill-tertiary-hover);
  }
}

.mw-ai-navigation-bar__item:active,
.mw-ai-navigation-bar__toggle:active,
.mw-ai-navigation-bar__setting:active,
.mw-ai-navigation-bar__profile:active {
  background-color: var(--fill-tertiary-pressed);
}

.mw-ai-navigation-bar__item[aria-current="page"],
.mw-ai-navigation-bar__item--selected,
.mw-ai-navigation-bar__item--hover {
  background-color: var(--fill-tertiary-hover);
}

.mw-ai-navigation-bar__item--pressed {
  background-color: var(--fill-tertiary-pressed);
}

.mw-ai-navigation-bar__item:focus-visible,
.mw-ai-navigation-bar__toggle:focus-visible,
.mw-ai-navigation-bar__setting:focus-visible,
.mw-ai-navigation-bar__profile:focus-visible,
.mw-ai-navigation-bar__more:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: calc(var(--border-width-2) * -1);
}

/* 더 보기: 세로 점 아이콘을 눕혀서 가로 점 3개로 써요 */

.mw-ai-navigation-bar__item--more > svg {
  transform: rotate(90deg);
}

/* 고정한 대화는 앞에 핀이 붙어요 */

.mw-ai-navigation-bar__item--pinned > svg {
  width: var(--size-16);
  height: var(--size-16);
  color: var(--icon-secondary);
}

.mw-ai-navigation-bar__item--pinned {
  gap: var(--space-8);
}

/* 항목 더보기(⋮): 데스크톱에서 줄에 커서를 올리거나 포커스가 들어오면 나타나요 */

.mw-ai-navigation-bar__more {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--fill-tertiary-default);
  color: var(--icon-secondary);
  cursor: pointer;
  outline: none;
}

.mw-ai-navigation-bar__more svg {
  width: var(--size-20);
  height: var(--size-20);
}

@media (hover: hover) {
  .mw-ai-navigation-bar__more {
    opacity: 0;
    transition: opacity var(--motion-duration-short) var(--motion-easing-ease-out);
  }

  .mw-ai-navigation-bar__row:hover > .mw-ai-navigation-bar__more,
  .mw-ai-navigation-bar__row:focus-within > .mw-ai-navigation-bar__more,
  .mw-ai-navigation-bar__more[aria-expanded="true"] {
    opacity: 1;
  }

  .mw-ai-navigation-bar__row:hover > .mw-ai-navigation-bar__item,
  .mw-ai-navigation-bar__row:focus-within > .mw-ai-navigation-bar__item {
    padding-right: var(--space-48);
  }
}

@media (hover: none) {
  .mw-ai-navigation-bar__more {
    display: none;
  }
}

/* 아래쪽 고정: 프로필 + 설정. 스크롤 영역과는 1px 선으로 나눠요 */

.mw-ai-navigation-bar__footer {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8);
  border-top: var(--border-width-1) solid var(--border-secondary);
}

.mw-ai-navigation-bar__profile {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-8);
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: var(--space-4) var(--space-8) var(--space-4) var(--space-4);
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--fill-tertiary-default);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
  font-family: var(--body-medium-medium-font-family);
  font-weight: var(--body-medium-medium-font-weight);
  font-size: var(--body-medium-medium-font-size);
  line-height: var(--body-medium-medium-line-height);
  letter-spacing: var(--body-medium-medium-letter-spacing);
}

.mw-ai-navigation-bar__avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--size-32);
  height: var(--size-32);
  overflow: hidden;
  border-radius: var(--radius-circle);
  background-color: var(--fill-accent-secondary-default);
  /* 강조 면 위의 글자: 테마의 반전 글자색이에요. 고정 흰색은 어두운 테마의 밝은 청록 위에서 2.7:1이었어요. */
  color: var(--text-inverse);
  font-family: var(--caption-medium-semibold-font-family);
  font-weight: var(--caption-medium-semibold-font-weight);
  font-size: var(--caption-medium-semibold-font-size);
  line-height: 1;
  letter-spacing: var(--caption-medium-semibold-letter-spacing);
}

.mw-ai-navigation-bar__avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 모바일 서랍 ── */

.mw-ai-navigation-bar--drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  width: 80%;
  height: auto;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--motion-duration-medium) var(--motion-easing-ease-in-out),
    visibility 0s var(--motion-easing-linear) var(--motion-duration-medium);
}

.mw-ai-navigation-bar--drawer.mw-ai-navigation-bar--open {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.mw-ai-navigation-bar__scrim {
  position: absolute;
  inset: 0;
  z-index: 59;
  background-color: var(--dim-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-duration-medium) var(--motion-easing-ease-in-out);
}

.mw-ai-navigation-bar__scrim--on {
  opacity: 1;
  pointer-events: auto;
}

/* ── 데스크톱: 펼침(--open)과 접힘(--closed) ── */

.mw-ai-navigation-bar--open:not(.mw-ai-navigation-bar--drawer),
.mw-ai-navigation-bar--closed {
  border-right: var(--border-width-1) solid var(--border-secondary);
}

.mw-ai-navigation-bar--closed {
  width: calc(44px + var(--space-8) * 2 + var(--border-width-1));
}

.mw-ai-navigation-bar--closed .mw-ai-navigation-bar__header {
  justify-content: center;
  padding: var(--space-8) var(--space-8) var(--space-4);
}

.mw-ai-navigation-bar--closed .mw-ai-navigation-bar__logo,
.mw-ai-navigation-bar--closed .mw-ai-navigation-bar__label,
.mw-ai-navigation-bar--closed .mw-ai-navigation-bar__scroll > * {
  display: none;
}

.mw-ai-navigation-bar--closed .mw-ai-navigation-bar__item {
  justify-content: center;
  padding: var(--space-8);
}

.mw-ai-navigation-bar--closed .mw-ai-navigation-bar__footer {
  flex-direction: column-reverse;
}

.mw-ai-navigation-bar--closed .mw-ai-navigation-bar__profile {
  flex: none;
  justify-content: center;
  width: 44px;
  padding: var(--space-4);
}

/* ── 항목 메뉴: 데스크톱은 ⋮에서 뜨는 팝오버, 모바일은 바텀시트 안에 같은 목록을 넣어요 ── */

.mw-ai-navigation-bar__popover {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-sizing: border-box;
  min-width: 180px;
  margin: 0;
  padding: var(--space-8);
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-12);
  background-color: var(--surface-floating);
  box-shadow: var(--shadow-2);
  list-style: none;
}

.mw-ai-navigation-bar__popover--sheet {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-0);
  background-color: var(--opacity-black-0);
  box-shadow: none;
}

.mw-ai-navigation-bar__popover-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: var(--space-8) var(--space-12);
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--fill-tertiary-default);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
  font-family: var(--body-medium-medium-font-family);
  font-weight: var(--body-medium-medium-font-weight);
  font-size: var(--body-medium-medium-font-size);
  line-height: var(--body-medium-medium-line-height);
  letter-spacing: var(--body-medium-medium-letter-spacing);
}

.mw-ai-navigation-bar__popover-item > svg {
  flex-shrink: 0;
  width: var(--size-20);
  height: var(--size-20);
}

@media (hover: hover) {
  .mw-ai-navigation-bar__popover-item:hover:not(:disabled) {
    background-color: var(--fill-tertiary-hover);
  }
}

.mw-ai-navigation-bar__popover-item:active:not(:disabled) {
  background-color: var(--fill-tertiary-pressed);
}

.mw-ai-navigation-bar__popover-item--hover {
  background-color: var(--fill-tertiary-hover);
}

.mw-ai-navigation-bar__popover-item--pressed {
  background-color: var(--fill-tertiary-pressed);
}

.mw-ai-navigation-bar__popover-item:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: calc(var(--border-width-2) * -1);
}

/* 지우기처럼 되돌릴 수 없는 일은 맨 아래에 빨간색으로 둬요 */

.mw-ai-navigation-bar__popover-item--danger {
  color: var(--text-feedback-critical);
}

.mw-ai-navigation-bar__popover-item:disabled,
.mw-ai-navigation-bar__popover-item[aria-disabled="true"] {
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* ── 어두운 테마의 대비 ──
   메뉴의 삭제는 떠 있는 면 위의 빨강이라 2.8:1이에요. 본문색 쪽으로 밝혀 4.5:1을 넘겨요. 밝은 테마는 그대로예요. */

[data-theme="dark"] .mw-ai-navigation-bar__popover-item--danger {
  color: color-mix(in srgb, var(--text-feedback-critical) 55%, var(--text-primary));
}

/* ── AiVisual ── */
/* AI Visual — Moonwave UX extra component */

/* AI가 만든 콘텐츠라는 것을 알리는 표시예요. 반짝임 아이콘 하나만 쓰거나, 아이콘 옆에 글 레이블을 붙여요.
   크기: --large(32) · --medium(24, 기본) · --small(16)
   색: 기본은 Solid(회색), --gradient는 강조색, --badge는 회색 원 안의 아이콘
   자리: --inside는 그림 안 왼쪽 아래(12 · 12)에 얹어요. 감싸는 그림 상자에 position: relative가 있어야 해요. */

.mw-ai-visual {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-4) + var(--space-2));
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  color: var(--text-tertiary);
  vertical-align: middle;
  font-family: var(--body-small-medium-font-family);
  font-weight: var(--body-small-medium-font-weight);
  font-size: var(--body-small-medium-font-size);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
}

/* AI Icon */

.mw-ai-visual__icon {
  display: block;
  flex-shrink: 0;
  width: var(--size-24);
  height: var(--size-24);
  color: inherit;
}

/* Text Label */

.mw-ai-visual__label {
  min-width: 0;
  word-break: keep-all;
}

/* ── 크기 ── */

.mw-ai-visual--large {
  gap: var(--space-8);
  font-family: var(--body-large-medium-font-family);
  font-weight: var(--body-large-medium-font-weight);
  font-size: var(--body-large-medium-font-size);
  line-height: var(--body-large-medium-line-height);
  letter-spacing: var(--body-large-medium-letter-spacing);
}

.mw-ai-visual--large .mw-ai-visual__icon {
  width: var(--size-32);
  height: var(--size-32);
}

.mw-ai-visual--medium .mw-ai-visual__icon {
  width: var(--size-24);
  height: var(--size-24);
}

.mw-ai-visual--small {
  gap: var(--space-4);
  font-family: var(--caption-medium-medium-font-family);
  font-weight: var(--caption-medium-medium-font-weight);
  font-size: var(--caption-medium-medium-font-size);
  line-height: var(--caption-medium-medium-line-height);
  letter-spacing: var(--caption-medium-medium-letter-spacing);
}

.mw-ai-visual--small .mw-ai-visual__icon {
  width: var(--size-16);
  height: var(--size-16);
}

/* ── 색 ── */

/* Gradient: 강조색으로 그려요. 글자는 강조색에서 진한 강조색으로 이어져요 */

.mw-ai-visual--gradient {
  color: var(--icon-accent-primary);
}

.mw-ai-visual--gradient .mw-ai-visual__label {
  color: var(--text-accent-primary);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mw-ai-visual--gradient .mw-ai-visual__label {
    background-image: linear-gradient(90deg, var(--icon-accent-primary), var(--text-accent-primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--opacity-black-0);
  }
}

/* Badge: 회색 원 안에 옅은 아이콘. 어떤 그림 위에서도 보이도록 테마와 상관없이 같은 색을 써요.
   원은 아이콘보다 사방으로 4px 커요(40 · 32 · 24). 레이블 없이 아이콘만 써요 */

.mw-ai-visual--badge {
  justify-content: center;
  padding: var(--space-4);
  border-radius: var(--radius-circle);
  background-color: var(--gray-500);
  color: var(--gray-250);
}

/* ── 자리 ── */

/* Inside: 그림 안 왼쪽 아래에서 12px씩 띄워요. 어두운 그림 위에서는 반투명한 흰색이에요 */

.mw-ai-visual--inside {
  position: absolute;
  bottom: var(--space-12);
  left: var(--space-12);
  z-index: 1;
  color: var(--opacity-white-85);
  pointer-events: none;
}

.mw-ai-visual--inside.mw-ai-visual--gradient {
  color: var(--icon-accent-primary);
}

.mw-ai-visual--inside.mw-ai-visual--badge {
  color: var(--gray-250);
}

/* Outside: 표나 글 묶음 바로 아래에 왼쪽 정렬로 붙여요 */

.mw-ai-visual--outside {
  display: flex;
  width: fit-content;
  margin-top: var(--space-8);
}

/* ── Breadcrumb ── */
/* Breadcrumb — Moonwave UX extra component */

/* 구조: nav > ol(list) > li(item) > [separator] + link 또는 current 예요.
   경로는 항상 한 줄이고, 너비는 내용만큼 늘어나요. */

.mw-breadcrumb {
  display: inline-flex;
  max-width: 100%;
  box-sizing: border-box;
}

.mw-breadcrumb__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: calc(var(--space-2) + var(--space-4));
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.mw-breadcrumb__item {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: calc(var(--space-2) + var(--space-4));
}

/* Chevron Icon: 항목 사이를 나누는 꾸밈이에요 */

.mw-breadcrumb__separator {
  display: inline-flex;
  flex-shrink: 0;
  width: var(--size-16);
  height: var(--size-16);
  color: var(--icon-tertiary);
}

.mw-breadcrumb__separator svg,
.mw-breadcrumb__home svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Depth Menu · Previous Menu: 위 단계로 가는 링크예요 */

.mw-breadcrumb__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-4);
  color: var(--text-tertiary);
  font-family: var(--body-small-medium-font-family);
  font-weight: var(--body-small-medium-font-weight);
  font-size: var(--body-small-medium-font-size);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
  text-decoration: none;
  text-underline-offset: var(--space-2);
  cursor: pointer;
  outline: none;
}

/* 보이는 크기는 그대로 두고 누르는 영역만 44px로 넓혀요. 영역은 링크의 한가운데에 놓여요: 옆으로는 14px씩(다음 링크의 영역과 맞닿아요),
   위아래로는 12px씩 넓히되 16px 홈 아이콘처럼 그래도 44px에 못 미치면 44px까지 넓혀요 */

.mw-breadcrumb__link::after {
  content: "";
  position: absolute;
  inset: min(calc(var(--space-12) * -1), calc((100% - var(--mw-touch)) / 2)) calc((var(--space-12) + var(--space-2)) * -1);
}

@media (hover: hover) {
  .mw-breadcrumb__link:hover {
    text-decoration: underline;
  }
}

/* --hover 는 문서에서 Hover 모양을 고정해 보여 줄 때 쓰는 훅이에요 */

.mw-breadcrumb__link--hover {
  text-decoration: underline;
}

.mw-breadcrumb__link:active {
  color: var(--text-secondary);
  text-decoration: underline;
}

.mw-breadcrumb__link:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
}

/* Home Icon */

.mw-breadcrumb__home {
  display: inline-flex;
  flex-shrink: 0;
  width: var(--size-16);
  height: var(--size-16);
  color: var(--icon-tertiary);
}

/* Current Menu: 지금 화면이에요. 링크가 아니에요 */

.mw-breadcrumb__current {
  color: var(--text-primary);
  font-family: var(--body-small-bold-font-family);
  font-weight: var(--body-small-bold-font-weight);
  font-size: var(--body-small-bold-font-size);
  line-height: var(--body-small-bold-line-height);
  letter-spacing: var(--body-small-bold-letter-spacing);
}

/* ── ContextPanel ── */
/* Context Panel — Moonwave UX extra component */

/* 대화 화면을 떠나지 않고 출처 · 파일 · 문서 · 음성 기록을 곁에 보여 주는 패널이에요.
   --sheet : 모바일 바텀시트(출처, 올린 파일). 위쪽 모서리만 둥글어요.
   --full  : 모바일 전체 화면(글 편집, PDF 보기, 음성 기록).
   --side  : 데스크톱 오른쪽 패널. 대화 영역을 밀어내고 약 1/3 폭을 써요. --wide는 약 2/3예요.
   --sheet와 --full은 감싸는 앱 셸에 position: relative가 있어야 해요. */

.mw-context-panel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  background-color: var(--surface-primary);
  color: var(--text-primary);
}

.mw-context-panel--sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  max-height: 90%;
  border-top-left-radius: var(--radius-16);
  border-top-right-radius: var(--radius-16);
  padding-bottom: var(--space-16);
}

.mw-context-panel--full {
  position: absolute;
  inset: 0;
  z-index: 70;
}

.mw-context-panel--side {
  flex: 0 0 calc(100% / 3);
  height: 100%;
  border-left: var(--border-width-1) solid var(--border-secondary);
}

.mw-context-panel--side.mw-context-panel--wide {
  flex-basis: calc(100% / 3 * 2);
}

/* 바텀시트 뒤에 까는 어두운 막 */

.mw-context-panel__scrim {
  position: absolute;
  inset: 0;
  z-index: 69;
  background-color: var(--dim-overlay);
}

/* ── Header: 제목 + 닫기. 닫기를 앞에 둘 때는 --leading을 붙여요 ── */

.mw-context-panel__header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-4);
  box-sizing: border-box;
  min-height: 60px;
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-20);
}

.mw-context-panel__header--leading {
  padding-left: var(--space-8);
}

.mw-context-panel__header > svg {
  flex-shrink: 0;
  width: var(--size-24);
  height: var(--size-24);
  margin-right: var(--space-4);
  color: var(--icon-primary);
}

.mw-context-panel__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--title-large-bold-font-family);
  font-weight: var(--title-large-bold-font-weight);
  font-size: var(--title-large-bold-font-size);
  line-height: var(--title-large-bold-line-height);
  letter-spacing: var(--title-large-bold-letter-spacing);
}

/* 문서 이름을 제목으로 쓸 때는 한 단계 작게 */

.mw-context-panel__title--document {
  font-family: var(--title-small-bold-font-family);
  font-weight: var(--title-small-bold-font-weight);
  font-size: var(--title-small-bold-font-size);
  line-height: var(--title-small-bold-line-height);
  letter-spacing: var(--title-small-bold-letter-spacing);
}

.mw-context-panel__spacer {
  flex: 1;
}

/* Close Button과 머리줄 아이콘 버튼: 아이콘 24px, 누르는 영역 44px */

.mw-context-panel__close,
.mw-context-panel__action {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--fill-tertiary-default);
  color: var(--icon-primary);
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-context-panel__close svg,
.mw-context-panel__action svg {
  width: var(--size-24);
  height: var(--size-24);
}

@media (hover: hover) {
  .mw-context-panel__close:hover,
  .mw-context-panel__action:hover:not(:disabled) {
    background-color: var(--fill-tertiary-hover);
  }
}

.mw-context-panel__close:active,
.mw-context-panel__action:active:not(:disabled) {
  background-color: var(--fill-tertiary-pressed);
}

.mw-context-panel__close:focus-visible,
.mw-context-panel__action:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: calc(var(--border-width-2) * -1);
}

.mw-context-panel__action:disabled {
  color: var(--icon-disabled);
  cursor: not-allowed;
}

/* 원형 아이콘 버튼: 확대 · 축소 · 이전 · 다음 */

.mw-context-panel__action--round {
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-circle);
  background-color: var(--surface-primary);
}

.mw-context-panel__action--round svg {
  width: var(--size-20);
  height: var(--size-20);
}

/* ── Content Area ── */

.mw-context-panel__body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-16);
  min-height: 0;
  padding: var(--space-8) var(--space-20) var(--space-20);
  overflow-y: auto;
}

.mw-context-panel__footer {
  flex-shrink: 0;
  padding: var(--space-12) var(--space-20) var(--space-16);
  border-top: var(--border-width-1) solid var(--border-secondary);
  background-color: var(--surface-primary);
}

.mw-context-panel__heading {
  margin: 0;
  color: var(--text-primary);
  word-break: keep-all;
  font-family: var(--title-medium-bold-font-family);
  font-weight: var(--title-medium-bold-font-weight);
  font-size: var(--title-medium-bold-font-size);
  line-height: var(--title-medium-bold-line-height);
  letter-spacing: var(--title-medium-bold-letter-spacing);
}

/* ── Reference: 출처 목록. 항목 사이는 넓게 띄우고 구분선은 두지 않아요 ── */

.mw-context-panel__sources,
.mw-context-panel__files,
.mw-context-panel__utterances {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mw-context-panel__sources {
  gap: var(--space-8);
}

.mw-context-panel__source {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-sizing: border-box;
  width: calc(100% + var(--space-24));
  margin: 0 calc(var(--space-12) * -1);
  padding: var(--space-8) var(--space-12);
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--fill-tertiary-default);
  color: var(--text-primary);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

@media (hover: hover) {
  .mw-context-panel__source:hover,
  .mw-context-panel__file:hover {
    background-color: var(--fill-tertiary-hover);
  }
}

.mw-context-panel__source:active,
.mw-context-panel__file:active {
  background-color: var(--fill-tertiary-pressed);
}

.mw-context-panel__source:focus-visible,
.mw-context-panel__file:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: calc(var(--border-width-2) * -1);
}

.mw-context-panel__source-origin {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--text-tertiary);
  font-family: var(--caption-medium-medium-font-family);
  font-weight: var(--caption-medium-medium-font-weight);
  font-size: var(--caption-medium-medium-font-size);
  line-height: var(--caption-medium-medium-line-height);
  letter-spacing: var(--caption-medium-medium-letter-spacing);
}

.mw-context-panel__logo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--size-20);
  height: var(--size-20);
  overflow: hidden;
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-circle);
  background-color: var(--surface-primary);
  color: var(--text-secondary);
  font-family: var(--label-xsmall-bold-font-family);
  font-weight: var(--label-xsmall-bold-font-weight);
  font-size: var(--label-xsmall-bold-font-size);
  line-height: 1;
  letter-spacing: var(--label-xsmall-bold-letter-spacing);
}

.mw-context-panel__logo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mw-context-panel__logo > svg {
  width: var(--size-12);
  height: var(--size-12);
}

.mw-context-panel__source-title {
  color: var(--text-primary);
  word-break: keep-all;
  font-family: var(--body-medium-bold-font-family);
  font-weight: var(--body-medium-bold-font-weight);
  font-size: var(--body-medium-bold-font-size);
  line-height: var(--body-medium-bold-line-height);
  letter-spacing: var(--body-medium-bold-letter-spacing);
}

/* 설명은 2줄까지 보여 주고 말줄임해요 */

.mw-context-panel__source-desc {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-tertiary);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-family: var(--body-small-medium-font-family);
  font-weight: var(--body-small-medium-font-weight);
  font-size: var(--body-small-medium-font-size);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
}

/* 언제 적 자료인지: 시계 아이콘 + 날짜. 지난 시간은 강조해요 */

.mw-context-panel__source-time {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-family: var(--caption-medium-medium-font-family);
  font-weight: var(--caption-medium-medium-font-weight);
  font-size: var(--caption-medium-medium-font-size);
  line-height: var(--caption-medium-medium-line-height);
  letter-spacing: var(--caption-medium-medium-letter-spacing);
}

.mw-context-panel__source-time > svg {
  flex-shrink: 0;
  width: var(--size-16);
  height: var(--size-16);
  color: var(--icon-secondary);
}

.mw-context-panel__source-time > :is(b, strong, em) {
  color: var(--text-accent-secondary);
  font-style: normal;
  font-weight: var(--font-weight-bold);
}

/* ── Attachments: 올린 파일 목록 ── */

.mw-context-panel__files {
  gap: var(--space-4);
}

.mw-context-panel__file {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  box-sizing: border-box;
  width: calc(100% + var(--space-24));
  min-height: 56px;
  margin: 0 calc(var(--space-12) * -1);
  padding: var(--space-8) var(--space-12);
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--fill-tertiary-default);
  color: var(--text-primary);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-context-panel__file > svg {
  flex-shrink: 0;
  width: var(--size-24);
  height: var(--size-24);
  color: var(--icon-primary);
}

.mw-context-panel__file-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.mw-context-panel__file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--body-medium-medium-font-family);
  font-weight: var(--body-medium-medium-font-weight);
  font-size: var(--body-medium-medium-font-size);
  line-height: var(--body-medium-medium-line-height);
  letter-spacing: var(--body-medium-medium-letter-spacing);
}

.mw-context-panel__file-type {
  color: var(--text-tertiary);
  font-family: var(--caption-medium-medium-font-family);
  font-weight: var(--caption-medium-medium-font-weight);
  font-size: var(--caption-medium-medium-font-size);
  line-height: var(--caption-medium-medium-line-height);
  letter-spacing: var(--caption-medium-medium-letter-spacing);
}

/* ── Text Editor: 만든 글을 고쳐 쓰는 영역 + 오른쪽 아래 AI 버튼 자리 ── */

.mw-context-panel__editor {
  flex: 1;
  min-height: 0;
  color: var(--text-primary);
  outline: none;
  word-break: keep-all;
  font-family: var(--body-reading-large-medium-font-family);
  font-weight: var(--body-reading-large-medium-font-weight);
  font-size: var(--body-reading-large-medium-font-size);
  line-height: var(--body-reading-large-medium-line-height);
  letter-spacing: var(--body-reading-large-medium-letter-spacing);
}

.mw-context-panel__editor > * {
  margin: 0;
}

.mw-context-panel__editor > * + * {
  margin-top: var(--space-12);
}

.mw-context-panel__editor :is(h1, h2, h3) {
  font-family: var(--title-small-bold-font-family);
  font-weight: var(--title-small-bold-font-weight);
  font-size: var(--title-small-bold-font-size);
  line-height: var(--title-small-bold-line-height);
  letter-spacing: var(--title-small-bold-letter-spacing);
}

.mw-context-panel__editor :is(ul, ol) {
  padding-left: var(--space-24);
}

.mw-context-panel__editor ul {
  list-style: disc;
}

.mw-context-panel__editor ol {
  list-style: decimal;
}

.mw-context-panel__editor li + li {
  margin-top: var(--space-4);
}

.mw-context-panel__fab {
  position: absolute;
  right: var(--space-20);
  bottom: var(--space-20);
}

/* ── PDF Viewer: 쪽 보기 → 확대 · 축소 → 쪽 썸네일 → 쪽 번호(데스크톱) ── */

.mw-context-panel__page {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-12);
  background-color: var(--surface-secondary);
}

.mw-context-panel__page > img {
  display: block;
  width: 100%;
}

.mw-context-panel__zoom,
.mw-context-panel__pager {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
}

.mw-context-panel__pager-count {
  min-width: 48px;
  color: var(--text-tertiary);
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-family: var(--body-small-medium-font-family);
  font-weight: var(--body-small-medium-font-weight);
  font-size: var(--body-small-medium-font-size);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
}

.mw-context-panel__pager-count > :is(b, strong) {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
}

.mw-context-panel__thumbs {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-8);
  margin: 0 calc(var(--space-20) * -1);
  padding: var(--space-2) var(--space-20);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.mw-context-panel__thumbs::-webkit-scrollbar {
  display: none;
}

.mw-context-panel__thumb {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 96px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: var(--border-width-2) solid var(--opacity-black-0);
  border-radius: var(--radius-8);
  background-color: var(--surface-secondary);
  cursor: pointer;
  outline: none;
}

.mw-context-panel__thumb[aria-current="true"],
.mw-context-panel__thumb--selected {
  border-color: var(--border-inverse);
}

.mw-context-panel__thumb:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
}

/* ── STT: 말한 사람별 음성 기록 + 아래에 고정한 재생기 ── */

.mw-context-panel__utterances {
  gap: var(--space-4);
}

.mw-context-panel__utterance {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0 calc(var(--space-12) * -1);
  padding: var(--space-12);
  border-radius: var(--radius-8);
  color: var(--text-primary);
  word-break: keep-all;
  font-family: var(--body-reading-medium-medium-font-family);
  font-weight: var(--body-reading-medium-medium-font-weight);
  font-size: var(--body-reading-medium-medium-font-size);
  line-height: var(--body-reading-medium-medium-line-height);
  letter-spacing: var(--body-reading-medium-medium-letter-spacing);
}

.mw-context-panel__utterance > p {
  margin: 0;
}

/* 지금 재생 중인 말 */

.mw-context-panel__utterance--current,
.mw-context-panel__utterance[aria-current="true"] {
  background-color: var(--surface-secondary);
}

.mw-context-panel__speaker {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--text-primary);
  font-family: var(--body-small-bold-font-family);
  font-weight: var(--body-small-bold-font-weight);
  font-size: var(--body-small-bold-font-size);
  line-height: var(--body-small-bold-line-height);
  letter-spacing: var(--body-small-bold-letter-spacing);
}

.mw-context-panel__speaker > time {
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);
}

/* 말한 사람 번호: 같은 사람은 늘 같은 번호와 색이에요. 색은 범주 색 1~4번을 순서대로 써요 */

.mw-context-panel__badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--size-20);
  height: var(--size-20);
  border-radius: var(--radius-circle);
  background-color: var(--mw-cat-1, var(--teal-500));
  color: var(--static-white);
  font-family: var(--caption-medium-semibold-font-family);
  font-weight: var(--caption-medium-semibold-font-weight);
  font-size: var(--caption-medium-semibold-font-size);
  line-height: 1;
  letter-spacing: var(--caption-medium-semibold-letter-spacing);
}

.mw-context-panel__badge--2 {
  background-color: var(--mw-cat-2, var(--yellow-400));
}

.mw-context-panel__badge--3 {
  background-color: var(--mw-cat-3, var(--purple-400));
}

.mw-context-panel__badge--4 {
  background-color: var(--mw-cat-4, var(--red-400));
}

.mw-context-panel__player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "bar     bar      bar"
    "current controls total";
  align-items: center;
  row-gap: var(--space-8);
}

.mw-context-panel__progress {
  grid-area: bar;
  display: block;
  width: 100%;
  height: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-circle);
  background-color: var(--fill-secondary-default);
}

.mw-context-panel__progress > i {
  display: block;
  height: 100%;
  border-radius: var(--radius-circle);
  background-color: var(--fill-accent-secondary-default);
}

.mw-context-panel__time {
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  font-family: var(--caption-medium-medium-font-family);
  font-weight: var(--caption-medium-medium-font-weight);
  font-size: var(--caption-medium-medium-font-size);
  line-height: var(--caption-medium-medium-line-height);
  letter-spacing: var(--caption-medium-medium-letter-spacing);
}

.mw-context-panel__time--total {
  grid-area: total;
  text-align: right;
}

.mw-context-panel__controls {
  grid-area: controls;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
}

/* 재생 · 일시정지: 검은 원 + 흰 아이콘 */

.mw-context-panel__play {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--size-48);
  height: var(--size-48);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: var(--fill-primary-default);
  color: var(--icon-inverse);
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-context-panel__play svg {
  width: var(--size-24);
  height: var(--size-24);
}

@media (hover: hover) {
  .mw-context-panel__play:hover {
    background-color: var(--fill-primary-hover);
  }
}

.mw-context-panel__play:active {
  background-color: var(--fill-primary-pressed);
}

.mw-context-panel__play:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
}

/* 5초 뒤로 · 앞으로: 아이콘 위에 숫자를 겹쳐요 */

.mw-context-panel__skip {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: var(--fill-tertiary-default);
  color: var(--icon-primary);
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
  font-family: var(--label-xsmall-bold-font-family);
  font-weight: var(--label-xsmall-bold-font-weight);
  font-size: var(--label-xsmall-bold-font-size);
  line-height: 1;
  letter-spacing: var(--label-xsmall-bold-letter-spacing);
}

.mw-context-panel__skip svg {
  position: absolute;
  width: var(--size-32);
  height: var(--size-32);
}

.mw-context-panel__skip--back svg {
  transform: scaleX(-1);
}

@media (hover: hover) {
  .mw-context-panel__skip:hover {
    background-color: var(--fill-tertiary-hover);
  }
}

.mw-context-panel__skip:active {
  background-color: var(--fill-tertiary-pressed);
}

.mw-context-panel__skip:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
}

/* ── 어두운 테마의 대비 ──
   지금 읽는 발화의 면(--surface-secondary)은 어두운 테마에서 밝은 회색이라, 시각의 --text-tertiary가 2.2:1이에요.
   그 줄의 시각은 본문색으로 써요 (foundations/accessibility 대비). 밝은 테마는 그대로예요. */

[data-theme="dark"] .mw-context-panel__utterance--current .mw-context-panel__speaker > time,
[data-theme="dark"] .mw-context-panel__utterance[aria-current="true"] .mw-context-panel__speaker > time {
  color: var(--text-primary);
}

/* ── DataTable ── */
/* Data Table — Moonwave UX extra component */

/* 구조: 스크롤 래퍼(mw-data-table) > table > thead · tbody 예요.
   행 높이는 Compact 40 · Default 56 · Wide 72 세 가지예요. 글자와 컨트롤 크기는 그대로 두고 높이만 바꿔요.
   글자 열은 왼쪽, 숫자 열은 오른쪽, 날짜와 컨트롤 열은 가운데에 맞춰요. 머리글과 값은 같은 정렬을 써요. */

.mw-data-table {
  --data-table-row-height: 56px;
  --data-table-cell-padding: var(--space-16);
  --data-table-check-width: calc(var(--space-16) + var(--size-24) + var(--space-8));
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  outline: none;
}

.mw-data-table:focus-visible {
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: var(--space-2);
}

/* Size */

.mw-data-table--compact {
  --data-table-row-height: 40px;
}

.mw-data-table--wide {
  --data-table-row-height: 72px;
}

.mw-data-table__table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

/* Body Row */

.mw-data-table__row {
  background-color: var(--surface-primary);
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

@media (hover: hover) {
  .mw-data-table__body .mw-data-table__row:hover {
    background-color: var(--background-secondary);
  }
}

.mw-data-table__row--selected,
.mw-data-table__row[aria-selected="true"] {
  background-color: var(--background-secondary);
}

/* Header Row: 위는 진한 선, 아래는 옅은 구분선이에요 */

.mw-data-table__header {
  box-sizing: border-box;
  height: var(--data-table-row-height);
  padding: var(--space-4) var(--data-table-cell-padding);
  border-top: var(--border-width-1) solid var(--border-inverse);
  border-bottom: var(--border-width-1) solid var(--border-secondary);
  background-color: var(--surface-primary);
  color: var(--text-tertiary);
  font-family: var(--body-small-medium-font-family);
  font-size: var(--body-small-medium-font-size);
  font-weight: var(--body-small-medium-font-weight);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

/* Cell */

.mw-data-table__cell {
  box-sizing: border-box;
  height: var(--data-table-row-height);
  padding: var(--space-4) var(--data-table-cell-padding);
  border-bottom: var(--border-width-1) solid var(--border-secondary);
  color: var(--text-secondary);
  font-family: var(--body-small-medium-font-family);
  font-size: var(--body-small-medium-font-size);
  font-weight: var(--body-small-medium-font-weight);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

/* 정렬: 한 열의 머리글과 값에 같은 클래스를 붙여요 */

.mw-data-table__header--numeric,
.mw-data-table__cell--numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mw-data-table__header--center,
.mw-data-table__cell--center {
  text-align: center;
}

/* 남은 너비를 다 쓰는 열이에요. 긴 제목 열에 붙여요 */

.mw-data-table__header--fill {
  width: 100%;
}

/* 긴 글자는 한 줄로 자르고 말줄임표를 붙여요. 너비는 열이 정해요 */

.mw-data-table__cell--truncate {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 선택 열: Checkbox 한 개만 들어가요 */

.mw-data-table__header--check,
.mw-data-table__cell--check {
  width: var(--data-table-check-width);
  min-width: var(--data-table-check-width);
  padding-right: var(--space-8);
  line-height: 0;
}

/* 누르는 영역을 44px로 넓혀요. Compact는 행 높이 40px에 맞춰요 */

.mw-data-table__header--check .mw-checkbox::after,
.mw-data-table__cell--check .mw-checkbox::after {
  content: "";
  position: absolute;
  inset: calc(var(--space-12) * -1 + var(--space-2));
}

.mw-data-table--compact .mw-data-table__header--check .mw-checkbox::after,
.mw-data-table--compact .mw-data-table__cell--check .mw-checkbox::after {
  inset: calc(var(--space-8) * -1) calc(var(--space-12) * -1 + var(--space-2));
}

/* 머리글 버튼: 정렬이나 필터를 여는 버튼이에요 */

.mw-data-table__header-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  box-sizing: border-box;
  min-width: var(--mw-touch);
  min-height: calc(var(--data-table-row-height) - var(--space-12));
  margin: 0 calc(var(--space-8) * -1);
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-4);
  background-color: var(--fill-tertiary-default);
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition:
    background-color var(--motion-duration-medium) var(--motion-easing-ease-out),
    color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-data-table__header--numeric .mw-data-table__header-button {
  justify-content: flex-end;
}

.mw-data-table__header--center .mw-data-table__header-button {
  justify-content: center;
}

.mw-data-table__header-button:hover {
  background-color: var(--fill-tertiary-hover);
  color: var(--text-primary);
}

.mw-data-table__header-button:active {
  background-color: var(--fill-tertiary-pressed);
  color: var(--text-primary);
}

.mw-data-table__header-button:focus-visible {
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: var(--space-2);
}

.mw-data-table__header-button:disabled,
.mw-data-table__header-button[aria-disabled="true"] {
  background-color: var(--fill-tertiary-default);
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* 정렬 표시: 위아래 세모 한 쌍이에요. 정렬한 방향만 진하게 보여요 */

.mw-data-table__sort-icon {
  position: relative;
  flex: none;
  width: var(--size-16);
  height: var(--size-16);
}

.mw-data-table__sort-icon::before,
.mw-data-table__sort-icon::after {
  content: "";
  position: absolute;
  left: var(--space-4);
  border-style: solid;
  border-color: transparent;
  transition: border-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-data-table__sort-icon::before {
  top: var(--space-2);
  border-width: 0 var(--space-4) calc(var(--space-4) + var(--border-width-1));
  border-bottom-color: var(--icon-tertiary);
}

.mw-data-table__sort-icon::after {
  bottom: var(--space-2);
  border-width: calc(var(--space-4) + var(--border-width-1)) var(--space-4) 0;
  border-top-color: var(--icon-tertiary);
}

.mw-data-table__header[aria-sort="ascending"] .mw-data-table__sort-icon::before {
  border-bottom-color: var(--icon-primary);
}

.mw-data-table__header[aria-sort="ascending"] .mw-data-table__sort-icon::after {
  border-top-color: var(--icon-disabled);
}

.mw-data-table__header[aria-sort="descending"] .mw-data-table__sort-icon::before {
  border-bottom-color: var(--icon-disabled);
}

.mw-data-table__header[aria-sort="descending"] .mw-data-table__sort-icon::after {
  border-top-color: var(--icon-primary);
}

.mw-data-table__header[aria-sort="ascending"],
.mw-data-table__header[aria-sort="descending"] {
  color: var(--text-primary);
}

/* 칸 안에 넣는 Tag는 글자 가운데에 맞춰요 */

.mw-data-table__cell .mw-tag {
  vertical-align: middle;
}

/* 칸 안에 넣는 아이콘이에요 */

.mw-data-table__icon {
  display: inline-block;
  flex: none;
  width: var(--size-16);
  height: var(--size-16);
  color: var(--icon-secondary);
  vertical-align: middle;
}

/* 고칠 수 있는 칸: Default는 옅은 글자, 값이 들어가면(Complete) 진한 글자예요 */

.mw-data-table__cell--editable {
  color: var(--text-tertiary);
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-data-table__cell--editable:hover,
.mw-data-table__cell--hover {
  background-color: var(--background-secondary);
}

.mw-data-table__cell--editable:active,
.mw-data-table__cell--pressed {
  background-color: var(--fill-secondary-default);
}

.mw-data-table__cell--complete {
  color: var(--text-secondary);
}

.mw-data-table__cell--active {
  background-color: var(--background-secondary);
  color: var(--text-secondary);
}

.mw-data-table__cell--editable:focus-within,
.mw-data-table__cell--editing {
  background-color: var(--surface-primary);
  color: var(--text-secondary);
  outline: var(--border-width-1) solid var(--border-inverse);
  outline-offset: calc(var(--border-width-1) * -1);
  cursor: text;
}

/* Focused: 포커스 고리를 칸 안쪽에 그려요 */

.mw-data-table__cell--editable:focus-visible,
.mw-data-table__cell--focused,
.mw-data-table__body .mw-data-table__row .mw-data-table__cell--editable:focus-visible {
  background-color: var(--surface-primary);
  color: var(--text-secondary);
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: calc(var(--border-width-2) * -1);
}

.mw-data-table__cell--error {
  background-color: var(--surface-primary);
  color: var(--text-secondary);
  outline: var(--border-width-1) solid var(--border-feedback-critical);
  outline-offset: calc(var(--border-width-1) * -1);
}

.mw-data-table__cell--disabled,
.mw-data-table__cell--disabled:hover,
.mw-data-table__cell--disabled:active {
  background-color: transparent;
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* 칸 안 입력: 테두리는 칸이 그려요. 글자 줄(21px)만이 아니라 칸의 높이만큼 눌려요: 칸 전체를 누르는 버튼과 같은 높이예요 (기본 줄 56px에서 44px) */

.mw-data-table__input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: calc(var(--data-table-row-height) - var(--space-12));
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  outline: none;
}

.mw-data-table__input:focus-visible,
.mw-data-table__row .mw-data-table__cell .mw-data-table__input:focus-visible {
  outline: none;
}

.mw-data-table__input::placeholder {
  color: var(--text-tertiary);
}

/* 칸 전체를 누르는 버튼: Dropdown · Search · Tree 칸에 써요 */

.mw-data-table__cell-button {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  box-sizing: border-box;
  width: 100%;
  min-height: calc(var(--data-table-row-height) - var(--space-12));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-4);
  background-color: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
}

.mw-data-table__cell-button:hover {
  color: var(--text-primary);
}

.mw-data-table__cell-button:focus-visible {
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: var(--space-2);
}

.mw-data-table__cell-button:disabled,
.mw-data-table__cell-button[aria-disabled="true"] {
  color: var(--text-disabled);
  cursor: not-allowed;
}

.mw-data-table__cell-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Link 칸: 글자 줄(16px)보다 넓게, 줄 높이 안에서 44px까지 눌려요 */

.mw-data-table__link,
.mw-data-table__cell .mw-data-table__link {
  position: relative;
  border-radius: var(--radius-2);
  color: var(--text-link-default);
  text-decoration: underline;
  text-underline-offset: var(--space-2);
  outline: none;
  transition: color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-data-table__link::after {
  content: "";
  position: absolute;
  inset: min(0px, calc((100% - min(var(--mw-touch), var(--data-table-row-height))) / 2)) 0;
}

.mw-data-table__link:hover,
.mw-data-table__cell .mw-data-table__link:hover {
  color: var(--text-link-hover);
}

.mw-data-table__link:active,
.mw-data-table__cell .mw-data-table__link:active {
  color: var(--text-link-pressed);
}

.mw-data-table__link:focus-visible {
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: var(--space-2);
}

/* Profile 칸: 동그란 사진과 이름이에요 */

.mw-data-table__profile {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  vertical-align: middle;
}

.mw-data-table__avatar {
  flex: none;
  width: var(--size-24);
  height: var(--size-24);
  overflow: hidden;
  border-radius: var(--radius-circle);
  background-color: var(--fill-secondary-default);
}

/* 머리글 고정: 래퍼에 높이를 주면 세로로 넘길 때 머리글이 위에 붙어요 */

.mw-data-table--sticky-header .mw-data-table__header {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* 첫 열 고정: 가로로 넘길 때 선택 열과 첫 정보 열이 왼쪽에 붙어요. 경계에 진한 세로 선을 그어요 */

.mw-data-table--sticky-column .mw-data-table__header:first-child,
.mw-data-table--sticky-column .mw-data-table__cell:first-child,
.mw-data-table--sticky-column .mw-data-table__header--check + .mw-data-table__header,
.mw-data-table--sticky-column .mw-data-table__cell--check + .mw-data-table__cell {
  position: sticky;
  left: 0;
  z-index: 1;
}

.mw-data-table--sticky-column .mw-data-table__cell:first-child,
.mw-data-table--sticky-column .mw-data-table__cell--check + .mw-data-table__cell {
  background-color: inherit;
}

.mw-data-table--sticky-column .mw-data-table__header--check + .mw-data-table__header,
.mw-data-table--sticky-column .mw-data-table__cell--check + .mw-data-table__cell {
  left: var(--data-table-check-width);
}

.mw-data-table--sticky-column .mw-data-table__header:first-child:not(.mw-data-table__header--check),
.mw-data-table--sticky-column .mw-data-table__cell:first-child:not(.mw-data-table__cell--check),
.mw-data-table--sticky-column .mw-data-table__header--check + .mw-data-table__header,
.mw-data-table--sticky-column .mw-data-table__cell--check + .mw-data-table__cell {
  border-right: var(--border-width-1) solid var(--border-inverse);
}

.mw-data-table--sticky-header.mw-data-table--sticky-column .mw-data-table__header:first-child,
.mw-data-table--sticky-header.mw-data-table--sticky-column .mw-data-table__header--check + .mw-data-table__header {
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .mw-data-table__row,
  .mw-data-table__header-button,
  .mw-data-table__sort-icon::before,
  .mw-data-table__sort-icon::after,
  .mw-data-table__cell--editable,
  .mw-data-table__link {
    transition: none;
  }
}

/* ── 어두운 테마의 대비 ──
   눌린 칸의 면(--fill-secondary-default) 위에서는 옅은 글자(--text-tertiary)가 3.3:1이에요. 눌린 동안은 --text-secondary로 써요. */

[data-theme="dark"] .mw-data-table__cell--pressed {
  color: var(--text-secondary);
}

/* ── DataVisual ── */
/* Data Visual — Moonwave UX extra component */

/* 구조: 카드(mw-data-visual) > Header(Title + Dropdown) + Chart Contents + Legend 예요.
   차트 색은 브랜드 레이어의 시각화 토큰만 써요: 단일 계열 --mw-viz, 범주 --mw-cat-1~8, 크기 --mw-seq-0~7.
   막대와 선, 조각은 색 클래스(mw-data-visual__color--*)로 칠해요. 색 클래스를 안 붙이면 단일 계열 색이에요.
   값은 인라인 커스텀 속성으로 넘겨요: --data-visual-bar-size(막대 길이 %), --data-visual-steps(눈금 칸 수). */

.mw-data-visual {
  --data-visual-mark: var(--mw-viz);
  --data-visual-plot-height: 160px;
  --data-visual-row-height: 32px;
  --data-visual-steps: 4;
  --data-visual-bar-width: 24px;
  --data-visual-bar-size: 0%;
  --data-visual-segment: 1;
  --data-visual-reference: 50%;
  --data-visual-label-x: 100%;
  --data-visual-label-y: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  box-sizing: border-box;
  min-width: 0;
  padding: var(--space-20);
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-16);
  background-color: var(--surface-primary);
  color: var(--text-primary);
}

/* Header: 왼쪽에 Title, 오른쪽에 Dropdown을 한 줄로 놓아요 */

.mw-data-visual__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: 36px;
}

.mw-data-visual__title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-family: var(--title-small-bold-font-family);
  font-size: var(--title-small-bold-font-size);
  font-weight: var(--title-small-bold-font-weight);
  line-height: var(--title-small-bold-line-height);
  letter-spacing: var(--title-small-bold-letter-spacing);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dropdown: 기간이나 기준을 바꾸는 작은 버튼이에요. 보이는 높이는 36px, 누르는 영역은 44px이에요 */

.mw-data-visual__select,
.mw-data-visual .mw-data-visual__select {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-4);
  box-sizing: border-box;
  min-height: 36px;
  margin: 0;
  padding: 0 var(--space-8) 0 var(--space-12);
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-8);
  background-color: var(--surface-primary);
  color: var(--text-tertiary);
  font-family: var(--label-small-medium-font-family);
  font-size: var(--label-small-medium-font-size);
  font-weight: var(--label-small-medium-font-weight);
  line-height: var(--label-small-medium-line-height);
  letter-spacing: var(--label-small-medium-letter-spacing);
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition:
    background-color var(--motion-duration-medium) var(--motion-easing-ease-out),
    border-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

/* 영역은 버튼의 세로 가운데에 44px로 놓여요. 테두리 안쪽에서 4px씩만 넓히면 테두리 1px만큼 모자라 42px이었어요 */

.mw-data-visual__select::after {
  content: "";
  position: absolute;
  inset: min(0px, calc((100% - var(--mw-touch)) / 2)) 0;
}

.mw-data-visual__select svg {
  display: block;
  flex: none;
  width: var(--size-16);
  height: var(--size-16);
  color: var(--icon-primary);
}

/* 범례 보기 버튼처럼 옅은 배경을 까는 변형이에요 */

.mw-data-visual .mw-data-visual__select--filled {
  background-color: var(--background-secondary);
}

.mw-data-visual .mw-data-visual__select:hover {
  border-color: var(--border-primary);
  background-color: var(--fill-tertiary-hover);
}

.mw-data-visual .mw-data-visual__select:active {
  border-color: var(--border-primary);
  background-color: var(--fill-tertiary-pressed);
}

.mw-data-visual__select:focus-visible {
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: var(--space-2);
}

.mw-data-visual__select:disabled,
.mw-data-visual__select[aria-disabled="true"],
.mw-data-visual .mw-data-visual__select:disabled,
.mw-data-visual .mw-data-visual__select[aria-disabled="true"] {
  border-color: var(--border-disabled);
  background-color: var(--fill-tertiary-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.mw-data-visual__select:disabled svg,
.mw-data-visual__select[aria-disabled="true"] svg {
  color: var(--icon-disabled);
}

/* Chart Contents */

.mw-data-visual__chart {
  position: relative;
  min-width: 0;
}

/* 색 클래스: 범주는 순서대로 쓰고 돌려 쓰지 않아요 */

.mw-data-visual__color--1 {
  --data-visual-mark: var(--mw-cat-1);
}

.mw-data-visual__color--2 {
  --data-visual-mark: var(--mw-cat-2);
}

.mw-data-visual__color--3 {
  --data-visual-mark: var(--mw-cat-3);
}

.mw-data-visual__color--4 {
  --data-visual-mark: var(--mw-cat-4);
}

.mw-data-visual__color--5 {
  --data-visual-mark: var(--mw-cat-5);
}

.mw-data-visual__color--6 {
  --data-visual-mark: var(--mw-cat-6);
}

.mw-data-visual__color--7 {
  --data-visual-mark: var(--mw-cat-7);
}

.mw-data-visual__color--8 {
  --data-visual-mark: var(--mw-cat-8);
}

.mw-data-visual__color--other {
  --data-visual-mark: var(--mw-cat-other);
}

/* 단일 계열: 하나만 강조할 때 나머지는 soft, 강조는 strong, 견줄 기준은 deemph 예요 */

.mw-data-visual__color--soft {
  --data-visual-mark: var(--mw-viz-soft);
}

.mw-data-visual__color--strong {
  --data-visual-mark: var(--mw-viz-strong);
}

.mw-data-visual__color--deemph {
  --data-visual-mark: var(--mw-viz-deemph);
}

/* 크기: 같은 색의 여덟 단계예요. 0이 가장 옅고 7이 가장 짙어요 */

.mw-data-visual__color--seq-0 {
  --data-visual-mark: var(--mw-seq-0);
}

.mw-data-visual__color--seq-1 {
  --data-visual-mark: var(--mw-seq-1);
}

.mw-data-visual__color--seq-2 {
  --data-visual-mark: var(--mw-seq-2);
}

.mw-data-visual__color--seq-3 {
  --data-visual-mark: var(--mw-seq-3);
}

.mw-data-visual__color--seq-4 {
  --data-visual-mark: var(--mw-seq-4);
}

.mw-data-visual__color--seq-5 {
  --data-visual-mark: var(--mw-seq-5);
}

.mw-data-visual__color--seq-6 {
  --data-visual-mark: var(--mw-seq-6);
}

.mw-data-visual__color--seq-7 {
  --data-visual-mark: var(--mw-seq-7);
}

/* Plot: 눈금(scale) + 그리는 영역(area) + 항목 이름(categories) 이에요 */

.mw-data-visual__plot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-8);
  row-gap: var(--space-8);
  min-width: 0;
}

.mw-data-visual__scale,
.mw-data-visual__categories {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-tertiary);
  font-family: var(--caption-medium-medium-font-family);
  font-size: var(--caption-medium-medium-font-size);
  font-weight: var(--caption-medium-medium-font-weight);
  line-height: var(--caption-medium-medium-line-height);
  letter-spacing: var(--caption-medium-medium-letter-spacing);
  font-variant-numeric: tabular-nums;
}

/* 눈금 숫자: 높이 0인 칸을 고르게 벌려서 숫자 가운데가 눈금선에 오게 해요 */

.mw-data-visual__scale {
  display: flex;
  flex-direction: column;
  grid-row: 1;
  grid-column: 1;
  justify-content: space-between;
  height: var(--data-visual-plot-height);
  text-align: right;
}

.mw-data-visual__scale > * {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 0;
  white-space: nowrap;
}

.mw-data-visual__area {
  position: relative;
  grid-row: 1;
  grid-column: 2;
  box-sizing: border-box;
  height: calc(var(--data-visual-plot-height) + var(--border-width-1));
  min-width: 0;
  border-bottom: var(--border-width-1) solid var(--border-secondary);
  background-image: linear-gradient(to bottom, var(--border-secondary) var(--border-width-1), transparent var(--border-width-1));
  background-size: 100% calc(100% / var(--data-visual-steps));
}

.mw-data-visual__categories {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  grid-row: 2;
  grid-column: 2;
  text-align: center;
}

.mw-data-visual__tick {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 지금 보고 있는 항목은 진하고 굵게 써요 */

.mw-data-visual__tick--current {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
}

/* 선 차트: 항목 이름을 점 바로 아래에 맞춰요 */

.mw-data-visual__categories--points {
  display: flex;
  justify-content: space-between;
}

.mw-data-visual__categories--points > * {
  flex: 0 0 0;
  overflow: visible;
}

/* Bar */

.mw-data-visual__bars {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  align-items: end;
  height: 100%;
}

.mw-data-visual__group {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  min-width: 0;
}

/* 막대 끝은 직각이에요 */

.mw-data-visual__bar {
  flex: none;
  box-sizing: border-box;
  width: var(--data-visual-bar-width);
  height: var(--data-visual-bar-size);
  background-color: var(--data-visual-mark);
}

/* Dual: 가는 막대 둘을 붙여 놓고 위쪽 끝을 둥글려요 */

.mw-data-visual__group--dual {
  --data-visual-bar-width: 12px;
}

.mw-data-visual__group--dual .mw-data-visual__bar {
  border-radius: var(--radius-circle) var(--radius-circle) 0 0;
}

/* Gradient: 굵은 막대에 위에서 아래로 짙어지는 색을 입혀요. 지금 항목은 더 짙어요 */

.mw-data-visual__bar--gradient {
  --data-visual-bar-width: 40px;
  border-radius: var(--radius-8) var(--radius-8) 0 0;
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--mw-seq-1), var(--mw-viz));
}

.mw-data-visual__bar--gradient.mw-data-visual__bar--current {
  background-image: linear-gradient(to bottom, var(--mw-viz-soft), var(--mw-viz-strong));
}

/* Stacked: 한 막대 안에 구간을 쌓고 구간 사이를 2px 띄워요 */

.mw-data-visual__stack {
  display: flex;
  flex: none;
  flex-direction: column-reverse;
  gap: var(--border-width-2);
  width: var(--data-visual-bar-width);
  height: var(--data-visual-bar-size);
}

.mw-data-visual__segment {
  flex: var(--data-visual-segment) 1 0;
  box-sizing: border-box;
  min-height: 0;
  background-color: var(--data-visual-mark);
}

/* Hatched: 빗금으로 구간을 한 번 더 나눠요 */

.mw-data-visual__bar--hatched,
.mw-data-visual__segment--hatched,
.mw-data-visual__legend-dot--hatched {
  border: var(--border-width-1) solid var(--data-visual-mark);
  background-color: var(--surface-primary);
  background-image: repeating-linear-gradient(
    135deg,
    var(--data-visual-mark) 0,
    var(--data-visual-mark) var(--border-width-1),
    transparent var(--border-width-1),
    transparent var(--space-4)
  );
}

/* 범례의 빗금 점은 작아서 빗금 대신 빈 고리로 보여요 */

.mw-data-visual__legend-dot--hatched {
  background-image: none;
}

/* 강조하지 않는 표식은 옅게 낮춰요 */

.mw-data-visual__bar--muted,
.mw-data-visual__segment--muted,
.mw-data-visual__arc--muted,
.mw-data-visual__line--muted {
  opacity: 0.4;
}

/* 기준선: 평균이나 한도를 점선으로 긋고 그 아래를 옅게 칠해요 */

.mw-data-visual__reference {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  height: var(--data-visual-reference);
  border-top: var(--border-width-1) dashed var(--mw-viz);
  pointer-events: none;
}

.mw-data-visual__reference::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom, var(--mw-viz), transparent);
  opacity: var(--mw-viz-area-alpha);
}

/* Plain: 눈금 숫자와 눈금선 없이 표식만 그려요 */

.mw-data-visual__plot--plain {
  column-gap: 0;
}

.mw-data-visual__plot--plain .mw-data-visual__area,
.mw-data-visual__plot--plain.mw-data-visual__plot--horizontal .mw-data-visual__area {
  border-right: 0;
  background-image: none;
}

/* Horizontal: 항목 이름이 왼쪽, 눈금이 아래로 가요 */

.mw-data-visual__plot--horizontal .mw-data-visual__categories {
  grid-auto-rows: var(--data-visual-row-height);
  grid-auto-flow: row;
  grid-row: 1;
  grid-column: 1;
  align-items: center;
  max-width: 120px;
  text-align: left;
}

.mw-data-visual__plot--horizontal .mw-data-visual__tick {
  display: block;
}

.mw-data-visual__plot--horizontal .mw-data-visual__area {
  height: auto;
  border-right: var(--border-width-1) solid var(--border-secondary);
  border-bottom: 0;
  background-image: linear-gradient(to right, var(--border-secondary) var(--border-width-1), transparent var(--border-width-1));
  background-size: calc(100% / var(--data-visual-steps)) 100%;
}

.mw-data-visual__plot--horizontal .mw-data-visual__bars {
  grid-auto-rows: var(--data-visual-row-height);
  grid-auto-flow: row;
  align-items: center;
  height: auto;
}

.mw-data-visual__plot--horizontal .mw-data-visual__group {
  align-items: center;
  justify-content: flex-start;
}

.mw-data-visual__plot--horizontal .mw-data-visual__bar {
  --data-visual-bar-width: 16px;
  width: var(--data-visual-bar-size);
  height: var(--data-visual-bar-width);
}

.mw-data-visual__plot--horizontal .mw-data-visual__stack {
  --data-visual-bar-width: 16px;
  flex-direction: row;
  width: var(--data-visual-bar-size);
  height: var(--data-visual-bar-width);
}

.mw-data-visual__plot--horizontal .mw-data-visual__segment {
  min-width: 0;
}

.mw-data-visual__plot--horizontal .mw-data-visual__scale {
  flex-direction: row;
  grid-row: 2;
  grid-column: 2;
  height: auto;
}

.mw-data-visual__plot--horizontal .mw-data-visual__scale > * {
  justify-content: center;
  width: 0;
  height: auto;
}

/* Line: 그리는 영역을 꽉 채우는 SVG예요. 선 굵기는 2px, 면은 같은 색을 아주 옅게 깔아요 */

.mw-data-visual__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mw-data-visual__line {
  fill: none;
  stroke: var(--data-visual-mark);
  stroke-width: var(--border-width-2);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.mw-data-visual__fill {
  fill: var(--data-visual-mark);
  fill-opacity: var(--mw-viz-area-alpha);
  stroke: none;
}

/* Pie · Donut: 12시에서 시작해 시계 방향으로, 큰 값부터 놓아요 */

.mw-data-visual__donut {
  position: relative;
  flex: none;
  width: 200px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.mw-data-visual__ring {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 고리 두께는 반지름의 1/3이에요 */

.mw-data-visual__arc {
  fill: none;
  stroke: var(--data-visual-mark);
  stroke-width: 24px;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.mw-data-visual__ring--pie .mw-data-visual__arc {
  stroke-width: 72px;
}

/* 값 레이블: 조각 바깥에 옅은 글자로 써요. 글자에는 차트 색을 입히지 않아요 */

.mw-data-visual__value {
  fill: var(--text-tertiary);
  color: var(--text-tertiary);
  font-family: var(--caption-medium-medium-font-family);
  font-size: var(--caption-medium-medium-font-size);
  font-weight: var(--caption-medium-medium-font-weight);
  letter-spacing: var(--caption-medium-medium-letter-spacing);
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
  dominant-baseline: central;
}

/* 조각의 오른쪽에 놓는 값은 start, 왼쪽에 놓는 값은 end로 맞춰서 조각과 겹치지 않게 해요 */

.mw-data-visual__value--start {
  text-anchor: start;
}

.mw-data-visual__value--end {
  text-anchor: end;
}

.mw-data-visual__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}

.mw-data-visual__total {
  color: var(--text-primary);
  font-family: var(--title-large-bold-font-family);
  font-size: var(--title-large-bold-font-size);
  font-weight: var(--title-large-bold-font-weight);
  line-height: var(--line-height-reading-130);
  letter-spacing: var(--title-large-bold-letter-spacing);
  font-variant-numeric: tabular-nums;
}

.mw-data-visual__total-label {
  color: var(--text-tertiary);
  font-family: var(--caption-medium-medium-font-family);
  font-size: var(--caption-medium-medium-font-size);
  font-weight: var(--caption-medium-medium-font-weight);
  line-height: var(--caption-medium-medium-line-height);
  letter-spacing: var(--caption-medium-medium-letter-spacing);
}

/* Gauge: 채운 만큼은 짙어지는 색, 남은 만큼은 옅은 빗금이에요 */

.mw-data-visual__gauge {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.mw-data-visual__gauge-track {
  --data-visual-mark: var(--mw-viz-deemph);
  position: relative;
  height: var(--space-12);
  overflow: hidden;
  border-radius: var(--radius-circle);
  background-image: repeating-linear-gradient(
    135deg,
    var(--data-visual-mark) 0,
    var(--data-visual-mark) var(--border-width-2),
    transparent var(--border-width-2),
    transparent var(--space-8)
  );
}

.mw-data-visual__gauge-fill {
  width: var(--data-visual-bar-size);
  height: 100%;
  border-radius: var(--radius-circle);
  background-image: linear-gradient(to right, var(--mw-viz), var(--mw-viz-strong));
}

.mw-data-visual__gauge-labels {
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  color: var(--text-tertiary);
  font-family: var(--caption-medium-medium-font-family);
  font-size: var(--caption-medium-medium-font-size);
  font-weight: var(--caption-medium-medium-font-weight);
  line-height: var(--caption-medium-medium-line-height);
  letter-spacing: var(--caption-medium-medium-letter-spacing);
  font-variant-numeric: tabular-nums;
}

/* Legend: 색 점 + 이름. 표식 순서와 같은 순서로 가운데에 한 줄로 놓아요 */

.mw-data-visual__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mw-data-visual__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-secondary);
  font-family: var(--caption-medium-medium-font-family);
  font-size: var(--caption-medium-medium-font-size);
  font-weight: var(--caption-medium-medium-font-weight);
  line-height: var(--caption-medium-medium-line-height);
  letter-spacing: var(--caption-medium-medium-letter-spacing);
  white-space: nowrap;
}

.mw-data-visual__legend-dot {
  flex: none;
  box-sizing: border-box;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-circle);
  background-color: var(--data-visual-mark);
}

.mw-data-visual__legend-dot.mw-data-visual__legend-dot--hatched {
  background-color: var(--surface-primary);
}

/* Hidden Legend: 범례 버튼 아래에 뜨는 목록이에요. 체크를 끄면 그 계열을 차트에서 숨겨요 */

.mw-data-visual__legend-toggle {
  position: relative;
  flex: none;
}

.mw-data-visual__legend-popover {
  position: absolute;
  top: calc(100% + var(--space-4));
  right: 0;
  z-index: 3;
  box-sizing: border-box;
  min-width: 168px;
  margin: 0;
  padding: var(--space-8);
  border-radius: var(--radius-12);
  background-color: var(--elevation-level-3-fill);
  box-shadow: var(--elevation-level-3-box-shadow);
  list-style: none;
}

.mw-data-visual__legend-popover[hidden] {
  display: none;
}

.mw-data-visual__legend-option {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--mw-touch);
  padding: 0 var(--space-8);
  color: var(--text-primary);
  font-family: var(--body-small-medium-font-family);
  font-size: var(--body-small-medium-font-size);
  font-weight: var(--body-small-medium-font-weight);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .mw-data-visual__select {
    transition: none;
  }
}

/* ── 색만으로 구분하지 않아요 ──
   계열마다 색 말고 한 가지를 더 달라요: 선은 모양(실선 · 파선 · 점선 · 일점쇄선)과 표식, 막대와 조각은 무늬(빗금 · 반대 빗금 · 점),
   그리고 선 끝과 막대 끝에 이름을 직접 적어요. 범례의 견본도 같은 모양이라 범례와 그림이 서로 맞아요.
   1번 계열은 실선, 2번은 파선, 3번은 점선, 4번은 일점쇄선 순서예요. */

.mw-data-visual__line--dashed {
  stroke-dasharray: 8 5;
}

.mw-data-visual__line--dotted {
  stroke-dasharray: 0.1 6;
}

.mw-data-visual__line--dashdot {
  stroke-dasharray: 10 4 1 4;
}

/* 표식: 선 위의 점이에요. 계열마다 다른 모양을 써요(동그라미 · 네모 · 마름모 · 세모) */
.mw-data-visual__marker {
  position: absolute;
  z-index: 2;
  width: var(--space-8);
  height: var(--space-8);
  box-sizing: border-box;
  margin: calc(var(--space-4) * -1) 0 0 calc(var(--space-4) * -1);
  border: var(--border-width-2) solid var(--data-visual-mark);
  border-radius: var(--radius-circle);
  background: var(--surface-primary);
}

.mw-data-visual__marker--square {
  border-radius: var(--radius-2);
}

.mw-data-visual__marker--diamond {
  border-radius: var(--radius-2);
  transform: rotate(45deg);
}

.mw-data-visual__marker--triangle {
  width: 0;
  height: 0;
  border: var(--space-4) solid transparent;
  border-top: 0;
  border-bottom: var(--space-8) solid var(--data-visual-mark);
  border-radius: 0;
  background: transparent;
}

/* 무늬: 빗금(hatched)에 더해 반대 방향 빗금과 점이에요. 막대 · 구간 · 범례 견본에 똑같이 붙어요 */
.mw-data-visual__bar--cross,
.mw-data-visual__segment--cross,
.mw-data-visual__legend-dot--cross {
  border: var(--border-width-1) solid var(--data-visual-mark);
  background-color: var(--surface-primary);
  background-image: repeating-linear-gradient(
    45deg,
    var(--data-visual-mark) 0,
    var(--data-visual-mark) var(--border-width-1),
    transparent var(--border-width-1),
    transparent var(--space-4)
  );
}

.mw-data-visual__bar--dots,
.mw-data-visual__segment--dots,
.mw-data-visual__legend-dot--dots {
  border: var(--border-width-1) solid var(--data-visual-mark);
  background-color: var(--surface-primary);
  background-image: radial-gradient(var(--data-visual-mark) 0, var(--data-visual-mark) var(--border-width-1), transparent var(--border-width-2));
  background-size: var(--space-4) var(--space-4);
}

/* 범례 견본: 선 계열이면 짧은 선 모양으로, 막대 계열이면 같은 무늬의 점으로 보여요 */
.mw-data-visual__legend-dot--line,
.mw-data-visual__legend-dot--dash,
.mw-data-visual__legend-dot--dot,
.mw-data-visual__legend-dot--dashdot {
  width: var(--space-24);
  height: 0;
  border-radius: 0;
  background: transparent;
  border-top: var(--border-width-2) solid var(--data-visual-mark);
}

.mw-data-visual__legend-dot--dash {
  border-top-style: dashed;
}

.mw-data-visual__legend-dot--dot {
  border-top-style: dotted;
}

.mw-data-visual__legend-dot--dashdot {
  border-top: 0;
  height: var(--border-width-2);
  background: repeating-linear-gradient(
    to right,
    var(--data-visual-mark) 0,
    var(--data-visual-mark) 10px,
    transparent 10px,
    transparent 14px,
    var(--data-visual-mark) 14px,
    var(--data-visual-mark) 15px,
    transparent 15px,
    transparent 19px
  );
}

.mw-data-visual__legend-dot--square {
  border-radius: var(--radius-2);
}

.mw-data-visual__legend-dot--diamond {
  border-radius: var(--radius-2);
  transform: rotate(45deg);
}

/* 직접 라벨: 선 끝이나 막대 위에 계열 이름과 값을 바로 적어요. 위치는 --data-visual-label-x · -y(%)로 넘겨요 */
.mw-data-visual__direct-label {
  position: absolute;
  left: var(--data-visual-label-x);
  bottom: var(--data-visual-label-y);
  z-index: 2;
  max-width: 40%;
  margin: 0 0 var(--space-4) calc(var(--space-4) * -1);
  color: var(--text-primary);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-default-148);
  white-space: nowrap;
  transform: translateX(-100%);
  pointer-events: none;
}

.mw-data-visual__direct-label::before {
  content: "";
  display: inline-block;
  width: var(--space-8);
  height: var(--border-width-2);
  margin-right: var(--space-4);
  vertical-align: middle;
  background: var(--data-visual-mark);
}

/* ── 차트 · 표 전환 ──
   차트와 표는 한 화면에 같이 놓지 않고 하나만 보여요. 제목 줄 오른쪽의 Select Button 두 개(차트 · 표)로 바꿔요.
   기본은 차트예요. 표를 고르면 차트와 범례가 숨고 같은 값의 표(mw-data-visual__table)가 나와요.
   라디오(name은 차트마다 달라요)가 상태를 쥐고 있어서 스크립트 없이도 바뀌고, 앱은 값을 저장해 기억할 수 있어요. */

.mw-data-visual .mw-data-visual__view {
  display: inline-grid;
  flex: none;
  grid-auto-columns: auto;
  width: auto;
  margin-left: auto;
}

.mw-data-visual .mw-data-visual__view .mw-select-button {
  width: auto;
  min-height: var(--size-48);
  padding: var(--space-8) var(--space-16);
}

.mw-data-visual .mw-data-visual__table {
  display: none;
  min-width: 0;
  overflow-x: auto;
}

.mw-data-visual:has(.mw-data-visual__view input[value="table"]:checked) .mw-data-visual__chart,
.mw-data-visual:has(.mw-data-visual__view input[value="table"]:checked) .mw-data-visual__legend {
  display: none;
}

.mw-data-visual:has(.mw-data-visual__view input[value="table"]:checked) .mw-data-visual__table.mw-data-visual__table {
  display: block;
}

/* ── DatePicker ── */
/* Date Picker — Moonwave UX extra component */

/* 구조: Month Navigator + 요일 줄(일~토) + 날짜 격자(table) + (선택) 시간 고르기예요.
   달력 한 덩이는 다섯 주일 때 332px이에요. 머리 44 + 간격 8 + 요일 40 + 주 48 x 5.
   모바일은 Bottom Sheet 안에 넣고, 데스크톱은 입력 칸 아래에 뜨는 팝오버(360 x 372)로 써요. */

.mw-date-picker {
  --date-picker-cell-height: 48px;
  --date-picker-day-size: 40px;
  --date-picker-sunday: var(--text-feedback-critical);
  display: block;
  box-sizing: border-box;
  width: 100%;
  color: var(--text-primary);
  font-family: var(--body-medium-medium-font-family);
  font-size: var(--body-medium-medium-font-size);
  font-weight: var(--body-medium-medium-font-weight);
  line-height: var(--body-medium-medium-line-height);
  letter-spacing: var(--body-medium-medium-letter-spacing);
}

.mw-date-picker[hidden] {
  display: none;
}

/* Popover: 데스크톱 Single · Range 달력이에요 */

.mw-date-picker--popover {
  width: 360px;
  max-width: 100%;
  padding: var(--space-20);
  border-radius: var(--radius-12);
  background-color: var(--elevation-level-3-fill);
  box-shadow: var(--elevation-level-3-box-shadow);
}

/* Month Navigator */

.mw-date-picker__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: var(--mw-touch);
  margin-bottom: var(--space-8);
}

.mw-date-picker__title {
  min-width: 112px;
  margin: 0;
  color: var(--text-primary);
  font-family: var(--title-small-bold-font-family);
  font-size: var(--title-small-bold-font-size);
  font-weight: var(--title-small-bold-font-weight);
  line-height: var(--title-small-bold-line-height);
  letter-spacing: var(--title-small-bold-letter-spacing);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.mw-date-picker__nav {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--mw-touch);
  height: var(--mw-touch);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: var(--fill-tertiary-default);
  color: var(--icon-primary);
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-date-picker__nav svg {
  display: block;
  width: var(--size-20);
  height: var(--size-20);
}

.mw-date-picker__nav:hover {
  background-color: var(--fill-tertiary-hover);
}

.mw-date-picker__nav:active {
  background-color: var(--fill-tertiary-pressed);
}

.mw-date-picker__nav:focus-visible {
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: var(--space-2);
}

.mw-date-picker__nav:disabled,
.mw-date-picker__nav[aria-disabled="true"] {
  background-color: var(--fill-tertiary-default);
  color: var(--icon-disabled);
  cursor: not-allowed;
}

/* Days: 일곱 열을 똑같이 나눠요 */

.mw-date-picker__grid {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.mw-date-picker__weekday {
  box-sizing: border-box;
  height: 40px;
  padding: 0;
  color: var(--text-tertiary);
  font-family: var(--label-small-medium-font-family);
  font-size: var(--label-small-medium-font-size);
  font-weight: var(--label-small-medium-font-weight);
  line-height: var(--label-small-medium-line-height);
  letter-spacing: var(--label-small-medium-letter-spacing);
  text-align: center;
  vertical-align: middle;
}

/* 칸: 위아래 4px을 비워서 기간 띠가 날짜 원과 같은 높이(40px)가 되게 해요 */

.mw-date-picker__cell {
  box-sizing: border-box;
  height: var(--date-picker-cell-height);
  padding: var(--space-4) 0;
  background-clip: content-box;
  text-align: center;
  vertical-align: middle;
}

/* 날짜 버튼: 누르는 영역은 칸 전체(높이 48px)이고, 보이는 원은 40px이에요 */

.mw-date-picker__day {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: var(--date-picker-cell-height);
  margin: calc(var(--space-4) * -1) 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--text-primary);
  font-family: var(--body-medium-medium-font-family);
  font-size: var(--body-medium-medium-font-size);
  font-weight: var(--body-medium-medium-font-weight);
  line-height: var(--body-medium-medium-line-height);
  letter-spacing: var(--body-medium-medium-letter-spacing);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  outline: none;
}

.mw-date-picker__day::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: var(--date-picker-day-size);
  height: var(--date-picker-day-size);
  margin: calc(var(--date-picker-day-size) / -2) 0 0 calc(var(--date-picker-day-size) / -2);
  border-radius: var(--radius-circle);
  background-color: transparent;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-date-picker__day:hover::before {
  background-color: var(--fill-tertiary-hover);
}

.mw-date-picker__day:active::before {
  background-color: var(--fill-tertiary-pressed);
}

/* 포커스 고리는 칸이 아니라 날짜 원에 그려요 */

.mw-date-picker__day:focus-visible,
.mw-date-picker__grid .mw-date-picker__cell .mw-date-picker__day:focus-visible {
  outline: none;
}

.mw-date-picker__day:focus-visible::before {
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: var(--space-2);
}

/* 일요일: 첫 열은 빨간 숫자예요. 토요일은 다른 평일과 같아요 */

.mw-date-picker__cell:first-child .mw-date-picker__day {
  color: var(--date-picker-sunday);
}

/* 고른 구간의 옅은 면 위에서는 빨간 숫자가 4.2:1이에요. 그 칸의 일요일은 본문색 쪽으로 짙게 써서 4.5:1을 넘겨요.
   어두운 테마는 달력이 놓이는 면이 밝은 회색이라(2.8:1) 일요일 숫자를 모두 같은 식으로 밝혀요. */
.mw-date-picker__cell--in-range:first-child .mw-date-picker__day {
  color: color-mix(in srgb, var(--text-feedback-critical) 55%, var(--text-primary));
}

[data-theme="dark"] .mw-date-picker {
  --date-picker-sunday: color-mix(in srgb, var(--text-feedback-critical) 55%, var(--text-primary));
}

/* Today: 숫자 아래 점이에요. 점은 숫자 색을 따라가요 */

.mw-date-picker__cell--today .mw-date-picker__day::after {
  content: "";
  position: absolute;
  bottom: calc(var(--space-8) + var(--space-2));
  left: 50%;
  width: var(--space-4);
  height: var(--space-4);
  margin-left: calc(var(--space-2) * -1);
  border-radius: var(--radius-circle);
  background-color: currentColor;
}

/* 다른 달 날짜 */

.mw-date-picker__cell--outside .mw-date-picker__day,
.mw-date-picker__cell--outside:first-child .mw-date-picker__day {
  color: var(--text-tertiary);
}

/* In Range: 시작일과 종료일 사이를 잇는 띠예요. 줄이 바뀌는 곳에서 끝을 둥글려요 */

.mw-date-picker__cell--in-range {
  background-color: var(--background-secondary);
}

.mw-date-picker__cell--range-start {
  background-image: linear-gradient(to right, transparent 50%, var(--background-secondary) 50%);
}

.mw-date-picker__cell--range-end {
  background-image: linear-gradient(to right, var(--background-secondary) 50%, transparent 50%);
}

.mw-date-picker__cell--in-range:first-child {
  border-top-left-radius: var(--radius-circle);
  border-bottom-left-radius: var(--radius-circle);
}

.mw-date-picker__cell--in-range:last-child,
.mw-date-picker__cell--range-start:last-child {
  border-top-right-radius: var(--radius-circle);
  border-bottom-right-radius: var(--radius-circle);
}

.mw-date-picker__cell--range-start:last-child,
.mw-date-picker__cell--range-end:first-child {
  background-image: none;
}

/* Selected Date · Range Start · Range End: 진한 원에 반전 숫자예요 */

.mw-date-picker__cell--selected .mw-date-picker__day,
.mw-date-picker__cell--range-start .mw-date-picker__day,
.mw-date-picker__cell--range-end .mw-date-picker__day {
  color: var(--text-inverse);
}

.mw-date-picker__cell--selected .mw-date-picker__day::before,
.mw-date-picker__cell--range-start .mw-date-picker__day::before,
.mw-date-picker__cell--range-end .mw-date-picker__day::before {
  background-color: var(--fill-primary-default);
}

.mw-date-picker__cell--selected .mw-date-picker__day:hover::before,
.mw-date-picker__cell--range-start .mw-date-picker__day:hover::before,
.mw-date-picker__cell--range-end .mw-date-picker__day:hover::before {
  background-color: var(--fill-primary-hover);
}

.mw-date-picker__cell--selected .mw-date-picker__day:active::before,
.mw-date-picker__cell--range-start .mw-date-picker__day:active::before,
.mw-date-picker__cell--range-end .mw-date-picker__day:active::before {
  background-color: var(--fill-primary-pressed);
}

/* Disabled: 고를 수 없는 날짜는 옅은 숫자예요. 일요일도 같아요 */

.mw-date-picker__day:disabled,
.mw-date-picker__day[aria-disabled="true"],
.mw-date-picker__cell:first-child .mw-date-picker__day:disabled,
.mw-date-picker__cell:first-child .mw-date-picker__day[aria-disabled="true"] {
  color: var(--text-disabled);
  cursor: not-allowed;
}

.mw-date-picker__day:disabled::before,
.mw-date-picker__day[aria-disabled="true"]::before {
  background-color: transparent;
}

/* Time Picker: 달력 아래에 구분선을 긋고 시간을 골라요 */

.mw-date-picker__time {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-16);
  padding-top: var(--space-20);
  border-top: var(--border-width-1) solid var(--border-secondary);
}

.mw-date-picker__time-title {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--body-medium-bold-font-family);
  font-size: var(--body-medium-bold-font-size);
  font-weight: var(--body-medium-bold-font-weight);
  line-height: var(--body-medium-bold-line-height);
  letter-spacing: var(--body-medium-bold-letter-spacing);
}

/* 모바일은 네 열, 데스크톱은 다섯 열이에요 */

.mw-date-picker__time-list {
  --date-picker-time-columns: 4;
  display: grid;
  grid-template-columns: repeat(var(--date-picker-time-columns), minmax(0, 1fr));
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mw-date-picker__time-list--5 {
  --date-picker-time-columns: 5;
}

.mw-date-picker__time-option {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--mw-touch);
  margin: 0;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--fill-tertiary-default);
  box-shadow: inset 0 0 0 var(--border-width-1) var(--border-primary);
  color: var(--text-primary);
  font-family: var(--body-medium-medium-font-family);
  font-size: var(--body-medium-medium-font-size);
  font-weight: var(--body-medium-medium-font-weight);
  line-height: var(--body-medium-medium-line-height);
  letter-spacing: var(--body-medium-medium-letter-spacing);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  outline: none;
  transition:
    background-color var(--motion-duration-medium) var(--motion-easing-ease-out),
    box-shadow var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-date-picker__time-option:hover {
  background-color: var(--fill-tertiary-hover);
}

.mw-date-picker__time-option:active {
  background-color: var(--fill-tertiary-pressed);
}

.mw-date-picker__time-option:focus-visible {
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: var(--space-2);
}

.mw-date-picker__time-option[aria-checked="true"],
.mw-date-picker__time-option--selected {
  background-color: var(--fill-tertiary-default);
  box-shadow: inset 0 0 0 var(--border-width-2) var(--border-inverse);
  font-weight: var(--font-weight-bold);
}

.mw-date-picker__time-option:disabled,
.mw-date-picker__time-option[aria-disabled="true"] {
  background-color: var(--fill-tertiary-default);
  box-shadow: inset 0 0 0 var(--border-width-1) var(--border-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* 입력 칸: 고른 날짜를 보여 주고 달력을 여는 버튼이에요 */

.mw-date-picker-field {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  box-sizing: border-box;
  min-width: 168px;
  min-height: 48px;
  margin: 0;
  padding: var(--space-12) var(--space-12) var(--space-12) var(--space-16);
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--fill-tertiary-default);
  box-shadow: inset 0 0 0 var(--border-width-1) var(--border-primary);
  color: var(--text-primary);
  font-family: var(--body-medium-medium-font-family);
  font-size: var(--body-medium-medium-font-size);
  font-weight: var(--body-medium-medium-font-weight);
  line-height: var(--body-medium-medium-line-height);
  letter-spacing: var(--body-medium-medium-letter-spacing);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition:
    background-color var(--motion-duration-medium) var(--motion-easing-ease-out),
    box-shadow var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-date-picker-field__value {
  flex: 1;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mw-date-picker-field__value--placeholder {
  color: var(--text-tertiary);
}

.mw-date-picker-field__icon {
  display: block;
  flex: none;
  width: var(--size-24);
  height: var(--size-24);
  color: var(--icon-secondary);
}

.mw-date-picker-field:hover {
  background-color: var(--fill-tertiary-hover);
}

.mw-date-picker-field:active {
  background-color: var(--fill-tertiary-pressed);
}

/* 달력이 열려 있으면 진한 2px 테두리로 보여요 */

.mw-date-picker-field[aria-expanded="true"],
.mw-date-picker-field--focused {
  background-color: var(--fill-tertiary-default);
  box-shadow: inset 0 0 0 var(--border-width-2) var(--border-inverse);
}

.mw-date-picker-field:focus-visible {
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: var(--space-2);
}

.mw-date-picker-field:disabled,
.mw-date-picker-field[aria-disabled="true"] {
  background-color: var(--fill-tertiary-disabled);
  box-shadow: inset 0 0 0 var(--border-width-1) var(--border-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.mw-date-picker-field:disabled .mw-date-picker-field__icon,
.mw-date-picker-field[aria-disabled="true"] .mw-date-picker-field__icon {
  color: var(--icon-disabled);
}

/* Range 입력: 시작일 ~ 종료일 */

.mw-date-picker-range {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  max-width: 100%;
}

.mw-date-picker-range__separator {
  flex: none;
  color: var(--text-tertiary);
  font-family: var(--body-medium-medium-font-family);
  font-size: var(--body-medium-medium-font-size);
  font-weight: var(--body-medium-medium-font-weight);
  line-height: var(--body-medium-medium-line-height);
}

/* Anchor: 팝오버를 입력 칸 왼쪽 끝에 맞춰 바로 아래에 띄워요 */

.mw-date-picker-anchor {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.mw-date-picker-anchor > .mw-date-picker--popover {
  position: absolute;
  top: calc(100% + var(--space-8));
  left: 0;
  z-index: 10;
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .mw-date-picker__nav,
  .mw-date-picker__day::before,
  .mw-date-picker__time-option,
  .mw-date-picker-field {
    transition: none;
  }
}

/* ── FilterBar ── */
/* Filter Bar — Moonwave UX extra component */

/* 구조: 도구 줄(mw-data-toolbar)은 두 줄이에요. 윗줄이 거르기 묶음(mw-filter-bar), 아랫줄이 보기 묶음(정렬 · 뷰)과 정렬 상태 글이에요.
   거르기 묶음: 자주 쓰는 필터(quick) · 통합 필드(field: 칩 + 검색 입력 + 모두 지우기) · 전체 필터 버튼(all).
   정렬과 뷰는 거르기와 눈으로 갈라져요: 줄이 다르고 사이에 가는 선이 서요. 폰에서도 같아요.
   전체 필터 패널은 새로 만들지 않아요. 앱 셸의 오른쪽 패널(mw-app-panel)이 그대로 서랍(601px부터)이고 시트(600px 이하)예요. */

.mw-data-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12) var(--space-16);
  margin-bottom: var(--space-16);
}

/* 윗줄은 거르기가 다 써요. 아랫줄은 보기(정렬 · 뷰)와 지금 정렬을 말하는 글이에요. 둘 사이에 가는 선이 서요 */
.mw-data-toolbar__filters {
  flex: 1 1 100%;
  min-width: 0;
  padding-bottom: var(--space-12);
  border-bottom: var(--border-width-1) solid var(--border-secondary);
}

.mw-data-toolbar__view {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.mw-data-toolbar__status {
  flex: 1 1 calc(var(--size-56) * 3);
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-13);
}

.mw-data-toolbar__status b {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

/* ── 거르기 묶음 ── */

.mw-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  min-width: 0;
}

.mw-filter-bar__quick {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.mw-filter-bar__quick::-webkit-scrollbar {
  display: none;
}

/* 통합 필드: 하나의 테두리 안에 칩, 입력, 지우기가 들어가요 */

.mw-filter-bar__field {
  flex: 1 1 calc(var(--size-56) * 4);
  min-width: calc(var(--size-56) * 3);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  min-height: var(--size-48);
  padding: var(--space-4) var(--space-8) var(--space-4) var(--space-12);
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-12);
  background: var(--surface-primary);
  cursor: text;
  transition: border-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-filter-bar__field:hover {
  border-color: var(--border-accent-secondary);
}

.mw-filter-bar__field:focus-within {
  border-color: var(--mw-focus);
  box-shadow: 0 0 0 var(--border-width-2) var(--mw-accent-soft);
}

.mw-filter-bar__icon {
  flex: none;
  display: inline-flex;
  color: var(--icon-secondary);
}

.mw-filter-bar__chips {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mw-filter-bar__chip {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  border-radius: var(--radius-circle);
  background: var(--mw-accent-soft);
  color: var(--text-accent-primary);
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-medium);
}

.mw-filter-bar__chip-edit,
.mw-filter-bar__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.mw-filter-bar__chip-edit {
  min-width: 0;
  min-height: var(--size-32);
  padding: 0 var(--space-4) 0 var(--space-12);
  border-radius: var(--radius-circle) 0 0 var(--radius-circle);
}

.mw-filter-bar__chip-edit span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mw-filter-bar__chip-edit b {
  margin-right: var(--space-4);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

.mw-filter-bar__chip-remove {
  flex: none;
  width: var(--size-32);
  min-height: var(--size-32);
  border-radius: 0 var(--radius-circle) var(--radius-circle) 0;
}

.mw-filter-bar__chip-edit:hover,
.mw-filter-bar__chip-remove:hover {
  background: var(--fill-secondary-hover);
}

.mw-filter-bar__chip-edit:active,
.mw-filter-bar__chip-remove:active {
  background: var(--fill-secondary-pressed);
}

.mw-filter-bar__chip-edit:focus-visible,
.mw-filter-bar__chip-remove:focus-visible,
.mw-filter-bar__clear:focus-visible,
.mw-filter-bar__all:focus-visible {
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: var(--space-2);
}

.mw-filter-bar__input {
  flex: 1 1 calc(var(--size-56) * 2);
  min-width: calc(var(--size-56) * 2);
  min-height: var(--size-32);
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-15);
}

.mw-filter-bar__input::placeholder {
  color: var(--text-tertiary);
}

.mw-filter-bar__input::-webkit-search-cancel-button {
  display: none;
}

/* "/" 한 글자짜리 안내예요. 터치 화면에서는 보이지 않아요 */
.mw-filter-bar__key {
  flex: none;
  min-width: var(--size-20);
  box-sizing: border-box;
  padding: 0 var(--space-6);
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-4);
  color: var(--text-tertiary);
  font-family: var(--mw-font-mono);
  font-size: var(--font-size-12);
  line-height: var(--size-20);
  text-align: center;
}

.mw-filter-bar__field:focus-within .mw-filter-bar__key {
  display: none;
}

.mw-filter-bar__clear {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-32);
  height: var(--size-32);
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--icon-secondary);
  cursor: pointer;
}

.mw-filter-bar__clear:hover {
  background: var(--fill-secondary-hover);
}

.mw-filter-bar__clear[hidden] {
  display: none;
}

/* 전체 필터 버튼: 적용한 개수가 뒤에 붙어요 */

.mw-filter-bar__all {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--size-48);
  box-sizing: border-box;
  padding: 0 var(--space-16);
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-12);
  background: var(--surface-primary);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-15);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.mw-filter-bar__all:hover {
  background: var(--fill-secondary-hover);
}

.mw-filter-bar__all[aria-expanded="true"] {
  border-color: var(--mw-focus);
}

.mw-filter-bar__count {
  min-width: var(--size-20);
  box-sizing: border-box;
  padding: 0 var(--space-6);
  border-radius: var(--radius-circle);
  background: var(--mw-accent-fill);
  color: var(--mw-on-accent);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-bold);
  line-height: var(--size-20);
  text-align: center;
}

.mw-filter-bar__count[hidden] {
  display: none;
}

/* ── 전체 필터 패널 안 ── */

.mw-filter-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.mw-filter-group + .mw-filter-group {
  padding-top: var(--space-20);
  border-top: var(--border-width-1) solid var(--border-secondary);
}

.mw-filter-group__legend {
  float: left;
  width: 100%;
  margin: 0 0 var(--space-12);
  padding: 0;
  color: var(--text-primary);
  font-size: var(--font-size-15);
  font-weight: var(--font-weight-bold);
}

.mw-filter-group__legend + * {
  clear: both;
}

.mw-filter-group__list {
  display: grid;
  gap: var(--space-4);
}

.mw-filter-group__range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: var(--space-8);
  color: var(--text-secondary);
}

.mw-filter-group__presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.mw-filter-group__field {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-12);
}

.mw-filter-group__field > span {
  font-weight: var(--font-weight-medium);
}

.mw-filter-group__input {
  width: 100%;
  min-width: 0;
  min-height: var(--size-48);
  box-sizing: border-box;
  padding: 0 var(--space-12);
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-8);
  background: var(--surface-primary);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-15);
}

.mw-filter-group__input:focus-visible {
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: var(--space-2);
}

/* ── 결과가 0건일 때 ── */

.mw-filter-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-8);
  padding: var(--space-40) var(--space-16);
  text-align: center;
}

/* 결과가 있을 때 숨겨 둔 안내는 보이지 않아요(위의 display가 hidden을 덮지 않게) */
.mw-filter-empty[hidden] { display: none; }

.mw-filter-empty__title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-17);
  font-weight: var(--font-weight-bold);
}

.mw-filter-empty__body {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-14);
}

.mw-filter-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

/* ── 폰 ── */

@media (max-width: 600px) {
  .mw-data-toolbar {
    gap: var(--space-8);
  }

  .mw-filter-bar__key {
    display: none;
  }

  /* 필드는 한 줄을 다 쓰고, 전체 필터 버튼이 그 옆에 서요 */
  .mw-filter-bar__field {
    flex-basis: 100%;
  }

  .mw-filter-bar__quick {
    flex-basis: 100%;
  }
}

@media (hover: none) {
  .mw-filter-bar__key {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mw-filter-bar__field {
    transition: none;
  }
}

/* 상세 서랍(mw-app-panel--full): 폰에서 시트가 아니라 전체 화면이에요. 앱 셸의 폭 규칙과 같은 600px에서 바뀌어요 */
@media (max-width: 600px) {
  .mw-app-panel.mw-app-panel--full {
    top: 0;
    height: 100dvh;
    border-radius: 0;
  }
}

/* 손가락으로 쓰는 기기 (파일 끝: 위의 기본 규칙이 margin · padding · gap을 다시 적어서, 앞에 두면 덮여요).
   칩의 누르는 영역(위아래 4px)이 옆으로 넘기는 상자에 잘리지 않게 안쪽을 넓히고 바깥에서 되돌려요(키트의 칩 묶음과 같아요).
   칩 안의 버튼과 입력도 키트의 부품처럼 44px까지 누르게 하고, 보이는 모양과 자리는 그대로예요. */
@media (pointer: coarse) {
  .mw-filter-bar__quick {
    padding-block: var(--space-4);
    margin-block: calc(var(--space-4) * -1);
  }

  .mw-filter-bar {
    row-gap: var(--space-16);
  }

  /* 누르는 것 둘 사이는 8px 이상이어야 해요. 입력 칸의 누르는 영역이 6px 안쪽으로 들어오니 줄 사이를 16px로 둬요 */
  .mw-filter-bar__field {
    gap: var(--space-16) var(--space-12);
    padding-right: var(--space-12);
  }

  .mw-filter-bar__chip-edit,
  .mw-filter-bar__chip-remove,
  .mw-filter-bar__clear,
  .mw-row-expand {
    position: relative;
  }

  .mw-filter-bar__chip-edit::after,
  .mw-filter-bar__chip-remove::after,
  .mw-filter-bar__clear::after,
  .mw-row-expand::after {
    content: "";
    position: absolute;
    inset: min(0px, calc((100% - var(--mw-touch)) / 2));
  }

  .mw-filter-bar__input {
    box-sizing: content-box;
    padding-block: calc((var(--mw-touch) - var(--size-32)) / 2);
    margin-block: calc((var(--mw-touch) - var(--size-32)) / -2);
  }
}

/* ── Gestures ── */
/* Moonwave UX — 손짓 (키트 1.6): 밀기 줄, 행동 메뉴, 미리 보기, 순서 바꾸기, 되돌리기 알림, 손짓 안내,
   손짓 설정, 사진 보기, 높이 단계가 있는 시트, 화면 전환
   규격: 패턴 › 손 닿는 곳과 손짓(patterns/touch-gestures)
   움직임은 모두 토큰의 길이와 곡선을 써요. 기기의 움직임 줄이기(prefers-reduced-motion)와 설정의 움직임 줄이기
   (<html data-mw-motion="reduce">)에서는 움직이지 않고 결과만 보여요. */

/* ── 손짓을 받는 요소: iOS의 길게 누르기 메뉴와 글자 고르기를 끄고, 두 번 탭 확대를 꺼요 */
[data-mw-press] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
[data-mw-double] { touch-action: manipulation; }
[data-mw-tabswipe] { touch-action: pan-y pinch-zoom; }
[data-mw-reorder] > * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ── 밀기 줄 */
/* --mw-swipe-bg: 줄의 바탕(행동 줄을 가려요). 줄의 바탕이 다르면 줄에 이 값을 줘요. --mw-swipe-p: 드러난 정도(touch 손짓이 적어요) */
.mw-swipe { --mw-swipe-bg: var(--surface-primary); --mw-swipe-p: 0; position: relative; display: block; overflow: hidden; list-style: none; }
.mw-swipe__body { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-12); background: var(--mw-swipe-bg); }
.mw-swipe__body > :first-child { flex: 1; min-width: 0; }
.mw-swipe[data-swipe-left] > .mw-swipe__body,
.mw-swipe[data-swipe-right] > .mw-swipe__body { touch-action: pan-y pinch-zoom; }
.mw-swipe--moving > .mw-swipe__body { -webkit-user-select: none; user-select: none; }
/* 줄과 ⋯ 버튼 사이는 12px예요. 8px로 두면 점검이 7.7px로 재서 누르는 것 사이의 틈에 걸려요(Calendar UX-1221) */
/* ⋯ 버튼은 카드 전체를 덮는 링크(mw-item-tile__link)보다 위에 있어요 */
.mw-swipe__more { z-index: 2; flex: none; margin-inline-end: var(--space-4); }

.mw-swipe__tray { position: absolute; inset-block: 0; z-index: 0; display: flex; align-items: center; gap: var(--space-8); padding-inline: var(--space-12); visibility: hidden; transition: background-color var(--motion-duration-short) var(--motion-easing-ease-out); }
.mw-swipe__tray--left { right: 0; }
.mw-swipe__tray--right { left: 0; }
.mw-swipe--moving > .mw-swipe__tray,
.mw-swipe--hint > .mw-swipe__tray--left,
.mw-swipe--open-left > .mw-swipe__tray--left,
.mw-swipe--open-right > .mw-swipe__tray--right { visibility: visible; }
.mw-swipe--open-left, .mw-swipe--open-right, .mw-swipe--hint { --mw-swipe-p: 1; }

/* 원형 아이콘 버튼: 누르는 영역은 44px, 드러난 만큼(--mw-swipe-p) 커져요 */
.mw-swipe__action { display: grid; justify-items: center; gap: var(--space-4); min-width: var(--mw-touch); padding: 0; border: 0; background: none; color: var(--text-secondary); font-size: var(--font-size-12); line-height: 1.2; }
.mw-swipe__circle { width: var(--mw-touch); height: var(--mw-touch); display: grid; place-items: center; border-radius: var(--radius-circle); background: var(--background-secondary); color: var(--text-primary); transform: scale(calc(0.6 + 0.4 * var(--mw-swipe-p))); transition: transform var(--motion-duration-short) var(--motion-easing-ease-out), background-color var(--motion-duration-short) var(--motion-easing-ease-out); }
.mw-swipe__action:active .mw-swipe__circle { background: var(--fill-secondary-default); }
.mw-swipe__action--danger .mw-swipe__circle { background: var(--mw-critical); color: var(--static-white); }
.mw-swipe__action--accent .mw-swipe__circle { background: var(--fill-accent-primary-default); color: var(--text-inverse); }
/* 줄이 낮으면(68px 미만) 이름은 화면 읽기 프로그램에만 남겨요 */
.mw-swipe[data-compact] .mw-swipe__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 끝까지 민 자리를 넘으면: 맨 바깥 버튼이 커지고 줄의 바탕이 그 행동의 색으로 옅게 물들어요 */
.mw-swipe--armed-left > .mw-swipe__tray--left > .mw-swipe__action:last-child .mw-swipe__circle,
.mw-swipe--armed-right > .mw-swipe__tray--right > .mw-swipe__action:first-child .mw-swipe__circle { transform: scale(1.15); }
.mw-swipe--armed-left[data-swipe-left='danger'] > .mw-swipe__tray--left,
.mw-swipe--armed-right[data-swipe-right='danger'] > .mw-swipe__tray--right { background: var(--mw-critical-soft); }
.mw-swipe--armed-left[data-swipe-left='accent'] > .mw-swipe__tray--left,
.mw-swipe--armed-right[data-swipe-right='accent'] > .mw-swipe__tray--right { background: var(--mw-accent-soft); }
.mw-swipe--armed-left[data-swipe-left='plain'] > .mw-swipe__tray--left,
.mw-swipe--armed-right[data-swipe-right='plain'] > .mw-swipe__tray--right { background: var(--background-secondary); }

/* 밀 수 있는 줄의 가장자리에 그 행동의 색이 살짝 비쳐요(손가락으로 쓰는 기기에서만) */
@media (pointer: coarse) {
  .mw-swipe[data-swipe-left]::after,
  .mw-swipe[data-swipe-right]::before { content: ''; position: absolute; z-index: 2; inset-block: var(--space-16); width: 3px; opacity: 0.35; pointer-events: none; transition: opacity var(--motion-duration-short) var(--motion-easing-ease-out); }
  .mw-swipe[data-swipe-left]::after { right: 0; border-radius: var(--radius-2) 0 0 var(--radius-2); background: var(--mw-swipe-hint-left, var(--border-secondary)); }
  .mw-swipe[data-swipe-right]::before { left: 0; border-radius: 0 var(--radius-2) var(--radius-2) 0; background: var(--mw-swipe-hint-right, var(--border-secondary)); }
  .mw-swipe[data-swipe-left='danger'] { --mw-swipe-hint-left: var(--mw-critical); }
  .mw-swipe[data-swipe-left='accent'] { --mw-swipe-hint-left: var(--mw-accent); }
  .mw-swipe[data-swipe-right='danger'] { --mw-swipe-hint-right: var(--mw-critical); }
  .mw-swipe[data-swipe-right='accent'] { --mw-swipe-hint-right: var(--mw-accent); }
  .mw-swipe--moving::after, .mw-swipe--moving::before,
  .mw-swipe--open-left::after, .mw-swipe--open-left::before,
  .mw-swipe--open-right::after, .mw-swipe--open-right::before { opacity: 0; }
}

/* 처음 한 번: 줄이 살짝 밀렸다 돌아와요 */
.mw-swipe--hint > .mw-swipe__body { animation: mw-swipe-nudge calc(var(--motion-duration-long) * 4) var(--motion-easing-ease-in-out) both; }
@keyframes mw-swipe-nudge {
  0%, 100% { transform: none; }
  35%, 60% { transform: translate3d(calc(var(--space-56) * -1), 0, 0); }
}

/* 두 번 탭: 누른 자리에서 하트가 튀어 오르고 점 여섯 개가 퍼져요 */
.mw-burst { position: absolute; z-index: 3; width: 0; height: 0; color: var(--mw-accent); pointer-events: none; }
.mw-burst svg { position: absolute; left: calc(var(--space-24) * -1); top: calc(var(--space-24) * -1); animation: mw-burst-heart calc(var(--motion-duration-long) * 2.5) var(--mw-ease-pop) both; }
.mw-burst i { position: absolute; left: calc(var(--space-4) * -1); top: calc(var(--space-4) * -1); width: var(--space-8); height: var(--space-8); border-radius: var(--radius-circle); background: currentColor; animation: mw-burst-dot calc(var(--motion-duration-long) * 2) var(--motion-easing-ease-out) both; }
.mw-burst i:nth-of-type(1) { --mw-burst-a: 0deg; }
.mw-burst i:nth-of-type(2) { --mw-burst-a: 60deg; }
.mw-burst i:nth-of-type(3) { --mw-burst-a: 120deg; }
.mw-burst i:nth-of-type(4) { --mw-burst-a: 180deg; }
.mw-burst i:nth-of-type(5) { --mw-burst-a: 240deg; }
.mw-burst i:nth-of-type(6) { --mw-burst-a: 300deg; }
@keyframes mw-burst-heart {
  0% { opacity: 0; transform: scale(0.2); }
  35% { opacity: 1; transform: scale(1.1); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: translate3d(0, calc(var(--space-16) * -1), 0) scale(1); }
}
@keyframes mw-burst-dot {
  0% { opacity: 0; transform: rotate(var(--mw-burst-a)) translate3d(0, calc(var(--space-16) * -1), 0) scale(1); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--mw-burst-a)) translate3d(0, calc(var(--space-48) * -1), 0) scale(0.3); }
}

/* ── 행동 메뉴: 넓은 화면의 작은 메뉴(폰에서는 Sheet) */
.mw-action-menu { position: fixed; z-index: 75; min-width: 200px; max-width: min(320px, calc(100vw - var(--space-16))); display: grid; padding: var(--space-4); border: 1px solid var(--border-primary); border-radius: var(--radius-12); background: var(--surface-floating); box-shadow: var(--shadow-3); animation: mw-menu-in var(--motion-duration-medium) var(--motion-easing-ease-out) both; }
.mw-action-menu__item { display: flex; align-items: center; gap: var(--space-12); min-height: var(--mw-touch); padding: 0 var(--space-12); border: 0; border-radius: var(--radius-8); background: none; color: var(--text-primary); font-size: var(--font-size-14); text-align: left; }
.mw-action-menu__item svg { flex: none; color: var(--icon-secondary); }
.mw-action-menu__item:hover, .mw-action-menu__item:focus-visible { background: var(--background-secondary); }
.mw-action-menu__item:disabled { opacity: 0.4; }
.mw-action-menu__item--danger svg { color: var(--mw-critical); }
@keyframes mw-menu-in { from { opacity: 0; transform: translate3d(0, calc(var(--space-4) * -1), 0); } to { opacity: 1; transform: none; } }
.mw-sheet__item--danger .mw-sheet__icon { background: var(--mw-critical-soft); color: var(--mw-critical); }
.mw-sheet__item:disabled { opacity: 0.4; }
.mw-action-sheet { padding-top: 0; }

/* 길게 눌러 미리 보기: 메뉴 위에 내용이 먼저 떠올라요 */
.mw-peek { flex: none; max-height: 40dvh; overflow: auto; margin: 0 var(--space-16) var(--space-8); padding: var(--space-16); border-radius: var(--radius-12); background: var(--background-secondary); animation: mw-peek-in var(--motion-duration-long) var(--mw-ease-pop) both; }
@keyframes mw-peek-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

/* ── 높이 단계가 있는 시트(낮게 30% · 중간 60% · 전체)와 아래에 고정한 확인 버튼 */
/* --mw-sheet-y: 지금 단계에서 시트가 아래로 내려가 있는 거리예요. Sheet와 시트 끌기가 적어요 */
.mw-sheet.mw-sheet--detents { --mw-sheet-y: 0px; height: calc(100dvh - env(safe-area-inset-top) - var(--space-8)); max-height: none; }
.mw-sheet.mw-sheet--detents.mw-sheet--open { transform: translate3d(0, var(--mw-sheet-y), 0); }
.mw-sheet--detents > .mw-sheet__body { flex: 1; padding-bottom: calc(var(--space-20) + var(--mw-sheet-y)); }
.mw-sheet--detents > .mw-sheet__body:has(+ .mw-sheet__foot) { padding-bottom: calc(var(--space-20) + var(--mw-touch) + var(--space-24) + var(--mw-sheet-y)); }
.mw-sheet__foot { flex: none; display: flex; gap: var(--space-8); padding: var(--space-12) var(--space-16); border-top: 1px solid var(--border-primary); background: var(--surface-primary); }
.mw-sheet__foot > * { flex: 1; }
.mw-sheet--detents > .mw-sheet__foot { translate: 0 calc(var(--mw-sheet-y) * -1); transition: translate var(--mw-duration-sheet) var(--mw-ease-sheet); }

/* ── 끌어서 순서 바꾸기 */
.mw-sortable { --mw-sortable-gap: 0px; display: grid; gap: var(--mw-sortable-gap); margin: 0; padding: 0; list-style: none; }
.mw-sortable__item { position: relative; }
.mw-sortable--dragging > .mw-sortable__item { transition: transform var(--motion-duration-medium) var(--motion-easing-ease-in-out); }
.mw-sortable--dragging > .mw-sortable__item--lifted { z-index: 5; transition: none; scale: 1.02; border-radius: var(--radius-12); box-shadow: var(--shadow-3); }

/* ── 되돌리기 알림: 하단 탭과 주 행동 위 */
.mw-undo { position: fixed; left: var(--space-16); right: var(--space-16); bottom: calc(var(--mw-tabbar-h) + var(--space-16) + env(safe-area-inset-bottom)); z-index: 65; display: grid; justify-items: center; pointer-events: none; }
.mw-undo > * { width: min(100%, 480px); pointer-events: auto; }

/* ── 처음 한 번 보이는 손짓 안내 */
.mw-gesture-hint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16); border-radius: var(--radius-12); background: var(--mw-accent-soft); color: var(--text-primary); font-size: var(--font-size-14); }
.mw-gesture-hint > svg { flex: none; color: var(--icon-accent-primary); }
.mw-gesture-hint > span { flex: 1; min-width: 12em; }
.mw-gesture-hint__ok { min-height: var(--mw-touch); padding: 0 var(--space-12); border: 0; border-radius: var(--radius-8); background: none; color: var(--text-accent-primary); font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); }
.mw-gesture-hint__ok:active { background: var(--background-secondary); }

/* ── 손짓 설정 */
.mw-gesture-settings { display: grid; gap: var(--space-16); }
.mw-gesture-settings__title { margin: 0; }
.mw-gesture-settings__lead, .mw-gesture-settings__about { margin: 0; color: var(--text-secondary); font-size: var(--font-size-14); }
.mw-gesture-settings__choice { flex-wrap: wrap; }
.mw-gesture-settings__custom { pointer-events: none; }
.mw-gesture-settings__now { display: grid; gap: var(--space-12); margin: 0; padding: 0; list-style: none; }
.mw-gesture-settings__item { display: flex; align-items: center; gap: var(--space-12); }
.mw-gesture-settings__item b, .mw-gesture-settings__row b { display: block; font-size: var(--font-size-15); font-weight: var(--font-weight-semibold); }
.mw-gesture-settings__item small, .mw-gesture-settings__row small, .mw-gesture-settings__field small { display: block; margin-top: var(--space-2); color: var(--text-tertiary); font-size: var(--font-size-13); }
.mw-gesture-settings__none { margin: 0; color: var(--text-secondary); }
.mw-gesture-settings__body { display: grid; gap: var(--space-20); }
.mw-gesture-settings__list { display: grid; margin: 0; padding: 0; list-style: none; }
.mw-gesture-settings__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: var(--space-56); padding: var(--space-8) 0; border-bottom: 1px solid var(--border-primary); }
.mw-gesture-settings__row:last-child { border-bottom: 0; }
.mw-gesture-settings__row > :last-child { flex: none; }
.mw-gesture-settings__field { display: grid; gap: var(--space-8); }
.mw-gesture-settings__label { font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); }
.mw-gesture-settings__actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.mw-gesture-settings__sync { margin: 0; color: var(--text-tertiary); font-size: var(--font-size-13); }

/* 손짓 하나의 짧은 움직임 그림: 고를 때 한 번 움직이고 멈춰요. 누르면 다시 움직여요 */
.mw-gesture-demo { position: relative; flex: none; width: var(--space-64); height: var(--space-48); overflow: hidden; padding: 0; border: 0; border-radius: var(--radius-8); background: var(--background-secondary); }
.mw-gesture-demo__card { position: absolute; inset: var(--space-12) var(--space-8); border-radius: var(--radius-4); background: var(--surface-primary); box-shadow: var(--shadow-1); }
.mw-gesture-demo__finger { position: absolute; left: var(--space-40); top: var(--space-16); width: var(--space-12); height: var(--space-12); border-radius: var(--radius-circle); background: var(--mw-accent); opacity: 0.85; }
.mw-gesture-demo__finger--two { display: none; }
.mw-gesture-demo--zoom .mw-gesture-demo__finger--two,
.mw-gesture-demo--pinchView .mw-gesture-demo__finger--two { display: block; left: var(--space-12); }
.mw-gesture-demo--pull .mw-gesture-demo__finger, .mw-gesture-demo--sheet .mw-gesture-demo__finger { left: var(--space-24); top: var(--space-4); }
.mw-gesture-demo--sheet .mw-gesture-demo__card { inset: var(--space-24) var(--space-4) calc(var(--space-12) * -1); }
.mw-gesture-demo--tabSwipe .mw-gesture-demo__card { inset: auto var(--space-4) var(--space-4); height: var(--space-12); }
.mw-gesture-demo--tabSwipe .mw-gesture-demo__finger { top: auto; bottom: var(--space-4); }
.mw-gesture-demo[data-play] .mw-gesture-demo__card,
.mw-gesture-demo[data-play] .mw-gesture-demo__finger { animation-duration: calc(var(--motion-duration-long) * 5); animation-timing-function: var(--motion-easing-ease-in-out); animation-fill-mode: both; }
.mw-gesture-demo--swipe[data-play] .mw-gesture-demo__card, .mw-gesture-demo--fullSwipe[data-play] .mw-gesture-demo__card { animation-name: mw-demo-slide; }
.mw-gesture-demo--swipe[data-play] .mw-gesture-demo__finger, .mw-gesture-demo--fullSwipe[data-play] .mw-gesture-demo__finger,
.mw-gesture-demo--tabSwipe[data-play] .mw-gesture-demo__finger { animation-name: mw-demo-finger-left; }
.mw-gesture-demo--fullSwipe[data-play] .mw-gesture-demo__card { animation-name: mw-demo-slide-out; }
.mw-gesture-demo--tabSwipe[data-play] .mw-gesture-demo__card { animation-name: mw-demo-slide; }
.mw-gesture-demo--pull[data-play] .mw-gesture-demo__card, .mw-gesture-demo--pull[data-play] .mw-gesture-demo__finger { animation-name: mw-demo-down; }
.mw-gesture-demo--sheet[data-play] .mw-gesture-demo__card { animation-name: mw-demo-up; }
.mw-gesture-demo--sheet[data-play] .mw-gesture-demo__finger { animation-name: mw-demo-up; }
.mw-gesture-demo--menu[data-play] .mw-gesture-demo__finger, .mw-gesture-demo--peek[data-play] .mw-gesture-demo__finger,
.mw-gesture-demo--reorder[data-play] .mw-gesture-demo__finger { animation-name: mw-demo-press; }
.mw-gesture-demo--peek[data-play] .mw-gesture-demo__card { animation-name: mw-demo-grow; }
.mw-gesture-demo--reorder[data-play] .mw-gesture-demo__card { animation-name: mw-demo-lift; }
.mw-gesture-demo--favorite[data-play] .mw-gesture-demo__finger { animation-name: mw-demo-twice; }
.mw-gesture-demo--zoom[data-play] .mw-gesture-demo__card { animation-name: mw-demo-grow; }
.mw-gesture-demo--zoom[data-play] .mw-gesture-demo__finger { animation-name: mw-demo-apart-right; }
.mw-gesture-demo--zoom[data-play] .mw-gesture-demo__finger--two { animation-name: mw-demo-apart-left; }
.mw-gesture-demo--pinchView[data-play] .mw-gesture-demo__card { animation-name: mw-demo-shrink; }
.mw-gesture-demo--pinchView[data-play] .mw-gesture-demo__finger { animation-name: mw-demo-apart-left; }
.mw-gesture-demo--pinchView[data-play] .mw-gesture-demo__finger--two { animation-name: mw-demo-apart-right; }
@keyframes mw-demo-slide { 0%, 15%, 100% { transform: none; } 45%, 75% { transform: translate3d(calc(var(--space-16) * -1), 0, 0); } }
@keyframes mw-demo-slide-out { 0%, 15% { transform: none; opacity: 1; } 60% { transform: translate3d(calc(var(--space-64) * -1), 0, 0); opacity: 1; } 61%, 80% { opacity: 0; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes mw-demo-finger-left { 0%, 15% { transform: none; opacity: 0.85; } 60% { transform: translate3d(calc(var(--space-24) * -1), 0, 0); opacity: 0.85; } 75%, 100% { opacity: 0; transform: translate3d(calc(var(--space-24) * -1), 0, 0); } }
@keyframes mw-demo-down { 0%, 15%, 100% { transform: none; } 50%, 70% { transform: translate3d(0, var(--space-12), 0); } }
@keyframes mw-demo-up { 0%, 15% { transform: translate3d(0, var(--space-16), 0); } 55%, 100% { transform: none; } }
@keyframes mw-demo-press { 0%, 10% { transform: scale(1); } 45%, 75% { transform: scale(1.8); opacity: 0.5; } 100% { transform: scale(1); } }
@keyframes mw-demo-twice { 0%, 10%, 30%, 50%, 100% { transform: scale(1); } 20%, 40% { transform: scale(1.6); } }
@keyframes mw-demo-grow { 0%, 20%, 100% { transform: none; } 55%, 80% { transform: scale(1.25); } }
@keyframes mw-demo-shrink { 0%, 20%, 100% { transform: none; } 55%, 80% { transform: scale(0.7); } }
@keyframes mw-demo-lift { 0%, 20%, 100% { transform: none; box-shadow: var(--shadow-1); } 45% { transform: translate3d(0, calc(var(--space-4) * -1), 0) scale(1.05); box-shadow: var(--shadow-3); } 75% { transform: translate3d(0, var(--space-8), 0) scale(1.05); box-shadow: var(--shadow-3); } }
@keyframes mw-demo-apart-left { 0%, 20%, 100% { transform: none; } 55%, 80% { transform: translate3d(calc(var(--space-8) * -1), 0, 0); } }
@keyframes mw-demo-apart-right { 0%, 20%, 100% { transform: none; } 55%, 80% { transform: translate3d(var(--space-8), 0, 0); } }

/* ── 사진 보기 */
.mw-viewer { --mw-viewer-pull: 0; position: fixed; inset: 0; z-index: 80; color: var(--static-white); }
.mw-viewer::before { content: ''; position: absolute; inset: 0; background: var(--static-black); opacity: calc(1 - var(--mw-viewer-pull) * 0.7); }
.mw-viewer__top { position: absolute; top: env(safe-area-inset-top); left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); }
.mw-viewer__pos { font-size: var(--font-size-14); font-variant-numeric: tabular-nums; }
.mw-viewer__spacer { flex: 1; }
.mw-viewer__button, .mw-viewer__nav { width: var(--mw-touch); height: var(--mw-touch); display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-circle); background: color-mix(in srgb, var(--static-black) 45%, transparent); color: var(--static-white); }
.mw-viewer__button:disabled, .mw-viewer__nav:disabled { opacity: 0.35; }
.mw-viewer__nav { position: absolute; top: 50%; z-index: 2; margin-top: calc(var(--mw-touch) / -2); }
.mw-viewer__nav--prev { left: var(--space-8); }
.mw-viewer__nav--next { right: var(--space-8); }
.mw-viewer__stage { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.mw-viewer__stage[data-mw-hands] { touch-action: none; }
.mw-viewer__track { position: absolute; inset: 0; }
.mw-viewer__slide { position: absolute; top: 0; bottom: 0; width: 100%; display: grid; place-items: center; }
.mw-viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ── 화면 전환(View Transitions): 카드 → 상세, 카드 ↔ 그리드 */
::view-transition-group(*) { animation-duration: var(--motion-duration-long); animation-timing-function: var(--motion-easing-ease-in-out); }
::view-transition-group(mw-expand) { animation-timing-function: var(--mw-ease-sheet); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--motion-duration-medium); }
.mw-vt .mw-app-panel, .mw-vt .mw-app-panel-scrim { transition: none; }

/* ── 움직임 줄이기: 움직이지 않고 결과만 */
@media (prefers-reduced-motion: reduce) {
  .mw-swipe--hint > .mw-swipe__body, .mw-burst, .mw-peek, .mw-action-menu, .mw-gesture-demo * { animation: none; }
  .mw-swipe__circle, .mw-sortable--dragging > .mw-sortable__item, .mw-sheet--detents > .mw-sheet__foot { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}
[data-mw-motion='reduce'] .mw-swipe--hint > .mw-swipe__body,
[data-mw-motion='reduce'] .mw-burst,
[data-mw-motion='reduce'] .mw-peek,
[data-mw-motion='reduce'] .mw-action-menu,
[data-mw-motion='reduce'] .mw-gesture-demo * { animation: none; }
[data-mw-motion='reduce'] .mw-swipe__circle,
[data-mw-motion='reduce'] .mw-sortable--dragging > .mw-sortable__item,
[data-mw-motion='reduce'] .mw-sheet--detents > .mw-sheet__foot { transition: none; }

/* ── ItemTile ── */
/* Item Tile — Moonwave UX extra component */

/* 구조: Thumbnail(1:1) + Favorite Button + Label · Title · Origin · Rate · Value + Tag 예요.
   Vertical은 사진이 위, Horizontal은 사진이 왼쪽이에요.
   가이드에 수치가 없는 글자 크기 · 반경 · 사진 크기는 키트의 상품 목록 토큰을 그대로 써요. */

.mw-item-tile {
  --item-tile-favorite-selected: var(--icon-accent-primary);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--list-item-image-product-container-multi-column-item-spacing);
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--text-primary);
  list-style: none;
}

/* Horizontal: 한 줄을 다 쓰고, 사진 높이 안에 정보를 담아요 */

.mw-item-tile--horizontal {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--list-item-image-product-container-default-item-spacing);
  width: 100%;
}

/* Thumbnail: 항상 1:1이에요 */

.mw-item-tile__thumbnail {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: var(--list-item-image-product-image-container-default-border-width)
    var(--list-item-image-product-image-container-default-border-style)
    var(--list-item-image-product-image-container-default-border-color);
  border-radius: var(--list-item-image-product-image-container-default-border-radius);
  background-color: var(--list-item-image-product-image-container-default-fill);
}

.mw-item-tile--horizontal .mw-item-tile__thumbnail {
  width: var(--list-item-image-product-image-container-default-sizing);
}

.mw-item-tile__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 로고나 오려 낸 그림은 사진 영역의 70% 안에 가운데로 둬요 */

.mw-item-tile__thumbnail--inset .mw-item-tile__image {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

/* Favorite Button: 사진 오른쪽 위 안쪽에 놓여요. 누르는 영역은 44px이에요.
   사진 위에 얹으므로 기본 하트는 테마와 상관없이 흰색이에요 */

.mw-item-tile__favorite {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--list-item-image-product-heart-button-container-default-sizing);
  height: var(--list-item-image-product-heart-button-container-default-sizing);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: transparent;
  cursor: pointer;
  outline: none;
  transition: opacity var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-item-tile__favorite svg {
  display: block;
  width: var(--list-item-image-product-heart-button-icon-size-default-sizing);
  height: var(--list-item-image-product-heart-button-icon-size-default-sizing);
  color: var(--static-white);
  filter: drop-shadow(0 var(--space-4) var(--space-8) var(--opacity-black-10))
    drop-shadow(0 0 var(--space-4) var(--opacity-black-5));
}

/* 고른 하트는 강조색으로 채우고 흰 테두리를 둘러서 어떤 사진 위에서도 보이게 해요 */

.mw-item-tile__favorite[aria-pressed="true"] svg,
.mw-item-tile__favorite--selected svg {
  color: var(--item-tile-favorite-selected);
  stroke: var(--static-white);
  stroke-width: var(--border-width-2);
  paint-order: stroke;
}

.mw-item-tile__favorite:hover {
  opacity: 0.7;
}

.mw-item-tile__favorite:active {
  opacity: 0.5;
}

/* 사진이 넘치는 부분을 잘라 내므로 포커스 고리는 버튼 안쪽에 그려요.
   어떤 사진 위에서도 보이도록 포커스 색 고리 안쪽에 흰 고리를 한 겹 더 둬요 */

.mw-item-tile__favorite:focus-visible,
.mw-item-tile .mw-item-tile__thumbnail .mw-item-tile__favorite:focus-visible {
  outline: var(--border-width-2) solid var(--static-white);
  outline-offset: calc(var(--space-4) * -1);
  box-shadow: inset 0 0 0 var(--border-width-2) var(--mw-focus);
}

.mw-item-tile__favorite:disabled,
.mw-item-tile__favorite[aria-disabled="true"] {
  opacity: 1;
  cursor: not-allowed;
}

.mw-item-tile__favorite:disabled svg,
.mw-item-tile__favorite[aria-disabled="true"] svg {
  color: var(--icon-disabled);
}

/* 글자 영역: Label · Title · 값 줄은 저마다 한 줄이에요 */

.mw-item-tile__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--list-item-image-product-text-area-multi-column-item-spacing);
  min-width: 0;
}

.mw-item-tile--horizontal .mw-item-tile__body {
  gap: var(--list-item-image-product-text-area-default-item-spacing);
}

.mw-item-tile__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mw-item-tile__label {
  overflow: hidden;
  color: var(--list-item-image-product-text-label-fill);
  font-family: var(--list-item-image-product-text-label-typography-font-family);
  font-size: var(--list-item-image-product-text-label-typography-font-size);
  font-weight: var(--list-item-image-product-text-label-typography-font-weight);
  line-height: var(--list-item-image-product-text-label-typography-line-height);
  letter-spacing: var(--list-item-image-product-text-label-typography-letter-spacing);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mw-item-tile__title {
  margin: 0;
  overflow: hidden;
  color: var(--list-item-image-product-text-body-fill);
  font-family: var(--list-item-image-product-text-body-typography-font-family);
  font-size: var(--list-item-image-product-text-body-typography-font-size);
  font-weight: var(--list-item-image-product-text-body-typography-font-weight);
  line-height: var(--list-item-image-product-text-body-typography-line-height);
  letter-spacing: var(--list-item-image-product-text-body-typography-letter-spacing);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Desktop 규격: 제목을 굵게 써요 */

.mw-item-tile--desktop .mw-item-tile__title,
.mw-item-tile--card .mw-item-tile__title {
  font-weight: var(--font-weight-bold);
}

/* Link: 제목 링크가 타일 전체를 덮어서 어디를 눌러도 상세로 가요 */

.mw-item-tile__link {
  color: inherit;
  text-decoration: none;
  outline: none;
}

.mw-item-tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--list-item-image-product-image-container-default-border-radius);
}

.mw-item-tile__link:hover {
  text-decoration: underline;
  text-underline-offset: var(--space-2);
}

.mw-item-tile__link:active {
  color: var(--text-secondary);
}

/* 포커스 고리는 링크 글자가 아니라 타일 전체에 그려요 */

.mw-item-tile__link:focus-visible,
.mw-item-tile .mw-item-tile__title .mw-item-tile__link:focus-visible {
  outline: none;
}

.mw-item-tile__link:focus-visible::after {
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: var(--space-2);
}

/* Origin: 바뀌기 전 값이에요. 값이 없어도 자리를 남겨 두면 옆 타일과 값 줄이 맞아요 */

.mw-item-tile__origin {
  display: block;
  min-height: calc(var(--font-size-12) * 1.48);
  overflow: hidden;
  color: var(--text-tertiary);
  font-family: var(--font-family-default);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-default-148);
  letter-spacing: var(--letter-spacing-default);
  font-variant-numeric: tabular-nums;
  text-decoration: line-through;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rate + Value: 한 줄에 나란히, 같은 기준선에 놓아요 */

.mw-item-tile__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.mw-item-tile__rate {
  flex: none;
  color: var(--list-item-image-product-text-discount-rate-fill);
  font-family: var(--list-item-image-product-text-discount-rate-typography-font-family);
  font-size: var(--list-item-image-product-text-discount-rate-typography-font-size);
  font-weight: var(--list-item-image-product-text-discount-rate-typography-font-weight);
  line-height: var(--list-item-image-product-text-discount-rate-typography-line-height);
  letter-spacing: var(--list-item-image-product-text-discount-rate-typography-letter-spacing);
  font-variant-numeric: tabular-nums;
}

/* 시세: 오름은 빨강, 내림은 파랑이에요. 부호를 함께 적어요 */

.mw-item-tile__rate--gain {
  color: var(--mw-gain);
}

.mw-item-tile__rate--loss {
  color: var(--mw-loss);
}

.mw-item-tile__value {
  overflow: hidden;
  color: var(--list-item-image-product-text-price-fill);
  font-family: var(--list-item-image-product-text-price-typography-font-family);
  font-size: var(--list-item-image-product-text-price-typography-font-size);
  font-weight: var(--list-item-image-product-text-price-typography-font-weight);
  line-height: var(--list-item-image-product-text-price-typography-line-height);
  letter-spacing: var(--list-item-image-product-text-price-typography-letter-spacing);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
}

/* Tag: 한 줄로만 두고, 넘치면 잘라요 */

.mw-item-tile__tags {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--list-item-image-product-tag-area-default-item-spacing);
  min-width: 0;
  overflow: hidden;
}

.mw-item-tile__tags > * {
  flex: none;
}

/* Card: 테두리가 있는 타일이에요. 값 내역을 줄마다 양끝에 맞춰 보여요 */

.mw-item-tile--card {
  gap: var(--space-16);
  padding: var(--space-20);
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-16);
  background-color: var(--surface-primary);
}

.mw-item-tile--card .mw-item-tile__body {
  gap: var(--space-12);
}

.mw-item-tile--card .mw-item-tile__link::after {
  border-radius: var(--radius-16);
}

.mw-item-tile__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
}

.mw-item-tile__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-12);
  min-width: 0;
  white-space: nowrap;
}

.mw-item-tile__row-label {
  flex: none;
  margin: 0;
  color: var(--text-tertiary);
  font-family: var(--label-small-medium-font-family);
  font-size: var(--label-small-medium-font-size);
  font-weight: var(--label-small-medium-font-weight);
  line-height: var(--label-small-medium-line-height);
  letter-spacing: var(--label-small-medium-letter-spacing);
}

.mw-item-tile__row-value {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-family: var(--body-small-medium-font-family);
  font-size: var(--body-small-medium-font-size);
  font-weight: var(--body-small-medium-font-weight);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-overflow: ellipsis;
}

.mw-item-tile__row-value--gain {
  color: var(--mw-gain);
}

.mw-item-tile__row-value--loss {
  color: var(--mw-loss);
}

/* 합계 줄: 위에 옅은 구분선을 긋고 값을 가장 크게 써요 */

.mw-item-tile__row--total {
  padding-top: var(--space-12);
  border-top: var(--border-width-1) solid var(--border-secondary);
}

.mw-item-tile__row--total .mw-item-tile__row-value {
  font-family: var(--title-small-bold-font-family);
  font-size: var(--title-small-bold-font-size);
  font-weight: var(--title-small-bold-font-weight);
  line-height: var(--title-small-bold-line-height);
  letter-spacing: var(--title-small-bold-letter-spacing);
}

/* 묶음: Vertical은 격자(가로 간격 12), Horizontal은 세로 목록(간격 16)으로 늘어놓아요 */

.mw-item-tile-grid {
  --item-tile-columns: 2;
  display: grid;
  grid-template-columns: repeat(var(--item-tile-columns), minmax(0, 1fr));
  column-gap: var(--space-12);
  row-gap: var(--space-24);
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mw-item-tile-grid--3 {
  --item-tile-columns: 3;
  column-gap: var(--desktop-gutter-spacing);
}

.mw-item-tile-grid--4 {
  --item-tile-columns: 4;
  column-gap: var(--desktop-gutter-spacing);
}

/* 보기 방식의 카드 · 그리드 (patterns/data-view#views): 같은 타일 묶음이 화면 너비에 따라 열을 바꿔요.
   카드(값 내역이 있는 Card 타일)는 폰 한 열 · 태블릿 두 열 · 넓은 화면 세 열, 그리드(사진이 먼저인 타일)는 두 · 세 · 네 열이에요 */
.mw-view-cards { --item-tile-columns: 1; }
.mw-view-grid { --item-tile-columns: 2; }
@media (min-width: 601px) {
  .mw-view-cards { --item-tile-columns: 2; }
  .mw-view-grid { --item-tile-columns: 3; }
}
@media (min-width: 1280px) {
  .mw-view-cards { --item-tile-columns: 3; column-gap: var(--desktop-gutter-spacing); }
  .mw-view-grid { --item-tile-columns: 4; column-gap: var(--desktop-gutter-spacing); }
}

.mw-item-tile-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (prefers-reduced-motion: reduce) {
  .mw-item-tile__favorite {
    transition: none;
  }
}

/* ── Navigation ── */
/* Navigation — Moonwave UX extra component */

/* 데스크톱 메뉴예요. 깊이는 네 단계예요.
   1 Depth 는 GNB(위쪽 막대)의 메뉴, 2 Depth 는 묶음 제목, 3 Depth 는 항목, 4 Depth 는 항목 아래 하위 항목이에요.
   --global 은 GNB와 그 아래로 펼쳐지는 패널, --local 은 왼쪽에 세우는 LNB예요. */

.mw-navigation {
  box-sizing: border-box;
  background-color: var(--surface-primary);
  color: var(--text-primary);
}

/* ── GNB: 위쪽 막대 ── */

.mw-navigation--global {
  position: relative;
  z-index: 10;
  width: 100%;
}

.mw-navigation__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-32);
  box-sizing: border-box;
  height: var(--mw-top-h, 72px);
  padding: 0 var(--desktop-margin-spacing);
  border-bottom: var(--border-width-1) solid var(--border-secondary);
  background-color: var(--surface-primary);
}

.mw-navigation__logo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  min-height: 44px;
  border-radius: var(--radius-4);
  color: var(--text-primary);
  font-family: var(--title-medium-bold-font-family);
  font-weight: var(--title-medium-bold-font-weight);
  font-size: var(--title-medium-bold-font-size);
  line-height: var(--title-medium-bold-line-height);
  letter-spacing: var(--title-medium-bold-letter-spacing);
  text-decoration: none;
  white-space: nowrap;
  outline: none;
}

/* 1 Depth */

.mw-navigation__menu {
  display: flex;
  flex: 1;
  align-items: stretch;
  gap: var(--space-8);
  align-self: stretch;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mw-navigation__menu > li {
  display: flex;
}

.mw-navigation__menu-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-width: 44px;
  margin: 0;
  padding: 0 var(--space-12);
  border: 0;
  background-color: var(--fill-tertiary-default);
  color: var(--text-primary);
  font-family: var(--title-small-bold-font-family);
  font-weight: var(--title-small-bold-font-weight);
  font-size: var(--title-small-bold-font-size);
  line-height: var(--title-small-bold-line-height);
  letter-spacing: var(--title-small-bold-letter-spacing);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
}

.mw-navigation__menu-item::after {
  content: "";
  position: absolute;
  right: var(--space-12);
  bottom: 0;
  left: var(--space-12);
  height: var(--border-width-2);
  background-color: var(--border-inverse);
  opacity: 0;
  transition: opacity var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-navigation__menu-item[aria-expanded="true"]::after,
.mw-navigation__menu-item[aria-current="page"]::after,
.mw-navigation__menu-item--selected::after {
  opacity: 1;
}

@media (hover: hover) {
  .mw-navigation__menu-item:hover::after {
    opacity: 1;
  }
}

.mw-navigation__menu-item:active {
  color: var(--text-secondary);
}

/* 오른쪽 아이콘 버튼 */

.mw-navigation__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
}

.mw-navigation__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--fill-tertiary-default);
  color: var(--icon-primary);
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-navigation__action svg {
  display: block;
  width: var(--size-24);
  height: var(--size-24);
}

@media (hover: hover) {
  .mw-navigation__action:hover {
    background-color: var(--fill-tertiary-hover);
  }
}

.mw-navigation__action:active {
  background-color: var(--fill-tertiary-pressed);
}

/* ── 패널: GNB 아래로 화면 너비만큼 펼쳐져요. 여섯 칸으로 똑같이 나눠요 ── */

.mw-navigation__panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--desktop-gutter-spacing);
  row-gap: var(--space-16);
  box-sizing: border-box;
  padding: var(--space-12) calc(var(--desktop-margin-spacing) - var(--space-12)) var(--space-32);
  background-color: var(--surface-primary);
}

.mw-navigation__panel[hidden] {
  display: none;
}

/* 패널 아래 본문을 덮는 딤이에요 */

.mw-navigation__dim {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 0;
  height: 100vh;
  background-color: var(--dim-overlay);
}

/* ── LNB: 왼쪽에 세우는 메뉴 ── */

.mw-navigation--local {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-8);
  width: var(--mw-nav-w, 248px);
  max-width: 100%;
  padding: var(--space-8) var(--space-12) var(--space-24);
  border-right: var(--border-width-1) solid var(--border-secondary);
  overflow-y: auto;
}

/* ── 묶음: 2 Depth 제목 + 3 Depth 목록 ── */

.mw-navigation__group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mw-navigation__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 2 Depth: 높이 48, 왼쪽 12, 오른쪽 4 */

.mw-navigation__title {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 48px;
  margin: 0;
  padding: 0 var(--space-4) 0 var(--space-12);
  color: var(--text-tertiary);
  font-family: var(--body-small-medium-font-family);
  font-weight: var(--body-small-medium-font-weight);
  font-size: var(--body-small-medium-font-size);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
  white-space: nowrap;
}

/* 3 Depth: 높이 40. 글자 시작선은 2 Depth와 같아요 */

.mw-navigation__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--fill-tertiary-default);
  color: var(--text-primary);
  font-family: var(--body-large-medium-font-family);
  font-weight: var(--body-large-medium-font-weight);
  font-size: var(--body-large-medium-font-size);
  line-height: var(--body-large-medium-line-height);
  letter-spacing: var(--body-large-medium-letter-spacing);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-navigation__item::-webkit-details-marker {
  display: none;
}

.mw-navigation__item::marker {
  content: "";
}

/* 항목 앞 아이콘(선택)이에요 */

.mw-navigation__item-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: var(--size-20);
  height: var(--size-20);
  margin-right: var(--space-4);
  color: var(--icon-secondary);
}

.mw-navigation__item-icon svg,
.mw-navigation__chevron svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mw-navigation__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge: 메뉴 이름 바로 오른쪽, 간격 4 */

.mw-navigation__badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--size-16);
  height: var(--size-16);
  padding: 0 var(--space-2);
  border-radius: var(--radius-4);
  background-color: var(--fill-accent-secondary-default);
  color: var(--text-inverse);
  font-family: var(--label-xsmall-bold-font-family);
  font-weight: var(--label-xsmall-bold-font-weight);
  font-size: var(--label-xsmall-bold-font-size);
  line-height: 1;
  letter-spacing: var(--label-xsmall-bold-letter-spacing);
}

.mw-navigation__badge--hot {
  background-color: var(--fill-accent-primary-default);
}

/* Navigation Icon: 하위 항목이 있을 때만, 오른쪽 끝에 둬요 */

.mw-navigation__chevron {
  display: inline-flex;
  flex-shrink: 0;
  width: var(--size-20);
  height: var(--size-20);
  margin-left: auto;
  color: var(--icon-secondary);
}

.mw-navigation__branch {
  display: block;
}

/* 접힌 가지의 하위 항목은 그리지 않아요. 브라우저는 접힌 details의 내용을 건너뛰기만 해서(content-visibility),
   아래의 display: flex가 남아 있으면 보이지 않는 링크가 자리를 가진 것으로 읽혀요. */

.mw-navigation__branch:not([open]) > .mw-navigation__sub {
  display: none;
}

.mw-navigation__branch[open] > .mw-navigation__item .mw-navigation__chevron,
.mw-navigation__item[aria-expanded="true"] .mw-navigation__chevron {
  transform: rotate(180deg);
}

/* 4 Depth: 높이 33, 항목마다 바탕이 있는 둥근 상자예요 */

.mw-navigation__sub {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-4) 0 var(--space-8);
  list-style: none;
}

.mw-navigation__sub[hidden] {
  display: none;
}

.mw-navigation__subitem {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 33px;
  margin: 0;
  padding: 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--background-secondary);
  color: var(--text-tertiary);
  font-family: var(--body-small-medium-font-family);
  font-weight: var(--body-small-medium-font-weight);
  font-size: var(--body-small-medium-font-size);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition:
    background-color var(--motion-duration-medium) var(--motion-easing-ease-out),
    color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

/* ── 상태 ── */

@media (hover: hover) {
  .mw-navigation__item:hover,
  .mw-navigation__subitem:hover {
    background-color: var(--fill-tertiary-hover);
  }

  .mw-navigation__subitem:hover {
    color: var(--text-primary);
  }
}

.mw-navigation__item:active,
.mw-navigation__subitem:active {
  background-color: var(--fill-tertiary-pressed);
}

/* Selected: 지금 화면이에요 */

.mw-navigation__item[aria-current="page"],
.mw-navigation__item--selected,
.mw-navigation__subitem[aria-current="page"],
.mw-navigation__subitem--selected {
  background-color: var(--fill-secondary-default);
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
}

.mw-navigation__item[aria-current="page"] .mw-navigation__item-icon,
.mw-navigation__item--selected .mw-navigation__item-icon {
  color: var(--icon-primary);
}

/* Focus */

.mw-navigation__logo:focus-visible,
.mw-navigation__menu-item:focus-visible,
.mw-navigation__action:focus-visible,
.mw-navigation__item:focus-visible,
.mw-navigation__subitem:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
}

.mw-navigation__menu-item:focus-visible {
  outline-offset: calc(var(--border-width-2) * -1);
}

/* Disabled */

.mw-navigation__item:disabled,
.mw-navigation__item[aria-disabled="true"],
.mw-navigation__subitem:disabled,
.mw-navigation__subitem[aria-disabled="true"] {
  background-color: var(--fill-tertiary-default);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.mw-navigation__subitem:disabled,
.mw-navigation__subitem[aria-disabled="true"] {
  background-color: var(--background-secondary);
}

.mw-navigation__item:disabled .mw-navigation__item-icon,
.mw-navigation__item[aria-disabled="true"] .mw-navigation__item-icon,
.mw-navigation__item:disabled .mw-navigation__chevron,
.mw-navigation__item[aria-disabled="true"] .mw-navigation__chevron {
  color: var(--icon-disabled);
}

/* 손가락으로 누르는 기기에서는 누르는 영역을 44px로 키워요 */

@media (pointer: coarse) {
  .mw-navigation__item,
  .mw-navigation__subitem {
    min-height: 44px;
  }
}

/* Motion */

@media (prefers-reduced-motion: no-preference) {
  .mw-navigation__chevron {
    transition: transform var(--motion-duration-medium) var(--motion-easing-ease-out);
  }
}

/* ── OpenIn ── */
/* OpenIn — Moonwave UX extra component */
/* 서비스 간 열기: 다른 Moonwave 서비스의 화면으로 가는 링크(OpenInLink)와 ⋯ 메뉴의 링크 줄. 규격: /patterns/open-in
   링크는 손가락 크기(--mw-touch)이고 글자는 본문 색이에요. 강조 색을 쓰지 않아요: 화면의 주된 행동이 아니에요. */
.mw-open-in { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--mw-touch); padding: 0 var(--space-12); border-radius: var(--radius-8); color: var(--text-primary); font-size: var(--font-size-14); font-weight: var(--font-weight-medium); text-decoration: none; }
.mw-open-in svg { flex: none; color: var(--icon-secondary); }
.mw-open-in:hover, .mw-open-in:active { background: var(--background-secondary); }
/* OpenIn 메뉴를 여는 버튼: 키트 Button(tertiary) 위의 표시예요 */
.mw-open-in__button svg { flex: none; }
/* ActionMenu의 줄이 링크일 때(openInActions): 버튼 줄과 같은 모양이에요 */
.mw-open-in__row { color: var(--text-primary); text-decoration: none; }

/* ── Pagination ── */
/* Pagination — Moonwave UX extra component */

/* 구조: nav > controls(처음 · 이전) + pages(번호) + controls(다음 · 끝) 이에요.
   간격은 컨트롤끼리 8, 컨트롤과 번호 사이 16, 번호끼리 8이에요. */

.mw-pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.mw-pagination__controls {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-8);
}

.mw-pagination__pages {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mw-pagination__pages > li {
  display: flex;
}

/* Control Button: 테두리가 있는 정사각 버튼이에요 */

.mw-pagination__control {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-4);
  background-color: var(--surface-primary);
  color: var(--icon-secondary);
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition:
    background-color var(--motion-duration-medium) var(--motion-easing-ease-out),
    border-color var(--motion-duration-medium) var(--motion-easing-ease-out),
    color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-pagination__control svg {
  display: block;
  flex-shrink: 0;
  width: var(--size-16);
  height: var(--size-16);
}

/* 처음 · 끝: 같은 꺾쇠 두 개를 겹쳐 겹꺾쇠로 보여요 */

.mw-pagination__control svg + svg {
  margin-left: calc(var(--space-8) * -1);
}

/* Page Button: 숫자만 보이는 버튼이에요 */

.mw-pagination__page {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  margin: 0;
  padding: 0 var(--space-4);
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-4);
  background-color: var(--fill-tertiary-default);
  color: var(--text-secondary);
  font-family: var(--body-small-medium-font-family);
  font-weight: var(--body-small-medium-font-weight);
  font-size: var(--body-small-medium-font-size);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  text-underline-offset: var(--space-4);
  cursor: pointer;
  outline: none;
  transition:
    background-color var(--motion-duration-medium) var(--motion-easing-ease-out),
    color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

/* 보이는 크기는 36px이고, 누르는 영역은 사방 4px씩 넓혀 44px이에요 */

.mw-pagination__control::before {
  content: "";
  position: absolute;
  inset: calc((var(--space-4) + var(--border-width-1)) * -1);
}

.mw-pagination__page::before {
  content: "";
  position: absolute;
  inset: calc(var(--space-4) * -1);
}

/* Selected: 지금 페이지예요 */

.mw-pagination__page[aria-current="page"],
.mw-pagination__page--selected {
  background-color: var(--fill-primary-default);
  color: var(--text-inverse);
  cursor: default;
}

/* Hover · Pressed */

@media (hover: hover) {
  .mw-pagination__control:hover {
    background-color: var(--fill-tertiary-hover);
  }

  .mw-pagination__page:hover {
    text-decoration: underline;
  }
}

/* --hover 는 문서에서 Hover 모양을 고정해 보여 줄 때 쓰는 훅이에요 */

.mw-pagination__control--hover {
  background-color: var(--fill-tertiary-hover);
}

.mw-pagination__page--hover {
  text-decoration: underline;
}

.mw-pagination__control:active {
  background-color: var(--fill-tertiary-pressed);
}

.mw-pagination__page:active {
  text-decoration: underline;
}

.mw-pagination__page[aria-current="page"]:hover,
.mw-pagination__page[aria-current="page"]:active,
.mw-pagination__page--selected:hover,
.mw-pagination__page--selected:active {
  text-decoration: none;
}

/* Focus */

.mw-pagination__control:focus-visible,
.mw-pagination__page:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
}

/* Disabled: 이동할 페이지가 없을 때예요 */

.mw-pagination__control:disabled,
.mw-pagination__control[aria-disabled="true"] {
  border-color: var(--border-disabled);
  background-color: var(--fill-tertiary-disabled);
  color: var(--icon-disabled);
  cursor: not-allowed;
}

.mw-pagination__page:disabled,
.mw-pagination__page[aria-disabled="true"] {
  background-color: var(--fill-tertiary-default);
  color: var(--text-disabled);
  text-decoration: none;
  cursor: not-allowed;
}

.mw-pagination__page[aria-current="page"]:disabled,
.mw-pagination__page[aria-current="page"][aria-disabled="true"],
.mw-pagination__page--selected:disabled,
.mw-pagination__page--selected[aria-disabled="true"] {
  background-color: var(--fill-primary-disabled);
  color: var(--text-disabled);
}

/* ── Pending ── */
/* Pending — Moonwave UX extra component */

/* 구조: 버튼을 눌렀는데 결과가 바로 나오지 않을 때(로컬 모델이 답을 만드는 5~25초, 모델을 처음 깨우면 거기에 10~20초 더)
   화면이 멈춘 것처럼 보이지 않게 해요(patterns/long-wait).
   1. 누른 버튼(mw-button[aria-busy="true"]): 0.1초 안에 앞에 도는 고리가 붙고 레이블이 `~하는 중이에요`로 바뀌어요.
   2. 진행 칸(mw-pending): 1초가 지나면 결과가 나올 자리에 나와요. 제목(무엇을 하는지) · 지금 단계 · 막대 · 시간 · 취소.
   막대는 몇 퍼센트인지 알 때만 값을 말해요(--pending-value). 모르면 흐르는 막대(--indeterminate)고, 지어낸 퍼센트는 쓰지 않아요.
   움직임을 줄인 기기에서는 고리와 막대가 멈추고 글(`12초째`)이 진행을 말해요. */

.mw-pending {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  box-sizing: border-box;
  padding: var(--space-16);
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-16);
  background: var(--surface-primary);
  color: var(--text-primary);
}

.mw-pending__head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
}

.mw-pending__ring {
  flex: none;
  box-sizing: border-box;
  width: var(--size-24);
  height: var(--size-24);
  border: var(--border-width-2) solid var(--border-secondary);
  border-top-color: var(--fill-accent-primary-default);
  border-radius: var(--radius-circle);
}

.mw-pending__title {
  min-width: 0;
  margin: 0;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-default-148);
  letter-spacing: -0.02em;
}

.mw-pending__step {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-default-148);
}

.mw-pending__bar {
  --pending-value: 0%;
  position: relative;
  height: var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-circle);
  background: var(--background-secondary);
}

.mw-pending__bar > i {
  display: block;
  width: var(--pending-value);
  height: 100%;
  border-radius: inherit;
  background: var(--fill-accent-primary-default);
  transition: width var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-pending__bar--indeterminate > i {
  width: 40%;
}

.mw-pending__time {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-13);
  font-variant-numeric: tabular-nums;
}

.mw-pending__note {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-13);
  line-height: var(--line-height-default-148);
}

.mw-pending__actions {
  display: flex;
  justify-content: flex-end;
}

.mw-pending--error {
  border-color: var(--mw-critical);
}

.mw-pending--error .mw-pending__title {
  color: var(--mw-critical);
}

/* 누른 버튼: 고리가 앞에 붙고, 다시 눌러도 일을 두 번 시키지 않아요(눌림은 막되 포커스는 그대로예요) */
.mw-button[aria-busy="true"] {
  pointer-events: none;
}

.mw-button[aria-busy="true"]::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: var(--size-16);
  height: var(--size-16);
  margin-inline-end: var(--space-8);
  border: var(--border-width-2) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-circle);
}

@keyframes mw-pending-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: no-preference) {
  .mw-pending__ring,
  .mw-button[aria-busy="true"]::before {
    animation: mw-turn 0.8s linear infinite;
  }

  .mw-pending__bar--indeterminate > i {
    animation: mw-pending-slide 1.4s ease-in-out infinite;
  }
}

[data-mw-motion='reduce'] .mw-pending__ring,
[data-mw-motion='reduce'] .mw-button[aria-busy="true"]::before,
[data-mw-motion='reduce'] .mw-pending__bar--indeterminate > i {
  animation: none;
}

/* ── ProcessIndicator ── */
/* Process Indicator — Moonwave UX extra component */

/* AI가 답을 만드는 동안 지금 무엇을 하는지 알려 줘요.
   __status : 한 줄 글(Processing). 빨리 끝나는 답에 써요.
   __card   : 단계 카드(Reasoning). 자료를 찾거나 길게 따져 볼 때 써요.
   __toggle + __thoughts : 접는 추론 글(Dropdown). 말풍선 대화에 써요.
   카드는 흰 면(--surface-primary)이라 회색 배경(agent 모드) 위에 올려요. */

.mw-process-indicator {
  /* 진행 중 글자에 입히는 그라데이션이에요. 앞쪽 절반은 --gradient-ai-indicator와 같은 단계(라이트 gray 900 → 400 → 600)이고,
     뒤쪽 절반은 그것을 거울처럼 뒤집어 이어 붙여서 끊김 없이 흐르게 했어요.
     semantic 토큰으로 풀어 썼기 때문에 다크에서는 흰색 → gray 500 → 300으로 바뀌어 어두운 배경에서도 읽혀요. */
  --mw-process-indicator-text-gradient: linear-gradient(90deg, var(--text-primary) 0%, var(--icon-tertiary) 29%, var(--icon-secondary) 50%, var(--icon-tertiary) 71%, var(--text-primary) 100%);
  /* 진행 중 단계의 고리와 세로선에 쓰는 청록 그라데이션이에요(라이트 teal 500 → 100, 다크 teal 400 → 700). */
  --mw-process-indicator-accent-start: var(--fill-accent-secondary-default);
  --mw-process-indicator-accent-end: var(--tag-status-fill-info);

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-12);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  color: var(--text-primary);
}

/* ── Processing: 아이콘 없는 한 줄 글 ── */

.mw-process-indicator__status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  margin: 0;
  color: var(--text-primary);
  word-break: keep-all;
  font-family: var(--body-reading-large-medium-font-family);
  font-weight: var(--body-reading-large-medium-font-weight);
  font-size: var(--body-reading-large-medium-font-size);
  line-height: var(--body-reading-large-medium-line-height);
  letter-spacing: var(--body-reading-large-medium-letter-spacing);
}

.mw-process-indicator__status > svg {
  flex-shrink: 0;
  width: var(--size-20);
  height: var(--size-20);
  margin-top: var(--space-4);
}

/* Canceled: 회색 글 */

.mw-process-indicator__status--canceled {
  color: var(--text-tertiary);
}

/* Error: 빨간 정보 아이콘 + 빨간 글 */

.mw-process-indicator__status--error {
  color: var(--text-feedback-critical);
}

.mw-process-indicator__status--error > svg {
  color: var(--icon-feedback-critical);
}

/* 셔머: 앞은 진하고 뒤로 갈수록 옅어지는 글자예요. 움직임을 줄인 환경에서는 멈춘 그라데이션으로 보여요 */

.mw-process-indicator__shimmer {
  color: var(--text-tertiary);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mw-process-indicator__shimmer {
    background-image: var(--mw-process-indicator-text-gradient);
    background-size: 200% 100%;
    background-position: 0% 0%;
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--opacity-black-0);
  }
}

@keyframes mw-process-indicator-shimmer {
  from {
    background-position: 200% 0%;
  }
  to {
    background-position: 0% 0%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .mw-process-indicator__shimmer {
    animation: mw-process-indicator-shimmer calc(var(--motion-duration-loop) * 2) var(--motion-easing-linear) infinite;
  }
}

/* ── Reasoning: 단계 카드 ── */

.mw-process-indicator__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: var(--space-8);
  border-radius: var(--radius-16);
  background-color: var(--surface-primary);
  list-style: none;
}

.mw-process-indicator__step {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

/* 단계 머리줄: 상태 아이콘 + 굵은 단계 이름 + 쉐브론. 줄 전체가 누르는 영역이에요 */

.mw-process-indicator__header {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: var(--space-8);
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--fill-tertiary-default);
  color: var(--text-primary);
  text-align: left;
  outline: none;
  font-family: var(--body-medium-bold-font-family);
  font-weight: var(--body-medium-bold-font-weight);
  font-size: var(--body-medium-bold-font-size);
  line-height: var(--body-medium-bold-line-height);
  letter-spacing: var(--body-medium-bold-letter-spacing);
}

.mw-process-indicator__label {
  flex: 1;
  min-width: 0;
  word-break: keep-all;
}

.mw-process-indicator__chevron {
  flex-shrink: 0;
  width: var(--size-20);
  height: var(--size-20);
  color: var(--icon-secondary);
  transition: transform var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-process-indicator__header[aria-expanded="true"] .mw-process-indicator__chevron {
  transform: rotate(180deg);
}

.mw-process-indicator__header:is(button) {
  cursor: pointer;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

@media (hover: hover) {
  .mw-process-indicator__header:is(button):hover {
    background-color: var(--fill-tertiary-hover);
  }
}

.mw-process-indicator__header:is(button):active {
  background-color: var(--fill-tertiary-pressed);
}

.mw-process-indicator__header:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: calc(var(--border-width-2) * -1);
}

/* 끝난 단계: 검은 원 + 흰 체크 */

.mw-process-indicator__check {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--size-20);
  height: var(--size-20);
  border-radius: var(--radius-circle);
  background-color: var(--fill-primary-default);
  color: var(--icon-inverse);
}

.mw-process-indicator__check svg {
  width: var(--size-12);
  height: var(--size-12);
}

/* 진행 중 단계: 청록 고리가 돌아요 */

.mw-process-indicator__spinner {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--size-20);
  height: var(--size-20);
  border-radius: var(--radius-circle);
  background-image: conic-gradient(var(--mw-process-indicator-accent-end) 5%, var(--mw-process-indicator-accent-start));
  -webkit-mask: radial-gradient(farthest-side, var(--opacity-black-0) calc(100% - var(--border-width-2) - var(--border-width-1)), var(--static-black) calc(100% - var(--border-width-2)));
  mask: radial-gradient(farthest-side, var(--opacity-black-0) calc(100% - var(--border-width-2) - var(--border-width-1)), var(--static-black) calc(100% - var(--border-width-2)));
}

@keyframes mw-process-indicator-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .mw-process-indicator__spinner {
    animation: mw-process-indicator-spin var(--motion-duration-loop) var(--motion-easing-linear) infinite;
  }
}

/* 단계 내용: 아이콘 가운데에서 내려오는 세로선 옆에 세부 글이나 찾아본 자료 칩을 쌓아요 */

.mw-process-indicator__detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  box-sizing: border-box;
  margin: 0 var(--space-8) var(--space-8) calc(var(--space-16) + var(--border-width-1));
  padding: var(--space-4) 0 var(--space-4) calc(var(--space-16) + var(--border-width-1));
  border-left: var(--border-width-2) solid var(--border-secondary);
  color: var(--text-secondary);
  word-break: keep-all;
  font-family: var(--body-small-medium-font-family);
  font-weight: var(--body-small-medium-font-weight);
  font-size: var(--body-small-medium-font-size);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
}

.mw-process-indicator__detail[hidden] {
  display: none;
}

.mw-process-indicator__detail > p {
  margin: 0;
}

.mw-process-indicator__step--active > .mw-process-indicator__detail {
  border-image: linear-gradient(180deg, var(--mw-process-indicator-accent-start), var(--mw-process-indicator-accent-end)) 1;
}

/* 찾아본 자료 칩: 돋보기 + 무엇을 봤는지 */

.mw-process-indicator__query {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  box-sizing: border-box;
  max-width: 100%;
  min-height: 36px;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-8);
  background-color: var(--surface-secondary);
  color: var(--text-secondary);
}

.mw-process-indicator__query > svg {
  flex-shrink: 0;
  width: var(--size-16);
  height: var(--size-16);
  color: var(--icon-secondary);
}

/* ── Dropdown: 말풍선 대화에서 답 위에 두는 '추론 과정' 토글 ── */

.mw-process-indicator__toggle {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-4);
  background-color: var(--opacity-black-0);
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;
  font-family: var(--body-small-medium-font-family);
  font-weight: var(--body-small-medium-font-weight);
  font-size: var(--body-small-medium-font-size);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
}

.mw-process-indicator__toggle::after {
  content: "";
  position: absolute;
  inset: calc(var(--space-12) * -1) calc(var(--space-8) * -1);
}

.mw-process-indicator__toggle svg {
  width: var(--size-16);
  height: var(--size-16);
  transition: transform var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-process-indicator__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.mw-process-indicator__toggle:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
}

.mw-process-indicator__thoughts {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: 0;
  padding: 0 0 0 var(--space-12);
  border-left: var(--border-width-2) solid var(--border-secondary);
  color: var(--text-tertiary);
  word-break: keep-all;
  font-family: var(--body-reading-small-medium-font-family);
  font-weight: var(--body-reading-small-medium-font-weight);
  font-size: var(--body-reading-small-medium-font-size);
  line-height: var(--body-reading-small-medium-line-height);
  letter-spacing: var(--body-reading-small-medium-letter-spacing);
}

.mw-process-indicator__thoughts[hidden] {
  display: none;
}

.mw-process-indicator__thoughts > p {
  margin: 0;
}

/* ── 어두운 테마의 대비 ──
   확인한 자료의 칩은 --surface-secondary 위라 --text-secondary로는 4.35:1이고, 실패 문구의 빨강은 어두운 바탕에서 4.1:1이에요.
   칩은 본문색으로, 빨강은 본문색 쪽으로 밝혀 4.5:1을 넘겨요 (foundations/accessibility 대비). 밝은 테마는 그대로예요. */

[data-theme="dark"] .mw-process-indicator__query {
  color: var(--text-primary);
}

[data-theme="dark"] .mw-process-indicator__status--error {
  color: color-mix(in srgb, var(--text-feedback-critical) 75%, var(--text-primary));
}

/* ── PromptInput ── */
/* Prompt Input — Moonwave UX extra component */

/* 블록이 둘이에요.
   .mw-prompt-input    : 질문을 쓰는 입력 영역이에요(안내 문구 + 입력란). 기본값은 모바일이고 데스크톱은 --desktop을 붙여요.
   .mw-prompt-question : 보낸 질문을 대화 화면에 다시 보여 주는 영역이에요(--monologue · --bubble).
   흰 면(--surface-primary)을 쓰니까 회색 배경(agent 모드) 위에 올려요. */

/* ───────────── 1. 입력 영역 ───────────── */

.mw-prompt-input {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  box-sizing: border-box;
  width: 100%;
}

/* Disclaimer: 모바일은 입력란 위, 데스크톱은 아래예요 */

.mw-prompt-input__disclaimer {
  margin: 0;
  padding: 0 var(--space-20);
  color: var(--text-tertiary);
  text-align: center;
  word-break: keep-all;
  font-family: var(--caption-medium-medium-font-family);
  font-weight: var(--caption-medium-medium-font-weight);
  font-size: var(--caption-medium-medium-font-size);
  line-height: var(--caption-medium-medium-line-height);
  letter-spacing: var(--caption-medium-medium-letter-spacing);
}

/* Text Field: 모바일은 모서리 없이 화면 폭을 다 써요 */

.mw-prompt-input__field {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  background-color: var(--surface-primary);
  color: var(--text-primary);
}

/* 입력 줄: 위 칸은 고른 도구, 아래 칸은 + · 글 · 마이크 · 보내기예요. 글이 늘어나면 버튼은 아래에 붙어요 */

.mw-prompt-input__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "tools tools tools tools"
    "add   text  voice send";
  align-items: end;
  column-gap: var(--space-4);
}

.mw-prompt-input__textarea {
  grid-area: text;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: calc(var(--space-8) + var(--space-2)) var(--space-4);
  border: 0;
  border-radius: var(--radius-0);
  background-color: var(--opacity-black-0);
  color: var(--text-primary);
  resize: none;
  outline: none;
  overflow-y: auto;
  field-sizing: content;
  font-family: var(--body-large-medium-font-family);
  font-weight: var(--body-large-medium-font-weight);
  font-size: var(--body-large-medium-font-size);
  line-height: var(--body-large-medium-line-height);
  letter-spacing: var(--body-large-medium-letter-spacing);
}

.mw-prompt-input__textarea::placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}

.mw-prompt-input__textarea:disabled {
  cursor: not-allowed;
}

/* + · 마이크 · 키보드 버튼: 아이콘 24px, 누르는 영역 44px */

.mw-prompt-input__action {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: var(--fill-tertiary-default);
  color: var(--icon-primary);
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out),
    color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-prompt-input__action svg {
  display: block;
  width: var(--size-24);
  height: var(--size-24);
}

.mw-prompt-input__action--add {
  grid-area: add;
}

.mw-prompt-input__action--voice {
  grid-area: voice;
}

@media (hover: hover) {
  .mw-prompt-input__action:hover:not(:disabled) {
    background-color: var(--fill-tertiary-hover);
  }
}

.mw-prompt-input__action:active:not(:disabled) {
  background-color: var(--fill-tertiary-pressed);
}

.mw-prompt-input__action[aria-expanded="true"],
.mw-prompt-input__action[aria-pressed="true"] {
  background-color: var(--fill-tertiary-hover);
}

.mw-prompt-input__action:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
}

.mw-prompt-input__action:disabled,
.mw-prompt-input__action[aria-disabled="true"] {
  color: var(--icon-disabled);
  cursor: not-allowed;
}

/* Send Button: 보이는 원은 36px, 누르는 영역은 44px이에요.
   보낼 것이 없으면 disabled로 두고, 답을 만드는 동안에는 --stop으로 바꿔요 */

.mw-prompt-input__send {
  grid-area: send;
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  margin: var(--space-4);
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: var(--fill-primary-default);
  color: var(--icon-inverse);
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out),
    color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-prompt-input__send::after {
  content: "";
  position: absolute;
  inset: calc(var(--space-4) * -1);
}

.mw-prompt-input__send svg {
  display: block;
  width: var(--size-20);
  height: var(--size-20);
}

@media (hover: hover) {
  .mw-prompt-input__send:hover:not(:disabled) {
    background-color: var(--fill-primary-hover);
  }
}

.mw-prompt-input__send:active:not(:disabled) {
  background-color: var(--fill-primary-pressed);
}

.mw-prompt-input__send:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
}

.mw-prompt-input__send:disabled,
.mw-prompt-input__send[aria-disabled="true"] {
  background-color: var(--fill-primary-disabled);
  color: var(--icon-tertiary);
  cursor: not-allowed;
}

/* 정지 아이콘: 흰 네모예요. 답을 만드는 동안 보내기 자리에 놓아요 */

.mw-prompt-input__stop-icon {
  display: block;
  width: var(--size-12);
  height: var(--size-12);
  border-radius: var(--radius-2);
  background-color: currentColor;
}

/* 고른 도구 칩: 입력 줄 위(모바일), + 버튼 옆(데스크톱) */

.mw-prompt-input__tools {
  grid-area: tools;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  min-width: 0;
  padding: var(--space-4) var(--space-4) var(--space-4);
}

.mw-prompt-input__tool {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  box-sizing: border-box;
  height: 32px;
  padding: 0 var(--space-4) 0 var(--space-12);
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-circle);
  background-color: var(--surface-primary);
  color: var(--text-primary);
  white-space: nowrap;
  font-family: var(--body-small-semibold-font-family);
  font-weight: var(--body-small-semibold-font-weight);
  font-size: var(--body-small-semibold-font-size);
  line-height: var(--body-small-semibold-line-height);
  letter-spacing: var(--body-small-semibold-letter-spacing);
}

.mw-prompt-input__tool > svg {
  flex-shrink: 0;
  width: var(--size-16);
  height: var(--size-16);
  color: var(--icon-accent-secondary);
}

.mw-prompt-input__tool-remove {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: var(--fill-tertiary-default);
  color: var(--icon-secondary);
  cursor: pointer;
  outline: none;
}

.mw-prompt-input__tool-remove::after {
  content: "";
  position: absolute;
  inset: calc((var(--space-8) + var(--space-2)) * -1);
}

.mw-prompt-input__tool-remove svg {
  width: var(--size-16);
  height: var(--size-16);
}

@media (hover: hover) {
  .mw-prompt-input__tool-remove:hover {
    background-color: var(--fill-tertiary-hover);
  }
}

.mw-prompt-input__tool-remove:active {
  background-color: var(--fill-tertiary-pressed);
}

.mw-prompt-input__tool-remove:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
}

/* 첨부: 사진 썸네일과 파일 칩을 입력 줄 위에 가로로 쌓아요. 넘치면 옆으로 밀어요 */

/* 옆으로 넘기는 상자는 넘친 것을 잘라요. 썸네일 삭제 버튼의 누르는 영역이 썸네일 밖으로 8px 나가니, 위와 오른쪽 안쪽 여백을
   그만큼 두고 늘린 4px은 바깥에서 되돌려요. 썸네일과 파일 칩의 자리는 그대로예요 */

.mw-prompt-input__attachments {
  display: flex;
  gap: var(--space-8);
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0 0;
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-4);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.mw-prompt-input__attachments::-webkit-scrollbar {
  display: none;
}

.mw-prompt-input__thumb,
.mw-prompt-input__file {
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  border: var(--border-width-1) solid var(--opacity-black-0);
  border-radius: var(--radius-12);
  background-color: var(--fill-secondary-default);
}

/* 썸네일은 넘친 것을 자르지 않아요: 오른쪽 위 삭제 버튼의 누르는 영역(44px)이 모서리 밖으로 8px 나가요. 사진만 둥글게 잘라요 */

.mw-prompt-input__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  color: var(--icon-tertiary);
}

.mw-prompt-input__thumb > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius-12) - var(--border-width-1));
  object-fit: cover;
}

.mw-prompt-input__thumb > svg {
  width: var(--size-24);
  height: var(--size-24);
}

.mw-prompt-input__file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name remove"
    "meta meta";
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-4);
  width: 168px;
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-12);
}

.mw-prompt-input__file-name {
  grid-area: name;
  overflow: hidden;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--body-small-semibold-font-family);
  font-weight: var(--body-small-semibold-font-weight);
  font-size: var(--body-small-semibold-font-size);
  line-height: var(--body-small-semibold-line-height);
  letter-spacing: var(--body-small-semibold-letter-spacing);
}

.mw-prompt-input__file-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-tertiary);
  font-family: var(--caption-medium-medium-font-family);
  font-weight: var(--caption-medium-medium-font-weight);
  font-size: var(--caption-medium-medium-font-size);
  line-height: var(--caption-medium-medium-line-height);
  letter-spacing: var(--caption-medium-medium-letter-spacing);
}

.mw-prompt-input__file-meta > svg {
  flex-shrink: 0;
  width: var(--size-16);
  height: var(--size-16);
  color: var(--icon-secondary);
}

/* 삭제(×): 검은 원. 올리는 중에도, 실패해도 늘 보여요 */

.mw-prompt-input__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: var(--fill-primary-default);
  color: var(--icon-inverse);
  cursor: pointer;
  outline: none;
}

.mw-prompt-input__remove::after {
  content: "";
  position: absolute;
  top: calc(var(--space-12) * -1);
  right: calc(var(--space-12) * -1);
  width: 44px;
  height: 44px;
}

.mw-prompt-input__remove svg {
  width: var(--size-12);
  height: var(--size-12);
}

.mw-prompt-input__thumb > .mw-prompt-input__remove {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

.mw-prompt-input__file > .mw-prompt-input__remove {
  grid-area: remove;
  position: relative;
}

.mw-prompt-input__remove:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
}

/* 올리는 중: 청록 고리가 돌아요 */

.mw-prompt-input__spinner {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--size-24);
  height: var(--size-24);
  border-radius: var(--radius-circle);
  background-image: conic-gradient(var(--opacity-black-0) 10%, var(--fill-accent-secondary-default));
  -webkit-mask: radial-gradient(farthest-side, var(--opacity-black-0) calc(100% - var(--border-width-2) - var(--border-width-1)), var(--static-black) calc(100% - var(--border-width-2)));
  mask: radial-gradient(farthest-side, var(--opacity-black-0) calc(100% - var(--border-width-2) - var(--border-width-1)), var(--static-black) calc(100% - var(--border-width-2)));
}

.mw-prompt-input__file-meta > .mw-prompt-input__spinner {
  width: var(--size-16);
  height: var(--size-16);
}

@keyframes mw-prompt-input-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .mw-prompt-input__spinner {
    animation: mw-prompt-input-spin var(--motion-duration-loop) var(--motion-easing-linear) infinite;
  }
}

/* 올리기 실패: 면이 옅어지고 테두리가 생겨요. 아이콘은 경고로 바꿔요 */

.mw-prompt-input__thumb--error,
.mw-prompt-input__file--error {
  border-color: var(--border-secondary);
  background-color: var(--surface-secondary);
}

.mw-prompt-input__file--error .mw-prompt-input__file-name {
  color: var(--text-tertiary);
}

.mw-prompt-input__file--error .mw-prompt-input__file-meta > svg {
  color: var(--icon-tertiary);
}

/* 음성 입력: 입력란이 위로 커지고, 위에는 상태 글이나 받아쓴 글, 아래에는 키보드 · 파형 · 보내기가 놓여요 */

.mw-prompt-input__voice {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* 위아래 12px: 지우기 버튼(위에서 12px, 24px)의 누르는 영역 44px이 이 줄 안에서 끝나요. 아래가 8px일 때는 아래 줄의 보내기 버튼 영역과 2px 겹쳤어요 */
  padding: var(--space-12) var(--space-40);
}

.mw-prompt-input__voice-status,
.mw-prompt-input__transcript {
  margin: 0;
  text-align: center;
  word-break: keep-all;
  font-family: var(--body-large-medium-font-family);
  font-weight: var(--body-large-medium-font-weight);
  font-size: var(--body-large-medium-font-size);
  line-height: var(--body-large-medium-line-height);
  letter-spacing: var(--body-large-medium-letter-spacing);
}

.mw-prompt-input__voice-status {
  color: var(--text-tertiary);
}

/* 받아쓴 글은 3줄까지 보이고, 넘치면 안에서 스크롤해요 */

.mw-prompt-input__transcript {
  max-height: calc(1.48em * 3);
  overflow-y: auto;
  color: var(--text-primary);
}

.mw-prompt-input__clear {
  position: absolute;
  top: var(--space-12);
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: var(--icon-tertiary);
  color: var(--icon-inverse);
  cursor: pointer;
  outline: none;
}

.mw-prompt-input__clear::after {
  content: "";
  position: absolute;
  inset: calc((var(--space-8) + var(--space-2)) * -1);
}

.mw-prompt-input__clear svg {
  width: var(--size-16);
  height: var(--size-16);
}

.mw-prompt-input__clear:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
}

.mw-prompt-input__body--voice {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "add text send";
  align-items: center;
}

/* 파형: 듣는 중에는 네모 3개, 받아쓰는 중(--active)에는 높이가 다른 막대 3개예요 */

.mw-prompt-input__wave {
  grid-area: text;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: var(--size-24);
  color: var(--fill-accent-primary-default);
}

.mw-prompt-input__wave > i {
  display: block;
  width: calc(var(--space-4) + var(--space-2));
  height: calc(var(--space-4) + var(--space-2));
  border-radius: var(--radius-2);
  background-color: currentColor;
}

.mw-prompt-input__wave--active > i {
  height: var(--size-12);
  border-radius: var(--radius-circle);
  background-image: linear-gradient(180deg, var(--fill-accent-primary-default), var(--fill-accent-primary-pressed));
}

.mw-prompt-input__wave--active > i:nth-child(2) {
  height: var(--size-24);
}

.mw-prompt-input__wave--active > i:nth-child(3) {
  height: var(--size-16);
}

@keyframes mw-prompt-input-wave {
  from {
    transform: scaleY(0.4);
  }
  to {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .mw-prompt-input__wave--active > i {
    /* 되풀이하는 모션은 --motion-duration-loop로 돌아요 (foundations/motion 되풀이하는 모션) */
    animation: mw-prompt-input-wave var(--motion-duration-loop) var(--motion-easing-ease-in-out) infinite alternate;
  }

  .mw-prompt-input__wave--active > i:nth-child(2) {
    animation-delay: var(--motion-duration-short);
  }

  .mw-prompt-input__wave--active > i:nth-child(3) {
    animation-delay: var(--motion-duration-medium);
  }
}

/* 도구 고르기: 데스크톱은 + 아래에 뜨는 메뉴, 모바일은 바텀시트 안의 타일 3개 + 목록이에요 */

.mw-prompt-input__menu {
  position: absolute;
  top: calc(100% + var(--space-8));
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-sizing: border-box;
  min-width: 220px;
  margin: 0;
  padding: var(--space-8);
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-12);
  background-color: var(--surface-floating);
  box-shadow: var(--shadow-2);
  list-style: none;
}

/* 바텀시트 안에서는 그림자 없이 흐름대로 놓아요 */

.mw-prompt-input__menu--sheet {
  position: static;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-0);
  background-color: var(--opacity-black-0);
  box-shadow: none;
}

.mw-prompt-input__menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: var(--space-8) var(--space-12);
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--fill-tertiary-default);
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
  font-family: var(--body-medium-medium-font-family);
  font-weight: var(--body-medium-medium-font-weight);
  font-size: var(--body-medium-medium-font-size);
  line-height: var(--body-medium-medium-line-height);
  letter-spacing: var(--body-medium-medium-letter-spacing);
}

.mw-prompt-input__menu-item > svg {
  flex-shrink: 0;
  width: var(--size-24);
  height: var(--size-24);
}

.mw-prompt-input__menu-label {
  flex: 1;
  min-width: 0;
}

/* 고른 항목은 오른쪽에 체크가 보여요 */

.mw-prompt-input__menu-check {
  display: none;
  flex-shrink: 0;
  width: var(--size-20);
  height: var(--size-20);
  color: var(--icon-primary);
}

.mw-prompt-input__menu-item[aria-checked="true"] .mw-prompt-input__menu-check {
  display: block;
}

@media (hover: hover) {
  .mw-prompt-input__menu-item:hover {
    background-color: var(--fill-tertiary-hover);
  }
}

.mw-prompt-input__menu-item:active {
  background-color: var(--fill-tertiary-pressed);
}

.mw-prompt-input__menu-item:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: calc(var(--border-width-2) * -1);
}

.mw-prompt-input__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mw-prompt-input__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  box-sizing: border-box;
  width: 100%;
  min-height: 80px;
  margin: 0;
  padding: var(--space-12) var(--space-8);
  border: 0;
  border-radius: var(--radius-12);
  background-color: var(--fill-secondary-default);
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
  font-family: var(--label-small-medium-font-family);
  font-weight: var(--label-small-medium-font-weight);
  font-size: var(--label-small-medium-font-size);
  line-height: var(--label-small-medium-line-height);
  letter-spacing: var(--label-small-medium-letter-spacing);
}

.mw-prompt-input__tile > svg {
  width: var(--size-24);
  height: var(--size-24);
}

@media (hover: hover) {
  .mw-prompt-input__tile:hover {
    background-color: var(--fill-secondary-hover);
  }
}

.mw-prompt-input__tile:active {
  background-color: var(--fill-secondary-pressed);
}

.mw-prompt-input__tile:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
}

/* Disabled: +, 안내 글, 마이크, 보내기가 모두 흐려져요 */

.mw-prompt-input--disabled .mw-prompt-input__textarea::placeholder,
.mw-prompt-input--disabled .mw-prompt-input__textarea {
  color: var(--text-disabled);
}

.mw-prompt-input--disabled .mw-prompt-input__send:disabled {
  color: var(--icon-disabled);
}

/* ── 데스크톱: 한 줄일 때는 알약, 내용이 늘면(--expanded) 둥근 사각형 ── */

.mw-prompt-input--desktop .mw-prompt-input__disclaimer {
  order: 1;
}

.mw-prompt-input--desktop .mw-prompt-input__field {
  padding: var(--space-4) var(--space-8);
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-1);
}

/* 첨부 · 도구 · 여러 줄 · 음성일 때: 글이 윗줄, 버튼이 아랫줄로 나뉘어요 */

.mw-prompt-input--desktop.mw-prompt-input--expanded .mw-prompt-input__field {
  padding: var(--space-8);
  border-radius: var(--radius-16);
}

.mw-prompt-input--desktop.mw-prompt-input--expanded .mw-prompt-input__body {
  grid-template-areas:
    "text text  text  text"
    "add  tools voice send";
  align-items: center;
}

.mw-prompt-input--desktop.mw-prompt-input--expanded .mw-prompt-input__body--voice {
  grid-template-areas: "add text send";
}

.mw-prompt-input--desktop.mw-prompt-input--expanded .mw-prompt-input__textarea {
  padding-right: var(--space-12);
  padding-left: var(--space-12);
}

.mw-prompt-input--desktop .mw-prompt-input__tools {
  flex-wrap: nowrap;
  padding: 0 var(--space-4);
}

/* ───────────── 2. 보낸 질문 ───────────── */

.mw-prompt-question {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

/* Monologue: 말풍선 없이 본문 맨 위에 제목처럼 놓아요 */

.mw-prompt-question--monologue {
  align-items: flex-start;
}

/* Header: 짧은 질문은 큰 제목 크기예요 */

.mw-prompt-question__text {
  margin: 0;
  color: var(--text-primary);
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-family: var(--title-large-bold-font-family);
  font-weight: var(--title-large-bold-font-weight);
  font-size: var(--title-large-bold-font-size);
  line-height: var(--title-large-bold-line-height);
  letter-spacing: var(--title-large-bold-letter-spacing);
}

/* 긴 질문(--long)은 16px로 줄여요. 굵기는 그대로예요 */

.mw-prompt-question--long .mw-prompt-question__text {
  font-family: var(--title-small-bold-font-family);
  font-weight: var(--title-small-bold-font-weight);
  font-size: var(--title-small-bold-font-size);
  line-height: var(--title-small-bold-line-height);
  letter-spacing: var(--title-small-bold-letter-spacing);
}

/* 접힘: Monologue는 모바일 4줄 · 데스크톱 2줄, Bubble은 3줄까지 보여요 */

.mw-prompt-question--collapsed .mw-prompt-question__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.mw-prompt-question--desktop.mw-prompt-question--collapsed .mw-prompt-question__text {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.mw-prompt-question--bubble.mw-prompt-question--collapsed .mw-prompt-question__text {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* Disclosure Button: 질문 펼치기 · 질문 접기 */

.mw-prompt-question__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-4);
  background-color: var(--opacity-black-0);
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;
  font-family: var(--body-small-medium-font-family);
  font-weight: var(--body-small-medium-font-weight);
  font-size: var(--body-small-medium-font-size);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
}

.mw-prompt-question__toggle::after {
  content: "";
  position: absolute;
  inset: calc(var(--space-12) * -1) calc(var(--space-8) * -1);
}

.mw-prompt-question__toggle svg {
  width: var(--size-16);
  height: var(--size-16);
}

.mw-prompt-question__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.mw-prompt-question__toggle:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
}

/* 복사 · 수정: 데스크톱에서 질문에 커서를 올리거나 포커스가 들어오면 나타나요 */

.mw-prompt-question__actions {
  display: flex;
  align-self: flex-end;
  gap: var(--space-4);
}

.mw-prompt-question__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--fill-tertiary-default);
  color: var(--icon-secondary);
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-prompt-question__action svg {
  width: var(--size-20);
  height: var(--size-20);
}

@media (hover: hover) {
  .mw-prompt-question__action:hover {
    background-color: var(--fill-tertiary-hover);
  }
}

.mw-prompt-question__action:active {
  background-color: var(--fill-tertiary-pressed);
}

.mw-prompt-question__action:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
}

@media (hover: hover) {
  .mw-prompt-question--desktop .mw-prompt-question__actions {
    opacity: 0;
    transition: opacity var(--motion-duration-medium) var(--motion-easing-ease-out);
  }

  .mw-prompt-question--desktop:hover .mw-prompt-question__actions,
  .mw-prompt-question--desktop:focus-within .mw-prompt-question__actions,
  .mw-prompt-question--desktop .mw-prompt-question__actions--visible {
    opacity: 1;
  }
}

/* Bubble: 오른쪽에 붙는 흰 말풍선이에요. 짧으면 글 길이만큼 줄어요 */

.mw-prompt-question--bubble {
  align-items: flex-end;
}

.mw-prompt-question__bubble {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-8);
  box-sizing: border-box;
  max-width: 85%;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-16);
  background-color: var(--surface-primary);
}

.mw-prompt-question--bubble .mw-prompt-question__text {
  align-self: stretch;
  font-family: var(--body-large-medium-font-family);
  font-weight: var(--body-large-medium-font-weight);
  font-size: var(--body-large-medium-font-size);
  line-height: var(--body-large-medium-line-height);
  letter-spacing: var(--body-large-medium-letter-spacing);
}

.mw-prompt-question--bubble .mw-prompt-question__toggle {
  color: var(--text-tertiary);
}

/* 수정 상자(데스크톱): 줄 제한 없이 전체 질문을 보여 주고, 오른쪽 아래에 취소 · 수정하기를 둬요 */

.mw-prompt-question__editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-16);
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-12);
  background-color: var(--surface-primary);
}

.mw-prompt-question__editor:focus-within {
  padding: calc(var(--space-16) - var(--border-width-1));
  border: var(--border-width-2) solid var(--border-inverse);
}

.mw-prompt-question--bubble .mw-prompt-question__editor {
  border-radius: var(--radius-16);
}

/* 고치는 글 칸: 한 줄(24px)일 때도 44px 높이로 눌려요. 위아래를 10px씩 넓히고 그만큼 바깥에서 되돌려, 상자 안의 자리는 그대로예요 */

.mw-prompt-question__editor-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: calc((var(--space-8) + var(--space-2)) * -1) 0;
  padding: calc(var(--space-8) + var(--space-2)) 0;
  border: 0;
  background-color: var(--opacity-black-0);
  color: var(--text-primary);
  resize: none;
  outline: none;
  field-sizing: content;
  font-family: var(--body-large-medium-font-family);
  font-weight: var(--body-large-medium-font-weight);
  font-size: var(--body-large-medium-font-size);
  line-height: var(--body-large-medium-line-height);
  letter-spacing: var(--body-large-medium-letter-spacing);
}

.mw-prompt-question__editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
}

/* ── 어두운 테마의 대비 ──
   파일 칩의 면은 어두운 테마에서 밝은 회색이라 형식 글자와 실패한 파일 이름의 --text-tertiary가 3.3:1 · 2.2:1이에요.
   형식은 --text-secondary로, 실패한 파일 이름은 본문색으로 써요 (foundations/accessibility 대비). 밝은 테마는 그대로예요. */

[data-theme="dark"] .mw-prompt-input__file-meta {
  color: var(--text-secondary);
}

[data-theme="dark"] .mw-prompt-input__file--error .mw-prompt-input__file-name {
  color: var(--text-primary);
}

/* ── PromptOutput ── */
/* Prompt Output — Moonwave UX extra component */

/* AI가 만든 답을 담는 영역이에요. 위에서부터 Tab(키트의 mw-tab) → Response → Source → Feedback → Suggestion 순서예요.
   흰 면(--surface-primary)을 쓰니까 회색 배경(agent 모드) 위에 올려요. 데스크톱은 --desktop을 붙여요. */

.mw-prompt-output {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  color: var(--text-primary);
}

/* ── Response: 일반 글과 Markdown을 그대로 그려요 ── */

.mw-prompt-output__response {
  min-width: 0;
  color: var(--text-primary);
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-family: var(--body-reading-large-medium-font-family);
  font-weight: var(--body-reading-large-medium-font-weight);
  font-size: var(--body-reading-large-medium-font-size);
  line-height: var(--body-reading-large-medium-line-height);
  letter-spacing: var(--body-reading-large-medium-letter-spacing);
}

/* 간격: 제목 ↔ 본문 8, 본문 ↔ 목록 12, 구분선은 위아래 같은 여백 */

.mw-prompt-output__response > * {
  margin: 0;
}

.mw-prompt-output__response > * + * {
  margin-top: var(--space-12);
}

.mw-prompt-output__response > * + :is(h1, h2, h3, h4) {
  margin-top: var(--space-24);
}

.mw-prompt-output__response > :is(h1, h2, h3, h4) + * {
  margin-top: var(--space-8);
}

.mw-prompt-output__response > hr {
  height: 0;
  margin: var(--space-20) 0;
  border: 0;
  border-top: var(--border-width-1) solid var(--border-secondary);
}

.mw-prompt-output__response > hr + * {
  margin-top: 0;
}

.mw-prompt-output__response h1 {
  font-family: var(--title-large-bold-font-family);
  font-weight: var(--title-large-bold-font-weight);
  font-size: var(--title-large-bold-font-size);
  line-height: var(--title-large-bold-line-height);
  letter-spacing: var(--title-large-bold-letter-spacing);
}

.mw-prompt-output__response h2 {
  font-family: var(--title-medium-bold-font-family);
  font-weight: var(--title-medium-bold-font-weight);
  font-size: var(--title-medium-bold-font-size);
  line-height: var(--title-medium-bold-line-height);
  letter-spacing: var(--title-medium-bold-letter-spacing);
}

.mw-prompt-output__response :is(h3, h4) {
  font-family: var(--title-small-bold-font-family);
  font-weight: var(--title-small-bold-font-weight);
  font-size: var(--title-small-bold-font-size);
  line-height: var(--title-small-bold-line-height);
  letter-spacing: var(--title-small-bold-letter-spacing);
}

.mw-prompt-output__response :is(strong, b) {
  font-weight: var(--font-weight-bold);
}

.mw-prompt-output__response :is(del, s) {
  color: var(--text-tertiary);
}

/* 목록: 글머리는 단계와 상관없이 검은 원이고, 단계마다 같은 폭(모바일 24 · 데스크톱 28)만큼 들여써요 */

.mw-prompt-output__response :is(ul, ol) {
  margin-bottom: 0;
  padding-left: var(--space-24);
}

.mw-prompt-output__response ul {
  list-style: disc;
}

.mw-prompt-output__response ol {
  list-style: decimal;
}

.mw-prompt-output__response li + li,
.mw-prompt-output__response li > :is(ul, ol) {
  margin-top: var(--space-4);
}

.mw-prompt-output__response li::marker {
  color: var(--text-primary);
}

.mw-prompt-output--desktop .mw-prompt-output__response :is(ul, ol) {
  padding-left: calc(var(--space-24) + var(--space-4));
}

/* 체크 목록: 글머리 대신 체크박스를 둬요 */

.mw-prompt-output__response li:has(> input[type="checkbox"]) {
  list-style: none;
  margin-left: calc(var(--space-24) * -1);
}

.mw-prompt-output--desktop .mw-prompt-output__response li:has(> input[type="checkbox"]) {
  margin-left: calc((var(--space-24) + var(--space-4)) * -1);
}

.mw-prompt-output__response input[type="checkbox"] {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: var(--size-16);
  height: var(--size-16);
  margin: 0 var(--space-8) 0 0;
  border: var(--border-width-1) solid var(--border-inverse);
  border-radius: var(--radius-4);
  background-color: var(--surface-primary);
  vertical-align: calc(var(--space-2) * -1);
  -webkit-appearance: none;
  appearance: none;
}

.mw-prompt-output__response input[type="checkbox"]:checked {
  background-color: var(--fill-primary-default);
}

.mw-prompt-output__response input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: var(--border-width-1);
  left: var(--space-4);
  width: var(--space-4);
  height: var(--space-8);
  border: solid var(--icon-inverse);
  border-width: 0 var(--border-width-2) var(--border-width-2) 0;
  transform: rotate(45deg);
}

.mw-prompt-output__response blockquote {
  padding-left: var(--space-12);
  border-left: var(--space-4) solid var(--border-disabled);
  color: var(--text-secondary);
}

.mw-prompt-output__response a {
  color: var(--text-link-default);
  text-decoration: underline;
  text-underline-offset: var(--space-2);
}

@media (hover: hover) {
  .mw-prompt-output__response a:hover {
    color: var(--text-link-hover);
  }
}

.mw-prompt-output__response a:active {
  color: var(--text-link-pressed);
}

.mw-prompt-output__response a:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
  border-radius: var(--radius-2);
}

/* Inline Code */

.mw-prompt-output__response :not(pre) > code {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-4);
  background-color: var(--fill-secondary-default);
  color: var(--text-primary);
  font-family: var(--mw-font-mono, ui-monospace, monospace);
  font-size: 0.875em;
}

/* Table: 머리줄은 옅은 회색, 본문은 흰 면, 글은 왼쪽 정렬 */

.mw-prompt-output__response table {
  width: 100%;
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-12);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background-color: var(--surface-primary);
  table-layout: fixed;
  font-family: var(--body-medium-medium-font-family);
  font-weight: var(--body-medium-medium-font-weight);
  font-size: var(--body-medium-medium-font-size);
  line-height: var(--body-medium-medium-line-height);
  letter-spacing: var(--body-medium-medium-letter-spacing);
}

/* 줄 높이는 표의 세 단계 가운데 촘촘(40px)이에요 (patterns/data-display 표). 글이 두 줄이 되면 줄이 그만큼 늘어나요. */
.mw-prompt-output__response :is(th, td) {
  height: calc(var(--size-20) * 2);
  padding: var(--space-8) var(--space-16);
  border-right: var(--border-width-1) solid var(--border-secondary);
  border-bottom: var(--border-width-1) solid var(--border-secondary);
  text-align: left;
  vertical-align: top;
}

.mw-prompt-output__response th {
  background-color: var(--fill-secondary-default);
  font-weight: var(--font-weight-medium);
}

.mw-prompt-output__response :is(th, td):last-child {
  border-right: 0;
}

.mw-prompt-output__response tbody tr:last-child > td,
.mw-prompt-output__response table:not(:has(tbody)) tr:last-child > td {
  border-bottom: 0;
}

/* ── Generating: 지금 막 쓰인 꼬리 글자가 회색으로 옅어져요 ── */

.mw-prompt-output__tail {
  color: var(--icon-tertiary);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mw-prompt-output__tail {
    background-image: linear-gradient(90deg, var(--text-primary), var(--icon-tertiary));
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--opacity-black-0);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

/* ── Citation: 문장 끝에 붙는 작은 알약 ── */

.mw-prompt-output__citation {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  box-sizing: border-box;
  margin: 0 0 0 var(--space-4);
  padding: var(--space-2) var(--space-8);
  border: 0;
  border-radius: var(--radius-circle);
  background-color: var(--surface-primary);
  color: var(--text-secondary);
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out),
    color var(--motion-duration-medium) var(--motion-easing-ease-out);
  font-family: var(--caption-medium-semibold-font-family);
  font-weight: var(--caption-medium-semibold-font-weight);
  font-size: var(--caption-medium-semibold-font-size);
  line-height: var(--caption-medium-semibold-line-height);
  letter-spacing: var(--caption-medium-semibold-letter-spacing);
}

.mw-prompt-output__citation::after {
  content: "";
  position: absolute;
  inset: calc(var(--space-12) * -1) calc(var(--space-2) * -1);
}

.mw-prompt-output__citation-count {
  color: var(--text-tertiary);
}

/* 문단이나 목록 아래 새 줄에 놓을 때: 위로 4. 목록 아래에서는 글 시작 위치(24 · 28)에 맞춰요 */

.mw-prompt-output__citation--block {
  display: flex;
  width: fit-content;
  margin: var(--space-4) 0 0;
}

.mw-prompt-output__citation--indent {
  margin-left: var(--space-24);
}

.mw-prompt-output--desktop .mw-prompt-output__citation--indent {
  margin-left: calc(var(--space-24) + var(--space-4));
}

@media (hover: hover) {
  .mw-prompt-output__citation:hover {
    background-color: var(--fill-primary-hover);
    color: var(--text-inverse);
  }

  .mw-prompt-output__citation:hover .mw-prompt-output__citation-count {
    color: var(--text-inverse);
  }
}

.mw-prompt-output__citation:active,
.mw-prompt-output__citation[aria-expanded="true"] {
  background-color: var(--surface-inverse);
  color: var(--text-inverse);
}

.mw-prompt-output__citation:active .mw-prompt-output__citation-count,
.mw-prompt-output__citation[aria-expanded="true"] .mw-prompt-output__citation-count {
  color: var(--text-inverse);
}

.mw-prompt-output__citation:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
}

/* Citation Popover(데스크톱): 출처 이름 → 제목 1줄 → 설명 2줄. 여러 개면 위에 ‹ 1 / 2 › */

.mw-prompt-output__popover {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-sizing: border-box;
  width: 320px;
  max-width: 100%;
  padding: var(--space-16);
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-12);
  background-color: var(--surface-floating);
  box-shadow: var(--shadow-2);
  color: var(--text-primary);
  text-align: left;
  white-space: normal;
}

.mw-prompt-output__popover-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: calc(var(--space-8) * -1) calc(var(--space-8) * -1) var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width-1) solid var(--border-secondary);
  color: var(--text-secondary);
  font-family: var(--label-small-medium-font-family);
  font-weight: var(--label-small-medium-font-weight);
  font-size: var(--label-small-medium-font-size);
  line-height: var(--label-small-medium-line-height);
  letter-spacing: var(--label-small-medium-letter-spacing);
}

.mw-prompt-output__popover-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--fill-tertiary-default);
  color: var(--icon-primary);
  cursor: pointer;
  outline: none;
}

.mw-prompt-output__popover-nav svg {
  width: var(--size-20);
  height: var(--size-20);
}

@media (hover: hover) {
  .mw-prompt-output__popover-nav:hover:not(:disabled) {
    background-color: var(--fill-tertiary-hover);
  }
}

.mw-prompt-output__popover-nav:active:not(:disabled) {
  background-color: var(--fill-tertiary-pressed);
}

.mw-prompt-output__popover-nav:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: calc(var(--border-width-2) * -1);
}

.mw-prompt-output__popover-nav:disabled {
  color: var(--icon-disabled);
  cursor: not-allowed;
}

.mw-prompt-output__popover-origin {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--text-secondary);
  font-family: var(--caption-medium-medium-font-family);
  font-weight: var(--caption-medium-medium-font-weight);
  font-size: var(--caption-medium-medium-font-size);
  line-height: var(--caption-medium-medium-line-height);
  letter-spacing: var(--caption-medium-medium-letter-spacing);
}

.mw-prompt-output__popover-title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--body-medium-bold-font-family);
  font-weight: var(--body-medium-bold-font-weight);
  font-size: var(--body-medium-bold-font-size);
  line-height: var(--body-medium-bold-line-height);
  letter-spacing: var(--body-medium-bold-letter-spacing);
}

.mw-prompt-output__popover-desc {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--text-tertiary);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-family: var(--body-small-medium-font-family);
  font-weight: var(--body-small-medium-font-weight);
  font-size: var(--body-small-medium-font-size);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
}

/* ── Source: 답 끝에 두는 버튼. 로고는 3개까지 겹쳐요 ── */

.mw-prompt-output__source {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-8);
  box-sizing: border-box;
  min-height: 44px;
  margin: 0;
  padding: var(--space-8) var(--space-16) var(--space-8) var(--space-12);
  border: 0;
  border-radius: var(--radius-circle);
  background-color: var(--surface-primary);
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
  font-family: var(--body-small-medium-font-family);
  font-weight: var(--body-small-medium-font-weight);
  font-size: var(--body-small-medium-font-size);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
}

@media (hover: hover) {
  .mw-prompt-output__source:hover {
    background-color: var(--fill-tertiary-hover);
  }
}

/* 눌린 면은 어두운 테마에서 밝은 회색이라 --text-secondary로는 2.9:1이에요. 눌린 동안은 본문색으로 써요. */
.mw-prompt-output__source:active,
.mw-prompt-output__source[aria-expanded="true"] {
  color: var(--text-primary);
  background-color: var(--fill-tertiary-pressed);
}

.mw-prompt-output__source:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
}

.mw-prompt-output__logos {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
}

/* 출처 로고: 둥근 자리에 서비스 머리글자나 아이콘을 넣어요 */

.mw-prompt-output__logo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--size-20);
  height: var(--size-20);
  overflow: hidden;
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-circle);
  background-color: var(--surface-primary);
  color: var(--text-secondary);
  font-family: var(--label-xsmall-bold-font-family);
  font-weight: var(--label-xsmall-bold-font-weight);
  font-size: var(--label-xsmall-bold-font-size);
  line-height: 1;
  letter-spacing: var(--label-xsmall-bold-letter-spacing);
}

.mw-prompt-output__logo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mw-prompt-output__logo > svg {
  width: var(--size-12);
  height: var(--size-12);
}

.mw-prompt-output__logos > .mw-prompt-output__logo + .mw-prompt-output__logo {
  margin-left: calc(var(--space-4) * -1);
}

/* ── Feedback Button: 복사 · 좋아요 · 싫어요 · 공유 · 수정 · 더보기 ── */

.mw-prompt-output__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 0 calc(var(--space-12) * -1);
  padding: 0;
  list-style: none;
}

.mw-prompt-output__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--fill-tertiary-default);
  color: var(--icon-secondary);
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out),
    color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-prompt-output__action svg {
  display: block;
  width: var(--size-20);
  height: var(--size-20);
}

@media (hover: hover) {
  .mw-prompt-output__action:hover:not(:disabled) {
    background-color: var(--fill-tertiary-hover);
  }
}

.mw-prompt-output__action:active:not(:disabled),
.mw-prompt-output__action[aria-expanded="true"] {
  background-color: var(--fill-tertiary-pressed);
}

.mw-prompt-output__action[aria-pressed="true"] {
  color: var(--icon-primary);
}

.mw-prompt-output__action:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: calc(var(--border-width-2) * -1);
}

.mw-prompt-output__action:disabled {
  color: var(--icon-disabled);
  cursor: not-allowed;
}

/* ── Suggestion: 추천 대화 ── */

.mw-prompt-output__suggestions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mw-prompt-output__suggestions-label {
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--label-small-medium-font-family);
  font-weight: var(--label-small-medium-font-weight);
  font-size: var(--label-small-medium-font-size);
  line-height: var(--label-small-medium-line-height);
  letter-spacing: var(--label-small-medium-letter-spacing);
}

.mw-prompt-output__suggestion {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: var(--space-8) var(--space-16);
  border: 0;
  border-radius: var(--radius-16);
  background-color: var(--surface-primary);
  color: var(--text-secondary);
  text-align: left;
  word-break: keep-all;
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
  font-family: var(--body-medium-medium-font-family);
  font-weight: var(--body-medium-medium-font-weight);
  font-size: var(--body-medium-medium-font-size);
  line-height: var(--body-medium-medium-line-height);
  letter-spacing: var(--body-medium-medium-letter-spacing);
}

@media (hover: hover) {
  .mw-prompt-output__suggestion:hover {
    background-color: var(--fill-tertiary-hover);
  }
}

.mw-prompt-output__suggestion:active {
  background-color: var(--fill-tertiary-pressed);
}

.mw-prompt-output__suggestion:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
}

/* ── Code Block: 머리줄(언어 이름 · 복사) + 본문 ── */

.mw-prompt-output__code {
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--radius-12);
  background-color: var(--surface-primary);
  color: var(--text-primary);
}

.mw-prompt-output__code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: 44px;
  padding: 0 var(--space-4) 0 var(--space-16);
  border-bottom: var(--border-width-1) solid var(--border-secondary);
}

.mw-prompt-output__code-lang {
  font-family: var(--label-small-bold-font-family);
  font-weight: var(--label-small-bold-font-weight);
  font-size: var(--label-small-bold-font-size);
  line-height: var(--label-small-bold-line-height);
  letter-spacing: var(--label-small-bold-letter-spacing);
}

.mw-prompt-output__code-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  box-sizing: border-box;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--fill-tertiary-default);
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
  font-family: var(--label-small-medium-font-family);
  font-weight: var(--label-small-medium-font-weight);
  font-size: var(--label-small-medium-font-size);
  line-height: var(--label-small-medium-line-height);
  letter-spacing: var(--label-small-medium-letter-spacing);
}

.mw-prompt-output__code-copy svg {
  width: var(--size-16);
  height: var(--size-16);
}

@media (hover: hover) {
  .mw-prompt-output__code-copy:hover {
    background-color: var(--fill-tertiary-hover);
  }
}

.mw-prompt-output__code-copy:active {
  background-color: var(--fill-tertiary-pressed);
}

.mw-prompt-output__code-copy:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: calc(var(--border-width-2) * -1);
}

/* 모바일은 긴 줄을 접어서 보여 주고, 데스크톱은 한 줄로 두고 옆으로 밀어요 */

.mw-prompt-output__code-body {
  margin: 0;
  padding: var(--space-16);
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
  font-family: var(--mw-font-mono, ui-monospace, monospace);
  font-size: var(--font-size-14);
  line-height: var(--line-height-reading-158);
}

.mw-prompt-output__code-body > code {
  font: inherit;
}

.mw-prompt-output--desktop .mw-prompt-output__code-body {
  white-space: pre;
  overflow-wrap: normal;
}

/* 코드 면은 옅은 회색이라 토큰 색 그대로는 4.1~4.4:1이에요. 본문색 쪽으로 조금 물려 4.5:1을 넘겨요 (어두운 테마에서는 밝아져요). */
.mw-prompt-output__token--keyword {
  color: color-mix(in srgb, var(--text-link-default) 75%, var(--text-primary));
}

.mw-prompt-output__token--string {
  color: color-mix(in srgb, var(--text-accent-secondary) 75%, var(--text-primary));
}

.mw-prompt-output__token--function {
  color: color-mix(in srgb, var(--text-feedback-critical) 75%, var(--text-primary));
}

.mw-prompt-output__token--comment {
  color: var(--text-tertiary);
}

/* ── Image / Video Output ── */

.mw-prompt-output__media {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-16);
  background-color: var(--surface-primary);
  aspect-ratio: 1 / 1;
}

.mw-prompt-output__media > :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mw-prompt-output__media--landscape {
  aspect-ratio: 3 / 2;
}

.mw-prompt-output__media--video {
  aspect-ratio: 16 / 9;
}

/* 데스크톱의 그림은 본문 폭의 일부만 써요 */

.mw-prompt-output--desktop .mw-prompt-output__media--landscape {
  width: 64%;
}

/* 만드는 중: 스피너 대신 위에서부터 그림이 흐릿하게 드러나요 */

.mw-prompt-output__media--loading {
  background-color: var(--surface-secondary);
}

.mw-prompt-output__media--loading > * {
  filter: blur(var(--space-8));
  -webkit-mask-image: linear-gradient(180deg, var(--static-black) 0%, var(--opacity-black-0) 100%);
  mask-image: linear-gradient(180deg, var(--static-black) 0%, var(--opacity-black-0) 100%);
  -webkit-mask-size: 100% 70%;
  mask-size: 100% 70%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@keyframes mw-prompt-output-reveal {
  from {
    -webkit-mask-size: 100% 30%;
    mask-size: 100% 30%;
  }
  to {
    -webkit-mask-size: 100% 110%;
    mask-size: 100% 110%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .mw-prompt-output__media--loading > * {
    animation: mw-prompt-output-reveal calc(var(--motion-duration-loop) * 2) var(--motion-easing-ease-in-out) infinite alternate;
  }
}

/* 재생 버튼: 썸네일 한가운데 */

.mw-prompt-output__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-56);
  height: var(--size-56);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: var(--opacity-black-60);
  color: var(--static-white);
  cursor: pointer;
  outline: none;
  transform: translate(-50%, -50%);
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-prompt-output__play svg {
  width: var(--size-24);
  height: var(--size-24);
}

@media (hover: hover) {
  .mw-prompt-output__play:hover {
    background-color: var(--opacity-black-75);
  }
}

.mw-prompt-output__play:active {
  background-color: var(--opacity-black-85);
}

.mw-prompt-output__play:focus-visible {
  outline: var(--border-width-2) solid var(--static-white);
  outline-offset: 2px;
}

/* ── File Output: 문서 아이콘 · 이름과 형식 | 용량 · 내려받기 ── */

.mw-prompt-output__file {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  box-sizing: border-box;
  width: 100%;
  min-height: 64px;
  padding: var(--space-8) var(--space-4) var(--space-8) var(--space-16);
  border-radius: var(--radius-12);
  background-color: var(--surface-primary);
  color: var(--text-primary);
}

.mw-prompt-output--desktop .mw-prompt-output__file {
  width: 320px;
  max-width: 100%;
}

.mw-prompt-output__file > svg {
  flex-shrink: 0;
  width: var(--size-24);
  height: var(--size-24);
  color: var(--icon-primary);
}

.mw-prompt-output__file-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.mw-prompt-output__file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--body-medium-bold-font-family);
  font-weight: var(--body-medium-bold-font-weight);
  font-size: var(--body-medium-bold-font-size);
  line-height: var(--body-medium-bold-line-height);
  letter-spacing: var(--body-medium-bold-letter-spacing);
}

.mw-prompt-output__file-meta {
  display: flex;
  align-items: center;
  color: var(--text-tertiary);
  font-family: var(--caption-medium-medium-font-family);
  font-weight: var(--caption-medium-medium-font-weight);
  font-size: var(--caption-medium-medium-font-size);
  line-height: var(--caption-medium-medium-line-height);
  letter-spacing: var(--caption-medium-medium-letter-spacing);
}

.mw-prompt-output__file-meta > span + span {
  margin-left: var(--space-8);
  padding-left: var(--space-8);
  border-left: var(--border-width-1) solid var(--border-secondary);
  line-height: 1;
}

.mw-prompt-output__file-download {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--fill-tertiary-default);
  color: var(--icon-primary);
  cursor: pointer;
  outline: none;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-prompt-output__file-download svg {
  width: var(--size-24);
  height: var(--size-24);
}

@media (hover: hover) {
  .mw-prompt-output__file-download:hover {
    background-color: var(--fill-tertiary-hover);
  }
}

.mw-prompt-output__file-download:active {
  background-color: var(--fill-tertiary-pressed);
}

.mw-prompt-output__file-download:focus-visible {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: calc(var(--border-width-2) * -1);
}

/* ── 한계 안내: 답 바로 아래에 붙여요 ── */

.mw-prompt-output__caution {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  box-sizing: border-box;
  margin: 0;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-12);
  background-color: var(--surface-primary);
  color: var(--text-secondary);
  word-break: keep-all;
  font-family: var(--body-small-medium-font-family);
  font-weight: var(--body-small-medium-font-weight);
  font-size: var(--body-small-medium-font-size);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
}

.mw-prompt-output__caution > svg {
  flex-shrink: 0;
  width: var(--size-20);
  height: var(--size-20);
  color: var(--icon-feedback-critical);
}

/* ── 어두운 테마의 대비 ──
   출처 팝오버는 떠 있는 면(--surface-floating) 위라 설명의 --text-tertiary가 3.3:1이에요. 한 단계 진한 --text-secondary로 써요. */

[data-theme="dark"] .mw-prompt-output__popover-desc {
  color: var(--text-secondary);
}

/* ── SelectButton ── */
/* Select Button — Moonwave UX extra component */

/* 구조: label(button) > input + [image] + title + [body] + [check] 예요.
   하나만 고르면 radio, 여러 개 고르면 checkbox 입력을 넣어요. 스크립트 없이 선택돼요.
   button 요소로 만들 때는 aria-checked 나 aria-pressed 로 선택을 알려요. */

/* Group: 칸 너비를 똑같이 나눠요 */

.mw-select-button-group {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-8);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

.mw-select-button-group--col-2 {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mw-select-button-group--col-3 {
  grid-auto-flow: row;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mw-select-button-group--stack {
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr);
}

/* Container: 테두리는 안쪽 그림자로 그려서 두께가 바뀌어도 자리가 밀리지 않아요 */

.mw-select-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: var(--space-12) var(--space-16);
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--surface-primary);
  box-shadow: inset 0 0 0 var(--border-width-1) var(--border-primary);
  color: var(--text-primary);
  font: inherit;
  text-align: center;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition:
    box-shadow var(--motion-duration-medium) var(--motion-easing-ease-out),
    background-color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

/* 입력은 보이지 않게 버튼 전체를 덮어요 */

.mw-select-button__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: inherit;
  opacity: 0;
  cursor: inherit;
}

/* Title Text · Body Text: 각각 한 줄까지예요 */

.mw-select-button__title,
.mw-select-button__body {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mw-select-button__title {
  color: var(--text-primary);
  font-family: var(--body-medium-medium-font-family);
  font-weight: var(--body-medium-medium-font-weight);
  font-size: var(--body-medium-medium-font-size);
  line-height: var(--body-medium-medium-line-height);
  letter-spacing: var(--body-medium-medium-letter-spacing);
}

.mw-select-button__body {
  color: var(--text-tertiary);
  font-family: var(--body-small-medium-font-family);
  font-weight: var(--body-small-medium-font-weight);
  font-size: var(--body-small-medium-font-size);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
}

/* Image: 동그란 자리예요. 사진이나 아이콘을 넣어요 */

.mw-select-button__image {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--size-48);
  height: var(--size-48);
  overflow: hidden;
  border-radius: var(--radius-circle);
  background-color: var(--fill-secondary-default);
  color: var(--icon-secondary);
}

.mw-select-button__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mw-select-button__image svg {
  display: block;
  width: var(--size-24);
  height: var(--size-24);
}

.mw-select-button__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
}

/* Check: Horizontal 에서만 써요. 고르지 않았을 때도 옅게 보여요 */

.mw-select-button__check {
  display: inline-flex;
  flex-shrink: 0;
  width: var(--size-24);
  height: var(--size-24);
  color: var(--icon-tertiary);
  transition: color var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-select-button__check svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Vertical: 이미지 · 제목 · 본문을 가운데 정렬로 쌓아요. 제목은 늘 굵어요 */

.mw-select-button--vertical {
  gap: var(--space-4);
  padding: var(--space-20) var(--space-16);
}

.mw-select-button--vertical .mw-select-button__image {
  margin-bottom: var(--space-8);
}

.mw-select-button--vertical .mw-select-button__title,
.mw-select-button--horizontal .mw-select-button__title {
  font-weight: var(--body-medium-bold-font-weight);
}

/* Horizontal: 이미지 · 글 · 체크를 가로로 놓고 글은 왼쪽 정렬이에요 */

.mw-select-button--horizontal {
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  text-align: left;
}

.mw-select-button--horizontal .mw-select-button__text {
  flex: 1;
}

/* Hover · Pressed */

@media (hover: hover) {
  .mw-select-button:hover {
    box-shadow: inset 0 0 0 var(--border-width-1) var(--border-inverse);
  }
}

.mw-select-button:active {
  background-color: var(--background-secondary);
}

/* Active: 고른 상태예요. 테두리가 2px로 굵어지고 그림자가 생겨요 */

.mw-select-button:is(
    .mw-select-button--selected,
    [aria-checked="true"],
    [aria-pressed="true"],
    :has(.mw-select-button__input:checked)
  ) {
  background-color: var(--surface-primary);
  box-shadow:
    inset 0 0 0 var(--border-width-2) var(--border-inverse),
    var(--shadow-2);
}

.mw-select-button:is(
    .mw-select-button--selected,
    [aria-checked="true"],
    [aria-pressed="true"],
    :has(.mw-select-button__input:checked)
  )
  .mw-select-button__title {
  font-weight: var(--body-medium-bold-font-weight);
}

.mw-select-button:is(
    .mw-select-button--selected,
    [aria-checked="true"],
    [aria-pressed="true"],
    :has(.mw-select-button__input:checked)
  )
  .mw-select-button__check {
  color: var(--icon-primary);
}

/* Focus */

.mw-select-button:is(:focus-visible, :has(.mw-select-button__input:focus-visible)) {
  outline: var(--border-width-2) solid var(--border-inverse);
  outline-offset: 2px;
}

/* Disabled */

.mw-select-button:is(
    .mw-select-button--disabled,
    :disabled,
    [aria-disabled="true"],
    :has(.mw-select-button__input:disabled)
  ) {
  background-color: var(--surface-primary);
  box-shadow: inset 0 0 0 var(--border-width-1) var(--border-disabled);
  cursor: not-allowed;
}

.mw-select-button:is(
    .mw-select-button--disabled,
    :disabled,
    [aria-disabled="true"],
    :has(.mw-select-button__input:disabled)
  )
  :is(.mw-select-button__title, .mw-select-button__body) {
  color: var(--text-disabled);
}

.mw-select-button:is(
    .mw-select-button--disabled,
    :disabled,
    [aria-disabled="true"],
    :has(.mw-select-button__input:disabled)
  )
  :is(.mw-select-button__image, .mw-select-button__check) {
  color: var(--icon-disabled);
}

.mw-select-button:is(
    .mw-select-button--disabled,
    :disabled,
    [aria-disabled="true"],
    :has(.mw-select-button__input:disabled)
  )
  .mw-select-button__image {
  background-color: var(--fill-secondary-disabled);
}

.mw-select-button:is(
    .mw-select-button--disabled,
    :disabled,
    [aria-disabled="true"],
    :has(.mw-select-button__input:disabled)
  )
  .mw-select-button__image
  img {
  opacity: 0.4;
}

/* ── Selection ── */
/* Selection Mode — Moonwave UX extra component */

/* 구조: 목록 · 그리드 위에서 길게 누르면 선택 모드가 열려요(patterns/selection-mode).
   - 위쪽 줄(mw-select-bar): 전체 선택 · "N개 선택됨" · 취소. 앱 상단 바 자리를 대신해요.
   - 묶음 머리글(mw-select-group): 날짜 같은 묶음마다 동그라미가 있어서 묶음 전체를 한 번에 골라요.
   - 항목(mw-select-item): 선택 모드에서는 어두워지고 왼쪽 위에 동그라미가 떠요. 고르면 채워진 동그라미에 체크예요.
   - 아래 작업 줄(mw-select-actions): 폰에서는 아래에 뜬 알약, 태블릿 · PC에서는 위쪽 줄 안에 놓여요.
   동그라미는 진짜 체크박스(input[type="checkbox"])예요. 이름은 항목의 이름이고, 색이 아니라 체크 모양으로 말해요. */

/* ── 동그라미 (체크박스) ── */

.mw-select-check {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--size-24);
  height: var(--size-24);
}

.mw-select-check__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.mw-select-check__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: var(--border-width-2) solid var(--static-white);
  border-radius: var(--radius-circle);
  background: transparent;
  color: transparent;
  pointer-events: none;
}

.mw-select-check__mark svg {
  width: var(--size-16);
  height: var(--size-16);
}

.mw-select-check__input:checked + .mw-select-check__mark,
.mw-select-check__input:indeterminate + .mw-select-check__mark {
  border-color: var(--fill-accent-primary-default);
  background: var(--fill-accent-primary-default);
  color: var(--static-white);
}

.mw-select-check__input:focus-visible + .mw-select-check__mark {
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: var(--space-2);
}

/* 모두 같은 모양으로 읽히는 줄 위(바 · 묶음 머리글)의 동그라미는 테두리가 글자색이에요 */
.mw-select-bar .mw-select-check__mark,
.mw-select-group .mw-select-check__mark {
  border-color: var(--icon-secondary);
}

.mw-select-bar .mw-select-check__input:checked + .mw-select-check__mark,
.mw-select-group .mw-select-check__input:checked + .mw-select-check__mark,
.mw-select-bar .mw-select-check__input:indeterminate + .mw-select-check__mark,
.mw-select-group .mw-select-check__input:indeterminate + .mw-select-check__mark {
  border-color: var(--fill-accent-primary-default);
}

/* 일부만 골랐을 때는 체크 대신 가로 선이에요 */
.mw-select-check__input:indeterminate + .mw-select-check__mark svg {
  display: none;
}

.mw-select-check__input:indeterminate + .mw-select-check__mark::after {
  content: "";
  width: var(--space-8);
  height: var(--border-width-2);
  border-radius: var(--radius-4);
  background: currentColor;
}

/* ── 위쪽 줄 ── */

.mw-select-bar {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  min-height: var(--size-56);
  box-sizing: border-box;
  padding: 0 var(--space-16);
  background: var(--surface-primary);
  color: var(--text-primary);
}

.mw-select-bar[hidden] {
  display: none;
}

.mw-select-bar__all {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-8);
  color: var(--text-secondary);
  font-size: var(--font-size-13);
}

.mw-select-bar__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
}

.mw-select-bar__cancel {
  flex: none;
  min-height: var(--size-48);
  margin: 0;
  padding: 0 var(--space-8);
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.mw-select-bar__cancel:focus-visible {
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: var(--space-2);
  border-radius: var(--radius-8);
}

/* ── 묶음 머리글 ── */

.mw-select-group {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: var(--size-48);
  margin: 0;
  padding: var(--space-8) 0;
  color: var(--text-primary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
}

/* 선택 모드가 아닐 때 묶음의 동그라미는 숨어 있어요(자리는 비워 두지 않아요) */
.mw-select-group .mw-select-check {
  display: none;
}

[data-selecting] .mw-select-group .mw-select-check {
  display: inline-flex;
}

/* ── 항목 ── */

.mw-select-item {
  position: relative;
  min-width: 0;
}

/* 항목 안의 동그라미는 이미지 위에 떠요. 선택 모드에서만 보이고, 마우스에서는 올리거나 포커스를 줄 때도 보여요 */
.mw-select-item .mw-select-check {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  z-index: 2;
  opacity: 0;
  transition: opacity var(--motion-duration-short) var(--motion-easing-ease-out);
}

[data-selecting] .mw-select-item .mw-select-check,
.mw-select-item:focus-within .mw-select-check {
  opacity: 1;
}

@media (hover: hover) {
  .mw-select-item:hover .mw-select-check {
    opacity: 1;
  }
}

.mw-select-item__body {
  display: block;
  border-radius: var(--radius-8);
  overflow: hidden;
}

/* 선택 모드에서 안 고른 항목은 살짝 어두워지고, 고른 항목은 그대로 밝아요(둘의 차이는 체크로도 말해요) */
[data-selecting] .mw-select-item__body::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-8);
  background: color-mix(in srgb, var(--static-black) 22%, transparent);
  pointer-events: none;
}

[data-selecting] .mw-select-item[data-selected] .mw-select-item__body::after {
  background: transparent;
  box-shadow: inset 0 0 0 var(--border-width-2) var(--fill-accent-primary-default);
}

/* ── 작업 줄 ── */

.mw-select-actions {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-12);
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-circle);
  background: var(--surface-floating);
  box-shadow: var(--shadow-3);
}

.mw-select-actions[hidden] {
  display: none;
}

.mw-select-actions__button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-width: var(--size-56);
  min-height: var(--size-56);
  box-sizing: border-box;
  margin: 0;
  padding: var(--space-4) var(--space-12);
  border: 0;
  border-radius: var(--radius-16);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
}

.mw-select-actions__button:hover {
  background: var(--fill-secondary-hover);
}

.mw-select-actions__button:focus-visible {
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: var(--space-2);
}

.mw-select-actions__button:disabled {
  color: var(--text-disabled);
  cursor: default;
}

.mw-select-actions__button:disabled:hover {
  background: transparent;
}

/* 폰: 아래에 뜬 알약이에요. 하단 탭이 있으면 그 자리를 덮어요(선택 모드가 끝나면 탭이 돌아와요) */
.mw-select-actions--float {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-16) + env(safe-area-inset-bottom));
  z-index: 70;
  transform: translateX(-50%);
  max-width: calc(100vw - var(--space-32));
}

[data-selecting] .mw-app-tabbar {
  visibility: hidden;
}

/* 태블릿 · PC: 위쪽 줄 안에 한 줄로 놓여요(알약이 아니라 모서리 없는 줄이에요) */
@media (min-width: 601px) {
  .mw-select-actions--float {
    position: static;
    z-index: auto;
    transform: none;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .mw-select-actions--float .mw-select-actions__button {
    flex-direction: row;
    gap: var(--space-8);
    min-height: var(--size-48);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mw-select-item .mw-select-check {
    transition: none;
  }
}

/* 선택 모드가 열린 동안 위쪽 줄이 앱 상단 바를 대신해요. 화면이 상단 바에 hidden을 주면 정말 사라지게 해요 */
.mw-app-top[hidden] {
  display: none;
}

/* ── SortControl ── */
/* Sort Control — Moonwave UX extra component */

/* 구조: 정렬 버튼(trigger) + 오름 · 내림 토글(dir) + 열리는 메뉴(mw-data-menu). 뷰 메뉴(mw-view-menu)도 같은 메뉴 모양을 써요.
   표는 열 머리글을 눌러 정렬하는 것을 그대로 두어요(mw-data-table__header[aria-sort]). 카드와 목록에는 이 부품을 써요.
   1순위와 2순위는 메뉴 안에서 각각 기준 하나와 방향 하나로 골라요. 지금 정렬은 글로(mw-sort-control__status) 늘 말해요. */

.mw-sort-control,
.mw-view-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.mw-sort-control__trigger,
.mw-sort-control__dir,
.mw-view-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--size-48);
  box-sizing: border-box;
  margin: 0;
  padding: 0 var(--space-12);
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-12);
  background: var(--surface-primary);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-15);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
}

.mw-sort-control__trigger b {
  max-width: 10em;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-accent-primary);
  font-weight: var(--font-weight-semibold);
}

.mw-sort-control__dir {
  justify-content: center;
  width: var(--size-48);
  padding: 0;
}

.mw-sort-control__trigger:hover,
.mw-sort-control__dir:hover,
.mw-view-menu__trigger:hover {
  background: var(--fill-secondary-hover);
}

.mw-sort-control__trigger[aria-expanded="true"],
.mw-view-menu__trigger[aria-expanded="true"] {
  border-color: var(--mw-focus);
}

.mw-sort-control__trigger:focus-visible,
.mw-sort-control__dir:focus-visible,
.mw-view-menu__trigger:focus-visible {
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: var(--space-2);
}

/* 방향 아이콘은 뜻이 바뀌면 뒤집혀요: 오름은 위로, 내림은 아래로 (색이 아니라 모양으로 말해요) */
.mw-sort-control__dir svg {
  transition: transform var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-sort-control__dir[data-dir="asc"] svg {
  transform: rotate(180deg);
}

/* 열리는 메뉴 */

.mw-data-menu {
  position: absolute;
  top: calc(100% + var(--space-8));
  right: 0;
  z-index: 40;
  box-sizing: border-box;
  width: max-content;
  min-width: calc(var(--size-56) * 4);
  max-width: min(calc(var(--size-56) * 7), 92vw);
  padding: var(--space-8);
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-12);
  background: var(--surface-floating);
  box-shadow: var(--shadow-3);
}

.mw-data-menu[hidden] {
  display: none;
}

.mw-data-menu__title {
  display: block;
  margin: 0;
  padding: var(--space-8) var(--space-8) var(--space-4);
  color: var(--text-secondary);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
}

.mw-data-menu__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-8) var(--space-8);
}

.mw-data-menu__select {
  min-width: 0;
  min-height: var(--size-48);
  box-sizing: border-box;
  padding: 0 var(--space-12);
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-8);
  background: var(--surface-primary);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-16);
}

.mw-data-menu__select:focus-visible {
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: var(--space-2);
}

.mw-data-menu__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mw-data-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  min-height: var(--size-48);
  box-sizing: border-box;
  margin: 0;
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-8);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-15);
  text-align: left;
  cursor: pointer;
}

.mw-data-menu__item:hover,
.mw-data-menu__item:focus-visible {
  background: var(--fill-secondary-hover);
  outline: none;
}

.mw-data-menu__item[aria-pressed="true"] {
  color: var(--text-accent-primary);
  font-weight: var(--font-weight-semibold);
}

.mw-data-menu__entry {
  display: flex;
  align-items: center;
}

.mw-data-menu__item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mw-data-menu__hint {
  margin: 0;
  padding: var(--space-8);
  color: var(--text-secondary);
  font-size: var(--font-size-13);
}

.mw-data-menu__foot {
  margin-top: var(--space-4);
  padding-top: var(--space-8);
  border-top: var(--border-width-1) solid var(--border-secondary);
}

/* ── 표의 행 펼치기 (mw-data-table 안) ──
   왼쪽 caret 버튼가 아래 상세 줄(mw-row-detail)을 여닫아요. 폰만이 아니라 어느 화면에서나 같아요: 행의 부가정보는 눌러야 보여요. */

.mw-row-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-32);
  height: var(--size-32);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--icon-secondary);
  cursor: pointer;
}

.mw-row-expand:hover {
  background: var(--fill-secondary-hover);
}

.mw-row-expand:focus-visible {
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: var(--space-2);
}

.mw-row-expand svg {
  transition: transform var(--motion-duration-medium) var(--motion-easing-ease-out);
}

.mw-row-expand[aria-expanded="true"] {
  color: var(--text-accent-primary);
}

.mw-row-expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* 상세 줄: 짧은 부가정보(메모, 하위 항목 3~5개). 2단계까지만 들어가요 */

.mw-row-detail {
  padding: var(--space-12) var(--space-16) var(--space-16) calc(var(--space-16) + var(--size-32) + var(--space-8));
  background: var(--surface-secondary);
  border-bottom: var(--border-width-1) solid var(--border-secondary);
}

.mw-row-detail[hidden] {
  display: none;
}

.mw-row-detail__note {
  margin: 0 0 var(--space-8);
  color: var(--text-secondary);
  font-size: var(--font-size-14);
}

.mw-row-detail__items {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mw-row-detail__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--size-32);
  color: var(--text-primary);
  font-size: var(--font-size-14);
}

.mw-row-detail__item .mw-row-expand {
  width: var(--size-24);
  height: var(--size-24);
}

/* 둘째 단계: 한 칸 더 들여 쓰고, 그 아래로는 더 펼치지 않아요 */
.mw-row-detail--nested {
  margin-top: var(--space-4);
  padding: var(--space-8) var(--space-12);
  border: 0;
  border-radius: var(--radius-8);
  background: var(--surface-primary);
}

.mw-row-detail__more {
  margin-top: var(--space-8);
}

@media (max-width: 600px) {
  /* 폰에서는 메뉴가 아래에서 올라오는 시트 모양이에요 */
  .mw-data-menu {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 72;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: var(--space-8) var(--space-16) calc(var(--space-16) + env(safe-area-inset-bottom));
    border-width: var(--border-width-1) 0 0;
    border-radius: var(--mw-radius-sheet) var(--mw-radius-sheet) 0 0;
  }

  .mw-row-detail {
    padding-left: var(--space-16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mw-sort-control__dir svg,
  .mw-row-expand svg {
    transition: none;
  }
}

/* 상세 줄이 들어가는 칸은 여백 없이 상세 줄이 직접 채워요 */
.mw-data-table__cell--detail {
  height: auto;
  padding: 0;
}

/* 보기 방식 (ViewSwitch, patterns/data-view#views): 표 · 카드 · 그리드 칩 묶음이에요. 도구 줄에서 줄어들지 않고,
   칩 안의 아이콘(16px)은 글자 앞에 놓여요 */
.mw-view-switch { flex: none; }
.mw-view-switch .mw-select-chip > svg { flex: none; }

/* ── StatStrip ── */
/* Stat Strip — Moonwave UX extra component */

/* 구조: 줄(mw-stat-strip) > 칸(__item) > 아이콘(__icon) + 몸(__body: 숫자 줄 __value + 이름 __label).
   페이지 맨 위에 가장 중요한 숫자 서너 개를 한 줄로 놓아요. 숫자 옆에는 증감 배지(mw-delta mw-delta--badge)가 와요.
   배지는 ▲▼와 부호, 비교 대상을 글로 말하고 색은 거들 뿐이에요. 칸은 누르는 곳이 아니에요(누르면 통계 타일 mw-stat). */

.mw-stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16) var(--space-32);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mw-stat-strip__item {
  display: flex;
  flex: 1 1 calc(var(--size-48) * 4);
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
}

.mw-stat-strip__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--size-48);
  height: var(--size-48);
  border-radius: var(--radius-circle);
  background: var(--background-secondary);
  color: var(--icon-secondary);
}

.mw-stat-strip__icon svg {
  width: var(--size-20);
  height: var(--size-20);
}

.mw-stat-strip__body {
  min-width: 0;
}

.mw-stat-strip__value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-default-148);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.mw-stat-strip__value small {
  color: var(--text-tertiary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
}

.mw-stat-strip__label {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-13);
  line-height: var(--line-height-default-148);
}

@media (max-width: 600px) {
  .mw-stat-strip {
    flex-direction: column;
    gap: var(--space-12);
  }

  .mw-stat-strip__item {
    flex: none;
  }
}

/* ── Steps ── */
/* Steps — Moonwave UX extra component */

/* 구조: 목록(ol.mw-steps) > 단계(li.mw-steps__item) > 표식(__marker) + 글(__text: 이름 __label + 상태 __state).
   단계가 몇 개고 지금 어디인지 보여 줘요. 단계마다 상태를 글(완료 · 지금 · 다음)로도 말하고,
   표식 모양도 달라요(완료는 체크, 지금은 굵은 고리와 숫자, 다음은 얇은 고리와 숫자, 막힘은 느낌표).
   지금 단계에는 aria-current="step"을 붙여요. 너비가 601px 이상이면 가로(표식 아래에 글)로, 그 아래는 세로(표식 옆에 글)로 놓여요. */

.mw-steps {
  --steps-marker: var(--size-32);
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mw-step;
}

.mw-steps__item {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  min-width: 0;
  counter-increment: mw-step;
}

/* 잇는 선: 이 단계 표식 뒤에서 다음 단계 표식까지. 끝낸 단계 뒤는 실선, 아직은 점선이에요 */
.mw-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--steps-marker) / 2);
  left: calc(var(--steps-marker) + var(--space-8));
  right: var(--space-8);
  border-top: var(--border-width-2) dashed var(--border-primary);
}

.mw-steps__item--done:not(:last-child)::after {
  border-top-style: solid;
  border-top-color: var(--fill-accent-primary-default);
}

.mw-steps__marker {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--steps-marker);
  height: var(--steps-marker);
  box-sizing: border-box;
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-circle);
  background: var(--surface-primary);
  color: var(--text-tertiary);
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.mw-steps__marker::before {
  content: counter(mw-step);
}

.mw-steps__marker svg {
  width: var(--size-16);
  height: var(--size-16);
}

.mw-steps__marker svg + * {
  display: none;
}

/* 표식 안에 아이콘(svg)을 넣으면 숫자는 숨겨요 */
.mw-steps__marker:has(svg)::before,
.mw-steps__marker:has(b)::before {
  content: none;
}

.mw-steps__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding-right: var(--space-8);
}

.mw-steps__label {
  color: var(--text-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-default-148);
}

.mw-steps__state {
  color: var(--text-tertiary);
  font-size: var(--font-size-12);
  line-height: var(--line-height-default-148);
}

.mw-steps__item--done .mw-steps__marker {
  border-color: var(--fill-accent-primary-default);
  background: var(--fill-accent-primary-default);
  color: var(--static-white);
}

.mw-steps__item--todo .mw-steps__label {
  color: var(--text-tertiary);
}

.mw-steps__item--current .mw-steps__marker {
  border: var(--border-width-2) solid var(--fill-accent-primary-default);
  color: var(--text-accent-primary);
  font-weight: var(--font-weight-bold);
}

.mw-steps__item--current .mw-steps__label {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
}

.mw-steps__item--current .mw-steps__state {
  color: var(--text-accent-primary);
  font-weight: var(--font-weight-semibold);
}

.mw-steps__item--error .mw-steps__marker {
  border: var(--border-width-2) solid var(--mw-critical);
  color: var(--mw-critical);
}

.mw-steps__item--error .mw-steps__state {
  color: var(--mw-critical);
  font-weight: var(--font-weight-semibold);
}

/* 좁은 화면: 세로로 놓고 선도 아래로 내려가요 */
@media (max-width: 600px) {
  .mw-steps {
    flex-direction: column;
  }

  .mw-steps__item {
    flex: none;
    flex-direction: row;
    padding-bottom: var(--space-16);
  }

  .mw-steps__item:last-child {
    padding-bottom: 0;
  }

  .mw-steps__item:not(:last-child)::after {
    top: var(--steps-marker);
    right: auto;
    bottom: 0;
    left: calc(var(--steps-marker) / 2 - var(--border-width-1));
    border-top: 0;
    border-left: var(--border-width-2) dashed var(--border-primary);
  }

  .mw-steps__item--done:not(:last-child)::after {
    border-left-style: solid;
    border-left-color: var(--fill-accent-primary-default);
  }
}

/* 위에 한 줄 요약: "3단계 중 2단계" */
.mw-steps__summary {
  margin: 0 0 var(--space-12);
  color: var(--text-secondary);
  font-size: var(--font-size-13);
  font-variant-numeric: tabular-nums;
}

/* ── Table ── */
/* Table — Moonwave UX extra component */

/* 구조: 스크롤 래퍼(mw-table) > table > thead · tbody 예요.
   머리글 행과 본문 행은 같은 여백(위아래 20 · 좌우 24)을 써서 한 줄일 때 높이가 같아요.
   첫 열은 항목 이름 열이에요. 옅은 배경을 깔고 오른쪽에 진한 세로 선을 그어요. */

/* Container: 화면보다 넓으면 가로로 밀어서 봐요 */

.mw-table {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  outline: none;
}

.mw-table:focus-visible {
  outline: var(--border-width-2) solid var(--mw-focus);
  outline-offset: var(--space-2);
}

.mw-table__table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-top: var(--border-width-1) solid var(--border-inverse);
  background-color: var(--surface-primary);
}

/* Header Row · Body Row: 칸 여백과 글자는 모두 같아요 */

.mw-table__header,
.mw-table__row-header,
.mw-table__cell {
  box-sizing: border-box;
  padding: var(--space-20) var(--space-24);
  border-bottom: var(--border-width-1) solid var(--border-secondary);
  font-family: var(--body-small-medium-font-family);
  font-size: var(--body-small-medium-font-size);
  font-weight: var(--body-small-medium-font-weight);
  line-height: var(--body-small-medium-line-height);
  letter-spacing: var(--body-small-medium-letter-spacing);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.mw-table__header {
  background-color: var(--background-secondary);
  color: var(--text-tertiary);
}

/* 첫 열: 항목 이름이에요. 내용만큼만 좁게 잡고 나머지 열이 남은 너비를 써요 */

.mw-table__row-header {
  width: 1%;
  background-color: var(--background-secondary);
  color: var(--text-secondary);
}

.mw-table__header:first-child,
.mw-table__row-header {
  border-right: var(--border-width-1) solid var(--border-inverse);
}

/* Body Text */

.mw-table__cell {
  background-color: var(--surface-primary);
  color: var(--text-secondary);
}

/* 숫자 열: 머리글과 값 모두 오른쪽에 맞추고 자릿수를 세로로 맞춰요 */

.mw-table__header--numeric,
.mw-table__cell--numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Moonwave 보정 ── */
/* 생성된 컴포넌트 스타일에서 Moonwave가 바로잡은 부분이에요. 원본을 고치지 않고 뒤에 덧붙여요. */

/* 포커스 — 키보드로 닿으면 2px 고리를 보여요. 원본은 고리를 지우기만 해서 어디에 있는지 알 수 없었어요. */
[class*='mw-']:focus-visible { outline: var(--border-width-2) solid var(--mw-focus); outline-offset: 2px; }
/* 글자를 받는 칸은 감싸는 상자가 포커스를 보여 줘요. 고리를 겹치지 않아요. */
.mw-textfield__input:focus-visible,
.mw-textarea__textarea:focus-visible,
.mw-search__input:focus-visible,
.mw-filter-bar__input:focus-visible,
.mw-textfield__formatted-segment-input:focus-visible,
.mw-prompt-input__textarea:focus-visible { outline: none; }
/* Prompt Input — the field is the box that shows the focus */
.mw-prompt-input__field:has(.mw-prompt-input__textarea:focus-visible) { outline: var(--border-width-2) solid var(--mw-focus); outline-offset: 2px; }
.mw-textfield:has(:focus-visible):not(.mw-textfield--focused),
.mw-textarea:has(:focus-visible):not(.mw-textarea--focused),
.mw-search:has(.mw-search__input:focus-visible):not(.mw-search--focused) { outline: var(--border-width-2) solid var(--mw-focus); outline-offset: 2px; }

/* 체크박스와 라디오 — 포커스를 받는 것은 숨겨진 input이라, 눈에 보이는 상자에 고리를 그려요 */
.mw-checkbox:has(.mw-checkbox__input:focus-visible) .mw-checkbox__box,
.mw-radiobutton:has(.mw-radiobutton__input:focus-visible) .mw-radiobutton__circle { outline: var(--border-width-2) solid var(--mw-focus); outline-offset: 2px; }

/* Primary 버튼의 아이콘 — 글자색을 따라가요. 원본은 늘 흰색이라 어두운 테마의 밝은 버튼에서 보이지 않았어요. */
.mw-button--primary svg,
.mw-button--primary .mw-button__icon,
.mw-button--primary:disabled svg,
.mw-button--primary:disabled .mw-button__icon { color: inherit; }

/* 링크로 쓴 버튼 — <a class="mw-button">도 버튼처럼 보여요 */
a.mw-button, a.mw-text-button { text-decoration: none; }

/* 스낵바의 행동 버튼 — 스낵바 글자색을 따라가요. 원본은 버튼만 어두운 테마로 고정해서, 어두운 화면(밝은 스낵바)에서 글자가 사라졌어요. */
.mw-snackbar__action .mw-text-button,
.mw-snackbar__action .mw-text-button span { color: inherit; text-decoration-color: currentColor; border-color: currentColor; }

/* 버튼 높이 — 높이 토큰(48 · 44 · 32)을 실제로 적용해요. 원본은 안쪽 여백과 줄 높이만 써서 46.2 · 39.2 · 31.2px로 그려졌고,
   윤곽 버튼은 테두리만큼 더 커서 나란히 놓으면 어긋났어요. Medium이 44px이 되어 누르는 영역 기준도 채워요. */
.mw-button { box-sizing: border-box; }
.mw-button--large { min-height: var(--button-container-large-default-height); }
.mw-button--medium { min-height: var(--button-container-medium-default-height); }
.mw-button--small { min-height: var(--button-container-small-default-height); }

/* 강조 버튼의 글자 — 강조 면 위의 글자색(--mw-on-accent)을 써요. 어두운 테마의 강조색은 밝은 하늘빛이라 흰 글자가 보이지 않아요. */
.mw-button--accent-primary:not(:disabled),
.mw-button--accent-primary:not(:disabled) svg,
.mw-button--accent-primary:not(:disabled) .mw-button__icon { color: var(--mw-on-accent); }

/* 옅은 윤곽 버튼 — Tertiary (Subtle) · Tertiary (Subtle-Filled). 기준에는 있는데 생성된 스타일에는 클래스가 없었어요.
   윤곽은 카드와 같은 --border-secondary예요(Tertiary는 --border-primary). 줄마다 되풀이되는 보조 버튼처럼 진한 윤곽이
   여럿 쌓이는 자리에 써요. 회색 면 위에서는 윤곽이 묻히니, 흰 바탕을 채운 Subtle-Filled를 써요. */
.mw-button--tertiary-subtle,
.mw-button--tertiary-subtle-filled { background-color: var(--button-fill-tertiary-default-fill); color: var(--button-text-color-tertiary-default-fill); border: var(--border-width-1) solid var(--border-secondary); }
.mw-button--tertiary-subtle-filled { background-color: var(--surface-primary); }
.mw-button--tertiary-subtle:hover:not(:disabled),
.mw-button--tertiary-subtle-filled:hover:not(:disabled) { background-color: var(--button-fill-tertiary-hover-fill); }
.mw-button--tertiary-subtle:active:not(:disabled),
.mw-button--tertiary-subtle-filled:active:not(:disabled) { background-color: var(--button-fill-tertiary-pressed-fill); }
.mw-button--tertiary-subtle:disabled,
.mw-button--tertiary-subtle-filled:disabled { color: var(--button-text-color-tertiary-disabled-fill); }
.mw-button--tertiary-subtle svg,
.mw-button--tertiary-subtle .mw-button__icon,
.mw-button--tertiary-subtle-filled svg,
.mw-button--tertiary-subtle-filled .mw-button__icon { color: var(--button-icon-color-tertiary-default-fill); }
.mw-button--tertiary-subtle:disabled svg,
.mw-button--tertiary-subtle:disabled .mw-button__icon,
.mw-button--tertiary-subtle-filled:disabled svg,
.mw-button--tertiary-subtle-filled:disabled .mw-button__icon { color: var(--button-icon-color-tertiary-disabled-fill); }

/* 누르는 영역 — 보이는 크기가 44px보다 작은 부품은 손가락으로 쓰는 기기에서 누르는 영역만 --mw-touch(44px)로 넓혀요
   (foundations/spacing-layout 누르는 영역과 밀도). 보이는 모양과 자리는 그대로예요. 원본에는 이 영역이 없어서 Small 버튼(32px),
   칩(36px), 글자 버튼(20px), 스위치(28px), 입력 칸 안의 글자 줄(22px)이 손가락보다 작았어요.
   Input 칩의 지우기(X, 16px)도 같아요. 영역이 없어서 서비스가 키트의 Input 칩을 쓰지 못하고 칩을 따로 만들었어요(Memo, 2026-10-10).
   영역은 부품의 한가운데에 놓여서, 44px보다 작은 쪽으로만 늘어나요. :where()라서 서비스가 자리를 따로 잡은 부품은 그대로예요.
   영역은 inset으로 잡아요. transform으로 가운데에 옮기면 부품이 소수점 자리에 놓였을 때 눌리는 자리가 1px 밀려서,
   44px 간격으로 쌓인 칩 두 줄의 영역이 서로 1px씩 겹쳤어요. */
@media (pointer: coarse) {
  :where(.mw-button--small, .mw-text-button, .mw-select-chip, .mw-filter-chip, .mw-input-chip, .mw-input-chip__icon, .mw-switch, .mw-folder-chip-group-toggle,
    .mw-search__search-button, .mw-search__clear-button, .mw-tooltip__close-button, .mw-list-button, .mw-list-headline__icon,
    .mw-number-indicator__button, .mw-data-table__header-button) { position: relative; }
  :where(.mw-button--small, .mw-text-button, .mw-select-chip, .mw-filter-chip, .mw-input-chip, .mw-input-chip__icon, .mw-switch, .mw-folder-chip-group-toggle,
    .mw-search__search-button, .mw-search__clear-button, .mw-tooltip__close-button, .mw-list-button, .mw-list-headline__icon,
    .mw-number-indicator__button, .mw-data-table__header-button)::after {
    content: ""; position: absolute; inset: min(0px, calc((100% - var(--mw-touch)) / 2));
  }
  /* Item Tile의 링크(.mw-item-tile__link)는 이 목록에 넣지 않아요. 그 링크의 ::after는 타일 전체를 덮는 누르는 영역이에요.
     여기서 링크에 position을 주면 영역의 기준이 타일에서 제목 한 줄로 바뀌어, 폰에서는 제목 글자만 눌렸어요. */
  /* 서비스가 이 목록의 요소(글자 버튼 · 리스트 버튼 · 칩 …)의 누르는 영역을 줄이나 카드 전체로 폈다면(::after, inset: 0)
     그 요소에 position: static을 적어요. 여기서 준 position: relative가 남으면 같은 까닭으로 폰에서는 이름만 눌려요
     (foundations/spacing-layout: 누르는 영역과 밀도). */
  /* 칩 묶음은 옆으로 넘기는 상자라 위아래를 잘라요. 칩의 누르는 영역(위아래 4px)이 잘리지 않게 그만큼 안쪽을 넓히고 바깥에서 되돌려요. */
  .mw-chip-group, .mw-chip-group-wrapper, .mw-folder-chip-group-wrapper, .mw-folder-chip-group--collapsed, .mw-folder-chip-group--expanded { padding-block: var(--space-4); margin-block: calc(var(--space-4) * -1); }
  /* 옆으로 넘기는 칩 묶음은 양옆도 같아요: 첫 칩과 마지막 칩의 누르는 영역(좌우 4px)이 묶음의 가장자리에서 잘리지 않게 안쪽을 넓히고 바깥에서 되돌려요 */
  .mw-chip-group { padding-inline: var(--space-4); margin-inline: calc(var(--space-4) * -1); }
  /* Compact 표의 머리글 줄은 손가락으로 쓰는 기기에서 44px이에요. 머리글 버튼의 누르는 영역(위아래 8px)이 표 상자의 가장자리에서 잘리지 않게 해요 */
  .mw-data-table--compact .mw-data-table__header { height: var(--mw-touch); }
  /* 글자를 받는 칸 — 칸 안의 글자 줄은 22px이에요. 줄의 위아래를 11px씩 넓혀 44px로 누르게 하고, 그만큼 바깥에서 되돌려 상자의 높이는 그대로 둬요. */
  .mw-textfield__input, .mw-textarea__textarea, .mw-search__input, .mw-slider__input { box-sizing: content-box; padding-block: calc((var(--mw-touch) - var(--size-20) - var(--space-2)) / 2); margin-block: calc((var(--mw-touch) - var(--size-20) - var(--space-2)) / -2); }
  /* 빈 Text Area — 값도 포커스도 없을 때는 글자 줄의 높이가 0이라 위 규칙만으로는 누르는 줄이 22px이에요. 그때는 글자 칸이 레이블 줄부터
     아래로 44px을 덮어요(칸은 투명해서 레이블이 그대로 보여요). 글자 줄을 담는 상자는 넘친 것을 잘라서, 넓힌 만큼 그 상자의 아래쪽도 넓히고 되돌려요. */
  .mw-textarea:not(.mw-textarea--typing):not(.mw-textarea--has-value):not(:focus-within) .mw-textarea__textarea { padding-block: calc(var(--mw-touch) / 2); margin-block: calc(var(--mw-touch) / -2); }
  .mw-textarea__input-area { padding-bottom: calc((var(--mw-touch) - var(--size-20) - var(--space-2)) / 2); margin-bottom: calc((var(--mw-touch) - var(--size-20) - var(--space-2)) / -2); }
  /* Outline 검색 칸 — 아이콘 버튼이 40px이에요. 지우기와 검색이 붙어 있으면 넓힌 영역이 서로 겹쳐서, 둘 사이를 4px 띄워요.
     Underline은 버튼이 44px이라 그대로예요 (foundations/spacing-layout: 누르는 영역끼리 겹치지 않게 해요). */
  .mw-search:not(.mw-search--type-underline) .mw-search__icons-container { gap: var(--space-4); }
  /* 옆으로 넘기는 탭 — 이름이 한두 글자여도 44px 너비는 눌려요 */
  .mw-tab--scrollable { min-width: var(--mw-touch); }
}

/* 툴팁의 꼬리 — 꼬리를 담는 줄이 툴팁 너비를 다 차지하고 내용 위에 놓여서(z-index), 닫기 버튼의 누르는 영역을 위 · 아래 · 옆에서 가렸어요.
   꼬리는 꾸밈이라 누름을 받지 않아요. */
.mw-tooltip__caret-container { pointer-events: none; }

/* 접는 칩 묶음의 꺾쇠 — 원본은 곡선을 ease로 적었어요. 키트의 곡선(--mw-ease)으로 돌려요. */
.mw-folder-chip-group-toggle svg { transition-timing-function: var(--mw-ease); }

/* 대비 — 원본의 색 짝 가운데 4.5:1에 못 미치는 곳이에요 (foundations/accessibility 대비: 레이블과 도움말도 본문이에요).
   토큰 값은 그대로 두고, 그 부품의 글자색만 옮겨요.
   · 비활성 상태 태그(멈춤 · 사용 안 함)는 읽어야 하는 상태 이름인데 1.95:1이었어요. 보조 글자색을 바탕 쪽으로 조금 물려 써요.
   · 어두운 테마: 읽기 전용 칸의 면(밝은 회색) 위 레이블이 3.3:1, 오류 도움말의 빨강이 4.1:1이었어요. */
.mw-tag--status-disabled { color: color-mix(in srgb, var(--text-secondary) 80%, var(--tag-status-fill-disabled-fill)); }
[data-theme="dark"] .mw-textfield--read-only .mw-textfield__label,
[data-theme="dark"] .mw-textarea--read-only .mw-textarea__label { color: var(--text-secondary); }
[data-theme="dark"] .mw-helper-text--error { color: color-mix(in srgb, var(--text-feedback-critical) 75%, var(--text-primary)); }

/* 글자를 받는 칸의 최소 너비 — 원본의 320px은 넓은 화면에서 칸이 너무 좁아지지 않게 하는 값이에요. 360px 폰에서는 옆에 버튼
   하나만 붙어도 칸이 줄지 못해 버튼 밑으로 들어갔어요(Memo, 2026-10-10). 폰(600px 이하)에서는 놓인 자리의 너비를 따라요. */
@media (max-width: 600px) {
  .mw-textfield, .mw-textarea, .mw-search--type-outline { min-width: 0; }
}

/* Bottom Sheet의 겹침 순서 — 원본은 50이에요. 앱 뼈대의 하단 탭(60) · 폰에서 아래에 고정한 주 행동(mw-app-action, 55) ·
   접힌 화면의 판(mw-fold, 65)이 그 위에 그려져서, 시트의 아래쪽이 `저장하기` 버튼과 탭에 가려지고 어둡게 덮는 막도 그 둘은
   덮지 못했어요(Calendar의 날짜 고르기, 2026.10.12). 키트의 시트와 같은 자리(mw-scrim 70 · mw-sheet 71)에 둬요:
   위에 뜬 것은 뼈대의 어느 막대보다도 위예요. */
.mw-bottom-sheet-overlay { z-index: 70; }
.mw-bottom-sheet-container { z-index: 71; }

/* 펼치기(patterns/expand)와 만나는 곳 — 무언가를 펼치는 Filter 칩(aria-expanded)은 열리면 꺾쇠가 위를 향해요.
   펼치는 곳(mw-expand) 안의 칩 묶음은 여러 줄로 감싸요: 펼쳤는데 또 옆으로 밀어야 보이면 펼친 것이 아니에요
   (Calendar의 묶음 다섯, 2026.10.14: 360px 폰에서 마지막 칩이 화면 끝에 잘렸어요). */
.mw-filter-chip[aria-expanded="true"] .mw-filter-chip__icon { rotate: 180deg; }
.mw-expand .mw-chip-group-wrapper { overflow: visible; }
.mw-expand .mw-chip-group { flex-wrap: wrap; row-gap: var(--space-8); overflow: visible; }
.mw-expand .mw-chip-group__gradient { display: none; }
/* 손가락으로 쓰는 화면에서 칩 사이는 8px이에요 (accessibility#touch). 칩 묶음이 읽는 토큰 하나를 바꿔요: 업스트림 값은 6px. */
@media (pointer: coarse) {
  :root, [data-theme], [data-mode] { --chip-group-container-default-item-spacing: var(--space-8); }
}
@media (prefers-reduced-motion: no-preference) {
  .mw-filter-chip[aria-expanded] .mw-filter-chip__icon, .mw-expand__chevron { transition: rotate var(--motion-duration-long) var(--mw-ease); }
}

/* Moonwave 앱 레이어
 * 모든 Moonwave 서비스가 함께 쓰는 바탕과 뼈대예요: 글꼴, 초기화, 포커스, 앱 셸(사이드바 · 상단 바 · 하단 탭 · 패널 · 시트),
 * 페이지 머리말, 통계 타일, 상태 표시, 히어로, 안내, 빈 화면.
 * moonwave-tokens.css 다음에 불러오세요. 값은 모두 토큰을 가리켜요.
 */

/* ── 글꼴: 같은 파일을 두 이름으로 등록해요. 토큰의 기본 글꼴 이름이 Pretendard라서 그래요. ── */
@font-face {
  font-family: 'Pretendard Variable';
  src: url('/fonts/PretendardVariable.woff2') format('woff2-variations'), url('/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/PretendardVariable.woff2') format('woff2-variations'), url('/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

/* ── 바탕 ──
   초기화 규칙은 :where()로 감싸 우선순위를 0으로 둬요. 그래야 뒤에 오더라도 부품 스타일(.mw-button 등)을 덮지 않아요. */
:where(.mw-root),
:where(.mw-root) *,
:where(.mw-root) *::before,
:where(.mw-root) *::after { box-sizing: border-box; }
.mw-root {
  font-family: var(--font-family-default);
  font-size: var(--font-size-15);
  line-height: 1.48; /* 단위 없이: 자식이 자기 글자 크기로 다시 계산해요 (--line-height-default-148과 같은 값) */
  letter-spacing: -0.01em;
  color: var(--text-primary);
  background: var(--background-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}
:where(body.mw-root) { margin: 0; }
:where(.mw-root) :where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(.mw-root) :where(button) { cursor: pointer; }
:where(.mw-root) :where(h1, h2, h3, h4, p, figure, dl, dd) { margin: 0; }
:where(.mw-root) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.mw-root) :where(a) { color: inherit; }
/* 글자를 받는 칸은 감싸는 상자가 포커스를 보여 주므로 뺐어요 (moonwave-components.css의 보정 참고) */
.mw-root :focus-visible:not(.mw-textfield__input, .mw-textarea__textarea, .mw-search__input, .mw-searchbar input, .mw-filter-bar__input, .mw-textfield__formatted-segment-input, .mw-prompt-input__textarea, .mw-checkbox__input, .mw-radiobutton__input) { outline: var(--border-width-2) solid var(--mw-focus); outline-offset: 2px; }
:where(.mw-root) :where(a, button, summary, [tabindex]):not([class*='mw-']):focus-visible { border-radius: var(--radius-4); }
/* 손가락으로 쓰는 화면에서 글자를 입력하는 칸은 16px 이상이에요: 그보다 작으면 iOS가 칸을 누를 때 화면을 확대해요 (accessibility#text). 폭 조건이 아니라 입력 방식으로 걸어요. */
@media (pointer: coarse) {
  .mw-root :is(.mw-textfield__input, .mw-textfield__formatted-segment-input, .mw-textarea__textarea, .mw-search__input, .mw-searchbar input, .mw-filter-bar__input, .mw-filter-group__input, .mw-slider__input, .mw-data-table__input) { font-size: var(--font-size-16); }
}
.mw-root ::selection { background: var(--mw-accent-soft); color: var(--text-primary); }

.mw-num { font-variant-numeric: tabular-nums; }
.mw-mono { font-family: var(--mw-font-mono); font-size: 0.93em; letter-spacing: 0; }
.mw-muted { color: var(--text-tertiary); }
.mw-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mw-skip { position: absolute; left: var(--space-16); top: var(--space-8); z-index: 500; display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-8) var(--space-16); border-radius: var(--radius-8); background: var(--fill-primary-default); color: var(--text-inverse); font-weight: var(--font-weight-semibold); text-decoration: none; transform: translateY(-200%); }
.mw-skip:focus { transform: none; }

/* ── 마크: 어두운 타일 · 흰 글리프 · 붉은 점. 안에 32 단위 SVG를 넣어요. ── */
.mw-mark { width: 32px; height: 32px; border-radius: var(--radius-8); display: block; flex: none; overflow: hidden; background: var(--mw-tile); color: var(--mw-glyph); }
.mw-mark > svg { width: 100%; height: 100%; display: block; }
.mw-mark--40 { width: 40px; height: 40px; border-radius: 10px; }
.mw-mark--56 { width: 56px; height: 56px; border-radius: 14px; }
.mw-mark--72 { width: 72px; height: 72px; border-radius: 18px; }
[data-theme="dark"] .mw-mark { box-shadow: 0 0 0 var(--border-width-1) var(--border-secondary); }

/* ── 키커: 영문 대문자 머리말. 화면마다 하나만 써요. ── */
.mw-kicker { display: block; font-size: var(--mw-font-size-11); line-height: 1.4; font-weight: var(--font-weight-bold); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary); }
.mw-kicker--accent { color: var(--text-accent-primary); }
.mw-kicker--signal::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mw-signal); margin-right: var(--space-8); vertical-align: 0.12em; }

/* ── 앱 셸 ── */
.mw-app { display: grid; grid-template-columns: var(--mw-nav-w) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100%; background: var(--background-primary); }
.mw-app-nav { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-20) 14px; overflow-y: auto; background: var(--surface-primary); border-right: var(--border-width-1) solid var(--border-secondary); }
.mw-app-nav__brand { display: flex; align-items: center; gap: 10px; padding: var(--space-4) 10px 18px; text-decoration: none; }
.mw-app-nav__brand b { display: block; font-size: var(--font-size-16); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; }
.mw-app-nav__brand b span { color: var(--text-accent-primary); }
.mw-app-nav__brand small { display: block; font-size: var(--font-size-12); color: var(--text-tertiary); }
.mw-app-nav__section { height: 40px; flex: none; display: flex; align-items: flex-end; padding: 0 var(--space-12) 6px; font-size: var(--font-size-12); font-weight: var(--font-weight-semibold); color: var(--text-tertiary); }
.mw-app-nav__item {
  position: relative; flex: none; display: flex; align-items: center; gap: var(--space-12); height: 40px; padding: 0 var(--space-12);
  border: 0; border-radius: var(--radius-8); background: none; text-align: left; text-decoration: none;
  font-size: var(--font-size-15); font-weight: var(--font-weight-medium); color: var(--text-secondary);
  transition: background var(--motion-duration-short) var(--mw-ease), color var(--motion-duration-short) var(--mw-ease);
}
.mw-app-nav__item svg { width: 20px; height: 20px; flex: none; }
.mw-app-nav__item:hover { background: var(--background-secondary); color: var(--text-primary); }
.mw-app-nav__item[aria-current='page'] { background: var(--mw-accent-soft); color: var(--text-accent-primary); font-weight: var(--font-weight-bold); }
.mw-app-nav__item[aria-current='page']::before { content: ''; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mw-accent); }
.mw-app-nav__badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-circle); display: grid; place-items: center; font-size: var(--font-size-12); font-weight: var(--font-weight-bold); background: var(--mw-critical); color: var(--static-white); }
.mw-app-nav__badge--warn { background: var(--mw-warn-soft); color: var(--tag-status-text-warning); }
.mw-app-nav__foot { margin-top: auto; padding: 14px var(--space-12) 0; border-top: var(--border-width-1) solid var(--border-secondary); display: grid; gap: var(--space-8); font-size: var(--font-size-13); color: var(--text-secondary); }
.mw-app-nav__foot small { font-size: var(--font-size-12); color: var(--text-tertiary); }

.mw-app-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.mw-app-top {
  flex: none; height: var(--mw-top-h); display: flex; align-items: center; gap: var(--space-16); padding: 0 var(--space-32); z-index: 20;
  background: color-mix(in srgb, var(--background-primary) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: var(--border-width-1) solid var(--border-secondary);
}
.mw-app-top__title { font-size: var(--font-size-18); font-weight: var(--font-weight-bold); letter-spacing: -0.03em; white-space: nowrap; }
.mw-app-top__title span { color: var(--text-accent-primary); }
.mw-app-top__spacer { flex: 1; min-width: 0; }
.mw-app-content { flex: 1; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; container: mw-content / inline-size; }

/* 하단 탭: 화면이 좁을 때 사이드바를 대신해요. 탭 넷과 '더보기'까지 다섯 칸이에요. */
.mw-app-tabbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; grid-template-columns: repeat(5, 1fr);
  box-sizing: border-box; height: calc(var(--mw-tabbar-h) + env(safe-area-inset-bottom)); padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface-primary) 94%, transparent);
  backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px);
  border-top: var(--border-width-1) solid var(--border-secondary);
}
.mw-app-tabbar--4 { grid-template-columns: repeat(4, 1fr); }
.mw-app-tabbar__item {
  position: relative; min-height: var(--mw-touch); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px 0 0; line-height: 1.2;
  border: 0; background: none; text-decoration: none; -webkit-tap-highlight-color: transparent;
  font-size: var(--mw-font-size-11); font-weight: var(--font-weight-medium); color: var(--text-tertiary);
}
.mw-app-tabbar__item svg { width: 24px; height: 24px; }
.mw-app-tabbar__item[aria-current='page'] { color: var(--text-accent-primary); font-weight: var(--font-weight-bold); }
.mw-app-tabbar__dot { position: absolute; top: 4px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--mw-critical); }

/* 오른쪽 패널: 넓으면 옆에 밀고 들어오고, 좁으면 아래에서 올라오는 시트가 돼요. */
.mw-app-panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 30; width: var(--mw-panel-w); max-width: 100%; display: flex; flex-direction: column;
  background: var(--surface-primary); border-left: var(--border-width-1) solid var(--border-secondary); box-shadow: var(--shadow-3);
  transform: translateX(102%); visibility: hidden; transition: transform var(--motion-duration-long) var(--mw-ease), visibility 0s var(--motion-duration-long);
}
.mw-app-panel--open { transform: none; visibility: visible; transition-delay: 0s; }
.mw-app-panel__head { flex: none; display: flex; align-items: center; gap: var(--space-12); padding: var(--space-16) var(--space-12) var(--space-16) var(--space-20); border-bottom: var(--border-width-1) solid var(--border-secondary); }
.mw-app-panel__head h2 { flex: 1; min-width: 0; font-size: var(--font-size-17); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 상세 서랍(데이터 뷰): 머리에 이전 · 다음 단추와 "3 / 12"가 서요. 목록은 패널 옆에 그대로 남아요. */
.mw-app-panel__nav { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.mw-app-panel__pos { min-width: 3.5em; color: var(--text-secondary); font-size: var(--font-size-13); text-align: center; font-variant-numeric: tabular-nums; }
.mw-app-panel__body { flex: 1; overflow-y: auto; padding: var(--space-20); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-20); align-content: start; }
.mw-app-panel__foot { flex: none; display: flex; gap: var(--space-8); justify-content: flex-end; padding: var(--space-12) var(--space-20) calc(var(--space-12) + env(safe-area-inset-bottom)); border-top: var(--border-width-1) solid var(--border-secondary); background: var(--surface-primary); }

/* 좁은 화면의 주 행동: 엄지가 닿는 아래쪽에 고정해요. 본문(mw-app-main) 안에 두고, FAB이나 버튼 하나를 넣어요.
   넓은 화면에서는 보이지 않아요. 같은 행동은 페이지 머리에 mw-wide-only로 둬요. */
.mw-app-action { display: none; }
.mw-app-action > * { pointer-events: auto; }

/* 패널 뒤 가림막: 본문(mw-app-main) 안에서 패널 바로 앞에 놓아요. 패널이 내용을 덮는 너비(901~1279px)와 시트일 때만 보여요. */
.mw-app-panel-scrim { position: absolute; inset: 0; z-index: 25; padding: 0; border: 0; background: var(--dim-overlay); opacity: 0; pointer-events: none; transition: opacity var(--motion-duration-long) var(--mw-ease); }
.mw-app-panel-scrim--on { opacity: 1; pointer-events: auto; }

.mw-scrim { position: fixed; inset: 0; z-index: 70; padding: 0; border: 0; background: var(--dim-overlay); opacity: 0; pointer-events: none; transition: opacity var(--motion-duration-long) var(--mw-ease); }
.mw-scrim--on { opacity: 1; pointer-events: auto; }
.mw-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 86dvh; display: flex; flex-direction: column;
  background: var(--surface-primary); border-radius: var(--mw-radius-sheet) var(--mw-radius-sheet) 0 0; box-shadow: var(--shadow-3); padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(105%); visibility: hidden; transition: transform var(--mw-duration-sheet) var(--mw-ease-sheet), visibility 0s var(--mw-duration-sheet);
}
.mw-sheet--open { transform: none; visibility: visible; transition-delay: 0s; }
/* 손잡이는 누르는 버튼이에요(닫기, 높이 바꾸기): 누르는 영역이 44px이에요. 보이는 막대는 40 × 5px 그대로예요 */
.mw-sheet__grab { flex: none; width: 100%; min-height: var(--mw-touch); padding: 0; display: grid; place-items: center; border: 0; background: none; }
.mw-sheet__grab i { width: 40px; height: 5px; border-radius: 3px; background: var(--border-secondary); }
.mw-sheet__body { overflow-y: auto; padding: var(--space-8) var(--space-16) var(--space-20); display: grid; gap: var(--space-4); }
.mw-sheet__item { display: flex; align-items: center; gap: 14px; min-height: var(--mw-touch); padding: var(--space-12); border: 0; border-radius: var(--radius-12); background: none; text-align: left; text-decoration: none; }
.mw-sheet__item:active, .mw-sheet__item[aria-current='page'] { background: var(--background-secondary); }

/* 당겨서 새로 고침: 내용 맨 위에서 아래로 당기면 내려오는 동그라미예요. 본문(mw-app-main) 안에 두고, 움직임은 키트의 PullRefresh가 줘요. */
.mw-pull { --mw-pull: 0; position: absolute; top: var(--mw-top-h); left: 50%; z-index: 15; width: var(--space-40); height: var(--space-40); margin-left: calc(var(--space-40) / -2); display: grid; place-items: center; border-radius: var(--radius-circle); background: var(--surface-floating); box-shadow: var(--shadow-2); color: var(--text-accent-primary); opacity: 0; visibility: hidden; pointer-events: none; }
/* 고리는 당긴 만큼 차요(--mw-pull: 0~1). 그림 파일 없이 색 한 가지로 그려요. */
.mw-pull__ring { width: 20px; height: 20px; border-radius: var(--radius-circle); background: conic-gradient(currentColor calc(var(--mw-pull) * 360deg), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.7px), currentColor calc(100% - 2.2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.7px), currentColor calc(100% - 2.2px)); }
.mw-pull--busy .mw-pull__ring { background: conic-gradient(currentColor 270deg, transparent 0); }
.mw-sheet__item b { display: block; font-size: var(--font-size-16); font-weight: var(--font-weight-semibold); }
.mw-sheet__item small { display: block; font-size: var(--font-size-13); color: var(--text-tertiary); margin-top: 2px; }
.mw-sheet__icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: var(--radius-12); background: var(--background-secondary); }
.mw-sheet__icon svg { width: 24px; height: 24px; }
.mw-sheet__item[aria-current='page'] .mw-sheet__icon { background: var(--mw-accent-strong); color: var(--text-inverse); }

/* ── 페이지 ── */
.mw-page { max-width: var(--mw-page-max); margin: 0 auto; padding: var(--mw-page-pad); }
.mw-page__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-16); margin-bottom: var(--space-24); }
.mw-page__head h1 { font-size: var(--mw-font-size-28); line-height: 1.25; font-weight: var(--font-weight-bold); letter-spacing: -0.03em; }
.mw-page__head p { margin-top: 6px; max-width: var(--mw-reading-max); font-size: var(--font-size-15); line-height: var(--line-height-default-148); color: var(--text-tertiary); }
.mw-page__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); }
.mw-section { margin-top: var(--space-32); }
.mw-section__head { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-12); font-size: var(--font-size-18); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; }
.mw-section__head small { font-size: var(--font-size-13); font-weight: var(--font-weight-medium); color: var(--text-tertiary); }
.mw-section__more { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: var(--font-size-13); font-weight: var(--font-weight-semibold); color: var(--text-accent-primary); text-decoration: none; }
.mw-section__more svg { width: 16px; height: 16px; }

.mw-grid { display: grid; gap: var(--space-16); }
.mw-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mw-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mw-grid--main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.mw-grid--auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ── 표면: 내용을 담는 기본 상자 ── */
/* 면은 제 글자색을 정해요: 테마 섬(data-theme을 따로 준 면)에서도 그 테마의 본문색이 돼요 */
.mw-surface { padding: var(--space-24); border-radius: var(--radius-16); background: var(--surface-primary); color: var(--text-primary); border: var(--border-width-1) solid var(--border-secondary); box-shadow: var(--shadow-1); min-width: 0; }
.mw-surface--flat { box-shadow: none; }
.mw-surface--link { display: block; text-decoration: none; transition: border-color var(--motion-duration-short) var(--mw-ease), box-shadow var(--motion-duration-medium) var(--mw-ease), transform var(--motion-duration-medium) var(--mw-ease); }
.mw-surface--link:hover { border-color: var(--mw-accent); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.mw-surface__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-12); margin-bottom: var(--space-16); }
.mw-surface__head h3 { font-size: var(--font-size-17); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; }
.mw-surface__head p { margin-top: var(--space-4); font-size: var(--font-size-13); color: var(--text-tertiary); }

/* ── 통계 타일 ── */
.mw-stat { display: block; padding: 22px var(--space-24); text-decoration: none; }
.mw-stat__label { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-14); font-weight: var(--font-weight-medium); color: var(--text-tertiary); }
.mw-stat__label svg { width: 16px; height: 16px; }
.mw-stat__value { margin-top: 10px; font-size: var(--font-size-32); line-height: 1.1; font-weight: var(--font-weight-bold); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mw-stat__value small { margin-left: 3px; font-size: var(--font-size-16); font-weight: var(--font-weight-semibold); color: var(--text-tertiary); }
.mw-stat__value--ok { color: var(--mw-ok); }
.mw-stat__value--critical { color: var(--mw-critical); }
.mw-stat__foot { margin-top: var(--space-8); font-size: var(--font-size-13); line-height: var(--line-height-default-148); color: var(--text-tertiary); }
.mw-meter { display: flex; height: 6px; margin-top: var(--space-12); border-radius: 6px; overflow: hidden; background: var(--background-secondary); }
.mw-meter i { display: block; height: 100%; background: var(--mw-ok); }
.mw-meter i.mw-meter--warn { background: var(--mw-warn); }
.mw-meter i.mw-meter--critical { background: var(--mw-critical); }

/* 금액과 증감: 부호와 ▲▼를 함께 써서 색을 못 봐도 알 수 있게 해요 */
.mw-delta { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.mw-delta--gain { color: var(--mw-gain); }
.mw-delta--loss { color: var(--mw-loss); }
.mw-delta--flat { color: var(--mw-flat); }
.mw-delta--gain::before { content: '▲ '; font-size: 0.72em; vertical-align: 0.08em; }
.mw-delta--loss::before { content: '▼ '; font-size: 0.72em; vertical-align: 0.08em; }
/* 배지 모양: 숫자 옆에 알약으로 놓아요. ▲▼와 부호는 그대로고, 색은 글자와 옅은 바탕에만 써요 */
.mw-delta--badge { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-8); border-radius: var(--radius-circle); background: var(--background-secondary); font-size: var(--font-size-13); line-height: var(--line-height-default-148); }
.mw-delta--badge.mw-delta--gain { background: color-mix(in srgb, var(--mw-gain) 12%, transparent); }
.mw-delta--badge.mw-delta--loss { background: color-mix(in srgb, var(--mw-loss) 12%, transparent); }

/* ── 상태 ── */
.mw-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-13); font-weight: var(--font-weight-semibold); white-space: nowrap; color: var(--text-tertiary); }
.mw-state i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--mw-idle); }
.mw-state--up { color: var(--mw-ok); }
.mw-state--up i { background: var(--mw-ok); }
.mw-state--partial { color: var(--tag-status-text-warning); }
.mw-state--partial i { background: var(--mw-warn); }
.mw-state--down { color: var(--tag-status-text-critical); }
.mw-state--down i { background: var(--mw-critical); }
.mw-live { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--mw-ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--mw-ok) 50%, transparent); }
.mw-live--off { background: var(--mw-idle); }
.mw-live--down { background: var(--mw-critical); }

.mw-glyph { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--radius-12); background: var(--mw-accent-soft); color: var(--text-accent-primary); font-size: var(--font-size-16); font-weight: var(--font-weight-bold); letter-spacing: -0.03em; }
.mw-glyph--56 { width: 56px; height: 56px; border-radius: var(--radius-16); font-size: var(--font-size-22); }
.mw-glyph--neutral { background: var(--background-secondary); color: var(--text-secondary); }

/* ── 찾기 바, 아이콘 버튼, 키 표시 ── */
.mw-searchbar {
  flex: 1; max-width: 640px; height: var(--mw-touch); display: flex; align-items: center; gap: 10px; padding: 0 var(--space-8) 0 var(--space-16);
  background: var(--surface-primary); border: var(--border-width-1) solid var(--border-secondary); border-radius: var(--radius-circle);
  /* 포커스 표시(바깥 고리)는 움직임 없이 바로 나타나요. 칸 안의 고리를 뺀 뒤로 이 고리가 유일한 표시인데, 천천히 번지면
     Tab으로 닿은 순간에는 아직 보이지 않아요(2026-10-10: 점검이 '표시 없음'으로 읽었어요). 테두리 색만 부드럽게 바뀌어요. */
  transition: border-color var(--motion-duration-short) var(--mw-ease);
}
/* 찾기 바는 `role="search"`인 상자 안에 서요(레이블은 역할을 가질 수 없어요). 그 상자는 자리를 차지하지 않아요 */
[role="search"]:has(> .mw-searchbar), search:has(> .mw-searchbar) { display: contents; }
.mw-searchbar:focus-within { border-color: var(--mw-accent); box-shadow: 0 0 0 4px var(--mw-accent-soft); }
.mw-searchbar > svg { width: 20px; height: 20px; flex: none; color: var(--text-tertiary); }
.mw-searchbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: var(--font-size-15); }
.mw-searchbar input::placeholder { color: var(--text-tertiary); }
.mw-searchbar--hero { height: 60px; max-width: 720px; padding-left: var(--space-24); box-shadow: var(--shadow-2); }
.mw-kbd { padding: 2px 6px; border: var(--border-width-1) solid var(--border-secondary); border-radius: var(--radius-6); background: var(--background-secondary); font-size: var(--font-size-12); font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
.mw-icon-button { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 0; border-radius: var(--radius-8); background: transparent; color: var(--text-secondary); position: relative; transition: background var(--motion-duration-short) var(--mw-ease), color var(--motion-duration-short) var(--mw-ease); }
.mw-icon-button::before { content: ''; position: absolute; inset: -4px; }
.mw-icon-button:hover { background: var(--background-secondary); color: var(--text-primary); }
.mw-icon-button svg { width: 20px; height: 20px; }

/* ── 히어로: 밤 캔버스 위의 달과 고리. 서비스 첫 화면에 하나만 둬요. ── */
.mw-hero {
  --mw-hero-moon: radial-gradient(circle at 29% 25%, #e5eef0, #9bbbd0 38%, #3e6383 68%, #0d1c31 100%);
  --mw-hero-ring: rgba(184, 225, 235, 0.45);
  position: relative; isolation: isolate; overflow: hidden; min-height: 228px; padding: 36px 44px; margin-bottom: var(--space-24);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-24);
  border-radius: var(--radius-16); background: var(--mw-hero-gradient); color: var(--mw-hero-ink);
}
.mw-hero::before {
  content: ''; position: absolute; z-index: -1; width: 270px; aspect-ratio: 1; right: 12%; top: -62px; border-radius: 50%; background: var(--mw-hero-moon);
  box-shadow: inset -22px -24px 36px rgba(5, 15, 30, 0.55), 0 0 70px rgba(143, 200, 223, 0.2);
}
.mw-hero::after {
  content: ''; position: absolute; z-index: -1; width: 420px; height: 118px; right: 4%; top: 72px; border-radius: 50%;
  border: var(--border-width-2) solid var(--mw-hero-ring); transform: rotate(-23deg) rotateX(69deg); box-shadow: 0 0 24px rgba(169, 220, 233, 0.15);
}
.mw-hero .mw-kicker { margin-bottom: var(--space-12); color: var(--mw-hero-kicker); }
.mw-hero h1 { font-size: clamp(30px, 3vw, 42px); line-height: 1.15; font-weight: var(--font-weight-bold); letter-spacing: -0.045em; }
.mw-hero p { max-width: 560px; margin-top: var(--space-12); font-size: var(--font-size-15); line-height: var(--line-height-reading-158); color: var(--mw-hero-muted); }
.mw-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-20); }
.mw-hero__button { display: inline-flex; align-items: center; gap: var(--space-4); min-height: var(--mw-touch); padding: 0 var(--space-16); border-radius: var(--radius-8); border: var(--border-width-1) solid rgba(210, 236, 241, 0.55); background: rgba(207, 234, 239, 0.11); color: var(--mw-hero-ink); font-size: var(--font-size-15); font-weight: var(--font-weight-semibold); text-decoration: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.mw-hero__button:hover { background: rgba(207, 234, 239, 0.22); }
.mw-hero__button--solid { background: var(--mw-hero-ink); border-color: transparent; color: var(--mw-night); }
.mw-hero__button--solid:hover { background: var(--mw-wavie-cyan); }

/* ── 안내와 빈 화면 ── */
.mw-notice { display: flex; align-items: flex-start; gap: 10px; padding: 14px var(--space-16); border-radius: var(--radius-12); background: var(--background-secondary); font-size: var(--font-size-14); line-height: var(--line-height-reading-158); color: var(--text-secondary); }
/* 아이콘은 일곱 크기 가운데 20px이에요 (foundations/iconography). 2026.10.11까지 18px이라, 안내에 아이콘을 넣은 서비스마다 크기를 따로 고쳐 적어야 했어요. */
.mw-notice svg { width: var(--size-20); height: var(--size-20); flex: none; margin-top: 1px; color: var(--text-tertiary); }
.mw-notice b { display: block; color: var(--text-primary); }
.mw-notice--accent { background: var(--mw-accent-soft); color: var(--text-accent-primary); }
.mw-notice--accent svg, .mw-notice--accent b { color: inherit; }
.mw-notice--warn { background: var(--mw-warn-soft); color: var(--tag-status-text-warning); }
.mw-notice--warn svg, .mw-notice--warn b { color: inherit; }
.mw-notice--critical { background: var(--mw-critical-soft); color: var(--tag-status-text-critical); }
.mw-notice--critical svg, .mw-notice--critical b { color: inherit; }
.mw-empty { display: grid; justify-items: center; gap: var(--space-8); padding: var(--space-64) var(--space-20); text-align: center; font-size: var(--font-size-14); line-height: var(--line-height-reading-158); color: var(--text-tertiary); }
.mw-empty__art { width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: var(--space-8); border-radius: var(--radius-16); background: var(--background-secondary); color: var(--text-tertiary); }
.mw-empty__art svg { width: 32px; height: 32px; }
.mw-empty b { font-size: var(--font-size-17); font-weight: var(--font-weight-bold); color: var(--text-primary); }
.mw-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); margin-top: var(--space-12); }
.mw-empty--compact { padding: var(--space-32) var(--space-16); }

/* ── 로그인: 한 번 더 확인하는 서비스의 화면이에요 (patterns/access-gate#login). 문은 달라도 틀과 브랜드는 같아요.
   카드 하나에 마크와 이름 · 키커와 인사 · 방법 하나 · 다른 방법 · 어디에 있는지를 이 순서로 담고,
   카드 아래에 Moonwave의 문장 한 줄을 둬요. 카드는 화면 한가운데에 있어요. ── */
.mw-login { height: 100dvh; overflow-y: auto; display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; gap: var(--space-24); padding: var(--space-24) var(--space-16) calc(var(--space-24) + env(safe-area-inset-bottom)); background: var(--background-secondary); }
.mw-login__card { grid-row: 2; width: min(420px, 100%); min-width: 0; display: grid; gap: var(--space-24); padding: var(--space-32); border-radius: var(--mw-radius-login); background: var(--surface-primary); border: var(--border-width-1) solid var(--border-secondary); box-shadow: var(--shadow-1); }
.mw-login__brand { display: flex; align-items: center; gap: 10px; }
.mw-login__brand b { display: block; font-size: var(--font-size-16); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; color: var(--text-primary); }
.mw-login__brand b span { color: var(--text-accent-primary); }
.mw-login__brand small { display: block; font-size: var(--font-size-12); font-weight: var(--font-weight-medium); color: var(--text-tertiary); }
.mw-login__head { display: grid; gap: var(--space-12); }
.mw-login__title { font-size: var(--font-size-24); line-height: 1.3; font-weight: var(--font-weight-bold); letter-spacing: -0.03em; color: var(--text-primary); }
.mw-login__lead { margin-top: calc(-1 * var(--space-4)); font-size: var(--font-size-15); font-weight: var(--font-weight-medium); line-height: var(--line-height-reading-158); color: var(--text-secondary); }
.mw-login__method { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); min-width: 0; }
.mw-login__method .mw-textfield { min-width: 0; } /* 카드 안쪽이 입력 칸의 기본 최소 너비보다 좁아요 */
.mw-login__steps { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.mw-login__steps li { padding: var(--space-4) var(--space-12); border-radius: var(--radius-circle); background: var(--background-secondary); font-size: var(--font-size-12); font-weight: var(--font-weight-semibold); color: var(--text-secondary); }
.mw-login__others { display: grid; justify-items: center; }
.mw-login__others > * { min-height: var(--mw-touch); }
.mw-login__where { display: flex; align-items: center; justify-content: center; gap: var(--space-4); font-size: var(--font-size-12); font-weight: var(--font-weight-medium); color: var(--text-tertiary); }
.mw-login__where svg { width: 16px; height: 16px; flex: none; }
.mw-login__quote { grid-row: 3; align-self: start; max-width: 420px; text-align: center; font-size: var(--font-size-12); font-weight: var(--font-weight-medium); line-height: var(--line-height-reading-158); color: var(--text-tertiary); }

/* 값이 없을 때 */
.mw-na { color: var(--text-tertiary); }

/* 뼈대가 바뀌는 너비(900px)를 기준으로 한쪽에서만 보이는 요소 */
@media (min-width: 901px) {
  .mw-narrow-only { display: none !important; }
}
/* ── 넓은 화면: 열린 패널이 내용을 덮지 않고 밀어요. 상단 바는 전체 너비로 남고 패널은 그 아래에 놓여요. ── */
@media (min-width: 1280px) {
  .mw-app-panel { top: var(--mw-top-h); box-shadow: none; }
  .mw-app-main:has(> .mw-app-panel--open) .mw-app-content { margin-right: var(--mw-panel-w); }
  .mw-app-panel-scrim { display: none; }
}
/* ── 좁은 화면 ── */
@media (max-width: 1280px) {
  .mw-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mw-grid--main { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .mw-app { grid-template-columns: minmax(0, 1fr); }
  .mw-app-nav { display: none; }
  .mw-app-tabbar { display: grid; }
  .mw-app-top { height: calc(var(--mw-top-h-mobile) + env(safe-area-inset-top)); gap: 10px; padding: env(safe-area-inset-top) var(--space-8) 0 var(--space-16); }
  .mw-app-content { padding-bottom: calc(var(--mw-tabbar-h) + var(--space-16) + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
  .mw-pull { top: calc(var(--mw-top-h-mobile) + env(safe-area-inset-top)); }
  /* 601~900px(펼친 폴드, 세로로 든 태블릿, 눕힌 폰): 패널은 옆에서 들어와 내용 위에 겹치고, 하단 탭보다 앞에 서요. 시트가 되는 것은 600px 이하예요. */
  .mw-app-panel { z-index: 75; padding-right: env(safe-area-inset-right); }
  .mw-app-panel__head { padding-top: calc(var(--space-16) + env(safe-area-inset-top)); }
  .mw-app-panel-scrim { position: fixed; z-index: 70; }
  .mw-app-action { position: fixed; z-index: 55; right: var(--space-16); bottom: calc(var(--mw-tabbar-h) + var(--space-20) + env(safe-area-inset-bottom)); display: flex; justify-content: flex-end; pointer-events: none; }
  .mw-app-action--bar { left: var(--space-16); bottom: calc(var(--mw-tabbar-h) + var(--space-12) + env(safe-area-inset-bottom)); }
  .mw-app-action--bar > * { flex: 1; }
  /* 마지막 줄이 주 행동 뒤에 가려지지 않게 내용 끝을 그만큼 비워요 */
  .mw-app-main:has(> .mw-app-action) .mw-app-content { padding-bottom: calc(var(--mw-tabbar-h) + 96px + env(safe-area-inset-bottom)); }
  .mw-wide-only { display: none !important; }
  .mw-page { padding: var(--space-16) var(--space-16) var(--space-24); }
  .mw-page__head { margin-bottom: var(--space-16); align-items: flex-start; }
  .mw-page__head h1 { font-size: var(--font-size-24); }
  .mw-page__head p { font-size: var(--font-size-14); }
  .mw-section { margin-top: var(--space-24); }
  .mw-grid { gap: 10px; }
  .mw-grid--4, .mw-grid--3, .mw-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mw-grid--auto { grid-template-columns: 1fr; }
  .mw-surface { padding: 18px var(--space-16); }
  .mw-stat { padding: var(--space-16); }
  .mw-stat__value { margin-top: 6px; font-size: var(--font-size-24); }
  .mw-stat__foot { font-size: var(--font-size-12); }
  .mw-hero { min-height: 190px; padding: 26px 22px; }
  .mw-hero::before { width: 190px; right: -35px; top: -28px; opacity: 0.6; }
  .mw-hero::after { width: 280px; right: -84px; top: 55px; opacity: 0.65; }
  .mw-hero h1 { font-size: var(--mw-font-size-28); }
  .mw-hero p { max-width: 260px; font-size: var(--font-size-14); }
  .mw-kbd { display: none; }
}
/* 폰 */
@media (max-width: 600px) {
  /* 패널은 아래에서 올라오는 시트가 돼요 */
  .mw-app-panel { top: auto; width: 100%; height: 92dvh; padding-right: 0; border-left: 0; border-radius: var(--mw-radius-sheet) var(--mw-radius-sheet) 0 0; transform: translateY(105%); transition-duration: var(--mw-duration-sheet), 0s; transition-timing-function: var(--mw-ease-sheet), linear; transition-delay: 0s, var(--mw-duration-sheet); }
  .mw-app-panel--open { transform: none; transition-delay: 0s; }
  .mw-app-panel__head { padding-top: var(--space-16); }
  /* 결정을 받는 팝업(Center)은 엄지가 닿는 아래에 떠요. 화면 가운데에 뜨는 것은 601px부터예요. */
  .mw-popup__container:has(> .mw-popup--center) { box-sizing: border-box; align-items: flex-end; padding: 0 var(--space-16) calc(var(--space-16) + env(safe-area-inset-bottom)); }
  .mw-popup--center { width: 100%; min-width: 0; }
}
/* 눕힌 폰(601~900px, 높이 480px 이하): 세로가 모자라서 하단 탭이 왼쪽에 서요. 위아래는 내용이 다 써요. */
@media (min-width: 601px) and (max-width: 900px) and (max-height: 480px) {
  :root { --mw-tabbar-h: 0px; }
  .mw-app-main { padding-left: calc(var(--mw-rail-w) + env(safe-area-inset-left)); }
  .mw-app-tabbar { top: 0; right: auto; width: calc(var(--mw-rail-w) + env(safe-area-inset-left)); height: auto; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); padding: env(safe-area-inset-top) var(--space-4) env(safe-area-inset-bottom) calc(var(--space-4) + env(safe-area-inset-left)); border-top: 0; border-right: var(--border-width-1) solid var(--border-secondary); }
}
/* 글자를 치는 폰(600px 이하, 키보드가 화면을 줄여 높이 480px 이하): 하단 탭이 비키고, 아래에 고정한 주 행동은 키보드 바로 위에 남아요. viewport에 interactive-widget=resizes-content가 있어야 키보드가 화면을 줄여요. */
@media (max-width: 600px) and (max-height: 480px) {
  :root:has(:is(input:not([type='checkbox'], [type='radio'], [type='range'], [type='button'], [type='submit'], [type='reset'], [type='file'], [type='color']), textarea, [contenteditable]:not([contenteditable='false'])):focus) { --mw-tabbar-h: 0px; }
  :root:has(:is(input:not([type='checkbox'], [type='radio'], [type='range'], [type='button'], [type='submit'], [type='reset'], [type='file'], [type='color']), textarea, [contenteditable]:not([contenteditable='false'])):focus) .mw-app-tabbar { display: none; }
}
@media (max-width: 380px) {
  .mw-grid--4, .mw-grid--3, .mw-grid--2 { grid-template-columns: 1fr; }
  .mw-login__card { padding: var(--space-24); }
}
/* 내용 영역의 너비를 따라가는 격자: 패널이 내용을 밀거나 창이 좁아져도 타일이 찌그러지지 않아요 */
@container mw-content (max-width: 1000px) {
  .mw-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mw-grid--main { grid-template-columns: 1fr; }
}
@container mw-content (max-width: 720px) {
  .mw-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container mw-content (max-width: 380px) {
  .mw-grid--4, .mw-grid--3, .mw-grid--2 { grid-template-columns: 1fr; }
}
/* 손가락으로 누르는 기기: 보이는 크기가 작아도 누르는 영역은 44px 이상이에요 */
@media (pointer: coarse) {
  .mw-app-nav__item { min-height: var(--mw-touch); }
  .mw-icon-button { width: var(--mw-touch); height: var(--mw-touch); }
}

/* ── 반쯤 접은 화면 (플렉스 모드): 접는 폰을 반쯤 접어 세우면 화면이 접힌 줄을 사이에 두고 위아래 둘이 돼요.
   보는 것(.mw-fold__view)은 위 화면에, 다루는 것(.mw-fold__controls)은 아래 화면에 놓여요. 접힌 줄에는 아무것도 걸치지 않아요.
   펴져 있을 때는 평소처럼 위아래로 쌓여요. 브라우저가 접힌 줄을 알려 줄 때만 나뉘어요 (patterns/app-shell#flex). ── */
.mw-fold { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.mw-fold__view { min-width: 0; min-height: 0; }
.mw-fold__controls { min-width: 0; min-height: 0; }
@media (vertical-viewport-segments: 2) {
  /* 탭 줄(60) 위, 가림막(70)과 시트(71) 아래: 여기서 연 시트와 팝업은 그대로 위에 떠요 */
  .mw-fold { position: fixed; inset: 0; z-index: 65; grid-template-rows: env(viewport-segment-height 0 0) env(viewport-segment-height 0 1); row-gap: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0)); background: var(--surface-primary); }
  .mw-fold__view { overflow: hidden; padding-top: env(safe-area-inset-top); }
  .mw-fold__controls { overflow-y: auto; overscroll-behavior: contain; padding: var(--space-16) max(var(--space-20), env(safe-area-inset-right)) calc(var(--space-16) + env(safe-area-inset-bottom)) max(var(--space-20), env(safe-area-inset-left)); }
}

/* ── 펼치기 (mw-expand): 폰에서 자리를 아끼려고 접어 두는 곳이에요. 그보다 넓은 화면(펼친 폴드, 태블릿, PC)에서는 자리가
   있어서 늘 펼쳐져 있고 여는 버튼은 보이지 않아요 (patterns/expand).
   여는 버튼(data-expand-opener · aria-expanded · aria-controls) + .mw-expand(펼쳐지는 곳) > .mw-expand__body(내용)예요.
   여는 버튼과의 사이(8px)는 안쪽에 있어요: 닫힌 곳이 바깥의 gap을 한 칸 더 차지하지 않아요. ── */
.mw-expand { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; scroll-margin-block: var(--space-16); }
.mw-expand__body { display: flow-root; min-width: 0; min-height: 0; }
.mw-expand__body::before { content: ''; display: block; height: var(--mw-expand-gap, var(--space-8)); }
.mw-expand--flush > .mw-expand__body::before, .mw-expand--peek > .mw-expand__body::before { content: none; }
/* 펼친 내용을 옅은 판에 담아 여는 버튼에 딸린 것임을 보여요 (어두운 테마의 이 면은 밝은 회색이라 글자는 본문색이에요) */
.mw-expand__panel { padding: var(--space-12) var(--space-16); border-radius: var(--radius-12); background: var(--surface-secondary); color: var(--text-secondary); }
[data-theme="dark"] .mw-expand__panel { color: var(--text-primary); }
/* 여는 버튼 안의 아래 꺾쇠: 열리면 위를 향해요 */
.mw-expand__chevron { flex: none; }
[aria-expanded="true"] > .mw-expand__chevron, [aria-expanded="true"] > * > .mw-expand__chevron { rotate: 180deg; }
/* 글자와 꺾쇠로 된 여는 버튼 (더 보기 · 접기) */
.mw-expand-button { display: inline-flex; align-items: center; gap: var(--space-4); min-height: var(--mw-touch); margin: 0; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-8); background: transparent; color: var(--text-secondary); font-family: inherit; font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); line-height: 1.4; text-align: left; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.mw-expand-button[hidden] { display: none; }
.mw-expand-button > svg { width: 16px; height: 16px; }
.mw-expand-button__count { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.mw-expand-button:hover, .mw-expand-button:active { color: var(--text-primary); }
.mw-expand-button:active { background: var(--fill-tertiary-pressed); }
.mw-expand-button:focus-visible { outline: var(--border-width-2) solid var(--border-inverse); outline-offset: 2px; }
.mw-expand-button--block { display: flex; justify-content: center; width: 100%; }
/* 폰보다 넓은 화면: 접지 않아요. 펼치는 곳은 늘 열려 있고, 여는 버튼은 할 일이 없어서 보이지 않아요 */
@media (min-width: 601px) {
  .mw-expand-button, .mw-expand-button--block, [data-expand-opener][aria-expanded] { display: none; }
}
/* 폰: 접어 둬요. 닫힌 곳은 화면에 없고(display: none), 앞부분만 보이는 곳(--peek)은 세 줄을 보여 주고 아래가 흐려져요 */
@media (max-width: 600px) {
  .mw-expand { display: none; grid-template-rows: 0fr; }
  .mw-expand--open { display: grid; grid-template-rows: 1fr; }
  /* 높이가 자라는 동안 넘치는 내용을 잘라요. 다 열리면 자르지 않아서 포커스 테두리와 그림자가 온전히 보여요 */
  .mw-expand__body { overflow: hidden; }
  .mw-expand--open > .mw-expand__body { overflow: visible; }
  .mw-expand--peek { display: grid; }
  .mw-expand--peek > .mw-expand__body { min-height: var(--mw-expand-peek, calc(var(--mw-expand-lines, 3) * 1lh)); }
  .mw-expand--peek:not(.mw-expand--open) > .mw-expand__body { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--space-32)), transparent); mask-image: linear-gradient(to bottom, black calc(100% - var(--space-32)), transparent); }
  /* 내용이 앞부분 안에 다 들어오면(--fits: 키트의 Expand와 expand.js가 재서 붙여요) 흐림도 없고 여는 버튼도 없어요 */
  .mw-expand--fits { grid-template-rows: 1fr; }
  .mw-expand--peek.mw-expand--fits > .mw-expand__body { min-height: 0; -webkit-mask-image: none; mask-image: none; }
}
/* 폰에서 펼치고 접는 움직임: 열릴 때 300ms, 닫힐 때 200ms예요. 격자의 줄이 0fr에서 1fr로 자라서 내용의 높이를 몰라도 아래 내용을 부드럽게 밀어요 */
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  /* (닫힌 곳(display: none)에서 시작하는 전환을 모르는 브라우저에서는 바로 열리고 닫혀요) */
  @supports (transition-behavior: allow-discrete) {
    .mw-expand { transition: grid-template-rows var(--motion-duration-medium) var(--mw-ease), display var(--motion-duration-medium) allow-discrete; }
    .mw-expand--open { transition: grid-template-rows var(--motion-duration-long) var(--mw-ease), display var(--motion-duration-long) allow-discrete; }
    .mw-expand__body { opacity: 0; translate: 0 calc(var(--space-8) * -1); transition: opacity var(--motion-duration-short) linear, translate var(--motion-duration-medium) var(--mw-ease); }
    .mw-expand--open > .mw-expand__body { opacity: 1; translate: none; transition: opacity var(--motion-duration-medium) linear var(--motion-duration-short), translate var(--motion-duration-long) var(--mw-ease), overflow 0s linear var(--motion-duration-long) allow-discrete; }
    .mw-expand--peek > .mw-expand__body { opacity: 1; translate: none; }
    /* (--live: 손이 한 번이라도 여닫은 곳이에요. 화면이 뜰 때부터 열려 있는 곳은 움직이지 않고 그냥 서 있어요) */
    @starting-style {
      .mw-expand--live.mw-expand--open:not(.mw-expand--peek) { grid-template-rows: 0fr; }
      .mw-expand--live.mw-expand--open:not(.mw-expand--peek) > .mw-expand__body { overflow: hidden; opacity: 0; translate: 0 calc(var(--space-8) * -1); }
    }
  }
}

/* ── 움직임 ── */
@media (prefers-reduced-motion: no-preference) {
  .mw-live:not(.mw-live--off):not(.mw-live--down) { animation: mw-pulse 2.4s infinite; }
  .mw-hero::before { animation: mw-float 12s ease-in-out infinite alternate; }
  .mw-pull--busy .mw-pull__ring { animation: mw-turn 0.8s linear infinite; }
}
@keyframes mw-pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes mw-float { to { transform: translateY(15px); } }
@keyframes mw-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mw-root *, .mw-root *::before, .mw-root *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}