/* 상품 목록 카드 — shop-products.js 가 그리는 자리 (ContentsDoc/14 §5 Track B).
   🔴 색은 역할 변수만 쓴다. (brands/<슬러그>/assets/theme.config.js 가 값의 단일 소스) */

.shop-card{
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: var(--r-md, 12px);
  overflow: hidden;
  background: var(--surface, #fff);
}
.shop-card-thumb{
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-2, #f0f0f0);
  overflow: hidden;
}
.shop-card-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.shop-badge{
  position: absolute; top: 8px; left: 8px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: var(--fg-strong, #111); color: var(--bg, #fff);
}
.shop-badge-soldout{ background: var(--muted, #666); }

.shop-card-body{ padding: 12px 14px 16px; }
.shop-card-cat{ margin: 0 0 4px; font-size: 12px; color: var(--muted, #666); }
.shop-card-name{
  margin: 0 0 8px; font-size: 15px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* 2026-09-14 자리 규칙 — 자르는 선이 안쪽 여백 끝이라, 여백이 0 이면
     화면 배율이 소수일 때 첫 글자 왼쪽 획이 잘린다(check:editor). */
  padding-left: 2px; margin-left: -2px;
}
.shop-card-price{ display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.shop-discount{ color: var(--accent, #e8600a); font-weight: 700; }
.shop-price{ font-weight: 700;
  /* 🔴 숫자는 줄을 맞춘다 — 자릿수가 바뀌면 세로줄이 어긋나 표가 덜컹거린다 (2026-09-23) */
  font-variant-numeric: tabular-nums;
}
.shop-list-price{ color: var(--muted, #666); text-decoration: line-through; font-size: 13px;
  /* 🔴 숫자는 줄을 맞춘다 — 자릿수가 바뀌면 세로줄이 어긋나 표가 덜컹거린다 (2026-09-23) */
  font-variant-numeric: tabular-nums;
}
.shop-card-meta{ margin-top: 6px; font-size: 12px; color: var(--muted, #666); }

.shop-more{
  display: inline-block; margin-top: 20px;
  padding: 10px 18px; border: 1px solid var(--line, #e5e5e5);
  border-radius: var(--r-sm, 8px); text-decoration: none; color: inherit;
}