/* ========================================
   Embla Carousel Styles
   ======================================== */

/* 기본 Embla 컨테이너 */
.embla {
  overflow: hidden;
}

.embla__container {
  display: flex;
  touch-action: pan-y pinch-zoom;
  margin-left: calc(var(--slide-spacing, 1rem) * -1);
}

.embla__slide {
  flex: 0 0 auto;
  min-width: 0;
  padding-left: var(--slide-spacing, 1rem);
}

/* GNB 네비게이션 바를 위한 Embla 스타일 */
.navigation-bar .embla__container {
  margin-left: 0;
}

.navigation-bar .embla__slide {
  padding-left: 0;
}

/* 모바일 네비게이터를 위한 추가 설정 */
.navigator.st-free .embla {
  margin: 0;
  padding: 0;
}

.navigator.st-free .embla__container {
  margin-left: 0;
}

.navigator.st-free .embla__slide {
  padding-left: 0;
}

/* 필터 버블을 위한 Embla 스타일 */
.bubbles .embla__container {
  margin-left: 0;
}

.bubbles .embla__slide {
  padding-left: 0;
}

.bubbles .carousel-item.bubble-select.embla__slide {
  padding-left: 3.0555555556vw;
  padding-right: 3.0555555556vw;
  margin-left: 1.6666666667vw;
}

.bubbles .carousel-item.bubble-select.embla__slide:first-child {
  margin-left: 0;
}

/* carousel.st-free와 함께 사용되는 Embla 스타일 */
.carousel.st-free .embla {
  width: 100%;
}

.carousel.st-free .embla__container {
  margin-left: 0;
  width: 100%;
  height: auto;
}

.carousel.st-free .embla__slide {
  padding-left: 0;
}

.carousel.st-free .embla__slide:first-child .carousel-item {
  margin-left: 0;
}

/* iOS에서 부드러운 스크롤 지원 */
.embla__container {
  -webkit-overflow-scrolling: touch;
}

/* 데스크톱을 위한 추가 최적화 (필요시 사용) */
@media (min-width: 768px) {
  .embla__container {
    cursor: grab;
  }

  .embla__container:active {
    cursor: grabbing;
  }
}