/* ── KOWON TV 허브 · 태그 페이지 — Shorts 한 줄 캐러셀 ─────────────
   타일은 9:16 원본 그대로(oar2 1080x1920 → 잘림 없음). 한 화면에 타일이 온전히 들어가게
   PC 5 · 태블릿 3 · 모바일 2 개씩. 재생 표시는 얼굴을 가리지 않게 왼쪽 아래 작은 원,
   제목은 그림 위가 아니라 타일 아래(유튜브 새 탭). 앞·뒤 단추는 tv-shorts.js,
   진행 막대는 site.js 의 [data-rail] 이 맞춘다. */
.sh-rail .tv-shorts__head{align-items:center}
.sh-rail__nav{display:flex;gap:10px;margin-left:auto}
.sh-rail__nav .car__arw{cursor:pointer}
.sh-rail__nav .car__arw[disabled]{opacity:.35;cursor:default;transform:none}

.sh-rail__track{gap:20px;margin-top:var(--sp-stack)}
.sh-rail__track > .sh{width:calc((100% - 4 * 20px) / 5)}
.sh__media{border-radius:var(--radius-card);background:var(--surface-muted);transition:transform .18s ease,box-shadow .18s ease}
.sh__media:hover{transform:translateY(-2px);box-shadow:0 8px 40px rgba(0,0,0,.14)}

/* layout.css 의 가운데 큰 흰 원 대신 */
.sh .yt-play::before{
  left:10px;top:auto;bottom:10px;width:34px;height:34px;transform:none;
  background:rgba(0,0,0,.55);box-shadow:none;
}
.sh .yt-play::after{
  left:23px;top:auto;bottom:19px;transform:none;
  border-width:8px 0 8px 12px;border-color:transparent transparent transparent #fff;
}
.sh .yt-play:hover::before,.sh .yt-play:focus-visible::before{transform:scale(1.08)}

.sh__title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:10px;font-size:var(--fs-14);line-height:1.45;font-weight:600;
  color:var(--text-primary);text-decoration:none;
}
.sh__title:hover,.sh__title:focus-visible{color:var(--brand)}

@media (max-width:1023px){
  .sh-rail__track{gap:16px}
  .sh-rail__track > .sh{width:calc((100% - 2 * 16px) / 3)}
}
@media (max-width:767px){
  .sh-rail__track{gap:12px}
  .sh-rail__track > .sh{width:calc((100% - 12px) / 2)}
}