/* il-action-link: 아이콘 + 제목 + 설명 + 화살표가 있는 흰 줄 카드형 이동 링크
   - 문서: docs/components/il-action-link.md, 예시: /ComponentGuide
   - "크기로 찾기", "자주 묻는 질문"처럼 다른 페이지로 보내는 선택지 목록에 쓴다.
     밑줄 글자 링크(il-link)보다 강하고, 주 행동 버튼(il-button .btn-primary)보다 약하다.
   - 그림이 있는 큰 카드는 ilaction--card + ilaction-image.
   - 요소 하나짜리라 ViewComponent·JS 없이 클래스만 쓴다. <a>에 붙인다.
   - 값은 디자인 시스템 토큰(--il-*)과 그에 연결된 --ds-*만 쓴다. */

/* 목록: 링크를 세로로 쌓는다 */
.label-v5 .ilaction-list {
  display: grid;
  align-content: start;
  gap: var(--il-2);
}

/* 링크 하나: 흰 바탕 + 회색 테두리. 색은 아이콘과 마우스 올림에만 쓴다 */
.label-v5 .ilaction {
  display: flex;
  align-items: center;
  gap: var(--il-4);
  padding: var(--il-4) var(--il-5);
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-surface-default);
  color: var(--ds-color-text-strong);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}

.label-v5 .ilaction-icon {
  flex: 0 0 auto;
  color: var(--ds-color-brand-primary);
  font-size: var(--ds-font-size-title-lg);
}

.label-v5 .ilaction-text {
  display: grid;
  flex: 1;
  min-width: 0;
}

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

.label-v5 .ilaction-desc {
  color: var(--ds-color-text-muted);
  font-size: var(--ds-font-size-meta);
}

.label-v5 .ilaction-arrow {
  flex: 0 0 auto;
  color: var(--ds-color-text-muted);
  transition: transform .18s ease, color .18s ease;
}

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

.label-v5 .ilaction:hover .ilaction-arrow {
  color: var(--ds-color-brand-primary);
  transform: translateX(3px);
}

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

/* 한 줄 고정: 제목·설명을 줄바꿈하지 않고 넘치면 "…"로 줄인다.
   나란한 목록에서 모든 링크 높이를 같게 맞출 때 쓴다. 설명이 잘리면 안 되는 곳(양식 다운로드 안내 등)에는 쓰지 않는다. */
.label-v5 .ilaction--nowrap .ilaction-title,
.label-v5 .ilaction--nowrap .ilaction-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 큰 카드(ilaction--card): 제목(+화살표) → 설명 → 그림을 가운데 정렬로 세로로 쌓는다.
   그림으로 차이를 보여 줘야 하는 선택지(예: 프린터 방식별 라벨)에 쓴다. 아이콘(ilaction-icon) 대신 그림(ilaction-image)을 넣고,
   화살표는 제목 안에 둔다. 767px 이하에서는 그림을 왼쪽에 작게 두는 가로 카드가 된다. */
.label-v5 .ilaction--card {
  flex-direction: column;
  gap: 0;
  padding: var(--il-5) var(--il-6);
  border-radius: var(--ds-radius-lg);
  text-align: center;
}
.label-v5 .ilaction--card .ilaction-text { flex: 0 0 auto; gap: var(--il-2); }
.label-v5 .ilaction--card .ilaction-title { font-size: var(--ds-font-size-title-lg); }
.label-v5 .ilaction--card .ilaction-desc { color: var(--ds-color-text-default); font-size: var(--ds-font-size-body); }
.label-v5 .ilaction--card .ilaction-arrow { display: inline-block; margin-left: var(--il-1); font-size: .85em; }
.label-v5 .ilaction-image {
  display: block;
  width: 100%;
  max-width: 12rem;
  height: auto;
  /* 나란한 카드끼리 그림 높이를 맞추도록 카드 바닥에 붙인다 */
  margin-top: auto;
  padding-top: var(--il-2);
}

@media (max-width: 767.98px) {
  .label-v5 .ilaction--card {
    flex-direction: row;
    gap: var(--il-4);
    padding: var(--il-4);
    text-align: left;
  }
  .label-v5 .ilaction--card .ilaction-text { flex: 1; gap: var(--il-1); }
  .label-v5 .ilaction--card .ilaction-title { font-size: var(--ds-font-size-title); }
  .label-v5 .ilaction--card .ilaction-image { flex: 0 0 9rem; order: -1; width: 9rem; margin-top: 0; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .label-v5 .ilaction,
  .label-v5 .ilaction-arrow { transition: none; }
  .label-v5 .ilaction:hover .ilaction-arrow { transform: none; }
}