ヘッダーの帯を 1025px 以上で追従させる

[ma91n]

Fixes #3220

#2877 で「追従しない」と決めた帯を、PC（1025px 以上）だけ追従させる。モバイルは今のまま。

判断

• 理由は読みやすさではなく所在と検索。 読み進めてもロゴが左上に残り、記事を切り替えたときに「どのサイトを読んでいるか」が分かる。縦に長いトップページで検索に手が届く（Slack の議論）
• モバイルは追従しない。 64px は 375×667 の画面の 10% で、記事の面を優先する
• 境界は目次が追従し始める 1025px と同じ。 新しい境界を足さない（スタイルガイド「幅」の4点のまま）。PC の読者は既に追従する部品のある画面を見ている
• 見た目は変えない。 白地・1px の線・影なしのままなので、送っても浮いた箱にならない。下へ送ると隠れる型（Medium）は JS が要り、送ると細くなる型は動きが増えるので採らない。2段組にして2段目だけ固定する案は、帯が1段なので分ける相手が無い
• 他サイト（1366×768 で 1200px 送って実測）: 固定 3（Qiita 45px・note 65px・dev.to 56px）／非固定 6（Zenn・はてな・Cloudflare・GitHub Blog・Stripe・Medium）。どちらが通り相場とも言えない

変更

場所	変更
.site-header	@media (min-width: 1025px) で position: sticky; top: 0（z-index: 999 は既存）
html	同じ幅で scroll-padding-top: 80px（帯 64 + 16）。目次のクリックと見出しのアンカーで見出しが帯の下に隠れない。線に接すると詰まって見えるので 16px 空ける
目次 .blog-sidebar .toc-section	top: 88px（帯の下から 24px）、max-height: calc(100vh - 112px)
目次のスクロールスパイ（sidebar.ejs）	基準線を「画面の上から 32px」→「帯の下辺 + 32px」。帯の getBoundingClientRect().bottom を読むので幅の分岐を持たず、追従しない幅では下辺が負になるので 0 で止める
CLAUDE.md / スタイルガイド「幅」	#2877 の記述を書き換え、1025px の行に「帯は追従をやめる」を足す

実測（playwright、900px 送った後）

幅	帯の上端	目次の上端	目次クリック後の見出し	現在地
375 / 768	−900（送られている）	—	—	—
1280 / 1440	0	88	80（帯 + 16）	クリックした見出しに付く

ドロップダウンは送った後も本文の上に開く（既存の z-index: 999）。make css の差分は上の3ルール、css_lint / font_size_lint / textlint 通過。

目視のポイント

• 1280px 以上: 記事を送って帯が残ること、目次の項目をクリックして見出しが帯の下 16px に来ること、送った後にカテゴリのドロップダウンを開くこと
• 1024px 以下: 帯が送られること（変わっていない）
• 集中の邪魔になるかは実物で判断してほしい。戻すなら @media の塊を消すだけ

🤖 Generated with Claude Code

[ma91n]

2コミット目で追従する帯を磨りガラスにした（レビューの提案）。

• 地を color-mix(in srgb, var(--surface-base) 90%, transparent)、backdrop-filter: blur(8px)（明・暗とも。ぼかしの量は引き出しの背後 モバイルの検索を全幅にし、開いている間は後ろをぼかす #2888 と同じ）
• 90% は帯の下にいちばん暗いもの（コードブロック #2b2b2b）が来ても ink-mute が AA を保つ値（5.15。85% だと 4.65 で余裕が無い）。ダークで白い画像が下に来たときも on-dark 6.34
• @supports (backdrop-filter) で囲い、効かないブラウザでは不透明のまま（透けるだけだと文字の下に本文が見えて読めない）
• 1px の線・影なし・追従の幅（1025px 以上）は変えていない

実測: 1280px で .site-header の background-color が color(srgb 1 1 1 / 0.9)、backdrop-filter: blur(8px)。コードブロックの上に帯が来た状態のスクリーンショットで、ロゴ・ナビ・検索窓が読めることを確認。