ハンバーガーの三本線をガイドラインと同じ形にする

[ma91n]

技術ブログのハンバーガーは3本とも 20px の等幅だったが、アーキテクチャガイドライン（VitePress）は右端をそろえて真ん中だけ短い。ガイドライン側の形に寄せる。

やったこと

• 3本を 20px 幅のまま 20px×14px の窓（.header-drawer-icon）で切る。左端のずらし量を 0 / 10 / 5px にして、見える長さを 20 / 10 / 15px にする（ガイドラインの 16 / 8 / 12 を、ブログの線幅 20px に合わせた比）
• 開いたときの真ん中は opacity: 0 ではなく窓の外へ送る（translateX(20px)）。✕ の2本は左端もそろうので、腕の長さが同じ左右対称の ✕ になる
• 線の高さ 2px・間隔 4px（ピッチ 6px）・角度 ±135deg・速さ state-speed・prefers-reduced-motion の扱いは変えていない。ガイドライン側もピッチは同じ 6px

確認

• make css / make lint-css（解決漏れ・擬似要素の同居・括弧・font-size の段、いずれも指摘なし）
• 生成 HTML に窓の span が入っていること

🤖 Generated with Claude Code