From 1dfceaf350aabe802f0d69ee01c6209742b641c7 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sat, 18 Apr 2026 16:11:51 +0900
Subject: [PATCH] =?UTF-8?q?=ED=95=B4=EB=B0=A9=201=EC=B0=A8/2=EC=B0=A8=20?=
 =?UTF-8?q?=EB=9D=BC=EB=B2=A8=20=EB=9D=BC=EC=9D=B4=ED=8A=B8=20=EB=AA=A8?=
 =?UTF-8?q?=EB=93=9C=20=EC=83=89=EC=83=81=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

라이트 모드에서 너무 연해 보이던 purple/pink 라벨을 violet-600/rose-600으로 강화

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/features/liberation/components/ProgressBar.jsx |  8 ++++----
 frontend/src/index.css                                 | 10 ++++++++++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/features/liberation/components/ProgressBar.jsx b/frontend/src/features/liberation/components/ProgressBar.jsx
index a949e65..f627c6f 100644
--- a/frontend/src/features/liberation/components/ProgressBar.jsx
+++ b/frontend/src/features/liberation/components/ProgressBar.jsx
@@ -74,12 +74,12 @@ export default function ProgressBar({ startChapter, currentPoints, completionDat
       <div className="space-y-3">
         <div className="flex items-center gap-2">
           <div className="flex-1 flex flex-col items-center gap-2">
-            <span className="text-base font-bold" style={{ color: '#a78bfa' }}>1차 해방</span>
-            <div style={{ width: '100%', height: 3, background: 'rgba(167, 139, 250, 0.5)', borderRadius: 999 }} />
+            <span className="text-base font-bold" style={{ color: 'var(--liberation-primary)' }}>1차 해방</span>
+            <div style={{ width: '100%', height: 3, background: 'var(--liberation-primary-bar)', borderRadius: 999 }} />
           </div>
           <div className="flex-1 flex flex-col items-center gap-2">
-            <span className="text-base font-bold" style={{ color: '#fda4af' }}>2차 해방</span>
-            <div style={{ width: '100%', height: 3, background: 'rgba(253, 164, 175, 0.5)', borderRadius: 999 }} />
+            <span className="text-base font-bold" style={{ color: 'var(--liberation-secondary)' }}>2차 해방</span>
+            <div style={{ width: '100%', height: 3, background: 'var(--liberation-secondary-bar)', borderRadius: 999 }} />
           </div>
         </div>
         <div className="flex gap-2">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f611b4b..5e2c5ea 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -140,6 +140,11 @@
   --btn-danger-bg: #dc2626;
   --btn-danger-bg-hover: #ef4444;
   --btn-danger-shadow: 0 4px 14px rgba(239, 68, 68, 0.2);
+
+  --liberation-primary: #a78bfa;
+  --liberation-primary-bar: rgba(167, 139, 250, 0.5);
+  --liberation-secondary: #fda4af;
+  --liberation-secondary-bar: rgba(253, 164, 175, 0.5);
 }
 
 /* 테마 토큰 - light */
@@ -276,6 +281,11 @@
   --btn-danger-bg: #dc2626;
   --btn-danger-bg-hover: #b91c1c;
   --btn-danger-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
+
+  --liberation-primary: #7c3aed;
+  --liberation-primary-bar: rgba(124, 58, 237, 0.5);
+  --liberation-secondary: #e11d48;
+  --liberation-secondary-bar: rgba(225, 29, 72, 0.5);
 }
 
 html, body, #root {