/* 外構3Dシミュレーター 共通スタイル（engine.js とセットで使用。物件側での変更禁止） */
html,body{margin:0;height:100%;overflow:hidden;font-family:"Segoe UI","Meiryo",system-ui,sans-serif;}
/* ★現場写真は #app ではなく #bgphoto に貼る。#bgphoto だけを transform で動かせば、
   写真がずれても 3D(canvas) は動かない。#app の色は、写真を大きくずらしたときに
   写真の外側として見える地色。 */
#app{position:fixed;inset:0;background:#111827;}
#bgphoto{position:absolute;inset:0;background-size:cover;background-position:center;
  transform-origin:50% 50%;will-change:transform;}
#app>canvas{position:absolute;top:0;left:0;}
#app.adjust{cursor:move;}
/* ---- お知らせの帯（保存した・削除した等） ----
   ★パネルの中だけに出すと、右パネルを2000px以上スクロールしないと見えない。
     操作の結果は3Dの上に出す。下中央のパネル操作バー(bottom:14px・高さ約45px)の上に置く。 */
/* ★左右は画面中央ではなく【2枚のパネルの間】に収める。画面中央に置くと、
     左下の見積パネルの合計金額に重なって桁が読めなくなる。
     実測（1280x800）: #quote は 14〜354 / #ui は 964〜1266。
     内側に8pxずつ余白を取って 左362 / 右324(=1280-956) とする。 */
#toast{position:fixed;left:362px;right:324px;bottom:74px;z-index:20;
  margin:0 auto;width:fit-content;max-width:100%;
  transform:translateY(10px);
  padding:11px 18px;border-radius:10px;
  background:rgba(15,23,42,.95);border:1px solid rgba(255,255,255,.22);
  color:#f1f5f9;font-size:13px;line-height:1.6;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.5);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .18s ease, transform .18s ease;}
#toast.on{opacity:1;transform:translateY(0);pointer-events:auto;cursor:pointer;}
/* ---- タイトル ---- */
#title{position:fixed;top:14px;left:16px;color:#fff;z-index:5;pointer-events:none;
  text-shadow:0 1px 6px rgba(0,0,0,.45);}
#title h1{font-size:18px;margin:0;}
#title p{font-size:12px;margin:2px 0 0;opacity:.85;}
/* ---- 操作パネル(右) ---- */
#ui{position:fixed;top:14px;right:14px;width:272px;z-index:6;
  background:rgba(15,23,42,.84);backdrop-filter:blur(6px);color:#e2e8f0;
  border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px 14px 10px;
  font-size:12px;max-height:calc(100% - 40px);overflow:auto;}
#ui h3{margin:0 0 10px;font-size:13px;color:#fff;}
.sec{margin-bottom:12px;}
.sec .lbl{font-size:11px;color:#94a3b8;margin-bottom:5px;font-weight:700;}
.item-head{font-size:12px;color:#7dd3fc;font-weight:700;margin:2px 0 6px;
  border-top:1px solid rgba(255,255,255,.12);padding-top:9px;display:flex;align-items:center;gap:6px;}
.item-sec:first-child .item-head{border-top:none;padding-top:0;}
.sublbl{font-size:11px;color:#94a3b8;margin:6px 0 4px;}
.btns{display:flex;flex-wrap:wrap;gap:6px;}
.btn{flex:1 1 28%;padding:7px 4px;border:1px solid rgba(255,255,255,.18);border-radius:8px;
  background:rgba(255,255,255,.07);color:#e2e8f0;cursor:pointer;font-size:12px;text-align:center;
  user-select:none;}
.btn:hover{background:rgba(255,255,255,.16);}
.btn.on{background:#2563eb;border-color:#3b82f6;font-weight:700;}
.btn.shot{flex:1 1 44%;}
.btns.num{flex-wrap:nowrap;align-items:center;}
.btns.num .btn{flex:0 0 34px;font-weight:700;}
.numv{flex:1;text-align:center;font-size:13px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;}
.sws{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.sw{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,.25);
  box-shadow:inset 0 0 4px rgba(0,0,0,.3);}
.sw.on{border-color:#38bdf8;box-shadow:0 0 0 2px rgba(56,189,248,.45);}
.swrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;}
.swrow .nm{color:#cbd5e1;width:88px;}
.chk{display:flex;gap:6px;align-items:center;margin:5px 0;cursor:pointer;color:#cbd5e1;}
.chk .price{margin-left:auto;color:#94a3b8;font-size:11px;}
/* 見積案の名前。★prompt() を出すとブラウザの「ユーザー操作中」が切れ、
   showSaveFilePicker が開けずダウンロードに落ちる。だからパネル内で入力させる。 */
#sp-name{flex:1 1 100%;padding:7px 8px;border:1px solid rgba(255,255,255,.18);border-radius:8px;
  background:rgba(255,255,255,.07);color:#e2e8f0;font-size:12px;font-family:inherit;box-sizing:border-box;}
#sp-name::placeholder{color:#64748b;}
.note{font-size:10px;color:#64748b;line-height:1.5;margin-top:8px;border-top:1px solid rgba(255,255,255,.1);padding-top:8px;}
/* ---- 見積もりパネル(左下) ---- */
#quote{position:fixed;left:14px;bottom:14px;width:310px;z-index:6;
  background:rgba(15,23,42,.86);backdrop-filter:blur(6px);color:#e2e8f0;
  border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 14px;font-size:12px;}
#quote h3{margin:0 0 8px;font-size:13px;color:#fff;display:flex;justify-content:space-between;align-items:center;}
#quote h3 .tag{font-size:10px;color:#fbbf24;font-weight:400;}
/* 明細の高さ。30vh だと 1280x760 で 664px 中 228px（22行中8行）しか出ず、
   合計だけ見えて内訳が読めなかった。画面の高さからパネルの上下（見出し・小計・
   合計・印刷ボタン・余白で約160px）とタイトルぶんを引いた高さまで伸ばす。 */
#qitems{max-height:calc(100vh - 320px);overflow:auto;margin-bottom:8px;}
/* スクロールできることが分かるように、つまみを常時見える形にする
   （既定のオーバーレイ表示だと、明細が続いていること自体に気づけない）。 */
#qitems,#ui{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.30) rgba(255,255,255,.07);}
#qitems::-webkit-scrollbar,#ui::-webkit-scrollbar{width:8px;}
#qitems::-webkit-scrollbar-track,#ui::-webkit-scrollbar-track{background:rgba(255,255,255,.07);border-radius:4px;}
#qitems::-webkit-scrollbar-thumb,#ui::-webkit-scrollbar-thumb{background:rgba(255,255,255,.30);border-radius:4px;}
#qitems::-webkit-scrollbar-thumb:hover,#ui::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.48);}
.qi{display:flex;justify-content:space-between;gap:8px;padding:3px 0;color:#cbd5e1;
  border-bottom:1px dashed rgba(255,255,255,.08);}
.qi small{color:#64748b;display:block;}
.qi span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums;}
.qi.sub{color:#94a3b8;border-bottom:none;padding-top:6px;}
/* 商品ごとの見出し（calcQuote が {head:'商品名'} で入れる行） */
.qi.qhead{display:block;color:#7dd3fc;font-weight:700;font-size:11px;letter-spacing:.02em;
  border-bottom:none;border-top:1px solid rgba(255,255,255,.14);margin-top:7px;padding:7px 0 2px;}
#qitems .qi.qhead:first-child{border-top:none;margin-top:0;padding-top:0;}
/* 価格が登録されていない項目の注意書き（calcQuote の missing）。
   検収スクリプトが読む .qi の並びを崩さないよう #qitems の外に置く。 */
#qwarn{margin:6px 0 8px;padding:6px 8px;border-radius:6px;font-size:11px;line-height:1.7;
  color:#fecaca;background:rgba(220,38,38,.16);border:1px solid rgba(248,113,113,.45);}
#qwarn b{color:#fff;}
#qtotalrow{display:flex;justify-content:space-between;align-items:baseline;
  border-top:2px solid rgba(255,255,255,.25);padding-top:8px;margin-top:2px;}
#qtotalrow .cap{font-size:12px;color:#94a3b8;}
#qtotal{font-size:24px;font-weight:800;color:#4ade80;font-variant-numeric:tabular-nums;
  text-shadow:0 0 14px rgba(74,222,128,.35);}
#printbtn{width:100%;margin-top:10px;padding:8px;border:none;border-radius:8px;cursor:pointer;
  background:#2563eb;color:#fff;font-size:12px;font-weight:700;}
#printbtn:hover{background:#1d4ed8;}
/* ---- 印刷用見積書 ---- */
#printsheet{display:none;}
@media print{
  html,body{overflow:visible;height:auto;}
  #app,#ui,#quote,#title,#toast{display:none !important;}
  #printsheet{display:block;padding:10mm 6mm;color:#111;font-size:13px;}
  #printsheet h2{border-bottom:3px double #333;padding-bottom:6px;margin:0 0 4px;}
  #printsheet .meta{display:flex;justify-content:space-between;color:#444;font-size:12px;margin-bottom:14px;}
  #printsheet .head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:10px 0 14px;}
  #printsheet .head .to{flex:1;min-width:0;}
  #printsheet .head .cust{font-size:19px;font-weight:700;border-bottom:1px solid #333;
    display:inline-block;padding:0 28px 3px 0;margin-bottom:8px;}
  #printsheet .head .subj{font-size:13px;color:#333;margin-bottom:8px;}
  #printsheet .head .gtotal{font-size:14px;}
  #printsheet .head .gtotal b{font-size:22px;border-bottom:3px double #333;padding:0 6px 2px;}
  #printsheet .head .gtotal span{font-size:11px;color:#555;}
  #printsheet .head .from{text-align:right;font-size:11.5px;color:#333;line-height:1.7;white-space:nowrap;}
  #printsheet .head .corp{margin-top:6px;}
  #printsheet .head .corp .cname{font-size:14px;font-weight:700;}
  #printsheet table{width:100%;border-collapse:collapse;}
  /* 改ページで1行が上下に割れないようにし、2ページ目以降にも見出し行を出す */
  #printsheet tr{page-break-inside:avoid;break-inside:avoid;}
  #printsheet thead{display:table-header-group;}
  #printsheet tr.grp{page-break-after:avoid;break-after:avoid;}
  #printsheet th,#printsheet td{border:1px solid #999;padding:7px 10px;text-align:left;}
  #printsheet th{background:#f1f5f9;}
  #printsheet td.n,#printsheet th.n{text-align:right;white-space:nowrap;}
  #printsheet td .sub{color:#555;font-size:11px;}
  #printsheet tr.grp td{background:#e8eef5;font-weight:700;}
  #printsheet tr.sum td{background:#fafafa;}
  #printsheet tr.total td{font-weight:800;font-size:16px;background:#f1f5f9;}
  #printsheet .disc{margin-top:14px;font-size:11px;color:#666;line-height:1.7;}
}