:root{
  --ink:#0f172a; --ink2:#334155; --mute:#64748b; --line:#e2e8f0;
  --bg:#f1f5f9; --card:#ffffff; --accent:#f97316; --blue:#2563eb; --ok:#0d9488; --danger:#dc2626;
  --header:56px; --panel:372px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); overflow:hidden;
  font-family:system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  font-size:15px; line-height:1.5;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}

/* ── ヘッダー ───────────────────────────── */
#topbar{
  height:var(--header); background:var(--ink); color:#fff; display:flex; align-items:center;
  gap:10px; padding:0 10px; position:relative; z-index:30;
}
.brand{display:flex;align-items:center;gap:8px;flex:none}
.logo{
  width:32px;height:32px;border-radius:8px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:17px;flex:none
}
.bname{font-weight:800;letter-spacing:.02em;display:flex;flex-direction:column;line-height:1.05}
.bname small{font-weight:500;font-size:10px;color:#94a3b8}
.projname{
  flex:1;min-width:60px;max-width:320px;background:#1e293b;border:1px solid #334155;color:#fff;
  border-radius:8px;padding:7px 10px;font-size:14px
}
.projname::placeholder{color:#64748b}
.topactions{margin-left:auto;display:flex;gap:6px;align-items:center}
.tb{
  background:#1e293b;border:1px solid #334155;color:#e2e8f0;border-radius:8px;
  padding:8px 11px;font-size:13px;font-weight:600;white-space:nowrap
}
.tb:hover{background:#334155}
.tb.primary{background:#0d9488;border-color:#0d9488;color:#fff}
.tb.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.only-mobile{display:none}

/* ── レイアウト ─────────────────────────── */
#main{display:flex;height:calc(100% - var(--header));position:relative}
#panel{
  width:var(--panel);flex:none;background:#f8fafc;border-right:1px solid var(--line);
  display:flex;flex-direction:column;z-index:20
}
.tabs{display:flex;background:#fff;border-bottom:1px solid var(--line);flex:none}
.tabs button{
  flex:1;border:0;background:none;padding:12px 4px;font-weight:700;font-size:13.5px;
  color:var(--mute);border-bottom:3px solid transparent
}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent);background:#fff7ed}
.tabwrap{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:10px 10px 32px}
.tabbody{display:none}
.tabbody.on{display:block}

/* ── カード ─────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.card h3{margin:0 0 10px;font-size:14px;display:flex;align-items:baseline;gap:8px}
.card h3 small{font-weight:500;color:var(--mute);font-size:11.5px}
.card h4{margin:12px 0 6px;font-size:12.5px;color:var(--ink2)}
.row{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.row.btns{gap:6px}
.row label,label.full{
  flex:1;min-width:120px;display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink2);font-weight:600
}
label.full{display:block;margin-bottom:8px}
label.full input,label.full textarea{width:100%;margin-top:3px}
input[type=number],input[type=text],input[type=date],select,textarea{
  flex:1;min-width:0;width:100%;border:1px solid #cbd5e1;border-radius:8px;padding:8px 9px;
  background:#fff;font-size:15px;font-weight:600
}
input[type=number]{text-align:right}
textarea{font-weight:400;font-size:14px}
.u{color:var(--mute);font-size:11.5px;font-weight:600;flex:none}
.hint{font-size:11.5px;color:var(--mute);margin-top:8px;line-height:1.5}
.note{
  font-size:12.5px;color:var(--ink2);background:#f8fafc;border:1px dashed #cbd5e1;
  border-radius:8px;padding:8px;margin-top:8px;white-space:pre-wrap;line-height:1.6
}
.note:empty{display:none}
.note.warn{background:#fff7ed;border-color:#fdba74;color:#9a3412}
.info{font-size:13px;color:var(--ink2);margin-bottom:10px;line-height:1.7}

button.big,button.huge{
  width:100%;border:1px solid #cbd5e1;background:#fff;border-radius:10px;padding:11px;
  font-weight:700;font-size:14px
}
.row.btns button{flex:1;min-width:96px;border:1px solid #cbd5e1;background:#fff;border-radius:10px;padding:10px 8px;font-weight:700;font-size:13px}
button.big{background:var(--blue);border-color:var(--blue);color:#fff}
button.big.ok{background:var(--ok);border-color:var(--ok)}
button.big.accent{background:var(--accent);border-color:var(--accent)}
button.huge{
  background:linear-gradient(180deg,#fb923c,#ea580c);border:0;color:#fff;font-size:18px;padding:16px;
  box-shadow:0 4px 0 #c2410c;letter-spacing:.03em
}
button.huge:active{transform:translateY(2px);box-shadow:0 2px 0 #c2410c}
button.danger{background:#fff;border:1px solid #fecaca;color:var(--danger);border-radius:10px;padding:10px;font-weight:700;width:100%;font-size:13px}
.row.btns button.danger{width:auto}
button.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ── 方向パッド ─────────────────────────── */
.dirpad{
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,44px);
  gap:6px;margin-bottom:10px
}
.dir{border:1px solid #cbd5e1;background:#fff;border-radius:10px;font-size:19px;font-weight:800;display:grid;place-items:center;line-height:1}
.dir em{display:block;font-size:9.5px;font-style:normal;color:var(--mute);font-weight:700}
.dir.n{grid-area:1/2} .dir.w{grid-area:2/1} .dir.e{grid-area:2/3} .dir.s{grid-area:3/2}
.dircenter{grid-area:2/2;display:grid;place-items:center;background:#0f172a;color:#fff;border-radius:10px;font-weight:800;font-size:15px}
.dir.sel{background:var(--accent);border-color:var(--accent);color:#fff}
.dir.sel em{color:#ffedd5}
.quicklen{display:flex;gap:5px;margin-bottom:8px;flex-wrap:wrap}
.quicklen button{flex:1;min-width:56px;border:1px solid #cbd5e1;background:#fff;border-radius:8px;padding:8px 2px;font-size:12.5px;font-weight:700}
.walllist{list-style:none;margin:10px 0 0;padding:0;max-height:190px;overflow-y:auto}
.walllist li{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;margin-bottom:5px;font-size:13px;background:#fff}
.walllist li b{width:26px;text-align:center;color:var(--accent)}
.walllist li input{width:92px;padding:5px 7px;font-size:13.5px}
.walllist li button{border:0;background:none;color:var(--danger);font-weight:800;font-size:15px;padding:0 4px}

/* ── パレット・スパン ───────────────────── */
.spanset{display:flex;gap:5px;flex-wrap:wrap}
.spanset label{position:relative;flex:1;min-width:60px}
.spanset input{position:absolute;opacity:0;pointer-events:none}
.spanset span{display:block;text-align:center;border:1px solid #cbd5e1;border-radius:8px;padding:9px 2px;font-weight:700;font-size:13px;background:#fff;color:var(--mute)}
.spanset input:checked + span{background:#dbeafe;border-color:var(--blue);color:#1e3a8a}
.palette{display:flex;gap:5px;margin-bottom:8px;flex-wrap:wrap}
.palette button{
  flex:1;min-width:58px;border:1px solid #93c5fd;background:#eff6ff;color:#1e3a8a;
  border-radius:8px;padding:11px 2px;font-weight:800;font-size:13.5px
}
.palette button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.checkline{margin:8px 0}
.chk{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink2)}
.chk input{width:18px;height:18px;flex:none;accent-color:var(--accent)}

/* ── テーブル ───────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:7px 5px;text-align:left}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.tbl td.note{color:var(--mute);font-size:11px}
.tbl tr.hl td{background:#fff7ed}
.report{font-size:12.5px;line-height:1.8}
.report div{padding:5px 0;border-bottom:1px solid var(--line)}
.report b{color:var(--blue)}
.report .ng{color:var(--danger)}
.projlist{list-style:none;margin:8px 0 0;padding:0}
.projlist li{display:flex;align-items:center;gap:6px;padding:8px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;background:#fff}
.projlist .pname{flex:1;min-width:0;font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.projlist .pdate{font-size:10.5px;color:var(--mute);font-weight:500;display:block}
.projlist button{border:1px solid #cbd5e1;background:#fff;border-radius:7px;padding:6px 8px;font-size:11.5px;font-weight:700}
.projlist li.cur{border-color:var(--accent);background:#fff7ed}

/* ── キャンバス ─────────────────────────── */
#stage{flex:1;position:relative;background:#fff;overflow:hidden;touch-action:none}
#cad{width:100%;height:100%;display:block;cursor:grab}
#cad.placing{cursor:crosshair}
#cad:active{cursor:grabbing}
.badge{
  position:absolute;left:12px;top:12px;background:rgba(15,23,42,.86);color:#fff;
  padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:700;pointer-events:none;max-width:70%
}
.badge:empty{display:none}
#zoomBox{position:absolute;right:12px;bottom:14px;display:flex;flex-direction:column;gap:6px}
#zoomBox button{
  width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.95);
  font-size:19px;font-weight:800;box-shadow:0 2px 6px rgba(15,23,42,.12)
}
#zoomBox button#btnFit2{font-size:12px}
#scaleInfo{
  position:absolute;left:12px;bottom:14px;background:rgba(255,255,255,.92);border:1px solid var(--line);
  border-radius:8px;padding:5px 10px;font-size:11.5px;color:var(--ink2);font-weight:600
}
#toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:rgba(15,23,42,.94);color:#fff;
  padding:11px 18px;border-radius:999px;font-size:13.5px;font-weight:700;opacity:0;pointer-events:none;
  transition:.22s;z-index:100;max-width:88vw;text-align:center
}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ── スマホ ─────────────────────────────── */
@media (max-width:900px){
  :root{--header:52px}
  .only-mobile{display:inline-block}
  .bname small{display:none}
  .tb{padding:8px 9px;font-size:12px}
  #btnUndo,#btnFit{display:none}
  #main{display:block;height:calc(100% - var(--header))}
  #stage{position:absolute;inset:0;height:100%}
  #panel{
    position:absolute;left:0;right:0;bottom:0;width:auto;height:52vh;border-right:0;
    border-top:1px solid var(--line);border-radius:16px 16px 0 0;box-shadow:0 -6px 24px rgba(15,23,42,.16);
    transition:transform .24s ease
  }
  #panel.collapsed{transform:translateY(calc(52vh - 92px))}
  .sheet-handle{display:block;padding:7px 0 3px;text-align:center;flex:none}
  .sheet-handle span{display:inline-block;width:44px;height:5px;border-radius:99px;background:#cbd5e1}
  #zoomBox{bottom:calc(52vh + 12px)}
  #scaleInfo{bottom:calc(52vh + 12px)}
  #panel.collapsed ~ #stage #zoomBox,
  #panel.collapsed ~ #stage #scaleInfo{bottom:104px}
  .tabwrap{padding-bottom:40px}
}

/* ── 印刷 ───────────────────────────────── */
#printRoot{display:none}
@media print{
  html,body{height:auto;overflow:visible;background:#fff}
  #topbar,#main,#toast{display:none !important}
  #printRoot{display:block}
  .psheet{page-break-after:always;position:relative}
  .psheet:last-child{page-break-after:auto}
  .pdraw{display:flex;align-items:center;justify-content:center}
  .ptitle{
    width:100%;border-collapse:collapse;font-size:9pt;margin-top:4mm;
    font-family:system-ui,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif
  }
  .ptitle th,.ptitle td{border:.3mm solid #111;padding:1.2mm 2mm;text-align:left}
  .ptitle th{background:#f1f5f9;width:22mm;font-size:8.5pt;white-space:nowrap}
  .pparts{width:100%;border-collapse:collapse;font-size:8pt;margin-top:3mm}
  .pparts th,.pparts td{border:.25mm solid #333;padding:.9mm 1.6mm}
  .pparts th{background:#f1f5f9}
  .pparts td.num{text-align:right;font-variant-numeric:tabular-nums}
  .phead{display:flex;justify-content:space-between;align-items:baseline;font-size:10pt;margin-bottom:2mm;
    font-family:system-ui,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}
  .phead b{font-size:13pt}
}