@charset "UTF-8";
/* ==========================================================
   WHOMI TRANS - 만족 후기 전체 페이지 (ak-lee-gemini center/review.html 기준)
   ========================================================== */
.rvp{--navy:#16266B;--blue:#3A63DE;--ink:#1a2238;--sub:#6b7a93;--line:#e4e8f1;color:var(--ink)}
.rvp *{box-sizing:border-box}
/* 히어로 */
.rvp-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center;padding:30px 36px 30px 42px;border-radius:10px;color:#0b1449;background:#f4f7f9}
.rvp-hero::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:#2ebb87}
.rvp-tag{display:inline-flex;background:#fff;border:1px solid #cfe8d2;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:1px;margin-bottom:12px;color:#1b8a5a}
.rvp-h1{font-size:26px;font-weight:800;letter-spacing:-.5px;line-height:1.35;color:#0b1449}
.rvp-hsub{font-size:14px;line-height:1.7;color:#333;margin-top:8px}
.rvp-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rvp-stat{background:#fff;border:1px solid #e3e9f2;border-radius:10px;padding:14px 12px;text-align:center;box-shadow:0 3px 10px rgba(11,20,73,.05)}
.rvp-stat b{display:block;font-size:24px;font-weight:800;color:#2ebb87;line-height:1}
.rvp-stat b small{font-size:14px;color:#0b1449}
.rvp-stat span{display:block;font-size:12px;color:#0b1449;font-weight:700;margin-top:7px}
/* 증빙 사진 + 게이지 */
.rvp-proof{margin:26px 0 6px}
.rvp-proof-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.rvp-proof-title{font-size:16px;font-weight:800;color:var(--navy)}
.rvp .hr-gauge.rvp-gauge{margin-left:auto;margin-right:0}
.rvp-gauge-cap{font-size:11px;font-weight:800;color:#7b6a2c;margin-top:2px}
.rvp .hr-pmtrack img{height:150px}
/* Best of Best */
.rvp-bob{position:relative;margin:26px 0 10px;background:linear-gradient(180deg,#FFFBEA,#FFF6D9);border:1px solid #F0E2B6;border-radius:16px;padding:26px 92px 26px 30px;box-shadow:0 14px 34px rgba(148,113,15,.14)}
.rvp-bob-crown{position:absolute;top:20px;right:26px;height:52px;width:auto;filter:drop-shadow(0 4px 8px rgba(180,120,0,.3))}
.rvp-bob-title{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:26px;font-weight:700;color:#6b4d0e;margin:0 0 12px}
.rvp-bob-title b{color:#D98A00}
.rvp-bob-item{display:none}
.rvp-bob-item.on{display:block;animation:rvpIn .35s ease}
.rvp-bob-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:14px;font-weight:800;color:#4a3a12;margin-bottom:6px}
.rvp-bob-svc{display:inline-block;font-size:12px;font-weight:800;color:#1E5BBA;margin-bottom:10px}
.rvp-bob-body{font-size:14px;line-height:1.85;color:#3f351a;white-space:pre-line;max-height:320px;overflow:auto;padding-right:6px}
.rvp-bob-nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid #E8D9A8;background:#fff;color:#a8862e;font-size:15px;cursor:pointer;box-shadow:0 4px 12px rgba(148,113,15,.18);z-index:2}
.rvp-bob-nav:hover{color:#6b4d0e}
.rvp-bob-nav.prev{left:-15px}.rvp-bob-nav.next{right:-15px}
.rvp-stars img{height:16px;width:auto;margin-right:2px;vertical-align:-3px}
.rvp-date{color:#8f9ab0;font-weight:600;font-size:12.5px}
/* 정렬 바 */
.rvp-sortbar{display:flex;align-items:center;gap:10px;margin:30px 0 14px}
.rvp-all{font-size:18px;font-weight:800;color:var(--navy)}
.rvp-all b{color:var(--blue)}
.rvp-sorts{margin-left:auto;display:flex;gap:6px;background:#eef2f9;border:1px solid #cdd9ec;border-radius:999px;padding:4px}
.rvp-sort{font-size:13px;font-weight:800;color:#5b6472;padding:6px 14px;border-radius:999px;border:0;background:none;cursor:pointer;white-space:nowrap;font-family:inherit}
.rvp-sort.on{background:#fff;color:var(--navy);box-shadow:0 2px 6px rgba(10,42,94,.12)}
.rvp-sort.hot{color:#E0531C}
.rvp-sort.hot.on{background:linear-gradient(135deg,#FFB23D,#FF6A2B 55%,#F23E2E);color:#fff;box-shadow:0 3px 12px rgba(242,62,46,.38)}
/* 타임라인 */
.rvp-timeline{position:relative;padding-left:30px;margin-bottom:24px}
.rvp-timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--blue),transparent)}
.rvp-rev{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin-bottom:16px;box-shadow:0 4px 14px rgba(10,42,94,.05);transition:transform .15s,box-shadow .18s;animation:rvpIn .45s ease backwards}
.rvp-rev:hover{transform:translateX(3px);box-shadow:0 14px 30px rgba(10,42,94,.1)}
.rvp-rev::before{content:"";position:absolute;left:-25px;top:24px;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--blue);box-shadow:0 0 0 3px #eef3fb}
.rvp-rev.bob::before{border-color:#FFAA33;box-shadow:0 0 0 3px #fff3d6}
.rvp-rev.is-hidden{display:none}
@keyframes rvpIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.rvp-rev-top{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.rvp-svc{font-size:11.5px;font-weight:800;color:var(--blue);background:#eef3fb;padding:3px 10px;border-radius:999px}
.rvp-badge-bob{font-size:11px;font-weight:900;font-style:italic;color:#fff;background:linear-gradient(135deg,#E0106E,#FF5A62);padding:2px 9px;border-radius:999px}
.rvp-rev-top .rvp-date{margin-left:auto}
.rvp-rev-body{font-size:14px;line-height:1.75;color:#333;font-weight:400;white-space:pre-line}
.rvp-orig-btn{margin-top:8px;padding:0;border:0;background:none;font-family:inherit;font-size:12.5px;font-weight:800;color:var(--blue);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.rvp-orig{margin-top:10px;background:linear-gradient(135deg,#f6f9fd,#eef3fb);border:1px solid #e0e9f6;border-left:3px solid var(--blue);border-radius:10px;padding:12px 15px;font-size:13px;line-height:1.7;color:#3a4660;white-space:pre-line;font-family:'Noto Sans KR',sans-serif}
.rvp-rev-foot{display:flex;align-items:center;gap:14px;margin-top:12px;padding-top:11px;border-top:1px dashed #eef1f6}
.rvp-name{font-size:12.5px;font-weight:800;color:#46506a}
/* 읽어오는 수치일 뿐 누르는 버튼이 아니다. 배경+테두리+알약 모양이 같은 화면의
   정렬 버튼(.rvp-sort)·더보기 버튼(.rvp-more)과 똑같아 보여서 걷어냈다.
   하트만 색을 남겨 '도움돼요 수'라는 것은 그대로 읽히게 한다. */
.rvp-like{margin-left:auto;font-size:12px;font-weight:700;color:var(--sub);white-space:nowrap}
.rvp-like i{font-style:normal;font-weight:800;color:#e05a7a}
/* 더 보기 */
.rvp-moreband{text-align:center;margin-bottom:20px}
.rvp-more{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:13px 30px;font-size:14px;font-weight:800;color:var(--navy);cursor:pointer;font-family:inherit;box-shadow:0 6px 16px rgba(10,42,94,.08)}
.rvp-more:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(10,42,94,.16)}
.rvp-more span{color:var(--sub)}
@media(max-width:820px){.rvp-hero{grid-template-columns:1fr;padding:24px 20px}.rvp-bob{padding:22px 20px 60px}.rvp-bob-crown{height:38px;top:14px;right:14px}.rvp-bob-nav.prev{left:4px}.rvp-bob-nav.next{right:4px}.rvp-bob-nav{top:auto;bottom:10px;transform:none}}
@media(max-width:640px){.rvp-sortbar{flex-wrap:wrap}.rvp-sorts{margin-left:0}.rvp-timeline{padding-left:22px}.rvp-rev{padding:16px}.rvp-rev::before{left:-19px}.rvp-timeline::before{left:5px}.rvp-proof-head{flex-wrap:wrap}.rvp .hr-pmtrack img{height:110px}}