/* il-link: 밑줄 텍스트 링크
   - 문서: docs/components/il-link.md, 예시: /ComponentGuide
   - 카드·안내 문장 끝의 "~ 안내", "~ 시작하기" 같은 가벼운 이동 링크. 버튼(il-button)보다 약하고, 본문 링크보다 강하다.
   - 요소 하나짜리라 ViewComponent·JS 없이 클래스만 쓴다. <a>에 붙인다.
   - 값은 디자인 시스템 토큰(--il-*)과 그에 연결된 --ds-*만 쓴다. */

/* 기본: 진한 글자 + 진한 밑줄 */
.label-v5 .illink {
  display: inline-flex;
  align-items: center;
  gap: var(--il-1);
  padding-bottom: var(--il-1);
  border-bottom: 1px solid currentColor;
  color: var(--ds-color-text-strong);
  font-size: var(--ds-font-size-meta);
  font-weight: var(--ds-font-weight-bold);
  line-height: var(--il-lh-tight);
  text-decoration: none;
  transition: color .18s ease;
}

.label-v5 .illink:hover {
  color: var(--ds-color-brand-primary);
}

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

/* 보조: 회색 글자. 같은 자리에 링크가 두 개일 때 덜 중요한 쪽 */
.label-v5 .illink--muted {
  color: var(--ds-color-text-muted);
  font-weight: var(--ds-font-weight-regular);
}

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