/* 청산맵 네이티브 위젯 — 코린이 라이트/다크 대응. 스코프 .cp-oc-liqmap */
.cp-oc-liqmap{ --oc-card:#ffffff; --oc-bg:#f4f5f7; --oc-line:#e5e8eb; --oc-ink:#1f2933; --oc-sub:#6b7684; --oc-muted:#8b95a1; --oc-brand:#2f6fed; --oc-green:#0ea36b; --oc-red:#e0304e; --oc-yellow:#c98a00; --oc-hover:rgba(47,111,237,.06); --oc-plot:#f7f9fc; font-size:14px; color:var(--oc-ink); }
html.dark .cp-oc-liqmap{ --oc-card:#161b22; --oc-bg:#0d1117; --oc-line:#21262d; --oc-ink:#d8e1eb; --oc-sub:#8b949e; --oc-muted:#6b7684; --oc-brand:#4d8bff; --oc-green:#25c281; --oc-red:#f6465d; --oc-yellow:#fbbf24; --oc-hover:rgba(77,139,255,.10); --oc-plot:#0a0e17; }

.cp-oc-liqmap{ margin:0 0 24px; }
.cp-oc-liqmap .oc-pos{ color:var(--oc-green); font-weight:700; }
.cp-oc-liqmap .oc-neg{ color:var(--oc-red); font-weight:700; }

/* 헤더 */
.cp-oc-liqmap .cp-oc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:4px 0 14px; }
.cp-oc-liqmap .cp-oc-title{ font-size:20px; font-weight:800; letter-spacing:-.02em; margin:0; }
.cp-oc-liqmap .cp-oc-title small{ font-size:13px; font-weight:600; color:var(--oc-sub); margin-left:8px; }
.cp-oc-liqmap .cp-oc-meta{ font-size:12px; color:var(--oc-muted); display:flex; align-items:center; gap:10px; }
.cp-oc-liqmap .cp-oc-dot{ width:7px; height:7px; border-radius:50%; background:var(--oc-green); display:inline-block; animation:lmPulse 2s infinite; }
@keyframes lmPulse{ 0%{box-shadow:0 0 0 0 rgba(14,163,107,.45)} 70%{box-shadow:0 0 0 6px rgba(14,163,107,0)} 100%{box-shadow:0 0 0 0 rgba(14,163,107,0)} }
.cp-oc-liqmap .cp-oc-refresh{ border:1px solid var(--oc-line); background:var(--oc-card); color:var(--oc-sub); border-radius:8px; padding:5px 11px; font-size:12px; font-weight:600; cursor:pointer; }
.cp-oc-liqmap .cp-oc-refresh:hover{ color:var(--oc-brand); border-color:var(--oc-brand); }

/* 컨트롤 */
.cp-oc-liqmap .cp-oc-controls{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin:0 0 14px; }
.cp-oc-liqmap .lm-ctl-group{ display:inline-flex; align-items:center; gap:7px; }
.cp-oc-liqmap .lm-ctl-group label{ font-size:12.5px; font-weight:700; color:var(--oc-sub); }
.cp-oc-liqmap select{ appearance:none; -webkit-appearance:none; border:1px solid var(--oc-line); background:var(--oc-card); color:var(--oc-ink); border-radius:8px; padding:7px 30px 7px 11px; font-size:13px; font-weight:700; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--oc-sub) 50%),linear-gradient(135deg,var(--oc-sub) 50%,transparent 50%); background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.cp-oc-liqmap .lm-note{ font-size:11.5px; color:var(--oc-muted); }

/* 요약 통계 */
.cp-oc-liqmap .lm-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0 0 14px; }
.cp-oc-liqmap .lm-stat{ border:1px solid var(--oc-line); background:var(--oc-card); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:5px; min-width:0; }
.cp-oc-liqmap .lm-stat-k{ font-size:11px; color:var(--oc-muted); font-weight:600; }
.cp-oc-liqmap .lm-stat-v{ font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-oc-liqmap .lm-stat-v.lm-price{ color:var(--oc-brand); }

/* 범례 */
.cp-oc-liqmap .lm-legend{ display:flex; flex-wrap:wrap; gap:8px 16px; font-size:11.5px; color:var(--oc-sub); margin:0 0 8px; }
.cp-oc-liqmap .lm-legend span{ display:inline-flex; align-items:center; gap:6px; }
.cp-oc-liqmap .lm-sw{ width:12px; height:10px; border-radius:2px; display:inline-block; }
.cp-oc-liqmap .lm-sw-long{ background:var(--oc-red); }
.cp-oc-liqmap .lm-sw-short{ background:var(--oc-green); }
.cp-oc-liqmap .lm-sw-cur{ background:transparent; border-top:2px dashed var(--oc-ink); height:0; width:14px; border-radius:0; opacity:.7; }

/* 세로바 맵 (가격 X축) */
.cp-oc-liqmap .lm-mapwrap{ border:1px solid var(--oc-line); border-radius:12px; overflow:hidden; background:var(--oc-plot); }
.cp-oc-liqmap .lm-map{ position:relative; height:380px; padding:12px 12px 32px 12px; }
.cp-oc-liqmap .lm-plot{ position:relative; height:100%; width:100%; }
.cp-oc-liqmap .lm-bar{ position:absolute; bottom:0; min-height:2px; border-radius:2px 2px 0 0; opacity:.9; }
.cp-oc-liqmap .lm-bar.lm-long{ background:linear-gradient(0deg,var(--oc-red),rgba(224,48,78,.30)); }
.cp-oc-liqmap .lm-bar.lm-short{ background:linear-gradient(0deg,var(--oc-green),rgba(14,163,107,.30)); }
html.dark .cp-oc-liqmap .lm-bar.lm-long{ background:linear-gradient(0deg,var(--oc-red),rgba(246,70,93,.28)); }
html.dark .cp-oc-liqmap .lm-bar.lm-short{ background:linear-gradient(0deg,var(--oc-green),rgba(37,194,129,.28)); }
.cp-oc-liqmap .lm-curline{ position:absolute; top:0; bottom:0; width:0; border-left:1px dashed var(--oc-ink); opacity:.65; pointer-events:none; z-index:3; }
.cp-oc-liqmap .lm-axis{ position:absolute; left:12px; right:12px; bottom:8px; height:18px; pointer-events:none; }
.cp-oc-liqmap .lm-tick{ position:absolute; bottom:0; transform:translateX(-50%); font-size:10px; font-family:'Courier New',monospace; color:var(--oc-muted); white-space:nowrap; }

/* 양쪽 최대 클러스터 금액 라벨 */
.cp-oc-liqmap .lm-peak{ position:absolute; transform:translateX(-50%); font-size:10px; font-weight:700; font-family:'Courier New',monospace; font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none; z-index:2; padding-bottom:2px; }
.cp-oc-liqmap .lm-peak-long{ color:var(--oc-red); }
.cp-oc-liqmap .lm-peak-short{ color:var(--oc-green); }

/* 툴팁 */
.cp-oc-liqmap .lm-tip{ position:absolute; left:8px; z-index:5; pointer-events:none; background:var(--oc-card); border:1px solid var(--oc-line); border-radius:8px; padding:7px 9px; font-size:11.5px; box-shadow:0 4px 14px rgba(0,0,0,.18); max-width:230px; }
.cp-oc-liqmap .lm-tip-hd{ font-weight:700; margin-bottom:3px; font-family:'Courier New',monospace; }
.cp-oc-liqmap .lm-tip-v{ font-size:15px; font-weight:800; margin-bottom:4px; font-variant-numeric:tabular-nums; }

/* 레버리지 칩 */
.cp-oc-liqmap .lm-chips{ display:flex; flex-wrap:wrap; gap:4px; }
.cp-oc-liqmap .lm-chip{ font-size:10px; font-weight:600; color:var(--oc-sub); background:var(--oc-bg); border:1px solid var(--oc-line); border-radius:6px; padding:1px 6px; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* 섹션 제목 */
.cp-oc-liqmap .lm-section-title{ font-size:13px; font-weight:800; margin:18px 0 8px; letter-spacing:-.01em; }
.cp-oc-liqmap .lm-section-title small{ font-size:11px; font-weight:500; color:var(--oc-muted); margin-left:6px; }

/* 청산 히트맵 (14일 · 가격x시간 캔버스) — 히트 팔레트 특성상 라이트/다크 공통 다크 플롯 */
.cp-oc-liqmap .lm-heatwrap{ border:1px solid var(--oc-line); border-radius:12px; overflow:hidden; background:#0a0e17; }
.cp-oc-liqmap .lm-heatwrap canvas{ display:block; width:100%; height:520px; cursor:crosshair; }

/* 히트맵 커서 추적 툴팁 — body 직속 부착이라 스코프 밖 단독 클래스 (다크 플롯 위 고정 다크 스타일) */
.cp-oc-lm-charttip{ position:fixed; z-index:9999; pointer-events:none; display:none; background:#161b22; border:1px solid #2a3140; border-radius:8px; padding:6px 9px; font-size:11px; line-height:1.55; color:#d8e1eb; box-shadow:0 4px 16px rgba(0,0,0,.35); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cp-oc-lm-charttip .tip-hd{ color:#8b949e; font-size:10px; margin-bottom:1px; }
.cp-oc-lm-charttip .tip-up{ color:#25c281; font-weight:700; }
.cp-oc-lm-charttip .tip-dn{ color:#f6465d; font-weight:700; }

/* 테이블 */
.cp-oc-liqmap .cp-oc-tablewrap{ border:1px solid var(--oc-line); border-radius:12px; overflow:hidden; background:var(--oc-card); }
.cp-oc-liqmap .cp-oc-scroll{ overflow-x:auto; }
.cp-oc-liqmap .cp-oc-table{ width:100%; border-collapse:collapse; min-width:560px; }
.cp-oc-liqmap .cp-oc-table th{ padding:10px 12px; text-align:left; font-size:10.5px; color:var(--oc-muted); text-transform:uppercase; letter-spacing:.4px; font-weight:700; border-bottom:1px solid var(--oc-line); white-space:nowrap; background:var(--oc-card); }
.cp-oc-liqmap .cp-oc-table th.r{ text-align:right; }
.cp-oc-liqmap .cp-oc-table td{ padding:10px 12px; vertical-align:middle; font-size:13px; border-bottom:1px solid var(--oc-line); }
.cp-oc-liqmap .cp-oc-table td.r{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.cp-oc-liqmap .cp-oc-table tr:last-child td{ border-bottom:0; }
.cp-oc-liqmap .lm-mono{ font-family:'Courier New',monospace; }
.cp-oc-liqmap .lm-badge{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; white-space:nowrap; }
.cp-oc-liqmap .lm-b-long{ background:rgba(224,48,78,.14); color:var(--oc-red); }
.cp-oc-liqmap .lm-b-short{ background:rgba(14,163,107,.14); color:var(--oc-green); }
html.dark .cp-oc-liqmap .lm-b-long{ background:rgba(246,70,93,.15); }
html.dark .cp-oc-liqmap .lm-b-short{ background:rgba(37,194,129,.15); }

.cp-oc-liqmap .lm-assump{ font-size:10.5px; color:var(--oc-muted); margin-top:8px; line-height:1.5; }

/* 빈/에러 상태 */
.cp-oc-liqmap .lm-map-empty{ border:1px solid var(--oc-line); border-radius:12px; background:var(--oc-card); padding:44px 20px; text-align:center; color:var(--oc-muted); font-size:13px; }

/* 스켈레톤 */
.cp-oc-liqmap .oc-skel{ display:inline-block; height:11px; width:60px; border-radius:4px; background:linear-gradient(90deg,var(--oc-line) 25%,var(--oc-hover) 37%,var(--oc-line) 63%); background-size:400% 100%; animation:lmShimmer 1.3s infinite; }
@keyframes lmShimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }
.cp-oc-liqmap .lm-map.lm-skel{ display:flex; flex-direction:column; justify-content:center; gap:7px; padding:16px 24px; }
.cp-oc-liqmap .lm-skelbar{ height:9px; }
.cp-oc-liqmap .lm-skelbar .oc-skel{ height:9px; }

@media (max-width:720px){
  .cp-oc-liqmap .lm-stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .cp-oc-liqmap .cp-oc-title{ font-size:18px; }
  .cp-oc-liqmap .lm-map{ height:300px; }
  .cp-oc-liqmap .lm-heatwrap canvas{ height:380px; }
  .cp-oc-liqmap .lm-stat-v{ font-size:14px; }
}