@charset "utf-8";
/* ==========================================================================
   rb.BoardFactory — 부품: 리뷰 카드 (.rv-grid · .rv-*)

   리뷰 목록(board bf.review).
   쓰는 곳이 부품을 싣는다 — bf_part('review') (rb.theme/theme.lib.php).
   목업 css 에서 옮긴 규칙이다. 모양을 바꿀 때는 목업과 같이 고친다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   23. 후기 갤러리 — sub.css 에서
   -------------------------------------------------------------------------- */
.rv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
.rv-card { display: block; }
.rv-thumb {
  position: relative; display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--plate);
  border: 1px solid var(--line);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.rv-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .45s; }
:root[data-theme="dark"] .rv-thumb { isolation: isolate; }
:root[data-theme="dark"] .rv-thumb img { mix-blend-mode: var(--plate-blend); }
.rv-card:hover .rv-thumb { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--sky-b1); }
.rv-card:hover .rv-thumb img { transform: scale(1.05); }
.rv-body { display: block; padding-top: 12px; }
.rv-score {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font-en);
  font-size: 13px; font-weight: 700; color: var(--amber);
}
.rv-score .ico { width: 14px; height: 14px; fill: var(--amber); stroke: var(--amber); }
.rv-body strong {
  display: block; margin-top: 5px;
  font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ink-900);
}
.rv-card:hover .rv-body strong { color: var(--sky-t3); }
.rv-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 9px;
  font-size: 12.5px; color: var(--ink-400);
}
.rv-meta em { color: var(--ink-500); font-weight: 500; }
.rv-meta i { display: inline-flex; align-items: center; gap: 3px; }
.rv-meta .ico { width: 13px; height: 13px; }

/* --------------------------------------------------------------------------
   24. 반응형 — sub.css 에서
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .rv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* ----- 후기 갤러리 ----- */
  .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .rv-body strong { font-size: 14px; }
}
@media (max-width: 600px) {
  .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}