:root {
  /* ============================================================
   * 컴포넌트 Radius (flat 테마)
   * ============================================================ */
  --button-common-radius: var(--radius-small);
  --card-common-radius: var(--radius-large);
  --box-solid-radius: var(--radius-large);
  --badge-common-radius: var(--radius-small);
  --tabs-container-radius: var(--radius-small);

  /* Progress / Switch / Scrollbar — pill(--radius-max) 기본을 flat으로 통일 */
  --progress-radius: var(--radius-small);
  --switch-common-radius: var(--radius-none);
  --scrollbar-radius: var(--radius-none);

  /* ============================================================
   * Table Header — Primary 배경 + onbrand 텍스트
   * ============================================================ */
  --table-item-header-bg: var(--color-bg-primary-default);
  --table-item-header-font: var(--font-color-onbrand-default);
  --table-item-header-icon: var(--icon-color-onbrand-default);

  /* Table — 마지막 행 색상을 일반 행과 동일하게 */
  --table-item-cell-last-bg: var(--color-bg-surface-alt);
  --table-item-cell-last-font: var(--font-color-primary-default);
  --table-item-cell-last-icon: var(--icon-color-primary-muted);

  --table-item-common-padding-x: var(--spacing-component-padding-md);
  --table-item-common-padding-y: var(--spacing-component-padding-md);

  /* ============================================================
   * Badge — 라이트/다크 모드 텍스트 색상 통일
   * cs-ui 기본값은 primary-default(라이트:어두움 / 다크:흰색)여서 모드 간 불일치.
   * 브랜드 배경(오렌지) 위 흰색으로 양쪽 모드 통일.
   * ============================================================ */
  --badge-solid-font: var(--font-color-onbrand-default);

  /* ============================================================
   * Onbrand 전역 대비 보정 (onbrand=white)
   * 라이트모드에서 투명/surface 배경 위 흰색 텍스트 → 안 보이는 문제 해결
   * 시맨틱 토큰 참조로 라이트/다크 자동 전환
   * ============================================================ */

  /* Button outline (bg: surface→투명) — default / hover 브랜드, font=icon 색 일치 */
  --button-outline-default-font: var(--color-bg-primary-default);
  --button-outline-default-icon: var(--color-bg-primary-default);
  --button-outline-hover-font: var(--color-bg-primary-default);
  --button-outline-hover-icon: var(--color-bg-primary-default);

  /* Button ghost (bg: transparent) — default 중립 / hover 브랜드, font=icon 색 일치 */
  --button-ghost-default-font: var(--font-color-primary-default);
  --button-ghost-default-icon: var(--font-color-primary-default);
  --button-ghost-hover-font: var(--color-bg-primary-default);
  --button-ghost-hover-icon: var(--color-bg-primary-default);

  /* Toggle — flat radius + active bg 위 onbrand 텍스트/아이콘 유지 */
  --toggle-common-radius: var(--radius-none);
  --toggle-solid-default-icon: var(--icon-color-primary-default);
  --toggle-solid-hover-icon: var(--icon-color-primary-default);
  --toggle-solid-active-bg: var(--color-bg-secondary-default);
  --toggle-solid-active-font: var(--font-color-onbrand-default);
  --toggle-solid-active-icon: var(--icon-color-onbrand-default);

  /* Toggle outline — active bg/border는 cs-ui 기본(secondary) 유지, 그 위 onbrand 텍스트/아이콘만 보정 */
  --toggle-outline-default-icon: var(--icon-color-primary-default);
  --toggle-outline-hover-icon: var(--icon-color-primary-default);
  --toggle-outline-active-font: var(--font-color-onbrand-default);
  --toggle-outline-active-icon: var(--icon-color-onbrand-default);

  /* Tabs solid-line (off/hover bg: surface-default) */
  --tabs-item-solid-line-off-font: var(--font-color-secondary-default);
  --tabs-item-solid-line-off-icon: var(--icon-color-primary-default);
  --tabs-item-solid-line-hover-font: var(--font-color-secondary-default);
  --tabs-item-solid-line-hover-icon: var(--icon-color-primary-default);

  /* Pagination (bg: transparent/surface) */
  --pagination-link-default-font: var(--font-color-primary-default);
  --pagination-link-default-icon: var(--icon-color-primary-default);
  --pagination-link-hover-font: var(--font-color-primary-default);
  --pagination-link-hover-icon: var(--icon-color-primary-default);
  --pagination-item-default-font: var(--font-color-primary-default);
  --pagination-item-hover-font: var(--font-color-primary-default);

  /* Toast (bg: surface) */
  --toast-default-title: var(--font-color-primary-default);
  --toast-default-icon: var(--icon-color-primary-default);

  /* Calendar (bg: surface, 선택 날짜(current) bg primary→secondary + 그 위 onbrand 흰색) */
  --calendar-date-picker-icon: var(--icon-color-primary-default);
  --calendar-container-icon: var(--icon-color-primary-default);
  --calendar-days-current-bg: var(--color-bg-secondary-default);
  --calendar-days-current-font: var(--font-color-onbrand-default);

  /* Input outline (bg: surface-default) */
  --input-outline-default-icon: var(--icon-color-primary-default);
  --input-outline-hover-icon: var(--icon-color-primary-default);
  --input-outline-focus-icon: var(--icon-color-primary-default);
  --input-outline-filled-icon: var(--icon-color-primary-default);

  /* Select (bg: surface-default) */
  --select-base-default-icon: var(--icon-color-primary-default);
  --select-base-hover-icon: var(--icon-color-primary-default);

  /* Dropdown scroll icon */
  --dropdown-item-scroll-icon: var(--icon-color-primary-default);

  /* Accordion default (bg: surface-default) */
  --accordion-default-closed-icon: var(--icon-color-primary-default);
  --accordion-default-open-icon: var(--icon-color-primary-default);
  --accordion-default-hover-icon: var(--icon-color-primary-default);

  /* Accordion custom (bg: surface-muted/accent) */
  --accordion-custom-closed-icon: var(--icon-color-primary-default);
  --accordion-custom-hover-icon: var(--icon-color-primary-default);
  --accordion-custom-open-icon: var(--icon-color-primary-default);

  /* Navigation button solid-ghost (default bg: transparent, active bg: primary) */
  --navigation-button-solid-ghost-default-icon: var(--icon-color-primary-default);
  --navigation-button-solid-ghost-active-font: var(--font-color-onbrand-default);
  --navigation-button-solid-ghost-active-icon: var(--icon-color-onbrand-default);

  /* Navigation button bottom-border (bg: transparent, active bg: primary) */
  --navigation-button-bottom-border-default-icon: var(--icon-color-primary-default);
  --navigation-button-bottom-border-hover-font: var(--font-color-secondary-default);
  --navigation-button-bottom-border-hover-icon: var(--icon-color-primary-default);
  --navigation-button-bottom-border-active-font: var(--font-color-onbrand-default);
  --navigation-button-bottom-border-active-icon: var(--icon-color-onbrand-default);

  /* Navigation item (bg: transparent, hover bg: primary-muted) */
  --navigation-item-default-icon: var(--icon-color-primary-default);
  --navigation-item-hover-font: var(--font-color-primary-default);
  --navigation-item-hover-icon: var(--icon-color-primary-default);
  --navigation-item-content-default-icon: var(--icon-color-primary-default);
  --navigation-item-content-hover-icon: var(--icon-color-primary-default);

  /* Navigation gradient (default bg: transparent) */
  --navigation-button-gradient-default-icon: var(--icon-color-primary-default);
  --navigation-button-gradient-active-icon: var(--icon-color-primary-default);

  /* Empty state (bg: surface) */
  --empty-container-content-icon: var(--icon-color-primary-default);

  /* Dropzone (bg: surface) */
  --dropzone-container-icon-color: var(--icon-color-primary-default);

  /* Select small */
  --select-small-default-icon: var(--icon-color-primary-default);
  --select-small-hover-icon: var(--icon-color-primary-default);

  /* ============================================================
   * Accordion custom — Card와 동일한 surface-default로 통일
   * cs-ui 기본값(surface-muted)은 카드보다 어두워 같은 페이지에서 컨테이너 색이 어긋남
   * ============================================================ */
  --accordion-custom-closed-bg: var(--color-bg-surface-default);
  --accordion-custom-open-bg: var(--color-bg-surface-default);
  --accordion-custom-hover-bg: var(--color-bg-surface-default);

  /* ============================================================
   * 차트 — Primary(오렌지) + Secondary(딥틸 #12495E)로 가시성 확보
   * ============================================================ */
  --color-chart-data-vis-brand-1: var(--color-theme-primary-100);
  --color-chart-data-vis-brand-2: var(--color-theme-secondary-100);

  --box-outline-padding-x: var(--spacing-component-padding-lg);
  --box-outline-padding-y: var(--spacing-component-padding-lg);
  --box-solid-padding-x: var(--spacing-component-padding-lg);
  --box-solid-padding-y: var(--spacing-component-padding-lg);
}

/* ============================================================
 * Table Row — hover 배경 강조
 * cs-ui CsTableRow에 hover 토큰이 없으므로 data-slot 선택자로 추가
 * ============================================================ */
[data-slot="table-body"] > [data-slot="table-row"]:hover > td {
  background-color: var(--color-bg-surface-muted);
  transition: background-color 0.15s ease;
}