/*
 * routes/editor.css — editor.html でしか当たらない CSS（style.css から
 * scripts/split-route-css.js で機械分割・2026-09-07・07-static F4 第2段）。
 *
 * このバンドルのルールは**初期描画に要る**ので、読み込みは素の <link rel=stylesheet>（同期）。
 * ここのスタイルは直接このファイルを編集する（style.css に書くと test/route-css-split.test.js が赤にする）。
 * 編集したら node scripts/split-route-css.js --bump で <link> の ?v=（内容ハッシュ）を揃える。
 * どのルールがここに来るか / どのページが link するかの判定は scripts/route-css-config.js。
 */

.character-shelf-header,
.character-input-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
  margin-bottom: var(--s-12);
}

.character-input-shelf {
  margin-bottom: var(--s-12);
  padding: var(--s-8);
  border: none;
  border-radius: var(--r-12);
  background: var(--gray-100);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--s-8);
  min-width: 0;
  overflow: hidden;
}

.character-input-shelf.is-collapsed {
  width: fit-content;
  max-width: min(100%, 280px);
  padding: var(--s-4);
  margin-bottom: var(--s-8);
  border-radius: 999px;
}

.character-input-header {
  margin: 0;
  color: var(--gray-700);
  font-size: 0.78rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  flex: 0 0 auto;
}

.character-input-shelf.is-collapsed .character-input-header {
  display: none;
}

.character-create-inline {
  width: 28px;
  height: 28px;
  border-radius: var(--r-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.character-input-list {
  min-width: 0;
  flex: 1 1 180px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--s-8);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.character-input-shelf.is-collapsed .character-input-list {
  flex: 0 1 auto;
}

.character-input-list::-webkit-scrollbar {
  display: none;
}

.chat-header h1.editable {
  cursor: pointer;
  border-radius: var(--r-8);
  padding: var(--s-4) var(--s-8);
  margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-8));
  transition: background-color 0.2s ease;
}

.chat-header h1.editable:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.chat-header h1.editing {
  background-color: white;
  outline: 2px solid var(--primary);
  outline-offset: 0;
  white-space: normal;
  overflow: visible;
}

/* ヘッダー右端の「⋯」メニュー（founder 2026-09-17）
   - 「投稿へ →」(#publishButton) は 2026-09-17 にヘッダーからコンポーザー（送信の隣）へ移した
     （founder: ヘッダーは見られない）。見た目はこのファイル下部の「コンポーザーの投稿ボタン」。
   - ここに残るのは ⋯ とそのメニューの足場だけ。.share-action-group は #shareActionMenu
     （app.js ensureShareReadyUiStyles が注入: position:absolute; top:100%+8px; right:0）の基準。
   - 太い枠・ハードシャドウは使わない（DreamCore の視覚言語）。 */
.share-action-group {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  /* メニューはグループ右端＝「⋯」ボタンの右端に揃う（グループの中身は ⋯ だけ）。
     ⋯ はヘッダーの右 padding（16px）の内側にあるので、375px 幅でもメニュー（min-width 220px）は
     右揃えのまま左へ伸び、画面外にはみ出さない。 */
  align-items: flex-end;
}

/* もう「入れ物」は描かない: 枠・背景・overflow クリップなし（クリップ完成バッジがはみ出せるように） */
.share-action-shell {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
}

/* 副ボタン化（founder 2026-09-17: 赤は各エリアの主役1つだけ。全部赤だと何も主役にならない）。
   チャット吹き出しの「ゲームを遊ぶ」「共有」は副。コンポーザーの主役は「投稿へ →」か「送信」の片方
   （入力状態で入れ替え・このファイル下部）。ヘッダーには赤を置かない（2026-09-17 に投稿ボタンを移設）。
   - #playGameButton の赤い塗り/グローは style.css 側だが、project-view.html も同じ id を使うので
     style.css は触らず、editor.html だけが読むこのバンドルで上書きする。
   - 祖先の .studio-editor-view（editor.html の #editorView にだけ付けたクラス）で絞っているのは、
     route-css-config.js がトークンの出現ページで振り分けるため（共有クラスだけだと creator/critical 行きになる）。
   - .play-game-btn / .message-share-btn の赤は routes/creator.css（create.html / onboarding.html 等とも共有）。
     Studio だけ変えるため、同じくここで .message-buttons 配下を上書きする。
   - 枠 1px を足した分だけ padding を 1px 削り、見た目の高さ・幅を以前の赤ボタンと揃える。
   - DreamCore の視覚言語: 太い枠・ハードシャドウ・色付きの影は出さない。ホバーの浮き上がり(transform)も止める。 */
.studio-editor-view .header-actions #playGameButton,
.studio-editor-view .message-buttons .play-game-btn,
.studio-editor-view .message-buttons .message-share-btn {
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--gray-900);
  box-shadow: none;
  transition: background var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out);
}

.studio-editor-view .header-actions #playGameButton {
  padding: calc(var(--s-12) - 1px) calc(var(--s-16) - 1px);
}

.studio-editor-view .message-buttons .play-game-btn,
.studio-editor-view .message-buttons .message-share-btn {
  padding: calc(var(--s-12) - 1px) calc(var(--s-16) - 1px);
}

.studio-editor-view .header-actions #playGameButton svg,
.studio-editor-view .message-buttons .play-game-btn svg,
.studio-editor-view .message-buttons .message-share-btn svg {
  color: currentColor;
}

.studio-editor-view .header-actions #playGameButton:hover,
.studio-editor-view .message-buttons .play-game-btn:hover,
.studio-editor-view .message-buttons .message-share-btn:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--gray-300);
  box-shadow: none;
  transform: none;
}

.studio-editor-view .header-actions #playGameButton:active,
.studio-editor-view .message-buttons .play-game-btn:active,
.studio-editor-view .message-buttons .message-share-btn:active:not(:disabled) {
  background: var(--gray-100);
  transform: none;
}

/* キーボード操作の現在地: 濃い 2px の輪郭（PR #893 レビュー 2026-09-17）。
   以前は rgba(15,23,42,0.12) の 3px の影だったが、白地の上ではほぼ見えずキーボード利用者が
   現在地を見失う（WCAG 2.4.7 / 1.4.11）。赤い主役ボタンも同じ濃い輪郭に揃える（赤地の上の赤い影も見えないため）。
   --gray-900 は白地・赤地のどちらに対しても 3:1 を超える。offset 2px で塗りと輪郭の間に隙間を作る。 */
.studio-editor-view .header-actions #playGameButton:focus-visible,
.studio-editor-view .message-buttons .play-game-btn:focus-visible,
.studio-editor-view .message-buttons .message-share-btn:focus-visible {
  outline: 2px solid var(--gray-900);
  outline-offset: 2px;
}

/* ヘッダーの整理（founder 2026-09-17・エンツォ・マーリ案: 作品名が「台…」まで切れていたのに、
   同じ行き先/同じ結果の操作が並んでいた）。
   - PC（769px〜。style.css の @media (max-width: 768px) が .mobile-hidden / .mobile-active を効かせる
     境界の反対側）ではプレビューが右に常に見えているので、「遊ぶ」は showPreviewPanel の
     refreshPreview を呼ぶだけ = 見た目は何も変わらない。重複なので PC では隠す。
     モバイル（〜768px）ではチャット → プレビューへの切り替え口なので残す。
   - ← 戻る（#homeButton）は editor.html から削除済み（≡ ドロワーに一覧への導線がある）。 */
@media (min-width: 769px) {
  .studio-editor-view .header-actions #playGameButton {
    display: none;
  }
}

/* 作品名はヘッダーに出さない（founder 2026-09-17: ヘッダーの作品名は意味が薄く、狭い幅では切れる）。
   editor.html 側で hidden 属性を付けているが、.chat-header h1 系の規則が display を足しても
   出てこないようにここでも止める。app.js は textContent を書くだけで寸法は測らない。 */
.studio-editor-view .chat-header #projectTitle {
  display: none;
}

/* 作品名が抜けたので、右側の操作群を margin-left: auto で右端へ寄せる（≡ と操作群の間が余白になる）。
   操作群は縮ませない。 */
.studio-editor-view .chat-header .header-actions {
  flex-shrink: 0;
  margin-left: auto;
}

/* 公開状態チップ（founder 2026-09-17・マガー案: 今の公開状態を見せる）。
   下書き / 限定公開 / 公開中（マイプロジェクトの creator.status* と同じ言葉）。文言と data-state は app.js updateStudioVisibilityChip。
   ヘッダーに赤は置かないので、ここは静かな灰色の札にする: 枠なし・影なし・12px。
   緑の点は共通トークン（--green 等）が無いので付けない（--onb-green はオンボーディング内だけの変数）。
   flex-shrink: 0 + nowrap = 狭い画面でも札の文字は欠けない（削られるのはタイトル側）。 */
.studio-editor-view .studio-visibility-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-8);
  border-radius: var(--r-full);
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}

.studio-editor-view .studio-visibility-chip[hidden] {
  display: none;
}

/* モバイル（〜768px）では公開状態チップを隠す（founder 2026-09-17 指示: 入りきらないならボタンを縮める前にチップを諦める）。
   見積りは「投稿へ →」がヘッダーにあった時のもの（390px 幅: 内幅 358px に [≡ 36] + [遊ぶ ≈84] + [チップ ≈76]
   + [投稿へ → ≈98] + [⋯ 40] + 余白 ≈ 370px で溢れた）。投稿ボタンをコンポーザーへ移した（2026-09-17）後も
   モバイルは隠したまま（founder の決定は「チップは PC のみ」）。公開状態は /publish の画面で確認できる。 */
@media (max-width: 768px) {
  .studio-editor-view .studio-visibility-chip {
    display: none;
  }
}

/* ユーザーの吹き出し: 赤ベタ → 薄い赤の面 + 濃い文字（founder 2026-09-17: 吹き出しの赤が
   ボタンと区別できない。赤は各エリアの主役1つだけ）。
   - 素の .message.user（赤ベタ + 赤いグロー）は style.css。project-view.html（読むだけ版）も同じ
     クラスで組んでいるので style.css は触らず、Studio だけここで上書きする。
   - --red-light = rgba(255,59,48,0.1)。半透明なのでチャット面の白の上で薄い赤になる。
   - 影は出さない（色付きの影 = グローは主役ボタンの記号なので吹き出しには付けない）。 */
.studio-editor-view .message.user {
  background: var(--red-light);
  color: var(--gray-900);
  box-shadow: none;
}

/* インライン code: style.css は赤ベタ前提の「白 20%」。薄い赤の上では見えないので、
   薄い黒に戻す（pre は元から濃紺の地なのでそのまま読める）。 */
.studio-editor-view .message.user code {
  background: rgba(0, 0, 0, 0.06);
}

.studio-editor-view .message.user pre code {
  background: transparent;
}

/* 送信ボタン: 送る文字があるときだけ赤ベタ（founder 2026-09-17: 赤は各エリアの主役1つだけ。
   空のコンポーザーで赤が光っていると「押せ」と言っているように見える）。
   - 空判定は CSS だけで行う（#chatInput:placeholder-shown）。app.js には chatInput.value を
     直接書き換える箇所が十数か所あり input イベントが飛ばないので、JS のクラス切替だと取りこぼす。
     :placeholder-shown は値の変化に常に追従する（#chatInput は data-i18n-placeholder で必ず空でない
     placeholder を持つ）。空白だけの入力は赤のままになるが、送信側（sendMessage の trim）が弾くので実害なし。
   - disabled（プロジェクト未選択・生成中）も同じ静かな見た目に揃える（従来はグレーの塗り）。
   - reconnect-mode（再接続ボタン）は creator.css の !important の灰色のまま。:not() で外して触らない。
   - 素の #sendButton（赤ベタ・グロー・ホバーで浮く）は routes/creator.css（create.html 等と共有）。
   - 枠 1px を足した分 padding を 1px 削って高さを揃える。 */
.studio-editor-view .chat-input-container:has(#chatInput:placeholder-shown) #sendButton:not(.reconnect-mode),
.studio-editor-view #sendButton:disabled:not(.reconnect-mode) {
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--gray-500);
  box-shadow: none;
  padding: calc(var(--s-16) - 1px);
  transform: none;
}

.studio-editor-view .chat-input-container:has(#chatInput:placeholder-shown) #sendButton:not(.reconnect-mode):hover,
.studio-editor-view #sendButton:disabled:not(.reconnect-mode):hover {
  box-shadow: none;
  transform: none;
}

/* コンポーザーの投稿ボタン「投稿へ →」(#publishButton)（founder 2026-09-17: ヘッダーは見られないので
   送信の隣へ移した）。並び: [送信 (flex:1)] [停止(生成中のみ)] [投稿へ → (自動幅)]、gap 8px（.input-buttons）。
   赤は常に片方だけ（founder 2026-09-17: 入力が空=投稿が主役、入力中=送信が主役）:
   - 入力が空        → 投稿 = 赤ベタ（ここ）/ 送信 = 白の副ボタン（上の規則）
   - 入力に文字がある → 送信 = 赤ベタ（creator.css の素の #sendButton）/ 投稿 = 白の副ボタン（下の :not(:has()) 規則）
   判定は送信ボタンと同じ #chatInput:placeholder-shown（CSS だけ。app.js は chatInput.value を直接書く
   箇所が多く input イベントが飛ばないため、JS のクラス切替だと取りこぼす）。
   - 形は送信ボタンと対に見えるよう角丸 --r-12・文字 1rem/600 を揃える。高さは .input-buttons が
     flex（align-items 既定 stretch）なので、送信ボタンと同じ高さに自動で揃う。
   - style.css の素の #publishButton（透明・黒文字）は publish.html の送信ボタンと id を共有しているので
     触らず、Studio（.studio-editor-view）の .input-buttons 配下だけ上書きする。
   - share-ready が blocked でも disabled にはしない（app.js updatePrimaryShareButtonState: 行き先の /publish が
     blocked を案内するため。2026-09-17 PR #893 レビュー）。is-pending の 0.7 + progress カーソルは
     app.js ensureShareReadyUiStyles。 */
.studio-editor-view .input-buttons #publishButton {
  position: relative; /* 読み上げ用の .dc-visually-hidden（absolute）の基準 */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  padding: 0 var(--s-16);
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: var(--r-12);
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
  transition: background var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out),
              color var(--duration) var(--ease-out),
              filter var(--duration) var(--ease-out),
              opacity var(--duration) var(--ease-out);
}

.studio-editor-view .input-buttons #publishButton svg {
  flex: 0 0 auto;
  color: currentColor;
}

/* ホバー/押下はトーンを少し落とすだけ（0.94 = ほんのり暗く / 0.88 = 押した感） */
.studio-editor-view .input-buttons #publishButton:hover:not(:disabled) {
  background: var(--red);
  filter: brightness(0.94);
}

.studio-editor-view .input-buttons #publishButton:active:not(:disabled) {
  background: var(--red);
  filter: brightness(0.88);
}

/* is-pending = 塗りは保ったまま彩度だけ落とす（opacity は ensureShareReadyUiStyles の 0.7） */
.studio-editor-view .input-buttons #publishButton.is-pending:not(:disabled) {
  filter: saturate(0.75);
}

.studio-editor-view .input-buttons #publishButton:focus-visible {
  /* 赤でも白でも同じ濃い輪郭（上の #playGameButton 等と同じ理由）。
     style.css の素の #publishButton:focus-visible { outline: none } はこちらの詳細度が勝つ。 */
  outline: 2px solid var(--gray-900);
  outline-offset: 2px;
  box-shadow: none;
}

/* スクリーンリーダー向けの補足（見た目には出さない）。#publishButton の見える文言は
   「投稿へ」/「できた！」だけなので、読み上げ名に「ゲームを投稿」を足すのに使う（editor.html）。
   display:none / visibility:hidden だとアクセシブルネームからも消えるので、1px に畳む定番の書き方。
   リポジトリ共通の sr-only ユーティリティが無いため Studio 用にここで定義する。 */
.studio-editor-view .dc-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 入力中（placeholder が消えた = 文字がある）は送信が主役になるので、投稿は白の副ボタンへ。
   枠 1px は赤の時も付けているので（border: 1px solid var(--red)）入れ替えても寸法は変わらない。 */
.studio-editor-view .chat-input-container:not(:has(#chatInput:placeholder-shown)) .input-buttons #publishButton {
  background: var(--white);
  border-color: var(--gray-200);
  color: var(--gray-900);
  box-shadow: none;
  filter: none;
}

.studio-editor-view .chat-input-container:not(:has(#chatInput:placeholder-shown)) .input-buttons #publishButton:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--gray-300);
  filter: none;
}

.studio-editor-view .chat-input-container:not(:has(#chatInput:placeholder-shown)) .input-buttons #publishButton:active:not(:disabled) {
  background: var(--gray-100);
  filter: none;
}

/* 狭い幅で [送信][停止][投稿へ →] が並んでも溢れないように、送信側を縮められるようにする
   （es「Enviar / Cancelar / Siguiente」＝ editor.send / editor.stop / editor.postEntryNext）。
   縮むのは送信の文字だけで、アイコンと投稿ボタンは欠けない。送信は flex:1 のままなので、普段は残りの幅いっぱいに広がる。
   min-width = アイコン 20px + 左右 padding 16px×2 = 52px（空入力時の白ボタンは枠 1px + padding 15px で同じ 52px）。
   0 にすると最悪ケースでアイコンまで削れていた（PR #893 レビュー）。 */
.studio-editor-view .input-buttons #sendButton {
  min-width: calc(20px + 2 * var(--s-16));
}

.studio-editor-view .input-buttons #sendButton svg {
  flex: 0 0 auto;
}

.studio-editor-view .input-buttons #sendButton span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 生成中（停止ボタンが出ている）の狭い幅（PR #893 レビュー 2026-09-17）。
   停止は文字付きだと ≈134px（es「Cancelar」0.875rem + アイコン + padding 24px×2）あり、
   送信の文字が 0 まで潰れていた。399px 以下では停止をアイコンだけにする（文字は視覚的に隠すだけで
   読み上げ名には残る = .dc-visually-hidden と同じ畳み方）。
   幅の見積り（.chat-input-container の padding 16px×2 を引いた内幅・gap 8px×2）:
     375px → 内幅 343px: 投稿 es「Siguiente →」≈138 + 停止 50 + gap 16 → 送信 ≈139px（文字 ≈79px、「Enviar」≈52px が入る）
     320px → 内幅 288px: 同 → 送信 ≈84px（文字 ≈24px しか残らない）→ 下の 359px 以下の規則で送信もアイコンだけにする
   合計の最小は 投稿 138 + 停止 50 + 送信 52 + gap 16 = 256px ≤ 288px なので 320px でも溢れない
   （pt「Próximo →」≈128 / en「Next →」≈96 / ja「投稿へ →」≈106 はさらに余裕）。 */
@media (max-width: 399px) {
  .studio-editor-view .input-buttons #stopButton {
    position: relative; /* 畳んだ文字（absolute）の基準をボタン内に留める */
    flex: 0 0 auto;
    gap: 0;
    padding: var(--s-16);
  }

  .studio-editor-view .input-buttons #stopButton span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* 359px 以下 + 生成中: 送信の文字は数 px しか残らず「E…」のような読めない切れ端になるので、
   送信もアイコンだけにする（読み上げ名は残す）。停止が出ていない間は送信の文字をそのまま見せる。 */
@media (max-width: 359px) {
  .studio-editor-view .input-buttons:has(#stopButton:not(.hidden)) #sendButton {
    position: relative; /* 畳んだ文字（absolute）の基準をボタン内に留める */
    gap: 0;
  }

  .studio-editor-view .input-buttons:has(#stopButton:not(.hidden)) #sendButton span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* 副ボタン「…」: 素の .publish-menu-btn（形・色・position:relative）は public/style.css。
   scripts/route-css-pinned.json が素の .publish-menu-btn を critical 据え置きに指定している
   （ルート別バンドルへ移すとカスケードが反転する）ので、基本形はここへ戻さないこと。
   以下は状態・中身の修飾だけ（style.css より後に読まれ、詳細度も高いので基本形に勝つ）。 */
.publish-menu-btn:hover,
.publish-menu-btn[aria-expanded="true"] {
  background: var(--gray-100);
  color: var(--gray-900);
}

.publish-menu-btn:active {
  background: var(--gray-200);
}

/* ⋯（#shareMenuButton）のフォーカス。以前の「グループの赤い枠（focus-within）」を外したので、
   ボタン自身に他と同じ濃い輪郭を出す（PR #893 レビュー: 薄い影だけでは現在地が見えなかった）。 */
.publish-menu-btn:focus-visible {
  outline: 2px solid var(--gray-900);
  outline-offset: 2px;
  box-shadow: none;
}

.publish-menu-btn svg {
  display: block;
}

/* クリップ完成バッジ: アイコンの右上に小さな赤い点（project-creator.css の既定 4px/4px を
   40px の丸に合わせて寄せる）。 */
.publish-menu-btn .project-complete-clip-badge {
  top: 6px;
  right: 6px;
}

/* Chat fullscreen mode */
.chat-fullscreen-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white);
  z-index: 2000;
  flex-direction: column;
  padding: var(--s-16);
}

.chat-fullscreen-overlay.active {
  display: flex;
}

html.native-app .chat-fullscreen-overlay {
  padding: calc(var(--s-16) + var(--safe-top)) var(--s-16) calc(var(--s-16) + var(--safe-bottom));
}

.chat-fullscreen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-16);
}

.chat-fullscreen-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-900);
}

.chat-fullscreen-close {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  border: none;
  background: var(--gray-100);
  color: var(--gray-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.chat-fullscreen-close:hover {
  background: var(--gray-200);
  color: var(--gray-900);
}

.chat-fullscreen-textarea {
  flex: 1;
  width: 100%;
  padding: var(--s-16);
  background: var(--gray-50);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-16);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  resize: none;
  outline: none;
  margin-bottom: var(--s-16);
}

.chat-fullscreen-textarea:focus {
  border-color: var(--red);
  background: var(--white);
}

.chat-fullscreen-actions {
  display: flex;
  gap: var(--s-12);
}

.chat-fullscreen-actions button {
  flex: 1;
  padding: var(--s-16);
  border-radius: var(--r-12);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chat-fullscreen-cancel {
  background: var(--gray-100);
  border: none;
  color: var(--gray-700);
}

.chat-fullscreen-cancel:hover {
  background: var(--gray-200);
}

.chat-fullscreen-send {
  background: var(--red);
  border: none;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
}

.chat-fullscreen-send:hover {
  background: var(--red-dark);
}

.chat-input-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-16);
  padding: 10px 44px 10px 14px; /* right pad reserves space for expand-btn */
  transition: border-color 0.2s ease, box-shadow 0.2s ease, padding 0.25s var(--ease-out);
}

.chat-input-wrapper:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--red-light);
}

.chat-input-wrapper #chatInput {
  padding: 0;
}

.expand-chat-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: var(--r-4);
  border: none;
  background: transparent;
  color: var(--gray-400);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.2s ease;
}

.expand-chat-btn:hover {
  color: var(--gray-600);
}

/* Input Extras */
.input-extras {
  flex-shrink: 0;
  display: flex;
  gap: var(--s-8);
  padding: 0 var(--s-16) var(--s-12);
}

.input-extras button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  padding: var(--s-12);
  background: transparent;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-12);
  color: var(--gray-600);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.input-extras button:hover {
  border-color: var(--gray-400);
  background: var(--gray-50);
}

.input-extras button svg {
  width: 16px;
  height: 16px;
}

.input-row {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  position: relative;
}

.input-row textarea {
  flex: 1;
  min-height: 40px; /* Match plus button height */
}

/* Plus button - hidden on desktop, shown on mobile */
.plus-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  border: none;
  background: linear-gradient(135deg, #FFB6C1 0%, #DDA0DD 100%);
  color: var(--white);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(221, 160, 221, 0.3);
}

.plus-menu-popup {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  background: var(--white);
  border-radius: 18px;
  border: 1px solid var(--gray-200);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 100;
  min-width: 256px;
  max-width: 300px;
  max-height: min(42vh, 280px);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: slideUp 0.2s var(--ease-out);
}

.plus-menu-popup::-webkit-scrollbar {
  width: 8px;
}

.plus-menu-popup::-webkit-scrollbar-thumb {
  background: var(--gray-200);
  border-radius: 999px;
}

.plus-menu-character-context {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-8);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-10);
  border-bottom: 1px solid var(--gray-200);
  border-radius: var(--r-12);
  background: var(--gray-50);
}

.plus-menu-item {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: var(--r-12);
  cursor: pointer;
  transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out), transform 0.1s var(--ease-out);
  color: var(--gray-900);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  width: 100%;
}

.plus-menu-item:hover {
  background: var(--gray-50);
}

.plus-menu-item:active {
  transform: scale(0.98);
}

.plus-menu-item svg {
  flex-shrink: 0;
  color: var(--gray-400);
  transition: color 0.18s var(--ease-out);
}

.plus-menu-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.plus-menu-item-text small {
  color: var(--gray-600);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
}

.plus-menu-separator {
  flex: 0 0 1px;
  height: 1px;
  min-height: 1px;
  margin: var(--s-6) var(--s-10);
  background: var(--gray-200);
  box-shadow: 0 0 0 0.5px var(--gray-200);
}

.plus-menu-popup .generation-mode-menu-item {
  margin: var(--s-4) 0;
  padding-top: 12px;
  padding-bottom: 12px;
}

.plus-menu-item.generation-mode-menu-item.active svg,
.plus-menu-item.generation-mode-menu-item.active .generation-mode-icon {
  color: var(--red);
  fill: var(--red);
}

.generation-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  height: 26px;
  padding: 0 10px 0 8px;
  border: none;
  border-radius: var(--r-full);
  background: var(--red);
  color: var(--white);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 10px var(--red-glow);
  animation: scaleIn 0.2s var(--ease-out);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.generation-mode-badge svg {
  flex-shrink: 0;
}

.generation-mode-badge:hover {
  filter: brightness(1.05);
}

.generation-mode-badge:active {
  transform: scale(0.97);
}

.generation-mode-badge:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Desktop toggle: OFF is quiet (inherits .input-extras), ON is loud red. */
.input-extras button.generation-mode-desktop-toggle {
  font-weight: 600;
}

.input-extras button.generation-mode-desktop-toggle.active {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
  box-shadow: 0 2px 12px var(--red-glow);
}

/* Image button - hidden on desktop, shown on mobile */
.image-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  border: none;
  background: linear-gradient(135deg, #87CEEB 0%, #98D8C8 100%);
  color: var(--white);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(135, 206, 235, 0.3);
}

.image-menu-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(135, 206, 235, 0.4);
}

.image-menu-btn:active {
  transform: scale(0.95);
}

/* Image menu popup */
.image-menu-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 48px;
  background: var(--glass-white-strong);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-radius: var(--r-16);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  z-index: 100;
  min-width: 160px;
  animation: slideUp 0.2s var(--ease-out);
}

@media (max-width: 768px) {
/* Show plus button on mobile */
  .plus-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

/* Image and asset actions live inside the plus menu on mobile. */
  .image-menu-btn {
    display: none;
  }

/* Hide input-extras on mobile */
  .input-extras {
    display: none;
  }

.version-panel {
    left: 0;
    width: 100%;
    border-left: none;
    background: var(--white);
  }

.version-header {
    padding-top: calc(var(--s-24) + var(--page-safe-top, var(--safe-top, 0px)));
  }

.option-group select {
    padding: var(--s-8);
    font-size: 0.8125rem;
  }

.generate-btn {
    padding: var(--s-10);
    font-size: 0.875rem;
  }
}

/* Debug Options - Hidden */
.debug-options {
  display: none;
}

.streaming-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-12) var(--s-16);
  background: var(--red-light);
  border-bottom: 1px solid var(--glass-border);
}

.streaming-file {
  font-size: 0.75rem;
  color: var(--gray-600);
  font-family: 'SF Mono', Monaco, monospace;
}

.streaming-output {
  max-height: 100px;
  overflow-y: auto;
  padding: var(--s-12);
  background: var(--gray-900);
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.75rem;
  color: var(--gray-400);
  line-height: 1.6;
}

.preview-overflow {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.preview-actions .icon-only-btn {
  padding: var(--s-8);
  width: 36px;
  height: 36px;
}

.preview-actions .icon-only-btn svg {
  width: 18px;
  height: 18px;
}

.version-panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 320px;
  background: var(--glass-white-strong);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-left: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  z-index: 5000;
  transform: translateX(0);
  transition: transform var(--duration) var(--ease-out);
}

.version-header {
  padding: var(--s-24);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.version-header h3 {
  font-size: 1rem;
  font-weight: 700;
}

.version-header button {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--gray-400);
  padding: var(--s-8);
  border-radius: var(--r-8);
  transition: all 0.2s ease;
}

.version-header button:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.version-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-16);
}

.input-buttons {
  display: flex;
  gap: var(--s-8);
  margin-top: var(--s-12);
}

.asset-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
}

/* Upload Tab */
.upload-area {
  border: 2px dashed var(--gray-300);
  border-radius: var(--r-16);
  padding: var(--s-48);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.upload-prompt {
  color: var(--gray-600);
}

.upload-prompt p {
  margin-bottom: var(--s-4);
}

.upload-hint {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: var(--s-8);
}

/* Danger icon button (delete) */
.icon-btn-danger:hover {
  border-color: #f8d7da;
  background: #fff5f5;
  color: #dc3545;
}

/* Primary action - Large pill button */
.primary-action-btn {
  min-width: 130px;
  height: 44px;
  padding: 0 var(--s-20);
  background: var(--red);
  border: none;
  border-radius: 22px;
  color: var(--white);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 14px var(--red-glow);
}

.primary-action-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px var(--red-glow);
}

.primary-action-btn:active {
  transform: translateY(0) scale(0.98);
}

.primary-action-btn svg {
  transition: transform 0.2s ease;
}

.primary-action-btn:hover svg {
  transform: translateX(3px);
}

/* Secondary action - Edit button (same size as primary, blue color) */
.secondary-action-btn {
  min-width: 100px;
  height: 44px;
  padding: 0 var(--s-16);
  background: var(--white);
  border: 2px solid #3b82f6;
  border-radius: 22px;
  color: #3b82f6;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.secondary-action-btn:hover {
  background: #3b82f6;
  color: var(--white);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
}

.secondary-action-btn:active {
  transform: translateY(0) scale(0.98);
}

.secondary-action-btn svg {
  transition: transform 0.2s ease;
}

@media (max-width: 600px) {
.secondary-action-btn {
    height: 40px;
    min-width: 80px;
    padding: 0 var(--s-12);
    font-size: 0.8125rem;
  }

.primary-action-btn {
    height: 40px;
    padding: 0 var(--s-16);
    font-size: 0.8125rem;
    min-width: 100px;
  }
}

/* Prevent iOS Safari/WKWebView focus-zoom in image generation prompt textarea */

.option-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.option-group select {
  padding: var(--s-12);
  background: var(--gray-100);
  border: 2px solid transparent;
  border-radius: var(--r-12);
  font-family: inherit;
  font-size: 0.875rem;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.option-group select:focus {
  background: var(--white);
  border-color: var(--red);
}

.generate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  padding: var(--s-16);
  background: var(--red);
  border: none;
  border-radius: var(--r-12);
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
  box-shadow: 0 4px 12px var(--red-glow);
}

.generate-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--red-glow);
}

.generate-btn:disabled {
  background: var(--gray-200);
  color: var(--gray-400);
  box-shadow: none;
  cursor: not-allowed;
}

.image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-16);
  color: var(--gray-400);
  text-align: center;
  padding: var(--s-24);
}

.image-placeholder svg {
  opacity: 0.5;
}

.image-placeholder span {
  font-size: 0.875rem;
}

.no-project-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--gray-400);
}

.no-project-message svg {
  margin-bottom: var(--s-16);
  opacity: 0.5;
}

.no-project-message p {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}

.error-panel {
  position: absolute;
  bottom: var(--s-16);
  left: var(--s-16);
  right: var(--s-16);
  background: var(--white);
  border-radius: var(--r-16);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  max-height: 200px;
  z-index: 10;
}

.error-panel.autofix-busy {
  box-shadow: 0 8px 32px rgba(255, 59, 48, 0.2);
}

.error-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-12) var(--s-16);
  background: rgba(255, 59, 48, 0.1);
  border-bottom: 1px solid rgba(255, 59, 48, 0.2);
}

.error-panel-title {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  font-weight: 600;
  color: var(--red);
  font-size: 0.875rem;
}

.error-panel-actions {
  display: flex;
  gap: var(--s-8);
}

.auto-fix-btn {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-12);
  background: var(--red);
  border: none;
  border-radius: var(--r-8);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auto-fix-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--red-glow);
}

.auto-fix-btn.auto-fix-cancel {
  background: #e74c3c;
}

.auto-fix-btn.auto-fix-cancel:hover {
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.45);
}

.auto-fix-btn.auto-fix-cancel:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.error-panel-content {
  padding: var(--s-12);
  max-height: 120px;
  overflow-y: auto;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.75rem;
  color: var(--red);
  line-height: 1.6;
}

.game-status {
  position: absolute;
  top: var(--s-16);
  right: var(--s-16);
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-8) var(--s-16);
  background: var(--glass-white-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-full);
  font-size: 0.75rem;
  color: var(--gray-600);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.game-status-icon svg {
  display: block;
}

.game-status-text {
  font-weight: 500;
}

.toggle-switch {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  cursor: pointer;
}

.toggle-switch input {
  display: none;
}

.toggle-slider {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--gray-300);
  border-radius: var(--r-full);
  transition: all 0.3s ease;
}

.toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--white);
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--red);
}

.toggle-switch input:checked + .toggle-slider::after {
  transform: translateX(20px);
}

.toggle-label {
  font-size: 0.875rem;
  color: var(--gray-600);
}

/* ===================================================================
 * 「つくる」パネル（PARTS-WORKBENCH・2026-09-15 / 再構築 2026-09-17）
 * 計画: .claude/plans/making-feel.md §7〜§9 / DOM: public/editor.html
 * 実装: public/js/modules/studio-parts-{pane,scenes,inspector,savebar,assets}.js
 *       public/js/modules/studio-ui-layout-editor.js（プレビューの上の枠）
 *
 * 見た目の約束（DESIGN_GUIDELINE.md / DreamCore の視覚言語）:
 *   - 枠線は 1px のヘアラインのみ（--gray-200）。太枠・ハードシャドウは使わない
 *     （選択の印だけは赤の 2px。プレビューの枠と行の左線を同じ赤でそろえる）
 *   - 浮かせるのは --glass-shadow まで（スマホのシート）。角丸・余白・色はトークンのみ
 *   - アニメーション定義（at-rule）はここに置かない（critical 側の決まり・route-css-split テスト）
 *
 * 骨格（上から）: シートのつまみ → 場面ストリップ → 種類タブ → 本体 → 保存バー
 * レイアウト: PC(≥1100px) はプレビューの右に 320px の列。それ未満は**生きたプレビューの上に
 * 重なる下からのシート**（プレビューを display:none にしない = 3D が固まらない・pane.js 冒頭）。
 * =================================================================== */

/* --- ヘッダのスイッチ（あそぶ / つくる）--- */
.dc-parts-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--gray-100);
  border-radius: var(--r-full);
  flex-shrink: 0;
}

.dc-parts-switch-btn {
  padding: var(--s-4) var(--s-12);
  border: none;
  background: transparent;
  border-radius: var(--r-full);
  color: var(--gray-600);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.dc-parts-switch-btn:hover {
  color: var(--gray-900);
}

/* 押されている側（= いま見ている面）。aria-pressed を唯一の状態源にする */
.dc-parts-switch-btn[aria-pressed="true"] {
  background: var(--white);
  color: var(--gray-900);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* --- パネル本体 --- */
.dc-parts-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--white);
  border-left: 1px solid var(--gray-200);
  overflow: hidden;
}

/* 作者の display:flex は UA の [hidden]{display:none} に勝つので、閉じている間を明示する
   （前版はこれが無く、スマホで閉じているはずのパネルが 63px 出ていた） */
.dc-parts-pane[hidden] {
  display: none;
}

/* 前版の見出し（タイトル・説明・チップ列）は出さない。件数は種類タブにだけ出す
   （Mari: チップ列と節見出しの二重表示を剥がす）。DOM は editor.html に残っている */
.dc-parts-head {
  display: none;
}

/* --- 場面ストリップ（1 本・横スクロール）---
   前版は「画面タブ」と「場面タブ」の 2 段で、320px の列では右端が「ウェー…」と切れていた。
   折り返さずに横へ流す（段数が増えないので、下の一覧が押し出されない）。 */
.dc-parts-scenes {
  position: relative; /* 項目の offsetLeft をこの箱の中の位置にする（選んだ場面へ横スクロールするため） */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-8) var(--s-12);
  border-bottom: 1px solid var(--gray-200);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.dc-parts-scenes::-webkit-scrollbar {
  display: none;
}

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

.dc-parts-scene {
  position: relative;
  flex: 0 0 auto;
  padding: var(--s-6) var(--s-12);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-full);
  background: var(--white);
  color: var(--gray-700);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
}

/* プレイ中の場面（「プレイ中」の子）: 左に小さな縦線を置き、一回り小さくする。2 段にはしない */
.dc-parts-scene.is-child {
  margin-left: var(--s-6);
  color: var(--gray-500);
  font-size: 0.6875rem;
}

.dc-parts-scene.is-child::before {
  content: "";
  position: absolute;
  left: calc(var(--s-8) * -1);
  top: 50%;
  width: 1px;
  height: 14px;
  background: var(--gray-300);
  transform: translateY(-50%);
}

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

.dc-parts-scene-wait {
  color: var(--gray-400);
  font-size: 0.75rem;
  white-space: nowrap;
}

/* --- 上のタブ（アセット / 画面。件数はここにだけ）---
   founder 2026-09-17「アセット一覧は一番大事なので独立したタブに」。パネルの一番上に置き、
   2 つを等幅に並べる（320px の列でも「アセット 12」「画面 5」が切れない）。シートの「閉じ」でも見える。 */
.dc-parts-tabs {
  flex-shrink: 0;
  display: flex;
  padding: 0 var(--s-8);
  border-bottom: 1px solid var(--gray-200);
}

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

.dc-parts-tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-4);
  min-width: 0;
  margin-bottom: -1px;
  padding: var(--s-10) var(--s-8) var(--s-8);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--gray-500);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.dc-parts-tab.is-on {
  border-bottom-color: var(--gray-900);
  color: var(--gray-900);
}

.dc-parts-tab-count {
  color: var(--gray-400);
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* --- 本体 --- */
.dc-parts-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--s-12) var(--s-16) var(--s-24);
  -webkit-overflow-scrolling: touch;
}

.dc-parts-empty {
  margin: var(--s-24) 0;
  color: var(--gray-400);
  font-size: 0.8125rem;
  line-height: 1.6;
  text-align: center;
}

.dc-parts-hint {
  margin: var(--s-4) 0 0;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--gray-400);
}

.dc-parts-board-hint {
  margin: 0 0 var(--s-12);
}

/* 「送りました」は時限トーストにしない（次の部品更新まで残す） */
.dc-parts-sent {
  margin: 0;
  padding: var(--s-8);
  background: var(--gray-100);
  border-radius: var(--r-8);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-600);
  text-align: center;
}

/* --- 保存バー（下に 1 本・変更がある時だけ）--- */
.dc-parts-savebar {
  flex-shrink: 0;
  padding: var(--s-8) var(--s-12);
  border-top: 1px solid var(--gray-200);
  background: var(--white);
}

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

.dc-parts-savebar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8);
}

.dc-parts-savebar-count {
  color: var(--gray-900);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dc-parts-savebar-actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.dc-parts-savebar-discard,
.dc-parts-savebar-save {
  padding: var(--s-6) var(--s-12);
  border: none;
  border-radius: var(--r-8);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.dc-parts-savebar-discard {
  background: transparent;
  color: var(--gray-600);
}

.dc-parts-savebar-save {
  background: var(--red);
  color: var(--white);
}

.dc-parts-savebar-save:disabled,
.dc-parts-savebar-discard:disabled {
  background: var(--gray-100);
  color: var(--gray-400);
  cursor: not-allowed;
}

/* 保存しました / 生成中 / 保存できませんでした（時限で消さない） */
.dc-parts-savebar-note {
  margin: var(--s-4) 0 0;
  color: var(--gray-600);
  font-size: 0.75rem;
  line-height: 1.5;
}

.dc-parts-savebar:not(.has-changes) .dc-parts-savebar-note {
  margin: 0;
  text-align: center;
  font-weight: 600;
}

/* --- 組み立てボード（生成中・設計書 §2-6: 中身は変えない）--- */
.dc-parts-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
}

.dc-parts-list-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--s-16);
}

.dc-parts-card {
  padding: var(--s-12);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-12);
  min-width: 0;
}

.dc-parts-card-board {
  padding: var(--s-8);
}

.dc-parts-card.is-failed {
  opacity: 0.7;
}

.dc-parts-stages {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-16);
}

.dc-parts-stage {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  text-align: center;
}

.dc-parts-stage-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--gray-200);
  transition: all 0.3s ease;
}

.dc-parts-stage-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.dc-parts-stage.is-done .dc-parts-stage-dot {
  background: var(--gray-400);
}

.dc-parts-stage.is-done .dc-parts-stage-label {
  color: var(--gray-600);
}

.dc-parts-stage.is-current .dc-parts-stage-dot {
  background: var(--red);
  transform: scale(1.4);
}

.dc-parts-stage.is-current .dc-parts-stage-label {
  color: var(--gray-900);
}

/* --- サムネ（ボード・グリッド・インスペクタで共用）--- */
.dc-parts-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border-radius: var(--r-8);
  overflow: hidden;
  margin-bottom: var(--s-8);
}

.dc-parts-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast; /* ドット絵のスプライトを眠くしない */
}

/* まだ来ていない部品（images_planned で先に置いた枠）。薄いストライプで「まだ中身がない」を示す */
.dc-parts-thumb.is-pending {
  opacity: 0.65;
  background-image: linear-gradient(
    135deg,
    var(--gray-100) 25%, var(--white) 25%,
    var(--white) 50%, var(--gray-100) 50%,
    var(--gray-100) 75%, var(--white) 75%
  );
  background-size: 12px 12px;
}

.dc-parts-thumb.is-broken::after {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: var(--r-8);
  background: var(--gray-200);
}

.dc-parts-thumb-note {
  font-size: 0.6875rem;
  color: var(--gray-400);
  padding: 0 var(--s-8);
  text-align: center;
}

.dc-parts-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-900);
  overflow-wrap: anywhere;
}

.dc-parts-file {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.6875rem;
  color: var(--gray-400);
  overflow-wrap: anywhere;
}

/* --- アセットの束（キャラ / 絵 / 造形）。見出しは束が 2 つ以上のときだけ JS が出す --- */
.dc-parts-asset-group + .dc-parts-asset-group {
  margin-top: var(--s-16);
}

.dc-parts-group-label {
  margin: 0 0 var(--s-6);
  color: var(--gray-500);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
}

/* --- アセットのグリッド（PC 2 列 / シート 3 列）--- */
.dc-parts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-8);
}

.dc-parts-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
  padding: var(--s-6);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-12);
  background: var(--white);
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

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

.dc-parts-tile-thumb {
  aspect-ratio: 1 / 1;
  margin-bottom: 0;
}

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

/* --- 調整タブ: カメラのプリセット（2026-09-17・PC 2 列 / シート 3 列）---
   いまの見え方 = 黒い枠、選んだけれど未保存 = 赤い破線枠 + 「未保存」（保存済みかが一目で分かる）。 */
.dc-parts-tuning {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-12);
  text-align: left;
}

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

.dc-parts-camera-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-8);
}

.dc-parts-camera {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  min-width: 0;
  padding: var(--s-10);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-12);
  background: var(--white);
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.dc-parts-camera.is-current {
  border-color: var(--gray-900);
  box-shadow: inset 0 0 0 1px var(--gray-900);
}

.dc-parts-camera.is-pending {
  border: 1px dashed var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}

.dc-parts-camera-icon {
  color: var(--gray-500);
  font-size: 1.125rem;
  line-height: 1;
}

.dc-parts-camera.is-current .dc-parts-camera-icon {
  color: var(--gray-900);
}

.dc-parts-camera.is-pending .dc-parts-camera-icon {
  color: var(--red);
}

.dc-parts-camera-name {
  color: var(--gray-900);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
}

.dc-parts-camera-desc {
  color: var(--gray-500);
  font-size: 0.6875rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* タイルの印（標準 / この作品のカメラ / 未保存）。右上に横並びで、アイコンの行に重ねる。
   複数付いても重ならないよう 1 つの行に並べる（以前は 1 個の absolute バッジだった） */
.dc-parts-camera-chips {
  position: absolute;
  top: var(--s-6);
  right: var(--s-6);
  left: calc(var(--s-10) + 1.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-4);
  pointer-events: none;
}

.dc-parts-camera-chip {
  padding: 1px var(--s-6);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: var(--white);
  color: var(--gray-600);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.dc-parts-camera-chip.is-saved {
  border-color: var(--gray-900);
  color: var(--gray-900);
}

.dc-parts-camera-chip.is-unsaved {
  border-color: var(--red);
  color: var(--red);
}

.dc-parts-tuning-help {
  margin: 0;
  overflow: hidden;
  color: var(--gray-500);
  font-size: 0.6875rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dc-parts-camera-reset {
  align-self: flex-start;
  padding: var(--s-4) 0;
  border: none;
  background: transparent;
  color: var(--gray-600);
  font-family: inherit;
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
}

.dc-parts-camera-reset:disabled {
  color: var(--gray-400);
  cursor: not-allowed;
}

.dc-parts-tuning-note {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* --- 図鑑タブ（2026-09-27・studio-entity チーム A「台帳」・studio-parts-entities.js）---
   ゲームに出てくる「もの」（主役・敵・アイテム…）ごとのカード。シトラスさんの要望「敵の能力値や移動速度を
   細かく調整したい」「キャラの画像を確実に差し替えたい」「タグ検索で敵キャラリスト」の土台。
   見た目は DreamCore の言葉（太い枠・ハードシャドウ）に寄せる: パネルの他のタイル（1px 枠）より一段強くしたのは、
   カードが「1 つの『もの』のまとまり」で、中に B（画像差し替え）・C（数値パネル）の操作が入る＝ページの中の
   小さな札として区切りを強く見せたいから。影は 3px のベタ（ぼかし無し）。 */
.dc-parts-entities {
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
  text-align: left;
}

.dc-parts-entities-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-8);
}

/* タグの絞り込み: 折り返すピル。選んでいるものは黒地に白（カメラの「保存済み」チップと同じ強弱の語彙） */
.dc-parts-entity-filters {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--s-6);
  min-width: 0;
}

.dc-parts-entity-filter {
  padding: var(--s-4) var(--s-10);
  border: 2px solid var(--gray-900);
  border-radius: 999px;
  background: var(--white);
  color: var(--gray-900);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
}

.dc-parts-entity-filter.is-on {
  background: var(--gray-900);
  color: var(--white);
}

/* stale: 古い台帳を見せたまま、小さく「更新中」（邪魔しない灰色・右上） */
.dc-parts-entities-stale {
  flex: 0 0 auto;
  padding-top: var(--s-6);
  color: var(--gray-500);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.dc-parts-entities-building::before {
  content: '';
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: var(--s-6);
  border: 2px solid var(--gray-300);
  border-top-color: var(--gray-900);
  border-radius: 50%;
  vertical-align: -1px;
  /* 回転は style.css（critical・全ページ共通）の character-spin を借りる。ルート別バンドルにはキーフレーム定義を
     置けない決まり（test/route-css-split.test.js が赤にする・分割スクリプトが keyframes を critical に残すため） */
  animation: character-spin 0.9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .dc-parts-entities-building::before { animation: none; }
}

/* カードの列: 1 列（数値の行と B・C の操作が横幅を要る）。PC の 320px 列でもシートでも同じ */
.dc-parts-entity-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  /* ハードシャドウ（右下 3px）がパネルの端で切れないぶんの余白 */
  padding: 0 3px 3px 0;
}

.dc-parts-entity {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  min-width: 0;
  padding: var(--s-10);
  border: 2px solid var(--gray-900);
  border-radius: var(--r-12);
  background: var(--white);
  box-shadow: 3px 3px 0 var(--gray-900);
}

.dc-parts-entity-top {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  min-width: 0;
}

.dc-parts-entity-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  margin-bottom: 0;
}

/* カードの絵 → アセットタブの入口（2026-09-27）。押せる絵は太い枠＋ハードシャドウ（DreamCore の押せる物の見た目） */
.dc-parts-entity-thumb-button {
  flex: 0 0 56px;
  padding: 0;
  border: 2px solid var(--gray-900);
  border-radius: var(--r-8);
  background: var(--white);
  box-shadow: 2px 2px 0 var(--gray-900);
  cursor: pointer;
  overflow: hidden;
}

.dc-parts-entity-thumb-button:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.dc-parts-entity-thumb-button:focus-visible {
  outline: 2px solid var(--gray-900); /* この面の約束（上の #playGameButton と同じ・WCAG 2.4.7） */
  outline-offset: 2px;
}

.dc-parts-entity-thumb-button .dc-parts-entity-thumb {
  display: block;
  border: 0;
}

/* 絵はあるがアセットに飛べない（造形・組み立て等）: 枠を薄く・影なし = 押せない見た目 */
.dc-parts-entity-thumb.is-static {
  border: 2px solid var(--gray-200);
  border-radius: var(--r-8);
  box-shadow: none;
  cursor: default;
}

/* 数値の行の区切り見出し「基本の動き」（@base・2026-09-27 夜）。行の名前より一段弱い 11px のラベル＋上の細い線 */
.dc-parts-entity-setting-group {
  margin-top: var(--s-8);
  padding-top: var(--s-8);
  border-top: 1px solid var(--gray-200);
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 700;
}

.dc-parts-entity-thumb.is-empty {
  border: 2px dashed var(--gray-200);
  border-radius: var(--r-8);
  background: var(--gray-50);
}

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

.dc-parts-entity-name {
  color: var(--gray-900);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.dc-parts-entity-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

.dc-parts-entity-tag {
  padding: 0 var(--s-6);
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  color: var(--gray-600);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

/* 敵・ボスだけ赤（「敵キャラリスト」を目で拾えるように。色は製品の赤 1 色だけ） */
.dc-parts-entity-tag.is-foe {
  border-color: var(--red);
  color: var(--red);
}

/* 効く数値（表示だけ）: 名前 ｜ 値 の 2 列。C（数値パネル）が replaces:'settings' で置き換える場所 */
.dc-parts-entity-settings {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding-top: var(--s-8);
  border-top: 1px solid var(--gray-200);
}

.dc-parts-entity-setting {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-8);
  min-width: 0;
}

.dc-parts-entity-setting-name {
  min-width: 0;
  color: var(--gray-600);
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.dc-parts-entity-setting-value {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--s-4);
  margin: 0;
  color: var(--gray-900);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.dc-parts-entity-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid var(--gray-900);
  border-radius: 3px;
}

/* B・C の差し込みの枠（中身の見た目は各チームが持つ。ここは間隔だけ） */
.dc-parts-entity-ext:empty {
  display: none;
}

/* --- 図鑑カードの数値を手で直す（2026-09-27・studio-entity チーム C・studio-parts-tuning-panel.js）---
   シトラスさん「敵の能力値や、移動速度を細かく調整したい」。A の「表示だけの数値の行」を置き換える（replaces:'settings'）。
   1 項目 = 名前｜入力欄 の行 ＋ その下に全幅のスライダー。スライダーを全幅にしたのは、PC の 320px 列でもスマホのシートでも
   指で狙える長さを取るため（名前と同じ行に押し込むと 100px 未満になり「細かく」動かせない）。
   見た目は DreamCore の言葉（黒の 2px 枠・ベタの影・黒地に白の「オン」）。赤は「敵」の札と同じ 1 色だけで、
   ここでは「共通（変えると両方変わる）」の注意にだけ使う。
   結果の出し分けは data-status（JS で組み立てたクラス名はこのファイルで拾えない決まり）。 */
.dc-parts-tune {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-top: var(--s-8);
  border-top: 1px solid var(--gray-200);
}

.dc-parts-tune-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
}

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

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

.dc-parts-tune-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--gray-900);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.dc-parts-tune-unit {
  flex: 0 0 auto;
  color: var(--gray-500);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

/* 数の入力欄: 数字だけの短い欄。16px 未満にすると iOS Safari がフォーカスで画面を拡大する */
.dc-parts-tune-input {
  flex: 0 0 5.5rem;
  width: 5.5rem;
  min-width: 0;
  padding: var(--s-4) var(--s-6);
  border: 2px solid var(--gray-900);
  border-radius: var(--r-8);
  background: var(--white);
  color: var(--gray-900);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: right;
}

.dc-parts-tune-input:focus-visible,
.dc-parts-tune-slider:focus-visible,
.dc-parts-tune-switch:focus-visible,
.dc-parts-tune-color:focus-visible {
  outline: 2px solid var(--gray-900);
  outline-offset: 2px;
}

.dc-parts-tune-input:disabled,
.dc-parts-tune-slider:disabled,
.dc-parts-tune-switch:disabled,
.dc-parts-tune-color:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dc-parts-tune-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* スライダー: 黒い太めの溝＋白い丸に黒枠（ブラウザ既定の青を消す）。つまみは 20px = 指の腹で掴める最小 */
.dc-parts-tune-slider {
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  accent-color: var(--gray-900);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.dc-parts-tune-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--gray-900);
}

.dc-parts-tune-slider::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border: 2px solid var(--gray-900);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 2px 2px 0 var(--gray-900);
  -webkit-appearance: none;
  appearance: none;
}

.dc-parts-tune-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--gray-900);
}

.dc-parts-tune-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--gray-900);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 2px 2px 0 var(--gray-900);
}

/* 目盛りの端の数（と、作者の推奨帯なら真ん中に「おすすめの範囲」）。小さく灰色 */
.dc-parts-tune-ends {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-6);
  color: var(--gray-500);
  font-size: 0.625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.dc-parts-tune-guide {
  color: var(--gray-600);
}

/* オン/オフのスイッチ: 押すと黒地に白（図鑑のチップ・カメラの保存済みと同じ強弱の語彙） */
.dc-parts-tune-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-2) var(--s-10) var(--s-2) var(--s-2);
  border: 2px solid var(--gray-900);
  border-radius: 999px;
  background: var(--white);
  color: var(--gray-900);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.3;
  cursor: pointer;
}

.dc-parts-tune-switch-knob {
  width: 16px;
  height: 16px;
  border: 2px solid var(--gray-900);
  border-radius: 50%;
  background: var(--white);
}

.dc-parts-tune-switch.is-on {
  background: var(--gray-900);
  color: var(--white);
}

.dc-parts-tune-switch.is-on .dc-parts-tune-switch-knob {
  border-color: var(--white);
}

.dc-parts-tune-color {
  flex: 0 0 auto;
  width: 36px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--gray-900);
  border-radius: var(--r-8);
  background: var(--white);
  cursor: pointer;
}

.dc-parts-tune-color-text {
  flex: 0 0 auto;
  color: var(--gray-600);
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 共通の印: 「主役と共通（変えると両方変わります）」— 見落とすと「敵だけ弱くしたのに主役も弱くなった」になるので赤で */
.dc-parts-tune-shared {
  margin: 0;
  color: var(--red);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
}

.dc-parts-tune-row.is-shared .dc-parts-tune-name::after {
  content: ' \2194';
  color: var(--red);
}

/* 結果・元に戻す・もう一度: 小さな 1 行。結果は次の変更まで出し続ける（時限で消さない） */
.dc-parts-tune-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6);
}

.dc-parts-tune-status {
  color: var(--gray-500);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
}

.dc-parts-tune-status[data-status="saved"] {
  color: var(--gray-900);
}

.dc-parts-tune-status[data-status="busy"],
.dc-parts-tune-status[data-status="failed"],
.dc-parts-tune-status[data-status="conflict"] {
  color: var(--red);
}

.dc-parts-tune-reset,
.dc-parts-tune-retry {
  padding: 0 var(--s-8);
  border: 1px solid var(--gray-900);
  border-radius: 999px;
  background: var(--white);
  color: var(--gray-900);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
}

.dc-parts-tune-reset {
  margin-left: auto;
}

/* 「その他の数値」: 台帳（AI）がどの「もの」にも入れなかった数値。畳んでおく */
.dc-parts-tune-more {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.dc-parts-tune-more-toggle {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gray-600);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.dc-parts-tune-note {
  margin: 0;
  color: var(--gray-500);
  font-size: 0.6875rem;
  line-height: 1.4;
}

/* 保存バー: 画面に印の出ない変更（カメラ）の名前 */
.dc-parts-savebar-items {
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
  color: var(--gray-600);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* 選んだ絵・造形のインスペクタ（グリッドの上） */
.dc-parts-inspector {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  margin-bottom: var(--s-12);
  padding: var(--s-12);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-12);
  background: var(--white);
}

.dc-parts-inspector-media {
  aspect-ratio: 4 / 3;
  margin-bottom: 0;
}

/* コマの並べ方（ポーズごとの表）は studio-parts-mobile.css「ポーズ組のコマの表」節（2026-09-20）。ここはコマ 1 個の見た目だけ */
.dc-parts-pose-cell {
  flex: 0 0 auto;
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--s-4);
  background: var(--gray-100);
  border-radius: var(--r-8);
  overflow: hidden;
}

/* コマは押して選べる（2026-09-17 絵の描き直し: 選んだコマが「このポーズだけ」の対象）。
   button 既定の枠と文字を消し、選択中だけ赤い枠（タイルの is-on と同じ色） */
button.dc-parts-pose-cell {
  border: 1px solid transparent;
  font-family: inherit;
  cursor: pointer;
}

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

.dc-parts-pose-cell .dc-parts-img {
  width: 40px;
  height: 40px;
}

.dc-parts-pose-label {
  max-width: 100%;
  color: var(--gray-500);
  font-size: 0.5625rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dc-parts-prompt-box {
  border-top: 1px solid var(--gray-200);
  padding-top: var(--s-6);
}

.dc-parts-prompt-summary {
  color: var(--gray-600);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.dc-parts-prompt {
  margin: var(--s-6) 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--gray-600);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dc-parts-prompt.is-muted {
  margin: 0;
  color: var(--gray-400);
}

/* --- 描き直し / 作り直しを頼む（2026-09-18: 「〜を頼む」の開くボタン .dc-parts-edit-open と取消 .dc-parts-edit-cancel は
   7d63f8fea で JS から消えた dead CSS だったので削除。test/route-css-split.test.js が「どのページでも当たらない = critical」と赤にしていた） --- */
.dc-parts-edit {
  margin-top: var(--s-4);
}



.dc-parts-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: var(--s-8);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-8);
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--gray-900);
  resize: vertical;
}

.dc-parts-textarea:focus {
  outline: none;
  border-color: var(--red);
}

.dc-parts-edit-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-8);
  margin-top: var(--s-8);
}

.dc-parts-edit-send {
  padding: var(--s-6) var(--s-12);
  border: none;
  border-radius: var(--r-8);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}


.dc-parts-edit-send {
  background: var(--red);
  color: var(--white);
}

.dc-parts-edit-send:disabled {
  background: var(--gray-200);
  color: var(--gray-400);
  cursor: not-allowed;
}

/* ===================================================================
 * 画面の部品（名前だけの行 + 行の下に開くインスペクタ）
 * =================================================================== */

.dc-ui-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

/* 枠は一覧全体に 1 本で、行の間はヘアラインだけ */
.dc-ui-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-8);
  overflow: hidden;
}

.dc-ui-list.dc-ui-placeholder {
  border-style: dashed;
}

.dc-ui-placeholder .dc-parts-empty {
  margin: 0;
  padding: var(--s-12);
}

.dc-ui-item + .dc-ui-item {
  border-top: 1px solid var(--gray-200);
}

/* 選んでいる行: 左の赤線 + 薄赤の面（プレビューの赤い枠と同じ赤）。
   border ではなく内側の影の帯にするのは、枠を足すと行の高さが変わって下の行が跳ねるため */
.dc-ui-item.is-selected {
  background: var(--red-light);
  box-shadow: inset 2px 0 0 var(--red);
}

/* 行の頭（名前だけ・省略しない・長い名前は折り返す） */
.dc-ui-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s-8);
  row-gap: 2px;
  width: 100%;
  padding: var(--s-10) var(--s-12);
  border: none;
  background: transparent;
  color: var(--gray-900);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.dc-ui-item-name {
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.dc-ui-item-name.is-unnamed {
  color: var(--gray-500);
}

/* 名前の無い部品・同名の部品にだけ添える小さな id（主表示にはしない） */
.dc-ui-item-id {
  color: var(--gray-400);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  overflow-wrap: anywhere;
}

.dc-ui-runtime-note {
  margin: 0;
}

/* --- インスペクタ --- */
.dc-ui-inspector {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  padding: 0 var(--s-12) var(--s-12);
}

.dc-ui-group-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

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

.dc-ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

.dc-ui-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: var(--s-6) var(--s-8);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-8);
  background: var(--white);
  color: var(--gray-900);
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.5;
  resize: vertical;
}

.dc-ui-textarea:focus {
  outline: none;
  border-color: var(--gray-500);
}

/* 手を入れた欄（保存バーに積まれている）。赤の線 1px で示す */
.dc-ui-field.is-dirty .dc-ui-textarea {
  border-color: var(--red);
}

/* 直せない文字（ゲームの中で組み立てられている）。読むだけ。まとめて 1 つの箱に並べる */
.dc-ui-readonly-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

.dc-ui-field-readonly {
  padding: var(--s-6) var(--s-8);
  border-radius: var(--r-8);
  background: var(--gray-50);
  color: var(--gray-600);
  font-size: 0.8125rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* 差し込み（{score} 等）。等幅 + 面で「これは編集してはいけない部品」と伝える */
.dc-ui-chip {
  display: inline-block;
  padding: 0 var(--s-4);
  border-radius: var(--r-6);
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 0.6875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.dc-ui-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}

.dc-ui-chips-label {
  font-size: 0.6875rem;
  color: var(--gray-500);
}

/* 直せない理由。赤字にしない（事実だけを置く） */
.dc-ui-error {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--gray-500);
}

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

/* 位置（X / Y の % と矢印） */
.dc-ui-position {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8);
}

.dc-ui-position-value {
  display: flex;
  gap: var(--s-12);
}

.dc-ui-position-axis {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-4);
}

.dc-ui-position-label {
  color: var(--gray-400);
  font-size: 0.6875rem;
  font-weight: 700;
}

.dc-ui-position-number {
  min-width: 3ch;
  color: var(--gray-900);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dc-ui-nudges {
  display: grid;
  grid-template-columns: repeat(4, 32px);
  gap: var(--s-4);
}

.dc-ui-nudge {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-8);
  background: var(--white);
  color: var(--gray-700);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
}

.dc-ui-nudge:disabled {
  color: var(--gray-300);
  cursor: not-allowed;
}

.dc-ui-secondary {
  padding: var(--s-6) var(--s-12);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-8);
  background: var(--white);
  color: var(--gray-700);
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
}

.dc-ui-secondary:disabled {
  color: var(--gray-400);
  cursor: not-allowed;
}

.dc-ui-position-reset {
  align-self: flex-start;
}

/* 「この部品は位置を保存できません」。禁止ではなく事実の断りなので弱い文字で */
.dc-ui-unsavable {
  color: var(--gray-400);
}

/* AI に頼む（折りたたみ・既定は閉じ）。直接操作が主役なので、目立たせない */
.dc-ui-ask {
  border-top: 1px solid var(--gray-200);
}

.dc-ui-ask-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-ask-summary::-webkit-details-marker {
  display: none;
}

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

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

.dc-ui-ask-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-top: var(--s-8);
}

.dc-ui-ask-body .dc-parts-edit-actions {
  justify-content: space-between;
  margin-top: 0;
}

.dc-ui-file {
  display: none;
}

.dc-ui-ref {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

.dc-ui-ref-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-8);
  background: var(--gray-50);
}

/* ===================================================================
 * プレビューの上の枠（つくる中は常に出る・studio-ui-layout-editor.js）
 * =================================================================== */
.dc-ui-overlay {
  position: absolute;
  z-index: 5;
  touch-action: none;
}

/* 板そのものは pointer を通す（出しっぱなしでもゲームで遊べる）。受けるのは枠だけ */
.dc-ui-overlay-view {
  pointer-events: none;
}

.dc-ui-box {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--red);
  border-radius: var(--r-6);
  background: var(--red-light);
  touch-action: none;
}

.dc-ui-box.is-grabbed {
  cursor: grabbing;
  background: var(--red-glow);
}

.dc-ui-box-view {
  border-color: var(--gray-400);
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

/* 選んでいて、かつ動かせる部品だけ「掴める」形にする */
.dc-ui-box-view.is-movable {
  cursor: grab;
}

/* 行を撫でている部品（塗りは選んでいる部品より薄い） */
.dc-ui-box-view.is-hot {
  border-color: var(--gray-900);
  background: rgba(255, 59, 48, 0.04);
}

/* 選んでいる部品: 赤 2px（撫でている 1px と遠目に見分けるため） */
.dc-ui-box-view.is-selected {
  border-width: 2px;
  border-color: var(--red);
  background: var(--red-light);
}

/* 全画面の幕は**どの状態でも面を塗らない**（選んだ瞬間にプレビュー全面が赤くなるのを防ぐ）。
   押せるのは左上の名札だけ（.dc-ui-box-label-hit） */
.dc-ui-box-view.dc-ui-box-edge,
.dc-ui-box-view.dc-ui-box-edge.is-hot,
.dc-ui-box-view.dc-ui-box-edge.is-selected {
  background: transparent;
  pointer-events: none;
}

.dc-ui-box-view.dc-ui-box-edge.is-hot {
  border-color: var(--gray-900);
}

.dc-ui-box-view.dc-ui-box-edge.is-selected {
  border-width: 2px;
  border-color: var(--red);
}

/* 場面を選んでいる間、位置関係のために薄く添える常時の部品（見えるが触れない） */
.dc-ui-box-view.dc-ui-box-dim {
  background: transparent;
  border-style: dashed;
  border-color: var(--gray-300);
  opacity: 0.6;
  pointer-events: none;
}

.dc-ui-box-view.dc-ui-box-dim .dc-ui-box-label {
  background: var(--gray-300);
  color: var(--gray-600);
}

.dc-ui-box-label {
  position: absolute;
  left: 0;
  top: -16px;
  padding: 0 var(--s-4);
  border-radius: var(--r-6);
  background: var(--gray-900);
  color: var(--white);
  font-size: 0.625rem;
  line-height: 16px;
  white-space: nowrap;
  pointer-events: none;
}

.dc-ui-box-view.is-selected .dc-ui-box-label {
  background: var(--red);
}

/* 名札をプレビューの内側に収める（右端で切れていた「「🐾ダッシュ」ボ」の対策） */
.dc-ui-box-label.is-label-end {
  left: auto;
  right: 0;
}

.dc-ui-box-label.is-label-inside {
  top: 0;
}

/* 全画面の幕の名札。板の縁の**内側**に置き、ここだけが押せる */
.dc-ui-box-label-hit {
  top: 0;
  pointer-events: auto;
  cursor: pointer;
}

/* ===================================================================
 * レイアウト（DOM は動かさない・プレビューは一度も display:none にしない）
 * =================================================================== */

/* PC: プレビューの右に 320px の列。iframe は生きたまま = 「見ながら触る」 */
.preview-panel.dc-parts-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: auto minmax(0, 1fr);
}

.preview-panel.dc-parts-side .preview-header {
  grid-column: 1 / -1;
  grid-row: 1;
}

.preview-panel.dc-parts-side .preview-container {
  grid-column: 1;
  grid-row: 2;
}

.preview-panel.dc-parts-side .dc-parts-pane {
  grid-column: 2;
  grid-row: 2;
}

/* 1100px 未満: ツールパネルは生きたプレビューの**下に押し出す**（通常フローの flex 子。
   position:absolute は使わない）。`.preview-panel` はもともと display:flex; flex-direction:column
   （style.css）なので、パネルが開けば `.preview-container`（flex:1 1 0）が自動で縮む——
   JS が px を計算する必要が無い（studio-parts-mobile.css 冒頭の解説）。
   高さの上限（45dvh）・下固定ツールバー・進行帯・「その他」ポップオーバーの見た目は
   studio-parts-mobile.css（`.preview-panel.dc-parts-mobile` 系）が持つ。ここは
   「シートが開いているときだけ効く」PC 非依存の骨格（3 列グリッドなど）だけを残す。
   2026-09-17 founder 裁定でつまみ（3 段ドラッグ・is-peek）は撤去した。 */
.preview-panel.dc-parts-sheet .dc-parts-pane {
  position: static;
}

.preview-panel.dc-parts-sheet .dc-parts-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 調整のタイルもシートでは 3 列（名前 + 1 行の説明が 110px 前後の列に収まる） */
.preview-panel.dc-parts-sheet .dc-parts-camera-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.preview-panel.dc-parts-sheet .dc-parts-camera {
  padding: var(--s-8);
}

@media (max-width: 768px) {
  .dc-parts-body {
    padding: var(--s-12) var(--s-12) var(--s-24);
  }

  .dc-parts-switch-btn {
    padding: var(--s-4) var(--s-8);
  }

  /* プレビューのヘッダは「戻る + 操作ボタン群」の 2 要素で、スイッチを足すと 3 要素になる。
     **スイッチを持つヘッダに限って**折り返しを許す（他ページの .preview-header は触らない） */
  .preview-header:has(.dc-parts-switch) {
    flex-wrap: wrap;
    row-gap: var(--s-8);
  }

  .dc-parts-stage-label {
    font-size: 0.625rem;
  }

  .dc-ui-item-head {
    padding: var(--s-10);
  }

  .dc-ui-inspector {
    padding: 0 var(--s-10) var(--s-10);
  }
}