/* RTL 자동 반전본 — 원본: /en/assets/css/sections/page-topics.css (직접 고치지 말 것: ~/kowon-i18n/flip_css.js) src-md5=d1b33128c2dd66a94ba73695f779b968 */
/* ── pages / topics — Rhinoplasty topics 허브 ──────────────────────
   아키타입 hub: 히어로 → 도입문 → 카드 그리드(12장) → 상담 CTA.
   뼈대는 subpage.css 의 .page-hero / .hubgrid / .hubcard / .cta-band 로
   전부 해결된다. 이 파일은 그 프리미티브에 없는 것만 덮어쓴다.
   콘텐츠 JSON 에 이미지가 0장이라 카드는 전부 텍스트다 —
   12장이 같은 얼굴로 늘어서지 않도록 번호(Topic 01)와 분량 표기로 구분한다. */

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

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

/* ── 토픽 목록 ─────────────────────────────────────────────── */

/* 도입문이 1280 을 가로지르면 읽기 줄이 너무 길다. .prose 와 같은 900 으로 묶는다. */
.topics-list__lead{max-width:900px}

/* .sec-head 와 카드 사이 — J컬 Sec_9 / signature 허브와 같은 --sp-block(60) */
.topics-list__grid{margin-top:var(--sp-block)}

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

/* 카드 머리: 'Topic' 라벨 + 번호. 콘텐츠 JSON 의 p("Topic") + li("01") 두 조각이다.
   .hubcard__eyebrow 는 한 줄 텍스트용이라 번호를 크게 세울 자리가 없어 따로 짠다. */
.topics-card__kicker{display:flex;align-items:baseline;gap:10px}
.topics-card__label{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-16);line-height:1.2;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--text-tertiary);
}
.topics-card__num{
  font-family:var(--font-numeric);font-weight:400;
  font-size:var(--fs-32);line-height:1;letter-spacing:normal;color:var(--brand);
}

/* 카드 바닥의 분량 표기(영상 수 / 글 수). margin-top:auto 로 카드 높이가
   달라도 바닥에 붙는다. 두 값 사이는 글자를 넣지 않고 세로선으로만 나눈다. */
.topics-card__counts{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:auto;padding-top:20px;
  border-top:1px solid var(--line-soft);
  font-size:var(--fs-14);line-height:1.4;letter-spacing:var(--ls-tight);
  color:var(--text-tertiary);
}
/* .hubcard__text 와 분량 표기 사이 최소 간격 — 짧은 카드에서 붙지 않게 */
.topics-card .hubcard__text{margin-bottom:24px}
/* 건수는 /tv · /blog 가 같은 카테고리를 나눠 둔 6개 주제에서만 링크가 된다.
   나머지 6개는 span 으로 남으므로, 두 요소를 한 선택자로 함께 잡는다. */
.topics-card__counts > *{display:inline-flex;align-items:center}
.topics-card__counts > * + *{padding-right:12px;border-right:1px solid var(--line-soft)}
.topics-card__counts a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-mid)}
.topics-card__counts a:hover{color:var(--brand);text-decoration-color:currentColor}

/* 카드 표제가 그 주제를 다루는 영문 페이지로 가는 링크다.
   .hubcard 는 카드 전체를 링크로 만들지 않으므로(바닥 건수도 각각
   따로 간다) 표제만 링크로 세우고, 호버는 카드 전체가 받는다. */
.topics-card__link{color:inherit}
/* 국문 카드와 같이 표제 끝에 화살표를 달아 눌리는 자리임을 알린다.
   (.hist-era__link 가 쓰는 것과 같은 장치) */
.topics-card__link::after{content:"\00a0\2192"}
.topics-card:hover .topics-card__link,
.topics-card__link:hover{color:var(--brand)}

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

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

/* 의료광고 고지 — .disclaimer 의 회색(--text-tertiary)은 핑크 밴드 위에서
   읽히지 않는다. 밴드 안에서만 흰색 계열로 바꾼다.
   읽기 줄 900 으로 묶고 margin-inline:auto 로 가운데 세운다 — 안쪽 .container
   를 flex 로 만들면 <768 에서 .cta-band__actions 가 폭에 맞춰 줄어들어
   subpage.css 의 .cta-band__actions .btn{width:100%} 가 무력화된다. */
.topics-cta__note{
  max-width:900px;
  margin-inline:auto;
  color:rgba(255,255,255,.9);
}

/* 모바일에서는 리드의 고정 줄바꿈을 푼다 (J컬 Sec_10 과 같은 처리) */
@media (max-width:767px){
  .topics-cta__br{display:none}
}