/* 후원·수익 섹션 (slice D) — 클래스 접두사 ca-support- · 레이아웃은 layout.js(card2·bento·kpis2) 위에 얹는다 */

.ca-support-muted{font-size:12.5px;color:var(--ca-mut);line-height:1.55}
.ca-support-aside{margin:0;font-size:12.5px;line-height:1.55;color:var(--ca-mut);padding-left:12px;border-left:2px solid var(--ca-line2)}

/* 카드 바닥: "공개 상위 N명 합계 ……… 205,100원" */
.ca-support-foot-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;min-width:0;color:var(--ca-mut)}
.ca-support-foot-total b{font-size:15px;font-weight:800;color:var(--ca-txt);letter-spacing:-.3px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ── 순위표(그래프 ↔ 순위표 전환의 표 쪽) ── */
.ca-support-rk{list-style:none;margin:0;padding:0 4px 0 0;display:grid;gap:2px}
.ca-support-rk-row{display:grid;grid-template-columns:24px minmax(0,1fr) 44px;align-items:center;gap:10px;padding:6px 6px;border-radius:8px;transition:background .12s}
.ca-support-rk-row:hover{background:rgba(255,255,255,.03)}
.ca-support-rk-no{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--ca-mut);background:rgba(255,255,255,.04);font-variant-numeric:tabular-nums}
.ca-support-rk-row[data-top="1"] .ca-support-rk-no{background:rgba(255,213,107,.16);color:#ffd56b}
.ca-support-rk-row[data-top="2"] .ca-support-rk-no{background:rgba(216,219,230,.12);color:#d8dbe6}
.ca-support-rk-row[data-top="3"] .ca-support-rk-no{background:rgba(224,164,107,.14);color:#e0a46b}
.ca-support-rk-main{min-width:0;display:grid;gap:5px}
.ca-support-rk-top{display:flex;align-items:baseline;gap:6px;min-width:0}
.ca-support-rk-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--ca-txt)}
.ca-support-rk-ver{flex:none;font-size:10px;color:var(--ca-green);background:var(--ca-green-soft);border-radius:4px;padding:0 4px;line-height:15px}
.ca-support-rk-val{margin-left:auto;flex:none;font-size:13px;font-weight:750;white-space:nowrap;font-variant-numeric:tabular-nums}
.ca-support-rk-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.05);overflow:hidden}
.ca-support-rk-bar i{display:block;height:100%;border-radius:2px;opacity:.85}
.ca-support-rk-share{font-size:11.5px;color:var(--ca-mut);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ── 금액 구성 카드: 진입선·평균·중앙값 타일 ── */
.ca .ca-support-stat{display:grid;gap:3px;padding:9px 11px;border-radius:9px;background:var(--ca-inset)}
.ca-support-stat-l{font-size:11.5px;color:var(--ca-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ca-support-stat-v{font-size:14px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}

/* ── 설정: 구독 티어 ── */
.ca-support-tier{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"no name price" "no emo emo";column-gap:10px;row-gap:1px;align-items:center;height:100%;padding:9px 12px;border-radius:9px;background:var(--ca-pur-soft);border:1px solid rgba(146,41,247,.28);min-width:0}
.ca-support-tier-no{grid-area:no;font-size:11.5px;font-weight:800;color:#c58bff;background:rgba(146,41,247,.2);border-radius:6px;padding:3px 7px;white-space:nowrap}
.ca-support-tier-name{grid-area:name;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650;font-size:13px}
.ca-support-tier-price{grid-area:price;white-space:nowrap;font-size:13.5px;font-variant-numeric:tabular-nums}
.ca-support-tier-emo{grid-area:emo;font-size:11.5px;color:var(--ca-mut)}

/* ── 해석·미션 ── */
.ca-support-ins{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ca-support-ins li{display:grid;grid-template-columns:10px minmax(0,1fr);gap:10px;align-items:start}
.ca-support-ins li > i{width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--ca-mut2-deco,var(--ca-mut2))}
.ca-support-ins li[data-tone="good"] > i{background:var(--ca-good)}
.ca-support-ins li[data-tone="warn"] > i{background:var(--ca-ok)}
.ca-support-ins li[data-tone="bad"] > i{background:var(--ca-bad)}
.ca-support-ins b{display:block;font-size:13px;font-weight:650;color:var(--ca-txt);line-height:1.45;word-break:keep-all;overflow-wrap:anywhere}
.ca-support-ins span{display:block;font-size:12.5px;color:var(--ca-mut);line-height:1.55;margin-top:2px;word-break:keep-all;overflow-wrap:anywhere}
.ca-support-missions-box{padding-top:12px;border-top:1px solid var(--ca-hair);display:grid;gap:8px}
.ca-support-minor{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:700;color:var(--ca-txt2)}
.ca-support-minor-meta{font-size:12px;font-weight:500;color:var(--ca-mut2)}
.ca-support-missions-box .ca-support-muted{margin:0}
.ca-support-missions{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ca-support-missions li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:8px;font-size:13px;padding:6px 0;border-bottom:1px solid var(--ca-hair)}
.ca-support-missions li:last-child{border-bottom:0}
.ca-support-mission-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 다시보기 표본: 대기 ── */
.ca-support-wait{display:flex;align-items:center;gap:12px;padding:6px 2px;font-size:13px;line-height:1.55;color:var(--ca-mut)}
.ca-support-spin{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(245,176,65,.2);border-top-color:var(--ca-amber);animation:ca-support-rot .9s linear infinite}
@keyframes ca-support-rot{to{transform:rotate(360deg)}}

/* ── 최근 후원 기록(스크롤 상자 안, 넓으면 2열) ── */
.ca-support-don{list-style:none;margin:0;padding:0 4px 0 0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));align-content:start}
.ca-support-don-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"meta amt" "body body";gap:5px 12px;align-items:center;padding:9px 12px;border-radius:9px;background:rgba(255,255,255,.025);border:1px solid var(--ca-line);min-width:0}
.ca-support-don-meta{grid-area:meta;display:flex;align-items:center;gap:8px;min-width:0;font-size:12px;color:var(--ca-mut);white-space:nowrap;overflow:hidden}
.ca-support-don-date{color:var(--ca-txt2);font-weight:600}
.ca-support-don-off{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}
.ca-support-don-amt{grid-area:amt;font-size:14px;font-weight:800;color:var(--ca-green);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.ca-support-don-body{grid-area:body;display:flex;align-items:baseline;gap:8px;min-width:0;font-size:13px}
.ca-support-don-nick{flex:none;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650;color:var(--ca-txt)}
.ca-support-don-msg{min-width:0;color:var(--ca-txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-support-don-msg.is-hidden{color:var(--ca-mut);font-style:italic}

/* 와플(익명 비율)은 가운데 */
#sec-support .ca-waffle{justify-content:center}

@media (max-width:760px){
  .ca-support-rk-row{grid-template-columns:24px minmax(0,1fr) 40px;gap:8px;padding:6px 2px}
  .ca-support-foot-total b{font-size:14px}
  .ca .ca-support-stat{padding:8px 9px}
  .ca-support-stat-v{font-size:13px}
  .ca-support-stat-l{font-size:11px}
  .ca-support-don-msg{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}

/* 설정 목록: 라벨 ……… 세부 + 배지(한 줄) */
.ca-support-set .ca-kv-row{grid-template-columns:auto minmax(0,1fr);align-items:center;padding:9px 0}
.ca-support-set .ca-kv-row:first-child{padding-top:0}
.ca-support-set .ca-kv-row:last-child{padding-bottom:0}
.ca-support-set dt{white-space:nowrap}
.ca-support-set dd{min-width:0;overflow:hidden;display:flex;justify-content:flex-end}
.ca-support-set-v{display:inline-flex;align-items:center;justify-content:flex-end;gap:10px;max-width:100%;min-width:0;vertical-align:middle}
.ca-support-set-d{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:500;color:var(--ca-mut)}
.ca-support-set-v > .ca-badge{flex:none;min-width:44px;justify-content:center}

/* 해석 카드 위: 열린 후원 창구 n/4 (채널 개요 막대와 같은 모양) */
.ca-support-chan{display:grid;gap:8px;padding:11px 13px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid var(--ca-line)}
.ca-support-chan-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--ca-txt2);font-weight:600}
.ca-support-chan-top b{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.ca-support-chan-top b[data-tone="good"]{color:var(--ca-green)}
.ca-support-chan-top b[data-tone="warn"]{color:var(--ca-amber)}
.ca-support-chan-top b[data-tone="bad"]{color:#ff8c8c}
.ca-support-chan-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.ca-support-chan-bar span{display:grid;gap:5px;font-size:11.5px;color:var(--ca-mut2)}
.ca-support-chan-bar i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.07)}
.ca-support-chan-bar span.is-on{color:var(--ca-txt2);font-weight:650}
.ca-support-chan-bar span.is-on i{background:var(--ca-green)}
/* 해석 목록이 남는 높이를 고르게 나눠 가짐(옆 설정 카드와 같은 높이일 때 아래 빈칸 대신) */
.ca-support-ins{flex:1 1 auto;align-content:space-evenly}
/* 랭킹이 비었을 때: 큰 빈 카드 대신 한 줄 안내 */
.ca-support-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:12px 16px;border-radius:var(--ca-card-r);border:1px dashed var(--ca-line2);background:rgba(255,255,255,.015);font-size:12.5px;line-height:1.55;color:var(--ca-mut)}
.ca-support-note b{color:var(--ca-txt2);font-weight:700;font-size:13px}
/* 후원 유형(한 유형이 90% 넘을 때): 건수 요약 + 얇은 비율 막대 */
.ca-support-types{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:14px}
.ca-support-types-big{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline}
.ca-support-types-big span{display:inline-flex;align-items:baseline;gap:6px;font-size:12.5px;color:var(--ca-txt2)}
.ca-support-types-big span:first-child b{font-size:24px;font-weight:850;letter-spacing:-.5px}
.ca-support-types-big i{width:9px;height:9px;border-radius:3px;align-self:center}
.ca-support-types-big b{font-weight:800;color:var(--ca-txt);font-variant-numeric:tabular-nums}
.ca-support-types-bar{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden;background:rgba(255,255,255,.05)}
.ca-support-types-bar i{display:block;height:100%}