/* §§§ [v1585] BitCore 전역 라이트 모드 CSS — 28+ 페이지 일괄 처방
*
* §목적:
* - assets / markets / orders / dashboard / affiliate / simple-earn / convert / vip /
* fees / referral / announcements / about / faq / events / staking / security /
* trading-comp / welcome-bonus / contact / identification / login / leverage /
* tpsl-guide / first-trade / futures-guide / nav / home / price 등
* 차트 페이지(index.html) 를 제외한 전체 페이지의 라이트 모드 override
*
* §메커니즘 (이미 v1191 완비):
* - shared/i18n.js → shared/theme-toggle.js 자동 로드 (모든 페이지)
* - localStorage.bcTheme 동기 읽기 → .bc-light 클래스 토글
* - 이 파일이 html.bc-light prefix 로 다크 컬러 1대1 override
*
* §원칙 (v1184~v1189 마라톤 교훈 절대 준수):
* 1. ❌ 광범위 selector 금지 (*[style*=...], body *, * 등) - 드롭다운 깨짐 유발
* 2. ❌ 차트 영역(#tvOverlayUI, canvas, #chart) 흰 배경 강제 절대 금지
* 3. ❌ §22 NEVER 영역 (app.js, tv_overlay_ui_85I.js, overlay.js) 0건 침범
* 4. ✅ html.bc-light 명시적 prefix 필수 (전역 누출 0)
* 5. ✅ 의미 색 보존 (Binance 노랑 #f0b90b, 롱 초록 #0ecb81, 숏 빨강 #f6465d)
*
* §사용:
* - 각 페이지 에 추가
* - 차트 페이지(index.html)는 이미 theme-light.css 가 있으므로 추가 불필요
*
* §컬러 매트릭스 (다크 → 라이트):
* #000/#0a0a0a/#0b0e11/#0b0f14/#0f1116 → #ffffff (메인 배경)
* #1e2329/#1e232e/#1e2330 → #fafafa (패널)
* #2a3142/#2a2e39/#2b3139 → #f5f5f5 (hover/카드)
* #181c22 → #f0f0f0 (더 진한 패널)
* #474d57/#4f5663/#3f464f → #e6e8eb (border)
* #eaecef/#cfd6df/#b7bdc6 → #1e2329 (텍스트 밝은)
* #848e9c/#9aa3b2/#6b7280/#707a8a → #707a8a (mute, 유지)
* #f0b90b/#d4a509/#0ecb81/#f6465d → 보존 (의미색)
*/
/* ═══════════════════════════════════════════════════
1. CSS 변수 매트릭스 (전역 페이지 공통)
═══════════════════════════════════════════════════ */
html.bc-light {
--bcg-bg: #ffffff;
--bcg-panel: #fafafa;
--bcg-panel2: #f5f5f5;
--bcg-panel3: #f0f0f0;
--bcg-card: #ffffff;
--bcg-card-hover: #f5f5f5;
--bcg-line: #eaecef;
--bcg-line2: #e6e8eb;
--bcg-line3: #f0f2f5;
--bcg-text: #1e2329;
--bcg-text2: #2b3139;
--bcg-muted: #707a8a;
--bcg-muted2: #848e9c;
--bcg-input-bg: #ffffff;
--bcg-input-bd: #e6e8eb;
--bcg-th-bg: #f7f8fa;
--bcg-th-text: #707a8a;
--bcg-row-hover: #f5f7fa;
--bcg-shadow: rgba(0,0,0,0.06);
--bcg-shadow2: rgba(0,0,0,0.10);
--bcg-overlay: rgba(0,0,0,0.30);
/* theme.css CSS 변수 override (페이지가 var(--bg)/var(--text) 등 사용 시 자동 적용) */
--bg: #ffffff;
--panel: #fafafa;
--panel2:#f5f5f5;
--line: #eaecef;
--text: #1e2329;
--muted: #707a8a;
}
/* ═══════════════════════════════════════════════════
2. body / html / 큰 컨테이너
═══════════════════════════════════════════════════ */
html.bc-light,
html.bc-light body {
background: var(--bcg-bg) !important;
color: var(--bcg-text) !important;
}
/* ═══════════════════════════════════════════════════
3. 페이지 공통 컨테이너 / 패널 / 카드
═══════════════════════════════════════════════════ */
html.bc-light .container,
html.bc-light .page-container,
html.bc-light .main-container,
html.bc-light .content-container,
html.bc-light .page-wrap,
html.bc-light .wrapper,
html.bc-light main,
html.bc-light section,
html.bc-light article {
background: transparent !important;
color: var(--bcg-text) !important;
}
html.bc-light .panel,
html.bc-light .card,
html.bc-light .box,
html.bc-light .section,
html.bc-light .widget,
html.bc-light .stat-card,
html.bc-light .info-card,
html.bc-light .data-card,
html.bc-light .feature-card,
html.bc-light .summary-card,
html.bc-light .balance-card {
background: var(--bcg-panel) !important;
border: 1px solid var(--bcg-line) !important;
color: var(--bcg-text) !important;
box-shadow: 0 1px 3px var(--bcg-shadow);
}
html.bc-light .card:hover,
html.bc-light .stat-card:hover,
html.bc-light .info-card:hover,
html.bc-light .feature-card:hover {
background: var(--bcg-card-hover) !important;
box-shadow: 0 2px 6px var(--bcg-shadow2);
}
/* ═══════════════════════════════════════════════════
4. 헤더 / 네비게이션
═══════════════════════════════════════════════════ */
html.bc-light header,
html.bc-light .top-header,
html.bc-light .page-header,
html.bc-light .site-header,
html.bc-light nav,
html.bc-light .navbar,
html.bc-light .nav-bar {
background: var(--bcg-bg) !important;
border-bottom: 1px solid var(--bcg-line) !important;
color: var(--bcg-text) !important;
}
html.bc-light .top-header *:not(svg):not(path):not(i):not(.material-icons):not(.icon),
html.bc-light nav *:not(svg):not(path):not(i):not(.material-icons):not(.icon) {
color: inherit;
}
/* 헤더 우측 아이콘 버튼 (header-right-styles.css 충돌 보호) */
html.bc-light .hdr-icon-btn,
html.bc-light button.hdr-icon-btn,
html.bc-light .header-right button.hdr-icon-btn,
html.bc-light .__v489-icon-menu button.hdr-icon-btn,
html.bc-light #headerRight .__v489-toggle .hdr-icon-btn {
color: var(--bcg-text) !important;
background: transparent !important;
}
html.bc-light .hdr-icon-btn:hover,
html.bc-light button.hdr-icon-btn:hover,
html.bc-light .header-right button.hdr-icon-btn:hover,
html.bc-light .__v489-icon-menu:hover button.hdr-icon-btn {
background: var(--bcg-panel2) !important;
}
/* §§§ [v1587] 우상단 헤더 아이콘 SVG 처방 (사람/지갑/지구/선물 아이콘)
* §증상: 사람 아이콘이 흐릿하게 보임 (path fill/stroke 처방 누락)
* §원인: button 의 color 만 처방, SVG path/circle/rect 의 fill/stroke 미처방
* §처방: 차트창 theme-light.css §2867 패턴 그대로 - fill:transparent + stroke:currentColor + stroke-width:1.6 */
html.bc-light .hdr-icon-btn svg,
html.bc-light .hdr-icon-btn svg path,
html.bc-light .hdr-icon-btn svg circle,
html.bc-light .hdr-icon-btn svg rect,
html.bc-light .hdr-icon-btn svg line,
html.bc-light .hdr-icon-btn svg polyline,
html.bc-light .__hdr-icon-btn svg,
html.bc-light .__hdr-icon-btn svg path,
html.bc-light .__hdr-icon-btn svg circle,
html.bc-light .__hdr-icon-btn svg rect,
html.bc-light .__hdr-icon-btn svg line,
html.bc-light .__hdr-icon-btn svg polyline {
fill: transparent !important;
stroke: currentColor !important;
stroke-width: 1.6 !important;
}
/* fill="currentColor" 명시 element 는 채움 (눈동자 등) */
html.bc-light .hdr-icon-btn svg [fill="currentColor"],
html.bc-light .__hdr-icon-btn svg [fill="currentColor"] {
fill: currentColor !important;
}
/* §§§ [v1588] 우상단 사람 아이콘 처방 (.__v489-user-chip / .__v489-icon-menu)
* §증상: 사람 아이콘이 흐릿하게 보임 (v1587 처방 후에도 잔존)
* §원인 (DevTools 진단):
* - DOM:
* - 부모: