/* =========================================
   Reviews UI — CLEAN FINAL (scoped to #tab-3)
   다른 스타일과 충돌 없도록 전부 범위 제한
   ========================================= */
#tab-3 {
  --rv-bg: #fff;
  --rv-border: #e9edf3;
  --rv-muted: #6b7280;
  --rv-text: #111827;
  --rv-primary: #2563eb;   /* 필요시 사이트 포인트 컬러로 변경 */
  --rv-star: #f8b400;
  --rv-shadow: 0 6px 18px rgba(17,24,39,.06);
  --rv-radius: 14px;
  --rv-gap: 14px;
  color: var(--rv-text);
}

#tab-3 .rv-head{
  display:flex; align-items:center; justify-content:space-between;
  margin: 4px 0 12px;
}
#tab-3 .rv-title{ font-size:18px; font-weight:700; display:flex; align-items:center; gap:6px; }
#tab-3 .rv-title i{ color:var(--rv-star); }

/* 버튼(이 탭 안에서만) */
#tab-3 .btn{
  -webkit-appearance:none; appearance:none;
  border:1px solid var(--rv-border);
  background:#fff; color:var(--rv-text);
  padding:8px 12px; border-radius:10px; font-size:14px; line-height:1; cursor:pointer;
  transition:all .15s ease;
}
#tab-3 .btn.primary{ background:var(--rv-primary); border-color:var(--rv-primary); color:#fff; }
#tab-3 .btn.ghost { background:#f8fafc; }
#tab-3 .btn:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(37,99,235,.08); }

/* ===== 요약 카드 ===== */
#tab-3 .review-summary{
  background:var(--rv-bg); border:1px solid var(--rv-border);
  border-radius:var(--rv-radius); box-shadow:var(--rv-shadow);
  padding:16px; margin: 6px 0 18px;
}

#tab-3 .rating-overview{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;     justify-content: center;
}
#tab-3 .rating-number{
  font-size:40px; font-weight:800; letter-spacing:-0.02em;
  padding:6px 10px; border-radius:10px; min-width:74px; text-align:center;
}
#tab-3 .stars-display .star{ font-size:18px; }
#tab-3 .rating-count{ color:var(--rv-muted); font-size:13px; }

/* 별 공통 */
#tab-3 .star{ color:#d1d5db; }
#tab-3 .star.on{ color:var(--rv-star); }

/* 분포 바 */
#tab-3 .rating-bars{ margin-top:10px; display:grid; gap:6px; }
#tab-3 .rating-bars .bar-row{ display:flex; align-items:center; gap:10px; }
#tab-3 .rating-bars .lab{ width:16px; text-align:right; color:var(--rv-muted); font-size:12px; }
#tab-3 .rating-bars .bar{ flex:1; height:8px; background:#eef2f7; border-radius:999px; overflow:hidden; }
#tab-3 .rating-bars .bar i{ display:block; height:100%; background:var(--rv-star); }

/* ===== 리스트 ===== */
#tab-3 .review-list{
  display:grid; gap:16px;
}
#tab-3 .rv-item{
  background:#fff; border:1px solid var(--rv-border);
  border-radius:var(--rv-radius); box-shadow:var(--rv-shadow);
  padding:14px;
}
#tab-3 .rv-hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
#tab-3 .rv-name{ font-weight:700; }
#tab-3 .rv-time{ color:var(--rv-muted); font-size:12px; }
#tab-3 .rv-rating{ margin:2px 0 6px; }
#tab-3 .rv-rating .star{ font-size:16px; }
#tab-3 .rv-content{ margin-top:6px; line-height:1.6; word-break:break-word; }
#tab-3 .rv-thumb{ display:block; width:100%; max-height:280px; object-fit:cover;
  border-radius:12px; margin-top:10px; border:1px solid var(--rv-border); background:#f8fafc; }

/* 카드 하단 */
#tab-3 .rv-ft{ display:flex; align-items:center; gap:10px; margin-top:10px; }
#tab-3 .rv-ft .sp{ flex:1; }
#tab-3 .btn-like{ background:#f8fafc; }
#tab-3 .btn.danger{ border-color:#f4c7c7; color:#b00020; background:#fff5f5; }

/* ===== 더보기 버튼 ===== */
#tab-3 #rv-load-more{ display:block; margin:10px auto 0; }

/* ===== 작성/수정 폼 ===== */
/* ================================
   rv-form — CLEAN CARD STYLING
   (기존 #tab-3 범위 안에서만 적용)
   ================================ */

/* 폼 컨테이너를 카드처럼 중앙 정렬 */
#tab-3 #rv-form{
  max-width: 760px;             /* 너무 넓지 않게 */
  margin: 24px auto 8px;        /* 상하 간격 + 가운데 정렬 */
  padding: 18px 16px;
  background:#fff;
  border:1px solid var(--rv-border);
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow);
  display: grid;
  gap: 14px;
}

/* 상단 제목(테마 수정 없이 CSS로만 렌더) */
#tab-3 #rv-form::before{
  content: "✍️ 리뷰 작성";
  display: block;
  font-weight: 800;
  font-size: 16px;
  color: var(--rv-text);
  margin-bottom: 4px;
}

/* 레이블 & 컨트롤 기본 정리 */
#tab-3 #rv-form label{
  display: block;
  font-size: 13px;
  color:#374151;
  margin-bottom: 6px;
}
#tab-3 #rv-form input[type="number"],
#tab-3 #rv-form input[type="text"],
#tab-3 #rv-form textarea,
#tab-3 #rv-form input[type="file"]{
  width: 100%;
  box-sizing: border-box;
  border:1px solid var(--rv-border);
  background:#fff;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
#tab-3 #rv-form input[type="number"]:focus,
#tab-3 #rv-form input[type="text"]:focus,
#tab-3 #rv-form textarea:focus{
  border-color: var(--rv-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* 별점/파일은 라인 압축, 내용은 넓게 */
#tab-3 #rv-rating{ max-width: 140px; }
#tab-3 #rv-content{ min-height: 130px; resize: vertical; }

/* 제출 버튼 정렬 */
#tab-3 #rv-form .btn.primary{
  justify-self: end;
  width: 160px;
}

/* 폼 위/아래와 주변 요소 간 간격도 확보 */
#tab-3 .review-summary{ margin-bottom: 16px; }
#tab-3 .review-list{ margin-top: 10px; }

/* 반응형: 태블릿 이상에서는 2열로 조금 더 타이트하게 */
@media (min-width: 680px){
  #tab-3 #rv-form{
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row dense;
  }
  /* 라벨+컨트롤을 묶지 못하니 타입으로 배치 힌트 */
  #tab-3 #rv-form label[for="rv-rating"],
  #tab-3 #rv-form #rv-rating{ grid-column: 1; }
  #tab-3 #rv-form input[type="file"]{ grid-column: 2; }
  #tab-3 #rv-form label[for="rv-content"],
  #tab-3 #rv-form #rv-content{ grid-column: 1 / span 2; }
  #tab-3 #rv-form .btn.primary{ grid-column: 2; }
}

/* 아주 작은 화면에서는 버튼을 꽉 채움 */
@media (max-width: 480px){
  #tab-3 #rv-form .btn.primary{
    width: 100%;
    justify-self: stretch;
  }
}

/* ============ Modal ============ */
.rv-modal{ position:fixed; inset:0; z-index:9999; display:none; }
.rv-modal.on{ display:block; }
.rv-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.rv-modal__panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(680px, calc(100vw - 32px));
  background:#fff; border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.18);
  overflow:hidden;
}
.rv-modal__hd{ display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; border-bottom:1px solid var(--rv-border,#e9edf3); font-weight:800; }
.rv-modal__close{ appearance:none; border:0; background:transparent; font-size:22px; cursor:pointer; }
.rv-modal__body{ padding:16px; display:grid; gap:14px; }

.rv-field{ display:grid; gap:8px; }
.rv-lab{ font-size:13px; color:#374151; font-weight:600; }
#rv-content{ min-height:140px; resize:vertical; }
#rv-content, #rv-file{
  width:100%; box-sizing:border-box; border:1px solid var(--rv-border,#e9edf3);
  border-radius:10px; padding:10px 12px; font-size:14px;
}
.rv-actions{ display:flex; gap:10px; justify-content:flex-end; padding-top:8px; }

/* ============ Star widget ============ */
.rv-stars{ display:flex; flex-direction:row-reverse; gap:6px; }
.rv-stars .star-btn{
  font-size:28px; line-height:1; cursor:pointer; border:0; background:transparent;
  color:#cbd5e1; transition:transform .08s ease, color .08s ease;
}
.rv-stars .star-btn.is-active,
.rv-stars .star-btn:is(:hover, :focus),
.rv-stars .star-btn:hover ~ .star-btn{ color:#f8b400; }
.rv-stars .star-btn:active{ transform:scale(.96); }

@media (max-width:480px){
  .rv-modal__panel{ width:calc(100vw - 24px); }
  .rv-stars .star-btn{ font-size:26px; }
}

/* 버튼 일관 */
#tab-3 .btn{ width:auto; white-space:nowrap; padding:10px 14px; border-radius:10px; }
#tab-3 .btn.primary{ background:var(--rv-primary,#2563eb); color:#fff; border:1px solid var(--rv-primary,#2563eb); }