/* ===== 공통 (styles.css와 함께 로드) ===== */

/* 공통 페이지 헤더 */
/* ===== 페이지 히어로 — 전 카테고리 단일 컨셉 (#60: 다크 크롬 + 네온민트 오버라인) =====
   구 페이지별 그라데이션(민트/옐로/앰버/그린 제각각) 폐지 — 홈·구독과 같은 프리미엄 다크 톤 통일.
   구조: .eyebrow(브랜드 라벨) → h1 → p(서브카피). 타이포는 clamp 반응형(375~1440) */
.page-hero {
  /* #69-c 프리미엄 다크 에메랄드 ("세련되고 고급스럽게" — 초록 과다 피드백 반영):
     거의 검정 베이스가 세로로 아주 완만하게 딥 포레스트로 깊어지고, 우상단 민트 광원 힌트 + 좌하단
     에메랄드 반사광만 은은하게. 강한 포인트는 .eyebrow 민트와 하단 초미세 헤어라인 하나로 절제.
     (단일 컨셉 유지: 전 카테고리 이 정의 하나만 소비 — 페이지별 변형 금지, 회귀 promo P1 · design26 D1) */
  background:
    radial-gradient(90% 140% at 88% -20%, rgba(0, 255, 166, .10), transparent 55%),
    radial-gradient(120% 170% at -10% 130%, rgba(6, 78, 59, .50), transparent 60%),
    linear-gradient(170deg, #060D0A 0%, #0A1912 55%, #0C221A 100%);
  color: #fff;
  padding: clamp(36px, 5.5vw, 56px) 0 clamp(26px, 4vw, 44px);
  position: relative;
  border-bottom: 1px solid rgba(0, 255, 166, .10);
}
.page-hero::after {
  /* 하단 초미세(1px) 헤어라인 — 중앙에서 티일빛으로 살짝 밝아지는 금속성 광택, 히어로 ↔ 본문 경계 분리 */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 2%, rgba(0, 255, 166, .28) 30%, rgba(94, 234, 212, .40) 50%, rgba(0, 255, 166, .28) 70%, transparent 98%);
  pointer-events: none;
}
.page-hero--plain::after { content: none; }   /* 라이트 변형에는 글로우 없음 */
.page-hero .eyebrow {
  margin: 0 0 10px; color: var(--brand, #00FFA6);
  font-size: 12px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase;
}
.page-hero h1 {
  margin: 0 0 10px; color: #fff;
  font-size: clamp(27px, 3.6vw, 38px); font-weight: 800;
  letter-spacing: -0.022em; line-height: 1.16;
}
.page-hero p { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .78); line-height: 1.7; }
.page-hero p strong { color: #fff; }
.page-hero .accent { color: var(--brand, #00FFA6); }
.page-hero .crumb, .page-hero .crumb strong { color: rgba(255, 255, 255, .62); }
.page-hero .crumb a { color: rgba(255, 255, 255, .78); }
/* 기능 페이지(상세·결제·마이페이지) 변형 — 조용한 라이트 밴드 (콘텐츠가 주인공) */
.page-hero--plain { background: var(--bg-soft); color: inherit; border-bottom: 1px solid var(--border); padding: 26px 0 22px; }
.page-hero--plain h1 { color: inherit; font-size: clamp(24px, 3vw, 32px); }
.page-hero--plain p { color: var(--text-muted); font-size: 15px; }
.page-hero--plain .crumb, .page-hero--plain .crumb strong { color: #3f4b45; }
.page-hero--plain .crumb a { color: var(--primary); }

/* 브레드크럼 */
.crumb {
  font-size: 13px; color: #3f4b45;
  margin-bottom: 12px;
}
.crumb a { color: var(--primary); }

/* ===== Shop 그리드 ===== */
.shop-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  /* 좌우 패딩은 .container(--gutter) 소관 — 여기서 덮으면 페이지마다 여백이 달라진다 */
  padding-block: 24px 40px;
}
.filter {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  position: sticky;
  top: 80px;
  align-self: start;
  max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);
  overflow-y: auto;
}
.filter h3 { margin: 0 0 16px; font-size: 16px; }
.filter-group { margin-bottom: 20px; }
.filter-group h4 { margin: 0 0 8px; font-size: 13px; color: #4b5563; }
.chip {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  margin: 0 4px 6px 0;
  cursor: pointer;
  background: #fff;
  user-select: none;
}
.chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.filter-group label {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  cursor: pointer;
}
.filter-range { width: 100%; }
.filter-range-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }

.shop-main h2 {
  font-size: 18px; margin: 0 0 16px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; min-width: 0;
}
.shop-controls { display: flex; gap: 8px; min-width: 0; }
.shop-controls select { max-width: 100%; min-width: 0; }
@media (max-width: 400px) {
  /* 정렬 select 는 16px 폰트(iOS 확대 차단) 때문에 최소폭이 커진다 → 한 줄 아래로 */
  .shop-main h2 { align-items: flex-start; }
  .shop-main h2 > span:first-child { flex: 1 0 100%; }
  .shop-controls { flex: 1 0 100%; }
  .shop-controls select { width: 100%; }
}
.shop-controls select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* 목록 「더보기」 — 그리드 폭을 꽉 채우는 띠.
   ⚠️ 관리자 `admin.css .load-more` 와 **같은 모양**이다(사용자 지정). 고객 화면은 admin.css 를
      싣지 않아 정의가 두 벌인데, 한쪽만 고치면 같은 버튼이 화면마다 달라진다 — 함께 고친다.
   ⚠️ 글자색은 #047857(--primary) — 밝은 초록 배경 위 500번대 초록은 흰 배경 AA 를 못 넘긴다. */
.load-more {
  display: block;
  width: 100%;
  grid-column: 1 / -1;
  padding: 13px 12px;
  border: 1px solid #a7f3d0;
  border-radius: 10px;
  background: linear-gradient(180deg, #f0fdf9, #e6faf1);
  color: var(--primary);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.load-more:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
@media (prefers-reduced-motion: reduce) { .load-more { transition: none; } }

@media (max-width: 1100px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .shop-grid { grid-template-columns: 1fr; } .shop-wrap { grid-template-columns: 1fr; } .filter { position: static; max-height: none; } }

.shop-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .15s, box-shadow .2s;
  cursor: pointer;
  position: relative;
}
.shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.shop-card__img {
  height: 160px; position: relative;   /* #55 하트·배지 앵커 — 이미지 컨테이너가 기준 */
  display: flex; align-items: center; justify-content: center;
}
.shop-card__img .bike-emoji { font-size: 72px; }
.shop-card__body { padding: 14px; }
.shop-card__brand { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.shop-card__name { margin: 4px 0 4px; font-size: 15px; font-weight: 700; }
.shop-card__spec { margin: 0 0 8px; font-size: 12px; color: var(--text-muted); }
.shop-card__price { font-size: 17px; font-weight: 800; color: var(--primary); }
.shop-card__price small { color: var(--text-muted); font-weight: 500; }
.shop-card__tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 8px;
}
.shop-tag {
  background: #f3f4f6; color: #4b5563;
  font-size: 10px; padding: 2px 8px;
  border-radius: 4px; font-weight: 600;
}
/* 신차 카탈로그는 비교 버튼이 우상단을 쓰므로 하트를 한 칸 아래로 (겹침 방지) */
/* #55 하트는 전 카탈로그 이미지 우하단 고정(styles.css .fav-btn) — 구 top 보정(52px, "어중간한 위치" 사고 원인) 폐지 */

.compare-btn {
  /* #57 우상단은 두 번째 배지 코너 → 비교 버튼은 좋아요 하트 위 세로 스택(우하단) */
  position: absolute;
  top: auto; bottom: 50px; right: 8px;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--border);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  cursor: pointer;
}
.compare-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
@media (max-width: 760px) { .compare-btn { bottom: 42px; right: 6px; } }

/* 비교 토스트 */
.compare-tray {
  position: fixed;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  background: #1a1a1a; color: #fff;
  padding: 14px 20px; border-radius: 14px;
  box-shadow: var(--shadow-lg);
  display: none;
  align-items: center; gap: 14px;
  z-index: 200;
}
.compare-tray.visible { display: flex; }
.compare-tray__items { display: flex; gap: 8px; }
.compare-tray__item {
  background: rgba(255,255,255,0.15);
  padding: 6px 12px; border-radius: 8px;
  font-size: 13px;
}

/* ===== Bike Detail ===== */
.detail-wrap {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  padding-block: 40px;
}
@media (max-width: 900px) { .detail-wrap { grid-template-columns: 1fr; } }

.detail-img {
  height: 360px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background .3s;
}
.detail-img .bike-emoji { font-size: 200px; filter: drop-shadow(0 8px 12px rgba(0,0,0,0.2)); }
.detail-img__brand {
  position: absolute; top: 18px; left: 18px;
  background: rgba(255,255,255,0.9); padding: 6px 14px;
  border-radius: 999px; font-weight: 700; font-size: 13px;
}
/* ── 모델 특장점 요약 (#50 · nav.js renderBikeHighlights) ────────────────
   구 표기: 회색 박스 + 13px 본문 + "태그: a · b · c" 한 줄 → 사양 그리드에 묻혔다.
   개선: 좌측 강조 바 + 라벨 + 리드 문장(15px/1.75) + 태그 칩 분리. */
.hl-card {
  margin-top: 14px;
  padding: 15px 17px;
  background: linear-gradient(180deg, #F0FDF4 0%, #FAFFFB 100%);
  border: 1px solid #D1FAE5;
  border-inline-start: 3px solid var(--primary);
  border-radius: 12px;
}
.hl-card__head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--primary);
  margin-bottom: 8px;
}
.hl-card__head .ff-ic { flex-shrink: 0; }
.hl-lead {
  margin: 0;
  font-size: 15px; line-height: 1.75; font-weight: 600;
  color: #0f2e22;
  letter-spacing: -.2px;
}
.hl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.hl-tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #A7F3D0;
  border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #047857;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .hl-card { padding: 13px 14px; }
  .hl-lead { font-size: 14.5px; line-height: 1.7; }
}

/* 선택된 옵션명 — 제목 옆 인라인 표기 (구 갤러리 오버레이 대체 · #50)
   오버레이는 컨테이너 기준이 어긋나 썸네일 위에 떠버렸고 재렌더에도 지워졌다.
   제목 옆 인라인은 위치가 항상 맞고, 재렌더로 값이 갱신된다. */
.picked-opt {
  display: inline-flex; align-items: center; gap: 5px;
  margin-inline-start: 8px;
  font-size: 13px; font-weight: 700; color: var(--primary);
  vertical-align: middle;
}
.picked-opt:empty { display: none; }
.picked-opt__dot {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.14);
  flex-shrink: 0;
}

.color-row { display: flex; gap: 10px; margin: 18px 0; flex-wrap: wrap; }
.color-swatch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  background: #fff;
}
.color-swatch.active { border-color: var(--primary); background: rgba(0,255,166,0.08); }
@media (max-width: 960px) { .color-swatch { min-height: 44px; padding: 8px 16px 8px 8px; font-size: 13px; } }
.color-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border);
}

.detail-title { font-size: 28px; font-weight: 800; margin: 0 0 4px; }
.detail-brand { color: var(--text-muted); font-size: 14px; margin: 0 0 12px; }
.detail-desc { font-size: 15px; color: #374151; line-height: 1.7; }
.spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 24px 0;
}
@media (max-width: 640px) {
  .spec-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .spec-item { padding: 12px 10px; }
  .spec-item--wide { grid-column: 1 / -1; }
}
.spec-item {
  background: var(--bg-soft);
  padding: 14px;
  border-radius: 10px;
  text-align: center;
}
.spec-item strong { display: block; font-size: 18px; font-weight: 800; color: #1a1a1a; }
.spec-item span { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: block; }

.option-list { list-style: none; padding: 0; margin: 16px 0; }
.option-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.option-list label { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; }
.option-list .option-price { font-weight: 700; color: var(--primary); }
.option-list .included { font-size: 11px; color: var(--text-muted); }

/* Quote 위젯 */
.quote-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  position: sticky;
  top: 80px;
  box-shadow: var(--shadow-sm);
}
.quote-card h3 { margin: 0 0 14px; font-size: 18px; }
.quote-row {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px dashed var(--border);
}
.quote-row strong { font-weight: 700; }
.quote-total {
  display: flex; justify-content: space-between;
  padding: 14px 0 4px;
  font-size: 18px; font-weight: 800;
  color: var(--primary);
}
.quote-monthly {
  background: var(--bg-soft);
  padding: 14px;
  border-radius: 10px;
  margin: 14px 0;
  text-align: center;
}
.quote-monthly strong { font-size: 22px; color: var(--primary); }
.quote-card select, .quote-card input {
  width: 100%; padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 10px;
  font-family: inherit;
}

/* ===== Compare ===== */
.compare-table {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 30px 0;
}
.compare-grid {
  display: grid;
  grid-template-columns: 160px repeat(var(--cols, 3), 1fr);
}
.compare-grid > div {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.compare-grid > div:not(:last-child) { border-right: 1px solid var(--border); }
.compare-head { background: var(--bg-soft); font-weight: 700; }
.compare-head .bike-emoji { font-size: 60px; }
.compare-label { background: var(--bg-soft); font-weight: 600; color: #4b5563; }
.compare-best { color: var(--primary); font-weight: 800; position: relative; }
.compare-best::after {
  content: '👑'; margin-left: 4px;
}

/* ===== Insurance ===== */
.insurance-wrap {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  padding: 40px 0;
}
@media (max-width: 900px) { .insurance-wrap { grid-template-columns: 1fr; } }

.profile-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  position: sticky; top: 80px;
  align-self: start;
}
.profile-card h3 { margin: 0 0 14px; font-size: 16px; }
.profile-card .field { margin-bottom: 12px; }

.insurance-list {
  display: grid;
  gap: 14px;
}
.insurer-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 18px;
  align-items: center;
  transition: box-shadow .2s, border-color .2s;
}
.insurer-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.insurer-card.best { border-color: var(--primary); border-width: 2px; box-shadow: 0 0 0 3px rgba(0,255,166,0.1); }
.insurer-logo {
  width: 60px; height: 60px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}
.insurer-info h4 { margin: 0 0 4px; font-size: 16px; }
.insurer-info p { margin: 0; font-size: 12px; color: var(--text-muted); }
.insurer-meta {
  display: flex; gap: 10px;
  margin-top: 6px;
  font-size: 11px;
  color: #4b5563;
}
.insurer-meta span { background: #f3f4f6; padding: 2px 8px; border-radius: 4px; }
.insurer-price { text-align: right; }
.insurer-price strong { display: block; font-size: 22px; color: var(--primary); font-weight: 800; }
.insurer-price small { color: var(--text-muted); }
.insurer-price button {
  background: var(--primary); color: #fff;
  padding: 8px 16px; border-radius: 8px;
  font-weight: 700; margin-top: 8px;
  border: none; cursor: pointer;
}
.best-badge {
  position: absolute;
  top: -10px; left: 16px;
  background: var(--primary); color: #fff;
  padding: 4px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.insurer-card { position: relative; }

/* 보험 상세 모달 */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center; justify-content: center;
  z-index: 500;
}
.modal-backdrop.visible { display: flex; }
.modal {
  background: #fff;
  border-radius: var(--radius);
  max-width: 600px;
  width: 90%;
  max-height:80vh;max-height:80dvh;
  overflow-y: auto;
  padding: 28px;
  position: relative;
}
.modal h2 { margin: 0 0 16px; }
.modal .close {
  position: absolute; top: 14px; right: 14px;
  background: none; font-size: 24px; cursor: pointer;
}
.coverage-table { width: 100%; border-collapse: collapse; }
.coverage-table th, .coverage-table td {
  text-align: left; padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.coverage-table th { background: var(--bg-soft); }

/* ===== Checkout ===== */
.checkout-wrap {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  padding: 40px 0;
}
@media (max-width: 900px) { .checkout-wrap { grid-template-columns: 1fr; } }

.checkout-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
}
.checkout-section h3 {
  margin: 0 0 14px;
  font-size: 17px;
  display: flex; align-items: center; gap: 8px;
}
.checkout-section h3 .num {
  width: 26px; height: 26px;
  background: var(--primary); color: #fff;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}

.method-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.method-row button {
  padding: 14px 6px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.method-row button.active {
  border-color: var(--primary);
  background: rgba(0,255,166,0.06);
}

.summary-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  position: sticky; top: 80px;
  align-self: start;
}
.summary-line {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px dashed var(--border);
}
.summary-line.total {
  font-size: 20px; font-weight: 800; color: var(--primary);
  border-bottom: none;
  padding-top: 14px;
}

/* 통합 알림 */
.alert {
  background: #DCFCE7;
  border-left: 4px solid var(--primary);
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 14px;
  margin: 16px 0;
}
.alert-warn {
  background: #fef3c7;
  border-left-color: #b45309;
}

/* 작은 라벨 */
.small-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* ===== 영수증 인쇄 ===== */
.receipt-print { display: none; }
.receipt-header { text-align: center; padding: 14px 0; border-bottom: 2px solid #1a1a1a; margin-bottom: 14px; }
.receipt-header h1 { margin: 0; font-size: 22px; }
.receipt-header p { margin: 4px 0; font-size: 11px; color: #4b5563; }
.receipt-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 13px; }
.receipt-table th { text-align: left; padding: 8px 12px; background: #fafbfc; border: 1px solid #e8eaed; width: 30%; font-weight: 600; }
.receipt-table td { padding: 8px 12px; border: 1px solid #e8eaed; }
.receipt-foot { text-align: center; padding-top: 14px; border-top: 1px dashed #e5e7eb; font-size: 11px; color: #4b5563; }

@media print {
  body.print-receipt-mode > *:not(.receipt-print) { display: none !important; }
  body.print-receipt-mode .receipt-print {
    display: block !important;
    max-width: 600px;
    margin: 20px auto;
    padding: 28px;
    background: #fff;
    page-break-inside: avoid;
  }
  body.print-receipt-mode .receipt-table { page-break-inside: avoid; }
  @page { margin: 1cm; }
}

/* ============================================================
   상품평 공용 위젯 (reviews.js — gear/bike/used 상세 공통)
   ============================================================ */
.rv-stars { display: inline-flex; line-height: 0; }
.rv-summary { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 16px; }
.rv-score { text-align: center; }
.rv-score-num { font-size: 46px; font-weight: 800; color: var(--primary-deep); line-height: 1.05; }
.rv-score-count { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.rv-score-photo { font-size: 12px; color: var(--primary); font-weight: 700; margin-top: 4px; }
.rv-dist-row { display: grid; grid-template-columns: 32px 1fr 40px; align-items: center; gap: 10px; margin: 5px 0; }
.rv-dist-label { font-size: 12px; color: var(--text-muted); }
.rv-dist-track { height: 8px; background: #E5E7EB; border-radius: 999px; overflow: hidden; }
.rv-dist-fill { display: block; height: 100%; background: #b45309; border-radius: 999px; }
.rv-dist-pct { font-size: 12px; color: var(--text-muted); text-align: right; }
.rv-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rv-controls { display: flex; align-items: center; gap: 12px; }
.rv-photo-only { font-size: 13px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.rv-sort { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 13px; background: #fff; }
.rv-list { display: flex; flex-direction: column; gap: 0; }
.rv-item { padding: 18px 2px; border-top: 1px solid var(--border); }
.rv-item:first-child { border-top: none; }
.rv-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-author { font-size: 13px; }
.rv-badge { font-size: 11px; font-weight: 700; color: var(--primary); background: var(--bg-soft); padding: 2px 8px; border-radius: 999px; }
.rv-date { font-size: 12px; color: var(--text-meta); margin-left: auto; }
.rv-opt { font-size: 12px; color: var(--text-muted); background: var(--bg-soft); display: inline-block; padding: 3px 9px; border-radius: 6px; margin: 8px 0 0; }
.rv-title { font-weight: 700; font-size: 14.5px; margin: 8px 0 4px; }
.rv-body { font-size: 14px; color: var(--text); line-height: 1.65; margin: 6px 0 0; white-space: pre-wrap; }
.rv-photos { display: flex; gap: 8px; margin: 10px 0 0; flex-wrap: wrap; }
.rv-photo { width: 64px; height: 64px; border-radius: 10px; background-size: cover; background-position: center; border: 1px solid var(--border); }
.rv-photo--ph { display: flex; align-items: center; justify-content: center; font-size: 24px; background: linear-gradient(135deg, #e0f2fe, #dbeafe); }
.rv-helpful { margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: all .15s; min-height: 36px; }
.rv-helpful:hover { border-color: var(--primary); color: var(--primary); background: var(--bg-soft); }
.rv-helpful--on { border-color: var(--primary); color: var(--primary); background: var(--bg-soft); cursor: default; }
.rv-helpful b { color: var(--primary); }
.rv-reply { margin: 12px 0 0 14px; padding: 12px 14px; background: var(--bg-soft); border-left: 3px solid var(--primary); border-radius: 0 10px 10px 0; }
.rv-reply strong { font-size: 12.5px; color: var(--primary-deep); }
.rv-reply p { font-size: 13px; color: var(--text); margin: 5px 0 0; line-height: 1.6; }
.rv-empty { text-align: center; color: var(--text-muted); padding: 40px 0; font-size: 14px; }
.rv-modal-bd { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rv-modal { background: #fff; border-radius: 18px; max-width: 460px; width: 100%; padding: 24px; position: relative; max-height:90vh;max-height:90dvh; overflow-y: auto; }
.rv-modal-x { position: absolute; top: 14px; right: 14px; background: var(--bg-soft); border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 15px; }
.rv-flabel { display: block; font-size: 13px; font-weight: 700; margin: 14px 0 6px; }
.rv-finput { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 14px; }
.rv-rate-pick { display: flex; gap: 2px; }
@media (max-width: 600px) {
  .rv-summary { grid-template-columns: 1fr; gap: 16px; text-align: center; }
  .rv-toolbar { flex-direction: column; align-items: stretch; }
  .rv-controls { justify-content: space-between; }
}

/* ===== #89 판매 지점 선택 게이트 (신차 상세) =====
   본사는 플랫폼이라 신차를 직접 팔지 않는다 — 판매 주체(협력사 지점/본사직영)가 정해져야
   판매가·수수료 귀속·탁송 주체가 성립한다. 지점 미선택 상태의 구매 CTA 는 눌리지 않게 잠근다.
   ⚠️ disabled 속성 대신 클래스로 잠근다 — 클릭을 살려 두어야 「지점을 먼저 고르세요」로 안내할 수 있다
   (죽은 버튼처럼 아무 반응 없이 무시하면 이유를 알 수 없다). */
.btn.is-locked { opacity: .5; filter: grayscale(.35); }
.quote-row.is-locked strong { font-weight: 700; }
/* 지점 목록으로 유도했을 때 어디를 보라는 것인지 알려주는 1회 펄스 */
.dealer-flash { animation: dealerFlash 1.1s ease-out 1; border-radius: 12px; }
@keyframes dealerFlash {
  0%   { box-shadow: 0 0 0 0 rgba(4,120,87,.45); }
  60%  { box-shadow: 0 0 0 10px rgba(4,120,87,0); }
  100% { box-shadow: 0 0 0 0 rgba(4,120,87,0); }
}
@media (prefers-reduced-motion: reduce) { .dealer-flash { animation: none; outline: 2px solid var(--primary); } }