/* RTL 자동 반전본 — 원본: /en/assets/css/sections/page-tv.css (직접 고치지 말 것: ~/kowon-i18n/flip_css.js) src-md5=de09290e11280eee7942ffc33af3a5f7 */
/* ── pages / tv — KOWON TV 허브 ────────────────────────────────────
   아키타입 hub: 히어로 → 채널 도입 밴드 → 시술별 영상 목록 → 시술 페이지
   이어가기 카드 → 상담 CTA.
   뼈대는 subpage.css 의 .page-hero / .hubgrid / .hubcard / .cta-band 와
   layout.css 의 .card / .ratio / .grid / .tag 로 전부 해결된다.
   이 파일은 그 프리미티브에 없는 것만 덮어쓴다 —
   (1) 밝은 히어로 사진 위 가독성, (2) 카테고리 머리, (3) 영상 카드,
   (4) 이어가기 카드, (5) CTA 밴드 프레이밍. */

/* ── 히어로 ────────────────────────────────────────────────── */

/* .page-hero 기본 오버레이는 검정 68%. 이 페이지 사진(hero.jpg)은 수술실
   조명이라 원본이 거의 흰색이고, 68% 로는 회색 바탕이 되어 핑크 eyebrow 와
   흰 본문이 읽히지 않는다. signature / topics 허브와 같이 80% 로 올린다. */
.tv-hero{
  background-image:
    linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),
    var(--hero-img,none);
}

/* ── 채널 도입 밴드 ────────────────────────────────────────── */

/* 리드가 1280 을 가로지르면 읽기 줄이 너무 길다. .prose 와 같은 900 으로 묶는다. */
.tv-channel__lead{max-width:900px}

/* .sec-head 와 버튼 사이 — J컬 Sec_6 의 .stack-lg 와 같은 --sp-block(60) */
.tv-channel__actions{margin-top:var(--sp-block)}

/* ── 시술별 영상 목록 ──────────────────────────────────────── */

/* 카테고리 점프 칩. .tag 는 28px 높이의 표시용 칩이라 손가락으로 누르기엔
   낮다. 링크로 쓰는 여기서만 44px(최소 터치 영역)로 키우고 호버/포커스
   상태를 준다 — 같은 칩 줄을 쓰는 blog 허브와 같은 값이다. */
.tv-cats__nav{margin-bottom:var(--sp-tight)}
.tv-cats__tags{justify-content:center;gap:8px}
.tv-cats__tag{
  min-height:44px;padding-inline:18px;
  transition:background-color .18s ease,color .18s ease;
}
.tv-cats__tag:hover,.tv-cats__tag:focus-visible{background:var(--brand);color:var(--text-inverse)}

/* 원문은 알약 줄 아래에 주제 페이지로 가는 작은 링크 줄("Browse by topic")을
   한 단 더 둔다. 알약과 구분되게 작은 글자 링크 줄로 둔다.
   원문의 링크처(/topics/<주제>)는 이 빌드에 없으므로 주제 허브 /topics 로 보낸다
   (없는 URL 을 만들지 않는다 — SUBPAGE_CONVENTIONS). blog 허브와 같은 처리다. */

/* 카테고리 블록. 점프 링크로 이동하므로 고정 헤더(스크롤 후 fixed)가
   제목을 덮지 않게 스크롤 여백을 둔다. */
.tv-cat{scroll-margin-top:calc(var(--header-h) + 20px)}
.tv-cat+.tv-cat{margin-top:var(--sp-block)}

/* 카테고리 머리 — 원문대로 제목 + 영상 편수를 한 묶음으로 두고,
   그 맞은편 오른쪽 끝에 주제 전체 링크를 붙인다. */
.tv-cat__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px;
  padding-bottom:20px;border-bottom:1px solid var(--line-soft);
}
.tv-cat__heading{min-width:0}
.tv-cat__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-cat__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);white-space:nowrap;
}
/* 원문은 제목·편수 맞은편에 이 주제의 영상 전체로 가는 링크를 둔다.
   태그별 목록(/tv?tag=…)이 이 빌드에 없어 같은 주제를 모아 둔 /topics 로 보낸다. */
.tv-cat__all{flex:none;font-size:var(--fs-14);color:var(--brand)}
.tv-cat__all:hover{color:var(--text-primary)}

.tv-cat__grid{margin-top:var(--sp-stack)}

/* 영상 카드 — .card(+--shadow) 를 링크 하나로 채운다.
   그리드 칸이 늘어나야 같은 행의 카드가 키를 맞춘다. */
.tv-vid{display:flex}
.tv-vid__link{
  display:flex;flex-direction:column;width:100%;
  transition:box-shadow .18s ease,transform .18s ease;
}
.tv-vid__link:hover,.tv-vid__link:focus-visible{
  box-shadow:0 8px 40px rgba(0,0,0,.14);transform:translateY(-2px);
}
.tv-vid__media{flex:none}
.tv-vid__body{flex:1}
/* .card__title 은 블록 요소를 전제로 한 값이라 span 을 블록으로 세운다.
   영상 제목은 시술명 제목(24)보다 한 단 낮은 18 로 둔다. */
.tv-vid__title{
  display:block;
  font-size:var(--fs-18);line-height:1.5;
  transition:color .18s ease;
}
.tv-vid__link:hover .tv-vid__title,
.tv-vid__link:focus-visible .tv-vid__title{color:var(--brand)}

/* 목록 끝 안내문 — 태그 줄을 가리키는 문장이라 목록과 붙여 두지 않는다. */
.tv-cats__note{
  margin-top:var(--sp-block);
  font-size:var(--fs-16);line-height:1.7;letter-spacing:var(--ls-tight);
  color:var(--text-secondary);text-align:center;word-break:keep-all;
}

/* ── 시술 페이지로 이어가기 ────────────────────────────────── */

.tv-next__lead{max-width:900px}
.tv-next__grid{margin-top:var(--sp-block)}

/* 그리드 칸이 늘어나야 .hubcard 의 height:100% 가 같은 행의 형제와 키를 맞춘다. */
.tv-next__cell{display:flex}

/* 카드 전체가 링크다. 콘텐츠 JSON 에 본문이 없어 라벨 + 시술명 두 줄뿐이라
   .hubcard 의 기본 패딩 안에서 화살표가 바닥에 붙게 둔다. */
.tv-next__card{width:100%}
.tv-next__title{display:block}
.tv-next__arrow{
  font-size:var(--fs-24);line-height:1;color:var(--brand);
  transition:transform .18s ease;
}
.tv-next__card:hover .tv-next__arrow{transform:translateX(-4px)}

/* ── 상담 CTA ──────────────────────────────────────────────── */

/* .cta-band 기본 배치는 center 라 로비 사진의 KOWON 사인이 제목 뒤에 겹친다.
   J컬 Sec_10 이 쓴 프레이밍(세로 41%)과 같게 올려 글자 뒤를 비운다. */
.tv-cta{background-position:100% 0,center 41%}

/* .cta-band 는 컨테이너가 없다. 안쪽 .container 가 가운데 정렬을 이어받는다. */
.tv-cta__inner{display:flex;flex-direction:column;align-items:center}

/* 의료광고 고지 — .disclaimer 의 회색(--text-tertiary)은 핑크 밴드 위에서
   읽히지 않는다. 밴드 안에서만 흰색 계열로 바꾼다. */
.tv-cta__note{
  max-width:900px;
  color:rgba(255,255,255,.9);
}

/* ── 태블릿·모바일 ─────────────────────────────────────────── */

/* 한 카테고리가 영상 3편이라 .grid--3 의 태블릿 2열에서는 매번 한 칸이
   빈 채로 남는다(그런 자리가 6군데). 1023 이하에서는 열을 하나로 내리고
   썸네일을 왼쪽에 둔 가로 카드로 바꾼다 — 유튜브 목록과 같은 형태라
   세로 길이도 2열 그리드보다 짧아진다. */
@media (max-width:1023px){
  .tv-cat__grid{grid-template-columns:1fr}
  .tv-vid__link{flex-direction:row;align-items:center}
  .tv-vid__media{flex:0 0 44%}
  .tv-vid__body{min-width:0;padding:16px 20px}
}

@media (max-width:767px){
  .tv-vid__body{padding:14px 16px}

  /* 제목 줄에서 밀려 내려오므로 오른쪽 끝 대신 왼쪽에 붙인다. */
  .tv-cat__head{align-items:flex-start}

  /* 리드의 고정 줄바꿈은 푼다 (J컬 Sec_10 과 같은 처리) */
  .tv-cta__br{display:none}
}