/* il-line-tabs: 라인형 탭(밑줄 탭)
   - 문서: docs/components/il-line-tabs.md, 예시: /ComponentGuide
   - 같은 묶음의 다른 페이지로 이동하는 링크 줄(예: A4라벨지·제트라벨·더롤라벨). 아래 회색 선 위에서 지금 페이지만 브랜드색 밑줄 + 굵은 글자로 표시한다.
   - 내용 영역과 같은 왼쪽 기준선에 둔다. 배경·그림자가 없어 화면에 떠 보이지 않는다.
   - 항목 목록이 페이지마다 달라 ViewComponent·JS 없이 클래스만 쓴다(호출부에서 링크를 그린다).
   - 값은 디자인 시스템 토큰(--il-*)과 그에 연결된 --ds-*만 쓴다. */

/* 탭 줄: 넘치면 가로로 스크롤(스크롤바는 숨김) */
.label-v5 .illinetabs {
  display: flex;
  gap: var(--il-6);
  overflow-x: auto;
  border-bottom: 1px solid var(--ds-color-border-default);
  scrollbar-width: none;
}
.label-v5 .illinetabs::-webkit-scrollbar { display: none; }

/* 탭 하나: 회색 글자. 아래 선과 겹치는 3px 밑줄 자리를 미리 비워 둔다 */
.label-v5 .illinetabs-item {
  flex: 0 0 auto;
  margin-bottom: -1px;
  padding: var(--il-3) 0;
  border-bottom: 3px solid transparent;
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-title);
  font-weight: var(--ds-font-weight-medium);
  text-align: center;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
  white-space: nowrap;
}

.label-v5 .illinetabs-item:hover {
  border-bottom-color: var(--ds-color-border-default);
  color: var(--ds-color-text-strong);
}

/* 지금 페이지: 브랜드색 글자 + 브랜드색 밑줄 + 굵은 글자(색만으로 구분하지 않는다) */
.label-v5 .illinetabs-item.is-active,
.label-v5 .illinetabs-item[aria-current="page"] {
  border-bottom-color: var(--ds-color-brand-primary);
  color: var(--ds-color-brand-primary);
  font-weight: var(--ds-font-weight-bold);
}

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

/* 좁은 휴대폰: 탭이 가로로 꽉 차도록 남는 공간을 나눠 갖고, 생략 가능한 글자(illinetabs-optional)를 숨긴다.
   글자를 숨기는 탭에는 aria-label로 전체 이름을 준다. */
@media (max-width: 575.98px) {
  .label-v5 .illinetabs { gap: 0; }
  .label-v5 .illinetabs-item {
    flex: 1 1 auto;
    padding: var(--il-3) var(--il-2);
    font-size: var(--ds-font-size-body);
  }
  .label-v5 .illinetabs-optional { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .label-v5 .illinetabs-item { transition: none; }
}