/* 커뮤니티 > 고객 후기 (reviews.html 전용, 2026-10-09)
   본문 마크업은 tmp/renewal-src/reviews/build_reviews_pages.py 가 만든다(<!-- reviews-all:start --> ~ end).
   카드(.rv · .rv__q · .rv__body · .rv__meta)와 아래 링크·안내(.c-review__links · .c-review__note)는 style.css 의
   무통 마취 후기 규칙을 그대로 쓴다. 키워드 칩은 cases.html 의 .cs-chip 과 같은 모양(p-cases.css 와 같은 규칙을 여기 둔다).
   새 클래스(rva-*)는 fx 등장 목록에 없어서 항상 보인다. */

/* ── 배너: 밤에 불이 켜진 병원 입구. PC 는 왼쪽 어두운 쪽에 글, 모바일은 아래 바닥 쪽에 글 ── */
.rva-hero { background: #0b0b0b; }
.rva-hero .shero__bg { object-position: 70% 50%; }
.rva-hero.shero--dim::before { background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.05) 100%); }
@media (max-width: 1023px) {
  .rva-hero { align-items: flex-end; }
  .rva-hero .shero__bg { object-position: 50% 35%; }
  .rva-hero.shero--dim::before { background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.62) 78%); }
  .rva-hero .shero__in { padding-bottom: clamp(64px, 10vh, 110px); }
}

/* ── 목록 ── */
.rva { padding: 148px 0 140px; background: var(--soft); }
.rva .eyebrow, .rva .s-h2, .rva__lead { text-align: center; }
.rva .s-h2 strong { font-weight: 700; }
.rva__lead { margin-top: 26px; font-size: 16px; line-height: 1.65; color: var(--text); text-wrap: balance; }

.rva-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 48px; }
.cs-chip { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px; border: 1px solid var(--line); border-radius: 21px; background: #fff; font-size: 15px; white-space: nowrap; transition: border-color .2s, background-color .2s, color .2s; }
.cs-chip:hover { border-color: var(--ink); }
.cs-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.cs-chip__n { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cs-chip[aria-pressed="true"] .cs-chip__n { color: rgba(255,255,255,.7); }
.rva-status { min-height: 1.6em; margin-top: 18px; font-size: 14px; line-height: 1.6; color: var(--muted); text-align: center; }
.rva-status:empty { min-height: 0; margin-top: 0; }

/* 읽는 순서(작성일 최신순)가 줄 단위로 이어지도록 격자. 같은 줄 카드는 높이를 맞추고 작성자·날짜는 아래에 */
.rva-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
.rva-list .rv { display: flex; flex-direction: column; margin: 0; scroll-margin-top: calc(var(--hdr-h) + 24px); transition: border-color .3s, box-shadow .3s; }
.rva-list .rv__body { flex: 1 0 auto; }
.rva-list .rv.is-target { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.rva-list .rv:focus { outline: none; }
.rva-list .rv:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (min-width: 600px) { .rva-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) { .rva-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* 더 보기 (무통 마취 페이지 '후기 더 보기' 버튼과 같은 모양) */
.rva-more { margin-top: 48px; text-align: center; }
.rva-more__btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; border: 1px solid var(--line); border-radius: 25px; background: #fff; font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: border-color .2s; }
.rva-more__btn:hover { border-color: var(--ink); }
.rva-more__btn::after { content: ""; flex: none; width: 11px; height: 11px; background: linear-gradient(currentColor 0 0) center / 100% 1.3px no-repeat, linear-gradient(currentColor 0 0) center / 1.3px 100% no-repeat; }
.rva-more__n { font-size: 13px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 1023px) {
  .rva { padding: 70px 0 70px; }
  .rva__lead { margin-top: 20px; font-size: 15px; }
  .rva-filter { gap: 6px; margin-top: 32px; }
  .cs-chip { height: 38px; padding: 0 14px; font-size: 14px; }
  .cs-chip__n { font-size: 12px; }
  .rva-status { margin-top: 14px; font-size: 13px; }
  .rva-list { margin-top: 28px; }
  .rva-more { margin-top: 32px; }
  .rva-more__btn { height: 44px; padding: 0 20px; font-size: 14px; }
}