/* BASIC css start */
/* 공통 영역 */
#wrap,
#contentWrapper,
#contentWrap,
#content,
#productClass,
.best_sec_inner,
.head_inner {
  width: 1280px !important;
  margin: 0 auto;
  box-sizing: border-box;
}

/* BEST 영역 */
.best_sec {
  padding: 60px 0 100px;
}
.best_sec_inner h3 {
  font-family: 'Jost', sans-serif;
  font-size: 28px;
  color: #413e3a;
  text-align: center;
  margin-bottom: 50px;
  font-weight: 600;
}
.best_sec .swiper {
  padding-bottom: 50px;
}
.best_sec .swiper-pagination {
  bottom: 0px;
  top: unset;
}
.best_sec .swiper-pagination-bullet {
  width: 30px;
  height: 5px;
  border-radius: 0;
  background-color: #9c8f87;
}
.best_sec .swiper-pagination-progressbar {
  background-color: rgba(0,0,0,0.05);
}
.best_sec .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background-color: #d7cdc1;
}

/* 상품 공통 카드 */
.item_list.w335 {
  width: calc((100% - (16px * 6)) / 4) !important;
  box-sizing: border-box;
}
.item_list {
  position: relative;
  overflow: hidden;
  margin: 0 2px 4px;
}
.item_list .thumb {
  position: relative;
}
.item_list .thumb img {
  width: 100%;
  display: block;
}

/* 마우스오버 정보 박스 */
.item_list .info {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.65);
  width: 90%;
  padding: 12px;
  text-align: center;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 3;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}
.item_list:hover .info {
  opacity: 1;
}
.item_list .info .prdbtn,
.item_list .info .prdname,
.item_list .info .prdetc,
.item_list .info .prdprice,
.item_list .info .prdcolor {
  font-size: 13px;
  color: #333;
  margin-bottom: 6px;
  line-height: 1.5;
}
.item_list .info .prdprice {
  font-weight: bold;
}
.item_list .info .prdprice strike {
  font-size: 12px;
  color: #aaa;
  margin-right: 5px;
}
.item_list .info .prdcolor span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 2px;
  border-radius: 50%;
  border: 1px solid #ccc;
}

/* 오버 시 하단 아이콘: 하트/돋보기/카트 */
.prdicon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 4;
  background: rgba(255, 255, 255, 0.9);
  padding: 6px 12px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: all 0.3s ease;
}
.item_list:hover .prdicon {
  opacity: 1;
}
.prdicon ul {
  display: flex;
  gap: 6px;
}
.prdicon ul li {
  list-style: none;
}
.prdicon ul li a img,
.prdicon .my-wish-list img {
  width: 24px;
  height: 24px;
}

/* 하트 위치 변경 (상단 X → 오버 안으로 이동) */
.my-wish-list {
  display: inline-block;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

/* 순위 배지 */
.rank-number {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #000;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 10;
  font-family: 'Jost', sans-serif;
  opacity: 0.8;
}

/* 반응형 */
@media screen and (max-width: 768px) {
  .item_list.w335 {
    width: 48% !important;
    margin-bottom: 20px;
  }
  .item_list .info {
    width: 95%;
    padding: 10px;
    top: 60%;
  }
  .item_list .info .prdname,
  .item_list .info .prdprice {
    font-size: 12px;
  }
}


/* 기존 CSS 맨 아래 근처에 한 줄 추가 */
.best_sec_inner .item-cont{ margin:0 -8px; }   /* ← 좌/우 -8px로 균형 */


/* ===== [교체용] BEST50 4열 균등폭 + 여백 꼬임 제거 ===== */
.best_sec_inner .item-cont{
  display:flex;
  flex-wrap:wrap;
  gap:4px;                     /* 가로/세로 간격 */
  margin:0 !important;
  padding:0 !important;
}
.best_sec_inner .item-cont > li{
  list-style:none;
  margin:0 !important;          /* li 마진 제거(꼬임 원인 차단) */
  padding:0 !important;
}

/* 카드 폭은 'gap'만 고려해서 균등 계산 */
.best_sec_inner .item_list.w335{
  width:auto !important;
  flex: 0 0 calc((100% - 3 * 16px) / 4);  /* 4열, 간격 16px 기준 */
  box-sizing:border-box;
}

/* 혹시모를 1~2px 줄틈 방지 */
.best_sec_inner .item_list .thumb img{
  display:block;
  vertical-align:top;
}

/* 반응형 */
@media (max-width:1199px){
  .best_sec_inner .item_list.w335{ flex:0 0 calc((100% - 2 * 16px) / 3); }
}
@media (max-width:900px){
  .best_sec_inner .item-cont{ gap:12px; }
  .best_sec_inner .item_list.w335{ flex:0 0 calc((100% - 12px) / 2); }
}


/* BASIC css end */