feat(ui): 공용 표 글자 14px · 열 폭 같은 비율(155-1)

- 표 글 12 → 14px(--text-body-sm) · 줄 높이 28px
- 열 폭 = 페이지 값(12px 글 기준) × 14/12 — 고정 열 left · 표 폭 함께
- 시험 test_ui_data_table 에 폭 · CSS 단정

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015KYZ2HWWdUwZWYnn3tQz7X

ui_template/ui_template_data_table.ts

@@ -26,7 +26,7 @@ export interface DataColumn {
   decimals?: number;
   /** 끝 0 지움(decimals 는 최대 자리) — 사용자가 넣는 값처럼 자리가 줄마다 다른 열 */
   trim?: boolean;
-  /** 열 폭 px(기본 숫자 84 · 글 96) */
+  /** 열 폭 px(12px 글 기준 · 기본 숫자 84 · 글 96) — 그릴 때 글 비 SCALE 을 곱함 */
   width?: number;
   /** 맨 아래 머리 칸 풍선 글(기본 label) */
   title?: string;
@@ -70,8 +70,11 @@ const EMPTY = "-";
 const ESC: Record<string, string> = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" };
 const esc = (s: string): string => s.replace(/[&<>"]/g, (c) => ESC[c]);
 
+/** 글 크기 비(14px ÷ 12px) — 페이지가 준 열 폭(12px 글 기준)을 같은 비율로 넓힘 */
+export const SCALE = 14 / 12;
+
 function colWidth(c: DataColumn): number {
-  return c.width ?? (c.kind === "number" ? 84 : 96);
+  return Math.round((c.width ?? (c.kind === "number" ? 84 : 96)) * SCALE);
 }
 
 /** 값 한 칸 → [보일 글, 빈 값인지] */
@@ -226,7 +229,7 @@ export function createDataTable(opts: DataTableOptions): DataTable {
   root.className = "ui-data-table";
   root.tabIndex = 0; // 키보드로 표 안 스크롤
   const state = { ...opts };
-  let win: RowWindow = { from: -1, to: -1, rowH: 24 }; // --dt-row-h · 그린 뒤 재서 고침
+  let win: RowWindow = { from: -1, to: -1, rowH: 28 }; // --dt-row-h · 그린 뒤 재서 고침
   // 보이는 줄 근처만 그림 — 줄 1,000개를 다 배치하면 수백 ms
   const draw = (force: boolean) => {
     const n = state.rows.length;