/* il-image-tabs: 이미지가 위로 튀어나오는 폴더형 탭
   - 마크업: Views/Shared/Components/IlImageTabs/Default.cshtml, 동작: /js/components/il-image-tabs.js, 문서: docs/components/il-image-tabs.md
   - CSS 격리(.cshtml.css)는 이 프로젝트의 런타임 컴파일과 함께 동작하지 않아 쓰지 않는다. 모든 클래스는 iltabs- 접두사로 구분한다.
   - 값은 디자인 시스템 토큰(--il-*)과 그에 연결된 --ds-*만 쓴다.
   - 모양: 선택한 탭은 흰 바탕에 브랜드색 테두리(아래는 열림)와 브랜드색 굵은 글자, 나머지 탭은 회색 바탕에 아래쪽 브랜드색 선.
     테두리 모양·굵기·이미지 선명도로도 구분해 색만으로 구분하지 않는다.
   - 글자와 이미지는 한 묶음으로 탭 가운데에 두고, 이미지는 글자 바로 오른쪽에서 위로 튀어나온다.
   - 탭 목록은 아래 카드의 윗선(1px)에 겹치도록 margin-bottom: -1px을 둔다. 카드의 위쪽 모서리는 호출부에서 직각으로 맞춘다. */

.label-v5 .iltabs {
  --iltabs-tab-h: 4.75rem;
  --iltabs-image-h: 7.5rem;
  --iltabs-image-w: 7.5rem;
  /* 이미지를 글자 묶음보다 오른쪽으로 더 내보내는 거리 */
  --iltabs-image-shift: var(--il-4);
  --iltabs-line: var(--ds-color-brand-primary);
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin-bottom: -1px;
  /* 이미지가 탭 위로 튀어나오는 만큼 공간을 남긴다 */
  padding-top: calc(var(--iltabs-image-h) - var(--iltabs-tab-h));
}

.label-v5 .iltabs-tab {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: var(--iltabs-tab-h);
  align-items: stretch;
  justify-content: center;
  padding: 0 var(--il-3);
  border: 1px solid var(--ds-color-border-default);
  border-bottom-color: var(--iltabs-line);
  /* 위 모서리: 디자인 시스템 원본 --il-r-2xl(20px). 아래는 카드와 이어지므로 직각 */
  border-radius: var(--il-r-2xl) var(--il-r-2xl) 0 0;
  /* 회색 띠(--il-gray-100) 위에서도 구분되도록 한 단계 밝게 둔다 */
  background: var(--il-gray-50);
  color: var(--ds-color-text-default);
  text-align: center;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

/* 이웃한 탭의 테두리가 두 줄로 겹쳐 보이지 않게 한다 */
.label-v5 .iltabs-tab + .iltabs-tab {
  margin-left: -1px;
}

.label-v5 .iltabs-tab:hover {
  background: var(--ds-color-surface-default);
  color: var(--ds-color-text-strong);
}

.label-v5 .iltabs-tab[aria-selected="true"] {
  z-index: 1;
  border-color: var(--iltabs-line);
  border-bottom-color: var(--ds-color-surface-default);
  background: var(--ds-color-surface-default);
  color: var(--ds-color-brand-primary);
  cursor: default;
}

.label-v5 .iltabs-tab:focus-visible {
  z-index: 2;
  outline: 3px solid var(--ds-color-focus);
  outline-offset: 2px;
}

.label-v5 .iltabs-inner {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  padding: var(--il-3) 0;
}

.label-v5 .iltabs-inner--image {
  padding-right: calc(var(--iltabs-image-w) + var(--il-2));
}

.label-v5 .iltabs-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--il-1);
}

.label-v5 .iltabs-title {
  font-size: var(--ds-font-size-title);
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--il-lh-tight);
}

.label-v5 .iltabs-tab[aria-selected="true"] .iltabs-title {
  font-weight: var(--ds-font-weight-bold);
}

.label-v5 .iltabs-description {
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-meta);
  line-height: var(--il-lh-tight);
}

.label-v5 .iltabs-image {
  position: absolute;
  right: calc(var(--iltabs-image-shift) * -1);
  bottom: var(--il-1);
  width: var(--iltabs-image-w);
  height: var(--iltabs-image-h);
  object-fit: contain;
  object-position: bottom center;
  /* 비선택: 투명도를 쓰면 뒤 테두리·배경이 비쳐 보이므로, 불투명한 채로 흑백 + 살짝 밝게만 한다 */
  filter: grayscale(1) brightness(1.1) contrast(.85);
  pointer-events: none;
  transition: filter .2s ease, transform .2s ease;
}

.label-v5 .iltabs-tab:hover .iltabs-image {
  filter: grayscale(.4);
  transform: translateY(-2px);
}

.label-v5 .iltabs-tab[aria-selected="true"] .iltabs-image {
  filter: none;
  transform: none;
}

@media (max-width: 575.98px) {
  .label-v5 .iltabs {
    --iltabs-tab-h: 4rem;
    --iltabs-image-h: 5rem;
    --iltabs-image-w: 4.5rem;
    --iltabs-image-shift: var(--il-2);
  }

  .label-v5 .iltabs-tab {
    padding: 0 var(--il-2);
  }

  .label-v5 .iltabs-inner--image {
    padding-right: calc(var(--iltabs-image-w) + var(--il-1));
  }

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

  .label-v5 .iltabs-description {
    font-size: var(--ds-font-size-caption);
  }
}

@media (prefers-reduced-motion: reduce) {
  .label-v5 .iltabs-tab,
  .label-v5 .iltabs-image {
    transition: none;
  }

  .label-v5 .iltabs-tab:hover .iltabs-image {
    transform: none;
  }
}