ヘッダーのロゴを左の余白へ出す (#3289)

[ma91n]

Closes #3289

やったこと

ヘッダーのロゴ（.header-brand）を、本文の左端より最大 64px 外へ出す。左に空いている余白へ置く。動かすのはロゴだけで、ナビ・検索・下に開くパネルは本文の右端にそろえたまま。

Cloudflare Blog の実測

issue の「左のサイドバーの位置にずらす」を実際にやっている例として Cloudflare Blog をヘッドレスで測った。ルールは CSS に直接書いてあった:

logo left = max(16px, (100vw - 1440px)/2 - 64px)

本文の枠より 64px 左、ただし画面端から 16px より近づけない。

画面幅	ロゴの左	本文の枠	本文の文字
1920	176	240	288
1280	16	0	48

右側のナビ（Products〜Contact Sales）は枠の位置に残っていて、外へ出しているのはロゴだけだった。

出す量を固定にできない理由

左の余白は幅によって 16〜300px と変わり、単調ですらない:

画面幅	container	本文の左端	左の余白
1920	1320	312	300
1440	1320	72	60
1400	1320	52	40
1366	1140	125	113
1200	1140	42	30
992	960	28	16

1366px で 113px 空いているのに 1400px では 40px に縮む（container が 1140→1320 に跳ねるため）。固定量で寄せると #2901 の「どの幅でも揃わない＝揃え損ねに見える」に当たる。余白のぶんだけ出して 64px で頭打ちにすれば、狭いところでは出ず、広いところでは一定の距離になる。

実装

.header-brand の負のマージンだけ。.header-bar は .container のままなので、#2877 のパネルの位置の基準（right: 0 が本文の右端）は崩れていない。

@media (min-width: 992px)  { .header-brand { margin-left: calc(-1 * min(64px, max(0px, 50vw - 492px))) } }
@media (min-width: 1200px) { .header-brand { margin-left: calc(-1 * min(64px, max(0px, 50vw - 582px))) } }
@media (min-width: 1400px) { .header-brand { margin-left: calc(-1 * min(64px, max(0px, 50vw - 672px))) } }

50vw から引くのは container の半分 ＋ 左右の余白 12px。100vw はスクロールバーを含むので、余白いっぱいまで出すと画面の外へ出る。12px を引いた残りを上限にしてある。効かせるのは 992px から（#3222 の「ナビが引き出しに入る」境界。引き出しに入る幅では帯が詰まっていて左の余白の話にならない）。

実測（ローカル、スクロールバーあり）

画面幅	ロゴの左	本文の左	出した量	scrollWidth
1920	240.5	304.5	64（上限）	1905（= clientWidth）
1600	80.5	144.5	64（上限）	1585
1440	16.5	64.5	48	1425
1400	16.5	44.5	28	1385
1399	70	134	64（上限）	1384
1366	53.5	117.5	64（上限）	1351
1280	16.5	74.5	58	1265
1200	16.5	34.5	18	1185
1199	60	124	64（上限）	1184
1024	16.5	36.5	20	1009
992	16.5	20.5	4	977
991	140	140	0	976
768	28.5	28.5	0	753

• 画面端からは常に 16.5px 以上あり、どの幅でも scrollWidth == clientWidth（横スクロールは出ない）
• 992px でも帯は折り返さない。負のマージンのぶん帯の使える幅が増えるので、「ナビ4つが並ぶ 992〜1199px では余りが 14px」の窮屈さはむしろ緩む

範囲外

• ロゴの光学的なズレ（viewBox の x=0 に届いているのはクリムゾンの線の先端だけで、FUTURE の「F」は箱の左端から 8.45px 内側）。64px 外へ出した後は本文とそろえる相手が無くなるので、この PR では触らない
• 帯そのものを全幅にする案（ナビ・検索・パネルも画面端へ）。ヘッダーを写真バナーから1段64pxの帯に作り直す #2877 と ヘッダーの縦棒がランキングのカードの右枠とズレて見える #2901 を覆す判断になるので別

検証

• make css → node css_lint.mjs（3検査とも通過）・node font_size_lint.mjs（段に収まる）
• npx markdownlint-cli2 CLAUDE.md（0 issues）
• 上の表はヘッドレス Chrome で getBoundingClientRect() を読んだ実測

🤖 Generated with Claude Code

[ma91n]

#3289 ごと見送りになったのでクローズします。