.cube3d-root, .cube3d-root * { box-sizing: border-box; }

.cube3d-root {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "BIZ UDGothic", "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  background: #f5f7fa;
  color: #2C3E50;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 9999;
}/* ===== フルスクリーンcanvas領域 ===== */


.cube3d-root #cube3d-canvas-wrap {
  position: fixed;
  top: 52px; left: 0;
  width: 100vw;
  height: calc(100vh - 52px);
  background: #e8edf4;
}
.cube3d-root #cube3d-canvas-wrap canvas { display: block; }/* ===== 右下ツールバー ===== *//* 修正: ⚙設定 / 🗑削除 / ✋モード切替 / 👻ゴースト表示 / 📷記録 の5個構成 */



.cube3d-root .cube3d-toolbar {
  position: fixed;
  right: 16px; bottom: 20px;
  display: flex; flex-direction: column;
  gap: 12px;
  z-index: 10;
}
.cube3d-root .cube3d-btn {
  width: 60px; height: 60px;
  border-radius: 999px;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.cube3d-root .cube3d-btn:active { transform: scale(0.92); }
.cube3d-root .cube3d-btn-setting  { background: #fff; color: #1e3a5f; border: 2px solid #1e3a5f; }
.cube3d-root .cube3d-btn-delete   { background: #fff; color: #c0392b; border: 2px solid #c0392b; }
.cube3d-root .cube3d-btn-mode     { background: #1e3a5f; color: #fff; }
.cube3d-root .cube3d-btn-mode.cube3d-active { background: #00b8d4; }
.cube3d-root .cube3d-btn-ghost    { background: #fff; color: #7F8C8D; border: 2px solid #c8d4e8; }
.cube3d-root .cube3d-btn-ghost.cube3d-active { background: #d4af37; color: #fff; border-color: #d4af37; }
.cube3d-root .cube3d-btn-snapshot { background: #d4af37; color: #fff; }
.cube3d-root .cube3d-btn:disabled { opacity: 0.35; cursor: default; }
.cube3d-root .cube3d-btn:disabled:active { transform: none; }/* 選択中の個数バッジ（🗑ボタンの左上に重ねる） */


.cube3d-root .cube3d-sel-badge {
  position: absolute;
  top: -6px; right: -6px;
  background: #00b8d4;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
}
.cube3d-root .cube3d-sel-badge.hidden { display: none; }/* 修正: 間かくスライダーをツールバー最上部の縦スライダーに変更
   （ローズ曲線ジェネレーターのサイズスライダーと同じ手法） */


.cube3d-root .cube3d-slider-tool {
  position: relative;
  width: 60px;
  height: 160px;
  background: #fff;
  border: 2px solid #1e3a5f;
  border-radius: 30px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  color: #1e3a5f;
}
.cube3d-root .cube3d-slider-tool-icon {
  position: absolute;
  top: 10px; left: 0; right: 0;
  text-align: center;
  font-size: 16px;
}
.cube3d-root .cube3d-slider-tool-val {
  position: absolute;
  bottom: 10px; left: 0; right: 0;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}
.cube3d-root .cube3d-slider-tool input[type="range"] {
  position: absolute;
  top: 50%; left: 50%;
  width: 100px;
  transform: translate(-50%, -50%) rotate(-90deg);
  accent-color: #1e3a5f;
}/* 操作モードの説明チップ（左下） */


.cube3d-root .cube3d-mode-tip {
  position: fixed;
  left: 16px; bottom: 20px;
  background: rgba(30,58,95,0.85);
  color: #fff;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  z-index: 10;
  pointer-events: none;
  max-width: 60vw;
}/* ===== ステップ画面（オーバーレイ） ===== */


.cube3d-root .cube3d-overlay {
  position: fixed; inset: 0;
  background: rgba(30,58,95,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 12px;
  touch-action: pan-y;
}
.cube3d-root .cube3d-overlay.hidden { display: none; }
.cube3d-root .cube3d-dialog {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 24px 24px 22px;
  width: min(92vw, 460px);
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  text-align: center;
}
.cube3d-root .cube3d-dialog h2 { color: #1e3a5f; font-size: 19px; margin: 0 0 6px; }
.cube3d-root .cube3d-step-label {
  display: inline-block;
  background: #d4af37;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  border-radius: 999px;
  padding: 3px 14px;
  margin-bottom: 10px;
}
.cube3d-root .cube3d-hint { font-size: 13px; color: #5a708a; margin: 0 0 16px; }

.cube3d-root .cube3d-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: none;
  background: #eef2f6;
  color: #5a708a;
  font-size: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}/* 修正: ステップ画面に埋め込みプレビューを追加。たて・よこ・たかさを動かすと
   その場で3D形状が更新される（決定ボタンを押す前に確認できる） */


.cube3d-root .cube3d-preview-title {
  font-size: 13px; font-weight: bold; color: #1e3a5f;
  text-align: left; margin: 2px 0 6px;
}
.cube3d-root .cube3d-preview-box {
  width: 100%;
  height: 190px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #dbe2ea;
  background: #e8edf4;
  margin-bottom: 18px;
}
.cube3d-root .cube3d-preview-box canvas { display: block; width: 100%; height: 100%; }

.cube3d-root .cube3d-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; text-align: left; }
.cube3d-root .cube3d-dimension-row { display: flex; align-items: center; gap: 10px; }
.cube3d-root .cube3d-dimension-label {
  width: 46px; flex-shrink: 0;
  font-size: 13px; font-weight: bold; color: #1e3a5f;
}

.cube3d-root .cube3d-decide-btn {
  width: 100%;
  padding: 14px 0;
  border-radius: 999px;
  border: none;
  background: #d4af37;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cube3d-root .cube3d-decide-btn:active { transform: scale(0.97); }/* 記録一覧 */


.cube3d-root .cube3d-snap-title {
  margin: 22px 0 8px;
  font-size: 14px;
  font-weight: bold;
  color: #1e3a5f;
  text-align: left;
}
.cube3d-root .cube3d-snap-list { display: flex; flex-direction: column; gap: 8px; }
.cube3d-root .cube3d-snap-item {
  display: flex; align-items: center; justify-content: space-between;
  background: #f5f7fa;
  border-radius: 10px;
  padding: 8px 10px;
  gap: 8px;
}
.cube3d-root .cube3d-snap-name { font-size: 13px; font-weight: bold; color: #1e3a5f; }
.cube3d-root .cube3d-snap-detail { font-size: 11px; color: #7F8C8D; }
.cube3d-root .cube3d-snap-btns { display: flex; gap: 6px; flex-shrink: 0; }
.cube3d-root .cube3d-snap-btn {
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cube3d-root .cube3d-snap-load { background: #1e3a5f; color: #fff; }
.cube3d-root .cube3d-snap-del  { background: #fff; color: #c0392b; border: 1px solid #c0392b; }
.cube3d-root .cube3d-snap-empty { font-size: 12px; color: #7F8C8D; text-align: left; }

.cube3d-root .hidden { display: none !important; }/* Source JSON: Material Symbols Outlined, 24px. */


.cube3d-root .ms-app-icon{display:inline-block;width:24px;height:24px;min-width:24px;vertical-align:middle;fill:currentColor;pointer-events:none;flex-shrink:0}
.cube3d-root span.ms-app-icon{background-color:currentColor;-webkit-mask:var(--ms-icon) center/contain no-repeat;mask:var(--ms-icon) center/contain no-repeat}
.cube3d-root button:has(.ms-app-icon){display:inline-flex;align-items:center;justify-content:center;gap:6px}/* 移動・可変の道具BOX */


.vtb-host .atb-toolbox{display:flex;position:absolute;right:16px;bottom:84px;width:244px;height:380px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 64px);padding:0;gap:0;align-items:stretch;flex-direction:column;background:#f5f7fc;border:2px solid #c8d3e3;border-radius:16px;box-shadow:0 6px 24px #13274240;overflow:hidden;z-index:25;box-sizing:border-box;container-type:inline-size}
.vtb-host .atb-toolbox-head{display:flex;flex-shrink:0;height:44px;background:var(--navy,#1e3a5f);color:white;align-items:center}
.vtb-host .atb-toolbox-head button{border:0;background:transparent;color:white;height:44px;margin:0;padding:0 12px;font-family:inherit;font-size:16px;font-weight:bold;box-shadow:none;border-radius:0}
.vtb-host .atb-toolbox-grip{flex:1;text-align:left;cursor:move;touch-action:none;user-select:none}
.vtb-host .atb-toolbox-fold{width:40px;font-size:24px!important;cursor:pointer}
.vtb-host .atb-toolbox-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));align-content:start;gap:8px;padding:10px 10px 24px;overflow:auto;min-height:0;flex:1}
.vtb-host .atb-toolbox-body button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;height:68px;min-height:48px;margin:0;padding:6px;border:1px solid #d7dfeb;border-radius:12px;background:white;color:var(--navy,#1e3a5f);box-shadow:0 2px 4px #13274212;cursor:pointer;font-family:inherit}
.vtb-host .atb-toolbox-body button:disabled{opacity:.35;cursor:default}
.vtb-host .atb-toolbox-body .atb-tool-label{font-size:13px;font-weight:bold;line-height:1.2;white-space:normal;text-align:center}
.vtb-host .atb-toolbox-resize{position:absolute;right:0;bottom:0;width:26px;height:24px;border:0;background:#e4eaf4;color:var(--navy,#1e3a5f);font-size:20px;cursor:nwse-resize;touch-action:none;padding:0;margin:0}
.vtb-host .atb-toolbox.atb-toolbox-compact .atb-toolbox-body{grid-template-columns:repeat(auto-fit,minmax(44px,1fr));padding:6px 6px 24px}
.vtb-host .atb-toolbox.atb-toolbox-compact .atb-toolbox-body button{width:44px;height:44px;min-height:44px;border-radius:50%;justify-self:center;gap:0}
.vtb-host .atb-toolbox.atb-toolbox-compact .atb-tool-label{display:none}
.vtb-host .atb-toolbox.atb-toolbox-compact button:has(img[hidden]) .atb-tool-label{display:block;font-size:10px}
.vtb-host .atb-toolbox-closed{height:44px!important;min-height:44px}
.vtb-host .atb-toolbox-closed .atb-toolbox-body,
.vtb-host .atb-toolbox-closed .atb-toolbox-resize{display:none}
.vtb-host .atb-toolbox button:focus-visible{outline:3px solid #4d97ff;outline-offset:-3px}

.vtb-host .atb-toolbox-layouts{display:flex;flex-shrink:0;gap:4px;padding:5px;background:#e7edf6}
.vtb-host .atb-toolbox-layouts button{flex:1;min-width:0;height:32px;margin:0;padding:2px;border:1px solid #c7d2e3;border-radius:7px;background:white;color:var(--navy,#1e3a5f);font-family:inherit;font-size:12px;font-weight:bold;cursor:pointer}
.vtb-host .atb-toolbox-layouts button[aria-pressed="true"]{background:var(--gold,#d4af37);border-color:var(--gold,#d4af37)}
.vtb-host .atb-toolbox[data-layout] .atb-toolbox-body{grid-template-columns:repeat(var(--atb-tool-columns),minmax(0,1fr))}
.vtb-host .atb-toolbox-closed .atb-toolbox-layouts{display:none}/* 役割ごとの固定色。丸形・文字付きで共通。 */


.vtb-host .atb-toolbox-body button{--tool-bg:#eef1f5;--tool-border:#cbd2dc;--tool-ink:#394657;--tool-active:#465568;background:var(--tool-bg);border-color:var(--tool-border);color:var(--tool-ink)}
.vtb-host .atb-toolbox-body button[data-color="blue"]{--tool-bg:#e0edff;--tool-border:#9abce9;--tool-ink:#184d91;--tool-active:#245fa8}
.vtb-host .atb-toolbox-body button[data-color="orange"]{--tool-bg:#ffead4;--tool-border:#e6b07a;--tool-ink:#8b420c;--tool-active:#a64c10}
.vtb-host .atb-toolbox-body button[data-color="green"]{--tool-bg:#dcf2e5;--tool-border:#91c7a8;--tool-ink:#1d6342;--tool-active:#24734d}
.vtb-host .atb-toolbox-body button[data-color="purple"]{--tool-bg:#ede4fb;--tool-border:#bda2df;--tool-ink:#654091;--tool-active:#7045a1}
.vtb-host .atb-toolbox-body button[data-color="navy"]{--tool-bg:#e3eaf4;--tool-border:#9eafc7;--tool-ink:#1e3a5f;--tool-active:#1e3a5f}
.vtb-host .atb-toolbox-body button:hover:not(:disabled){box-shadow:0 0 0 2px var(--tool-border)}.vtb-host .atb-toolbox-settings svg{fill:currentColor}

.vtb-host .atb-toolbox-body button .ms-app-icon{width:26px;height:26px;min-width:26px}
.vtb-host .atb-toolbox .atb-toolbox-head button{position:static;width:auto;min-width:40px;display:flex;align-items:center;justify-content:center}
.vtb-host .atb-toolbox .atb-toolbox-head .atb-toolbox-grip{justify-content:flex-start}
.vtb-host .atb-toolbox-body button.active,.vtb-host .atb-toolbox-body button.cube3d-active,.vtb-host .atb-toolbox-body button.nvm-active{background:var(--tool-active);color:white;border-color:var(--tool-active)}
.vtb-host .atb-toolbox-compact .atb-toolbox-body button>span:not(.ms-app-icon):not([class*="badge"]){display:none}
.vtb-host .atb-toolbox-body button .atb-tool-label{display:block}
.vtb-host .atb-toolbox-head svg{fill:currentColor}/* 明るい道具BOX：白＋水色、選択状態は淡色と色枠 */


.vtb-host .atb-toolbox{background:#fff;border-color:#bdd9f0;box-shadow:0 5px 20px #2672a822}
.vtb-host .atb-toolbox-head{background:#e0f2fe;color:#164e75}
.vtb-host .atb-toolbox .atb-toolbox-head button{background:transparent;color:#164e75}
.vtb-host .atb-toolbox-layouts{background:#f0f9ff}
.vtb-host .atb-toolbox-layouts button{background:white;border-color:#c5dff2;color:#164e75}
.vtb-host .atb-toolbox-layouts button[aria-pressed="true"]{background:#dbeafe;border:2px solid #2563eb;color:#1d4ed8}
.vtb-host .atb-toolbox-body button{background:white;border-color:var(--tool-border);color:var(--tool-ink);box-shadow:0 2px 5px #2563eb0b}
.vtb-host .atb-toolbox-body button[data-color="blue"]{--tool-bg:#e8f2ff;--tool-border:#9fc3f5;--tool-ink:#1d4ed8;--tool-active:#2563eb}
.vtb-host .atb-toolbox-body button[data-color="orange"]{--tool-bg:#fff0df;--tool-border:#f5bf86;--tool-ink:#9a4311;--tool-active:#c65a13;background:#fff7ed}
.vtb-host .atb-toolbox-body button[data-color="green"]{--tool-bg:#e4f7ed;--tool-border:#99d8b9;--tool-ink:#147449;--tool-active:#168653}
.vtb-host .atb-toolbox-body button[data-color="purple"]{--tool-bg:#f1eaff;--tool-border:#cab0ef;--tool-ink:#7540b6;--tool-active:#854bcb}
.vtb-host .atb-toolbox-body button[data-color="navy"]{--tool-bg:#e8f2ff;--tool-border:#b6cdeb;--tool-ink:#285b89;--tool-active:#3275ac}.vtb-host .atb-toolbox-body button.active,.vtb-host .atb-toolbox-body button.cube3d-active,.vtb-host .atb-toolbox-body button.nvm-active{background:var(--tool-bg);color:var(--tool-ink);border:2px solid var(--tool-active);box-shadow:0 0 0 1px var(--tool-active)}
.vtb-host .atb-toolbox-resize{background:#e0f2fe;color:#0369a1}

.cube3d-root .atb-toolbox .volume-toolbox-adjust{position:static;inset:auto;transform:none;display:flex;flex-direction:column;flex-shrink:0;width:100%;height:auto;min-width:0;max-width:none;margin:0;padding:10px 10px 28px;background:#f0f9ff;border:0;border-top:1px solid #c5dff2;border-radius:0;gap:8px;box-sizing:border-box;color:#164e75}
.cube3d-root .atb-toolbox .cube3d-slider-tool.volume-toolbox-adjust{display:grid;grid-template-columns:1fr auto;align-items:center}
.cube3d-root .atb-toolbox .volume-toolbox-adjust input[type=range]{writing-mode:horizontal-tb;direction:ltr;appearance:auto;-webkit-appearance:auto;transform:none;width:100%;height:26px;min-width:0;margin:0;accent-color:#2563eb;touch-action:pan-y}
.cube3d-root .atb-toolbox .cube3d-slider-tool input{grid-column:1/-1;grid-row:2}
.cube3d-root .atb-toolbox .volume-toolbox-adjust .cube3d-slider-tool-icon{font-size:13px;font-weight:bold;width:auto}
.cube3d-root .atb-toolbox-closed .volume-toolbox-adjust{display:none!important}
.cube3d-root .atb-toolbox .atb-toolbox-body button{background:#fff!important;color:var(--tool-ink)!important;border:1px solid var(--tool-border)!important}
.cube3d-root .atb-toolbox .atb-toolbox-body button[data-color=orange]{background:#fff7ed!important}
.cube3d-root .atb-toolbox .atb-toolbox-body button.active,.cube3d-root .atb-toolbox .atb-toolbox-body button.cube3d-active,.cube3d-root .atb-toolbox .atb-toolbox-body button.nvm-active{background:var(--tool-bg)!important;color:var(--tool-ink)!important;border:2px solid var(--tool-active)!important;box-shadow:0 0 0 1px var(--tool-active)}
.cube3d-root .atb-toolbox .atb-toolbox-head{background:#e0f2fe!important;color:#164e75!important}
.cube3d-root .atb-toolbox .atb-toolbox-head button{background:transparent!important;color:#164e75!important}

.cube3d-root .atb-toolbox .atb-toolbox-body .volume-toolbox-adjust{grid-column:1/-1;position:static;inset:auto;width:100%;min-width:0;padding:10px;background:#f0f9ff;box-shadow:none;border:1px solid #c5dff2;border-radius:10px;display:flex;flex-direction:column;gap:6px}
.cube3d-root .atb-toolbox .volume-toolbox-adjust input[type=range],.cube3d-root .atb-toolbox .volume-toolbox-adjust .cube3d-slider-tool-icon,.cube3d-root .atb-toolbox .volume-toolbox-adjust .cube3d-slider-tool-val{position:static!important;inset:auto!important;transform:none!important;grid-column:auto;grid-row:auto}
.cube3d-root .atb-toolbox .volume-toolbox-adjust .cube3d-slider-tool-icon{text-align:left}
.cube3d-root .atb-toolbox .volume-toolbox-adjust .cube3d-slider-tool-val{align-self:flex-end;line-height:1.3}
.cube3d-root .atb-toolbox .volume-toolbox-adjust input[type=range]{width:100%!important;max-width:100%;margin:0;height:28px;touch-action:none}
.cube3d-root .atb-toolbox-grip{white-space:normal;overflow-wrap:anywhere;font-size:13px;line-height:1.35;min-width:0}
 .cube3d-root #cube3d-canvas-wrap{top:0;height:100vh;height:100dvh}

.cube3d-root .volume-length-stepper{display:grid;grid-template-columns:44px minmax(64px,1fr) 44px;gap:6px;flex:1;min-width:0;width:100%;align-items:stretch}
.cube3d-root .volume-length-stepper button{border:1px solid #a8cee8;border-radius:10px;background:#e0f2fe;color:#164e75;font:inherit;min-height:48px;padding:4px;font-size:24px;touch-action:manipulation;user-select:none}
.cube3d-root .volume-length-stepper .volume-length-current{display:flex;flex-direction:column;align-items:center;justify-content:center;background:white}
.cube3d-root .volume-length-current strong{font-size:28px;line-height:1.1}
.cube3d-root .volume-length-current small{font-size:10px;line-height:1.5}
.cube3d-root .volume-length-stepper button:disabled{opacity:.45;cursor:default}
.cube3d-root .volume-length-stepper button:focus-visible{outline:3px solid #3686df;outline-offset:2px}
.cube3d-root input[hidden]{display:none!important}

/* 間かく調整はラベル・スライダー・値の横1列 */
.cube3d-root .atb-toolbox .atb-toolbox-body .cube3d-slider-tool.volume-toolbox-adjust{display:grid;grid-template-columns:48px minmax(0,1fr) 24px;align-items:center;gap:6px;padding:8px 10px;min-height:44px;height:auto}
.cube3d-root .atb-toolbox .volume-toolbox-adjust .cube3d-slider-tool-icon{width:auto;height:auto;margin:0;font-size:12px;line-height:1.3;text-align:left;justify-self:start;align-self:center}
.cube3d-root .atb-toolbox .volume-toolbox-adjust .cube3d-slider-tool-val{width:24px;margin:0;font-size:12px;line-height:1.3;text-align:right;align-self:center;justify-self:end}