/* 全ページ共通のナビ CSS の唯一の正。リセットも :root トークンもここには書かない。 */

    /* デスクトップ用リンク → モバイルでは非表示 */
    #nav-links { display:none; gap:40px; list-style:none; align-items:center; }
    /* 色はページ側が決める。ここに color:#000 を書くと下層が黒背景に黒文字で消える。 */
    #nav-links a { text-decoration:none; font-family:var(--font); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:inherit; }

    /* モバイル用ハンバーガー → デスクトップでは非表示 */
    #nav-menu-btn {
      background:none; border:none; cursor:pointer; padding:15px 11px; margin:-7px -3px;
      display:flex; flex-direction:column; gap:4px; z-index:997;
    }
    #nav-menu-btn { color:#000; }
    #nav-menu-btn.light { color:#fff; }
    /* height と gap は整数を保つこと。以前は 1.5px/5px で、3本の span が
       26 / 32.5 / 39px に並んでいた。DPR が偶数なら整数に乗るが、DPR 3（実機 iPhone）と
       DPR 1 では 78..82.5 / 97.5..102 / 117..121.5 と全部が半デバイスピクセルになり、
       しかも半端な端が1・3本目は下、2本目は上に来る。この端をどう丸めるかは実装依存で
       WebKit と Chromium で判断が違うため、3本の太さが揃わず Safari だけ崩れて見えた。
       2px/4px なら 26 / 32 / 38px となり、DPR 1・2・3 のすべてで整数境界に乗る。 */
    #nav-menu-btn span { display:block; width:22px; height:2px; background:#000; transition:background 0.3s; }
    #nav-menu-btn.light span { background:#fff; }

    /* ━━━ MENU OVERLAY（モバイル） ━━━ */
    #menu-overlay {
      /* UA 既定の打ち消し。margin/padding/box-sizing は各ページの `*` リセットが既に潰しているので、
         必要なのはこの9項目だけ（実測）。z-index は top layer に載るので不要になった。 */
      position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none;
      border:0; background:#000; color:#fff; overflow:hidden;
      /* display はここに書かない。閉状態は UA の `dialog:not([open]){display:none}` に任せる。
         無条件 display:flex を書くと（著者スタイルが UA に勝つので）閉じていても全画面表示になる。 */
      flex-direction:column; align-items:center; justify-content:center; gap:40px;
      opacity:0;
      /* .menu-logo の位置基準。ヘッダーの padding と必ず同じ値にする。 */
      --nav-pad-y:18px; --nav-pad-x:24px;
      /* 1行目は Safari 17.3 以前向けのフォールバック。shorthand は list 中の1項目でも
         invalid だと宣言全体が落ちるため、opacity のフェードだけは残す。 */
      transition:opacity 0.3s;
      transition:opacity 0.3s, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
    }
    #menu-overlay[open] { display:flex; opacity:1; }
    @starting-style { #menu-overlay[open] { opacity:0; } }
    /* 閉じるフェード中（Chromium で 300ms）にクリックを吸わせない。同時に、<dialog> 非対応環境で
       「開けないが閉じたまま無害」を保証する保険でもある。
       なお `dialog:not([open]){display:none}` を著者側で明示してはいけない。詳細度 (1,1,1) が
       `#menu-overlay[open]` (1,1,0) に勝ち、Chromium の終了トランジションが潰れる。 */
    #menu-overlay:not([open]) { pointer-events:none; }
    /* UA 既定は rgba(0,0,0,0.1)。本体が半透明になるフェード中に透けるので消す（実測でピクセル差を確認）。 */
    #menu-overlay::backdrop { background:none; }

    /* #nav の行高はハンバーガーのマージンボックスが決めている:
       padding 15px*2 + (span 2px*3 + gap 4px*2) = 44px, margin -7px*2 → 30px。
       ロゴ(28px)はその中央に来るので y = padding-top + (30 - 28)/2 = 19px。
       ここがずれると top-menu-open-mobile.png が即座に落ちる。
       span を奇数px にするとこの行高が奇数になり、ロゴが必ず 0.5px 上に乗るので避けること。 */
    .menu-logo {
      position:absolute;
      top:calc(var(--nav-pad-y) + (30px - 28px) / 2);
      left:max(var(--nav-pad-x), env(safe-area-inset-left));
      height:28px; width:auto; display:block;
    }

    #menu-close {
      position:fixed; top:15px; right:21px;      /* z-index 不要（top layer） */
      background:none; border:none; cursor:pointer; padding:8px;
      width:44px; height:44px; display:block;    /* .visible トグル不要 */
    }
    /* 太さはハンバーガーの span と揃える。1.5px だと translate(-50%) が -0.75px になり、
       45度回転のアンチエイリアスに半端なオフセットが上乗せされる。 */
    #menu-close::before, #menu-close::after {
      content:''; position:absolute; top:50%; left:50%;
      width:22px; height:2px; background:#fff;
    }
    #menu-close::before { transform:translate(-50%,-50%) rotate(45deg); }
    #menu-close::after  { transform:translate(-50%,-50%) rotate(-45deg); }
    .menu-link { text-decoration:none; font-family:var(--font); font-size:28px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#fff; }

    #nav-links a:focus-visible,
    #nav-menu-btn:focus-visible,
    .menu-link:focus-visible,
    #menu-close:focus-visible { outline:2px solid currentColor; outline-offset:4px; }

    @media (min-width: 768px) and (min-height: 480px) {
      /* ブレークポイントは nav.js の定数と必ず同一に保つ。 */
      #nav-links { display:flex; }
      #nav-menu-btn { display:none; }
    }

    @media print {
      #nav-links, #nav-menu-btn, #menu-overlay, #menu-close { display:none; }
    }

    /* 下層は body 自体がスクロールするため、showModal() だけでは背後が動く
       （3ブラウザとも実測で 700px 動いた。overscroll-behavior:contain は Firefox で効かない）。
       トップは style.css の html,body{overflow:hidden} で元から動かないので無害。 */
    html.menu-open { overflow:hidden; }