/* =========================================================
   item-swipe.css
   스와이프 카드 공통 스타일

   부모에 .swipe-md 또는 .swipe-sm 클래스로 크기 분기
   폰트 표준:
     LG(웹) — 제목 1rem(16px)/400, 가격 1rem(16px)/600, 보조 0.8125rem(13px)
     MD     — 제목 0.875rem(14px)/400, 가격 0.875rem(14px)/600, 보조 0.75rem(12px)
     SM     — 제목 0.8125rem(13px)/400, 가격 0.8125rem(13px)/600, 보조 0.6875rem(11px)
   ========================================================= */


/* =========================
   공통 카드
   ========================= */
.content-swipe {
  display: block;
  text-decoration: none;
  position: relative;
}

.content-swipe .thum {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #e5e5e5;
  aspect-ratio: 5 / 7;
}

.content-swipe .thum img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* =========================
   info — flex column + gap
   ========================= */
.content-swipe .info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0 0.125rem;
}


/* =========================
   메타 (카테고리 | 지역) — 1줄 말줄임
   ========================= */
.content-swipe .meta {
  color: #777;
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* =========================
   제목 — 2줄 말줄임
   ========================= */
.content-swipe .title {
  color: #000;
  line-height: 1.4;
  letter-spacing: -0.03em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}


/* =========================
   가격
   ========================= */
.content-swipe .price_box {
  display: flex;
  gap: 0.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.content-swipe .discount { color: #ff4b4b; }
.content-swipe .discount:empty { display: none; }
.content-swipe .price { color: #000; }


/* =========================
   배지 (content-list 디자인 통일)
   ========================= */
.content-swipe .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.content-swipe .badges:empty { display: none; }

/* 크기/색상은 base.css의 .promo_* 공통 정의 사용, 폰트 사이즈만 한 단계 축소 */
.content-swipe .promo_new,
.content-swipe .promo_timesale,
.content-swipe .promo_today {
  font-size: 0.75rem;
  padding: 0.1875rem 0.25rem;
}

.content-swipe .dcoupon_label {
  font-size: 0.6875rem;
}


/* =========================================================
   MD (swipe-md) — 중형 (모바일 기본)
   ========================================================= */
.swipe-md .content-swipe .meta      { font-size: 0.75rem; }
.swipe-md .content-swipe .title     { font-size: 0.875rem; }
.swipe-md .content-swipe .price_box { font-size: 0.875rem; }


/* =========================================================
   SM (swipe-sm) — 소형 (모바일 기본)
   ========================================================= */
.swipe-sm .content-swipe .meta      { font-size: 0.6875rem; }
.swipe-sm .content-swipe .title     { font-size: 0.75rem; }
.swipe-sm .content-swipe .price_box { font-size: 0.75rem; }


/* =========================================================
   웹(.is-web) — LG 폰트 + hover
   ========================================================= */
.is-web .content-swipe {
  transition: transform 0.2s ease-in-out;
}
.is-web .content-swipe:hover {
  transform: translateY(-5px);
}
.is-web .content-swipe .info {
  gap: 0.4375rem;
  margin-top: 0.75rem;
  padding: 0 0.25rem;
}
.is-web .content-swipe .meta      { font-size: 0.8125rem; }
.is-web .content-swipe .title     { font-size: 1rem; }
.is-web .content-swipe .price_box { font-size: 1rem; }


/* =========================================================
   웹(.is-web) + SM — LG보다 한 단계 작은 폰트
   swipe-md(LG): 13px / 16px / 16px
   swipe-sm(웹SM): 12px / 14px / 14px
   ========================================================= */
.is-web .swipe-sm .content-swipe .info {
  gap: 0.375rem;
  margin-top: 0.625rem;
}
.is-web .swipe-sm .content-swipe .meta      { font-size: 0.75rem; }
.is-web .swipe-sm .content-swipe .title     { font-size: 0.875rem; }
.is-web .swipe-sm .content-swipe .price_box { font-size: 0.875rem; }