style(fe): standardize AG Grid Odd/Even Zebra Stripes, Sky Blue hover and active row selection tokens in tokens.css and AGENTS.md

AGENTS.md

@@ -102,6 +102,11 @@ All work in this repository MUST follow `docs/CURRENT/WBS_EXECUTION_PROCEDURES.m
 - **[CRITICAL IRON RULE] Standardized Empty Data State Rule**: When zero records or empty dataset states occur, ALL grids, lists, and summary cards MUST render standard `EmptyStatePlaceholder` component (`📭` icon, clear title, descriptive helper text, and optional recovery action button). Blank white spaces or plain `<p>데이터가 없습니다</p>` text tags are STRICTLY PROHIBITED.
 - **[CRITICAL IRON RULE] Standardized UI Component Scale & Density Rule**: ALL UI components (grids, inputs, buttons, select, date fields, cards) MUST strictly inherit central Design System Tokens (`tokens.css` / `base.css`). Custom inline height/font overrides are STRICTLY PROHIBITED. Grid header height (`30px`), row height (`28px`), control height (`28px`), and grid font size (`12px`) MUST be universally uniform across all screens.
 - **[CRITICAL IRON RULE] Standardized Grid Row Numbering Rule**: Unless explicitly disabled (`showRowNumber: false`), ALL data grids MUST automatically prepend a pinned left `No.` column rendering 1-indexed sequential row numbers (`node.rowIndex + 1`) centered with `54px` fixed width.
+- **[CRITICAL IRON RULE] Standardized Grid Theme, Zebra Stripes & Color Palette Rule**: ALL data grids MUST inherit central Theme Color Tokens (`tokens.css`) without ad-hoc inline overrides. Grids MUST enforce:
+  1. **Header Background**: Premium Header Gray `#f1f5f9` (Dark Mode: `#1e293b`), font-weight: `700`.
+  2. **Zebra Stripes (Odd Rows)**: Even rows `#ffffff`, Odd rows (`.ag-row-odd`) `#f8fafc` (Dark Mode: `#0f172a`).
+  3. **Hover Color**: Sky Light Blue `#e0f2fe` (Dark Mode: `#334155`).
+  4. **Active Selection Color**: Active Selected Row Sky Blue `#dbeafe` with bold text `#1e3a8a` (Dark Mode: `#1e3a8a`).
 
 ## v16.0 Gitea API & CI/CD Automation
 

frontend/src/design-system/tokens.css

@@ -190,14 +190,31 @@
   --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-border) !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: var(--ks-color-neutral-100) !important;
-  --ag-selected-row-background-color: rgba(59, 130, 246, 0.1) !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;
@@ -205,6 +222,13 @@
   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;
 }
@@ -213,6 +237,19 @@
   border-bottom: 1px solid var(--ks-color-neutral-300) !important;
 }
 
+/* Odd row zebra stripe override for legacy/custom grid cells */
+.ag-row-odd {
+  background-color: #f8fafc !important;
+}
+.ag-row-even {
+  background-color: #ffffff !important;
+}
+.ag-row-selected {
+  background-color: #dbeafe !important;
+  color: #1e3a8a !important;
+  font-weight: 600 !important;
+}
+
 /* Raw Table Standard Grid Class for legacy fallback tables */
 .grid-table, .kbx-grid-table, .models-table, .shadow-runs-table {
   width: 100%;