/* Preview-Reviews.html(시술후기 목록) 페이지 전용. CSSBASE(about-base+site-ui+unify) 뒤에 로드 */

/* ===== 헤드 + 필터 ===== */
.rv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(22px,2.6vw,36px);flex-wrap:wrap;}
.rv-head .sec-label{display:flex;align-items:center;gap:14px;font-family:"Space Grotesk",sans-serif;margin-bottom:12px;}
.rv-head .sec-label .num{font-size:14px;font-weight:600;color:var(--point);letter-spacing:.06em;}
.rv-head .sec-label .ln{width:30px;height:1px;background:var(--point);opacity:.55;}
.rv-head .sec-label .lab{font-size:13px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--body);}
.rv-head h2{font-size:clamp(22px,2.7vw,36px);font-weight:300;letter-spacing:-.035em;line-height:1.1;color:var(--ink);}
.rv-filter{display:flex;flex-wrap:wrap;gap:8px;}
.rv-filter a,.rv-filter button{font-family:"Space Grotesk",sans-serif;font-size:12.5px;font-weight:600;color:var(--body);background:#fff;border:1px solid var(--line);padding:9px 17px;cursor:pointer;transition:.2s;min-height:42px;display:inline-flex;align-items:center;border-radius:0 10px 0 10px;text-decoration:none;}
.rv-filter a:hover,.rv-filter button:hover{border-color:var(--point);color:var(--point);}
.rv-filter a.on,.rv-filter button.on{background:var(--ink);border-color:var(--ink);color:#fff;}

/* ===== 후기 카드 ===== */
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px);}
.rvc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:0 24px 0 24px;overflow:hidden;transition:box-shadow .3s,transform .3s;text-decoration:none;}
.rvc:hover{box-shadow:0 24px 54px -32px rgba(14,17,22,.4);transform:translateY(-4px);}
.rvc .rv-thumb{aspect-ratio:4/3;overflow:hidden;background:var(--soft);}
.rvc .rv-thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(1.03) contrast(.96) saturate(.95);transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.rvc:hover .rv-thumb img{transform:scale(1.05);}
.rvc .rv-body{padding:22px 24px;display:flex;flex-direction:column;flex:1;}
.rvc .stars{color:var(--point);letter-spacing:2px;font-size:14px;margin-bottom:12px;}
.rvc .rv-cat{font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--point);margin-bottom:8px;}
.rvc h3{font-size:16.5px;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.4;margin-bottom:10px;}
.rvc p{font-size:13.5px;color:var(--body);line-height:1.7;font-weight:300;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.rvc .rv-meta{margin-top:16px;font-family:"Space Grotesk",sans-serif;font-size:12.5px;color:var(--muted);letter-spacing:.01em;}
.rvc .rv-more{margin-top:14px;font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#666666;display:flex;align-items:center;gap:7px;transition:gap .2s,color .2s;}
.rvc:hover .rv-more{gap:12px;color:var(--point);}

/* ===== 리빌 ===== */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
  .reveal.in{opacity:1;transform:none;}
  .rv-grid .reveal:nth-child(3n+2){transition-delay:.07s;}
  .rv-grid .reveal:nth-child(3n){transition-delay:.14s;}
}
@media(max-width:900px){.rv-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.rv-grid{grid-template-columns:1fr;}}