:root {
  /* KBX v60 Semantic & Financial Palette */
  --ks-color-action: #2563eb;
  --ks-color-action-hover: #1d4ed8;
  --ks-color-info: #0284c7;
  --ks-color-success: #16a34a;
  --ks-color-warning: #d97706;
  --ks-color-danger: #dc2626;
  --ks-color-up: #e11d48;     /* KRX 상승 Red */
  --ks-color-down: #2563eb;   /* KRX 하락 Blue */
  
  /* KBX v60 Neutral Color Scale */
  --ks-color-neutral-950: #0f172a;
  --ks-color-neutral-900: #1e293b;
  --ks-color-neutral-800: #334155;
  --ks-color-neutral-700: #475569;
  --ks-color-neutral-600: #64748b;
  --ks-color-neutral-500: #94a3b8;
  --ks-color-neutral-300: #cbd5e1;
  --ks-color-neutral-200: #e2e8f0;
  --ks-color-neutral-100: #f1f5f9;
  --ks-color-neutral-50:  #f8fafc;
  
  /* KBX v60 Surface & Canvas */
  --ks-color-surface: #ffffff;
  --ks-color-surface-raised: #ffffff;
  --ks-color-canvas: #f8fafc;
  --ks-color-focus: #2563eb;
  --ks-color-text: var(--ks-color-neutral-950);
  --ks-color-text-muted: var(--ks-color-neutral-600);
  --ks-color-text-on-dark: #ffffff;
  --ks-color-border: var(--ks-color-neutral-200);
  --ks-color-border-strong: var(--ks-color-neutral-300);
  --ks-color-warning-border: var(--ks-color-warning);
  
  /* KBX v60 ERP/OMS/WMS Ultra-Dense Spacing & Radius Standards */
  --ks-space-1: 2px;
  --ks-space-2: 6px;     /* KBX 기본 간격 6px */
  --ks-space-3: 8px;
  --ks-space-4: 12px;
  --ks-space-6: 16px;
  --ks-space-8: 24px;

  --ks-radius-sm: 3px;   /* KBX Ultra-Dense Radius 3px */
  --ks-radius-md: 3px;
  --ks-radius-lg: 4px;

  /* KBX v60 ERP/OMS/WMS Compact Typography Scale */
  --ks-font-page: 16px;       /* Page Title 16px */
  --ks-line-page: 22px;
  --ks-font-section: 14px;    /* Section Heading 14px */
  --ks-line-section: 18px;
  --ks-font-body: 12px;       /* Form / Body 12px */
  --ks-line-body: 16px;
  --ks-font-grid: 12px;       /* Grid Data 12px */
  --ks-line-grid: 16px;
  --ks-font-caption: 11px;    /* Caption / Helper 11px */
  --ks-line-caption: 14px;

  /* KBX v60 ERP/OMS/WMS Ultra-Dense Control & Layout Heights & Default Widths */
  --ks-control-height: 28px;           /* ERP/OMS Input Control 28px */
  --ks-field-label-width: 72px;        /* Standardized Inline Field Label Fixed Width 72px */
  --ks-set-width-sm: 200px;            /* Standardized Compact Field Set Width 200px */
  --ks-set-width-md: 260px;            /* Standardized Default Field Set Width 260px */
  --ks-set-width-lg: 340px;            /* Standardized Wide Field Set Width 340px */
  --ks-control-width-select: 160px;    /* Standard Select/Dropdown Default Width 160px */
  --ks-control-width-search: 220px;    /* Standard Search Input Default Width 220px */
  --ks-control-width-date: 140px;      /* Standard Date Field Default Width 140px */

  --ks-grid-row-height: 28px;          /* Ultra-Dense Grid Row 28px */
  --ks-grid-header-height: 30px;       /* Grid Header 30px */
  --ks-content-max: 100%;              /* Full Screen Utilization */
  
  /* KBX v60 Shell Compact Dimensions */
  --ks-shell-header-height: 38px;      /* Global Header 38px */
  --ks-shell-sidebar-width: 220px;     /* Side Nav Expanded 220px (§5) */
  --ks-shell-sidebar-collapsed: 56px;  /* Side Nav Collapsed 56px (§5) */
  --ks-shell-tabs-height: 32px;        /* Workspace Tabs 32px */
  --ks-shell-pageheader-height: 36px;  /* Page Header 36px */
  --ks-shell-commandbar-height: 34px;  /* Command Bar 34px */
  
  --ks-focus-ring-width: 2px;
  --ks-focus-ring-offset: 1px;

  /* Legacy & Shell Compatible Token Aliases */
  --color-background-primary: var(--ks-color-canvas);
  --color-background-secondary: var(--ks-color-surface);
  --color-background-hover: var(--ks-color-neutral-100);
  --color-background-active: var(--ks-color-neutral-200);
  --color-text-primary: var(--ks-color-text);
  --color-text-secondary: var(--ks-color-text-muted);
  --color-border-primary: var(--ks-color-border);
  --color-border-secondary: var(--ks-color-border-strong);
  --color-primary-100: rgba(37, 99, 235, 0.1);
  --color-primary-500: var(--ks-color-action);
  --color-primary-600: var(--ks-color-action-hover);
  --color-primary-700: #1e40af;
  --color-danger-500: var(--ks-color-danger);
  --color-danger-600: #b91c1c;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --spacing-1: var(--ks-space-1);
  --spacing-2: var(--ks-space-2);
  --spacing-3: var(--ks-space-3);
  --spacing-4: var(--ks-space-4);
  --spacing-5: 20px;
  --spacing-6: var(--ks-space-6);
  --border-radius-sm: var(--ks-radius-sm);
  --border-radius-base: var(--ks-radius-md);
  --border-radius-lg: var(--ks-radius-lg);
  --font-size-xs: var(--ks-font-caption);
  --font-size-sm: var(--ks-font-grid);
  --font-size-base: var(--ks-font-body);
  --font-size: var(--ks-font-body);
  --input-height: var(--ks-control-height);
  --transition-fast: var(--ks-transition-fast);
  --transition-base: var(--ks-transition-smooth);
  --transition-normal: var(--ks-transition-smooth);
  --shadow-sm: var(--ks-shadow-sm);
  --shadow-md: var(--ks-shadow-md);
  --shadow-lg: var(--ks-shadow-lg);

  /* KBX v60 High-End Elevation & Glassmorphism System */
  --ks-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --ks-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --ks-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --ks-shadow-glow: 0 0 16px rgba(37, 99, 235, 0.25);
  --ks-shadow-danger-glow: 0 0 16px rgba(220, 38, 38, 0.25);
  
  --ks-glass-bg: rgba(255, 255, 255, 0.85);
  --ks-glass-border: rgba(226, 232, 240, 0.8);
  --ks-glass-backdrop: blur(12px);

  /* Micro-animation Cubic Bezier Curves */
  --ks-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --ks-transition-smooth: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark Mode Theme Tokens */
[data-theme='dark'] {
  --ks-color-surface: #0f172a;
  --ks-color-surface-raised: #1e293b;
  --ks-color-surface-overlay: rgba(15, 23, 42, 0.85);
  --ks-color-canvas: #090d16;
  --ks-color-text: #f8fafc;
  --ks-color-text-muted: #94a3b8;
  --ks-color-border: #334155;
  --ks-color-border-strong: #475569;
  
  --ks-glass-bg: rgba(30, 41, 59, 0.75);
  --ks-glass-border: rgba(51, 65, 85, 0.6);
  --ks-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  --ks-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
  --ks-shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.5);
  --ks-shadow-glow: 0 0 20px rgba(59, 130, 246, 0.35);
}

[data-density='compact'] {
  --ks-control-height: 2.25rem;
  --ks-grid-density: 2rem;
}

/* User Age-Tier Font Accessibility Scales (사용자 연령대별 폰트 크기 표준) */
/* 1) 청년/청장년층 (20~40대): 고밀도 정보 습득용 초고밀도 미세 폰트 */
[data-font-scale='compact'] {
  --ks-font-page: 15px;
  --ks-font-section: 13px;
  --ks-font-body: 11px;
  --ks-font-grid: 11px;
  --ks-font-caption: 10px;
}

/* 2) 중장년층 (50대): 시인성 및 판독성이 확보된 표준 ERP 폰트 */
[data-font-scale='standard'] {
  --ks-font-page: 17px;
  --ks-font-section: 15px;
  --ks-font-body: 13px;
  --ks-font-grid: 13px;
  --ks-font-caption: 11.5px;
}

/* 3) 시니어/고령층 (60대 이상): 가독성 최우선 대형 폰트 */
[data-font-scale='senior'] {
  --ks-font-page: 20px;
  --ks-font-section: 17px;
  --ks-font-body: 15px;
  --ks-font-grid: 15px;
  --ks-font-caption: 13px;
}

/* AG Grid Global Theme & Density Standardization Rule (AG Grid 통일 규격) */
.ag-theme-quartz, .ag-theme-alpine, [class*="ag-theme-"], .ag-root-wrapper {
  --ag-grid-size: 3px !important;
  --ag-list-item-height: 28px !important;
  --ag-header-height: 30px !important;
  --ag-row-height: 28px !important;
  --ag-font-size: var(--ks-font-grid) !important;
  --ag-font-family: Inter, Pretendard, system-ui, -apple-system, sans-serif !important;
  --ag-border-color: var(--ks-color-neutral-200) !important;
  --ag-header-background-color: #f1f5f9 !important;
  --ag-header-foreground-color: var(--ks-color-neutral-800) !important;
  --ag-row-hover-color: #e0f2fe !important; /* Premium Sky Light Blue Hover */
  --ag-selected-row-background-color: #dbeafe !important; /* Premium Active Selected Row Sky Blue (#dbeafe) */
  --ag-odd-row-background-color: #f8fafc !important; /* KBX Odd Row Zebra Stripe Background (#f8fafc) */
  --ag-background-color: #ffffff !important; /* Even Row Background (#ffffff) */
  --ag-range-selection-border-color: #2563eb !important;
  font-size: var(--ks-font-grid) !important;
}

/* AG Grid Dark Mode Theme Tokens Overrides */
[data-theme='dark'] .ag-theme-quartz,
[data-theme='dark'] .ag-theme-alpine,
[data-theme='dark'] [class*="ag-theme-"],
[data-theme='dark'] .ag-root-wrapper {
  --ag-border-color: #334155 !important;
  --ag-header-background-color: #1e293b !important;
  --ag-header-foreground-color: #f8fafc !important;
  --ag-row-hover-color: #334155 !important;
  --ag-selected-row-background-color: #1e3a8a !important;
  --ag-odd-row-background-color: #0f172a !important;
  --ag-background-color: #090d16 !important;
}

.ag-header, .ag-header-row, .ag-header-cell {
  background-color: #f1f5f9 !important; /* KBX Standard Premium Header Gray (#f1f5f9) */
  color: var(--ks-color-neutral-800) !important;
  font-weight: 700 !important;
  font-size: var(--ks-font-grid) !important;
}

[data-theme='dark'] .ag-header,
[data-theme='dark'] .ag-header-row,
[data-theme='dark'] .ag-header-cell {
  background-color: #1e293b !important;
  color: #f8fafc !important;
}

.ag-header-cell {
  border-right: 1px solid var(--ks-color-neutral-200) !important;
}

.ag-header {
  border-bottom: 1px solid var(--ks-color-neutral-300) !important;
}

/* Odd row zebra stripe override for legacy/custom grid cells */
.ag-row-odd,
.ag-row-odd .ag-cell {
  background-color: #f8fafc !important; /* Subtle Elegance Demarcation (#f8fafc) */
}
.ag-row-even,
.ag-row-even .ag-cell {
  background-color: #ffffff !important;
}
.ag-row-selected,
.ag-row-selected .ag-cell,
.ag-row-selected .ag-cell-value {
  background-color: #eff6ff !important; /* Soft Soft Tint Blue #eff6ff */
  color: #0f172a !important; /* Ultra-High Contrast Dark Text #0f172a */
  font-weight: 700 !important;
}

[data-theme='dark'] .ag-row-selected,
[data-theme='dark'] .ag-row-selected .ag-cell,
[data-theme='dark'] .ag-row-selected .ag-cell-value {
  background-color: #1e3a8a !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Raw Table Standard Grid Class for legacy fallback tables */
.grid-table, .kbx-grid-table, .models-table, .shadow-runs-table, .ks-grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ks-font-grid);
  background: var(--ks-color-surface);
  border: 1px solid var(--ks-color-border-strong);
  border-radius: var(--ks-radius-sm);
}

.grid-table th, .kbx-grid-table th, .models-table th, .shadow-runs-table th, .ks-grid-table th {
  height: var(--ks-grid-header-height, 30px);
  padding: 0 10px;
  background-color: #f1f5f9;
  border-bottom: 2px solid var(--ks-color-border-strong);
  font-weight: 700;
  text-align: left;
  color: var(--ks-color-neutral-900);
}

[data-theme='dark'] .grid-table th,
[data-theme='dark'] .kbx-grid-table th,
[data-theme='dark'] .models-table th,
[data-theme='dark'] .shadow-runs-table th,
[data-theme='dark'] .ks-grid-table th {
  background-color: #1e293b;
  color: #f8fafc;
  border-bottom: 2px solid #475569;
}

.grid-table td, .kbx-grid-table td, .models-table td, .shadow-runs-table td, .ks-grid-table td {
  height: var(--ks-grid-row-height, 28px);
  padding: 0 10px;
  border-bottom: 1px solid var(--ks-color-border);
  color: var(--ks-color-neutral-950);
  box-sizing: border-border-box;
}

[data-theme='dark'] .grid-table td,
[data-theme='dark'] .kbx-grid-table td,
[data-theme='dark'] .models-table td,
[data-theme='dark'] .shadow-runs-table td,
[data-theme='dark'] .ks-grid-table td {
  color: #f8fafc;
  border-bottom: 1px solid #334155;
}

/* Zebra Stripes & Hover & Selection Rules */
.grid-table tr:nth-child(even), .kbx-grid-table tr:nth-child(even), .ks-grid-table tr:nth-child(even) {
  background-color: #ffffff;
}

.grid-table tr:nth-child(odd), .kbx-grid-table tr:nth-child(odd), .ks-grid-table tr:nth-child(odd) {
  background-color: #f8fafc;
}

[data-theme='dark'] .grid-table tr:nth-child(even),
[data-theme='dark'] .kbx-grid-table tr:nth-child(even),
[data-theme='dark'] .ks-grid-table tr:nth-child(even) {
  background-color: #0f172a;
}

[data-theme='dark'] .grid-table tr:nth-child(odd),
[data-theme='dark'] .kbx-grid-table tr:nth-child(odd),
[data-theme='dark'] .ks-grid-table tr:nth-child(odd) {
  background-color: #090d16;
}

.grid-table tr:hover, .kbx-grid-table tr:hover, .models-table tr:hover, .shadow-runs-table tr:hover, .ks-grid-table tr:hover, .ks-grid-row:hover {
  background-color: #e0f2fe !important;
}

[data-theme='dark'] .grid-table tr:hover,
[data-theme='dark'] .kbx-grid-table tr:hover,
[data-theme='dark'] .models-table tr:hover,
[data-theme='dark'] .shadow-runs-table tr:hover,
[data-theme='dark'] .ks-grid-table tr:hover,
[data-theme='dark'] .ks-grid-row:hover {
  background-color: #334155 !important;
}

.grid-table tr.selected, .ks-grid-table tr.selected, .ks-grid-row.selected {
  background-color: #dbeafe !important;
  color: #1e3a8a !important;
  font-weight: 700;
}


