: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; }