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

.rvd-body { padding: 16px; background: #f6f9fc; }

/* 섹션 카드 */
.rvd-card { background: #fff; border: 1px solid #dbe6f0; 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: #f3f7fb; border-bottom: 1px solid #e8eef4; }
.rvd-band::before { content: ""; width: 4px; height: 14px; background: #3e6187; border-radius: 2px; flex-shrink: 0; }
.rvd-band .rvd-t { font-size: 12px; font-weight: 800; color: #3e6187; }
.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: #fff; border: 1px solid #dbe6f0; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; color: #475569; 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: #0f172a; 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: #7c8ba1; background: #f3f7fb; border: 1px solid #dbe6f0; border-radius: 999px; padding: 1px 7px; }
.rvd-tel a { color: #1d4ed8; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; }
.rvd-tel a:hover { text-decoration: underline; }
.rvd-tel .rvd-cp { border: 1px solid #dbe6f0; background: #fff; border-radius: 6px; width: 22px; height: 22px; font-size: 11px; color: #7c8ba1; cursor: pointer; line-height: 1; }
.rvd-tel .rvd-cp:hover { background: #f3f7fb; color: #3e6187; }
.rvd-cust-rt { margin-left: auto; }
.rvd-btn-out { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: #fff; color: #3e6187; border: 1px solid #c4d3e2; border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; }
.rvd-btn-out:hover { background: #f3f7fb; }

/* 라벨:값 그리드 */
.rvd-kv { display: grid; grid-template-columns: 76px 1fr; gap: 5px 10px; margin-top: 13px; padding-top: 12px; border-top: 1px dashed #e8eef4; font-size: 12.5px; }
.rvd-kv .rvd-k { color: #7c8ba1; font-weight: 700; font-size: 11.5px; padding-top: 2px; }
.rvd-kv .rvd-v { color: #334155; min-width: 0; }
.rvd-kv .rvd-v .rvd-path { color: #94a3b8; font-size: 11.5px; word-break: break-word; }
.rvd-kv .rvd-v .rvd-leaf { font-weight: 700; color: #0f172a; word-break: break-word; }
.rvd-sub { color: #94a3b8; font-size: 11.5px; }

/* 만족도 */
.rvd-avg { display: flex; align-items: baseline; gap: 7px; }
.rvd-avg .rvd-stars { color: #f59e0b; letter-spacing: 2px; font-size: 15px; }
.rvd-avg .rvd-n { font-size: 17px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
.rvd-off { color: #e5e7eb; }
.rvd-rrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f5f7fa; }
.rvd-rrow:last-child { border-bottom: none; }
.rvd-rrow .rvd-lb { font-size: 13px; color: #475569; font-weight: 600; flex: 1; }
.rvd-rrow .rvd-bar { width: 84px; height: 5px; border-radius: 999px; background: #eef2f7; overflow: hidden; flex-shrink: 0; }
.rvd-rrow .rvd-bar i { display: block; height: 100%; background: #f59e0b; border-radius: 999px; }
.rvd-rrow .rvd-sv { color: #f59e0b; letter-spacing: 2px; font-size: 15px; }
.rvd-rrow .rvd-num { font-size: 11.5px; font-weight: 800; color: #64748b; width: 22px; text-align: right; font-variant-numeric: tabular-nums; }

/* 후기 내용 */
.rvd-quote { background: #fbfdff; border: 1px solid #e8eef4; border-left: 3px solid #3e6187; border-radius: 0 10px 10px 0; padding: 13px 14px; font-size: 14px; color: #334155; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.rvd-quote.is-empty { color: #cbd5e1; }
.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: #0f172a; 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: #fff; 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: #3e6187; margin-bottom: 6px; }
.rv-lbl .rvd-hint { color: #94a3b8; font-weight: 600; font-size: 11px; margin-left: 6px; }
.rvd-input { width: 100%; padding: 9px 11px; border: 1.5px solid #c4d3e2; border-radius: 8px; font-size: 13.5px; background: #fcfdfe; color: #0f172a; font-family: inherit; }
.rvd-input:focus { outline: none; border-color: #3e6187; box-shadow: 0 0 0 3px #3e618722; }
.rv-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rv-seg label { padding: 7px 15px; border: 1px solid #c4d3e2; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #64748b; cursor: pointer; background: #fff; }
.rv-seg label input { display: none; }
.rv-seg label:has(input:checked) { border-color: #3e6187; background: #3e6187; color: #fff; }
.rv-seg label.is-done:has(input:checked),
.rv-seg label.is-pub:has(input:checked) { border-color: #16a34a; background: #16a34a; color: #fff; }
.rv-seg label.is-hide:has(input:checked) { border-color: #dc2626; background: #dc2626; color: #fff; }

@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: #0f172a; position: relative; }
.rvd-mitem.is-off > a { opacity: .38; filter: grayscale(1); }
.rvd-mflag { position: absolute; left: 6px; top: 6px; background: #b91c1c; color: #fff; 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: #64748b; cursor: pointer; }
.rvd-mtoggle input { width: 14px; height: 14px; accent-color: #3e6187; cursor: pointer; }
.rvd-mitem:not(.is-off) .rvd-mtoggle { color: #3e6187; }
.rvd-mhint { margin-top: 10px; font-size: 11.5px; color: #7c8ba1; background: #f6f9fc; border: 1px solid #e8eef4; border-radius: 8px; padding: 8px 10px; line-height: 1.6; }
.rvd-mhint b { color: #475569; }