/* 【机の画面の組み方】図面と3Dを半々。kit/js/desk.js と対。3つのレイアウトツール・見本・エディタで共有。
   正本は _shared/layout-kit。std.css（または Tip の app.css）の後に読む。 */
/* =====================================================================
   机の画面：図面と3Dを半々（html.desk。std/app.js の Desk が付ける・幅1024px以上）
   目玉はウォークスルー。3Dを右の小窓から出して図面と並ぶ列にし、
   歩き始めるボタンを3Dの上に大きく1つだけ置く。検査と選択中は図面の右に重ねる引き出し。
   ===================================================================== */
html.desk{--v3-w:clamp(380px,41vw,880px);--info-w:330px}
html.desk #layout{position:relative;grid-template-columns:var(--pal-w) minmax(0,1fr) var(--v3-w)}
/* #side は箱を消して、中の2つを #layout の升目へ直に置く */
html.desk #side{display:contents}
html.desk #view3d{grid-column:3;grid-row:1;height:auto;min-height:0;border-left:1px solid var(--rule)}
html.desk #view3d.expanded{border-left:0}

/* ---- 引き出し（検査と選択中） ---- */
html.desk #sideScroll{
  position:absolute;z-index:20;top:12px;bottom:12px;
  right:calc(var(--v3-w) + 12px);width:var(--info-w);max-width:calc(100% - var(--pal-w) - var(--v3-w) - 24px);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:16px;
  box-shadow:0 12px 40px rgba(20,22,26,.18),0 2px 8px rgba(20,22,26,.08);
  transform:translateX(16px);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),opacity .18s,visibility 0s .22s;
}
html.desk #layout.info-open #sideScroll{
  transform:none;opacity:1;visibility:visible;pointer-events:auto;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),opacity .18s;
}
#infoHead{display:none}
html.desk #infoHead{
  position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px 10px 16px;background:var(--paper-2);border-bottom:1px solid var(--rule-2);
}
html.desk #infoHead b{font-size:12px;font-weight:700;letter-spacing:.04em}
html.desk #infoHead button{
  appearance:none;border:1px solid var(--rule);background:#fff;border-radius:999px;
  font-size:11px;padding:2px 11px;cursor:pointer;color:var(--ink-2);
}
html.desk #infoHead button:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---- 図面の右上：検査の要約（押すと引き出し） ---- */
#btnInfo{
  position:absolute;right:14px;top:14px;z-index:6;padding:0;cursor:pointer;
  border:0;background:none;border-radius:999px;overflow:hidden;
  box-shadow:0 2px 10px rgba(20,22,26,.2);
}
#btnInfo #sumBar{position:static;border-radius:999px;padding:7px 16px;gap:14px;align-items:center}
#btnInfo #sumBar span{flex:0 0 auto;overflow:visible}
#btnInfo::after{content:none}
#btnInfo:hover #sumBar,#btnInfo.on #sumBar{background:#2A2D33}
html.desk #layout.info-open #btnInfo{opacity:0;pointer-events:none}

/* ---- 置く／見る は3Dの見出しへ。図面の切り替えと俯瞰⇄歩くのトグルは出さない ---- */
html.desk #btnView{display:none}
html.desk #canvasWrap .main-tog{display:none}

/* ---- 歩き始めるボタン（3Dの上の主役） ---- */
html.desk #view3d #btnWalk{
  position:absolute;left:50%;top:auto;right:auto;bottom:58px;transform:translateX(-50%);z-index:9;
  gap:12px;padding:10px 26px 10px 10px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:15px;letter-spacing:.04em;
  box-shadow:0 10px 30px rgba(10,12,16,.35),0 0 0 1px rgba(255,255,255,.12);
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s,background .18s;
}
html.desk #view3d #btnWalk b{font-weight:700}
html.desk #view3d #btnWalk svg{
  width:40px;height:40px;padding:9px;border-radius:50%;background:var(--red);box-sizing:border-box;
}
html.desk #view3d #btnWalk:hover{transform:translateX(-50%) translateY(-2px);background:#000;
  box-shadow:0 14px 36px rgba(10,12,16,.42),0 0 0 1px rgba(255,255,255,.18)}
/* 立っているあいだは同じ場所で小さく「俯瞰へ戻る」になる */
html.desk #view3d.eyemode #btnWalk{
  font-size:12.5px;gap:8px;bottom:50px;
  padding:5px 16px 5px 5px;background:rgba(20,22,26,.78);box-shadow:0 2px 10px rgba(0,0,0,.3);
}
html.desk #view3d.eyemode #btnWalk svg{width:26px;height:26px;padding:5px;background:rgba(255,255,255,.16)}
html.desk #view3d.eyemode #btnWalk:hover{transform:translateX(-50%);background:#000}
html.desk #view3d.walking #btnWalk,html.desk #view3d.placing #btnWalk{display:none}

/* ---- 立ったあと、マウスを捕まえる前：真ん中に「クリックで歩き始める」 ---- */
#walkStart{display:none}
html.desk #view3d.eyemode:not(.walking) #walkStart{
  display:flex;position:absolute;inset:0;z-index:7;align-items:center;justify-content:center;
  pointer-events:none;
}
#walkStart button{
  pointer-events:auto;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;
  appearance:none;border:0;border-radius:28px;padding:18px 30px 16px;
  background:rgba(20,22,26,.72);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
#walkStart button:hover{background:rgba(10,12,16,.86)}
#walkStart b{font-size:16px;font-weight:700;letter-spacing:.06em}
#walkStart span{font-size:11.5px;color:#C9CED4;letter-spacing:.02em}
#walkStart kbd{
  font-family:var(--mono);font-size:10.5px;display:inline-block;min-width:18px;text-align:center;
  padding:0 4px;margin-right:2px;border:1px solid rgba(255,255,255,.35);border-radius:5px;color:#fff;
}
html.desk #lockHint{display:none !important}
/* 3D の見出しは列が広くなったので1段に収める */
html.desk .v3-head{padding:9px 14px}
html.desk .v3-foot{padding:8px 14px}
/* 全面で歩いているときは、足元の案内（toast）とぶつかるので左上へ */
html.desk #view3d.expanded.eyemode #btnWalk{left:20px;top:58px;bottom:auto;transform:none}
html.desk #view3d.expanded.eyemode #btnWalk:hover{transform:none}
/* 机の画面に切り替わった瞬間に、引き出しが消えていく動きを見せない */
html.no-anim #sideScroll,html.no-anim #btnWalk{transition:none !important}

/* 上部バー：ボタンの文字を縦に折らない。狭いときは案名と「保存先」の表示を詰める */
.tb{white-space:nowrap}
.brand{white-space:nowrap}
@media (max-width:1280px){
  .where{display:none}
  .plan-name{width:170px}
  .tb-seg-t{display:none}
}