/**
 * Studio「つくる」部品ワークベンチ — スマホ（<1100px）の画面構成＋ PC と共通の「物の見せ方」
 * =============================================================================
 * 読み込み: public/editor.html が **全幅で** routes/editor.css の後に読む（PC 幅でも読まれる）。
 *   - `.preview-panel.dc-parts-mobile …` で始まる規則 = スマホだけ（.dc-parts-mobile は JS がモバイル幅でだけ付ける）
 *   - それ以外 = PC とスマホ共通（コマの表・手直しボタン・位置の欄・設定シートなど）
 *   - `@media (min-width: 1100px)` = PC だけ
 * ここに置く理由: routes/editor.css は機械分割のバンドル（@keyframes 禁止・他ページに当たるセレクタ禁止・
 *   ?v= の手動ハッシュ）。このファイルの ?v= はサーバーが git SHA に置き換える（injectHtmlAssetVersion）。
 *
 * ## 2026-09-23 統合（このファイルの形）
 * 9/17〜9/23 に「上書きの層」（Mager A/B 群・9/20 Zhang 裁定・9/20 夜の板の文法・9/23 仕上げ・末尾の小修正）が
 * 積み重なって 3,340 行になっていたのを、**見た目を 1px も変えずに** 1 本の順序へ組み直した:
 *   1 トークン → 2 配置（プレビュー / シート / ドック / 全画面アセット編集）→ 3 ドックのタイルと矢印 →
 *   4 シート（本体・UI 一覧・設定）→ 5 アセットの編集 → 6 コマの表 → 7 UI の編集 → 8 履歴 → 9 PC → 10 動きを減らす設定
 *   → 11 部品編集のキャンバス（2026-09-24 追加・統合の後に足した節。ゲームを 390×844 で縮めて置く＋ツールバーの 3 段）
 * 消したのは「同じセレクタの後ろの宣言が必ず上書きしていた宣言」と、次の「効いていない」宣言だけ:
 *   - grid 時代（9/20 に件数を名前の横へ grid で並べた版・同日に flex へ戻した）の grid-* ／ justify-self
 *   - 件数バッジ時代（9/18 Mager A-1）の top/left/right/text-align（件数は名前の中の inline になった＝static）
 *   - どの要素にも当たらない規則（ドックの一覧タイルは件数も無名ラベルも持たない等）・content:none で生成されない疑似要素
 *   - 表示されない区切り（display:none）の寸法、より強いセレクタに必ず負けていた宣言
 * 証明: GCE で before(:3211) / after を並べ、6 本のテストプロジェクト × 3 幅 × 状態ごとに全要素の getComputedStyle を突き合わせ、
 *   静的にも (文脈, セレクタ, longhand) ごとの実効値と「同じ詳細度で重なりうる宣言の前後関係」を検査した（コミットメッセージ参照）。
 *
 * ## 守っている裁定（WHY の要約。詳しい経緯は git log -- このファイル）
 * - 9/18 founder（CapCut/TikTok の編集画面）: ツールバーは 1 段・畳み込み（その他）なし・横に流す。あそぶ/つくる の区別は廃止
 *   → ヘッダーは「← チャット」だけ。履歴は下からせり出す全幅モーダル。「このエリアがいらない」= 場面名の見出しは出さない
 * - 9/20 Zhang 裁定（見た目の体系）: 赤 = 選択の縁（inset 2px）と実行ボタンの面の 2 つだけ ／ 角丸 3 段（箱 12・語は全丸・シート上端 16）／
 *   グレー 4 段（面 100・線 200・従 500・主 900）／ 文字 3 サイズ（15 見出し・13 本文・11 ラベル）／ 左右の基準線 16px ／
 *   ガラス（backdrop-filter）なし ／ 動くのは結果への返事だけ
 * - 9/20 founder: アセットを開いたら全画面（プレビューは不可視にするだけで 0px にしない＝キャンバス比が NaN になるゲームがある）
 * - 9/20 夜: 明るいまま「層」を作る（地 --dc-stage の上に角丸の画面と浮いた白い板）。**画面を暗くする案は即撤回**（暗転は却下・以後提案しない）
 * - 9/23 仕上げ: 展示台（放射の地＋物の落ち影）・ばね（--dc-spring）・ドックの矢印とちら見せ・設定シート・見本の貼り付け・
 *   範囲の見出しの赤い縁を戻した（founder「キャラ全体を押しても赤い枠がつかない」）・範囲に入ったコマの薄い赤は展示台に勝たせる
 * - DreamCore の器（CLAUDE.md）: 太い枠・ハードシャドウ・独自ヘッダーは足さない。safe-area は Web でも非ゼロになりうるので
 *   native/web で値を分けない（ここは見た目の差が無いので native-app 専用の上書きは要らない）
 */

/* =============================================================================
 * 1. トークン
 * ============================================================================= */

/* 9/20 Zhang 体系の値（履歴シートも同じ語彙で描くので .version-panel にも置く） */
.preview-panel.dc-parts-mobile,
.version-panel {
  --dc-gutter: var(--s-16);
  --dc-face: var(--gray-100);
  --dc-line: var(--gray-200);
  --dc-ink: var(--gray-900);
  --dc-weak: var(--gray-500);
  --dc-r-box: var(--r-12);
  --dc-ring: inset 0 0 0 2px var(--red); /* 選択の唯一の形。inset なので箱の大きさが変わらず、4px 間隔のコマ同士で縁がぶつからない */
}

/* 9/23 仕上げの質感（PC とスマホ共通）。--dc-spring = iOS のシートと同じ減速（オーバーシュートなし） */
.dc-parts-pane,
.preview-panel {
  --dc-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --dc-stage: radial-gradient(120% 100% at 50% 28%, var(--white) 0%, var(--white) 22%, var(--gray-100) 78%); /* 展示台: 上が白く抜ける地 */
  --dc-lift: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.07); /* 浮いたときだけの影（やわらかい 2 層） */
  --dc-object-shadow: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12));
}

/* スマホのプレビュー面。
 * --dc-parts-preview-min は studio-parts-pane.js の SHEET_PREVIEW_MIN_PX と同値に保つ（0px まで縮めると 3D の canvas が壊れる）。
 * --dc-parts-dock-h はツールバーの**最小**高（中身なりに伸びる）。
 * --dc-stage はここで平らな地の色（#F1F1F3・白との明度差 5% = 白い板とゲームの画面が「上に載って」見える最小の差）に上書きされる。
 *   ドック（#partsPane の外）のサムネはこの平らな地を継ぐ。シートの中身は .dc-parts-pane が持つ放射の展示台を継ぐ（どちらも現状どおり）。 */
.preview-panel.dc-parts-mobile {
  --dc-parts-preview-min: 160px;
  --dc-parts-dock-h: calc(58px + env(safe-area-inset-bottom));
  --dc-stage: #F1F1F3;
  position: relative; /* 右上の ✓ などの絶対配置の基準 */
  background: var(--dc-stage);
}

/* =============================================================================
 * 2. 配置 — プレビュー → ツールパネル（シート）→ 進行帯 → ツールバー（ドック）を flex の通常フローで縦に積む
 * =============================================================================
 * `.preview-panel` は style.css で縦 flex。editor.html の DOM 順（header → preview-container → #partsPane → #partsDockBanner →
 * #partsDock）がそのまま上下順になるので、JS の px 計算は要らない（旧 position:absolute ＋ --dc-parts-reserve は撤去）。
 * iframe は実サイズで縮む（transform ではない）ので、UI 部品の選択・ドラッグの座標変換は縮小後も正しい。
 * 例外（2026-09-24）: UI の部品を触る間（.dc-parts-canvas・11 章）は iframe を実寸 390×844 のまま transform で縮める。
 * 板は getBoundingClientRect ベースなので、こちらでも座標変換は正しい（studio-ui-layout-editor.js 冒頭）。 */

/* 上部: 「← チャット」だけの最小バー（9/18 3 回目「遊ぶ／作るの意味がないですね」）。
 * .preview-actions（履歴・注釈・再読み込み…）の機能はドックの操作タイルが引き継いでいる。 */
.preview-panel.dc-parts-mobile .preview-actions {
  display: none;
}

/* 隠すのはヘッダーのあそぶ/つくるスイッチだけ（DOM は PC 用に残す）。ポーズ組の範囲の 2 択（.dc-parts-switch.dc-parts-scope）
   まで隠していた旧 `.dc-parts-mobile .dc-parts-switch` は撤去済み（9/18 founder「オプションが以前はありましたよね？」） */
.preview-panel.dc-parts-mobile .preview-header .dc-parts-switch {
  display: none;
}

.preview-panel.dc-parts-mobile .preview-header {
  justify-content: flex-start;
  min-height: 36px;
  padding: var(--s-4) var(--dc-gutter);
  border-bottom: none;
  background: transparent; /* 地（--dc-stage）の上に直接載る */
}

.preview-panel.dc-parts-mobile .back-to-chat-btn {
  height: 28px;
  padding: 0 var(--s-8);
  gap: var(--s-4);
  border: none;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-size: 0.8125rem;
}

.preview-panel.dc-parts-mobile .back-to-chat-btn svg {
  width: 16px;
  height: 16px;
}

/* ゲームは地から角丸で切り出した「画面」（9/20 夜）。下 10px = ツールバーの板を浮かせる隙間。影は本体の .bottom-nav と同じ */
.preview-panel.dc-parts-mobile .preview-container {
  position: relative;
  min-height: var(--dc-parts-preview-min);
  margin: 0 10px 10px;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

/* ツールパネル（#partsPane）= 上だけ角丸の浮いた白い板。開いている間だけ出る。高さは中身なりで 45dvh が上限（つまみは廃止）。
   キーボードが出たらパネルごと持ち上げる（--dc-parts-kb・ドック側には置かない = 二重に上がる）。開くと下から 16px・フェード */
.preview-panel.dc-parts-mobile .dc-parts-pane:not([hidden]) {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  max-height: min(45dvh, calc(100% - var(--dc-parts-preview-min)));
  margin-bottom: var(--dc-parts-kb, 0px);
  border-left: none;
  border-top: none;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.10);
  animation: dcSheetIn 300ms var(--dc-spring) both;
}

@keyframes dcSheetIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* PC のタブ列はスマホでは出さない（同じ内容はドックに出る） */
.preview-panel.dc-parts-mobile .dc-parts-tabs {
  display: none;
}

/* 進行帯（ツールバーの直上・プレビューを覆わない・時間で消えない）。浮いた白い札＋静止した赤い点
   （9/20 裁定 7: 1 日に何十回も出るものを常時動かさない） */
.dc-parts-dock-banner {
  display: none;
}

.dc-parts-dock-banner[hidden] {
  display: none;
}

.preview-panel.dc-parts-mobile .dc-parts-dock-banner:not([hidden]) {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-8);
  margin: 0 10px 6px;
  padding: var(--s-10) var(--dc-gutter);
  border-top: none;
  border-radius: 14px;
  background: var(--white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
  color: var(--dc-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: left;
}

.preview-panel.dc-parts-mobile .dc-parts-dock-banner:not([hidden])::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--red);
}

/* ツールバー（#partsDock）= 下の浮いた白い板。PC は出さない。
 * 1 列を横に流す（9/18: 道具＋操作で最大 12 個・畳まない）。左端（‹）は固定・残り（.dc-parts-dock-scroll）だけ流す
 * （9/20 Zhang A-3/A-4）。overflow と端のフェードは流す側が持つ。 */
.dc-parts-dock {
  display: none;
}

.dc-parts-dock[hidden] {
  display: none;
}

.preview-panel.dc-parts-mobile .dc-parts-dock:not([hidden]) {
  position: relative; /* 矢印（.dc-parts-dock-arrow）の基準 */
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start; /* 46px の箱の上端を 1 本に */
  justify-content: flex-start;
  gap: var(--s-4);
  height: auto;
  min-height: var(--dc-parts-dock-h);
  padding: var(--s-10) var(--dc-gutter) calc(var(--s-10) + env(safe-area-inset-bottom));
  border-top: none;
  border-radius: 22px 22px 0 0;
  background: var(--white);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: none; /* フェードは流す側だけ（固定の左端まで薄くしない） */
  mask-image: none;
}

.preview-panel.dc-parts-mobile .dc-parts-dock:not([hidden])::-webkit-scrollbar {
  display: none;
}

/* シートが開いている間は、板の肩（角丸）からシートの白が覗くので角丸と影を落として線 1 本でつなぐ */
.preview-panel.dc-parts-mobile .dc-parts-pane:not([hidden]) ~ .dc-parts-dock:not([hidden]) {
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--dc-line);
}

/* --- 全画面のアセット編集（9/20 founder「アセットを開いたときはモーダルは全画面にしていいよ」） ---
 * アセット階層で 1 つ選んでいる間だけ（JS が .dc-parts-full）。UI・カメラはプレビューを見ながら直すので 45dvh のまま。
 * 下のドック（アセット一覧）は残す = 隣のアセットへそのまま移れる。
 * プレビューは display:none にも高さ 0 にもしない: 流れから外して（absolute・パネル全面の大きさのまま）不可視にするだけ。 */
.preview-panel.dc-parts-mobile.dc-parts-full .preview-container {
  position: absolute;
  inset: 0;
  margin: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: none;
}

.preview-panel.dc-parts-mobile.dc-parts-full .preview-header {
  display: none; /* 戻る手段はパネル内の ✓ とドックが持つ */
}

.preview-panel.dc-parts-mobile.dc-parts-full .dc-parts-pane:not([hidden]) {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding-top: env(safe-area-inset-top);
  border-top: none;
  border-radius: 0;
  box-shadow: none;
}

.preview-panel.dc-parts-mobile.dc-parts-full .dc-parts-dock:not([hidden]) {
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--dc-line);
}

/* 全画面では上も下も白い面なので、進行帯は札にせず編集面の続きの 1 行に（札のまわりに地のグレーが覗いて継ぎはぎに見えた） */
.preview-panel.dc-parts-mobile.dc-parts-full .dc-parts-dock-banner:not([hidden]) {
  margin: 0;
  border-top: 1px solid var(--dc-line);
  border-radius: 0;
  background: var(--white);
  box-shadow: none;
}

/* 進行帯が出ている間は、その下のツールバーの線を消す（線が 2 本続かない） */
.preview-panel.dc-parts-mobile.dc-parts-full .dc-parts-dock-banner:not([hidden]) + .dc-parts-dock:not([hidden]) {
  border-top: none;
}

/* =============================================================================
 * 3. ドックのタイルと矢印
 * =============================================================================
 * 階層（data-level・studio-parts-pane.js DOCK_LEVELS）で中身が入れ替わる:
 *   root = 道具（アセット / UI /（3D）調整）＋操作（履歴・再読み込み・共有…）/ assets = ‹ ＋アセット 1 つずつ / ui = ‹ ＋場面
 * 規則（9/20）: **道具・操作 = 箱なしの印 ／ 物（アセットのサムネ）= 46px の箱**（箱が 11 個並ぶとワイヤーフレームに見えた）。
 * 選択 = 物は赤の縁、印は印だけ赤。群の区切りは線でも間隔でもなく「等間隔の 1 本の列」（founder「無駄な余白がある」）。 */

/* 流す側。両端フェード（左は固定タイルとの境目で送ったタイルがぶつ切りに見えないように）。右は画面端まで流す */
.preview-panel.dc-parts-mobile .dc-parts-dock-scroll {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: 0 var(--s-16) 0 var(--s-12);
  margin: 0 calc(-1 * var(--dc-gutter)) 0 calc(-1 * var(--s-8));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 24px), transparent);
}

.preview-panel.dc-parts-mobile .dc-parts-dock-scroll::-webkit-scrollbar {
  display: none;
}

/* root は固定タイルが無い = 流す入れ物が列の先頭。左も画面端まで流し、静止時の 1 枚目は 16px の基準線に乗せる
   （founder「2 つのエリアに分かれてるのわかりづらすぎる」で root の固定を撤回）。左フェード 12px < padding 16px */
.preview-panel.dc-parts-mobile .dc-parts-dock-scroll:first-child {
  margin-left: calc(-1 * var(--dc-gutter));
  padding-left: var(--dc-gutter);
}

/* タイル = 箱（印）→ 名前 の素直な縦積み。件数は名前の中の後ろ（JS）。
 * 押下で縮むのは箱（印・サムネ）だけ = 9/20 裁定「押している間も名前が読める」（任天堂の手触り）。以前はタイル全体に
 * :active の 0.95 が掛かっていて裁定が効いていなかった（2026-09-24 CSS 整理で発覚 → founder「直していいよ」で削除）。
 * 箱の縮みは下の「ドックのタイルの箱」の :active が持つ */
.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab {
  position: relative;
  flex: 0 0 auto; /* 固定側のタイルが流す側に押されて縮まない */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  align-content: start;
  gap: var(--s-4);
  min-width: 56px;
  margin-bottom: 0;
  padding: 0;
  border: none;
  border-radius: var(--r-12);
  background: transparent;
  color: var(--dc-weak);
  transform: none;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab:disabled {
  opacity: 0.4;
}

/* 物のタイル: 64px 幅・名前は 2 行まで（「きずついた…」で何の物か分からなかった・実機 390px） */
.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-item {
  min-width: 64px;
  max-width: 64px;
}

/* ‹ = 出口なので面を持たない */
.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-back {
  min-width: 46px;
  padding: 0;
}

/* 箱（46px・面 gray-100・角丸 12）。道具・操作は下の「箱なしの印」で箱を消す */
.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0;
  border-radius: var(--dc-r-box);
  background: var(--dc-face);
  color: var(--dc-ink);
  box-shadow: none;
  transition: box-shadow 180ms var(--dc-spring), transform 260ms var(--dc-spring); /* 押す → 離すとばねで戻る */
}

.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-icon svg {
  width: 24px; /* viewBox と 1:1 */
  height: 24px;
}

/* サムネ = 展示台に置いた物。切り抜かない（cover だと胴だけ・模様だけになった） */
.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-thumb {
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 3px;
  overflow: hidden;
  border-radius: var(--dc-r-box);
  background: var(--dc-stage);
  color: var(--dc-ink);
  box-shadow: none;
  transition: box-shadow 180ms var(--dc-spring), transform 260ms var(--dc-spring);
}

/* 背景系の絵（bg / background…・Mager B-6・JS が is-contain）は平らな面の上に（展示台より強い指定のまま） */
.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-thumb.is-contain {
  background: var(--gray-100);
}

.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-thumb .dc-parts-img,
.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-thumb.is-contain .dc-parts-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 9px;
}

/* 名前: 1 行・長いロケールは省略記号（es/pt「Página pública」・ko「새로고침」で列が崩れた・Make のドックと同じ解） */
.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-label {
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-item .dc-parts-tab-label {
  max-width: 64px;
  white-space: normal;
  overflow-wrap: anywhere; /* 日本語は語の途中で折る */
  text-align: center;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}

/* 件数 = 名前の後ろの従の字（丸バッジは 9/20 に廃止: 白い丸＋リングは SNS の未読と同じ記号だった）。
   日本語の中に半角スペースを入れない規則どおり、間は margin で空ける */
.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-count {
  position: static;
  min-width: 0;
  height: auto;
  margin-left: var(--s-4);
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--dc-weak);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-label .dc-parts-tab-count {
  display: inline;
  margin-left: var(--s-4);
}

/* 区切り要素は JS が出し続ける（PC・テストの並び順の契約）が、スマホでは見せない（9/18 線 → 9/20 間隔 → 同日 founder で撤去） */
.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-dock-sep {
  display: none;
}

/* 選択 = 物は赤の縁（inset 2px）。道具タイルもサムネも同じ 1 行 */
.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab.is-on,
.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab.is-on .dc-parts-tab-label {
  color: var(--dc-ink);
}

.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab.is-on {
  background: transparent;
}

.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab.is-on .dc-parts-tab-icon {
  background: var(--dc-face);
  color: var(--dc-ink);
  box-shadow: var(--dc-ring);
}

.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-item.is-on .dc-parts-tab-thumb {
  background: var(--dc-stage);
  color: var(--dc-ink);
  box-shadow: var(--dc-ring);
}

.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab.is-on .dc-parts-tab-count {
  background: var(--white);
  color: var(--red);
  box-shadow: 0 0 0 1px var(--red-light);
}

.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab:active .dc-parts-tab-icon,
.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab:active .dc-parts-tab-thumb {
  transform: scale(0.94);
  transition-duration: 60ms;
}

.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-back .dc-parts-tab-icon {
  background: transparent;
  color: var(--dc-ink);
}

/* 道具・操作 = 箱なしの印（9/20「全体的に安っぽい」: TikTok / CapCut は印が大きく下に小さな名前・箱は物だけ）。
   押せる幅（46px）はそのまま。印は 26px・線幅 2.2（JS）。名前はふつうの太さの濃い字 */
.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab:not(.dc-parts-tab-item):not(.dc-parts-tab-scene) {
  gap: var(--s-2);
  color: var(--dc-ink);
}

.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab:not(.dc-parts-tab-item):not(.dc-parts-tab-scene) .dc-parts-tab-icon {
  width: 46px;
  height: 32px;
  border-radius: 0;
  background: transparent;
  color: var(--dc-ink);
}

.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab:not(.dc-parts-tab-item):not(.dc-parts-tab-scene) .dc-parts-tab-icon svg {
  width: 26px;
  height: 26px;
}

.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab:not(.dc-parts-tab-item):not(.dc-parts-tab-scene) .dc-parts-tab-label {
  color: var(--dc-ink);
  font-weight: 500;
}

/* 選択中の道具（カメラを開いている間など）: 箱が無いので縁は使えない → 印だけ赤。名前は黒のまま（赤い文字は使わない） */
.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab.is-on:not(.dc-parts-tab-item):not(.dc-parts-tab-scene) .dc-parts-tab-icon {
  background: transparent;
  box-shadow: none;
  color: var(--red);
}

.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab:not(.dc-parts-tab-item):not(.dc-parts-tab-scene):active .dc-parts-tab-icon {
  transform: scale(0.88);
  transition-duration: 90ms;
}

/* アセット階層の ‹ は 46px の箱の高さに合わせる（印の 32px のままだと名前だけ 14px 上にずれた・実測） */
.preview-panel.dc-parts-mobile .dc-parts-dock[data-level="assets"] .dc-parts-tab.dc-parts-tab-back:not(.dc-parts-tab-item):not(.dc-parts-tab-scene) .dc-parts-tab-icon {
  height: 46px;
}

/* 場面ピル（UI 階層）= 「いま見ている場所」。箱を持たない 1 行の語（9/20 A-5: 赤は「直している対象」だけ） */
.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-scene {
  align-items: center;
  align-self: flex-start;
  margin-top: 7px; /* (46 − 32) / 2 = 箱と光学中心を合わせる */
  height: 32px;
  min-width: 0;
  padding: 0 var(--s-12);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--dc-weak);
}

.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab.dc-parts-tab-scene {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-scene.is-on {
  background: var(--dc-face);
  color: var(--dc-ink);
}

.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-scene .dc-parts-tab-icon {
  display: none;
}

.preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-scene .dc-parts-tab-label {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

/* UI 階層の行: 全部を行の中心に揃える。‹ は名前を出さない（いま居る場所は選択中の場面が言う）。
 * 場面 = 切り替え（iOS のセグメント）: 灰色の溝の中で選んだ画面だけ白く浮く（9/23 founder「UI モーダルが分かりづらいね」。
 * 上のシートの部品チップ = 白地＋細い線のピルと形で言い分ける。見出しは足さない = 9/18「このエリアがいらない」） */
.preview-panel.dc-parts-mobile .dc-parts-dock[data-level="ui"]:not([hidden]) {
  align-items: center;
}

.preview-panel.dc-parts-mobile .dc-parts-dock[data-level="ui"] .dc-parts-dock-scroll {
  flex: 0 1 auto;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  margin: 0;
  padding: 3px;
  border-radius: var(--r-full);
  background: var(--gray-100);
  -webkit-mask-image: none;
  mask-image: none;
}

.preview-panel.dc-parts-mobile .dc-parts-dock[data-level="ui"] .dc-parts-tab-back .dc-parts-tab-label {
  display: none;
}

.preview-panel.dc-parts-mobile .dc-parts-dock[data-level="ui"] .dc-parts-tab.dc-parts-tab-back:not(.dc-parts-tab-item):not(.dc-parts-tab-scene) .dc-parts-tab-icon {
  height: 32px; /* 行は場面のピルだけ → ‹ もピルと同じ高さ */
}

.preview-panel.dc-parts-mobile .dc-parts-dock[data-level="ui"] .dc-parts-tab.dc-parts-tab-scene {
  align-self: center;
  height: 32px;
  margin-top: 0;
  padding: 0 var(--s-14);
  background: transparent;
  color: var(--gray-500);
  transition: background-color 180ms var(--dc-spring, var(--ease-out)), color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.preview-panel.dc-parts-mobile .dc-parts-dock[data-level="ui"] .dc-parts-tab.dc-parts-tab-scene.is-on {
  background: var(--white);
  color: var(--gray-900);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 階層を移ったとき: タイルが 16ms ずつ遅れて下から立ち上がる（JS が階層の変わった 1 回だけ is-level-enter を付ける） */
@keyframes dcTileIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.preview-panel.dc-parts-mobile .dc-parts-dock.is-level-enter .dc-parts-dock-scroll > *,
.preview-panel.dc-parts-mobile .dc-parts-dock.is-level-enter > .dc-parts-tab-back {
  animation: dcTileIn 300ms var(--dc-spring) both;
}

.preview-panel.dc-parts-mobile .dc-parts-dock.is-level-enter .dc-parts-dock-scroll > :nth-child(2) { animation-delay: 16ms; }
.preview-panel.dc-parts-mobile .dc-parts-dock.is-level-enter .dc-parts-dock-scroll > :nth-child(3) { animation-delay: 32ms; }
.preview-panel.dc-parts-mobile .dc-parts-dock.is-level-enter .dc-parts-dock-scroll > :nth-child(4) { animation-delay: 48ms; }
.preview-panel.dc-parts-mobile .dc-parts-dock.is-level-enter .dc-parts-dock-scroll > :nth-child(5) { animation-delay: 64ms; }
.preview-panel.dc-parts-mobile .dc-parts-dock.is-level-enter .dc-parts-dock-scroll > :nth-child(6) { animation-delay: 80ms; }
.preview-panel.dc-parts-mobile .dc-parts-dock.is-level-enter .dc-parts-dock-scroll > :nth-child(7) { animation-delay: 96ms; }
.preview-panel.dc-parts-mobile .dc-parts-dock.is-level-enter .dc-parts-dock-scroll > :nth-child(n+8) { animation-delay: 112ms; }

/* 「横に続く」の矢印（9/23 founder「スワイプできることをわかりやすく。矢印を出すとか」・JS attachPartsDockScrollHints）。
 * 墨の丸（gray-900）に白抜きの山形 = 押せる物として一番強い無彩色（赤は選択と実行に予約）。続きがあるときだけ弾んで現れる。
 * 右の矢印: 出た直後に波紋 3 回 / 最初のちら見せ中は右へ 2 回揺れる（is-nudging）/ 列が先頭にある間は 4 秒おきに山形が 4px。
 * 矢印の後ろの白いフェード（::before）は撤去: transform で重なりの文脈ができ、丸より上に描かれて墨の丸を隠した */
.preview-panel.dc-parts-mobile .dc-parts-dock-arrow {
  position: absolute;
  top: calc(var(--s-10) + 23px); /* 46px の箱の中心（ドックの上 padding 10 + 23） */
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: var(--r-full);
  background: var(--gray-900);
  color: var(--white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 6px 16px rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.6);
  transition: opacity 180ms var(--ease-out), transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1); /* 出るときだけ少し行き過ぎて戻る */
}

.preview-panel.dc-parts-mobile .dc-parts-dock-arrow svg { width: 16px; height: 16px; }
.preview-panel.dc-parts-mobile .dc-parts-dock-arrow.is-left { left: 6px; }
/* UI 階層は左端に ‹（場面の列から戻る・46px）がある。左の矢印を列の左端（‹ の右）へ寄せる。
 * 以前は 6px のままで ‹ の上に黒い丸が重なり、‹ が押せなかった（2026-09-24 founder の Sandbox スクショ） */
.preview-panel.dc-parts-mobile .dc-parts-tab-back ~ .dc-parts-dock-arrow.is-left { left: 68px; }
.preview-panel.dc-parts-mobile .dc-parts-dock-arrow.is-right { right: 6px; }

.preview-panel.dc-parts-mobile .dc-parts-dock-arrow.is-shown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.preview-panel.dc-parts-mobile .dc-parts-dock-arrow:active {
  transform: translateY(-50%) scale(0.9);
  transition-duration: 60ms;
}

/* UI 階層の溝（セグメント）は箱の無い行なので、行の中央に */
.preview-panel.dc-parts-mobile .dc-parts-dock[data-level="ui"] .dc-parts-dock-arrow {
  top: 50%;
}

@keyframes dcDockNudge {
  0%, 100% { transform: translateY(-50%) translateX(0) scale(1); }
  30% { transform: translateY(-50%) translateX(4px) scale(1); }
  60% { transform: translateY(-50%) translateX(0) scale(1); }
}

.preview-panel.dc-parts-mobile .dc-parts-dock-arrow.is-right.is-shown.is-nudging {
  animation: dcDockNudge 900ms var(--ease-out) 400ms 2;
}

.preview-panel.dc-parts-mobile .dc-parts-dock-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  box-shadow: 0 0 0 0 rgba(23, 23, 23, 0.35);
  pointer-events: none;
}

@keyframes dcDockRipple {
  0% { box-shadow: 0 0 0 0 rgba(23, 23, 23, 0.35); }
  100% { box-shadow: 0 0 0 12px rgba(23, 23, 23, 0); }
}

.preview-panel.dc-parts-mobile .dc-parts-dock-arrow.is-right.is-shown::after {
  animation: dcDockRipple 1100ms var(--ease-out) 300ms 3;
}

/* 丸は動かさず山形だけ。4 秒周期の最初の 0.6 秒で右へ 4px 行って戻る（一度でも流したら JS が is-at-start を外す = 知ったら黙る） */
@keyframes dcDockBeckon {
  0%, 15%, 100% { transform: translateX(0); }
  7% { transform: translateX(4px); }
}

.preview-panel.dc-parts-mobile .dc-parts-dock-arrow.is-right.is-shown.is-at-start svg {
  animation: dcDockBeckon 4000ms var(--ease-out) 1600ms infinite;
}

/* =============================================================================
 * 4. シート — 本体・見出し・✓・UI の一覧シート・公開設定シート
 * ============================================================================= */

/* 本体: 左右は 16px の基準線。上は 0（見出しを上に貼り付けるため）。下 16px（ツールバーの上に乗るので safe-area は要らない） */
.preview-panel.dc-parts-mobile .dc-parts-body {
  padding: 0 var(--dc-gutter) var(--s-16);
}

/* 見出し（名前）は上に貼り付ける（27 コマ級の表をスクロールすると ✓ の下を「キャラ全体」の帯がくぐって重なっていた）。
   白い帯にして中身をその下へ流す。右は ✓（32px）＋息 */
.preview-panel.dc-parts-mobile .dc-parts-asset-head,
.preview-panel.dc-parts-mobile .dc-ui-edit-head {
  position: sticky;
  top: 0;
  z-index: 2;
  align-items: center;
  min-height: 44px;
  margin: 0 calc(-1 * var(--dc-gutter));
  padding-left: var(--dc-gutter);
  padding-right: calc(var(--dc-gutter) + 40px);
  background: var(--white);
}

.preview-panel.dc-parts-mobile .dc-ui-edit-head {
  display: flex;
  gap: var(--s-6);
}

.preview-panel.dc-parts-mobile .dc-parts-asset-head .dc-parts-name,
.preview-panel.dc-parts-mobile .dc-ui-edit-head .dc-parts-name {
  color: var(--dc-ink);
  font-size: 1.0625rem; /* 17px（15px は「項目名」に見えていた・9/20 夜） */
  font-weight: 700;
  letter-spacing: 0;
}

/* アセットの見出しは名前だけ（PC の最小高） */
.dc-parts-asset-head {
  min-height: 28px;
}

/* ✓（パネルだけを閉じる・9/18 founder #4）。PC には無い。小さい丸ボタンの寸法は 32px の 1 つ（✓・一覧へ戻る ‹・履歴の ×） */
.dc-parts-close {
  display: none;
}

.preview-panel.dc-parts-mobile .dc-parts-pane:not([hidden]) .dc-parts-close {
  position: absolute;
  top: 6px;
  right: var(--dc-gutter);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--r-full);
  background: var(--dc-face);
  color: var(--dc-ink);
  transition: transform 120ms var(--ease-out);
}

.preview-panel.dc-parts-mobile .dc-parts-pane:not([hidden]) .dc-parts-close:active {
  background: var(--dc-face);
  transform: scale(0.94);
  transition-duration: 60ms;
}

.preview-panel.dc-parts-mobile.dc-parts-full .dc-parts-pane:not([hidden]) .dc-parts-close {
  top: calc(6px + env(safe-area-inset-top));
}

/* UI 階層の一覧シート（9/18 founder 6〜7 回目「一覧表示してほしい」「横 1 行にしましょう」）。
 * 見出しを持たないので本体の上 0 を戻して 12px（チップが板の上端に張り付いて ✓ と段がずれた）。上下 12px で対称・✓ はチップの行の高さ */
.preview-panel.dc-parts-mobile .dc-ui-overview {
  padding-top: var(--s-12);
  padding-right: 44px; /* ✓（32px）と重ならない */
}

.preview-panel.dc-parts-mobile .dc-parts-pane:not([hidden]):has(.dc-ui-overview) .dc-parts-close {
  top: var(--s-12);
}

.preview-panel.dc-parts-mobile .dc-parts-pane:not([hidden]):has(.dc-ui-overview) .dc-parts-body {
  padding-bottom: var(--s-12);
}

.preview-panel.dc-parts-mobile .dc-ui-overview-title {
  color: var(--gray-500);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* チップは折り返さず横 1 行（ツールバーと同じ流儀・シートの高さを食わない） */
.preview-panel.dc-parts-mobile .dc-ui-overview-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-4);
  margin-top: 0;
  padding-bottom: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.preview-panel.dc-parts-mobile .dc-ui-overview-grid::-webkit-scrollbar {
  display: none;
}

/* 公開設定のシート（9/23 founder「設定が別ページに飛ばされてしまうのがストレス」・openPartsSettingsSheet）。
 * 中身は /publish?embed=studio の iframe。背景は暗くしない（9/20「暗転は却下」）— 白で薄くかすませる。
 * スマホ = 下からの全画面シート（上端 16px の角丸）/ PC = 右からの引き出し（9 章）。入退場は --dc-spring の 1 回だけ */
.dc-settings-sheet {
  --dc-spring: cubic-bezier(0.32, 0.72, 0, 1);
  position: fixed;
  inset: 0;
  z-index: 2000;
}

.dc-settings-sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}

.dc-settings-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100dvh - 24px - env(safe-area-inset-top));
  overflow: hidden;
  border-radius: var(--r-16) var(--r-16) 0 0;
  background: var(--white);
  box-shadow: 0 -1px 0 var(--gray-200), 0 -12px 32px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform 320ms var(--dc-spring);
}

.dc-settings-sheet-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--white);
}

.dc-settings-sheet.is-open .dc-settings-sheet-scrim { opacity: 1; }
.dc-settings-sheet.is-open .dc-settings-sheet-panel { transform: none; }

/* =============================================================================
 * 5. アセットの編集 — 見本・依頼欄・手直し
 * =============================================================================
 * シート＝インスペクタなので、インスペクタ自身の枠は持たない（シートの中にもう 1 枚の箱ができていた・9/18）。
 * 名前は見出し（.dc-ui-edit-head / .dc-parts-asset-head）が出すのでインスペクタ内の名前は隠す。.png のパスは出さない（PC では残す）。 */
.preview-panel.dc-parts-mobile .dc-parts-inspector {
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

.preview-panel.dc-parts-mobile .dc-ui-edit-head + .dc-parts-inspector > .dc-parts-name {
  display: none;
}

.preview-panel.dc-parts-mobile .dc-parts-file {
  display: none;
}

/* 見本 = 展示台に置いた「直している物そのもの」 */
.dc-parts-inspector-media {
  background: var(--dc-stage);
}

.preview-panel.dc-parts-mobile .dc-parts-inspector-media {
  aspect-ratio: auto;
  height: 22dvh; /* 45dvh のシート時代の大きさ（全画面では下で上書き） */
  min-height: 120px;
  max-height: 200px;
  border-radius: var(--dc-r-box);
  background: var(--dc-stage);
}

/* 全画面の本体は縦 flex。依頼欄を margin-top:auto で**いつも**下端へ（9/20 Zhang A-1: 絵 1 枚のアセットで依頼欄が画像のすぐ下に来て
   下が白紙になり、「頼む」ボタンがアセットごとに上下していた）。表が長いときの貼り付き（sticky）はそのまま効く */
.preview-panel.dc-parts-mobile.dc-parts-full .dc-parts-body {
  display: flex;
  flex-direction: column;
}

.preview-panel.dc-parts-mobile.dc-parts-full .dc-parts-body > * {
  flex: 0 0 auto;
}

.preview-panel.dc-parts-mobile.dc-parts-full .dc-parts-body > .dc-parts-inspector {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* 全画面の見本: 表があるポーズ組は控えめ（表と依頼欄が 1 画面に入ることを優先）*/
.preview-panel.dc-parts-mobile.dc-parts-full .dc-parts-inspector-media {
  aspect-ratio: auto;
  height: 18dvh;
  min-height: 112px;
  max-height: 28dvh;
  margin-bottom: var(--s-16);
}

/* 見本を名前の見出し（sticky・44px）のすぐ下に貼り付ける（9/23 founder「アセットのプレビューが見えなくてスクロールしなければいけない」）。
   貼り付いた見本の下を表が流れるので、まわりに白の縁（6px）を敷いて流れる中身が角から覗かないようにする */
.preview-panel.dc-parts-mobile.dc-parts-full .dc-parts-inspector > .dc-parts-inspector-media {
  position: sticky;
  top: 44px;
  z-index: 1;
  box-shadow: 0 0 0 6px var(--white), 0 8px 12px -6px rgba(0, 0, 0, 0.06);
}

/* 絵 1 枚・コードで組んだアセット（表が無い）: 見本が残りの高さを全部取る（中央の白紙が消える。説明やカードで埋めない） */
.preview-panel.dc-parts-mobile.dc-parts-full .dc-parts-inspector:not(:has(.dc-parts-posegrid)) .dc-parts-inspector-media {
  flex: 1 1 auto;
  height: auto;
  min-height: 200px;
  max-height: none;
  margin-bottom: var(--s-16);
}

/* 見本の絵は枠いっぱいに「収める」（2026-09-28 founder の Sandbox 確認「画像プレビューが全部おさまってない」）。
   縦長の絵（配達スクーター 348×401 表示）で下が切れていた。原因: 見本の枠は全画面では flex で伸びる高さ（height:auto）・
   PC では aspect-ratio で決まる高さで、どちらも子の max-height:100% の基準として確定しない場合がある → 絵が元の高さで
   はみ出し、枠の overflow:hidden で切られる。絵を枠に重ねて置き（absolute + inset:0）、object-fit:contain で収める =
   枠の高さの決まり方に左右されない。枠の大きさは上の規則（全画面は残り高さ・シートは 22dvh・PC は 4:3）のまま。
   見本（inspector-media）だけに効かせる — タイル・コマ・アップロードの見比べは別の枠で、切れていない */
.dc-parts-inspector-media > .dc-parts-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

/* 直せない表示だけの部品（主役の共通アバター）: 依頼欄が無いので見本は控えめに */
.preview-panel.dc-parts-mobile.dc-parts-full .dc-parts-inspector.dc-parts-inspector-readonly .dc-parts-inspector-media {
  flex: 0 0 auto;
  height: 32dvh;
}

/* 表の下に 1 章ぶん空ける（見本と依頼欄の間が詰まりすぎない） */
.preview-panel.dc-parts-mobile.dc-parts-full .dc-parts-inspector > .dc-parts-posegrid {
  margin-bottom: var(--s-16);
}

/* 全画面の依頼欄（入力＋「描き直しを頼む」）は下に貼り付ける。sticky の基準はスクロールする .dc-parts-body。
   body の下 padding（16px）ぶんを負の bottom / margin で打ち消して下端に密着。線 1 本で切る */
.preview-panel.dc-parts-mobile.dc-parts-full .dc-parts-inspector > .dc-parts-edit {
  position: sticky;
  bottom: calc(-1 * var(--s-16));
  z-index: 1;
  margin: var(--s-16) calc(-1 * var(--dc-gutter)) calc(-1 * var(--s-16));
  margin-top: auto; /* shorthand の後に置く（上の margin で auto を上書きして依頼欄が見本の下に戻った・9/20 実測補正 2） */
  padding: var(--s-12) var(--dc-gutter) var(--s-16);
  border-top: 1px solid var(--dc-line);
  background: var(--white, #fff);
}

/* 畳んである「作ったときの指示」を開いても表を覆い尽くさない */
.preview-panel.dc-parts-mobile.dc-parts-full .dc-parts-edit .dc-parts-prompt {
  max-height: 24dvh;
  overflow-y: auto;
}

/* 依頼欄の入力: 面が入れ物（ChatGPT / iMessage の入力欄）。入力中だけ白地＋黒い縁（赤は「直している対象」に予約）。
   タッチで操作できない resize の摘みは消す */
.dc-parts-textarea {
  padding: var(--s-10) var(--s-12);
  border-color: transparent;
  border-radius: var(--r-16);
  background: var(--gray-100);
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}

.dc-parts-textarea:focus {
  border-color: var(--gray-900);
  background: var(--white);
}

.preview-panel.dc-parts-mobile .dc-parts-textarea,
.preview-panel.dc-parts-mobile .dc-ui-textarea {
  padding: var(--s-12) var(--s-14);
  border: 1px solid var(--dc-line);
  border-color: transparent;
  border-radius: var(--r-16);
  background: var(--dc-face);
  color: var(--dc-ink);
  font-size: 0.8125rem;
  line-height: 1.5;
  resize: none;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}

.preview-panel.dc-parts-mobile .dc-parts-textarea {
  min-height: 72px;
}

.preview-panel.dc-parts-mobile .dc-parts-textarea::placeholder,
.preview-panel.dc-parts-mobile .dc-ui-textarea::placeholder {
  color: var(--dc-weak);
}

.preview-panel.dc-parts-mobile .dc-parts-textarea:focus,
.preview-panel.dc-parts-mobile .dc-ui-textarea:focus {
  background: var(--white);
  border-color: var(--dc-ink);
  outline: none;
}

/* 主ボタン = この画面で唯一の赤い面。落ち影はやわらかい 2 層（1 層の濃い影は「浮いたシール」に見えた）。押すとばねで戻る。
   無効でも赤のまま（9/20 裁定 11: 色が変わるとボタンの正体まで変わって見える）。
   :active と :disabled は同時に成り立たない（無効のボタンは :active にならない）ので、両者の前後は結果に効かない */
.preview-panel.dc-parts-mobile .dc-parts-edit-send {
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--r-full);
  background: var(--red);
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(255, 59, 48, 0.24), 0 8px 20px rgba(255, 59, 48, 0.2);
  transition: transform 260ms var(--dc-spring), opacity 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.preview-panel.dc-parts-mobile .dc-parts-edit-send:active {
  transform: scale(0.96);
  transition-duration: 60ms;
  box-shadow: 0 1px 2px rgba(255, 59, 48, 0.24);
}

.preview-panel.dc-parts-mobile .dc-parts-edit-send:disabled {
  background: var(--red);
  color: var(--white);
  opacity: 0.4;
  transform: none;
  box-shadow: none;
}

/* 折りたたみの見出し（作ったときの指示 / 位置 / AI に頼む）: 小さな従の字。記号はブラウザ既定の ▶ ではなく ⌄ / ⌃ */
.preview-panel.dc-parts-mobile .dc-parts-prompt-summary,
.preview-panel.dc-parts-mobile .dc-ui-position-summary,
.preview-panel.dc-parts-mobile .dc-ui-ask-summary {
  color: var(--dc-weak);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0;
}

.preview-panel.dc-parts-mobile .dc-parts-prompt-summary {
  list-style: none;
}

.preview-panel.dc-parts-mobile .dc-parts-prompt-summary::-webkit-details-marker {
  display: none;
}

.preview-panel.dc-parts-mobile .dc-parts-prompt-summary::after {
  content: "⌄";
  margin-left: var(--s-4);
  color: var(--gray-400);
}

.preview-panel.dc-parts-mobile .dc-parts-prompt-box[open] .dc-parts-prompt-summary::after {
  content: "⌃";
}

.preview-panel.dc-parts-mobile .dc-parts-prompt {
  color: var(--dc-weak);
  font-size: 0.8125rem;
}

/* 絵の手直し（クロップ / 画像を編集）— 9/18 founder「ライブラリと同じ編集機能」。PC でも同形。
 * 既定の形 = 白地＋1px 線のピル（副ボタンの唯一の形。クロップ / 画像を編集 / 元の位置 / もどす）。 */
.dc-parts-image-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  margin: var(--s-6) 0 var(--s-8);
}

.dc-parts-image-tool {
  padding: var(--s-6) var(--s-12);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-full);
  background: var(--white);
  color: var(--gray-900);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.dc-parts-image-tool:active {
  background: var(--gray-100);
}

.dc-parts-image-tool:disabled {
  opacity: 0.5;
  cursor: default;
}

.preview-panel.dc-parts-mobile .dc-parts-image-tool,
.preview-panel.dc-parts-mobile .dc-ui-position-reset {
  height: 32px;
  padding: 0 var(--s-12);
  border: 1px solid var(--dc-line);
  border-radius: var(--r-full);
  background: var(--white);
  color: var(--dc-ink);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0;
}

.preview-panel.dc-parts-mobile .dc-parts-image-tool:active {
  background: var(--dc-face);
}

/* 送信行を左右に分ける: 左 = 手直し（または作ったときの指示）・右 = 送信（9/18「指示は描き直しを頼むの左側あたりでいい」→
 * 9/20「スクロールしないと編集ボタンがないのが使いづらすぎる。しかも目立たなさすぎる」で手直しを送信の左へ）。
 * 手直しは送信（赤い面）と同じ 44px・面（gray-100）＋絵＋語。幅が足りないロケールでは送信が次の行へ折り返す */
.dc-parts-edit-actions {
  align-items: center;
}

.dc-parts-edit-aside {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  align-self: center;
}

.dc-parts-edit-aside .dc-parts-prompt {
  margin-top: var(--s-6);
}

.dc-parts-edit-aside.dc-parts-prompt.is-muted {
  font-size: 0.75rem;
}

.dc-parts-image-tools.dc-parts-edit-aside {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: var(--s-6);
  min-width: 0;
  margin: 0;
}

.dc-parts-edit-aside .dc-parts-image-tool,
.preview-panel.dc-parts-mobile .dc-parts-edit-aside .dc-parts-image-tool {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  height: 44px;
  padding: 0 var(--s-12);
  border: none;
  border-radius: var(--r-full);
  background: var(--gray-100);
  color: var(--gray-900);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 120ms var(--ease-out);
}

.dc-parts-edit-aside .dc-parts-image-tool:active { transform: scale(0.96); transition-duration: 60ms; }
.dc-parts-edit-aside .dc-parts-image-tool:disabled { opacity: 0.4; cursor: default; }

.dc-parts-image-tool-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.dc-parts-image-tool-icon svg { width: 18px; height: 18px; }

/* 作ったときの指示（送信行の下へ移った版）: 読むだけの物なので静かに 1 行。
   上の罫線は外す（editor.css の .dc-parts-prompt-box の名残で、依頼欄の上の 1 本と二重・行の左半分だけに引かれていた） */
.dc-parts-edit-below {
  margin: var(--s-8) 0 0;
}

.dc-parts-prompt-box.dc-parts-edit-aside,
.dc-parts-prompt-box.dc-parts-edit-below {
  border-top: none;
  padding-top: 0;
}

/* 主役（共通アバター）= 直せない表示だけの部品（9/20 founder）。絵は配色つきの人型の印・案内は静かな 2 行。PC でも同形 */
.dc-parts-thumb-avatar {
  display: grid;
  place-items: center;
}

.dc-parts-thumb-avatar svg {
  width: 72%;
  height: 72%;
}

.dc-parts-inspector-media.dc-parts-thumb-avatar svg {
  width: auto;
  height: 70%;
}

.dc-parts-readonly-title {
  margin: var(--s-16) 0 var(--s-4);
  color: var(--gray-900);
  font-size: 0.9375rem;
  font-weight: 700;
}

.dc-parts-readonly-note {
  margin: 0;
  color: var(--gray-500);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* =============================================================================
 * 6. コマの表 = 描き直す範囲の選択（PC とスマホ共通）
 * =============================================================================
 * 9/20 founder「ごちゃごちゃしすぎ」で作り直し: 表そのものを押して選ぶ。押せるのは「キャラ全体」／ポーズの見出し／向きの矢印／コマの 4 種類。
 * 原則（9/20 Zhang 原則 2）: **面は範囲・縁は個体**。範囲に入ったコマ = 薄い赤の面 / 基準の 1 枚 = 赤い縁。範囲外は沈めない
 *   （薄いと「直したのか無効なのか」区別できない）。範囲の見出しの選択は赤い縁（9/23 founder「キャラ全体を押しても赤い枠がつかない」で
 *   一度面にしたのを戻した）。余白は 24（章）/ 8（見出し→表）/ 4（コマどうし）の 3 段だけ。 */
.dc-parts-posegrid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-24);
}

/* 見出しの行: 「描き直す範囲」の語＋右に小さな「キャラ全体」の切り替え（横いっぱいの大きいピルは実行ボタンに見えた・9/23） */
.dc-parts-posegrid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
  min-height: 32px;
}

.dc-parts-posegrid-title {
  color: var(--gray-900);
  font-size: 0.8125rem;
  font-weight: 700;
}

/* 「キャラ全体」は常に見出しの行の中（studio-parts-assets.js headRow）。寸法・面・字は下の .dc-parts-posegrid-head 側が持つ */
.dc-parts-posegrid-all {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  gap: var(--s-4);
  border-radius: var(--r-full);
  font-family: inherit;
  letter-spacing: 0;
  cursor: pointer;
  transition: box-shadow 140ms var(--ease-out), transform 120ms var(--ease-out);
}

.dc-parts-posegrid-head .dc-parts-posegrid-all {
  flex: 0 0 auto;
  width: auto;
  min-height: 32px;
  padding: 0 var(--s-14);
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-900);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ポーズの見出し: 面を持たない語（選ぶと縁が付く）。押せることは字の濃さと押下の沈みで伝える */
.dc-parts-pose-group-label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--s-4);
  min-height: 32px;
  padding: 0 var(--s-12);
  border: none;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--dc-ink);
  font-family: inherit;
  font-size: 0.8125rem; /* 9/20 裁定 9: 範囲の見出しは 13px（一律 11px だと表の頭が読めない） */
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), transform 260ms var(--dc-spring, var(--ease-out));
}

.dc-parts-pose-group-count {
  margin-left: var(--s-2);
  color: var(--dc-weak);
  font-size: 0.6875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* 向きの矢印 = 列の見出し（コマと同じグレーの箱だと押せるボタンが 2 段並んで見えた・9/20 B-1） */
.dc-parts-posegrid-facing {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--dc-weak);
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 700;
  cursor: pointer;
}

.dc-parts-posegrid-facing svg { width: 18px; height: 18px; }

.dc-parts-posegrid-facing:disabled {
  background: transparent;
  cursor: default;
  opacity: 0.4;
}

/* 範囲の見出しの選択 = 白地＋赤い縁（inset 2px） */
.dc-parts-posegrid-head .dc-parts-posegrid-all.is-on,
.dc-parts-pose-group-label.is-on,
.dc-parts-posegrid-facing.is-on {
  border-color: transparent;
  background: var(--white);
  color: var(--gray-900);
  box-shadow: inset 0 0 0 2px var(--red);
  font-weight: 700;
}

.dc-parts-pose-group-label.is-on .dc-parts-pose-group-count { color: var(--dc-weak); }

.dc-parts-posegrid-all:active,
.dc-parts-pose-group-label:active,
.dc-parts-posegrid-facing:active {
  transform: scale(0.96);
  transition-duration: 60ms;
}

.dc-parts-pose-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  width: 100%;
  min-width: 0;
}

/* 表。列数は JS が --dc-posegrid-cols で渡す。セルは 1fr だが 56px で頭打ち（2 方向しか無いキャラでコマが巨大にならない）。
   8 列がスマホ幅に収まる: (366 − 7×4) / 8 ≒ 42px */
.dc-parts-posegrid-table {
  display: grid;
  grid-template-columns: repeat(var(--dc-posegrid-cols, 1), minmax(0, 56px));
  gap: var(--s-4);
  width: 100%;
  min-width: 0;
}

/* 向きが行になる形（左右 2 方向 × 8 コマなど）: 先頭列が向きの矢印。コマが多ければこの表だけ横にスクロール */
.dc-parts-posegrid-table[data-axis="rows"] {
  grid-template-columns: 32px repeat(var(--dc-posegrid-cols, 1), minmax(40px, 56px));
  overflow-x: auto;
}

/* 向きの語が無いポーズ（idle 1 枚・run_01..06）: コマを流すだけ */
.dc-parts-posegrid-table[data-axis="flow"] {
  grid-template-columns: repeat(auto-fill, minmax(44px, 56px));
}

.dc-parts-posegrid-table[data-axis="rows"] .dc-parts-posegrid-facing {
  min-height: 0; /* 行の高さ（コマ）に合わせて伸びる */
}

/* コマ = 展示台（枠なし・角丸 12）。押す → 離すとばねで戻る */
.dc-parts-pose-cell {
  border-radius: var(--r-12);
  background: var(--dc-stage);
  transition: transform 260ms var(--dc-spring), box-shadow 180ms var(--dc-spring);
}

/* 表の中のコマは列幅に合わせる（editor.css の既定は横スクロール列用の 48px 固定） */
.dc-parts-posegrid-table .dc-parts-pose-cell {
  position: relative;
  width: auto;
  min-width: 0;
  padding: var(--s-4);
  border: none;
  border-radius: var(--dc-r-box);
  background: var(--dc-face);
  box-shadow: none;
  transition: background-color 140ms var(--ease-out), transform 120ms var(--ease-out);
}

.dc-parts-posegrid-table .dc-parts-pose-cell .dc-parts-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--r-8);
}

.dc-parts-thumb .dc-parts-img,
.dc-parts-pose-cell .dc-parts-img,
.dc-parts-tab-thumb .dc-parts-img {
  filter: var(--dc-object-shadow); /* 物に 2px の落ち影（台に置かれて見える） */
}

.dc-parts-pose-cell.is-in-scope { background: var(--red-light); }
.dc-parts-pose-cell.is-out-of-scope { opacity: 1; }

.dc-parts-posegrid-table .dc-parts-pose-cell.is-on {
  border: none;
  box-shadow: var(--dc-ring);
}

.dc-parts-pose-cell:active { transform: scale(0.94); transition-duration: 60ms; }

.dc-parts-pose-cell.is-on {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--red);
}

button.dc-parts-pose-cell:active {
  transform: scale(0.94);
  transition-duration: 60ms;
}

.dc-parts-pose-label {
  color: var(--dc-weak);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.dc-parts-scope-summary {
  margin: 0 0 var(--s-8);
  color: var(--dc-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* スマホのコマも展示台（表のコマの面 gray-100 より強い指定）。1 コマずつのカードの「範囲に入った」薄い赤はこの後ろで当てる */
.preview-panel.dc-parts-mobile .dc-parts-pose-cell {
  background: var(--dc-stage);
}

/* 1 コマずつのポーズは横並びのカード（コマの下にポーズの表示名・6 ロケール）。見出し＋1 コマの縦積みは 3 ポーズで画面を使い切った */
.dc-parts-posegrid-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--s-12) var(--s-8);
}

.dc-parts-pose-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-6);
  min-width: 0;
}

.dc-parts-posegrid-strip .dc-parts-pose-cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: var(--s-8);
  border: none;
  border-radius: var(--r-12);
  background: var(--dc-stage, var(--gray-100));
  box-shadow: none;
  transition: background-color 160ms var(--ease-out), box-shadow 180ms var(--ease-out), transform 260ms var(--dc-spring, var(--ease-out));
}

.dc-parts-posegrid-strip .dc-parts-pose-cell .dc-parts-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dc-parts-posegrid-strip .dc-parts-pose-cell.is-in-scope { background: var(--red-light); }
.dc-parts-posegrid-strip .dc-parts-pose-cell.is-on { box-shadow: inset 0 0 0 2px var(--red); }
.dc-parts-posegrid-strip .dc-parts-pose-cell:active { transform: scale(0.95); transition-duration: 60ms; }

.dc-parts-pose-card-name {
  color: var(--gray-900);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 範囲に入ったコマの薄い赤は、スマホの展示台（下の「1 コマずつ」の前に置いた .preview-panel.dc-parts-mobile 付きの強い指定）より
   **後・同じ強さ**で当て直す（9/23 founder「モーションすべてを選択だと分かりづらい」: 展示台が .is-in-scope に勝ち、範囲のコマに色が付かなかった） */
.preview-panel.dc-parts-mobile .dc-parts-pose-cell.is-in-scope,
.dc-parts-posegrid .dc-parts-pose-cell.is-in-scope {
  background: var(--red-light);
}

/* 動きは結果への返事の 2 つだけ（9/20 原則 3）。
   A. 直った 1 枚の縁が 1 回だけ脈打つ（2 → 3 → 2px・220ms） */
@keyframes dcFixedPulse {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--red); }
  45% { box-shadow: inset 0 0 0 3px var(--red); }
}

.dc-parts-posegrid-table .dc-parts-pose-cell.is-just-updated {
  animation: dcFixedPulse 220ms var(--ease-out) 1;
}

/* B. 「キャラ全体」を押した瞬間だけ、範囲の面が左上から 20ms ずつずれて点く（順番は JS が --dc-cell-i で渡す・12 で頭打ち） */
@keyframes dcScopeIn {
  from { background-color: var(--gray-100); }
  to { background-color: var(--red-light); }
}

.dc-parts-posegrid.is-scope-cascade .dc-parts-pose-cell.is-in-scope {
  animation: dcScopeIn 160ms var(--ease-out) both;
  animation-delay: calc(var(--dc-cell-i, 0) * 20ms);
}

/* =============================================================================
 * 7. UI の編集 — 一覧のチップ・要素のインスペクタ（位置の欄）・PC の場面の列
 * ============================================================================= */

/* 部品チップ = 押すと直せる物: 白地＋細い線のピル（下のドックの場面セグメントと形で言い分ける・9/23）。32px の標準ピル */
.preview-panel.dc-parts-mobile .dc-ui-ov-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--s-4);
  height: 32px;
  min-height: 0;
  max-width: 160px;
  padding: 0 var(--s-12);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-full);
  background: var(--white);
  color: var(--gray-900);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 260ms var(--dc-spring, var(--ease-out)), background-color 160ms var(--ease-out);
}

.preview-panel.dc-parts-mobile .dc-ui-ov-chip:active {
  transform: scale(0.96);
  background: var(--gray-50);
  transition-duration: 60ms;
}

.preview-panel.dc-parts-mobile .dc-ui-ov-chip.is-unnamed .dc-ui-ov-chip-name {
  color: var(--dc-weak);
  font-style: normal; /* 斜体は日本語との混植で崩れる */
  font-weight: 500;
}

.preview-panel.dc-parts-mobile .dc-ui-ov-chip-id {
  color: var(--dc-weak);
  font-size: 0.6875rem;
  font-weight: 500;
}

/* 要素の編集の見出しの「‹ 一覧へ」（32px の丸） */
.preview-panel.dc-parts-mobile .dc-ui-back-to-list {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--r-full);
  background: var(--dc-face);
  color: var(--dc-ink);
}

.preview-panel.dc-parts-mobile .dc-ui-back-to-list .dc-parts-tab-icon {
  display: flex;
  width: 18px;
  height: 18px;
}

.preview-panel.dc-parts-mobile .dc-ui-back-to-list .dc-parts-tab-icon svg {
  width: 100%;
  height: 100%;
}

.preview-panel.dc-parts-mobile .dc-ui-group-title,
.preview-panel.dc-parts-mobile .dc-ui-position-label {
  color: var(--dc-weak);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* 位置の欄（X/Y・矢印・元の位置）は「AI に頼む」と同じ折りたたみ・既定は閉じる（9/18 founder 7 回目「位置は変えたいときだけ出せばいい。
   多くの人は画面上でドロップしたいはず」）。PC のインスペクタでも同じ形（見た目は editor.css の .dc-ui-ask 系と同じ値） */
.dc-ui-position-details {
  border-top: 1px solid var(--gray-200);
}

.dc-ui-position-summary {
  padding: var(--s-8) 0 0;
  color: var(--gray-600);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.dc-ui-position-summary::-webkit-details-marker {
  display: none;
}

.dc-ui-position-summary::after {
  content: "⌄";
  margin-left: var(--s-4);
  color: var(--gray-400);
}

.dc-ui-position-details[open] .dc-ui-position-summary::after {
  content: "⌃";
}

.dc-ui-position-details[open] > .dc-ui-position {
  margin-top: var(--s-8);
}

/* ドラッグの説明を先頭に（JS）・矢印は 36px・「元の位置」はテキストボタン（Mager B-3・PC）。
   スマホは矢印 44px（9/20 裁定 12: 親指のため寸法は削らない）＋面・線なし・「元の位置」は白地＋線のピル（5 章） */
.dc-ui-nudge {
  width: 36px;
  height: 36px;
}

.dc-ui-position-reset {
  background: transparent;
  border-color: transparent;
  color: var(--gray-500);
}

.dc-ui-drag-hint {
  margin: var(--s-8) 0 var(--s-6);
}

.preview-panel.dc-parts-mobile .dc-ui-position-number {
  color: var(--dc-ink);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.preview-panel.dc-parts-mobile .dc-ui-nudges {
  grid-template-columns: repeat(4, 44px);
  gap: var(--s-4);
}

.preview-panel.dc-parts-mobile .dc-ui-nudge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--dc-r-box);
  background: var(--dc-face);
  color: var(--dc-ink);
  transition: transform 120ms var(--ease-out);
}

.preview-panel.dc-parts-mobile .dc-ui-nudge svg { width: 20px; height: 20px; }
.preview-panel.dc-parts-mobile .dc-ui-nudge:active { transform: scale(0.94); transition-duration: 60ms; }
.preview-panel.dc-parts-mobile .dc-ui-nudge:disabled { opacity: 0.4; }
.preview-panel.dc-parts-mobile .dc-ui-drag-hint { color: var(--dc-weak); font-size: 0.6875rem; }

/* PC の場面ピル: 枠なし・選択は薄い面（黒い面は 2 つ目のブランド色になる — 9/20 裁定 3 をモバイルにそろえた・9/23）。
   右端で切れる場面の列は「まだ右に続く」を末尾のフェードで（色も線も足さない） */
.dc-parts-scene {
  border-color: transparent;
  background: transparent;
  color: var(--gray-500);
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}

.dc-parts-scene.is-on {
  border-color: transparent;
  background: var(--gray-100);
  color: var(--gray-900);
}

@media (hover: hover) and (pointer: fine) {
  .dc-parts-scene:not(.is-on):hover {
    background: var(--gray-50);
    color: var(--gray-900);
  }
}

.dc-parts-scenes {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

/* =============================================================================
 * 8. 履歴シート（#versionPanel）— スマホ（<1100px）は画面下からせり出す全幅モーダル
 * =============================================================================
 * 9/18 founder 4 回目「履歴もスマホ画面のときは、下からせり出てくる、横幅は100%のモーダルがいいですね」。
 * editor.css から移設（?v= 手動ハッシュが据え置かれて Cloudflare が旧版を配り続けた事故 + #versionPanel は create.html 系でも
 * 当たりうるので route-css-split テストが赤）。ブレークポイントは studio-parts-pane.js の WIDE_LAYOUT_QUERY（1100px）と揃える。
 *   - ドックごと覆ってよいモーダル（bottom:0・z 5000）。高さ上限 70dvh（ツールパネルの 45dvh とは別の要件）。幕はタップで閉じる
 *   - 開閉の状態は既存の .hidden だけ（JS に第二の状態を増やさない）。style.css の `.hidden{display:none!important}` を
 *     ID セレクタで打ち消して display を保ち、transform + opacity で滑らせる（打ち消さないと遷移が 1 度も再生されなかった）
 *   - 見た目は罫線の帳面・赤は使わない（9/20 裁定 8: 履歴は「直している対象」ではなく記録）。現在の行だけ字が濃い
 *   - 「変更箇所を見る」とその展開欄はスマホでは出さない（9/18 founder「履歴の変更箇所は必要ないね」・PC の Studio 詳細では残す）
 */
@media (max-width: 1099.98px) {
  .version-changes-btn,
  .version-changes-inline {
    display: none;
  }

  /* 幕。DOM 順で #versionPanel の直後に置くこと（`~` は後続の兄弟にしか届かない） */
  #versionPanelBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.45);
    z-index: 4999; /* シート本体（5000）の直下 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease-out);
  }

  #versionPanel:not(.hidden) ~ #versionPanelBackdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* ID セレクタはクラスセレクタより詳細度が高いので、同じ !important 同士でもこちらが勝つ */
  #versionPanel.hidden {
    display: flex !important;
  }

  .version-panel {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: min(70dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 32px));
    padding-bottom: env(safe-area-inset-bottom);
    border-left: none;
    border-top: 1px solid var(--gray-200);
    border-radius: var(--r-16) var(--r-16) 0 0;
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: hidden;
    z-index: 5000; /* #partsDock ごと覆ってよい（モーダル） */
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
  }

  .version-panel:not(.hidden) {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .version-header {
    flex: 0 0 auto;
    min-height: 52px;
    padding: 0 var(--dc-gutter);
    border-bottom: none;
  }

  .version-header h3,
  .version-header span {
    color: var(--dc-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
  }

  /* × は ✓ と同じ 32px の丸 */
  .version-header button {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--r-full);
    background: var(--dc-face);
    color: var(--dc-ink);
    font-size: 1.125rem;
    line-height: 1;
  }

  .version-list {
    min-height: 0;
    padding: 0 var(--dc-gutter) var(--s-16);
  }

  .version-item,
  .version-item.current {
    margin: 0;
    padding: var(--s-16) 0;
    border: none;
    border-bottom: 1px solid var(--dc-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .version-item:hover { border-color: transparent; border-bottom-color: var(--dc-line); box-shadow: none; }
  .version-item:last-child { border-bottom: none; }
  .version-item-header { margin-bottom: var(--s-4); }

  .version-id,
  .version-item.current .version-id,
  .version-time {
    padding: 0;
    background: none;
    color: var(--dc-weak);
    font-size: 0.6875rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  .version-message {
    margin: 0 0 var(--s-8);
    color: var(--dc-weak);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
  }

  .version-item.current .version-message { color: var(--dc-ink); font-weight: 600; }

  /* 旧: 赤文字＋大文字化＋0.08em の字送り（日本語「現在」に隙間が入っていた） */
  .version-current-badge {
    color: var(--dc-ink);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
  }

  .version-actions {
    gap: var(--s-6);
  }

  .version-restore {
    height: 32px;
    padding: 0 var(--s-12);
    border: 1px solid var(--dc-line);
    border-radius: var(--r-full);
    background: var(--white);
    color: var(--dc-ink);
    font-size: 0.6875rem;
    font-weight: 700;
  }

  .version-restore:hover,
  .version-restore:active {
    background: var(--dc-face);
    color: var(--dc-ink);
    box-shadow: none; /* 旧: 赤グロー＋浮き上がり */
    transform: none;
  }
}

/* prefers-reduced-motion: 履歴シート/幕はスナップ的に開閉させる（test/studio-parts-pane.test.js の CSS 契約がこの直後の形を読む） */
@media (max-width: 1099.98px) and (prefers-reduced-motion: reduce) {
  .version-panel,
  #versionPanelBackdrop {
    transition: none;
  }
}

/* =============================================================================
 * 9. PC（右の 320px 列の「つくる」パネル）
 * =============================================================================
 * PC のカードは枠なし・展示台が範囲。選択は展示台に赤い縁（inset 2px = 9/20 の選択の唯一の形）。乗せると 2px 浮く（PC のみ）。
 * 下のカード・タブ・サムネの規則は無条件だが、当たる要素（.dc-parts-tile / 上のタブ）は PC のパネルにしか出ない。 */
.dc-parts-thumb {
  border-radius: var(--r-12); /* 角丸 3 段の「四角い入れ物 = 12px」に（8px が残っていた） */
  background: var(--dc-stage);
}

.dc-parts-grid {
  gap: var(--s-12) var(--s-10);
}

.dc-parts-tile {
  gap: var(--s-6);
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.dc-parts-tile.is-on {
  border-color: transparent;
  box-shadow: none;
}

.dc-parts-tile .dc-parts-tile-thumb {
  transition: transform 260ms var(--dc-spring), box-shadow 260ms var(--dc-spring);
}

.dc-parts-tile.is-on .dc-parts-tile-thumb {
  box-shadow: inset 0 0 0 2px var(--red);
}

.dc-parts-tile:active .dc-parts-tile-thumb {
  transform: scale(0.97);
  transition-duration: 60ms;
}

.dc-parts-tile-name {
  padding: 0 var(--s-2);
  font-size: 0.75rem;
  font-weight: 600;
}

.dc-parts-group-label {
  margin: 0 0 var(--s-8);
  padding: 0 var(--s-2);
  color: var(--gray-500);
  font-size: 0.6875rem;
  font-weight: 700;
}

.dc-parts-asset-group + .dc-parts-asset-group {
  margin-top: var(--s-20);
}

@media (hover: hover) and (pointer: fine) {
  .dc-parts-tile:hover .dc-parts-tile-thumb {
    transform: translateY(-2px);
    box-shadow: var(--dc-lift);
  }

  .dc-parts-tile.is-on:hover .dc-parts-tile-thumb {
    box-shadow: inset 0 0 0 2px var(--red), var(--dc-lift);
  }
}

/* 上のタブ: 下線は色の移り変わりだけ動かす（位置のアニメーションは JS なしでは作れず、半端に動くより静かな方がよい） */
.dc-parts-tab {
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}

/* 「つくる」を開くとパネルは右から 12px 滑り込む（1 回だけ・開閉の返事） */
@keyframes dcPaneIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 1100px) {
  .dc-parts-pane:not([hidden]) {
    animation: dcPaneIn 280ms var(--dc-spring) both;
  }

  /* インスペクタ: 名前は見本の上の見出しに（コマの表と依頼欄のあいだに埋もれていた・9/23）。DOM の順は変えず order で上げる */
  .dc-parts-inspector {
    gap: var(--s-8);
    border-color: transparent;
    border-radius: var(--r-16);
    box-shadow: var(--dc-lift);
  }

  .dc-parts-inspector > .dc-parts-name {
    order: -2;
    font-size: 0.9375rem;
    font-weight: 700;
  }

  .dc-parts-inspector > .dc-parts-file {
    order: -1;
    margin-top: calc(-1 * var(--s-6));
  }

  /* 見本を貼り付ける（9/23 founder「PC 表示でもこれやらなきゃね」）。効く範囲はカードの中だけ（通り過ぎたら一緒に流れる）。上端はパネルの上から 8px */
  .dc-parts-inspector > .dc-parts-inspector-media {
    position: sticky;
    top: var(--s-8);
    z-index: 1;
    box-shadow: 0 0 0 6px var(--white), 0 8px 12px -6px rgba(0, 0, 0, 0.06);
  }

  /* 公開設定シート = 右からの引き出し（480px） */
  .dc-settings-sheet-panel {
    left: auto;
    top: 0;
    width: min(480px, 100vw);
    height: auto;
    border-radius: var(--r-16) 0 0 var(--r-16);
    box-shadow: -1px 0 0 var(--gray-200), -12px 0 32px rgba(0, 0, 0, 0.08);
    transform: translateX(100%);
  }
}

/* =============================================================================
 * 10. 動きを減らす設定（prefers-reduced-motion）— 入退場・ばね・揺れは全部止める。押下の縮みは「押した」の返事なので残し、遷移だけ切る
 * ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .dc-parts-posegrid-table .dc-parts-pose-cell.is-just-updated,
  .dc-parts-posegrid.is-scope-cascade .dc-parts-pose-cell.is-in-scope { animation: none; }

  /* ✓ の遷移を止める指定は、✓ 本体の指定（.dc-parts-pane:not([hidden]) .dc-parts-close）と同じ強さで書く
     （以前は弱い .preview-panel.dc-parts-mobile .dc-parts-close で負けていて止まっていなかった・2026-09-24 整理で発覚 → 修正） */
  .preview-panel.dc-parts-mobile .dc-parts-pane:not([hidden]) .dc-parts-close,
  .dc-parts-posegrid-table .dc-parts-pose-cell { transition: none; }

  .dc-parts-pane:not([hidden]),
  .dc-parts-tile .dc-parts-tile-thumb,
  .dc-parts-pose-cell,
  .dc-parts-scene,
  .dc-parts-tab,
  .dc-parts-textarea {
    animation: none !important;
    transition: none !important;
  }

  .preview-panel.dc-parts-mobile .dc-parts-dock.is-level-enter .dc-parts-dock-scroll > *,
  .preview-panel.dc-parts-mobile .dc-parts-dock.is-level-enter > .dc-parts-tab-back,
  .preview-panel.dc-parts-mobile .dc-parts-pane:not([hidden]) {
    animation: none !important;
  }

  .preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-icon,
  .preview-panel.dc-parts-mobile .dc-parts-dock .dc-parts-tab-thumb,
  .preview-panel.dc-parts-mobile .dc-parts-edit-send {
    transition: none !important;
  }

  .dc-parts-posegrid-strip .dc-parts-pose-cell,
  .dc-parts-pose-group-label { transition: none !important; }

  .dc-settings-sheet-scrim,
  .dc-settings-sheet-panel { transition: none !important; }

  .preview-panel.dc-parts-mobile .dc-parts-dock-arrow { transition: opacity 120ms linear !important; }
  .preview-panel.dc-parts-mobile .dc-parts-dock-arrow.is-nudging { animation: none !important; }

  .preview-panel.dc-parts-mobile .dc-parts-dock-arrow::after,
  .preview-panel.dc-parts-mobile .dc-parts-dock-arrow svg { animation: none !important; }
}

/* =============================================================================
 * 11. 部品編集のキャンバス（2026-09-24・studio-parts-canvas.js）
 * =============================================================================
 * ユーザー「Canva みたいに、ゲーム画面を同じ比率・ほぼ全画面で編集したい。半分に縮められて位置調節に一手間増える」。
 * founder「9/18 に決めた『プレビューは 45% まで』を変えてよい。UI を触るときは画面は大事で、ツールバーは出し入れ可能な感じが良い」。
 *   - .dc-parts-canvas … UI の部品を触る間（スマホ = 階層 ui / PC = 画面タブ）。iframe を本物と同じ 390×844 のまま置き、
 *     transform で縮めて見せる（値は JS が .preview-container に --dc-canvas-* で書く）。iframe の中の viewport は常に 390×844 なので、
 *     保存する位置の %（server/uiParts/uiLayout.js）が本番と同じ基準になる（潰れた viewport で合わせた % が本番でずれる問題の根治）。
 *     プレビューは display:none にも高さ 0 にもしない（3D が固まる）— 縮めるのは transform だけ。
 *   - .dc-canvas-sel ＋ .dc-canvas-min / -bar / -full … スマホで部品を 1 つ選んでいる間のツールバーの 3 段
 *     （畳む = 名前だけの帯・ゲーム最大 / 通常 = 2 行の帯 / 広げる = 今までのパネル）。つまみ（.dc-parts-grip）で切り替える。
 *     この間は 45dvh の上限（2 章）を使わない（9/18 の裁定を founder 9/24 が変更）。ゲームは比率を保ったまま残りを全部使う。
 * 守ること: ゲームの上に押す物を置かない（板に出るのは輪郭・名札・ドラッグ中の吸着線だけ）／画面を暗くしない／
 * safe-area は --safe-top / --safe-bottom（web = 0・native = env・style.css が html.native-app で切り替える）で書く。 */

/* 画面（iframe）: 実寸 390×844 → 置き場に収まる縮尺へ。角丸と影は「画面」自身が持つ（縮尺で割って見た目の 22px を保つ） */
.preview-panel.dc-parts-canvas .preview-container {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.preview-panel.dc-parts-canvas #gamePreview {
  width: var(--dc-canvas-w, 390px);
  height: var(--dc-canvas-h, 844px);
  transform-origin: 0 0;
  transform: translate(var(--dc-canvas-x, 0px), var(--dc-canvas-y, 0px)) scale(var(--dc-canvas-s, 1));
  border-radius: calc(22px / var(--dc-canvas-s, 1));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

/* 段を切り替えた直後だけ、縮尺をばねで追う（JS が 380ms だけ付ける。常時付けると回転・キーボードでもふわふわ動く） */
.preview-panel.dc-parts-canvas.dc-canvas-animating #gamePreview {
  transition: transform 380ms var(--dc-spring); /* 角丸は動かさない（390×844 の iframe を 380ms 描き直し続けるため・transform だけ） */
}

/* PC: 並び（プレビュー＋右の 320px 列）は変えない。画面は地（gray-100）の上に浮かせて中央に置く */
.preview-panel.dc-parts-side.dc-parts-canvas .preview-container {
  background: var(--gray-100);
}

/* 吸着線（ドラッグ中だけ・studio-ui-layout-editor.js showGuides）。押せない細い線 = 操作 UI ではない。
   赤は「選択の縁」と同じ系統の色を薄く（9/20 Zhang: 赤は選択と実行の 2 つだけ → 選んで動かしている部品の手がかりとして使う） */
.dc-ui-guide {
  position: absolute;
  z-index: 2;
  background: var(--red);
  opacity: 0.75;
  pointer-events: none;
}

.dc-ui-guide[hidden] {
  display: none;
}

.dc-ui-guide-v {
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
}

.dc-ui-guide-h {
  left: 0;
  right: 0;
  height: 1px;
  margin-top: -0.5px;
}

/* --- スマホ: 部品を選んでいる間（.dc-canvas-sel）--- */

/* 「← チャット」の見出しは隠す（36px をゲームに回す・見本の右の案）。戻り道は帯の ‹（一覧へ）→ ドックの ‹（道具へ）→ 見出しが戻る */
.preview-panel.dc-parts-mobile.dc-canvas-sel .preview-header {
  display: none;
}

.preview-panel.dc-parts-mobile.dc-canvas-sel .preview-container {
  margin-top: calc(10px + var(--safe-top));
}

/* つまみ: パネルの上端の細い帯（選んでいる間だけ）。押す = 段を切り替える / 上下にはらう = 広げる・畳む */
.dc-parts-grip {
  display: none;
}

.preview-panel.dc-parts-mobile.dc-canvas-sel .dc-parts-pane:not([hidden]) {
  padding-top: 20px; /* つまみの帯のぶん */
}

.preview-panel.dc-parts-mobile.dc-canvas-sel .dc-parts-pane:not([hidden]) > .dc-parts-grip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: grab;
  touch-action: none; /* 上下のはらいをページのスクロールに取られない */
}

.dc-parts-grip-bar {
  width: 36px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--gray-300);
  transition: background-color 160ms var(--ease-out), width 160ms var(--ease-out);
}

.dc-parts-grip:active .dc-parts-grip-bar {
  width: 44px;
  background: var(--gray-500);
}

/* 通常・畳んだ: 45dvh の上限は要らない（中身が 1〜2 行）。✓ は帯の中に持つので、右上に浮かせる ✓ は出さない。
   保存バーは帯の中の「保存」に畳む（段の高さが保存待ちの有無で変わらない = 指を離した瞬間にゲームが縮まない） */
.preview-panel.dc-parts-mobile.dc-canvas-bar .dc-parts-pane:not([hidden]),
.preview-panel.dc-parts-mobile.dc-canvas-min .dc-parts-pane:not([hidden]) {
  max-height: none;
}

.preview-panel.dc-parts-mobile.dc-canvas-bar .dc-parts-pane:not([hidden]) .dc-parts-close,
.preview-panel.dc-parts-mobile.dc-canvas-min .dc-parts-pane:not([hidden]) .dc-parts-close,
.preview-panel.dc-parts-mobile.dc-canvas-bar .dc-parts-pane:not([hidden]) .dc-parts-savebar,
.preview-panel.dc-parts-mobile.dc-canvas-min .dc-parts-pane:not([hidden]) .dc-parts-savebar {
  display: none;
}

.preview-panel.dc-parts-mobile.dc-canvas-bar .dc-parts-body {
  padding-bottom: var(--s-10);
}

.preview-panel.dc-parts-mobile.dc-canvas-min .dc-parts-body {
  padding-bottom: var(--s-6);
}

/* 畳んだ: 下のドック（場面の列）も隠す = ゲームが最大。帯がいちばん下になるので下の安全域を帯が持つ */
.preview-panel.dc-parts-mobile.dc-canvas-min .dc-parts-dock:not([hidden]) {
  display: none;
}

.preview-panel.dc-parts-mobile.dc-canvas-min .dc-parts-pane:not([hidden]) {
  /* ドックと同じく env を直接（--safe-bottom はブラウザ版で 0 = ホーム画面から開いた iPhone でホームバーの下に潜った・PR #935 レビュー） */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 広げた: 今までのパネルそのもの。上限は 45dvh ではなく「ゲームの最小の高さを残す」だけ（ゲームは比率を保って縮む）。
   右上の ✓ はつまみの帯の下へ */
.preview-panel.dc-parts-mobile.dc-canvas-full .dc-parts-pane:not([hidden]) {
  max-height: calc(100% - var(--dc-parts-preview-min));
}

.preview-panel.dc-parts-mobile.dc-canvas-full .dc-parts-pane:not([hidden]) .dc-parts-close {
  top: 26px;
}

/* 2 行の帯（見本の右の案）: ‹ 名前 [保存] ✓ ／ X Y ← ↑ ↓ → 「文字・AI ▴」。文字の大きさは 15 見出し・13 本文・11 ラベルの 3 段 */
.dc-canvas-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.dc-canvas-row {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  min-width: 0;
}

.dc-canvas-row-tools {
  flex-wrap: wrap;
}

.preview-panel.dc-parts-mobile .dc-canvas-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--dc-ink);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dc-canvas-done,
.dc-canvas-expand {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--r-full);
  background: var(--dc-face);
  color: var(--dc-ink);
  transition: transform 120ms var(--ease-out);
}

/* 保存 = 実行ボタン（赤の面は「選択の縁」と「実行ボタン」の 2 つだけ・9/20 Zhang）。件数は白い小さな札 */
.dc-canvas-save {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  height: 32px;
  padding: 0 var(--s-8) 0 var(--s-12);
  border: none;
  border-radius: var(--r-full);
  background: var(--red);
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 120ms var(--ease-out);
}

.dc-canvas-save:disabled {
  opacity: 0.5;
}

.dc-canvas-save-state {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  gap: var(--s-6);
  min-width: 0;
}

.dc-canvas-save-state .dc-canvas-note {
  min-width: 3.5em;
}

.dc-canvas-save-count {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--s-4);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.28);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

.dc-canvas-note {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--dc-weak);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dc-canvas-note.is-warn {
  color: var(--dc-ink);
}

/* X / Y: 2 段の小さな数字（幅を取らない）。ドラッグ中は指に合わせて書き換わる（onPartsUiElementDragging） */
.dc-canvas-xy {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 52px;
  margin-right: var(--s-2);
  font-variant-numeric: tabular-nums;
}

.dc-canvas-xy-cell {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  line-height: 1.25;
}

.dc-canvas-xy-axis {
  color: var(--dc-weak);
  font-size: 0.6875rem;
  font-weight: 700;
}

.dc-canvas-xy-value {
  color: var(--dc-ink);
  font-size: 0.8125rem;
  font-weight: 700;
}

/* 矢印: 40×36（4 つ並べて 1 行に収まる最大。インスペクタの 44px より少し小さいが、帯が 1 行で済む方をとった） */
.dc-canvas-nudge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: var(--dc-r-box, var(--r-12));
  background: var(--dc-face);
  color: var(--dc-ink);
  transition: transform 120ms var(--ease-out);
}

.dc-canvas-nudge svg {
  width: 18px;
  height: 18px;
}

.dc-canvas-nudge:disabled {
  opacity: 0.4;
}

.dc-canvas-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 36px;
  margin-left: auto;
  padding: 0 var(--s-8) 0 var(--s-12);
  border: none;
  border-radius: var(--r-full);
  background: var(--dc-face);
  color: var(--dc-ink);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.dc-canvas-more svg,
.dc-canvas-expand svg {
  width: 16px;
  height: 16px;
}

.dc-canvas-done:active,
.dc-canvas-expand:active,
.dc-canvas-save:active,
.dc-canvas-nudge:active,
.dc-canvas-more:active {
  transform: scale(0.94);
  transition-duration: 60ms;
}

/* 畳んだ帯: 名前 [保存] ▴ の 1 行。帯のどこを押しても・上へはらっても出てくる */
.dc-canvas-mini {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  min-height: 36px;
  cursor: pointer;
  touch-action: none;
}

/* 帯の入場は「段 / 選択が変わった瞬間」だけ（JS が 420ms だけ付ける dc-canvas-animating の間）。
 * 帯は描画のたびに作り直されるので、常時付けると矢印を押すたび・保存が終わるたびに 260ms 点滅した（PR #935 レビュー）。
 * ドックの is-level-enter と同じ考え方 */
.preview-panel.dc-canvas-animating .dc-canvas-panel,
.preview-panel.dc-canvas-animating .dc-canvas-mini {
  animation: dcCanvasIn 260ms var(--dc-spring) both;
}

@keyframes dcCanvasIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .preview-panel.dc-parts-canvas.dc-canvas-animating #gamePreview,
  .dc-parts-grip-bar {
    transition: none !important;
  }

  .dc-canvas-panel,
  .dc-canvas-mini {
    animation: none !important;
  }
}

/* ============================================================
 * 「アップロード」（2026-09-27 studio-entity チーム B・studio-parts-upload.js）
 * インスペクタの依頼欄の場所に出る見比べ（いま → 差し替え後）。ゲームの上には重ねない。
 * 形は部品パネルの既存語彙だけ: サムネ枠（.dc-parts-thumb）・白ピルの副ボタン（.dc-parts-image-tool）・赤い送信（.dc-parts-edit-send）。
 * =================================================================== */

/* 手直しの並びが 3 つ（クロップ / 画像を編集 / アップロード）になると狭い幅で送信を押し出すので、並び自体を折り返す */
.dc-parts-image-tools.dc-parts-edit-aside:has(.dc-parts-upload-tool) {
  flex-wrap: wrap;
}

.dc-parts-upload {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  margin-top: var(--s-8);
}

.dc-parts-upload-title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--gray-900);
}

.dc-parts-upload-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
}

.dc-parts-upload-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

.dc-parts-upload-media {
  margin-bottom: 0;
  aspect-ratio: 1 / 1;
}

/* 差し替え後は市松模様の上に置く: 背景を消せたか（透過になっているか）が一目で分かる */
.dc-parts-upload-after {
  background-color: var(--white);
  background-image:
    linear-gradient(45deg, var(--gray-100) 25%, transparent 25%),
    linear-gradient(-45deg, var(--gray-100) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--gray-100) 75%),
    linear-gradient(-45deg, transparent 75%, var(--gray-100) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.dc-parts-upload-canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.dc-parts-upload-caption {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--gray-500);
  text-align: center;
}

.dc-parts-upload-options,
.dc-parts-upload-range {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
}

.dc-parts-upload-options .dc-parts-image-tool[aria-pressed="true"] {
  border-color: var(--gray-900);
  background: var(--gray-100);
}

.dc-parts-upload-chip {
  padding: var(--s-6) var(--s-12);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-full);
  background: var(--white);
  color: var(--gray-900);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.dc-parts-upload-chip.is-on {
  border-color: var(--gray-900);
  background: var(--gray-900);
  color: var(--white);
}

.dc-parts-upload-chip:disabled,
.dc-parts-upload-options .dc-parts-image-tool:disabled {
  opacity: 0.5;
  cursor: default;
}

.dc-parts-upload-note {
  margin: 0;
}

.dc-parts-upload-error {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--red);
}

.dc-parts-upload-done {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gray-900);
}

.dc-parts-upload-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s-8);
}

.dc-parts-upload-cancel,
.dc-parts-upload-again {
  height: 44px;
  padding: 0 var(--s-12);
  border: none;
  border-radius: var(--r-full);
  background: var(--gray-100);
  color: var(--gray-900);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
/* =============================================================================
 * 12. 「調整」の階層（2026-09-27 founder「調整をおしたら、ツールバーがアセットの時みたいにアイコンに分かれていて、
 *     アイコン押したらそれぞれの調整バーがみえるように。モーダルは最大化できるように」）
 * =============================================================================
 * ツールバー = 「もの」のタイル（アセットと同じ .dc-parts-tab-item・46px の箱）。絵の無い「もの」は種類の印（線画）を箱の中央に。
 * シート = 選んだ 1 つの数値（C の数値パネル）。見出しの右に「全画面 ⇄ 元の大きさ」。全画面の見た目は 2 章の .dc-parts-full をそのまま使う。
 * 赤は使わない（選択の縁と実行ボタンだけ・9/20 Zhang）。ガラスなし。 */
.preview-panel.dc-parts-mobile .dc-parts-entity-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dc-weak);
  background: var(--dc-face);
}

.preview-panel.dc-parts-mobile .dc-parts-entity-glyph svg {
  width: 22px;
  height: 22px;
}

/* 見出し: 名前 ｜ 最大化。右上の ✓（32px・absolute）と重ならないよう右に 44px 空ける（UI 一覧と同じ逃がし方） */
.dc-parts-entity-sheet-head {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding-right: 44px;
}

.dc-parts-entity-sheet-head .dc-parts-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dc-parts-entity-sheet-max {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: var(--white);
  color: var(--gray-900);
  cursor: pointer;
}

.dc-parts-entity-sheet-max svg {
  width: 18px;
  height: 18px;
}

.dc-parts-entity-sheet-max:active {
  background: var(--gray-100);
  transform: scale(0.94);
}

.dc-parts-entity-sheet-max:focus-visible {
  outline: 2px solid var(--gray-900);
  outline-offset: 2px;
}

/* シートの中のカードは枠と影を外して板そのものにする（板の上に箱を重ねない）。名前は見出しが持つ */
.dc-parts-entities-sheet .dc-parts-entity {
  border: 0;
  box-shadow: none;
  padding: 0;
  background: transparent;
}