/* ============================================================
   Laser Studio — メタル加工 仕上がりシミュレーター
   デザイン: 先進的なダークUI(金属と虹色加工が主役)+徹底したシンプルさ
   完全オフライン動作(Webフォント・CDN不使用)
   ============================================================ */

:root {
  color-scheme: dark;
  /* 面の階層: アプリ地 → パネル → 押せる面/入力 → hover面 */
  --bg0: #0f1115;
  --bg1: #171a20;
  --bg2: #1f242c;
  --bg3: #262c36;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --tx: #f0f2f5;
  --tx-dim: #a8b0bb;
  --tx-note: #8a93a0;   /* 読ませる注釈(11-12px)。全面でAA実測合格 */
  --tx-faint: #6b7480;  /* disabled・placeholder・装飾グリフ専用(本文使用禁止) */
  --brand: #4cc2ff;     /* レーザー光のシアン: リンク・フォーカス・選択 */
  --brand-ink: #0a0d10; /* brand/iri 地の上の文字は必ずこれ(白文字はAA違反) */
  --iri: linear-gradient(120deg, #5ee0ff, #7c8cff, #c77dff, #ff7ac3); /* 虹色の帯 = CTA・ロゴ・rainbowスウォッチ専用 */
  --ok: #46d19a;
  --danger: #ff6f6f;
  --warn: #ffc861;
  --stage: #14171c;     /* プレビューの暗いスタジオ */
  --font-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
  --font-serif: var(--font-jp); /* 明朝廃止(互換のため変数は残す) */
  --font-mono: "Consolas", "Courier New", monospace; /* 数値専用 */
  /* 文字スケール */
  --fs-note: 11px;      /* 添え字(単位・バッジ) */
  --fs-body-sub: 13px;  /* 読ませる案内 */
  --fs-s: 12px;     /* ボタン・補助 */
  --fs-m: 13px;     /* 本文 */
  --fs-h: 15px;     /* 見出し */
  --radius: 10px;    /* 面 */
  --radius-s: 8px;   /* ボタン */
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --edge: rgba(255, 255, 255, 0.30); /* 計器型タブの外郭(line-strongとベタ白の中間段) */
  /* ---- 互換エイリアス(旧トークン参照をダークへ一括で倒す) ---- */
  --paper: var(--bg0);
  --panel: var(--bg1);
  --panel2: var(--bg3);
  --ink: var(--tx);
  --ink-dim: var(--tx-dim);
  --ink-faint: var(--tx-note);
  --accent: var(--brand);
  --accent-dark: var(--brand);
  --accent-pale: rgba(76, 194, 255, 0.12);
  --ai: var(--brand);
  --warn-bg: rgba(255, 200, 97, 0.10);
  --warn-line: rgba(255, 200, 97, 0.35);
  --warn-ink: var(--warn);
  --warn-strong: var(--warn);
  /* ---- 動きの規律(精密機械): 直線的に速く動き、最後にピタッと止まる ----
     --dur-flick: 状態のカチッ / --dur-move: 小物の作動 / --dur-stage: 大物の給紙 / --dur-needle: 計器の針
     --e-snap: 送り→急減速→停止 / --e-stamp: 捺印のみ許すオーバーシュート(済印・CTAアーム専用)
     走査線(sweep=読込中)は「処理中」の意味があるので linear のまま */
  --dur-flick: 80ms;
  --dur-move: 140ms;
  --dur-stage: 220ms;
  --dur-needle: 320ms;
  --e-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
  --e-stamp: cubic-bezier(0.2, 1.4, 0.3, 1);
}

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

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-jp);
  font-size: 13px;
  line-height: 1.65;
  overflow: hidden;
}


#app { position: relative; z-index: 1; height: 100vh; display: flex; flex-direction: column; }

button { font-family: inherit; cursor: pointer; color: inherit; }
input, select { font-family: inherit; color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ai);
  outline-offset: 1px;
}
/* ベタ塗り/濃色ボタン上は藍リングが埋もれるため、白+墨の二重リングにする */
.accent-btn:focus-visible, .mini-btn.strong:focus-visible,
#btnPeekBlank.active:focus-visible, .face-toggle .ft-btn.active:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(76, 194, 255, 0.45);
}

/* 角丸の規律はファイル末尾に集約(後勝ちで規律を強制。ここに置くと個別宣言に負ける) */

/* ============ ヘッダー ============ */
#header {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  background: var(--bg1);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* ロゴ = 虹色タイル(製品の魅力をそのまま記号に) */
.brand-mark {
  width: 26px; height: 26px; flex: 0 0 auto;
  background: var(--iri);
  border: none;
  border-radius: 7px;
  position: relative;
}
.brand-mark span { display: none; }
.brand-text h1 { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.v-sep { width: 1px; height: 20px; background: var(--line); margin: 0 3px; }
/* 「…」メニュー(新規/保存/開く/使い方を収納) */
.menu-wrap { position: relative; }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 100;
  min-width: 210px;
  background: var(--bg1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
  display: flex; flex-direction: column;
}
.menu-pop button {
  border: none; background: transparent; width: 100%; text-align: left;
  min-height: 44px; padding: 10px 14px; border-radius: var(--radius-s);
  font-size: 13px; color: var(--tx);
}
.menu-pop button:hover { background: var(--bg3); }
.save-status { font-size: var(--fs-note); color: var(--ink-faint); white-space: nowrap; align-self: center; }
.save-status:empty { display: none; }

/* ボタン共通 */
.ghost-btn, .mini-btn, .chip-btn {
  border: 1px solid var(--line-strong);
  background: var(--bg2);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: var(--fs-s);
  transition: background-color var(--dur-flick) var(--e-snap), border-color var(--dur-flick) var(--e-snap), color var(--dur-flick) var(--e-snap);
}
/* 無transitionのまま散在していた操作子も同じ接点の文法に編入 */
.step-btn, .layer-ctl button, .item-info-pop .ii-close, .add-float-btn,
.status-next, .help-fab, .export-done .ed-x, .help-close,
#toast .toast-action, .face-toggle .ft-btn {
  transition: background-color var(--dur-flick) var(--e-snap), border-color var(--dur-flick) var(--e-snap), color var(--dur-flick) var(--e-snap);
}
/* hover=下書き: 入りは即時(触れた瞬間カチッ)、戻りだけ80ms */
.ghost-btn:hover, .mini-btn:hover, .chip-btn:hover, .accent-btn:hover { transition-duration: 0s; }
.ghost-btn:hover, .mini-btn:hover, .chip-btn:hover {
  background: var(--panel2);
  border-color: var(--ink-dim);
}
.ghost-btn:disabled:not(.strong):not(.danger), .mini-btn:disabled:not(.strong):not(.danger), .face-tab:disabled {
  opacity: 1; background: var(--panel2); border-color: var(--line); color: var(--ink-faint); cursor: not-allowed;
}
/* 押せないCTAはCTAではない=朱の資格なし。disabledは全てモノトーンに統一(有効化の瞬間は cta-armed が灰→朱の捺印を担う) */
.accent-btn:disabled, .accent-btn.is-disabled, .mini-btn.strong:disabled { background: var(--bg2); color: var(--tx-faint); border: 1px solid var(--line); box-shadow: none; cursor: not-allowed; }
.accent-btn.is-disabled:hover { filter: none; }
/* 押下フィードバック(タッチでは hover が無いため必須) */
.ghost-btn:active, .mini-btn:active, .chip-btn:active {
  background: var(--bg3);
  border-color: var(--ink-dim);
  transform: translateY(1px);
  transition-duration: 0s;
}
.accent-btn:active { transform: translateY(1px); filter: brightness(0.95); }
.seg-btn:active, .face-tab:active, .finish-btn:active {
  filter: brightness(0.96);
  transform: translateY(1px);
  transition-duration: 0s;
}
.view-tab:active { filter: brightness(0.96); }
.icon-btn { padding: 6px 9px; font-size: 14px; line-height: 1; }
.accent-btn {
  border: none;
  background: var(--iri);
  color: var(--brand-ink);
  border-radius: var(--radius-s);
  padding: 9px 18px;
  font-size: var(--fs-m);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(124, 140, 255, 0.30);
  transition: filter var(--dur-flick) var(--e-snap);
}
.accent-btn:hover { filter: brightness(1.08); }
/* CTAが押せるようになった瞬間の一度きり「捺印」(--e-stamp の許可事例) */
@keyframes ctaArm { from { transform: scale(1.12); } to { transform: scale(1); } }
.cta-armed { animation: ctaArm 200ms var(--e-stamp); }
.mini-btn { padding: 5px 10px; font-size: var(--fs-s); }
.mini-btn.strong { border-color: transparent; background: var(--brand); color: var(--brand-ink); }
.mini-btn.strong:hover { background: #6ccbff; }
.mini-btn.active { border-color: rgba(76,194,255,0.45); color: var(--brand); background: rgba(76,194,255,0.12); font-weight: 700; }
/* 選択=捺印: 事実はにじまない。クラス付与は即着、解除だけ80msで戻る */
.seg-btn.active, .face-tab.active, .view-tab.active, .finish-btn.active,
.layer-item.selected, .mini-btn.active, #btnPeekBlank.active, .face-toggle .ft-btn.active {
  transition-duration: 0s;
}
/* 破壊的操作は静止時から見分けがつくように */
.mini-btn.danger { color: var(--danger); border-color: rgba(255,111,111,0.35); background: transparent; }
.mini-btn.danger:hover { border-color: var(--danger); color: var(--danger); background: rgba(255,111,111,0.12); }
.mini-btn.danger:active { background: rgba(255,111,111,0.12); border-color: var(--danger); }
#btnDel { margin-left: auto; }

/* 復元バナー */
#restoreBar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-line);
  font-size: var(--fs-s); color: var(--warn-ink);
}

/* ============ メインレイアウト ============ */
#main { flex: 1 1 auto; display: flex; min-height: 0; }

/* ============ 左パネル ============ */
#panel {
  flex: 0 0 336px;
  overflow-y: auto;
  padding: 0;
  border-right: 1px solid var(--line);
  background-color: var(--bg1);
}
/* スクロールバー共通(OS白バーの露出防止) */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.22) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }

/* 帳票の「章」: 独立カードではなく、太罫で区切られた一枚の紙の区画 */
/* ページロード一度きりの「帳票発行」: 章が順に上→下へ印字される(--d はHTML側で仕込み済み) */
@keyframes issueSection { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.pgroup {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 14px 16px 18px;
  margin-bottom: 0;
  box-shadow: none;
  animation: issueSection var(--dur-stage) var(--e-snap) backwards;
  animation-delay: calc(var(--d, 0) * 70ms);
}
#viewBar { animation: issueSection 180ms var(--e-snap) backwards; }
#stageFoot { animation: issueSection 180ms var(--e-snap) 420ms backwards; }
.pgroup + .pgroup { border-top: 1px solid var(--line); }
/* 選択中の手順(手順5)を朱で強調 */
.pgroup--active { border-left: 3px solid var(--brand); padding-left: 13px; box-shadow: none; }
.pgroup--active h2 { color: var(--tx); }
.pgroup h2 {
  font-family: var(--font-jp);
  font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1.4;
  color: var(--tx);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 0;
  border-bottom: none;
}
.pnum {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--bg2);
  border: 1px solid var(--line-strong);
  color: var(--brand);
  font-size: 12px; font-weight: 700;
}
.sub-label {
  font-size: var(--fs-s); font-weight: 700; color: var(--ink-dim);
  letter-spacing: 0.08em;
  margin: 16px 0 8px;
}
.sub-label:first-child { margin-top: 0; }
/* 手順5内は罫線で中項目を仕切る(帳票の「細罫=中項目」) */
#finishBody .sub-label { border-top: 1px solid var(--line); padding-top: 12px; }
#finishBody > .sub-label:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.opt-rows .sub-label { margin-bottom: 1px; }
.sub-hint { font-weight: 400; color: var(--ink-faint); font-size: var(--fs-note); margin-left: 4px; }

/* セグメントボタン */
.seg { display: flex; gap: 4px; padding: 4px; background: var(--bg1); border: 1px solid var(--line); border-radius: var(--radius); }
.seg.vertical { flex-direction: column; }
/* 製品が3択(カード / φ200 / φ300)になり横並びだと窮屈なため、狭幅では縦積みにして読みやすく */
@media (max-width: 900px) { #segProduct { flex-direction: column; } }
.seg-btn {
  flex: 1;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--tx-dim);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: var(--fs-m); font-weight: 700;
  position: relative;
  transition: background-color var(--dur-flick) var(--e-snap), border-color var(--dur-flick) var(--e-snap), color var(--dur-flick) var(--e-snap);
}
.seg-btn small { display: block; font-weight: 400; font-size: var(--fs-body-sub); line-height: 1.5; color: var(--tx-note); margin-top: 1px; }
.seg-btn:hover:not(.active) { background: var(--bg3); color: var(--tx); }
.seg-btn.active {
  background: var(--bg3);
  color: var(--tx);
  box-shadow: inset 0 0 0 1px var(--brand);
  border-radius: 8px;
}
.seg-btn.active small { color: var(--tx-dim); }

/* 面タブ */
/* 表/裏: 離散ボタンではなく一体の計器型タブ(view-tabs と同じ文法) */
.face-tabs {
  display: flex; gap: 0; margin-top: 8px;
  border: 1px solid var(--ink); border-radius: var(--radius); overflow: hidden;
}
.face-tab {
  flex: 1; padding: 6px; border-radius: 0;
  border: none; background: var(--bg2);
  color: var(--ink-dim); font-size: var(--fs-s); font-weight: 700;
  transition: background-color var(--dur-flick) var(--e-snap), border-color var(--dur-flick) var(--e-snap), color var(--dur-flick) var(--e-snap);
}
.face-tab + .face-tab { border-left: 1px solid var(--edge); }
.face-tab:focus-visible { outline-offset: -3px; } /* overflow:hidden にクリップされない内側リング */
.face-tab.active:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -3px; box-shadow: none; }
.face-tab:hover:not(:disabled):not(.active) { background: var(--panel2); color: var(--ink); }
.face-tab.active { background: var(--tx); color: var(--bg0); border-color: transparent; }
.face-tab:disabled { cursor: not-allowed; }
.face-note { margin-top: 8px; font-size: var(--fs-body-sub); color: var(--ink-dim); }

/* ドロップゾーン */
/* 帳票の「貼付欄」: 世界共通アップローダー(点線+矢印)ではなく、四隅鉤罫+欄名 */
#dropZone {
  position: relative;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg2);
  padding: 16px 10px 14px;
  text-align: center;
  color: var(--ink-dim);
  cursor: pointer;
  transition: background-color var(--dur-flick) var(--e-snap), border-color var(--dur-flick) var(--e-snap), color var(--dur-flick) var(--e-snap);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
#dropZone strong { font-size: var(--fs-m); color: var(--ink); }
#dropZone span { font-size: var(--fs-note); color: var(--ink-faint); line-height: 1.6; }
#dropZone:hover {
  border-color: var(--ink);
  background-color: var(--panel2); /* 朱はドロップ直前(.drag)にだけ灯す */
}
#dropZone.drag {
  border-style: solid; border-width: 2px; border-color: var(--accent);
  background: var(--accent-pale);
  box-shadow: inset 0 0 0 2px rgba(76,194,255,0.20);
  padding: 17px 9px 13px;
}
#dropZone.drag::after {
  content: "ここで離してアップロード";
  font-size: var(--fs-note); color: var(--accent-dark); font-weight: 700; margin-top: 2px;
}
.dz-icon { color: var(--brand); font-size: 18px; }

.add-row { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.add-row input[type="text"] {
  flex: 1; min-width: 0;
  background: var(--bg2); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 6px 9px; font-size: var(--fs-s);
}
.add-row input[type="text"]:focus { border-color: var(--ai); box-shadow: 0 0 0 2px rgba(76, 194, 255, 0.20); }
.add-row select {
  background: var(--bg2); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 6px 8px; font-size: var(--fs-s);
  flex: 0 1 auto; min-width: 88px;
}
.add-row.samples { flex-wrap: wrap; }
.add-label { font-size: var(--fs-note); color: var(--ink-faint); }
.chip-btn { padding: 4px 12px; font-size: var(--fs-s); }

/* レイヤーリスト: ミニカード羅列ではなく「部品表」— 外枠1本+細罫の行+通し番号 */
#layerList {
  list-style: none; display: flex; flex-direction: column; gap: 0;
  counter-reset: lyr;
  border: 1px solid var(--line-strong);
  background: var(--bg2);
}
#layerList:empty { display: none; }
.layer-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg2);
  cursor: pointer;
  transition: background-color var(--dur-flick) var(--e-snap), border-color var(--dur-flick) var(--e-snap), color var(--dur-flick) var(--e-snap);
}
.layer-item:last-child { border-bottom: none; }
.layer-item::before {
  counter-increment: lyr;
  content: counter(lyr, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint);
  flex: 0 0 auto; min-width: 18px; text-align: right;
}
.layer-item:hover { background: var(--panel2); }
.layer-item.selected {
  background: rgba(76, 194, 255, 0.10);
  box-shadow: inset 3px 0 0 var(--brand);
}
.layer-item.selected::before { color: var(--brand); font-weight: 700; }
.layer-thumb {
  width: 34px; height: 26px; border-radius: 2px; flex: 0 0 auto;
  border: 1px solid var(--line);
  background:
    linear-gradient(45deg, #2c333e 25%, transparent 25%, transparent 75%, #2c333e 75%),
    linear-gradient(45deg, #2c333e 25%, #232932 25%, #232932 75%, #2c333e 75%);
  background-size: 8px 8px; background-position: 0 0, 4px 4px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.layer-thumb img, .layer-thumb canvas { max-width: 100%; max-height: 100%; }
.layer-name {
  flex: 1; min-width: 0; font-size: var(--fs-s); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.layer-finish-dot { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto; border: 1px solid var(--line-strong); }
.dot-rainbow { background: conic-gradient(#e0475f, #e6b23c, #d8d84a, #52c07e, #3f9fd8, #9a6fd0, #e0475f); }
.dot-white { background: #f2f3f5; }
.dot-mirror { background: linear-gradient(135deg, #e8ebef, #8d949e, #d2d7dd); }
.dot-black { background: #17181c; }
.layer-legend {
  display: flex; flex-direction: column; gap: 3px;
  font-size: var(--fs-note); color: var(--ink-dim);
  margin: 0 0 8px; padding: 6px 8px;
  background: var(--panel2);
}
.layer-legend .legend-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.layer-legend .layer-finish-dot { width: 11px; height: 11px; margin-left: 2px; }
.layer-ctl { display: flex; gap: 1px; }
.layer-ctl button {
  width: 22px; height: 22px; border: none; background: transparent;
  color: var(--ink-faint); border-radius: 2px; font-size: 11px; line-height: 1;
}
.layer-ctl button:hover { background: var(--panel2); color: var(--ink); }
.layer-ctl button svg { display: block; margin: auto; }
.empty-note {
  font-size: var(--fs-body-sub); color: var(--tx-dim); line-height: 1.7;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg2);
  padding: 16px 14px;
  text-align: center;
}
.face-badge {
  font-size: var(--fs-note); padding: 1px 8px; border-radius: 2px;
  background: var(--bg3); color: var(--tx); font-weight: 700;
  margin-left: auto;
}

/* 仕上げ選択 */
.finish-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* 非対称リズム: 虹(主役・全幅・大スウォッチ) / 白・黒(2分割) / 鏡面(全幅・長文説明) */
.finish-grid .finish-btn[data-finish="rainbow"],
.finish-grid .finish-btn[data-finish="mirror"] { grid-column: 1 / -1; }
.finish-btn {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  border: 1px solid var(--line);
  background: var(--bg2);
  border-radius: var(--radius);
  padding: 10px;
  font-size: var(--fs-m); font-weight: 700;
  color: var(--tx);
  transition: background-color var(--dur-flick) var(--e-snap), border-color var(--dur-flick) var(--e-snap), color var(--dur-flick) var(--e-snap);
  position: relative;
}
.finish-btn small { font-weight: 400; font-size: var(--fs-body-sub); line-height: 1.5; color: var(--tx-dim); }
.finish-btn:hover:not(.active) { border-color: var(--line-strong); background: var(--bg3); }
.finish-btn.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.finish-btn.active::after {
  content: "✓";
  position: absolute; top: 16px; right: 16px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand); color: var(--brand-ink);
  font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.finish-btn.active small { color: var(--tx-dim); }
.fchip { width: 100%; height: 48px; border-radius: 8px; border: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
.finish-btn[data-finish="rainbow"] .fchip { height: 56px; background: var(--iri); }
.fchip-rainbow { background: var(--iri); }
.fchip-white { background: linear-gradient(180deg, #f6f7f9, #c9ced5); }
.fchip-mirror { background: linear-gradient(155deg, #f0f2f6 0%, #adb4be 35%, #767e8a 50%, #b8bec8 65%, #eaedf2 100%); }
.fchip-black { background: linear-gradient(180deg, #26282e, #0b0c10); }

/* テキスト編集 */
.text-edit .add-row { margin-top: 0; }

/* 配置数値入力: 独立セル羅列ではなく「共有罫の計測表」(外枠1本+内部細罫) */
/* 位置・大きさ・回転は1項目1行(2列だと「回転」行が0°チップ+単位でパネル幅を超えてはみ出す) */
.xform-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-bottom: 8px; border: 1px solid var(--line-strong); background: var(--bg2); }
.xform-grid label {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-note); color: var(--ink-dim);
  background: var(--bg2); border: none;
  border-radius: 0; padding: 6px 8px;
  white-space: nowrap; /* ラベル文字を縦に折り返さない */
}
.xform-grid label:not(:last-child) { border-bottom: 1px solid var(--line); }
.xform-grid input {
  flex: 1 1 auto; width: auto; min-width: 4ch; background: transparent; border: none;
  font-family: var(--font-mono); font-size: var(--fs-s); text-align: right;
}
.xform-grid input:focus-visible { outline: none; } /* リングは label 側に出す(二重枠回避) */
.xform-grid label:focus-within {
  outline: 2px solid var(--ai);
  outline-offset: -2px; /* 共有罫の内側に収める */
  box-shadow: inset 0 0 0 2px rgba(76, 194, 255, 0.15);
}
.unit { font-size: var(--fs-note); color: var(--ink-faint); }
/* ◀▶ ステッパー(片手微調整) */
.step-btn {
  flex: 0 0 auto; width: 22px; min-height: 26px; padding: 0;
  border: 1px solid var(--line-strong); background: var(--bg2); color: var(--tx-dim);
  border-radius: 3px; font-size: 10px; line-height: 1; cursor: pointer;
  touch-action: none; user-select: none;
}
.step-btn:hover { background: var(--panel2); color: var(--ink); }
.step-btn:active { background: var(--bg3); transform: translateY(1px); transition-duration: 0s; } /* 押下=沈み込み統一 */
/* 1ティックごとの「朱で記帳→乾く」: 180ms保持して瞬時に墨へ(補間なし) */
@keyframes valTick { from { color: var(--accent-dark); } to { color: inherit; } }
.val-tick { animation: valTick 180ms steps(1, end); }
.xform-grid label #btnRotReset { flex: 0 0 auto; padding: 2px 6px; font-size: var(--fs-note); }
@media (max-width: 900px) { .step-btn { min-width: 38px; width: auto; min-height: 44px; } .xform-grid label, .crop-grid label { padding-top: 4px; padding-bottom: 4px; } }
/* 実寸表示 */
.size-real { font-size: var(--fs-note); color: var(--ink-dim); margin: -2px 0 8px; font-family: var(--font-mono); }
/* 回転ダイヤル */
.rot-dial-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
@media (hover: hover) and (pointer: fine) { .rot-dial-row { display: none; } } /* PCは入口を絞る(つまみ+数値) */
#rotDial { flex: 0 0 auto; touch-action: none; cursor: grab; border-radius: 50%; }
#rotDial:active { cursor: grabbing; }
.rot-dial-txt { display: flex; flex-direction: column; }
.rot-dial-txt #rotDialVal { font-family: var(--font-mono); font-weight: 700; color: var(--ink); font-size: var(--fs-m); }
.rot-dial-txt small { font-size: var(--fs-note); color: var(--ink-faint); }
/* 切り抜き(トリミング): 同じく共有罫の計測表 */
.crop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line-strong); background: var(--bg2); }
.crop-grid label {
  display: flex; align-items: center; gap: 5px; font-size: var(--fs-note); color: var(--ink-dim);
  background: var(--bg2); border: none; border-radius: 0; padding: 4px 7px;
}
.crop-grid label:nth-child(odd) { border-right: 1px solid var(--line); }
.crop-grid label:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.crop-grid label .mono { flex: 1 1 auto; text-align: right; }
.crop-grid #btnCropReset { grid-column: 1 / -1; font-size: var(--fs-note); border: none; border-top: 1px solid var(--line); border-radius: 0; background: var(--panel2); }
.crop-in { flex: 1 1 auto; width: auto; min-width: 0; background: transparent; border: none; font-family: var(--font-mono); font-size: var(--fs-s); text-align: right; }
.crop-in:focus-visible { outline: none; } /* リングは label 側に出す(xform-grid と同文法) */
.crop-grid label:focus-within {
  outline: 2px solid var(--ai);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 2px rgba(76, 194, 255, 0.15);
}
/* 整列ツール(UP-T風) */
.align-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.align-label { font-size: var(--fs-note); color: var(--ink-faint); }
.align-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.align-btn { padding: 5px 8px; font-size: var(--fs-note); }
.distribute-row { display: flex; align-items: center; gap: 4px; }
.distribute-row .mini-btn { padding: 5px 10px; font-size: var(--fs-note); }
/* アイテム情報ポップオーバー(UP-T風) */
.item-info-pop {
  position: absolute; top: 12px; right: 12px; z-index: 20;
  min-width: 210px; max-width: calc(100% - 24px);
  background: var(--bg1); border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px 12px;
  font-size: var(--fs-body-sub);
}
.item-info-pop .ii-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.item-info-pop .ii-close { border: none; background: transparent; color: var(--ink-dim); font-size: 13px; cursor: pointer; padding: 2px 4px; }
.item-info-pop .ii-close:hover { color: var(--ink); }
.item-info-pop dl.ii-list { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; }
.item-info-pop dt { color: var(--ink-faint); white-space: nowrap; }
.item-info-pop dd { margin: 0; color: var(--ink); text-align: right; }
@media (max-width: 900px) { .item-info-pop { top: 8px; right: 8px; left: auto; min-width: 0; max-width: min(280px, 74%); } }
/* ポップオーバー表示中は、狭幅で下の常設オーバーレイを隠して重なりを避ける */
@media (max-width: 900px) { body.pop-open #startHint { visibility: hidden; } }
/* 無地確認バッジ + 強いトグルON表示 */
#btnPeekBlank.active { background: rgba(76,194,255,0.16); color: var(--brand); border-color: rgba(76,194,255,0.45); }
.peek-badge {
  position: absolute; left: 12px; bottom: 12px; z-index: 6;
  cursor: pointer;
  background: rgba(31,36,44,0.92); color: var(--tx); padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 999px;
  font-size: var(--fs-note); font-weight: 700; box-shadow: var(--shadow);
}
/* #btnGoFinish(bottom:12px・高さ44px)のレーンと分離し、札がタップを奪わないように */
@media (max-width: 900px) { .peek-badge { left: 8px; bottom: 64px; max-width: calc(100% - 16px); } }
.hidden-pill { pointer-events: auto; display: flex; align-items: center; gap: 6px; }
.hidden-pill .mini-btn { padding: 2px 8px; font-size: var(--fs-note); background: var(--bg3); }
/* 編集対象ヘッダー */
.edit-target { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: var(--fs-body-sub); }
.edit-target.et-clickable { cursor: pointer; }
.edit-target .et-badge { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-note); font-weight: 700; color: var(--brand-ink); }
.edit-target .et-badge.et-img { background: var(--ai); }
.edit-target .et-badge.et-text { background: var(--warn); color: var(--brand-ink); }
.edit-target .et-name { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edit-target .et-edit { flex: 0 0 auto; margin-left: auto; font-size: var(--fs-note); color: var(--brand); text-decoration: underline; }
/* プレビュー上の＋画像/＋文字 */
.add-float { position: absolute; left: 12px; top: 12px; z-index: 5; display: flex; gap: 6px; }
.add-float { gap: 8px; }
.add-float-btn {
  border: 1px solid rgba(255,255,255,0.16); background: rgba(31, 36, 44, 0.92); color: var(--tx);
  border-radius: 999px; padding: 8px 16px; font-size: var(--fs-m); font-weight: 700;
  box-shadow: var(--shadow); cursor: pointer;
}
.add-float-btn:hover { background: var(--bg3); border-color: rgba(255,255,255,0.28); }
@media (max-width: 900px) { .add-float { display: none; } } /* モバイルはボトムバーに一本化(同じボタンが2組あると迷う) */
/* ボタン列の役割区切り */
.btn-sep { flex: 0 0 auto; width: 1px; align-self: stretch; background: var(--line-strong); margin: 2px 2px; }
@media (max-width: 900px) { .btn-sep { display: none; } }
/* プレビュー下の常設ステータスバー */
.stage-status {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 12px; background: var(--panel2); border-top: 1px solid var(--line);
  font-size: var(--fs-note); color: var(--ink-dim); flex-wrap: wrap;
}
.status-summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-next {
  flex: 0 0 auto; border: 1px solid rgba(76,194,255,0.45); background: rgba(76,194,255,0.12);
  color: var(--brand); border-radius: 999px; padding: 4px 12px;
  font-size: var(--fs-note); font-weight: 700; cursor: pointer;
}
.status-next:hover { background: var(--brand); color: var(--brand-ink); }
/* 右下ヘルプ */
.help-fab {
  position: absolute; right: 14px; bottom: 14px; z-index: 5;
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: rgba(31, 36, 44, 0.92); color: var(--tx);
  font-size: 17px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow);
}
.help-fab:hover { background: var(--bg3); border-color: rgba(255,255,255,0.28); }
@media (max-width: 900px) { body.pop-open .help-fab { visibility: hidden; } }
/* 注意喚起=計器の表示灯: にじむグローではなくハードON/OFFの点滅(ペア%指定で瞬時切替) */
@keyframes indicatorBlink {
  0%, 44%   { box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--accent-pale); }
  45%, 100% { box-shadow: 0 0 0 0 transparent; }
}
/* 取り消せる操作が生まれた瞬間の「戻す」ボタン表示灯(記号↶の存在に気づかせる)。初回ヘルプ案内にも共用 */
.hist-pulse { animation: indicatorBlink 360ms linear 2; border-radius: var(--radius); }
@media (prefers-reduced-motion: reduce) { .hist-pulse { animation: none; } }

/* R5: レイヤー行アイコンボタンの押下フィードバック(タッチで手応えを返す) */
.layer-ctl button:active { background: var(--bg3); color: var(--ink); }

/* R5: キーボードでキャンバスにフォーカスした際の可視リング(矢印/Delete操作対象の手掛かり) */
#canvas2d:focus-visible { outline: 2px solid var(--ai); outline-offset: -2px; } /* フォーカス=藍(朱は選択の事実) */

/* R5: この面のデザインを反対面へコピー(両面加工の定番動線) */
.face-copy-btn { width: 100%; margin-top: 6px; font-size: var(--fs-s); }

/* R5: 書き出し確認/完了パネル(#viewport 内オーバーレイ。モバイルでも常に見える) */
/* 開くたび: 調光(120ms)→カードが上から印字(220ms)→済印が捺印(done時のみ) */
@keyframes edDim { from { background-color: rgba(0, 0, 0, 0); } to { background-color: rgba(0, 0, 0, 0.6); } }
@keyframes edPrint { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(-12px); } } /* -12px=4pxハード影の逃げ */
.export-done {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6); padding: 12px;
  animation: edDim 120ms linear backwards;
}
.export-done .ed-card { animation: edPrint var(--dur-stage) var(--e-snap) 60ms backwards; }
.export-done .ed-card {
  background: var(--bg1); border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px; width: min(360px, 100%); max-height: 100%; overflow-y: auto;
}
.export-done .ed-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; color: var(--ink); font-size: var(--fs-m); margin-bottom: 10px; }
.export-done .ed-x { flex: 0 0 auto; border: none; background: transparent; color: var(--ink-dim); font-size: 15px; cursor: pointer; padding: 2px 4px; line-height: 1; }
.export-done .ed-x:hover { color: var(--ink); }
.export-done .ed-thumbs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.export-done .ed-thumbs figure { margin: 0; text-align: center; }
.export-done .ed-thumbs img { display: block; border: 1px solid var(--line-strong); border-radius: 4px; max-width: 100%; height: auto; background: #f2f0ea; }
.export-done .ed-thumbs figcaption { font-size: var(--fs-note); color: var(--ink-faint); margin-top: 3px; }
.export-done .ed-note { font-size: var(--fs-s); color: var(--ink); margin: 0 0 12px; line-height: 1.5; }
.export-done .ed-warn { margin: 0 0 12px; padding-left: 18px; font-size: var(--fs-s); color: var(--accent-dark); }
.export-done .ed-warn li { margin: 2px 0; }
.export-done .ed-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.export-done .ed-actions .accent-btn { padding: 8px 16px; }
@media (max-width: 900px) { .export-done .ed-card { width: min(320px, 100%); padding: 12px; } }
/* 整列・反転ポップオーバー(viewBar) */
.arrange-pop {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 20;
  background: var(--bg1); border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px; max-width: calc(100% - 16px);
}
.arrange-pop .ap-group { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.arrange-pop .ap-label { font-size: var(--fs-note); color: var(--ink-faint); flex: 0 0 100%; }
.arrange-pop .mini-btn { padding: 5px 9px; font-size: var(--fs-note); }
/* viewBar の 表/裏 トグル */
.face-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-note); color: var(--ink-dim); }
.face-toggle .ft-btn {
  border: 1px solid var(--line-strong); background: var(--bg2); color: var(--tx-dim);
  border-radius: 3px; padding: 3px 9px; font-size: var(--fs-s); font-weight: 700; min-height: 28px;
}
.face-toggle .ft-btn.active { background: var(--tx); color: var(--bg0); border-color: transparent; }
@media (max-width: 900px) { .face-toggle .ft-btn { min-height: 44px; } }
@media (pointer: coarse) { .status-next, #toast .toast-action { min-height: 44px; } .help-fab { width: 44px; height: 44px; } }

/* オプション行 */
.opt-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 0; }
.opt-row { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: var(--fs-s); cursor: pointer; }
/* チェックボックス → トグルスイッチ(見た目のみ。input IDとJSは不変) */
.opt-row > input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  order: 2; margin-left: auto; flex: 0 0 auto;
  width: 38px; height: 22px; border-radius: 999px;
  background: var(--bg3); border: 1px solid var(--line-strong);
  position: relative; cursor: pointer;
  transition: background-color var(--dur-move) var(--e-snap);
}
.opt-row > input[type="checkbox"]::before {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: transform var(--dur-move) var(--e-snap);
}
.opt-row > input[type="checkbox"]:checked { background: var(--brand); border-color: var(--brand); }
.opt-row > input[type="checkbox"]:checked::before { transform: translateX(16px); }
.opt-row.sub { padding-left: 4px; }
.opt-title { font-weight: 600; }
.opt-title small { color: var(--ink-faint); font-size: var(--fs-body-sub); font-weight: 400; }
.opt-subs {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 8px 8px 24px;
  background: var(--panel2);
}
/* チェックONでサブパネルが上→下に「印字されて」現れる(hidden解除時に再生) */
@keyframes subsPrint { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.opt-subs:not([hidden]) { animation: subsPrint var(--dur-move) var(--e-snap); }
.opt-sub {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-note); color: var(--ink-dim);
}
.opt-sub span:first-child { flex: 0 0 56px; }
.opt-sub input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; }
.opt-hint { margin: -3px 0 2px 64px; font-size: var(--fs-note); color: var(--ink-faint); line-height: 1.4; }
#mirrorPhotoNote { margin-left: 24px; color: var(--tx-note); } /* 仕様説明であって警告ではない */
.opt-hint.warn-hint { color: var(--warn); font-weight: 700; } /* 警告=warn(選択色と混同させない) */
/* 空入力で追加を押したときに入力欄を光らせる(下部トーストの見落とし対策) */
/* 入力エラー=警告灯(danger のハードON/OFF点滅) */
@keyframes inputFlash {
  0%, 44%   { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
  45%, 100% { border-color: var(--line-strong); box-shadow: none; }
}
input.input-flash { animation: inputFlash 300ms linear 2; }
@media (prefers-reduced-motion: reduce) { input.input-flash { animation: none; } }
.opt-row.dimmed, .opt-subs.dimmed { opacity: 0.6; }
.mono { font-family: var(--font-mono); font-size: var(--fs-note); color: var(--ai); }
/* 等幅の字間規律: 計測値・整理記号は必ず字間を伴う(「打刻された数字」にする)。
   右寄せ入力は末尾に字間ぶんの隙間が出るため 0.04em に留める */
.mono, .size-real, #rotDialVal, .xform-grid input, .crop-in { letter-spacing: 0.04em; }
.pnum, .layer-item::before, kbd { letter-spacing: 0.06em; }

.btn-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* 黒の注意書き */
/* 公文書風の「注意事項欄」: 内枠+外側の細枠の二重構え */
.notice {
  margin-top: 14px;
  border: 1px solid rgba(255, 200, 97, 0.35);
  border-left: 3px solid var(--warn);
  background: rgba(255, 200, 97, 0.10);
  border-radius: var(--radius);
  padding: 12px;
}
.notice-head { font-size: var(--fs-s); font-weight: 700; color: var(--warn-ink); margin-bottom: 4px; letter-spacing: 0.1em; }
.notice p { font-size: var(--fs-body-sub); color: var(--warn-ink); line-height: 1.7; }
.notice strong { color: var(--warn-ink); }
.black-meter { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.bm-label { font-size: var(--fs-note); color: var(--warn-ink); white-space: nowrap; font-weight: 700; }
.bm-bar {
  flex: 1; height: 8px; border-radius: 4px; position: relative;
  background: var(--bg0); border: 1px solid var(--warn-line); overflow: hidden;
}
/* 警告しきい値(45%位置)の破線。色だけに頼らない目安 */
.bm-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 45%;
  border-left: 1px dashed var(--warn-strong); z-index: 1; /* 目安線=注記(破線)。太さは規格の1pxに */
}
/* 閾値超えは色覚に依存しない罫でも示す */
.bm-bar.over { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.bm-fill {
  height: 100%; width: 0%;
  /* トークン化した意味色(緑=安全→黄土=注意→赤=危険)。タイル繰り返しさせない */
  background: var(--danger) linear-gradient(90deg, var(--ok), var(--warn-strong) 55%, var(--danger)) left / 220px 100% no-repeat;
  transition: width var(--dur-needle) var(--e-snap); /* 計器の針: 素早く振れてピタッと止まる */
}
.bm-detail { margin-top: 4px; color: var(--warn-ink) !important; }
.bm-warn { color: var(--danger) !important; font-weight: 700; margin-top: 8px; padding: 6px 10px; background: var(--bg2); border-left: 3px solid var(--danger); border-radius: 2px; }

/* ============ ステージ ============ */
#stage { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; background: var(--stage); }

#viewBar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg1);
  flex-wrap: wrap;
}
.view-tabs {
  display: flex; border: 1px solid var(--ink);
  border-radius: var(--radius); overflow: hidden;
}
.view-tab {
  border: none; background: transparent; color: var(--tx-dim);
  padding: 6px 16px; font-size: var(--fs-m); font-weight: 700;
  transition: background-color var(--dur-flick) var(--e-snap), border-color var(--dur-flick) var(--e-snap), color var(--dur-flick) var(--e-snap);
}
.view-tab + .view-tab { border-left: 1px solid var(--edge); }
.view-tab.active { background: var(--tx); color: var(--bg0); }
/* hover=ゲージの目盛(墨ベタで塗られるactiveの下書き) */
.view-tab:hover:not(.active):not(:disabled):not(.is-disabled) {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink-dim);
}
.view-tab:disabled, .view-tab.is-disabled { opacity: 0.45; cursor: not-allowed; }
.view-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.tool-hint {
  font-size: var(--fs-note); color: var(--ink-faint);
  flex: 1 1 auto; min-width: 120px;
  /* 末尾(回転・ホイール・ダブルクリック説明)が「…」で切れて読めないのを防ぐため折り返す */
  white-space: normal; overflow: visible; line-height: 1.45;
}

#viewport { flex: 1 1 auto; position: relative; min-height: 0; overflow: hidden; }
/* 作業台: カッティングマットの方眼+暖ビネット(写真スタジオ風の白グローをやめる) */
/* 暗いスタジオ: 静かなシアンの照明だけ(方眼・ビネットは廃止) */
#viewport::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 50% 38%, rgba(76, 194, 255, 0.05), transparent 65%);
  pointer-events: none;
}
#canvas2d, #canvas3d {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; touch-action: none;
}
#canvas2d { cursor: default; }
#canvas3d { cursor: grab; }
#canvas3d.dragging { cursor: grabbing; }

/* 帳票フッタ: 図面コード(左)+※欄外注記(右)の非対称。破線罫=欄外注記の格 */
#stageFoot {
  flex: 0 0 auto;
  padding: 6px 16px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-note); color: var(--tx-note);
  background: var(--bg1);
}

/* ============ 使い方モーダル ============ */
#helpModal { position: fixed; inset: 0; z-index: 50; }
.help-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0; transition: opacity 120ms linear;
}
#helpModal.open .help-backdrop { opacity: 1; }
.help-panel {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); /* 位置は最初から確定。漂わない */
  opacity: 0;
  transition: opacity 100ms linear; /* 閉=素早く引き抜く */
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  background: var(--panel);
  border: 1px solid var(--ink);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* 帳票が上から給紙される(表題の二重罫→本文の順に印字) */
#helpModal.open .help-panel {
  opacity: 1;
  animation: sheetFeed var(--dur-stage) var(--e-snap) backwards;
}
@keyframes sheetFeed {
  from { clip-path: inset(-12px -12px 100% -12px); } /* -12px=ハード影の逃げ */
  to   { clip-path: inset(-12px); }
}
.help-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.help-head h2 { font-size: 16px; font-weight: 700; }
.help-close {
  border: 1px solid var(--line-strong); background: var(--bg2);
  width: 28px; height: 28px; border-radius: var(--radius);
  font-size: 15px; line-height: 1;
}
.help-close:hover { background: var(--panel2); }
.help-body { overflow-y: auto; padding: 16px 20px 20px; }
.help-step { display: flex; gap: 12px; margin-bottom: 16px; }
.hs-num {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3); color: var(--tx);
  font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  border-radius: 2px;
  margin-top: 2px;
}
/* 検印風の完了ステップ(番号列から外す) */
.hs-num.check { background: var(--accent); color: var(--brand-ink); font-family: var(--font-jp); } /* brand地=墨文字(AA) */
.help-step h3 { font-size: var(--fs-m); margin-bottom: 4px; letter-spacing: 0.03em; }
.help-step p { font-size: var(--fs-m); color: var(--ink-dim); line-height: 1.75; }
.help-step p + p { margin-top: 6px; }
.help-tip {
  background: var(--panel2); border-left: 3px solid var(--ai);
  padding: 6px 10px;
}
.help-warn {
  background: var(--warn-bg); border-left: 3px solid var(--warn-strong);
  padding: 6px 10px;
  color: var(--warn-ink) !important;
}
.help-keys {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-s);
  margin-top: 8px;
}
.help-keys caption {
  text-align: left; font-weight: 700; font-size: var(--fs-s);
  padding-bottom: 6px; color: var(--ink);
}
.help-keys td {
  border: 1px solid var(--line);
  padding: 5px 10px;
  color: var(--ink-dim);
}
.help-keys td:first-child { width: 42%; white-space: nowrap; }
kbd {
  font-family: var(--font-mono); font-size: var(--fs-note);
  background: var(--bg2); border: 1px solid var(--line-strong);
  border-bottom-width: 2px; border-radius: 3px;
  padding: 1px 5px;
}

/* ============ 画像の切り抜き(トリミング)モーダル ============ */
#cropModal { position: fixed; inset: 0; z-index: 70; }
.crop-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); }
.crop-panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  background: var(--bg1); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
}
.crop-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.crop-head h2 { font-size: 16px; font-weight: 700; }
.crop-stage {
  flex: 1 1 auto; min-height: 0;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: var(--bg0);
  overflow: auto;
}
#cropCanvas { touch-action: none; display: block; max-width: 100%; border-radius: 6px; cursor: crosshair; }
.crop-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--line);
}
.crop-hint { flex: 1 1 100%; font-size: var(--fs-note); color: var(--tx-note); line-height: 1.5; }
.crop-foot .accent-btn { margin-left: auto; }
@media (max-width: 900px) {
  .crop-panel { width: calc(100vw - 16px); }
  .crop-foot { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .crop-foot .mini-btn, .crop-foot .accent-btn { flex: 1; min-height: 44px; }
  .crop-foot .accent-btn { flex: 1.4; margin-left: 0; }
}

/* トースト通知 */
#toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translate(-50%, calc(100% + 28px)); /* bottom:24px の下=画面外から差し込む */
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 9px 18px;
  font-size: var(--fs-m);
  font-weight: 600;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-move) var(--e-snap), opacity 80ms linear;
  z-index: 60;
  max-width: min(520px, calc(100vw - 40px));
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
/* その場で押せる操作つきトースト(削除の「元に戻す」等)。ボタンは指の届く場所で完結させる */
#toast.has-action { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
#toast .toast-action {
  flex: 0 0 auto; border: 1px solid var(--accent); background: var(--accent-pale);
  color: var(--accent-dark); font-weight: 700; font-size: var(--fs-s);
  border-radius: var(--radius); padding: 6px 12px; min-height: 34px; cursor: pointer;
}
#toast .toast-action:hover { background: var(--brand); color: var(--brand-ink); }
#toast .toast-action:active { transform: translateY(1px); }
/* 再通知=再打刻(下に一瞬沈んで戻る。浮遊しない) */
@keyframes toastPulse { 0% { transform: translate(-50%, 0); } 40% { transform: translate(-50%, 3px); } 100% { transform: translate(-50%, 0); } }
/* 失敗・拒否=danger族の紙色に一本化(朱=選択・CTA・検印とは別系統) */
#toast.error {
  background: #2a1a1c;
  border-color: var(--danger);
  color: var(--danger);
}
@media (prefers-reduced-motion: reduce) {
  /* 動きに敏感な利用者向けに一括で動きを止める */
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0.001s !important; /* backwards+ディレイ演出が要素を不可視のまま待たせない */
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  /* トーストの表示に必要なフェードだけ残す */
  #toast { transition: opacity 0.2s linear !important; transform: translate(-50%, 0); animation: none !important; }
  .bm-fill { transition: none !important; } /* バー幅は瞬時到達 */
  /* ドロップ読み込み中は走査線の代わりに静的な文言で状態を示す */
  #dropZone.loading::before {
    animation: none !important; left: 0; width: 100%; transform: none;
    background: linear-gradient(90deg, transparent, rgba(76,194,255,0.10), transparent);
    height: 2px; top: auto; bottom: 0;
  }
  #dropZone.loading > .dz-icon, #dropZone.loading > strong, #dropZone.loading > span { visibility: hidden; }
  #dropZone.loading::after {
    content: "読み込み中…"; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-m); color: var(--ai);
  }
}

/* WebGL非対応時の代替表示 */
.gl-fallback {
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  color: var(--ink-dim); font-size: var(--fs-m);
  padding: 20px; text-align: center;
}

/* モバイル: 選択中デザインの調整パネルへの誘導ボタン */
#btnGoFinish {
  position: absolute;
  left: 50%; bottom: 12px;
  transform: translateX(-50%);
  border: 1px solid var(--brand);
  background: var(--bg2); color: var(--tx);
  border-radius: 999px;
  padding: 0 20px;
  min-height: 44px;
  font-size: var(--fs-m); font-weight: 700;
  box-shadow: var(--shadow);
  z-index: 5;
}
#btnGoFinish:not([hidden]) { display: inline-flex; align-items: center; gap: 8px; }
#btnGoFinish:active { background: var(--bg3); }
#btnGoFinish:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#btnGoFinish .pnum { display: none; }

/* 初回の「次にどこを触るか」誘導(プレビュー上端) */
#startHint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 5; max-width: calc(100% - 24px);
  pointer-events: none; /* 情報表示のみ。下の canvas のタップ/ドロップを塞がない */
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(31, 36, 44, 0.92); border: 1px solid rgba(255,255,255,0.16); border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: var(--fs-s); font-weight: 600; color: var(--tx-dim);
}
#startHint .pnum { display: none; }
/* PCでも表示する: プレビュー上の見覚えのないサンプルの正体と次の一手を伝える(表示可否はJSの hidden で制御) */
/* モバイル: ＋画像/＋文字の帯と重ならないよう下へずらし、狭いプレビューの中央(サンプル本体)を覆わない */
@media (max-width: 900px) {
  #startHint { top: 8px; max-width: calc(100% - 16px); font-size: var(--fs-note); padding: 6px 10px; } /* viewBar直下・カードに被らない位置 */
}

/* 3D: 今どちらの面を見ているか */
.face-showing {
  font-size: var(--fs-note); font-weight: 700; color: var(--ink-dim);
  padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--bg2); white-space: nowrap;
}

/* 選択中デザインが非表示のときの注意バー */
.inline-notice {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 10px;
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-left: 3px solid var(--warn-strong);
  font-size: var(--fs-body-sub); color: var(--warn-ink);
}

/* 処理中の状態表示 */
body.busy { cursor: progress; }
body.busy #viewport { opacity: 0.65; transition: opacity var(--dur-flick) linear; } /* 調光=シャッターは即応 */
/* プレビュー中央にも「処理中」ラベルを重ねる(視線がどこでも気づける) */
body.busy #viewport::after {
  content: "処理中";
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 6; padding: 4px 12px;
  background: var(--panel); border: 1px solid var(--ink); border-left: 3px solid var(--ai); /* 処理中=藍(朱は選択・CTA・検印専用) */
  border-radius: var(--radius); font-size: var(--fs-s); color: var(--ink);
}
@media (max-width: 900px) { body.busy #viewport::after { top: 6px; } }

/* プレビューへのドラッグ受け入れ表示(素の #viewport::after を上書きしないよう .drop-active 限定) */
#viewport.drop-active { outline: 3px dashed var(--accent); outline-offset: -8px; }
#viewport.drop-active::after {
  content: "ここで離すと追加します";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 7; padding: 10px 18px; pointer-events: none;
  background: var(--brand); color: var(--brand-ink); font-weight: 700; font-size: var(--fs-m);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
/* 処理中の表現は「減光+処理中チップ+カーソル」の3点まで。パネルの朱走査線は騒音として削除(R3) */
#dropZone.loading {
  border-color: var(--ai);
  background: var(--panel2);
  position: relative; overflow: hidden;
}
#dropZone.loading::before {
  content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 35%;
  background: linear-gradient(90deg, transparent, rgba(76, 194, 255, 0.12), transparent); /* 処理中=藍 */
  animation: sweep 1s linear infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* 新規追加/並べ替えのみ目で追えるように(全再構築でのチラつきは出さない) */
/* 部品表に1行が左→右へ印字される(ドットプリンタ) */
@keyframes layerIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.layer-item.is-new { animation: layerIn var(--dur-move) var(--e-snap); }
/* 並べ替え直後は背景をひと呼吸フラッシュ(選択中の罫と重ならず「動いた」が分かる) */
/* 並べ替えフラッシュ=表示灯(朱背景を保持→瞬断。補間なし) */
@keyframes moveFlash { from { background: var(--accent-pale); } to { background: transparent; } }
.layer-item.just-moved { animation: moveFlash 360ms steps(1, end); }
@media (prefers-reduced-motion: reduce) { .layer-item.just-moved, .layer-item.is-new { animation: none; } }
/* 両面加工に切り替えた瞬間、新しく現れる面タブ帯を一瞬光らせて発見を助ける */
.face-tabs.just-appeared { animation: indicatorBlink 360ms linear 2; border-radius: var(--radius); } /* 表示灯に統合 */
@media (prefers-reduced-motion: reduce) { .face-tabs.just-appeared { animation: none; } }

/* 裏面デザイン残りの警告 */
.face-note.warn { color: var(--warn-ink); font-weight: 700; border-left: 3px solid var(--warn-strong); padding-left: 8px; }

/* ビュー切替タブのフォーカスリング(overflow:hidden 内でも見えるように内側へ) */
.view-tab:focus-visible { outline-offset: -3px; }
.view-tab.active:focus-visible { outline-color: #fff; } /* 墨地ベタ上でも見える白リング */

/* デザイン操作ボタン: 削除を少し離す */
.layer-ctl button:last-child { margin-left: 4px; }

/* タッチ端末: 操作ボタンを大きく・境界を見せる */
@media (pointer: coarse) {
  .layer-ctl { gap: 4px; }
  .layer-ctl button {
    width: 36px; height: 36px;
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    background: var(--bg2);
  }
  /* タッチターゲット 44px 目安 */
  .ghost-btn, .mini-btn, .chip-btn, .face-tab, .accent-btn, .view-tab { min-height: 44px; }
  .ghost-btn, .mini-btn, .chip-btn, .accent-btn { padding-top: 10px; padding-bottom: 10px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .opt-row input { width: 20px; height: 20px; }
  .btn-row { gap: 8px; } /* face-tabs は一体型タブになったので gap 不要 */
  /* iOS Safari のフォーカス時強制ズームを防ぐ(16px未満の入力で発生) */
  .add-row input[type="text"], .add-row select, .xform-grid input { font-size: 16px; }
  .xform-grid label { font-size: var(--fs-s); padding: 7px 8px; }
}

/* ============ R2 モーション: 印字出現 ============ */
/* 紙のポップオーバー=上→下に印字(-8px=3pxハード影の逃げ) */
@keyframes popPrint { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(-8px); } }
.item-info-pop, .arrange-pop { animation: popPrint var(--dur-move) var(--e-snap); }
/* ラベル札=左からラベルプリンタが打ち出す(-6px=2pxハード影の逃げ) */
@keyframes chipPrint { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-6px); } }
#startHint, .peek-badge, #btnGoFinish, .add-float-btn,
body.busy #viewport::after, #viewport.drop-active::after {
  animation: chipPrint var(--dur-move) var(--e-snap);
}

/* ============ R1 図面化: 浮いた紙の質感と検印 ============ */
/* 書き出し完了に朱の丸印「済」(印影の丸は角丸規律の例外) */
.export-done .ed-card { position: relative; }
@keyframes stampIn {
  from { opacity: 0; transform: rotate(-6deg) scale(1.4); }
  to   { opacity: 1; transform: rotate(-6deg) scale(1); }
}
.export-done .ed-card[aria-label="書き出し完了"]::before {
  content: "✓" / "";
  position: absolute; top: 8px; right: 46px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(70, 209, 154, 0.9);
  border-radius: 50%;
  color: var(--ok);
  font-family: var(--font-serif); font-size: 14px; font-weight: 700;
  transform: rotate(-6deg);
  pointer-events: none;
  animation: stampIn 180ms var(--e-stamp) 360ms backwards; /* 印字完了直後にドンと捺す */
}

/* レスポンシブ */
@media (max-width: 900px) {
  body { overflow: auto; }
  #app { height: auto; }
  #main { flex-direction: column-reverse; }
  #panel { flex: none; border-right: none; border-top: 2px solid var(--ink); overflow-y: visible; } /* 同じ紙(太罫=章)。overflow解除でジャンプチップのstickyをページ基準に */
  /* xform-grid は常時1列(base で定義済み)。crop はラベル1文字なので2列のまま */
  .crop-in { min-width: 3ch; }
  /* プレビューを画面上部に固定し、下の設定パネルを操作しても結果が見えるように */
  #stage {
    position: sticky; top: 0; z-index: 10;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  }
  #viewport { height: 42vh; height: 42dvh; min-height: 220px; }
  /* ヘッダーは「タイトル行+ボタン行」の規則的な2行に */
  #header { flex-wrap: wrap; row-gap: 8px; }
  .v-sep { display: none; }
  .header-actions {
    flex-basis: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px; row-gap: 5px;
  }
  .header-actions { justify-content: flex-start; gap: 6px; }
  .header-actions button { white-space: nowrap; flex-shrink: 0; }
  /* 主要CTAは最下段フル幅で1タップ到達 */
  #stageFoot { padding: 4px 12px; }
  /* viewBar を1行に収める */
  #viewBar { gap: 8px; row-gap: 6px; padding-left: 12px; padding-right: 12px; }
  #viewBar .view-tools { gap: 6px; }
  .view-tab { padding-left: 12px; padding-right: 12px; }
  /* ヒントは初回トーストで一度だけ(常設2行はsticky予算を食い過ぎる) */
  #viewBar .tool-hint { display: none; }
  #viewBar { flex-wrap: nowrap; }
  #viewBar .view-tools { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #viewBar .view-tools::-webkit-scrollbar { display: none; }
  /* 仕上げ選択は1列にして大きなスウォッチと折り返さない説明を維持 */
  .finish-grid { grid-template-columns: 1fr; }
  /* 文字入れ行が潰れないよう2段に */
  .add-row { flex-wrap: wrap; }
  .add-row input[type="text"] { flex: 1 1 100%; }
  .add-row select { flex: 1 1 auto; min-width: 0; }
  .add-row .mini-btn { flex: 0 0 auto; }
  /* 配置操作ボタンは3列グリッド、削除は全幅で下段に */
  .btn-row { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  #btnDel { grid-column: 1 / -1; margin-left: 0; }
  /* 背景除去スライダーの可動域を広げる */
  .opt-subs { padding-left: 12px; }
  .opt-sub span:first-child { flex: 0 0 48px; white-space: nowrap; }
  .opt-hint { margin-left: 56px; }
}
@media (max-width: 900px) and (pointer: coarse) {
  .opt-sub input[type="range"] { height: 32px; }
  /* ヘッダーのボタンは 44px を保ちつつ縦paddingを詰めて2行の高さを抑える */
  .header-actions .ghost-btn, .header-actions .accent-btn { padding-top: 7px; padding-bottom: 7px; }
}


/* 非選択時: 手順3を丸ごと消さず、仕上げ一覧だけ薄く見せる(製品の売りを最初の5秒で見せる) */
.no-sel #finishBody > :not(.sub-label):not(.finish-grid) { display: none; }
.no-sel .finish-btn { opacity: 0.75; }
.no-sel .fchip { filter: saturate(0.55) brightness(0.85); } /* 未選択感は色で、文字は読める濃さで */

/* ============ アコーディオン(詳細設定の段階的開示) ============ */
.acc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg2);
  margin-top: 10px;
}
.acc summary {
  min-height: 44px;
  display: flex; align-items: center;
  padding: 0 12px;
  font-weight: 700; font-size: var(--fs-m);
  cursor: pointer; list-style: none;
  color: var(--tx);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "▾"; margin-left: auto; color: var(--tx-faint); transition: transform var(--dur-move) var(--e-snap); }
.acc[open] summary::after { transform: rotate(180deg); }
.acc > :not(summary) { padding: 0 12px 12px; }

/* ============ モバイル固定ボトムバー(親指圏の主導線) ============ */
#mobileBar { display: none; }
@media (max-width: 900px) {
  #mobileBar {
    display: flex; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(23, 26, 32, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .mbar-btn {
    flex: 1; min-height: 48px;
    background: var(--bg2); border: 1px solid var(--line-strong);
    border-radius: var(--radius-s); color: var(--tx);
    font-size: var(--fs-m); font-weight: 700;
  }
  .mbar-btn:active { background: var(--bg3); }
  .mbar-cta {
    flex: 1.6; min-height: 48px;
    border: none; border-radius: var(--radius-s);
    background: var(--iri); color: var(--brand-ink);
    font-size: 14px; font-weight: 700;
  }
  .mbar-cta:disabled, .mbar-cta.is-disabled { filter: none; background: var(--bg2); color: var(--tx-faint); border: 1px solid var(--line); }
  #panel { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .header-actions .accent-btn { display: none; } /* CTAはボトムバーに一本化 */
  /* トーストはボトムバーの上に出す(CTAと「元に戻す」を塞がない) */
  #toast { bottom: calc(84px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); }
  /* 復元バナー: 文=1行目 / ボタン=2行目(破壊ボタンの縦潰れ防止) */
  #restoreBar { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; }
  #restoreBar span { flex: 1 1 100%; }
  #restoreBar .mini-btn { white-space: nowrap; }
  /* 確認/完了カードは画面全体を覆う本当のモーダルに(42vh帯に閉じ込めない) */
  .export-done { position: fixed; inset: 0; z-index: 60; padding: 12px 12px calc(84px + env(safe-area-inset-bottom)); }
  .help-fab { position: fixed; right: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 39; } /* ボトムバーの上の本当のFAB(42vh内のカードを覆わない) */
}

/* 判断材料の文字はモバイルで一段拡大 */
@media (max-width: 900px) {
  :root { --fs-body-sub: 13px; }
}

/* 横持ちの低い画面では sticky を解除(プレビューが画面を占有しないように) */
@media (max-width: 900px) and (max-height: 500px) {
  #stage { position: static; box-shadow: none; }
  #viewport { min-height: 180px; }
}