/* =============================================================
 *  UXガード（全ページ共通・2026-08-11）
 *  ★ここが「横スクロールさせない / ダブルタップで拡大させない」の正本。
 *    新しいページを作ったら guard.css と js/ux-guard.js を必ず読み込む。
 *    読み込み漏れは `node tools/check-card-images.js` の [1d] が検出して落とす。
 *
 *  意図的な横スクロールは殺さない：
 *    横に流したい箱には class="scroll-x" を付ける（下で例外指定している）。
 *    既存の overflow-x:auto を自分で持つ箱もそのまま動く（下の * 指定はしていない）。
 * ============================================================= */
html, body {
  max-width: 100%;
  overflow-x: hidden;            /* ページ全体は横に動かさない */
  overscroll-behavior-x: none;   /* 端で引っ張っても横に流れない（戻る操作の誤爆も防ぐ） */
}
/* 中身がはみ出す典型（長い英数字・URL・画像・表）を先回りで抑える */
body img, body svg, body video, body iframe, body canvas { max-width: 100%; }
body pre, body code { overflow-x: auto; max-width: 100%; }
body table { max-width: 100%; }

/* ダブルタップ拡大の防止（ピンチ拡大は残す）。
   touch-action:manipulation はダブルタップズームだけを止める指定。 */
body { touch-action: manipulation; }
/* 入力欄は素の挙動を尊重（文字選択・カーソル移動を邪魔しない） */
input, textarea, select, [contenteditable] { touch-action: auto; }

/* ★意図的に横スクロールしたい箱はこれを付ける */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ── ナビ（上部アイコン列）の折返し（2026-08-11） ──
   アイコンが増えると横幅が足りなくなり、ページ全体が横に伸びる原因になる。
   decks.css だけが「下の列へ回して右寄せ」を持っていたので、全ページ共通にする。
   ページ側のCSSより後に読み込むので、ここが最後に勝つ。 */
.sitebar .nav-icons {
  display: flex;
  flex-wrap: wrap;              /* 入り切らなければ折り返す＝横に伸ばさない */
  gap: 4px;
  max-width: 100%;
  justify-content: flex-end;
}
/* ヘッダは折り返す＝中身が増えても横に伸びない。
   ★2026-08-11：index.html でログインボタンが16pxはみ出し、overflow-x:hidden が
   それを「隠して」いた（見えないだけで壊れている状態）。header全般に効かせる。 */
header { flex-wrap: wrap; max-width: 100%; }
.sitebar header { flex-wrap: wrap; max-width: 100%; }
/* ロゴは縮んでよい（ボタン類を押し出さない）。長い文字は省略記号で逃がす。 */
header .logo { min-width: 0; flex-shrink: 1; }
header .logo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
header .logo-text span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ★ナビの見た目を全ページで統一（2026-08-11・jo指示）
   「支援・お問い合わせ・人気デッキ」の見え方を基準にする。
   これまで content.css=36px/角9px、decks.css=34px/角8px、
   さらに各ページのインラインCSS(CRPIN)が !important で36pxを強制していて、
   ページごとに高さと角の丸みが違っていた。ここで最終的に揃える。
   ※デッキ作成(index.html)だけは例外＝現状のままにする（.deck-nav で除外）。 */
.sitebar .nav-icons:not(.deck-nav) .nav-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
}
.sitebar .nav-icons:not(.deck-nav) .nav-icon .nav-emoji svg { width: 18px; height: 18px; }
.sitebar .nav-icons:not(.deck-nav) { padding-bottom: 8px; }

@media (max-width: 420px) {
  /* 狭い端末ではアイコンを少し縮めて1列に収める */
  .sitebar .nav-icons:not(.deck-nav) .nav-icon { width: 30px !important; height: 30px !important; }
  .sitebar .nav-icons:not(.deck-nav) .nav-icon .nav-emoji svg { width: 16px; height: 16px; }
}

/* ── いま開いているページ名（ナビ左の空きスペース・2026-08-11） ──
   ★アイコンを押し出さない設計：文字側だけが縮む。 */
.nav-here {
  flex: 0 1 auto;          /* 伸びない・縮む＝アイコンの幅を奪わない */
  min-width: 0;            /* これが無いと flex が縮まない */
  margin-right: auto;      /* アイコン群を右端へ押し出す */
  align-self: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--text);
  padding-left: 2px;
}
@media (max-width: 420px) { .nav-here { font-size: 12px; } }

/* 画面には出さないが読み上げ・検索には残す（見出しの重複を消すときに使う） */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* デッキ作成(index)のナビでも現在地を出す。ピンが左、その右にページ名。 */
.nav-icons.deck-nav { align-items: center; }
.nav-icons.deck-nav .nav-here { margin-right: auto; }