.index-hero {
  display: flex;
  justify-content: center;
  padding-right: var(--spacing-2xl);
  padding-left: var(--spacing-2xl);
}

.index-hero__swiper {
  width: 100%;
  max-width: 1280px;
  margin: 0;
  overflow: visible;
}

.index-hero__slide {
  width: 640px;
  height: 480px;
  flex: 0 0 640px;
  aspect-ratio: auto;
}

.index-hero__open-icon {
  top: var(--spacing-sm);
  right: var(--spacing-sm);
}

@media (min-width: 1025px) {
  .index-hero {
    padding-right: 0;
    padding-left: 0;
  }

  .index-hero__swiper {
    width: 100%;
    max-width: none;
  }

  .index-hero__slide {
    width: calc(100% / 3);
    flex-basis: calc(100% / 3);
  }
}

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

@media (max-width: 767px) {
  .index-hero {
    padding-right: var(--spacing-sm);
    padding-left: var(--spacing-sm);
  }

  .index-hero__slide {
    width: 100vw;
    height: calc(100vw * 0.7487179487);
    flex-basis: 100vw;
    border-radius: 0;
  }

  .index-hero__nav {
    width: 26px;
    height: 26px;
  }

  .index-hero__open-icon {
    top: var(--spacing-sm);
    right: 14px;
    width: 26px;
    height: 26px;
  }

  .index-hero__open-icon img {
    width: 26px;
  }

  .index-hero__pagination {
    gap: var(--spacing-md);
  }
}

/* 2026-10-27 Figma 02.index — 좌우 화살표 SVG(64×65 상자 안 꺾쇠)를 버튼 크기로 그린다.
   8px 로 줄여 꺾쇠가 거의 안 보였다(모바일 26 · PC 64). */
.index-hero__nav img {
  width: 100%;
  height: auto;
}

/* 2026-10-30 요청 — ① 진행 막대 없음, 가운데 아래 «1 / N» 페이지 번호만.
   ② 사진 비율 4:3 유지 — 예전엔 높이 480 고정에 폭만 1/3 로 줄어 1025~1919px 에서 찌그러졌다(1100px 367×480).
   ③ 태블릿(768~1024)은 모바일처럼 가운데 장을 크게, 좌우 장은 조금만(양옆 약 32px) 보이게. */
.index-hero__progress {
  display: none;
}

.index-hero__pagination {
  width: auto;
  gap: 0;
}

.index-hero__page span:first-child,
.index-hero__page span:last-child {
  width: auto;
  min-width: 14px;
}

.index-hero__page span:nth-child(2) {
  padding: 0 2px;
}

/* 2026-10-30 재요청 — 폭 구간마다 크기가 «툭» 바뀌지 않게 한 공식으로:
   가운데 장 = min(«화면 − 양옆 여백», max(640px, 1/3)) · 4:3.
   · 1920px 이상: 1/3(Figma — 세 장 꽉 참) · 그 아래는 640px 를 유지하며 좌우 장이 화면이 줄수록 서서히 좁아진다
   · 약 720px 이하: 가운데 장이 화면에 맞춰 줄고 좌우 여백도 함께 줄어 480px 이하는 0(휴대폰 한 장 — 2026-10-30 아이폰 프로맥스 430px 에서 좌우가 4px 보이던 것) */
.index-hero {
  padding-right: 0;
  padding-left: 0;
}

.index-hero__swiper {
  max-width: none;
}

.index-hero__slide,
.index-hero__slide:only-child {
  width: min(calc(100% - clamp(0px, (100vw - 480px) * 0.2, 80px)), max(640px, calc(100% / 3)));
  height: auto;
  flex-basis: auto;
  aspect-ratio: 4 / 3;
}

/* 2026-11-02 Figma 02.index «carousel › pagination»(1920 1344:105726 · 1024 1344:106032 · 390 1344:106434)
   — 사진 «아래» 18px 띠 가운데에 짧은 막대(20×2 · 간격 4 · 지금 장 #1a1a1a · 나머지 검정 20%).
   예전 «1 / N»(사진 위 흰 글자)은 숨긴다 — 읽기 프로그램용으로만 남긴다. */
.index-hero__swiper {
  padding-bottom: 18px;
}

.index-hero__pagination {
  top: auto;
  right: auto;
  bottom: 0;
  left: 50%;
  width: auto;
  height: 18px;
  padding: 0;
  justify-content: center;
  transform: translateX(-50%);
}

.index-hero__bars {
  display: flex;
  gap: 4px;
}

.index-hero__bar {
  display: block;
  width: 20px;
  height: 2px;
  background: rgba(0, 0, 0, 0.2);
  transition: background-color 200ms ease;
}

.index-hero__bar.is-active {
  background: var(--neutral-tx1-hero, #1a1a1a);
}

.index-hero__page {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}