@charset "UTF-8";
/*  상품목록 페이지 스타일 파일입니다. */
.product-list__breadcrumb {
  height: 24px;
}
.product-list__search-keyword-wrap {
  font-weight: 700;
  font-size: 24px;
  padding-block-start: 20px;
  padding-block-end: 40px;
  border-block-end: 2px solid var(--color-base-black);
}
.product-list__search-keyword {
  font-style: normal;
  color: var(--color-point);
}
.product-list :where(.l-title) {
  font-size: 24px;
  border-bottom: unset;
  padding: unset;
  margin-block: 20px;
}
.product-list .page-content-top {
  min-height: 100px;
}
.product-list .page-content-top__location {
  color: var(--gray500);
}
.product-list .page-content-top__location a {
  display: block;
}
.product-list .page-content-top__breadcrumb-category-label::after {
  opacity: 0.6;
}
.product-list .notice {
  height: 50dvh;
}
.product-list .thumb-item__info {
  padding: 0;
  padding-block: 10px;
}
.product-list .pagination {
  padding-top: 60px;
}

/* ============================================================================
   공통 유틸리티 클래스
   ============================================================================ */

/* 숨김 처리 클래스 (display: none 대신 사용) */
.hidden-element {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================================
   상품 뱃지 시스템 스타일
   ============================================================================ */

/* 뱃지 컨테이너 */
.product-badges-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0;
  align-items: flex-start;
  min-height: 20px; /* 뱃지가 없어도 기본 높이 확보 */
}

/* 기본 뱃지 스타일 */
.product-badge {
  display: inline-block;
  height: 20px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 3px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.5px;
  border: 1px solid transparent;
  min-height: 16px;
  box-sizing: border-box;
}

/* 할인 뱃지 - 빨간색 */
.product-badge--discount {
  background-color: #ff4757;
  color: #ffffff;
  font-weight: 700;
  animation: pulse-discount 2s infinite;
}

/* NEW 뱃지 - 주황색 */
.product-badge--new {
  background-color: #ff6b35;
  color: #ffffff;
  font-weight: 600;
}

/* BEST 뱃지 - 금색 */
.product-badge--best {
  background-color: #ffa502;
  color: #ffffff;
  font-weight: 600;
  border: 1px solid #ff7675;
}

/* HOT 뱃지 - 진한 빨간색 */
.product-badge--hot {
  background-color: #e74c3c;
  color: #ffffff;
  font-weight: 600;
  animation: pulse-hot 1.5s infinite;
}

/* 무료배송 뱃지 - 초록색 */
.product-badge--free-shipping {
  background-color: #007bff;
  color: #ffffff;
  font-weight: 500;
}

/* 재입고 뱃지 - 파란색 */
.product-badge--restock {
  background-color: #0984e3;
  color: #ffffff;
  font-weight: 500;
}

/* 품절임박 뱃지 - 경고 오렌지 */
.product-badge--low-stock {
  background-color: #fdcb6e;
  color: #2d3436;
  font-weight: 600;
  animation: blink-warning 1s infinite;
}

/* 한정판매 뱃지 - 보라색 */
.product-badge--limited {
  background-color: #6c5ce7;
  color: #ffffff;
  font-weight: 600;
  border: 1px solid #a29bfe;
}

/* 뱃지 애니메이션 효과 */
@keyframes pulse-discount {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(255, 71, 87, 0);
  }
}

@keyframes pulse-hot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes blink-warning {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0.6;
  }
}

/* 뱃지 호버 효과 */
.product-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

/* 뱃지 개수 제한 (최대 3개까지만 표시) */
.product-badges-container .product-badge:nth-child(n + 4) {
  display: none;
}

/* ============================================================================
   카운트다운 배너 스타일 (PC)
   ============================================================================ */

/* 배너 컨테이너 */
.countdown-banner {
  display: none;
  height: 300px;
  width: 100%;
  margin: 20px 0;
  user-select: none;
}

.countdown-banner__inner {
  height: 100%;
  width: 100%;
  background: var(--gray400);
  border-radius: 18px;
  overflow: hidden;
}

.countdown-banner__wrapper {
  position: relative;
  height: 100%;
}

/* 배경 이미지 */
.countdown-banner__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 타이머 컨테이너 */
.countdown-timer {
  display: none;
  font-size: 112px;
  font-weight: 800;
  line-height: 100%;
  margin: 0 0 20px;
  align-items: center;
  z-index: 10;
  color: white;
  position: absolute;
  bottom: 58px;
  right: 207px;
}

/* 타이머 아이템 (일/시/분/초) */
.countdown-timer__item {
  position: relative;
  -webkit-user-drag: none;
}

.countdown-timer__item p:first-child {
  width: 153px;
  text-align: center;
  -webkit-user-drag: none;
}

.countdown-timer__item .countdown-days {
  text-align: end;
  width: auto;
}

/* 타이머 레이블 (DAYS, HOURS 등) */
.countdown-timer__label {
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translate(-50%, 0%);
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  color: #4e4b59;
  width: fit-content;
}

/* 콜론(:) */
.countdown-timer__colon {
  position: relative;
  width: 79px;
  text-align: center;
}

.countdown-timer__colon::before {
  content: ":";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: fit-content;
  height: fit-content;
}