From e968236796d31d95286f870826a81b06d3fcadd5 Mon Sep 17 00:00:00 2001
From: hyungi <hyun49196@gmail.com>
Date: Thu, 4 Jun 2026 04:53:39 +0000
Subject: [PATCH] =?UTF-8?q?feat(ui):=20app.css=20=ED=85=8C=EB=A7=88=20?=
 =?UTF-8?q?=EB=8B=A4=ED=81=AC=EB=B8=94=EB=A3=A8=20=E2=86=92=20=EC=84=B8?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B7=B8=EB=A6=B0=20=EB=9D=BC=EC=9D=B4?=
 =?UTF-8?q?=ED=8A=B8=20(F1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UI 전면 개선 파운데이션. @theme + :root 토큰 값을 세이지 라이트로 교체
(bg #e7ebe4·surface #f4f7f1·text #23291f·accent #4f8a6b·도메인색 세이지 조화).
토큰 규율(lint:tokens) 덕에 값 교체만으로 전 페이지 전환. markdown zebra
rgba(255,255,255,.02)→rgba(35,41,31,.03) 1곳 라이트 보정. frontend docker build PASS.
검토 대상 = text-white 14 + bg-white 2 (대부분 강조색 버튼 위, 시각확인 시 점검).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/app.css | 93 ++++++++++++++++++++++----------------------
 1 file changed, 47 insertions(+), 46 deletions(-)

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; }