/* 클립·커뮤니티 섹션 (slice D) — 클래스 접두사 ca-clips- · 레이아웃은 layout.js(card2·bento·kpis2·grid) 위에 얹는다 */

.ca-clips-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)}
.ca-clips-aside[data-tone="warn"]{border-left-color:rgba(245,176,65,.55)}
.ca-clips-more-wrap{display:flex;justify-content:center;width:100%}

/* ── 인기 클립 그리드: 같은 줄 타일 높이 동일, 카테고리 칩은 바닥에 ── */
.ca-clips-grid{align-items:stretch}
.ca .ca-clips-card{display:flex;flex-direction:column;height:100%;min-width:0;text-decoration:none;color:var(--ca-txt);background:var(--ca-inset);border:1px solid var(--ca-line);border-radius:10px;overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s}
.ca .ca-clips-card:hover{border-color:rgba(0,255,163,.45);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.3);text-decoration:none}
.ca .ca-clips-card:focus-visible{outline:2px solid var(--ca-green);outline-offset:2px}
.ca-clips-thumb{position:relative;flex:none;aspect-ratio:16/9;background:var(--ca-panel3);overflow:hidden}
.ca-clips-thumb .ca-clips-img,.ca-clips-thumb .ca-img-ph,.ca-clips-rthumb .ca-clips-img,.ca-clips-rthumb .ca-img-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;display:block;min-height:0}
.ca-clips-thumb::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none}
.ca-clips-rank{position:absolute;left:8px;top:8px;z-index:1;min-width:24px;height:24px;padding:0 6px;border-radius:7px;background:rgba(10,10,14,.78);color:var(--ca-txt);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);font-variant-numeric:tabular-nums}
.ca-clips-rank[data-r="1"]{background:#ffd56b;color:#2a1d00}
.ca-clips-rank[data-r="2"]{background:#d8dbe6;color:#1c1d22}
.ca-clips-rank[data-r="3"]{background:#e0a46b;color:#2a1600}
.ca-clips-dur{position:absolute;right:6px;bottom:6px;z-index:1;font-size:11px;font-weight:700;padding:2px 6px;border-radius:5px;background:rgba(0,0,0,.72);color:#fff;font-variant-numeric:tabular-nums}
.ca-clips-adult{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;font-size:11.5px;font-weight:700;color:#ffb3b3;background:rgba(0,0,0,.6);padding:3px 8px;border-radius:6px;white-space:nowrap}
.ca-clips-meta{flex:1 1 auto;display:flex;flex-direction:column;gap:6px;padding:10px 11px 11px;min-width:0}
.ca-clips-title{font-size:13px;font-weight:650;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;min-height:2.8em}
.ca-clips-sub{display:flex;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--ca-mut);min-width:0;font-variant-numeric:tabular-nums}
.ca-clips-views{color:var(--ca-green);font-weight:700}
.ca-clips-cat{margin-top:auto;align-self:flex-start;font-size:11px;color:var(--ca-txt2);background:rgba(255,255,255,.05);border-radius:5px;padding:2px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-clips-cat[data-none="1"]{color:var(--ca-mut2);background:transparent;border:1px dashed var(--ca-line2)}
/* '모두 보기' 버튼은 모바일(6개만 보일 때)에서만 */
.ca-clips-popular.has-more > .ca-card2-foot{display:none}

/* ── 최근 클립 목록(스크롤 상자 안) ── */
.ca-clips-rlist{list-style:none;margin:0;padding:0 4px 0 0;display:grid;gap:2px}
.ca .ca-clips-rrow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;padding:6px;border-radius:9px;text-decoration:none;color:var(--ca-txt);transition:background .12s}
.ca .ca-clips-rrow:hover{background:rgba(255,255,255,.04);text-decoration:none}
.ca-clips-rthumb{position:relative;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:var(--ca-panel3)}
.ca-clips-rthumb .ca-clips-dur{right:4px;bottom:4px;font-size:10px;padding:1px 5px}
.ca-clips-rmain{min-width:0;display:grid;gap:4px}
.ca-clips-rtitle{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-clips-rcat{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 해석 타일 ── */
.ca-clips-ins{display:grid;grid-template-columns:10px minmax(0,1fr);gap:10px;align-items:start;height:100%;padding:11px 13px;border-radius:10px;background:var(--ca-inset);border:1px solid var(--ca-line);min-width:0}
.ca-clips-ins > i{width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--ca-mut2-deco,var(--ca-mut2))}
.ca-clips-ins[data-tone="good"] > i{background:var(--ca-good)}
.ca-clips-ins[data-tone="warn"] > i{background:var(--ca-ok)}
.ca-clips-ins[data-tone="bad"] > i{background:var(--ca-bad)}
.ca-clips-ins b{display:block;font-size:13px;font-weight:650;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere}
.ca-clips-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}
/* 5개: 3 + 2(마지막 줄 두 칸이 반씩) — 6열 격자로 맞춘다 */
.ca-clips-ins-5{grid-template-columns:repeat(6,minmax(0,1fr))}
.ca-clips-ins-5 > .ca-clips-ins{grid-column:span 2}
.ca-clips-ins-5 > .ca-clips-ins.is-wide{grid-column:span 3}

/* ── 커뮤니티 글 카드(벤토 칸, 같은 줄 높이 동일 · 바닥줄 정렬) ── */
.ca-clips-post{display:flex;flex-direction:column;gap:10px;min-width:0;padding:var(--ca-card-py) var(--ca-card-px);border-radius:var(--ca-card-r);background:linear-gradient(180deg,rgba(255,255,255,.014),transparent 96px),var(--ca-panel2);border:1px solid var(--ca-line)}
.ca-clips-post[data-streamer="1"]{box-shadow:inset 3px 0 0 var(--ca-green)}
.ca-clips-post-head{display:flex;align-items:center;gap:8px;min-width:0}
.ca-clips-post-date{font-size:12px;color:var(--ca-txt2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ca-clips-post-ago{margin-left:auto;font-size:12px;color:var(--ca-mut2);white-space:nowrap}
.ca-clips-post-body{font-size:13px;line-height:1.65;color:var(--ca-txt);white-space:pre-line;overflow-wrap:anywhere;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.ca-clips-post-body.is-empty{color:var(--ca-mut)}
.ca-clips-post-foot{margin-top:auto;display:flex;gap:14px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--ca-hair);font-size:12px;color:var(--ca-mut)}
.ca-clips-post-foot b{color:var(--ca-txt2);font-weight:700;font-variant-numeric:tabular-nums}
.ca-clips-post-att{color:var(--ca-txt2)}
.ca-clips-post-rest[hidden]{display:none}

@media (max-width:760px){
  .ca-clips-grid{gap:10px}
  .ca-clips-grid.is-capped > :nth-child(n+7){display:none}
  .ca-clips-popular.has-more > .ca-card2-foot{display:flex;justify-content:center}
  .ca-clips-meta{padding:8px 9px 10px;gap:5px}
  .ca-clips-title{font-size:12.5px}
  .ca-clips-sub{gap:6px;font-size:11px}
  .ca .ca-clips-rrow{grid-template-columns:84px minmax(0,1fr);gap:10px;padding:5px 2px}
  .ca-clips-ins-5{grid-template-columns:minmax(0,1fr)}
  .ca-clips-ins-5 > .ca-clips-ins,.ca-clips-ins-5 > .ca-clips-ins.is-wide{grid-column:auto}
}

/* 썸네일 없음(생성 직후·성인 클립 등): 재생 표시만 흐리게 */
.ca-clips-noimg{background:linear-gradient(135deg,#23232d,#1a1a22)}
.ca-clips-noimg::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-35%,-50%);border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent rgba(255,255,255,.2)}