/* 고객 후기 — 만족도 조사 데이터 연동용 디자인 레이어.
   theme.css(브랜드 토큰·Nav·Footer) + wash.css(모바일 햄버거·phero) 위에 얹는다.
   별점은 따뜻한 골드. 나머지는 기존 딥네이비 + 청록 팔레트 그대로. */

:root { --gold: #f7b500; --gold-soft: #fff6df; }

/* ---- 별점 컴포넌트 ---- */
.stars { position: relative; display: inline-flex; line-height: 0; }
.stars-bg { display: inline-flex; }
.stars-fg { position: absolute; inset: 0; overflow: hidden; display: inline-flex; }
.stars svg { display: block; flex: 0 0 auto; }

/* ---- 1. 요약(만족도) ---- */
.rv-summary { padding: clamp(72px, 9vw, 108px) 0; }
.rv-sum-grid {
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(36px, 5vw, 72px); align-items: center;
}
@media (max-width: 860px) { .rv-sum-grid { grid-template-columns: 1fr; gap: 40px; } }

.rv-score { display: flex; flex-direction: column; }
.rv-score-row { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.rv-score-big {
  font-family: var(--font-brand); font-weight: 800; letter-spacing: -0.04em;
  font-size: clamp(72px, 13vw, 128px); line-height: .82; color: var(--navy-800);
}
.rv-score-big .of { font-size: .32em; color: var(--label-assistive); font-weight: 700; margin-left: 4px; letter-spacing: -0.02em; }
.rv-score-stars { margin: 22px 0 0; }
.rv-score-sub { margin: 16px 0 0; font-size: 16px; color: var(--label-neutral); line-height: 1.6; }
.rv-repeat {
  margin-top: 28px; display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 22px; border-radius: 14px; background: var(--mint-soft);
}
.rv-repeat .num { font-family: var(--font-brand); font-weight: 800; font-size: 34px; letter-spacing: -0.03em; color: var(--mint-600); line-height: 1; }
.rv-repeat .lab { font-size: 14.5px; color: var(--navy-700); font-weight: 600; line-height: 1.4; }

/* 별점 분포 막대 */
.rv-dist { display: flex; flex-direction: column; gap: 12px; }
.rv-dist-row { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; }
.rv-dist-key { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 700; color: var(--label-neutral); }
.rv-dist-key svg { color: var(--gold); }
.rv-bar { height: 12px; border-radius: 999px; background: rgba(112,115,124,.12); overflow: hidden; }
.rv-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), #ffcb3d);
  width: 0; transition: width 1.1s cubic-bezier(.22,.61,.36,1);
}
.rv-bar.dim span { background: rgba(112,115,124,.34); }
.reveal.in .rv-bar span { width: var(--w, 0); }

/* ---- 2. 항목별 평가(7개) ---- */
.rv-items { background: var(--mint-tint); }
.rv-item-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 48px; }
@media (max-width: 720px) { .rv-item-grid { grid-template-columns: 1fr; } }
.rv-item {
  display: flex; align-items: center; gap: 18px; background: #fff;
  border-radius: 14px; padding: 20px 24px;
  box-shadow: inset 0 0 0 1px var(--line-normal-neutral);
}
.rv-item-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--mint-soft); color: var(--mint-600); flex: 0 0 auto; }
.rv-item-main { flex: 1; min-width: 0; }
.rv-item-name { font-size: 16px; font-weight: 700; color: var(--navy-800); letter-spacing: -0.01em; }
.rv-item-stars { margin-top: 7px; }
.rv-item-score { font-family: var(--font-brand); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--navy-700); flex: 0 0 auto; }
.rv-item-wide { grid-column: 1 / -1; background: var(--navy-800); box-shadow: none; }
.rv-item-wide .rv-item-name, .rv-item-wide .rv-item-score { color: #fff; }
.rv-item-wide .rv-item-ic { background: rgba(255,255,255,.12); color: var(--mint-400); }

/* ---- 3. 후기 목록 ---- */
.rv-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.rv-tab {
  border: 1px solid var(--line-normal-strong); background: #fff; color: var(--label-neutral);
  font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
  padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: all .15s ease; white-space: nowrap;
}
.rv-tab:hover { border-color: var(--mint-500); color: var(--mint-600); }
.rv-tab.on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.rv-tab .cnt { opacity: .6; margin-left: 6px; font-weight: 700; }

.rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }
@media (max-width: 920px) { .rv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .rv-grid { grid-template-columns: 1fr; } }
.rv-card {
  background: #fff; border-radius: 16px; padding: 26px 26px 24px;
  box-shadow: inset 0 0 0 1px var(--line-normal-neutral);
  display: flex; flex-direction: column; transition: box-shadow .18s ease, transform .18s ease;
}
.rv-card:hover { box-shadow: 0 14px 34px rgba(7,27,46,.12); transform: translateY(-3px); }
.rv-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rv-card-cat { font-size: 12px; font-weight: 700; color: var(--mint-600); background: var(--mint-soft); padding: 5px 11px; border-radius: 999px; letter-spacing: -0.01em; }
.rv-card-q { font-size: 16px; line-height: 1.72; color: var(--ink); margin: 18px 0 22px; font-weight: 500; flex: 1; word-break: keep-all; }
.rv-card-meta { display: flex; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line-normal-neutral); }
.rv-card-loc { width: 38px; height: 38px; border-radius: 50%; background: var(--navy-700); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.rv-card-loc svg { color: var(--mint-400); }
.rv-card-place { font-size: 14.5px; font-weight: 700; color: var(--navy-800); letter-spacing: -0.01em; }
.rv-card-detail { font-size: 12.5px; color: var(--label-alternative); margin-top: 2px; }

/* ---- 4. 신뢰 문구 ---- */
.rv-trust { background: var(--navy-900); color: #fff; text-align: center; }
.rv-trust .wrap { max-width: 820px; }
.rv-trust-ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; margin: 0 auto 26px; background: rgba(46,201,187,.14); color: var(--mint-400); }
.rv-trust h2 { font-family: var(--font-brand); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(24px, 3.6vw, 36px); line-height: 1.4; margin: 0; color: #fff; text-wrap: balance; word-break: keep-all; }
.rv-trust h2 .hi { color: var(--mint-400); }
.rv-trust p { margin: 18px 0 0; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.66); }

/* ---- 공통 소제목 인트로 ---- */
.rv-intro { max-width: 720px; }
.rv-note { margin-top: 26px; font-size: 12.5px; color: var(--label-assistive); }
.rv-trust .rv-note { color: rgba(255,255,255,.38); }

@media (max-width: 720px) {
  .rv-summary, .section { }
  /* 모바일 하단 액션바 여백 */
  .rv-trust, .final { }
}