/* 포지션 차트 위젯 — 코린이 라이트/다크. 스코프 .cp-oc-poschart */
.cp-oc-poschart{ --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-hover:rgba(47,111,237,.06); font-size:14px; color:var(--oc-ink); }
html.dark .cp-oc-poschart{ --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-hover:rgba(77,139,255,.10); }

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

/* 헤더 */
.cp-oc-poschart .cp-oc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:4px 0 12px; }
.cp-oc-poschart .pc-title{ font-size:20px; font-weight:800; letter-spacing:-.02em; margin:0; }
.cp-oc-poschart .pc-title small{ font-size:13px; font-weight:600; color:var(--oc-sub); margin-left:8px; }
.cp-oc-poschart .pc-meta{ font-size:12px; color:var(--oc-muted); display:flex; align-items:center; gap:10px; }
.cp-oc-poschart .pc-price{ font-size:15px; font-weight:800; color:var(--oc-brand); font-variant-numeric:tabular-nums; }
.cp-oc-poschart .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-poschart .cp-oc-refresh:hover{ color:var(--oc-brand); border-color:var(--oc-brand); }

/* 툴바 */
.cp-oc-poschart .pc-toolbar{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 12px; }
.cp-oc-poschart .pc-tf-lbl{ font-size:12px; font-weight:700; color:var(--oc-muted); margin-right:2px; }
.cp-oc-poschart .pc-tf{ border:1px solid var(--oc-line); background:var(--oc-card); color:var(--oc-sub); border-radius:7px; padding:6px 12px; font-size:12.5px; font-weight:700; cursor:pointer; }
.cp-oc-poschart .pc-tf.on{ background:var(--oc-brand); color:#fff; border-color:var(--oc-brand); }
.cp-oc-poschart .pc-hint-inline{ font-size:11.5px; color:var(--oc-muted); margin-left:8px; }

/* 추적 칩 (chart-chips) */
.cp-oc-poschart .pc-chips{ display:flex; gap:5px; flex-wrap:wrap; flex:1; min-width:0; align-items:center; margin-left:6px; }
.cp-oc-poschart .pc-chip{ display:inline-flex; align-items:center; gap:5px; background:var(--oc-card); border:1px solid var(--oc-line); border-radius:20px; padding:3px 9px; font-size:11.5px; font-weight:600; cursor:pointer; transition:border-color .15s; }
.cp-oc-poschart .pc-chip:hover{ border-color:var(--oc-red); }
.cp-oc-poschart .pc-chip-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.cp-oc-poschart .pc-chip-x{ color:var(--oc-muted); margin-left:2px; font-weight:700; }

/* 실시간 표시등 */
.cp-oc-poschart .pc-live-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--oc-muted); opacity:.5; margin-left:4px; flex-shrink:0; }
.cp-oc-poschart .pc-live-dot.on{ background:#22c55e; opacity:1; box-shadow:0 0 6px rgba(34,197,94,.6); animation:pcLivePulse 1.5s ease-in-out infinite; }
@keyframes pcLivePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* 레이아웃: 차트 + 리사이즈 핸들 + 사이드 */
.cp-oc-poschart .pc-layout{ display:flex; gap:0; align-items:stretch; }
.cp-oc-poschart .pc-chart-wrap{ flex:1; min-width:0; height:480px; border:1px solid var(--oc-line); border-radius:12px; background:var(--oc-card); overflow:hidden; position:relative; }
.cp-oc-poschart .pc-chart{ width:100%; height:100%; }
.cp-oc-poschart .pc-resize{ width:9px; margin:0 2px; flex-shrink:0; cursor:col-resize; border-radius:4px; background:transparent; transition:background .15s; }
.cp-oc-poschart .pc-resize:hover, .cp-oc-poschart .pc-resize.dragging{ background:var(--oc-brand); opacity:.5; }
.cp-oc-poschart .pc-side{ width:300px; min-width:180px; flex-shrink:0; border:1px solid var(--oc-line); border-radius:12px; background:var(--oc-card); display:flex; flex-direction:column; overflow:hidden; height:482px; }
.cp-oc-poschart .pc-side-hdr{ padding:11px 13px; border-bottom:1px solid var(--oc-line); font-size:12.5px; font-weight:800; flex-shrink:0; }
.cp-oc-poschart .pc-side-hdr small{ font-size:10.5px; font-weight:500; color:var(--oc-muted); margin-left:4px; }

/* 사이드 탭 (BTC 고래 / 지갑 검색) */
.cp-oc-poschart .pc-side-tabs{ display:flex; border-bottom:1px solid var(--oc-line); flex-shrink:0; }
.cp-oc-poschart .pc-side-tab{ flex:1; padding:10px 6px; font-size:12px; font-weight:700; color:var(--oc-muted); background:transparent; border:none; cursor:pointer; transition:color .15s, background .15s; }
.cp-oc-poschart .pc-side-tab:hover{ color:var(--oc-ink); background:var(--oc-hover); }
.cp-oc-poschart .pc-side-tab.on{ color:var(--oc-brand); box-shadow:inset 0 -2px 0 var(--oc-brand); }
.cp-oc-poschart .pc-panel{ display:none; flex:1; flex-direction:column; min-height:0; overflow:hidden; }
.cp-oc-poschart .pc-panel.on{ display:flex; }
.cp-oc-poschart .pc-list{ flex:1; overflow-y:auto; min-height:0; }

/* 차트 좌상단 오버레이 범례 (chart-legend) */
.cp-oc-poschart .pc-legend{ position:absolute; top:8px; left:10px; z-index:3; display:flex; flex-direction:column; gap:3px; pointer-events:none; font-size:11px; line-height:1.35; max-width:72%; }
.cp-oc-poschart .pc-legend:empty{ display:none; }
.cp-oc-poschart .pc-cl-row{ display:flex; align-items:center; gap:7px; background:var(--oc-card); background:color-mix(in srgb, var(--oc-card) 82%, transparent); border:1px solid var(--oc-line); border-radius:5px; padding:2px 8px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.cp-oc-poschart .pc-cl-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.cp-oc-poschart .pc-cl-name{ font-weight:700; max-width:130px; overflow:hidden; text-overflow:ellipsis; }

/* 고래 행 (데이터 컬럼: 진입가·미실현ROI·미실현PNL·실현PNL·Total ROI·시드·포지션 수) */
.cp-oc-poschart .pc-wrow{ display:flex; align-items:flex-start; gap:9px; padding:9px 12px; border-bottom:1px solid var(--oc-line); cursor:pointer; transition:background .1s; }
.cp-oc-poschart .pc-wrow:hover{ background:var(--oc-hover); }
.cp-oc-poschart .pc-wrow.on{ background:var(--oc-hover); box-shadow:inset 3px 0 0 var(--oc-brand); }
.cp-oc-poschart .pc-wrow:last-child{ border-bottom:0; }
.cp-oc-poschart .pc-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.cp-oc-poschart .pc-dot.long{ background:var(--oc-green); }
.cp-oc-poschart .pc-dot.short{ background:var(--oc-red); }
.cp-oc-poschart .pc-w-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.cp-oc-poschart .pc-w-line1{ display:flex; align-items:center; justify-content:space-between; gap:4px; }
.cp-oc-poschart .pc-w-name{ font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:4px; flex-wrap:wrap; min-width:0; overflow:hidden; }
.cp-oc-poschart .pc-w-side{ font-size:11px; flex-shrink:0; }
.cp-oc-poschart .pc-w-line2{ font-size:10.5px; color:var(--oc-muted); }
.cp-oc-poschart .pc-w-line2 .pc-w-entry{ color:var(--oc-ink); font-variant-numeric:tabular-nums; }
.cp-oc-poschart .pc-w-grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px; margin-top:1px; font-size:9.5px; color:var(--oc-muted); font-variant-numeric:tabular-nums; }
.cp-oc-poschart .pc-w-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:2px; font-size:9.5px; color:var(--oc-muted); font-variant-numeric:tabular-nums; }
.cp-oc-poschart .pc-w-grid3 span, .cp-oc-poschart .pc-w-grid2 span{ font-size:11px; }
.cp-oc-poschart .pc-w-seed, .cp-oc-poschart .pc-w-cnt{ color:var(--oc-ink); font-weight:600; }
/* (구버전 호환) 단순 행 우측 표기 */
.cp-oc-poschart .pc-w-sub{ font-size:10.5px; color:var(--oc-sub); white-space:nowrap; }
.cp-oc-poschart .pc-w-right{ text-align:right; display:flex; flex-direction:column; gap:2px; font-variant-numeric:tabular-nums; }
.cp-oc-poschart .pc-w-right span:first-child{ font-size:12px; font-weight:700; }
.cp-oc-poschart .pc-w-notional{ font-size:10px; color:var(--oc-muted); }

/* 지갑 태그 배지 (walletTagBadgeHtml 상당) */
.cp-oc-poschart .pc-wtag{ display:inline-block; font-size:9px; font-weight:700; padding:1px 6px; border-radius:10px; vertical-align:middle; white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis; }
.cp-oc-poschart .pc-wtag.insider{ background:rgba(56,189,248,.14); color:#0284c7; border:1px solid rgba(56,189,248,.4); }
html.dark .cp-oc-poschart .pc-wtag.insider{ color:#38bdf8; }
.cp-oc-poschart .pc-wtag.celeb{ background:rgba(251,191,36,.14); color:#b45309; border:1px solid rgba(251,191,36,.4); }
html.dark .cp-oc-poschart .pc-wtag.celeb{ color:#fbbf24; }
.cp-oc-poschart .pc-wtag.top{ background:rgba(167,139,250,.14); color:#6d28d9; border:1px solid rgba(167,139,250,.4); }
html.dark .cp-oc-poschart .pc-wtag.top{ color:#a78bfa; }
.cp-oc-poschart .pc-wtag.guess{ background:var(--oc-bg); color:var(--oc-muted); border:1px dashed var(--oc-line); }

/* 지갑 검색 패널 */
.cp-oc-poschart .pc-wsearch{ padding:9px 10px; border-bottom:1px solid var(--oc-line); flex-shrink:0; display:flex; gap:6px; }
.cp-oc-poschart .pc-wsearch input{ flex:1; min-width:0; padding:7px 9px; border-radius:7px; border:1px solid var(--oc-line); background:var(--oc-bg); color:var(--oc-ink); font-size:12px; }
.cp-oc-poschart .pc-wsearch input:focus{ outline:none; border-color:var(--oc-brand); }
.cp-oc-poschart .pc-search-btn{ padding:6px 12px; border-radius:7px; border:1px solid var(--oc-brand); background:var(--oc-brand); color:#fff; font-size:11.5px; font-weight:700; cursor:pointer; flex-shrink:0; }
.cp-oc-poschart .pc-tag-section{ padding:8px 10px 6px; flex-shrink:0; border-bottom:1px solid var(--oc-line); }
.cp-oc-poschart .pc-tag-lbl{ font-size:9.5px; font-weight:700; color:var(--oc-muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px; }
.cp-oc-poschart .pc-tag-groups{ display:flex; flex-direction:column; gap:6px; max-height:200px; overflow-y:auto; }
.cp-oc-poschart .pc-tag-chip-row{ display:flex; flex-wrap:wrap; gap:4px; }
.cp-oc-poschart .pc-tag-chip{ padding:3px 8px; border-radius:12px; border:1px solid var(--oc-line); background:var(--oc-bg); font-size:10.5px; font-weight:600; color:var(--oc-ink); cursor:pointer; transition:all .15s; white-space:nowrap; }
.cp-oc-poschart .pc-tag-chip:hover{ border-color:var(--oc-brand); color:var(--oc-brand); }
.cp-oc-poschart .pc-tag-chip.celebrity{ border-color:rgba(251,191,36,.5); color:#b45309; }
html.dark .cp-oc-poschart .pc-tag-chip.celebrity{ color:#fbbf24; }
.cp-oc-poschart .pc-tag-chip.insider{ border-color:rgba(56,189,248,.5); color:#0284c7; }
html.dark .cp-oc-poschart .pc-tag-chip.insider{ color:#38bdf8; }
.cp-oc-poschart .pc-tag-chip.unverified{ opacity:.82; border-style:dashed; }

/* 검색 결과 */
.cp-oc-poschart .pc-sresults{ flex:1; overflow-y:auto; padding:6px; min-height:0; }
.cp-oc-poschart .pc-shint{ font-size:11.5px; color:var(--oc-muted); padding:8px 10px; line-height:1.5; }
.cp-oc-poschart .pc-serr{ font-size:11.5px; color:var(--oc-red); padding:6px 10px; }
.cp-oc-poschart .pc-scard{ border:1px solid var(--oc-line); border-radius:8px; padding:8px 9px; margin-bottom:6px; cursor:pointer; transition:border-color .15s, background .15s; }
.cp-oc-poschart .pc-scard:hover{ border-color:var(--oc-brand); background:var(--oc-hover); }
.cp-oc-poschart .pc-scard.on{ border-color:var(--oc-brand); background:var(--oc-hover); box-shadow:inset 3px 0 0 var(--oc-brand); }
.cp-oc-poschart .pc-cs-name{ font-size:12px; font-weight:700; }
.cp-oc-poschart .pc-cs-addr{ font-size:9.5px; color:var(--oc-muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; margin-top:2px; word-break:break-all; }
.cp-oc-poschart .pc-cs-meta{ font-size:10.5px; color:var(--oc-muted); margin-top:4px; display:flex; gap:8px; flex-wrap:wrap; font-variant-numeric:tabular-nums; }
.cp-oc-poschart .pc-cs-hintline{ color:var(--oc-ink); }
.cp-oc-poschart .pc-cs-note{ margin-top:4px; color:var(--oc-muted); font-size:9.5px; line-height:1.4; }
.cp-oc-poschart .pc-cs-badge{ font-size:9px; font-weight:700; }
.cp-oc-poschart .pc-cs-badge.insider{ color:#0284c7; }
html.dark .cp-oc-poschart .pc-cs-badge.insider{ color:#38bdf8; }
.cp-oc-poschart .pc-cs-badge.guess{ color:var(--oc-muted); font-weight:500; }
.cp-oc-poschart .pc-cs-on{ font-size:9.5px; font-weight:700; color:var(--oc-brand); }
.cp-oc-poschart .pc-cs-on::before{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--oc-brand); margin-right:3px; vertical-align:1px; }

.cp-oc-poschart .pc-hint{ padding:18px 14px; text-align:center; color:var(--oc-muted); font-size:12.5px; line-height:1.6; }
.cp-oc-poschart .pc-empty{ border:1px solid var(--oc-line); border-radius:12px; background:var(--oc-card); padding:40px 20px; text-align:center; color:var(--oc-muted); font-size:13px; }

@media (max-width:820px){
  .cp-oc-poschart .pc-layout{ flex-direction:column; gap:12px; }
  .cp-oc-poschart .pc-resize{ display:none; }
  .cp-oc-poschart .pc-side{ width:100% !important; min-width:0 !important; height:auto; max-height:420px; }
  .cp-oc-poschart .pc-chart-wrap{ height:360px; }
  .cp-oc-poschart .pc-list{ max-height:300px; }
}
@media (max-width:600px){
  .cp-oc-poschart .pc-title{ font-size:18px; }
}