/* アクセシビリティ共通レイヤ（手編集 SSOT）。issue #37 / ry task T26-848。
   ページ本体の配色トークンは tokens.css。ここは skip link とキーボード
   フォーカスの可視化のみを担う（画面上の見た目は focus / skip 操作時のみ変化し、
   通常表示は不変 = 視覚回帰に出ない）。 */

/* Skip link: 非フォーカス時は視覚外へ退避（通常表示では見えない）→ キーボード
   フォーカスで先頭に出現し、#main（各ページの <main>）へジャンプする。
   マウス操作の見た目には影響しない。 */
.skip-link {
  position: absolute;
  top: -64px;
  left: 8px;
  z-index: 10000;
  padding: 10px 16px;
  background: #ffffff;
  color: #c21b0c;
  border: 2px solid #c21b0c;
  border-radius: 4px;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease-in-out;
}
.skip-link:focus {
  top: 8px;
}

/* キーボード操作時のみフォーカスリングを表示（:focus-visible なのでマウス
   クリックでは出さない）。ブランド赤 + offset で淡色背景に対し視認できる。 */
:focus-visible {
  outline: 3px solid #c21b0c;
  outline-offset: 2px;
}

/* skip link のジャンプ先（display:contents の <main>）自体には枠を出さない。 */
main:focus,
main:focus-visible {
  outline: none;
}