/* ── pages / reviews-patients — Patient Reviews ────────────────────
   두 덩이다.
     1) 영문 후기 46건 — kowonglobal.com/reviews?wvd=6 원문(사진 + 본문).
        한 페이지 5건, 나머지는 site.js 의 [data-pager] 가 넘긴다.
     2) 국문 홈페이지(kowonps.com/reviews/patients)에 올라온 후기 사진벽 —
        제목은 원문 JSON-LD 의 것을 영문으로 옮겨 달았다.
   뼈대는 subpage.css 의 .page-hero / .gallery__item / .gallery__cap /
   .siblings / .cta-band 와 layout.css 의 .pager 가 잡는다.
   이 파일은 그 프리미티브에 없는 것만 덮어쓴다. */

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

/* 형제 후기 페이지(reviews-handwritten)와 같은
   수술실 사진(hero.jpg). 무영등 반사 때문에 원본이 밝아 .page-hero 기본
   오버레이 68% 로는 흰 H1 이 먹힌다. 형제 페이지와 같은 76% 로 올린다. */
.rvp-hero{
  background-image:
    linear-gradient(rgba(0,0,0,.76),rgba(0,0,0,.76)),
    var(--hero-img,none);
}

/* ── 영문 후기 ─────────────────────────────────────────────── */

.rvp-intro{
  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;
}
.rvp-list{margin-top:var(--sp-block)}
.rvp-review{padding-block:var(--sp-block);border-top:1px solid var(--line-soft)}
.rvp-review:first-child{border-top:0;padding-top:0}
/* 다른 페이지로 넘어간 후기는 위 구분선까지 같이 사라져야 한다 */
.rvp-review[hidden]{display:none}
.rvp-review__title{
  font-weight:700;font-size:var(--fs-32);line-height:1.4;letter-spacing:var(--ls-tight);
  color:var(--text-primary);word-break:keep-all;
}
/* 후기 원문은 사진과 글이 번갈아 온다. 읽는 폭은 900 으로 묶고
   스크린숏은 원본 비율 그대로 둔다(글자가 잘리면 못 읽는다). */
.rvp-review__body{
  max-width:900px;margin-top:var(--sp-stack);
  font-size:var(--fs-18);line-height:1.8;color:var(--text-secondary);word-break:keep-all;
}
.rvp-review__body > * + *{margin-top:16px}
.rvp-review__fig{margin-block:var(--sp-stack)}
.rvp-review__fig img{
  width:100%;height:auto;max-width:560px;
  border-radius:var(--radius-card);background:var(--surface-muted);
}
@media (max-width:767px){
  .rvp-review__title{font-size:var(--fs-24)}
}

/* ── 국문 후기 사진벽 ───────────────────────────────────────── */

.rvp-wall__head{margin-bottom:var(--sp-block)}

/* ── 후기 갤러리 ───────────────────────────────────────────── */

/* 30장의 원본 비율이 0.644(386×599)부터 1.5(150×100)까지 제각각이다.
   형제 페이지처럼 aspect-ratio + object-fit:cover 로 칸을 맞추면
   X(트위터) 스크린숏의 본문 글자와 셀카의 얼굴이 잘린다.
   그래서 칼럼으로 깔아 원본 비율을 그대로 살린다 — 자르는 곳이 없다.
   컨테이너 배치만 바꾸고 칸 안쪽(사진·캡션)은 .gallery__item /
   .gallery__cap 프리미티브를 그대로 쓴다.
   열은 .gallery 기본과 같은 4열. 3열로 넓히면 한 칸이 407px 로 커지는
   대신 칼럼 7장이 3·2·2 로 갈려 한 칼럼만 길게 늘어진다.
   4열이 덜 들쭉날쭉하고 벽으로 읽힌다. */
.rvp-gallery{
  display:block;              /* .gallery 의 grid 를 칼럼으로 갈아탄다 */
  column-count:4;
  column-gap:var(--sp-gap);
}
.rvp-shot{
  break-inside:avoid;
  margin-bottom:var(--sp-gap);
}

/* 캡션 — 시술 칩 + 후기 제목(국문 원문을 영문으로 옮긴 것) 두 줄. */
.rvp-shot__cap{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
}
.rvp-shot__label{color:var(--text-tertiary)}

/* 태블릿·모바일 2열 — .gallery 프리미티브의 3·4열 규칙과 같은 리듬 */
@media (max-width:1023px){
  .rvp-gallery{column-count:2}
}

/* ── 환자 인용 ─────────────────────────────────────────────── */

/* 콘텐츠 JSON 에서 사진 7장마다 한 번씩 끼어 있는 문장 4개.
   사진 벽을 끊어 주는 자리라 갤러리 사이에 그대로 세운다.
   blockquote 는 base.css 리셋 대상이 아니라 여백을 여기서 지운다. */
.rvp-quote{
  max-width:820px;
  margin:0 auto;
  padding-block:var(--sp-block);
  text-align:center;
}
/* 인용 부호 대신 브랜드 색 짧은 막대. .sub-label 의 막대와 같은 장치다
   (Italiana 의 따옴표 글리프는 이 크기에서 먼지처럼 보인다). */
.rvp-quote::before{
  content:"";
  display:block;
  width:40px;height:3px;
  margin:0 auto var(--sp-tight);
  border-radius:2px;
  background:var(--brand);
}
.rvp-quote p{
  margin-top:var(--sp-tight);
  font-weight:700;font-size:var(--fs-24);line-height:1.6;
  letter-spacing:var(--ls-tight);
  color:var(--text-primary);
  word-break:keep-all;
}

/* ── 더 보기 ───────────────────────────────────────────────── */

/* '더 보기' — 국문 /reviews/patients 의 '후기 더보기' 버튼. 2026-09-28 한국어 후기
   36건을 더 옮겨 와 벽의 마지막 칸 묶음에 이어 붙였다. 4열이 비지 않게 앞 2장은 바로 보이고
   나머지는 hidden — 누르면 한꺼번에 펼친다(섹션 뒤 스크립트). hidden 인 동안은 안쪽 lazy
   이미지를 받지 않다가 펼치는 순간 받는다. */
.rvp-shot__link[hidden]{display:none}   /* 위 .rvp-shot__link{display:block} 이 hidden 을 이기므로 */
.rvp-wall__more{margin-top:var(--sp-stack);text-align:center}

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

.rvp-wall__note{margin-top:var(--sp-block)}

/* 고지문 앞머리 라벨 — 원문 aside 의 <strong> 그대로. */
.rvp-wall__note-label{margin-right:8px;color:var(--brand-dark);font-weight:700}

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

.rvp-nav__list{margin-inline:auto}

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

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

/* 제목과 '더 보기'가 상세로 간다. 목록 모양은 그대로다. */
.rvp-review__title a{color:inherit}
.rvp-review__title a:hover{color:var(--brand)}
.rvp-review__more{margin-top:var(--sp-tight)}

/* ── 영문 후기 목록 — 카드 그리드 ──────────────────────────────────
   원본 kowonps.com/en/reviews/patients 와 같은 구성:
   높이가 제각각인 카드를 세로 단(column)에 쌓는 메이슨리.
   후기 사진이 세로·가로·정사각으로 섞여 있어 비율을 고정하면 잘린다 —
   원본처럼 높이를 그대로 두고 단에 흘린다.
   카드를 누르면 그 후기의 상세 페이지로 간다 (목록에 본문을 펼치지 않는다). */
/* 국문 원본은 그리드를 1120 으로 묶고 단 간격을 20 으로 둔다(카드 265px).
   컨테이너 1280 을 그대로 쓰면 카드가 300 가까이 벌어져 후기 스크린샷이
   필요 이상으로 크게 보인다. 원본과 같은 폭으로 맞춘다. */
.rvp-grid{
  max-width:1120px;margin-inline:auto;
  columns:2;column-gap:20px;
}
@media (min-width:640px){ .rvp-grid{columns:3} }
@media (min-width:1024px){ .rvp-grid{columns:4} }

/* 카드가 단 경계에서 잘리지 않게 한다. */
.rvp-card{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:20px}

.rvp-card__link{
  display:block;overflow:hidden;
  border-radius:var(--radius-card);background:var(--surface);
  box-shadow:var(--shadow-card);
  transition:box-shadow .18s ease,transform .18s ease;
}
.rvp-card__link:hover,.rvp-card__link:focus-visible{
  box-shadow:0 8px 40px rgba(0,0,0,.14);transform:translateY(-2px);
}

/* 후기 사진은 커뮤니티 글을 통째로 캡처한 것이라 세로 비율이 제각각이다
   (가로형 0.6 부터 세로 2.8 까지). 비율을 그대로 두면 카드 높이가 206~846 으로
   벌어져 메이슨리가 무너진다. 국문 원본 카드가 373~455 범위인 것에 맞춰
   미디어 높이에 상한만 둔다 — 비율을 강제로 바꾸지 않고, 긴 캡처는 위에서부터
   보여주고 아래를 자른다(글 시작 부분이 남는다). */
.rvp-card__media{
  display:block;position:relative;
  max-height:360px;overflow:hidden;
  background:var(--surface-muted);
}
.rvp-card__media img{display:block;width:100%;height:auto}
/* 잘린 카드는 아래쪽을 살짝 흐려 '더 있다'는 걸 알린다. */
.rvp-card__media::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:56px;
  background:linear-gradient(rgba(255,255,255,0),var(--surface));
  pointer-events:none;
}

.rvp-card__cap{display:block;padding:14px 16px}
.rvp-card__label{
  display:block;
  font-weight:700;font-size:var(--fs-14);line-height:1.2;letter-spacing:var(--ls-wide);
  color:var(--brand);
}
/* 제목은 두 줄까지만. 길이가 제각각이라 카드 높이를 여기서 잡아준다. */
.rvp-card__title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:6px;
  font-weight:700;font-size:var(--fs-16);line-height:1.5;letter-spacing:var(--ls-tight);
  color:var(--text-primary);word-break:keep-all;
  transition:color .18s ease;
}
.rvp-card__link:hover .rvp-card__title{color:var(--brand)}

/* 국문 후기 카드도 상세로 가는 링크다. 사진 판 전체가 눌린다.
   호버 모양은 안쪽 카드의 둥근 바탕판(subpage.css .gallery__item.lift)이 맡는다 —
   링크가 잘라 내면(overflow) 판이 안 보이므로 자르지 않고, 그림자도 겹쳐 두지 않는다. */
.rvp-shot__link{display:block;border-radius:var(--radius-card)}
.rvp-shot__link .rvp-shot{margin:0}
.rvp-shot__link .rvp-shot__label{transition:color .18s ease}
.rvp-shot__link:hover .rvp-shot__label{color:var(--brand)}