/* ── pages / cases-before-after — Before & After ───────────────────
   아키타입 gallery: 히어로 → 분류 칩 → 안내 → .gallery(339장) →
   페이저 → 의료광고 고지 → 형제 이동 → 상담 CTA.
   뼈대는 subpage.css 의 .page-hero / .gallery / .siblings / .cta-band 와
   layout.css 의 .pager 가 잡는다. 이 파일은 그 프리미티브에 없는 것만 덮어쓴다.

   분류 칩은 site.js 의 [data-filter] 가, 24장씩 끊는 것은 [data-pager] 가
   한다. 이미지는 전부 loading="lazy" — 한 그리드에 깔아도 화면에 가까운
   것만 받는다. */

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

/* 배경은 수술실 사진(hero.jpg). 무영등·흰 수납장·하늘색 수술복이 섞여
   원본이 밝고 사람도 많다. 1920 렌더로 확인하니 오버레이 76% 에서도
   핑크 eyebrow 가 밝은 수납장 띠에 묻혀 읽히지 않았다. 82% 로 올려
   사진을 질감 수준으로 낮추고 글자를 띄운다. */
.cba-hero{
  background-image:
    linear-gradient(rgba(0,0,0,.82),rgba(0,0,0,.82)),
    var(--hero-img,none);
}

/* ── 증상별 분류 ───────────────────────────────────────────── */

/* 국문 원문은 ?cate= 로 서버가 걸러 준다. 여기서는 카드의 data-cat 을
   site.js 가 걸러 같은 결과를 낸다. 고른 칩만 브랜드색으로 채운다. */
.cba-filters{justify-content:center;gap:8px}
.cba-filters__chip{
  height:auto;min-height:34px;padding-block:6px;
  background:transparent;color:var(--text-secondary);
  box-shadow:inset 0 0 0 1px var(--line-mid);
  word-break:keep-all;
}
.cba-filters__chip:hover{color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.cba-filters__chip.is-on{
  background:var(--brand);color:var(--text-inverse);font-weight:700;box-shadow:none;
}

/* ── 안내문 ────────────────────────────────────────────────── */

.cba-cases__note{
  margin-top:var(--sp-stack);
  padding:16px 20px;
  background:var(--brand-tint-1);
  border-radius:var(--radius-sm);
  font-size:var(--fs-16);line-height:1.6;letter-spacing:var(--ls-tight);
  color:var(--text-secondary);word-break:keep-all;
}

/* ── 케이스 갤러리 ─────────────────────────────────────────── */

.cba-gallery{margin-top:var(--sp-block)}
/* 걸러지거나 다른 페이지로 넘어간 카드는 그리드 칸까지 비워야 한다 */
.cba-case[hidden]{display:none}

/* 원본은 전부 before/after 2분할 스트립이다. 한 칸이 좁으면 얼굴 옆모습
   두 장이 각각 절반으로 줄어 비교가 안 된다. 1280 컨테이너에서
   4열(297px)이 아니라 3열(406px)로 가고, 모바일은 2열이 아니라 1열로 간다.
   (subpage.css 의 .gallery 규칙과 특정도가 같고 이 파일이 뒤에 실리므로
    미디어쿼리 안에서도 이 선언이 이긴다) */
@media (max-width:767px){
  .cba-gallery{grid-template-columns:1fr}
}

/* 원본은 전후가 한 장에 붙은 2분할 스트립이고 비율이 제각각이다
   (1.18 ~ 1.50). 잘라 맞추면 한쪽이 날아가므로 가장 흔한 1500/1060 을
   칸 비율로 잡고 contain 으로 넣는다. 남는 자리는 .gallery__item 기본
   배경(surface-muted)이 그대로 받는다. */
.cba-gallery img{
  aspect-ratio:1500/1060;
  object-fit:contain;
  object-position:center;
}

/* 캡션 — 원문은 "분류라벨 + 케이스명" 이 붙어 있다. 글자는 그대로 두고
   붙은 자리에서만 끊어 칩 + 제목 두 줄로 세운다. */
.cba-case__cap{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.cba-case__tag{
  max-width:100%;height:auto;min-height:28px;padding-block:5px;
  line-height:1.3;text-align:left;
}
.cba-case__title{
  font-weight:700;color:var(--text-primary);letter-spacing:var(--ls-tight);
}

/* ── 의료광고 고지 ─────────────────────────────────────────── */

.cba-cases__note-side{margin-top:var(--sp-block)}

/* ── 형제 페이지 이동 ──────────────────────────────────────── */

.cba-nav__list{margin-inline:auto}

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

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

/* ── 국문 상세가 있는 케이스 — 사진·제목이 영문 상세로 간다 ───────────
   (구축코재수술 · 용코) 사진을 감싼 <a> 는 block 이라 칸 크기가 그대로다.
   라벨은 right-after 목록의 'See after' 알약과 같은 규격. */
.cba-case__media{position:relative;display:block;border-radius:var(--radius-card);overflow:hidden}
.cba-case__more{
  position:absolute;left:16px;bottom:16px;
  display:inline-flex;align-items:center;
  min-height:34px;padding-inline:16px;
  border-radius:var(--radius-pill);
  background:var(--brand);color:var(--text-inverse);
  font-weight:700;font-size:var(--fs-14);line-height:1.2;letter-spacing:var(--ls-tight);
  transition:background-color .18s ease;
}
.cba-case__media:hover .cba-case__more{background:var(--brand-dark)}
.cba-case__title a{color:inherit;transition:color .18s ease}
.cba-case__title a:hover{color:var(--brand)}