diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index 2a4cbb9..fe71b9c 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -444,3 +444,20 @@ tbody tr:hover { background: var(--hover); }
 .help-item .hi-t { font-weight: 600; font-size: 0.9rem; margin-bottom: 3px; }
 .help-item .hi-d { font-size: 0.82rem; color: var(--text-2); line-height: 1.6; }
 .help-item .hi-d b { color: var(--text); font-weight: 600; }
+
+/* ===== Editorial identity touches (global) ===== */
+/* 헤딩은 디스플레이 페이스(라틴), 한글은 시스템 폴백 */
+.page-header h1 { font-weight: 800; letter-spacing: -.02em; }
+/* 사이드바 섹션 라벨 — 트래킹 강조 */
+.nav-section { font-weight: 700; letter-spacing: .12em; }
+/* 카드/패널 — 편집풍(평평, 보더 중심) */
+.card { box-shadow: var(--shadow); }
+/* primary 버튼 — 단색 버밀리언(그림자 절제) */
+.btn-primary { box-shadow: none; }
+.btn-primary:hover { filter: brightness(1.03); box-shadow: none; }
+/* 배지/칩 — 살짝 각지게 */
+.badge { border-radius: var(--r-sm); }
+/* 활성 nav — 굵게 */
+.nav-item.active { font-weight: 700; }
+/* 숫자/지표가 또렷하게 */
+:root { --font-tnum: var(--font-sans); }
diff --git a/src/main/resources/static/css/variables.css b/src/main/resources/static/css/variables.css
index 938a789..025c16c 100644
--- a/src/main/resources/static/css/variables.css
+++ b/src/main/resources/static/css/variables.css
@@ -1,50 +1,52 @@
 /* ===========================================================================
-   Design tokens — Refined SaaS, LIGHT default + DARK via [data-theme="dark"].
-   Old variable names are aliased to theme tokens so existing markup adapts.
+   Design tokens — Editorial (almanac) identity. LIGHT default + DARK.
+   Bricolage Grotesque (display) + Hanken Grotesk (body) + JetBrains Mono.
+   Paper canvas · ink text · vermilion signal. Old var names aliased so existing
+   markup adapts automatically.
    =========================================================================== */
 :root {
-    /* Surfaces (light) */
-    --bg: #f6f7f9;
-    --surface: #ffffff;
-    --surface-2: #f1f3f6;
-    --inset: #eef0f3;
-    --border: #e6e8ec;
-    --border-strong: #d9dce1;
+    /* Surfaces (light — warm paper) */
+    --bg: #f1ede3;
+    --surface: #fbfaf6;
+    --surface-2: #ece7da;
+    --inset: #e7e1d2;
+    --border: #dcd6c7;
+    --border-strong: #b9b19b;
 
-    /* Text (light) */
-    --text: #15181d;
-    --text-2: #5a626d;
-    --text-3: #9aa1ad;
+    /* Text (ink) */
+    --text: #17160f;
+    --text-2: #6f6a5c;
+    --text-3: #a8a293;
 
     /* On-surface translucent (hover/active) */
-    --hover: rgba(16, 24, 40, .045);
-    --hover-strong: rgba(16, 24, 40, .07);
+    --hover: rgba(23, 22, 15, .045);
+    --hover-strong: rgba(23, 22, 15, .07);
 
-    /* Elevation */
-    --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .05);
-    --shadow-lg: 0 10px 30px rgba(16, 24, 40, .10);
-    --side-bg: #ffffff;
+    /* Elevation (editorial = mostly borders; shadows subtle) */
+    --shadow: 0 1px 2px rgba(23, 22, 15, .05);
+    --shadow-lg: 0 14px 40px rgba(23, 22, 15, .14);
+    --side-bg: #fbfaf6;
 
-    /* Accent + status (shared across themes) */
-    --accent: #4f7cff;
-    --accent-2: #7c5cff;
-    --accent-soft: rgba(79, 124, 255, .10);
-    --primary: #4f7cff;
-    --primary-gradient: linear-gradient(135deg, #4f7cff 0%, #7c5cff 100%);
-    --primary-glow: rgba(79, 124, 255, .35);
-    --success: #10b981;
-    --danger: #f43f5e;
-    --warning: #f59e0b;
-    --green: #10b981;
-    --amber: #f59e0b;
-    --red: #f43f5e;
-    --purple: #8b5cf6;
-    --sky: #0ea5e9;
-    --primary-rgb: 79, 124, 255;
-    --success-rgb: 16, 185, 129;
-    --danger-rgb: 244, 63, 94;
+    /* Accent + status — vermilion signal */
+    --accent: #ff4d23;
+    --accent-2: #ff4d23;
+    --accent-soft: rgba(255, 77, 35, .12);
+    --primary: #ff4d23;
+    --primary-gradient: linear-gradient(135deg, #ff5a36 0%, #ff4d23 100%);
+    --primary-glow: rgba(255, 77, 35, .35);
+    --success: #1f7a3a;
+    --danger: #d6422a;
+    --warning: #c47a12;
+    --green: #1f7a3a;
+    --amber: #c47a12;
+    --red: #d6422a;
+    --purple: #7a5cff;
+    --sky: #1f6f9c;
+    --primary-rgb: 255, 77, 35;
+    --success-rgb: 31, 122, 58;
+    --danger-rgb: 214, 66, 42;
 
-    /* === Back-compat aliases (old names → theme tokens) === */
+    /* === Back-compat aliases (old names → editorial tokens) === */
     --bg-primary: var(--bg);
     --bg-glass: var(--surface);
     --glass-border: var(--border);
@@ -55,50 +57,55 @@
     --bg-hover: var(--surface-2);
     --backdrop-blur: 0px;
 
-    /* Radius / spacing / font */
-    --radius-md: 10px;
-    --radius-lg: 14px;
+    /* Radius (editorial = sharper) / spacing / fonts */
+    --radius-md: 6px;
+    --radius-lg: 8px;
     --radius-full: 9999px;
-    --r: 12px;
-    --r-sm: 9px;
+    --r: 8px;
+    --r-sm: 5px;
     --space-1: .25rem;
     --space-2: .5rem;
     --space-3: .75rem;
     --space-4: 1rem;
     --space-6: 1.5rem;
     --space-8: 2rem;
-    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
+    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
 }
 
-/* ===== Dark theme overrides ===== */
+/* ===== Dark theme overrides (editorial dark) ===== */
 :root[data-theme="dark"] {
-    --bg: #0a0b0e;
-    --surface: #131519;
-    --surface-2: #191c22;
-    --inset: #0e1014;
-    --border: rgba(255, 255, 255, .08);
-    --border-strong: rgba(255, 255, 255, .13);
+    --bg: #100f0c;
+    --surface: #191712;
+    --surface-2: #211e17;
+    --inset: #1a1812;
+    --border: #2b281f;
+    --border-strong: #3a362a;
 
-    --text: #e8eaef;
-    --text-2: #9aa1ad;
-    --text-3: #6b7280;
+    --text: #eceae2;
+    --text-2: #a39d8d;
+    --text-3: #6b6657;
 
     --hover: rgba(255, 255, 255, .05);
     --hover-strong: rgba(255, 255, 255, .09);
 
-    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
-    --shadow-lg: 0 12px 30px rgba(0, 0, 0, .45);
-    --side-bg: linear-gradient(180deg, #0c0e12, #0a0b0e);
-    --accent-soft: rgba(79, 124, 255, .16);
+    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
+    --shadow-lg: 0 16px 44px rgba(0, 0, 0, .55);
+    --side-bg: #161410;
+    --accent-soft: rgba(255, 77, 35, .18);
 }
 
 body {
     background-color: var(--bg);
     color: var(--text);
     font-family: var(--font-sans);
-    font-feature-settings: "tnum" 1, "cv01" 1;
+    font-feature-settings: "tnum" 1;
     margin: 0;
     -webkit-font-smoothing: antialiased;
     min-height: 100vh;
     transition: background-color .2s ease, color .2s ease;
 }
+
+/* Display headings + mono labels use the editorial faces app-wide */
+h1, h2, h3, .page-header h1 { font-family: var(--font-display); letter-spacing: -.01em; }