/* 김치 프리미엄 네이티브 위젯 — 코린이 라이트/다크 대응. 스코프 .cp-oc-kimp */
.cp-oc-kimp{ --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-blue:#2f6fed; --oc-yellow:#c98a00; --oc-hover:rgba(47,111,237,.06); font-size:14px; color:var(--oc-ink); }
html.dark .cp-oc-kimp{ --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-blue:#4d8bff; --oc-yellow:#fbbf24; --oc-hover:rgba(77,139,255,.10); }

.cp-oc-kimp{ margin:0 0 24px; }
.cp-oc-kimp .cp-oc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:4px 0 14px; }
.cp-oc-kimp .cp-oc-title{ font-size:20px; font-weight:800; letter-spacing:-.02em; margin:0; }
.cp-oc-kimp .cp-oc-title small{ font-size:12.5px; font-weight:500; color:var(--oc-sub); margin-left:8px; }
.cp-oc-kimp .cp-oc-meta{ font-size:12px; color:var(--oc-muted); display:flex; align-items:center; gap:10px; }
.cp-oc-kimp .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:ocKimpPulse 2s infinite; }
@keyframes ocKimpPulse{ 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-kimp .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-kimp .cp-oc-refresh:hover{ color:var(--oc-brand); border-color:var(--oc-brand); }

/* 상단 지표 카드 */
.cp-oc-kimp .oc-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0 0 14px; }
/* 평균 김프 카드 복원으로 5칸 변형 추가 */
.cp-oc-kimp .oc-metrics.oc-metrics-5{ grid-template-columns:repeat(5,1fr); }
.cp-oc-kimp .oc-mcard{ border:1px solid var(--oc-line); border-radius:12px; background:var(--oc-card); padding:13px 15px; min-width:0; }
.cp-oc-kimp .oc-mlabel{ font-size:11.5px; font-weight:600; color:var(--oc-sub); margin-bottom:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-oc-kimp .oc-mval{ font-size:22px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1; }
.cp-oc-kimp .oc-msub{ font-size:11px; color:var(--oc-muted); margin-top:5px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 색상 의미: 김프 양수=빨강, 역프(음수)=파랑 / 전일대비 상승=초록, 하락=빨강 */
.cp-oc-kimp .oc-up{ color:var(--oc-red); }
.cp-oc-kimp .oc-down{ color:var(--oc-blue); }
.cp-oc-kimp .oc-pos{ color:var(--oc-green); font-weight:700; }
.cp-oc-kimp .oc-neg{ color:var(--oc-red); font-weight:700; }
.cp-oc-kimp .oc-zero{ color:var(--oc-muted); }

/* 코인별 김프 표 */
.cp-oc-kimp .cp-oc-tablewrap{ border:1px solid var(--oc-line); border-radius:12px; overflow:hidden; background:var(--oc-card); }
.cp-oc-kimp .cp-oc-scroll{ overflow-x:auto; max-height:66vh; overflow-y:auto; }
.cp-oc-kimp .cp-oc-table{ width:100%; border-collapse:collapse; min-width:660px; }
.cp-oc-kimp .cp-oc-table th{ position:sticky; top:0; z-index:1; 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-kimp .cp-oc-table th.r{ text-align:right; }
.cp-oc-kimp .cp-oc-table td{ padding:10px 12px; vertical-align:middle; white-space:nowrap; font-size:13px; border-bottom:1px solid var(--oc-line); font-variant-numeric:tabular-nums; }
.cp-oc-kimp .cp-oc-table td.r{ text-align:right; }
.cp-oc-kimp .cp-oc-table tr:last-child td{ border-bottom:0; }
.cp-oc-kimp .cp-oc-table tbody tr:hover{ background:var(--oc-hover); }
.cp-oc-kimp .oc-sym{ font-weight:800; }
.cp-oc-kimp .oc-name{ color:var(--oc-muted); font-size:11px; margin-left:5px; }
.cp-oc-kimp .oc-kprem{ font-weight:700; }
.cp-oc-kimp .oc-price{ color:var(--oc-ink); }
.cp-oc-kimp .oc-price.dim{ color:var(--oc-muted); }
.cp-oc-kimp .oc-vol{ color:var(--oc-muted); font-size:12.5px; }

.cp-oc-kimp .oc-empty{ padding:22px; text-align:center; color:var(--oc-muted); font-size:13px; }

/* 스켈레톤 */
.cp-oc-kimp .oc-skel{ display:inline-block; height:12px; 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:ocKimpShimmer 1.3s infinite; }
@keyframes ocKimpShimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }

@media (max-width:1080px){
  .cp-oc-kimp .oc-metrics.oc-metrics-5{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:720px){
  .cp-oc-kimp .oc-metrics{ grid-template-columns:repeat(2,1fr); }
  .cp-oc-kimp .oc-metrics.oc-metrics-5{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .cp-oc-kimp .cp-oc-title{ font-size:18px; }
  .cp-oc-kimp .oc-mval{ font-size:19px; }
}