:root{
  --bg:#eef0f3; --surface:#ffffff; --surface-2:#f6f7f9; --surface-3:#e6e9ee;
  --ink:#151d28; --ink-2:#4d5766; --ink-3:#7d8695;
  --line:#d5dae1; --line-2:#b6bec9;
  --blue:#15619b; --blue-soft:#e2edf6;
  --green:#26734f; --green-soft:#e0f0e8;
  --amber:#8a6410; --amber-soft:#faf0da;
  --red:#b3392c;   --red-soft:#fbe8e5;
  --teal:#146b6b;  --teal-soft:#dff0ef;
  --on-blue:#ffffff; --on-blue-2:rgba(255,255,255,.75);
  --side:#12293d; --side-2:#1b3a53; --side-ink:#dce6ef; --side-ink-2:#8ba6bd;
  --focus:#15619b;
  --shadow:0 1px 2px rgba(20,30,45,.07), 0 4px 14px rgba(20,30,45,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1218; --surface:#171c24; --surface-2:#1e242d; --surface-3:#252c36;
    --ink:#e6e9ee; --ink-2:#a5adba; --ink-3:#79828f;
    --line:#2a313c; --line-2:#3a424f;
    --blue:#79b1de; --blue-soft:#1b2a39;
    --green:#5fc194; --green-soft:#162b22;
    --amber:#d9b262; --amber-soft:#2d2616;
    --red:#e08e80;   --red-soft:#301f1c;
    --teal:#5cb8b5;  --teal-soft:#152b2b;
    --on-blue:#0b1621; --on-blue-2:rgba(11,22,33,.7);
    --side:#12171f; --side-2:#1d242e; --side-ink:#dce1e8; --side-ink-2:#7e8895;
    --focus:#79b1de;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1218; --surface:#171c24; --surface-2:#1e242d; --surface-3:#252c36;
  --ink:#e6e9ee; --ink-2:#a5adba; --ink-3:#79828f;
  --line:#2a313c; --line-2:#3a424f;
  --blue:#79b1de; --blue-soft:#1b2a39;
  --green:#5fc194; --green-soft:#162b22;
  --amber:#d9b262; --amber-soft:#2d2616;
  --red:#e08e80;   --red-soft:#301f1c;
  --teal:#5cb8b5;  --teal-soft:#152b2b;
  --on-blue:#0b1621; --on-blue-2:rgba(11,22,33,.7);
  --side:#12171f; --side-2:#1d242e; --side-ink:#dce1e8; --side-ink-2:#7e8895;
  --focus:#79b1de;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.35);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit;}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ===== demo bar ===== */
.demobar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--side);color:var(--side-ink);padding:8px 16px;
  font-size:12.5px;position:sticky;top:0;z-index:60;
}
.demobar b{font-family:"Roboto Mono",monospace;font-size:10.5px;letter-spacing:.12em;color:var(--side-ink-2);}
.demobar .g{display:flex;gap:5px;flex-wrap:wrap;}
.dbtn{
  background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--side-ink);
  border-radius:6px;padding:3px 10px;font-size:12px;cursor:pointer;
}
.dbtn:hover{background:rgba(255,255,255,.1);}
.dbtn.on{background:#fff;color:var(--side);border-color:#fff;font-weight:700;}
.demobar .sp{flex:1;}

/* ===== auth screens ===== */
.authwrap{min-height:calc(100dvh - 40px);display:grid;place-items:center;padding:40px 20px 60px;}
.authwrap[hidden],.app[hidden]{display:none!important;}
.authcard{
  width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:36px 32px 34px;text-align:center;
}
.logo{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:22px;}
.lmark{width:32px;height:32px;border-radius:8px;background:var(--blue);display:grid;place-items:center;flex:none;}
.lmark span{display:block;width:14px;height:2.4px;background:var(--on-blue);box-shadow:0 5px 0 var(--on-blue),0 -5px 0 var(--on-blue);}
.ltext{text-align:left;}
.lname{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:17px;}
.ltag{font-size:11.5px;color:var(--ink-3);margin-top:1px;}
.authcard h1{font-family:"Zen Kaku Gothic New",sans-serif;font-size:20px;font-weight:700;margin:0 0 8px;line-height:1.45;}
.authcard .sub{color:var(--ink-2);font-size:13.6px;margin:0 0 24px;line-height:1.75;}
.fl{display:block;font-size:13px;font-weight:700;margin-bottom:6px;text-align:left;}
.inp{width:100%;height:50px;padding:0 13px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);font-size:15px;}
.hint{font-size:12px;color:var(--ink-3);margin:7px 0 0;line-height:1.7;text-align:left;}
.chk{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--ink-2);margin:16px 0 18px;line-height:1.7;text-align:left;}
.chk input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--blue);}
.chk a{color:var(--blue);}
.ico{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:24px;margin:0 auto 16px;font-weight:700;}
.ico.b{background:var(--blue-soft);color:var(--blue);}
.ico.a{background:var(--amber-soft);color:var(--amber);}
.codegrid{display:flex;gap:7px;justify-content:center;margin:4px 0 6px;}
.codegrid span{
  width:40px;height:52px;border:2px solid var(--line-2);border-radius:8px;display:grid;place-items:center;
  font-family:"Roboto Mono",monospace;font-size:20px;font-weight:700;background:var(--surface);
}
.codegrid span.f{border-color:var(--blue);color:var(--blue);}
.altlink{margin-top:18px;font-size:12.5px;color:var(--ink-3);}
.altlink button{background:none;border:none;color:var(--blue);text-decoration:underline;cursor:pointer;padding:0;font-size:12.5px;}

/* ===== buttons ===== */
.b{
  height:50px;padding:0 20px;border-radius:9px;cursor:pointer;font-weight:700;font-size:15px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  border:1px solid var(--line-2);background:var(--surface);
}
.b:hover{border-color:var(--blue);color:var(--blue);}
.b-pri{background:var(--blue);color:var(--on-blue);border-color:var(--blue);}
.b-pri:hover{filter:brightness(1.08);color:var(--on-blue);}
.b-sm{height:38px;font-size:13px;padding:0 14px;width:auto;}
.b-row{display:flex;gap:10px;flex-wrap:wrap;}
.b-row .b{width:auto;flex:1;min-width:140px;}

/* ===== app shell ===== */
.app{display:grid;grid-template-columns:266px minmax(0,1fr);align-items:start;
  transition:grid-template-columns .22s ease;}
body.sidemin .app{grid-template-columns:62px minmax(0,1fr);}
.side{
  position:sticky;top:40px;height:calc(100dvh - 40px);overflow-y:auto;
  background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;
}
.sbrand{display:flex;align-items:center;gap:9px;padding:16px 14px 14px;}
.sbrand .sp{flex:1;}
.mintog{
  width:28px;height:28px;flex:none;border-radius:7px;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:var(--side-ink);font-size:13px;line-height:1;display:grid;place-items:center;
}
.mintog:hover{background:rgba(255,255,255,.16);}
.sbrand .lname{color:#fff;font-size:15px;}
.sbrand .lmark{background:var(--blue);}

.usage{margin:0 12px 12px;background:var(--side-2);border-radius:10px;padding:12px 13px;}
.usage .row1{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.ptag{font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;background:var(--amber-soft);color:var(--amber);}
.ptag.paid{background:var(--green-soft);color:var(--green);}
.usage .up{margin-left:auto;background:none;border:none;color:#9fc4e4;font-size:11.5px;cursor:pointer;text-decoration:underline;padding:0;}
.bar{height:7px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;}
.bar i{display:block;height:100%;background:var(--amber);}
.bar.ok i{background:#5fc194;}
.usage .lbl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--side-ink-2);margin-top:6px;}
.usage .lbl b{font-family:"Roboto Mono",monospace;color:var(--side-ink);}

.sgroup{padding:4px 12px 2px;}
.sgh{
  font-family:"Roboto Mono",monospace;font-size:9.5px;letter-spacing:.12em;
  color:var(--side-ink-2);font-weight:700;padding:8px 6px 6px;
}
.fitem{
  display:grid;grid-template-columns:14px 1fr auto;gap:8px;align-items:center;width:100%;
  background:transparent;border:none;border-radius:8px;padding:9px 10px;cursor:pointer;
  color:var(--side-ink);text-align:left;font-size:13.4px;line-height:1.45;margin-bottom:2px;
}
.fitem .bul{
  font-size:16px;line-height:1;text-align:center;color:var(--side-ink-2);
  transform:translateY(-1px);
}
.fitem:hover .bul{color:#9fc4e4;}
.fitem.on .bul{color:var(--on-blue);}
.fitem:hover{background:rgba(255,255,255,.07);}
.fitem.on{background:var(--blue);color:var(--on-blue);font-weight:700;}
.fitem .cnt{
  font-family:"Roboto Mono",monospace;font-size:10.5px;font-weight:700;
  background:var(--red);color:#fff;border-radius:99px;padding:1px 7px;flex:none;
}
.fitem .cnt.z{background:rgba(255,255,255,.16);color:var(--side-ink-2);}
.fitem.on .cnt.z{background:rgba(127,127,127,.35);color:var(--on-blue);}
.addflow{
  width:100%;background:transparent;border:1px dashed rgba(255,255,255,.3);
  color:#9fc4e4;border-radius:8px;padding:9px;font-size:12.8px;cursor:pointer;margin-top:6px;
  text-align:left;padding-left:32px;
}
.addflow:hover{background:rgba(255,255,255,.07);border-color:#9fc4e4;}

.nitem{
  display:grid;grid-template-columns:20px 1fr auto;gap:9px;align-items:center;width:100%;
  background:transparent;border:none;border-radius:8px;padding:9px 10px;cursor:pointer;
  color:var(--side-ink);text-align:left;font-size:13.4px;margin-bottom:2px;
}
.nitem:hover{background:rgba(255,255,255,.07);}
.nitem.on{background:rgba(255,255,255,.13);font-weight:700;}
.nitem .ic{font-size:14px;text-align:center;opacity:.85;}
.nitem .cnt{font-family:"Roboto Mono",monospace;font-size:10.5px;font-weight:700;background:var(--red);color:#fff;border-radius:99px;padding:1px 7px;}

/* ---- 折りたたみ時 ---- */
.fnum{
  font-family:"Roboto Mono",monospace;font-size:11px;font-weight:700;
  background:rgba(255,255,255,.12);border-radius:6px;padding:5px 0;
  text-align:center;display:none;position:relative;
}
.fitem.on .fnum{background:var(--on-blue);color:var(--blue);}
.fnum .dot{
  position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--red);border:1.5px solid var(--side);
}
body.sidemin .sbrand{padding:14px 0 12px;justify-content:center;}
body.sidemin .sbrand .lname,
body.sidemin .sbrand .sp,
body.sidemin .sbrand .lmark{display:none;}
body.sidemin .sbrand .mintog{width:34px;height:34px;font-size:15px;}
body.sidemin .usage{margin:0 10px 12px;padding:8px 9px;}
body.sidemin .usage .row1,
body.sidemin .usage .lbl{display:none;}
body.sidemin .sgroup{padding:2px 10px;}
body.sidemin .sgh{
  font-size:0;letter-spacing:0;padding:9px 0 5px;text-align:center;
  border-top:1px solid rgba(255,255,255,.1);
}
body.sidemin .fitem{grid-template-columns:1fr;padding:6px 4px;}
body.sidemin .fitem .bul,
body.sidemin .fitem .ftxt,
body.sidemin .fitem .cnt{display:none;}
body.sidemin .fnum{display:block;}
body.sidemin .addflow{padding:7px 0;text-align:center;font-size:15px;}
body.sidemin .addflow .atxt{display:none;}
body.sidemin .nitem{grid-template-columns:1fr;padding:9px 4px;justify-items:center;}
body.sidemin .nitem .ntxt{display:none;}
body.sidemin .nitem .cnt{
  position:absolute;top:2px;right:6px;font-size:9px;padding:0 5px;
}
body.sidemin .nitem{position:relative;}
body.sidemin .nitem .ic{font-size:16px;}
body.sidemin .sfoot{padding:10px 0;}
body.sidemin .me{grid-template-columns:1fr;justify-items:center;}
body.sidemin .me .minfo{display:none;}

.sfoot{margin-top:auto;padding:12px;border-top:1px solid rgba(255,255,255,.1);}
.me{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:center;}
.av{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;}
.me .nm{font-size:13px;font-weight:700;line-height:1.3;}
.me .rl{font-size:11px;color:var(--side-ink-2);line-height:1.3;}

/* ===== main ===== */
.main{min-width:0;padding:0 0 70px;}
.topbar{
  position:sticky;top:40px;z-index:30;background:var(--bg);
  padding:16px 24px 12px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.burger{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-2);
  background:var(--surface);border-radius:8px;cursor:pointer;font-size:16px;flex:none;}
.burger:hover{border-color:var(--blue);color:var(--blue);}
.topbar h1{font-family:"Zen Kaku Gothic New",sans-serif;font-size:19px;font-weight:700;margin:0;flex:1;min-width:0;line-height:1.4;}
.topbar .meta{font-size:12px;color:var(--ink-3);font-family:"Roboto Mono",monospace;}

.tabs{display:flex;gap:6px;padding:12px 24px 0;flex-wrap:wrap;}
.tab{
  padding:9px 16px;border-radius:9px 9px 0 0;border:1px solid var(--line);border-bottom:none;
  background:var(--surface-2);cursor:pointer;font-size:13.5px;font-weight:700;color:var(--ink-3);
  display:flex;align-items:center;gap:7px;
}
.tab.on{background:var(--surface);color:var(--blue);border-color:var(--line-2);}
.tab .n{font-family:"Roboto Mono",monospace;font-size:9.5px;letter-spacing:.1em;opacity:.8;}
.tab .cnt{font-family:"Roboto Mono",monospace;font-size:10px;font-weight:700;background:var(--red);color:#fff;border-radius:99px;padding:1px 6px;}

.panel{
  background:var(--surface);border:1px solid var(--line-2);border-radius:0 12px 12px 12px;
  margin:0 24px;box-shadow:var(--shadow);overflow:hidden;
}
.panel.plain{border-radius:12px;margin-top:18px;}
.phead{padding:14px 20px;border-bottom:1px solid var(--line);background:var(--surface-2);}
.phead h2{font-family:"Zen Kaku Gothic New",sans-serif;font-size:16px;font-weight:700;margin:0 0 3px;}
.phead p{font-size:12.5px;color:var(--ink-3);margin:0;line-height:1.65;}
.pbody{padding:18px 20px 22px;}

/* ===== flow editor (from working mockup) ===== */
.colhead{display:grid;grid-template-columns:44px 1fr 1fr 2.2fr 126px;gap:8px;padding:0 2px 6px;
  font-family:"Roboto Mono",monospace;font-size:10px;letter-spacing:.07em;color:var(--ink-3);font-weight:700;}
.rows{display:flex;flex-direction:column;gap:8px;}
.row{display:grid;grid-template-columns:44px 1fr 1fr 2.2fr 126px;gap:8px;align-items:start;
  background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:8px;}
.rnum{display:flex;align-items:center;justify-content:center;height:44px;font-family:"Roboto Mono",monospace;
  font-weight:700;font-size:13.5px;color:var(--blue);background:var(--surface);border:1px solid var(--line);border-radius:6px;}
.f{width:100%;height:44px;padding:0 10px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);}
.f:hover{border-color:var(--blue);}
textarea.f{height:auto;padding:10px;resize:none;overflow:hidden;line-height:1.55;min-height:44px;}
.typewrap{display:flex;gap:7px;align-items:center;}
.chipshape{width:24px;height:24px;flex:none;background:var(--blue);}
.acts{display:flex;gap:5px;align-items:center;justify-content:flex-end;}
.ib{width:28px;height:44px;border:1px solid var(--line-2);background:var(--surface);border-radius:6px;
  cursor:pointer;display:grid;place-items:center;font-size:13px;color:var(--ink-2);line-height:1;}
.ib:hover{border-color:var(--blue);color:var(--blue);}
.ib.del:hover{border-color:var(--red);color:var(--red);}
.ib:disabled{opacity:.3;cursor:default;}
.ngrow{grid-column:1/-1;display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 4px 2px;
  margin-top:2px;border-top:1px dashed var(--line-2);}
.ngrow label{font-size:12.5px;color:var(--red);font-weight:700;}
.ngrow select{height:36px;padding:0 8px;border:1px solid var(--red);border-radius:6px;background:var(--surface);}
.ngrow .n{font-size:11.5px;color:var(--ink-3);}
.nextrow label{color:var(--blue);}
/* STEP1：帳票の列（#40） */
.doctoggle{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px;padding:10px 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface-2);font-size:12.5px;}
.doctoggle .dt-hint{color:var(--ink-3);font-size:12px;flex:1;min-width:220px;}
.lgchk{cursor:pointer;font-weight:700;white-space:nowrap;}
/* 図の下の切り替え欄。狭い画面では折り返す */
.lg-right{margin-left:auto;gap:8px 14px;flex-wrap:wrap;justify-content:flex-end;}
.lg-right > label,.lg-right .b{white-space:nowrap;}
.lgchk input{width:16px;height:16px;accent-color:var(--blue);}
.dcol{display:none;}
.withdocs .dcol{display:flex;}
.rows.withdocs .row > .dcol{grid-column:2/-1;}
.dcell{flex-wrap:wrap;gap:5px;align-items:center;min-height:44px;padding:5px 7px;
  border:1px dashed var(--line-2);border-radius:6px;background:var(--surface);}
.dchip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;line-height:1.5;padding:1px 8px;
  border-radius:99px;border:1px solid var(--line-2);color:var(--ink-2);background:var(--surface);}
.dchip.out{border-color:var(--teal);color:var(--teal);background:var(--teal-soft);}
.dchip b{font-size:10px;}
.dchip .x{border:none;background:none;color:inherit;opacity:.6;cursor:pointer;padding:0 0 0 2px;font-size:12px;line-height:1;}
.dchip .x:hover{opacity:1;}
.dadd{font-size:11.5px;font-weight:700;color:var(--blue);background:none;border:none;cursor:pointer;padding:2px 4px;}
.dform{display:flex;flex-wrap:wrap;gap:5px;align-items:center;width:100%;}
.dform input{flex:1;min-width:110px;height:32px;padding:0 8px;border:1px solid var(--blue);border-radius:6px;background:var(--surface);}
.dform select{height:32px;padding:0 6px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);}
.dform button{height:32px;padding:0 10px;border-radius:6px;border:1px solid var(--blue);background:var(--blue);color:var(--on-blue);font-weight:700;cursor:pointer;}
.dform button.ghost{background:var(--surface);color:var(--ink-2);border-color:var(--line-2);}
/* STEP2：工程の下に出す帳票のしるし（#40） */
.bdocs{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:150px;}
.ldoc{display:inline-flex;align-items:center;gap:4px;font-size:10px;line-height:1.3;padding:2px 6px 2px 5px;
  border-radius:4px;background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2);}
.ldoc.out{color:var(--teal);border-color:var(--teal);background:var(--teal-soft);}
.ldoc .ldir{font-size:9px;font-weight:700;}
.ldi{display:inline-block;width:8px;height:10px;flex:none;border:1.5px solid currentColor;border-radius:1px;
  clip-path:polygon(0 0,65% 0,100% 30%,100% 100%,0 100%);}
.nextrow select{border-color:var(--blue);}
.nextopts{display:flex;flex-wrap:wrap;gap:4px 14px;}
.nextopt{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--ink-2);font-weight:400;cursor:pointer;}
.nextopt input{accent-color:var(--blue);}
.nextend{color:var(--blue);font-weight:700;}
.btn-add{width:100%;height:48px;border:1px dashed var(--blue);color:var(--blue);background:transparent;
  border-radius:9px;cursor:pointer;font-weight:700;font-size:14px;margin-top:10px;}
.btn-add:hover{background:var(--blue-soft);}
.btnbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px;align-items:center;}
.btn-go{background:var(--blue);color:var(--on-blue);border:1px solid var(--blue);height:54px;
  border-radius:9px;font-size:16px;padding:0 30px;cursor:pointer;font-weight:700;
  font-family:"Zen Kaku Gothic New",sans-serif;}
.btn-go:hover{filter:brightness(1.08);}

/* diagram */
#diagram{overflow-x:auto;padding:4px 0 8px;}
#fitbox{position:relative;}
#canvas{position:relative;width:max-content;min-width:100%;transform-origin:top left;}
#grid{display:grid;gap:0;position:relative;z-index:2;width:100%;}
.hcell{padding:9px 8px;text-align:center;font-size:12px;font-weight:700;background:var(--blue);
  color:var(--on-blue);border-right:1px solid rgba(127,127,127,.35);
  font-family:"Zen Kaku Gothic New",sans-serif;line-height:1.4;}
.hcell:last-child{border-right:none;}
.hcell.corner{background:#0e4671;color:#fff;font-family:"Roboto Mono",monospace;font-size:10.5px;letter-spacing:.06em;}
:root[data-theme="dark"] .hcell.corner,:root:not([data-theme="light"]) .hcell.corner{background:#0f2537;}
.numcell{display:flex;flex-wrap:wrap;gap:4px;align-items:center;align-content:center;padding:14px 8px;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line-2);background:var(--surface-2);}
.nbadge{font-family:"Roboto Mono",monospace;font-weight:700;font-size:12.5px;background:var(--surface);
  border:1px solid var(--line-2);color:var(--blue);border-radius:5px;padding:3px 0;width:34px;text-align:center;flex:none;}
.cell{position:relative;flex-direction:column;gap:6px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:14px 8px;
  display:flex;align-items:center;justify-content:center;min-height:72px;}
.cell:last-child{border-right:none;}
.lane-alt{background:var(--surface-2);}
.cno{position:absolute;top:6px;left:16px;font-family:"Roboto Mono",monospace;font-size:10px;font-weight:700;
  line-height:1;color:var(--ink-3);}
.box{position:relative;width:100%;max-width:142px;min-height:44px;cursor:pointer;background:var(--surface);
  border:2px solid var(--blue);border-radius:6px;padding:9px 11px;font-size:12.5px;line-height:1.55;
  text-align:center;font-weight:500;font-family:inherit;}
.box:hover{box-shadow:0 0 0 3px var(--blue-soft);}
.t-start{border-radius:999px;background:var(--blue);border-color:var(--blue);color:var(--on-blue);font-weight:700;padding:11px 14px;max-width:142px;}
.t-check{border-color:var(--amber);background:var(--amber-soft);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  border:none;padding:26px 28px;min-height:94px;min-width:116px;box-shadow:inset 0 0 0 2px var(--amber);border-radius:0;}
.t-move{border:none;background:var(--teal-soft);box-shadow:inset 0 0 0 2px var(--teal),inset -9px 0 0 0 var(--teal-soft);
  clip-path:polygon(0 0,74% 0,100% 50%,74% 100%,0 100%);padding:10px 34px 10px 12px;border-radius:0;overflow:hidden;}
.t-record{border:none;background:var(--blue-soft);box-shadow:inset 0 0 0 2px var(--blue);
  clip-path:polygon(9% 0,100% 0,91% 100%,0 100%);padding:10px 22px;border-radius:0;}
.t-doc{border:none;background:var(--surface-3);box-shadow:inset 0 0 0 2px var(--line-2);
  clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%);padding:10px 12px 18px;border-radius:0;}
.badge{position:absolute;top:-9px;right:-9px;min-width:22px;height:22px;border-radius:999px;
  display:grid;place-items:center;padding:0 6px;font-family:"Roboto Mono",monospace;font-size:11px;
  font-weight:700;color:#fff;border:2px solid var(--surface);z-index:4;}
.t-check .badge{top:2px;right:6%;}
.b-issue{background:#b3392c;} .b-idea{background:#8a6410;} .b-q{background:#15619b;} .b-done{background:#26734f;}
#wires{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible;}
.wlabel{font-family:"Noto Sans JP",sans-serif;font-size:11px;font-weight:700;}
.legend{display:flex;gap:13px;flex-wrap:wrap;align-items:center;padding:12px 20px;
  border-top:1px solid var(--line);background:var(--surface-2);font-size:11.8px;color:var(--ink-2);}
.lg{display:inline-flex;align-items:center;gap:6px;}
.lgs{width:19px;height:15px;flex:none;}
.empty{text-align:center;padding:44px 20px;color:var(--ink-3);font-size:14px;
  border:2px dashed var(--line-2);border-radius:10px;margin:6px 0;}

/* tables */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:9px;}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:13.2px;}
th,td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--line);vertical-align:middle;}
thead th{background:var(--surface-2);font-family:"Roboto Mono",monospace;font-size:10px;
  letter-spacing:.06em;color:var(--ink-2);white-space:nowrap;}
tbody tr:last-child td{border-bottom:none;}
td.mono{font-family:"Roboto Mono",monospace;font-weight:700;color:var(--blue);white-space:nowrap;}
.kind{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:4px;white-space:nowrap;}
.k-issue{background:var(--red-soft);color:var(--red);}
.k-idea{background:var(--amber-soft);color:var(--amber);}
.k-q{background:var(--blue-soft);color:var(--blue);}
select.st{height:32px;padding:0 6px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);font-size:12px;}
tr.done td{opacity:.55;}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;}
.pill.ok{background:var(--green-soft);color:var(--green);}
.pill.wait{background:var(--amber-soft);color:var(--amber);}
.pill.adm{background:var(--blue-soft);color:var(--blue);}
.pill.warn{background:var(--red-soft);color:var(--red);}
.counts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.cpill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 11px;border-radius:999px;}
.c-issue{background:var(--red-soft);color:var(--red);}
.c-idea{background:var(--amber-soft);color:var(--amber);}
.c-q{background:var(--blue-soft);color:var(--blue);}
.c-same{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);}
.c-chg{background:var(--blue-soft);color:var(--blue);}
.c-new{background:var(--green-soft);color:var(--green);}
.c-gone{background:var(--red-soft);color:var(--red);}
.pill.same{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line);}
.pill.gone{background:var(--red-soft);color:var(--red);}
.pill.chg{background:var(--blue-soft);color:var(--blue);}
.importbox{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface-2);margin-top:16px;}
.importbox h3{font-size:14px;margin:0 0 8px;}
.importbox .ib-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.importbox .ib-cols b{display:block;font-size:12px;margin-bottom:2px;}
.importbox .ib-cols p{font-size:12.3px;color:var(--ink-2);margin:0;line-height:1.7;}
.importbox .chk2{margin-top:10px;}
.newtag{font-size:10.5px;font-weight:700;background:var(--green-soft);color:var(--green);padding:1px 7px;border-radius:99px;}
@media (max-width:800px){.importbox .ib-cols{grid-template-columns:1fr;}}

/* cards / plans */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:20px;}
.card{border:1px solid var(--line);border-radius:10px;padding:13px 15px;background:var(--surface-2);}
.card .cl{font-size:11.5px;color:var(--ink-3);margin-bottom:2px;}
.card .cv{font-family:"Roboto Mono",monospace;font-weight:700;font-size:18px;}
.card .cv small{font-size:11.5px;color:var(--ink-3);font-weight:400;}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px;}
.namebox{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin-bottom:16px;}
@media (max-width:640px){ .namebox{grid-template-columns:1fr;} }
.plans-more{margin:14px 0 0;font-size:12.5px;color:var(--ink-3);}
.plans-more a{color:var(--blue);font-weight:700;}
.plan{border:1px solid var(--line);border-radius:11px;padding:17px;background:var(--surface);display:flex;flex-direction:column;}
.plan.best{border:2px solid var(--blue);position:relative;}
.plan .rib{position:absolute;top:-11px;left:14px;background:var(--blue);color:var(--on-blue);
  font-size:11px;font-weight:700;padding:2px 10px;border-radius:5px;}
.plan .pn{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:14.5px;margin-bottom:2px;}
.plan .pd{font-size:11.5px;color:var(--ink-3);margin-bottom:11px;min-height:30px;line-height:1.55;}
.plan .pp{font-family:"Roboto Mono",monospace;font-weight:700;font-size:21px;color:var(--blue);line-height:1.25;}
.plan .pu{font-size:11px;color:var(--ink-3);margin-bottom:12px;font-family:"Roboto Mono",monospace;}
.plan ul{list-style:none;padding:0;margin:0 0 14px;flex:1;}
.plan li{font-size:12.3px;color:var(--ink-2);padding-left:18px;position:relative;margin-bottom:6px;line-height:1.6;}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700;}
.plan li.no{color:var(--ink-3);} .plan li.no::before{content:"—";color:var(--ink-3);}

.subsidy{border:1px solid var(--green);background:var(--green-soft);border-radius:10px;padding:14px 17px;margin-top:16px;}
.subsidy h4{margin:0 0 6px;font-size:13px;font-family:"Zen Kaku Gothic New",sans-serif;color:var(--green);}
.subsidy p{margin:0;font-size:12.3px;line-height:1.75;color:var(--ink-2);}
.subsidy b{font-family:"Roboto Mono",monospace;color:var(--ink);}

.pay{display:grid;gap:11px;}
.paycard{display:grid;grid-template-columns:20px 1fr auto;gap:12px;align-items:start;
  border:2px solid var(--line-2);border-radius:10px;padding:15px 16px;cursor:pointer;background:var(--surface);}
.paycard.sel{border-color:var(--blue);background:var(--blue-soft);}
.paycard.off{opacity:.55;cursor:default;}
.rec.soon{background:var(--surface-3);color:var(--ink-3);}
.radio{width:19px;height:19px;border-radius:50%;border:2px solid var(--line-2);margin-top:2px;}
.paycard.sel .radio{border-color:var(--blue);border-width:6px;}
.paycard .pt{font-weight:700;font-size:14px;margin-bottom:2px;}
.paycard .px{font-size:12px;color:var(--ink-2);line-height:1.65;}
.paycard .fee{font-family:"Roboto Mono",monospace;font-size:10.5px;color:var(--ink-3);white-space:nowrap;text-align:right;}
.rec{display:inline-block;background:var(--green-soft);color:var(--green);font-size:10.5px;
  font-weight:700;padding:1px 7px;border-radius:4px;margin-left:6px;}

.note{border-left:3px solid var(--line-2);background:var(--surface-2);border-radius:0 8px 8px 0;
  padding:12px 15px;font-size:12.5px;color:var(--ink-2);line-height:1.75;margin:16px 0 0;}
.note strong{color:var(--ink);}
.note.warn{border-left-color:var(--amber);background:var(--amber-soft);}

/* ===== 全画面表示 ===== */
body.fs{overflow:hidden;}
body.fs .demobar,body.fs .side,body.fs .topbar,body.fs .tabs,
body.fs #p-edit,body.fs #p-fissues{display:none!important;}
body.fs .app{grid-template-columns:1fr;}
body.fs .main{padding:0;}
#p-diag.fs{
  position:fixed;inset:0;z-index:80;margin:0;border:none;border-radius:0;
  background:var(--surface);display:flex;flex-direction:column;box-shadow:none;
}
#p-diag.fs .phead{display:none;}
#p-diag.fs .legend{display:none;}
#p-diag.fs .pbody{flex:1;display:flex;align-items:center;justify-content:center;padding:62px 20px 44px;overflow:auto;}
#p-diag.fs #diagram{width:100%;overflow:visible;}
#p-diag.fs #fitbox{margin:0 auto;}
.fsbar{
  position:fixed;top:14px;right:16px;z-index:82;display:none;gap:8px;align-items:center;
}
body.fs .fsbar{display:flex;}
.fsbar .ftitle{
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  padding:7px 14px;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:14px;
}
.fsbar .fclose{
  height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--surface);cursor:pointer;font-size:13px;font-weight:700;
}
.fsbar .fclose:hover{border-color:var(--blue);color:var(--blue);}
.fshint{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:82;
  background:var(--surface-2);border:1px solid var(--line);border-radius:99px;
  padding:5px 16px;font-size:12px;color:var(--ink-3);display:none;
}
body.fs .fshint{display:block;}
.rchint{font-size:11.5px;color:var(--ink-3);}

/* ===== modals ===== */
.scrim{position:fixed;inset:0;background:rgba(10,16,24,.55);z-index:70;opacity:0;pointer-events:none;transition:opacity .16s;}
.scrim.on{opacity:1;pointer-events:auto;}
.modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(.98);
  width:min(540px,calc(100% - 32px));max-height:86dvh;overflow-y:auto;z-index:71;
  background:var(--surface);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transition:opacity .16s, transform .16s;
}
.modal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
.mbody{padding:30px 28px 26px;text-align:center;}
.mbody h3{font-family:"Zen Kaku Gothic New",sans-serif;font-size:18px;margin:0 0 8px;line-height:1.45;}
.mbody p{font-size:13.5px;color:var(--ink-2);margin:0 0 18px;line-height:1.75;}
.saved{display:flex;gap:9px;align-items:center;background:var(--green-soft);border-radius:8px;
  padding:10px 13px;font-size:12.5px;color:var(--green);font-weight:700;margin-bottom:16px;text-align:left;}
.meter{margin-bottom:18px;}
.meterlbl{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-2);margin-top:6px;}
.meterlbl b{font-family:"Roboto Mono",monospace;}

/* comment drawer */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:72;background:var(--surface);
  border-left:1px solid var(--line);transform:translateX(100%);transition:transform .2s ease;display:flex;flex-direction:column;}
.drawer.on{transform:translateX(0);}
.dhead{padding:15px 18px;border-bottom:1px solid var(--line);background:var(--surface-2);}
.dhead .dt{display:flex;align-items:center;gap:9px;margin-bottom:7px;}
.dhead h3{font-family:"Zen Kaku Gothic New",sans-serif;font-size:15px;margin:0;flex:1;}
.dstep{font-family:"Roboto Mono",monospace;font-size:11px;font-weight:700;background:var(--blue);
  color:var(--on-blue);border-radius:4px;padding:3px 8px;}
.dclose{width:32px;height:32px;border:1px solid var(--line-2);background:var(--surface);border-radius:7px;cursor:pointer;font-size:15px;}
.dq{font-size:13px;color:var(--ink-2);margin:0;line-height:1.65;}
.dbody{flex:1;overflow-y:auto;padding:15px 18px;}
.dfoot{padding:13px 18px;border-top:1px solid var(--line);background:var(--surface-2);}
.kinds{display:flex;gap:7px;margin-bottom:9px;flex-wrap:wrap;}
.kbtn{flex:1 1 0;min-width:92px;height:42px;border-radius:7px;cursor:pointer;border:2px solid var(--line-2);
  background:var(--surface);font-size:12.5px;font-weight:700;}
.kbtn[aria-pressed="true"].k1{border-color:var(--red);background:var(--red-soft);color:var(--red);}
.kbtn[aria-pressed="true"].k2{border-color:var(--amber);background:var(--amber-soft);color:var(--amber);}
.kbtn[aria-pressed="true"].k3{border-color:var(--blue);background:var(--blue-soft);color:var(--blue);}
.dfoot textarea{width:100%;min-height:70px;padding:10px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--surface);resize:vertical;line-height:1.6;}
.cmt{border:1px solid var(--line);border-radius:9px;padding:11px 12px;margin-bottom:9px;background:var(--surface-2);}
.cmt .ch{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap;}
.cmt p{margin:0 0 8px;font-size:13px;line-height:1.7;white-space:pre-wrap;}
.cmt .cf{display:flex;gap:8px;align-items:center;justify-content:space-between;}
.cdel{background:none;border:none;color:var(--ink-3);cursor:pointer;font-size:11.5px;text-decoration:underline;padding:0;}
.cdel:hover{color:var(--red);}

/* PDF preview */
.pdfsheet{
  position:relative;background:#fff;color:#151d28;border:1px solid var(--line-2);
  border-radius:6px;padding:26px 22px;overflow:hidden;text-align:left;
  font-size:11.5px;line-height:1.7;min-height:260px;
}
.pdfsheet .wm{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  transform:rotate(-32deg);font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:52px;font-weight:700;color:rgba(21,29,40,.13);letter-spacing:.2em;white-space:nowrap;
}
.pdfsheet .wmrow{position:absolute;inset:0;pointer-events:none;}
.pdfsheet h4{margin:0 0 3px;font-size:14px;color:#151d28;font-family:"Zen Kaku Gothic New",sans-serif;}
.pdfsheet .sm{color:#7d8695;font-size:10.5px;margin-bottom:14px;}
.pdfrow{display:grid;grid-template-columns:34px 1fr;gap:9px;margin-bottom:7px;align-items:center;}
.pdfrow .pn2{font-family:"Roboto Mono",monospace;font-size:10px;font-weight:700;color:#15619b;
  background:#e2edf6;border-radius:4px;text-align:center;padding:2px 0;}
.pdfrow .pb{border:1.5px solid #15619b;border-radius:4px;padding:5px 9px;font-size:10.5px;background:#fff;}
.pdfcredit{
  position:absolute;left:0;right:0;bottom:0;padding:6px 14px;font-size:9px;color:#8b95a3;
  border-top:1px solid #e6e9ee;background:#fafbfc;text-align:right;
}

@media (max-width:900px){
  .app{grid-template-columns:1fr;}
  .app,body.sidemin .app{grid-template-columns:1fr;}
  .side{
    position:fixed;top:0;left:0;bottom:0;width:280px;height:100dvh;z-index:65;
    transform:translateX(-100%);transition:transform .2s;
  }
  .side.open{transform:translateX(0);}
  body.sidemin .sbrand{padding:16px 14px 14px;justify-content:flex-start;}
  body.sidemin .sbrand .lname,body.sidemin .sbrand .sp,body.sidemin .sbrand .lmark{display:flex;}
  body.sidemin .sbrand .lname{display:block;}
  body.sidemin .usage .row1,body.sidemin .usage .lbl{display:flex;}
  body.sidemin .fitem{grid-template-columns:14px 1fr auto;padding:9px 10px;}
  body.sidemin .fitem .bul,body.sidemin .fitem .ftxt,body.sidemin .fitem .cnt{display:block;}
  body.sidemin .fnum{display:none;}
  body.sidemin .nitem{grid-template-columns:20px 1fr auto;padding:9px 10px;justify-items:stretch;}
  body.sidemin .nitem .ntxt{display:block;}
  body.sidemin .sgh{font-size:9.5px;letter-spacing:.12em;text-align:left;border-top:none;}
  body.sidemin .addflow .atxt{display:inline;}
  body.sidemin .me{grid-template-columns:32px 1fr;justify-items:start;}
  body.sidemin .me .minfo{display:block;}
  .topbar{top:40px;}
  .row{grid-template-columns:44px 1fr 1.4fr;}
  .row > .fwide{grid-column:1/-1;}
  .row > .acts{grid-column:1/-1;justify-content:flex-start;}
  .rows.withdocs .row > .dcol{grid-column:1/-1;}
  .ib{flex:1;max-width:76px;}
  .panel{margin:0 12px;}
  .topbar{padding:12px 14px 10px;}
  .tabs{padding:10px 14px 0;}
}

/* ============================================================
   実システム化にともなう追加スタイル
   （モックアップのデモ操作バーが無くなったぶんの調整と、新しい部品）
   ============================================================ */

/* デモ操作バー（高さ40px）が無くなったので上端に寄せる */
.topbar{top:0;}
@media (max-width:900px){ .topbar{top:0;} }
.authwrap{min-height:100dvh;}
body.fs .topbar{display:none!important;}

/* 見出し右の操作ボタン群 */
.topacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.topacts[hidden]{display:none!important;}
.topacts .b-sm{width:auto;}

/* エラー・お知らせの表示 */
.errbox{
  border-left:3px solid var(--red);background:var(--red-soft);color:var(--ink);
  border-radius:0 8px 8px 0;padding:10px 13px;margin:12px 0 0;font-size:13px;
  line-height:1.75;text-align:left;
}
.errbox[hidden]{display:none!important;}
.okbox{
  border-left:3px solid var(--green);background:var(--green-soft);color:var(--ink);
  border-radius:0 8px 8px 0;padding:10px 13px;margin:12px 0 0;font-size:13px;
  line-height:1.75;text-align:left;word-break:break-all;
}

/* 参加コードの入力欄 */
.codeinp{
  width:100%;height:60px;text-align:center;text-transform:uppercase;
  font-family:"Roboto Mono",monospace;font-size:26px;font-weight:700;letter-spacing:.28em;
  border:2px solid var(--line-2);border-radius:10px;background:var(--surface);padding:0 0 0 .28em;
}
.codeinp:focus{border-color:var(--blue);}

/* 画面右下の短い通知 */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);
  background:var(--side);color:var(--side-ink);padding:11px 20px;border-radius:9px;
  font-size:13.5px;box-shadow:var(--shadow);z-index:200;opacity:0;pointer-events:none;
  transition:opacity .18s, transform .18s;max-width:calc(100vw - 32px);
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.err{background:var(--red);color:#fff;}

/* サイドバー最下部のログアウト */
.sfoot .lo{
  margin-top:10px;width:100%;background:transparent;border:1px solid rgba(255,255,255,.2);
  color:var(--side-ink-2);border-radius:7px;padding:6px 10px;font-size:12px;cursor:pointer;
}
.sfoot .lo:hover{background:rgba(255,255,255,.1);color:var(--side-ink);}
body.sidemin .sfoot .lo{font-size:0;padding:6px 0;}
body.sidemin .sfoot .lo::before{content:"⏻";font-size:13px;}

/* 保存中の表示 */
.saving{font-size:12px;color:var(--ink-3);}
.saving.on{color:var(--blue);}

/* 参加コードの一覧（拠点とメンバー） */
.codelist{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px;}
.codechip{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);
  border-radius:8px;padding:5px 10px;font-size:12.5px;background:var(--surface-2);
}
.codechip b{font-family:"Roboto Mono",monospace;font-size:14px;letter-spacing:.08em;}
.codechip button{background:none;border:none;color:var(--red);cursor:pointer;font-size:12px;padding:0;}

/* 読み込み中の全面表示 */
.boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:300;color:var(--ink-3);font-size:14px;}
.boot[hidden]{display:none!important;}

/* 書きこみの投稿者と日時 */
.cmt .ch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.cmt .who{font-size:11.5px;color:var(--ink-3);}

/* ============================================================
   STEP4：実施を記録する（図＋時間の帯。#60。mock/assets/mock.css を元にしている）
   ============================================================ */
.runempty{padding:26px 18px;text-align:center;border:1px dashed var(--line-2);border-radius:10px;background:var(--surface-2);}
.runempty p{margin:0 0 14px;color:var(--ink-2);font-size:13.5px;}
.recbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.recbar .fl{margin:0;white-space:nowrap;}
.recsel{height:42px;flex:1 1 320px;max-width:560px;font-weight:700;}
.recbar .b-new{margin-left:auto;}
.recmeta{font-size:12px;color:var(--ink-3);margin:8px 0 0;}
.recprog{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0 0;font-size:12.5px;color:var(--ink-2);}
.progress{flex:1 1 160px;max-width:280px;height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden;}
.progress i{display:block;height:100%;background:var(--blue);}
.hintbar{font-size:12px;color:var(--blue);background:var(--blue-soft);border-radius:8px;padding:7px 12px;margin:12px 0 10px;}
.mform{text-align:left;}
.mform .fl{margin-top:12px;}
.mform textarea{width:100%;padding:10px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);}
.mform .b-row{margin-top:14px;}
.chk2{display:inline-flex;gap:7px;align-items:center;font-size:12.5px;color:var(--ink-2);margin-top:8px;}
.chk2 input{width:16px;height:16px;accent-color:var(--blue);flex:none;}
.pill.run{background:var(--blue-soft);color:var(--blue);}
/* 図＋時間の帯の枠 */
.fg-scroll{overflow-x:auto;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);}
.fg{position:relative;display:grid;}
.fg-hd{background:var(--surface-2);border-bottom:1px solid var(--line-2);font-size:10.5px;font-weight:700;color:var(--ink-2);}
.fg-hmini{display:flex;align-items:center;border-right:1px solid var(--line);}
.fg-hmini span{text-align:center;font-size:10px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px;}
.fg-hname{display:flex;align-items:center;padding:0 12px;font-family:"Roboto Mono",monospace;font-size:10px;letter-spacing:.06em;border-right:1px solid var(--line-2);}
.fg-htime{position:relative;overflow:hidden;}
.fg-hl{position:absolute;top:5px;transform:translateX(-50%);font-family:"Roboto Mono",monospace;font-size:10px;color:var(--ink-3);white-space:nowrap;}
.fg-hnow{position:absolute;bottom:3px;transform:translateX(-50%);font-size:10px;font-weight:700;color:var(--red);white-space:nowrap;}
.fg-c{border-bottom:1px solid var(--line);cursor:pointer;}
.fg-cmini{border-right:1px solid var(--line);}
.fg-name{display:flex;align-items:center;gap:8px;padding:0 10px;border-right:1px solid var(--line-2);min-width:0;}
.fg-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;}
.fg-st{font-size:11px;color:var(--ink-3);white-space:nowrap;}
.fg-st.next,.fg-st.live{color:var(--blue);font-weight:700;}
.fg-c.hov{background:var(--surface-2);}
.fg-c.sel{background:var(--blue-soft);}
.fg-mini,.fg-track{position:absolute;pointer-events:none;}
.fg-mini{left:0;}
.fg-track{right:0;bottom:0;}
/* 縮小した図 */
.fg-mstripe{position:absolute;top:0;bottom:0;background:rgba(127,127,127,.06);}
.fg-ms{position:absolute;transform:translate(-50%,-50%);z-index:2;}
.m-start{width:18px;height:12px;border-radius:99px;background:var(--blue);}
.m-task,.m-doc{width:24px;height:15px;border:2px solid var(--blue);border-radius:3px;background:var(--surface);}
.m-check{width:20px;height:20px;background:var(--amber);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
.m-move{width:24px;height:15px;background:var(--teal);clip-path:polygon(0 0,70% 0,100% 50%,70% 100%,0 100%);}
.m-record{width:24px;height:15px;background:var(--blue);clip-path:polygon(18% 0,100% 0,82% 100%,0 100%);}
.fg-ms.ahead,.fg-ms.next{opacity:.35;}
.fg-ring{position:absolute;width:32px;height:32px;border-radius:50%;border:2px solid var(--blue);transform:translate(-50%,-50%);z-index:1;}
.fg-mwires{position:absolute;left:0;top:0;overflow:visible;}
.fg-mw{fill:none;stroke:var(--ink-3);stroke-width:1.3;}
.fg-mw.ng{stroke:var(--red);}
.fg-mah{fill:var(--ink-3);}
.fg-mah.ng{fill:var(--red);}
/* 時間の帯 */
.fg-tick{position:absolute;top:0;bottom:0;width:1px;background:var(--line);}
.fg-bar{position:absolute;height:18px;min-width:4px;border-radius:4px;z-index:3;background:var(--blue);color:var(--on-blue);
  font-family:"Roboto Mono",monospace;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;
  overflow:hidden;white-space:nowrap;pointer-events:auto;cursor:pointer;}
.fg-bar.ng{background:var(--red);}
.fg-bar.redo{background:var(--amber);}
.fg-bar.live{background:repeating-linear-gradient(45deg,var(--blue) 0 6px,var(--blue-soft) 6px 10px);box-shadow:0 0 0 2px var(--blue);}
.fg-bar.ahead{background:var(--surface-2);border:1.5px dashed var(--line-2);}
.fg-pt{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--blue);z-index:3;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;}
.fg-pt.ahead{background:var(--surface);border:2px dashed var(--line-2);}
.fg-bl{position:absolute;transform:translateY(-50%);font-family:"Roboto Mono",monospace;font-size:10.5px;font-weight:700;color:var(--ink-2);white-space:nowrap;z-index:3;}
.fg-bl.live{color:var(--blue);}
.fg-v{position:absolute;width:0;border-left:1.5px solid var(--ink-3);z-index:2;}
.fg-h{position:absolute;height:0;border-top:1.5px dashed var(--ink-3);z-index:2;}
.fg-ah{position:absolute;width:0;height:0;z-index:2;transform:translate(-100%,-50%);
  border-left:6px solid var(--ink-3);border-top:4px solid transparent;border-bottom:4px solid transparent;}
.fg-v.ng{border-left-color:var(--red);}
.fg-h.ng{border-top-color:var(--red);}
.fg-ah.ng{border-left-color:var(--red);}
.fg-wait{position:absolute;transform:translate(-100%,-100%);z-index:3;padding:0 4px;border-radius:3px;
  font-size:10px;font-weight:700;color:var(--amber);background:var(--surface);white-space:nowrap;}
.fg-now{position:absolute;top:0;bottom:0;width:2px;background:var(--red);transform:translateX(-1px);z-index:4;}
.glegend{display:flex;gap:8px 14px;flex-wrap:wrap;font-size:11.8px;color:var(--ink-2);margin-top:10px;align-items:center;}
.glegend i{display:inline-block;width:18px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px;}
/* 表で見る（畳んでおく） */
.tblview{margin-top:16px;}
.tblview summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--blue);padding:6px 0;}
.tblview .tw{margin-top:8px;}
.rectable td:nth-child(2){min-width:170px;}
.rectable td:nth-child(3),.rectable td:nth-child(4){white-space:nowrap;}
.rectable td.wrap{white-space:pre-wrap;min-width:180px;}
.rectable td.num{font-family:"Roboto Mono",monospace;white-space:nowrap;}
tr.cur td{background:var(--blue-soft);}
tr.todo td{color:var(--ink-3);}
.waitnote{display:block;font-size:10.5px;color:var(--amber);font-weight:700;line-height:1.4;}
/* 右から開く記録の入力欄（図を隠さないよう暗幕は出さない） */
.recdrawer{box-shadow:-8px 0 30px rgba(0,0,0,.12);display:flex;flex-direction:column;}
.runcard{border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin-bottom:10px;background:var(--surface-2);}
.runcard.live{border:2px solid var(--blue);background:var(--surface);}
.runcard.ng{border-left:4px solid var(--red);}
.runcard.redo{border-left:4px solid var(--amber);}
.rc-h{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:13px;}
.rc-kv{display:grid;grid-template-columns:110px minmax(0,1fr);font-size:12.5px;gap:3px 10px;margin:0;}
.rc-kv dt{color:var(--ink-3);}
.rc-kv dd{margin:0;}
.rc-memo{margin:8px 0 0;font-size:12.8px;line-height:1.7;white-space:pre-wrap;}
.rc-note{font-size:12.5px;color:var(--ink-2);line-height:1.75;margin:0;}
.rc-edit{margin-top:10px;display:grid;gap:6px;}
.rc-edit input,.rc-edit textarea{width:100%;height:36px;padding:0 8px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);}
.rc-edit textarea{height:auto;min-height:56px;padding:8px;}
.rc-edit label{font-size:11.5px;font-weight:700;color:var(--ink-2);}
.rc-acts{display:flex;gap:12px;margin-top:8px;}
.dfoot .fl{text-align:left;margin-top:8px;}
.dfoot input[type="datetime-local"],.dfoot input[type="number"],.dfoot input[type="text"],.dfoot select{
  width:100%;height:40px;padding:0 9px;border:1px solid var(--line-2);border-radius:7px;background:var(--surface);}
.dfoot .b-row{margin-top:10px;}
.dfoot .b-row .b{min-width:0;height:44px;font-size:14px;}
.b-ng{border-color:var(--red);color:var(--red);}
.b-ng:hover{border-color:var(--red);color:var(--red);background:var(--red-soft);}
.b-ok{background:var(--green);border-color:var(--green);color:var(--on-blue);}
.b-ok:hover{color:var(--on-blue);filter:brightness(1.08);border-color:var(--green);}
.df-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

.b-run{background:var(--blue);color:var(--on-blue);border-color:var(--blue);}
.b-run:hover{filter:brightness(1.08);}

.subtabs{display:flex;gap:6px;flex-wrap:wrap;}
.subtab{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:99px;border:1px solid var(--line);background:var(--surface);font-size:12.5px;font-weight:700;color:var(--ink-2);cursor:pointer;}
.subtab.on{background:var(--blue);border-color:var(--blue);color:var(--on-blue);}
.progress{height:8px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;}
.progress i{display:block;height:100%;background:var(--blue);}
tr.done td{color:var(--ink-3);}

/* 現場画面（パソコンの大きな画面で押しやすいボタン） */
.fd-split{display:grid;grid-template-columns:minmax(300px,440px) minmax(0,1fr);gap:22px;align-items:start;}
@media (max-width:900px){.fd-split{grid-template-columns:1fr;}}
.fd-sec{font-size:12.5px;font-weight:700;color:var(--ink-3);margin:14px 0 6px;}
.fd-sec:first-child{margin-top:0;}
.fd-card{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 14px;margin-bottom:8px;cursor:pointer;color:inherit;font:inherit;}
.fd-card.now{border-color:var(--blue);background:var(--blue-soft);}
.fd-card.sel{outline:2px solid var(--blue);}
.fd-card.soon{opacity:.65;cursor:default;}
.fd-card .c1{font-family:"Roboto Mono",monospace;font-size:11.5px;color:var(--ink-3);}
.fd-card .c2{font-weight:700;font-size:15.5px;line-height:1.45;}
.fd-card .c3{font-size:12.5px;color:var(--ink-2);}
.fd-detail{border:1px solid var(--line);border-radius:12px;padding:18px 20px;background:var(--surface);}
.fd-detail h3{font-size:19px;margin:0 0 2px;}
.fd-detail .sub{font-size:13px;color:var(--ink-3);margin-bottom:12px;}
.fd-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0;}
.fd-fields label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:3px;}
.fd-fields input{width:100%;height:52px;font-size:22px;padding:0 12px;border:1px solid var(--line-2,var(--line));border-radius:8px;background:var(--surface);color:var(--ink);}
.fd-memo{width:100%;min-height:70px;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);}
.bigbtn{display:block;width:100%;height:68px;margin-top:10px;font-size:21px;font-weight:700;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;}
.bigbtn.go{background:var(--blue);border-color:var(--blue);color:var(--on-blue);}
.bigbtn.ngb{border-color:var(--red);color:var(--red);}
.bigbtn:disabled{opacity:.5;cursor:default;}

/* 現在地：図の上に置く案件の札 */
.bnow{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;justify-content:center;}
.ncase{font-family:"Roboto Mono",monospace;font-size:11px;font-weight:700;padding:1px 8px;border-radius:99px;background:var(--blue-soft);color:var(--blue);border:1px solid var(--blue);}
.ncase.wait{background:var(--surface);border-style:dashed;}
.ncase.late{background:var(--amber-soft);color:var(--amber);border-color:var(--amber);}
.ncase.overdue{background:var(--red-soft);color:var(--red);border-color:var(--red);}

/* ボトルネック分析：待ちの長さの段階と、図の上の数字・しるし */
.box.heat1{box-shadow:0 0 0 3px rgba(240,180,41,.35);}
.box.heat2{box-shadow:0 0 0 3px rgba(240,140,41,.55);}
.box.heat3{box-shadow:0 0 0 4px rgba(214,69,69,.6);}
.bstat{font-size:10.5px;color:var(--ink-2);text-align:center;margin-top:4px;line-height:1.35;}
.btag{display:inline-block;font-size:10.5px;font-weight:700;background:var(--red);color:#fff;padding:1px 8px;border-radius:99px;margin-top:4px;}
.bwip{display:inline-block;font-size:10.5px;font-weight:700;background:var(--amber-soft);color:var(--amber);padding:1px 8px;border-radius:99px;margin:4px 3px 0;}
.hbar{display:grid;grid-template-columns:110px 1fr 60px;gap:10px;align-items:center;margin:6px 0;font-size:13px;}
.hbar .tr{height:12px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;}
.hbar .tr i{display:block;height:100%;background:var(--blue);}
.hbar .tr i.warn{background:var(--amber);}
td.num.up{color:var(--red);font-weight:700;}
tr.bncand{background:var(--red-soft);}
/* 帳票の種類のカード（#48） */
.doccards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:18px;}
.doccard{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface-2);}
.doccard .dn{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;}
.doccard .dv{font-family:"Roboto Mono",monospace;font-weight:700;font-size:20px;}
.doccard .dm{font-size:11.5px;color:var(--ink-3);}
.fd-docs{margin-top:10px;display:grid;gap:8px;}
/* 帳票の滞留の横棒（#49） */
.hbars{display:flex;flex-direction:column;gap:10px;}
.hb{display:grid;grid-template-columns:200px minmax(0,1fr) 130px;gap:10px;align-items:center;font-size:12.5px;}
.hb .tr{height:12px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;}
.hb .tr i{display:block;height:100%;background:var(--blue);border-radius:99px;}
.hb .v{font-family:"Roboto Mono",monospace;font-weight:700;text-align:right;}
/* hidden を付けたボタンは、確かに隠す（.b の display に負けないように） */
.b[hidden]{display:none !important;}
/* リアルタイムの現在地と滞留アラート（#54） */
.ncase.stuck{box-shadow:0 0 0 2px var(--red);animation:stuckpulse 1.6s ease-in-out infinite;}
@keyframes stuckpulse{50%{box-shadow:0 0 0 4px var(--red-soft);}}
.nowalerts{margin:10px 0 0;padding:10px 14px;border:1px solid var(--red);background:var(--red-soft);border-radius:10px;font-size:13px;}
.nowalerts .nal{margin-top:4px;}
.rtbadge{position:fixed;left:12px;bottom:12px;z-index:50;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px;border:1px solid var(--line);background:var(--surface);}
.rtbadge.on{color:var(--green);border-color:var(--green);}
.rtbadge.off{color:var(--amber);border-color:var(--amber);}
.rtbadge[hidden]{display:none;}
/* hidden を付けたものは、CSS の display に負けずに必ず隠す */
[hidden]{display:none !important;}