/* 라이브 현황 섹션 (slice A) — 클래스 접두사 ca-lv-. 골격·카드·KPI 는 app.css v2(layout.js), 상태 알약(data-s="live")도 app.css 가 그린다. */
@keyframes ca-lv-blink{50%{opacity:.25}}
@keyframes ca-lv-ping{0%{box-shadow:0 0 0 0 rgba(0,255,163,.5)}70%{box-shadow:0 0 0 7px rgba(0,255,163,0)}100%{box-shadow:0 0 0 0 rgba(0,255,163,0)}}

/* ── 방송 헤더 / 마지막 방송: 썸네일 | 정보 ─────────────────────────────── */
.ca-lv-head,.ca-lv-off{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:20px;align-items:start;min-width:0}
.ca-lv-thumb{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--ca-inset);border:1px solid var(--ca-line);min-width:0}
.ca-lv-thumb-img,.ca-lv-thumb .ca-img-ph{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.ca-lv-thumb.is-off .ca-lv-thumb-img{filter:saturate(.75) brightness(.92)}
.ca-lv-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--ca-mut2);font-size:12.5px;background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 10px,transparent 10px 20px)}
.ca-lv-thumb-live{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:5px;background:#ff3b3b;color:#fff;font-size:11px;font-weight:850;letter-spacing:.5px;padding:3px 8px;border-radius:6px}
.ca-lv-thumb-live i{width:6px;height:6px;border-radius:50%;background:#fff;animation:ca-lv-blink 1.2s infinite}
.ca-lv-thumb-state{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.72);color:var(--ca-txt2);font-size:11px;font-weight:800;letter-spacing:.6px;padding:3px 8px;border-radius:6px}
.ca-lv-thumb-time{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px;font-variant-numeric:tabular-nums}
.ca-lv-thumb-time:empty{display:none}
.ca-lv-head-info,.ca-lv-off-info{min-width:0;display:flex;flex-direction:column;gap:10px;align-self:stretch}
.ca .ca-lv-title{margin:0;font-size:18px;font-weight:800;line-height:1.4;letter-spacing:-.3px;overflow-wrap:anywhere}
.ca-lv-head-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ca-mut);align-items:center}
.ca-lv-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.ca-lv-cat{font-size:12px;font-weight:700;padding:3px 9px;border-radius:6px;background:var(--ca-green-soft);color:var(--ca-green);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-lv-cat.is-none{background:rgba(255,255,255,.06);color:var(--ca-mut)}
.ca-lv-tag{font-size:12px;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.05);color:var(--ca-txt2);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* 연결 상태(헤더 아래쪽에 붙음) */
.ca-lv-conn{margin-top:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 8px 8px 12px;border-radius:9px;background:var(--ca-inset);border:1px solid var(--ca-line);font-size:12.5px;color:var(--ca-txt2);min-height:46px}
.ca-lv-conn-dot{width:9px;height:9px;border-radius:50%;background:var(--ca-mut2-deco);flex:none}
.ca-lv-conn-msg{flex:1 1 200px;min-width:0;line-height:1.5}
.ca-lv-conn[data-state="live"] .ca-lv-conn-dot{background:var(--ca-green);box-shadow:0 0 0 0 rgba(0,255,163,.5);animation:ca-lv-ping 1.6s infinite}
.ca-lv-conn[data-state="nochat"] .ca-lv-conn-dot{background:var(--ca-cyan)}
.ca-lv-conn[data-state="connecting"] .ca-lv-conn-dot,.ca-lv-conn[data-state="reconnecting"] .ca-lv-conn-dot{background:var(--ca-amber);animation:ca-lv-blink 1s infinite}
.ca-lv-conn[data-state="failed"]{border-color:rgba(255,93,93,.35);background:var(--ca-red-soft);color:#ffb3b3}
.ca-lv-conn[data-state="failed"] .ca-lv-conn-dot{background:var(--ca-red)}
.ca-lv-conn[data-state="paused"]{border-color:rgba(245,176,65,.35);background:var(--ca-amber-soft);color:#ffd28a}
.ca-lv-conn[data-state="paused"] .ca-lv-conn-dot{background:var(--ca-amber)}
.ca-lv-conn[data-state="ended"] .ca-lv-conn-dot{background:var(--ca-mut)}
.ca .ca-lv-conn .ca-btn-sm,.ca .ca-lv-recheck{font-size:12.5px}

/* 마지막 방송: 5칸 지표(데스크톱 5 · 태블릿 3+2 · 모바일 2+2+1, 빈칸 없음) */
.ca-lv-minis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:auto}
.ca-lv-mini{display:flex;flex-direction:column;gap:2px;padding:10px 12px;min-width:0}
.ca-lv-mini-l{font-size:11.5px;color:var(--ca-mut)}
.ca-lv-mini-v{font-size:16px;font-weight:800;letter-spacing:-.3px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ca-lv-mini-s{font-style:normal;font-size:11px;color:var(--ca-mut2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── KPI 미니 추이 ─────────────────────────────── */
.ca-lv-kspark{height:26px}

/* ── 차트 카드 ─────────────────────────────── */
.ca-lv-wait{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;min-height:170px;padding:12px;border:1px dashed var(--ca-line2);border-radius:10px;background:rgba(255,255,255,.015)}
.ca-lv-wait b{font-size:30px;color:var(--ca-txt);font-weight:850;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.ca-lv-wait b span{font-size:14px;color:var(--ca-txt2);font-weight:600;margin-left:3px}
.ca-lv-wait p{font-size:12.5px;color:var(--ca-mut);margin:0}
.ca-lv-ratekv{min-width:0}
.ca-lv-ratekv .ca-kv-row{padding:6px 0}
.ca-lv-ratekv .ca-kv dt{font-size:12.5px}
.ca-lv-ratekv .ca-kv dd{font-size:13px}
.ca-lv-devfoot{flex:1 1 100%;min-width:0}
.ca-lv-devfoot .ca-meter{margin:0}

/* 키워드 */
.ca-lv-words{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-height:150px;min-width:0}
.ca-lv-words > .ca-empty{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:120px}
.ca-lv-words > .ca-words{align-content:center}

/* ── 후원·구독 ─────────────────────────────── */
.ca-lv-donsum{display:grid;gap:8px;min-width:0}
.ca-lv-donsum:empty{display:none}
.ca-lv-st{display:flex;flex-direction:column;gap:2px;padding:9px 11px}
.ca-lv-st-l{font-size:11.5px;color:var(--ca-mut);white-space:nowrap}
.ca-lv-st-v{font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ca-lv-dontypes{display:flex;flex-wrap:wrap;gap:6px}
.ca-lv-donlist{display:grid;gap:6px;align-content:start;min-height:100%}
.ca-lv-donlist > .ca-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:180px}
.ca-lv-don{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;align-items:start;padding:8px 10px;border-radius:8px;background:rgba(245,176,65,.06);border:1px solid rgba(245,176,65,.18)}
.ca-lv-don.is-sub{background:rgba(146,41,247,.07);border-color:rgba(146,41,247,.22)}
.ca-lv-don-amt{font-weight:850;font-size:13.5px;color:var(--ca-amber);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ca-lv-don.is-sub .ca-lv-don-amt{color:#c58bff}
.ca-lv-don-amt span{display:block;font-size:11px;font-weight:600;color:var(--ca-mut)}
.ca-lv-don-body{min-width:0}
.ca-lv-don-who{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}
.ca-lv-don-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ca-lv-don-who time{color:var(--ca-mut2);flex:none;font-size:11.5px}
.ca-lv-don-msg{font-size:12.5px;color:var(--ca-txt2);margin-top:2px;overflow-wrap:anywhere;line-height:1.45}
.ca-lv-don-msg.is-hidden{color:var(--ca-mut2);font-style:italic}

/* ── 최근 채팅 ─────────────────────────────── */
.ca-lv-feedcard .ca-scrollbox{background:var(--ca-inset);border:1px solid var(--ca-line);border-radius:9px}
.ca-lv-feed{list-style:none;margin:0;padding:4px 0}
.ca-lv-feed-empty{padding:22px;text-align:center;color:var(--ca-mut);font-size:13px}
.ca-lv-msg{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:5px 12px;font-size:13px;line-height:1.5}
.ca-lv-msg + .ca-lv-msg{border-top:1px solid rgba(255,255,255,.025)}
.ca-lv-msg time{color:var(--ca-mut2);font-size:11.5px;padding-top:2px;font-variant-numeric:tabular-nums}
.ca-lv-msg-body{min-width:0;overflow-wrap:anywhere}
.ca-lv-msg-who{display:inline-flex;align-items:center;gap:4px;margin-right:6px;vertical-align:baseline;max-width:100%}
.ca-lv-msg-who b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
.ca-lv-msg-text{color:var(--ca-txt)}
.ca-lv-msg.is-hidden .ca-lv-msg-text{color:var(--ca-mut2);font-style:italic}
.ca-lv-msg.is-don{background:rgba(245,176,65,.07)}
.ca-lv-msg.is-sub{background:rgba(146,41,247,.08)}
.ca-lv-msg-don{font-weight:800;color:var(--ca-amber);margin-right:6px;white-space:nowrap}
.ca-lv-msg-sub{font-weight:800;color:#c58bff;margin-right:6px;white-space:nowrap}
.ca-lv-role{font-size:10.5px;font-weight:800;padding:1px 5px;border-radius:4px;background:rgba(51,198,224,.16);color:var(--ca-cyan);flex:none}
.ca-lv-role.is-streamer{background:rgba(0,255,163,.16);color:var(--ca-green)}
.ca-lv-subm{font-size:10.5px;font-weight:800;padding:1px 5px;border-radius:4px;background:var(--ca-pur-soft);color:#c58bff;flex:none}
.ca-lv-emo{width:22px;height:22px;object-fit:contain;vertical-align:-6px;margin:0 1px;border-radius:3px}
.ca-lv-msg-text .ca-img-ph{display:inline-block;width:22px;height:22px;min-height:0;vertical-align:-6px}

/* ── 반응형 ─────────────────────────────── */
@media (max-width:1100px){
  .ca-lv-head,.ca-lv-off{grid-template-columns:minmax(200px,300px) minmax(0,1fr);gap:16px}
  .ca-lv-minis{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ca-lv-minis > *{grid-column:span 2}
  .ca-lv-minis > :nth-child(n+4){grid-column:span 3}
}
@media (max-width:760px){
  .ca-lv-head,.ca-lv-off{grid-template-columns:minmax(0,1fr);gap:12px}
  .ca .ca-lv-title{font-size:16px}
  .ca-lv-minis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ca-lv-minis > *,.ca-lv-minis > :nth-child(n+4){grid-column:span 1}
  .ca-lv-minis > :last-child{grid-column:span 2}
  .ca-lv-don{grid-template-columns:78px minmax(0,1fr)}
  .ca-lv-msg{grid-template-columns:38px minmax(0,1fr);padding:5px 10px}
  .ca-lv-msg-who b{max-width:120px}
}
.ca-lv-off-sum{margin:0;font-size:13.5px;line-height:1.65;color:var(--ca-txt2)}

/* 채팅을 읽을 수 없는 방송: 안내 카드 */
.ca-lv-why{margin:0;font-size:13.5px;line-height:1.65;color:var(--ca-txt2)}
.ca-lv-whykv{flex:1 1 auto;align-content:center}
.ca-lv-whykv > .ca-kv-row{align-items:center}
/* 썸네일 URL 이 만료(404)돼 ui.img 가 자리표시로 바꾼 경우: 빈 검은 상자 대신 '썸네일 없음' 무늬 */
.ca-lv-thumb > .ca-img-ph{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 10px,transparent 10px 20px),var(--ca-inset)}
.ca-lv-thumb > .ca-img-ph::after{content:"썸네일을 불러올 수 없습니다";font-size:12.5px;color:var(--ca-mut2)}

/* 라이브 헤더: 정보 열을 세로 가운데로(연결 상태 띠를 메타 바로 아래에 — 썸네일이 길어도 중간 빈칸 없음) */
.ca-lv-head > .ca-lv-head-info{justify-content:center}
.ca-lv-head .ca-lv-conn{margin-top:2px}
.ca-lv-thumb-state{letter-spacing:0}