From 5f997c99d1425eb7c980f789e43a75afb9795ad4 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 16 Jul 2026 07:33:38 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20HTML=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8F=AC=ED=8A=B8=EC=9D=98=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=EA=B0=80=EB=8F=85=EC=84=B1=EC=9D=84=20=EC=9C=84=ED=95=9C=20tab?=
 =?UTF-8?q?ular-nums=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20=ED=98=B8=EB=B2=84?=
 =?UTF-8?q?=20=EB=8C=80=EB=B9=84=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

데이터 기반 정적 HTML 리포트에서 시스템 기본 폰트는 비례 글꼴(proportional numbers)로 숫자를 표시하여, 메트릭 표 및 차트의 숫자들이 수직으로 정렬되지 않는 UX 문제가 있었습니다. 본 커밋은 본문 CSS에 `font-variant-numeric: tabular-nums;`를 적용하여 모든 숫자가 동일한 너비를 갖게 함으로써 데이터 스캐닝을 크게 향상시켰습니다. 또한 데이터 그리드의 시선 추적을 돕기 위해 `tbody tr:hover`의 배경색을 살짝 더 눈에 띄게(#f4f6f3) 업데이트하였습니다. 관련 UX 러닝은 `.Jules/palette.md`에 기록되었습니다.
---
 .Jules/palette.md            | 3 +++
 python/fast_mlsirm/report.py | 5 +++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 8a5a46f6c..9858f7c77 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -8,3 +8,6 @@
 ## 2024-10-24 - CSS Bar Chart Animation
 **Learning:** CSS animations can enhance static data visualizations without requiring JavaScript, providing visual polish and reducing perceived loading times for data.
 **Action:** Use CSS keyframe animations for simple visual improvements in static reports.
+## 2026-07-16 - Tabular Nums for Data Alignment
+**Learning:** System fonts default to proportional numbers, making vertically aligned data hard to read and scan in data-heavy HTML reports.
+**Action:** Always include `font-variant-numeric: tabular-nums;` in data-heavy components or body styles to ensure numbers align properly in metric cards, bar charts, and data tables.
diff --git a/python/fast_mlsirm/report.py b/python/fast_mlsirm/report.py
index 30ee4276b..bc30c8258 100644
--- a/python/fast_mlsirm/report.py
+++ b/python/fast_mlsirm/report.py
@@ -465,7 +465,8 @@ def _css() -> str:
   margin: 0;
   background: var(--bg);
   color: var(--text);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-variant-numeric: tabular-nums;
   line-height: 1.5;
 }
 
@@ -702,7 +703,7 @@ def _css() -> str:
 }
 
 tbody tr:hover {
-  background: #fbfcfa;
+  background: #f4f6f3;
 }
 
 .empty-state {