/* Public FIT dashboard review section, source 2026-10-08. */
.tcd-rv-wrap {
  font-family: 'Pretendard Variable', 'Pretendard', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  max-width: 1160px;
  margin: 0 auto;
  padding: 80px 40px;
}

/* ── Section header (badge + title + subtitle) ─────────── */
.tcd-rv-section-header {
  text-align: center;
  margin-bottom: 14px; /* 2026-09-01: 40→22→14 — 리뷰 헤더 세로 다이어트 */
}

.tcd-rv-badge {
  display: inline-block;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #d1d5db;
  border-radius: 9999px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}

.tcd-rv-title {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.tcd-rv-subtitle {
  font-size: clamp(14px, 2vw, 16px);
  color: #9ca3af;
  font-weight: 400;
  margin: 0;
}

/* ── Grid: column variants ─────────────────────────────── */
.tcd-rv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px; /* 2026-09-01: 정렬줄과 카드 사이 간격 */
}

.tcd-rv-cols-2 .tcd-rv-grid { grid-template-columns: repeat(2, 1fr); }
.tcd-rv-cols-3 .tcd-rv-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1024px) {
  .tcd-rv-wrap { padding: 64px 24px; }
  .tcd-rv-cols-3 .tcd-rv-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .tcd-rv-wrap { padding: 48px 16px; }
  .tcd-rv-cols-2 .tcd-rv-grid,
  .tcd-rv-cols-3 .tcd-rv-grid { grid-template-columns: 1fr; }
}

/* ── Card (light theme — default) ──────────────────────── */
.tcd-rv-card {
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Review content: text + side thumbnail */
.tcd-rv-content {
  display: flex;
  gap: 14px;
}

.tcd-rv-content .tcd-rv-text {
  flex: 1;
  margin: 0;
}

.tcd-rv-thumb {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 10px;
  overflow: hidden;
  align-self: flex-start;
}

.tcd-rv-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stars */
.tcd-rv-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 10px;
}

.tcd-rv-star {
  font-size: 13px;
  color: #d4d4d8;
  line-height: 1;
}

.tcd-rv-star.on {
  color: #f59e0b;
}

/* Author attribution */
.tcd-rv-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
}
.tcd-rv-author {
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
}
.tcd-rv-date {
  font-size: 12px;
  color: #a1a1aa;
  font-weight: 400;
}

/* Review text */
.tcd-rv-text {
  font-size: 14px;
  color: #3f3f46;
  line-height: 1.7;
  margin: 0;
}

/* ── Dark theme ────────────────────────────────────────── */
.tcd-rv-wrap[data-theme="dark"] {
  background: #1a1a1a;
  /* breakout: escape parent max-width to fill viewport */
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  max-width: none;
  border-radius: 0;
}

.tcd-rv-wrap[data-theme="dark"] .tcd-rv-section-header,
.tcd-rv-wrap[data-theme="dark"] .tcd-rv-grid,
.tcd-rv-wrap[data-theme="dark"] .tcd-rv-load-more-wrap {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}

/* 2026-09-01: 다크 밴드 위 카드 = 크림 솔리드 (전 페이지 통일, 시안 cards.html ③) */
.tcd-rv-wrap[data-theme="dark"] .tcd-rv-card {
  background: #FAF4E6;
  color: #222;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 20px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.10);
}

.tcd-rv-wrap[data-theme="dark"] .tcd-rv-author {
  color: #333;
  font-weight: 700;
}
.tcd-rv-wrap[data-theme="dark"] .tcd-rv-date {
  color: #8a8a8a;
}

/* ⚠️ .tcd-rv-card 스코프 필수 — 크림 카드용 별색이 다크 밴드 위 평균 별(.tcd-rv-avg-stars)을 오염시키지 않게 */
.tcd-rv-wrap[data-theme="dark"] .tcd-rv-card .tcd-rv-star {
  color: #cfc9b6;
}

.tcd-rv-wrap[data-theme="dark"] .tcd-rv-card .tcd-rv-star.on {
  color: #f59e0b;
}

.tcd-rv-wrap[data-theme="dark"] .tcd-rv-text {
  color: #222;
}

@media (max-width: 768px) {
  /* 상하 56px = 이 페이지 다른 섹션들의 모바일 여백 최빈/중앙값 (2026-09-01 실측 27개 섹션).
     좌우 16px 는 사이트 모바일 좌우 규칙(최빈 16px, 33회)과 일치 — 유지. */
  .tcd-rv-wrap[data-theme="dark"] {
    padding: 56px 16px;
  }
}

/* ── Load more ─────────────────────────────────────────── */
.tcd-rv-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.tcd-rv-load-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 32px;
  border: 1px solid #e4e4e7;
  border-radius: 9999px;
  background: transparent;
  color: #71717a;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
  cursor: pointer;
}

.tcd-rv-load-more svg {
  width: 15px;
  height: 15px;
}

/* Dark theme load more */
.tcd-rv-wrap[data-theme="dark"] .tcd-rv-load-more {
  border-color: rgba(255,255,255,0.2);
  color: #d1d5db;
}

.tcd-rv-load-more:disabled,
.tcd-rv-load-more.tcd-rv-loading {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Light theme header overrides */
.tcd-rv-wrap[data-theme="light"] .tcd-rv-badge {
  background: #f4f4f5;
  border-color: #e4e4e7;
  color: #71717a;
}

.tcd-rv-wrap[data-theme="light"] .tcd-rv-title {
  color: #09090b;
}

.tcd-rv-wrap[data-theme="light"] .tcd-rv-subtitle {
  color: #71717a;
}

/* ══════════════════════════════════════════════════════════
   Rating stats + sort  (2026-09-01, 시안 cards.html ③ — 380px 확정.
   같은 폴더 final.html 의 520px 은 구안이니 복붙 금지)
   ══════════════════════════════════════════════════════════ */

.tcd-rv-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 260px; /* 2026-09-01: 380→300→260 컴팩트 2차 (탈잉 스케일, 막대 ~108px) */
  margin: 0 auto 6px;
}
.tcd-rv-avg { text-align: center; flex: none; }
.tcd-rv-avg-num {
  display: block;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #09090b; /* 색 미지정 시 페이지 본문색 상속됨 — 반드시 명시 */
}
.tcd-rv-wrap[data-theme="dark"] .tcd-rv-avg-num { color: #fff; }

/* 평균 별 — 카드용 .tcd-rv-stars/.tcd-rv-star 재사용 금지
   (13px 고정·flex 좌측정렬·margin-bottom 10px 이 그대로 먹어서 깨짐) */
.tcd-rv-avg-stars {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1;
}
.tcd-rv-avg-stars .s { color: rgba(0,0,0,.15); }
.tcd-rv-avg-stars .s.on { color: #f59e0b; }
.tcd-rv-wrap[data-theme="dark"] .tcd-rv-avg-stars .s { color: rgba(255,255,255,.22); }
.tcd-rv-wrap[data-theme="dark"] .tcd-rv-avg-stars .s.on { color: #f59e0b; }

.tcd-rv-dist { flex: 1; display: grid; gap: 3px; }
.tcd-rv-dist-row {
  display: grid;
  grid-template-columns: 24px 1fr 14px;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  line-height: 1.2; /* 테마 전역 line-height(1.77) 상속 차단 — 없으면 행 20px 로 부풀어 분포가 세로로 퍼짐 (2026-09-01 라이브 실측) */
}
.tcd-rv-dist-row .l,
.tcd-rv-dist-row .n { color: #6b7280; }
.tcd-rv-wrap[data-theme="dark"] .tcd-rv-dist-row .l,
.tcd-rv-wrap[data-theme="dark"] .tcd-rv-dist-row .n { color: #9ca3af; }
.tcd-rv-dist-row .n { text-align: right; font-variant-numeric: tabular-nums; }
.tcd-rv-dist-row .b {
  height: 3px;
  border-radius: 99px;
  background: rgba(0,0,0,.10);
  overflow: hidden;
}
.tcd-rv-wrap[data-theme="dark"] .tcd-rv-dist-row .b { background: rgba(255,255,255,.10); }
.tcd-rv-dist-row .b i {
  display: block;
  height: 100%;
  background: #f59e0b;
  border-radius: 99px;
}
.tcd-rv-dist-row.is-zero .l,
.tcd-rv-dist-row.is-zero .n { opacity: .45; }

/* ── B-2 리뷰 헤더 바 (2026-09-01): [리뷰 N] ─ [평균+분포] ─ [최신순] 탑 정렬, 정렬버튼만 하단 ── */
.tcd-rv-bar {
  max-width: 1160px;
  margin: 0 auto;
  display: grid; /* 3컬럼: 분포를 페이지 정중앙에 고정 — 정렬 라벨 폭이 변해도 안 움직임 (2026-09-01) */
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  column-gap: 28px;
}
.tcd-rv-bar-title {
  font-size: 21px;
  font-weight: 800;
  color: #09090b;
  margin: 0;
  flex: none;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.tcd-rv-wrap[data-theme="dark"] .tcd-rv-bar-title { color: #fff; }
.tcd-rv-bar-title .cnt { color: #f59e0b; margin-left: 6px; }
/* 파서용 subtitle — 시각적 숨김, DOM/textContent 유지 (display:none 금지 아님: 파서는 textContent 라 무관하나 sr 접근성 위해 clip) */
.tcd-rv-bar .tcd-rv-subtitle {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: 0; padding: 0;
  white-space: nowrap;
}
.tcd-rv-bar .tcd-rv-stats {
  margin: 0;
  flex: none;
  max-width: none;
  gap: 18px;
  align-items: flex-start;
}
.tcd-rv-bar .tcd-rv-avg-num { font-size: 30px; line-height: 1; }
.tcd-rv-bar .tcd-rv-dist { width: 190px; flex: none; margin-top: 1px; }
.tcd-rv-bar .tcd-rv-sort { justify-self: end; align-self: end; padding: 6px 2px 0; } /* B-2: 카드에 근접, 우측 고정 */
.tcd-rv-bar + .tcd-rv-grid { margin-top: 34px; }

@media (max-width: 768px) {
  /* 모바일 = 탈잉 3줄 구조: [리뷰 N] / [평균+분포(센터·짧은 막대)] / [최신순(우측, 카드 근접)] */
  .tcd-rv-bar { display: flex; flex-wrap: wrap; gap: 22px 20px; align-items: center; }
  .tcd-rv-bar-title { font-size: 16px; flex-basis: 100%; }
  .tcd-rv-bar .tcd-rv-stats { order: 2; flex-basis: 100%; justify-content: center; margin: 0; }
  .tcd-rv-bar .tcd-rv-dist { width: auto; flex: none; } /* 막대 92px 고정 — 빈 공간이 여유를 만든다 */
  .tcd-rv-bar .tcd-rv-sort { order: 3; margin-left: auto; align-self: center; padding: 2px; font-size: 14px; }
  .tcd-rv-bar + .tcd-rv-grid { margin-top: 14px; }
}

/* ── Sort toggle: 최신순 ↔ 평점 낮은순 ── */
.tcd-rv-sortline {
  max-width: 1160px;
  margin: 6px auto 0;
  display: flex;
  justify-content: flex-end;
}
.tcd-rv-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #09090b; /* inherit 금지 — 다크 밴드에서 본문색 상속됨 */
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2; /* 테마 상속 차단 */
  cursor: pointer;
  padding: 6px 2px;
}
.tcd-rv-wrap[data-theme="dark"] .tcd-rv-sort { color: #fff; }
.tcd-rv-sort svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  opacity: .75;
}

/* 숨김 카드 (클라이언트 더보기 — 7번째부터) */
.tcd-rv-card.is-hidden { display: none; }

/* no-hover 원칙 하의 표준 피드백 — 즉시 상태 변화(트랜지션 없음), 장식 모션 아님 */
.tcd-rv-load-more:active,
.tcd-rv-sort:active { opacity: .6; }
.tcd-rv-load-more:focus-visible,
.tcd-rv-sort:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (max-width: 768px) {
  /* 모바일 = 탈잉 실측 이식(2026-09-01): 평균 28px·막대 92×4px·라벨 11px·행피치 18px.
     여유의 비결은 큰 요소가 아니라 '짧은 막대 + 빈 공간' */
  .tcd-rv-stats { gap: 48px; }
  .tcd-rv-avg-num,
  .tcd-rv-bar .tcd-rv-avg-num { font-size: 28px; } /* 바 규칙(30px)이 미디어를 이기던 우선순위 보정 */
  .tcd-rv-avg-stars { font-size: 14px; }
  .tcd-rv-dist { gap: 5px; }
  .tcd-rv-dist-row { grid-template-columns: 24px 92px 18px; gap: 8px; font-size: 11px; }
  .tcd-rv-dist-row .b { height: 4px; }
}