/* 시청자·팬 성향 섹션 [slice C] — v2 배치(README §11.2·§11.4). 클래스는 ca-fans- 접두사, 토큰은 app.css :root(--ca-*)
 * 카드·행·KPI·소제목·각주는 layout.js(card2·bento·kpis2·subhead·foot)가 맡고, 여기에는 섹션 고유 조각만 둔다. */

/* ── 수집 중 패널 ── */
.ca-fans-q{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ca-fans-q-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;min-height:40px;padding:7px 10px;border-radius:8px;background:var(--ca-inset);border:1px solid var(--ca-line);font-size:13px;transition:border-color .2s}
.ca-fans-q-row[data-s="run"]{border-color:rgba(245,176,65,.45)}
.ca-fans-q-row[data-s="done"]{border-color:rgba(0,224,146,.3)}
.ca-fans-q-row[data-s="error"]{border-color:rgba(255,93,93,.35)}
.ca-fans-q-date{color:var(--ca-mut);font-size:12px;white-space:nowrap}
.ca-fans-q-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ca-txt2)}
.ca-fans-q-dur{color:var(--ca-mut);font-size:12px;white-space:nowrap}

/* ── 성향 라벨: 같은 행 타일 높이 동일, 마지막 줄이 덜 차면 마지막 타일이 남는 칸을 채움(--w/--wt) ── */
.ca-fans-personas{display:grid;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));gap:10px;min-width:0}
.ca-fans-persona{--tone:var(--ca-cyan);display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;min-width:0;padding:13px 15px 14px;border-radius:10px;background:rgba(255,255,255,.022);border:1px solid var(--ca-line)}
.ca-fans-persona:last-child{grid-column:span var(--w,1)}
.ca-fans-persona[data-tone="good"]{--tone:var(--ca-good)}
.ca-fans-persona[data-tone="warn"]{--tone:var(--ca-amber)}
.ca-fans-pico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--tone);background:color-mix(in srgb,var(--tone) 11%,transparent);border:1px solid color-mix(in srgb,var(--tone) 26%,transparent)}
.ca-fans-pico svg{display:block}
.ca-fans-pbody{min-width:0}
.ca-fans-plabel{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:20px;font-size:14px;font-weight:700;line-height:20px;letter-spacing:-.15px;color:var(--ca-txt)}
.ca-fans-plabel > span:first-child{min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.ca-fans-ptag{flex:none;font-size:11px;font-weight:650;line-height:18px;padding:0 7px;border-radius:5px;color:var(--tone);background:color-mix(in srgb,var(--tone) 10%,transparent)}
.ca-fans-pdetail{margin-top:4px;font-size:12.5px;line-height:1.6;color:var(--ca-txt2);word-break:keep-all;overflow-wrap:anywhere}

/* ── 참여층 와플 3개 ── */
.ca-fans-waffles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;min-width:0}
.ca-fans-waf{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.ca-fans-waf > .ca-chart{width:100%;max-width:132px}
.ca-fans-waf .ca-cplot{display:flex;justify-content:center}
.ca-fans-waf-cap{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;min-width:0;max-width:100%}
.ca-fans-waf-cap b{font-size:22px;font-weight:800;letter-spacing:-.5px;line-height:1.15;color:var(--ca-txt);font-variant-numeric:tabular-nums}
.ca-fans-waf-l{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ca-txt2)}
.ca-fans-waf-l i{flex:none;width:9px;height:9px;border-radius:3px}
.ca-fans-waf-s{font-size:11.5px;line-height:1.45;color:var(--ca-mut);word-break:keep-all}

/* ── 구독 티어 막대 ── */
.ca-fans-tier{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--ca-hair)}
.ca-fans-tier-bar{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden}
.ca-fans-tier-bar span{display:block;height:100%;min-width:3px}
.ca-fans-tier .ca-legend2{margin:0}

/* ── 카드 안 키·값(후원 배지·채팅 성향) ── */
.ca-card2-body > .ca-fans-kv{padding-top:12px;border-top:1px solid var(--ca-hair)}
.ca-fans-meters{display:grid;gap:15px}

/* ── 키워드 ── */
.ca-fans-cloud{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:84px;padding:2px 0}
.ca-fans-cloud .ca-words{justify-content:center;gap:8px 16px;max-width:1000px}
.ca-fans-cloud > .ca-empty{flex:1 1 auto}

/* ── 표: 주요 참여자(스크롤 상자 안 — 머리글 고정) · 다시보기별 표본 ── */
.ca-fans-topfans .ca-scrollbox{border-radius:0 0 var(--ca-card-r) var(--ca-card-r)}
.ca-fans-topfans .ca-scrollbox > .ca-table-wrap{overflow:visible;border:0;border-top:1px solid var(--ca-line);border-radius:0}
.ca-fans-topfans .ca-table th{z-index:1}
.ca-fans-topfans .ca-table td{padding-top:7px;padding-bottom:7px}
.ca-fans-topfans .ca-table th:first-child,.ca-fans-topfans .ca-table td:first-child{width:44px;padding-right:4px}
.ca-fans-rank{display:inline-flex;width:22px;height:22px;border-radius:6px;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:var(--ca-mut);background:rgba(255,255,255,.04)}
.ca-fans-rank[data-r="1"]{color:#1a1405;background:#ffd56b}
.ca-fans-rank[data-r="2"]{color:#15161a;background:#d8dbe6}
.ca-fans-rank[data-r="3"]{color:#1b1209;background:#e0a46b}
.ca-fans-nick{display:block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ca-fans-samples .ca-table th,.ca-fans-samples .ca-table td{padding-left:9px;padding-right:9px}
.ca-fans-samples .ca-table td{padding-top:8px;padding-bottom:8px}
.ca-fans-samples .ca-table td.ca-ell{max-width:200px}
.ca-fans-vod{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.4}
.ca-fans-vod-date{flex:none;font-size:11.5px;color:var(--ca-mut)}
.ca-fans-vod a,.ca-fans-vod > span:last-child{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ca-fans-cov{display:inline-flex;align-items:center;justify-content:flex-end;gap:7px;white-space:nowrap}
.ca-fans-cov-bar{display:block;width:34px;height:6px;border-radius:3px;background:rgba(245,176,65,.16);overflow:hidden}
.ca-fans-cov-bar i{display:block;height:100%;border-radius:3px;background:var(--ca-amber)}
.ca-fans-cov-bar i[data-full="1"]{background:var(--ca-good)}
.ca-fans-cov-t{min-width:30px;text-align:right;font-weight:650;color:var(--ca-txt2)}

/* ── 표본 없음 ── */
.ca-fans-none{display:flex;gap:14px;align-items:flex-start}
.ca-fans-none-ico{flex:none;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--ca-cyan);background:rgba(51,198,224,.1);border:1px solid rgba(51,198,224,.28)}
.ca-fans-none-txt{min-width:0}
.ca-fans-none-txt b{display:block;font-size:15px;font-weight:700;margin-bottom:4px;color:var(--ca-txt)}
.ca-fans-none-txt p{font-size:13px;line-height:1.65;color:var(--ca-txt2);margin-top:2px;word-break:keep-all;overflow-wrap:anywhere}
.ca-fans-none-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:4px}
.ca-fans-none-box{height:64px;border-radius:10px;border:1px dashed var(--ca-line2);background:rgba(255,255,255,.015);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:0 6px;text-align:center}
.ca-fans-none-box span{font-size:12.5px;color:var(--ca-txt2)}
.ca-fans-none-box i{font-style:normal;font-size:11.5px;color:var(--ca-mut2)}

@media (max-width:1100px){
  .ca-fans-personas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ca-fans-persona:last-child{grid-column:span var(--wt,1)}
  .ca-fans-none-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .ca-fans-personas{grid-template-columns:minmax(0,1fr)}
  .ca-fans-persona:last-child{grid-column:auto}
  .ca-fans-persona{padding:12px 13px}
  /* 와플은 120px 미만으로 그리지 않으므로(차트 최소 폭) 좁은 화면에선 [와플 | 설명] 가로 배치로 한 줄씩 */
  .ca-fans-waffles{grid-template-columns:minmax(0,1fr);gap:14px}
  .ca-fans-waf{flex-direction:row;align-items:center;gap:18px}
  .ca-fans-waf > .ca-chart{flex:none;width:120px;max-width:120px}
  .ca-fans-waf-cap{align-items:flex-start;text-align:left}
  .ca-fans-q-row{grid-template-columns:auto minmax(0,1fr) auto}
  .ca-fans-q-dur{display:none}
  .ca-fans-nick{max-width:130px}
  .ca-fans-topfans .ca-table th,.ca-fans-topfans .ca-table td{padding-left:6px;padding-right:6px}
  .ca-fans-topfans .ca-badge{padding:2px 5px}
  .ca-fans-samples .ca-table{min-width:480px}
  .ca-fans-samples .ca-table td.ca-ell{max-width:150px}
  .ca-fans-none-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}