@charset "utf-8";
/* ==========================================================================
   rb.BoardFactory — 부품: 상품 카드 (.shop-list · .shop-card · .shop-*)

   콘텐츠샵 화면 · 메인 '콘텐츠샵 인기 상품'(shop main.60) · 목록 · 관련상품 · 찜 목록.
   쓰는 곳이 부품을 싣는다 — bf_part('shop') (rb.theme/theme.lib.php).
   목업 css 에서 옮긴 규칙이다. 모양을 바꿀 때는 목업과 같이 고친다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   10. 콘텐츠샵 — main.css 에서
   -------------------------------------------------------------------------- */
.shop-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.shop-card { display: block; }
.shop-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;
}
.shop-thumb img {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  transition: transform .45s ease;
}
:root[data-theme="dark"] .shop-thumb { isolation: isolate; }
:root[data-theme="dark"] .shop-thumb img { mix-blend-mode: var(--plate-blend); }
.shop-card:hover .shop-thumb { transform: translateY(-4px); box-shadow: var(--sh-md); }
.shop-card:hover .shop-thumb img { transform: scale(1.06); }
.shop-flag {
  position: absolute; left: 10px; top: 10px;
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 9px;
  border-radius: var(--r-full);
  background: var(--point); color: #fff;
  font-family: var(--font-en);
  font-size: 11px; font-weight: 700;
}
.shop-flag.flag-sold { background: var(--ink-700); font-family: inherit; }
/* --ink-700 은 다크에서 밝은 회색으로 뒤집혀 흰 글자가 묻힌다 */
:root[data-theme="dark"] .shop-flag.flag-sold { background: #4A5C6B; }
.shop-info { display: block; padding-top: 12px; }
.shop-info em { display: block; font-size: 12px; color: var(--sky-t1); font-weight: 600; }
.shop-info strong {
  display: block; margin-top: 4px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shop-card:hover .shop-info strong { color: var(--sky-t2); }
.shop-price { display: flex; align-items: baseline; gap: 7px; margin-top: 7px; }
.shop-price .was { font-size: 12.5px; color: var(--ink-300); text-decoration: line-through; }
.shop-price b { font-size: 17px; font-weight: 700; color: var(--ink-900); }
.shop-price small { margin-left: 1px; font-size: 12px; font-weight: 500; color: var(--ink-500); }

/* --------------------------------------------------------------------------
   16. 반응형 — main.css 에서
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .shop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
}

/* --------------------------------------------------------------------------
   14. 자료실 · 샵 목록 — sub.css 에서
   -------------------------------------------------------------------------- */
.shop-list-4 { gap: 32px 20px; }

/* --------------------------------------------------------------------------
   24. 반응형 — sub.css 에서
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* 샵 */
  .shop-list-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
}