/* ============================================================ Clever Insight 통합 디자인 토큰 (메인 사이트 + top30 공용) - 기본 = 다크. 면 라이트(베이지). - 색은 RGB 트리플릿으로 두어 Tailwind의 alpha(/30 등)와 호환. - ⚠️ services/top30/web/theme.css 와 항상 동기화할 것 (동일 파일). ============================================================ */ :root { /* --- 다크 팔레트 (기본) --- */ --c-bg: 11 14 20; /* #0B0E14 */ --c-bg-2: 17 20 28; /* 그라데이션 보조 */ --c-surface: 26 29 35; /* #1A1D23 */ --c-surface-container: 30 34 41; /* #1E2229 */ --c-surface-container-high: 42 47 55; /* #2A2F37 */ --c-on-surface: 241 245 249; /* #F1F5F9 */ --c-on-surface-variant: 148 163 184; /* #94A3B8 */ --c-outline: 51 65 85; /* #334155 */ --c-primary: 139 92 246; /* #8B5CF6 (브랜드, 양 테마 공통) */ --c-primary-dark: 124 58 237; /* #7C3AED */ --c-primary-light: 167 139 250; /* #A78BFA */ --c-secondary: 34 211 238; /* #22D3EE */ --c-accent: 244 114 182; /* #F472B6 */ /* 크롬(네비/푸터/글래스) */ --nav-bg: 17 20 28; --nav-alpha: 0.72; --footer-bg: 17 20 28; --glass-bg: 26 29 35; --glass-alpha: 0.6; --glass-border: 255 255 255; --glass-border-alpha: 0.06; /* 주식 등락 (한국식: 상승=빨강, 하락=파랑) */ --c-up: 244 63 94; /* #F43F5E */ --c-down: 56 130 246; /* #3882F6 */ --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.45); } html.theme-light { /* --- 라이트(베이지) 팔레트 --- */ --c-bg: 245 239 230; /* #F5EFE6 warm beige */ --c-bg-2: 239 227 213; /* #EFE3D5 */ --c-surface: 255 255 255; /* #FFFFFF */ --c-surface-container: 251 244 236; /* #FBF4EC */ --c-surface-container-high: 240 230 216; /* #F0E6D8 */ --c-on-surface: 42 22 12; /* #2A160C warm ink */ --c-on-surface-variant: 114 91 74; /* #725B4A */ --c-outline: 214 197 178; /* #D6C5B2 */ --c-primary: 139 92 246; --c-primary-dark: 124 58 237; --c-primary-light: 124 58 237; /* 라이트에선 light=진한 보라(대비) */ --c-secondary: 14 116 144; /* #0E7490 teal */ --c-accent: 219 39 119; /* #DB2777 */ --nav-bg: 255 255 255; --nav-alpha: 0.85; --footer-bg: 255 255 255; --glass-bg: 255 248 240; --glass-alpha: 0.78; --glass-border: 53 35 21; --glass-border-alpha: 0.1; --shadow-card: 0 20px 50px rgba(67, 43, 22, 0.12); } /* 부드러운 테마 전환 */ html, body, .glass, .glass-strong, .ci-nav, .ci-footer { transition: background-color .35s ease, color .35s ease, border-color .35s ease; } body { background-color: rgb(var(--c-bg)); color: rgb(var(--c-on-surface)); background-image: radial-gradient(1200px 600px at 100% -10%, rgb(var(--c-primary) / 0.10), transparent 60%), radial-gradient(900px 500px at -10% 0%, rgb(var(--c-secondary) / 0.08), transparent 55%); background-attachment: fixed; } /* 글래스 (토큰화) */ .glass { background: rgb(var(--glass-bg) / var(--glass-alpha)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgb(var(--glass-border) / var(--glass-border-alpha)); } .glass-strong { background: rgb(var(--c-bg) / 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgb(var(--glass-border) / calc(var(--glass-border-alpha) + 0.02)); } html.theme-light .glass-strong { background: rgb(255 255 255 / 0.85); } /* 네비 / 푸터 표면 */ .ci-nav { background: rgb(var(--nav-bg) / var(--nav-alpha)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgb(var(--glass-border) / var(--glass-border-alpha)); } .ci-footer { background: rgb(var(--footer-bg)); border-top: 1px solid rgb(var(--c-outline) / 0.5); } /* 테마 토글 버튼 (양 앱 공용) — 작고 은은하게, 구석용 */ .ci-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9999px; border: 1px solid rgb(var(--c-outline) / 0.35); background: transparent; color: rgb(var(--c-on-surface-variant)); cursor: pointer; transition: all .2s ease; opacity: .75; } .ci-theme-toggle:hover { opacity: 1; border-color: rgb(var(--c-primary) / 0.6); color: rgb(var(--c-primary)); background: rgb(var(--c-primary) / 0.08); } .ci-theme-toggle .material-symbols-outlined { font-size: 17px; } /* 다크일 때 해 아이콘, 라이트일 때 달 아이콘 표시 */ .ci-theme-toggle .icon-dark { display: inline; } .ci-theme-toggle .icon-light { display: none; } html.theme-light .ci-theme-toggle .icon-dark { display: none; } html.theme-light .ci-theme-toggle .icon-light { display: inline; } /* 주식 등락 색 */ .stock-up { color: rgb(var(--c-up)); } .stock-down { color: rgb(var(--c-down)); } .stock-flat { color: rgb(var(--c-on-surface-variant)); }