@charset "utf-8";
@import url("plp-dc-info.css");

/* ============================================================
 * inc-plps.css  (위치: /css/inc-plps.css — 공용이므로 pages/ 밖)
 *
 * 상품 리스트 공용 스타일. plps/inc-plps.php 가 렌더링하는
 * 카드 영역 + 상단 컨트롤(정렬/뷰) + 페이저를 모두 포함합니다.
 *
 * [포함 범위]
 *  · 상단 컨트롤 (정렬 드롭다운, 뷰 전환, 개수 표시)
 *    - .c-plp-controls / .c-plp-count / .c-plp-controls__right
 *    - .c-plp-sort / .c-plp-sort__select / .c-plp-sort__ico / .c-plp-sort__sr
 *    - .c-plp-view
 *  · 상품 카드 본체
 *    - .c-plp-list (리스트 컨테이너, 그리드 토글 포함)
 *    - .c-plp-item, .c-plp-item__img, .c-plp-item__body
 *    - .c-plp-badge / .c-plp-likeBtn / .c-plp-salePct / .c-plp-sale / .c-plp-soldout
 *    - .c-plp-shopRow / .c-plp-shopTag / .c-plp-shopName
 *    - .c-plp-title / .c-plp-priceRow / .c-plp-discount / .c-plp-price / .c-plp-was
 *    - .c-plp-priceMeta / .c-plp-priceMeta__point / .c-plp-priceMeta__badge
 *    - .c-plp-benefits / .c-plp-pill
 *    - .c-plp-ratingRow / .c-plp-star / .c-plp-score / .c-plp-reviews
 *  · 더보기/무한스크롤
 *    - .c-plp-pager / .c-plp-loadMore / .c-plp-sentinel
 *
 * [plps.css 에 남은 것]
 *  · 1단 헤더 드롭다운 (.c-hdr-*)
 *  · 2단 칩 (.c-plp-chips, .c-plp-chip)
 *  · 3단 탭/드롭다운 (.c-plp-tabs/tab/dd)
 *  = PLP 전용 "카테고리 탐색" UI 일체
 *
 * [로드 규칙]
 *  - plps/index.php    : plps.css + inc-plps.css 둘 다 로드
 *  - search/index.php  : inc-plps.css + pages/search.css
 *  - (미래 기획전 등)  : inc-plps.css + 해당 페이지 css
 * ============================================================ */


/* ======================================================
   상단 컨트롤 (정렬 / 뷰 전환 / 개수 표시)
   ====================================================== */
/* 상품목록 상단 컨트롤(총 상품수 / 정렬 / 보기 전환) */
.c-plp-controls{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px var(--space-3) 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.c-plp-count{
  font-size: 14px;
  font-weight: 500;
  color: var(--sub);
  letter-spacing: -0.2px;
}
.c-plp-count strong{
  font-weight: 700;
  color: #111;
}

.c-plp-controls__right{
  display: flex;
  align-items: center;
  gap: 10px;
}

.c-plp-sort{
  position: relative;
  display: inline-flex;
  align-items: center;
}
.c-plp-sort__sr{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.c-plp-sort__select{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 10px;
  height: 30px;
  padding: 0 34px 0 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: #111;
}
.c-plp-sort__ico{
  position: absolute;
  right: 10px;
  font-size: 20px;
  opacity: .6;
  pointer-events: none;
}

.c-plp-view{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  display: inline-grid;
  place-items: center;
}
.c-plp-view:active{ background: rgba(0,0,0,.04); }
.c-plp-view [data-plp-view-ico] { font-size: 20px; opacity: .8; }


/* ======================================================
   상품 리스트 / 카드 본체
   ====================================================== */

/* 데모 상품 목록 */
.c-plp-list{ padding: var(--space-3); display: grid; gap: 15px; }

.c-plp-card{
  position: relative;
  min-width: 0;
}

/* 보기 전환: 그리드 */
.c-plp-list.is-grid{
  /* 상품 카드가 최소 150px은 유지하되, 남는 공간은 알아서 채워라! */
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.c-plp-list.is-grid .c-plp-card{
  min-width: 0;
}
.c-plp-list.is-grid .c-plp-item{
  grid-template-columns: 1fr;
  align-content: start;
  gap: 10px;
  border: 0;
}
.c-plp-list.is-grid .c-plp-item__img{
  width: 100%;
}

.c-plp-item{
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  padding-bottom: 8px;
  color: inherit;
  text-decoration: none;
  transition: opacity .15s ease, transform .15s ease;
}
.c-plp-item:active{
  opacity: .88;
  transform: translateY(2px);
}
.c-plp-item__img{
  position: relative;
  width: 120px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 10px;
  background: #f7f7f7;
}
.c-plp-item__img img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity .15s ease, transform .15s ease, filter .15s ease;
}
.c-plp-item:active .c-plp-item__img img{
  transform: scale(0.985);
}

.c-plp-badge,
.c-plp-likeBtn,
.c-plp-salePct,
.c-plp-sale{
  z-index: 2;
}
.c-plp-badge{
  position: absolute;
  top: 8px; left: 8px;
  padding: 4px 7px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.2px;
  background: rgba(255,107,107,.92);
  color: #fff;
}
.c-plp-likeBtn{
  position: absolute;
  right: 6px;
  bottom: 15px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  z-index: 4;
}
.c-plp-likeBtn:active{
  border-radius: 999px;
  background: rgba(0,0,0,.1);
}
.c-plp-likeBtn .material-symbols-outlined{ font-size: 18px; opacity: .78; }
.c-plp-likeBtn.is-on .material-symbols-outlined{
  color: var(--accent);
  opacity: 1;
  font-variation-settings: 'FILL' 1;
}

/* --- Sale / Soldout badges --- */
.c-plp-salePct{
  position: absolute;
  top: 8px; right: 8px;
  padding: 4px 7px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -0.2px;
  background: rgba(17,17,17,.82);
  color: #fff;
}
.c-plp-sale{
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 4px 7px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -0.2px;
  background: rgba(17,17,17,.72);
  color: #fff;
}

.c-plp-soldout{
  position: absolute;
  top: 12px;
  left: 10px;
  z-index: 3;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--jh-red);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
/* 더 강렬한 품절 시각 효과 예시
.c-plp-item.is-soldout .c-plp-item__img img {
  filter: grayscale(1) brightness(0.85); /* 완전 흑백 + 밝기를 낮춰서 더 어둡게
}
 품절이 너무 어둡게 되서 제거 ... */
.c-plp-item.is-soldout:active .c-plp-item__img img{
  transform: none;
}

.c-plp-item__body{ min-width: 0; }

.c-plp-shopRow{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--sub);
}
.c-plp-shopTag{
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,107,107,.28);
  color: var(--accent);
  background: rgba(255,107,107,.06);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: -0.2px;
}
.c-plp-shopName{ font-size:11px; color:#888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-plp-title{
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.c-plp-priceRow{ display: flex; align-items: baseline; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.c-plp-discount{ color: var(--accent); font-weight: 700; font-size: 13px; letter-spacing: -0.2px; }
.c-plp-price{ font-size: 15px; font-weight: 700; letter-spacing: -0.3px; }
.c-plp-price small{ font-size: 13px; font-weight: 500; opacity: .9; }
.c-plp-was{ font-size: 12px; color: var(--sub); text-decoration: line-through; }

.c-plp-priceMeta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top: 3px;
}
.c-plp-priceMeta__point{
  max-width: 100%;
}
.c-plp-priceMeta__badge{
  display:inline-flex;
  align-items:center;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -.02em;
  background: transparent;
  color: #ff5722;
  box-shadow: inset 0 0 0 1px rgba(255,87,34,.45);
}
.c-plp-priceMeta__badge.is-group{
  background: #ff5722;
  color: #fff;
  box-shadow: none;
}

.c-plp-benefits{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.c-plp-pill{
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  font-size: 11px;
  font-weight: 700;
  color: #374151;
}

.c-plp-list.is-grid .c-plp-item__body{
  display: grid;
  align-content: start;
}
.c-plp-list.is-grid .c-plp-title{
  margin-top: 3px;
}
.c-plp-list.is-grid .c-plp-was{
  display:none;
}
.c-plp-list.is-grid .c-plp-priceMeta{
  display:block;
}
.c-plp-list.is-grid .c-plp-priceMeta__point{
  display:flex;
}
.c-plp-list.is-grid .c-plp-priceMeta__badge{
  margin-top: 3px;
}
.c-plp-list.is-grid .c-plp-benefits{
  margin-top: 7px;
}
.c-plp-list.is-grid .c-plp-pill{
  padding: 3px 7px;
}

.c-plp-ratingRow{ display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--sub); }
.c-plp-star{ color: var(--accent); font-weight: 900; }
.c-plp-score{ font-weight: 800; color: #111; }
.c-plp-reviews{ color: var(--sub); }


/* 더보기/무한추가(하이브리드) */
.c-plp-pager{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--space-3) 12px;
}
.c-plp-loadMore{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.c-plp-loadMore:active{ background: rgba(0,0,0,.04); }
.c-plp-loadMore.is-loading{
  opacity: .6;
  pointer-events: none;
}
.c-plp-sentinel{ height: 1px; }

/* ──────────────────────────────────────────────────────────────
 *  PLP stepper — 카드의 [- 수량 +] 컨트롤
 *  inc-plps.php 의 $plp_opts['stepper'] = true 일 때만 출력됨
 *  카드 안에서 stepper는 항상 바닥에 정렬 (이미지 height 차이 흡수)
 *  ────────────────────────────────────────────────────────────── */

/* stepper 활성 카드: flex column으로 만들어 stepper를 margin-top:auto로 바닥 정렬 */
.c-plp-card--with-stepper{
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 카드의 본체(a 태그)는 자연 높이, stepper는 자동으로 남는 공간 끝으로 밀림 */
.c-plp-card--with-stepper .c-plp-item{
  flex: 0 0 auto;
}
.c-plp-card--with-stepper .c-plp-stepper,
.c-plp-card--with-stepper .c-plp-stepper--soldout{
  margin-top: auto;
}
/* 찜 버튼은 stepper 위로 — 카드 height에 비례하던 8% 대신 명시 px */
.c-plp-card--with-stepper .c-plp-likeBtn{
  bottom: 56px;
}

.c-plp-stepper{
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 8px 0 12px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  user-select: none;
  flex: 0 0 auto;
}
.c-plp-stepper[data-active]{
  border-color: var(--accent, #ff5722);
}
.c-plp-stepper__btn{
  flex: 0 0 36px;
  height: 32px;
  display: grid;
  place-items: center;
  background: #fafafa;
  border: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.c-plp-stepper__btn:active{
  background: #efefef;
}
.c-plp-stepper__dec{ border-right: 1px solid rgba(0,0,0,.08); }
.c-plp-stepper__inc{ border-left: 1px solid rgba(0,0,0,.08); }
.c-plp-stepper__qty{
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 0;
  background: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #999;
  -moz-appearance: textfield;
  appearance: textfield;
}
.c-plp-stepper__qty::-webkit-outer-spin-button,
.c-plp-stepper__qty::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.c-plp-stepper__qty:focus{ outline: none; }
.c-plp-stepper[data-active] .c-plp-stepper__qty{
  color: #111;
  font-size: 16px;
  font-weight: 700;
}

/* 품절 상품의 stepper 자리 — 카드 height 통일용 placeholder */
.c-plp-stepper--soldout{
  height: 32px;
  margin-top: 8px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  background: #fafafa;
  font-size: 12px;
  color: #999;
  font-weight: 500;
}

/* 옵션 있는 상품의 stepper 자리 — selectsheet 진입 버튼 (카드 height 통일) */
.c-plp-stepper--options{
  height: 32px;
  margin-top: 8px;
  width: 100%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  padding: 0 10px;
  -webkit-tap-highlight-color: transparent;
}
.c-plp-stepper--options[data-active]{
  border-color: var(--accent, #FF6B6B);
  color: var(--accent, #FF6B6B);
  /* background: rgba(255,107,107,.12); */
}

/* ──────────────────────────────────────────────────────────────
 *  qtyDc — 수량별 할인 적용 단가 표시 (뱃지 옆)
 *  $plp_opts['qtyDiscount'] = true 일 때만 출력됨
 *  ────────────────────────────────────────────────────────────── */
.c-plp-priceMeta__qtyDc{
  display: inline-flex;
  align-items: center;
  padding-top: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #e55100;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.c-plp-priceMeta__qtyDc[hidden]{
  display: none;
}

/* ──────────────────────────────────────────────────────────────
 *  PLP 수량별 할인 토스트 — [수량별할인] 뱃지 색상과 일관성
 *  Toast 모듈의 key='plp-qtydc' 셀렉터로 외부에서 색상만 오버라이드
 *  색상 조정 시 --plp-toast-bg 한 줄만 변경
 *  ────────────────────────────────────────────────────────────── */
.c-toast[data-toast-key="plp-qtydc"]{
  --plp-toast-bg: rgba(229, 81, 0, 0.95);    /* 약간 어둡게 — #e55100 */
  background: var(--plp-toast-bg);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 10px 16px;
  border-radius: 12px;
  max-width: min(92vw, 320px);
}
.c-toast[data-toast-key="plp-qtydc"] .c-toast__msg{
  -webkit-line-clamp: 5;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}
.c-toast[data-toast-key="plp-qtydc"] .c-toast__close{
  color: rgba(255, 255, 255, .9);
}

/* dcInfo wrapper — 카드의 [수량별할인] + [추가 @N원] 한 묶음, 클릭 시 모달 */
.c-plp-priceMeta__dcInfo{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.c-plp-priceMeta__dcInfo[data-plp-dc-info]{
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 87, 34, .15);
}
.c-plp-priceMeta__dcInfo[data-plp-dc-info]:active{
  opacity: .6;
}