/* 청산 임박(고래 청산가 거리) 네이티브 위젯 — 코린이 라이트/다크 대응. 스코프 .cp-oc-liq */
.cp-oc-liq{ --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); font-size:14px; color:var(--oc-ink); }
html.dark .cp-oc-liq{ --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); }

.cp-oc-liq{ margin:0 0 24px; }
.cp-oc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:4px 0 14px; }
.cp-oc-title{ font-size:20px; font-weight:800; letter-spacing:-.02em; margin:0; }
.cp-oc-title small{ font-size:13px; font-weight:600; color:var(--oc-sub); margin-left:8px; }
.cp-oc-meta{ font-size:12px; color:var(--oc-muted); display:flex; align-items:center; gap:10px; }
.cp-oc-dot{ width:7px; height:7px; border-radius:50%; background:var(--oc-red); display:inline-block; box-shadow:0 0 0 0 rgba(224,48,78,.5); animation:ocPulse 2s infinite; }
@keyframes ocPulse{ 0%{box-shadow:0 0 0 0 rgba(224,48,78,.45)} 70%{box-shadow:0 0 0 6px rgba(224,48,78,0)} 100%{box-shadow:0 0 0 0 rgba(224,48,78,0)} }
.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-refresh:hover{ color:var(--oc-brand); border-color:var(--oc-brand); }

.cp-oc-controls{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px; }
.cp-oc-controls label.cp-oc-lbl{ font-size:12px; font-weight:700; color:var(--oc-muted); margin-left:4px; }
.cp-oc-controls 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:600; 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-legend{ display:inline-flex; align-items:center; gap:12px; font-size:11.5px; font-weight:600; color:var(--oc-sub); margin-left:auto; }
.cp-oc-legend span{ display:inline-flex; align-items:center; gap:4px; }
.cp-oc-legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.cp-oc-legend i.danger{ background:var(--oc-red); }
.cp-oc-legend i.warn{ background:var(--oc-yellow); }
.cp-oc-legend i.ok{ background:var(--oc-green); }

.cp-oc-err{ display:none; margin:0 0 12px; padding:9px 13px; border-radius:8px; border:1px solid var(--oc-red); background:rgba(224,48,78,.08); color:var(--oc-red); font-size:12.5px; font-weight:600; }

.cp-oc-tablewrap{ border:1px solid var(--oc-line); border-radius:12px; overflow:hidden; background:var(--oc-card); }
.cp-oc-scroll{ overflow-x:auto; }
.cp-oc-table{ width:100%; border-collapse:collapse; min-width:880px; }
.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-table th.r{ text-align:right; }
.cp-oc-table td{ padding:11px 12px; vertical-align:middle; white-space:nowrap; font-size:13px; border-bottom:1px solid var(--oc-line); font-variant-numeric:tabular-nums; }
.cp-oc-table td.r{ text-align:right; }
.cp-oc-table tr.lrow:hover{ background:var(--oc-hover); }
.cp-oc-table tr:last-child td{ border-bottom:0; }

.liq-dist{ font-weight:800; font-variant-numeric:tabular-nums; }
.liq-dist.danger{ color:var(--oc-red); }
.liq-dist.warn{ color:var(--oc-yellow); }
.liq-dist.ok{ color:var(--oc-green); }
.liq-coin{ font-weight:800; }
.liq-side{ font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:6px; }
.liq-side.long{ background:rgba(14,163,107,.14); color:var(--oc-green); }
.liq-side.short{ background:rgba(224,48,78,.14); color:var(--oc-red); }
.liq-lev{ color:var(--oc-sub); font-weight:600; }
.liq-whale{ color:var(--oc-brand); font-size:12.5px; text-decoration:none; font-weight:600; }
.liq-whale:hover{ text-decoration:underline; }
.liq-whale-name{ color:var(--oc-yellow); font-weight:700; }

.oc-pos{ color:var(--oc-green); font-weight:700; }
.oc-neg{ color:var(--oc-red); font-weight:700; }
.oc-zero{ color:var(--oc-muted); }
.oc-empty{ padding:24px; text-align:center; color:var(--oc-muted); font-size:13px; }

.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:ocShimmer 1.3s infinite; }
@keyframes ocShimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }

@media (max-width:600px){
  .cp-oc-title{ font-size:18px; }
  .cp-oc-controls{ gap:6px; }
  .cp-oc-legend{ margin-left:0; flex-basis:100%; }
}