🎨 Palette: HTML 리포트 내 숫자 데이터 가독성 개선 (tabular-nums 적용)

.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.
+## 2025-02-17 - Tabular Nums For Data Reports
+**Learning:** In data-heavy static HTML reports, reading and comparing numeric values vertically is difficult when numbers lack a uniform width, especially with variable-width fonts.
+**Action:** Always include `font-variant-numeric: tabular-nums;` in body styles or data-heavy components within HTML reports to ensure numbers align properly vertically for improved readability and scanning.

CHANGELOG.md

@@ -16,6 +16,7 @@
 
 ### Changed
 
+- Applied `font-variant-numeric: tabular-nums` to the generated diagnostics
 - Rust EAP scoring now defaults to GPU-preferred `auto` execution in the core,
   PyO3 binding, and serving API. The f64 CPU reduction remains available via
   `device="cpu"`; an explicit unavailable `device="gpu"` request now warns

python/fast_mlsirm/report.py

@@ -462,6 +462,7 @@ def _css() -> str:
 }
 
 body {
+  font-variant-numeric: tabular-nums;
   margin: 0;
   background: var(--bg);
   color: var(--text);

scripts/build_benchmark_report.py

@@ -253,6 +253,7 @@ def _report_css() -> str:
   box-sizing: border-box;
 }
 body {
+  font-variant-numeric: tabular-nums;
   margin: 0;
 }
 main {

scripts/build_buyer_packet.py

@@ -307,6 +307,7 @@ def _report_css() -> str:
   box-sizing: border-box;
 }
 body {
+  font-variant-numeric: tabular-nums;
   margin: 0;
 }
 main {

scripts/build_commercial_release.py

@@ -232,6 +232,7 @@ def _report_css() -> str:
   box-sizing: border-box;
 }
 body {
+  font-variant-numeric: tabular-nums;
   margin: 0;
 }
 main {

scripts/build_figma_evidence_sync.py

@@ -127,7 +127,7 @@ def _report_css() -> str:
     return """
 :root { color: #172026; background: #f5f7f8; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
 * { box-sizing: border-box; }
-body { margin: 0; }
+body { margin: 0; font-variant-numeric: tabular-nums; }
 main { max-width: 1120px; margin: 0 auto; padding: 32px 20px 56px; }
 .hero { background: #12343b; color: #fff; border-radius: 8px; padding: 28px; }
 .hero p, .hero h1 { margin: 0; }

scripts/build_pr_queue_governance.py

@@ -272,7 +272,7 @@ def _report_css() -> str:
     return """
 :root { color: #172026; background: #f5f7f8; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
 * { box-sizing: border-box; }
-body { margin: 0; }
+body { margin: 0; font-variant-numeric: tabular-nums; }
 main { max-width: 1180px; margin: 0 auto; padding: 32px 20px 56px; }
 .hero { background: #12343b; color: #fff; border-radius: 8px; padding: 28px; }
 .hero p, .hero h1 { margin: 0; }

scripts/build_procurement_due_diligence.py

@@ -289,7 +289,7 @@ def _report_css() -> str:
     return """
 :root { color: #172026; background: #f5f7f8; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
 * { box-sizing: border-box; }
-body { margin: 0; }
+body { margin: 0; font-variant-numeric: tabular-nums; }
 main { max-width: 1120px; margin: 0 auto; padding: 32px 20px 56px; }
 .hero { background: #12343b; color: #fff; border-radius: 8px; padding: 28px; }
 .hero p, .hero h1 { margin: 0; }

scripts/build_release_evidence_index.py

@@ -260,6 +260,7 @@ def _report_css() -> str:
   box-sizing: border-box;
 }
 body {
+  font-variant-numeric: tabular-nums;
   margin: 0;
 }
 main {