.index-banner {
  padding: 0 var(--spacing-2xl);
}

.index-banner__inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--spacing-2xl) 0;
}

.index-banner__media {
  display: block;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.index-banner__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

  .index-banner__media {
    height: 120px;
  }
}

/* 2026-10-27 사용자 결정 — 배너는 높이를 정하지 않고 이미지 가로 비율대로 보인다(PC·모바일 공통).
   문구는 이미지에 넣어 올린다(HQ «메인 가로 배너» 한 장). */
.index-banner__media,
.index-banner .index-banner__media {
  height: auto;
}

.index-banner__image {
  display: block;
  height: auto;
  object-fit: initial;
}

/* 2026-10-27 Figma 02.index — 섹션 여백: PC 위 24 · 아래 64(섹션 368 = 24 + 280 + 64) / 모바일 위 0 · 아래 40(214 = 174 + 40) */
.index-banner__inner {
  padding: 24px 0 64px;
}

@media (max-width: 767px) {
  .index-banner__inner {
    padding: 0 0 40px;
  }
}