/* =====================================================
   main.css — エントリポイント（@import 群）
   役割：CSS をモジュール化したファイル群を読み込む、
         唯一の HTML から参照されるエントリ。

   設計思想（v0.9.1 リファクタ Phase 1）：
     - 旧 main.css（3521 行）を base / shared / customize /
       composer / patches の 5 領域に責務分離した
     - Cascade Layers (@layer) を使い、レイヤ宣言順で
       後勝ち（patches > composer > customize > shared > base）
       を保証することで、!important の乱用を将来的に減らす

   レイヤ順（左から右に向かって優先度が上がる）：
     reset < base < shared < customize < composer < patches

   注意：
     - @import url(...) は CSS 仕様上、他のルールより先に
       書かれていなければならない（@layer 宣言・@charset を除く）
     - @import に layer(...) を付けると、その import で
       取り込まれるルールは指定レイヤに属する
     - フォント @import（base/fonts.css 内）は最初に取り込む

   段階的移行（現在の状態）：
     Phase 1 完了: base + shared を分離
     Phase 2 完了: customize 配下を分離
     Phase 3 完了: composer 配下 + patches を分離 ← 現在ここ
     Phase 4 予定: patches を本体に統合 → patches/ 削除

     Phase 3 完了時点で、旧 main.css の全領域が
     新 main.css 経由で読み込まれるようになりました。
     index.html を新 main.css に切り替え可能です。
     （切替後、旧 main.css は不要になります）
   ===================================================== */

/* ---- レイヤ宣言（順序が優先度を決める） ----
   ここで宣言した順に @layer の優先度が決まる。
   後に書かれたレイヤほど勝つ。 */
@layer reset, base, shared, customize, composer, patches;

/* ---- base レイヤ ----
   フォント・CSS変数・リセット。アプリの土台。 */
@import url('base/fonts.css')         layer(base);
@import url('base/variables.css')     layer(base);
@import url('base/reset.css')         layer(reset);

/* ---- shared レイヤ ----
   両モードで共通する UI コンポーネント。 */
@import url('shared/header.css')        layer(shared);
@import url('shared/lang-switcher.css') layer(shared);
@import url('shared/buttons.css')       layer(shared);
@import url('shared/statusbar.css')     layer(shared);
@import url('shared/toast.css')         layer(shared);
@import url('shared/modal-base.css')    layer(shared);

/* ---- customize レイヤ（Phase 2 完了：有効化済み） ----
   モードA（カスタマイズ画面）専用のスタイル。
   読み込み順は元 main.css の登場順に準じる（依存関係保持）。 */
@import url('customize/layout.css')           layer(customize);
@import url('customize/preview.css')          layer(customize);
@import url('customize/canvas.css')           layer(customize);
@import url('customize/drop-zone.css')        layer(customize);
@import url('customize/controls.css')         layer(customize);
@import url('customize/color-panel.css')      layer(customize);
@import url('customize/toggle.css')           layer(customize);
@import url('customize/export-modal.css')     layer(customize);
@import url('customize/notice.css')           layer(customize);
@import url('customize/preview-controls.css') layer(customize);
@import url('customize/image-slots.css')      layer(customize);

/* ---- composer レイヤ（Phase 3 完了：有効化済み） ----
   モードB（合成画面）専用のスタイル。
   読み込み順は元 main.css の登場順に準じる（依存関係保持）。 */
@import url('composer/mode-switcher.css')   layer(composer);
@import url('composer/layout.css')          layer(composer);
@import url('composer/layer-panel.css')     layer(composer);
@import url('composer/canvas-preview.css')  layer(composer);
@import url('composer/property-panel.css')  layer(composer);
@import url('composer/timeline.css')        layer(composer);
@import url('composer/modals.css')          layer(composer);
@import url('composer/shortcut-help.css')   layer(composer);
@import url('composer/composer-notes.css')  layer(composer);
@import url('composer/progress-overlay.css') layer(composer);
@import url('composer/hamburger.css')       layer(composer);
@import url('composer/responsive.css')      layer(composer);
@import url('composer/interactions.css')    layer(composer);
/* interactions.css は最後に import してドラッグ/ドロップ/スクラブ関連スタイルが
   他の composer スタイルより後勝ちになるようにする（@layer 後勝ちルール）。 */
/* 注: composer/empty-state.css は現状 patches に内包されている。
   Phase 4 で分離予定。 */

/* ---- patches レイヤ（Phase 3 完了：有効化済み） ----
   v0.9.1 バグ修正で乱発した !important 群を一時的に置く場所。
   最終的には各 composer/*.css に統合して patches/ を削除する。 */
@import url('patches/v0_9_1-fixes.css') layer(patches);

/* =====================================================
   Phase 3 完了時の運用について

   Phase 3 完了時点で、旧 main.css の内容がすべて
   新しいモジュール構成に分離されました。

   ■ index.html の切替

   index.html の <link> を以下に変更してください：
     <link rel="stylesheet" href="css/main.css">

   旧 main.css は不要になりますが、念のため
   main.css.backup などにリネームして保管を推奨。

   ■ 検証順序（重要）

   1. モードA（カスタマイズ画面）の全機能確認
       - JSON 読み込み・色変更・グロー・書き出し
       - 画像スロット（v0.9）
   2. モードB（合成画面）の表示・操作確認
       - モード切替ボタン
       - レイヤー追加・プロパティ編集・タイムライン
       - 合成書き出し
   3. ブラウザ DevTools で 404 や CSS エラーがないこと

   ■ Phase 4 に向けて

   patches/v0_9_1-fixes.css 内の !important ルールは
   @layer patches の優先度を活かして段階的に削除可能です。
   詳細は MOTION_KIT_LITE_v0_9_1_CSS_REFACTORING.md §5 参照。
   ===================================================== */