From 48d49d303bb1c0ef2606ae084e5a39972e5c4041 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Wed, 31 Dec 2025 19:30:32 +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=A0=84=EB=A9=B4=20=EC=9E=AC=EC=84=A4=EA=B3=84=20?=
 =?UTF-8?q?-=20=EB=B0=B0=EA=B2=BD/=EC=B9=B4=EB=93=9C=20=EB=8C=80=EB=B9=84?=
 =?UTF-8?q?=20=EA=B0=95=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 배경색을 더 어둡게 (#e5e7eb) 변경하여 흰색 카드와 대비 확보
- 30개 이상 하드코딩 색상 클래스 오버라이드
- Admin 페이지: 콘솔/로그/모드팩 영역 밝은 색상 적용
- Modpack 페이지: 모든 아이템 카드 흰색 배경+테두리
- 구분선/테두리 진하게 조정
- 콘솔 터미널은 가독성을 위해 어두운 배경 유지
---
 frontend/src/index.css | 99 +++++++++++++++++++++++++++++-------------
 1 file changed, 69 insertions(+), 30 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 37b7276..9c6f7ba 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -24,32 +24,31 @@
 
 /* 라이트 테마 */
 .light {
-  --bg-primary: #f8fafc;
-  --bg-secondary: #ffffff;
-  --bg-tertiary: #f1f5f9;
+  /* 배경 - 약간 어두운 회색 계열로 카드와 대비 */
+  --bg-primary: #e5e7eb;
+  --bg-secondary: #f3f4f6;
+  --bg-tertiary: #d1d5db;
   --bg-card: #ffffff;
-  --bg-hover: rgba(0, 0, 0, 0.05);
+  --bg-hover: rgba(0, 0, 0, 0.08);
 
-  --text-primary: #18181b;
-  --text-secondary: #52525b;
-  --text-tertiary: #71717a;
-  --text-muted: #a1a1aa;
+  /* 텍스트 */
+  --text-primary: #111827;
+  --text-secondary: #374151;
+  --text-tertiary: #6b7280;
+  --text-muted: #9ca3af;
 
-  --border-color: rgba(0, 0, 0, 0.1);
-  --border-subtle: rgba(0, 0, 0, 0.05);
+  /* 테두리 - 더 진하게 */
+  --border-color: rgba(0, 0, 0, 0.15);
+  --border-subtle: rgba(0, 0, 0, 0.08);
 
-  --shadow-color: rgba(0, 0, 0, 0.1);
+  --shadow-color: rgba(0, 0, 0, 0.15);
 
-  /* 글래스 및 카드 */
-  --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);
+  /* 글래스 및 카드 - 흰색 배경 + 그림자로 대비 */
+  --glass-bg: rgba(255, 255, 255, 0.95);
+  --glass-border: rgba(0, 0, 0, 0.12);
+  --glass-dark-bg: rgba(255, 255, 255, 0.98);
+  --card-bg: #ffffff;
+  --card-border: rgba(0, 0, 0, 0.12);
 }
 
 /* 라이트 모드 Tailwind 색상 오버라이드 */
@@ -113,33 +112,73 @@
   color: #18181b !important;
 }
 
-/* 구분선 오버라이드 - 더 연하게 */
+/* 구분선 오버라이드 - 더 진하게 */
 .light .border-white\/5,
 .light .border-white\/10 {
-  border-color: rgba(0, 0, 0, 0.06) !important;
+  border-color: rgba(0, 0, 0, 0.1) !important;
 }
 
 .light .bg-black\/20,
-.light .bg-black\/30 {
-  background-color: rgba(0, 0, 0, 0.03) !important;
+.light .bg-black\/30,
+.light .bg-black\/40,
+.light .bg-black\/50,
+.light .bg-black\/60 {
+  background-color: rgba(0, 0, 0, 0.05) !important;
 }
 
 .light .hover\:bg-black\/30:hover {
-  background-color: rgba(0, 0, 0, 0.06) !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
 }
 
-/* 관리자 페이지 배경 */
+/* 관리자/모드팩 페이지 배경 - 밝은 색상으로 */
 .light .bg-mc-bg,
 .light .bg-mc-card,
-.light .bg-mc-gray {
-  background-color: #f8fafc !important;
+.light .bg-mc-gray,
+.light .bg-mc-gray-light {
+  background-color: #f3f4f6 !important;
 }
 
+/* 하드코딩된 어두운 배경색 오버라이드 */
 .light .bg-\[\#1a1a1a\],
 .light .bg-\[\#141414\],
 .light .bg-\[\#1c1c1c\],
-.light .bg-\[\#252525\] {
+.light .bg-\[\#252525\],
+.light .bg-\[\#2a2a2a\],
+.light .bg-\[\#333333\],
+.light .bg-\[\#0a0a0a\],
+.light .bg-\[\#111\],
+.light .bg-\[\#18181b\],
+.light .bg-\[\#1f1f1f\] {
   background-color: #ffffff !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+}
+
+/* 모드팩 아이템 카드 */
+.light .bg-gradient-to-br.from-zinc-800,
+.light .bg-zinc-800\/50,
+.light .bg-zinc-800\/80,
+.light .bg-zinc-900\/50,
+.light .bg-zinc-900\/80 {
+  background: #ffffff !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+}
+
+/* 콘솔/터미널 스타일 - 라이트 모드에서도 어두운 배경 유지 (가독성) */
+.light .font-mono.bg-black,
+.light .bg-black.text-green-400 {
+  background-color: #1e1e1e !important;
+  color: #d4d4d4 !important;
+}
+
+/* 텍스트 색상 추가 오버라이드 */
+.light .text-zinc-100,
+.light .text-zinc-200 {
+  color: #111827 !important;
+}
+
+.light .text-zinc-500,
+.light .text-zinc-600 {
+  color: #6b7280 !important;
 }
 
 /* 기본 html, body 스타일 */