/* 스마트머니(수익 상위 트레이더 포지션) 네이티브 위젯 — 코린이 라이트/다크 대응. 전 규칙 .cp-oc-smart 스코프 */
.cp-oc-smart{ --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-track:#eef0f3; --oc-hover:rgba(47,111,237,.06); font-size:14px; color:var(--oc-ink); }
html.dark .cp-oc-smart{ --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-track:#1c222b; --oc-hover:rgba(77,139,255,.10); }

.cp-oc-smart{ margin:0 0 24px; }
.cp-oc-smart .cp-oc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:4px 0 14px; }
.cp-oc-smart .cp-oc-title{ font-size:20px; font-weight:800; letter-spacing:-.02em; margin:0; }
.cp-oc-smart .cp-oc-title small{ font-size:13px; font-weight:600; color:var(--oc-sub); margin-left:8px; }
.cp-oc-smart .cp-oc-meta{ font-size:12px; color:var(--oc-muted); display:flex; align-items:center; gap:10px; }
.cp-oc-smart .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-smart .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; font-family:inherit; }
.cp-oc-smart .cp-oc-refresh:hover{ color:var(--oc-brand); border-color:var(--oc-brand); }
.cp-oc-smart .cp-oc-refresh:disabled{ opacity:.5; cursor:default; }

.cp-oc-smart .cp-oc-sechd{ font-size:10.5px; font-weight:700; color:var(--oc-muted); text-transform:uppercase; letter-spacing:.6px; margin:18px 0 8px; }
.cp-oc-smart .cp-oc-sechd:first-of-type{ margin-top:2px; }
.cp-oc-smart .cp-oc-sechd small{ font-weight:500; font-size:11px; color:var(--oc-muted); text-transform:none; letter-spacing:0; margin-left:6px; }

/* ── 카드 컨테이너 ── */
.cp-oc-smart .cp-oc-card{ border:1px solid var(--oc-line); border-radius:12px; background:var(--oc-card); overflow:hidden; }

/* ── 섹션1: 포지션 변화 피드 ── */
.cp-oc-smart .oc-feed{ max-height:280px; overflow-y:auto; }
.cp-oc-smart .oc-ev{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--oc-line); font-size:12.5px; cursor:pointer; transition:background .1s; }
.cp-oc-smart .oc-ev:last-child{ border-bottom:0; }
.cp-oc-smart .oc-ev:hover{ background:var(--oc-hover); }
.cp-oc-smart .oc-ev-time{ min-width:52px; color:var(--oc-muted); font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; flex-shrink:0; }
.cp-oc-smart .oc-ev-name{ font-weight:700; flex-shrink:0; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-oc-smart .oc-ev-body{ flex:1; min-width:0; color:var(--oc-sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-oc-smart .oc-ev-body b{ color:var(--oc-ink); font-weight:700; }
.cp-oc-smart .oc-ev-side{ font-weight:700; }
.cp-oc-smart .oc-ev-kind{ flex-shrink:0; font-weight:700; font-size:11.5px; white-space:nowrap; }
.cp-oc-smart .oc-ev-kind.new{ color:var(--oc-green); }
.cp-oc-smart .oc-ev-kind.close{ color:var(--oc-muted); }
.cp-oc-smart .oc-ev-kind.flip{ color:var(--oc-yellow); }

/* ── 섹션2: 코인별 순포지션 발산형 바 ── */
.cp-oc-smart .oc-coins{ padding:12px 14px; }
.cp-oc-smart .oc-dv{ display:flex; align-items:center; gap:10px; margin:6px 0; font-size:12.5px; }
.cp-oc-smart .oc-dv-sym{ width:78px; font-weight:800; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-oc-smart .oc-dv-track{ flex:1; position:relative; height:16px; background:var(--oc-track); border-radius:4px; }
.cp-oc-smart .oc-dv-center{ position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--oc-line); }
.cp-oc-smart .oc-dv-fill{ position:absolute; top:2px; bottom:2px; border-radius:3px; transition:width .3s; }
.cp-oc-smart .oc-dv-fill.pos{ left:50%; background:var(--oc-green); }
.cp-oc-smart .oc-dv-fill.neg{ right:50%; background:var(--oc-red); }
.cp-oc-smart .oc-dv-val{ width:118px; text-align:right; flex-shrink:0; font-weight:700; font-variant-numeric:tabular-nums; }
.cp-oc-smart .oc-dv-val small{ display:block; font-weight:500; font-size:10px; color:var(--oc-muted); }

/* ── 섹션3: 상위 트레이더 현재 포지션 ── */
.cp-oc-smart .oc-whales{ max-height:420px; overflow-y:auto; }
.cp-oc-smart .oc-wrow{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-bottom:1px solid var(--oc-line); font-size:12.5px; }
.cp-oc-smart .oc-wrow:last-child{ border-bottom:0; }
.cp-oc-smart .oc-wrank{ width:20px; color:var(--oc-muted); font-size:12px; font-variant-numeric:tabular-nums; flex-shrink:0; text-align:right; }
.cp-oc-smart .oc-wnm{ width:140px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-oc-smart .oc-wnm .oc-nm-tag{ color:var(--oc-yellow); font-weight:700; }
.cp-oc-smart .oc-wnm .oc-nm-mono{ font-family:'Courier New',monospace; font-size:12px; color:var(--oc-ink); }
.cp-oc-smart .oc-wnm .oc-wlink{ display:block; color:var(--oc-brand); font-size:10px; text-decoration:none; opacity:.85; }
.cp-oc-smart .oc-wnm .oc-wlink:hover{ text-decoration:underline; }
.cp-oc-smart .oc-wpnl{ width:132px; flex-shrink:0; font-variant-numeric:tabular-nums; }
.cp-oc-smart .oc-wpnl b{ display:block; color:var(--oc-green); font-weight:800; font-size:13px; }
.cp-oc-smart .oc-wpnl small{ color:var(--oc-muted); font-weight:500; font-size:10.5px; }
.cp-oc-smart .oc-wpos{ flex:1; min-width:0; color:var(--oc-sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-oc-smart .oc-wpos .oc-side{ font-size:10px; font-weight:700; padding:1px 6px; border-radius:6px; margin:0 4px; }
.cp-oc-smart .oc-wpos .oc-side.long{ background:rgba(14,163,107,.14); color:var(--oc-green); }
.cp-oc-smart .oc-wpos .oc-side.short{ background:rgba(224,48,78,.14); color:var(--oc-red); }
.cp-oc-smart .oc-wpos .oc-wacct{ color:var(--oc-muted); }
.cp-oc-smart .oc-wpos .oc-none{ color:var(--oc-muted); }

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

.cp-oc-smart .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-smart .cp-oc-title{ font-size:18px; }
  .cp-oc-smart .oc-ev-kind{ width:100%; padding-left:60px; text-align:left; }
  .cp-oc-smart .oc-ev{ flex-wrap:wrap; }
  .cp-oc-smart .oc-dv-sym{ width:56px; }
  .cp-oc-smart .oc-dv-val{ width:96px; font-size:11.5px; }
  .cp-oc-smart .oc-wrow{ flex-wrap:wrap; }
  .cp-oc-smart .oc-wpos{ flex-basis:100%; order:5; }
}