/* il-banner-slider: 한 장씩 넘기는 세로형 배너
   - 마크업: Views/Shared/Components/IlBannerSlider/Default.cshtml, 동작: /js/components/il-banner-slider.js, 문서: docs/components/il-banner-slider.md
   - CSS 격리(.cshtml.css)는 이 프로젝트의 런타임 컴파일과 함께 동작하지 않아 쓰지 않는다. 모든 클래스는 ilbanner- 접두사로 구분한다.
   - 값은 디자인 시스템 토큰(--il-*)과 그에 연결된 --ds-*만 쓴다.
   - 부모 높이를 채운다(height: 100%). 부모 높이가 정해지지 않으면 내용 높이를 따른다.
   - 가로로 밀어 넘길 수 있게 scroll-snap 트랙을 쓰고, 버튼·자동 넘김은 JS가 트랙을 스크롤한다. */

.label-v5 .ilbanner {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface-default);
}

.label-v5 .ilbanner-track {
  display: flex;
  flex: 1 1 auto;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.label-v5 .ilbanner-track::-webkit-scrollbar {
  display: none;
}

.label-v5 .ilbanner-slide {
  position: relative;
  display: flex;
  flex: 0 0 100%;
  min-width: 0;
  flex-direction: column;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.label-v5 .ilbanner-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--il-gray-100);
}

.label-v5 .ilbanner-media picture,
.label-v5 .ilbanner-media img {
  display: block;
  width: 100%;
  height: 100%;
}

.label-v5 .ilbanner-media img {
  object-fit: cover;
}

/* 제품 이미지가 있는 배너(.ilbanner-slide--product): 카드 전체를 연한 브랜드색 배너로 쓰고,
   글(배지·제목·설명·링크)은 왼쪽 위, 배경을 뺀 제품 PNG는 오른쪽 아래 모서리에 붙여 놓는다.
   라벨지 이미지는 오른쪽·아래가 잘린 사진이라 모서리에 붙이면 카드 밖으로 이어지는 것처럼 보인다.
   마우스 올림 효과는 없다. 그림자는 사물 모양을 따라가는 drop-shadow이고 값은 원본 Shadow 2(0 3px 12px rgba(0,0,0,.16))와 같다
   (--il-shadow-2는 퍼짐 값이 있어 drop-shadow에 넣을 수 없다). */
.label-v5 .ilbanner-slide--product {
  min-height: 22rem;
  overflow: hidden;
  /* 바탕색은 배너마다 호출부에서 --ilbanner-bg로 넘긴다(IlBannerSlide.BackgroundColor). 없으면 연한 브랜드색 */
  background: var(--ilbanner-bg, var(--ds-color-brand-subtle));
}

/* 어두운 바탕 배너(IlBannerSlide.IsDarkBackground): 배지·제목·설명·링크를 흰색으로 바꿔 대비를 지킨다 */
.label-v5 .ilbanner-slide--dark .ilbanner-badge,
.label-v5 .ilbanner-slide--dark .ilbanner-title,
.label-v5 .ilbanner-slide--dark .ilbanner-description,
.label-v5 .ilbanner-slide--dark .ilbanner-link {
  color: var(--il-white);
}

.label-v5 .ilbanner-slide--dark:has(.ilbanner-link:focus-visible) {
  outline-color: var(--il-white);
}

.label-v5 .ilbanner-slide--product .ilbanner-body {
  position: relative;
  z-index: 1;
}

.label-v5 .ilbanner-slide--product .ilbanner-title {
  font-size: var(--ds-font-size-heading);
}

.label-v5 .ilbanner-media--product {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 80%;
  height: 58%;
  aspect-ratio: auto;
  overflow: visible;
  background: none;
  pointer-events: none;
}

.label-v5 .ilbanner-media--product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, .16));
}

/* 배경이 있는 사진 배너(.ilbanner-slide--cover): 제품 배너와 같은 크기로 카드 전체를 사진으로 채운다.
   글은 위쪽에 두고, 사진이 밝아도 읽히도록 위에서 아래로 옅어지는 검은 그라데이션을 깔고 흰 글자로 쓴다.
   그라데이션 색은 토큰에 투명도 단계가 없어 검정(rgba 0,0,0)에 투명도만 준다. */
.label-v5 .ilbanner-slide--cover {
  min-height: 22rem;
  overflow: hidden;
  background: var(--il-gray-100);
}

.label-v5 .ilbanner-media--cover {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  pointer-events: none;
}

.label-v5 .ilbanner-media--cover::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .15) 55%, rgba(0, 0, 0, .35) 100%);
}

.label-v5 .ilbanner-media--cover img {
  object-fit: cover;
}

.label-v5 .ilbanner-slide--cover .ilbanner-body {
  position: relative;
  z-index: 1;
}

.label-v5 .ilbanner-slide--cover .ilbanner-title {
  font-size: var(--ds-font-size-heading);
}

.label-v5 .ilbanner-slide--cover .ilbanner-badge,
.label-v5 .ilbanner-slide--cover .ilbanner-title,
.label-v5 .ilbanner-slide--cover .ilbanner-description,
.label-v5 .ilbanner-slide--cover .ilbanner-link {
  color: var(--il-white);
}

.label-v5 .ilbanner-slide--cover:has(.ilbanner-link:focus-visible) {
  outline-color: var(--il-white);
}

@media (max-width: 575.98px) {
  .label-v5 .ilbanner-slide--product,
  .label-v5 .ilbanner-slide--cover {
    min-height: 18rem;
  }

  .label-v5 .ilbanner-slide--cover .ilbanner-title {
    font-size: var(--ds-font-size-title-lg);
  }

  .label-v5 .ilbanner-slide--product .ilbanner-title {
    font-size: var(--ds-font-size-title-lg);
  }

  .label-v5 .ilbanner-media--product {
    width: 70%;
    height: 55%;
  }
}

.label-v5 .ilbanner-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--il-2);
  padding: var(--il-6);
}

/* 배지·링크는 브랜드 빨강 대신 진한 글자색(검정 계열 토큰)을 쓴다. 배너마다 바탕색이 달라 빨강이 바탕과 부딪히지 않게 한다 */
.label-v5 .ilbanner-badge {
  color: var(--ds-color-text-strong);
  font-size: var(--ds-font-size-caption);
  font-weight: var(--ds-font-weight-bold);
}

.label-v5 .ilbanner-title {
  margin: 0;
  color: var(--ds-color-text-strong);
  font-size: var(--ds-font-size-title-lg);
  font-weight: var(--ds-font-weight-bold);
  line-height: var(--il-lh-tight);
  word-break: keep-all;
}

.label-v5 .ilbanner-description {
  margin: 0;
  color: var(--ds-color-text-default);
  font-size: var(--ds-font-size-meta);
  line-height: var(--il-lh-normal);
  word-break: keep-all;
}

.label-v5 .ilbanner-link {
  display: inline-flex;
  align-items: center;
  gap: var(--il-2);
  margin-top: auto;
  padding-top: var(--il-4);
  color: var(--ds-color-text-strong);
  font-size: var(--ds-font-size-meta);
  font-weight: var(--ds-font-weight-bold);
  text-decoration: none;
}

/* 배너 전체를 누를 수 있게 링크 영역을 카드 전체로 넓힌다 */
.label-v5 .ilbanner-link::after {
  position: absolute;
  inset: 0;
  content: "";
}

/* 배너는 마우스 올림 효과를 두지 않는다(카드 전체가 링크라 커서 모양으로 충분하다). 키보드 포커스 표시는 아래에 둔다 */
.label-v5 .ilbanner-link:focus-visible {
  outline: none;
}

.label-v5 .ilbanner-slide:has(.ilbanner-link:focus-visible) {
  outline: 3px solid var(--ds-color-focus);
  outline-offset: -3px;
}

.label-v5 .ilbanner-controls {
  display: flex;
  align-items: center;
  gap: var(--il-2);
  padding: var(--il-3) var(--il-4);
  border-top: 1px solid var(--ds-color-border-default);
}

.label-v5 .ilbanner-counter {
  margin-right: auto;
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-meta);
  font-variant-numeric: tabular-nums;
}

.label-v5 .ilbanner-counter strong {
  color: var(--ds-color-text-strong);
  font-weight: var(--ds-font-weight-bold);
}

.label-v5 .ilbanner-button {
  display: inline-grid;
  width: var(--il-10);
  height: var(--il-10);
  place-items: center;
  padding: 0;
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--il-r-max);
  background: var(--ds-color-surface-default);
  color: var(--ds-color-text-strong);
  font-size: var(--ds-font-size-body);
}

.label-v5 .ilbanner-button:hover {
  border-color: var(--il-gray-400);
  background: var(--il-gray-50);
}

.label-v5 .ilbanner-button:focus-visible {
  outline: 3px solid var(--ds-color-focus);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .label-v5 .ilbanner-body {
    padding: var(--il-4);
  }

  .label-v5 .ilbanner-title {
    font-size: var(--ds-font-size-title);
  }
}