/* §§§ [spot-v1] BitCore Spot Chart Page — Light Mode CSS * * §본질: * - 스팟 차트창 (/chart, /index.html) 전용 라이트 모드 override * - 가 적용된 경우에만 활성화 * - 거래소 표준 라이트 모드 (Binance/Bybit 참고): 흰 배경 + 진한 텍스트 * - 퓨처 theme-light.css v1304~v1313 9개 섹션 풀세트 이식 + 스팟 특유 영역 추가 * * §퓨처 마라톤 (v1190~v1321) 교훈 누적 적용: * §16 v1305: theme.css 전역 button{!important} 본질 - background+border 명시 처방 * §17 v1308: HTML inline cssText/innerHTML 박혀있지만 !important 없으면 순수 CSS 처방 가능 * §18 v1309: shared/transfer-modal.js 공유 모달은 양쪽 동일 처방 (잔고 분리 §25 일관성) * §19 v1310: NEVER 부모 (tv_overlay_ui_85I.js 짝) 안에 별도 패치 자식은 NEVER 아님 * §20 v1313: NEVER theme.css cascade order override (theme-light.css 가 뒤 로드) * * §처방 원칙: * - html.bc-light 명시적 prefix (다크 모드 0건 변경) * - 스팟에서 실제 쓰는 selector 만 정밀 처방 * - 의미 색상 보존: Long #0ecb81 / Short #f6465d / Confirm 노란 #f0b90b * - §22 NEVER 0건 침범 (theme.css, main.css, tv_overlay_ui_85I.css 무수정) * * §사용: * - spot/public/index.html 에 link 추가 (spot-hide.css 다음 = 마지막 로드 = cascade 최강) * - 페이지 로드 시 theme-toggle.js 가 .bc-light 클래스 토글 → 자동 적용 * - FOUC 방지: head 시작부 inline script (v1320 정정 패턴) 로 즉시 클래스 추가/제거 */ /* ───────────────────────────────────────────────── §1. 라이트 모드 컬러 변수 (거래소 표준) ───────────────────────────────────────────────── */ html.bc-light { --bc-l-bg: #ffffff; --bc-l-panel: #fafafa; --bc-l-panel2: #f5f5f5; --bc-l-panel3: #f0f0f0; --bc-l-line: #f0f2f5; --bc-l-line2: #e6e8eb; --bc-l-text: #1e2329; --bc-l-text2: #2b3139; --bc-l-muted: #707a8a; --bc-l-muted2: #848e9c; --bc-l-input-bg: #ffffff; --bc-l-input-border: #e6e8eb; --bc-l-th-bg: #f7f8fa; --bc-l-th-text: #707a8a; } /* ───────────────────────────────────────────────── §2. theme.css CSS 변수 override ───────────────────────────────────────────────── */ html.bc-light { --bg: #ffffff; --panel: #fafafa; --panel2: #f5f5f5; --line: #eaecef; --text: #1e2329; --muted: #707a8a; } /* ═════════════════════════════════════════════════════════════════ * §§§ 스팟 특유 영역 라이트 처방 (spot-hide.css 본질 override) * §본질 위치: spot/public/css/spot-hide.css line 96~205 * §퓨처에 없는 스팟 특유 영역만 - 의미 색 (Buy 초록 / Sell 빨강) 절대 보존 * ═════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────── §spot-1. Spot Assets 박스 (BTC Available / USDT Available) §본질: spot-hide.css line 96~125 (.spot-assets-*) ───────────────────────────────────────────────── */ html.bc-light .spot-assets-wrap { border-top: 1px solid var(--bc-l-line2) !important; } html.bc-light .spot-assets-title { color: var(--bc-l-text) !important; } html.bc-light .spot-assets-label { color: var(--bc-l-muted2) !important; } html.bc-light .spot-assets-value { color: var(--bc-l-text) !important; } /* ───────────────────────────────────────────────── §spot-2. Spot Buy/Sell 탭 (.spot-side-tab) §본질: spot-hide.css line 135~167 §의미 색 보존: active#spotBuyTab #0ecb81 / active#spotSellTab #f6465d ───────────────────────────────────────────────── */ html.bc-light .spot-side-tab { background: transparent !important; border: 1px solid var(--bc-l-line2) !important; color: var(--bc-l-muted2) !important; } html.bc-light .spot-side-tab:hover { color: var(--bc-l-text) !important; border-color: var(--bc-l-muted) !important; background: var(--bc-l-panel2) !important; } /* active 탭 의미 색 보존 (Buy 초록 / Sell 빨강) - 처방 0건, 본질 그대로 유지 */ /* ───────────────────────────────────────────────── §spot-3. Spot Submit 버튼 (Buy BTC / Sell BTC) §본질: spot-hide.css line 173~200 (.spot-submit-btn) §의미 색 보존: .buy #0ecb81 / .sell #f6465d (처방 0건) ───────────────────────────────────────────────── */ /* spot-submit-btn 자체는 의미 색 (Buy 초록 / Sell 빨강) - 처방 0건 (다크/라이트 동일) */ /* hover 도 의미 색 그대로 - 처방 0건 */ /* ═════════════════════════════════════════════════════════════════ /* ═════════════════════════════════════════════════════════════════ * §§§ 작업 1-A: 차트 페이지 헤더 + 본문 컨테이너 라이트 처방 * §본질: 퓨처 §4 + §22~28 + §37 + §39 + §49 + §94 + §96 + §97 풀세트 이식 * §처방 영역: * - body / .top-header (페이지 기본 배경) * - .header-stats (24h High/Low/Vol, Token Tags 등 통계 컨테이너) * - .top-header 내부 텍스트 (BTCUSDT, 24h Vol, MA(7/25/99) 등) * - .chart-panel (차트 패널 외곽 - 캔버스 자체는 보호) * - .orderbook-table tr (호가창 행 hover) * - .positions-tabs / .position-tab (하단 탭) * - #tvOverlayUI .tvui-topbar (BTCUSDT Perp 상단 정보바) * - __hdr-icon-btn (우상단 6개 아이콘 inline color:#fff override) * §보호 영역 (절대 처방 0건): * - #chart canvas, #tvOverlayUI 본질 (TradingView API 영역) * - 의미 색 (green/red, .green/.red, Verified 초록, Danger 빨강) * §스팟 무관 selector (퓨처 전용, 자연 무시): * - .favorites-btn (스팟엔 없음 - 자연 적용 안 됨) * - .order-panel inline (별도 세션 처방 예정) * ═════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────── §1A-1. body 본문 컨테이너 (퓨처 §3) ───────────────────────────────────────────────── */ html.bc-light body { background: var(--bc-l-bg) !important; color: var(--bc-l-text) !important; } /* ───────────────────────────────────────────────── §1A-2. top-header 본질 (퓨처 §4) ───────────────────────────────────────────────── */ html.bc-light .top-header { background: var(--bc-l-bg) !important; border-bottom: 1px solid var(--bc-l-line) !important; color: var(--bc-l-text) !important; } html.bc-light .top-header * { color: inherit; } /* ───────────────────────────────────────────────── §1A-3. FAVORITES 청록 박스 (퓨처 §22 - 스팟에 없으면 자연 무시) ───────────────────────────────────────────────── */ html.bc-light .favorites-btn, html.bc-light [class*="favorites"] { background: rgba(0, 226, 201, 0.10) !important; color: var(--bc-l-text) !important; border: 1px solid rgba(0, 226, 201, 0.3) !important; } /* ───────────────────────────────────────────────── §1A-4. 상단 헤더 + 심볼 영역 (퓨처 §23) §본질: 가격 변동 컬러 (.green/.red) 옛 본질 보호 ───────────────────────────────────────────────── */ html.bc-light .top-header, html.bc-light .top-header *:not(button):not(.green):not(.red):not([style*="color"]) { color: var(--bc-l-text); } /* header-stats 라벨/값 본질 */ html.bc-light .header-stats .stat-value, html.bc-light .header-stats .stat-label { color: inherit; } html.bc-light .header-stats .stat-label { color: var(--bc-l-muted) !important; } /* ───────────────────────────────────────────────── §1A-5. 호가창 내부 행 (퓨처 §24) ───────────────────────────────────────────────── */ html.bc-light .orderbook-table tr { background: transparent !important; } html.bc-light .orderbook-table tr:hover { background: var(--bc-l-panel2) !important; } html.bc-light .orderbook-table td { border: none !important; } /* ───────────────────────────────────────────────── §1A-6. 하단 포지션 탭 (퓨처 §25) §스팟: Holdings/Open Orders/Order History/Trade History 탭 ───────────────────────────────────────────────── */ html.bc-light .positions-tabs { background: var(--bc-l-bg) !important; border-bottom: 1px solid var(--bc-l-line) !important; } html.bc-light .position-tab { color: var(--bc-l-muted) !important; background: none !important; } html.bc-light .position-tab.active { color: var(--bc-l-text) !important; border-bottom-color: var(--bc-l-text) !important; } html.bc-light .position-tab:hover { color: var(--bc-l-text) !important; } html.bc-light .positions-tabs label, html.bc-light .positions-tabs span { color: var(--bc-l-text) !important; } /* ───────────────────────────────────────────────── §1A-7. positions-table tbody hover (퓨처 §26) ───────────────────────────────────────────────── */ html.bc-light .positions-table tbody tr:hover { background: var(--bc-l-panel2) !important; } /* ───────────────────────────────────────────────── §1A-8. 차트 패널 외곽 (퓨처 §27) §본질 보호: #chart canvas, #tvOverlayUI 본질 0건 강제 ───────────────────────────────────────────────── */ html.bc-light .chart-panel { background: var(--bc-l-bg) !important; color: var(--bc-l-text) !important; } /* MA(7/25/99) 가격 라벨 본질 */ html.bc-light .chart-panel .ma-label, html.bc-light .chart-panel [class*="legend"] { color: var(--bc-l-text) !important; } /* ───────────────────────────────────────────────── §1A-9. 차트 외곽 OHLC 정보바 (퓨처 §37) §본질: BTCUSDT Spot Last Price 30M / O/H/L/C / 24h Vol / MA(7,25,99) ───────────────────────────────────────────────── */ html.bc-light [id^="ohlc"] { color: inherit; } html.bc-light [id^="ohlc"][style*="color:#848e9c"], html.bc-light [id^="ohlc"][style*="color: #848e9c"] { color: var(--bc-l-muted) !important; } html.bc-light [id^="ohlc"][style*="color:#888"] { color: var(--bc-l-muted) !important; } html.bc-light #ohlcMAWrap [style*="color:#888"] { color: var(--bc-l-muted) !important; } /* AUTO 배지 본질 (#lwAutoBadge) */ html.bc-light #lwAutoBadge { background: var(--bc-l-bg) !important; border: 1px solid var(--bc-l-line) !important; color: var(--bc-l-text) !important; } /* ───────────────────────────────────────────────── §1A-10. Symbol 영역 본질 (퓨처 §39) §본질: 좌상단 즐겨찾기 + BTCUSDT Spot ───────────────────────────────────────────────── */ html.bc-light .header-stats { background: var(--bc-l-bg) !important; } /* 즐겨찾기 별 아이콘 본질 (currentColor 상속) */ html.bc-light .top-header svg { fill: currentColor; } /* ───────────────────────────────────────────────── §1A-11. 상단 stats 영역 정밀 보강 (퓨처 §49) §본질: 24h High/Low/Vol(BTC)/Vol(USDT)/Token Tags 영역 검정 잔존 ───────────────────────────────────────────────── */ html.bc-light .header-stats { background: transparent !important; color: var(--bc-l-text) !important; } html.bc-light .header-stats .stat-label, html.bc-light .header-stats > div > span:first-child { color: var(--bc-l-muted) !important; } html.bc-light .header-stats .stat-value, html.bc-light .header-stats > div > span:last-child { color: var(--bc-l-text) !important; } /* ───────────────────────────────────────────────── §1A-12. tvOverlayUI .tvui-topbar 본질 (퓨처 §94) §본질: BTCUSDT Spot 상단 정보바 - tv_overlay_ui_85I.css line 30~42 다크 본질 override ───────────────────────────────────────────────── */ html.bc-light #tvOverlayUI .tvui-topbar, html.bc-light .tvui-topbar { background: var(--bc-l-bg) !important; border: 1px solid var(--bc-l-line) !important; color: var(--bc-l-text) !important; } /* tvui-metric 본질 */ html.bc-light .tvui-metric, html.bc-light .tvui-metric span, html.bc-light .tvui-left, html.bc-light .tvui-leftprice { color: var(--bc-l-text) !important; } /* tvui-metric b 본질 (#tvuiMark, #tvuiIndex, #tvui24HiM 등 숫자) */ html.bc-light .tvui-metric b, html.bc-light #tvuiMark, html.bc-light #tvuiIndex, html.bc-light #tvui24HiM, html.bc-light #tvui24LoM, html.bc-light #tvuiVolU, html.bc-light #tvuiOI { color: var(--bc-l-text) !important; } /* Symbol / Spot 라벨 본질 (#tvuiSymbol .tvui-symbol small 등) */ html.bc-light #tvuiSymbol, html.bc-light .tvui-symbol, html.bc-light .tvui-symbol small, html.bc-light .tvui-chevron, html.bc-light .tvui-coin-letter { color: var(--bc-l-text) !important; } /* ───────────────────────────────────────────────── §1A-13. top-header / FAVORITES 영역 보강 (퓨처 §96) ───────────────────────────────────────────────── */ html.bc-light .top-header .header-stats { background: var(--bc-l-bg) !important; } html.bc-light .symbol-info, html.bc-light .symbol-info > div, html.bc-light #symbolDisplay, html.bc-light #price { color: var(--bc-l-text) !important; } /* ───────────────────────────────────────────────── §1A-14. 우상단 6개 아이콘 inline color:#fff 본질 (퓨처 §97) §본질: index.html .__hdr-icon-btn 본질 inline 'color:#fff' override §스팟 본질: index.html line 849~ button.__hdr-icon-btn (두 언더스코어) ───────────────────────────────────────────────── */ html.bc-light .__hdr-icon-btn, html.bc-light button.__hdr-icon-btn, html.bc-light .hdr-icon-btn, html.bc-light button.hdr-icon-btn { color: var(--bc-l-text) !important; } html.bc-light .__hdr-icon-btn svg, html.bc-light button.__hdr-icon-btn svg, html.bc-light .hdr-icon-btn svg, html.bc-light button.hdr-icon-btn svg { color: var(--bc-l-text) !important; } html.bc-light .__hdr-icon-btn:hover, html.bc-light button.__hdr-icon-btn:hover, html.bc-light .hdr-icon-btn:hover, html.bc-light button.hdr-icon-btn:hover { background: var(--bc-l-panel3) !important; } /* ═════════════════════════════════════════════════════════════════ * §§§ 작업 1-B: 차트 컨트롤 영역 라이트 처방 (사용자 v3 회귀 보고) * §사용자 DevTools 진단: * - div.tvui-row (704.71 × 44.97) Background: #0A0A0A ← 검정 가로 바 (TF 영역) * - div.tvui-toolbar-img-wrap (43.98 × 559.77) Background: #1E2329 ← 좌측 그리기 툴바 * §본질: 퓨처 §95 + §98 + §101 + §102 + §103 + §104 + §105 풀세트 * §처방 영역: * - .tvui-toolbar / #tvuiToolbar (좌측 그리기 도구 컨테이너) * - .tvui-toolbar-img (toolbar-tools.jpg 검정 PNG - filter:invert(1)) * - .tvui-tool / .tvui-tool-ghost (개별 도구 박스) * - .tvui-timebar / #tvuiTimebar (TF 라인 - Time/1m/5m/15m/30m/1H/4H/1D/1W) * - .tvui-btn (TF 버튼 + Chart/Info/Vol 토글) * - .tvui-row (Image 1 진범 - 차트 가로 바 부모 컨테이너) * - .tvui-auto (우하단 AUTO 배지) * - .header-stats / #__headerIconBar (우상단 6개 아이콘 부모 컨테이너) * §의미 색 보존: tvui-tool-hit.active 노란 강조 #f0b90b / tvui-btn.active 노란 underline * §주의: toolbar-tools.jpg 자체는 검정 PNG - CSS filter:invert(1) 로 자동 라이트화 * ═════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────── §1B-1. 좌측 그리기 툴바 컨테이너 (퓨처 §95) §본질: css/tv_overlay_ui_85I.css line 260~281 background:#0a0a0a ───────────────────────────────────────────────── */ html.bc-light .tvui-toolbar, html.bc-light #tvuiToolbar { background: var(--bc-l-bg) !important; border: 1px solid var(--bc-l-line) !important; } /* tvui-tool-hit/tool hover 본질 (rgba(255,255,255,0.10) → 검정 미세) */ html.bc-light .tvui-tool-hit:hover, html.bc-light .tvui-tool:hover { background: rgba(0, 0, 0, 0.04) !important; } /* tvui-tool-hit.active 노란 강조 본질 유지 */ html.bc-light .tvui-tool-hit.active { background: rgba(240, 185, 11, 0.18) !important; } /* ───────────────────────────────────────────────── §1B-2. TF 라인 본질 (퓨처 §98) §본질: tv_overlay_ui_85I.css line 202~213 background:#0a0a0a line 220~232 .tvui-btn color:#cfd6df §처방: 컨테이너 라이트 + 비활성 muted + 활성 검정 + 노란 underline ───────────────────────────────────────────────── */ html.bc-light .tvui-timebar, html.bc-light #tvuiTimebar { background: var(--bc-l-bg) !important; border: 1px solid var(--bc-l-line) !important; } /* tvui-timebar 라벨 (Time:) */ html.bc-light .tvui-timebar .lbl { color: var(--bc-l-muted) !important; } /* tvui-btn 비활성 - muted 본질 */ html.bc-light .tvui-timebar .tvui-btn, html.bc-light .tvui-btn { color: var(--bc-l-muted) !important; } /* tvui-btn hover - 검정 정통 */ html.bc-light .tvui-timebar .tvui-btn:hover, html.bc-light .tvui-btn:hover { color: var(--bc-l-text) !important; } /* tvui-btn active - 검정 + 노란 underline */ html.bc-light .tvui-timebar .tvui-btn.active, html.bc-light .tvui-btn.active { color: var(--bc-l-text) !important; text-decoration-color: #f0b90b !important; } /* ───────────────────────────────────────────────── §1B-3. .tvui-row 진범 본질 (퓨처 §101) §사용자 DevTools 발견: div.tvui-row Background: #0A0A0A 검정 가로 바 §본질: main.css line 3038 background:#0a0a0a !important → TF 라인 부모 컨테이너 검정 띠 §처방: ID specific + !important 본질 우선 ───────────────────────────────────────────────── */ html.bc-light #tvOverlayUI .tvui-row, html.bc-light .tvui-row { background: var(--bc-l-bg) !important; border-top-color: var(--bc-l-line) !important; border-bottom-color: var(--bc-l-line) !important; } /* ───────────────────────────────────────────────── §1B-4. 우상단 6개 아이콘 부모 컨테이너 (퓨처 §102) ───────────────────────────────────────────────── */ html.bc-light .header-stats, html.bc-light .top-header .header-stats, html.bc-light #__headerIconBar { background: var(--bc-l-bg) !important; } /* ───────────────────────────────────────────────── §1B-5. 좌측 툴바 이미지 invert (퓨처 §103) §사용자 DevTools 발견: div.tvui-toolbar-img-wrap Background: #1E2329 §본질: index.html

검정 PNG §처방: filter:invert(1) 본질로 검정 → 흰 자동 변환 ───────────────────────────────────────────────── */ html.bc-light .tvui-toolbar-img { filter: invert(1) !important; } /* ───────────────────────────────────────────────── §1B-6. .tvui-tool 자식 본질 (퓨처 §104) §본질: tv_overlay_ui_85I.css line 307~320 background:#0a0a0a ───────────────────────────────────────────────── */ html.bc-light .tvui-tool { background: var(--bc-l-panel) !important; border: 1px solid var(--bc-l-line) !important; color: var(--bc-l-text) !important; } html.bc-light .tvui-tool:hover { background: var(--bc-l-panel2) !important; } html.bc-light .tvui-tool.tvui-tool-ghost { background: transparent !important; border: none !important; color: var(--bc-l-text) !important; } html.bc-light .tvui-tool.tvui-tool-ghost:hover { background: transparent !important; color: #1e2329 !important; } /* ───────────────────────────────────────────────── §1B-7. 추가 진범 본질 - .tvui-toolbar-img-wrap 컨테이너 박스 §사용자 DevTools 직접 진단: § div.tvui-toolbar-img-wrap 43.98×559.77 Background:#1E2329 §처방: 컨테이너 박스 자체도 라이트 (자식 img는 §1B-5에서 invert 처리) ───────────────────────────────────────────────── */ html.bc-light .tvui-toolbar-img-wrap { background: var(--bc-l-bg) !important; } /* ───────────────────────────────────────────────── §1B-8. .tvui-auto 본질 (퓨처 §105 - 우하단 AUTO 배지) §본질: tv_overlay_ui_85I.css line 333~340 background:#0a0a0a ───────────────────────────────────────────────── */ html.bc-light .tvui-auto, html.bc-light #tvuiAuto { background: var(--bc-l-bg) !important; border: 1px solid var(--bc-l-line) !important; color: var(--bc-l-text) !important; } /* ═════════════════════════════════════════════════════════════════ * §§§ 작업 1-C: #cdt-masker 검정 박스 본질 처방 (사용자 v4 회귀 보고) * §사용자 보고: "도형 젤윗부분 검정띠 이거 엄청고생했습니다" * §본질 진범: chart-drawing-tools-patch.js line ~3470 * - btn.innerHTML=_svg(t,'#58a9d4'); * - masker.style.background='#0a0a0a'; ← inline 검정 박힘 (선택 상태 강조) * §본질 작동: * - masker는 SVG 아이콘 뒤에서 검정 박스로 강조 (다크 모드 정통) * - 라이트 모드에서는 검정 박스가 거슬림 → 옅은 회색 박스로 치환 * §§§ [v1238] cdt-btn 호버/active 라이트 처방 (퓨처 누락 회귀) * §본질: #cdt-btn:hover rgba(255,255,255,0.22) 흰 위 흰 = 안 보임 * .sel/.cdt-active rgba(255,255,255,0.12) 역시 안 보임 * §처방: 검정 알파로 반전 (퓨처 §v1238 정통) * §주의: §22 NEVER 0건 침범 (JS 본문 수정 안 함, CSS만 추가) * §처방 방법: attribute selector로 정확한 inline 검정 본질만 잡음 * - transparent 상태는 처방 0건 (다크 본질 보호) * - background:#0a0a0a 또는 rgb(10,10,10) 만 라이트 회색으로 치환 * ═════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────── §1C-1. #cdt-masker 검정 inline 본질 → 옅은 회색 박스 §본질: masker.style.background='#0a0a0a' inline 박힘 §처방: attribute selector + !important 로 inline 이김 ───────────────────────────────────────────────── */ html.bc-light #cdt-masker[style*="background:#0a0a0a"], html.bc-light #cdt-masker[style*="background: #0a0a0a"], html.bc-light #cdt-masker[style*="background: rgb(10, 10, 10)"], html.bc-light #cdt-masker[style*="background:rgb(10,10,10)"] { background: var(--bc-l-panel2) !important; } /* ──────────────────────────────────────────────────────────────── §§§ §스팟 v1 #cdt-btn (Cursor 좌측 세로 툴바 최상단) 호버/active 처방 §사용자 명시: "세로도형 젤위 크로스 도형 검정 테두리 작업 / 고생해서 겨우 했잔아요" §지시문서: SPOT_CDT_BTN_FIX_INSTRUCTION.md (사용자 제공) §본질 위치: spot/public/js/chart-drawing-tools-patch.js line 3315~3319 §다크 본질: inline