feat(frontend): 09_UI_DESIGN 디자인 시스템 전체 적용

테마 / 폰트 / 아이콘:
- ConfigProvider theme 토큰 30+ 추가 (브랜드 컬러, 폰트, 라운딩, 메뉴/테이블/버튼)
- Pretendard 폰트 link + index.css fontFamily 적용
- @tabler/icons-react 추가, MainLayout 에 적용

레이아웃:
- styles/variables.css 신규 (--ga-* 변수 30+)
- MainLayout: Header 48px 흰색 + bottom border, Sider 220px + 토글,
  Content 1400px 중앙 정렬, 정산월 MonthPicker, 햄버거 토글

공통 컴포넌트:
- CodeBadge: 4단계 색상 매핑 (success/info/warning/danger), 누락 코드 보강
- MoneyText: 양수 #0F6E56, 음수 #E24B4A, 0 #888 (CSS 변수 사용)
- SearchForm: 배경 #fafafa, borderRadius 8, padding 12px 16px
- DataGrid: rowHeight 36, headerHeight 38, AG_GRID_LOCALE_KO,
  합계행 getRowStyle 회색 배경 + 굵게

페이지 페이지네이션 통일:
- utils/tablePagination.ts 신규 (showTotal '총 N건', pageSizeOptions [20/50/100])
- 7개 페이지 (Agent/Contract/Recruit/Exception/Settle/Payment/User) 적용

검증: tsc -b 통과 / vite build 성공 (10s) / 백엔드 단위테스트 76건 영향 없음

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

ga-frontend/src/main.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ConfigProvider } from 'antd';
+import { ConfigProvider, ThemeConfig } from 'antd';
 import koKR from 'antd/locale/ko_KR';
 import 'dayjs/locale/ko';
 import App from './App';
@@ -12,9 +12,73 @@ const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: 1, staleTime: 30_000 } },
 });
 
+const theme: ThemeConfig = {
+  token: {
+    // 브랜드
+    colorPrimary: '#1677FF',
+    colorSuccess: '#0F6E56',
+    colorWarning: '#BA7517',
+    colorError:   '#E24B4A',
+    colorInfo:    '#1677FF',
+
+    // 폰트
+    fontFamily: "'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif",
+    fontSize: 13,
+    fontSizeHeading1: 22,
+    fontSizeHeading2: 18,
+    fontSizeHeading3: 16,
+
+    // 라운딩
+    borderRadius:   6,
+    borderRadiusLG: 8,
+
+    // 간격
+    padding:   16,
+    paddingLG: 24,
+    margin:    16,
+
+    // 배경
+    colorBgContainer: '#ffffff',
+    colorBgLayout:    '#f5f5f5',
+    colorBgElevated:  '#ffffff',
+  },
+  components: {
+    Menu: {
+      itemHeight: 40,
+      itemMarginInline: 8,
+      itemBorderRadius: 6,
+      subMenuItemBg: 'transparent',
+      itemSelectedBg: '#e6f1fb',
+      itemSelectedColor: '#185fa5',
+    },
+    Table: {
+      headerBg: '#fafafa',
+      rowHoverBg: '#f5f7fa',
+      cellPaddingBlock: 10,
+      cellPaddingInline: 12,
+      headerSplitColor: '#f0f0f0',
+    },
+    Button: {
+      controlHeight: 32,
+      controlHeightSM: 28,
+      paddingInline: 16,
+    },
+    Input:  { controlHeight: 32, paddingInline: 10 },
+    Select: { controlHeight: 32 },
+    Card:   { paddingLG: 16 },
+    Layout: {
+      headerHeight: 48,
+      headerBg: '#ffffff',
+      headerPadding: '0 16px',
+      siderBg: '#ffffff',
+      bodyBg: '#f5f5f5',
+    },
+  },
+};
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <ConfigProvider locale={koKR}>
+    <ConfigProvider locale={koKR} theme={theme}>
       <QueryClientProvider client={queryClient}>
         <BrowserRouter>
           <App />