/* 실시간 알람(대형 체결 + 청산 실시간 피드) 네이티브 위젯 — 코린이 라이트/다크 대응.
   컨테이너 #cp-oc-alarm 에 렌더. 스코프 .cp-oc-alarm / html.dark .cp-oc-alarm.
   데이터는 거래소 WebSocket 직결(백엔드 불필요). 24h 청산 요약만 공개 API 폴백 사용. */
.cp-oc-alarm{ --oc-card:#ffffff; --oc-bg:#f4f5f7; --oc-surface2:#eef1f5; --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-alarm{ --oc-card:#161b22; --oc-bg:#0d1117; --oc-surface2:#0f151d; --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-alarm{ margin:0 0 24px; }
.cp-oc-alarm *{ box-sizing:border-box; }

/* == 헤더 == */
.cp-oc-alarm .al-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:4px 0 14px; }
.cp-oc-alarm .al-title{ font-size:20px; font-weight:800; letter-spacing:-.02em; margin:0; }
.cp-oc-alarm .al-title small{ font-size:13px; font-weight:600; color:var(--oc-sub); margin-left:8px; }
.cp-oc-alarm .al-meta{ font-size:12px; color:var(--oc-muted); display:flex; align-items:center; gap:8px; }
.cp-oc-alarm .al-dot{ width:8px; height:8px; border-radius:50%; background:var(--oc-green); display:inline-block; box-shadow:0 0 0 0 rgba(14,163,107,.5); animation:alPulse 1.8s infinite; }
.cp-oc-alarm .al-dot.off{ background:var(--oc-muted); animation:none; box-shadow:none; }
@keyframes alPulse{ 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)} }

/* == 24h 청산 요약 바 == */
.cp-oc-alarm .al-liqbar{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; background:var(--oc-surface2); border:1px solid var(--oc-line); border-radius:12px; padding:10px 16px; margin:0 0 8px; }
.cp-oc-alarm .al-liqitem{ display:flex; flex-direction:column; gap:2px; }
.cp-oc-alarm .al-liqlabel{ font-size:10px; color:var(--oc-muted); text-transform:uppercase; letter-spacing:.5px; font-weight:700; }
.cp-oc-alarm .al-liqval{ font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; }
.cp-oc-alarm .al-liqval.pos{ color:var(--oc-green); }
.cp-oc-alarm .al-liqval.neg{ color:var(--oc-red); }
.cp-oc-alarm .al-liqval.src{ font-size:12px; font-weight:600; color:var(--oc-sub); }
.cp-oc-alarm .al-sound{ margin-left:auto; display:flex; align-items:center; gap:8px; font-size:11px; color:var(--oc-sub); font-weight:600; user-select:none; }
.cp-oc-alarm .al-switch{ position:relative; width:34px; height:18px; border-radius:9px; background:var(--oc-line); cursor:pointer; transition:background .2s; flex-shrink:0; }
.cp-oc-alarm .al-switch.on{ background:var(--oc-brand); }
.cp-oc-alarm .al-switch::after{ content:''; position:absolute; width:14px; height:14px; border-radius:50%; background:#fff; top:2px; left:2px; transition:left .2s; }
.cp-oc-alarm .al-switch.on::after{ left:18px; }
.cp-oc-alarm .al-hint{ font-size:10px; color:var(--oc-muted); padding:0 2px 6px; min-height:14px; }

/* == 코인별 청산 히트맵 == */
.cp-oc-alarm .al-heat{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 10px; }
.cp-oc-alarm .al-heatcell{ background:var(--oc-card); border:1px solid var(--oc-line); border-radius:10px; padding:9px 10px; text-align:center; font-size:11px; }
.cp-oc-alarm .al-heatcoin{ font-weight:800; color:var(--oc-ink); margin-bottom:3px; }
.cp-oc-alarm .al-heatval{ font-size:14px; font-weight:800; margin-top:2px; font-variant-numeric:tabular-nums; }
.cp-oc-alarm .al-heatval.neg{ color:var(--oc-red); }
.cp-oc-alarm .al-heatval.pos{ color:var(--oc-green); }

/* == 통계 바 (매수/매도 압력 + 거래소 연결) == */
.cp-oc-alarm .al-statbar{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; background:var(--oc-card); border:1px solid var(--oc-line); border-radius:12px; padding:10px 16px; margin:0 0 10px; }
.cp-oc-alarm .al-pressure{ display:flex; flex-direction:column; gap:5px; min-width:220px; flex:1; }
.cp-oc-alarm .al-pressure-track{ height:7px; border-radius:4px; background:var(--oc-line); overflow:hidden; width:100%; }
.cp-oc-alarm .al-pressure-fill{ height:100%; border-radius:4px; background:var(--oc-line); transition:background .4s ease; }
.cp-oc-alarm .al-pressure-lbl{ font-size:13px; font-weight:700; letter-spacing:.2px; color:var(--oc-muted); }
.cp-oc-alarm .al-conn{ display:flex; flex-direction:column; gap:5px; margin-left:auto; }
.cp-oc-alarm .al-conn-lbl{ font-size:10px; color:var(--oc-muted); text-transform:uppercase; letter-spacing:.5px; font-weight:700; }
.cp-oc-alarm .al-badges{ display:flex; gap:5px; flex-wrap:wrap; }
.cp-oc-alarm .al-badge{ font-size:10px; padding:2px 8px; border-radius:10px; font-weight:700; border:1px solid var(--oc-line); color:var(--oc-muted); background:var(--oc-surface2); }
.cp-oc-alarm .al-badge.on{ background:rgba(14,163,107,.12); color:var(--oc-green); border-color:rgba(14,163,107,.3); }
.cp-oc-alarm .al-badge.off{ background:rgba(224,48,78,.1); color:var(--oc-red); border-color:rgba(224,48,78,.28); }
.cp-oc-alarm .al-badge.connecting{ background:rgba(201,138,0,.12); color:var(--oc-yellow); border-color:rgba(201,138,0,.3); }

/* == 필터 바 == */
.cp-oc-alarm .al-filters{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 10px; }
.cp-oc-alarm .al-flabel{ font-size:11px; color:var(--oc-muted); white-space:nowrap; font-weight:600; }
.cp-oc-alarm .al-fgroup{ display:flex; gap:3px; background:var(--oc-surface2); border:1px solid var(--oc-line); border-radius:9px; padding:3px; }
.cp-oc-alarm .al-fbtn{ padding:5px 12px; border-radius:6px; border:none; background:transparent; color:var(--oc-sub); cursor:pointer; font-size:11px; font-weight:700; font-family:inherit; transition:background .15s,color .15s; }
.cp-oc-alarm .al-fbtn:hover{ color:var(--oc-ink); }
.cp-oc-alarm .al-fbtn.active{ background:var(--oc-brand); color:#fff; }

/* == 피드 패널 == */
.cp-oc-alarm .al-panel{ border:1px solid var(--oc-line); border-radius:12px; overflow:hidden; background:var(--oc-card); }
.cp-oc-alarm .al-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:11px 16px; border-bottom:1px solid var(--oc-line); background:var(--oc-surface2); }
.cp-oc-alarm .al-panel-title{ font-size:12.5px; font-weight:800; color:var(--oc-ink); }
.cp-oc-alarm .al-panel-count{ font-size:11px; color:var(--oc-muted); font-variant-numeric:tabular-nums; }
.cp-oc-alarm .al-feed{ max-height:62vh; min-height:320px; overflow-y:auto; display:flex; flex-direction:column; }
.cp-oc-alarm .al-feed::-webkit-scrollbar{ width:6px; }
.cp-oc-alarm .al-feed::-webkit-scrollbar-thumb{ background:var(--oc-line); border-radius:3px; }

/* == 피드 행 == */
.cp-oc-alarm .al-item{ display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--oc-line); font-size:12px; }
.cp-oc-alarm .al-item.newrow{ animation:alSlide .25s ease; }
@keyframes alSlide{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)} }
.cp-oc-alarm .al-item.buy-1{ background:rgba(34,197,94,.06); border-left:2px solid rgba(34,197,94,.5); }
.cp-oc-alarm .al-item.buy-2{ background:rgba(34,197,94,.12); border-left:2px solid var(--oc-green); }
.cp-oc-alarm .al-item.buy-3{ background:rgba(34,197,94,.18); border-left:3px solid var(--oc-green); }
.cp-oc-alarm .al-item.buy-4{ background:rgba(34,197,94,.26); border-left:3px solid var(--oc-green); }
.cp-oc-alarm .al-item.sell-1{ background:rgba(224,48,78,.06); border-left:2px solid rgba(224,48,78,.5); }
.cp-oc-alarm .al-item.sell-2{ background:rgba(224,48,78,.12); border-left:2px solid var(--oc-red); }
.cp-oc-alarm .al-item.sell-3{ background:rgba(224,48,78,.18); border-left:3px solid var(--oc-red); }
.cp-oc-alarm .al-item.sell-4{ background:rgba(224,48,78,.26); border-left:3px solid var(--oc-red); }
.cp-oc-alarm .al-item.liq-long{ background:rgba(224,48,78,.05); border-left:2px solid var(--oc-red); }
.cp-oc-alarm .al-item.liq-short{ background:rgba(34,197,94,.05); border-left:2px solid var(--oc-green); }
.cp-oc-alarm .al-item:last-child{ border-bottom:0; }

.cp-oc-alarm .al-ex{ display:inline-block; font-size:10px; font-weight:800; padding:2px 6px; border-radius:5px; letter-spacing:.2px; flex-shrink:0; min-width:56px; text-align:center; }
.cp-oc-alarm .al-ex.bn{ background:#f3ba2f; color:#000; }
.cp-oc-alarm .al-ex.okx{ background:#111; border:1px solid #444; color:#fff; }
.cp-oc-alarm .al-ex.by{ background:#f7a600; color:#000; }
.cp-oc-alarm .al-ex.hl{ background:#6d28d9; color:#fff; }
.cp-oc-alarm .al-ex.bg{ background:#00e5c3; color:#000; }
.cp-oc-alarm .al-ex.unk{ background:var(--oc-surface2); border:1px solid var(--oc-line); color:var(--oc-muted); }
.cp-oc-alarm .al-liqtag{ font-size:9px; font-weight:800; padding:2px 5px; border-radius:4px; background:rgba(201,138,0,.15); color:var(--oc-yellow); flex-shrink:0; }
.cp-oc-alarm .al-coin{ font-weight:800; font-size:12px; width:38px; color:var(--oc-ink); flex-shrink:0; }
.cp-oc-alarm .al-size{ font-weight:800; font-size:13px; flex:1; font-variant-numeric:tabular-nums; }
.cp-oc-alarm .al-size.buy{ color:var(--oc-green); }
.cp-oc-alarm .al-size.sell{ color:var(--oc-red); }
.cp-oc-alarm .al-size.big{ font-weight:900; }
.cp-oc-alarm .al-size.liq{ color:var(--oc-yellow); }
.cp-oc-alarm .al-dir{ font-size:11px; font-weight:700; min-width:52px; text-align:center; padding:2px 6px; border-radius:5px; flex-shrink:0; }
.cp-oc-alarm .al-dir.buy{ background:rgba(14,163,107,.14); color:var(--oc-green); }
.cp-oc-alarm .al-dir.sell{ background:rgba(224,48,78,.14); color:var(--oc-red); }
.cp-oc-alarm .al-dir.long-liq{ background:rgba(224,48,78,.14); color:var(--oc-red); }
.cp-oc-alarm .al-dir.short-liq{ background:rgba(14,163,107,.14); color:var(--oc-green); }
.cp-oc-alarm .al-time{ font-size:10px; color:var(--oc-muted); width:58px; text-align:right; font-variant-numeric:tabular-nums; flex-shrink:0; }

.cp-oc-alarm .al-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; min-height:280px; color:var(--oc-muted); font-size:13px; gap:8px; padding:40px; text-align:center; }
.cp-oc-alarm .al-skel{ display:inline-block; height:12px; width:70px; border-radius:4px; background:linear-gradient(90deg,var(--oc-line) 25%,var(--oc-hover) 37%,var(--oc-line) 63%); background-size:400% 100%; animation:alShimmer 1.3s infinite; }
@keyframes alShimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }

@media (max-width:600px){
  .cp-oc-alarm .al-title{ font-size:18px; }
  .cp-oc-alarm .al-conn{ margin-left:0; }
  .cp-oc-alarm .al-sound{ margin-left:0; }
  .cp-oc-alarm .al-feed{ max-height:none; height:auto; min-height:260px; }
  .cp-oc-alarm .al-coin{ width:32px; }
  .cp-oc-alarm .al-time{ width:48px; }
  .cp-oc-alarm .al-fbtn{ padding:6px 10px; min-height:34px; }
}