diff --git a/frontend/src/app.css b/frontend/src/app.css
index 027d085..f7b6d63 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -4,32 +4,33 @@
 /* 이후 컴포넌트는 bg-surface, text-dim, border-default, bg-success/10, */
 /* bg-domain-engineering, rounded-card, z-modal, w-rail 형태로 작성한다. */
 /* 새 코드에서 bg-[var(--*)] 작성 금지 (lint:tokens 으로 차단). */
+/* 2026-06-04 UI 개선: 다크블루 → 세이지 그린(라이트) 통일. 토큰 값만 교체. */
 @theme {
-  --color-bg: #0f1117;
-  --color-surface: #1a1d27;
-  --color-surface-hover: #222636;
-  --color-surface-active: #2a2f42;
-  --color-sidebar: #141720;
-  --color-default: #2a2d3a;
-  --color-border-strong: #3a3e52;
-  --color-text: #e4e4e7;
-  --color-dim: #8b8d98;
-  --color-faint: #5e616c;
-  --color-accent: #6c8aff;
-  --color-accent-hover: #859dff;
-  --color-accent-ring: #6c8aff80;
-  --color-error: #f5564e;
-  --color-success: #4ade80;
-  --color-warning: #fbbf24;
-  --color-scrim: #00000099;
+  --color-bg: #e7ebe4;
+  --color-surface: #f4f7f1;
+  --color-surface-hover: #ecf0e8;
+  --color-surface-active: #e3ebdf;
+  --color-sidebar: #f4f7f1;
+  --color-default: #dde3d6;
+  --color-border-strong: #cfd7c6;
+  --color-text: #23291f;
+  --color-dim: #697061;
+  --color-faint: #9aa090;
+  --color-accent: #4f8a6b;
+  --color-accent-hover: #3d7256;
+  --color-accent-ring: #4f8a6b55;
+  --color-error: #c0392b;
+  --color-success: #1f9d6b;
+  --color-warning: #b5840a;
+  --color-scrim: rgba(35, 41, 31, 0.45);
 
-  --color-domain-philosophy: #a78bfa;
-  --color-domain-language: #f472b6;
-  --color-domain-engineering: #38bdf8;
-  --color-domain-safety: #fb923c;
-  --color-domain-programming: #34d399;
-  --color-domain-general: #94a3b8;
-  --color-domain-reference: #fbbf24;
+  --color-domain-philosophy: #7a6a9b;
+  --color-domain-language: #b5567a;
+  --color-domain-engineering: #2f7d8f;
+  --color-domain-safety: #b5840a;
+  --color-domain-programming: #3d7256;
+  --color-domain-general: #7a8b3f;
+  --color-domain-reference: #8a6a3f;
 
   --radius-sm: 4px;
   --radius-md: 6px;
@@ -65,31 +66,31 @@
 }
 
 /* 기존 :root 변수는 .markdown-body와의 호환을 위해 유지 (공존 layer). */
-/* 후속 phase에서 markdown-body도 토큰 마이그레이션 검토 가능. */
+/* 2026-06-04: 세이지 라이트로 값 동기화. */
 :root {
-  --bg: #0f1117;
-  --surface: #1a1d27;
-  --border: #2a2d3a;
-  --text: #e4e4e7;
-  --text-dim: #8b8d98;
-  --accent: #6c8aff;
-  --accent-hover: #859dff;
-  --error: #f5564e;
-  --success: #4ade80;
-  --warning: #fbbf24;
+  --bg: #e7ebe4;
+  --surface: #f4f7f1;
+  --border: #dde3d6;
+  --text: #23291f;
+  --text-dim: #697061;
+  --accent: #4f8a6b;
+  --accent-hover: #3d7256;
+  --error: #c0392b;
+  --success: #1f9d6b;
+  --warning: #b5840a;
 
-  /* domain 색상 */
-  --domain-philosophy: #a78bfa;
-  --domain-language: #f472b6;
-  --domain-engineering: #38bdf8;
-  --domain-safety: #fb923c;
-  --domain-programming: #34d399;
-  --domain-general: #94a3b8;
-  --domain-reference: #fbbf24;
+  /* domain 색상 (세이지 조화) */
+  --domain-philosophy: #7a6a9b;
+  --domain-language: #b5567a;
+  --domain-engineering: #2f7d8f;
+  --domain-safety: #b5840a;
+  --domain-programming: #3d7256;
+  --domain-general: #7a8b3f;
+  --domain-reference: #8a6a3f;
 
   /* sidebar */
   --sidebar-w: 320px;
-  --sidebar-bg: #141720;
+  --sidebar-bg: #f4f7f1;
 }
 
 body {
@@ -104,7 +105,7 @@ body {
 ::-webkit-scrollbar-track { background: var(--bg); }
 ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
 
-/* Markdown 렌더링 (GitHub Dark 스타일) */
+/* Markdown 렌더링 (세이지 라이트 스타일) */
 .markdown-body {
   color: var(--text);
   line-height: 1.7;
@@ -125,7 +126,7 @@ body {
 .markdown-body table { border-collapse: collapse; width: 100%; margin: 0.8em 0; }
 .markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 0.5em 0.8em; text-align: left; font-size: 0.9em; }
 .markdown-body th { background: var(--surface); font-weight: 600; }
-.markdown-body tr:nth-child(even) { background: rgba(255,255,255,0.02); }
+.markdown-body tr:nth-child(even) { background: rgba(35,41,31,0.03); }
 .markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }
 .markdown-body a { color: var(--accent); text-decoration: none; }
 .markdown-body a:hover { text-decoration: underline; }