/* RTL 자동 반전본 — 원본: /en/assets/css/sections/page-cases-right-after.css (직접 고치지 말 것: ~/kowon-i18n/flip_css.js) src-md5=b58678e45e3d44d5406eb2ebaec52d07 */
/* ── pages / cases-right-after — Right-after Case Briefing ─────────
   아키타입 gallery: 히어로 → .gallery(15장) → 의료광고 고지 →
   형제 이동 → 상담 CTA. 15장이라 .more 접기는 쓰지 않는다.
   뼈대는 subpage.css 의 .page-hero / .gallery / .siblings / .cta-band
   가 잡는다. 이 파일은 그 프리미티브에 없는 것만 덮어쓴다. */

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

/* 배경은 수술실 사진(hero.jpg). 무영등 반사와 하늘색 수술복이라 원본이 밝다.
   .page-hero 기본 오버레이 68% 로는 흰 H1 이 조명에 먹힌다.
   같은 hero.jpg 를 쓰는 cases-surgery-log · reviews-patients 와 같은
   76% 로 올린다. (cases-before-after 만 82% 로 더 내려가 있다.) */
.cra-hero{
  background-image:
    linear-gradient(rgba(0,0,0,.76),rgba(0,0,0,.76)),
    var(--hero-img,none);
}

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

/* ── 갤러리 위 소개문 + 부작용 고지 ──────────────────────────────
   국문 /cases/right-after 와 같은 자리·같은 순서. 고지 상자는 수술기록
   페이지(.slog-list__side)와 같은 규격을 쓴다. */
.cra-cases__note{
  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;
}
.cra-cases__side{
  margin-top:var(--sp-tight);
  padding:16px 20px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);
}
.cra-cases__side-label{margin-left:8px;font-weight:700;color:var(--brand)}
.cra-cases__intro + .cra-gallery{margin-top:var(--sp-stack)}


/* 원본은 전부 BEFORE/AFTER 가 위아래로 붙은 세로 2분할 사진이다.
   한 칸이 좁으면 한 컷이 절반으로 줄어 비교가 안 된다. 1280 컨테이너에서
   4열(297px)이 아니라 3열(406px)로 가고, 모바일도 2열이 아니라 1열로 간다.
   (subpage.css 의 .gallery 규칙과 특정도가 같고 이 파일이 뒤에 실리므로
    미디어쿼리 안에서도 이 선언이 이긴다) */
@media (max-width:767px){
  .cra-gallery{grid-template-columns:1fr}
}

/* 원본 비율은 두 가지다 — 944×887 · 1500×1410 · 1888×1774(1.064, 13장)
   와 800×800(1.0, 2장). 잘라 맞추면 위쪽 'BEFORE' 글자가 날아가므로
   많은 쪽을 칸 비율로 잡고 contain 으로 넣는다. 남는 3% 는
   .gallery__item 기본 배경(surface-muted)이 받는다. */
.cra-case__media{
  position:relative;display:block;
  border-radius:var(--radius-card);
  background:var(--surface-muted);
  overflow:hidden;
}
.cra-case__media img{
  display:block;width:100%;
  aspect-ratio:944/887;
  object-fit:contain;
  object-position:center;
  border-radius:0;
}

/* 'See after' — 원문에서 카드마다 붙어 있는 행동 유도 라벨.
   사진 위 어디에 놓여도 읽히도록 브랜드색 알약으로 띄운다. */
.cra-case__more{
  position:absolute;right: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;
}
.cra-case__media:hover .cra-case__more{background:var(--brand-dark)}

/* 캡션 — 원문 문구 그대로. 줄 수가 달라도 카드 높이가 어긋나지 않게
   그리드 행 안에서 위로 붙인다. */
.cra-case{display:flex;flex-direction:column}
.cra-case__cap{font-weight:500;color:var(--text-primary)}

/* 고지문 앞머리 라벨 — 원문 aside 의 <strong> 그대로. 같은 고지문을 쓰는
   cases-before-after 와 동일하게 붙인다. */
.cra-cases__note-label{margin-left:8px;color:var(--brand-dark);font-weight:700}

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

.cra-nav__list{margin-inline:auto}

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

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

/* 캡션도 상세로 가는 링크 — 국문 목록과 같다 */
.cra-case__cap a{color:inherit;transition:color .18s ease}
.cra-case__cap a:hover{color:var(--brand)}

/* ── 상세 /cases/right-after/<slug> ─────────────────────────────
   틀은 수술기록 상세와 같은 .artdet(page-article-detail.css) 이다.
   국문 상세에만 있는 것 — 날짜 · 사진 캡션 · 소제목 · 구분선 ·
   OP PLAN 목록 · 최신/이전 케이스 이동 — 만 여기서 만든다.
   .artdet__body > * + * (간격 16) 를 이기려고 앞에 .artdet__body > 를 붙인다. */
.cra-det__date{margin-top:12px;font-size:var(--fs-14);line-height:1.4;color:var(--text-tertiary)}
.cra-det__cap{margin-top:12px;font-size:var(--fs-14);line-height:1.5;color:var(--text-tertiary);text-align:center}
.artdet__body > .cra-det__h{
  margin-top:var(--sp-block);
  font-weight:700;font-size:var(--fs-24);line-height:1.4;letter-spacing:var(--ls-tight);
  color:var(--text-primary);
}
.artdet__body > .cra-det__rule{margin-block:var(--sp-stack);border:0;border-top:1px solid var(--line-soft)}
.cra-det__label{font-weight:700;font-size:var(--fs-16);letter-spacing:var(--ls-wide);color:var(--brand)}
.artdet__body > .cra-det__plan{
  margin-top:12px;padding:20px 24px;
  background:var(--surface-muted);border-radius:var(--radius-sm);
}
.cra-det__plan li{position:relative;padding-right:16px;font-size:var(--fs-16);line-height:1.7}
.cra-det__plan li + li{margin-top:6px}
.cra-det__plan li::before{
  content:'';position:absolute;right:0;top:.72em;
  width:5px;height:5px;border-radius:50%;background:var(--brand);
}
.cra-det__link a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:4px}

/* 최신 / 이전 케이스 — 국문 옛 브리핑 12건에만 있다 */
.cra-det__nav{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-gap);
  margin-top:var(--sp-section);
}
.cra-det__nav a{
  display:flex;flex-direction:column;gap:6px;padding:20px 24px;
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  transition:border-color .18s ease;
}
.cra-det__nav a:hover{border-color:var(--brand)}
.cra-det__nav-dir{font-weight:700;font-size:var(--fs-14);letter-spacing:var(--ls-wide);color:var(--brand)}
.cra-det__nav-title{font-size:var(--fs-16);line-height:1.5;color:var(--text-primary);word-break:keep-all}
.cra-det__nav .cra-det__nav-older{grid-column:2;align-items:flex-end;text-align:left}
.cra-det__nav + .artdet__back{margin-top:var(--sp-block)}

@media (max-width:767px){
  .cra-det__nav{grid-template-columns:minmax(0,1fr)}
  .cra-det__nav .cra-det__nav-older{grid-column:auto}
}