/*
 * 후기 상세 모달 본문 — A-4 브랜드 액센트형 (2026-08-27)
 * 종전에는 모달 파셜 안에 <style> 로 있어 후기를 열 때마다 같은 규칙이 문서에 하나씩 더 붙었다
 * (모달 id 로 스코프돼 있어 3개 열면 3벌). 개발 규칙 1 에 따라 컴포넌트로 이관.
 * ⚠ .rv-lbl / .rv-seg 는 _review_data_visibility 파셜이 쓰는 계약 이름 — 유지할 것.
 */

.rvd-body { padding: 16px; background: var(--ord-surface-2); }

/* 섹션 카드 */
.rvd-card { background: var(--ord-panel); border: 1px solid var(--ord-line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.rvd-card:last-child { margin-bottom: 0; }
.rvd-band { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--ord-band); border-bottom: 1px solid var(--ord-line-soft); }
.rvd-band::before { content: ""; width: 4px; height: 14px; background: var(--ord-accent); border-radius: 2px; flex-shrink: 0; }
.rvd-band .rvd-t { font-size: 12px; font-weight: 800; color: var(--ord-accent); }
.rvd-band .rvd-sp { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.rvd-bd { padding: 14px; }

/* 배지 (목록과 같은 문법 — 흰 pill + 액센트 도트) */
.rvd-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--ord-panel); border: 1px solid var(--ord-line); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; color: var(--ord-text-2); white-space: nowrap; }
.rvd-badge .rvd-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* 고객 카드 */
.rvd-cust { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.rvd-cust-name { font-size: 19px; font-weight: 800; color: var(--ord-text); line-height: 1.2; }
.rvd-tels { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.rvd-tel { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; }
.rvd-tel .rvd-tel-k { font-size: 10.5px; font-weight: 800; color: var(--ord-text-4); background: var(--ord-band); border: 1px solid var(--ord-line); border-radius: 999px; padding: 1px 7px; }
/* ⚠tel: 링크 제거(2026-08-29) — 숫자는 표기만 한다. 링크색·밑줄을 빼 «누를 것»으로 읽히지 않게. */
.rvd-tel .rvd-tel-v { color: var(--ord-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.rvd-tel .rvd-cp { border: 1px solid var(--ord-line); background: var(--ord-panel); border-radius: 6px; width: 22px; height: 22px; font-size: 11px; color: var(--ord-text-4); cursor: pointer; line-height: 1; }
.rvd-tel .rvd-cp:hover { background: var(--ord-band); color: var(--ord-accent); }
.rvd-cust-rt { margin-left: auto; }
.rvd-btn-out { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--ord-panel); color: var(--ord-accent); border: 1px solid var(--ord-line-2); border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; }
.rvd-btn-out:hover { background: var(--ord-band); }

/* 라벨:값 그리드 */
.rvd-kv { display: grid; grid-template-columns: 76px 1fr; gap: 5px 10px; margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--ord-line-soft); font-size: 12.5px; }
.rvd-kv .rvd-k { color: var(--ord-text-4); font-weight: 700; font-size: 11.5px; padding-top: 2px; }
.rvd-kv .rvd-v { color: var(--ord-text-2); min-width: 0; }
.rvd-kv .rvd-v .rvd-path { color: var(--ord-text-4); font-size: 11.5px; word-break: break-word; }
.rvd-kv .rvd-v .rvd-leaf { font-weight: 700; color: var(--ord-text); word-break: break-word; }
.rvd-sub { color: var(--ord-text-4); font-size: 11.5px; }

/* 만족도 */
.rvd-avg { display: flex; align-items: baseline; gap: 7px; }
.rvd-avg .rvd-stars { color: var(--ord-star); letter-spacing: 2px; font-size: 15px; }
.rvd-avg .rvd-n { font-size: 17px; font-weight: 800; color: var(--ord-text); font-variant-numeric: tabular-nums; }
.rvd-off { color: var(--ord-text-5); }
.rvd-rrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ord-line-soft); }
.rvd-rrow:last-child { border-bottom: none; }
.rvd-rrow .rvd-lb { font-size: 13px; color: var(--ord-text-2); font-weight: 600; flex: 1; }
.rvd-rrow .rvd-bar { width: 84px; height: 5px; border-radius: 999px; background: var(--ord-band); overflow: hidden; flex-shrink: 0; }
.rvd-rrow .rvd-bar i { display: block; height: 100%; background: var(--ord-solid-amber); border-radius: 999px; }
.rvd-rrow .rvd-sv { color: var(--ord-star); letter-spacing: 2px; font-size: 15px; }
.rvd-rrow .rvd-num { font-size: 11.5px; font-weight: 800; color: var(--ord-text-3); width: 22px; text-align: right; font-variant-numeric: tabular-nums; }

/* 후기 내용 */
.rvd-quote { background: var(--ord-surface); border: 1px solid var(--ord-line-soft); border-left: 3px solid var(--ord-accent); border-radius: 0 10px 10px 0; padding: 13px 14px; font-size: 14px; color: var(--ord-text-2); line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.rvd-quote.is-empty { color: var(--ord-line-2); }
.rvd-media { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.rvd-media a { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--ord-tooltip-bg); position: relative; }
.rvd-media img, .rvd-media video { width: 100%; height: 100%; object-fit: cover; }
.rvd-media .rvd-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ord-on-solid); font-size: 22px; }

/* 설정 — ⚠.rv-lbl / .rv-seg 는 visibility 파셜과의 계약 이름 */
.rvd-fld { margin-bottom: 14px; }
.rvd-fld:last-child { margin-bottom: 0; }
.rv-lbl { font-size: 12px; font-weight: 800; color: var(--ord-accent); margin-bottom: 6px; }
.rv-lbl .rvd-hint { color: var(--ord-text-4); font-weight: 600; font-size: 11px; margin-left: 6px; }
.rvd-input { width: 100%; padding: 9px 11px; border: 1.5px solid var(--ord-line-2); border-radius: 8px; font-size: 13.5px; background: var(--ord-surface); color: var(--ord-text); font-family: inherit; }
.rvd-input:focus { outline: none; border-color: var(--ord-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ord-accent) 13%, transparent); }
.rv-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rv-seg label { padding: 7px 15px; border: 1px solid var(--ord-line-2); border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ord-text-3); cursor: pointer; background: var(--ord-panel); }
.rv-seg label input { display: none; }
.rv-seg label:has(input:checked) { border-color: var(--ord-head-bg); background: var(--ord-head-bg); color: var(--ord-on-solid); }
.rv-seg label.is-done:has(input:checked),
.rv-seg label.is-pub:has(input:checked) { border-color: var(--ord-tint-green-fg); background: var(--ord-solid-green); color: var(--ord-on-solid); }
.rv-seg label.is-hide:has(input:checked) { border-color: var(--ord-tint-red-fg); background: var(--ord-badge); color: var(--ord-on-solid); }

@media (max-width: 640px) {
  .rvd-cust-rt { margin-left: 0; flex-basis: 100%; }
  .rvd-cust-rt .rvd-btn-out { width: 100%; justify-content: center; }
  .rvd-kv { grid-template-columns: 1fr; gap: 2px; }
  .rvd-kv .rvd-k { padding-top: 8px; }
  .rvd-media { grid-template-columns: repeat(3, 1fr); }
  .rvd-rrow .rvd-bar { display: none; }
}

/* 미디어 개별 노출 제외 (2026-08-27) — 모달에는 전부 보이고 체크로 랜딩 노출만 정한다 */
.rvd-mitem { position: relative; }
.rvd-mitem > a { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--ord-tooltip-bg); position: relative; }
.rvd-mitem.is-off > a { opacity: .38; filter: grayscale(1); }
.rvd-mflag { position: absolute; left: 6px; top: 6px; background: var(--ord-solid-red); color: var(--ord-on-solid); font-size: 10px; font-weight: 800; border-radius: 999px; padding: 2px 7px; }
.rvd-mtoggle { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--ord-text-3); cursor: pointer; }
.rvd-mtoggle input { width: 14px; height: 14px; accent-color: var(--ord-accent); cursor: pointer; }
.rvd-mitem:not(.is-off) .rvd-mtoggle { color: var(--ord-accent); }
.rvd-mhint { margin-top: 10px; font-size: 11.5px; color: var(--ord-text-4); background: var(--ord-surface-2); border: 1px solid var(--ord-line-soft); border-radius: 8px; padding: 8px 10px; line-height: 1.6; }
.rvd-mhint b { color: var(--ord-text-2); }