/**
 * HP/css/touch-targets.css — タッチ端末のタップ領域確保
 *
 * cross-device QA (scripts/qa-tools/cross-device.mjs) の tap-target-too-small 指摘への対応。
 * ナビリンクが iPhone で 35x29px、ブランドロゴが 139x26px、音量スライダーが 194x20px と、
 * Apple HIG / WCAG 2.5.5 の推奨する 44x44px を下回っていた。
 *
 * `@media (pointer: coarse)` で囲うため、マウス端末 (PC) の見た目・レイアウトは一切変わらない。
 * 4 ページ (index / story / characters / system) がこの 1 ファイルを共有する。
 *
 * 正本: docs/rules/cross-device-build-qa.md
 * 検証: node scripts/qa-tools/cross-device.mjs --url <HP URL> --lanes iphone-portrait,android
 */

@media (pointer: coarse) {
  /* ナビリンク: 29px → 44px 角。幅を広げた分だけ gap を詰めるので、nav 全体の横幅はほぼ不変
     （幅を広げるだけだと 393px 幅で横スクロール = error を誘発する）。
     下線 (::after) は文字直下に留めるため bottom を padding 分だけ持ち上げる。 */
  .nav-links { gap: 8px; }
  .nav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: 14px;
    min-height: 44px;
    min-width: 44px;
  }
  .nav-links a::after { bottom: 8px; }

  /* ブランドロゴ (トップへ戻るリンク) */
  .brand { min-height: 44px; }

  /* characters.html だけ別マークアップ (.brand ではなく .nav-logo、ページ内 <style> で定義) */
  .nav-logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* characters.html の月齢切替ボタン。48x43 で高さが 1px 足りない */
  .moon-btn { min-height: 44px; }

  /* 音量パネルの再生ボタン (34px / SP 32px)。パネルは縦に伸びるが、
     主要導線との衝突は audio-toggle.js の退避ロジックが吸収する */
  .hp-audio-control__action { min-height: 44px; }

  /* 事前登録セクションの外部リンク */
  .reg-x-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /*
   * 音量スライダー (.hp-audio-control__range) は意図的に 44px 化しない。
   * min-height:44px を与えると grid 行が伸びてウィジェット全体が縦に膨らみ、
   * 直上の「※音声が流れます」テキストに被る視覚回帰が出た（2026-07-10 スクショ比較で確認）。
   * input[type=range] には擬似要素を足せず、レイアウトを変えずに当たり判定だけ広げる手が無い。
   * ドラッグ操作はタップと違い外しても致命的でないため、cross-device の warn は許容する。
   */
}