From 2c2b629b9ff5ab3fc1b4bb2f7d2fc6bda254bbd4 Mon Sep 17 00:00:00 2001
From: malloc72p <scra1028@gmail.com>
Date: Tue, 30 Jun 2026 10:04:41 +0900
Subject: [PATCH] =?UTF-8?q?fix(blog):=20=EB=8B=A4=ED=81=AC=EB=AA=A8?=
 =?UTF-8?q?=EB=93=9C=20=ED=8C=94=EB=A0=88=ED=8A=B8=20=EB=94=94=EC=8A=A4?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=ED=92=8D=EC=9C=BC=EB=A1=9C=20=EC=A1=B0?=
 =?UTF-8?q?=EC=A0=95=20(#90=20=ED=9B=84=EC=86=8D)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 완전 검정 → 블루그레이(surface #2b2d31, 카드 #313338, 헤더 ink #1e1f22)로 눈 피로 완화
- 보더/디바이더를 배경보다 밝게(gray-200 #41434a, border #4a4d54) → 배경에 묻히던 문제 해소
- 텍스트 그레이를 디스코드 톤으로 재조정
- welcome 카드 왼쪽 바: gray-700(다크에서 밝은 회색이라 어색) → brand(인디고 액센트, 두 모드 공통)
- 사이드바 섹션 디바이더를 기본 디바이더 톤(gray-200)으로 통일

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/blog/src/app/global.css                | 37 +++++++++++----------
 apps/blog/src/components/introduce-card.tsx |  3 +-
 apps/blog/src/components/mobile-sidebar.tsx |  2 +-
 3 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/apps/blog/src/app/global.css b/apps/blog/src/app/global.css
index 20d7e23..c2b7938 100644
--- a/apps/blog/src/app/global.css
+++ b/apps/blog/src/app/global.css
@@ -26,25 +26,26 @@
    컴포넌트 변경 없이 전체가 전환된다. 텍스트 그레이(400~900)는 밝게, 배경 그레이(50~200)는
    어둡게 뒤집는다. 항상 어두운 헤더(ink)·흰 텍스트(text-white)는 별도 토큰이라 그대로 유지된다. */
 .dark {
-  /* 시맨틱 surface */
-  --color-surface: #0f1014;
-  --color-surface-muted: #17181d;
-  /* 배경 그레이(라이트 배경 → 다크) */
-  --color-gray-50: #17181d;
-  --color-gray-100: #1f2026;
-  --color-gray-200: #2a2b32;
+  /* 디스코드풍 다크: 완전 검정 대신 블루그레이 톤으로 눈의 피로를 줄인다. */
+  --color-surface: #2b2d31; /* 페이지/패널 배경 */
+  --color-surface-muted: #313338; /* 카드(살짝 밝게 — elevated) */
+  --color-ink: #1e1f22; /* 헤더/드롭다운 — 페이지보다 한 단계 어두운 톤 */
+  /* 배경 그레이(라이트→다크). 표면보다 밝게 두어 카드·칩·디바이더가 묻히지 않게 한다. */
+  --color-gray-50: #313338;
+  --color-gray-100: #383b41;
+  --color-gray-200: #41434a; /* 디바이더/얕은 경계 — 배경 대비 또렷하게 */
   /* 텍스트 그레이(어두운 글자 → 밝은 글자) */
-  --color-gray-400: #6e7079;
-  --color-gray-500: #8b8d96;
-  --color-gray-600: #a6a8b1;
-  --color-gray-700: #c4c6cd;
-  --color-gray-800: #d9dade;
-  --color-gray-900: #e9eaed;
-  --color-black: #e9eaed; /* text-black → 밝게 */
-  /* 경계 */
-  --color-border: #2a2b32;
-  --color-border-subtle: #232429;
-  /* 브랜드: 다크 배경에서 비텍스트 액센트(포커스 링)는 살짝 밝게 */
+  --color-gray-400: #82868f;
+  --color-gray-500: #9a9ea7;
+  --color-gray-600: #b8bcc4;
+  --color-gray-700: #c7ccd1;
+  --color-gray-800: #dbdee1;
+  --color-gray-900: #f2f3f5;
+  --color-black: #f2f3f5; /* text-black → 밝게 */
+  /* 경계 — 배경보다 확실히 밝게 해서 묻히지 않게 한다. */
+  --color-border: #4a4d54;
+  --color-border-subtle: #3a3d44;
+  /* 브랜드: 비텍스트 액센트(포커스 링)는 살짝 밝게(블러플 톤) */
   --color-brand: #818cf8;
   /* 본문 링크(blue) — 다크에서 밝게 */
   --color-blue-600: #93b4ff;
diff --git a/apps/blog/src/components/introduce-card.tsx b/apps/blog/src/components/introduce-card.tsx
index aa06fb3..2856695 100644
--- a/apps/blog/src/components/introduce-card.tsx
+++ b/apps/blog/src/components/introduce-card.tsx
@@ -5,7 +5,8 @@ export function IntroduceCard() {
   return (
     <div className="rounded-md border border-border-subtle flex relative shadow-md mt-7.5 md:mt-15 break-keep">
       {/* === INTRODUCE CARD LEFT Bar === */}
-      <div className="w-2 md:w-4.25 h-full bg-gray-700  absolute left-0 top-0"></div>
+      {/* 브랜드 액센트 바. 두 모드 모두에서 의도적인 강조로 보이도록 brand 토큰을 쓴다. */}
+      <div className="w-2 md:w-4.25 h-full bg-brand absolute left-0 top-0"></div>
 
       {/* === INTRODUCE CARD Right SECTION === */}
       <div className={classNames('flex flex-col', 'pl-5 py-4 pr-6', 'md:pl-11.5 md:py-5 md:pr-6')}>
diff --git a/apps/blog/src/components/mobile-sidebar.tsx b/apps/blog/src/components/mobile-sidebar.tsx
index ae8689d..0a9431d 100644
--- a/apps/blog/src/components/mobile-sidebar.tsx
+++ b/apps/blog/src/components/mobile-sidebar.tsx
@@ -199,7 +199,7 @@ function SidebarSection({ title, items, onClick }: SidebarSectionProps) {
     <div className="sidebar-section">
       <div className="pb-3 text-lg">
         <p className="pb-1">{title}</p>
-        <Divider color="bg-gray-500" />
+        <Divider />
       </div>
 
       <ul className="space-y-2">