/* 후기 상세 모달 (review_modal.js 가 body 끝에 그립니다) — Midnight Vault
   홈 베스트 후기, 상품 상세, 내 후기에서 공용. 클래스 이름은 review_modal.js 템플릿 그대로입니다.
   구조: .review-modal > .review-modal__wrapper[--no-evidence] > (.review-modal__evidence) + .review-modal__content */

html.no-scroll { height: 100dvh; overflow: hidden; }

.review-modal {
    position: fixed; inset: 0; z-index: 10010;
    display: flex; align-items: center; justify-content: center;
    padding: 2.4rem; background: rgba(14, 10, 24, .62);
    animation: rvm-fade .2s ease both;
}
@keyframes rvm-fade { from { opacity: 0; } to { opacity: 1; } }
.review-modal * { box-sizing: border-box; }
.review-modal p, .review-modal h1, .review-modal h2, .review-modal dl, .review-modal dd, .review-modal figure { margin: 0; }

.review-modal__wrapper {
    position: relative; display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
    width: 100%; max-width: 104rem; max-height: calc(100dvh - 4.8rem); overflow: hidden;
    border-radius: var(--rb-radius-xl, 28px); background: #fff; box-shadow: var(--rb-shadow-3);
    font-family: var(--rb-font); color: var(--rb-ink);
    animation: rvm-rise .3s var(--rb-ease, ease) both;
}
@keyframes rvm-rise { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.review-modal__wrapper--no-evidence { grid-template-columns: minmax(0, 1fr); max-width: 64rem; }
.review-modal__wrapper--no-evidence .review-modal__evidence { display: none; }

/* ---------- 발송내역 증빙 (왼쪽 어두운 패널) ---------- */
.review-modal__evidence { min-width: 0; overflow-y: auto; background: var(--rb-night); color: #fff; }
.review-modal__evidence-inner { padding: 3.2rem 2.8rem; }
.review-modal__evidence-card { display: grid; gap: 1.6rem; }
.review-modal__evidence .review-modal__section-title { color: #fff; }
.review-modal__evidence-media { display: grid; gap: 1rem; }
.review-modal__evidence-media .review-modal__image { display: block; width: 100%; height: auto; border-radius: var(--rb-radius, 16px); background: rgba(255, 255, 255, .06); }
.review-modal__evidence-message {
    padding: 2rem 1.6rem; border: 1px dashed rgba(255, 255, 255, .2); border-radius: var(--rb-radius, 16px);
    font-size: 1.35rem; line-height: 1.6; text-align: center; color: var(--rb-night-ink);
}
.review-modal__evidence .review-modal__notice { background: rgba(255, 255, 255, .06); color: var(--rb-night-ink); }

/* ---------- 본문 ---------- */
.review-modal__content { min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
.review-modal__content-inner { display: grid; gap: 2.8rem; padding: 3.2rem 3.2rem 3.6rem; }
.review-modal__close {
    position: absolute; top: 1.4rem; right: 1.4rem; z-index: 3; width: 4.4rem; height: 4.4rem;
    padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .94); cursor: pointer;
    box-shadow: var(--rb-shadow-1);
}
.review-modal__close:hover { background: var(--rb-bg-3); }
.review-modal__close::before, .review-modal__close::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 1.8rem; height: 2px; margin: -1px 0 0 -.9rem;
    border-radius: 2px; background: var(--rb-ink-2); transform: rotate(45deg);
}
.review-modal__close::after { transform: rotate(-45deg); }

.review-modal__review { display: grid; gap: 2rem; }
.review-modal__products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; padding-right: 4.8rem; }
.review-modal__products--single { grid-template-columns: minmax(0, 1fr); max-width: 32rem; padding-right: 0; }
.review-modal__product { position: relative; overflow: hidden; border-radius: var(--rb-radius-lg, 20px); background: #fff; outline: 1px solid var(--rb-line); outline-offset: -1px; aspect-ratio: 1; }
.review-modal__product picture, .review-modal__product .review-modal__image { display: block; width: 100%; height: 100%; object-fit: contain; }
.review-modal__badge {
    position: absolute; left: 1.2rem; top: 1.2rem; display: inline-flex; align-items: center; height: 2.6rem; padding: 0 1rem;
    border-radius: 999px; background: var(--rb-violet); color: #fff; font: 800 1.15rem/1 var(--rb-font-display);
}
.review-modal__badge--dark { background: var(--rb-ink); }

.review-modal__summary { display: grid; gap: 1.4rem; }
.review-modal__title { font: 800 2.2rem/1.35 var(--rb-font-display); letter-spacing: -.01em; color: var(--rb-ink); }
.review-modal__details { display: grid; gap: .8rem; }
.review-modal__detail { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 1.2rem; font-size: 1.4rem; line-height: 1.5; }
.review-modal__detail dt { color: var(--rb-ink-3); }
.review-modal__detail dd { color: var(--rb-ink); font-weight: 500; word-break: keep-all; overflow-wrap: anywhere; }
.review-modal__detail:first-child dd { font: 800 1.6rem/1.4 var(--rb-font-display); font-variant-numeric: tabular-nums; }
.review-modal__divider { height: 1px; background: var(--rb-line); }
.review-modal__body { display: grid; gap: 1.2rem; }
.review-modal__text { font-size: 1.55rem; line-height: 1.75; color: var(--rb-ink-2); white-space: pre-line; }
.review-modal__notice {
    padding: 1.2rem 1.4rem; border-radius: var(--rb-radius-sm, 12px); background: var(--rb-violet-50);
    font-size: 1.3rem; line-height: 1.6; color: var(--rb-violet-ink);
}

/* RNDBOX 코멘트 */
.review-modal__comment {
    display: grid; gap: 1.2rem; padding: 2rem 2.2rem; border-radius: var(--rb-radius-lg, 20px); background: var(--rb-bg-2);
}
/* 예전 로고 파일(시스템 글꼴 텍스트) 대신 새 로고를 보여줌 */
.review-modal__logo { content: url("/img/logo.svg"); display: block; width: auto; height: 2.6rem; }
.review-modal__comment-image { display: block; max-width: 100%; height: auto; border-radius: var(--rb-radius-sm, 12px); }
.review-modal__comment-text { display: grid; gap: .4rem; font-size: 1.4rem; line-height: 1.7; color: var(--rb-ink-2); }

/* 언박싱 내역 슬라이더 */
.review-modal__section-title { font: 800 1.7rem/1.3 var(--rb-font-display); letter-spacing: -.01em; color: var(--rb-ink); }
.review-modal__unboxing { display: grid; gap: 1.4rem; min-width: 0; }
.review-modal__slider { position: relative; min-width: 0; }
.review-modal__cards { overflow: hidden; }
.review-modal__card {
    display: flex; flex-direction: column; width: 17rem; overflow: hidden;
    border-radius: var(--rb-radius, 16px); background: #fff; outline: 1px solid var(--rb-line); outline-offset: -1px;
}
.review-modal__card-image { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-bottom: 1px solid var(--rb-line); }
.review-modal__card-content { display: grid; gap: .6rem; padding: 1.2rem 1.2rem 1.4rem; }
.review-modal__card-name { font-size: 1.3rem; font-weight: 600; line-height: 1.4; color: var(--rb-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.6rem; }
.review-modal__card-price { font: 800 1.45rem/1.2 var(--rb-font-display); color: var(--rb-ink); font-variant-numeric: tabular-nums; }
.review-modal__chain {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 3.2rem; padding: 0 .8rem;
    border: 0; border-radius: 999px; background: var(--rb-violet-50); color: var(--rb-violet-ink);
    font: 700 1.15rem/1 var(--rb-font); cursor: pointer;
}
.review-modal__chain:hover { background: var(--rb-violet-100); }
.review-modal__chain img { width: 1.6rem; height: 1.6rem; }
.review-modal__arrow {
    position: absolute; top: 7rem; z-index: 2; width: 4rem; height: 4rem; padding: 0; border: 1px solid var(--rb-line-2); border-radius: 999px;
    background: rgba(255, 255, 255, .95); box-shadow: var(--rb-shadow-2); cursor: pointer;
}
.review-modal__arrow::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: .9rem; height: .9rem; margin: -.45rem 0 0 -.65rem;
    border: solid var(--rb-ink-2); border-width: 2px 2px 0 0; transform: rotate(45deg);
}
.review-modal__arrow--prev { left: -1.2rem; }
.review-modal__arrow--prev::before { margin-left: -.25rem; transform: rotate(-135deg); }
.review-modal__arrow--next { right: -1.2rem; }
.review-modal__arrow.swiper-button-disabled { opacity: 0; pointer-events: none; }

/* ---------- 모바일: 아래에서 올라오는 시트 ---------- */
@media (max-width: 767px) {
    .review-modal { align-items: flex-end; padding: 0; }
    .review-modal__wrapper {
        display: block; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
        border-radius: var(--rb-radius-xl, 28px) var(--rb-radius-xl, 28px) 0 0;
    }
    .review-modal__evidence, .review-modal__content { overflow: visible; }
    .review-modal__evidence-inner { padding: 2.8rem 2rem 2.4rem; }
    .review-modal__evidence-media:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .review-modal__content-inner { gap: 2.4rem; padding: 2.4rem 2rem calc(2.8rem + env(safe-area-inset-bottom)); }
    .review-modal__close { top: 1.2rem; right: 1.2rem; }
    .review-modal__products { padding-right: 0; }
    .review-modal__products--single { max-width: none; }
    .review-modal__wrapper--no-evidence .review-modal__products { margin-top: 4.4rem; }
    .review-modal__title { font-size: 1.9rem; }
    .review-modal__detail { grid-template-columns: 6.4rem minmax(0, 1fr); font-size: 1.35rem; }
    .review-modal__text { font-size: 1.45rem; }
    .review-modal__card { width: 14.4rem; }
    .review-modal__arrow { display: none; }
}