*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root, [data-theme="dark"] {
  --bg:        #0d1117;
  --bg2:       #161b22;
  --bg3:       #21262d;
  --border:    #30363d;
  --text:      #c9d1d9;
  --text-sub:  #8b949e;
  --accent:    #388bfd;
  --accent2:   #1f6feb;
  /* 白文字を載せても読める濃さ。--accent のままだと実測 3.34 で基準(4.5)に届かない。 */
  --accent-strong: #1f6feb;
  --green:     #3fb950;
  --danger:    #f85149;
  /* 白文字を載せる塗りつぶし用。--green / --danger をそのまま使うと
     暗いテーマや flat では基準(4.5)に届かない。 */
  --green-strong:  #1a7f37;
  --danger-strong: #d1242f;
  --node-root-fill:   #1f6feb;
  --node-l1-fill:     #1d3557;
  --node-l1-stroke:   #388bfd;
  --node-leaf-fill:   #161b22;
  --node-leaf-stroke: #30363d;
  --node-sel-stroke:  #f78166;
  --edge-color:       #388bfd;
}

[data-theme="light"] {
  --bg:        #ffffff;
  --bg2:       #f6f8fa;
  --bg3:       #eaeef2;
  --border:    #d0d7de;
  --text:      #1f2328;
  --text-sub:  #57606a;
  --accent:    #0969da;
  --accent2:   #ddf4ff;
  --accent-strong: #0969da;
  --green:     #1a7f37;
  --danger:    #d1242f;
  /* 白文字を載せる塗りつぶし用。--green / --danger をそのまま使うと
     暗いテーマや flat では基準(4.5)に届かない。 */
  --green-strong:  #1a7f37;
  --danger-strong: #d1242f;
  --node-root-fill:   #0969da;
  --node-l1-fill:     #ddf4ff;
  --node-l1-stroke:   #0969da;
  --node-leaf-fill:   #f6f8fa;
  --node-leaf-stroke: #d0d7de;
  --node-sel-stroke:  #cf222e;
  --edge-color:       #0969da;
}

/* Claude UI 風テーマ（温かみのあるクリーム + テラコッタオレンジ） */
[data-theme="claude"] {
  --bg:        #faf9f5;
  --bg2:       #f0ebe3;
  --bg3:       #e6dfd5;
  --border:    #d0c8bb;
  --text:      #1c1917;
  /* --bg3 の上で 3.63 しかなく基準(4.5)に届かなかった。ヘルプ・モバイルバー・
     書き出しメニューなど広い範囲がこの色。 */
  --text-sub:  #635a51;
  --accent:    #c96440;
  --accent2:   #fef0e8;
  --accent-strong: #b04f2d;
  --green:     #2f7d46;
  --danger:    #c0392b;
  /* 白文字を載せる塗りつぶし用。--green / --danger をそのまま使うと
     暗いテーマや flat では基準(4.5)に届かない。 */
  --green-strong:  #2f7d46;
  --danger-strong: #c0392b;
  --node-root-fill:   #c96440;
  --node-l1-fill:     #fef0e8;
  --node-l1-stroke:   #c96440;
  --node-leaf-fill:   #f7f2ec;
  --node-leaf-stroke: #d0c8bb;
  --node-sel-stroke:  #8b2800;
  --edge-color:       #c96440;
}

/* フラット（無印風モノクロ）テーマ：温かいオフホワイト + 黒のヘアライン、微アクセントにグレーブルー */
[data-theme="flat"] {
  --bg:        #f3f1ec;
  --bg2:       #ece9e2;
  --bg3:       #e2ded5;
  --border:    #cfcabf;
  --text:      #2b2b2b;
  /* --bg3 の上で 2.57 しかなかった（同上）。 */
  --text-sub:  #5c5c5c;
  --accent:    #6b7b8c;
  --accent2:   #e6e9ec;
  --accent-strong: #5a6875;
  --green:     #5f7a5f;
  --danger:    #b06a5f;
  /* 白文字を載せる塗りつぶし用。--green / --danger をそのまま使うと
     暗いテーマや flat では基準(4.5)に届かない。 */
  --green-strong:  #4e6b4e;
  --danger-strong: #9c4a3f;
  --node-root-fill:   #6b7b8c;
  --node-l1-fill:     #ffffff;
  --node-l1-stroke:   #2b2b2b;
  --node-leaf-fill:   #ffffff;
  --node-leaf-stroke: #9a958c;
  --node-sel-stroke:  #6b7b8c;
  --edge-color:       #a8a39a;
}

/* フラットテーマ：影を全除去し角丸を控えめに（円形要素のみ維持） */
[data-theme="flat"] * { box-shadow: none !important; border-radius: 4px !important; }
[data-theme="flat"] #btn-help,
[data-theme="flat"] .collab-dot,
[data-theme="flat"] .collab-avatar { border-radius: 50% !important; }

html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); }

/* Top bar */
#topbar {
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 14px;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  flex-shrink: 0; position: relative; z-index: 100;
}
#btn-menu {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; padding: 6px;
  border-radius: 6px;
}
#btn-menu span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 1px; }
#btn-menu:hover { background: var(--bg3); }

#project-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
#project-name:hover { background: var(--bg3); }

#view-toggle {
  display: flex; background: var(--bg3); border-radius: 6px; padding: 3px; gap: 2px;
  margin-left: auto;
}
#view-toggle button {
  background: none; border: none; cursor: pointer;
  color: var(--text-sub); border-radius: 4px; padding: 4px 12px; font-size: 12px;
}
#view-toggle button.active { background: var(--accent-strong); color: #fff; }
/* デスクトップ：テキスト表示、アイコン非表示 */
#view-toggle .btn-icon { display: none; }
#view-toggle .btn-text { display: inline; }

#btn-theme {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 14px;
}
#save-status { font-size: 11px; color: var(--green); white-space: nowrap; }

/* Main layout */
#main { display: flex; height: calc(100vh - 48px); overflow: hidden; }

/* スマホのアドレスバーの開閉に追随させる。
   100vh は「アドレスバーが隠れたときの高さ」で固定なので、バーが出ている間は
   流れの中の下端が画面の外へずれる。一方 position:fixed のアクションバーは
   **見えている領域の下端**に貼り付く。基準が違うので必ずズレ、シートタブと
   アクションバーが重なる（実際にそうなった）。
   dvh は見えている高さに追随するので、流れの下端と固定の下端が一致する。
   非対応の古いブラウザでは従来どおり 100vh になる（今より悪くはならない）。 */
@supports (height: 100dvh) {
  #main { height: calc(100dvh - 48px); }
}

/* Drawer */
#drawer {
  width: 220px; background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: transform 0.2s ease; flex-shrink: 0;
}
#drawer.closed { transform: translateX(-220px); margin-right: -220px; }

#drawer-header { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.drawer-label { font-size: 11px; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
#btn-new-project {
  width: 100%; background: var(--green-strong); border: none;
  border-radius: 6px; color: #fff; padding: 7px; font-size: 12px; cursor: pointer;
}
#btn-new-project:hover { opacity: 0.85; }

#project-list { flex: 1; overflow-y: auto; padding: 8px; list-style: none; }
#project-list li {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 6px; cursor: pointer;
  font-size: 13px; color: var(--text-sub);
}
#project-list li:hover { background: var(--bg3); color: var(--text); }
#project-list li.active {
  background: rgba(56, 139, 253, 0.15);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid var(--accent); color: var(--text);
}
#project-list li .proj-export {
  margin-left: auto; font-size: 11px; color: var(--text-sub);
  display: none; background: none; border: none; cursor: pointer;
  padding: 2px 4px;
}
#project-list li:hover .proj-export { display: block; }
#project-list li .proj-del {
  font-size: 11px; color: var(--text-sub);
  display: none; background: none; border: none; cursor: pointer;
  padding: 2px 4px;
}
#project-list li:hover .proj-del { display: block; }

#drawer-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#btn-pick-folder, #btn-import {
  width: 100%;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-sub);
  padding: 7px 10px; font-size: 12px; cursor: pointer;
  text-align: left;
}
#btn-pick-folder:hover, #btn-import:hover { background: var(--bg2); color: var(--text); }

.fs-folder-row {
  display: flex; align-items: center; gap: 6px;
}
.fs-folder-name {
  font-size: 12px; color: var(--text); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fs-change-btn {
  background: none; border: none;
  color: var(--text-sub); font-size: 11px; cursor: pointer;
  padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
}
.fs-change-btn:hover { background: var(--bg3); color: var(--text); }

.fs-save-status { font-size: 11px; color: var(--green); }
.fs-save-status.error { color: var(--danger); }

.fs-unsupported { font-size: 11px; color: var(--text-sub); margin: 0; }

/* Canvas */
#canvas-wrap { flex: 1; position: relative; overflow: hidden; background: var(--bg); }
#mindmap-svg { width: 100%; height: 100%; display: block; outline: none; }

#zoom-controls {
  position: absolute; bottom: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 4px;
}
#zoom-controls button {
  width: 32px; height: 32px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#zoom-controls button:hover { background: var(--bg3); }

/* Node input (floating HTML input for editing) */
#node-input-wrap {
  position: absolute; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  top: 0; left: 0; width: 0; height: 0;
}
#node-input-wrap.hidden { display: none; }
#node-input {
  pointer-events: all;
  background: var(--bg); border: 2px solid var(--accent);
  color: var(--text); font-size: 13px;
  border-radius: 10px; padding: 0 10px;
  outline: none; text-align: center; width: 100%;
  resize: none; overflow: hidden; line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* 手書き拡大編集モード（Pencilで開いたときだけJSが .pen-big を付与） */
#node-input-caption { display: none; }
#node-input-wrap.pen-big {
  flex-direction: column;
  align-items: stretch;
  height: auto;
}
#node-input-wrap.pen-big #node-input-caption {
  display: block;
  pointer-events: all;          /* ドラッグハンドル（Task 4で配線） */
  touch-action: none;           /* ドラッグ中に画面をスクロールさせない */
  cursor: move;
  user-select: none;
  font-size: 12px;
  color: var(--text-sub);
  background: var(--bg2);
  border: 2px solid var(--accent);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 6px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#node-input-wrap.pen-big #node-input {
  text-align: left;
  border-radius: 0 0 10px 10px;
  padding: 8px 10px;
  /* モバイル用 #node-input{font-size:16px!important} に勝つため !important＋高詳細度で指定 */
  font-size: 20px !important;
}

/* Outline */
#outline-wrap { flex: 1; overflow-y: auto; padding: 24px 32px; background: var(--bg); }

/* ── エクスポートドロップダウン ── */
#export-wrap { position: relative; }
#btn-export-menu {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 9px; cursor: pointer;
  font-size: 14px; color: var(--text-sub);
}
#btn-export-menu:hover { color: var(--text); background: var(--bg2); }
#export-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px; min-width: 168px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3); z-index: 200;
}
#export-dropdown button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; background: none; border: none;
  padding: 7px 10px; font-size: 13px; color: var(--text);
  cursor: pointer; border-radius: 4px; text-align: left;
  font-family: inherit;
}
#export-dropdown button:hover { background: var(--bg3); }
.export-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ── PDF 印刷用 CSS ── */
@media print {
  header, aside, #outline-wrap, #zoom-controls,
  #node-input-wrap, #pen-assist-bar, #icon-picker, #help-modal,
  #ctx-menu, #ctx-submenu, #export-wrap { display: none !important; }
  #main { display: block !important; height: 100vh !important; overflow: visible !important; }
  #canvas-wrap {
    position: fixed !important; inset: 0 !important;
    overflow: visible !important; background: white !important;
  }
  #mindmap-svg { width: 100vw !important; height: 100vh !important; }
}

/* ── ヘルプボタン ── */
#btn-help {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 50%; width: 26px; height: 26px;
  color: var(--text-sub); font-size: 13px; font-weight: bold;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#btn-help:hover { color: var(--text); background: var(--bg2); }

/* ── ヘルプモーダル ── */
#help-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
}
#help-modal.hidden { display: none !important; }
#help-content {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; width: 480px; max-width: 95vw;
  max-height: 85vh; display: flex; flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
#help-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border);
}
#help-header h3 { font-size: 15px; color: var(--text); margin: 0; }
#btn-help-close {
  background: none; border: none; color: var(--text-sub);
  font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 4px;
}
#btn-help-close:hover { background: var(--bg3); color: var(--text); }
#help-body { overflow-y: auto; padding: 12px 20px 20px; }

.shortcut-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.shortcut-table th {
  text-align: left; color: var(--text-sub); font-weight: normal;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 4px 8px; border-bottom: 1px solid var(--border);
}
.shortcut-table td { padding: 5px 8px; color: var(--text); vertical-align: middle; }
.shortcut-table .section-row td {
  color: var(--accent); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 10px 8px 4px; border-bottom: 1px solid var(--border);
}
.shortcut-table tr:not(.section-row):hover td { background: var(--bg3); border-radius: 4px; }

kbd {
  display: inline-block;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px; font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace;
  color: var(--text); white-space: nowrap;
}

/* ── アイコンピッカー（ノード付近に動的配置） ── */
#icon-picker {
  position: fixed;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 400; width: 272px;
}
#icon-picker-header {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px; font-size: 12px; color: var(--text-sub);
}
#icon-picker-clear {
  margin-left: auto;
  font-size: 11px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-sub); cursor: pointer; padding: 2px 8px;
}
#icon-picker-clear:hover { color: var(--text); }
#icon-picker-close {
  font-size: 13px; background: none; border: none;
  color: var(--text-sub); cursor: pointer; padding: 2px 4px;
  border-radius: 4px;
}
#icon-picker-close:hover { background: var(--bg3); }
#icon-picker-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px;
}
.icon-btn {
  font-size: 18px; background: none; border: 1px solid transparent;
  border-radius: 6px; cursor: pointer; padding: 4px 2px;
  text-align: center; line-height: 1.3; transition: background 0.1s;
}
.icon-btn:hover { background: var(--bg3); border-color: var(--border); }
.icon-btn.selected { background: var(--bg3); border-color: var(--accent); }

/* ── プロジェクト並び替えハンドル ── */
#project-list li .proj-drag-handle {
  color: var(--text-sub); font-size: 12px; cursor: grab;
  opacity: 0; transition: opacity 0.1s; flex-shrink: 0;
  padding: 0 2px; user-select: none;
}
#project-list li:hover .proj-drag-handle { opacity: 0.6; }
#project-list li .proj-drag-handle:hover { opacity: 1; color: var(--text); }

/* ── D&D ドラッグ状態 ── */
#project-list li.proj-dragging {
  opacity: 0.45; cursor: grabbing;
}

/* ── 並び替えドロップインジケーター ── */
#project-list li.proj-drop-before {
  border-top: 2px solid var(--accent);
}
#project-list li.proj-drop-after {
  border-bottom: 2px solid var(--accent);
}
.group-drop-target {
  background: rgba(56, 139, 253, 0.18) !important;
  background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
  outline: 1px dashed var(--accent);
  border-radius: 4px;
}

/* ── グループ追加ボタン ── */
#btn-new-group {
  width: 100%; background: none; border: 1px dashed var(--border);
  border-radius: 6px; color: var(--text-sub);
  padding: 6px; font-size: 12px; cursor: pointer; margin-top: 4px;
}
#btn-new-group:hover { border-color: var(--accent); color: var(--accent); }

/* ── グループセクションヘッダー ── */
.group-header {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 4px; cursor: pointer;
  color: var(--text-sub); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  user-select: none; margin-top: 4px;
}
.group-header:hover { background: var(--bg3); color: var(--text); }
.group-toggle { font-size: 9px; flex-shrink: 0; width: 10px; }
.group-name { flex: 1; }
.group-badge {
  background: var(--bg3); border-radius: 10px;
  padding: 1px 6px; font-size: 10px; color: var(--text-sub); flex-shrink: 0;
}
.group-body { padding-left: 14px; }

/* 未分類セクション */
.group-header.ungrouped { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }

/* ── コンテキストメニュー ── */
#ctx-menu, #ctx-submenu {
  position: fixed; z-index: 300;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px; min-width: 170px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.ctx-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 4px;
  font-size: 13px; color: var(--text); cursor: pointer;
  white-space: nowrap;
}
.ctx-item:hover { background: var(--bg3); }
.ctx-item.danger { color: var(--danger); }
.ctx-item.muted  { color: var(--text-sub); }
.ctx-arrow { margin-left: auto; font-size: 10px; color: var(--text-sub); }
.ctx-separator { height: 1px; background: var(--border); margin: 4px 0; }

/* ── モバイル最適化 ── */

/* タッチ操作でのスクロール干渉を防ぐ */
#mindmap-svg { touch-action: none; }

/* ── モバイルアクションバー ── */
#mobile-bar {
  display: none; /* デスクトップでは非表示 */
}

@media (max-width: 768px) {
  /* ビュー切替：テキスト→アイコン */
  #view-toggle .btn-text { display: none; }
  #view-toggle .btn-icon { display: inline; font-size: 16px; line-height: 1; }
  #view-toggle button { padding: 5px 10px; }

  /* ドロワーをオーバーレイ表示に変更 */
  #drawer {
    position: fixed;
    top: 48px; left: 0;
    height: calc(100% - 48px);
    z-index: 50;
    box-shadow: 4px 0 20px rgba(0,0,0,0.25);
  }
  #drawer.closed {
    transform: translateX(-220px);
    box-shadow: none;
  }
  /* ドロワー背景オーバーレイ */
  #drawer-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 49;
  }
  #drawer-overlay.visible { display: block; }

  /* トップバー：一部要素を非表示 */
  #save-status { display: none; }
  #btn-help    { display: none; }

  /* プロジェクト名のフォント調整 */
  #project-name { font-size: 13px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* キャンバスの下部余白（アクションバー分） */
  #canvas-wrap { padding-bottom: 0; }
}

/* フッター編集メニュー：狭い画面 or タッチ端末（iPad mini 横向き含む）で表示・機能 */
@media (max-width: 768px), (pointer: coarse) {
  /* 画面下に重なるものの高さ。数字を1箇所にまとめ、ズームやタブの位置をここから計算する。
     バラバラに書くと、片方だけ直して他方が隠れたままになる（実際にシートタブがそうなっていた）。 */
  :root {
    --mobile-bar-h: calc(56px + env(safe-area-inset-bottom));
    --sheet-tabs-h: 46px;
  }

  /* P4: シートタブはページの流れの中で最下部にあるので、そのままだと
     位置固定のアクションバー（z-index:150）の裏に完全に隠れる。
     実測: タブ 587〜632 / バー 576〜632。

     **余白で持ち上げるだけでは足りない。** 流れの下端（100vh 由来）と
     position:fixed の下端（見えている領域）は、アドレスバーの開閉でズレるため。
     上の dvh でその差はほぼ無くなるが、対応していない環境でも崩れないよう、
     タブ自身もアクションバーと**同じ基準（画面の下端）**に貼り付ける。
     こうすると2つのバーは常に隣り合い、構造的に重なりようがない。 */
  #editor-screen .sheet-tabs {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--mobile-bar-h);
    z-index: 149;                 /* アクションバー(150)のすぐ下に置く */
    height: var(--sheet-tabs-h);
    box-sizing: border-box;
    margin-bottom: 0;
  }

  /* タブを流れから外したぶん、キャンバスが下へ伸びる。中央寄せの計算が
     タブの帯まで使ってしまうので、その高さを空けておく。
     （アクションバーのぶんは従来どおり空けていない＝重ねる扱い） */
  #editor-screen #canvas-wrap { padding-bottom: var(--sheet-tabs-h); }

  /* ズームコントロールはアクションバーとシートタブの両方を避ける */
  #zoom-controls { bottom: calc(var(--mobile-bar-h) + var(--sheet-tabs-h) + 8px); }

  /* ── モバイルアクションバー ── */
  #mobile-bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 56px;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    padding: 6px 8px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    gap: 5px;
    z-index: 150;
  }
  #mobile-bar button {
    flex: 1;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-sub);
    font-size: 11px;
    line-height: 1.2;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s, background 0.1s;
    -webkit-tap-highlight-color: transparent;
  }
  #mobile-bar button .mb-icon { font-size: 16px; line-height: 1; }
  #mobile-bar button .mb-label { font-size: 10px; }

  /* 元に戻すボタンは常時アクティブ */
  #mb-undo, #mb-multiselect { opacity: 1 !important; pointer-events: auto !important; }

  /* ノード選択中：全ボタンをアクティブ化 */
  #mobile-bar.has-selection button {
    opacity: 1;
    pointer-events: auto;
    color: var(--text);
  }
  #mb-delete:hover { color: var(--danger) !important; background: color-mix(in srgb, var(--danger) 12%, var(--bg3)); }

  /* ノード入力欄のフォントサイズ（iOSズーム防止: 16px以上） */
  #node-input { font-size: 16px !important; }

  /* タッチターゲット最小44px */
  .node-toggle .toggle-circle { r: 11; }
}

/* ── 画像ライトボックス ── */
#image-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 600;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; cursor: pointer;
}
#image-lightbox.hidden { display: none !important; }
#image-lightbox-img {
  max-width: 90vw; max-height: 76vh;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  object-fit: contain; cursor: default;
  display: block;
}
#image-lightbox-actions {
  display: flex; gap: 10px; cursor: default;
}
#image-lightbox-actions button {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff; border-radius: 8px;
  padding: 8px 18px; font-size: 13px; cursor: pointer;
  font-family: inherit;
}
#image-lightbox-actions button:hover { background: rgba(255,255,255,0.28); }
#image-lb-delete:hover { background: rgba(248,81,73,0.45) !important; }

/* ノード画像サムネイル */
.node-image-thumb { cursor: pointer; }
.node-group.drag-over .node-rect {
  stroke: var(--accent) !important;
  stroke-width: 3 !important;
  stroke-dasharray: 6, 3;
}

/* ── ノードコンテキストメニュー ── */
#node-ctx-menu {
  position: fixed; z-index: 400;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px; min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
#node-ctx-menu .ctx-item { padding: 7px 12px; }
#node-ctx-menu .ctx-item.danger { color: var(--danger); }
#node-ctx-menu .ctx-item.disabled {
  color: var(--text-sub); opacity: 0.45;
  pointer-events: none; cursor: default;
}

/* ── 境界線の選択・操作ボタン ── */
.boundary-selected .boundary-rect {
  stroke-width: 2.5 !important;
  stroke-dasharray: none !important;
}
.boundary-del-circle {
  fill: var(--danger); opacity: 0.9; cursor: pointer;
}
.boundary-edit-circle {
  fill: var(--accent); opacity: 0.9; cursor: pointer;
}
.boundary-del-text {
  fill: #fff; font-size: 11px; font-weight: bold;
  font-family: -apple-system, sans-serif;
  pointer-events: none; user-select: none;
}

/* ── サマリーインライン入力 ── */
#summary-input-wrap {
  position: fixed; z-index: 500;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  display: flex; flex-direction: column; gap: 8px;
  min-width: 210px;
}
#summary-input-wrap.hidden { display: none !important; }
.summary-input-label { font-size: 11px; color: var(--text-sub); }
#summary-input {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 6px; color: var(--text);
  padding: 6px 10px; font-size: 13px; outline: none; width: 100%;
  font-family: inherit;
}
#summary-input:focus { border-color: var(--accent); }
.summary-input-actions { display: flex; gap: 6px; justify-content: flex-end; }
.summary-input-actions button {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text);
  padding: 4px 14px; font-size: 12px; cursor: pointer;
}
#summary-input-ok { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
#summary-input-ok:hover { opacity: 0.85; }
.hidden { display: none !important; }

/* ── 関連線モードヒント ── */
#relation-mode-hint {
  position: fixed; top: 56px; left: 50%; transform: translateX(-50%);
  z-index: 450;
  background: var(--bg2); border: 1px solid var(--accent);
  border-radius: 20px; padding: 7px 16px;
  font-size: 13px; color: var(--text);
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  white-space: nowrap;
}
#relation-mode-hint.hidden { display: none !important; }
#relation-mode-cancel {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-sub);
  padding: 3px 10px; font-size: 12px; cursor: pointer;
}
#relation-mode-cancel:hover { color: var(--text); }

/* ── 関連線プロパティパネル ── */
#relation-panel {
  position: fixed; z-index: 450;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  display: flex; flex-direction: column; gap: 8px;
  min-width: 200px;
}
#relation-panel.hidden { display: none !important; }
.rel-panel-title { font-size: 11px; color: var(--text-sub); font-weight: 600; }
.rel-panel-arrows {
  display: flex; gap: 14px; font-size: 12px; color: var(--text);
}
.rel-panel-arrows label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
#rel-label-input {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 6px; color: var(--text);
  padding: 5px 9px; font-size: 12px; width: 100%;
}
#rel-label-input:focus { border-color: var(--accent); outline: none; }
.rel-panel-actions { display: flex; gap: 6px; }
.rel-panel-actions button {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text);
  padding: 4px 0; font-size: 12px; cursor: pointer; flex: 1;
}
.rel-panel-actions button:hover { background: var(--bg); }
#rel-apply { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
#rel-apply:hover { opacity: 0.85; }
#rel-delete { color: var(--danger); }
#rel-delete:hover { background: color-mix(in srgb, var(--danger) 10%, var(--bg3)); }

/* ── 認証待ち・データ読み込み中のお知らせ ── */
#auth-notice {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 600;
  animation: auth-notice-in 0.4s ease-out both;
  animation-delay: 1.5s; /* 1.5秒後に表示（素早い読み込み時はほぼ見えない） */
  opacity: 0;
}
#auth-notice.hidden { display: none !important; }
@keyframes auth-notice-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#auth-notice-inner {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  max-width: 480px; white-space: nowrap;
}
#auth-notice-icon { font-size: 20px; flex-shrink: 0; }
#auth-notice-text {
  display: flex; flex-direction: column; gap: 3px; flex: 1;
  white-space: normal;
}
#auth-notice-text strong {
  font-size: 13px; color: var(--text);
}
#auth-notice-text span {
  font-size: 12px; color: var(--text-sub); line-height: 1.5;
}
#auth-notice-text kbd {
  display: inline-block;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px;
  font-family: monospace; font-size: 11px; color: var(--text);
}
#auth-notice-close {
  background: none; border: none; color: var(--text-sub);
  font-size: 14px; cursor: pointer; padding: 2px 4px;
  border-radius: 4px; flex-shrink: 0;
}
#auth-notice-close:hover { background: var(--bg3); color: var(--text); }

/* ── コラボレーション UI ── */
#collab-bar {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
#collab-bar.hidden { display: none !important; }

.collab-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.collab-dot--connected { background: var(--green); }
.collab-dot--error     { background: var(--danger); }
.collab-dot--off       { background: transparent; }

#collab-presence-bar {
  display: flex; align-items: center; gap: 4px;
}
.collab-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  cursor: default; flex-shrink: 0;
  border: 2px solid transparent;
  transition: transform 0.1s;
}
.collab-avatar:hover { transform: scale(1.15); }
.collab-avatar.self  { border-color: var(--text); }

#collab-name-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 700;
  display: flex; align-items: center; justify-content: center;
}
#collab-name-modal.hidden { display: none !important; }
#collab-name-content {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; padding: 32px 28px; width: 320px; max-width: 90vw;
  text-align: center;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.collab-name-icon { font-size: 36px; }
#collab-name-content h3 { font-size: 16px; color: var(--text); margin: 0; }
#collab-name-content p  { font-size: 13px; color: var(--text-sub); margin: 0; line-height: 1.5; }
#collab-name-input {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 8px; color: var(--text);
  padding: 8px 12px; font-size: 14px; text-align: center;
}
#collab-name-input:focus { border-color: var(--accent); outline: none; }
#collab-name-ok {
  background: var(--accent-strong); color: #fff; border: none;
  border-radius: 8px; padding: 10px 24px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  align-self: center;
}
#collab-name-ok:hover { opacity: 0.85; }

/* ── Pencil編集補助バー ── */
#pen-assist-bar {
  position: absolute;
  z-index: 200;
  display: flex;
  gap: 6px;
  padding: 6px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
#pen-assist-bar.hidden { display: none; }
#pen-assist-bar button {
  min-width: 40px;
  height: 40px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
#pen-assist-bar button:active { background: var(--accent); }
.pen-grip {
  display: flex; align-items: center; justify-content: center;
  min-width: 28px; height: 40px;
  color: var(--text-sub); font-size: 18px; line-height: 1;
  cursor: move; user-select: none;
  touch-action: none;   /* ドラッグ中に画面をスクロールさせない */
}

/* タッチ端末：ノードのコンテキストメニューをタップしやすく（フッターの ⋯ から開く） */
@media (pointer: coarse) {
  #node-ctx-menu { max-height: 60vh; overflow-y: auto; }
  #node-ctx-menu .ctx-item { min-height: 44px; padding: 12px 16px; }
}

/* 関連線ハンドルのタッチ用当たり判定（透明・大きめ） */
.relation-handle-hit { fill: transparent; stroke: none; cursor: grab; }

/* フッター「複数選択」モードON時のハイライト */
#mb-multiselect.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--bg3));
  border-color: var(--accent);
}

/* ── Drive 接続まわり（P2） ── */
/* 既存のモーダル（#help-modal）と同じ作りに揃えてある。 */
.connection-area {
  display: flex; align-items: center; gap: 8px;
  margin-left: 8px;
}
.conn-button {
  background: var(--bg3); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 10px; font-size: 12px; cursor: pointer;
  white-space: nowrap;
}
.conn-button:hover { background: var(--bg2); border-color: var(--accent); }

/* 「Drive に接続」はトップページの主操作。文字は読めていたが（実測 10.55）、
   下部の補助ボタンと同じ見た目だったため「押せる操作」に見えなかった。
   接続のときだけ濃くする。サインアウトは日常の操作ではないので控えめのまま。 */
.conn-button--primary {
  background: var(--accent-strong); color: #fff; border-color: var(--accent-strong);
}
.conn-button--primary:hover { filter: brightness(1.12); }
.conn-notice {
  font-size: 11px; color: var(--text-sub);
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 接続断は見落とされてはいけない（保存されていないことを知らせるため）ので、
   ヘッダー内ではなく画面上部に横断して出す。 */
.conn-banner--offline {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 600;
  background: var(--danger-strong); color: #fff;
  font-size: 13px; text-align: center; padding: 6px 12px;
}

/* ── 競合の3択（P2） ── */
/* 閉じる手段は用意しない。選ばずに閉じると保存されないまま編集が続くため。 */
.conflict-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 700;
  display: flex; align-items: center; justify-content: center;
}
.conflict-box {
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  width: 420px; max-width: 92vw;
  padding: 20px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
  display: flex; flex-direction: column; gap: 12px;
}
.conflict-box p { margin: 0; font-size: 14px; }
.conflict-summary {
  white-space: pre-line;          /* 「こちら / 向こう」を改行で並べる */
  font-size: 12px; color: var(--text-sub);
  background: var(--bg3); border-radius: 8px; padding: 10px 12px;
}
.conflict-box button {
  background: var(--bg3); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 13px; cursor: pointer; text-align: left;
}
/* ホバーで白文字にしていたが、--accent2 は明るいテーマでは「薄い背景色」なので
   載せた瞬間に読めなくなっていた（実測 1.11〜1.22）。競合の3択は選択肢を読ませる
   場面なので、文字色は動かさず地の明るさと枠だけで示す。 */
.conflict-box button:hover { background: var(--bg2); border-color: var(--accent); }

/* ══ P4: トップページ ＋ 下部シートタブ ══════════════════════ */
/* サイドバーを廃止し、プロジェクトの切り替えはトップページで行う。
   #drawer 系の規則は要素ごと無くなったので効かない（残骸だが害は無い）。 */

/* 戻るボタン（旧ハンバーガーの位置） */
#btn-home {
  background: none; border: none; color: var(--text);
  font-size: 18px; line-height: 1; cursor: pointer;
  padding: 6px 10px; border-radius: 6px;
}
#btn-home:hover { background: var(--bg3); }

/* トップページでは、編集画面用の操作を隠す */
#topbar.topbar--home #btn-home,
#topbar.topbar--home #view-toggle,
#topbar.topbar--home #export-wrap,
#topbar.topbar--home #save-status,
#topbar.topbar--home #collab-bar { display: none; }

#home-screen { flex: 1; overflow: auto; background: var(--bg); }
#home-inner {
  max-width: 880px; margin: 0 auto; padding: 24px 20px 48px;
  display: flex; flex-direction: column; gap: 16px;
}

/* --accent2 はテーマによって意味が違う。暗いテーマでは濃い青だが、明るいテーマでは
   「薄い背景色」として定義されている（light #ddf4ff / claude #fef0e8 / flat #e6e9ec）。
   そこへ白文字を載せていたため、実測でコントラスト比 1.22（読める目安は 4.5 以上）と
   ほぼ見えず、押せないボタンのように見えていた。
   白文字を載せるなら、どのテーマでも濃い --accent を使う。 */
.home-new {
  align-self: flex-start;
  background: var(--accent-strong); color: #fff;
  border: none; border-radius: 8px;
  padding: 10px 16px; font-size: 14px; cursor: pointer;
}
.home-new:hover { filter: brightness(1.12); }

.home-list {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.home-card {
  display: flex; align-items: stretch;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.home-card--current { border-color: var(--accent); }
.home-card__open {
  flex: 1; text-align: left; background: none; border: none;
  color: var(--text); cursor: pointer; padding: 14px 14px;
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.home-card__open:hover:not(:disabled) { background: var(--bg3); }
.home-card__open:disabled { cursor: not-allowed; opacity: 0.5; }
.home-card__name {
  font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-card__count { font-size: 12px; color: var(--text-sub); }

.home-card__actions {
  display: flex; flex-direction: column; justify-content: center;
  border-left: 1px solid var(--border);
}
.home-card__btn {
  background: none; border: none; color: var(--text-sub);
  cursor: pointer; padding: 6px 10px; font-size: 13px;
}
.home-card__btn:hover { color: var(--text); background: var(--bg3); }
.home-card__btn--del:hover { color: var(--danger); }

.home-empty { color: var(--text-sub); font-size: 13px; margin: 0; }

#home-footer {
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
#home-footer button {
  background: var(--bg3); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 12px; font-size: 13px; cursor: pointer;
}
#home-footer button:hover { border-color: var(--accent); }

/* ── 編集画面 ── */
/* サイドバーが無いので、キャンバスが全幅になる。下にタブの帯が入る。 */
#editor-screen { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#editor-screen #canvas-wrap { flex: 1; min-height: 0; }

.sheet-tabs {
  display: flex; align-items: stretch; gap: 4px;
  padding: 4px 8px;
  background: var(--bg2); border-top: 1px solid var(--border);
  overflow-x: auto;
}
.sheet-tab {
  display: flex; align-items: center;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
  flex: 0 0 auto;
}
.sheet-tab--current { background: var(--bg); border-color: var(--accent); }
.sheet-tab__name {
  background: none; border: none; color: var(--text);
  padding: 8px 10px; font-size: 13px; cursor: pointer;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 改名の起点。ダブルクリックはタッチ端末で押せないので、押せるものを出す。
   現在のタブにだけ出す（全タブに出すと横幅が足りない）。 */
.sheet-tab__rename {
  background: none; border: none; color: var(--text-sub);
  cursor: pointer; padding: 0 6px 0 2px; line-height: 1;
  display: inline-flex; align-items: center;
}
.sheet-tab__rename:hover { color: var(--text); }
.sheet-tab__del {
  background: none; border: none; color: var(--text-sub);
  cursor: pointer; padding: 0 8px 0 0; font-size: 13px;
}
.sheet-tab__del:hover { color: var(--danger); }
.sheet-tab--add {
  background: none; border-style: dashed; color: var(--text-sub);
  padding: 8px 12px; font-size: 13px; cursor: pointer;
}
.sheet-tab--add:hover { color: var(--text); border-color: var(--accent); }

/* 接続 UI はトップページの中に置いたので、縦に積む */
#home-inner .connection-area { flex-direction: column; align-items: flex-start; margin-left: 0; }

/* 旧サイドバー用の幅指定（#btn-pick-folder / #btn-import が width:100%）が
   トップページでは効きすぎるので、ここで打ち消す。 */
#home-footer #btn-pick-folder,
#home-footer #btn-import { width: auto; }

/* ── P4: 接続画面（オンラインでは Drive 必須）── */
#gate-screen { flex: 1; overflow: auto; background: var(--bg); }
/* 中央に置く。アプリに入る前の唯一の画面なので、ここだけは「読み物」として組む。 */
#gate-inner {
  min-height: 100%;
  max-width: 480px; margin: 0 auto; padding: 48px 20px;
  display: flex; flex-direction: column; gap: 24px;
  align-items: center; justify-content: center;
}
.gate-card {
  width: 100%;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center;
}
.gate-mark { font-size: 40px; line-height: 1; margin-bottom: 4px; }
#gate-title { font-size: 20px; margin: 0; color: var(--text); }
#gate-desc  { font-size: 13px; margin: 0 0 8px; color: var(--text-sub); line-height: 1.8; }

/* Google の標準サインインボタンに寄せる。理由は設計書 D2:
   ①見慣れた形は押せると分かる（今回の指摘の根は「押せる操作に見えない」ことだった）
   ②白地なのでテーマのトークンに依存せず必ず読める
     ＝ --accent2 に白文字を載せて読めなくなった欠陥クラスから構造的に外れる。 */
.gate-connect {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; color: #1f1f1f;
  border: 1px solid #dadce0; border-radius: 8px;
  padding: 12px 20px 12px 16px;
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(60,64,67,0.25);
}
.gate-connect:hover  { background: #f7f8f8; }
.gate-connect:active { background: #eef0f1; }
.gate-connect:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gate-connect__g { width: 18px; height: 18px; flex: none; }
.gate-leftover {
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.gate-leftover p { font-size: 12px; color: var(--text-sub); margin: 0; line-height: 1.7; }
.gate-export {
  background: var(--bg3); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 12px; font-size: 12px; cursor: pointer;
}
.gate-export:hover { border-color: var(--accent); }

/* ── P5a: 待機表示 ── */
/* 通信で待たせるあいだ、進んでいることを見せる（設計書 D3）。 */
.busy-backdrop {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
}
.busy-box {
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 28px; min-width: 220px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.busy-spinner {
  width: 24px; height: 24px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: busy-spin 0.8s linear infinite;
}
.busy-label { font-size: 13px; text-align: center; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
/* 動きを減らす設定の人には回さない（目が回る／酔うため）。 */
@media (prefers-reduced-motion: reduce) {
  .busy-spinner { animation: none; }
}

/* ── P5a: 確認中の入力止め ── */
/* 控えを先に描いているあいだ、編集させない（設計書 D5）。
   画面は覆い隠さない——隠したら「速く出した」意味が無くなる。
   透明でもポインタは止まる。キーボードは js/ui/edit-lock.js が捕捉段で止める。 */
.edit-lock {
  position: fixed; inset: 0; z-index: 750;
  background: transparent;
  cursor: progress;
  display: flex; align-items: flex-start; justify-content: center;
  /* ヘッダー（実測 48px）の下に出す。上端に置くとヘッダーの文字と重なって
     「ヘッダーの一部」に見え、何が起きているのか読み取れない（実機で確認）。 */
  padding-top: 56px;
}
.edit-lock__label {
  background: var(--bg2); color: var(--text-sub);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 14px; font-size: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}