/* BASIC css start */
/* ============================================================================
* 고객 후기 — 파워리뷰 목록 CSS (어헤이)
* ----------------------------------------------------------------------------
* 넣는 곳 : 게시판 디자인 > 파워리뷰 > 포토리뷰 / 상품리뷰 의 CSS 탭
* (두 페이지 모두 이 내용을 넣으면 된다. 선택자가 서로 겹치지 않음)
*
* ⚠️ 라이브(구 디자인셋) CSS 는 넣지 말 것.
* 구 스킨은 #pr-header / .paging / .item-search 를 겨냥하는데
* 반응형(개별디자인 4.0, rw_shop) 스킨엔 그런 요소가 아예 없어서 아무것도 안 먹는다.
* 실제 마크업(프리뷰에서 직접 확인):
* 포토 : #reviewBoard > .review-wrap > .review-list > ul#listPowerReview.masonry
* > li.grid-item.masonry-brick > dl > dt(사진+em.best) / dd(내용·작성자·.sumup)
* 상품 : #reviewBoard > #PowerReviewGroup.product-review-list > ul#listPowerReviewGroup
* > li.grid-item > .img-area / .title-area / .score-area / .review-area
* 검색 : #reviewBoard > .cond > .review-search > form#prs_form ... .r-search
*
* · 포토리뷰는 메이슨리(JS가 position:absolute 로 배치)라 grid-item 의 width 는 건드리지 않는다.
* · 색은 어헤이 로즈(#b78d7e) 톤으로 통일.
* ========================================================================== */
#reviewBoard {
--brand:#b78d7e; --ink:#2b2320; --sub:#8d7c74; --muted:#a99a92;
--line:#e6d8d3; --soft:#faf6f4;
max-width:1120px; margin:0 auto;
font-family:"Pretendard","Noto Sans KR",system-ui,-apple-system,"Malgun Gothic",sans-serif;
color:var(--ink); line-height:1.6;
}
#reviewBoard * { box-sizing:border-box; }
/* 기본 파란 링크 색 제거 */
#reviewBoard a { color:inherit !important; text-decoration:none; }
/* ── 상단 검색/필터 ─────────────────────────────────────────────
.pr-cate / .cate-rank / 빈 li>div 는 내용이 없는데도 자리를 차지해
커다란 빈 박스처럼 보였다 → 비어 있으면 숨긴다. */
/* 플랫폼 기본이 .cond 에 회색 바, .review-search 에 흰 바를 깔아둔다 → 걷어냄 */
#reviewBoard .cond { margin:0 0 26px; padding:0; background:transparent !important; }
#reviewBoard .cond .review-search { background:transparent !important; }
/* ⚠️ 이 박스들은 안에 공백이 있어 :empty 가 안 먹는다 → '자식 요소가 없으면' 으로 판정 */
#reviewBoard .pr-cate:not(:has(*)),
#reviewBoard .cate-rank:not(:has(*)),
#reviewBoard .review-search li > div:not(:has(*)) { display:none !important; }
#reviewBoard .review-search ul { display:flex; justify-content:flex-end; gap:8px; list-style:none; margin:0; padding:0; }
#reviewBoard .review-search li { list-style:none; }
/* 플랫폼 규칙(높이 32px·회색 테두리)이 더 구체적이라 선택자를 길게 + !important */
#reviewBoard .cond .review-search .r-search {
display:flex !important; align-items:center; gap:8px;
width:auto !important; height:46px !important; padding:0 6px 0 18px !important;
border:1px solid var(--line) !important; border-radius:999px !important; background:#fff !important;
}
#reviewBoard .cond .review-search .r-search .txt-input {
height:42px !important; width:210px; border:0 !important; outline:none;
background:transparent !important; font-size:14px; color:var(--ink);
}
#reviewBoard .cond .review-search .r-search .txt-input::placeholder { color:var(--muted); }
/* 검색 버튼 : .fa 가 FontAwesome 을 강제하므로 안쪽 글자는 본문 폰트로 되돌린다 */
#reviewBoard .cond .review-search .r-search .fa-search {
display:inline-flex; align-items:center; gap:6px;
height:34px; padding:0 16px; border-radius:999px;
background:var(--brand) !important; color:#fff !important; font-size:13px; white-space:nowrap;
}
#reviewBoard .cond .review-search .r-search .fa-search span {
font-family:"Pretendard","Noto Sans KR",system-ui,sans-serif; font-weight:700;
}
#reviewBoard .cond .review-search .r-search .fa-search:hover { opacity:.9; }
/* ══════════════ 포토리뷰 (메이슨리 카드) ══════════════ */
#reviewBoard .review-list ul.masonry { list-style:none; margin:0; padding:0; }
/* masonry 가 li 를 absolute 로 두므로 width 는 손대지 말고 안쪽 여백만 준다(=거터) */
#reviewBoard .review-list .grid-item { padding:0 11px 22px; }
#reviewBoard .review-list .grid-item dl {
margin:0; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
transition:transform .22s ease, box-shadow .22s ease;
}
#reviewBoard .review-list .grid-item dl:hover {
transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(126,94,85,.42);
}
/* 사진 */
#reviewBoard .review-list .grid-item dt { position:relative; margin:0; }
#reviewBoard .review-list .grid-item dt img { display:block; width:100%; height:auto; background:var(--soft); }
/* 사진 경로가 비어 오는 경우(프리뷰에서 발생) 빈 사진칸을 접어 텍스트 카드로 보이게 한다.
실제로 사진이 있으면 이 규칙은 적용되지 않는다. */
#reviewBoard .review-list .grid-item dt:has(img[src=""]) { display:none; }
/* BEST 배지 : 원본이 로 비어 있어 글자를 CSS 로 넣는다 */
#reviewBoard .review-list .grid-item em.best {
position:absolute; top:10px; left:10px; z-index:2;
padding:4px 10px; border-radius:999px;
background:var(--brand) !important; color:#fff !important;
font-style:normal; font-size:11px; font-weight:800; letter-spacing:.04em; line-height:1; white-space:nowrap;
}
#reviewBoard .review-list .grid-item em.best::before { content:"BEST"; }
/* 본문 */
#reviewBoard .review-list .grid-item dd { margin:0; padding:16px 16px 14px; }
#reviewBoard .review-list .grid-item dd > p { margin:0; }
#reviewBoard .review-list .grid-item dd > p > a {
display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
font-size:14px; line-height:1.65; color:var(--ink);
}
#reviewBoard .review-list .grid-item .date { margin-top:10px; font-size:12.5px; color:var(--muted); }
/* 하단 상품 요약 */
/* ⚠️ .sumup 안에는 '평점'·'리뷰' 라는 맨텍스트가 그대로 들어있다.
flex 로 두면 그 텍스트들이 각각 익명 아이템이 되어 세로로 쌓인다 → block + float 로 흘린다. */
#reviewBoard .review-list .grid-item .sumup {
position:relative; display:block; overflow:hidden;
margin-top:13px; padding-top:12px; border-top:1px dashed var(--line);
font-size:12.5px; line-height:1.5; color:var(--sub);
}
#reviewBoard .review-list .grid-item .sumup > a { position:absolute; inset:0; z-index:1; }
#reviewBoard .review-list .grid-item .sumup img {
float:left; width:38px; height:38px; margin-right:10px;
border-radius:9px; object-fit:cover; background:var(--soft);
}
#reviewBoard .review-list .grid-item .sumup p {
margin:0 0 2px; font-weight:600; color:var(--ink);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#reviewBoard .review-list .grid-item .sumup em { font-style:normal; font-weight:800; color:var(--brand) !important; }
/* ══════════════ 상품리뷰 (상품별 카드) ══════════════ */
#reviewBoard .product-review-list > ul {
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
#reviewBoard .product-review-list .grid-item {
background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
transition:box-shadow .22s ease;
}
#reviewBoard .product-review-list .grid-item:hover { box-shadow:0 20px 44px -26px rgba(126,94,85,.4); }
#reviewBoard .img-area img { display:block; width:100%; height:auto; background:var(--soft); }
/* 상품명·가격 */
#reviewBoard .title-area { position:relative; padding:16px 18px 0; }
#reviewBoard .title-area p { margin:0; }
#reviewBoard .title-area p:nth-of-type(1) { font-size:14.5px; font-weight:700; color:var(--ink); }
#reviewBoard .title-area p:nth-of-type(2) { margin-top:4px; font-size:15px; font-weight:800; color:var(--ink); }
/* 평점 / 리뷰수 */
#reviewBoard .score-area {
position:relative; display:flex; align-items:center; gap:14px;
padding:12px 18px; margin-top:12px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
background:var(--soft);
}
#reviewBoard .pr-grade, #reviewBoard .review-number { font-size:13px; font-weight:600; color:var(--sub); }
#reviewBoard .pr-grade em, #reviewBoard .review-number em { font-style:normal; font-weight:800; color:var(--brand) !important; }
/* 리뷰 발췌 */
#reviewBoard .review-area { position:relative; padding:4px 18px 14px; }
#reviewBoard .review-area ul { list-style:none; margin:0; padding:0; }
#reviewBoard .review-area > ul > li { padding:14px 0; border-bottom:1px solid var(--line); }
#reviewBoard .review-area > ul > li:last-child { border-bottom:0; }
#reviewBoard .pr-text {
margin:0; font-size:13.5px; line-height:1.65; color:var(--ink);
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
#reviewBoard .pr-info { display:flex; align-items:center; gap:6px; margin:8px 0 0; font-size:12px; color:var(--muted); }
#reviewBoard .pr-photo img { width:14px; height:auto; opacity:.6; }
/* 카드 각 영역을 통째로 클릭 가능하게 하는 투명 링크 */
#reviewBoard .pr-link { position:absolute; inset:0; z-index:1; }
/* 더보기 버튼 */
#reviewBoard .btn-more {
display:block; width:fit-content; margin:26px auto 0; padding:13px 28px;
border:1px solid var(--line); border-radius:999px; background:#fff;
font-size:14px; font-weight:600; color:var(--sub);
}
#reviewBoard .btn-more:hover { border-color:var(--brand); color:var(--brand); }
/* ── 반응형 ── */
@media (max-width:767px) {
#reviewBoard .review-search ul { justify-content:stretch; }
#reviewBoard .cond .review-search .r-search { width:100% !important; }
#reviewBoard .cond .review-search .r-search .txt-input { width:100% !important; }
#reviewBoard .product-review-list > ul { grid-template-columns:1fr; gap:18px; }
#reviewBoard .review-list .grid-item { padding:0 7px 16px; }
}
/* ══════════════════════════════════════════════════════════════════════════
직접 호출로 채운 리뷰 목록 (.nv-prlist)
------------------------------------------------------------------------
반응형 디자인셋에서 파워리뷰 목록 위젯이 불완전해, HTML 안의 스크립트가
power_review.action.html 을 직접 호출해 채운다. 그때 오는 마크업 전용 스타일.
li#power_review_block
├ .sumup > .score > .star em(★) + span(아주만족)
├ .pr-opt (옵션, 보통 빔)
├ .item > p(내용) [+ .roll .swiper-wrapper > li > a > img (사진)]
├ p > a.modify (리뷰수정)
├ .recmd > .pr-list-writer(작성자) + a.btn-report(신고)
└ .survey (추천)
══════════════════════════════════════════════════════════════════════════ */
.nv-prlist { --brand:#b78d7e; --ink:#2b2320; --sub:#8d7c74; --muted:#a99a92; --line:#e6d8d3; --soft:#faf6f4; }
.nv-prlist ul.review-wrap { list-style:none; margin:0; padding:0; }
.nv-prlist li[id^="power_review_block"] {
list-style:none; margin:0 0 16px; padding:24px 26px;
background:#fff; border:1px solid var(--line); border-radius:16px;
}
/* 별점 + 만족도 */
.nv-prlist .sumup { margin:0 0 12px; }
.nv-prlist .sumup .score { display:flex; align-items:center; gap:10px; }
.nv-prlist .sumup .score .star em { font-style:normal; font-size:15px; letter-spacing:1px; color:var(--brand) !important; }
.nv-prlist .sumup .score > span:not(.star) {
padding:3px 10px; border-radius:999px; background:var(--soft);
font-size:11.5px; font-weight:700; color:var(--brand);
}
/* 옵션(비어 있으면 자리 차지 안 하게) */
.nv-prlist .pr-opt ul:empty { display:none; }
.nv-prlist .pr-opt { margin:0; }
/* 본문 */
.nv-prlist .item p { margin:0; font-size:14.5px; line-height:1.75; color:var(--ink); word-break:keep-all; }
/* 사진 : Swiper 없이도 보이도록 가로 스크롤 줄로 */
.nv-prlist .item .roll { margin:14px 0 0; overflow-x:auto; }
.nv-prlist .item .swiper-wrapper { display:flex; gap:8px; list-style:none; margin:0; padding:0; }
.nv-prlist .item .swiper-slide { flex:0 0 auto; list-style:none; }
.nv-prlist .item .swiper-slide img {
display:block; width:110px; height:110px; object-fit:cover;
border-radius:12px; background:var(--soft);
}
/* 작성자 */
.nv-prlist .recmd { display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); }
.nv-prlist .pr-list-writer { font-size:12.5px; font-weight:600; color:var(--sub); }
/* 운영 버튼류는 목록에선 감춘다(상세/팝업에서 처리) */
.nv-prlist a.modify, .nv-prlist a.btn-report, .nv-prlist .survey { display:none !important; }
/* 더보기 */
.nv-prlist-more {
display:block; margin:26px auto 0; padding:14px 30px;
border:1px solid var(--line); border-radius:999px; background:#fff;
font-size:14px; font-weight:700; color:var(--sub); cursor:pointer;
}
.nv-prlist-more:hover { border-color:var(--brand); color:var(--brand); }
.nv-prlist-empty { padding:70px 0; text-align:center; font-size:14px; color:var(--muted); }
@media (max-width:680px) {
.nv-prlist li[id^="power_review_block"] { padding:20px 18px; }
.nv-prlist .item .swiper-slide img { width:92px; height:92px; }
}
/* ══════════════════════════════════════════════════════════════════════════
직접 렌더한 리뷰 카드 (.nv-prwrap) — 라이브 화면과 같은 구성
------------------------------------------------------------------------
RW 디자인셋에서 파워리뷰 목록 위젯이 불완전해, HTML 안 스크립트가
power_review.action.html 을 호출해 받은 데이터를 아래 마크업으로 다시 그린다.
전체리뷰(.is-list) : [상품썸네일] 별점·만족도 / 상품명 → 내용 → 사진 → 작성자·도움돼요
포토리뷰(.is-photo) : 사진 그리드 카드(BEST·사진수) + 내용 + 별점 + 상품 요약
══════════════════════════════════════════════════════════════════════════ */
.nv-prwrap{--brand:#b78d7e;--ink:#2b2320;--sub:#8d7c74;--muted:#a99a92;--line:#e6d8d3;--soft:#faf6f4;
font-family:"Pretendard","Noto Sans KR",system-ui,-apple-system,"Malgun Gothic",sans-serif;color:var(--ink)}
.nv-prwrap *{box-sizing:border-box}
.nv-prlist{list-style:none;margin:0;padding:0}
.nv-prwrap .nv-rv-stars{font-size:15px;letter-spacing:1px;color:var(--brand)}
.nv-prwrap .nv-rv-survey{padding:3px 10px;border-radius:999px;background:var(--soft);
font-size:11.5px;font-weight:700;color:var(--brand);white-space:nowrap}
.nv-prempty{padding:70px 0;text-align:center;font-size:14px;color:var(--muted);list-style:none}
/* ── 전체리뷰(가로형) ── */
.is-list .nv-rv{list-style:none;margin:0 0 16px;padding:24px 26px;background:#fff;
border:1px solid var(--line);border-radius:16px}
.is-list .nv-rv-head{display:flex;align-items:center;gap:16px}
.is-list .nv-rv-thumb{flex:0 0 auto;width:78px;height:78px;border-radius:12px;overflow:hidden;
background:var(--soft);border:1px solid var(--line)}
.is-list .nv-rv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.is-list .nv-rv-headtx{min-width:0;flex:1 1 auto}
.is-list .nv-rv-score{display:flex;align-items:center;gap:10px}
.is-list .nv-rv-pname{display:block;margin-top:6px;font-size:13.5px;color:var(--sub);
text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.is-list .nv-rv-body{margin-top:16px;font-size:14.5px;line-height:1.75;color:var(--ink);word-break:keep-all}
.is-list .nv-rv-photos{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.is-list .nv-rv-photos img{width:104px;height:104px;object-fit:cover;border-radius:12px;background:var(--soft)}
.is-list .nv-rv-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
margin-top:16px;padding-top:13px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--muted)}
.is-list .nv-rv-writer{font-weight:600;color:var(--sub)}
.is-list .nv-rv-good b{color:var(--brand);font-weight:800}
/* ── 포토리뷰(그리드) ── */
.is-photo .nv-prlist{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.is-photo .nv-pv{list-style:none;background:#fff;border:1px solid var(--line);border-radius:16px;
overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .22s ease,transform .22s ease}
.is-photo .nv-pv:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(126,94,85,.42)}
.is-photo .nv-pv-img{position:relative;aspect-ratio:1/1;background:var(--soft)}
.is-photo .nv-pv-img img{width:100%;height:100%;object-fit:cover;display:block}
.is-photo .nv-pv-best{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:999px;
background:var(--brand);color:#fff;font-style:normal;font-size:11px;font-weight:800;line-height:1;white-space:nowrap}
.is-photo .nv-pv-cnt{position:absolute;right:10px;bottom:10px;padding:3px 9px;border-radius:999px;
background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:700}
.is-photo .nv-pv-cnt::before{content:"📷 "}
.is-photo .nv-pv-tx{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;flex:1 1 auto}
.is-photo .nv-pv-body{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink);
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.is-photo .nv-pv-score{display:flex;align-items:center;gap:8px}
.is-photo .nv-pv-prd{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:12px;
border-top:1px dashed var(--line);text-decoration:none}
.is-photo .nv-pv-prd img{width:36px;height:36px;border-radius:8px;object-fit:cover;background:var(--soft);flex:0 0 auto}
.is-photo .nv-pv-prd-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.is-photo .nv-pv-prd-nm{font-size:12.5px;font-weight:600;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.is-photo .nv-pv-prd-sc{font-size:12px;color:var(--muted)}
.is-photo .nv-pv-prd-sc b{color:var(--brand);font-weight:800}
/* 더보기 */
.nv-prmore{display:block;margin:28px auto 0;padding:14px 30px;border:1px solid var(--line);
border-radius:999px;background:#fff;font-size:14px;font-weight:700;color:var(--sub);cursor:pointer}
.nv-prmore:hover{border-color:var(--brand);color:var(--brand)}
@media (max-width:900px){ .is-photo .nv-prlist{grid-template-columns:repeat(2,1fr);gap:16px} }
@media (max-width:680px){
.is-list .nv-rv{padding:20px 18px}
.is-list .nv-rv-thumb{width:62px;height:62px}
.is-list .nv-rv-photos img{width:88px;height:88px}
.is-photo .nv-prlist{grid-template-columns:1fr}
}
/* ── 카드 푸터(도움돼요·신고차단) · 무한스크롤 · 등장 애니메이션 ────────── */
.is-list .nv-rv-foot{flex-wrap:wrap;row-gap:8px}
.nv-prwrap .nv-rv-acts{display:flex;align-items:center;gap:16px;margin-left:auto}
.nv-prwrap .nv-rv-good,.nv-prwrap .nv-rv-report{
display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;
font-family:inherit;font-size:12.5px;color:var(--muted);cursor:pointer}
.nv-prwrap .nv-rv-good b{font-weight:800;color:var(--sub)}
.nv-prwrap .nv-rv-good:hover,.nv-prwrap .nv-rv-report:hover{color:var(--brand)}
.nv-prwrap .nv-rv-good:hover b{color:var(--brand)}
/* 👍 아이콘 (이미지 없이 CSS 로) */
.nv-prwrap .nv-rv-thumb-ic{display:inline-block;width:15px;height:15px;
background:currentColor;
-webkit-mask:no-repeat center/100% url("data:image/svg+xml;utf8,");
mask:no-repeat center/100% url("data:image/svg+xml;utf8,")}
.nv-prwrap .nv-rv-report::before{content:"";display:inline-block;width:14px;height:14px;background:currentColor;
-webkit-mask:no-repeat center/100% url("data:image/svg+xml;utf8,");
mask:no-repeat center/100% url("data:image/svg+xml;utf8,")}
/* 카드 = 클릭하면 리뷰 상세 팝업 */
.is-list .nv-rv,.is-photo .nv-pv{cursor:pointer}
/* 부드럽게 등장 */
.is-list .nv-rv,.is-photo .nv-pv{opacity:0;transform:translateY(10px);
transition:opacity .38s ease,transform .38s ease,box-shadow .22s ease}
.is-list .nv-rv.is-in,.is-photo .nv-pv.is-in{opacity:1;transform:none}
/* 무한스크롤 보초 + 로딩 스피너 */
.nv-prsentinel{display:flex;align-items:center;justify-content:center;height:70px}
.nv-prspin{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);
border-top-color:var(--brand);opacity:0;transition:opacity .2s}
.nv-prsentinel.is-loading .nv-prspin{opacity:1;animation:nvspin .7s linear infinite}
@keyframes nvspin{to{transform:rotate(360deg)}}
/* 목록 가로 스크롤 영역 스크롤바 숨김 */
.nv-rv-photos{scrollbar-width:none;-ms-overflow-style:none}
.nv-rv-photos::-webkit-scrollbar{display:none}
/* ══════════════════════════════════════════════════════════════════════════
리뷰 상세 모달 (.nv-rvm) — 직접 렌더
내용은 get_review_view 로 받아 **본문이 잘리지 않고 사진도 원본**을 쓴다.
══════════════════════════════════════════════════════════════════════════ */
.nv-rvm{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
padding:28px;background:rgba(38,28,24,.6);backdrop-filter:blur(3px);
opacity:0;transition:opacity .24s ease;
--brand:#b78d7e;--ink:#2b2320;--sub:#8d7c74;--muted:#a99a92;--line:#eadfd9;--soft:#faf6f4;
font-family:"Pretendard","Noto Sans KR",system-ui,-apple-system,"Malgun Gothic",sans-serif}
.nv-rvm.is-open{opacity:1}
.nv-rvm *{box-sizing:border-box}
.nv-rvm a{color:inherit;text-decoration:none} /* 본문 '더보기' 링크의 파란색 제거 */
.nv-rvm-box{position:relative;width:100%;max-width:880px;max-height:88vh;overflow:auto;
background:#fff;border-radius:26px;padding:30px 34px 26px;color:var(--ink);
box-shadow:0 50px 110px -35px rgba(38,28,24,.6);
transform:translateY(12px) scale(.985);transition:transform .26s cubic-bezier(.2,.7,.3,1);
scrollbar-width:none;-ms-overflow-style:none}
.nv-rvm.is-open .nv-rvm-box{transform:none}
.nv-rvm-box::-webkit-scrollbar{display:none} /* 스크롤바 숨김 */
/* 닫기 */
.nv-rvm-x{position:absolute;top:16px;right:16px;z-index:3;width:38px;height:38px;border:0;border-radius:999px;
background:var(--soft);cursor:pointer;transition:background .18s}
.nv-rvm-x:hover{background:#f0e4de}
.nv-rvm-x::before,.nv-rvm-x::after{content:"";position:absolute;left:11px;top:18px;width:16px;height:1.7px;background:var(--sub);border-radius:2px}
.nv-rvm-x::before{transform:rotate(45deg)} .nv-rvm-x::after{transform:rotate(-45deg)}
/* 상품 바 */
.nv-rvm-prd{display:flex;align-items:center;gap:14px;padding:12px 14px;margin:0 46px 18px 0;
border:1px solid var(--line);border-radius:16px;background:var(--soft);transition:border-color .18s,background .18s}
.nv-rvm-prd:hover{border-color:var(--brand);background:#fff}
.nv-rvm-prd img,.nv-rvm-prd-noimg{flex:0 0 auto;width:52px;height:52px;border-radius:12px;object-fit:cover;
background:#fff;border:1px solid var(--line)}
.nv-rvm-prd-tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.nv-rvm-prd-nm{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv-rvm-prd-meta{font-size:12.5px;color:var(--sub)}
.nv-rvm-prd-meta b{color:var(--brand);font-weight:800}
.nv-rvm-prd-go{flex:0 0 auto;margin-left:auto;width:8px;height:8px;border-right:1.8px solid var(--muted);
border-top:1.8px solid var(--muted);transform:rotate(45deg)}
/* 별점 · 만족도 · 작성자 */
.nv-rvm-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.nv-rvm .nv-rv-stars{font-size:17px;letter-spacing:1.5px;color:var(--brand)}
.nv-rvm .nv-rv-survey{padding:3px 11px;border-radius:999px;background:var(--soft);
font-size:11.5px;font-weight:700;color:var(--brand)}
.nv-rvm-writer{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--sub)}
/* ── 사진 갤러리 : 큰 사진(좌) + 썸네일(우, 세로) ────────────────────
큰 사진은 정사각 프레임에 cover 로 채워 좌우 빈 여백을 없앤다. */
.nv-rvm-gal{margin:0 0 22px}
.nv-rvm-gal.has-thumbs{display:grid;grid-template-columns:1fr 78px;gap:10px;align-items:start}
.nv-rvm-main{border-radius:16px;overflow:hidden;background:var(--soft);border:1px solid var(--line);
aspect-ratio:1/1}
.nv-rvm-main img{display:block;width:100%;height:100%;object-fit:cover}
.nv-rvm-thumbs{display:flex;flex-direction:column;gap:8px;max-height:100%;overflow-y:auto;
scrollbar-width:none;-ms-overflow-style:none}
.nv-rvm-thumbs::-webkit-scrollbar{display:none}
.nv-rvm-th{flex:0 0 auto;width:78px;height:78px;padding:0;border:1.5px solid transparent;border-radius:12px;
overflow:hidden;background:var(--soft);cursor:pointer;opacity:.6;transition:opacity .18s,border-color .18s}
.nv-rvm-th img{width:100%;height:100%;object-fit:cover;display:block}
.nv-rvm-th:hover{opacity:1}
.nv-rvm-th.is-on{opacity:1;border-color:var(--brand)}
/* 본문 */
.nv-rvm-body{font-size:15px;line-height:1.9;color:var(--ink);word-break:keep-all}
.nv-rvm-body img{max-width:100%;height:auto;border-radius:12px;margin-top:12px}
/* ── 액션 버튼 (알약형) ──────────────────────────────────────────── */
.nv-rvm-foot{display:flex;align-items:center;gap:10px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.nv-rvm .nv-rv-good,.nv-rvm .nv-rv-report{
display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;
border:1px solid var(--line);border-radius:999px;background:#fff;
font-family:inherit;font-size:13px;font-weight:600;color:var(--sub);cursor:pointer;
transition:border-color .18s,color .18s,background .18s}
.nv-rvm .nv-rv-good:hover{border-color:var(--brand);color:var(--brand);background:var(--soft)}
.nv-rvm .nv-rv-good b{font-weight:800;color:var(--brand)}
.nv-rvm .nv-rv-report{margin-left:auto;border-color:transparent;color:var(--muted);font-weight:500;padding:0 10px}
.nv-rvm .nv-rv-report:hover{color:var(--sub);background:var(--soft)}
/* 이전/다음 리뷰 */
.nv-rvm-nav{position:fixed;top:50%;width:46px;height:46px;margin-top:-23px;border:0;border-radius:999px;
background:rgba(255,255,255,.94);box-shadow:0 10px 28px -10px rgba(38,28,24,.45);cursor:pointer;transition:background .18s}
.nv-rvm-nav:hover{background:#fff}
.nv-rvm-nav::before{content:"";position:absolute;top:17px;width:11px;height:11px;
border-right:2px solid var(--sub);border-top:2px solid var(--sub)}
.nv-rvm-nav.is-prev{left:max(16px,calc(50% - 520px))}
.nv-rvm-nav.is-next{right:max(16px,calc(50% - 520px))}
.nv-rvm-nav.is-prev::before{left:19px;transform:rotate(-135deg)}
.nv-rvm-nav.is-next::before{right:19px;transform:rotate(45deg)}
/* ── 상품별 리뷰 모달(목록형) : 리뷰 간 구분을 또렷하게 ─────────────── */
.nv-rvm--list .nv-rvm-box{max-width:820px;padding:28px 30px 20px}
.nv-rvm--list .nv-prlist{list-style:none;margin:0;padding:0}
.nv-rvm--list .nv-rv{margin:0;padding:22px 0;background:none;border:0;border-radius:0;
border-top:1px solid var(--line);cursor:pointer;transition:background .16s}
.nv-rvm--list .nv-rv:first-child{border-top:0}
.nv-rvm--list .nv-rv:hover{background:var(--soft)}
.nv-rvm--list .nv-rv-thumb,.nv-rvm--list .nv-rv-pname{display:none} /* 같은 상품이라 반복 불필요 */
.nv-rvm--list .nv-rv-head{margin-bottom:10px}
.nv-rvm--list .nv-rv-body{margin-top:0;font-size:14px;line-height:1.75}
.nv-rvm--list .nv-rv-foot{margin-top:12px;padding-top:10px;border-top:0}
.nv-rvm--list .nv-prsentinel{height:56px}
@media (max-width:680px){
.nv-rvm{padding:0}
.nv-rvm-box{max-width:none;max-height:100vh;border-radius:0;padding:24px 18px 22px}
.nv-rvm-prd{margin-right:48px}
.nv-rvm-nav{display:none}
.nv-rvm-gal.has-thumbs{grid-template-columns:1fr;gap:8px}
.nv-rvm-thumbs{flex-direction:row;overflow-x:auto}
.nv-rvm-th{width:66px;height:66px}
}
/* ── 갤러리 크기 축소 : 대표 이미지가 너무 커서 모달까지 커지던 문제 ──────
큰 사진 폭을 420px 로 제한하고 갤러리를 가운데 정렬한다. */
.nv-rvm-box{max-width:760px}
.nv-rvm-gal.has-thumbs{grid-template-columns:minmax(0,420px) 72px;justify-content:center}
.nv-rvm-gal:not(.has-thumbs) .nv-rvm-main{max-width:420px;margin:0 auto}
.nv-rvm-th{width:72px;height:72px}
.nv-rvm-nav.is-prev{left:max(16px,calc(50% - 460px))}
.nv-rvm-nav.is-next{right:max(16px,calc(50% - 460px))}
@media (max-width:680px){
.nv-rvm-gal.has-thumbs{grid-template-columns:1fr}
.nv-rvm-gal:not(.has-thumbs) .nv-rvm-main{max-width:none}
}
/* ══════════════════════════════════════════════════════════════════════════
상품리뷰 — 네이티브 상품 카드 고도화
(스크립트가 별점 ★ 표시와 '리뷰 N개 모두 보기' 버튼을 넣어준다)
══════════════════════════════════════════════════════════════════════════ */
#reviewBoard .product-review-list > ul{gap:26px}
#reviewBoard .product-review-list .grid-item{
position:relative;display:flex;flex-direction:column;overflow:hidden;
background:linear-gradient(170deg,#ffffff 0%,#fdfaf8 100%);
border:1px solid #ecdfd8;border-radius:22px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 20px 44px -30px rgba(126,94,85,.32);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
#reviewBoard .product-review-list .grid-item:hover{
transform:translateY(-4px);border-color:#dcc7bd;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 32px 60px -32px rgba(126,94,85,.44)}
/* 상품 이미지 */
#reviewBoard .img-area{overflow:hidden;background:var(--soft)}
#reviewBoard .img-area img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
transition:transform .5s ease}
#reviewBoard .product-review-list .grid-item:hover .img-area img{transform:scale(1.04)}
/* 상품명 · 가격 */
#reviewBoard .title-area{position:relative;padding:20px 20px 0}
#reviewBoard .title-area p:nth-of-type(1){font-size:15px;font-weight:700;letter-spacing:-.01em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#reviewBoard .title-area p:nth-of-type(2){margin-top:6px;font-size:17px;font-weight:800;letter-spacing:-.02em}
/* 평점 줄 : 별 + 숫자 + 리뷰수 */
#reviewBoard .score-area{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin:16px 20px 0;padding:11px 14px;border:0;border-radius:12px;background:#fff;
box-shadow:0 6px 16px -12px rgba(126,94,85,.4)}
#reviewBoard .nv-brd-stars{font-size:14px;letter-spacing:1px;color:var(--brand)}
#reviewBoard .pr-grade{font-size:13px;font-weight:700;color:var(--ink)}
#reviewBoard .pr-grade em{color:var(--brand) !important}
#reviewBoard .review-number{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:600}
#reviewBoard .review-number em{color:var(--sub) !important;font-weight:800}
/* 리뷰 발췌 : 인용 느낌 */
#reviewBoard .review-area{position:relative;padding:6px 20px 4px}
#reviewBoard .review-area > ul > li{padding:15px 0;border-bottom:1px dashed #eadfd9}
#reviewBoard .review-area > ul > li:last-child{border-bottom:0}
#reviewBoard .pr-text{position:relative;margin:0;padding-left:15px;font-size:13.5px;line-height:1.7;color:#4a3f3a;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#reviewBoard .pr-text::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;
border-radius:2px;background:#e6d8d3}
#reviewBoard .pr-info{margin-top:8px;padding-left:15px}
#reviewBoard .pr-name{font-size:12px;color:var(--muted);font-weight:600}
/* 전체보기 버튼 */
#reviewBoard .nv-brd-cta{display:block;width:calc(100% - 40px);margin:14px 20px 20px;height:46px;
border:1px solid var(--line);border-radius:999px;background:#fff;
font-family:inherit;font-size:13.5px;font-weight:700;color:var(--sub);cursor:pointer;
transition:background .18s,border-color .18s,color .18s}
#reviewBoard .nv-brd-cta:hover{background:var(--brand);border-color:var(--brand);color:#fff}
@media (max-width:767px){
#reviewBoard .product-review-list > ul{gap:18px}
#reviewBoard .title-area{padding:16px 16px 0}
#reviewBoard .score-area{margin:14px 16px 0}
#reviewBoard .review-area{padding:6px 16px 4px}
#reviewBoard .nv-brd-cta{width:calc(100% - 32px);margin:12px 16px 16px}
}
/* ═══ 최종 보정 (2026-08-22) ═══════════════════════════════════════════════
① 리뷰 모달 가로 축소 ② 탭↔목록 간격 ③ 네이티브 검색줄 제거
④ 상품리뷰 카드 = 세로 직사각형 → 가로형(이미지 좌 / 정보 우) 전환
※ 네이티브 CSS가 #id 선택자 + !important 로 grid/float 를 강제하므로
여기서는 동일하게 #id 를 물고 !important 로 덮어쓴다.
══════════════════════════════════════════════════════════════════════ */
/* ① 모달 : 갤러리(대표 420 + 썸네일 72)에 맞춰 좌우 빈 공간 제거 */
.nv-rvm-box{max-width:640px}
.nv-rvm-nav.is-prev{left:max(16px,calc(50% - 400px))}
.nv-rvm-nav.is-next{right:max(16px,calc(50% - 400px))}
.nv-rvm--list .nv-rvm-box{max-width:760px} /* 상품별 리뷰 목록 모달만 넓게 */
/* ② 탭 바로 아래 목록이 붙어 보이던 문제 */
.nv-prwrap{margin-top:30px}
/* ③ 네이티브 검색/필터 줄 제거 (우리 목록엔 불필요) */
#reviewBoard .cond{display:none !important}
/* ④ 상품리뷰 : 가로형 카드 ------------------------------------------------ */
/* 2열 → 1열 (카드 하나가 콘텐츠 폭을 꽉 채운다) */
#reviewBoard #PowerReviewGroup #listPowerReviewGroup{
display:grid !important;grid-template-columns:1fr !important;gap:20px !important;
margin:30px 0 0 !important;padding:0 !important;list-style:none !important}
/* 카드 본체 : [이미지 340px | 정보 1fr] · 행 4개(제목/평점/발췌/CTA) */
#reviewBoard #listPowerReviewGroup > li.grid-item{
display:grid !important;float:none !important;width:auto !important;margin:0 !important;padding:0 !important;
grid-template-columns:340px minmax(0,1fr) !important;
grid-template-rows:auto auto 1fr auto !important;grid-auto-rows:auto !important;
align-items:start;overflow:hidden;border-radius:22px !important;
background:linear-gradient(170deg,#fff 0%,#fdfaf8 100%);border:1px solid #ecdfd8;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 20px 44px -30px rgba(126,94,85,.32);
transition:transform .25s ease,box-shadow .25s ease}
#reviewBoard #listPowerReviewGroup > li.grid-item:hover{transform:translateY(-3px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 60px -32px rgba(126,94,85,.42)}
/* 좌측 이미지 : 카드 높이만큼 꽉 채움(grid-row 1/-1 은 명시적 행이 있어야 동작) */
#reviewBoard #listPowerReviewGroup > li.grid-item .img-area{
grid-column:1 !important;grid-row:1 / -1 !important;align-self:stretch !important;
position:relative !important;min-height:320px;width:auto !important;
margin:0 !important;padding:0 !important;border-radius:0 !important;overflow:hidden;background:#faf6f4}
#reviewBoard #listPowerReviewGroup > li.grid-item .img-area a{display:block;width:100%;height:100%}
#reviewBoard #listPowerReviewGroup > li.grid-item .img-area img{
display:block !important;width:100% !important;height:100% !important;
object-fit:cover;border-radius:0 !important;transition:transform .5s ease}
#reviewBoard #listPowerReviewGroup > li.grid-item:hover .img-area img{transform:scale(1.04)}
/* 우측 정보 컬럼 */
#reviewBoard #listPowerReviewGroup > li.grid-item .title-area,
#reviewBoard #listPowerReviewGroup > li.grid-item .score-area,
#reviewBoard #listPowerReviewGroup > li.grid-item .review-area,
#reviewBoard #listPowerReviewGroup > li.grid-item .nv-brd-cta{
grid-column:2 !important;width:auto !important;float:none !important;text-align:left !important}
#reviewBoard #listPowerReviewGroup > li.grid-item .title-area{grid-row:1 !important;padding:26px 28px 0 !important;margin:0 !important}
#reviewBoard #listPowerReviewGroup > li.grid-item .title-area p:nth-of-type(1){font-size:16px !important}
#reviewBoard #listPowerReviewGroup > li.grid-item .title-area p:nth-of-type(2){font-size:19px !important}
#reviewBoard #listPowerReviewGroup > li.grid-item .score-area{grid-row:2 !important;
margin:15px 28px 0 !important;padding:11px 15px !important;background:#fff !important;
border:1px solid #f2e7e2 !important;border-radius:12px !important;
box-shadow:0 6px 16px -12px rgba(126,94,85,.4)}
#reviewBoard #listPowerReviewGroup > li.grid-item .review-area{grid-row:3 !important;align-self:start;padding:6px 28px 0 !important;margin:0 !important}
#reviewBoard #listPowerReviewGroup > li.grid-item .review-area > ul > li{padding:13px 0 !important}
/* 발췌는 2건까지만(카드 높이 균일) */
#reviewBoard #listPowerReviewGroup > li.grid-item .review-area > ul > li:nth-child(n+3){display:none !important}
#reviewBoard #listPowerReviewGroup > li.grid-item .pr-text{font-size:14px !important;line-height:1.75 !important;-webkit-line-clamp:2}
#reviewBoard #listPowerReviewGroup > li.grid-item .pr-name{font-size:12.5px !important}
#reviewBoard #listPowerReviewGroup > li.grid-item .nv-brd-cta{grid-row:4 !important;align-self:end;
margin:16px 28px 26px !important;width:calc(100% - 56px) !important}
/* 좁은 화면 : 다시 세로형으로 */
@media (max-width:860px){
#reviewBoard #listPowerReviewGroup > li.grid-item{
grid-template-columns:1fr !important;grid-template-rows:auto auto auto 1fr auto !important}
#reviewBoard #listPowerReviewGroup > li.grid-item .img-area{grid-column:1 !important;grid-row:1 !important;min-height:0;aspect-ratio:16/10}
#reviewBoard #listPowerReviewGroup > li.grid-item .title-area{grid-column:1 !important;grid-row:2 !important;padding:20px 18px 0 !important}
#reviewBoard #listPowerReviewGroup > li.grid-item .score-area{grid-column:1 !important;grid-row:3 !important;margin:14px 18px 0 !important}
#reviewBoard #listPowerReviewGroup > li.grid-item .review-area{grid-column:1 !important;grid-row:4 !important;padding:4px 18px 0 !important}
#reviewBoard #listPowerReviewGroup > li.grid-item .nv-brd-cta{grid-column:1 !important;grid-row:5 !important;margin:14px 18px 18px !important;width:calc(100% - 36px) !important}
}
/* ─── 상품리뷰 카드 2차 보정 (2026-08-22) ─────────────────────────────────
① 카드 뒤 네이티브 회색판(#f6f6f6) 제거
② 상품 이미지 잘림 방지 : cover → contain (원본 500x500 정사각)
③ 가격을 상품명 반대쪽(우측)으로
④ 하단 '리뷰 모두 보기' 버튼 제거 → 평점·리뷰 영역 클릭이 모달 트리거
──────────────────────────────────────────────────────────────────────── */
/* ① 회색 배경판 제거 */
#reviewBoard #PowerReviewGroup.product-review-list{background:transparent !important;
border:0 !important;padding:0 !important}
/* ② 이미지 : 잘리지 않게 전체를 보여준다 */
#reviewBoard #listPowerReviewGroup > li.grid-item .img-area{
background:#f7f1ee !important;display:flex;align-items:center;justify-content:center}
#reviewBoard #listPowerReviewGroup > li.grid-item .img-area a{display:flex;align-items:center;justify-content:center}
#reviewBoard #listPowerReviewGroup > li.grid-item .img-area img{
object-fit:contain !important;object-position:center;transform:none !important}
#reviewBoard #listPowerReviewGroup > li.grid-item:hover .img-area img{transform:none !important}
/* ③ 상품명(좌) ↔ 가격(우) 한 줄 배치 */
#reviewBoard #listPowerReviewGroup > li.grid-item .title-area{
display:flex !important;align-items:baseline;justify-content:space-between;gap:20px;
padding:26px 28px 0 !important}
#reviewBoard #listPowerReviewGroup > li.grid-item .title-area p{margin:0 !important}
#reviewBoard #listPowerReviewGroup > li.grid-item .title-area p:nth-of-type(1){
flex:1 1 auto;min-width:0;font-size:16px !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#reviewBoard #listPowerReviewGroup > li.grid-item .title-area p:nth-of-type(2){
flex:0 0 auto;margin:0 !important;font-size:19px !important;text-align:right !important;white-space:nowrap}
/* ④ CTA 버튼 제거 + 리뷰/평점 영역을 클릭 가능하게 */
#reviewBoard .nv-brd-cta{display:none !important}
#reviewBoard #listPowerReviewGroup > li.grid-item .nv-brd-hot{
cursor:pointer;border-radius:12px;transition:background .18s ease}
#reviewBoard #listPowerReviewGroup > li.grid-item .review-area.nv-brd-hot{
margin:6px 18px 22px !important;padding:0 10px !important}
#reviewBoard #listPowerReviewGroup > li.grid-item .review-area.nv-brd-hot:hover{background:#faf5f2}
#reviewBoard #listPowerReviewGroup > li.grid-item .score-area.nv-brd-hot:hover{border-color:#e3cec6 !important}
#reviewBoard #listPowerReviewGroup > li.grid-item .nv-brd-hot:focus-visible{
outline:2px solid #b78d7e;outline-offset:2px}
@media (max-width:860px){
#reviewBoard #listPowerReviewGroup > li.grid-item .title-area{
flex-direction:column;align-items:flex-start;gap:6px;padding:20px 18px 0 !important}
#reviewBoard #listPowerReviewGroup > li.grid-item .title-area p:nth-of-type(2){text-align:left !important}
#reviewBoard #listPowerReviewGroup > li.grid-item .review-area.nv-brd-hot{margin:6px 10px 16px !important}
}
/* ─── 모바일 리뷰 모달 : 닫기 버튼이 주소창에 가려지던 문제 (2026-09-14) ─────
원인 ① 상자 높이를 100vh 로 잡았는데, 휴대폰의 100vh 는 주소창에 가려진 부분까지 포함한 높이라
화면보다 커지고 → 가운데 정렬되면서 상자 윗부분(닫기 버튼)이 주소창 밑으로 들어갔다.
원인 ② 닫기 버튼이 상자 안에 absolute 로 붙어 있어, 리뷰를 스크롤하면 같이 위로 사라졌다.
해결 : 상자는 vh 대신 오버레이(실제 보이는 화면) 높이 100% 로 꽉 채우고,
닫기 버튼은 상자 안에서 sticky 로 붙여 스크롤해도 항상 오른쪽 위에 보이게 한다.
(margin-bottom 음수로 버튼 자리를 없애 아래 상품 바가 밀리지 않게 함 — 상품 바는 오른쪽 48px 비워 둠)
아이폰 노치·상태표시줄 영역(safe-area)만큼 위 여백을 더 준다. 전체리뷰·포토리뷰 모달도 같은 규칙.
실측(375×812): 상자 0~812 로 화면에 딱 맞음, 600·1366px 스크롤해도 닫기 버튼 top 28px 유지. */
@media (max-width:680px){
.nv-rvm{align-items:stretch}
.nv-rvm-box{height:100%;max-height:100%;
padding-top:calc(env(safe-area-inset-top, 0px) + 24px);
padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 22px)}
.nv-rvm-x{position:sticky !important;top:0 !important;right:auto !important;display:block;
margin:-10px -6px -28px auto;
background:rgba(250,246,244,.96);box-shadow:0 6px 18px -8px rgba(38,28,24,.35)}
}
/* BASIC css end */