/* ============================================================================
shell.css — ミソラソラ 共通シェル（単一情報源 / SoT）
v0.23 タスク② ／ 2026-08-10
対象: index.html（歌集）／ stamper.html（刻印）／ giita.html（追憶）
構成
§1 デザイントークン
§2 刻印互換エイリアス
§3 ShellHeader 一式
§4 安全網（ヘッダを構造的に溢れさせない）
§5 圧縮ラダー（意図した見た目）
§6 蝶紋章（.bfly-*）
§7 ボトムタブ ＋ 刻印のオーバーフロー（v0.23 P1-c）
§8 リクエストコピーの短冊（v0.23.1・歌集のみ）
── セクションを幅に乗せる 2 つの書き方（v0.23 P1 / R-1）─────────────
背景も罫線も持たない箱 → width: var(--w-container); margin-inline: auto;
背景・罫線を持つ「帯」 → 要素は全幅のまま
padding-inline: calc((100% - var(--w-container)) / 2);
後者は「背景は全幅・中身はコンテナ」（設計稿 §01）を内包ラッパー無しで満たす。
幅を絞ると罫線が途中で切れるので、帯にはこちらを使うこと。
読み込み位置
各 HTML の で Google Fonts の 直後・インライン