/*
 * fx 고객 후기 - 화면 키 reviews (/reviews/). 접두사 fx-rv-(motion.css 의 블록 리빌 .fx-rv 와 이름이 겹치지 않게 항상 하이픈 뒤에 이어 쓴다).
 * 면은 밝게(크몽 캡처 원본이 흰 바탕), 마지막 CTA 만 어둡게. 공통 부품은 components.css·motion.css 것을 쓴다.
 * 순서: 머리·점수 -> 템플릿 구매 후기 행 -> 쪽 번호 -> 크몽 후기 -> CTA -> 반응형 -> reduced-motion
 */
.fx-rv-h1,.fx-rv-h2,.fx-rv-cta__h{font-weight:700;letter-spacing:-.025em;word-break:keep-all}

/* ===== 1. 머리 ===== */
.fx-rv-head{padding:112px 0 var(--fx-sec-y)}
.fx-rv-head__grid{display:grid;gap:40px;align-items:end}
.fx-rv-h1{font-size:clamp(40px,6vw,80px);line-height:1.1;letter-spacing:-.03em}
.fx-rv-head__lead{margin-top:24px;max-width:600px;font-size:clamp(18px,1.6vw,20px)}
.fx-rv-score{display:grid;gap:6px;justify-items:start}
.fx-rv-score__v{display:flex;align-items:baseline;gap:10px;font-size:clamp(72px,10vw,128px);font-weight:700;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.fx-rv-score__v strong{font-weight:700}
.fx-rv-score__v span{font-size:clamp(20px,2vw,28px);font-weight:600;letter-spacing:0;color:var(--fx-fg-3)}
.fx-rv-score__stars{position:relative;display:inline-block;font-size:22px;letter-spacing:.12em;line-height:1.2;color:var(--fx-fg-3);white-space:nowrap}
.fx-rv-score__on{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--fx-fg)}
.fx-rv-score__n{font-size:var(--fx-size-body);color:var(--fx-fg-2)}
.fx-rv-score__n strong{font-weight:700;color:var(--fx-fg)}

/* ===== 템플릿 구매 후기: 카드가 아니라 행. 왼쪽에 누가·무엇을, 오른쪽에 글 ===== */
.fx-rv-rows{margin-top:72px;border-top:2px solid var(--fx-k1)}
.fx-rv-row{display:grid;gap:16px;padding:32px 0;border-bottom:1px solid var(--fx-edge-strong)}
.fx-rv-row__meta{display:grid;gap:4px;align-content:start;justify-items:start}
.fx-rv-row__stars{font-size:18px;letter-spacing:.1em;color:var(--fx-fg)}
.fx-rv-row__product{display:inline-flex;align-items:center;min-height:44px;font-size:18px;font-weight:700;line-height:1.35;text-decoration:underline;text-decoration-color:var(--fx-edge-strong);text-underline-offset:4px}
.fx-rv-row__product:hover{text-decoration-color:currentColor}
.fx-rv-row__by{font-size:var(--fx-size-small);color:var(--fx-fg-3)}
.fx-rv-row__text{max-width:680px;font-size:19px;line-height:1.8;color:var(--fx-fg);white-space:pre-line;word-break:keep-all}

.fx-rv-pager{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.fx-rv-pager__n{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border-radius:var(--fx-radius-pill);font-weight:600;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px var(--fx-edge-strong);transition:background-color var(--fx-time-fast),color var(--fx-time-fast)}
.fx-rv-pager__n:hover{background:var(--fx-tint)}
.fx-rv-pager__n.is-on{background:var(--fx-k1);color:var(--fx-paper);box-shadow:none}

/* ===== 2. 크몽 외주 제작 후기 ===== */
.fx-rv-kmong{--fx-bg:var(--fx-paper-2)}
.fx-rv-h2{font-size:clamp(30px,3.8vw,48px);line-height:1.22}
.fx-rv-kmong__lead{margin-top:14px;max-width:620px}
.fx-rv-by{display:flex;align-items:center;gap:14px;font-size:var(--fx-size-small);color:var(--fx-fg-3)}
.fx-rv-face{width:48px;height:48px;border-radius:50%;flex:none;background:var(--fx-paper)}
.fx-rv-feat{margin-top:56px;padding-top:32px;border-top:2px solid var(--fx-k1)}
.fx-rv-feat__q{max-width:980px;font-size:clamp(24px,3vw,40px);font-weight:600;line-height:1.5;letter-spacing:-.02em;word-break:keep-all}
.fx-rv-feat .fx-rv-by{margin-top:28px}
.fx-rv-feat .fx-rv-face{width:64px;height:64px}
.fx-rv-quotes{margin-top:56px;columns:1;column-gap:clamp(24px,4vw,56px)}
.fx-rv-q{break-inside:avoid;margin:0 0 32px;padding:28px 0 0;border-top:1px solid var(--fx-edge-strong)}
.fx-rv-q blockquote{font-size:19px;line-height:1.8;color:var(--fx-fg-2);word-break:keep-all}
.fx-rv-q .fx-rv-by{margin-top:20px}
/* 세 번째마다 한 칸은 면을 달리해 같은 모양이 이어지지 않게 한다 */
.fx-rv-q:nth-child(3n+2){padding:28px;border-top:0;border-radius:var(--fx-radius-l);background:#fff;box-shadow:inset 0 0 0 1px var(--fx-edge)}
.fx-rv-links{margin-top:40px;display:flex;flex-wrap:wrap;gap:0 32px}
.fx-rv-textlink{display:inline-flex;align-items:center;gap:.3em;min-height:44px;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--fx-edge-strong)}
.fx-rv-textlink:hover{text-decoration-color:currentColor}

/* ===== 3. 마지막 CTA ===== */
.fx-rv-cta{background:var(--fx-s0)}
.fx-rv-cta__h{font-size:clamp(40px,8vw,104px);line-height:1.06;letter-spacing:-.035em}
.fx-rv-cta__d{margin-top:28px;max-width:520px}
.fx-rv-cta__act{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px 16px}

/* ===== 반응형 ===== */
@media (min-width:768px){
  .fx-rv-head{padding-top:140px}
  .fx-rv-row{grid-template-columns:240px 1fr;gap:48px;padding:40px 0}
  .fx-rv-quotes{columns:2}
}
@media (min-width:1024px){
  .fx-rv-head__grid{grid-template-columns:1fr auto;gap:80px}
  .fx-rv-row{grid-template-columns:280px 1fr}
  .fx-rv-quotes{columns:3}
}

@media (prefers-reduced-motion:reduce){
  .fx-rv-pager__n{transition:none}
}