/* BASIC css start */
body #contentWrap {width:1200px;}
body .item-wrap {width:100%; margin-top:30px;}
body .cateTit {padding:0;}
body .cateTit h3 {text-align:left; font-size:20px; color:#121212; font-weight:500; margin-bottom:16px; font-family: "SUIT", sans-serif;}


#contentWrap .up_title {
  width: 100%;
  max-width: 1200px;
  margin: 5px auto 0;
  text-align: left;
  padding: 0 16px;
  box-sizing: border-box;
  font-size: 1.2rem;
}

@media screen and (max-width: 768px) {
  #contentWrap .up_title {
    margin: 20px auto 0;
    padding: 0 12px;
    font-size: 1rem;
  }
}


#contentWrap .up_title img {
  max-width: 100%;     /* 부모 너비를 넘지 않게 */
  height: auto;        /* 비율 유지하며 높이 자동 */
  display: inline-block;
}


#productClass .cate-wrap .bcate {
margin-top: 30px; /* ← 여기 추가 */
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding: 10px 0;
  text-align: left;
}


#productClass .cate-wrap {overflow:hidden;}


/* class-list */


.class-list {
    text-align: left; /* 가운데 정렬, 좌측 정렬은 left */
    margin: 0;
}

.class-list li {
    display: inline-block;
    vertical-align: top;
    margin: 5px 3px; /* 상하 10px, 좌우 12px */
}

.class-list li a {
  position: relative;  /* 오버레이용 */
  padding: 6px 14px;
  border: 1px solid #ccc;
  border-radius: 30px;
  display: block;
  font-size: 12px;
  color: #000;
  text-align: center;
  transition: color 0.3s ease;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 0;
}

/* 이미지가 있을 경우 텍스트 숨기기 */
.class-list li a:has(img) {
  font-size: 0;
  line-height: 0;
}

.class-list li a img {
  vertical-align: middle;
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.class-list li a:not(:has(img)) {
  font-size: 13px;
  line-height: 1.5;
}

.class-list li a.sel {
  color: #fff;
  font-weight: 700;
  background-color: #000;
  border-color: #000;
}

/* 오버레이용 ::after 기본값 - 투명 */
.class-list li a::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0);
  transition: background-color 0.3s ease;
  z-index: 1;
  border-radius: 10px; /* 모서리 둥글게 맞춤 */
}

/* 오버레이 나타남 + 글자색 변경 */
.class-list li a:hover {
  color: #000;
  border-color: #ccc; /* 테두리는 유지 */
}

.class-list li a:hover::after {
  background-color: rgba(0,0,0,0.1); /* 반투명 검정 오버레이 */
}

/* 오버레이 기본 상태 (이미지 있는 경우에만) */
.class-list li a:has(img)::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.3s ease;
  z-index: 1;
  border-radius: 10px;
}

/* 오버레이 호버 (이미지 있는 경우에만) */
.class-list li a:has(img):hover::after {
  background-color: rgba(0, 0, 0, 0.25);
}

/* 텍스트만 있는 경우에는 ::after 자체가 없음 = 오버레이 꺼짐 */


/* best-item */
#productClass .best-item {}
#productClass .prdList.basic.best-item ul {
  display: flex;
  flex-wrap: wrap;
  gap: 18px; /* 썸네일 사이 간격 */
  padding: 0;
  margin: 0;
  list-style: none;
  justify-content: center; /* 가운데 정렬 */
}

#productClass .prdList.basic.best-item ul li {
  width: calc((100% - 80px) / 5); /* 5개 썸네일, 20px 간격 4개 */
  box-sizing: border-box;
  margin-bottom: 30px;
}


@media screen and (max-width: 1024px) {
  #productClass .prdList.basic.best-item ul li {
    width: calc((100% - 40px) / 3); /* 3개씩 */
  }
}

@media screen and (max-width: 768px) {
  #productClass .prdList.basic.best-item ul li {
    width: calc((100% - 20px) / 2); /* 2개씩 */
  }
}


/* 상품 리스트 - 기본형 (썸네일 5개 한 줄) */
#productClass .prdList.basic ul {display: flex; flex-wrap: wrap; gap: 15px; /* 썸네일 간 간격 */
    padding: 0; margin: 0; list-style: none;}

#productClass .prdList.basic ul li { width: calc((100% - 64px) / 5); /* 한 줄에 5개 (4개의 gap 합: 64px) */
    box-sizing: border-box; margin-bottom: 30px;}

#productClass .prdList.basic ul li .imgWrap img {border: 1px solid #ddd; border-radius: 10px; transition: all 0.3s;}

#productClass .prdList.basic ul li .imgWrap img:hover { border-color: #000;}


/* total-sort */
#productClass .total-sort { padding-top: 30px; }
.sort {display:flex; align-items:center; justify-content: space-between; margin-bottom:16px;}
.item-total {display:inline-block; color:#121212; font-size:14px;}
.trxSchOrd {}
.trxSchOrd select {width:120px; height:30px; border:1px solid #ededed; border-radius:10px; appearance:none; background:url(//skin.makeshop.co.kr/skin/fragrance/pc/img/sel_down.png)no-repeat 93% center; text-indent: 10px;}

/* 하위 분류 */
#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; }


/* BASIC css end */