/* ============================================================
   mobile-guard.css — モバイル安全装置（100%幅固定 × バウンス完全禁止）
   全社内フロントエンド案件に必須適用。グローバルCSSの先頭に置くこと。
   詳細は ~/.claude/skills/mobile-no-overflow-bounce/SKILL.md を参照。

   要件:
   ・横は1pxたりとも動かない（スマホでガクガクしない）
   ・縦はマウスホイール/タッチ/キーで普通にスクロール可能
   ・iOS/Androidの上下バウンス（ラバーバンド）禁止
   ============================================================ */

/* ★1: 100vw ではなく 100% を使う（100vwはスクロールバー分はみ出る）
   ★2: overflow-x は html と body の両方に hidden
   ★3: overscroll-behavior は両軸 none で完全停止
   ★4: position: relative を body に → 子の絶対配置が body外に出ない
   ★禁止: touch-action: pan-y を body に当てない
      → Chrome系でマウスホイールスクロールが効かなくなる実装バグがある
      横方向の保護は overflow-x: hidden のみで十分機能する */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  overscroll-behavior: none;
}

/* メディア・テーブル・フォームの幅オーバー防止 */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}
table { max-width: 100%; }
input, textarea, select {
  max-width: 100%;
  box-sizing: border-box;
}

/* 長いURL・英単語が箱を破るのを防止 */
pre, code {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}