/* il-chip: 둥근(알약형) 선택 칩
   - 문서: docs/components/il-chip.md, 예시: /ComponentGuide
   - 요소 하나짜리 컴포넌트라 ViewComponent 없이 클래스만 쓴다. <button>(화면 안 선택)과 <a>(필터 링크) 모두 쓸 수 있다.
   - 선택 상태: 버튼은 aria-pressed="true", 링크는 aria-current="true". 별도 active 클래스는 쓰지 않는다.
   - 색·굵기·선택 모양은 메인 "라벨 제품군" 버튼(.finder-choice)과 같다. 모서리만 완전히 둥글다.
   - 값은 디자인 시스템 토큰(--il-*)과 그에 연결된 --ds-*만 쓴다. */

.label-v5 .ilchip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--il-2);
}

.label-v5 .ilchip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--il-1);
  padding: var(--il-2) var(--il-3);
  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-default);
  font-size: var(--ds-font-size-meta);
  font-weight: var(--ds-font-weight-bold);
  line-height: var(--il-lh-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* 마우스 올림·선택은 메인 "라벨 제품군" 버튼(.finder-choice)과 같은 색을 쓴다 */
.label-v5 .ilchip:hover:not(:disabled),
.label-v5 .ilchip[aria-pressed="true"],
.label-v5 .ilchip[aria-current="true"] {
  border-color: var(--ds-color-brand-primary);
  background: var(--ds-color-brand-subtle);
  color: var(--ds-color-brand-primary);
}

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

/* 고를 수 없는 칩(예: 판매 중인 제품 없음). 버튼은 disabled 속성으로 표시한다. */
.label-v5 .ilchip:disabled {
  border-color: var(--ds-color-border-default);
  background: var(--ds-color-surface-page);
  color: var(--ds-color-text-muted);
  cursor: not-allowed;
}

.label-v5 .ilchip:disabled .ilchip-icon { opacity: .5; }

/* 칩 앞의 작은 아이콘(예: 태그 유형 그림). 장식이므로 alt=""로 둔다. */
.label-v5 .ilchip-icon {
  flex-shrink: 0;
  width: var(--il-6);
  height: var(--il-6);
  object-fit: contain;
}

/* 고정 칩: 누를 수 없는 표시용(예: 선택 조건의 제품군). <span>으로 쓴다. 마우스를 올려도 바뀌지 않는다 */
.label-v5 .ilchip.ilchip--static,
.label-v5 .ilchip.ilchip--static:hover {
  border-color: var(--ds-color-border-default);
  background: var(--ds-color-surface-page);
  color: var(--ds-color-text-default);
  cursor: default;
}

/* 지우기 칩: 적용된 조건. 칩 자체는 <span>이고 안의 X 버튼(.ilchip-remove)만 누를 수 있다 */
.label-v5 .ilchip.ilchip--removable,
.label-v5 .ilchip.ilchip--removable:hover {
  gap: 0;
  padding-right: var(--il-1);
  border-color: var(--ds-color-brand-primary);
  background: var(--ds-color-brand-subtle);
  color: var(--ds-color-brand-primary);
  cursor: default;
}

.label-v5 .ilchip-remove {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--il-6);
  height: var(--il-6);
  margin: calc(var(--il-1) * -1) 0 calc(var(--il-1) * -1) var(--il-1);
  padding: 0;
  border: 0;
  border-radius: var(--il-r-max);
  background: transparent;
  color: inherit;
  font-size: var(--ds-font-size-body);
  line-height: 1;
  cursor: pointer;
}

.label-v5 .ilchip-remove:hover {
  background: var(--ds-color-brand-primary);
  color: var(--ds-color-on-brand);
}

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

/* 칩 안의 개수 등 보조 숫자 */
.label-v5 .ilchip-count {
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-caption);
  font-weight: var(--ds-font-weight-regular);
}

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