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 스타일 */