/* BASIC css start */
.class-list { position: relative; margin: 0 0 25px 20px !important; box-sizing: border-box; } 
.class-list ul li { width:auto !important; } 
.class-list ul li a { display: inline-block; font-size: 12px; color: #999; padding: 10px 14px; text-align: center; background: #f9f9f9; border-radius: 100px; } 
.class-list ul li a.sel { background:#fc613c; color:#fff; } 
.swiper-pagination { bottom: 0; text-align:center; color: #ccc; font-size:18px; display: flex; justify-content: center; align-items: center; } 
.swiper-pagination-bullet { width: 3px !important; height: 3px !important; opacity:1 !important; background: #ccc !important; margin:0 6px !important; position:relative; box-sizing:border-box; border-radius: 3px; } 
.swiper-pagination-bullet-active { background: #eb9595 !important; width: 6px !important; height: 6px !important; } 

/* 프로모션 상품 */
.area_wrap { border-bottom:1px solid #eee; padding-bottom: 40px; } 
.area_wrap .item-cont { padding:0 !important; } 
.product_top_wrap { margin: 0 20px 20px !important; padding: 0 !important; border-bottom: 0 !important; } 
.product_top_wrap .total_cnt { color: #aaa; } 
.product_top_wrap .total_cnt strong { color: #222; } 
.product_top_wrap .select_box select { border: 1px solid #e6e6e6 !important; text-align: left !important; } 
.pd_list_wrap { margin-bottom:0; } 


/* 상품 리스트 아이템 구조 유연하게 조정 */
.item-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: auto;
}

/* 상품 이름: 두 줄까지 보여주고 넘치면 말줄임 */
.prd-name {
  min-height: 38px;
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 맞춤제작 라벨이 포함된 경우 스타일 지정 (상품명과 별도 관리 추천) */
.prd-label {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  font-size: 12px;
  background-color: #ffe5e5;
  color: #c00;
  border-radius: 4px;
  line-height: 1.2;
}

/* 가격 영역: 최소한의 높이로 보장 */
.prd-price {
  min-height: 30px;
  margin-top: auto;
}


.image-container {
  position: relative;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  display: block;
  border-radius: 8px;
}

/* 색상 표시 오버레이 */
.prd-color-overlay {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 6px;
  border-radius: 4px;
}

.prd-color-overlay li font {
  font-size: 14px;
}


.color-box {
    font-size: 17px; /* 네모 크기 조절 */
    line-height: 1;  /* 필요 시 세로 정렬 보정 */
    margin-right: 2px; /* 색상 간 간격 */
}
/* BASIC css end */