/* RTL 자동 반전본 — 원본: /en/assets/css/sections/page-tv-tag.css (직접 고치지 말 것: ~/kowon-i18n/flip_css.js) src-md5=38b39fb7a730839e14a2babe6fc525be */
/* ── pages / tv/tag/<주제> — 태그별 영상 목록 ──────────────────────
   원본 kowonps.com/en/tv?tag=<주제> 와 같은 구성:
   태그 칩 줄 → 주제 링크 줄 → 태그명+편수 → 롱폼 그리드 → 쇼츠 격자.
   롱폼 카드는 tv 허브(page-tv.css)의 .tv-vid 규칙 그대로 — 3열·16:9·같은 호버.
   썸네일은 CDN 미러를 거치지 않고 i.ytimg.com 을 직접 건다. */

.tv-cats__tag.is-current{background:var(--brand);color:var(--text-inverse)}

.tv-tag__topics{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;
  margin-top:var(--sp-tight);
  font-size:var(--fs-14);line-height:1.6;color:var(--text-tertiary);
}
.tv-tag__topics > span{font-weight:700;color:var(--text-secondary)}
.tv-tag__topics a{color:var(--text-tertiary)}
.tv-tag__topics a:hover{color:var(--brand)}

.tv-tag__head{
  margin-top:var(--sp-block);padding-bottom:20px;
  border-bottom:1px solid var(--line-soft);
}
.tv-tag__title{
  font-weight:700;font-size:var(--fs-32);line-height:1.3;letter-spacing:var(--ls-tight);
  color:var(--text-primary);word-break:keep-all;
}
/* 편수는 실제 노출 개수다 (원본은 전체 편수를 적고 일부만 보여준다). */
.tv-tag__count{
  margin-top:6px;
  font-weight:500;font-size:var(--fs-16);line-height:1.4;letter-spacing:var(--ls-tight);
  color:var(--text-tertiary);
}
.tv-tag__grid{margin-top:var(--sp-stack)}
.tv-tag__more{margin-top:var(--sp-block);text-align:center}

/* ── 쇼츠 ─────────────────────────────────────────────────── */
/* 원본은 9:16 타일을 가로로 미는 레일이다. 제목은 카드에 쓰지 않고
   링크 이름(aria-label)으로만 둔다 — 원본과 같다. */
.tv-shorts{margin-top:var(--sp-block);padding-top:var(--sp-block);border-top:1px solid var(--line-soft)}
.tv-shorts__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.tv-shorts__title{
  font-weight:700;font-size:var(--fs-24);line-height:1.3;letter-spacing:var(--ls-tight);
  color:var(--text-primary);
}
.tv-shorts__count{font-size:var(--fs-16);color:var(--text-tertiary)}
.tv-shorts__all{margin-right:auto;font-size:var(--fs-14);color:var(--brand)}
.tv-shorts__all:hover{color:var(--text-primary)}

.tv-shorts__rail{
  display:flex;gap:16px;
  margin-top:var(--sp-stack);padding-bottom:10px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
.tv-short{flex:0 0 180px;scroll-snap-align:start}
.tv-short__link{
  position:relative;display:block;aspect-ratio:9/16;overflow:hidden;
  border-radius:var(--radius-card);background:var(--surface-muted);
  transition:transform .18s ease,box-shadow .18s ease;
}
.tv-short__link:hover,.tv-short__link:focus-visible{
  transform:translateY(-2px);box-shadow:0 8px 40px rgba(0,0,0,.14);
}
.tv-short__thumb{width:100%;height:100%;display:block;object-fit:cover}
/* 쇼츠 표시 — 재생 표시를 올려 영상임을 알린다. */
.tv-short__play{
  position:absolute;right:50%;top:50%;width:44px;height:44px;
  transform:translate(50%,-50%);
  border-radius:50%;background:rgba(0,0,0,.45);
}
.tv-short__play::before{
  content:'';position:absolute;right:52%;top:50%;transform:translate(50%,-50%);
  border-style:solid;border-width:8px 13px 8px 0;
  border-color:transparent #fff transparent transparent;
}

@media (max-width:1023px){
  .tv-tag__grid{grid-template-columns:1fr}
}
@media (max-width:767px){
  .tv-short{flex:0 0 148px}
  .tv-shorts__all{margin-right:0}
}

.tv-all{scroll-margin-top:calc(var(--header-h) + 20px)}
.tv-cats__note a{color:var(--brand)}

/* 롱폼 카드 — 썸네일(재생 버튼)을 누르면 site.js 가 그 자리에 플레이어를 넣고, 제목은 유튜브 새 탭.
   겉모습은 링크 카드였을 때와 같게 재생 표시 없이. */
.tv-vid .yt-play::before,.tv-vid .yt-play::after{content:none}
a.tv-vid__title{color:inherit;text-decoration:none}
a.tv-vid__title:hover,a.tv-vid__title:focus-visible{color:var(--brand)}
/* 롱폼이 없는 태그는 쇼츠가 머리 바로 밑에 온다 — 머리 밑줄과 쇼츠 윗줄이 겹쳐 빈 띠가 생기지 않게 */
.tv-tag__head + .tv-shorts{border-top:0;padding-top:0}