/* ==========================================================================
   리뷰 페이지 전용 (v2) — 외주본 community.css(review-overview·review-filters·review-row) 위에
   리뷰 스크립트(원문 그대로)가 그리는 카드(.rv-card)를 외주본 '한 줄 세로 목록' 모양으로.
   사진은 올린 것 전부 원본 비율로 펼쳐 보이고(넘김 화살표 대신), 본문은 자르지 않는다.
   상세 모달(.rvm)·작성 모달(.rvw)·영상·트림 슬라이더는 본 사이트 규칙을 외주본 언어(흑백·직각)로 옮김.
   ========================================================================== */

/* ── 머리·요약 ───────────────────────────────────────── */
.rv-write-btn { display: none !important; }   /* 본 사이트와 같이 숨김(비밀번호 게이트 작성은 스크립트용) */
.rv-stats { margin: -12px 0 20px; font-size: 13px; line-height: 1.8; color: #999; }
.rv-stats b { font-weight: 600; color: #171717; }
.rv-stats span { color: #777 !important; }   /* 스크립트가 필터 꼬리표에 파랑을 인라인으로 넣는다 → 흑백 */

/* ── 필터 (외주본 review-filters + 우리 키·몸무게 범위) ─────────── */
.review-filters { margin-bottom: 10px; }
.review-filters > select { min-width: 160px; }
.rv-range { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; white-space: nowrap; }
.rv-range__lb { font-size: 13px; color: #777; }
.rv-range__lb i { display: none; font-style: normal; }
.rv-range select { width: 86px; min-width: 0; padding: 11px 8px; }
.rv-range__sep,
.rv-range__u { font-size: 13px; color: #999; }
.rv-range.on select { border-color: #171717; font-weight: 600; }
.rv-check .tagp { color: inherit; }
.rv-reset { font-size: 14px; }
.rv-reset[hidden] { display: none; }

/* ── 목록: 한 줄 세로 (외주본 review-row 모양) ─────────────── */
.rv-list { display: block; margin-top: 10px; }
.rv-card { display: grid; grid-template-columns: 1fr 2fr; column-gap: 50px; padding: 30px 0; border-top: 1px solid #e7e7e7; }
.rv-card:last-child { border-bottom: 1px solid #e7e7e7; }
.rv-card > * { grid-column: 2; min-width: 0; }
.rv-prod { grid-column: 1; grid-row: 1 / span 9; display: flex; align-items: flex-start; align-self: start; gap: 18px; }
.rv-prod img { flex: none; width: 85px; height: 110px; object-fit: cover; background: #f4f4f4; }
.rv-prod span { font-size: 15px; font-weight: 500; line-height: 1.7; }
.rv-prod:hover span { text-decoration: underline; }
.rv-prod--off { cursor: default; }
.rv-prod--off:hover span { text-decoration: none; }
.rv-stars { font-size: 17px; letter-spacing: 3px; color: #242424; }
.rv-who { margin-top: 6px; font-size: 13px; line-height: 1.8; color: #999; }
.rv-body { position: static; max-height: none; margin: 17px 0 0; overflow: visible; font-size: 15px; line-height: 1.9; color: #171717; white-space: pre-line; overflow-wrap: anywhere; }
.rv-body::after { content: none; }
.rv-more { display: none !important; }   /* 본문을 자르지 않으니 '더보기' 불필요(사진 클릭 → 상세 모달은 그대로) */
.rv-empty { padding: 80px 0; text-align: center; font-size: 15px; color: #999; }

/* 사진: 넘김 슬라이더 → 전부 펼쳐 보이기(원본 비율) */
.rv-gal { position: static; display: flex; flex-wrap: wrap; gap: 8px; min-height: 0; margin: 15px 0 0; overflow: visible; background: none; }
.rv-gal__img,
.rv-gal__img.on { position: static; inset: auto; display: block; width: auto; height: 115px; max-width: 220px; object-fit: contain; background: #f4f4f4; opacity: 1; cursor: zoom-in; }
.rv-gal__nav,
.rv-gal__dots,
.rv-gal__count { display: none !important; }

/* 리뷰 영상(카드) — 본 사이트 규칙, 직각 */
.rv-vid { position: relative; display: block; width: 100%; max-width: 320px; margin: 15px 0 0; overflow: hidden; background: #000; cursor: pointer; line-height: 0; }
.rv-vid__poster { display: block; width: 100%; height: auto; }
.rv-vid__ph { width: 100%; aspect-ratio: 3 / 4; background: #111; }
.rv-vid__play { position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; transform: translate(-50%, -50%); border-radius: 50%; background: #0008; cursor: pointer; transition: background 0.15s; }
.rv-vid__play::before { content: ''; display: block; width: 0; height: 0; margin: 0 auto; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.rv-vid:hover .rv-vid__play { background: #000b; }
.rv-vid__tag { position: absolute; top: 8px; left: 8px; padding: 4px 7px; background: #0009; color: #fff; font-size: 11px; line-height: 1; }
.rv-vid.playing { cursor: default; }
.rv-vid.playing .rv-vid__play,
.rv-vid.playing .rv-vid__tag { display: none; }
.rv-vid video { display: block; width: 100%; height: auto; background: #000; }

/* ── 상세 모달(.rvm) ───────────────────────────────────── */
.rvm { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 24px; background: #000b; }
.rvm.on { display: flex; }
.rvm__panel { position: relative; display: flex; width: min(960px, 94vw); max-height: 88vh; overflow: hidden; background: #fff; }
.rvm__close { position: absolute; top: 12px; right: 12px; z-index: 5; width: 38px; height: 38px; background: #fff; color: #111; font-size: 22px; line-height: 1; }
.rvm__media { position: relative; display: flex; flex: 1 1 56%; align-items: center; justify-content: center; min-height: 320px; background: #111; }
.rvm__media.empty { display: none; }
.rvm__img { max-width: 100%; max-height: 88vh; object-fit: contain; cursor: pointer; user-select: none; }
.rvm__nav { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; transform: translateY(-50%); background: #fff3; color: #fff; font-size: 26px; line-height: 1; }
.rvm__nav:hover { background: #fff6; }
.rvm__prev { left: 12px; }
.rvm__next { right: 12px; }
.rvm__nav[hidden] { display: none; }
.rvm__dots { position: absolute; right: 0; bottom: 12px; left: 0; display: flex; justify-content: center; gap: 6px; }
.rvm__dots i { width: 7px; height: 7px; border-radius: 50%; background: #fff6; }
.rvm__dots i.on { background: #fff; }
.rvm__side { display: flex; flex: 1 1 44%; flex-direction: column; gap: 12px; min-width: 300px; max-width: 400px; min-height: 0; max-height: 88vh; padding: 30px 26px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.rvm__media.empty + .rvm__side { max-width: none; }
.rvm__prod { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
.rvm__prod img { width: 48px; height: 62px; object-fit: cover; background: #f4f4f4; }
.rvm__prod span { font-size: 15px; font-weight: 500; }
.rvm__prod[aria-disabled],
.rvm__prod:not([href]) { cursor: default; }
.rvm__stars { font-size: 18px; letter-spacing: 4px; color: #242424; }
.rvm__who { font-size: 13px; color: #999; }
.rvm__body { font-size: 15px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.rvm__vid { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; background: #000; cursor: pointer; }
.rvm__vid .rv-vid__poster { width: auto; max-width: 100%; max-height: 100%; }
.rvm__vid video { max-width: 100%; max-height: 100%; background: #000; }
.rvm__vid .rv-vid__play { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%; background: #0008; }
.rvm__vid .rv-vid__play::before { content: ''; display: block; width: 0; height: 0; margin: 0 auto; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; }

/* ── 작성 모달(.rvw) — 외주본 review-form-dialog 모양 ─────────── */
.rvw { position: fixed; inset: 0; z-index: 2100; display: none; align-items: center; justify-content: center; padding: 20px; background: #0009; }
.rvw.on { display: flex; }
.rvw__panel { position: relative; width: min(650px, 95vw); max-height: 92svh; padding: 35px; overflow-y: auto; background: #fff; -webkit-overflow-scrolling: touch; }
.rvw__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; color: #111; font-size: 22px; line-height: 1; }
.rvw__t { margin: 0 0 6px; font-size: 28px; font-weight: 650; }
.rvw__sub { margin: 0 0 18px; font-size: 13px; color: #999; }
.rvw label { display: block; margin: 14px 0 6px; font-size: 14px; color: #555; }
.rvw .wm-opt { font-weight: 400; color: #aaa; }
.rvw input,
.rvw select,
.rvw textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 0; background: #fff; color: #171717; font: inherit; font-size: 15px; }
.rvw textarea { min-height: 100px; resize: vertical; }
.rvw__row { display: flex; gap: 10px; }
.rvw__row > div { flex: 1; min-width: 0; }
.rvw__file { padding: 9px 12px !important; }
.rvw__submit { width: 100%; min-height: 52px; margin-top: 18px; background: #171717; color: #fff; font-size: 15px; font-weight: 500; }
.rvw__submit:hover { background: #333; }
.rvw__submit:disabled { opacity: 0.6; cursor: default; }
.rvw__msg { min-height: 18px; margin-top: 10px; font-size: 13px; }
.rvw__msg.err { color: #b34635; }
.rvw__msg.ok { color: #2a8f4f; }
.rvw__video { display: block; width: auto; max-width: 100%; max-height: 360px; margin: 0 auto; background: #000; }
.rvw__info { margin-top: 6px; font-size: 12px; line-height: 1.7; color: #999; }
.rvw__info b { color: #171717; }
.rvt__times { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: #999; }
.rvt__times b { color: #171717; }
.rvw__video-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.rvw__video-clear { padding: 6px 12px; border: 1px solid #ddd; font-size: 12px; }

/* 영상 트림 듀얼 슬라이더 (본 사이트 규칙 · 강조색만 흑백) */
.rvt__track { position: relative; height: 34px; }
.rvt__track::before { content: ''; position: absolute; top: 50%; right: 8px; left: 8px; height: 4px; margin-top: -2px; background: #ddd; }
.rvt__sel { position: absolute; top: 50%; height: 4px; margin-top: -2px; background: #171717; pointer-events: none; }
.rvt__range { position: absolute; top: 0; right: 0; left: 0; width: 100%; height: 34px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
.rvt__range::-webkit-slider-thumb { width: 18px; height: 18px; border: 2px solid #171717; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #0004; cursor: pointer; pointer-events: auto; -webkit-appearance: none; appearance: none; }
.rvt__range::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid #171717; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #0004; cursor: pointer; pointer-events: auto; }
.rvt__range::-webkit-slider-runnable-track { background: transparent; }
.rvt__range::-moz-range-track { background: transparent; }

@media (max-width: 767px) {
    .rv-card { grid-template-columns: 1fr; row-gap: 12px; padding: 22px 0; }
    .rv-card > *,
    .rv-prod { grid-column: 1; grid-row: auto; }
    .rv-prod img { width: 64px; height: 84px; }
    .rv-stars { font-size: 15px; }
    .rv-body { margin-top: 0; font-size: 14px; }
    .rv-gal { margin-top: 0; }
    .rv-gal__img,
    .rv-gal__img.on { height: 96px; max-width: 160px; }
    .review-filters > select { flex: 1 1 45%; min-width: 0; }
    .rv-range { flex: 1 1 100%; gap: 6px; }
    .rv-range__lb { flex: 0 0 46px; }
    .rv-range select { flex: 1 1 0; width: auto; padding: 10px 6px; }
    .rv-check { margin-left: 0; }
    .rvm__panel { flex-direction: column; width: 96vw; max-height: 94vh; }
    .rvm__media { flex: 0 0 auto; width: 100%; height: auto; min-height: 0; max-height: 60vh; }
    .rvm__img { width: auto; max-width: 100%; max-height: 60vh; object-fit: contain; }
    .rvm__side { flex: 1 1 auto; min-width: 0; max-width: none; min-height: 0; padding: 20px; }
    .rvw__panel { padding: 24px 18px; }
    .rvw__row { flex-wrap: wrap; }
}

/* ── 어두운 화면 ─────────────────────────────────────────── */
[data-theme="dark"] .rv-card { border-color: #2a2a2a; }
[data-theme="dark"] .rv-prod img,
[data-theme="dark"] .rv-gal__img,
[data-theme="dark"] .rv-gal__img.on,
[data-theme="dark"] .rvm__prod img { background: #1c1c1c; }
[data-theme="dark"] .rv-stars,
[data-theme="dark"] .rvm__stars,
[data-theme="dark"] .rv-body,
[data-theme="dark"] .rv-stats b,
[data-theme="dark"] .review-overview strong,
[data-theme="dark"] .review-stars,
[data-theme="dark"] .rvw__info b,
[data-theme="dark"] .rvt__times b { color: #eee; }
[data-theme="dark"] .review-overview { background: #1a1a19; }
[data-theme="dark"] .review-overview > div { border-color: #333; }
[data-theme="dark"] .review-filters select,
[data-theme="dark"] .rvw input,
[data-theme="dark"] .rvw select,
[data-theme="dark"] .rvw textarea { background: #1a1a1a; border-color: #333; color: #eee; }
[data-theme="dark"] .rv-range.on select { border-color: #eee; }
[data-theme="dark"] .rvm__panel,
[data-theme="dark"] .rvw__panel,
[data-theme="dark"] .rvm__close { background: #161616; color: #eee; }
[data-theme="dark"] .rvm__prod { border-color: #333; }
[data-theme="dark"] .rvw__submit { background: #eee; color: #111; }
[data-theme="dark"] .rvw__submit:hover { background: #fff; }
[data-theme="dark"] .rvw__video-clear { border-color: #444; }
[data-theme="dark"] .rvt__track::before { background: #333; }
[data-theme="dark"] .rvt__sel { background: #eee; }
[data-theme="dark"] .rvt__range::-webkit-slider-thumb { border-color: #eee; background: #111; }
[data-theme="dark"] .rvt__range::-moz-range-thumb { border-color: #eee; background: #111; }

/* ── 모바일 카드 재구성 (2026-10-28) ─────────────────────────
   리뷰가 먼저: 별점 → 작성자 → 리뷰 사진(크게, 가로 넘김) → 본문 → 구매 상품(작은 줄).
   상품 사진은 작은 '구매 상품' 줄로 내려 리뷰 사진과 헷갈리지 않게 한다. */
@media (max-width: 767px) {
    .rv-card { row-gap: 0; padding: 24px 0 22px; }
    .rv-stars { order: 1; font-size: 14px; letter-spacing: 2px; }
    .rv-who { order: 2; margin-top: 4px; font-size: 12.5px; line-height: 1.6; color: #8a8a8a; }
    .rv-gal { order: 3; }
    .rv-vid { order: 4; }
    .rv-body { order: 5; }
    .rv-prod { order: 6; }

    /* 리뷰 사진: 크게, 원본 비율, 가로로 넘겨보기 */
    .rv-gal { flex-wrap: nowrap; gap: 8px; margin: 14px 0 0; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .rv-gal::-webkit-scrollbar { display: none; }
    .rv-gal__img,
    .rv-gal__img.on { flex: none; width: auto; height: 300px; max-width: 82%; object-fit: cover; border-radius: 6px; scroll-snap-align: start; }
    .rv-gal__img:only-child { height: auto; width: 100%; max-width: 100%; max-height: 440px; object-fit: contain; }
    .rv-vid { max-width: 100%; margin-top: 14px; border-radius: 6px; }

    /* 본문: 사진 없이도 읽기 좋게 */
    .rv-body { margin-top: 12px; font-size: 15px; line-height: 1.75; color: #171717; }

    /* 구매 상품: 회색 박스 한 줄 */
    .rv-prod { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 8px 12px 8px 8px; background: #f5f5f5; border-radius: 8px; }
    .rv-prod img { width: 40px; height: 40px; border-radius: 4px; background: #e9e9e9; }
    .rv-prod span { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rv-prod span::before { content: '구매 상품'; display: block; font-size: 11px; font-weight: 400; color: #999; }
    a.rv-prod::after { content: ''; flex: none; width: 7px; height: 7px; margin-right: 4px; border-top: 1.5px solid #999; border-right: 1.5px solid #999; transform: rotate(45deg); }
    .rv-prod:hover span { text-decoration: none; }

    [data-theme="dark"] .rv-body { color: #eee; }
    [data-theme="dark"] .rv-prod { background: #1c1c1c; }
    [data-theme="dark"] .rv-prod img { background: #2a2a2a; }
    [data-theme="dark"] .rv-prod span { color: #ddd; }
}

/* 리뷰 상세 사진 두 번 터치 확대 (2026-10-28) */
.rvm__media { overflow: hidden; }
.rvm__img { touch-action: manipulation; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: transform 0.22s ease; will-change: transform; }
.rvm__media.zoomed { touch-action: none; }
.rvm__media.zoomed .rvm__img { cursor: zoom-out; }
.rvm__media.zoomed .rvm__nav,
.rvm__media.zoomed .rvm__dots { display: none; }
.rvm__hint { position: absolute; left: 50%; bottom: 36px; z-index: 3; padding: 9px 16px; border-radius: 999px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 13px; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 6px); transition: opacity 0.3s, transform 0.3s; }
.rvm__hint.show { opacity: 1; transform: translate(-50%, 0); }