:root {
  /* 役割の色（スケッチ・ダイアログ・断面図で同じ・依頼 2026-10-16）。カッター＝--accent */
  --role-emboss: #4da3ff; --role-motif: #C8902E; --role-sign: #3FB68B;
  /* トンマナ配色: 赤(カーマイン)を一点差しの軸に、まわりは彩度を落とした"静かな植物系"。 */
  --bg: #1a1b1e;           /* 深いニュートラルインク（余白＝静けさ） */
  --panel: #212228;
  --panel2: #292a31;
  --border: #383941;
  --text: #eae6df;         /* 冷たい白でなく温かいアイボリー（紙の読み心地） */
  --muted: #9b988f;        /* 温かいミュートグレー */
  --attention: #f24a4f;    /* カーマイン＝“注意を引く”専用に限定（削除/危険など）。装飾には使わない */
  --sketch-ink: 240, 72, 46;  /* 3Dプレビューで選んだテーマ色（R,G,B）。modeling.jsがJSで上書き。既定=カーマイン */
  /* 画面のキーカラー＝タブのモードで決まる（依頼 2026-10-11「クッキー型は今のポピー、ほかのモードはその色」）。
     着せ替え（--sketch-ink）は 3Dのモデル・2Dの線・断面図の色だけ＝画面の色は変えない。各モードの色は app.js の MODES.keyColor(s) から台帳が :root に入れる（モードの CSS では書かない） */
  --ui-ink: 240, 72, 46;     /* クッキー型＝ポピー #F0482E ①。タブのモードが替わると台帳（app.js の applyModeLook）が :root に入れ直す */
  --ui-ink-2: 216, 61, 19;   /* ② #D83D13 少し濃い（ボタンの押した色など） */
  --ui-ink-3: 200, 51, 28;   /* ③ #C8331C 小さい字用（地の色との読みやすさの基準） */
  --ui-ink-4: 179, 39, 15;   /* ④ #B3270F いちばん濃い */
  --accent: rgb(var(--ui-ink));
  --accent2: #8ea3bd;      /* くすんだスレートブルー（ペリウィンクル）＝旧・鮮やか青の置換 */
  --ok: #93a98a;           /* セージ（葉色）＝旧・鮮やか緑の置換 */
  --warn: #cbab5e;         /* くすんだオーカー */
  --err: #d0885f;          /* くすんだテラコッタ */
  /* トンマナ: 世界観を語る見出しは明朝(serif)、細かい操作系は視認性優先で角ゴ(sans) */
  --sans: "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Songti SC", serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow:clip = ページ自体のスクロールを物理的に不可能にする（hiddenと違いJS/フォーカス起因の
   スクロールも封じる）。絶対配置のはみ出し要素があってもページがガクッとずれない最終防壁。
   （過去バグ: 隠しラジオinputがbody基準で下にはみ出し→クリック時のフォーカス自動スクロールで
     画面全体が下へずれ「上が消えて下に黒」になった。パネル内スクロールはaside側なので影響なし） */
html, body { height: 100%; overflow: clip; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--serif);   /* 既定は明朝。ボタン内文字・極小文字だけ角ゴに戻す（下） */
  font-size: 13px; overflow: hidden;
  display: flex; flex-direction: column;
}
/* ── トンマナ: 明朝を全面に。ただし①ボタン/入力の中の文字 ②あまりに小さい文字 は視認性優先で角ゴ ── */
button, input, select, textarea, optgroup, option,
.mbKey, .tlabel, .tkey, .mbSkFitLbl, #cursorPos, #areaInfo,
.figDim, #brandTmNo, .versionBadge, .secFig text, .dimLabel { font-family: var(--sans); }
/* ── 角丸を全面禁止（カクカク）。本来"円"のもの（下）だけ円形を維持 ── */
*, *::before, *::after { border-radius: 0 !important; }
#themeSel button, #presPanel .presCols button, #presenter .prRing:not(.square), #presenter .prRing:not(.square)::after, #presenter .prRipple:not(.square), #impMsg.impBusy::before,
#reflectPanel .reflectStepNo, #mirrorPanel .reflectStepNo, #framePanel .frDot,
#ctxMenu button.ctxCutter::before, #ctxMenu button.ctxEmboss::before, #ctxMenu button.ctxBase::before,
.outDot, .videoDoneBadge, .videoPlayIco, .secDragBar .dbThumb,
#impOutKnob::after, #impBrushV .ibvDot, .impInfo { border-radius: 50% !important; }
header {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: nowrap;   /* 折り返さない＝ボタンが2行目に落ちて段差になるのを防ぐ */
  padding: 7px 14px; background: var(--panel); border-bottom: 1px solid var(--border);
}
header h1 { flex: none; }
/* タイトルとボタンの間の装飾テキスト（タグライン・サブタイトル）。
   ボタン群は margin-left:auto で常に右へ・1行のまま。装飾は幅が足りなければ縮む */
.hdrDeco {
  flex: 0 1 auto; min-width: 0; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
}
.hdrDeco .tagline, .hdrDeco .sub {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
header #modBar { margin-left: auto; flex: none; }
header .actions { flex: none; }
/* 装飾を中途半端に見切れさせない: 全文が収まらない幅では丸ごと隠す（ボタンはnowrapで常に1行） */
@media (max-width: 1700px) { .hdrDeco { display: none; } }
/* 狭い窓でも右端のボタン（STL書き出し）を画面の外に出さない（共通の直し・2026-10-12）。折り返しはしない：
   ①押せない「全ロック解除」を隠す ②ノズル径の列だけ縮める（ボタンの列は縮めない）③1500px 以下はノズル径のラベルを隠す（説明は title に残る） */
header #nozzleSel { flex: 0 1 auto; min-width: 0; overflow: hidden; }
header #modBar:has(#modUnlockAll:disabled) { display: none; }
header #modBar:has(#modUnlockAll:disabled) + #nozzleSel { margin-left: auto; }
@media (max-width: 1500px) { header #nozzleSel .nzLbl { display: none; } }
header #printerBox .nzLbl { display: none; }   /* 名前は選ぶ欄の中（「プリンター（未設定）」・機種名）とツールチップで分かる＝幅を数えない作りのため見出しは出さない */
header #printerBox { flex: none; display: flex; align-items: center; gap: 5px; margin-left: -2px; margin-right: -160px; }   /* 想定ノズル径のすぐ右（10px あけて）。並びの幅に数えない（ヘッダーの間12＋左−2＋150−160＝0）＝ヘッダーのほかの部品の位置は版284と同じ */
header #printerBox .nzLbl { font-size: 10px; color: var(--muted); letter-spacing: .3px; white-space: nowrap; }
header #printerSel { width: 150px; min-width: 0; font-size: 11px; padding: 3px 4px; background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; text-overflow: ellipsis; }
/* タブバー: 複数キャンバスの切り替え（ブラウザのタブと同じ感覚） */
#tabBar {
  display: flex; align-items: flex-end; gap: 3px;
  padding: 5px 12px 0; background: #0d1015; border-bottom: 1px solid var(--border);
  overflow-x: auto; flex: none;
}
#tabBar .tab {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; font-size: 12px; color: var(--muted);
  border: 1px solid transparent; border-bottom: none;
  border-radius: 8px 8px 0 0; cursor: pointer; white-space: nowrap; max-width: 200px;
}
#tabBar .tab:hover { background: var(--panel2); }
#tabBar .tab.on { background: var(--panel); color: var(--text); border-color: var(--border); }
#tabBar .tab .tnm { overflow: hidden; text-overflow: ellipsis; }
#tabBar .tab .tclose {
  border: none; background: none; color: var(--muted); cursor: pointer;
  padding: 0 3px; font-size: 13px; line-height: 1; border-radius: 4px; opacity: 0.55;
}
#tabBar .tab .tclose:hover { opacity: 1; color: #f0837e; }
#tabBar .tadd {
  border: none; background: none; color: var(--muted); font-size: 15px;
  cursor: pointer; padding: 2px 9px 4px; border-radius: 7px; flex: none;
}
#tabBar .tadd:hover { background: var(--panel2); color: var(--text); }
/* タブのモード（台帳・2026-10-19）: 色＋線のアイコンで見分ける（色だけに頼らない）。印の色（--mode-X）も台帳が MODES.keyColor から入れる */
:root { --mode-cookie: rgb(240, 72, 46); }   /* 各モードの色（--mode-<名前>）は台帳（app.js の MODES.keyColor）が :root に入れる */
:root.modeSwitching *, :root.modeSwitching *::before, :root.modeSwitching *::after { transition: none !important; }   /* モードを切り替える瞬間は色を一度に変える（applyModeLook・2026-10-19） */
#tabBar .tab .tmode { display: inline-flex; flex: none; }
body.modesOn #tabBar .tab.on { box-shadow: inset 0 2px 0 var(--accent); }   /* 開いているタブの上の線＝そのモードのキーカラー */
/* 左上の筆記体のロゴはクッキー型のタブだけ（直子さん 2026-10-19）。ほかのモードでは場所を残したまま見えなくする＝ヘッダーのほかの部品は動かない */
:root[data-logo="off"] header .brandScript, :root[data-logo="off"] header .brandTM { visibility: hidden; }
/* ＋の選択（モードが2つ以上あるとき） */
#newTabMenu {
  position: fixed; z-index: 60; min-width: 230px; padding: 6px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
#newTabMenu .ntmHead { font-size: 11px; color: var(--muted); padding: 4px 8px 6px; }
#newTabMenu .ntmItem {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 8px; border-radius: 8px;
  border: 1px solid transparent; background: none; color: var(--text); cursor: pointer;
}
#newTabMenu .ntmItem:hover, #newTabMenu .ntmItem:focus-visible { background: var(--panel2); border-color: var(--border); outline: none; }
#newTabMenu .ntmIcon { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 8px; flex: none; }
#newTabMenu .ntmIcon svg { width: 20px; height: 20px; }
#newTabMenu .ntmText { display: flex; flex-direction: column; gap: 2px; }
#newTabMenu .ntmText b { font-size: 13px; font-weight: 600; }
#newTabMenu .ntmText small { font-size: 11px; color: var(--muted); }
/* 粘土のモードのキーカラー（粘土の色）は台帳の MODES.craft.keyColor が入れる（CSS では持たない） */
/* 粘土のモードのタブ: クッキー型専用のプロパティを隠し、スケッチ設定と粘土のモードの道具だけ出す */
:root[data-mode="craft"] #asidePropsPane > *:not(#areaPropsH2):not(#mySetSec):not(#sketchSec):not(#craftPane):not(#embShapeSec):not(#stampProps) { display: none !important; }   /* マイ設定・スケッチ設定は本体と同じ並びで残す（差0） */
:root[data-mode="craft"] #tabLabelBtn, :root[data-mode="craft"] #asideLabelPane { display: none !important; }   /* 食品表示ラベル作成はクッキー型だけ。ユーザーガイドは同じ枠でページだけ粘土用（台帳の guidePage） */
:root[data-mode="craft"] #stemPanel .stmJustOpt { display: none; }   /* 粘土のモードの持ち手にはスタンプ台のモードは無い */
/* エンボスの一式は本体と同じ（直子さん 2026-10-20「エンボスの高さは、スケッチクッキーと同じようにエンボスの一式」）：スタンプ・イージースタンプ・マットで図形をエンボスにして選ぶと、
   本体と同じ「エンボスの形状」（断面の形・角度）と「エンボス高さ」（図形ごと・本体と同じ部品と同じ結びつけ）が出る。出し入れは本体の仕組み（updateCtxSections）のまま。
   型断面図は刃の形・寸法を一緒に描く＝刃のない粘土のモードでは出さない。エンボスフォルダー・仕上げの道具は別の仕組み（グレー画像・面の形）なので出さない */
:root[data-mode="craft"] #asidePropsPane:not(:has(#craftPane[data-emb="1"])) > :is(#embShapeSec, #stampProps) { display: none !important; }
:root[data-mode="craft"] #asidePropsPane:not(:has(#craftPane[data-emb-sel="1"])) > #stampProps { display: none !important; }
:root[data-mode="craft"] #stampProps > :not(#stampBody) { display: none !important; }
:root[data-mode="craft"] #stampBody > :not(#stampReliefRow):not(#stampTarget):not(#stampResetOv) { display: none !important; }
:root[data-mode="craft"] #stampBody > #stampReliefRow { display: block !important; }
:root[data-mode="craft"] #stampBody { opacity: 1 !important; pointer-events: auto !important; }   /* 本体は「スタンプ台の図形が無い」と薄くして触れなくする。粘土のモードの台は道具が自動で作る＝図形には無いので、いつも触れる */   /* 本体が型断面図へ移して隠している高さの部品を、そのまま出す */
/* エンボスフォルダーは、形（断面）と高さだけ。「面を反転」「立ち上げ方式」は使わない（グレー画像の高さの場に、図形ごとの形と高さを入れる作り） */
:root[data-mode="craft"] #asidePropsPane:has(#craftPane[data-folder="1"]) #embShapeSec :is(#stampSideRow, #stampStyleBox) { display: none !important; }
/* インク用イージースタンプだけは、印面の形を段差・台形・凹の3つに絞る（直子さん 2026-10-12・サポートなしで刷れる形） */
:root[data-mode="craft"] #asidePropsPane:has(#craftPane[data-ink="1"]) #embShapeSec #embProfSeg label:has(input[value="scurve"]),
:root[data-mode="craft"] #asidePropsPane:has(#craftPane[data-ink="1"]) #embShapeSec #embProfSeg label:has(input[value="dome"]),
:root[data-mode="craft"] #asidePropsPane:has(#craftPane[data-ink="1"]) #embShapeSec #embProfSeg label:has(input[value="hemi"]),
:root[data-mode="craft"] #asidePropsPane:has(#craftPane[data-ink="1"]) #embShapeSec #embStrengthBox,
:root[data-mode="craft"] #asidePropsPane:has(#craftPane[data-ink="1"]) #embShapeSec #stampSideRow,
:root[data-mode="craft"] #asidePropsPane:has(#craftPane[data-ink="1"]) #embShapeSec #stampStyleBox { display: none !important; }
#craftPane .craftGroup { display: flex; align-items: center; gap: 7px; margin: 4px 0 8px; font-size: 11px; color: var(--muted); letter-spacing: .5px; }
#craftPane .craftGIcon { display: inline-flex; color: var(--accent); }
#craftPane .craftBtns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 10px 0; }   /* ボタンは1段・同じ幅（ダイアログの基準・依頼 2026-10-19） */
#craftPane .craftBtns button { padding: 7px 10px; border-radius: 7px; border: 1px solid rgba(var(--ui-ink), .5); background: rgba(var(--ui-ink), .12); color: var(--text); cursor: pointer; font: inherit; font-size: 12px; text-align: center; line-height: 1.4; }
#craftPane .craftBtns button:hover { border-color: var(--accent); }
#craftPane .craftSeg { display: flex; gap: 4px; margin: 10px 0 6px; }
#craftPane .craftSeg button { flex: 1; padding: 6px 4px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel2); color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; }
#craftPane .craftSeg button.on { border-color: var(--accent); background: rgba(var(--ui-ink), .16); color: var(--text); font-weight: 600; }
#craftPane .craftSeg .craftIconBtn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; }
#craftPane .craftSeg .craftIconBtn svg { width: 30px; height: 30px; }
#craftPane .craftSeg .craftIconBtn.on svg { color: var(--accent); }
#craftPane .craftSegSm button { font-size: 11px; padding: 5px 2px; }
#craftPane .craftEnd { margin-top: 18px; }   /* 一番下の段：設定を戻す（解除の種類） */
#craftPane .craftEnd .craftReset { border: 1px solid var(--border); background: var(--panel2); color: var(--text); }   /* 確定の色（キーカラーの塗り）は使わない */
#craftPane .craftEnd .craftReset:hover { border-color: var(--accent); }
/* 粘土のモードのステム（シーリングスタンプの持ち手）：形の選択と軸径は隠し、長さの3つのボタンを出す。ツールのアイコンは縦線を太く */
:root:not([data-mode="craft"]) #stemPanel .clayOnly { display: none !important; }   /* #stemPanel .row に負けて、ふつうの型にも出ていた */
:root[data-mode="craft"] #stemPanel .clayOnly { display: flex; gap: 4px; }
:root[data-mode="craft"] #stemPanel #stmShapeRow, :root[data-mode="craft"] #stemPanel #stmWLbl { display: none; }
:root[data-mode="craft"] #stemPanel label:has(#stmW) { display: none; }
#stemPanel #stmMountKind { align-items: center; }
#stemPanel #stmMountKind span { font-size: 11px; color: var(--muted); margin-right: 4px; white-space: nowrap; }
#stemPanel #stmMountKind button, #stemPanel #stmLenPresets button { flex: 1; font-size: 11px; padding: 4px 2px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); cursor: pointer; }
#stemPanel #stmMountKind button.on, #stemPanel #stmLenPresets button.on { border-color: var(--accent); background: rgba(var(--ui-ink), .16); }
#sketchTools button[data-tool="stem"] .clayStemIcon { display: none; }
:root[data-mode="craft"] #sketchTools button[data-tool="stem"] svg:not(.clayStemIcon) { display: none; }
:root[data-mode="craft"] #sketchTools button[data-tool="stem"] .clayStemIcon { display: block; }
#craftPane .craftWarn { color: var(--warn); }
#craftPane .ctDesc { font-size: 12px; color: var(--text); line-height: 1.6; margin-bottom: 8px; padding-right: 5px; overflow-wrap: anywhere; }   /* 行末の「、」「。」は行からぶら下がって見える＝右に余白を取り、右パネルの幅をはみ出さない */
/* 粘土のモードの道具は台帳の帯（ctx.band＝画像読み込みの下）に、帯のボタンと同じ形で並ぶ（見た目は本体の .bandBtn のまま）。横に一覧が出る道具の印だけ足す */
#sketchTools .modeBandSet .bandBtn.craftOff, #sketchTools .modeBandSet .bandBtn.craftOff:hover { opacity: .35; cursor: not-allowed; background: transparent; border-color: transparent; }   /* 作り込み中の道具（公開の画面だけ）＝グレー・押せない */
#sketchTools .modeBandSet .cfMore { position: absolute; right: 2px; bottom: 2px; border: 2.5px solid transparent; border-right-color: currentColor; border-bottom-color: currentColor; }   /* 横に一覧が出る印（他のツールの右下の三角と同じ）。帯が小さい形のときも字にかからない大きさ（字は1行のまま） */
/* 粘土のモードの分類を押すと横に出る一覧 */
.craftFly {
  position: fixed; z-index: 3000; width: 280px; padding: 6px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.craftFly .cfHead { font-size: 11px; color: var(--muted); padding: 4px 8px 6px; }
.craftFly .cfItem {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 8px; width: 100%; text-align: left;
  padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); cursor: pointer; font: inherit;
}
.craftFly .cfItem:hover, .craftFly .cfItem:focus-visible { background: var(--panel2); border-color: var(--border); outline: none; }
.craftFly .cfItem.on { border-color: var(--accent); background: rgba(var(--ui-ink), .12); }
.craftFly .ctName { font-size: 12.5px; font-weight: 600; }
.craftFly .cfIcon { grid-row: 1 / 3; display: inline-flex; color: var(--accent); }
.craftFly .cfIcon svg { width: 22px; height: 22px; }
.craftFly .ctDesc { grid-column: 2; font-size: 11px; color: var(--muted); line-height: 1.5; }
.ctChip { font-size: 10px; padding: 1px 6px; border-radius: 999px; align-self: center; white-space: nowrap; }
.ctChip.reuse { color: var(--accent); border: 1px solid rgba(var(--ui-ink), .5); }
.ctChip.fresh { color: var(--muted); border: 1px solid var(--border); }
#tabBar .trename {
  width: 110px; background: #11141a; color: var(--text);
  border: 1px solid var(--accent2); border-radius: 4px;
  padding: 1px 5px; font-size: 12px; outline: none;
}
header h1 { font-size: 15px; font-weight: 600; letter-spacing: .5px; display: flex; align-items: center; }
.brandIcon {
  width: 26px; height: 26px; border-radius: 7px; margin-right: 9px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
/* ロゴタイプ（Cookie の o がマーク＝SketchC⊙⊙kie）。ヘッダーはダーク背景なので dark 版を使用 */
.brandLogo { height: 22px; width: auto; display: block; }
/* 新ロゴ（カリグラフィ）: ちょっと斜め・ヘッダーからはみ出す・白黒反転＋スクリーン合成で淡く浮かせる
   ＝抜け感のあるバーンとした見せ方。レイアウトは崩さないよう絶対配置で下にはみ出させる。 */
header h1 { position: relative; overflow: visible; }
.brandScript {
  position: absolute; left: -8px; top: 10px; height: 86px; width: auto;
  transform: rotate(-8deg); transform-origin: left center;
  filter: invert(1) contrast(1.06) brightness(1.06);
  mix-blend-mode: screen;   /* 反転後の濃紺の紙地はヘッダーの暗色に溶け、淡い筆文字だけ浮く */
  pointer-events: none; user-select: none; z-index: 6;   /* タブに重なっても pointer-events:none でクリックは素通し */
  transition: opacity .18s;
}
/* タブにホバー中はロゴと™を薄く透過＝下のタブが見やすくなる */
header h1.tabHover .brandScript, header h1.tabHover .brandTM { opacity: 0.12; }
/* バージョン表記はロゴに少し被ってOK＝スペーサーを詰めてロゴを大きく／はみ出させる */
header h1 { display: inline-flex; align-items: center; min-height: 30px; padding-left: 200px; }
/* ロゴ横の小さな™（カリグラフィと同系の淡いクリーム色）。位置はロゴ末尾（Cookieの右上）あたり */
.brandTM {
  position: absolute; left: 386px; top: 0px; z-index: 6;
  font-size: 15.5px; line-height: 1; color: #e6dcc6; font-family: var(--sans);
  transform: rotate(-8deg); transform-origin: left bottom;   /* ロゴの傾きに合わせる */
  pointer-events: none; user-select: none; transition: opacity .18s;
}
/* 下部ステータスバー（カーソル/作業領域/ツール）＝読まないので非表示 */
.statusbar { display: none !important; }
/* スケッチ下のツール説明（ヒント）とそのON/OFFトグル＝細かすぎるので非表示 */
#hint { display: none !important; }
#sketchTools #hintToggle { display: none !important; }
.tagline {
  color: var(--muted); font-size: 9.5px; font-weight: 600; letter-spacing: 2px;
  margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--border);
  white-space: nowrap;
}
@media (max-width: 1100px) { .tagline { display: none; } }
/* バージョン表記＝囲みなしの素の文字並び。左上の隅（ロゴの上）にそっと置く */
.versionBadge {
  position: absolute; left: 2px; top: 1px; z-index: 4;
  font-size: 9px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); background: none; border: none; border-radius: 0;
  padding: 0; margin: 0; white-space: nowrap; pointer-events: none;
}
header .sub { color: var(--muted); font-size: 11px; }
/* スケッチツールバー: スケッチエリア左端に縦1列・アイコンのみ（名前とキーはツールチップ） */
.toolbar { display: flex; gap: 4px; flex-wrap: wrap; row-gap: 4px; align-items: center; }
#sketchTools {
  position: absolute; left: 6px; top: 10px; bottom: 8px; z-index: 6;   /* 見出しは右上へ移したので上を詰める＝ツールを高く。下8pxは余白 */
  display: flex; flex-direction: column; align-items: stretch;   /* 上＝画像トレースのバナー／下＝描画列＋加工列の行 */
  gap: 4px;
}
/* 描画列＋加工列を横並びにする行（バナーの下） */
#sketchTools.tbScroll { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }   /* 道具が入りきらないときだけ、ホイールで縦に送る。スクロールバーは出さない＝ボタンの位置がずれない（fitToolbox・2026-10-19） */
#sketchTools.tbScroll::-webkit-scrollbar { display: none; }
#sketchTools.tbBeside > #toolMain { flex-basis: 100%; }
/* 帯が上に積んで入りきらないとき：帯のボタンを小さめにして2つずつ横に並べ、道具の2列の上に置く（fitToolbox が付ける・直子さん 10/20「1」）。
   幅は道具の2列と同じ・字は切らずに折り返す・右下の印は角のまま。隠した帯の部品の「幅の型」はここでは要らない */
#sketchTools.tbCompact { display: grid; grid-template-columns: repeat(2, 44px); gap: 4px; align-content: start; }
#sketchTools.tbCompact > #toolMain, #sketchTools.tbCompact > #illustConvBtn { grid-column: 1 / -1; }   /* QuickCookie（入口）は幅いっぱいの1段＝名前が切れない */
#sketchTools.tbCompact .bandBtn:has(.edgeMore), #sketchTools.tbCompact .bandBtn:has(.tgTri) { padding-right: 6px; }   /* 右下の印が字に重ならない */
#sketchTools.tbCompact :is(#illustConvBtn, #importImgBtn, #importVecBtn, .bandBtn) { padding: 4px 1px 3px; min-width: 0; gap: 1px; }
#sketchTools.tbCompact :is(#importImgBtn, #importVecBtn, .bandBtn) svg { width: 18px; height: 18px; }
#sketchTools.tbCompact #illustConvBtn svg { width: 28px; height: 18px; }
#sketchTools.tbCompact :is(#illustConvBtn, #importImgBtn, #importVecBtn, .bandBtn) .tlabel { font-size: 8px; letter-spacing: 0; line-height: 1.15; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; text-align: center; }   /* 言葉の切れ目（空白と、訳の文字に入れた見えない折り目 \u200B）でだけ折る＝画像／トレース・画像／読み込み。1語が入りきらないときだけ語の中で折る（本社 10/20） */
:root[data-hide~="qc"][data-hide] #sketchTools.tbCompact.toolbar #illustConvBtn, :root[data-hide~="trace"][data-hide] #sketchTools.tbCompact.toolbar #importImgBtn, :root[data-hide~="imgImport"][data-hide] #sketchTools.tbCompact.toolbar #importVecBtn { display: none !important; }   /* 帯の下に積んだ2列が下の付箋にかかるときだけ、2列を帯の横へ（本番が高さの足りないときと同じ形・fitToolbox が付ける） */
#toolMain > .toolSep:has(+ .fsSwatch.modeToolHidden) { display: none; }   /* 面／線を隠したモードでは、その上の区切り線も出さない（Stitch 10/19） */
#sketchTools.tbScroll > * { flex-shrink: 0; }
/* モードで意味のない部品を出さない（台帳の MODES[X].hide → :root[data-hide]・直子さん 10/19「意味のないものは片付けて」）。
   ヘッダーの部品はロゴと同じく場所を残して見えなくする（ほかの部品は動かない）。ツールボックスの帯の部品は外して、左詰めの決まりで並べ直す */
:root[data-hide~="nozzle"] #nozzleSel .nzLbl, :root[data-hide~="nozzle"] #nozzleSel button[data-nozzle] { visibility: hidden; }
:root[data-hide~="nozzle"] #printerBox, :root[data-hide~="printer"] #printerBox { visibility: hidden; }
:root[data-hide~="wallSnap"] #asidePropsPane label.check:has(#snapWallChk) { display: none; }   /* 壁吸着の行（スケッチ設定）を出さない＝下の行が詰まる（Clay・直子さん 10/20） */   /* 使用プリンターは想定ノズル径と同じ扱い（hide の 'nozzle' でも 'printer' でも） */
:root[data-hide~="arachne"] #arachneBtn { visibility: hidden; }
#sketchTools button.modeToolHidden, #sketchTools .fsSwatch.modeToolHidden { display: none !important; }
#sketchTools .fsSwatch.fsOne > .fsw { flex: 0 0 44px; }   /* 面／線の片方だけ隠したとき、残りは道具1つぶんの幅（本社 10/19・Edge） */   /* 台帳の hide の 'tool:名前'（sketch2d.js の applyToolHide が印を付ける） */
:root[data-hide~="qc"] #sketchTools #illustConvBtn, :root[data-hide~="trace"] #sketchTools #importImgBtn, :root[data-hide~="imgImport"] #sketchTools #importVecBtn { display: none !important; }
/* 帯の部品が1つでも残るときは、帯の幅をクッキー型と同じにする＝隠した部品は高さ0・見えない「幅の型」として残す（道具の列が左に寄らない・本社 10/19 Edge「ちょっと違うは絶対なし」）。
   全部隠したとき（Board）は上の display:none のまま＝帯ごと外して左端へ */
:root[data-hide~="qc"]:not([data-hide~="trace"][data-hide~="imgImport"]) #sketchTools #illustConvBtn,
:root[data-hide~="trace"]:not([data-hide~="qc"][data-hide~="imgImport"]) #sketchTools #importImgBtn,
:root[data-hide~="imgImport"]:not([data-hide~="qc"][data-hide~="trace"]) #sketchTools #importVecBtn,
:root[data-band-tools="on"][data-hide~="qc"] #sketchTools #illustConvBtn, :root[data-band-tools="on"][data-hide~="trace"] #sketchTools #importImgBtn, :root[data-band-tools="on"][data-hide~="imgImport"] #sketchTools #importVecBtn {
  display: flex !important; visibility: hidden; height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; margin-bottom: -4px; overflow: hidden; pointer-events: none;
}
/* 3D を出さないモード（hide の 'view3d'）：3D の画面とスプリッターを外して 2D を全幅に（3D の中の床・カラー・ミニバーも一緒に外れる・本社 10/19） */
:root[data-hide~="view3d"] main > #threeWrap, :root[data-hide~="view3d"] main > #splitL { display: none !important; }
:root[data-hide~="view3d"] main > #sketchWrap { flex: 1 1 auto !important; width: auto !important; }
#exportShownBtn.modeLabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* モードの書き出しの字：幅はクッキー型のまま */
/* 画面分割（台帳の splitView のモードだけ・Board 2026-10-19）：ヘッダーの切り替えと、並べた画面（見るだけ） */
#splitSel { display: flex; gap: 2px; align-items: center; }
/* 見え方の切り替え（台帳の MODES[X].views・Board 10/19「ノードで見られるビューと、ポータル式で見られるビューを切り替えできるようにしよう！」）：1つ目＝ふだんのキャンバス・ほかを選ぶとキャンバスの場所にモードの入れ物（#modeAltView） */
#viewSel { display: flex; gap: 2px; align-items: center; }
#viewSel[hidden] { display: none; }
#viewSel button { padding: 4px 6px; line-height: 1; font-size: 11px; }
#viewSel button svg { display: block; }
#viewSel button.on { color: var(--accent); border-color: var(--accent); }
#modeAltView { position: absolute; z-index: 2; display: none; overflow: hidden; }
#modeAltView > .modeAltSet[hidden] { display: none; }
:root[data-alt-view] #modeAltView { display: block; }
:root[data-alt-view] #sketchCanvas, :root[data-alt-view] .splitPane { visibility: hidden; }
/* キャンバスの上に乗る物（見出し「Sketch (mm)」・全体表示・台のボタン・寸法の入力・縁取りの範囲のバー）もキャンバスと一緒に隠す（Board 10/19） */
:root[data-alt-view] :is(#areaSketchH2, #fitBtn, #baseHintBtn, #bedCards, #dimInput, #closeChk, #bdPickBar) { visibility: hidden !important; }
#splitSel[hidden] { display: none; }
#splitSel button { padding: 4px 6px; line-height: 0; }
#splitSel button.on { color: var(--accent); border-color: var(--accent); }
.splitPane { position: absolute; z-index: 2; border: 1px solid var(--border); background: #1b1f27; box-sizing: border-box; }
.splitPane[hidden] { display: none; }
.splitCanvas { display: block; width: 100%; height: 100%; cursor: grab; }
.splitCanvas:active { cursor: grabbing; }
.splitPick { position: absolute; left: 6px; top: 6px; z-index: 1; max-width: calc(100% - 12px); font-size: 12px; background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 2px 4px; }
#toolCols { display: flex; flex-direction: row; align-items: flex-start; gap: 4px; }
/* 描画列・加工列: それぞれ縦一列（描画＝左／加工＝隣）。全ツール常時表示・アイコンは詰めて並ぶ */
#sketchTools .toolCol { display: flex; flex-direction: column; gap: 4px; }
#sketchTools #modFillet, #sketchTools #modSimp { display: none !important; }   /* 角丸のボタンは置かない（ダイレクト選択の角の印と右クリックの「角を丸める」で足りる）＝左右の列を12個ずつにそろえる（依頼 2026-10-15） */
/* 画像トレース＝別格。描画列＋加工列のトップに2列ぶんの幅の特別バナー（アイコン＋ラベル・うっすら着色）。
   詳細度は #sketchTools button（gradient背景）より高くする必要があるので #sketchTools #importImgBtn で指定 */
#sketchTools #importImgBtn, #sketchTools #importVecBtn, #sketchTools #illustConvBtn, #sketchTools .bandBtn {
  flex-direction: column; gap: 2px; padding: 6px 6px 5px;
  background: color-mix(in srgb, var(--accent2) 14%, transparent);
  border-color: transparent; border-radius: 8px; color: var(--accent2);
}
#sketchTools #importImgBtn:hover, #sketchTools #importVecBtn:hover, #sketchTools #illustConvBtn:hover, #sketchTools .bandBtn:hover { background: color-mix(in srgb, var(--accent2) 26%, transparent); border-color: transparent; color: #fff; }
#sketchTools #importImgBtn svg, #sketchTools #importVecBtn svg, #sketchTools .bandBtn svg { width: 23px; height: 23px; }
#sketchTools #illustConvBtn svg { width: 36px; height: 23px; }   /* 「QC」ロゴ＝横長。他2つのアイコンと同じ高さ感に */
#sketchTools #importImgBtn .tlabel, #sketchTools #importVecBtn .tlabel, #sketchTools #illustConvBtn .tlabel, #sketchTools .bandBtn .tlabel { display: block; font-size: 9px; line-height: 1.1; letter-spacing: .3px; white-space: nowrap; }
/* QuickCookie（旧・簡単カッター）＝おすすめの入口。他2つ（スレートブルー）と違い、テーマ色（カーマイン）で目立たせる */
#sketchTools #illustConvBtn { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
#sketchTools #illustConvBtn:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); color: #fff; }
/* モードだけの道具（台帳の ctx.band／ctx.bandButton）：帯の「画像読み込み」の下に、帯のボタンと同じ形で（直子さん 10/19）。開いているタブのモードの物だけ出る */
#modeBand, #modeBand > .modeBandSet { display: contents; }
#modeBand > .modeBandSet[hidden] { display: none; }
#sketchTools .bandBtn { position: relative; display: flex; align-items: center; cursor: pointer; }
#sketchTools .bandBtn.picked, #sketchTools .bandBtn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent2) 30%, transparent); border-color: var(--accent2); color: #fff; }
#sketchTools .toolSep { width: 22px; height: 1px; background: var(--border); margin: 4px auto; }
.toolbar .tlabel { display: none; }     /* アイコンのみ。名称はツールチップで表示 */
.toolbar .tkey { display: none; }       /* キーもツールチップに（左1列をシャープに保つ） */
#sketchTools button {
  padding: 7px; border-radius: 0;   /* シャープ（カクカク）＝道具感のあるトンマナ */
  border: 1px solid rgba(255,255,255,0.07);
  background: #1b1f27;              /* グラデ光沢をやめてフラットに */
  box-shadow: none;
  color: #b9c0d0;
  transition: color .12s, border-color .12s, background .12s;
}
#sketchTools button:hover {
  color: #fff; border-color: rgba(var(--ui-ink),0.55);
  background: #232834;
}
#sketchTools button.active {
  background: var(--accent);
  border-color: var(--accent); color: #fff;
  box-shadow: none;
}
#sketchTools button svg { width: 28px; height: 28px; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)); }
/* 加工列（スカラップ・フレームなど＝できた図形に効かせる道具）は、うっすらキーカラーの地で描画列と見分ける（依頼 2026-11-01）。
   大きさ・並びは変えない。色は --ui-ink＝モードのタブではそのモードのキーカラー */
#sketchTools #toolColEdit button:not(.active) { background: color-mix(in srgb, rgb(var(--ui-ink)) 11%, #1b1f27); border-color: rgba(var(--ui-ink), 0.2); }
#sketchTools #toolColEdit button:not(.active):hover { background: color-mix(in srgb, rgb(var(--ui-ink)) 20%, #232834); border-color: rgba(var(--ui-ink), 0.55); }
#sketchTools button:disabled { opacity: 0.3; cursor: default; }
#sketchTools button.cmd { color: var(--accent2); }
#sketchTools #modInput { position: static; width: 46px; margin-top: 3px; }
.toolbar button, .actions button {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 0; padding: 6px 12px; cursor: pointer; font-size: 12.5px; white-space: nowrap;
}
/* ── トンマナ: 世界観を語る所は明朝(serif)。細かい操作系は視認性優先で角ゴのまま ── */
.viewport h2, aside h3, .tagline,
#rpTitle, #brTitle, #shpTitle, #flgTitle, #scTitle,
.secHead, .roleLbl, .asideTab { font-family: var(--serif); letter-spacing: .04em; }
.viewport h2 { font-weight: 500; }
.toolbar button:hover, .actions button:hover { border-color: var(--accent); }
.toolbar button { display: inline-flex; align-items: center; gap: 6px; }
.toolbar button svg { flex-shrink: 0; }
.toolbar button.active { background: var(--accent); color: #1c140f; border-color: var(--accent); font-weight: 600; }
#langSel {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px; font-size: 12.5px; cursor: pointer;
}
.actions { margin-left: auto; display: flex; gap: 6px; }
.actions .primary { background: var(--accent); color: #1c140f; font-weight: 600; border-color: var(--accent); }
main { flex: 1; display: flex; min-height: 0; }
.viewport { flex: 1; position: relative; min-width: 0; }
.viewport h2 {
  position: absolute; top: 8px; left: 12px; z-index: 5;
  font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: 1px;
}
/* スケッチエリアの見出しは右上に（3Dビューの見出し＝左上と左右対称にする）。
   下の「図形全体表示」ボタンと縦に揃い、3D側の見出し＋俯瞰ボタンと鏡像になる。 */
#areaSketchH2 { left: auto; right: 12px; text-align: right; }
#sketchWrap { border-right: 1px solid var(--border); background: #232730; }
#sketchCanvas { display: block; cursor: crosshair; touch-action: none; }
#threeWrap { background: radial-gradient(120% 90% at 50% 30%, #272030 0%, #1b1e25 62%, #14161c 100%); }
#threeWrap canvas { display: block; }
/* 3Dを写真に撮るボタン（右上・透かしロゴ付きでDL） */
#photoBtn {
  position: absolute; top: 12px; right: 12px; z-index: 7;
  width: 36px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; cursor: pointer;
  background: linear-gradient(150deg, #242a38 0%, #161a22 100%); color: #d7c9cf;
  border: 1px solid var(--border); border-radius: 7px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4); transition: box-shadow .15s, border-color .15s;
}
#photoBtn svg { width: 20px; height: 18px; display: block; }
#photoBtn:hover { border-color: var(--accent); color: #fff; }
#photoBtn:disabled { opacity: .5; cursor: default; }
#photoBtn.shot { box-shadow: 0 0 0 3px rgba(255,255,255,.7); }
/* 撮影プレビュー（保存する / ゴミ箱に入れる を選ぶ） */
#photoPreview {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,5,8,.72); backdrop-filter: blur(3px);
}
#photoPreview[hidden] { display: none; }
#photoPreview .pp-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px; max-width: min(90vw, 520px);
  box-shadow: 0 24px 70px rgba(0,0,0,.6); text-align: center;
}
#photoPreview .pp-title { color: var(--text); font-size: 13px; margin-bottom: 10px; letter-spacing: .5px; }
#photoPreview .pp-img { display: block; max-width: 100%; max-height: 62vh; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
#photoPreview .pp-actions { display: flex; gap: 10px; margin-top: 14px; }
#photoPreview .pp-actions button { flex: 1; padding: 11px 0; font-size: 14px; font-weight: 600; border-radius: 8px; cursor: pointer; }
#photoPreview .pp-discard { background: transparent; color: var(--text); border: 1px solid var(--border); }
#photoPreview .pp-discard:hover { border-color: var(--accent); color: var(--accent); }
#photoPreview .pp-save { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
#photoPreview .pp-save:hover { filter: brightness(1.06); }
/* 購入からの戻り（Stripe success / cancel）オーバーレイ */
#checkoutOverlay {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,5,8,.72); backdrop-filter: blur(3px);
}
#checkoutOverlay .cb-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 26px 24px; max-width: min(90vw, 420px); text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
#checkoutOverlay .cb-title { color: var(--accent); font-size: 16px; font-weight: 600; letter-spacing: .5px; margin-bottom: 10px; }
#checkoutOverlay .cb-msg { color: var(--text); font-size: 13px; line-height: 1.7; }
#checkoutOverlay .cb-spin {
  width: 26px; height: 26px; margin: 18px auto 2px;
  border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%;
  animation: impSpin .8s linear infinite;
}
#checkoutOverlay .cb-actions { display: flex; gap: 10px; margin-top: 18px; }
#checkoutOverlay .cb-line { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 10px; background: rgba(var(--ui-ink),0.08); }
#checkoutOverlay .cb-line-title { color: var(--accent); font-size: 14px; font-weight: 700; line-height: 1.5; }
#checkoutOverlay .cb-line-msg { color: var(--text); font-size: 12.5px; line-height: 1.7; margin-top: 4px; }
#checkoutOverlay .cb-line-open { display: inline-block; margin-top: 8px; padding: 8px 14px; border-radius: 8px; background: #06C755; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
#checkoutOverlay .cb-line-open:hover { filter: brightness(1.06); }
#checkoutOverlay .cb-kw { color: #fff; font-size: 1.3em; font-weight: 800; letter-spacing: .04em; }   /* 合言葉だけ白く・少し大きく（文中で一番強く） */
#checkoutOverlay .cb-line-url { color: var(--muted); font-size: 11.5px; margin-top: 6px; }
#checkoutOverlay .cb-actions button { flex: 1; padding: 10px 0; font-size: 13px; font-weight: 600; border-radius: 8px; cursor: pointer; }
#checkoutOverlay .cb-retry { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
#checkoutOverlay .cb-retry:hover { filter: brightness(1.06); }
#checkoutOverlay .cb-retry:disabled { opacity: .6; cursor: default; }
#checkoutOverlay .cb-tobuy { background: transparent; color: var(--text); border: 1px solid var(--border); }
#checkoutOverlay .cb-tobuy:hover { border-color: var(--accent); color: var(--accent); }
/* 床（お皿）の縮尺スライダー */
.floorScaleRow { display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.floorScaleRow .catLbl { white-space: nowrap; }
.floorScaleRange { flex: 1; min-width: 90px; accent-color: var(--accent); cursor: pointer; }
#dimInput {
  position: absolute; display: none; z-index: 20;
  width: 76px; padding: 3px 6px; font-size: 13px;
  background: #11141a; color: var(--accent2); border: 1px solid var(--accent2);
  border-radius: 4px; outline: none; text-align: center;
}
#modBar {
  display: flex; gap: 5px; align-items: center; flex-wrap: wrap;
  margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--border);
}
#modBar button {
  background: var(--panel2); color: var(--accent2); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 10px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
#modBar button:hover:not(:disabled) { border-color: var(--accent2); }
#modBar button.active { background: var(--accent2); color: #0c1828; border-color: var(--accent2); font-weight: 600; }
#modBar button:disabled { opacity: 0.35; cursor: default; color: var(--muted); }
#modInput {
  display: none; width: 72px; padding: 3px 6px; font-size: 12px;
  background: #11141a; color: var(--accent2); border: 1px solid var(--accent2);
  border-radius: 4px; outline: none; text-align: center;
}
/* ドラッグ移動できるツールのポップアップ（shpPanel/textPanel/rolePop等）:
   ダイアログを動かそうとしたときに文字が選択されないようにする。入力欄だけ選択可に戻す。 */
.draggablePanel { user-select: none; -webkit-user-select: none; }
.draggablePanel input, .draggablePanel textarea { user-select: text; -webkit-user-select: text; }
#offPanel {
  display: none; position: absolute; top: 28px; left: 12px; z-index: 16;
  background: var(--panel); border: 1px solid var(--accent2); border-radius: 8px;
  padding: 12px 14px; width: 200px; font-size: 12.5px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
#offPanel #offTitle { font-weight: 600; color: var(--accent2); margin-bottom: 9px; }
#offPanel .row { display: flex; gap: 12px; align-items: center; margin-bottom: 9px; }
#offPanel label { cursor: pointer; display: flex; align-items: center; gap: 5px; }
#offPanel input[type=radio] { accent-color: var(--accent2); margin: 0; }
#offPanel #offDist {
  width: 70px; background: #11141a; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-size: 12.5px;
}
#offPanel .btns { justify-content: flex-end; margin-bottom: 0; gap: 6px; }
#offPanel button {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 11px; font-size: 12px; cursor: pointer;
}
#offPanel button.primary { background: var(--accent2); color: #0c1828; border-color: var(--accent2); font-weight: 600; }
/* パスの単純化パネル（スライダーでライブプレビュー） */
#simpPanel {
  display: none; position: absolute; top: 28px; left: 12px; z-index: 16;
  background: var(--panel); border: 1px solid var(--accent2); border-radius: 8px;
  padding: 12px 14px; width: 210px; font-size: 12.5px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
#simpPanel #simpTitle { font-weight: 600; color: var(--accent2); margin-bottom: 9px; }
#simpPanel .row { display: flex; gap: 10px; align-items: center; margin-bottom: 9px; }
#simpPanel #simpNote { color: var(--muted); font-size: 11.5px; margin-bottom: 9px; }
#simpPanel .btns { justify-content: flex-end; margin-bottom: 0; gap: 6px; }
#simpPanel button {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 11px; font-size: 12px; cursor: pointer;
}
#simpPanel button.primary { background: var(--accent2); color: #0c1828; border-color: var(--accent2); font-weight: 600; }
/* ステムツールのプロパティパネル */
#stemPanel {
  display: none; position: absolute; top: 28px; left: 12px; z-index: 16;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 8px;
  padding: 12px 14px; width: 240px; font-size: 12.5px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
#stemPanel #flgTitle { font-weight: 600; color: var(--accent); margin-bottom: 9px; }
/* 取っ手のパネル（依頼 2026-10-16）＝ステムと同じ形 */
#handlePanel {
  display: none; position: absolute; top: 28px; left: 12px; z-index: 16;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 8px;
  padding: 12px 14px; width: 240px; font-size: 12.5px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
#handlePanel .row { display: flex; gap: 6px; align-items: center; margin-bottom: 9px; flex-wrap: nowrap; }
#handlePanel label.row > span:first-child { flex: 1 1 auto; min-width: 0; }
#handlePanel .check { display: flex; gap: 6px; align-items: center; margin: 4px 0 9px; cursor: pointer; }
#handlePanel .note { margin-bottom: 8px; }
#handlePanel .btns { justify-content: flex-end; gap: 6px; }
#stemPanel .row { display: flex; gap: 10px; align-items: center; margin-bottom: 9px; flex-wrap: wrap; }
/* 数値の行は ◀ ▶ を足しても単位が次の行に落ちないように：名前の側が縮む */
#stemPanel label.row:has(.lrNum) { flex-wrap: nowrap; gap: 6px; }
#stemPanel label.row:has(.lrNum) > span:first-child { flex: 1 1 auto; min-width: 0; }
#stmGetaBox { margin: 0 0 9px; padding-left: 10px; border-left: 2px solid var(--accent); }
#stmGetaBox b { font-weight: 600; }
/* JustStem・押し出しの「どの型に付けるか」：まだのときはポピーで目立たせる（依頼 2026-10-13） */
#stemPanel .stmSetRow { flex-wrap: wrap; gap: 4px 8px; padding: 6px 8px; border: 1px solid var(--border); }
#stemPanel .stmSetRow.need { border-color: var(--accent); background: rgba(var(--ui-ink),0.12); }
#stemPanel .stmSetRow.need b { color: var(--accent); }
#stemPanel .stmSetRow small { flex-basis: 100%; color: var(--muted); font-size: 11px; }
#stemPanel.beside { left: 255px; }
/* JustStem は別格：ふつうのステムと分けて、ポピーの枠で目立たせる */
#stemPanel .stmJustOpt { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; padding: 7px 9px; border: 1px solid var(--accent); color: var(--accent); cursor: pointer; }
#stemPanel .stmJustOpt input { position: absolute; opacity: 0; pointer-events: none; }
#stemPanel .stmJustOpt .sjTxt { display: flex; flex-direction: column; line-height: 1.3; }
#stemPanel .stmJustOpt b { font-size: 13.5px; letter-spacing: 0.04em; }
#stemPanel .stmJustOpt small { font-size: 11px; color: var(--muted); }
#stemPanel .stmJustOpt:has(input:checked) { background: var(--accent); color: #fff; }
#stemPanel .stmJustOpt:has(input:checked) small { color: rgba(255,255,255,0.85); }
#stmGridRelease { width: 100%; margin-bottom: 9px; }   /* 矩形状パターンのパネルと並べて出す */
#stmGetaBox label.row { display: grid; grid-template-columns: 1fr 60px auto; gap: 6px; }
#stmGetaBox label.row input { width: 60px; box-sizing: border-box; }
#stmPickShape.on { border-color: var(--accent); color: var(--accent); }
#stmJustCalc { white-space: pre-line; }
#stemPanel #stmLen:disabled { opacity: 0.6; }
#stemPanel label { cursor: pointer; display: flex; align-items: center; gap: 5px; }
#stemPanel input[type=radio] { accent-color: var(--accent); margin: 0; }
#stemPanel input[type=number] {
  width: 64px; background: #11141a; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-size: 12.5px;
  margin-left: auto;
}
#handlePanel input[type=number] {
  width: 64px; background: #11141a; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-size: 12.5px;
  margin-left: auto;
}
#handlePanel input[type=checkbox] { accent-color: var(--accent); margin: 0; }   /* 取っ手の欄もステムと同じ（依頼 2026-10-16） */
#stemPanel .btns { justify-content: flex-end; margin-bottom: 0; gap: 6px; }
#stemPanel button {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 11px; font-size: 12px; cursor: pointer;
}
#stemPanel button.primary { background: var(--accent); color: #1c140f; border-color: var(--accent); font-weight: 600; }
/* 取っ手もステムと同じボタン。どちらも 削除・キャンセル・確定 を1段に同じ幅で（依頼 2026-10-16） */
#handlePanel button {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 11px; font-size: 12px; cursor: pointer;
}
#handlePanel button.primary { background: var(--accent); color: #1c140f; border-color: var(--accent); font-weight: 600; }
#stemPanel .row.btns, #handlePanel .row.btns { display: flex; flex-wrap: nowrap; gap: 6px; margin: 4px 0 0; }
#stemPanel .row.btns button, #handlePanel .row.btns button { flex: 1 1 0; min-width: 0; padding: 6px 4px; white-space: nowrap; text-align: center; }

/* パス編集ツールのグループ（1枠に格納。右下の三角＝フライアウトあり） */
.toolGroupHidden { display: none; }
#pathToolsBtn { position: relative; }
#pathToolsBtn, #drawToolsBtn, #navToolsBtn,
#sketchTools button[data-tool="pen"], #sketchTools button[data-tool="direct"], #sketchTools button[data-tool="stem"] { position: relative; }
#pathToolsBtn .tgTri, #drawToolsBtn .tgTri, #navToolsBtn .tgTri,
#sketchTools button[data-tool="pen"] .tgTri, #sketchTools button[data-tool="direct"] .tgTri, #sketchTools button[data-tool="stem"] .tgTri {   /* 押し手も（長押しで取っ手）＝三角を角に・ボタンの幅はほかと同じ（直子さん A 10/19） */
  position: absolute; right: 2px; bottom: 2px; width: 0; height: 0;
  border-left: 4px solid transparent; border-bottom: 4px solid currentColor; opacity: 0.55;
}
#pathToolsIcon, #drawToolsIcon, #navToolsIcon { display: flex; align-items: center; justify-content: center; }

/* 整列・シェイプ合成のパネル（ツールボックスの横） */
#alignPanel, #pfPanel {
  display: none; position: absolute; left: 12px; top: 28px; z-index: 16;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 8px;
  padding: 10px 12px; box-shadow: 0 4px 18px rgba(0,0,0,.45); font-size: 12.5px;
}
#alTitle, #pfTitle { font-weight: 600; color: var(--accent); }
#alignPanel .row, #pfPanel .row { display: flex; gap: 5px; margin-top: 8px; }
#alignPanel .row button, #pfPanel .row button {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; padding: 0;
}
#alignPanel .row button:hover, #pfPanel .row button:hover { border-color: var(--accent); color: var(--accent); }
#pfPanel .note { color: var(--muted); font-size: 11px; margin-top: 8px; max-width: 160px; }

/* 3Dプレビューのカラーテーマ・スウォッチ */
/* セレクタ共通の英字タイトル（FLOOR / THEME COLOR / カテゴリー名） */
.selTitle { font-family: var(--serif); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
/* 下段: テーマカラー（丸ドット）＋英字タイトル＋動的な色名 */
#themeSel { position: absolute; left: 12px; bottom: 12px; z-index: 6; display: flex; align-items: center; gap: 6px; }
#themeSel button {
  width: 16px; height: 16px; border-radius: 50%; cursor: pointer; padding: 0; flex: none;
  background: var(--sw); border: 2px solid rgba(255,255,255,0.18);
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
#themeSel button:hover { border-color: rgba(255,255,255,0.6); transform: scale(1.15); }
/* 選択中の色は控えめに囲ってハイライト（フロアの選択と同程度）。枠色をテーマ色にすると同化するので、
   白い縁＋薄い暗リングの中立フレームにして、どの色でもさりげなく分かるように。拡大はしない。 */
#themeSel button.on {
  border-color: #fff;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.45);
  position: relative; z-index: 1;
}
#themeSel .colorName {
  margin-left: 4px; font-family: var(--serif); font-size: 10.5px; font-style: italic;
  color: var(--text); letter-spacing: .06em; white-space: nowrap; min-width: 44px;
}
/* 上段: 床セレクタ。「Floor」ボタン→クリックで展開パネル（種類が増えても横に伸びず、パネル内で折り返す）。 */
#floorSel { position: absolute; left: 12px; bottom: 34px; z-index: 6; }
.floorBtn {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  font-family: var(--serif); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text); background: rgba(20,20,26,0.72); border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer; box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}
.floorBtn::after {
  content: ''; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .15s;   /* ▾＝閉／展開で▴ */
}
.floorBtn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 1px; }
.floorBtn:hover { border-color: rgba(255,255,255,0.45); }
.floorPanel[hidden] { display: none; }   /* hidden時は確実に隠す（.floorPanelのdisplay:flexが[hidden]既定に勝つのを防ぐ） */
.floorPanel {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 7;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px;
  max-width: 300px; padding: 11px 12px;
  background: rgba(22,24,30,0.97); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
}
.floorPanel .floorCat { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.floorPanel .catLbl { font-family: var(--serif); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.floorPanel .catSw { display: flex; gap: 6px; }
.floorPanel button {
  width: 22px; height: 15px; border-radius: 3px; cursor: pointer; padding: 0; flex: none;
  background: var(--sw); border: 2px solid rgba(255,255,255,0.18); box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.floorPanel button:hover { border-color: rgba(255,255,255,0.5); }
.floorPanel button.on { border-color: var(--accent); box-shadow: 0 0 7px rgba(var(--ui-ink),0.6); }
/* 「＋写真」＝自分の写真を床にする（色スウォッチではなくラベル付きボタン） */
.floorPanel button.floorPhotoBtn {
  width: auto; height: 15px; padding: 0 8px; flex: none; background: rgba(255,255,255,0.06);
  border: 1px dashed rgba(255,255,255,0.38); box-shadow: none; color: var(--text);
  font-size: 9px; letter-spacing: .04em; white-space: nowrap; line-height: 1;
  display: inline-flex; align-items: center;
}
.floorPanel button.floorPhotoBtn:hover { border-color: var(--accent); color: var(--accent); }
/* ノズル径の目安セレクタ（カラーの右隣） */
/* ヘッダー内に配置（想定ノズル径＋印刷プレビュー）。旧: 3Dビュー左下の絶対配置 */
#nozzleSel { display: flex; align-items: center; gap: 5px; }
/* 3Dプレビューの自動低解像度中の控えめな注記（大きい/多数の型で固まらないよう解像度を落としている印） */
#resNote {
  position: absolute; left: 12px; bottom: 98px; z-index: 6;
  font-size: 10px; color: var(--muted); background: rgba(17,20,26,0.6);
  padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); pointer-events: none;
}
#nozzleSel .nzLbl { font-size: 10px; color: var(--muted); letter-spacing: .3px; white-space: nowrap; }
#nozzleSel button { font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 6px; cursor: pointer;
  color: var(--text); background: rgba(20,20,26,0.6); border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
#nozzleSel button:hover { border-color: rgba(255,255,255,0.5); }
#nozzleSel button.on { border-color: var(--accent); color: #fff; background: rgba(var(--ui-ink),0.18); }

/* P3: 画像から輪郭を生成（モーダル） */
#impOverlay {
  display: none; position: fixed; inset: 0; z-index: 40;
  background: rgba(8, 10, 14, 0.72);
  align-items: center; justify-content: center;
}
#impDialog {
  background: var(--panel); border: 1px solid var(--accent); border-radius: 10px;
  padding: 0; width: 94vw; height: 92vh; max-width: none; max-height: none; font-size: 12.5px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  position: relative; overflow: hidden;
}
#impDialog #impTitle { position: absolute; top: 12px; left: 16px; z-index: 6; font-weight: 600; color: var(--accent); font-size: 14px; text-shadow: 0 1px 4px rgba(0,0,0,0.6); margin: 0; }
.impPreviews { display: flex; gap: 18px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; align-items: flex-start; }
.impPrevCol { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; flex: 1 1 320px; max-width: 440px; }
#impBinCol { flex: 1 1 100%; max-width: 900px; }   /* 輪郭の検出をダイアログ内で最大に広げる */
#impBinCap { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.impSrcToggle { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); cursor: pointer; }
#impSrcOpacity { width: 88px; vertical-align: middle; }
.impPrevCol figcaption { font-size: 11px; color: var(--muted); letter-spacing: 0.03em; }
.impPreviews canvas {
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 64vh;
}
#impBin { position: absolute; top: 0; left: 0; width: calc(100% - 300px); height: 100%; background: #fff; border: none; border-radius: 10px 0 0 10px; cursor: crosshair; }
#impErase, #impEraseReset {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer;
}
#impErase.on { background: var(--accent); color: #1c140f; border-color: var(--accent); font-weight: 600; }
.impEraseSub { font-size: 11px; color: var(--muted); margin-left: 4px; }
#impEraseSize { flex: 0 1 90px !important; max-width: 110px; }
#impDialog .row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
#impDialog .row .val { color: var(--accent); font-weight: 600; min-width: 30px; text-align: right; }
#impDialog .row > span:first-child { min-width: 110px; }
#impDialog input[type=range] { flex: 1; }
#impDialog input[type=number] {
  width: 64px; background: #11141a; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-size: 12.5px;
}
#impDialog select {
  background: #11141a; color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; padding: 4px 6px; font-size: 12.5px;
}
#impMsg { min-height: 18px; font-size: 12px; margin-bottom: 8px; }
#impMsg.impErr { color: #ff7a4d; }
#impMsg.impWarn { color: #e8c84a; }
#impMsg.impBusy { color: var(--muted); }
#impMsg.impBusy::before {
  content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 7px;
  border: 2px solid rgba(var(--ui-ink),0.25); border-top-color: var(--accent);
  border-radius: 50%; vertical-align: -2px;
  animation: impSpin 0.8s linear infinite;
}
@keyframes impSpin { to { transform: rotate(360deg); } }
#impDialog .btns { justify-content: flex-end; margin-bottom: 0; gap: 7px; }
#impDialog .btns button {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 6px 13px; font-size: 12.5px; cursor: pointer;
}
#impDialog .btns button.primary { background: var(--accent); color: #1c140f; border-color: var(--accent); font-weight: 600; }
#impDialog .btns button:disabled { opacity: 0.4; cursor: default; }

/* 円形状パターンのパネル */
#rpcPanel {
  display: none; position: absolute; top: 28px; left: 12px; z-index: 16;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 8px;
  padding: 12px 14px; width: 215px; font-size: 12.5px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
#rpcPanel #rpcTitle { font-weight: 600; color: var(--accent); margin-bottom: 9px; }
#rpcPanel .row { display: flex; gap: 8px; align-items: center; margin-bottom: 9px; }
#rpcPanel input[type=number] {
  width: 58px; background: #11141a; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-size: 12.5px;
  margin-left: auto;
}
#rpcPanel .note { color: var(--muted); font-size: 11px; margin-bottom: 9px; }
#rpcPanel .btns { justify-content: flex-end; margin-bottom: 0; gap: 6px; }
#rpcPanel button {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 11px; font-size: 12px; cursor: pointer;
}
#rpcPanel button.primary { background: var(--accent); color: #1c140f; border-color: var(--accent); font-weight: 600; }

/* 連続配置（グリッド連結）ダイアログ: rpcPanel と同じ体裁 */
#gridPanel {
  display: none; position: absolute; top: 28px; left: 12px; z-index: 16;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 8px;
  padding: 12px 14px; width: 215px; font-size: 12.5px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
#gridPanel #gridTitle { font-weight: 600; color: var(--accent); margin-bottom: 9px; }
#gridPanel .row { display: flex; gap: 8px; align-items: center; margin-bottom: 9px; }
#gridPanel .note { color: var(--muted); font-size: 11px; margin-bottom: 9px; }
#gridPanel .btns { justify-content: flex-end; margin-bottom: 0; gap: 6px; }
#gridPanel .btns { flex-wrap: wrap; }
#gridPanel #gridDissolve { flex-basis: 100%; }
#brushPanel .brBtns { display: flex; justify-content: flex-end; margin-top: 8px; }
#brushPanel .brBtns button { white-space: nowrap; flex: 1 1 auto; }   /* 分解・キャンセル・確定を1行に */
#brushPanel .brMode svg { vertical-align: -3px; }
#brushPanel #brTipRow { display: block; }
#brushPanel #brTipRow > span:first-child:not(.brTips) { display: block; margin-bottom: 4px; }
#brushPanel .brTips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; }
#brushPanel .brTips button { min-width: 0; }
#brushPanel .brTips button { flex: 1; padding: 4px 0; background: var(--panel2); color: var(--text); border: 1px solid var(--border); cursor: pointer; }
#brushPanel .brTips button.on { border-color: var(--accent); color: var(--accent); background: rgba(var(--ui-ink),0.15); }
#brushPanel .brTips svg { display: block; margin: 0 auto; max-width: 100%; }
#brushPanel .brTips svg[viewBox="0 0 40 26"] { width: 22px; height: 15px; }
#brushPanel #brGapRow, #brushPanel #brWRow, #brushPanel #brSmoothRow, #brushPanel #brAmpRow, #brushPanel #brMotifBox label.row { display: grid; grid-template-columns: 64px minmax(0,1fr) 58px; gap: 6px; align-items: center; }
#brushPanel #brGapRow > span:last-child, #brushPanel #brWRow > span:last-child, #brushPanel #brSmoothRow > span:last-child, #brushPanel #brAmpRow > span:last-child, #brushPanel #brMotifBox label.row > span:last-child { text-align: right; white-space: nowrap; font-size: 11.5px; }
#brushPanel #brGapRow input, #brushPanel #brWRow input, #brushPanel #brSmoothRow input, #brushPanel #brAmpRow input, #brushPanel #brMotifBox input { width: 100%; min-width: 0; }
#brushPanel #brMotifBox label.row select { grid-column: 2 / 4; }
/* ブラシの模様：模様コレクションから絵で選ぶ（依頼 2026-10-14） */
#brushPanel #brMotifPickRow { margin: 2px 0 6px; }
#brushPanel #brMotifPickBtn { width: 100%; display: flex; align-items: center; gap: 6px; padding: 5px 6px; background: var(--panel2); color: var(--text); border: 1px solid var(--accent); cursor: pointer; font-size: 12px; text-align: left; }
#brushPanel #brMotifPickBtn:disabled { border-color: var(--border); opacity: .6; cursor: default; }
#brushPanel #brMotifPickBtn svg { width: 28px; height: 20px; flex: none; color: #f0b25a; }
#brushPanel #brMotifPickBtn .brMotifTxt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
#brushPanel #brMotifPickBtn small { font-size: 10px; color: var(--accent); white-space: nowrap; }
#brushPanel #brMotifPickBtn #brMotifCurName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#brushPanel #brMotifGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 0 0 8px; }
#brushPanel #brMotifGrid[hidden] { display: none; }
#brushPanel #brMotifSaveRow, .bdMotifSaveRow { margin: 4px 0 6px; }
#brMotifSave, #bdMotifSave { font-size: 11.5px; padding: 3px 8px; border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; }
#motifIoRow { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
/* マイ設定（依頼 2026-10-14） */
#mySetSec { padding-top: 8px; padding-bottom: 8px; }
#mySetSec .mySetRow { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 6px 8px; align-items: center; font-weight: 700; font-size: 13px; }
#mySetSec select { width: 100%; min-width: 0; background: #11141a; color: var(--text); border: 1px solid var(--border); padding: 4px 6px; font-size: 12px; }
#mySetSec .mySetBtns { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 4px; margin-top: 6px; }
#mySetSec .mySetBtns button { font-size: 11px; padding: 4px 2px; white-space: nowrap; background: var(--panel2, #1d2129); color: var(--text); border: 1px solid var(--border); cursor: pointer; }
#mySetSec .mySetBtns button:disabled { opacity: .4; cursor: default; }
/* 右パネルが細いとき（窓の幅が 1440 より狭い・パネルを細くした）は、4つのボタンが入りきらず「読み込む」が右へはみ出して横に送れていた＝2つずつ2段に（入るときは今のまま・Clay 開発が見つけた 10/19） */
#mySetSec { container-type: inline-size; container-name: mySet; }
@container mySet (width < 241px) { #mySetSec .mySetBtns { grid-template-columns: 1fr 1fr; } }
#mySetSec #mySetSave { border-color: var(--accent); color: var(--accent); }
#mySetSec .note { margin: 4px 0 0; font-size: 11px; }
#motifIoRow button { flex: 1; font-size: 11px; padding: 4px 2px; white-space: nowrap; background: var(--panel2, #1d2129); color: var(--text); border: 1px solid var(--border); cursor: pointer; }   /* マイ設定のボタンと同じ見た目 */
#brushPanel #brMotifGrid button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 4px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 10.5px; cursor: pointer; min-width: 0; }
#brushPanel #brMotifGrid button:hover, #brushPanel #brMotifGrid button.on { border-color: var(--accent); }
#brushPanel #brMotifGrid button.on { background: rgba(var(--ui-ink),0.15); }
#brushPanel #brMotifGrid svg { width: 40px; height: 28px; color: #f0b25a; }
#brushPanel #brMotifGrid span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#brushPanel #brTipRow { display: grid; grid-template-columns: 52px 1fr; gap: 6px; align-items: center; }
#brushPanel #brMotifBox select { min-width: 0; }
#brushPanel .brBtns button { background: var(--panel2); color: var(--text); border: 1px solid var(--border); padding: 5px 11px; font-size: 12px; cursor: pointer; }   /* 解除は1行に（確定・キャンセルと並べない） */
#gridPanel button {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 11px; font-size: 12px; cursor: pointer;
}
#gridPanel button.primary { background: var(--accent); color: #1c140f; border-color: var(--accent); font-weight: 600; }

/* リフレクト（中心線→対象→コピー→確定／Reflect描画）のダイアログ */
#reflectPanel, #mirrorPanel {
  display: none; position: absolute; top: 28px; left: 12px; z-index: 16;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 8px;
  padding: 12px 14px; width: 232px; font-size: 12.5px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
#reflectPanel #reflectTitle, #mirrorPanel #mirrorTitle { font-weight: 600; color: var(--accent); margin-bottom: 10px; }
#reflectPanel .reflectStep, #mirrorPanel .reflectStep { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-weight: 600; }
#reflectPanel .reflectStepNo, #mirrorPanel .reflectStepNo { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #4a5160; color: #fff; font-size: 11px; flex: none; }
#reflectPanel .reflectStep.done .reflectStepNo, #mirrorPanel .reflectStep.done .reflectStepNo { background: var(--accent); color: #fff; }
#reflectPanel .reflectHint, #mirrorPanel .reflectHint { color: var(--muted); font-size: 10.5px; line-height: 1.45; margin: 0 0 10px 26px; }
/* ミラーは1つの道具（依頼 2026-11-01）：ボタンは data-tool="reflect" だけ＝押すと中の道具 mirror へ。
   ほかの2つのボタンは隠して残す（モードの hide の名前・前に作った形の開き直しはそのまま） */
#sketchTools button[data-tool="mirror"], #sketchTools button[data-tool="reflect2"] { display: none !important; }
/* 「コピー」は押すたびに点く／消える（点灯＝元の形も残す） */
#mirrorPanel #mirrorCopy.on { border-color: var(--accent); background: rgba(var(--ui-ink), .16); color: var(--text); font-weight: 600; }
#reflectPanel .reflectChk { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; cursor: pointer; }
#reflectPanel .reflectChk input { margin: 0; accent-color: var(--accent); }
#reflectPanel .btns, #mirrorPanel .btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-bottom: 0; }
#reflectPanel button, #mirrorPanel button {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 10px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
#reflectPanel button.primary, #mirrorPanel button.primary { background: var(--accent); color: #1c140f; border-color: var(--accent); font-weight: 600; }

/* 図形の数値指定パネル（長方形・楕円・スター・花形 共通） */
#shpPanel {
  display: none; position: absolute; top: 28px; left: 12px; z-index: 16;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 8px;
  padding: 12px 14px; width: 238px; font-size: 12.5px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
#shpPanel #shpTitle { font-weight: 600; color: var(--accent); margin-bottom: 9px; }
.shpNote { font-size: 10.5px; color: var(--muted); margin: 2px 0 9px; line-height: 1.45; }
#shpPanel .row { display: flex; gap: 8px; align-items: center; margin-bottom: 9px; }
/* 図形パネルの各項目: 「ラベル＋数値入力」の下に自然なスライダー（横いっぱい） */
#shpPanel .shpField { margin-bottom: 11px; }
#shpPanel .shpFieldTop { margin-bottom: 0; }
#shpPanel .shpLbl { color: var(--text); }
#shpPanel .shpField input[type=range] { width: 100%; margin-top: 6px; display: block; accent-color: var(--accent); cursor: pointer; }
#shpPanel input[type=number] {
  width: 58px; background: #11141a; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-size: 12.5px;
  margin-left: auto;
}
#shpPanel select {
  margin-left: auto; background: #11141a; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 5px; font-size: 12.5px;
}
#shpPanel .btns { justify-content: flex-end; margin-bottom: 0; gap: 6px; }
#shpPanel button {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 9px; font-size: 12px; cursor: pointer;
  white-space: nowrap;   /* 「図形に固定」等が2行に折れないように */
}
#shpPanel button.primary { background: var(--accent); color: #1c140f; border-color: var(--accent); font-weight: 600; }

/* 多角形ツールの数値指定パネル */
#rpolyPanel {
  display: none; position: absolute; top: 28px; left: 12px; z-index: 16;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 8px;
  padding: 12px 14px; width: 200px; font-size: 12.5px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
#brushPanel {
  display: none; position: absolute; top: 28px; left: 12px; z-index: 16;
  background: var(--panel); border: 1px solid #2563eb; border-radius: 8px;
  padding: 11px 13px; width: 210px; font-size: 12.5px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
#brushPanel #brTitle { font-weight: 600; color: #6ea0ff; margin-bottom: 9px; }
#brushPanel .row { display: flex; gap: 8px; align-items: center; margin-bottom: 9px; }
#brushPanel #brModeRow { gap: 6px; }
#brushPanel .brMode { flex: 1; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 12px;
  background: #11141a; color: var(--muted); border: 1px solid var(--border); }
#brushPanel .brMode:hover { border-color: rgba(255,255,255,0.4); }
#brushPanel .brMode.on { border-color: #2563eb; color: #cfe0ff; background: rgba(37,99,235,0.18); }
#brushPanel #brW { flex: 1; accent-color: #2563eb; }
#brushPanel #brWVal { min-width: 46px; text-align: right; color: var(--text); }
#brushPanel #brLockRow { cursor: pointer; }
#brushPanel #brLockRow input { accent-color: #2563eb; margin: 0; }
#brushPanel #brWRow.locked { opacity: 0.45; }
#brushPanel .brNote { font-size: 11px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
#rpolyPanel #rpTitle { font-weight: 600; color: var(--accent); margin-bottom: 9px; }
#rpolyPanel .row { display: flex; gap: 8px; align-items: center; margin-bottom: 9px; }
#rpolyPanel input[type=number] {
  width: 58px; background: #11141a; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-size: 12.5px;
  margin-left: auto;
}
#rpolyPanel .btns { justify-content: flex-end; margin-bottom: 0; gap: 6px; }
#rpolyPanel button {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 9px; font-size: 12px; cursor: pointer;
  white-space: nowrap;
}
#rpolyPanel button.primary { background: var(--accent); color: #1c140f; border-color: var(--accent); font-weight: 600; }

/* テキストツールのプロパティパネル */
#textPanel {
  display: none; position: absolute; top: 28px; left: 12px; z-index: 16;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 8px;
  padding: 12px 14px; width: 240px; font-size: 12.5px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
#textPanel #txTitle { font-weight: 600; color: var(--accent); margin-bottom: 9px; }
#textPanel .row { display: flex; gap: 8px; align-items: center; margin-bottom: 9px; }
#textPanel label { cursor: pointer; display: flex; align-items: center; gap: 5px; }
#textPanel input[type=text] {
  flex: 1; min-width: 0; background: #11141a; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; padding: 4px 7px; font-size: 13px;
}
/* 文字はスケッチの上で直接打つ（依頼 2026-10-13）：入力欄をその文字の位置に重ねる */
#txText.txOverlay { position: absolute; z-index: 15; margin: 0; padding: 0; border: 0; outline: none; resize: none; overflow: hidden;
  background: transparent; color: #9fd0ff; caret-color: var(--accent); white-space: pre; display: none; }
/* フォントの一覧は、それぞれのフォントの見た目で並べる */
#textPanel .txFontPick { position: relative; flex: 1; min-width: 0; }
#txFontBtn { width: 100%; text-align: left; padding: 4px 8px; background: var(--panel2); color: var(--text); border: 1px solid var(--border); font-size: 15px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#txFontList { display: none; position: absolute; left: 0; top: calc(100% + 2px); width: 290px; max-height: 340px; z-index: 30; background: var(--panel); border: 1px solid var(--accent); box-shadow: 0 6px 22px rgba(0,0,0,.5); flex-direction: column; }
#txFontList.open { display: flex; }
#txFontFilter { margin: 6px; padding: 4px 6px; font-size: 12px; background: var(--panel2); color: var(--text); border: 1px solid var(--border); }
#txFontItems { overflow-y: auto; }
#txFontItems .fpItem { padding: 6px 10px; cursor: pointer; border-top: 1px solid var(--border); }
#txFontItems .fpItem:hover, #txFontItems .fpItem.on { background: rgba(var(--ui-ink),0.18); }
#txFontItems .fpName { display: block; font-size: 11px; color: var(--muted); font-family: inherit; }
#txFontItems .fpSample { display: block; font-size: 20px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#textPanel select {
  flex: 1; min-width: 0; max-width: 150px; background: #11141a; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 4px; font-size: 12.5px;
}
#textPanel input[type=number] {
  width: 58px; background: #11141a; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-size: 12.5px;
  margin-left: auto;
}
#textPanel input[type=checkbox] { accent-color: var(--accent); margin: 0; }
#textPanel .note { color: var(--muted); font-size: 11px; margin-bottom: 9px; }
#textPanel .btns { justify-content: flex-end; margin-bottom: 0; gap: 6px; }
#textPanel .txOutRow { margin-bottom: 8px; }
#textPanel .txOutRow { flex-wrap: wrap; }
#textPanel .txOutRow button { flex: 1; white-space: nowrap; }
#textPanel #txOutline { flex-basis: 100%; }
#textPanel .txOutRow button.on { background: var(--accent); border-color: var(--accent); color: #fff; }   /* 文字のままエンボス・カッター中 */
#textPanel .txAlignBtns button svg { display: block; }
#textPanel button {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 11px; font-size: 12px; cursor: pointer;
}
#textPanel button.primary { background: var(--accent); color: #1c140f; border-color: var(--accent); font-weight: 600; }
/* 複数行の内容入力（改行できる） */
#textPanel textarea#txText {
  flex: 1; min-width: 0; background: #11141a; color: var(--text); font-family: inherit;
  border: 1px solid var(--border); border-radius: 4px; padding: 5px 7px; font-size: 13px;
  line-height: 1.4; resize: vertical; min-height: 36px; max-height: 160px;
}
/* フォント読み込み（＋）ボタン＝購入/追加フォントのファイル取り込み */
#textPanel #txFontLoad { padding: 3px 9px; font-size: 15px; line-height: 1; flex: none; }
/* サイズ・字間・行間＝スライダー＋現在値 */
#textPanel .txSlide { display: flex; align-items: center; gap: 8px; }
#textPanel .txSlide input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); cursor: pointer; }
#textPanel .txVal { min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
#textPanel .txUnit { color: var(--muted); font-size: 11px; width: 16px; }
/* 揃え（左/中/右）＝トグルボタン */
#textPanel .txAlignBtns { margin-left: auto; display: inline-flex; gap: 4px; }
#textPanel .txAlignBtns button { padding: 4px 0; width: 32px; font-size: 12px; }
#textPanel .txDirBtns button { width: auto; padding: 4px 8px; white-space: nowrap; }   /* 横書き・縦書きは1行で */
#textPanel .txAlignBtns button.on { background: var(--accent); color: #1c140f; border-color: var(--accent); font-weight: 600; }

/* フレームツールのプロパティパネル */
#framePanel {
  display: none; position: absolute; top: 28px; left: 12px; z-index: 16;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 8px;
  padding: 12px 14px; width: 240px; font-size: 12.5px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
#framePanel #frTitle { font-weight: 600; color: var(--accent); margin-bottom: 9px; }
/* スカラップ（飾り縁）パネル */
#scallopPanel {
  display: none; position: absolute; top: 28px; left: 12px; z-index: 16;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 8px;
  padding: 12px 14px; width: 230px; font-size: 12.5px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
#scallopPanel #scTitle { font-weight: 600; color: var(--accent); margin-bottom: 9px; }
#scallopPanel .note { color: var(--muted); font-size: 11px; margin-bottom: 9px; }
#scallopPanel .row { display: flex; gap: 8px; align-items: center; margin-bottom: 9px; flex-wrap: wrap; }
#scallopPanel label { cursor: pointer; display: flex; align-items: center; gap: 5px; }
#scallopPanel input[type=radio] { accent-color: var(--accent); margin: 0; }
#scallopPanel input[type=checkbox] { accent-color: var(--accent); margin: 0; }
#scallopPanel #scBalRow:has(input:disabled) { opacity: .4; }   /* 角に山を置かないときは使わない */
#scallopPanel input[type=number] {
  width: 60px; margin-left: auto; background: #11141a; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; padding: 2px 5px; font-size: 12px;
}
#scallopPanel .btns { justify-content: flex-end; margin-bottom: 0; gap: 6px; }
#scallopPanel .btns button {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 11px; font-size: 12px; cursor: pointer;
}
#scallopPanel .btns button.primary { background: var(--accent); color: #1c140f; border-color: var(--accent); font-weight: 600; }
/* 線のプロパティ・パネルは廃止（面と線プロパティに一本化） */
/* 外側/内側の指定状況の行。指定済み＝緑点灯（スケッチ上の緑グローと同色） */
#framePanel .frPickRow {
  display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel2); font-size: 12px;
}
#framePanel .frPickRow.filled { border-color: rgba(255,255,255,0.5); }   /* 指定済み＝白（緑は Ornament の色・依頼 2026-10-16） */
#framePanel .frDot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--muted); color: #fff; opacity: 0.45;
}
#framePanel .frPickRow.filled .frDot { opacity: 1; background: #fff; box-shadow: 0 0 5px currentColor; }
#framePanel .frPickLbl { flex: none; font-weight: 600; }
#framePanel .frPickVal { flex: 1; color: var(--muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#framePanel .frPickRow.filled .frPickVal { color: var(--text); font-style: normal; }
#framePanel .frPickClear {
  display: none; background: none; border: none; color: var(--muted);
  cursor: pointer; padding: 0 3px; font-size: 13px; line-height: 1; border-radius: 4px; flex: none;
}
#framePanel .frPickRow.filled .frPickClear { display: block; }
#framePanel .frPickClear:hover { color: #f0837e; }
#framePanel .row { display: flex; gap: 10px; align-items: center; margin-bottom: 9px; flex-wrap: wrap; }
#framePanel label { cursor: pointer; display: flex; align-items: center; gap: 5px; }
#framePanel input[type=radio] { accent-color: var(--accent); margin: 0; }
#framePanel input[type=number] {
  width: 58px; background: #11141a; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-size: 12.5px;
  margin-left: auto;
}
#framePanel .note { color: var(--muted); font-size: 11px; margin-bottom: 9px; }
#framePanel .btns { justify-content: flex-end; margin-bottom: 0; gap: 6px; }
#framePanel button {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 11px; font-size: 12px; cursor: pointer;
}
#framePanel button.primary { background: var(--accent); color: #1c140f; border-color: var(--accent); font-weight: 600; }

/* 下絵キャンバスのプロパティパネル */
#canvasPanel {
  display: none; position: absolute; top: 28px; left: 12px; z-index: 16;
  background: var(--panel); border: 1px solid var(--accent2); border-radius: 8px;
  padding: 12px 14px; width: 230px; font-size: 12.5px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
#canvasPanel #cvTitle { font-weight: 600; color: var(--accent2); margin-bottom: 9px; }
#canvasPanel .row { display: flex; gap: 8px; align-items: center; margin-bottom: 9px; }
#canvasPanel input[type=range] { flex: 1; accent-color: var(--accent2); }
#canvasPanel input[type=checkbox] { accent-color: var(--accent2); margin: 0; }
#canvasPanel .btns { justify-content: flex-end; margin-bottom: 0; gap: 6px; }
#canvasPanel button {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 11px; font-size: 12px; cursor: pointer;
}
#canvasPanel button.primary { background: var(--accent2); color: #0c1828; border-color: var(--accent2); font-weight: 600; }
.objChip.cCanvas { background: rgba(155,196,255,0.12); color: #9bc4ff; border-color: rgba(155,196,255,0.4); }

/* 出力設定ダイアログ: STL書き出しの直前に反転を確認する */
#expPanel {
  /* スケッチ（オブジェクト）ブラウザの近く＝左下に出す */
  display: none; position: fixed; left: 52px; bottom: 80px; z-index: 40;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 10px;
  padding: 14px 16px; width: 280px; font-size: 12.5px;
  box-shadow: 0 8px 26px rgba(0,0,0,.55);
}
#expPanel #expTitle { font-weight: 600; color: var(--accent); margin-bottom: 10px; font-size: 13px; }
#expPanel .note { margin: 4px 0 12px; }
#expPanel .btns { display: flex; justify-content: flex-end; gap: 6px; }
#expPanel button {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 12px; font-size: 12.5px; cursor: pointer;
}
#expPanel button.primary { background: var(--accent); color: #1c140f; border-color: var(--accent); font-weight: 600; }

/* パネル境界のスプリッター（ドラッグで幅変更） */
.splitter {
  width: 5px; flex: none; cursor: col-resize;
  background: var(--border); opacity: 0.55; transition: opacity .15s, background .15s;
}
.splitter:hover, .splitter:active { background: var(--accent); opacity: 1; }

/* 描画直後の役割ダイアログ（自動判定の確認・変更） */
/* パネル内包の役割選択（描画ダイアログに内包。確定と同時に役割も決まる）。
   「役割」ラベルは独立行、ボタン3つはその下に等幅で並べてはみ出さないように。
   ※#shpPanel button（ID指定）より強くするため、パネルIDを付けて上書きする */
.roleLbl { margin: 0 0 5px; }
.roleSeg { display: flex; gap: 4px; margin-bottom: 10px; }
/* 図形ダイアログ（描いた直後に出る数値の欄）の中で役割も選ぶ（依頼 2026-10-12）＝別の役割ポップアップは出さない */
/* 役割は4つ（カッター・エンボス・模様・Ornament・依頼 2026-10-16）＝図形・多角形・文字のダイアログは2つずつ2段に */
#shpPanel .roleSeg, #rpolyPanel .roleSeg, #textPanel .roleSeg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 「未設定」は出さない（依頼 2026-10-16）：役割はカッター・エンボス・模様・Ornament の4つ。文字は同じボタンをもう一度で外れる */
.roleSeg button[data-role="none"], #rolePop #rpNone, #textPanel #txRoleNone { display: none !important; }
#shpPanel .roleSeg button[data-role="motif"].on, #rpolyPanel .roleSeg button[data-role="motif"].on { background: #f0b25a; border-color: #f0b25a; color: #1c140f; font-weight: 600; }
#shpPanel .roleSeg button, #rpolyPanel .roleSeg button, #textPanel .roleSeg button {
  flex: 1; min-width: 0; padding: 4px 2px; font-size: 11px;
  white-space: nowrap; border-radius: 6px;
}
#shpPanel .roleSeg button[data-role="cutter"], #rpolyPanel .roleSeg button[data-role="cutter"] { color: #f0837e; }
#shpPanel .roleSeg button[data-role="cutter"].on, #rpolyPanel .roleSeg button[data-role="cutter"].on { background: var(--accent); border-color: var(--accent); color: #1c140f; font-weight: 600; }
#shpPanel .roleSeg button[data-role="emboss"], #rpolyPanel .roleSeg button[data-role="emboss"] { color: #9fd0ff; }
#shpPanel .roleSeg button[data-role="emboss"].on, #rpolyPanel .roleSeg button[data-role="emboss"].on { background: var(--accent2); border-color: var(--accent2); color: #0c1828; font-weight: 600; }
#rolePop {
  position: absolute; z-index: 18;
  display: flex; gap: 4px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
  padding: 5px; box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
#rolePop button {
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 10px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
#rolePop #rpCutter { color: #f0837e; }
#rolePop #rpCutter.on { background: var(--accent); border-color: var(--accent); color: #1c140f; font-weight: 600; }
#rolePop #rpEmboss { color: #9fd0ff; }
#rolePop #rpEmboss.on { background: var(--accent2); border-color: var(--accent2); color: #0c1828; font-weight: 600; }
#rolePop #rpNone { color: var(--muted); }
#rolePop #rpNone.on { background: var(--muted); border-color: var(--muted); color: #14161c; font-weight: 600; }
#rolePop #rpMotif { color: #f0b25a; }   /* 縁取りに登録＝基準の模様の金色（依頼 2026-10-12） */
#rolePop #rpMotif.on { background: #f0b25a; border-color: #f0b25a; color: #1c140f; font-weight: 600; }
.roleSeg button[data-role="motif"] { color: #f0b25a; }

/* 右クリックメニュー（ロック/ロック解除） */
#ctxMenu {
  position: fixed; z-index: 60;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 7px;
  padding: 4px; box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
#ctxMenu button {
  display: block; width: 100%; text-align: left;
  background: none; border: none; color: var(--text);
  padding: 6px 12px; font-size: 12.5px; cursor: pointer; border-radius: 5px; white-space: nowrap;
}
#ctxMenu button:hover { background: var(--accent2); color: #0c1828; }
/* 項目のピクトグラム（STL書き出しメニュー等）: 文字のベースラインに揃えて少し間隔 */
#ctxMenu button svg { vertical-align: -3px; margin-right: 7px; }
#ctxMenu .ctxSep { height: 1px; background: var(--border); margin: 3px 6px; }
/* 役割項目の色分け: カッター=カーマイン／エンボス=青（チップと同じ配色） */
#ctxMenu button.ctxCutter::before, #ctxMenu button.ctxEmboss::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: 0;
}
#ctxMenu button.ctxCutter { color: #f0837e; }
#ctxMenu button.ctxCutter::before { background: var(--accent); }
#ctxMenu button.ctxEmboss { color: #9fd0ff; }
#ctxMenu button.ctxEmboss::before { background: var(--accent2); }
#ctxMenu button.ctxCutter:hover { background: var(--accent); color: #1c140f; }
#ctxMenu button.ctxEmboss:hover { background: var(--accent2); color: #0c1828; }
#ctxMenu button.ctxBase { color: #f2c9c4; }
#ctxMenu button.ctxBase::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; background: #f2c9c4;
}
#ctxMenu button.ctxBase:hover { background: #f2c9c4; color: #1c140f; }
#ctxMenu button.ctxDel { color: #ff6b6b; }   /* 削除は赤系で区別 */
#ctxMenu button.ctxDel:hover { background: #e0413f; color: #fff; }

/* オブジェクトブラウザ（スケッチ下・CAD風） */
#objBrowser {
  position: absolute; right: 10px; z-index: 5;
  display: flex; flex-direction: column;
  background: rgba(17, 20, 26, 0.55); border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 10px; overflow: hidden;
}
/* 保存結果トースト（成功=青系／キャンセル・失敗=琥珀）。数秒で自動で消える */
#scToast {
  position: fixed; left: 50%; bottom: 46px; transform: translateX(-50%) translateY(8px);
  z-index: 80; max-width: 80vw;
  font-size: 12.5px; font-weight: 600; color: #cfe6ff;
  background: rgba(17, 20, 26, 0.94); border: 1px solid var(--accent2);
  border-radius: 9px; padding: 9px 16px; pointer-events: none;
  opacity: 0; transition: opacity 0.18s, transform 0.18s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}
#scToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#scToast.err { color: #ffd8a8; border-color: #e8590c; }
/* タブを閉じる前の3択ダイアログ */
#tabCloseOverlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.45);
}
#tabCloseDlg {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; font-size: 12.5px;   /* 幅とボタンの段はダイアログの基準（DIALOG_STANDARD・本社 10/21） */
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
}
#tcTitle { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
#tcMsg { font-size: 12.5px; color: var(--muted); margin-bottom: 18px; line-height: 1.5; }
#tcBtns button {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 7px; cursor: pointer; font-size: 12px;   /* ほかのダイアログのボタンと同じ字の大きさ */
}
#tcBtns button:hover { border-color: var(--accent2); }
#tcBtns button.danger { color: #f0837e; }
#tcBtns button.danger:hover { background: var(--attention); border-color: var(--attention); color: #1c140f; }
/* 「保存」の分岐ダイアログ（このタブ／すべて）＝tabCloseと同じ見た目 */
#saveChoiceOverlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); }
#saveChoiceDlg { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; min-width: 320px; max-width: 92vw; box-shadow: 0 12px 40px rgba(0,0,0,0.55); }
#saveChoiceTitle { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
#scMsg { font-size: 12.5px; color: var(--muted); margin-bottom: 18px; line-height: 1.5; }
#scBtns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
#scBtns button { background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 8px 14px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
#scBtns button:hover { border-color: var(--accent2); }
#scAllTabs { border-color: var(--accent2) !important; color: #cfe6ff; }
#nozzleSel #nozzlePenBtn { margin-left: 2px; color: var(--muted); white-space: nowrap; }
#nozzleSel #nozzlePenBtn:hover { border-color: var(--accent2); color: var(--text); }
#nozzleSel #nozzlePenBtn.on { border-color: #39ff14; background: rgba(57,255,20,0.18); color: #d6ffca; box-shadow: 0 0 9px rgba(57,255,20,0.6); }   /* ペンを持っている＝フリーハンド中 */
/* 印刷プレビューの緑警告文（ノズルセレクタの上・近辺）。欠け検出時だけ表示 */
#thinWarn { position: absolute; left: 122px; bottom: 94px; z-index: 8; max-width: 250px; font-size: 11px; line-height: 1.45;
  color: #8dff6e; background: rgba(16,34,12,0.86); border: 1px solid rgba(57,255,20,0.6); border-radius: 7px; padding: 6px 9px;
  text-shadow: 0 0 6px rgba(57,255,20,0.55); box-shadow: 0 0 12px rgba(57,255,20,0.28); pointer-events: none; }
/* 重度（完全欠落）がある時＝警告文をオレンジに（緑=軽度だけの時は緑のまま） */
#thinWarn.severe { color: #ffd9ad; background: rgba(40,22,6,0.9); border-color: rgba(255,122,0,0.75); text-shadow: 0 0 6px rgba(255,122,0,0.55); box-shadow: 0 0 14px rgba(255,122,0,0.4); }
/* 凡例（色の意味） */
#thinLegend { margin-top: 5px; font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
#thinLegend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
#thinLegend .sw.sev { background: #ff7a00; box-shadow: 0 0 5px rgba(255,122,0,0.8); }
#thinLegend .sw.min { background: #39ff14; box-shadow: 0 0 5px rgba(57,255,20,0.7); }
/* 共通ミニツールバー（スケッチ/3D/画像トレースの下部中央: パン・戻る・やり直し・ズーム±・全体） */
.miniBar {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; z-index: 7;
  background: rgba(17, 20, 26, 0.78); border: 1px solid var(--border);
  border-radius: 9px; padding: 4px 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.miniBar button {
  width: 30px; height: 30px; padding: 0; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.miniBar button:hover { border-color: var(--accent2); color: var(--accent2); }
.miniBar button.on { background: var(--accent2); color: #0c1828; border-color: var(--accent2); }
.miniBar button.off { opacity: 0.45; }   /* ガイド非表示中は薄く */
.miniBar .mbSep { width: 1px; background: var(--border); margin: 3px 2px; align-self: flex-end; height: 28px; }
/* ボタン上にショートカットキーを表示する縦セル */
.miniBar { align-items: flex-end; }
.miniBar .mbCell { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; }
.miniBar .mbKey { font-size: 8.5px; line-height: 10px; min-height: 10px; color: var(--muted); white-space: nowrap; letter-spacing: .2px; }
#mbSketch { bottom: auto; }          /* 位置はfitCanvasが設定（キャンバス下辺の内側） */
#mb3d { bottom: 56px; }
/* ミニバー・スケッチブラウザを左にしまう（依頼 2026-10-15）：しまうと左端に小さな付箋。押すと出す */
.miniBar button.mbFold { width: 18px; background: transparent; border-color: transparent; color: var(--muted); }
.miniBar button.mbFold:hover { color: var(--text); border-color: var(--border); }
.miniBar.folded, #objBrowser.folded { display: none !important; }
.objFold { flex: none; width: 20px; height: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--muted); cursor: pointer; }
.objFold:hover { color: var(--text); border-color: var(--border); }
#floorSel .fcFold { vertical-align: middle; margin-right: 4px; background: rgba(20,20,26,0.72); border-color: var(--border); }
#floorSel.folded, #themeSel.folded { display: none !important; }
.foldDock { position: absolute; z-index: 8; display: flex; flex-direction: row; align-items: flex-end; gap: 6px; pointer-events: none; }   /* 下の辺に左から並べる（あとでしまったものほど右）（依頼 2026-10-15） */
#skDock, #tdDock { left: 8px; bottom: 0; }   /* 各画面のいちばん下の辺 */
#threeWrap.hasDock #floorSel { bottom: 58px; } #threeWrap.hasDock #themeSel { bottom: 36px; }   /* 付箋があるときは床・色を付箋の上へ */
.foldTab { pointer-events: auto; height: 22px; padding: 0 10px 0 8px; display: flex; flex-direction: row; align-items: center; gap: 5px;
  background: rgba(17,20,26,.9); color: var(--text); border: 1px solid var(--border); border-bottom: 0; border-top: 3px solid var(--accent); border-radius: 6px 6px 0 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,.35); font-size: 10.5px; letter-spacing: .06em; cursor: pointer; animation: foldTabIn .18s ease-out; }
.foldTab[hidden] { display: none; }
.foldTab span { white-space: nowrap; }
.foldTab svg { transform: rotate(-90deg); }   /* 上向きの矢印＝押すと出る */
.foldTab:hover { color: var(--accent); }
@keyframes foldTabIn { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
/* 重い設計のハング防止: 部品が多い時、3D自動構築を止めて手動ボタンを出すオーバーレイ */
#heavyHold {
  position: absolute; inset: 0; z-index: 8;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(20,22,28,0.72); text-align: center; padding: 24px;
}
#heavyHold[hidden] { display: none; }
#heavyHold .hhMsg { color: var(--text); font-size: 13px; line-height: 1.75; max-width: 300px; }
#heavyHold #heavyBuildBtn {
  padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--panel2); color: var(--text); border: 1px solid var(--accent); border-radius: 8px;
}
#heavyHold #heavyBuildBtn:hover { background: var(--accent); color: #fff; }
/* ホームビュー単独ボタン（3Dビュー左上・見出し「3Dビュー」の下）。スケッチエリアの図形全体表示(#fitBtn)と
   左右対称。見た目・大きさ・高さを揃える。パン=右ドラッグ/スペース・ズーム=ホイールで代替。 */
.viewHomeBtn {
  position: absolute; left: 12px; top: 30px; z-index: 7;
  display: flex; align-items: center; justify-content: center; width: 32px; height: 28px;
  color: #b9c0d0; background: linear-gradient(150deg, #242a38 0%, #161a22 100%);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 7px; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
.viewHomeBtn:hover { color: #fff; border-color: rgba(var(--ui-ink),0.55); }
/* 文脈ボタン: 台が無いカッターを選ぶと図形の近くに出る「＋スタンプ台をつくる」 */
#bedCards { position: absolute; inset: 0; z-index: 9; overflow: hidden; pointer-events: none; }
.bedCard {
  position: absolute; pointer-events: auto; box-sizing: border-box; width: max-content; max-width: min(300px, calc(100% - 8px));
  padding: 8px 12px; font-size: 12px; line-height: 1.45; color: #ffd8a8;
  background: rgba(120, 63, 4, 0.95); border: 1px solid #e8590c; box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.bedCard .bcTitle { font-weight: 700; }
.bedCard button { display: block; width: 100%; margin-top: 6px; padding: 4px 8px; font: inherit; font-weight: 700; color: #fff; background: var(--accent); border: 0; cursor: pointer; }
#baseHintBtn {
  display: none; position: absolute; z-index: 9;
  align-items: center; gap: 5px;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--accent);
  padding: 2px 6px; font-size: 10.5px; line-height: 1.25; cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
#baseHintBtn .bhTxt { opacity: .9; }
/* 左右に振れるスイッチ（左＝台なし/OFF・右＝台あり/ON）。角丸は使わず四角で。 */
#baseHintBtn .bhSw { position: relative; width: 24px; height: 12px; flex: 0 0 auto;
  background: var(--panel); border: 1px solid rgba(255,255,255,0.28); transition: background .15s; }
#baseHintBtn .bhKnob { position: absolute; top: 1px; left: 1px; width: 8px; height: 8px;
  background: #fff; transition: left .15s; }
#baseHintBtn[data-on="true"] .bhSw { background: var(--accent); border-color: var(--accent); }
#baseHintBtn[data-on="true"] .bhKnob { left: 14px; }
#baseHintBtn:hover { border-color: var(--accent); }
/* スタンプ台のON/OFFは文脈ボタン＋右クリックへ移動＝プロパティからは隠して整理 */
#baseToggleRow { display: none !important; }
#mbTrace { bottom: 14px; left: calc(50% - 150px); }   /* 右300pxパネル分だけ左へ寄せてキャンバス中央に */
/* ミニバー右の「元画像を下敷き表示」（チェック＋濃さスライダー）。他ボタンと高さを合わせる */
#mbTrace .mbSrc { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted, #9aa0aa); white-space: nowrap; cursor: pointer; padding: 0 0 5px; align-self: flex-end; }
#mbTrace .mbSrc input { accent-color: var(--accent2, #2e86ff); cursor: pointer; margin: 0; }
#mbTrace .mbSrcOpacity { width: 74px; align-self: center; margin-bottom: 3px; }
/* 型が170mm超えの警告バナー（スケッチエリア上部・見逃さない位置に） */
#bigWarn {
  position: absolute; top: 34px; left: 50%; transform: translateX(-50%);
  z-index: 8; max-width: 92%; text-align: center;
  font-size: 12px; font-weight: 600; color: #ffd8a8;
  background: rgba(120, 63, 4, 0.88); border: 1px solid #e8590c;
  border-radius: 8px; padding: 6px 14px; pointer-events: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
/* オブジェクト一覧の高さ調節ハンドル（上端をドラッグ） */
#objResize {
  flex: none; height: 10px; margin: -8px -10px 3px; cursor: ns-resize;
  display: flex; align-items: center; justify-content: center; touch-action: none;
}
#objResize::before {
  content: ''; width: 34px; height: 3px; border-radius: 3px;
  background: var(--border); transition: background 0.12s;
}
#objResize:hover::before { background: var(--accent2); }
#objHead { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; flex: none; position: relative; }
#objTitle {
  font-size: 10.5px; font-weight: 600; color: var(--muted); letter-spacing: 1px; margin-right: auto;
}
/* 開閉トグル: ブラウザ上端の中央に大きめのつまみとして置く */
#objToggle {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  background: var(--panel2); color: var(--accent2); border: 1px solid var(--border);
  border-radius: 7px; padding: 3px 22px; font-size: 15px; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
#objToggle:hover { border-color: var(--accent2); color: #fff; background: rgba(46,196,255,0.15); }
/* フォルダ追加: 一覧の黄色フォルダに合わせた「黄色フォルダ＋プラス」アイコン（文字なし） */
#newFolderBtn { display: inline-flex; align-items: center; padding: 3px 5px; color: var(--warn); }
#newFolderBtn:hover { color: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
#newFolderBtn svg { display: block; }
/* 畳んだ状態: 一覧・高さ調節グリップ・フォルダ追加ボタンを隠す（開いている時だけ操作できる） */
#objBrowser.collapsed #objList,
#objBrowser.collapsed #objResize,
#objBrowser.collapsed #newFolderBtn { display: none; }
#objBrowser.collapsed #objHead { margin-bottom: 0; }
#newSetBtn {
  background: var(--panel2); color: var(--accent); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 9px; font-size: 11px; cursor: pointer; white-space: nowrap;
}
#newSetBtn:hover:not(:disabled) { border-color: var(--accent); }
#newSetBtn:disabled { opacity: 0.35; cursor: default; }
#objList { overflow-y: auto; flex: 1; user-select: none; -webkit-user-select: none; }   /* ドラッグ（フォルダ出し入れ・並べ替え）で行の文字が選択されるのを防ぐ */
#objList input, #objList .objRename { user-select: text; -webkit-user-select: text; }   /* リネーム入力欄は選択・編集可のまま */
/* STL書き出し: ヘッダーの保存系の並びに配置（保存と勘違いされないよう出力系を1箇所に）。
   出力の主ボタンとしてアクセント色で目立たせる */
#exportShownBtn { color: var(--accent); }
#objList .objEmpty { font-size: 11.5px; color: var(--muted); padding: 4px 2px; }
.objRow {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 6px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.objRow:hover { background: var(--panel2); }
.objRow.sel { background: rgba(77, 163, 255, 0.16); outline: 1px solid var(--accent2); }
.objRow.lockd { cursor: default; }
.objRow.dragging { opacity: 0.45; }
.objFolder.dropInto { outline: 2px solid var(--accent2); outline-offset: -2px; background: rgba(77, 163, 255, 0.16); border-radius: 6px; }
.objRootDrop { display: none; }
#objList.objDragging .objRootDrop { display: block; margin-top: 6px; padding: 8px 6px; text-align: center; font-size: 11.5px; color: var(--muted); border: 1.5px dashed var(--border); border-radius: 6px; }
#objList.objDragging .objRootDrop.dropInto { color: var(--text); border-color: var(--accent2); background: rgba(77, 163, 255, 0.16); }
.objRow .objEye {
  background: none; border: none; cursor: pointer; font-size: 13px;
  padding: 0; width: 20px; color: var(--text); flex: none;
}
.objRow.hid .objEye { opacity: 0.3; }
.objRow.hid .objNm { color: var(--muted); text-decoration: line-through; }
.objRow .objNm { flex: none; min-width: 64px; }
.objRow .objChips { flex: 1; display: flex; gap: 4px; flex-wrap: wrap; }
.objChip {
  font-size: 10px; padding: 1px 7px; border-radius: 9px; white-space: nowrap;
  border: 1px solid transparent;
}
.objChip.cCut  { background: rgba(240,72,46,0.2);  color: #F0482E; border-color: rgba(240,72,46,0.5); }   /* 役割「カッター」の色＝どのモードでも赤（役割の色は全モード共通・直子さん決定 10/19） */
.objChip.cBase { background: rgba(242,201,196,0.14); color: #f2c9c4; border-color: rgba(242,201,196,0.45); }
.objChip.cEmb  { background: rgba(77,163,255,0.16); color: #9fd0ff; border-color: rgba(77,163,255,0.45); }
.objChip.off { opacity: 0.35; border-style: dashed; }   /* 出力OFFのときは薄く */
.objChip.cNone { background: rgba(154,163,178,0.12); color: var(--muted); border-color: rgba(154,163,178,0.4); }
.objChip.cMotif { background: rgba(240,178,90,0.14); color: #f0b25a; border-color: rgba(240,178,90,0.5); }
.objChip.cStem { background: rgba(232,200,74,0.12); color: #e8c84a; border-color: rgba(232,200,74,0.45); }
.objChip.cText { background: rgba(186,160,232,0.14); color: #c9b3ef; border-color: rgba(186,160,232,0.5); }
.objRow .objLock {
  background: none; border: none; cursor: pointer; font-size: 12px;
  padding: 0 2px; flex: none;
}
/* ロック解除中: 薄い白（そこに鍵があると分かる程度）。ホバーでくっきり */
.objRow:not(.lockd) .objLock { color: #fff; opacity: 0.5; }
.objRow:not(.lockd) .objLock:hover { opacity: 1; }
/* ロック中: 青ではっきり */
.objRow.lockd .objLock { opacity: 1; color: var(--accent2); }
.objSet .objSetLock, .objRow .objBaseLock { color: var(--accent2); display: inline-flex; align-items: center; flex: none; }
.objRow .objEye svg, .objRow .objLock svg { display: block; }
.objRow.ind1, .objSet.ind1 { margin-left: 18px; }
.objRow.ind2 { margin-left: 36px; }
/* セット（同じ外形の一組: エンボス→スタンプ台→カッター） */
.objSet {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 6px; border-radius: 6px; cursor: pointer; font-size: 12px;
  color: rgb(var(--ui-ink)); font-weight: 600;   /* セット名は3Dテーマ色に連動 */
}
.objSet:hover { background: var(--panel2); }
.objSet .objEye {
  background: none; border: none; cursor: pointer; padding: 0; width: 20px;
  color: var(--text); flex: none; display: flex; align-items: center;
}
.objSet .objEye svg { display: block; }
.objSet.hid { opacity: 0.6; }
.objSet.hid .objEye { opacity: 0.5; }
.objSet.hid .objNm { text-decoration: line-through; }
/* セットが選択中: フォルダと同じく水色でハイライト */
.objSet.sel { background: rgba(77, 163, 255, 0.16); outline: 1px solid var(--accent2); }
/* セットのロックボタン（目玉と並べる。図形行・フォルダと同じ見た目） */
.objSet .objLock {
  background: none; border: none; cursor: pointer; padding: 0 2px; width: 20px;
  color: #fff; opacity: 0.5; flex: none; display: flex; align-items: center;
}
.objSet .objLock:hover { opacity: 1; color: var(--accent2); }
.objSet .objLock svg { display: block; }
.objSet .objTri {
  background: none; border: none; cursor: pointer; padding: 0; width: 12px;
  color: var(--muted); display: flex; align-items: center;
}
/* 名前のインライン編集（ダブルクリック） */
.objRename {
  width: 110px; background: #11141a; color: var(--text);
  border: 1px solid var(--accent2); border-radius: 4px;
  padding: 1px 5px; font-size: 12px; outline: none;
}
/* スタンプ台の合成行（カッター線から派生） */
.objRow.derived .objNm { color: var(--muted); font-style: italic; }
/* フォルダ行 */
.objFolder {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 6px; border-radius: 6px; cursor: pointer; font-size: 12px;
  color: var(--text); font-weight: 600;
}
.objFolder:hover { background: var(--panel2); }
.objFolder.sel { background: rgba(77, 163, 255, 0.16); outline: 1px solid var(--accent2); }
.objFolder .objTri {
  background: none; border: none; cursor: pointer; padding: 0; width: 12px;
  color: var(--muted); display: flex; align-items: center;
}
.objFolder .objFolderIc { color: var(--warn); display: flex; align-items: center; }
/* 画像トレース由来フォルダの「画像から再編集」ボタン（薄いツールアイコン） */
.objFolder .objTraceEdit {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  color: var(--text); opacity: 0.4; flex: none;
  display: flex; align-items: center;
}
.objFolder .objTraceEdit:hover { opacity: 1; color: var(--accent2); }
.objFolder .objTraceEdit svg { display: block; }
/* フォルダの目玉・ロック（中身すべてに一括適用）。図形行と同じ左位置・同じ大きさに揃える */
.objFolder .objNm { flex: 1; min-width: 0; }
.objFolder .objEye, .objFolder .objLock {
  background: none; border: none; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center; color: var(--text);
}
.objFolder .objEye { width: 20px; padding: 0; opacity: 0.7; }
.objFolder .objLock { padding: 0 2px; color: #fff; opacity: 0.5; }
.objFolder .objEye:hover, .objFolder .objLock:hover { opacity: 1; color: var(--accent2); }
.objFolder .objEye svg, .objFolder .objLock svg { display: block; }

.statusbar {
  display: flex; gap: 18px; padding: 5px 14px; background: var(--panel);
  border-top: 1px solid var(--border); color: var(--muted); font-size: 11.5px;
}
.statusbar b { color: var(--text); font-weight: 600; }
aside {
  /* 既定は画面全体の約1/5（狭すぎ・広すぎは下限/上限でガード）。スプリッターで変更可 */
  width: clamp(240px, 20vw, 400px);
  background: var(--panel); border-left: 1px solid var(--border);
  padding: 16px 20px; overflow-y: auto; flex-shrink: 0;
}
/* エリアの正式名（スケッチエリア/3Dビューのh2と同じトーン） */
aside .asideTitle {
  font-size: 11px; font-weight: 600; color: var(--muted);
  letter-spacing: 1px; margin-bottom: 12px;
}
#profileSel, #stampSideSel, #stampStyleSel, #stemSel {
  width: 100%; background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 7px 8px; font-size: 13px; cursor: pointer;
}
/* 出力ON/OFFスイッチ: 各タブ名の真上に1つずつ（タブを開かずに切り替えられる） */
.tabSwitches { display: flex; margin-bottom: 4px; }
.tabSwitches .tabSw {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 10.5px; color: var(--muted); cursor: pointer; padding: 2px 0;
}
.tabSwitches input { accent-color: var(--ok); margin: 0; }
.tabSwitches input:disabled { opacity: 0.35; cursor: default; }
.tabSwitches input:disabled ~ span { opacity: 0.45; }

.modeTabs {
  display: flex; margin-bottom: 14px; gap: 4px;
  background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 9px; padding: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}
.modeTabs button {
  flex: 1; background: transparent; color: var(--muted); border: none; border-radius: 6px;
  padding: 8px 0; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: color .12s, background .12s, box-shadow .12s;
}
.modeTabs button:hover { color: var(--text); }
.modeTabs button.active {
  background: linear-gradient(150deg, color-mix(in srgb, rgb(var(--ui-ink)) 78%, #fff) 0%, color-mix(in srgb, rgb(var(--ui-ink)) 55%, #000) 100%);
  color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(var(--ui-ink),0.45), inset 0 1px 0 rgba(255,255,255,0.25);
}
/* タブ上の出力インジケーター: 点灯＝そのパーツがSTLに出力される */
.outDot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: transparent; border: 1.5px solid var(--muted); box-sizing: border-box;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.outDot.on {
  background: var(--ok); border-color: var(--ok);
  box-shadow: 0 0 5px rgba(94, 203, 123, 0.8);
}
/* 大見出し（情報・メモ／設定セクション共通）:
   カーマインのベタ塗り背景に白抜き文字。タイトルバーとして横いっぱいに敷く */
aside > h3,
/* セクション見出し: 真っ赤なバーをやめ、暗い地＋赤の細い縦ライン＋明朝アイボリーの静かな見出しに。
   赤は"一点差し"に絞る＝写真のような凛とした余白感を出す。 */
aside .sec h3 {
  display: flex; align-items: center; gap: 8px; margin: 16px 0 11px;   /* 上に間隔＝セクション同士を自然に離す（ボタンの直下に次の見出しが来ない） */
  font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: 0.07em;
  color: var(--text); text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  /* 髪の毛風の飾りは廃止。彫り込んだ「銘板」風の帯＝上に細い照り／下に二重罫で見出しを際立たせる。 */
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.012) 60%, rgba(0,0,0,0.10));
  border-left: 3px solid var(--accent);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 -2px 0 rgba(var(--ui-ink), 0.14);
  border-radius: 0; padding: 7px 10px 7px 12px;
}
aside > h3 { margin-top: 12px; }
/* タイトル直下の小さな説明キャプション（型の断面の操作ヒントなど） */
aside .secHint { color: var(--muted); font-size: 10.5px; margin: -5px 0 9px; line-height: 1.4; }
/* ビデオガイド冒頭の「よくある質問」ボックス（フォント許可の案内など） */
.guideFaq {
  margin: 0 0 12px; padding: 9px 11px; font-size: 11px; line-height: 1.55; color: var(--text);
  background: rgba(var(--ui-ink), 0.07); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}
/* 説明書きがボタン群（刃の形状など）の直下に来るときは、潜り込まないよう間隔を空ける */
.profRadios + .secHint { margin-top: 8px; }
/* タイトル横のアイコン（直感的に区別: プリセット=辞書／エンボス=スタンプ 等）。
   文字色(currentColor)でマスク描画＝言語切替でテキストが変わってもアイコンは残る */
#secSketch::before, #secPreset::before, #secProfile::before, #secEmbProfile::before,
#secLiveTitle::before, #secInfo::before, #secMemo::before {
  content: ''; flex: none; width: 15px; height: 15px; margin-right: 2px;
  background: currentColor; opacity: 0.95;
  -webkit-mask: var(--ico) no-repeat center / contain;
          mask: var(--ico) no-repeat center / contain;
}
/* スケッチ設定=スライダー */
#secSketch  { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M4 7h9M19 7h1M4 17h1M11 17h9'/><circle cx='16' cy='7' r='2.4'/><circle cx='8' cy='17' r='2.4'/></svg>"); }
/* プリセット=辞書（開いた本） */
#secPreset  { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M12 6C10 4.3 6.5 4.3 4 5.2V19c2.5-0.9 6-0.9 8 0.8 2-1.7 5.5-1.7 8-0.8V5.2C17.5 4.3 14 4.3 12 6z'/><path d='M12 6v13.8'/></svg>"); }
/* 刃先の形状=刃（ナイフ） */
#secProfile { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'><path d='M4 15L15 4l5 5-8 8H4z'/><path d='M4 15l3 4'/></svg>"); }
/* エンボスの形状=スタンプ */
#secEmbProfile { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'><path d='M9.5 4h5l-1 6h1.5a2 2 0 0 1 2 2v2H8v-2a2 2 0 0 1 2-2h1.5z'/><rect x='4' y='18' width='16' height='2.6' rx='1'/></svg>"); }
/* 断面=断面図のシルエット（刃→補強→フランジと段々に外へ広がるプロファイル） */
#secLiveTitle { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M8 3 L11 3 L11 11 L13 11 L13 16 L19 16 L19 21 L8 21 Z'/></svg>"); }
/* 情報=i */
#secInfo { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 11v5'/><path d='M12 7.6v0.2'/></svg>"); }
/* メモ=付箋 */
#secMemo { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'><path d='M5 3h9l5 5v13H5z'/><path d='M14 3v5h5'/><path d='M8 13h8M8 17h5'/></svg>"); }
/* 部位ごとに色を変えて断面図・スライダーとの対応を示す（いずれも深いカーマイン系のグラデ） */
#secBlade  { background: linear-gradient(180deg, #bd3a42, #8c222a); }
#secReinf  { background: linear-gradient(180deg, #a01a28, #74111b); }
#secFlange { background: linear-gradient(180deg, #7c1620, #500d15); }
/* 折りたたみセクション: 見出しクリックで開閉。▼=開 / ▶=閉
   くの字はタイトルの左に置く（order で先頭へ）。白抜きに合わせて白い矢印 */
aside .sec.collapsible > h3 { cursor: pointer; user-select: none; }
aside .sec.collapsible > h3::after {
  content: ''; order: -1; flex: none;
  width: 6px; height: 6px; opacity: .9; margin-top: -3px;
  border-right: 2px solid #ffe7df; border-bottom: 2px solid #ffe7df;
  transform: rotate(45deg); transition: transform .15s;
}
aside .sec.collapsed > h3::after { transform: rotate(-45deg); margin-top: 0; margin-right: 2px; }
aside .sec.collapsed > h3 { margin-bottom: 2px; }
aside .sec.collapsed > :not(h3) { display: none !important; }
/* 情報・メモ: あまり見ないので赤バーなしの控えめな小見出し＋小さめの本文 */
aside .sec h3.secMini {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
  color: var(--muted); text-shadow: none; background: none;
  border-radius: 0; padding: 2px 2px; margin: 8px 0 4px;
}
aside .sec.collapsible > h3.secMini::after {
  border-right-color: var(--muted); border-bottom-color: var(--muted); opacity: .7;
}
.note.noteSm { font-size: 10px; line-height: 1.5; }
#secFigBox { padding: 8px 0; }

/* ===== プロパティ / ビデオガイド タブ ===== */
/* aside はパネル自体がスクロールするので、タブは上部に貼り付けて隠れないようにする。
   aside の padding(16 20) を打ち消して端まで広げ、下に区切り線を引く */
.asideTabs {
  position: sticky; top: -16px; z-index: 6;
  display: flex; gap: 2px;
  margin: -16px -20px 12px; padding: 8px 20px 0;
  background: var(--panel); border-bottom: 1px solid var(--border);
}
.asideTab {
  flex: 1; appearance: none; cursor: pointer;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
  padding: 8px 4px 9px; transition: color .12s, border-color .12s;
}
.asideTab:hover { color: var(--text); }
.asideTab.on { color: #ffe7df; border-bottom-color: var(--accent); }
/* 食品表示ラベル作成（タブ3）: パネルの余白を使い切って窓を広く */
#asideLabelPane { margin: 0 -20px -16px; height: calc(100% - 40px); min-height: 480px; }
#asideLabelPane[hidden] { display: none; }
#asideGuidePane { margin: 0 -20px -16px; height: calc(100% - 40px); min-height: 480px; display: flex; flex-direction: column; }
#asideGuidePane[hidden] { display: none; }
#asideGuidePane .guidePaneBar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding: 4px 12px; font-size: 12px; }
#asideGuidePane .guidePaneBar > a { margin-left: auto; white-space: nowrap; }
#guideEditBox { white-space: nowrap; }
#guideEditBox button { font-size: 12px; padding: 2px 10px; }
#guideEditBtn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
#guideEditMsg { color: var(--muted, #9aa3ad); }
#asideGuidePane .guidePaneBar a { color: var(--muted, #9aa3ad); text-decoration: none; }
#asideGuidePane .guidePaneBar a:hover { color: var(--text); }
#asideGuidePane iframe { flex: 1; width: 100%; border: 0; background: #FAFAF7; }
#labelFrame { display: block; width: 100%; height: 100%; min-height: 480px; border: 0; background: var(--panel); }

/* ビデオガイドのカテゴリトグル（ことはじめ / ツール説明 / 作ってみる・依頼 2026-10-18） */
.vidSeg {
  display: flex; gap: 4px; margin: 0 0 12px;
  background: var(--panel2, rgba(255,255,255,0.04)); border: 1px solid var(--border);
  border-radius: 8px; padding: 3px;
}
.vidSegBtn {
  flex: 1; appearance: none; cursor: pointer;
  background: none; border: none; border-radius: 6px;
  color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.3px;
  padding: 7px 2px; transition: background .12s, color .12s; white-space: nowrap;
}
.vidSegBtn:hover { color: var(--text); }
.vidSegBtn.on { background: var(--accent); color: #fff; }

/* ビデオ一覧（縦並び・写真の参考UIに合わせたカード） */
.videoList { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
/* 習得状況バー（進捗＋未習得のみフィルタ） */
.vidFilter {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 10px; font-size: 11.5px; color: var(--muted);
}
.vidOnlyTodo { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.vidOnlyTodo input { cursor: pointer; }
.vidCount { font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
.videoCard {
  background: #11141a; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; transition: border-color .12s, opacity .12s;
}
.videoCard:hover { border-color: #df8e88; }
.videoCardPlay {
  appearance: none; cursor: pointer; text-align: left; display: block; width: 100%;
  background: none; border: none; padding: 0; transition: transform .06s;
}
.videoCardPlay:active { transform: scale(0.99); }
/* 習得済み: 全体を落ち着かせ、サムネにチェックを出す（未習得が目に飛び込むように） */
.videoCard.done { opacity: .55; }
.videoCard.done:hover { opacity: 1; }
.videoDoneBadge {
  position: absolute; left: 6px; top: 6px; width: 20px; height: 20px;
  display: none; align-items: center; justify-content: center;
  background: #2e7d4f; color: #fff; border-radius: 50%; font-size: 12px; font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.videoCard.done .videoDoneBadge { display: flex; }
.videoDone {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 10px 8px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--muted);
}
.videoDone input { cursor: pointer; }
.videoCard.done .videoDone { color: #7fc9a0; }
.videoThumbWrap { position: relative; aspect-ratio: 16 / 9; background: #0c0e13; }
.videoThumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.videoThumb.thumbFail { object-fit: contain; opacity: 0.25; }
.videoDur {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(0,0,0,0.82); color: #fff; font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; letter-spacing: 0.5px;
}
.videoPlayIco {
  position: absolute; inset: 0; margin: auto; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,20,24,0.55); color: #fff; border-radius: 50%;
  font-size: 16px; padding-left: 3px; opacity: 0; transition: opacity .12s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.videoCard:hover .videoPlayIco { opacity: 1; }
.videoTitle {
  padding: 8px 10px 10px; font-size: 12px; line-height: 1.35; color: var(--text);
}

/* QuickCookie のモーダル（illust-convert.html を iframe で表示。中身は独立ページ＝アプリと状態を共有しない） */
.icModal { position: fixed; inset: 0; z-index: 3100; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); }
.icModal[hidden] { display: none; }
.icModal .icBox { position: relative; width: min(1200px, 96vw); height: min(860px, 92vh); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 48px rgba(0,0,0,0.6); display: flex; flex-direction: column; }
.icModal .icHead { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--panel2, rgba(255,255,255,0.03)); }
.icModal .icTitle { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); }
.icModal .icClose { appearance: none; background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; }
.icModal .icClose:hover { color: var(--text); }
.icModal iframe { flex: 1; width: 100%; border: 0; display: block; background: #fff; }
/* 右下グリップでサイズ変更（ビデオポップアップと同じ見た目）。ドラッグ中は iframe がマウスを奪わないように */
.icModal .icGrip { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; z-index: 2; touch-action: none; }
.icModal .icGrip::before { content: ""; position: absolute; right: 4px; bottom: 4px; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); opacity: .8; }
.icModal.icDragging iframe { pointer-events: none; }
/* 携帯モード（body.scMobileQC）: 本体の画面は出さず、QuickCookie を全画面で。閉じる・大きさ変更は無し */
body.scMobileQC > header, body.scMobileQC > #tabBar, body.scMobileQC > main, body.scMobileQC > .statusbar { display: none !important; }
.icModal.icFull { background: var(--bg); }
.icModal.icFull .icBox { width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: none; max-height: none; border: 0; border-radius: 0; }
.icModal.icFull .icClose, .icModal.icFull .icGrip { display: none; }
.icModal.icFull .icHead { padding: 6px 10px; padding-top: max(6px, env(safe-area-inset-top)); }
.icModal.icFull #langSel { margin-left: auto; }


/* 再生ポップアップ */
/* ドラッグして好きな場所に置ける浮遊プレイヤー（作業をブロックしない） */
#vidPopup { position: fixed; left: 0; top: 0; width: min(460px, 90vw); z-index: 3000; }
#vidPopup[hidden] { display: none; }
.vidPopupBox {
  position: relative; width: 100%; background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
}
.vidPopupHead { display: flex; align-items: center; gap: 12px; padding: 8px 12px; cursor: move; user-select: none; background: var(--panel2, rgba(255,255,255,0.03)); }
.vidPopupGrab { color: var(--muted); font-size: 12px; line-height: 1; letter-spacing: 1px; }
.vidPopupTitle { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vidPopupYt { font-size: 12px; color: #df8e88; text-decoration: none; white-space: nowrap; }
.vidPopupYt:hover { text-decoration: underline; }
.vidPopupClose { appearance: none; background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; }
.vidPopupClose:hover { color: var(--text); }
.vidPopupFrame { aspect-ratio: 16 / 9; background: #000; }
.vidPopupFrame iframe { width: 100%; height: 100%; display: block; border: 0; }
/* 右下グリップでサイズ変更（幅を変える／高さは16:9で自動追従） */
.vidPopupGrip { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; z-index: 2; }
.vidPopupGrip::before { content: ""; position: absolute; right: 3px; bottom: 3px; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); opacity: .7; }
/* ドラッグ/リサイズ中は iframe がマウスを奪わないように */
#vidPopup.vidDragging .vidPopupFrame { pointer-events: none; }

/* ヒント表示ON/OFF（ツールボックス最下部）。ONなら電球、OFFなら斜線入り */
/* このボタンだけは状態が一目で分かるよう文字ラベルを出す（他ツールはアイコンのみ）。
   ただしラベルでツールボックスの幅を広げてはいけないので、文字は絶対配置にして
   レイアウト幅に一切影響させない。はみ出すぶんは JS 側で字幅を詰めて（scaleX）収める。 */
/* 画像トレースボタンと同じ縦積み（アイコンの下に文字）にして、ボタン幅いっぱいを文字に使う。
   文字は絶対配置なのでツールボックスの幅を一切広げない。万一はみ出す言語では JS が字幅を詰める。
   ※ #sketchTools button の詳細度に勝つ必要があるので #sketchTools #hintToggle で指定 */
#sketchTools #hintToggle {
  flex-direction: column; gap: 2px; padding: 6px 6px 5px;
  width: 100%; box-sizing: border-box; min-width: 0;
}
#sketchTools #hintToggle svg { width: 20px; height: 20px; }
#sketchTools #hintToggle .tlabel {
  display: block; position: relative; width: 100%;
  height: 1.2em; overflow: hidden;
  font-size: 9px; line-height: 1.2; letter-spacing: .3px; white-space: nowrap;
}
#sketchTools #hintToggle .tlabel > span {
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%); transform-origin: center;
}
.hintToggle.on { color: var(--accent); border-color: var(--accent); }
.hintToggle .hintSlash { display: none; }
.hintToggle:not(.on) { opacity: .6; }
.hintToggle:not(.on) .hintSlash { display: inline; }

/* ツールヒント内「使い方を再生」ボタン */
.tipPlayBtn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  appearance: none; cursor: pointer;
  background: linear-gradient(150deg, color-mix(in srgb, rgb(var(--ui-ink)) 78%, #fff), color-mix(in srgb, rgb(var(--ui-ink)) 55%, #000)); color: #fff;
  border: none; border-radius: 6px; padding: 5px 10px; font-size: 12px; font-weight: 600;
}
.tipPlayBtn:hover { filter: brightness(1.08); }
/* 動画がまだ無いツールは無効表示（ボタン自体は全ツールに置く） */
.tipPlayBtn.off { background: #3a3a42; color: #8b8b94; cursor: default; }
.tipPlayBtn.off:hover { filter: none; }
/* 吹き出し本体はマウスを受け取らない（キャンバスの上に出るため、描画/選択を邪魔しない）。
   クリックが要る「使い方を見る」ボタンだけを受け取る。無効ボタンは素通り＝下のキャンバスで描ける。 */
.tipPlayBtn { pointer-events: auto; }
.tipPlayBtn.off { pointer-events: none; }
/* 刃の形状: 横並びセグメント（モードタブと同系の質感） */
.profSeg {
  display: flex; gap: 4px; background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 3px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}
.profSeg label {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 7px 4px; border-radius: 5px; cursor: pointer; font-size: 12px;
  color: var(--muted); white-space: nowrap; transition: color .12s, background .12s, box-shadow .12s;
}
.profSeg label:hover { color: var(--text); }
.profSeg input { position: absolute; opacity: 0; pointer-events: none; }
.profSeg label:has(input:checked) {
  background: linear-gradient(150deg, color-mix(in srgb, rgb(var(--ui-ink)) 78%, #fff) 0%, color-mix(in srgb, rgb(var(--ui-ink)) 55%, #000) 100%);
  color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(var(--ui-ink),0.45), inset 0 1px 0 rgba(255,255,255,0.25);
}
/* 刃先の形状: 本物のラジオボタン（タブではなく選択肢だと一目で分かる） */
/* スライド式トグルスイッチ（2択）: ノブが左右に滑るピル。クリアランス基準・フランジ方向で使用 */
.segToggle { position: relative; display: flex; margin-top: 5px; padding: 3px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 999px; }
.segToggle .opt { flex: 1; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  padding: 6px 8px; border-radius: 999px; cursor: pointer; color: var(--muted); font-size: 12.5px;
  white-space: nowrap; user-select: none; transition: color .15s; }
.segToggle .opt input { position: absolute; opacity: 0; pointer-events: none; }
.segToggle .knob { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: 999px; background: linear-gradient(150deg, rgb(var(--ui-ink)) 0%, color-mix(in srgb, rgb(var(--ui-ink)) 60%, #000) 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25);
  transition: left .18s cubic-bezier(.4,0,.2,1); z-index: 0; }
.segToggle:has(.opt:nth-of-type(2) input:checked) .knob { left: 50%; }
.segToggle .opt:has(input:checked) { color: #fff; font-weight: 600; }
.profRadios { display: flex; gap: 6px; }
/* 隠しラジオ（position:absolute; opacity:0）の包含ブロックを親ラベルに固定する。
   これが無いと absolute の基準が body になり、パネルのスクロール位置によっては
   input がページ最下部へ配置されて html のスクロール領域を広げてしまう。
   →ラジオをクリックした瞬間、checked された input へのフォーカス自動スクロールで
   ページ全体が下へずれ「画面が崩れた」ように見えるバグの根本原因だった */
.profRadios label, .profSeg label, .fsRow label, #impOutSwitch label { position: relative; }
.profRadios label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 4px; border-radius: 7px; cursor: pointer; font-size: 12.5px;
  color: var(--text); white-space: nowrap;
  background: var(--panel2); border: 1px solid var(--border);
  transition: border-color .12s, background .12s, color .12s;
}
.profRadios input { accent-color: var(--accent); margin: 0; cursor: pointer; }
/* クリアランス基準: ラジオの丸を隠し、文字を中央／ボタン全体をクリック可能に */
#clearRefRow .profRadios input { position: absolute; opacity: 0; pointer-events: none; }
#clearRefRow .profRadios label { justify-content: center; gap: 0; }
.profRadios label:hover { border-color: var(--accent); }
.profRadios label:has(input:checked) {
  border-color: var(--accent); background: rgba(var(--ui-ink),0.14); color: #fff; font-weight: 600;
}
/* 面/線（一般的なデザインソフト風）: 面=塗りスウォッチ・線=枠スウォッチのトグル */
.fsRow { display: flex; gap: 6px; margin: 6px 0 9px; }
.fsRow label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 4px; border-radius: 7px; cursor: pointer; font-size: 12.5px; color: var(--muted);
  background: var(--panel2); border: 1px solid var(--border); transition: border-color .12s, background .12s, color .12s;
}
.fsRow input { position: absolute; opacity: 0; pointer-events: none; }
.fsRow label svg { width: 18px; height: 18px; opacity: 0.6; }
.fsRow label:hover { border-color: var(--accent2); }
.fsRow label:has(input:checked) { border-color: var(--accent2); background: color-mix(in srgb, var(--accent2) 16%, transparent); color: #fff; }
.fsRow label:has(input:checked) svg { opacity: 1; }
/* 面/線 スウォッチ（一般的なデザインソフト風・左ツールボックス＆右パネル共通）
   面＝塗りスウォッチ／線＝枠スウォッチ。OFF時は赤い斜線（＝なし）を重ねて視覚化。 */
.fsSwatch { display: flex; gap: 6px; }
.fsSwatch--col { flex-direction: column; gap: 5px; }        /* ツールボックスは縦積み（1列幅に収める） */
.fsw {
  flex: 1; min-width: 38px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 4px; border-radius: 8px; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--border);
  color: var(--muted); font-size: 10px; line-height: 1;
  transition: border-color .12s, background .12s, color .12s;
}
.fsw svg { width: 24px; height: 24px; display: block; overflow: visible; }
.fsw .fsw-sq    { fill: var(--muted); }
.fsw .fsw-ring  { fill: none; stroke: var(--muted); stroke-width: 3.4; }
.fsw .fsw-slash { display: none; stroke: #e5484d; stroke-width: 2.6; stroke-linecap: round; }
.fsw:hover { border-color: var(--accent2); }
.fsw.on { color: #fff; border-color: var(--accent2); background: color-mix(in srgb, var(--accent2) 18%, transparent); }
.fsw.on .fsw-sq   { fill: var(--accent2); }
.fsw.on .fsw-ring { stroke: var(--accent2); }
.fsw.off .fsw-sq    { fill: none; stroke: var(--border); stroke-width: 1.6; }
.fsw.off .fsw-ring  { stroke: var(--border); }
.fsw.off .fsw-slash { display: block; }
/* ツールボックス版はアプリのボタングラデを打ち消してスウォッチらしく見せる */
#sketchTools .fsSwatch { margin-top: 2px; gap: 4px; }   /* 道具の列と同じ間隔＝「線」が2列目の道具と同じ x にそろう（前は 6px で +1px ずれていた・本社 10/19） */
#sketchTools button.fsw {
  background: var(--panel2); box-shadow: none; border: 1px solid var(--border); color: var(--muted);
}
#sketchTools button.fsw svg { width: 24px; height: 24px; filter: none; }
#sketchTools button.fsw:hover { border-color: var(--accent2); color: #fff; box-shadow: none; }
#sketchTools button.fsw.on {
  background: color-mix(in srgb, var(--accent2) 18%, transparent); border-color: var(--accent2); color: #fff; box-shadow: none;
}
#sketchTools button.fsw .fsw-lbl { display: block; font-size: 9px; line-height: 1; }
/* 線端・角・整列: 枠なしの大きいピクトグラム＋キャプション（ラジオの丸は隠す）
   枠（ボーダー・背景箱）を外し、アイコン自体を大きく太く見せる。選択は色で示す。 */
.fsSeg { gap: 4px; margin-bottom: 2px; }
.fsSeg input { position: absolute; opacity: 0; pointer-events: none; }
.fsSeg label {
  flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
  padding: 4px 2px; border: none; background: none; border-radius: 8px;
  color: var(--muted); font-size: 10.5px; white-space: nowrap;
}
.fsSeg label svg { width: 46px; height: 32px; overflow: visible; color: inherit; }
.fsSeg .fsCap { font-size: 10px; line-height: 1; }
.fsSeg label:hover { border: none; background: color-mix(in srgb, var(--accent2) 10%, transparent); color: var(--text); }
.fsSeg label:has(input:checked) {
  border: none; background: color-mix(in srgb, var(--accent2) 16%, transparent);
  color: #fff; font-weight: 600;
}
.fsSeg label:has(input:checked) svg { color: var(--accent2); }
.secSuppHead2 { font-size: 11px; color: var(--muted); margin: 8px 0 4px; }
/* エンボス断面: 6択を枠内に収めるグリッド＋断面ピクトグラム */
#embProfSeg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#embProfSeg label { flex: none; flex-direction: column; gap: 3px; padding: 7px 2px; font-size: 11px; }
#embProfSeg input { position: absolute; opacity: 0; pointer-events: none; }
#embProfSeg svg { width: 28px; height: 21px; color: inherit; opacity: .9; }
#embProfSeg label:has(input:checked) svg { opacity: 1; }
#bdTypeSeg > label svg, #bdProfSeg > label svg { color: var(--role-motif); opacity: 1; }   /* 縁取りエンボスのアイコンはオークル（依頼 2026-10-15） */
#bdProfSeg > label:has(input:checked) { border-color: var(--role-motif); }
#bdProfSeg { display: grid; gap: 6px; }
#bdProfSeg input { position: absolute; opacity: 0; pointer-events: none; }
/* 縁取りエンボスの組（断面・模様・範囲）：薄いオークルの地と枠で、スタンプエンボスと分ける（依頼 2026-10-15） */
.bdGroup { margin-top: 8px; padding: 6px 8px 8px; gap: 8px; background: rgba(200,144,46,0.08); border: 1px solid rgba(200,144,46,0.45); border-radius: 10px; }
.bdGroup[hidden] { display: none; }
.bdGroup > .bdGroupHead { flex-basis: 100%; font-size: 11.5px; font-weight: 700; color: #E6B666; letter-spacing: .04em; }
.bdGroup .secSuppHead { min-height: 0; color: #d8b67a; }
.bdGroup > .bdGroupHead { order: -2; display: flex; align-items: center; justify-content: space-between; gap: 8px; }   /* 一覧を開いても見出しはいちばん上 */
#bdOffBtn { font-size: 10.5px; font-weight: 400; padding: 3px 8px; border-radius: 6px; cursor: pointer; background: transparent; color: #d8b67a; border: 1px solid rgba(200,144,46,0.6); }
#bdOffBtn:hover { background: var(--role-motif); color: #1c140f; }
/* 縁取りエンボスのスイッチ（オフのとき、スタンプエンボスの横に出る）：オークルの破線の札（依頼 2026-10-15） */
.pickRow > #bdOnCol { flex: 0 0 60px; }
#embProfCol[hidden] ~ #bdOnCol > .secSuppHead { display: none; }   /* 隣の「スタンプエンボス」が無いときは、高さ合わせの空き行も出さない */
.pickRow > #embProfCol:not(:has([data-picker]:not(.pickCollapsed))) { flex: 0 0 110px; }
#profPickRow > #embProfCol { flex: 1 1 100%; }
#profPickRow #embProfSeg { grid-template-columns: repeat(3, 1fr); }
#bdGroup > .pickCol { flex-basis: 100%; }   /* 縁取りエンボスの形と種類も、たたまずに幅いっぱいに並べる（直子さん 10/20） */
#bdGroup :is(#bdProfSeg, #bdTypeSeg) { grid-template-columns: repeat(3, 1fr); }
#bdGroup :is(#bdProfSeg, #bdTypeSeg) > label { width: auto; }
#profPickRow #embProfSeg > label { width: auto; }   /* たたまないので、ボタンはマスの幅いっぱい（60px のままだと「フィレット」が切れる） */   /* 立ち上げ方式はたたまない＝6つを幅いっぱいに並べる（直子さん 10/20）。縁取りエンボスのスイッチはその下の段 */   /* 縁取りエンボスのスイッチをすぐ横に */
#bdOnCol .bdOnTile { width: 60px; height: 58px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px;
  border: 1px dashed var(--role-motif); border-radius: 7px; background: rgba(200,144,46,0.08); color: #E6B666; font-size: 10.5px; line-height: 1.15; text-align: center; cursor: pointer; position: relative; }
#bdOnCol .bdOnTile:hover { background: rgba(200,144,46,0.2); }
#bdOnCol .bdOnTile input { position: absolute; opacity: 0; pointer-events: none; }
#bdOnCol .bdOnTile svg { width: 30px; height: 22px; color: var(--role-motif); }
.bdGroup > .param, .bdGroup > .note { flex-basis: 100%; min-width: 0; margin: 0; }
.bdGroup > [hidden] { display: none !important; }
.bdGroup > .pickCol:has([data-picker]:not(.pickCollapsed)) { border-color: rgba(200,144,46,0.7); background: rgba(200,144,46,0.10); }
#bdTypeSeg > label:has(input:checked) { border-color: var(--role-motif); }
/* 縁取りの模様の選択: アイコンのボタン（依頼 2026-10-12） */
#bdRow { display: block; }
#bdRow[hidden] { display: none; }
#bdTypeSeg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#bdTypeSeg label { flex: none; flex-direction: column; gap: 3px; padding: 8px 2px 6px; font-size: 11px; text-align: center; line-height: 1.2; }
#bdTypeSeg input { position: absolute; opacity: 0; pointer-events: none; }
#bdTypeSeg svg { width: 40px; height: 26px; color: inherit; opacity: .85; }
#bdTypeSeg label:has(input:checked) svg { opacity: 1; }
#bdTypeSeg label.motif svg { color: #f0b25a; }
#bdTypeSeg label.motif span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 縁取りの模様の断面: エンボスと同じ6択の見た目（依頼 2026-10-12） */
#bdProfSeg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#bdProfSeg[hidden] { display: none; }
#bdProfSeg label { flex: none; flex-direction: column; gap: 3px; padding: 7px 2px; font-size: 11px; }
#bdProfSeg input { position: absolute; opacity: 0; pointer-events: none; }
#bdProfSeg svg { width: 28px; height: 21px; color: inherit; opacity: .9; }
#bdProfSeg label:has(input:checked) svg { opacity: 1; }
/* 刃先の形状: 断面ピクトグラム（アイコン上・ラベル下・ラジオ丸は隠す） */
#profSeg label { flex-direction: column; gap: 3px; padding: 7px 2px; }
#profSeg input { position: absolute; opacity: 0; pointer-events: none; }
/* 縁取りスタンプは刃の形（段差/面取り）と併用できる別のスイッチ＝左に区切り線（依頼 2026-10-12） */
#profSeg label.bpToggle { margin-left: 6px; position: relative; }
#profSeg label.bpToggle::before { content: ''; position: absolute; left: -7px; top: 15%; bottom: 15%; border-left: 1px solid var(--line, rgba(255,255,255,.18)); }
#profSeg svg { width: 30px; height: 22px; color: inherit; opacity: .9; }
#profSeg label:has(input:checked) svg { opacity: 1; }
/* フランジバイパスも刃の形と併用できる別のスイッチ。名前が長いので2行まで（依頼 2026-10-15） */
#profSeg label { flex: 1 1 0; min-width: 0; }   /* 4つを同じ幅に */
/* 段差・面取り：上下2段の1組。いまの方だけ塗り、もう一方は控えめ（依頼 2026-10-15） */
#profSeg .profSplit { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
#profSeg .profSplit label { flex: 1 1 0; flex-direction: row; gap: 3px; padding: 3px 2px; border: 0; border-radius: 0; font-size: 11px; color: var(--muted); background: var(--panel2); font-weight: 400; }
#profSeg .profSplit label + label { border-top: 1px solid var(--border); }
#profSeg .profSplit label svg { width: 17px; height: 13px; }
#profSeg .profSplit label:hover { color: var(--text); }
#profSeg .profSplit label:has(input:checked) { background: var(--accent); color: #fff; font-weight: 700; }
#profSeg label.bpToggle span { white-space: nowrap; text-align: center; font-size: 11px; line-height: 1.15; }
/* フランジバイパスのオン・オフをはっきり（依頼 2026-10-15）：オン＝ポピーで塗って白い文字／オフ＝灰色で控えめ */
#profSeg label.bpToggle { background: var(--panel2) !important; border-color: var(--border) !important; color: var(--muted) !important; }
#profSeg label.bpToggle:hover { color: var(--text) !important; }
#profSeg label.bpToggle:has(input:checked) { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; font-weight: 700; }
#profSeg label.bpToggle svg { opacity: .6; }
#profSeg label.bpToggle:has(input:checked) svg { opacity: 1; }
/* スタンプ台を追加: 図の下の目立つトグルボタン（押すと断面図に台が現れる） */
.baseAddBtn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 12px 0 4px; padding: 9px 12px; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--panel2); border: 1px dashed rgba(223,142,136,0.75);
  transition: border-color .12s, background .12s, color .12s;
}
.baseAddBtn:hover { border-color: #df8e88; background: rgba(223,142,136,0.10); }
.baseAddBtn input { accent-color: #df8e88; cursor: pointer; }
.baseAddBtn:has(input:checked) {
  border-style: solid; border-color: #df8e88; background: rgba(223,142,136,0.18); color: #fff;
}
/* 補足の数値一覧の見出し（あくまで補助。図で操作する人は見なくてOK） */
.secSuppHead { margin: 14px 0 2px; font-size: 10.5px; color: var(--muted); letter-spacing: .5px; }
/* 設定プリセット行 */
.presetRow { display: flex; gap: 6px; align-items: center; }
#presetSel {
  flex: 1; min-width: 0; background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 12.5px; cursor: pointer;
}
#presetSave, #presetDel {
  flex: none; background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 9px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
#presetSave:hover { border-color: var(--accent); color: #fff; }
#presetDel:hover { border-color: var(--err); color: #fff; }
.param { margin-bottom: 10px; }
/* スライダーの数値はクリックで直接入力できる */
.param .val.editable { cursor: ew-resize; border-bottom: 1px dotted rgba(var(--ui-ink),0.55); }
.param .val.editable:hover { color: color-mix(in srgb, rgb(var(--ui-ink)) 78%, #fff); }
.param .val.scrubVal::after { content: ' ⇆'; font-size: 8px; opacity: .55; }
/* 図形ダイアログの項目名: 横ドラッグで数値を調節できる手応え */
.shpScrub { cursor: ew-resize; user-select: none; border-bottom: 1px dotted rgba(255,255,255,0.28); }
.shpScrub:hover { color: var(--accent2); }
#rpcCenterStat { font-weight: 600; }
#rpcCenterStat.set { color: var(--ok); }
#rpcCenterStat.unset { color: var(--err); }
.valEdit {
  width: 64px; background: #11141a; color: var(--text); text-align: right;
  border: 1px solid var(--accent); border-radius: 4px; padding: 1px 5px; font-size: 12.5px;
}
/* 断面図解（刃・補強・フランジがどこの寸法かを示す） */
.secFig { display: block; width: 100%; height: auto; margin: 2px 0 8px; }
.secFig .figDim { fill: #9fd0ff; font-size: 10px; font-family: var(--serif); }
/* 断面図の寸法数値: 明朝（Times/明朝）の上品な数字。ダブルクリックで編集。 */
.secFig .secNum, .secNum {
  font-size: 11.5px; font-weight: 500; font-style: italic;
  font-family: "Times New Roman", "Georgia", var(--serif);
  cursor: pointer; user-select: none;
}
.secNum:hover { filter: brightness(1.25); }
.param label { display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--text); }
.param label .val { color: var(--accent); font-weight: 600; }
.param label .val.pcWarn { color: var(--warn); }   /* 想定ノズル径に対しギリギリ */
.param label .val.pcErr { color: var(--err); }     /* 出ない/破断（ノズル径以下） */
.param input[type=range] {
  width: 100%; -webkit-appearance: none; appearance: none; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(var(--ui-ink),0.55), rgba(var(--ui-ink),0.16));
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
  outline: none;
}
.param input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 13px;
  background: rgb(var(--ui-ink));                              /* マット（単色） */
  clip-path: polygon(50% 100%, 0 0, 100% 0);        /* 逆三角＝指す位置が明確 */
  border: none;
  filter: drop-shadow(0 1.5px 1.5px rgba(0,0,0,0.45));
  cursor: pointer;
}
.param input[type=range]::-webkit-slider-thumb:hover { background: color-mix(in srgb, rgb(var(--ui-ink)) 78%, #fff); }
.param input[type=range]::-moz-range-thumb {
  width: 15px; height: 13px;
  background: rgb(var(--ui-ink));
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  border: none; border-radius: 0;
  filter: drop-shadow(0 1.5px 1.5px rgba(0,0,0,0.45));
  cursor: pointer;
}
.check { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; cursor: pointer; }
.check input { accent-color: var(--accent); }
.note { font-size: 11px; color: var(--muted); line-height: 1.6; }
#wallWarn, #chamferWarn, #baseWarn, #stemWarn, #socketWarn { font-size: 11.5px; margin-top: 4px; min-height: 16px; }
#wallWarn.warn, #chamferWarn.warn, #baseWarn.warn, #stemWarn.warn, #socketWarn.warn, .note.warn { color: var(--warn); }
#wallWarn.err, #chamferWarn.err, #baseWarn.err { color: var(--err); }
.hint {
  position: absolute; bottom: 10px; left: 12px; z-index: 5;
  background: rgba(30,33,40,.85); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 10px; font-size: 11px; color: var(--muted);
}
#closeChk {
  display: none; position: absolute; z-index: 15; width: 24px; height: 24px; margin: 0;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 5px;
  background: var(--panel2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 L6.6 11.5 L12.5 4.6' fill='none' stroke='%239aa3b2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/17px no-repeat;
  box-shadow: 0 2px 7px rgba(0,0,0,.5);
  transition: border-color .12s, background-color .12s;
}
#closeChk:hover { border-color: var(--accent); }
#closeChk:checked {
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 L6.6 11.5 L12.5 4.6' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-color: var(--accent);
}

/* 縁取りの範囲の点選びのときは、点選びと同じオークル（依頼 2026-10-15） */
#closeChk.bdPick { border-color: var(--role-motif); background-color: var(--role-motif);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 L6.6 11.5 L12.5 4.6' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#closeChk.bdPick:hover { border-color: #fff; }

/* ツールのショートカットキー表示（業界標準準拠: V/A/P/N/Y/L/M） */
.toolbar .tkey {
  font-size: 8.5px; color: var(--muted);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 0 2.5px; margin-left: 3px; line-height: 1.4;
}
.toolbar button.active .tkey { color: inherit; border-color: rgba(255,255,255,0.45); }

/* ===== 修正バー: 仕分け（役割・ロック）ボタンとの区切り ===== */
#modBar .modSep {
  width: 1px; align-self: stretch; margin: 2px 4px;
  background: var(--border); flex: none;
}

/* ===== 仕分けポップアップ（選択した線のそばに出す） ===== */

/* ===== 設定の適用先（選択中の線か、全体既定か）の表示 ===== */
.targetNote {
  font-size: 11px; color: var(--muted);
  padding: 5px 8px; border-radius: 6px; border: 1px dashed var(--border);
  margin: 6px 0;
}
.targetNote.sel {
  color: var(--accent2); border-color: var(--accent2);
  background: rgba(77, 163, 255, 0.08); border-style: solid;
}
.resetOvBtn {
  background: var(--panel2); color: var(--muted); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 9px; font-size: 11px; cursor: pointer;
  margin-bottom: 8px;
}
.resetOvBtn:hover { border-color: var(--accent2); color: var(--text); }

.warnTxt { color: var(--warn); }
.hintTxt { color: var(--muted, #8aa0b8); font-size: 11px; line-height: 1.4; display: inline-block; margin-top: 2px; }

/* ===== ライセンス入口認証オーバーレイ（auth.js / INTEGRATION_KEY_SPEC.md） ===== */
#authOverlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  /* ピューター皿の写真（cover）＋ 皿の内側の平らな面に合わせた「円形」のグレー影。
     影も文字もビューポート中央基準なので、ウィンドウ幅が変わっても両者はズレない */
  background: radial-gradient(circle at 50% 47%, rgba(6,5,7,.66) 0%, rgba(6,5,7,.58) 30%, rgba(6,5,7,.32) 45%, rgba(6,5,7,0) 57%),
              #17131a url('../assets/floors/plate-pewter.jpg') center center / cover no-repeat;
}
/* 囲み枠も陰の箱も無し。皿の上に文字がそのまま載る。読みやすさは文字自身の影（ハロー）で確保 */
#authCard {
  position: relative; width: 360px; max-width: calc(100vw - 40px);
  /* 影は#authOverlayの円形が担当。カード自体は枠も箱も無し（文字は薄い影で縁を出す） */
  background: none; border: none; border-radius: 0;
  padding: 34px 28px 30px; text-align: center;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
#authLangs {
  position: fixed; top: 14px; right: 16px; z-index: 1001; display: flex; gap: 2px;
  background: rgba(12,10,14,.55); border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px; padding: 3px 4px; backdrop-filter: blur(3px);
}
#authLangs .authLang { color: #d7cfd4; }   /* 暗いピルの上で読みやすく */
.authLang {
  background: transparent; color: var(--muted); border: 1px solid transparent;
  border-radius: 5px; padding: 2px 6px; font-size: 11px; cursor: pointer;
}
.authLang:hover { color: var(--text); }
.authLang.on { color: #fff; background: var(--accent); border-color: var(--accent); }
#authLogo { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.45); }
/* ログイン画面: 筆記体SketchCookieを中央のヒーローに（反転＋スクリーンで暗地に浮かせる）。
   おうちクッキー建築家（白紋章）は「はじめる」ボタンの下に署名のように置く。 */
#authBrand { display: flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 22px; }
#authScript {
  height: 36px; width: auto;
  filter: invert(1) contrast(1.06) brightness(1.06);
  mix-blend-mode: screen;   /* 反転後の紺地はカードの暗色に溶け、淡い筆文字だけ浮く */
}
/* おうちクッキー紋章＝メールとアクセスキーの「仕切り」。両側に細い罫線、中央に紋章 */
#authKeyDiv { display: flex; align-items: center; gap: 12px; margin: 20px 0 13px; }
#authKeyDiv::before, #authKeyDiv::after { content: ''; flex: 1; height: 1px; background: var(--border); }
#authOuchi { display: block; height: 30px; width: auto; margin: 0; opacity: .8; flex: none; }
/* 認証内は hidden 属性を最優先（id指定の display:block/flex が [hidden] に勝つ事故を全部防ぐ） */
#authOverlay [hidden] { display: none !important; }
#authTitle { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: 1px; margin: 12px 0 10px; }
/* 購入の流れ。ログインしただけで使えると思われないように、題のすぐ下に置く。 */
#authFlow { font-size: 12px; line-height: 1.75; color: var(--muted); margin: 0 0 18px; text-align: left; }
#authFlow b { color: var(--text); font-weight: 600; }
#authKeyLabel { display: block; text-align: left; font-size: 11px; color: var(--muted); margin-bottom: 5px; }
/* キー入力＋右端の小さな「認証」ボタンを横並びに（大ボタンは廃止） */
#authKeyRow { display: flex; gap: 8px; align-items: stretch; }
#authKey {
  flex: 1; min-width: 0; background: #11141a; color: var(--text);
  border: 1.5px solid var(--border); border-radius: 8px;
  padding: 9px 10px; font-size: 14px; letter-spacing: .5px; text-align: center;
  font-family: "SF Mono", Menlo, monospace;
}
#authKey:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--ui-ink),.18); }
#authMsg { min-height: 17px; font-size: 12.5px; margin: 9px 2px 4px; line-height: 1.5; }
#authMsg.err { color: #F2603F; font-weight: 600; }   /* エラーはカーマインではっきり（ポピーの明るい色・暗地で読める） */
#authMsg.busy { color: var(--muted); }
#authMsg.note { color: var(--text); font-weight: 500; }   /* 案内トーン（エラーの赤ではない・購入導線用） */
/* 認証「利用権なし」の操作（行き止まりにしない） */
#authNoEnt { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 2px; }
#authNoEnt[hidden] { display: none; }   /* hidden属性を効かせる（id指定がUAのdisplay:noneに勝つため明示） */
/* 購入フォーム3点（①返金案内 ②18歳確認 ③案内メールopt-in・2026-09-28）＝囲みは足さず行で並べる */
#authRefund { font-size: 12px; line-height: 1.65; color: var(--muted); text-align: left; }
#authRefund a { color: var(--accent); }
.authConsent { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--text); text-align: left; cursor: pointer; }
.authConsent input[type="checkbox"] { margin-top: 2px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
/* 購入CTA＝この画面の主行動。アクセント（点火の赤）で最上段に目立たせる */
#authBuy {
  width: 100%; padding: 12px 0; font-size: 14px; font-weight: 700; cursor: pointer;
  background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 8px;
  box-shadow: 0 2px 12px rgba(var(--ui-ink),.35);
}
#authBuy:hover:not(:disabled) { filter: brightness(1.06); }
/* 18歳確認が未チェックのあいだは押せない。押せないことが見た目でも分かるようにする
   （赤いままだと「押したのに反応しない」＝壊れて見える。2026-09-29 本番確認で指摘）。
   理由の文言は #authAgeNeed に出しているので、ここは見た目だけ落とす */
#authBuy:disabled {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  color: color-mix(in srgb, #fff 55%, transparent);
  box-shadow: none; cursor: not-allowed;
}
/* 押せない理由の案内（購入ボタンの直前） */
#authAgeNeed { font-size: 12px; line-height: 1.6; color: var(--muted); text-align: left; }
#authAgeNeed[hidden] { display: none; }
/* ログイン中アカウントの固定表示（変更不可＝別メール購入を防ぐ・グレーで確定を示す） */
#authWho {
  font-size: 12.5px; color: var(--muted); text-align: center; word-break: break-all;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; margin: 2px 0 1px;
}
#authOtherEmail {
  padding: 9px 0; font-size: 13px; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 8px;
}
#authOtherEmail:hover { border-color: var(--accent); color: var(--accent); }
.authLinkBtn { background: transparent; border: none; color: var(--muted); font-size: 12px; cursor: pointer; text-decoration: underline; }
.authLinkBtn:hover { color: var(--accent); }
/* ヘッダーのアカウント表示＋ログアウト */
#acctBox { position: relative; }
body.presenting #acctBox { display: none !important; }   /* プレゼンモード中はアカウントを出さない（画面収録に映さない・依頼 2026-10-18） */
#acctBtn svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
#acctBtn {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 10px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
#acctBtn:hover { border-color: var(--accent); }
#acctMenu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 11px 13px; min-width: 210px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); text-align: left;
}
#acctMenuLabel { font-size: 10px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; }
#acctEmail { font-size: 13px; color: var(--text); margin: 3px 0 11px; word-break: break-all; }
#acctLogout {
  width: 100%; padding: 7px 0; font-size: 12.5px; font-weight: 600; cursor: pointer;
  background: transparent; color: #F2603F;
  border: 1px solid color-mix(in srgb, #F2603F 40%, transparent); border-radius: 6px;
}
#acctLogout:hover { background: #F2603F; color: #fff; border-color: #F2603F; }
/* メールアドレス入力（マジックリンク用）。キー欄と同じ枠だが等幅/大文字化しない */
#authEmailLabel { display: block; text-align: center; font-size: 12px; color: var(--text); margin-bottom: 6px; }
#authEmail {
  width: 100%; background: #11141a; color: var(--text);
  border: 1.5px solid var(--border); border-radius: 8px;
  padding: 11px 12px; font-size: 15px; text-align: left;
}
#authEmail:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--ui-ink),.18); }
/* 初回はこのメールがアカウントになる、という一言（新規登録のニュアンス） */
#authHowto { display: block; margin: 8px 0 0; font-size: 11px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }   /* ご購入からご使用までの手順の動画（控えめ・依頼 2026-10-18） */
#authHowto:hover { color: var(--text); }
#authHowto[hidden] { display: none; }
#authEmailNote { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.5; margin: 7px 0 0; white-space: nowrap; letter-spacing: -.2px; }
/* 主ボタン＝認証番号を送る / ログイン（検証）。どちらもプライマリ */
#authMagic, #authVerify {
  width: 100%; margin-top: 10px; padding: 11px 0; font-size: 14px; font-weight: 600;
  background: linear-gradient(150deg, color-mix(in srgb, rgb(var(--ui-ink)) 78%, #fff) 0%, color-mix(in srgb, rgb(var(--ui-ink)) 55%, #000) 100%); color: #fff;
  border: 1px solid var(--accent); border-radius: 8px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(var(--ui-ink),.4), inset 0 1px 0 rgba(255,255,255,.25);
}
#authMagic:hover, #authVerify:hover { filter: brightness(1.07); }
#authMagic:disabled, #authVerify:disabled { opacity: .7; cursor: default; }
/* 認証番号を受け取ったあとは、主役が「この番号でログイン」に移る。
   同じ見た目のボタンが2つ並ぶと、番号を入力した人が「受け取る」側を押しそうになる
   （指摘 2026-09-29）。受け取る側を控えめにして、迷う余地を消す。 */
#authOverlay.codeSent #authMagic {
  background: transparent; color: var(--muted);
  border-color: var(--border); box-shadow: none; font-weight: 600;
}
#authOverlay.codeSent #authMagic:hover { filter: none; color: var(--text); border-color: var(--accent); }
/* 6桁コード入力（メール認証番号） */
#authCodeWrap { margin-top: 14px; }
#authCodeLabel { display: block; text-align: left; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
#authCode {
  width: 100%; background: #11141a; color: var(--text);
  border: 1.5px solid var(--border); border-radius: 8px;
  padding: 11px 12px; font-size: 21px; letter-spacing: 6px; text-align: center;
  font-family: "SF Mono", Menlo, monospace;
}
#authCode:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--ui-ink),.18); }
#authResend { background: transparent; border: none; color: var(--muted); font-size: 12px; margin-top: 10px; cursor: pointer; text-decoration: underline; }
#authResend:hover { color: var(--accent); }
#authResend:disabled { opacity: .5; cursor: default; }
#authSentHint { min-height: 15px; font-size: 11.5px; color: var(--muted); margin: 8px 2px 0; line-height: 1.5; white-space: pre-line; }   /* 案内は2行（\n で改行・10/20） */
/* アクセスキー＝メールとは別の「区画」。枠で囲み、余白を空けて“別のログイン方法”だと一目で分かるように。
   （メールで入る人が「シリアルもらってない」と不安にならないよう、お持ちの方だけの区画にする） */
/* アクセスキーは仕切り（紋章）で分けるので枠は無し。少数派向けの副導線として一段小さく */
#authKeySection { margin-top: 4px; padding: 0; text-align: center; }
/* 区画の見出し（旧「または アクセスキーで」区切り→見出しに変更。両側の罫線は外す） */
#authOr {
  display: block; margin: 0 0 8px; padding: 0;
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  letter-spacing: .3px; white-space: normal;
}
#authOr::before, #authOr::after { content: none; }
/* 旧版の方への案内＝問い合わせ予防の一文 */
#authKeyNote { font-size: 10.5px; color: var(--muted); line-height: 1.5; margin: 0 0 9px; }
/* 副ボタン＝アクセスキーで入る（アウトライン） */
#authGo {
  flex: none; padding: 0 14px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
#authGo:hover { border-color: var(--accent); color: var(--accent); }
#authGo:disabled { opacity: .55; cursor: default; }
#authHint { font-size: 11px; color: var(--muted); margin-top: 13px; line-height: 1.5; }

/* 図形全体を表示ボタン（スケッチエリア右上） */
#fitBtn {
  position: absolute; top: 30px; right: 12px; z-index: 7;
  width: 32px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #242a38 0%, #161a22 100%); color: #b9c0d0;
  border: 1px solid rgba(255,255,255,0.06); border-radius: 7px; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
#fitBtn:hover { color: #fff; border-color: rgba(var(--ui-ink),0.55); }

/* 数値編集ポップアップ（入力欄の下にスライダー、左=下限 右=上限、現在値ライブ） */
.secEditPop {
  position: fixed; z-index: 9999;
  display: flex; flex-direction: column; gap: 7px;
  width: 188px; box-sizing: border-box; padding: 9px 11px;
  background: #11141a; border: 1px solid var(--accent2); border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
}
.secEditNum {
  width: 100%; box-sizing: border-box; text-align: center;
  font-size: 15px; font-weight: 700;
  background: #0c0f14; color: var(--accent2);
  border: 1px solid var(--accent2); border-radius: 6px; padding: 5px 6px; outline: none;
}
.secEditRow { display: flex; align-items: center; gap: 7px; }
.secEditBound { font-size: 10.5px; color: var(--muted); min-width: 24px; text-align: center; flex: none; }
.secEditRange { flex: 1; accent-color: var(--accent2); cursor: pointer; height: 4px; }
/* ドラッグ中だけ出る一時バースライダー（下限—現在値—上限） */
.secDragBar {
  position: fixed; z-index: 10000; display: none;
  align-items: center; gap: 8px; width: 196px; box-sizing: border-box;
  padding: 10px 12px; background: #11141a;
  border: 1px solid var(--accent2); border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  font-size: 10.5px; color: var(--muted);
}
.secDragBar .dbTrack { position: relative; flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.13); }
.secDragBar .dbFill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; background: var(--accent2); }
.secDragBar .dbThumb { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--accent2); transform: translate(-50%, -50%); }
.secDragBar .dbVal { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--accent2); white-space: nowrap; }

/* ===== ライブ断面エディタ（右パネル） ===== */
.legacySliders { display: none; }   /* バー型スライダーは隠す（断面チップが駆動） */
#sectionEditor #secLiveTitle { margin-bottom: 8px; }
#secFigWrap {
  position: relative; width: 100%; margin: 4px 0 8px; padding: 12px 10px 8px;
  border-radius: 13px;
  background: radial-gradient(130% 90% at 50% 0%, rgba(255,255,255,0.055), rgba(0,0,0,0.22));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 3px 12px rgba(0,0,0,0.35);
}
/* 断面が縦長のため width:100% だと図が背丈いっぱい（〜500px）に育って数値まで巨大化する。
   高さを抑えて全体を小さく・中央寄せに（内容は縦横比を保って収まる） */
#secSvg { display: block; width: 100%; height: auto; max-height: 260px; margin: 0 auto;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45)); }
/* 断面図の右上: 基準値に戻す（小さく控えめ） */
#secResetBtn {
  position: absolute; top: 7px; right: 8px; z-index: 5;
  font-size: 10px; line-height: 1; padding: 4px 7px; border-radius: 6px;
  color: var(--muted); background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12); cursor: pointer; opacity: .72;
}
#secResetBtn:hover { opacity: 1; color: var(--text); border-color: rgba(255,255,255,0.25); }
#sectionEditor.locked #secResetBtn { display: none; }
/* フランジバイパス（断面図の右下・依頼 2026-10-13） */
/* 「数値の一覧」＝トグル＋リストを1つの塊に。既定は閉じる。開くとパネルとして囲い、内包を明示。 */
.secChipsGroup { margin-top: 12px; }
.secChipsToggle {
  width: 100%; display: flex; align-items: center; gap: 5px; margin: 0; padding: 4px 6px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-size: 10.5px; color: var(--muted); letter-spacing: .3px; font-family: var(--sans);
}
.secChipsToggle::before {
  content: ''; flex: none; width: 5px; height: 5px; margin-top: -2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
.secChipsToggle[aria-expanded="true"]::before { transform: rotate(45deg); margin-top: -3px; }
.secChipsToggle:hover, .secChipsToggle[aria-expanded="true"] { color: var(--text); }
/* 開いている時だけ、トグル(見出し)＋リストを1枚のパネルで囲う */
.secChipsGroup:has(#secChips:not([hidden])) { border: 1px solid var(--border); background: rgba(255,255,255,0.015); }
.secChipsGroup:has(#secChips:not([hidden])) .secChipsToggle { border-bottom: 1px solid var(--border); }
#secChips { margin: 0; padding: 8px 8px 9px 22px; display: flex; flex-direction: column; gap: 6px; }
#secChips[hidden] { display: none; }   /* トグルで閉じたら本当に隠す（display:flex が hidden に勝って、いつも出ていた） */
.secRow { display: flex; align-items: center; gap: 8px; }
.secSw { width: 10px; height: 10px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,0.3); }
.secLbl { flex: 1; color: var(--text); font-size: 12px; }
.secChip {
  position: relative; cursor: ew-resize; min-width: 56px; text-align: center;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  background: rgba(17,20,26,0.85); border: 1px solid currentColor;
  border-radius: 5px; padding: 2px 8px; user-select: none;
}
.secChip::after { content: '⇆'; position: absolute; right: 2px; bottom: -1px; font-size: 7px; opacity: .5; }
.secChip:hover { filter: brightness(1.3); }
.secChipEdit {
  width: 64px; font-size: 12.5px; text-align: center;
  background: #11141a; color: var(--text); border: 1px solid var(--accent);
  border-radius: 5px; padding: 2px 6px;
}
#secLocked {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 20px; background: rgba(38,42,51,0.82); border-radius: 8px;
}
#sectionEditor.locked #secSvg { opacity: 0.25; }
#baseToggleRow { margin-top: 12px; }

/* ===== ツールボタンのホバーヘルプ（受講者が目線をUIに固定したまま学べる） ===== */
#toolTip {
  position: fixed; z-index: 9999; max-width: 280px;
  background: #26262b; color: #e8e8ea;
  font-size: 12px; line-height: 1.65;
  padding: 9px 12px; border-radius: 8px; border: 1px solid #3a3a42;
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
  pointer-events: none; user-select: none; opacity: 0; transform: translateY(-50%);
  transition: opacity .12s ease;
}
#toolTip.on { opacity: 1; }
#toolTip b { display: block; margin-bottom: 3px; font-size: 12.5px; color: var(--accent, #f0837e); }

/* ===== 画像ダイアログ: ツールボックス＋色凡例 ===== */
.impEditArea { display: flex; gap: 10px; align-items: flex-start; justify-content: center; margin-bottom: 24px; }
/* トレースの出力スイッチ（スタンプ台の型／エンボスのみ）:
   左右に振れるトグル。ノブと選択側ラベルを青く光らせ、どちらが選ばれているか一目で分かるように */
#impOutRow { display: flex; align-items: center; gap: 10px; }
#impOutRow > span { white-space: nowrap; }
#impOutSwitch { display: flex; align-items: center; gap: 10px; }
#impOutSwitch input { position: absolute; opacity: 0; pointer-events: none; }
#impOutSwitch label { cursor: pointer; display: flex; align-items: center; }
#impOutSwitch label span {
  font-weight: 600; font-size: 12.5px; color: var(--muted); white-space: nowrap;
  transition: color .15s, text-shadow .15s;
}
/* 選ばれている側＝はっきりした青＋少し大きく */
#impOutSwitch label span { font-size: 12px; }
#impOutSwitch label:has(input:checked) span {
  color: #2e86ff;
  font-size: 14.5px;
  text-shadow: 0 0 12px rgba(46, 134, 255, 0.7);
}
/* トグル本体: 青いノブが左右にスライド */
#impOutKnob {
  flex: none; width: 46px; height: 22px; border-radius: 11px; cursor: pointer;
  background: #1d222c; border: 1px solid #3a4151; position: relative;
}
#impOutKnob::after {
  content: ''; position: absolute; top: 2px; left: 3px; width: 15px; height: 15px;
  border-radius: 50%; background: #2e86ff;
  box-shadow: 0 0 9px rgba(46, 134, 255, 0.95);
  transition: left .16s ease;
}
#impOutSwitch:has(input[value="emboss"]:checked) #impOutKnob::after { left: 27px; }

#impLeftCol { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#impTools { display: flex; flex-direction: column; gap: 6px; padding: 6px; background: rgba(20,20,26,0.55); border: 1px solid var(--border, #333); border-radius: 8px; backdrop-filter: blur(3px); }
/* ブラシ・鉛筆の太さ（ツールボックス下の縦スライダー。上＝太い／下＝細い） */
#impBrushV { position: relative; width: 46px; height: 150px; background: rgba(20,20,26,0.55); border: 1px solid var(--border, #333); border-radius: 8px; backdrop-filter: blur(3px); cursor: ns-resize; touch-action: none; }
#impBrushV .ibvTrack { position: absolute; left: 50%; transform: translateX(-50%); top: 13px; bottom: 13px; width: 22px; background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.12)); clip-path: polygon(50% 100%, 0 0, 100% 0); border-radius: 2px; pointer-events: none; }
#impBrushV .ibvKnob { position: absolute; left: 5px; right: 5px; height: 0; pointer-events: none; }
#impBrushV .ibvKnob::before { content: ''; position: absolute; left: 0; right: 0; top: -1.5px; height: 3px; background: var(--accent2, var(--role-emboss)); border-radius: 2px; box-shadow: 0 0 5px rgba(0,0,0,0.6); }
#impBrushV .ibvDot { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); background: #fff; border-radius: 50%; box-shadow: 0 0 4px rgba(0,0,0,0.6); }
/* 右側の縦型 調整パネル（タブ＝3ステップ／コントロールを縦に並べる） */
#impControls {
  position: absolute; top: 0; right: 0; bottom: 0; width: 300px; z-index: 5;
  background: var(--panel2, #1a1d24); color: var(--text, #e6e8ec);
  padding: 14px 16px; border-left: 1px solid var(--border, #333);
  display: flex; flex-direction: column; overflow-y: auto;
}
#impControls #impBrushSize { color: var(--text, #e6e8ec); }
/* コントロールを縦一列に */
.impCtrlGrid { display: flex; flex-direction: column; gap: 11px; margin-bottom: 12px; }
#impControls .row, #impControls #impBrushSize { margin-bottom: 0; flex-wrap: wrap; }
#impControls .row > span:first-child, #impControls #impBrushSize > span:first-child { min-width: 0; flex: 1 1 auto; font-size: 12px; }
#impControls .row input[type=range], #impControls #impBrushSize input[type=range] { flex: 1 1 100%; order: 3; }
#impControls .row .val, #impControls #impBrushSize span:last-child { order: 2; }
/* ② スタンプ画像にする（QuickCookie の変換） */
#impControls .impNum { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
#impControls .impNum input { width: 5em; }
#impControls .impConvNote { margin: -4px 0 0; font-size: 11px; line-height: 1.5; opacity: .75; }
#impControls .impConvNote { flex: 1 1 100%; }
#impControls .impMini { font-size: 12px; padding: 3px 10px; }
#impControls .impChk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; flex: 1 1 auto; }
#impControls .impChecks { display: flex; flex-direction: column; gap: 3px; font-size: 11px; line-height: 1.45; }
#impControls .impChecks .impChk_ok::before { content: '✓ '; color: #6fd3a0; }
#impControls .impChecks .impChk_warn::before { content: '! '; color: #f0b766; }
#impControls .impChecks .impChk_bad::before { content: '✗ '; color: #ff9a92; }
:is(#impControls, #impIntro) .impPromptStatus { font-size: 11px; opacity: .8; }
/* ② クッキーの大きさ: QuickCookie と同じ並び（高さ・幅を縦に・右にカッコ＋鎖・リセット） */
#impControls .impDimPair { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 22px auto; column-gap: 2px; align-items: stretch; }
#impControls .impDimRows { display: flex; flex-direction: column; gap: 6px; }
#impControls .impDim { display: grid; grid-template-columns: 1fr 96px; align-items: center; gap: 10px; font-size: 12px; margin: 0; }
#impControls .impNumBox { display: flex; align-items: center; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.25); overflow: hidden; }
#impControls .impNumBox input { width: 100%; min-width: 0; border: 0; background: transparent; color: inherit; font: 500 13px ui-monospace, Menlo, monospace; padding: 6px 6px; text-align: right; font-variant-numeric: tabular-nums; }
#impControls .impNumBox span { padding: 0 6px 0 2px; font-size: 11px; opacity: .8; }
#impControls .impChain { display: flex; flex-direction: column; align-items: center; width: 22px; color: rgb(var(--ui-ink)); }
#impControls .impChain .brT, #impControls .impChain .brB { flex: 1; width: 10px; margin-left: 12px; border-right: 2px solid currentColor; }
#impControls .impChain .brT { margin-top: 15px; border-top: 2px solid currentColor; border-top-right-radius: 6px; }
#impControls .impChain .brB { margin-bottom: 15px; border-bottom: 2px solid currentColor; border-bottom-right-radius: 6px; }
#impControls .impChain svg { display: block; margin: 1px 0; }
#impControls .impResetBtn { align-self: center; white-space: nowrap; margin-left: 4px; }
/* ② QuickCookie と同じ見出し・番号（01 / 01-1 …）。色・書体は QuickCookie（アプリ内＝暗い地）に合わせる */
:is(#impControls, #impIntro) { --qc-fg: #ececef; --qc-muted: #a0a1aa; --qc-line: #33343b; --qc-bg: #141518;
  --qc-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; --qc-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; }
:is(#impControls, #impIntro) .qcSec { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--qc-line); }
:is(#impControls, #impIntro) .qcTtl { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--qc-display); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--qc-fg); }
:is(#impControls, #impIntro) .qcNo { flex: none; font: 700 26px/1 var(--qc-mono); color: rgb(var(--ui-ink)); letter-spacing: .02em; }
:is(#impControls, #impIntro) .qcSub { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--qc-line); padding-top: 10px; }
:is(#impControls, #impIntro) .qcHead { display: flex; align-items: flex-start; gap: 8px; font-weight: 700; font-size: 12.5px; line-height: 1.35; color: var(--qc-fg); }
:is(#impControls, #impIntro) .qcHead > span { flex: 1; min-width: 0; }
:is(#impControls, #impIntro) .qcSubNo { flex: none; font: 700 11px/1 var(--qc-mono); font-style: normal; color: #fff; background: rgb(var(--ui-ink)); padding: 4px 6px; letter-spacing: .04em; margin-top: 1px; }
:is(#impControls, #impIntro) .qcLink { background: none; border: 0; padding: 0; margin: 0; font: 700 13px inherit; color: rgb(var(--ui-ink)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
:is(#impControls, #impIntro) .qcLink.qcSmall { font-size: 11.5px; font-weight: 500; align-self: flex-start; }
:is(#impControls, #impIntro) .qcRunRow button { flex: 1; }
:is(#impControls, #impIntro) .qcPrompt summary { cursor: pointer; font-size: 11px; color: var(--qc-muted); }
:is(#impControls, #impIntro) .qcPrompt pre { margin: 6px 0 0; max-height: 180px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 10.5px/1.5 var(--qc-mono); color: var(--qc-fg); background: var(--qc-bg); border: 1px solid var(--qc-line); padding: 8px 10px; user-select: all; }
:is(#impControls, #impIntro) .qcNote { margin: 0; font-size: 11px; line-height: 1.5; color: var(--qc-muted); }
:is(#impControls, #impIntro) .qcRow { display: grid; grid-template-columns: 1fr 96px; align-items: center; gap: 10px; }
:is(#impControls, #impIntro) .qcRow label { font-size: 12.5px; color: var(--qc-fg); display: block; }
:is(#impControls, #impIntro) .qcRow small { display: block; color: var(--qc-muted); font-size: 10.5px; line-height: 1.4; }
:is(#impControls, #impIntro) .qcRow2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
:is(#impControls, #impIntro) .qcLegend { font-family: var(--qc-display); font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #ff9a9d; background: rgba(var(--ui-ink), 0.16); border: 1px solid rgba(var(--ui-ink), 0.45); padding: 5px 10px; }
:is(#impControls, #impIntro) .qcChecksWrap { display: flex; flex-direction: column; gap: 2px; opacity: .85; }
:is(#impControls, #impIntro) .qcChecksLbl { font-size: 10px; color: var(--qc-muted); letter-spacing: .04em; }
:is(#impControls, #impIntro) .qcDivider { font-size: 11px; color: var(--qc-muted); letter-spacing: .06em; padding-top: 2px; }
#impControls .impNumBox { border-color: var(--qc-line); background: var(--qc-bg); }
/* ② スタンプ画像にする: タブ＝「白黒の調整」などの見出しと同じ色の帯。選んでいるタブはさらに強く光らせる（依頼 2026-10-04） */
#impControls .impConvTabs { flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
#impControls .impConvTab { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 8px 6px 7px; cursor: pointer; font: inherit; border-radius: 0; overflow: hidden;
  color: #ff9a9d; background: rgba(var(--ui-ink), 0.10); border: 1px solid rgba(var(--ui-ink), 0.30); opacity: .7; }
#impControls .impConvTab b { font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; font-size: 13.5px; font-weight: 700; white-space: normal; word-break: keep-all; letter-spacing: -0.02em; line-height: 1.2; }   /* QuickCookie のタブ見出しと同じ書体（丸ゴシックの太字） */
#impControls .impConvTab span { font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif; font-size: 10px; line-height: 1.35; color: #a0a1aa; }
#impControls .impConvTab:hover { opacity: 1; background: rgba(var(--ui-ink), 0.18); }
#impControls .impConvTab.on { opacity: 1; color: #fff; background: rgba(var(--ui-ink), 0.42); border-color: rgb(var(--ui-ink)); box-shadow: inset 0 -3px 0 rgb(var(--ui-ink)), 0 0 12px rgba(var(--ui-ink), 0.35); }
#impControls .impConvTab.on span { color: #f3d6d4; }
/* 3ステップ・タブ（①対象 → ②白黒 → ③役割）＝描画画面の下部中央に浮かべる（ミニツールバーの上・キャンバス幅の中央） */
#impSteps {
  position: absolute; bottom: 60px; z-index: 6; margin: 0;
  left: calc((100% - 300px) / 2); transform: translateX(-50%);   /* キャンバス領域(左〜右パネル300px手前)の中央 */
  display: flex; gap: 5px;
  background: rgba(22,25,31,0.92); padding: 6px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
}
.impStepArrow { display: none; }
.impStepBtn { flex: 0 0 auto; width: 108px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 3px; border-radius: 8px; border: 1px solid var(--border, #3a4151); background: rgba(255,255,255,0.04); color: var(--muted, #9aa0aa); font-size: 10.5px; line-height: 1.2; font-weight: 600; cursor: pointer; text-align: center; transition: background .12s, color .12s, border-color .12s; }
.impStepBtn b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #4a5160; color: #fff; font-size: 12px; }
.impStepBtn:hover { border-color: #2e86ff; }
.impStepBtn.on { background: #2e86ff; border-color: #2e86ff; color: #fff; }
.impStepBtn.on b { background: #fff; color: #2e86ff; }
/* ③待ち（②→③のトレース中）: 押せていない／固まったと誤解されないよう、③ボタンと「次へ」を点滅させて処理中を示す */
.impStepBtn.busy, #impNext.busy, #impNextTop.busy { cursor: progress; animation: impBusyPulse 1s ease-in-out infinite; }
@keyframes impBusyPulse { 50% { opacity: .45; } }
/* 各ステップの使い方: ステップバー(#impSteps, bottom:60px・高さ約62px)のすぐ上に1行で浮かべる */
.impStepHint {
  position: absolute; z-index: 6; bottom: 128px;
  left: calc((100% - 300px) / 2); transform: translateX(-50%);
  max-width: calc(100% - 316px);   /* キャンバス幅（右パネル300px手前）に収める＝全文を1行で */
  background: rgba(22,25,31,0.92); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 999px; padding: 5px 15px;
  font-size: 11.5px; color: #d3d7de; line-height: 1.3; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3); backdrop-filter: blur(4px);
  pointer-events: none;
}
.impStepHint:empty { display: none; }

/* スライダーの「見本」: ラベル横の ? アイコン＋ホバーで before→after の図を出すポップアップ */
.impInfo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 5px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid var(--border, #3a4151);
  background: rgba(255,255,255,0.06); color: var(--muted, #9aa0aa);
  font-size: 10px; font-weight: 700; line-height: 1; cursor: help; user-select: none;
}
.impInfo:hover { border-color: #2e86ff; color: #8ec0ff; }
#impInfoPop {
  position: fixed; z-index: 3200; max-width: 250px;
  background: var(--panel2, #1a1d24); border: 1px solid var(--border, #3a4151);
  border-radius: 9px; padding: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  pointer-events: none;
}
#impInfoPop[hidden] { display: none; }
#impInfoPop svg { display: block; width: 210px; height: 78px; }
#impInfoPop .impInfoCap { margin-top: 7px; font-size: 11px; line-height: 1.4; color: #d3d7de; }
#impBack { margin-right: auto; }
.impTool { position: relative; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border: 1px solid var(--border, #3a3a40); border-radius: 7px; color: var(--text, #cfcfd4); cursor: pointer; padding: 0; }
.impTool:hover { background: rgba(255,255,255,0.11); }
.impTool.on { background: var(--accent); border-color: var(--accent); color: #fff; }
#impBrushShapes { width: fit-content; display: grid; grid-template-columns: repeat(2, 28px); gap: 4px; padding: 5px; margin-top: 6px; background: rgba(20,20,26,0.55); border: 1px solid var(--border, #333); border-radius: 8px; backdrop-filter: blur(3px); }
.impShape { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border: 1px solid var(--border, #3a3a40); border-radius: 6px; color: var(--text, #cfcfd4); cursor: pointer; padding: 0; }
.impShape:hover { background: rgba(255,255,255,0.11); }
.impShape.on { background: var(--accent2, var(--role-emboss)); border-color: var(--accent2, var(--role-emboss)); color: #fff; }
/* ショートカットキーのバッジ（各ツールの右に常時表示。目玉トグルでon/off） */
#impTools.showKeys .impTool[data-key]::after { content: attr(data-key); position: absolute; left: calc(100% + 18px); top: 50%; transform: translate(-50%, -50%); font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: .3px; color: var(--accent2, var(--role-emboss)); text-align: center; white-space: nowrap; pointer-events: none; }
.impToolGap { border-top: 1px solid var(--border, #34343a); margin: 3px 2px; }
.impToolSize { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--muted, #9a9aa0); }
.impToolSize input { width: 34px; }
#impLegend { position: absolute; top: 10px; left: calc((100% - 300px) / 2); transform: translateX(-50%); z-index: 6; max-width: calc(100% - 300px - 260px); display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 7px 14px; border-radius: 8px; background: rgba(26,29,36,0.9); font-size: 11.5px; color: var(--text, #d8d8da); justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }   /* 画像エリアの上・中央に重ねる（依頼 2026-10-14） */
.impLg { display: inline-flex; align-items: center; gap: 5px; }
.impLgHint { display: inline-flex; align-items: center; font-weight: 600; color: var(--accent, #f0837e); }
.impLgHint::after { content: '｜'; color: var(--muted, #9a9aa0); font-weight: 400; margin: 0 2px 0 7px; }
.impSw { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.impSwLine { background: transparent !important; border: 2px solid var(--lc); }
.impSwDash { background: transparent !important; border: 1.5px dashed var(--lc); }
#impBrushSize { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; font-size: 12px; color: var(--muted, #9a9aa0); }
#impBrushSize input { flex: 1; min-width: 220px; }
#impBrushSize > span:last-child { min-width: 26px; text-align: right; color: var(--accent, #f0837e); font-weight: 600; }
.impBrushPop { position: fixed; z-index: 200; display: flex; align-items: center; gap: 9px; padding: 8px 13px; background: var(--panel, #23232a); border: 1px solid var(--line, #3a3a42); border-radius: 11px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.impBrushPop[hidden] { display: none; }
.impBrushPopIco { color: var(--muted, #9a9aa0); font-size: 11px; line-height: 1; }
.impBrushPop input { width: 140px; }
.impBrushPop > span:last-child { min-width: 20px; text-align: right; color: var(--accent, #f0837e); font-weight: 600; font-size: 12px; }
/* 役割を選ぶポップアップ（面クリックで出る・エンボス/カッター刃/台/穴/除外を明示的に一発で選ぶ） */
.impRolePop { position: fixed; z-index: 200; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--panel, #23232a); border: 1px solid var(--line, #3a3a42); border-radius: 11px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.impRolePop[hidden] { display: none; }
.impRolePop button { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; background: transparent; border: none; border-radius: 7px; color: var(--text, #e8e8ea); font-size: 12.5px; font-weight: 500; text-align: left; cursor: pointer; white-space: nowrap; }
.impRolePop button[hidden] { display: none; }
.impRolePop button:hover { background: rgba(255,255,255,0.08); }
.impRolePop button.sel { background: rgba(var(--ui-ink),0.18); font-weight: 700; }
.impRolePop button.sel::after { content: '✓'; margin-left: auto; padding-left: 10px; color: var(--accent, #f0837e); }

/* 画像トレースの入口（01）: QuickCookie と同じ 01-1〜01-3。暗い地のカード */
#impIntro { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; background: rgba(10,10,14,0.55); }
#impIntro[hidden] { display: none; }
#impIntro .impIntroBox { width: min(520px, 92vw); max-height: 88vh; overflow: auto; background: #1d1e22; border: 1px solid #33343b; box-shadow: 0 18px 50px rgba(0,0,0,0.45); padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
#impIntro .impIntroHead { display: flex; align-items: center; justify-content: space-between; font-size: 12px; letter-spacing: .06em; color: #a0a1aa; }
#impIntro .impIntroClose { background: none; border: 0; color: #a0a1aa; font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; }
#impIntro .impIntroClose:hover { color: #ececef; }
#impIntro .qcSec { border-bottom: 0; padding-bottom: 0; }
#impIntro .qcDrop { display: block; border: 2px dashed rgb(var(--ui-ink)); background: rgba(var(--ui-ink), 0.12); padding: 22px 12px; text-align: center; cursor: pointer; color: #a0a1aa; font-size: 13px; transition: background .15s; }
#impIntro .qcDrop.over, #impIntro .qcDrop:hover { background: rgba(var(--ui-ink), 0.22); color: #ececef; }
#impIntro .qcDrop strong { display: block; color: #ff9a9d; font-size: 15px; margin-bottom: 2px; }
:is(#impControls, #impIntro) .qcPrompt .qcNote { margin-top: 6px; }

/* ステップバー（01 対象を切り取る／02 白黒を仕上げる／03 役割を決める）: 数字は QuickCookie の番号と同じ書体・色（依頼 2026-10-04） */
.impStepBtn { border-radius: 0; background: rgba(29,30,34,0.92); border-color: #33343b; color: #a0a1aa; }
.impStepBtn b { width: auto; height: auto; background: none; color: rgb(var(--ui-ink)); font: 700 20px/1 "IBM Plex Mono", ui-monospace, Menlo, monospace; letter-spacing: .02em; }
.impStepBtn span { font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; font-weight: 700; }
.impStepBtn:hover { border-color: rgba(var(--ui-ink), 0.6); color: #ececef; }
.impStepBtn.on { background: rgba(var(--ui-ink), 0.18); border-color: rgb(var(--ui-ink)); box-shadow: inset 0 -3px 0 rgb(var(--ui-ink)); color: #ececef; }
.impStepBtn.on b { background: none; color: rgb(var(--ui-ink)); }

/* ② 角の丸め（スライダー）: ラベルの下に横いっぱいのスライダー＋値 */
:is(#impControls, #impIntro) .qcRowSlider { grid-template-columns: 1fr; gap: 4px; }
:is(#impControls, #impIntro) .qcSlider { display: flex; align-items: center; gap: 8px; }
:is(#impControls, #impIntro) .qcSlider input[type=range] { flex: 1; }
:is(#impControls, #impIntro) .qcSlider output { flex: none; min-width: 52px; text-align: right; font: 500 12px "IBM Plex Mono", ui-monospace, Menlo, monospace; color: rgb(var(--ui-ink)); }

/* 画像トレース: 右上の ×（キャンセルと同じ） */
#impDialog #impCloseX { position: absolute; top: 6px; right: 8px; z-index: 20; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgba(29,30,34,0.9); border: 1px solid #33343b; color: #a0a1aa; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; border-radius: 0; }
#impDialog #impCloseX:hover { color: #ececef; border-color: rgb(var(--ui-ink)); }

/* ② のボタン（白黒を反転・PNGを保存・リセット）を、下の「戻る／リセット／キャンセル」と同じ見た目に（依頼 2026-10-04） */
#impControls :is(#impInvertBW, #impSavePng, #impSizeReset, #impInvertRoles) {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 5px;
  padding: 6px 13px; font-size: 12.5px; line-height: 1.3; cursor: pointer; box-shadow: none; }
#impControls :is(#impInvertBW, #impSavePng, #impSizeReset, #impInvertRoles):hover { border-color: rgba(var(--ui-ink), 0.7); }
#impControls #impInvertBW.on { border-color: rgb(var(--ui-ink)); background: rgba(var(--ui-ink), 0.18); }

/* ② 型とスタンプ台のすき間＝本体の値を表示するだけ（変えられない＝灰色・枠を点線） */
#impControls .qcRowFixed .impNumBox { opacity: .55; border-style: dashed; }
#impControls .qcRowFixed .impNumBox input { cursor: default; color: #a0a1aa; }
#impControls .impDim .impNumBox input::placeholder { color: #c3c5cc; opacity: 1; }   /* 空いているほう＝いまの寸法（数字で） */

/* 画像トレース②：白黒反転は画像の右下（QuickCookie と同じ四角いボタン・依頼 2026-10-12）。右の設定欄にあった行は隠す */
#impDialog .invertOnImg { position: absolute; right: calc(300px + 8px); bottom: 8px; z-index: 3; width: 56px; height: 56px; padding: 0;
  font-size: .78rem; line-height: 1.25; font-weight: 700; white-space: pre-line; text-align: center; border-radius: 0;
  background: rgba(20,20,24,.78); color: #fff; border: 1px solid rgba(255,255,255,.5); box-shadow: 0 2px 8px rgba(0,0,0,.35); cursor: pointer; touch-action: manipulation; }
#impDialog .invertOnImg[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
#impInvertRow { display: none !important; }

/* 模様集（右の「模様」欄・依頼 2026-10-12） */
#motifGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#motifGrid .motifTile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 5px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); cursor: pointer; color: var(--text); font-size: 11px; min-width: 0; }
#motifGrid .motifTile:hover { border-color: #f0b25a; }
#motifGrid .motifTile.editing { border-color: #f0b25a; background: rgba(240,178,90,.12); }
#motifGrid .motifTile svg { width: 26px; height: 16px; color: #f0b25a; }   /* 縦を半分ほどに（依頼 2026-10-15） */
#motifGrid .motifTile span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#motifEmptyNote { margin-top: 4px; }
#motifEditBar { position: absolute; top: 8px; left: 8px; right: 8px; justify-content: center; flex-wrap: wrap; z-index: 20; display: none; align-items: center; gap: 8px;
  background: rgba(30,24,16,.94); border: 1px solid #f0b25a; border-radius: 8px; padding: 6px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
#motifEditBar .mebTitle { color: #f0b25a; font-weight: 700; font-size: 12px; white-space: nowrap; }
#motifEditBar button { white-space: nowrap; border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
#motifEditBar .mebDone { background: #f0b25a; border-color: #f0b25a; color: #1c140f; font-weight: 700; }
/* 模様の編集中はスケッチの地を薄いカーマインに（ほかの図形はロックされている・依頼 2026-10-12） */
#sketchWrap.motifEditing #sketchCanvas { background-color: rgba(var(--ui-ink), 0.16); }

/* たたむ選び方：選んでいる1つだけ表示。右上の ▾ で「押すと広がる」ことを示す（依頼 2026-10-12） */
.pickCollapsed:has(input:checked) > label:not(:has(input:checked)) { display: none !important; }
.pickCollapsed:has(input:checked) > label:has(input:checked) { position: relative; }
.pickCollapsed:has(input:checked) > label:has(input:checked)::after { content: '▾'; position: absolute; top: 3px; right: 5px; font-size: 10px; opacity: .8; }
.pickCollapsed:has(input:checked) { grid-template-columns: repeat(3, 1fr); }
/* エンボスの断面形状｜縁取りエンボス を横並び（依頼 2026-10-12）。たたんでいるときは1枚ずつ、広げた方は欄の幅いっぱい */
.pickRow { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-bottom: 6px; }
.pickRow > .pickCol { flex: 1 1 0; min-width: 0; }
.pickRow > .pickCol[hidden] { display: none; }
.pickRow > .pickCol:has([data-picker]:not(.pickCollapsed)) { flex-basis: 100%; order: -1; }
/* 開いている一覧は枠と地の色で囲み、下の欄（縁取りエンボス・模様の範囲など）と分ける（依頼 2026-10-15） */
.pickRow > .pickCol:has([data-picker]:not(.pickCollapsed)) { padding: 8px 10px 10px; margin-bottom: 4px; box-sizing: border-box;
  background: rgba(255,255,255,0.045); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.35); }
.pickRow .pickCollapsed:has(input:checked) { grid-template-columns: 1fr; }
.pickRow .secSuppHead { white-space: normal; line-height: 1.3; min-height: 2.6em; }
/* エンボスの断面形状と縁取りエンボスのボタンを同じ大きさに（依頼 2026-10-12） */
#embProfSeg > label, #bdTypeSeg > label, #bdProfSeg > label { flex: none; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 2px; min-height: 58px; font-size: 11px; line-height: 1.2; box-sizing: border-box; }
#embProfSeg > label svg, #bdTypeSeg > label svg, #bdProfSeg > label svg { width: 36px; height: 24px; }
#embProfSeg, #bdTypeSeg, #bdProfSeg { grid-auto-rows: 58px; }
#embProfSeg > label, #bdTypeSeg > label, #bdProfSeg > label { width: 60px; min-width: 0; overflow: hidden; }
#embProfSeg > label span, #bdTypeSeg > label span, #bdProfSeg > label span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#embProfSeg, #bdTypeSeg, #bdProfSeg { grid-template-columns: repeat(3, 60px); justify-content: space-between; }
.pickRow .pickCollapsed:has(input:checked) { grid-template-columns: 60px; justify-content: start; }

/* 断面図の拡大（依頼 2026-10-12）: 左上のボタンで画面の中央に大きく。もう一度押すか Esc で戻る。拡大したままでも辺のドラッグ・数値の編集ができる */
#secZoomBtn { position: absolute; top: 7px; left: 8px; z-index: 5; font-size: 10px; line-height: 1; padding: 4px 7px; border-radius: 6px;
  color: var(--muted); background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.12); cursor: pointer; opacity: .72; }
#secZoomBtn:hover { opacity: 1; color: var(--text); border-color: rgba(255,255,255,0.25); }
#sectionEditor.locked #secZoomBtn { display: none; }
#secFigWrap.secZoom { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); width: min(760px, 92vw); z-index: 400;
  background: #1d2129; box-shadow: 0 0 0 100vmax rgba(0,0,0,0.55), 0 12px 40px rgba(0,0,0,0.6); padding: 34px 16px 14px; }
#secFigWrap.secZoom #secSvg { max-height: calc(100vh - 140px); }
#secFigWrap.secZoom #secZoomBtn { top: 10px; left: 12px; font-size: 15px; font-weight: 700; padding: 8px 14px; border-radius: 8px; opacity: 1;
  color: #fff; background: rgba(var(--ui-ink),0.9); border-color: rgba(255,255,255,0.35); }
#secFigWrap.secZoom #secZoomBtn:hover { background: var(--accent); }
#secFigWrap.secZoom { padding-top: 52px; }
/* 拡大ボタンも閉じるボタンと同じく目立つ形に（依頼 2026-10-12） */
#secZoomBtn { font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 7px; opacity: 1; color: #fff; background: rgba(var(--ui-ink),0.85); border-color: rgba(255,255,255,0.3); }
#secZoomBtn:hover { background: var(--accent); color: #fff; }
#secFigWrap:not(.secZoom) { padding-top: 40px; }
/* 拡大中は「閉じる」を右上に、「基準値に戻す」を左上に（依頼 2026-10-12） */
#secFigWrap.secZoom #secZoomBtn { left: auto; right: 12px; }
#secFigWrap.secZoom #secResetBtn { right: auto; left: 12px; top: 16px; }

/* 保存の確認：おすすめのボタン（上書き保存・まとめて保存）をテーマ色で（依頼 2026-10-13） */
#scBtns button.scPrimary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
/* 画像トレース：戻る（左）／次へ（右）を一番上と一番下に・01〜03 で同じ位置（依頼 2026-10-14） */
#impDialog .impNav { justify-content: space-between; }
#impDialog .impNavTop { margin: 0 0 12px; padding-right: 40px; }   /* 右上の × と重ならない */
#impControls .impBottom { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }

/* 縁取りの範囲指定のボタン（エンボス断面・縁取りエンボスと同じ大きさ）と、点選び中のバー（依頼 2026-10-15） */
/* 上半分＝全周・下半分＝範囲指定。いまの方をオークルで塗る（依頼 2026-10-15） */
.rangeSplit { width: 60px; height: 60px; display: flex; flex-direction: column; border: 1px solid var(--border); box-sizing: border-box; }
.rangeHalf { flex: 1 1 0; min-height: 29px; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 2px; box-sizing: border-box;
  font-size: 11px; line-height: 1.1; white-space: nowrap; color: var(--muted, #8a8f98); background: var(--panel2); border: 0; cursor: pointer; }
.rangeHalf + .rangeHalf { border-top: 1px solid var(--border); }
.rangeHalf svg { display: none; }
.rangeHalf:hover { color: #E6B666; }
.rangeHalf.on { background: var(--role-motif); color: #1c140f; font-weight: 600; }
.rangeTile { width: 60px; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; box-sizing: border-box;
  font-size: 11px; line-height: 1.2; color: var(--text); background: var(--panel2); border: 1px solid var(--border); cursor: pointer; }
.rangeTile svg { width: 36px; height: 24px; }
.rangeTile:hover { border-color: var(--role-motif); }
.rangeTile.on { border-color: var(--role-motif); color: var(--role-motif); }
#bdPickBar { position: absolute; z-index: 16; display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: rgba(17,20,26,.94); border: 1px solid var(--role-motif); box-shadow: 0 2px 8px rgba(0,0,0,.5); font-size: 11.5px; color: var(--text); max-width: 520px; }
#bdPickBar[hidden] { display: none; }
#bdPickBar span { flex: 1 1 auto; line-height: 1.35; white-space: nowrap; }
#bdPickBar button { flex: none; font-size: 11.5px; padding: 3px 9px; border: 1px solid var(--role-motif); background: transparent; color: #E6B666; cursor: pointer; }
#bdPickBar button:hover, #bdPickBar button.on { background: var(--role-motif); color: #1c140f; }
#bdPickBar button:disabled { opacity: .4; cursor: default; }
/* 全周・範囲指定は2つで1組。いまの方だけ塗り、もう一方は目立たせない（依頼 2026-10-15） */
#bdPickBar #bdRangeAll, #bdPickBar #bdRangeOn { border-color: var(--border); color: var(--muted, #8a8f98); background: transparent; font-weight: 400; }
#bdPickBar #bdRangeAll { margin-right: -6px; }
#bdPickBar #bdRangeAll:hover, #bdPickBar #bdRangeOn:hover { color: #E6B666; background: transparent; }
#bdPickBar #bdRangeAll.on, #bdPickBar #bdRangeOn.on { border-color: var(--role-motif); background: var(--role-motif); color: #1c140f; font-weight: 700; }
#bdPickBar .bdDone { flex: none; display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-left: 1px solid rgba(200,144,46,.5); margin-left: 2px; color: #E6B666; cursor: pointer; white-space: nowrap; }
#bdPickBar .bdDone input { width: 15px; height: 15px; margin: 0; accent-color: var(--role-motif); cursor: pointer; }

/* 模様コレクションの点線の四角（ここにドロップで模様に登録・依頼 2026-10-15） */
#motifGrid .motifTile.motifDrop { border: 1.5px dashed rgba(200,144,46,0.8); background: rgba(200,144,46,0.06); color: #E6B666; cursor: copy; }
#motifGrid .motifTile.motifDrop.hot { background: rgba(200,144,46,0.25); border-style: solid; }

/* 右のパネルの見出し「プロパティーパネル」は出さない（上のタブに「プロパティ」とあるため・依頼 2026-10-15） */
#areaPropsH2 { display: none; }
#motifGrid .motifDropNote { grid-column: 2 / -1; margin: 0; align-self: center; font-size: 10.5px; line-height: 1.45; }   /* 点線の四角の右横の説明 */
#mySetNewBtn { flex: none; width: 26px; height: 26px; margin-left: 0; padding: 0; font-size: 15px; line-height: 1; border-radius: 6px; cursor: pointer; }   /* マイ設定の＋（新しく登録） */

/* 模様のタイルを低く（依頼 2026-10-15） */
#motifGrid .motifTile { padding: 3px 2px 2px; gap: 1px; font-size: 10px; }
/* ブラシ：「形」の見出しをなくし、左端から敷き詰める。模様コレクションの模様で描くボタンは横長の札（依頼 2026-10-15） */
#brushPanel #brTipRow { display: block !important; }
#brushPanel .brTips button.brPatColl { grid-column: 1 / -1; padding: 6px 4px; }
.brandWord { font-family: var(--serif); font-style: italic; font-size: 13px; letter-spacing: .06em; color: #E6B666; }
#brushPanel .brTips button.brPatColl.on .brandWord { color: var(--accent); }
/* 右のパネルの「Pattern Collection」も同じ書体で */
#secMotif { font-family: var(--serif); font-style: italic; letter-spacing: .06em; }
/* ツールのダイアログの上の段＝つかんで動かす所。色帯にして、右につかみの点を出す（依頼 2026-10-15） */
#frTitle, #shpTitle, #rpTitle, #rpcTitle, #gridTitle, #offTitle, #simpTitle, #stmTitle, #supTitle, #txTitle, #cvTitle, #scTitle, #brTitle, #alTitle, #pfTitle, #hdlTitle, #presTitle {
  position: relative; display: block; margin: -12px -14px 10px; padding: 7px 34px 7px 14px; cursor: move; user-select: none;
  background: linear-gradient(rgba(var(--ui-ink), 0.26), rgba(var(--ui-ink), 0.14)); border-bottom: 1px solid rgba(var(--ui-ink), 0.45);
}
#alTitle, #pfTitle { margin: -10px -12px 9px; padding-left: 12px; }
#brushPanel #brTitle { margin: -11px -13px 9px; padding-left: 13px; }
#frTitle::after, #shpTitle::after, #rpTitle::after, #rpcTitle::after, #gridTitle::after, #offTitle::after, #simpTitle::after, #stmTitle::after, #supTitle::after, #txTitle::after, #cvTitle::after, #scTitle::after, #brTitle::after, #alTitle::after, #pfTitle::after, #hdlTitle::after, #presTitle::after {
  content: ''; position: absolute; right: 12px; top: 50%; width: 12px; height: 10px; margin-top: -5px; opacity: .7;
  background-image: radial-gradient(currentColor 1.1px, transparent 1.3px); background-size: 4px 4px;
}
/* 数字の欄：上下の小さな矢印は出さず、左右の ◀ ▶ で増減（QuickCookie と同じ・依頼 2026-10-15） */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.lrNum { display: inline-flex; align-items: stretch; vertical-align: middle; max-width: 100%; }
.lrNum { flex: none; }
.lrNum > input[type=number] { text-align: center; min-width: 0 !important; width: 48px !important; flex: none !important; margin: 0 !important; }
/* パネルごとのボタンの見た目に引っぱられないよう、ここだけは強く決める */
.lrNum > button.lrStep { flex: none !important; width: 15px !important; min-width: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--accent) !important;
  font-size: 9px !important; font-weight: 400 !important; line-height: 1 !important; cursor: pointer; font-family: system-ui, sans-serif !important;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.lrNum > button.lrStep:hover { background: rgba(var(--ui-ink), 0.18) !important; }
.lrNum > button.lrStep:active { background: rgba(var(--ui-ink), 0.32) !important; }
/* ダイアログの役割のボタン（依頼 2026-10-15）：カッター＝ポピー・エンボス＝青・模様＝オークル。文字も枠もその色、選んでいる方は塗る */
.roleSeg button[data-role="cutter"], #rolePop #rpCutter { color: #F0482E !important; border-color: #F0482E !important; }
.roleSeg button[data-role="cutter"].on, #rolePop #rpCutter.on { background: #F0482E !important; color: #fff !important; font-weight: 600; }
.roleSeg button[data-role="emboss"], #rolePop #rpEmboss { color: var(--role-emboss) !important; border-color: var(--role-emboss) !important; }
.roleSeg button[data-role="emboss"].on, #rolePop #rpEmboss.on { background: var(--role-emboss) !important; color: #0c1828 !important; font-weight: 600; }
.roleSeg button[data-role="motif"], #rolePop #rpMotif { color: var(--role-motif) !important; border-color: var(--role-motif) !important; }
.roleSeg button[data-role="motif"].on, #rolePop #rpMotif.on { background: var(--role-motif) !important; color: #1c140f !important; font-weight: 600; }
/* オーナメント（依頼 2026-10-16）＝緑：刃のない板（すき間ゼロのスタンプ台） */
.roleSeg button[data-role="sign"], #rolePop #rpSign { color: var(--role-sign) !important; border-color: var(--role-sign) !important; }
.roleSeg button[data-role="sign"].on, #rolePop #rpSign.on { background: var(--role-sign) !important; color: #0e1a14 !important; font-weight: 600; }
/* 右クリックメニューの役割の項目（依頼 2026-10-17）＝ダイアログの役割ボタンと同じ色・形：文字も枠もその色の四角いボタン、今の役割（.on）と指したときは塗る */
/* 別のタブに送る（依頼 10/20）：タブの種類の印＋タブの名前 */
#ctxMenu button.ctxSendTab { display: flex; align-items: center; gap: 6px; }
#ctxMenu button.ctxSendTab .sendTabIc { display: inline-flex; flex: none; }
#ctxMenu button.ctxRole { border: 1px solid currentColor !important; background: transparent; margin: 3px 0; padding: 5px 12px; }
#ctxMenu button.ctxRole::before { content: none !important; }
#ctxMenu button.ctxRole.ctxCutter { color: #F0482E !important; }
#ctxMenu button.ctxRole.ctxCutter:is(:hover, .on) { background: #F0482E !important; border-color: #F0482E !important; color: #fff !important; font-weight: 600; }
#ctxMenu button.ctxRole.ctxEmboss { color: var(--role-emboss) !important; }
#ctxMenu button.ctxRole.ctxEmboss:is(:hover, .on) { background: var(--role-emboss) !important; border-color: var(--role-emboss) !important; color: #0c1828 !important; font-weight: 600; }
#ctxMenu button.ctxRole.ctxMotif { color: var(--role-motif) !important; }
#ctxMenu button.ctxRole.ctxMotif:is(:hover, .on) { background: var(--role-motif) !important; border-color: var(--role-motif) !important; color: #1c140f !important; font-weight: 600; }
#ctxMenu button.ctxRole.ctxSign { color: var(--role-sign) !important; }
#ctxMenu button.ctxRole.ctxSign:is(:hover, .on) { background: var(--role-sign) !important; border-color: var(--role-sign) !important; color: #0e1a14 !important; font-weight: 600; }
#sketchTools button[data-tool="handle"] { display: none !important; }   /* 取っ手はステムの長押しから（依頼 2026-10-16） */

/* ===== ツールのダイアログの基準（依頼 2026-10-16）===== */
/* 数字の行：名前（左・縮む）｜◀ 数字 ▶｜単位（同じ幅の列）。単位のない行も同じ幅をあけて、数字の欄を縦にそろえる */
:is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) label.row:has(.lrNum) { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
:is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) label.row:has(.lrNum) > span:first-child { flex: 1 1 auto; min-width: 0; }
:is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) label.row:has(.lrNum) > .lrNum { margin-left: auto; }
:is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) label.row > .unit { flex: none; width: 2.2em; text-align: left; white-space: nowrap; }
/* サポートのパネル：見た目の指定が抜けていた＝取っ手と同じ形に */
#supportPanel {
  display: none; position: absolute; top: 28px; left: 12px; z-index: 16;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 8px;
  padding: 12px 14px; width: 240px; font-size: 12.5px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
#supportPanel .row { display: flex; gap: 6px; align-items: center; margin-bottom: 9px; }
#supportPanel .note { color: var(--muted); font-size: 11px; line-height: 1.5; margin-bottom: 9px; }
#supportPanel .note:empty { display: none; }
#supportPanel label { cursor: pointer; }
#supportPanel input[type=number] {
  background: #11141a; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-size: 12.5px;
}
#supportPanel button {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 11px; font-size: 12px; cursor: pointer;
}
#supportPanel button.primary { background: var(--accent); color: #1c140f; border-color: var(--accent); font-weight: 600; }
#supportPanel .row.btns { display: flex; flex-wrap: nowrap; gap: 6px; margin: 4px 0 0; }
#supportPanel .row.btns button { flex: 1 1 0; min-width: 0; padding: 6px 4px; white-space: nowrap; text-align: center; }
/* 確定（いちばん大事なボタン）は、どのダイアログでもポピー・濃い太字（依頼 2026-10-16） */
:is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) button.primary {
  background: var(--accent); color: #1c140f; border-color: var(--accent); font-weight: 600;
}
/* ボタンの並び（依頼 2026-10-16）：一番下に1段・同じ幅で「（削除・解除など）・キャンセル・確定」。確定は一番右。
   追加の操作（アウトライン化・解除など）は .sub＝その上の段に同じ幅で。出ていないボタンだけの段はあけない */
:is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) .row.btns { display: flex; flex-wrap: nowrap; justify-content: stretch; gap: 6px; margin: 4px 0 0; }
:is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) .row.btns.sub { margin: 0 0 6px; }
:is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) .row.btns.sub:not(:has(> button:not([hidden]):not([style*="none"]))) { display: none; }
:is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) .row.btns > button { flex: 1 1 0; flex-basis: 0 !important; min-width: 0; padding: 6px 4px; white-space: nowrap; text-align: center; }
/* 3つ並ぶダイアログが狭くて文字がくっつかないよう、ステム・取っ手と同じ幅に */
#rpcPanel, #gridPanel { width: 240px; box-sizing: border-box; }
/* スライダーの基準（依頼 2026-10-16）：右のパネルと同じ見た目。
   1段目＝名前（左）と数値（右・ポピーの太字）、2段目＝幅いっぱいのバー（ポピーの逆三角のつまみ）。
   ダイアログの幅は 240px にそろえる＝どのダイアログでもバーの長さが同じ */
:is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) { width: 240px; box-sizing: border-box; }
:is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) .row:has(> input[type=range]) { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; column-gap: 3px; row-gap: 4px; margin-bottom: 10px; }
:is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) .row:has(> input[type=range]) > :first-child { grid-column: 1; grid-row: 1; color: var(--text); }
:is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) .row:has(> input[type=range]) > input[type=range] { grid-column: 1 / -1; grid-row: 2; }
:is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) .row:has(> input[type=range]) > span:not(:first-child) { grid-row: 1; color: var(--accent); font-weight: 600; text-align: right; }
:is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) .param label .val { color: var(--accent); font-weight: 600; }
:is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) input[type=range] {
  width: 100%; min-width: 0; margin: 0; flex: none; display: block; -webkit-appearance: none; appearance: none; accent-color: auto;
  height: 5px; border-radius: 3px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, rgba(var(--ui-ink),0.55), rgba(var(--ui-ink),0.16));
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
:is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 13px; border: none; cursor: pointer;
  background: rgb(var(--ui-ink)); clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 1.5px 1.5px rgba(0,0,0,0.45));
}
:is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) input[type=range]::-webkit-slider-thumb:hover { background: color-mix(in srgb, rgb(var(--ui-ink)) 78%, #fff); }
:is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) input[type=range]::-moz-range-thumb {
  width: 15px; height: 13px; border: none; border-radius: 0; cursor: pointer;
  background: rgb(var(--ui-ink)); clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 1.5px 1.5px rgba(0,0,0,0.45));
}
/* ブラシのスライダー行は専用の3列指定（id 2つ分の強さ）が残っていたので、同じ強さで基準に戻す */
#brushPanel :is(#brGapRow, #brWRow, #brSmoothRow, #brAmpRow, #brKnotWRow), #brushPanel #brMotifBox label.row:has(> input[type=range]) {
  grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 3px; row-gap: 4px; align-items: baseline;
}
#brushPanel :is(#brGapRow, #brWRow, #brSmoothRow, #brAmpRow, #brKnotWRow) > span:last-child, #brushPanel #brMotifBox label.row:has(> input[type=range]) > span:last-child,
#brushPanel #brWVal { min-width: 0; font-size: inherit; color: var(--accent); font-weight: 600; text-align: right; }
/* オフセット・パスの単純化・キャンバスの枠と見出しも、ほかのダイアログと同じポピーに（昔のサブの色の残り・依頼 2026-10-16） */
#offPanel, #simpPanel, #canvasPanel { border-color: var(--accent); }
#offPanel #offTitle, #simpPanel #simpTitle, #canvasPanel #cvTitle { color: var(--accent); }
#offPanel input[type=radio], #offPanel input[type=checkbox], #canvasPanel input { accent-color: var(--accent) !important; }
/* スケッチブラウザの札も役割の色に（依頼 2026-10-16）：Ornament＝緑・模様＝オークル・押し手＝カッターのポピー。下絵は青と紛れないよう灰 */
.objChip.cSign { background: rgba(63,182,139,0.16); color: var(--role-sign); border-color: rgba(63,182,139,0.5); }
.objChip.cMotif { background: rgba(200,144,46,0.16); color: var(--role-motif); border-color: rgba(200,144,46,0.5); }
.objChip.cStem { background: rgba(var(--ui-ink),0.2); color: rgb(var(--ui-ink)); border-color: rgba(var(--ui-ink),0.5); }
.objChip.cEmb { color: var(--role-emboss); }
.objChip.cCanvas { background: rgba(154,163,178,0.12); color: #b8bfcc; border-color: rgba(154,163,178,0.4); }

/* Ornament の段（依頼 2026-10-16）：断面図は段の高さの図に切り替え、刃の欄は隠す */
#sectionEditor.orMode #profSeg, #sectionEditor.orMode #secProfile, #sectionEditor.orMode #baseToggleRow, #sectionEditor.orMode #bandOutRow,
#sectionEditor.orMode #secChipsGroup, #sectionEditor.orMode #secResetBtn, #sectionEditor.orMode #clipWarn { display: none !important; }
/* Ornament の高さグループのボタン（スケッチの塊の右上・依頼 2026-10-16）：左の帯＝そのグループの緑の濃さ */
#orLvPop { position: absolute; z-index: 18; display: none; gap: 4px; padding: 5px; background: var(--panel2); border: 1px solid var(--role-sign); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.5); }
#orLvPop button { padding: 5px 9px 5px 14px; font-size: 12px; white-space: nowrap; cursor: pointer; color: var(--role-sign); background: var(--panel); border: 1px solid var(--role-sign); border-radius: 5px; box-shadow: inset 7px 0 0 var(--orSw, transparent); }
#orLvPop button.hole { background-image: repeating-linear-gradient(0deg, var(--role-sign) 0 2px, transparent 2px 4px); background-size: 7px 100%; background-repeat: no-repeat; }
#orLvPop button.on { background-color: var(--role-sign); color: #0e1a14; font-weight: 600; }
#brushPanel .roleSeg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-bottom: 10px; }   /* ブラシの役割（依頼 2026-10-16） */
#brushPanel .roleSeg button { padding: 5px 4px; font-size: 12px; border: 1px solid var(--border); border-radius: 5px; background: var(--panel); cursor: pointer; }
.viewBtns { position: absolute; left: 50px; top: 30px; z-index: 7; display: flex; gap: 6px; }   /* 組んだ形を見る・側面図（依頼 2026-10-16） */
.viewHomeBtn.asmBtn { position: static; width: auto; padding: 0 10px; font-size: 12px; white-space: nowrap; }
.viewHomeBtn.asmBtn[hidden] { display: none; }
.viewHomeBtn.asmBtn.on { background: var(--accent); color: #1c140f; border-color: var(--accent); font-weight: 600; }
/* 分解図のパネル（依頼 2026-10-16）：3Dの左上・組んだ形を見るボタンの下 */
#asmPanel { position: absolute; left: 12px; top: 64px; z-index: 7; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; font-size: 12px; color: var(--text);
  background: linear-gradient(150deg, #242a38 0%, #161a22 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.45); }
#asmPanel[hidden] { display: none; }
#asmPanel .asmRow { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#asmPanel input[type=range] { width: 140px; accent-color: var(--accent); }
#asmPanel input[type=number] { width: 48px; background: #11141a; color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 2px 4px; font-size: 12px; }
#asmPanel input[type=checkbox] { accent-color: var(--accent); margin: 0; }
/* スタンプ台のモード（依頼 2026-10-16） */
#baseModeBox { margin: 6px 0 8px; }
.baseModeSeg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 4px 0 6px; }
.baseModeSeg button { padding: 6px 2px; font-size: 12px; white-space: nowrap; background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 5px; cursor: pointer; }
.baseModeSeg button.on { background: var(--accent); border-color: var(--accent); color: #1c140f; font-weight: 600; }
.baseModeSeg button:disabled { opacity: .4; cursor: default; }
#sectionEditor.orMode #baseModeBox { display: none; }
#baseModeBox .bmRow { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
#baseModeBox .bmRow > span:first-child { flex: 1 1 auto; }
#baseModeBox .bmRow[hidden] { display: none; }
#baseModeBox input[type=number] { width: 48px; background: #11141a; color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 3px 4px; font-size: 12.5px; }
#baseModeNote { font-size: 11px; line-height: 1.5; color: var(--muted); margin-bottom: 4px; }
/* 押し出しはスタンプ台のモードから。JustStem はステムの道具からも選べる＝入口が2つ（依頼 2026-11-03）。設定は断面図の下に出るので、ここでは型を選ぶだけ */
#stemPanel .stmJustOpt:has(input[value="push"]) { display: none !important; }
#stemPanel.justSimple :is(#stmSetHint, label.row:has(#stmW), label.row:has(#stmH), label:has(#stmLen), label:has(#stmCount), #stmOffRow, #stmFwRow, #stmLipRow, #stmLipHRow, #stmPlateRow, #stmDoughRow, #stmDepthRow, #stmOutRow, #stmSrcRow, #stmPickRow, #stmTarget) { display: none !important; }
#alignPanel .alPackRow { margin-top: 6px; }
#alignPanel #alPack { width: 100%; }
#alignPanel #alPackNote { margin-top: 4px; font-size: 11px; color: var(--muted); }
#alignPanel #alPackNote:empty { display: none; }

/* ===== プレゼンモード（依頼 2026-10-17）：画面収録・オンラインのレッスン用のポインター・クリック・ドラッグ・押したキー。色はキーカラー（--pr＝--sketch-ink） ===== */
#presentBtn { display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; }
#presentBtn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
#presenter { position: fixed; inset: 0; pointer-events: none; z-index: 2147483002;   /* 設定のダイアログより手前＝大きさのスライダーを動かしながら実際の丸が見える（依頼 2026-10-17）*/ --pr: var(--ui-ink); }
#presenter[hidden] { display: none; }
#presenter .prTrail { position: absolute; left: 0; top: 0; }
#presenter .prRing { position: absolute; left: 0; top: 0; width: var(--sz, 40px); height: var(--sz, 40px); margin: calc(var(--sz, 40px) / -2) 0 0 calc(var(--sz, 40px) / -2); border-radius: 50%;
  border: 3px solid rgba(var(--pr), 0.95); background: rgba(var(--pr), 0.18); box-shadow: 0 0 0 2px rgba(255,255,255,0.75), 0 2px 10px rgba(0,0,0,0.35);
  transition: width .12s, height .12s, margin .12s, background-color .12s, opacity .2s; will-change: transform; }
#presenter .prRing::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(var(--pr), 1); }
#presenter .prRing.down { width: calc(var(--sz, 40px) * 0.76); height: calc(var(--sz, 40px) * 0.76); margin: calc(var(--sz, 40px) * -0.38) 0 0 calc(var(--sz, 40px) * -0.38); background: rgba(var(--pr), 0.45); }
#presenter .prRing.gone { opacity: 0; }
#presenter .prRipple { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 3px solid rgba(var(--pr), 0.9);
  animation: prRipple .6s ease-out forwards; }
#presenter .prRipple.right { border-style: dashed; }
@keyframes prRipple { to { width: 76px; height: 76px; margin: -38px 0 0 -38px; opacity: 0; border-width: 1px; } }
#presenter .prKeys { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; gap: 10px; opacity: 0; transition: opacity .25s; }
#presenter .prKeys.show { opacity: 1; }
#presenter .prCombo { display: flex; gap: 5px; padding: 8px 10px; border-radius: 12px; background: rgba(20,22,28,0.88); border: 2px solid rgba(var(--pr), 0.9); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
#presenter .prCombo kbd { min-width: 30px; padding: 5px 9px; border-radius: 7px; background: rgba(var(--pr), 0.95); color: #fff; font: 700 20px/1.1 -apple-system, "Hiragino Sans", sans-serif; text-align: center; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25); }
/* プレゼンモードの設定ダイアログ（ダイアログの基準どおり・ヘッダーのボタンの下に出す） */
#presPanel { display: none; position: fixed; top: 52px; right: 16px; z-index: 2147483001;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 8px; padding: 12px 14px; font-size: 12.5px; box-shadow: 0 4px 18px rgba(0,0,0,.45); text-align: left; }
#presPanel.open { display: block; max-height: calc(100vh - 68px); overflow-y: auto; }   /* 低い画面でも確定・キャンセルまで届く */
#presPanel .note { color: var(--muted); font-size: 11px; line-height: 1.5; margin-bottom: 9px; }
#presPanel .row { margin-bottom: 9px; }
#presPanel .presSegRow { display: flex; align-items: center; gap: 8px; }
#presPanel .presSegRow > span:first-child { flex: 1 1 auto; }
#presPanel .presSeg { display: flex; gap: 4px; }
#presPanel .presSeg button { padding: 4px 6px; background: var(--panel2); color: var(--muted); border: 1px solid var(--border); border-radius: 5px; cursor: pointer; display: inline-flex; }
#presPanel .presSeg button.on { color: var(--accent); border-color: var(--accent); }
#presPanel .presChk { display: flex; align-items: center; gap: 7px; cursor: pointer; }
#presPanel .presChk input { margin: 0; accent-color: var(--accent); }
#presPanel .dim { opacity: .4; pointer-events: none; }
#presenter .prRing.square { border-radius: 6px; }
#presenter .prRing.square::after { border-radius: 1px; }
#presPanel #presColRow { display: block; }
/* 色は 3D ビューの色の並び（#themeSel）と同じデザイン：丸いドット・白い縁・選んでいる色は白い縁取り・横に色の名前（斜体）（依頼 2026-10-17） */
#presPanel .presCols { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
#presPanel .presCols button {
  width: 16px; height: 16px; border-radius: 50%; cursor: pointer; padding: 0; flex: none;
  background: var(--sw); border: 2px solid rgba(255,255,255,0.18); box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
#presPanel .presCols button:hover { border-color: rgba(255,255,255,0.6); transform: scale(1.15); }
#presPanel .presCols button.on { border-color: #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,0.45); position: relative; z-index: 1; }
#presPanel .presCols button.auto { border-style: dashed; border-color: rgba(255,255,255,0.55); }   /* キーカラーに合わせる＝点線の縁 */
#presPanel .presCols button.auto.on { border-style: solid; border-color: #fff; }
#presPanel .presColName { display: block; margin-top: 6px; font-family: var(--serif); font-size: 10.5px; font-style: italic; color: var(--text); letter-spacing: .06em; white-space: nowrap; }
#presenter .prRipple.square { border-radius: 6px; }
#presPanel #presTitle { cursor: grab; user-select: none; touch-action: none; }
#presPanel #presTitle:active { cursor: grabbing; }
#presenter .prSpot { position: absolute; inset: 0; pointer-events: none; display: none;
  background: radial-gradient(circle at var(--sx, -999px) var(--sy, -999px), transparent 0, transparent calc(var(--sr, 110px) - 2px), rgba(0,0,0,0.55) var(--sr, 110px)); }
#presenter .prSpot.on { display: block; }
#presenter .prCombo.wheel kbd { font-size: 16px; }
#presenter .prCombo { align-items: center; }
#presenter .prAct { margin-left: 6px; padding-right: 4px; color: #fff; font: 600 16px/1.2 -apple-system, "Hiragino Sans", sans-serif; white-space: nowrap; }
#presenter .prHi { position: absolute; box-shadow: 0 0 0 3px rgba(var(--pr), 1), 0 0 18px 6px rgba(var(--pr), 0.7); background: rgba(var(--pr), 0.22); animation: prHi 1.5s ease-out forwards; }
@keyframes prHi { 0% { opacity: 0; transform: scale(1.25); } 15% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; } }
body:has(#presenter.pen) * { cursor: crosshair !important; }   /* ペンで描いているあいだは十字のカーソル */
/* プレゼンモードのボタン：「プレゼンモードオン」は長いので、キャンセルより広く（1段に収める） */
#presPanel .row.btns:not(.sub) > #presOk { flex-grow: 1.8 !important; padding-left: 4px; padding-right: 4px; }

/* キーカラーが暗いモードの「反転」（台帳の MODES[X].keyInvert:true → :root[data-key-invert="on"]・Board・直子さん 10/19「読みにくいところは反転させたらいいから。反転、紺字に白字とか」）。
   キーカラーを字に使っている所を「キーカラーの塗り＋白の字」に。塗りの余白は box-shadow で描く＝位置と大きさは変えない（layout-check の差0のまま）。
   面で使っている所（選んでいる道具・確定のボタンなど）は今のまま（白の字で読める） */
:root[data-key-invert="on"] {
  --ki-chip: 0 0 0 2px var(--accent);
}
/* 見出し・数値・小さい字＝塗りの札にする */
:root[data-key-invert="on"] :is(#checkoutOverlay .cb-title, #checkoutOverlay .cb-line-title, #stemPanel #flgTitle, #alTitle, #pfTitle, #impDialog #impTitle,
  #rpcPanel #rpcTitle, #gridPanel #gridTitle, #reflectPanel #reflectTitle, #mirrorPanel #mirrorTitle, #shpPanel #shpTitle, #rpolyPanel #rpTitle, #textPanel #txTitle,
  #framePanel #frTitle, #scallopPanel #scTitle, #expPanel #expTitle, #offPanel #offTitle, #simpPanel #simpTitle, #canvasPanel #cvTitle,
  .param label .val, #impDialog .row .val, #brushPanel #brWVal, #stemPanel .stmSetRow.need b, #brushPanel #brMotifPickBtn small, .objSet,
  #brushPanel .brTips button.brPatColl.on .brandWord, #impControls .impChain, :is(#impControls, #impIntro) .qcNo, .impStepBtn b, :is(#impControls, #impIntro) .qcSlider output,
  :is(#offPanel, #simpPanel, #canvasPanel, #stemPanel, #supportPanel, #handlePanel, #scallopPanel, #textPanel, #rpolyPanel, #brushPanel, #shpPanel, #rpcPanel, #gridPanel, #reflectPanel, #mirrorPanel, #framePanel, #presPanel, #tabCloseDlg) .row:has(> input[type=range]) > span:not(:first-child)) {
  color: #fff !important; background-color: var(--accent) !important; box-shadow: var(--ki-chip) !important; border-radius: 2px;
}
/* 枠だけのボタン・選んでいる印＝塗りのボタンにする */
:root[data-key-invert="on"] :is(#exportShownBtn, #mySetSec #mySetSave, #newSetBtn, #sketchTools #illustConvBtn, #stemPanel .stmJustOpt, #brMotifSave, #bdMotifSave, #splitSel button.on, #viewSel button.on, .asideTab.on, #brushPanel .brTips button.on) {
  color: #fff !important; background: var(--accent) !important; border-color: var(--accent) !important;
}
:root[data-key-invert="on"] .lrNum > button.lrStep { color: var(--text) !important; }   /* 数の横の小さい ◀ ▶ は札にせず地の字の色に（細すぎて札にすると読めない） */
/* 字のリンク・ホバー＝地の字の色に（下線で見分ける） */
:root[data-key-invert="on"] :is(#authRefund a, :is(#impControls, #impIntro) .qcLink) { color: var(--text) !important; }
:root[data-key-invert="on"] :is(.foldTab:hover, .authLinkBtn:hover, #authResend:hover) { color: var(--text) !important; }
/* ヘッダー・保存・書き出しのボタンの印は線のアイコン（絵文字は使わない・直子さんの決まり／本社 10/20）。字は訳のまま差し替わるので、印は ::before で描く */
:is(#openBtn, #saveBtn, #exportShownBtn, #expPlain, #expMirror)::before {
  content: ''; display: inline-block; flex: none; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px;
  background: currentColor; -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain;
}
header :is(#openBtn, #saveBtn, #exportShownBtn) { min-height: 35px; }   /* 絵文字の字の高さで 35px だった＝ヘッダーの高さを変えない（下の画面がずれない） */
#openBtn { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8V6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v2M3 8v10a2 2 0 0 0 2 2h12.5a2 2 0 0 0 1.9-1.4L21.8 12a1.5 1.5 0 0 0-1.4-2H7.6a2 2 0 0 0-1.9 1.4L3 19'/></svg>"); }
:is(#saveBtn) { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 3h11l4 4v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 1-2zM8 3v5h7V3M7 21v-7h10v7'/></svg>"); }
:is(#exportShownBtn, #expPlain, #expMirror) { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11M7 10l5 5 5-5M5 20h14'/></svg>"); }

/* 注意・エラーの印は線のアイコン（⚠・⛔ の絵文字は使わない・本社 10/20）。字の色＝注意の色・エラーの色のまま */
:is(#wallWarn, #chamferWarn, #baseWarn, #stemWarn, #socketWarn, .note):is(.warn, .err):not(:empty)::before, .warnTxt::before, #bigWarn:not(:empty)::before, #scToast.err::before {
  content: ''; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .35em; vertical-align: -0.15em;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5 2.5 20h19z'/><path d='M12 10v4.5M12 17.2v.3'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5 2.5 20h19z'/><path d='M12 10v4.5M12 17.2v.3'/></svg>") no-repeat center / contain;
}
/* エンボスフォルダーの2枚の並べ方（横⇄縦）の切り替え：板のバウンディングボックスの右上に出る小さなボタン（直子さん 2026-10-20）。位置は粘土のモードの側が置く */
#craftDirBtn { position: absolute; z-index: 18; transform: translate(-100%, calc(-100% - 8px)); display: flex; align-items: center; justify-content: center; width: 30px; height: 28px; padding: 0; cursor: pointer; color: var(--text); background: var(--panel); border: 1px solid var(--accent); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
#craftDirBtn svg { width: 18px; height: 18px; }
#craftDirBtn:hover { background: rgba(var(--ui-ink), .18); }
#craftDirBtn[hidden], :root:not([data-mode="craft"]) #craftDirBtn { display: none; }