/* ========================================
   꿀딜 상점 (Honeydeal Shop) - 가로 커버 피드
   variables.css 토큰 기반, 단일 컬럼 배너 리스트
   ======================================== */

/* ===== 페이지 헤더 ===== */
.shop-head {
  padding: var(--spacing-xl) 0 var(--spacing-lg);
}

.shop-head h1 {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.shop-head p {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ===== 피드 ===== */
.shop-feed {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding-bottom: var(--spacing-4xl);
}

.shop-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.shop-card:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

/* 가로 커버 이미지 - 원본 비율 유지(가로형 배너) */
.shop-card-cover {
  position: relative;
  width: 100%;
  background-color: var(--color-bg-card);
  line-height: 0;
}

.shop-card-cover img {
  width: 100%;
  height: auto;
  display: block;
}

.shop-card-badge {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  padding: 3px var(--spacing-sm);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  /* badgeColor 가 있으면 inline style 로 덮어씀. 없으면 반투명 다크 */
  background-color: var(--color-bg-badge);
  backdrop-filter: blur(2px);
}

/* ===== 카드 정보 ===== */
.shop-card-info {
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
}

.shop-card-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text-body);
  margin-bottom: var(--spacing-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shop-card-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--spacing-xs) var(--spacing-sm);
}

.shop-card-discount {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-danger);
}

.shop-card-price {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-text-primary);
}

.shop-card-original {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  text-decoration: line-through;
}