/* BASIC css start */
/* ---------- 카테고리 기본 ---------- */
#productClass .cate-wrap { overflow:hidden; }
#productClass .cate-wrap .bcate{
  padding-bottom:10px; font-size:18px; color:#202020; font-weight:bold;
  border-bottom:1px solid #e3e3e3;
}
#productClass .cate-wrap .class-list ul{ border-bottom:1px solid #e3e3e3; *zoom:1; }
#productClass .cate-wrap .class-list ul:after{ display:block; clear:both; content:''; }
#productClass .cate-wrap .class-list ul li{ padding:15px 30px 16px 0; float:left; }
#productClass .cate-wrap .class-list ul li a{ display:block; font-size:13px; color:#919191; }

/* 선택: 베스트/MD PICK 영역 유지 */
#productClass .best-item{
  padding-top:20px; padding-bottom:10px;
  border-top:2px solid #5c5c5c; border-bottom:2px solid #5c5c5c; background:#f8f8f8;
}
#productClass .total-sort{ padding-top:30px; }
#productClass .item-cate{ display:flex; justify-content:space-between; align-items:end; padding:30px 0; }
#productClass .item-cate a{ font-weight:bold; color:#1c1c1c; letter-spacing:-1px; }
#productClass .item-cate .scate a{ font-size:18px; }
#productClass .item-cont .thumb .main_icons{ position:relative; }

/* ---------- 카테고리 배너(원본 사이즈) ---------- */
#productClass .penm-banner-section{ width:100%; margin:0 0 30px; background:transparent; }
#productClass .penm-banner-fixed{ max-width:1200px; margin:0 auto 30px; }
#productClass .penm-banner-fixed .penm-banner-frame{ position:static; overflow:visible; }
#productClass .penm-banner-fixed .penm-banner-img{
  display:block; width:auto; height:auto; max-width:100%;
}
#productClass .penm-banner-fixed .penm-banner-html,
#productClass .penm-banner-fixed .penm-banner-html > *{ display:block; width:auto; height:auto; }
#productClass .penm-banner-fixed .penm-banner-html img{
  display:block; width:auto; height:auto; max-width:100%;
}

/* ---------- 상품 리스트 그리드 ---------- */
#productClass .item-wrap{ max-width:1200px; margin:0 auto; }
#productClass .item-wrap::after{ content:""; display:block; clear:both; }
/* wrapper 분할 구조 유지 */
#productClass .item-wrap .item-cont{ display:contents; }

/* 4열 */
#productClass .item-wrap dl.item-list{
  float:left;
  width:25%;
  padding:0 10px 32px;
  box-sizing:border-box;
}

/* ---------- 썸네일: 정사각형 + 중앙 배치 ---------- */
/* 기본 스킨의 height/padding 간섭 제거 후 정사각형 강제 */
#productClass .item-wrap .item-cont dl.item-list dt.thumb{
  position:relative;
  width:100% !important;
  height:0 !important;              /* 고정 height(예: 352px) 무력화 */
  padding-top:100% !important;      /* 1:1 비율 */
  overflow:hidden;
  background:#f8f8f8;
  border:1px solid #e0e0e0;
  margin-bottom:8px;                 /* 상품명 위 여백 ↓ */
}

/* a가 컨테이너를 꽉 채우고, 모든 여백/라인박스 제거 */
#productClass .item-wrap .item-cont dl.item-list dt.thumb > a{
  position:absolute !important; inset:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:0 !important; margin:0 !important;
  font-size:0 !important; line-height:0 !important;  /* 상단 공백 방지 */
  background:transparent !important;
}

/* 어떤 요소가 들어와도 중앙 contain */
#productClass .item-wrap .item-cont dl.item-list dt.thumb > a img,
#productClass .item-wrap .item-cont dl.item-list dt.thumb > a picture,
#productClass .item-wrap .item-cont dl.item-list dt.thumb > a source,
#productClass .item-wrap .item-cont dl.item-list dt.thumb > a span{
  max-width:100% !important; max-height:100% !important;
  width:auto !important; height:auto !important;
  object-fit:contain !important; object-position:center center !important;
  display:block !important; margin:0 !important;
  position:static !important; top:auto !important; left:auto !important;
}

/* ---------- 텍스트/가격 ---------- */
/* 상품명: 위 여백 ↓, 아래 여백 ↑ */
#productClass .prd-info .prd-name{ margin:6px 0 14px; line-height:1.4; }
#productClass .prd-info .prd-name a{ font-size:14px; color:#1c1c1c; }

/* 2줄 가격 레이아웃 */
.penm-price-row{ line-height:1.4; }
.penm-price-row + .penm-price-row{ margin-top:4px; }
.penm-original-price{ color:#999; text-decoration:line-through; font-size:.9rem; }
.penm-discount-rate{ color:#e74c3c; font-weight:700; margin-right:6px; }
.penm-price-sale{ color:#333; font-weight:700; font-size:1rem; }


/* 후기+찜 한 줄 정렬 */
#productClass .prd-info .prd-wish{
  margin-top:10px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  list-style:none;
}
#productClass .prd-info .prd-wish .sep{ color:#c9c9c9; }

/* 후기 */
#productClass .prd-info .prd-wish .prd-review{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:#666;
}
#productClass .prd-info .prd-wish .prd-review i{ font-size:14px; line-height:1; }
#productClass .prd-info .prd-wish .prd-review .count{ font-size:12px; }

/* 찜 */
#productClass .prd-info .prd-wish .prd-wish-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:#666;
  text-decoration:none;
  font-size:13px;
}

/* 하트 토글(메이크샵이 찜 상태에서 a에 on 클래스 부여) */
#productClass .prd-info .prd-wish .prd-wish-btn .icon-heart-on{ display:none; }
#productClass .prd-info .prd-wish .prd-wish-btn.on .icon-heart-off{ display:none; }
#productClass .prd-info .prd-wish .prd-wish-btn.on .icon-heart-on{ display:inline-block; color:#666 !important; }

#productClass .prd-info .prd-wish .prd-wish-btn i{ font-size:14px; line-height:1; }
#productClass .prd-info .prd-wish .prd-wish-btn .count{ font-size:12px; }

/* 후기+찜 줄 구성(있던 것 유지 가능) */
#productClass .prd-info .prd-wish{
  margin-top:10px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
}
#productClass .prd-info .prd-wish .sep{ color:#c9c9c9; }

/* 후기 아이콘/숫자 */
#productClass .prd-info .prd-wish .prd-review{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:#666;
}
#productClass .prd-info .prd-wish .prd-review i{ font-size:14px; line-height:1; }
#productClass .prd-info .prd-wish .prd-review .count{ font-size:12px; }

/* ====== 찜 버튼: 스킨의 숨김 규칙 완전 무력화 ====== */
#productClass .prd-info .prd-wish .prd-wish-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  text-indent:0 !important;
  overflow:visible !important;
  color:#666;
  text-decoration:none;
  line-height:1;
}

/* 아이콘은 항상 렌더링되게 */
#productClass .prd-info .prd-wish .prd-wish-btn i{
  display:inline-block !important;
  font-size:14px;
  line-height:1;
}

/* 찜 상태 토글 (메이크샵이 a에 on 클래스를 붙임) */
#productClass .prd-info .prd-wish .prd-wish-btn .icon-heart-on{ display:none !important; }
#productClass .prd-info .prd-wish .prd-wish-btn.on .icon-heart-off{ display:none !important; }
#productClass .prd-info .prd-wish .prd-wish-btn.on .icon-heart-on{
  display:inline-block !important;
  color:#666 !important;
}

/* 찜 수 */
#productClass .prd-info .prd-wish .prd-wish-btn .count{ font-size:12px; }

/* 하트 색상 통일: off/on 모두 검정 */
#productClass .prd-info .prd-wish .prd-wish-btn i{ 
  color:#666 !important;
}
#productClass .prd-info .prd-wish .prd-wish-btn.on .icon-heart-on{
  color:#666 !important;
}
/* 호버에도 색 안 변하게 */
#productClass .prd-info .prd-wish .prd-wish-btn:hover i{
  color:#666 !important;
}

/* ---------- 반응형 ---------- */
@media (max-width:1024px){
  #productClass .item-wrap dl.item-list{ width:33.3333%; } /* 3열 */
}
@media (max-width:768px){
  #productClass .item-wrap dl.item-list{ width:50%; }     /* 2열 */
}
@media (max-width:480px){
  #productClass .item-wrap dl.item-list{ width:100%; }    /* 1열 */
}

/* BASIC css end */