.index-special-planner {
  padding-right: var(--spacing-2xl);
  padding-left: var(--spacing-2xl);
}

.index-special-planner__inner {
  min-width: 0;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl) 0 var(--spacing-4xl);
}

.index-special-planner__carousel {
  min-width: 0;
  gap: var(--spacing-md);
}

.index-special-planner__stage {
  width: 100%;
  height: 555px;
  aspect-ratio: auto;
  overflow: hidden;
}

.index-special-planner__slide,
.index-special-planner__slide.is-active,
.index-special-planner__slide.is-prev,
.index-special-planner__slide.is-next {
  top: 50%;
  left: 50%;
  width: auto;
  height: 555px;
  box-sizing: border-box;
  aspect-ratio: auto;
  border: var(--stroke-1) solid var(--semantic-bg-hover, #e8e8e8);
  /* opacity: 0; */
  transform: translate(-50%, -50%);
  transition:
    left 420ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 240ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.index-special-planner__slide.is-active {
  z-index: 3;
  opacity: 1;
}

.index-special-planner__slide.is-prev {
  left: calc(50% - 750px);
  /* opacity: 0.25; */
}

.index-special-planner__slide:not(.swiper-slide-active) .index-special-planner__thumbnail {
  opacity: 0.25;
}

.index-special-planner__slide.is-next {
  left: calc(50% + 750px);
  /* opacity: 0.25; */
}

.index-special-planner__open {
  top: 9px;
  right: 9px;
}

.index-special-planner__nav {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.index-special-planner__nav::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xs);
  background: var(--badge-alpha-b-10);
  content: '';
  transform: translate(-50%, -50%);
}

.index-special-planner__nav--prev {
  left: var(--spacing-base);
}

.index-special-planner__nav--next {
  right: var(--spacing-base);
}

.index-special-planner__nav img {
  position: relative;
  width: 64px;
  flex: 0 0 64px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .index-special-planner {
    padding-right: 28px;
    padding-left: 28px;
  }

  .index-special-planner__stage {
    min-height: 0;
    aspect-ratio: auto;
  }
}

@media (max-width: 767px) {
  .index-special-planner {
    padding: 0 20px;
  }

  .index-special-planner__inner {
    gap: 14px;
    padding: var(--spacing-base) 0 var(--spacing-2xl);
  }

  .index-special-planner__heading h2 {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-22);
  }

  .index-special-planner__heading p {
    margin-top: var(--spacing-micro);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-16);
  }

  .index-special-planner__carousel {
    gap: 10px;
  }

  .index-special-planner__stage {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .index-special-planner__slide,
  .index-special-planner__slide.is-active,
  .index-special-planner__slide.is-prev,
  .index-special-planner__slide.is-next {
    left: 50%;
    display: none;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translate(-50%, -50%);
  }

  .index-special-planner__slide.is-active {
    display: block;
    opacity: 1;
  }

  .index-special-planner__open {
    top: 10px;
    right: 10px;
  }

  .index-special-planner__nav {
    width: 46px;
    height: 46px;
  }

  .index-special-planner__nav--prev {
    left: 0;
  }

  .index-special-planner__nav--next {
    right: 0;
  }

  .index-special-planner__nav img {
    width: 46px;
  }

  .index-special-planner__captions {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-16);
  }
}

.index-special-planner__stage.swiper {
  overflow: hidden;
}

.index-special-planner__track.swiper-wrapper {
  align-items: center;
}

.index-special-planner__stage.swiper .index-special-planner__slide.swiper-slide {
  position: relative;
  top: auto;
  left: auto;
  z-index: 1;
  display: block;
  width: 740px;
  height: 555px;
  /* opacity: 0.25; */
  transform: none;
  transition: opacity 240ms ease;
  will-change: auto;
}

.index-special-planner__stage.swiper .index-special-planner__slide.swiper-slide-active {
  z-index: 2;
  opacity: 1;
}

@media (max-width: 767px) {
  .index-special-planner__stage.swiper .index-special-planner__slide.swiper-slide {
    width: 100%;
    height: 100%;
  }
}


/* 2026-10-27 Figma 02.index 모바일 — 좌우 버튼(nav-chevron 1102:107632)
   2026-10-28: 26px 상자(검정 10%) + 모바일 전용 흰 화살표(`mv-prev/next-mobile.svg`, <picture>) —
   PC 64px 회색 아이콘을 24px 로 줄이면 선이 0.4px 가 되어 안 보였다. */
@media (max-width: 767px) {
  .index-special-planner__nav {
    width: 26px;
    height: 26px;
  }

  .index-special-planner__nav picture {
    display: flex;
  }

  .index-special-planner__nav img {
    width: 26px;
    flex-basis: 26px;
  }
}