:root{
  --ink:#1d2025; --gray:#5b5f66; --gray-2:#8a8f99;
  --paper:#f7f4ec; --kinari:#efeadd; --white:#fff;
  --rule:#e3e0d6; --rule-strong:#cfcabd; --alert:#b23a3a;
  --accent:#2b5fa3;   /* 設備と主ボタン */
  --kraft:#c9b48a;    /* 荷物(面だけ) */
  --r:4px;
  --font:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans",sans-serif;
  --font-head:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font:400 14px/1.6 var(--font);-webkit-text-size-adjust:100%;display:flex;flex-direction:column}
button,input,select{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-size:12px;letter-spacing:.08em;color:var(--gray);line-height:1.5}

.top{display:flex;align-items:center;gap:24px;padding:10px 16px;border-bottom:1px solid var(--rule);background:var(--paper);flex:none}
.top h1{font:900 20px/1.35 var(--font-head);letter-spacing:-.01em;margin:0;white-space:nowrap}
.lead{margin:0;font-size:12px;line-height:1.7;color:var(--gray);max-width:640px}

.wrap{display:flex;flex:1;min-height:0}
.stage{position:relative;flex:1;min-width:0;background:#e8e4d8;touch-action:none;overflow:hidden}
.stage canvas{display:block}
.bar{position:absolute;left:12px;bottom:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seg{display:flex;border:1px solid var(--ink);border-radius:var(--r);overflow:hidden;background:var(--white)}
.seg button{border:0;background:var(--white);min-height:40px;padding:0 14px;cursor:pointer;font-weight:700}
.seg button+button{border-left:1px solid var(--ink)}
.seg button.on{background:var(--ink);color:var(--white)}
.tool{border:1px solid var(--ink);background:var(--white);border-radius:var(--r);min-height:40px;padding:0 12px;cursor:pointer;white-space:nowrap;font-weight:700}
.tool.on{background:var(--ink);color:#fff}
.hint{position:absolute;left:12px;top:64px;right:12px;font-size:12px;pointer-events:none}
.hint:empty{display:none}
.hint span{display:inline-block;background:var(--paper);border:1px solid var(--rule-strong);padding:4px 8px;border-radius:var(--r)}
.lockbar{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--rule-strong);border-radius:var(--r);padding:6px 6px 6px 12px;font-size:13px}
.lockbar[hidden]{display:none}
.conflict{position:absolute;left:12px;right:12px;top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;background:var(--paper);border:1px solid var(--ink);border-radius:var(--r);padding:8px 8px 8px 12px;font-size:13px;z-index:2}
.conflict[hidden]{display:none}
.conflict .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tool[hidden]{display:none}

.panel{width:380px;flex:none;overflow-y:auto;background:var(--paper);border-left:1px solid var(--rule)}
.block{padding:16px;border-bottom:1px solid var(--rule)}
.block>.eyebrow{margin-bottom:8px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.row.small{gap:4px 16px;font-size:13px}
select{flex:1;min-width:120px;min-height:44px;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--white);padding:0 8px}
.main,.sub{min-height:40px;padding:0 14px;border-radius:var(--r);cursor:pointer;white-space:nowrap}
.main{background:var(--accent);color:#fff;border:1px solid var(--accent);font-weight:700}
.sub{background:var(--white);border:1px solid var(--ink)}
.sub.sq{padding:0 10px;min-width:52px}
.sub:disabled,.main:disabled{opacity:.4;cursor:default}
.alert{color:var(--alert)}
.sub.alert{border-color:var(--alert)}
.link{background:none;border:0;padding:4px 0;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.lbl{color:var(--gray);font-size:13px}

.field{display:block;font-size:12px;color:var(--gray);margin-top:8px}
.field input{display:block;width:100%;margin-top:4px;min-height:44px;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--white);padding:0 10px;font-size:16px;color:var(--ink)}
.field input:disabled{background:var(--kinari);color:var(--gray)}
.dims{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.src{font-size:12px;color:var(--gray);margin:12px 0 0;word-break:break-all}
.src a{color:inherit}
.note{font-size:12px;color:var(--gray);margin:8px 0 0}
.note[hidden],.meta:empty{display:none}
.meta{font-size:12px;color:var(--gray);margin:8px 0 0;line-height:1.6}
.meta.alert{color:var(--alert)}
.field select{display:block;width:100%;margin-top:4px;font-size:14px;color:var(--ink)}
#passRow[hidden]{display:none}

.tabs{display:flex;border-bottom:1px solid var(--ink)}
.tabs button{flex:1;border:0;background:none;min-height:44px;cursor:pointer;font-weight:700;color:var(--gray);border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}

.list{list-style:none;margin:8px 0 0;padding:0}
.list li{display:flex;align-items:center;gap:8px;border-top:1px solid var(--rule);padding:6px 4px;cursor:pointer;min-height:48px}
.list li:last-child{border-bottom:1px solid var(--rule)}
.list li.on{background:#e9eef6;box-shadow:inset 3px 0 0 var(--accent)}
.list li.gone .nm{color:var(--gray-2);text-decoration:line-through}
.list input[type=checkbox]{width:20px;height:20px;margin:0;flex:none;accent-color:var(--ink)}
.list .no{width:30px;white-space:nowrap;flex:none;font-size:12px;color:var(--gray);text-align:right}
.list .nm{flex:1;min-width:0;line-height:1.4}
.list .sz{display:block;font-size:12px;color:var(--gray)}
.list .tag{font-size:12px;letter-spacing:.04em;background:var(--kinari);border:1px solid var(--rule-strong);border-radius:var(--r);padding:0 6px;color:var(--ink);white-space:nowrap}
.list.quick li{align-items:flex-start;padding:8px 4px}
.list.quick .no{padding-top:12px}
.list.quick .eye{margin-top:6px}
.list .q .tag{align-self:flex-start}
.list .q{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.list .q input{min-height:44px;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--white);padding:0 4px;font-size:16px;color:var(--ink);width:100%}
.list .q input:disabled{background:var(--kinari);color:var(--gray)}
.list .qd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.list .qd label{font-size:11px;color:var(--gray);display:flex;flex-direction:column;gap:2px}
.list .eye{background:none;border:1px solid var(--rule-strong);border-radius:var(--r);min-height:36px;padding:0 10px;cursor:pointer;font-size:13px;white-space:nowrap;background:var(--white)}

.legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--gray)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{display:inline-block;width:14px;height:14px;border:1.5px solid var(--ink)}
.sw.kiki{background:#d7e2f1;border-color:var(--accent)}
.sw.nimo{background:#e6dcc6;border-color:#8a7a5a}
.sw.gone{border:1.5px dashed var(--gray-2)}

.lab{font:700 12px/1.3 var(--font);color:var(--ink);background:rgba(247,244,236,.92);padding:1px 5px;border-radius:var(--r);white-space:nowrap;pointer-events:none;border:1px solid var(--rule-strong)}
.lab.k{border-color:var(--accent);color:var(--accent)}
.lab.sel{background:var(--accent);color:#fff;border-color:var(--accent)}
.labw{pointer-events:none}
.labw.up .lab{transform:translateY(-22px)}
.lab.dist{background:var(--ink);color:#fff;border-color:var(--ink);font-variant-numeric:tabular-nums}

@media (max-width:760px){
  body{display:block;height:auto}
  .top{gap:8px;padding:10px 16px;display:block}
  .lead{display:none}
  .wrap{flex-direction:column}
  .stage{flex:none;height:62vh;height:62svh}
  .panel{width:auto;border-left:0;border-top:1px solid var(--rule);overflow:visible}
  .bar{left:8px;right:8px;bottom:8px;gap:6px}
  .conflict{left:8px;right:8px;top:8px}
  .seg button,.tool{min-height:40px;padding:0 10px}
  .lockbar{left:8px;right:8px;top:8px;justify-content:space-between}
  .hint{top:60px}
  .lab{font-size:11px;padding:0 4px}
  .dims{grid-template-columns:repeat(2,1fr)}
}