/* ==========================================================================
   c-anchor-link — Figma: AnchorLink（ページ内リンクのチップ。例: PC/14_DownloadIndex sec-anchor）
   bg/subtle・左 16px / 右 8px / 上下 8px・renewal/JP/Label/14/Bold（purple/400）+ 下向き矢印 16px
   並びは左寄せ・折り返し・間隔 8px（c-anchor-link-list）
   ========================================================================== */

.c-anchor-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.c-anchor-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16);
  background-color: var(--color-bg-subtle);
  color: var(--color-purple-400); /* semantic に該当なし（Figma: purple/400） */
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.c-anchor-link:hover {
  background-color: var(--color-bg-brand-subtle); /* ホバーは Figma に指定なし（実装判断） */
}

.c-anchor-link:focus-visible {
  outline: 2px solid var(--color-border-brand);
  outline-offset: 2px;
}

.c-anchor-link__icon {
  flex-shrink: 0;
  width: 16px; /* アイコンサイズ */
  height: 16px;
}

@media (prefers-reduced-motion: reduce) {

  .c-anchor-link {
    transition: none;
  }
}