style(fe): enforce global design tokens for grid density, font scale and component heights in tokens.css and base.css

AGENTS.md

@@ -100,6 +100,7 @@ All work in this repository MUST follow `docs/CURRENT/WBS_EXECUTION_PROCEDURES.m
   3. **Multi-Selection Batch Toolbar (Grid Top/Bottom Selection Bar)**: Activated conditionally upon multi-row selection for **Bulk Actions** (e.g., `선택 일괄 승인(3)`, `선택 일괄 삭제`).
 - **[CRITICAL IRON RULE] Standardized Loading Skeleton Rule**: ALL screen-level and section-level data loading MUST render animated `SkeletonLoader` (shimmer mode) matching the expected layout (e.g. `skeletonType="table"` for grids, `skeletonType="card"` for forms/summaries) through `QueryStateBoundary`/`StandardScreenBoundary`. Static text ("불러오는 중...") or empty screen placeholders during loading states are STRICTLY PROHIBITED.
 - **[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.
 
 ## v16.0 Gitea API & CI/CD Automation
 
@@ -362,6 +363,7 @@ Every task — code change, refactor, new feature, tooling, infrastructure — m
 - [ ] **Button Standard (UI):** 상단 툴바(배치/등록), 행별 작업(수정/상세), 다중선택(일괄), 폼 푸터(취소/저장) 버튼 배치가 규칙 매트릭스를 따르는가?
 - [ ] **Skeleton Loading (UI):** 로딩 상태 시 텍스트 대신 레이아웃에 반응하는 shimmer 스켈레톤(SkeletonLoader)이 제대로 노출되는가?
 - [ ] **Empty State (UI):** 데이터 0건 또는 조회 결과가 없을 시 표준 EmptyStatePlaceholder(아이콘+설명+조치버튼)가 노출되는가?
+- [ ] **Component Scale (UI):** 입력폼, 그리드, 버튼, 선택상자 높이/폰트가 중앙 토큰(`tokens.css`) 규격(헤더 30px, 행 28px, 컨트롤 28px, 폰트 12px)을 따르는가?
 
 ### Anti-Patterns (금지)
 
@@ -370,6 +372,7 @@ Every task — code change, refactor, new feature, tooling, infrastructure — m
 - ❌ "버튼 위치 난잡 배치" → 상단 우측(페이지/배치), 행 내부(개별 CRUD), 선택바(일괄), 폼 푸터(저장/취소) 표준 무시 금지
 - ❌ "로딩 시 '불러오는 중...' 텍스트 방치" → 반드시 레이아웃 맞춤형 애니메이션 스켈레톤(SkeletonLoader) 적용 필수
 - ❌ "데이터 0건 시 빈 흰색 공간 방치" → 반드시 표준 EmptyStatePlaceholder 컴포넌트 렌더링 필수
+- ❌ "개별 인라인 height/font style 난립" → 반드시 중앙 tokens.css / base.css 디자인 토큰 상속 필수
 - ❌ "혹시 필요할까봐 추상화" → Necessity-driven만
 - ❌ SELECT * / Generic Repository → Explicit columns, explicit logic
 - ❌ "이건 작은 변경이라 테스트 스킵" → 모든 경로 characterize

frontend/src/design-system/base.css

@@ -38,3 +38,31 @@ a { color: var(--ks-color-action); }
 .ks-inline { display: flex; align-items: center; gap: var(--ks-space-2); flex-wrap: wrap; }
 .ks-muted { color: var(--ks-color-text-muted); }
 .ks-danger-text { color: var(--ks-color-danger); }
+
+/* Global Ultra-Dense Form Control & Button Density Standardization (전역 통일 규격) */
+input[type="text"], input[type="number"], input[type="date"], select, .p-inputtext, .p-select, .p-dropdown {
+  height: var(--ks-control-height) !important;
+  font-size: var(--ks-font-body) !important;
+  padding: 0 var(--ks-space-2) !important;
+  border-radius: var(--ks-radius-sm) !important;
+  border-color: var(--ks-color-border) !important;
+}
+
+button, .p-button {
+  height: var(--ks-control-height) !important;
+  font-size: var(--ks-font-body) !important;
+  padding: 0 var(--ks-space-3) !important;
+  border-radius: var(--ks-radius-sm) !important;
+}
+
+.p-button-sm {
+  height: 24px !important;
+  font-size: var(--ks-font-caption) !important;
+  padding: 0 var(--ks-space-2) !important;
+}
+
+.p-button-lg {
+  height: 32px !important;
+  font-size: var(--ks-font-section) !important;
+  padding: 0 var(--ks-space-4) !important;
+}

frontend/src/design-system/tokens.css

@@ -181,17 +181,18 @@
 }
 
 /* AG Grid Global Theme & Density Standardization Rule (AG Grid 통일 규격) */
-.ag-theme-quartz, .ag-theme-alpine {
+.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: var(--ks-font-family-base) !important;
+  --ag-font-family: Inter, Pretendard, system-ui, -apple-system, sans-serif !important;
   --ag-border-color: var(--ks-color-border) !important;
   --ag-header-background-color: var(--ks-color-canvas) !important;
   --ag-row-hover-color: var(--ks-color-neutral-100) !important;
   --ag-selected-row-background-color: rgba(59, 130, 246, 0.1) !important;
+  font-size: var(--ks-font-grid) !important;
 }
 
 /* Raw Table Standard Grid Class for legacy fallback tables */