/* 고래추적(고래 순위) 네이티브 위젯 — 코린이 라이트/다크 대응. 스코프 .cp-oc-whale */
.cp-oc-whale{ --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-whale{ --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-whale{ 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-green); display:inline-block; box-shadow:0 0 0 0 rgba(14,163,107,.5); animation:ocPulse 2s infinite; }
@keyframes ocPulse{ 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-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); }

/* 백그라운드 갱신 힌트 */
.oc-hint{ font-size:11px; color:var(--oc-muted); }

/* 요약 바 (활성 고래·롱/숏 건수·금액·방향 비율) */
.oc-summary{ display:flex; gap:24px; align-items:center; flex-wrap:wrap; border:1px solid var(--oc-line); background:var(--oc-card); border-radius:12px; padding:12px 18px; margin:0 0 12px; }
.oc-stat{ min-width:64px; }
.oc-stat-label{ font-size:10px; color:var(--oc-muted); text-transform:uppercase; letter-spacing:.6px; font-weight:600; }
.oc-stat-val{ font-size:16px; font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums; }
.oc-ratio-wrap{ flex:1; min-width:200px; max-width:320px; }
.oc-ratio-bar{ height:6px; border-radius:3px; background:rgba(224,48,78,.25); overflow:hidden; }
html.dark .oc-ratio-bar{ background:rgba(246,70,93,.25); }
.oc-ratio-long{ height:100%; background:var(--oc-green); transition:width .6s cubic-bezier(.4,0,.2,1); }
.oc-ratio-labels{ display:flex; justify-content:space-between; align-items:center; margin-top:5px; font-size:11px; font-weight:600; gap:8px; }
.oc-sum-status{ font-size:10px; color:var(--oc-muted); font-weight:500; margin-left:auto; }

.cp-oc-controls{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px; }
.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-viewtabs{ display:inline-flex; border:1px solid var(--oc-line); border-radius:8px; overflow:hidden; }
.cp-oc-viewtabs button{ border:0; background:var(--oc-card); color:var(--oc-sub); padding:7px 13px; font-size:12.5px; font-weight:600; cursor:pointer; border-right:1px solid var(--oc-line); }
.cp-oc-viewtabs button:last-child{ border-right:0; }
.cp-oc-viewtabs button.on{ background:var(--oc-brand); color:#fff; }
.cp-oc-toggle{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--oc-sub); cursor:pointer; user-select:none; padding:6px 4px; }
.cp-oc-toggle input{ accent-color:var(--oc-brand); width:15px; height:15px; }
.cp-oc-search{ flex:1; min-width:140px; border:1px solid var(--oc-line); background:var(--oc-card); color:var(--oc-ink); border-radius:8px; padding:7px 11px; font-size:13px; }
.cp-oc-search::placeholder{ color:var(--oc-muted); }

/* CSV 저장 등 도구 버튼 */
.cp-oc-toolbtn{ border:1px solid var(--oc-line); background:var(--oc-card); color:var(--oc-sub); border-radius:8px; padding:7px 12px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.cp-oc-toolbtn:hover{ color:var(--oc-brand); border-color:var(--oc-brand); }
/* 키보드 단축키 힌트 */
.oc-kbd{ font-size:10px; color:var(--oc-muted); padding:4px 8px; border:1px solid var(--oc-line); border-radius:6px; user-select:none; white-space:nowrap; }

/* 에러 바 + 재시도 */
.oc-errbar{ background:rgba(224,48,78,.08); border:1px solid rgba(224,48,78,.28); color:var(--oc-red); padding:10px 14px; border-radius:10px; margin:0 0 12px; font-size:12.5px; }
html.dark .oc-errbar{ background:rgba(246,70,93,.10); border-color:rgba(246,70,93,.32); }
.oc-retry{ margin-left:8px; border:0; background:var(--oc-brand); color:#fff; border-radius:7px; padding:4px 12px; font-size:11px; font-weight:700; cursor:pointer; }
.oc-retry:hover{ filter:brightness(1.08); }

.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:860px; }
.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); }
.cp-oc-table td.r{ text-align:right; }
.cp-oc-table tr.wrow{ cursor:pointer; transition:background .1s; }
.cp-oc-table tr.wrow:hover,.cp-oc-table tr.wrow.exp{ background:var(--oc-hover); }
.cp-oc-table tr:last-child td{ border-bottom:0; }
.oc-rank{ color:var(--oc-muted); font-size:12px; font-variant-numeric:tabular-nums; }
.oc-addr{ display:flex; flex-direction:column; gap:2px; max-width:230px; }
.oc-addr-name{ color:var(--oc-yellow); font-size:12.5px; font-weight:700; }
.oc-addr-mono{ font-family:'Courier New',monospace; font-size:12px; color:var(--oc-ink); }
.oc-addr-link{ color:var(--oc-brand); font-size:10.5px; text-decoration:none; opacity:.85; }
.oc-addr-link:hover{ text-decoration:underline; }
.oc-acct{ font-weight:800; }
.oc-acct .oc-krw{ display:block; font-weight:500; font-size:10.5px; color:var(--oc-muted); }
.oc-krw-inline{ font-size:10.5px; color:var(--oc-muted); font-weight:500; }
.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-vol{ color:var(--oc-sub); font-size:12.5px; font-variant-numeric:tabular-nums; }
.oc-roi{ font-size:12.5px; font-weight:700; }
.oc-chev{ color:var(--oc-muted); font-size:10px; transition:transform .2s; display:inline-block; }
.wrow.exp .oc-chev{ transform:rotate(180deg); }

/* 태그 배지 (리치: 이름·라벨, guess=미검증 점선) */
.oc-tag{ font-size:9px; font-weight:700; padding:1px 6px; border-radius:10px; margin-left:4px; vertical-align:middle; white-space:nowrap; max-width:130px; overflow:hidden; text-overflow:ellipsis; display:inline-block; }
.oc-tag.insider{ background:rgba(56,189,248,.14); color:#0ea5d0; border:1px solid rgba(56,189,248,.35); }
.oc-tag.celeb{ background:rgba(201,138,0,.14); color:var(--oc-yellow); border:1px solid rgba(201,138,0,.35); }
.oc-tag.top{ background:rgba(124,92,239,.14); color:#7c5cef; border:1px solid rgba(124,92,239,.35); }
.oc-tag.guess{ background:var(--oc-bg); color:var(--oc-muted); border:1px dashed var(--oc-line); }
html.dark .oc-tag.insider{ color:#38bdf8; }
html.dark .oc-tag.celeb{ border-color:rgba(251,191,36,.35); }

.oc-detail{ background:var(--oc-bg); padding:14px 16px; }
.oc-detail-meta{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:12px; font-size:12px; }
.oc-detail-meta b{ color:var(--oc-sub); font-weight:600; margin-right:6px; }
.oc-posgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.oc-poscard{ border:1px solid var(--oc-line); border-radius:9px; padding:10px 12px; background:var(--oc-card); font-size:12px; }
.oc-poscard .oc-pc-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.oc-poscard .oc-coin{ font-weight:800; font-size:13px; }
.oc-side{ font-size:10px; font-weight:700; padding:1px 7px; border-radius:6px; }
.oc-side.long{ background:rgba(14,163,107,.14); color:var(--oc-green); }
.oc-side.short{ background:rgba(224,48,78,.14); color:var(--oc-red); }
.oc-pc-row{ display:flex; justify-content:space-between; color:var(--oc-sub); padding:2px 0; }
.oc-pc-row span:last-child{ color:var(--oc-ink); font-variant-numeric:tabular-nums; }

/* 청산 거리 색상 등급 */
.oc-pc-row .oc-liqdist{ font-weight:800; font-variant-numeric:tabular-nums; }
.oc-pc-row .oc-liqdist.danger{ color:var(--oc-red); }
.oc-pc-row .oc-liqdist.warn{ color:var(--oc-yellow); }
.oc-pc-row .oc-liqdist.ok{ color:var(--oc-green); }

.oc-empty{ padding:20px; 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-search{ order:5; flex-basis:100%; }
  .oc-summary{ gap:14px; padding:10px 14px; }
  .oc-stat-val{ font-size:14px; }
  .oc-kbd{ display:none; }
}