/* TT Score 데모 갤러리 — 필터 칩·조건 배지·기능 꼬리표·출처 줄(app/tt_score_demos.py). score.css 의 갤러리 틀 위에 얹는다.
 * 색은 사이트 토큰. 영상 위 배지는 영상이 밝든 어둡든 읽히게 진한 바탕을 고정으로 둔다(두 테마 같다). */
.tsFilters{display:grid;gap:var(--sp-2);margin:0 0 var(--sp-4)}
.tsFilters[hidden],.tsEmpty[hidden],.tsDemo[hidden]{display:none}
.tsChips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.tsChipsH{flex:0 0 auto;min-width:4.6em;font-size:var(--fs-sm);font-weight:800;color:var(--dim)}
.tsChip{min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--border-2);background:var(--surface);color:var(--text);
  font:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.tsChip:hover{border-color:var(--accent)}
.tsChip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.tsChip:focus-visible{outline:3px solid var(--text);outline-offset:2px}
.tsChip:active{transform:translateY(1px)}
.tsCount{margin:2px 0 0;font-size:var(--fs-sm);color:var(--dim)}
.tsEmpty{display:grid;justify-items:start;gap:var(--sp-2);margin:0 0 var(--sp-4);padding:var(--sp-4) var(--sp-5);border-radius:18px;
  border:2px dashed var(--border-2);background:var(--surface-2)}
.tsEmpty p{margin:0}
.tsEmpty .tpBtn{min-height:44px}
.tsBadges{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 0}
/* 조건 배지: 진한 바탕 고정(두 테마 모두 흰 글자 대비 15:1 안팎) — 기능 꼬리표(옅은 바탕)와 한눈에 갈리게 */
.tsCond{padding:2px 10px;border-radius:999px;background:#241c1f;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:var(--fs-sm);font-weight:800;line-height:1.5}
.tsTags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.tsTags li{padding:2px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border-2);font-size:var(--fs-sm);font-weight:700}
.tsWeak{border-left:3px solid var(--warn-fill);padding-left:8px}
.tsWeak b{margin-right:4px}
.tsSrc{font-size:var(--fs-sm);color:var(--dim);line-height:1.55;overflow-wrap:anywhere}
.tsSrc a{color:var(--accent-text);text-underline-offset:2px}
.tsSrc a:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
/* 세로 영상은 16:9 칸에 넣으면 손톱만 해진다 — 세로 칸을 조금 키운다(포스터와 영상 모두 contain) */
.tsDemo.tall .tsVid video{aspect-ratio:4/5;object-fit:contain;background:#141011}
/* 폰에서는 칩이 세 줄씩 쌓여 화면 하나를 차지했다 — 줄마다 가로로 밀어 보게 한다(칩 줄 안에서만 넘친다, 페이지는 안 넘친다) */
@media (max-width:480px){
  .tsChipsH{min-width:auto;scroll-snap-align:start}   /* 이름표에도 맞춤점을 — 없으면 첫 칩으로 붙어 이름표가 가려졌다 */
  .tsChips{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 6px;margin:0 -2px;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .tsChip{flex:none;padding:0 13px;scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){
  .tsChip{transition:none}
  .tsChip:active{transform:none}
}