/* =================================================================
 * c-link — リンクテキスト（Figma スタイルガイド 5494:296581 / リンク）
 *   ・内部リンク a            : <a class="c-link">…                （項目14）
 *   ・小サイズ(14px)          : <a class="c-link c-link--sm">
 *   ・先頭▸マーカー付き       : <a class="c-link c-link--marker">    （16_default＋icon）
 *   ・PDF リンク              : <a class="c-link c-link--pdf">        （16_default＋pdf）
 *   ・外部リンク a[target]    : <a class="c-link c-link--external" target="_blank" rel="noopener noreferrer">  （項目15）
 *   組み合わせ可（例: 外部＋14px＋マーカー）。
 *
 * 文字色は Key Color。マーカー(▸)= Orange_gradient01（横）、外部アイコン=
 * currentColor（文字色追従）。PDF バッジは多色のため固定色 <img>。
 * base.css が a を color:inherit / text-decoration:none にしているため
 * 本コンポーネントで上書きする。
 * =================================================================*/

.c-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);                 /* 8px */
  color: var(--color-key);
  font-size: var(--fs-body);           /* 16px */
  line-height: var(--lh-loose);        /* 1.8 */
  letter-spacing: var(--letter-spacing-body); /* 0.04em */
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--easing-default);
  vertical-align: baseline;
}

.c-link:hover {
  text-decoration: underline;
  text-underline-offset: 2rem;
  text-underline-position: from-font;
}

.c-link:focus-visible {
  outline: 2rem solid var(--color-key);
  outline-offset: 2rem;
  border-radius: var(--radius-sm);
}

/* 14px バリアント */
.c-link--sm {
  font-size: var(--fs-body-sm);        /* 14px */
}

/* インライン（本文中）用: 文字サイズ・行高を文脈から継承し、地の文に馴染ませる */
.c-link--inline {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  vertical-align: baseline;
}

.c-link__text {
  word-break: break-word;
}

/* 先頭の▸マーカー（Orange_gradient01（横）の三角） */
.c-link__marker {
  flex-shrink: 0;
  width: 7rem;
  height: 7rem;
  background: linear-gradient(90deg, var(--color-orange-01) 0%, var(--color-key) 100%);
  -webkit-mask: url("/img/common/icons/link-marker.svg") no-repeat center / contain;
          mask: url("/img/common/icons/link-marker.svg") no-repeat center / contain;
}

/* 末尾の外部リンクアイコン（文字色追従＝currentColor） */
.c-link__external {
  flex-shrink: 0;
  width: 13rem;
  height: 13rem;
  background-color: currentColor;
  -webkit-mask: url("/img/common/icons/link-external.svg") no-repeat center / contain;
          mask: url("/img/common/icons/link-external.svg") no-repeat center / contain;
}

/* 末尾の PDF バッジ（多色＝固定色画像） */
.c-link__pdf {
  flex-shrink: 0;
  width: auto;
  height: 19rem;
}