/* rv 담당 CSS — 클래스 접두어 .rv- 만. 토큰은 base.css :root(var(--…))만 쓰고 hex 직접 금지. 고객 화면 틀이 자동으로 불러온다. */

/* ── 공용: PC 표 / 모바일 카드 ── */
.rv-only-m { display: none; }
@media (max-width: 760px) {
  .rv-only-pc { display: none; }
  .rv-only-m { display: grid; }
}
.rv-stats { margin-bottom: var(--sp-5); }
.rv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.rv-toolbar .tabs { flex: 1 1 auto; min-width: 0; }
.rv-sort { display: flex; align-items: center; gap: var(--sp-2); }
.rv-sort .select { min-width: 9.5rem; }
.rv-count { margin: var(--sp-2) 0 var(--sp-3); }
.rv-cards { gap: var(--sp-3); }
.rv-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); }
.rv-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 26rem; color: var(--ink-2); }
.rv-manage { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.rv-danger-text { color: var(--danger); }
.rv-danger-text:hover { background: var(--danger-soft); color: var(--danger); }
.rv-mini-kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--sp-3); font-size: var(--fs-sm); }
.rv-mini-kv dt { color: var(--ink-3); }
.rv-break { word-break: break-all; }
.rv-links { display: flex; flex-direction: column; gap: var(--sp-2); }
.rv-links .link { display: inline-flex; align-items: center; gap: 6px; min-height: 2.25rem; }
.rv-foot-note { margin-top: var(--sp-6); }

/* ── 작성·수정 2단 ── */
.rv-write { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-5); align-items: start; margin-top: var(--sp-4); }
.rv-write-main { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.rv-write-side { display: flex; flex-direction: column; gap: var(--sp-4); position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.rv-actions { justify-content: flex-end; }
@media (max-width: 960px) {
  .rv-write { grid-template-columns: 1fr; }
  .rv-write-side { position: static; }
  .rv-actions { justify-content: stretch; }
  .rv-actions .btn { flex: 1 1 auto; }
}
.rv-side-note .btn-row { margin-top: var(--sp-3); }

/* 예약 카드 고르기 */
.rv-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sp-3); }
.rv-pick-item { position: relative; display: block; border: 1.5px solid var(--line-input); border-radius: var(--r); background: var(--surface); cursor: pointer; transition: border-color var(--t-short) var(--ease), box-shadow var(--t-short) var(--ease); }
.rv-pick-item input { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 1.25rem; height: 1.25rem; accent-color: var(--accent); margin: 0; }
.rv-pick-item:hover { border-color: var(--ink-2); }
.rv-pick-item:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: var(--accent-soft); }
.rv-pick-item:has(input:focus-visible) { box-shadow: var(--focus); }
.rv-pick-body { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4); padding-right: 2.75rem; }
.rv-pick-body .row-between { padding-right: 0; }
.rv-pick-item.is-off { cursor: default; background: var(--surface-3); border-style: dashed; border-color: var(--line-strong); }
.rv-pick-item.is-off .rv-pick-body { padding-right: var(--sp-4); }

/* 별점 입력 */
.rv-rate { border: 0; padding: 0; margin: 0; }
.rv-rate-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.rv-stars-in { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.rv-stars-in input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-stars-in label { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--r-sm); color: var(--line-strong); cursor: pointer; transition: color var(--t-short) var(--ease); }
.rv-stars-in label .ic { width: 2rem; height: 2rem; }
.rv-stars-in input:checked ~ label, .rv-stars-in label:hover, .rv-stars-in label:hover ~ label { color: var(--star); }
.rv-stars-in input:checked ~ label .ic, .rv-stars-in label:hover .ic, .rv-stars-in label:hover ~ label .ic { fill: currentColor; }
.rv-stars-in input:focus-visible + label { box-shadow: var(--focus); }
.rv-stars-in input[aria-invalid="true"] + label { color: var(--danger); }
.rv-rate[disabled] .rv-stars-in label { cursor: not-allowed; }
.rv-rate[disabled] .rv-stars-in label:hover:not(:has(~ input:checked)) { color: var(--line-strong); }
.rv-rate-val { font-weight: 800; font-size: var(--fs-lg); color: var(--warm-ink); font-variant-numeric: tabular-nums; }

/* 전후 사진 */
.rv-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.rv-photo-col { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.rv-photo-col figcaption { font-weight: 700; }
.rv-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--sp-2); }
.rv-photo-grid a { display: block; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.rv-photo-grid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.rv-photo-grid a:hover img { opacity: .9; }
.rv-photo-none { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 6rem; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); color: var(--ink-3); font-size: var(--fs-sm); background: var(--surface-3); text-align: center; padding: var(--sp-3); }
@media (max-width: 560px) {
  .rv-photos { grid-template-columns: 1fr; }
  .rv-photo-grid { grid-template-columns: 1fr 1fr; }
  .rv-photos-side .rv-photo-grid { grid-template-columns: 1fr; }
}

/* ── 상세 2단(리뷰·문의·마케팅) ── */
.rv-detail { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--sp-5); align-items: start; }
.rv-detail-main, .rv-detail-side { min-width: 0; }
@media (max-width: 960px) { .rv-detail { grid-template-columns: 1fr; } }
.rv-score { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-3); }
.rv-score .stars .ic { width: 1.4rem; height: 1.4rem; }
.rv-body { line-height: 1.8; color: var(--ink); margin-bottom: var(--sp-3); white-space: normal; word-break: break-word; }
.rv-reply { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-sm); }

/* ── 요약(내 리뷰) ── */
.rv-summary { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 13rem; gap: var(--sp-5); align-items: center; margin-bottom: var(--sp-5); }
.rv-sum-avg { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rv-sum-num { font-size: 2.5rem; font-weight: 800; line-height: 1.1; color: var(--ink); }
.rv-dist { display: flex; flex-direction: column; gap: 6px; }
.rv-dist li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 3rem; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.rv-dist .bar { width: 100%; margin: 0; height: .6rem; }
.rv-dist .bar > span { background: var(--star); }
.rv-dist-n { text-align: right; color: var(--ink-3); }
.rv-sum-open { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
@media (max-width: 860px) { .rv-summary { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* ── 고객센터 ── */
.rv-sec { margin-top: var(--sp-5); min-width: 0; }
.rv-pol-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.rv-pol-grid .card { display: flex; flex-direction: column; gap: var(--sp-2); }
.rv-card-t { font-size: var(--fs-md); font-weight: 800; }
@media (max-width: 760px) { .rv-pol-grid { grid-template-columns: 1fr; } }
.rv-support { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--sp-5); align-items: start; }
@media (max-width: 960px) { .rv-support { grid-template-columns: 1fr; } }
.rv-chips { margin: var(--sp-3) 0; }
@media (max-width: 560px) { .rv-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } }
.rv-faq { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.rv-faq-item { border-bottom: 1px solid var(--line); }
.rv-faq-item:last-child { border-bottom: 0; }
.rv-faq-item summary { display: flex; align-items: center; gap: var(--sp-3); min-height: 3.5rem; padding: var(--sp-3) var(--sp-4); cursor: pointer; font-weight: 700; list-style: none; }
.rv-faq-item summary::-webkit-details-marker { display: none; }
.rv-faq-item summary:hover { background: var(--surface-3); }
.rv-faq-item summary:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); outline: none; }
.rv-faq-q { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; font-size: var(--fs-sm); flex: 0 0 auto; }
.rv-faq-arrow { flex: 0 0 auto; transition: transform var(--t-short) var(--ease); color: var(--ink-3); }
.rv-faq-item[open] .rv-faq-arrow { transform: rotate(180deg); }
.rv-faq-a { padding: 0 var(--sp-4) var(--sp-4) calc(var(--sp-4) + 1.75rem + var(--sp-3)); color: var(--ink-2); line-height: 1.75; }
@media (max-width: 560px) { .rv-faq-item summary .badge { display: none; } .rv-faq-a { padding-left: var(--sp-4); } }
.rv-btn-off { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* ── 문의 ── */
.rv-drop { position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border: 2px dashed var(--line-input); border-radius: var(--r); background: var(--surface-3); cursor: pointer; transition: border-color var(--t-short) var(--ease), background var(--t-short) var(--ease); }
.rv-drop:hover, .rv-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.rv-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.rv-drop:has(input:focus-visible) { box-shadow: var(--focus); }
.rv-thumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rv-thumbs:empty { display: none; }
.rv-thumbs li { position: relative; width: 5.5rem; height: 5.5rem; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); }
.rv-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-thumb-x { position: absolute; top: 4px; right: 4px; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--night); color: var(--on-night); font-size: var(--fs-md); line-height: 1; display: grid; place-items: center; }
.rv-thumb-x:focus-visible { box-shadow: var(--focus); }
.rv-att { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
@media (max-width: 560px) { .rv-att-grid { grid-template-columns: 1fr; } }
.rv-wait { display: flex; gap: var(--sp-3); align-items: flex-start; }
.rv-thread { display: flex; flex-direction: column; gap: var(--sp-3); }
.rv-msg { padding: var(--sp-3) var(--sp-4); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface-3); }
.rv-msg.is-admin { background: var(--accent-soft); border-color: var(--accent-soft); }
.rv-msg-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: var(--sp-1); }
.rv-msg-body { line-height: 1.75; color: var(--ink); word-break: break-word; }

/* ── 약관·정책 ── */
.rv-doc-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.rv-doc-item { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
.rv-doc-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.rv-doc-end { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-3); flex: 0 0 auto; }
@media (max-width: 560px) { .rv-doc-item { align-items: flex-start; padding: var(--sp-4); } .rv-doc-end .badge { display: none; } }
.rv-doc { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.rv-doc-side { display: flex; flex-direction: column; gap: var(--sp-3); position: sticky; top: calc(var(--header-h) + var(--sp-4)); max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto; }
.rv-doc-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.rv-doc-meta .kv { grid-template-columns: max-content 1fr; }
.rv-ver { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
.rv-ver .select { min-width: 0; }
.rv-toc ol { list-style: none; margin-top: var(--sp-2); display: flex; flex-direction: column; }
.rv-toc a { display: block; padding: .4rem 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; }
.rv-toc a:hover { color: var(--accent-ink); text-decoration: underline; }
.rv-prose h2:first-child { margin-top: 0; }
.rv-prose h2 { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.rv-prose h2:focus { outline: none; }
.rv-prose .table-wrap { margin: var(--sp-2) 0; }
.rv-prose .table { min-width: 0; }
@media (max-width: 960px) {
  .rv-doc { grid-template-columns: 1fr; }
  .rv-doc-side { position: static; max-height: none; overflow: visible; }
}
.rv-related { margin-top: var(--sp-6); }
.rv-rel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--sp-3); }
.rv-rel-item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); font-weight: 700; }
.rv-rel-item span { flex: 1 1 auto; }

/* 마케팅 수신 */
.rv-ch-list { display: flex; flex-direction: column; margin-top: var(--sp-3); border-top: 1px solid var(--line); }
.rv-ch { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.rv-ch-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.rv-ch-text .muted { word-break: break-all; }
.rv-ch .switch { flex: 0 0 auto; }
.rv-ch .switch .small { min-width: 3rem; color: var(--ink-2); }
@media (max-width: 560px) { .rv-ch { flex-wrap: wrap; } .rv-ch .switch { margin-left: calc(2.588rem + var(--sp-3)); } }
.rv-hist { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.rv-hist li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); flex-wrap: wrap; }