From 7a1f579f6db385c723682d35d834d6b874bd9b24 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Wed, 31 Dec 2025 19:19:16 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=9D=BC=EC=9D=B4=ED=8A=B8=20=EB=AA=A8?=
 =?UTF-8?q?=EB=93=9C=20=EC=B9=B4=EB=93=9C/=EA=B8=80=EB=9E=98=EC=8A=A4=20?=
 =?UTF-8?q?=EC=83=89=EC=83=81=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 팝업 메뉴 순서 변경: 시스템/라이트/다크
- glass, glow-card CSS 클래스를 CSS 변수화
- 라이트 테마에 카드/글래스 배경 변수 추가
- 모든 페이지의 카드가 라이트 모드에서 밝게 표시
---
 frontend/src/components/Sidebar.jsx |  2 +-
 frontend/src/index.css              | 34 ++++++++++++++++++++---------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Sidebar.jsx b/frontend/src/components/Sidebar.jsx
index 3333dd9..68af502 100644
--- a/frontend/src/components/Sidebar.jsx
+++ b/frontend/src/components/Sidebar.jsx
@@ -322,8 +322,8 @@ const Sidebar = ({ isMobile = false }) => {
 
     const themeOptions = [
       { value: 'system', label: '시스템', icon: <Monitor size={16} /> },
-      { value: 'dark', label: '다크', icon: <Moon size={16} /> },
       { value: 'light', label: '라이트', icon: <Sun size={16} /> },
+      { value: 'dark', label: '다크', icon: <Moon size={16} /> },
     ];
     
     return (
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f72c753..4e9e632 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -39,6 +39,17 @@
   --border-subtle: rgba(0, 0, 0, 0.05);
 
   --shadow-color: rgba(0, 0, 0, 0.1);
+
+  /* 글래스 및 카드 */
+  --glass-bg: rgba(255, 255, 255, 0.9);
+  --glass-border: rgba(0, 0, 0, 0.1);
+  --glass-dark-bg: rgba(248, 250, 252, 0.95);
+  --card-bg: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.98) 0%,
+    rgba(248, 250, 252, 0.98) 100%
+  );
+  --card-border: rgba(0, 0, 0, 0.1);
 }
 
 /* 기본 html, body 스타일 */
@@ -86,30 +97,33 @@ body.mobile-layout {
     background-clip: text;
   }
 
-  /* 글래스모피즘 (다크 테마) */
+  /* 글래스모피즘 */
   .glass {
-    background: rgba(28, 28, 28, 0.8);
+    background: var(--glass-bg, rgba(28, 28, 28, 0.8));
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(74, 222, 128, 0.1);
+    border: 1px solid var(--glass-border, rgba(74, 222, 128, 0.1));
   }
 
   .glass-dark {
-    background: rgba(20, 20, 20, 0.9);
+    background: var(--glass-dark-bg, rgba(20, 20, 20, 0.9));
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border-subtle);
   }
 
   /* 글로우 카드 효과 */
   .glow-card {
     position: relative;
-    background: linear-gradient(
-      135deg,
-      rgba(28, 28, 28, 0.95) 0%,
-      rgba(24, 24, 24, 0.95) 100%
+    background: var(
+      --card-bg,
+      linear-gradient(
+        135deg,
+        rgba(28, 28, 28, 0.95) 0%,
+        rgba(24, 24, 24, 0.95) 100%
+      )
     );
-    border: 1px solid rgba(74, 222, 128, 0.15);
+    border: 1px solid var(--card-border, rgba(74, 222, 128, 0.15));
     transition: all 0.3s ease;
   }