/* サイトメニュー (型 A 併用ドロワー・NAVIGATION_DESIGN_SPEC §3.3)。npbc 参照実装の移植。
   base.ejs (site.css と併読) と app.ejs (インライン CSS のみ・site.css を読まない) の両経路で
   読む共通ファイル。色は両経路が持つ同名トークン (--bg --panel --hover --line --ctl --fg --fg2 --accent)。
   PC 幅でハンバーガーを消す規則は静的面だけの都合なので site.css 側に置く (アプリ面は全幅で出す)。 */
/* ハンバーガー。hidden で出荷し JS が表示する (JS 無効時はフッターが代替) */
.site-header__menu{display:inline-flex;align-items:center;justify-content:center;
  width:var(--tap-min,44px);height:var(--tap-min,44px);padding:0;flex:0 0 auto;
  border:1px solid var(--ctl,#767f8d);border-radius:8px;background:none;color:var(--fg2);cursor:pointer}
/* display 指定が UA の [hidden] 既定 (display:none) に勝ってしまうのを防ぐ */
.site-header__menu[hidden]{display:none !important}
.site-header__menu:hover,.site-header__menu:focus-visible,.site-header__menu[aria-expanded="true"]{
  color:var(--accent);border-color:var(--accent)}
.site-header__menu:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.site-header__menu-icon--close{display:none}
.site-header__menu[aria-expanded="true"] .site-header__menu-icon--open{display:none}
.site-header__menu[aria-expanded="true"] .site-header__menu-icon--close{display:block}

/* ドロワー本体 (右スライド min(86vw, 360px)・背景幕 rgba(0,0,0,.45)・200ms ease-out)。
   z-index はアプリ面の全画面地図 (2900) / 時刻表 (3000) / 乗車中 (3100) より上 */
.site-drawer{position:fixed;inset:0;z-index:3200}
.site-drawer[hidden]{display:none !important}
.site-drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s ease-out}
.site-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,360px);display:flex;flex-direction:column;
  padding:0 0 calc(24px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;
  background:var(--panel);color:var(--fg);box-shadow:-8px 0 24px rgba(0,0,0,.25);
  transform:translateX(100%);transition:transform .2s ease-out}
.site-drawer.is-open .site-drawer__backdrop{opacity:1}
.site-drawer.is-open .site-drawer__panel{transform:none}
@media (prefers-reduced-motion:reduce){
  .site-drawer__backdrop,.site-drawer__panel{transition:none}
}
/* 開いている間は背面スクロールをロック (site-drawer.js が html に付ける) */
.site-drawer-open,.site-drawer-open body{overflow:hidden}
.site-drawer__top{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:flex-end;
  min-height:56px;padding:0 6px;border-bottom:1px solid var(--line);background:var(--panel)}
.site-drawer__close{display:inline-flex;align-items:center;justify-content:center;width:var(--tap-min,44px);height:var(--tap-min,44px);
  padding:0;border:0;border-radius:8px;background:none;color:var(--fg);cursor:pointer}
.site-drawer__close:hover,.site-drawer__close:focus-visible{color:var(--accent);background:var(--hover)}
.site-drawer__close:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.site-drawer__group{padding:6px 0 4px}
/* グループ見出し 14px / 500 / 補助色 (fg2 = 7:1 以上) */
.site-drawer__heading{margin:8px 20px 2px;padding:0;border:0;font-size:.875rem;font-weight:500;line-height:1.5;
  letter-spacing:.02em;color:var(--fg2)}
.site-drawer__list{list-style:none;margin:0;padding:0}
/* 項目 = 行高 48px・16px・左揃え。現在地 = 600 + 左ボーダー 3px */
.site-drawer__list a{display:flex;align-items:center;min-height:48px;padding:0 20px 0 17px;font-size:1rem;line-height:1.4;
  color:var(--fg);text-decoration:none;border-left:3px solid transparent}
.site-drawer__list a:hover,.site-drawer__list a:focus-visible{background:var(--hover);color:var(--accent)}
.site-drawer__list a:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.site-drawer__list a[aria-current]{font-weight:600;border-left-color:var(--accent)}
/* 設定行: 言語セグメント (+ アプリ面はカラーモード 3 択) */
.site-drawer__settings{display:grid;gap:4px;margin:6px 0;padding:8px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.site-drawer__row{display:block;padding:4px 0}
.site-drawer__row-label{display:block;margin-bottom:6px;font-size:1rem;color:var(--fg)}
.site-drawer__lang{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.site-drawer__lang a,.site-drawer__lang span{display:inline-flex;align-items:center;min-height:var(--tap-min,44px);padding:0 14px;
  border:1px solid var(--ctl,#767f8d);border-radius:999px;font-size:.875rem;font-weight:600;color:var(--fg2);text-decoration:none}
.site-drawer__lang a:hover,.site-drawer__lang a:focus-visible{color:var(--accent);border-color:var(--accent)}
.site-drawer__lang [aria-current]{background:var(--fg);border-color:var(--fg);color:var(--panel)}
.site-drawer__row--theme .theme{display:flex;gap:6px;margin:0}
/* 補助 (サイト情報) は末尾に寄せ、行高 44px・補助色 */
.site-drawer__aux{margin-top:auto;padding-top:6px}
.site-drawer__aux .site-drawer__list a{min-height:var(--tap-min,44px);color:var(--fg2)}