🐦 Shima UI Attire 修正レポート（Single Column化 + 枠除去）
■ 発生していた問題
スマホ表示で「シマエナガ・コレクション」が2列風になり、
.shima-panels の width が約 172px に圧縮されていた
CSSをいくら変更してもレイアウトが変化しないケースがあった
修正版で Unexpected token '{' エラーが発生
→ builder_ui.section.attire.bundle.js の構文破損
デバッグ用のマゼンタ枠（outline）が本番UIに残っていた
■ 真の原因
① Shadow DOM の存在
.attire-v21-shima は host 要素であり、
内部が ShadowRoot で構成されていた。
そのため：
document.head にCSSを追加しても効かない
通常のセレクタ上書きでは影響しない
つまり「CSSが効かない」のではなく
“効く場所に刺さっていなかった”
② 2列化の直接原因
.shima-grouped-body が
CSS
コードをコピーする
display: grid;
grid-template-columns: 1fr 1fr;
になっていた。
その結果：
.shima-panels が約172pxに分割
スマホで縦並びにならない
■ 最終的な解決策（勝ち筋）
✔ ShadowRoot に直接CSSを注入
通常headではなく、
host.shadowRoot.appendChild(style) でスタイルを追加
✔ 2列化の根本を潰す
CSS
コードをコピーする
.shima-grouped-body {
  display: block !important;
  grid-template-columns: 1fr !important;
}

.shima-panels {
  width: 100% !important;
  max-width: none !important;
}
これにより
.shima-panels = w=350px
1列レイアウト復帰
✔ デバッグ枠の除去
原因：
CSS
コードをコピーする
outline: 4px solid #ff00ff;
をbundle内に直書きしていた。
対応：
該当行を削除
本番UIから完全除去
■ 今回の重要教訓
🔹 CSSが効かない場合
Shadow DOMか確認する
display:grid の有無を確認する
幅が半分になっていないか確認する
セレクタの階層を疑う
🔹 JSエラーが出た場合
Unexpected token '{' は
追記位置ミス
IIFEの外にコードを書いた
末尾のカンマや閉じ忘れ
の可能性が高い
■ 今回の最終安定状態
スマホで完全1列
ShadowRoot対応済み
DIAGは通常非表示
マゼンタ枠削除済み
無駄な文字化けフォルダ削除済み
■ 再発防止チェックリスト
□ Shadow DOMか？ □ grid指定は残っていないか？ □ 幅が172pxなど半分になっていないか？ □ bundle構文は壊れていないか？ □ debug用CSSは消したか？
これを「Shima UI 修正ログ_2026.txt」みたいな名前で保存しておけばいい。