@charset "utf-8";



.layerPopup {

    min-width: 300px;

}



/* 메인 페이지 > 추가 할인 혜택 */

.promotion-highlight {

  background-color: yellow;

  color: black;

  font-weight: bold;

  font-size: 14px;

  padding: 6px 10px;

  border-radius: 4px;

  display: inline-block;

}



/* 추가 할인 혜택 페이지 > 추가 할인 혜택 */



/* 공통 스타일 */



.couponPack.type02 {

  gap: 10px;

  padding: 10px 0;

  margin: 0;

  list-style: none;

  overflow: hidden;   /* 기본적으로 스크롤 숨김 */

}



.couponPack.type02 li {

  flex: 0 0 auto;

  width: 240px;

  background: none;        /* ✅ 흰 배경 제거 */

  border-radius: 0;        /* ✅ 이미지에만 border-radius 주도록 */

  box-shadow: none;        /* ✅ 필요 없으면 제거 */

}



.couponPack.type02 li img {

  width: 100%;

  display: block;

  border-radius: 10px 10px 0 0;

}



.couponPack.type02 .title {

  padding: 10px;

  font-size: 14px;

  font-weight: bold;

  color: #333;

  text-align: center;

}



/* 배너가 4개 이상일 때만 슬라이드 활성화 */

.couponPack.scrollable {

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  -webkit-overflow-scrolling: touch;

}



.couponPack.scrollable li {

  scroll-snap-align: start;

}



/* li {

  position: relative;

  width: 240px;

  border-radius: 10px;

  overflow: hidden;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

  flex-shrink: 0;

} */



.image-banner {

  display: block;

  position: relative;

}



.image-banner img {

  width: 100%;

  display: block;

}



.title-overlay {

  position: absolute;

  bottom: 0;

  width: 100%;

  background: rgba(255, 255, 255, 0.8); /* 배경 흐림 효과 */

  color: #0000FF;

  font-weight: bold;

  font-size: 13px;

  text-align: center;

  padding: 8px 5px;

}



.section-divider {

  border: none;

  border-top: 1px solid #bbb;  /* 살짝 더 강조된 회색 선 */

}