@charset "UTF-8";
/* ============================================================
   동심키즈몰 상품 리스트 (그리드 카드)
   - 모든 규칙은 .kidsMall 하위로 스코프
   - .km-list / .km-card 프리픽스 (전역/상세 스타일 충돌 방지)
   - 상태 버튼(.km-status-btn)은 kidsMall-detail.css 를 함께 로드해 재사용
   ============================================================ */

/* 리스트 그리드 (PC 3단) */
.kidsMall .km-list {
  padding: 30px 0 60px;
}

.kidsMall .km-list ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
}

.kidsMall .km-list > ul > li {
  min-width: 0;
}

/* 카드 */
.kidsMall .km-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.kidsMall .km-card .thumb {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #f4f4f4;
}

.kidsMall .km-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.kidsMall .km-card .thumb:hover img {
  transform: scale(1.03);
}

/* 썸네일 코너 뱃지 (예약할인 - 네이비) */
.kidsMall .km-card .thumb .badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  background: #00103E;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
}

/* 타임딜 카운트다운 (썸네일 하단 오버레이) */
.kidsMall .km-card .thumb .km-timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
}

.kidsMall .km-card .thumb .km-timer .count {
  font-variant-numeric: tabular-nums;
}

.kidsMall .km-card .thumb .km-timer .suffix {
  font-weight: 400;
  opacity: .85;
}

.kidsMall .km-card .thumb .km-timer.is-end {
  background: rgba(70, 70, 70, .72);
}

/* 품절/마감 딤 처리 */
.kidsMall .km-card.is-closed .thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .6);
}

.kidsMall .km-card .info {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 14px;
}

/* 라벨 */
.kidsMall .km-card .label-area {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.kidsMall .km-card .label-area .label {
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 12px;
  display: inline-block;
  font-weight: 500;
  color: #fff;
}

/* 라벨 타입별 색상 */
.kidsMall .km-card .label-area .label.group   { background-color: #FF5452; } /* 공구특가 - 레드 */
.kidsMall .km-card .label-area .label.reserve { background-color: #19CEB3; } /* 예약판매 - 틸 */
.kidsMall .km-card .label-area .label.red     { background-color: #FF5452; } /* 하위호환 */

/* 상품명 (2줄 클램프 + 한글 자연 줄바꿈) */
.kidsMall .km-card .name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2022;
  line-height: 1.4;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.4em * 2);
}

/* 가격 */
.kidsMall .km-card .price-area {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.kidsMall .km-card .price-area .percent {
  font-size: 20px;
  color: #FF5452;
  font-weight: 700;
}

.kidsMall .km-card .price-area .sale {
  font-size: 20px;
  font-weight: 700;
  color: #1f2022;
}

.kidsMall .km-card .price-area .price {
  font-size: 14px;
  color: #898A8E;
  text-decoration: line-through;
}

/* 카드 하단 버튼 (상태 버튼은 kidsMall-detail.css 재사용, 크기만 축소) */
.kidsMall .km-card .km-buy {
  margin-top: 16px;
}

/* 배송 정보 라인 (네이버 리스트 스타일) */
.kidsMall .km-card .km-card-delivery {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.3;
}

.kidsMall .km-card .km-card-delivery .free {
  font-weight: 700;
  color: #1f2022;
}

.kidsMall .km-card .km-card-delivery .fee {
  color: #898A8E;
}

.kidsMall .km-card .km-card-delivery .today {
  color: #19CEB3;
  font-weight: 600;
}

.kidsMall .km-card .km-status-btn {
  width: 100%;
  height: 46px;
  font-size: 15px;
}

/* ===== 반응형 (형제 리스트 페이지와 동일 브레이크) ===== */
@media screen and (max-width: 860px) {
  .kidsMall .km-list ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
  }
}

@media screen and (max-width: 540px) {
  .kidsMall .km-list {
    padding: 20px 0 40px;
  }
  .kidsMall .km-list ul {
    gap: 24px 12px;
  }
  .kidsMall .km-card .name {
    font-size: 15px;
  }
  .kidsMall .km-card .price-area .percent,
  .kidsMall .km-card .price-area .sale {
    font-size: 18px;
  }
  .kidsMall .km-card .km-status-btn {
    height: 42px;
    font-size: 14px;
  }
}