/* v21 design (Paper「v21 再設計（A-3）」): a black frame, white panels, orange for 選択中・オン and the main actions.
   PC (981px and up): header; conditions on the left (積荷・置き場所・積み方) or 積荷 as a table under the 3D; on the right the
   summary band, the result line, the 3D view with its bar. Phones: header, one-line summary and the 3D stay put; the inputs
   scroll between them and the tab bar. Light only. */
:root{
  --ink:#1C1C1A;          /* frame: bands, lines that matter */
  --or:#FF5F1F;           /* 選択中・オン, main actions */
  --wh:#FFFFFF;
  --con:#E6E5E1;          /* concrete */
  --pap:#F2F1ED;          /* thin ground */
  --line:#D6D5D0;
  --m1:#6E6D68;           /* secondary text */
  --m2:#4A4945;
  --m3:#8A8983;
  --warn:#C3243B;
  --pal:#FFE7DB;          /* pallet settings */
  --pal-line:#F5C9B3;
  --sel:#FFF4EE;          /* a highlighted row */
  --best:#C2410C;         /* 本数が最も少ない */
  --scene:#DDE3DA;        /* 3D background (read by the script) */
  --dk-line:#3A3934;      /* separators on black */
  --dk-mut:#A3A299;       /* muted text on black */
  --faint:#B9B8B2;
  --off:#C9C8C2;
  --aisle:#E3C24A;
  --txt:#000000;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono","Zen Kaku Gothic New",ui-monospace,Menlo,monospace;
  --f-num:"Archivo","Zen Kaku Gothic New",system-ui,sans-serif;
  --sh:6px 6px 0 rgba(28,28,26,.18);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--wh);color:var(--txt);font-family:var(--f-body);font-size:13px;line-height:16px;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{background:none;border:0;border-radius:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--or);outline-offset:-2px}
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}
.grow{flex:1 1 0;min-width:0}
/* ▼ / ▲ of the buttons that open something */
.tri{display:inline-block;flex:0 0 auto;width:0;height:0;margin-left:6px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;vertical-align:1px}
.tri.up{border-top:0;border-bottom:5px solid currentColor}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.sp-only{display:none}

/* checkbox (every one: 天地無用, 向き, 別サイズの上に積まない; 寸法 uses .ckv): off = a white square with a 2px black border,
   on = solid orange (選択中・オン) with a white check. input.ck.ck outranks the table's input rules */
input.ck.ck{-webkit-appearance:none;appearance:none;flex:0 0 auto;display:inline-block;width:16px;height:16px;margin:0;padding:0;border:2px solid var(--ink);border-radius:0;background:var(--wh);box-shadow:none;cursor:pointer;vertical-align:middle}
input.ck.ck:checked{border-color:var(--or);background:var(--or) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.7 5.3 4.1 7.6 8.4 2.7' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center/12px 12px no-repeat}
input.ck.ck:focus{outline:none}
input.ck.ck:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tb input.ck.ck:focus-visible{outline-color:var(--or)}

.app{height:100%;display:flex;flex-direction:column}

/* ---------- header ---------- */
.top{flex:0 0 auto;height:48px;display:flex;align-items:center;background:var(--ink);padding-left:20px;color:#F2F1ED}
.logo{flex:0 0 auto;width:24px;height:24px;display:block}
.top h1{display:flex;align-items:baseline;gap:10px;padding-left:10px;font-size:15px;font-weight:700;line-height:18px;color:#F2F1ED;white-space:nowrap}
/* the name, sekisai, then what it is, 積載シミュレーター, smaller and muted on the same baseline */
.b-name{flex:0 0 auto;font-size:18px;line-height:22px;letter-spacing:.02em}
.b-sub{font-size:12px;font-weight:500;line-height:16px;color:var(--dk-mut)}
/* the narrowest phones (under 340px): the name only, so 共有 and ⋯ keep their room */
@media (max-width:339px){.b-sub{display:none}}
.top-actions{display:flex;align-items:stretch;height:100%}
.lay{display:flex;align-items:center;gap:10px;height:48px;padding-inline:16px;border-left:1px solid var(--dk-line)}
.lay-l{font-size:12px;color:var(--dk-mut)}
.lay-seg{display:flex;border:1px solid var(--m1)}
.lay-seg button{display:flex;align-items:center;gap:6px;height:26px;padding-inline:10px;font-size:12px;line-height:16px;color:#F2F1ED}
.lay-seg button svg{flex:0 0 auto;display:block}
.lay-seg button[aria-pressed="true"]{background:var(--or);color:var(--ink);font-weight:700}
.tbtn{display:flex;align-items:center;height:48px;padding-inline:18px;border-left:1px solid var(--dk-line);font-size:13px;line-height:16px;color:#F2F1ED;white-space:nowrap}
.tbtn:hover{background:#2B2B29}
.tbtn.primary{background:var(--or);color:var(--ink);font-weight:700;padding-inline:20px;border-left:0}
.tbtn.primary:hover{background:#FF7440}
.tbtn.more{display:none}

/* ---------- body ---------- */
.body{flex:1 1 0;min-height:0;display:flex}
.cond{flex:0 0 400px;width:400px;min-height:0;display:flex;flex-direction:column;background:var(--wh);border-right:2px solid var(--ink);overflow-y:auto;overscroll-behavior:contain}
.app[data-layout="bottom"] .cond{flex-basis:330px;width:330px}
.work{flex:1 1 0;min-width:0;display:flex;flex-direction:column;position:relative}
.grow-v{flex:1 0 auto}

/* section heads: black bands with a toggle at the right */
.sec{flex:0 0 auto;display:flex;flex-direction:column}
.sec-head{flex:0 0 auto;display:flex;align-items:stretch;height:34px;background:var(--ink);color:#F2F1ED}
.sec-t{flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:12px;padding-left:16px;font-size:13px;font-weight:700;line-height:16px;color:#F2F1ED;white-space:nowrap}
#secCargo .sec-t{flex:1 1 0}
.sec-sum{flex:1 1 0;min-width:0;padding:0 14px 0 12px;font-size:12px;font-weight:400;line-height:34px;color:var(--dk-mut);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec-t .sec-sum{padding:0;text-align:left;line-height:16px}
.sec-info{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:flex-end;padding:0 14px 0 12px;font-size:12px;line-height:16px;color:var(--dk-mut);white-space:nowrap}
.sec-info:hover,.sec-info[aria-expanded="true"]{color:#F2F1ED}
.sec-b{display:flex;align-items:center;padding-inline:12px;border-left:1px solid var(--dk-line);font-size:12px;line-height:16px;color:#F2F1ED;white-space:nowrap}
.sec-b:hover{background:#2B2B29}
.sec-b[aria-expanded="true"]{background:var(--pap);color:var(--ink);font-weight:700}
.sec-tog{flex:0 0 34px;width:34px;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--dk-line);font-size:16px;font-weight:700;line-height:20px;color:#F2F1ED}
.sec-tog:hover{background:#2B2B29}
.sec[data-open="false"] .sec-body,.sec[data-open="false"] .sec-info{display:none}
.sec[data-open="true"] > .sec-head > .sec-sum,.sec[data-open="true"] .sec-t .sec-sum{display:none}
.app[data-layout="bottom"] .sec-tog{display:none}
.app[data-layout="bottom"] #secCargo{display:none}
.app[data-layout="bottom"] .sec .sec-body,.app[data-layout="bottom"] .sec .sec-info{display:flex}
.app[data-layout="bottom"] .sec > .sec-head > .sec-sum{display:none}
.sec-body{display:flex;flex-direction:column}
.m-actions{display:none}

.hint{background:var(--pap);border-bottom:1px solid var(--line);padding:9px 16px 10px;font-size:12px;line-height:18px;color:var(--m2)}
.hint p + p{margin-top:4px}

/* 積荷: one row per box size */
.rows{list-style:none;margin:0;padding:0}
.box-row{display:flex;align-items:center;gap:12px;min-height:57px;padding:10px 16px;border-bottom:1px solid var(--line)}
.box-sw{flex:0 0 auto;width:14px;height:14px}
.box-info{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left}
.box-name{font-size:15px;font-weight:700;line-height:18px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.box-meta{font-family:var(--f-mono);font-size:12px;line-height:16px;color:var(--m1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.box-info:hover .box-name{text-decoration:underline;text-underline-offset:3px}
.qty{flex:0 0 76px;width:76px;height:36px;border:0;border-bottom:2px solid var(--ink);border-radius:0;background:var(--pap);padding:0 10px;text-align:right;font-family:var(--f-num);font-size:16px;font-weight:700;line-height:20px;color:var(--txt)}
.qty::placeholder{font-family:var(--f-body);font-size:12px;font-weight:400;color:var(--m3)}
.qty:focus{outline:none;border-bottom-color:var(--or);background:var(--sel)}
.box-x{flex:0 0 16px;width:16px;font-size:15px;line-height:18px;color:var(--m1);text-align:center}
/* a row's weight (1箱 kg), typed per row like the quantity; 「登録 18kg」 under it when it is not the registered box's */
.kgw{position:relative;flex:0 0 62px;width:62px;display:flex}
.kgw input{width:100%;height:36px;border:0;border-bottom:2px solid var(--ink);border-radius:0;background:var(--pap);padding:0 21px 0 4px;text-align:right;font-family:var(--f-num);font-size:16px;font-weight:600;line-height:20px;color:var(--txt)}
.kgw input::placeholder{font-family:var(--f-body);font-size:12px;font-weight:400;color:var(--m3)}
.kgw input:focus{outline:none;border-bottom-color:var(--or);background:var(--sel)}
.kgw input[aria-invalid="true"]{border-bottom-color:var(--warn);color:var(--warn)}
.kgu{position:absolute;right:5px;top:0;height:36px;display:flex;align-items:center;font-size:11px;line-height:14px;color:var(--m1);pointer-events:none}
.kg-reg{position:absolute;right:0;top:100%;margin-top:2px;font-size:10px;line-height:12px;color:var(--m1);white-space:nowrap;pointer-events:none}
.kg-reg:empty{display:none}
.box-row.kgdiff{padding-bottom:16px}
.box-x:hover{color:var(--warn)}
.box-x.ghost{visibility:hidden}
/* a row's ↑ / ↓ (2 rows or more): two buttons over each other at its left, the row's full height (the row's left
   padding goes to them); dimmed at the top / bottom. The moved row lights up for a moment */
.box-ord{flex:0 0 32px;align-self:stretch;display:flex;flex-direction:column;margin:-10px -4px -10px -12px}
.box-row.kgdiff .box-ord{margin-bottom:-16px}
.rows.one .box-ord{display:none}
.ord-b{flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;color:var(--m1);touch-action:manipulation}
.ord-b svg{display:block}
.ord-b:hover{background:var(--pap);color:var(--ink)}
.ord-b[aria-disabled="true"]{background:none;color:var(--off);cursor:default}
.box-row.moved,.ct-row.moved{animation:rowMoved 1.2s ease-out}
@keyframes rowMoved{0%,35%{background:var(--sel)}100%{background:rgba(255,244,238,0)}}
/* ---------- 積荷: one way to add — 「＋ 段ボールを追加 ▼」 opens the list of boxes (search, registered boxes, 新しい箱を登録) ---------- */
.rows-empty{padding:18px 16px 4px;font-size:14px;font-weight:700;line-height:20px;color:var(--txt)}
.add-area{display:flex;flex-direction:column;border-bottom:1px solid var(--line)}
.add-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 16px 0}
.add-b{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;padding-inline:16px;background:var(--or);font-size:14px;font-weight:700;line-height:18px;color:var(--ink);white-space:nowrap}
.add-b:hover:not(:disabled){background:#FF7440}
.add-b[aria-expanded="true"]{background:var(--ink);color:var(--wh)}
.add-b:disabled{background:var(--con);color:var(--m3);cursor:default}
.full-note{flex:1 1 100%;font-size:12px;font-weight:700;line-height:16px;color:var(--m2)}
.howto{display:flex;align-items:flex-start;gap:6px;padding:8px 16px 12px;font-size:12px;line-height:18px;color:var(--m2)}
.howto > span{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.howto .hx{white-space:nowrap}
.howto .sep{display:none}
.howto b,.ct-hint b{font-weight:700;color:var(--txt)}
.add-area .hint{border-top:1px solid var(--line);border-bottom:0}
/* 積む順番 (2 rows or more): 大きい箱から ／ リストの順, what it means under it, and a note when a 入るだけ row is above a
   row with a quantity. When a move turns it to リストの順 by itself it lights up for a moment */
.ord{display:flex;flex-direction:column;gap:6px;padding:12px 16px 14px;border-top:1px solid var(--line)}
.ord-r{display:flex;align-items:center;gap:12px}
.ord-k{flex:0 0 auto;font-size:13px;font-weight:700;line-height:16px;color:var(--txt);white-space:nowrap}
.ord-seg{flex:1 1 0;min-width:0;max-width:300px;display:flex;height:32px;border:1px solid var(--ink);background:var(--wh)}
.ord-seg button{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;padding-inline:6px;font-size:13px;line-height:16px;color:var(--m1);white-space:nowrap}
.ord-seg button + button{border-left:1px solid var(--ink)}
.ord-seg button:hover{color:var(--ink)}
.ord-seg button[aria-checked="true"]{background:var(--or);color:var(--ink);font-weight:700}
.ord-h{font-size:12px;line-height:17px;color:var(--m1)}
/* the hint takes the height of the longer of the two: the other one (#ordHintS) is in the same cell, unseen, so
   switching 積む順番 never moves what is under it (narrow phones: both take two lines) */
.ord-hw{display:grid}
.ord-hw > .ord-h{grid-area:1/1;min-width:0}
.ord-hs{visibility:hidden}
/* a move turned it to リストの順: said in the hint's place for a moment, then the hint fades back in */
.ord-h.said{font-weight:700;color:var(--txt)}
.ord-h.said::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;background:var(--or);vertical-align:0}
.ord-h.back{animation:ordBack .5s ease-out}
@keyframes ordBack{from{opacity:0}to{opacity:1}}
.ord-n{font-size:12px;line-height:17px;color:var(--m2)}
.ord.flash .ord-seg{animation:ordFlash 1.6s ease-out}
@keyframes ordFlash{0%,45%{box-shadow:0 0 0 3px var(--or)}100%{box-shadow:0 0 0 3px rgba(255,95,31,0)}}
.i-b{flex:0 0 auto;width:22px;height:22px;margin-right:-6px;font-size:13px;line-height:16px;color:var(--m3)}
.i-b:hover,.i-b[aria-expanded="true"]{color:var(--ink)}

/* two-column tables (項目名｜値) */
.prop{flex:0 0 auto;display:flex;height:38px;border-bottom:1px solid var(--line)}
.prop.tall{height:46px}
.pk{flex:0 0 108px;width:108px;display:flex;flex-direction:column;justify-content:center;padding-left:16px;font-size:13px;line-height:16px;color:var(--m2);white-space:nowrap}
.pk small{display:block;font-size:11px;line-height:15px;color:var(--m3)}
.pk:has(small){line-height:15px}
.pv{flex:1 1 0;min-width:0;display:flex;align-items:stretch;border-left:1px solid var(--line);position:relative}
/* an input cell: white with the 2px black line under it (inputs are the cells with a line) */
.pv input:not(.ck),.pv select{display:block;min-width:0;height:100%;border:0;border-radius:0;background:var(--wh);box-shadow:inset 0 -2px 0 var(--ink);color:var(--txt)}
.pv input:not(.ck):focus,.pv select:focus{outline:none;background:var(--sel);box-shadow:inset 0 -2px 0 var(--or)}
.pv input[type="number"]{font-family:var(--f-mono);font-size:14px;line-height:18px;font-variant-numeric:tabular-nums;text-align:right}
.pv input::placeholder{font-family:var(--f-body);font-size:13px;color:var(--m3)}
.pv.in{cursor:text;box-shadow:inset 0 -2px 0 var(--ink)}
.pv.in input{flex:1 1 0;width:0;box-shadow:none;padding:0 0 0 12px;background:transparent}
.pv.in .u{flex:0 0 auto;width:22px;margin:0 12px 0 6px;align-self:center;font-size:12px;line-height:16px;color:var(--m1)}
.pv.in input:placeholder-shown + .u{color:var(--m3)}
.pv.in:focus-within{background:var(--sel);box-shadow:inset 0 -2px 0 var(--or)}
.pv.in input:focus{background:transparent;box-shadow:none}
.pv.tri3 input{flex:1 1 0;width:0;padding:0 10px}
.pv.tri3 input + input{border-left:1px solid var(--con)}
.pv.sel select{flex:1 1 0;width:100%;-webkit-appearance:none;appearance:none;padding:0 30px 0 12px;font-family:var(--f-body);font-size:14px;font-weight:700;line-height:18px;cursor:pointer}
.pv.sel.reg select{font-weight:400}
.pv.sel::after{content:"";position:absolute;right:12px;top:50%;margin-top:-3px;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:6px solid var(--m1);pointer-events:none}
.pv.mg4 label{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:1px;padding:0 8px;cursor:text;box-shadow:inset 0 -2px 0 var(--ink)}
.pv.mg4 label + label{border-left:1px solid var(--con)}
.pv.mg4 label > span{font-size:10px;line-height:12px;color:var(--m3);white-space:nowrap}
.pv.mg4 input{width:100%;height:18px;padding:0;box-shadow:none;background:transparent}
.pv.mg4 label:focus-within{background:var(--sel);box-shadow:inset 0 -2px 0 var(--or)}
.pv.mg4 input:focus{background:transparent;box-shadow:none}
.seg2 button{flex:1 1 0;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:16px;color:var(--m1)}
.seg2 button:hover{color:var(--ink)}
.seg2 button[aria-checked="true"]{background:var(--or);color:var(--ink);font-weight:700}
.pv.ckc{align-items:center;gap:8px;padding-inline:12px;font-size:13px;line-height:16px;color:var(--txt);cursor:pointer}
label.pk{cursor:pointer}
/* the state in words at the right of the cell, from :checked (so it follows clicks, Space, saves and links at once) */
.ck-st{margin-left:auto;font-size:12px;line-height:16px;color:var(--m1);white-space:nowrap}
.ck:checked ~ .ck-st::after{content:"オン";font-weight:700;color:var(--txt)}
.ck:not(:checked) ~ .ck-st::after{content:"オフ"}
.pv.tri3 input[hidden] + input{border-left:0}
.pal-sub{flex:0 0 auto;display:flex;align-items:center;height:28px;background:var(--pal);border-bottom:1px solid var(--pal-line);border-left:4px solid var(--or);padding:0 16px 0 12px;font-size:12px;font-weight:700;line-height:16px;color:var(--m2)}
.pal-rows{display:flex;flex-direction:column;border-left:4px solid var(--or)}
/* a pallet as the 置き場所: 運賃単価 and 容積換算 (one row), and the pallet on show worked out under it */
.pv.mg4 input[aria-invalid="true"]{color:var(--warn)}
.pv.mg4 label:has(input[aria-invalid="true"]){box-shadow:inset 0 -2px 0 var(--warn)}
#vwRow.tall{height:38px}
.vw{flex:0 0 auto;padding:4px 16px 5px;background:var(--pap);border-bottom:1px solid var(--line);font-size:12px;line-height:16px;color:var(--txt)}
.vw:empty{display:none}
.vw-c{font-size:11px;line-height:15px;color:var(--m1)}
.vw-l{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 10px;margin:1px 0 0}
.vw-l dt{color:var(--m2);white-space:nowrap}
.vw-l dd{min-width:0;margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.vw-l b{font-weight:700;white-space:nowrap}
.vw-l small{display:inline-block;margin-left:8px;font-size:11px;color:var(--m1)}
.vw-l dd.off{color:var(--m3)}
.vw-l small.uw{color:var(--warn);font-weight:700;cursor:help}
.vw-l dd:last-of-type b{font-size:14px}
/* several pallets: the total of each pallet's 運賃重量 and 運賃 */
.vw-t{overflow-wrap:anywhere}
.vw-t > span{margin-right:4px;font-weight:700;color:var(--ink)}
.vw-t b{font-weight:700;white-space:nowrap}
/* phones on their side, and wherever 置き場所 has no room for the block (fitFreight: .one): one line (運賃, or 運賃重量
   without a 単価; the total when there are several pallets) that opens 詳しく */
#vwBox.one > .vw-c,#vwBox.one > .vw-l,#vwBox.one > .vw-t{display:none}
#vwBox.one > .vw-s{display:flex}
#vwBox.one{padding-top:2px;padding-bottom:2px;line-height:15px}
.vw-s{display:none;width:100%;align-items:center;gap:10px;font-size:12px;line-height:inherit;text-align:left;color:var(--txt)}
.vw-sv{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vw-sv > span{margin-right:2px;font-weight:700;color:var(--m2)}
.vw-more{flex:0 0 auto;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* the same in 詳しく: phones only (on PC it is in 置き場所, in view) */
.vw-msg{display:none}
/* PC, when 置き場所 shows the one line: the block in 詳しく, under the sentence */
.app.vw-one .msg-detail .vw-msg:not(:empty){display:block;margin-top:6px;padding:5px 10px 6px;border:1px solid var(--line);background:var(--pap)}
.disc{flex:0 0 auto;border-top:1px solid var(--line);padding:12px 16px;font-size:12px;line-height:18px;color:var(--m1)}
/* PC: the left column where it would scroll even with the 運賃 block as one line (fitCond, ui/freight-view.ts: .tight).
   The same text with less room around it: the rows, the add button and the lines under it, 積む順番, the cells of
   置き場所 and 積み方, the note at the end (about 80px with three rows; each row 8px). More rows than that still scroll */
@media (min-width:981px){
  .cond.tight .box-row{min-height:49px;padding-block:6px}
  .cond.tight .box-ord{margin-block:-6px}
  .cond.tight .box-row.kgdiff{padding-bottom:16px}
  .cond.tight .box-row.kgdiff .box-ord{margin-bottom:-16px}
  .cond.tight .add-row{padding-top:8px}
  .cond.tight .add-b{height:36px}
  .cond.tight .howto{padding-block:6px 8px}
  .cond.tight .ord{gap:4px;padding-block:8px 10px}
  .cond.tight .prop{height:34px}
  .cond.tight .prop.tall{height:42px}
  .cond.tight #vwRow.tall{height:34px}
  .cond.tight .disc{padding-block:8px}
}
.mtitle{display:none}

/* ---------- summary band ---------- */
.sum{flex:0 0 auto;display:flex;height:64px;background:var(--wh);border-bottom:2px solid var(--ink)}
.sc{flex:0 0 150px;width:150px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding-inline:16px;border-right:1px solid var(--line)}
.sc.need{flex-basis:330px;width:330px;flex-direction:row;align-items:center;gap:12px;padding-right:12px}
.sc-in{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
.sc.m{flex:1 1 0;width:auto}
.sc:last-child{border-right:0}
.sl{display:flex;align-items:center;gap:6px;font-size:12px;line-height:16px;color:var(--m1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl .vt{flex:0 0 auto;font-size:10px;font-weight:700;line-height:14px;padding:0 4px;background:var(--warn);color:var(--wh)}
.sv{font-family:var(--f-num);font-size:20px;font-weight:700;line-height:26px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.sv.tight{font-size:16px;letter-spacing:-.01em}
.meter{flex:0 0 auto;display:flex;height:6px;background:var(--line);overflow:hidden}
.meter i{display:block;width:0;background:var(--ink)}
.meter.or i{background:var(--or)}
.meter i[data-hot="true"]{background:var(--warn)}
.cmp-btn{flex:0 0 auto;display:flex;align-items:center;gap:6px;height:32px;padding-inline:10px;border:2px solid var(--ink);font-size:12px;font-weight:700;line-height:16px;color:var(--txt);white-space:nowrap}
.cmp-btn:hover{background:var(--pap)}
.cmp-btn[aria-expanded="true"]{background:var(--ink);color:var(--wh)}
.sum-sp{display:none}

/* ---------- result line: limit tag, arrangement, errors (details open in place) ---------- */
.msg{flex:0 0 auto;display:flex;flex-direction:column;background:var(--pap);border-bottom:1px solid var(--line)}
.msg-line{display:flex;align-items:center;gap:10px;min-height:32px;padding:7px 16px}
.tag{flex:0 0 auto;padding:0 6px;border:1px solid var(--ink);background:var(--wh);font-size:11px;font-weight:700;line-height:16px;color:var(--ink);white-space:nowrap}
.tag:empty{display:none}
.tag[data-k="weight"]{border-color:var(--warn);color:var(--warn)}
.tag[data-k="stack"]{border-color:var(--m2);color:var(--m2)}
.tag[data-k="over"],.tag[data-k="err"]{border-color:var(--warn);background:var(--warn);color:var(--wh)}
.msg-t{flex:1 1 0;min-width:0;font-size:12px;line-height:18px;color:var(--m2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-more{flex:0 0 auto;font-size:12px;font-weight:700;line-height:16px;color:var(--ink);white-space:nowrap}
.msg-more:hover{text-decoration:underline;text-underline-offset:3px}
.msg-err{padding:6px 16px 7px 12px;border-top:1px solid var(--line);border-left:4px solid var(--warn);background:var(--wh);font-size:12px;font-weight:700;line-height:18px;color:var(--warn)}
.msg-err p + p{margin-top:2px}
.msg-detail{max-height:40vh;overflow:auto;padding:0 16px 10px;font-size:12px;line-height:18px;color:var(--m2)}
.msg-detail p + p,.msg-detail p + table{margin-top:6px}
.msg.open .msg-t{white-space:normal}
.msg-sh{display:none}
table.mix{border-collapse:collapse;font-size:12px;line-height:16px;color:var(--txt);background:var(--wh);min-width:min(100%,520px)}
.mix th{text-align:left;font-weight:400;font-size:11px;color:var(--m1);padding:4px 8px;border-bottom:1px solid var(--ink);white-space:nowrap}
.mix td{padding:5px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.mix .num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.mix td:first-child,.mix th:first-child{width:22px;padding-right:0}
.sw{display:inline-block;width:10px;height:10px;vertical-align:-1px;flex:0 0 auto}

/* ---------- 3D view and its bar ---------- */
.viewport{flex:1 1 0;min-height:0;display:flex;flex-direction:column;position:relative}
.vbar{flex:0 0 auto;display:flex;height:38px;background:var(--wh);border-bottom:1px solid var(--ink);position:relative;z-index:4}
.hs{flex:0 0 auto;display:flex}
.hs-a{flex:0 0 36px;width:36px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);font-size:16px;line-height:20px;color:var(--ink)}
.hs-a:hover:not(:disabled){background:var(--pap)}
.hs-a:disabled{color:var(--off)}
/* which hold: a fixed width sized for the longest case (「500か所目 / 1,000か所 10,000箱」: 500 holds listed at most, and
   1,000 holds of a 5-digit count is the most 1e7 boxes give), so it does not jump when you
   step through. The count never shrinks while it has 5 digits or fewer: the hold part gives way first (「/ 143か所」, then
   the hold number), and only a count longer than that is cut (…, the full text in the title). */
.hs-mid{flex:0 0 252px;width:252px;display:flex;align-items:center;gap:8px;padding-inline:12px;background:var(--ink);color:var(--wh);overflow:hidden;white-space:nowrap;text-align:left}
.hs-n{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:700;line-height:16px;font-variant-numeric:tabular-nums}
.hs-of{flex:0 1000 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-family:var(--f-mono);font-size:12px;line-height:16px;color:var(--dk-mut)}
.hs-of .hs-sh{display:none}
.hs-c{flex:0 0 auto;max-width:96px;overflow:hidden;text-overflow:ellipsis;font-family:var(--f-mono);font-size:13px;line-height:16px;color:var(--or);font-variant-numeric:tabular-nums}
.hs-c.v{color:#FF8A8F}
.hs-mid .hs-dd{margin-left:auto;color:#F2F1ED}
.hs-mid[aria-expanded="true"] .hs-dd{transform:rotate(180deg)}
.hs-list{position:absolute;left:36px;top:37px;z-index:6;width:330px;display:flex;flex-direction:column;background:var(--wh);border:2px solid var(--ink);box-shadow:var(--sh)}
.hs-items{max-height:min(360px,60vh);overflow-y:auto;overscroll-behavior:contain}
.hs-item{flex:0 0 auto;display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 12px;border-bottom:1px solid var(--con);font-size:13px;line-height:16px;text-align:left;white-space:nowrap}
.hs-item:hover{background:var(--pap)}
.hs-item[aria-selected="true"]{background:var(--sel);box-shadow:inset 4px 0 0 var(--or);font-weight:700}
.hs-item b{flex:0 0 auto;min-width:64px}
.hs-item .same{flex:0 0 auto;font-size:10px;font-weight:700;line-height:14px;padding:0 4px;border:1px solid var(--m3);color:var(--m2)}
.hs-item .c{flex:1 1 0;font-family:var(--f-mono);font-size:12px;font-weight:400;color:var(--txt)}
.hs-item .u{font-family:var(--f-mono);font-size:12px;font-weight:400;color:var(--m1)}
.hs-item .vt{font-size:10px;font-weight:700;line-height:14px;padding:0 4px;background:var(--warn);color:var(--wh)}
.hs-more{padding:8px 12px;font-size:11px;line-height:16px;color:var(--m1)}
.vseg{display:flex}
.vseg button,.vb{display:flex;align-items:center;gap:6px;padding-inline:12px;border-left:1px solid var(--line);font-size:13px;line-height:16px;color:var(--txt);white-space:nowrap}
.vseg button:hover,.vb:hover{background:var(--pap)}
.vseg button[aria-pressed="true"]{background:var(--con);font-weight:700}
#planBtn[aria-expanded="true"]{background:var(--or);font-weight:700}
.vb.dimt{border-left-color:var(--ink)}
.ckv{flex:0 0 auto;width:16px;height:16px;border:2px solid var(--ink);background:var(--wh)}
[aria-pressed="true"] > .ckv{border-color:var(--or);background:var(--or) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.7 5.3 4.1 7.6 8.4 2.7' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center/12px 12px no-repeat}
.scene{flex:1 1 0;min-height:0;position:relative;background:var(--scene);overflow:hidden}
.scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.dim{position:absolute;left:0;top:0;padding:1px 6px;background:var(--wh);border:1px solid var(--line);font-family:var(--f-mono);font-size:11.5px;line-height:16px;color:var(--ink);white-space:nowrap}
.hold-tag{pointer-events:auto;cursor:pointer;font-family:var(--f-body);font-size:12px;font-weight:700;border-color:var(--ink)}
.hold-tag.is-v{color:var(--warn);border-color:var(--warn)}
.hold-tag.is-cur{background:var(--or);color:var(--ink);border-color:var(--ink)}
.hold-tag.is-v.is-cur{background:var(--warn);color:var(--wh);border-color:var(--warn)}
.layer{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--wh);border:2px solid var(--ink)}
.layer label{font-size:13px;font-weight:700;line-height:16px;color:var(--ink);white-space:nowrap}
.layer input[type="range"]{-webkit-appearance:none;appearance:none;width:180px;height:18px;margin:0;background:transparent;cursor:pointer}
.layer input[type="range"]::-webkit-slider-runnable-track{height:4px;background:var(--ink)}
.layer input[type="range"]::-moz-range-track{height:4px;background:var(--ink)}
.layer input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:18px;margin-top:-7px;background:var(--ink);border:0;border-radius:0}
.layer input[type="range"]::-moz-range-thumb{width:12px;height:18px;background:var(--ink);border:0;border-radius:0}
.layer input[type="range"]:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.layer input[type="range"]:disabled{opacity:.35;cursor:default}
.layer output{flex:0 0 56px;width:56px;text-align:right;font-family:var(--f-mono);font-size:13px;line-height:16px;color:var(--ink);white-space:nowrap}
.notes{position:absolute;right:12px;bottom:12px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:calc(100% - 420px);pointer-events:none}
.note{display:block;padding:4px 10px;background:var(--wh);border:2px solid var(--ink);font-size:12px;font-weight:700;line-height:16px;color:var(--ink);text-align:left;pointer-events:auto}
.note.warn{border-color:var(--warn);color:var(--warn)}
.msg-chip{display:none}
/* the 3D view could not start, stopped, or could not be built (or three.js did not load): said in the middle of the 3D area */
.vp-msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;width:min(440px,calc(100% - 32px));padding:12px 16px;background:var(--wh);border:2px solid var(--ink);box-shadow:var(--sh);font-size:13px;line-height:20px;color:var(--txt);text-align:center}
/* the view pad (ui/view-pad.ts): ← → ↑ ↓ ◎ and ＋ −, light over the cargo in the bottom-right corner. Only for a mouse on
   the PC layout (phones and tablets use two fingers), while the 3D view draws (.off3d: state.ts) and has room for it
   (data-pad: m, or s on a short 3D view); the notes then stand above it, and 配置図 stops 16 px above it (its body
   scrolls; view-pad.ts PLAN_ROOM) or, on a 3D view too short for that (data-pad-tight), the pad gives way while 配置図
   is open */
.vpad{position:absolute;right:12px;bottom:12px;z-index:2;display:none;align-items:flex-end;gap:4px;-webkit-user-select:none;user-select:none}
.vp-mv{display:grid;grid-template-columns:repeat(3,26px);grid-template-rows:repeat(3,26px)}
.vp-z{display:flex;flex-direction:column}
.vp-mv,.vp-z{background:rgba(255,255,255,.55);border:1px solid rgba(28,28,26,.3)}
.vpad button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;color:var(--m2)}
.vpad button:hover{background:var(--wh);color:var(--ink)}
.vpad button:active{background:var(--con);color:var(--ink)}
.vp-z button + button{border-top:1px solid rgba(28,28,26,.18)}
.vp-u{grid-area:1/2}.vp-l{grid-area:2/1}.vp-c{grid-area:2/2}.vp-r{grid-area:2/3}.vp-d{grid-area:3/2}
.vpad svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
.vpad .dot{fill:currentColor;stroke:none}
.scene[data-pad="s"] .vp-mv{grid-template-columns:repeat(3,22px);grid-template-rows:repeat(3,22px)}
.scene[data-pad="s"] .vpad button{width:22px;height:22px}
.scene[data-pad="s"] .vpad svg{width:12px;height:12px}
/* the tour's card stands over the same corner */
.app.touring #viewPad{visibility:hidden}
@media (hover:hover) and (pointer:fine) and (min-width:981px){
  .scene[data-pad]:not(.off3d) > .vpad{display:flex}
  .scene[data-pad]:not(.off3d) > .notes{bottom:100px}
  .scene[data-pad="s"]:not(.off3d) > .notes{bottom:88px}
  .scene[data-pad]:not(.off3d):not([data-pad-tight]) > .plan{max-height:calc(100% - 124px)}
  .scene[data-pad-tight]:has(> .plan:not([hidden])) > .vpad{display:none}
}

/* floor plan: a panel over the 3D, open until closed */
.plan{position:absolute;right:16px;top:16px;z-index:3;width:460px;max-width:calc(100% - 32px);max-height:calc(100% - 32px);display:flex;flex-direction:column;background:var(--wh);border:2px solid var(--ink);box-shadow:var(--sh)}
.plan-h{flex:0 0 auto;display:flex;height:36px;background:var(--ink)}
.plan-h h2{flex:1 1 0;min-width:0;display:flex;align-items:center;padding-left:14px;font-size:13px;font-weight:700;line-height:16px;color:#F2F1ED;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.px{flex:0 0 40px;width:40px;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--dk-line);font-size:16px;line-height:20px;color:#F2F1ED}
.px:hover{background:#2B2B29}
.plan-b{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:12px 14px 14px}
.plan-note{font-size:12px;line-height:16px;color:var(--m1)}
.plans{display:flex;flex-direction:column;gap:12px}
.pl1{display:flex;flex-direction:column;gap:8px}
.pl1 svg{display:block;width:100%;height:auto;max-height:170px}
.pl1.sub svg{max-height:120px;max-width:200px}
.pl1 p{font-size:12px;line-height:16px;color:var(--txt)}
.legend-line{display:flex;flex-wrap:wrap;gap:4px 16px}
.legend-line > span{display:inline-flex;align-items:center;gap:6px}
.legend-line .vtag{color:var(--warn);font-weight:700}
.pl-floor{fill:var(--pap);stroke:var(--m1)}
.pl-aisle{fill:var(--aisle);opacity:.7}
.pl-hatch{fill:var(--m3);opacity:.6}
.pl-clear{stroke:var(--m3)}
.pl-door{fill:var(--ink)}
.pl-box{stroke:rgba(52,36,18,.55)}
.pl-txt{fill:var(--m1);font-family:var(--f-body)}

/* comparison: drops from the summary band */
.cmp{position:absolute;left:150px;top:64px;z-index:8;width:440px;max-width:calc(100% - 160px);max-height:calc(100% - 76px);overflow-y:auto;background:var(--wh);border:2px solid var(--ink);box-shadow:var(--sh)}
.grab{display:none}
.cmp-h{display:flex;align-items:center;height:38px;background:var(--ink);padding-left:14px;position:sticky;top:0;z-index:1}
.cmp-ht{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cmp-h h2{font-size:13px;font-weight:700;line-height:16px;color:#F2F1ED;white-space:nowrap}
.cmp-sub{font-size:12px;line-height:16px;color:var(--dk-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-x{flex:0 0 auto;height:38px;padding:0 14px 0 12px;font-size:12px;line-height:16px;color:var(--dk-mut)}
.cmp-x:hover{color:#F2F1ED}
table.ctab{width:100%;border-collapse:collapse;table-layout:fixed}
.ctab th{height:30px;padding:2px 0 2px 6px;border-bottom:1px solid var(--ink);font-size:11px;font-weight:400;line-height:14px;color:var(--m1);text-align:left;white-space:pre-line;vertical-align:middle}
.ctab th:first-child,.ctab td:first-child{padding-left:14px}
.ctab th:last-child,.ctab td:last-child{padding-right:14px}
.ctab .num{text-align:right}
.ctab col.c1{width:40px}.ctab col.c2{width:70px}.ctab col.c3{width:58px}.ctab col.c4{width:66px}
.ctab.single col.c1{width:64px}.ctab.single col.c2{width:58px}.ctab.single col.c3{width:54px}.ctab.single col.c4{width:72px}
.ctab td{height:40px;padding:0 0 0 6px;border-bottom:1px solid var(--line);font-size:13px;line-height:16px;color:var(--txt);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctab td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.ctab td.n1{font-weight:600}
.ctab td.lost{font-family:var(--f-body);color:var(--m1)}
.ctab td.warn{color:var(--warn);font-weight:700}
.ctab tbody tr{cursor:pointer}
.ctab tbody tr:hover{background:var(--pap)}
.ctab tbody tr.is-cur{background:var(--pap)}
.ctab tbody tr.is-cur td:first-child{box-shadow:inset 4px 0 0 var(--or);font-weight:700}
.ctab tbody tr:focus-visible{outline:2px solid var(--or);outline-offset:-2px}
.ctab .best{display:block;font-size:11px;font-weight:700;line-height:14px;color:var(--best)}
/* 扉×: the load does not pass that door (the reasons in the title) */
.ctab .doorx{display:inline-block;margin-left:6px;padding:0 4px;border:1px solid var(--warn);font-size:10px;font-weight:700;line-height:14px;color:var(--warn);vertical-align:1px}
.ctab .best + .doorx,.ctab td:first-child:has(.doorx){white-space:normal}
.ctab td:first-child:has(.best){white-space:normal}
.ctab td:first-child:has(.cn){white-space:normal}
.ctab .cn{display:inline-block;white-space:nowrap}
.cmp-note{padding:10px 14px;font-size:11px;line-height:16px;color:var(--m1)}

/* ---------- 積荷リスト under the 3D (layout 下) ---------- */
.ct{display:none}
.app[data-layout="bottom"] .ct{flex:0 0 auto;display:flex;flex-direction:column;max-height:46%;background:var(--wh);border-top:2px solid var(--ink)}
.ct-bar{flex:0 0 auto;display:flex;align-items:stretch;height:36px;background:var(--ink)}
.ct-t{display:flex;align-items:center;padding-inline:16px;font-size:13px;font-weight:700;line-height:16px;color:#F2F1ED;white-space:nowrap}
.ct-hint{flex:1 1 0;min-width:0;align-self:center;padding-inline:4px;font-size:12px;line-height:16px;color:var(--dk-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb{display:flex;align-items:center;gap:6px;padding-inline:14px;border-left:1px solid var(--dk-line);font-size:13px;line-height:16px;color:#F2F1ED;white-space:nowrap;cursor:pointer}
button.tb:hover{background:#2B2B29}
.tb[aria-expanded="true"]{background:var(--pap);color:var(--ink);font-weight:700}
.tb.primary{background:var(--or);color:var(--ink);font-weight:700;padding-inline:16px;border-left:0}
button.tb.primary:hover{background:#FF7440}
.tb.primary:disabled{background:#6E6D68;color:#C9C8C2}
.ct-head,.ct-row,.ct-total{display:flex;align-items:stretch;padding-left:12px}
.ct-head{flex:0 0 auto;height:28px;background:var(--pap);border-bottom:1px solid var(--ink);font-size:11px;line-height:14px;color:var(--m1)}
.ct-head > *{display:flex;align-items:center}
.ct-body{flex:0 1 auto;min-height:0;overflow-y:auto}
.ct-row{height:38px;border-bottom:1px solid var(--line)}
.ct-total{flex:0 0 auto;height:34px;background:var(--pap)}
/* 積荷リスト: the add button in the bar; 積む順番 under the table (2 rows or more); 積荷が 0 行 inside the table */
.ct-hint b{color:#F2F1ED}
.ct-hint .sep{padding-inline:5px;color:#6E6D68}
.ct-hint.full{font-weight:700;color:#F2F1ED}
.ct-opt{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:40px;padding:5px 16px;background:var(--wh)}
.ct-opt .ord-seg{flex:0 0 220px;height:28px}
.ct-opt .ord-h{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-opt .ord-n{flex:1 1 100%}
.ct-empty{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px 16px;border-bottom:1px solid var(--line);text-align:center}
.ct-empty b{font-size:15px;line-height:20px;color:var(--txt)}
.ct-empty > span{font-size:12px;line-height:16px;color:var(--m1)}
.ct-empty .add-b{flex:0 0 auto}
/* 積荷が 0 行: the 3D keeps its space without boxes and says why; the hold switcher waits */
.vp-empty{position:absolute;inset:0;z-index:3;display:none;align-items:center;justify-content:center;padding:24px;font-size:14px;font-weight:700;line-height:20px;color:var(--m2);text-align:center;pointer-events:none}
.vp-empty span{padding:8px 14px;background:rgba(255,255,255,.92);border:1px solid var(--line)}
.app.is-empty .vp-empty{display:flex}
.app.is-empty .hs,.app.is-empty #tagLayer,.app.is-empty #layerCtl,.app.is-empty #colNote,.app.is-empty #vpVirtual,.app.is-empty #showNote,.app.is-empty #liteNote,.app.is-empty #viewPad{visibility:hidden}
.c-sw{flex:0 0 20px;display:flex;align-items:center}
/* the table's ↑ / ↓: side by side in their own column (積む順), in the row's left padding */
.c-o{flex:0 0 52px;display:flex;align-items:center;margin:0 8px 0 -12px;border-right:1px solid var(--con);font-size:11px;line-height:14px}
.ct-head .c-o{justify-content:center;border-right-color:transparent}
.ct-total .c-o{border-right-color:transparent}
.c-o .ord-b{align-self:stretch}
.ct.one .c-o{display:none}
.c-sw i{width:12px;height:12px}
.c-nm{flex:1 1 0;min-width:0;display:flex;align-items:center;font-size:14px;font-weight:700;line-height:18px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.c-nm:hover{text-decoration:underline;text-underline-offset:3px}
.ct-head .c-nm{font-size:11px;font-weight:400;line-height:14px}
.ct-total .c-nm{font-size:13px;line-height:16px}
.c-d{flex:0 0 70px;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;border-left:1px solid var(--con);font-family:var(--f-mono);font-size:14px;line-height:18px}
.c-d.kg{flex-basis:76px}
.c-d.c-kin{padding-right:0;font-family:var(--f-body)}
.c-kin .kgw{flex:1 1 auto;width:auto;align-self:stretch}
.c-kin .kgw input{height:100%;border-bottom:0;background:var(--wh);box-shadow:inset 0 -2px 0 var(--ink);padding:0 10px 0 4px;font-family:var(--f-mono);font-size:15px;line-height:18px}
.c-kin .kgw input:focus{background:var(--sel);box-shadow:inset 0 -2px 0 var(--or)}
.c-kin .kgw input[aria-invalid="true"]{box-shadow:inset 0 -2px 0 var(--warn)}
.c-kin .kgu{display:none}
.c-kin .kgw.diff input{padding-bottom:11px}
.c-kin .kg-reg{top:auto;bottom:4px;right:10px;margin:0}
.ct-head .c-d,.ct-total .c-d{border-left-color:transparent;font-family:var(--f-body);font-size:11px;line-height:14px}
.ct-total .c-d.kg{font-family:var(--f-mono);font-size:12px;font-weight:500;line-height:16px;color:var(--m1)}
.c-p{flex:0 0 120px;display:flex;align-items:center;padding-left:10px;border-left:1px solid var(--con);font-family:var(--f-mono);font-size:13px;line-height:16px;white-space:nowrap;overflow:hidden}
.c-p.none{color:var(--faint)}
.ct-head .c-p,.ct-total .c-p{border-left-color:transparent;font-family:var(--f-body);font-size:11px;line-height:14px}
.c-q{flex:0 0 84px;display:flex;border-left:1px solid var(--con)}
.ct-head .c-q{border-left-color:transparent;justify-content:flex-end;padding-right:10px;font-weight:700;color:var(--ink)}
.ct-total .c-q{border-left-color:transparent;justify-content:flex-end;align-items:center;padding-right:10px;font-family:var(--f-mono);font-size:15px;font-weight:700;line-height:18px}
.c-q input{width:100%;height:100%;border:0;border-radius:0;background:var(--wh);box-shadow:inset 0 -2px 0 var(--ink);padding:0 10px;text-align:right;font-family:var(--f-mono);font-size:15px;font-weight:600;line-height:18px;color:var(--txt)}
.c-q input::placeholder{font-family:var(--f-body);font-size:12px;font-weight:400;color:var(--m3)}
.c-q input:focus{outline:none;background:var(--sel);box-shadow:inset 0 -2px 0 var(--or)}
.c-a{flex:0 0 44px;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--con)}
.ct-head .c-a,.ct-total .c-a{border-left-color:transparent}
.c-x{align-self:stretch;width:100%;font-size:15px;line-height:18px;color:var(--m1)}
.c-x:hover{color:var(--warn)}
.c-x.ghost{visibility:hidden}

/* ---------- dropdown: 登録済みから ---------- */
.ld{position:fixed;z-index:20;width:390px;max-width:calc(100vw - 16px);display:flex;flex-direction:column;background:var(--wh);border:2px solid var(--ink);box-shadow:6px 6px 0 rgba(28,28,26,.2)}
.srch{flex:0 0 auto;display:flex;align-items:center;gap:8px;height:40px;padding-inline:12px;background:var(--pap);border-bottom:1px solid var(--line);cursor:text}
.srch > span{font-size:14px;line-height:18px;color:var(--m1)}
.srch input{flex:1 1 0;min-width:0;height:100%;border:0;background:transparent;font-size:13px;line-height:16px;color:var(--txt)}
.srch input::placeholder{color:var(--m3)}
.srch input:focus{outline:none}
.srch:focus-within{box-shadow:inset 0 -2px 0 var(--or)}
.ld-list{flex:0 1 auto;min-height:0;max-height:min(360px,50vh);overflow-y:auto}
.ld-pick{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.ld-row{width:100%;text-align:left;cursor:pointer}
.ld-row:disabled{cursor:default}
.ld-grp{padding:8px 12px 4px;font-size:11px;line-height:14px;color:var(--m3)}
.ld-full{flex:0 0 auto;padding:8px 12px;background:var(--sel);font-size:12px;font-weight:700;line-height:16px;color:var(--m2)}
.ld-new{flex:0 0 auto;display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 12px;border-top:2px solid var(--ink);background:var(--pap);text-align:left;font-size:14px;font-weight:700;line-height:18px;color:var(--txt)}
.ld-new small{flex:1 1 auto;min-width:0;font-size:12px;font-weight:400;line-height:16px;color:var(--m1)}
.ld-new::after{content:"›";font-size:16px;font-weight:400;color:var(--ink)}
.ld-new:hover:not(:disabled){background:var(--sel)}
.ld-new:disabled{color:var(--m3)}
/* the small form: 新しい箱を登録して追加 */
.ld-form{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.ld-form[hidden],.ld-pick[hidden]{display:none}
.ld-fh{flex:0 0 auto;display:flex;align-items:center;gap:12px;height:44px;padding-inline:12px;border-bottom:2px solid var(--ink)}
.ld-back{font-size:13px;line-height:16px;color:var(--m2);white-space:nowrap}
.ld-back:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ld-fh b{min-width:0;padding-left:12px;border-left:1px solid var(--line);font-size:14px;line-height:18px;color:var(--txt)}
.ld-fb{display:flex;flex-direction:column;gap:12px;padding:14px 12px 16px;overflow-y:auto}
.lf-r{display:flex;gap:10px}
.lf{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:5px}
.lf.w2{flex-grow:2}
.lf > span{font-size:11px;line-height:14px;color:var(--m1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf input{width:100%;height:36px;border:0;border-bottom:2px solid var(--ink);border-radius:0;background:var(--pap);padding:0 10px;font-size:14px;line-height:18px;color:var(--txt)}
.lf input[type="number"]{text-align:right;font-family:var(--f-mono);font-size:15px;font-weight:600}
.lf input:focus{outline:none;border-bottom-color:var(--or);background:var(--sel)}
.ld-fa{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:12px;border-top:1px solid var(--line);background:var(--pap)}
.ld-fa .btn-or{flex:0 0 auto;height:38px;padding-inline:18px}
.ld-fa small{font-size:12px;line-height:17px;color:var(--m1)}
.ld-row{display:flex;align-items:center;gap:10px;height:40px;padding-inline:12px;border-bottom:1px solid var(--con)}
.ld-row:not(:disabled):hover,.ld-row:not(:disabled):focus-visible{outline:none;background:var(--sel);box-shadow:inset 4px 0 0 var(--or);padding-left:12px}
.ld-n{flex:1 1 0;min-width:0;font-size:14px;line-height:18px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ld-row:not(:disabled):hover .ld-n,.ld-row:not(:disabled):focus-visible .ld-n{font-weight:700}
.ld-row:not(:disabled):hover .ld-a,.ld-row:not(:disabled):focus-visible .ld-a{font-weight:700;color:#C2410C}
.ld-d{flex:0 0 auto;font-family:var(--f-mono);font-size:12px;line-height:16px;color:var(--m2);white-space:nowrap}
.ld-a{flex:0 0 72px;width:72px;display:flex;justify-content:flex-end;font-size:12px;line-height:16px;color:var(--m3);white-space:nowrap}
.ld-row.in .ld-n,.ld-row.full .ld-n{color:var(--m3)}
.ld-row.in .ld-d,.ld-row.full .ld-d{color:var(--faint)}
.ex{margin-left:6px;padding:0 4px;border:1px solid var(--line);font-size:10px;font-weight:400;line-height:14px;color:var(--m1);vertical-align:1px}
.add-s{padding:3px 8px;border:1px solid var(--ink);font-size:12px;font-weight:700;line-height:16px;color:var(--txt)}
.ld-row:hover .add-s,.ld-row:focus-within .add-s{background:var(--or);border-color:var(--or)}
.add-s:disabled{border-color:var(--line);color:var(--faint);background:none!important}
.ld-empty{padding:14px 12px;font-size:12px;line-height:18px;color:var(--m1)}
.ld-f{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;height:36px;padding-inline:12px;border-top:1px solid var(--line);background:var(--wh);font-size:12px;line-height:16px;color:var(--m1)}
.ld-f button{font-weight:400;color:var(--m2);white-space:nowrap}
.ld-f button:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- 段ボールの登録・編集 ---------- */
.ov{position:fixed;inset:0;z-index:25;background:rgba(28,28,26,.45)}
.bx{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;width:940px;height:660px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;background:var(--wh);border:2px solid var(--ink);box-shadow:8px 8px 0 rgba(28,28,26,.25)}
.bx-h{flex:0 0 auto;display:flex;align-items:stretch;height:44px;background:var(--ink)}
.bx-h h2{flex:1 1 0;min-width:0;display:flex;align-items:center;padding-left:18px;font-size:15px;font-weight:700;line-height:18px;color:#F2F1ED;white-space:nowrap}
.bx-store{display:flex;align-items:center;padding-inline:16px;font-size:12px;line-height:16px;color:var(--dk-mut);white-space:nowrap}
.bx-store.warn{color:#FF8A8F}
.bx-x{flex:0 0 52px;width:52px;border-left:1px solid var(--dk-line);font-size:18px;line-height:22px;color:#F2F1ED}
.bx-x:hover{background:#2B2B29}
.bx-b{flex:1 1 0;min-height:0;display:flex}
.bx-lc{flex:1 1 0;min-width:0;display:flex;flex-direction:column;border-right:2px solid var(--ink)}
.bx-s{flex:0 0 auto;display:flex;height:44px;border-bottom:1px solid var(--line)}
.bx-s .srch{flex:1 1 0;height:auto;padding-inline:14px;background:var(--wh);border:0}
.bx-new{flex:0 0 auto;padding-inline:16px;background:var(--or);font-size:13px;font-weight:700;line-height:16px;color:var(--ink);white-space:nowrap}
.bx-new:hover{background:#FF7440}
.bx-lh,.bx-it{display:flex;align-items:center;padding:0 14px 0 18px}
.bx-lh{flex:0 0 auto;height:28px;background:var(--pap);border-bottom:1px solid var(--ink);font-size:11px;line-height:14px;color:var(--m1)}
.bx-lh > :first-child,.bx-it > :first-child{flex:1 1 0;min-width:0}
.bx-c1{flex:0 0 150px;text-align:right}
.bx-c2{flex:0 0 70px;text-align:right}
.bx-c3{flex:0 0 110px;padding-left:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-list{flex:1 1 0;min-height:0;overflow-y:auto}
.bx-grp{padding:8px 18px 6px;background:var(--wh);font-size:11px;font-weight:700;line-height:14px;color:var(--m1);border-bottom:1px solid var(--line)}
.bx-it{width:100%;height:42px;border-bottom:1px solid var(--line);font-size:14px;line-height:18px;text-align:left;color:var(--txt)}
.bx-it:hover{background:var(--pap)}
.bx-it[aria-selected="true"]{background:var(--sel);box-shadow:inset 4px 0 0 var(--or);font-weight:700}
.bx-it > :first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-it .bx-c1,.bx-it .bx-c2{font-family:var(--f-mono);font-size:13px;font-weight:400;line-height:16px}
.bx-it .bx-c3{font-family:var(--f-mono);font-size:12px;font-weight:400;line-height:16px}
.bx-it .bx-c3.none{color:var(--faint)}
.bx-it .bx-c2{white-space:nowrap}
.bx-empty{padding:16px 18px;font-size:12px;line-height:18px;color:var(--m1)}
.bx-ec{flex:0 0 360px;width:360px;display:flex;flex-direction:column;background:var(--pap);min-height:0;overflow-y:auto}
.bx-eh{flex:0 0 auto;display:flex;align-items:center;gap:10px;height:44px;padding-inline:18px;border-bottom:1px solid var(--line);font-size:14px;line-height:18px}
.bx-eh b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-back{display:none}
.bx-f{display:flex;flex-direction:column;gap:14px;padding:18px}
.f{min-width:0;display:flex;flex-direction:column;gap:4px;flex:1 1 0}
.f > span{font-size:12px;line-height:16px;color:var(--m2);white-space:nowrap}
.f input{width:100%;height:36px;border:0;border-radius:0;border-bottom:2px solid var(--ink);background:var(--wh);padding:0 10px;font-size:14px;line-height:18px;color:var(--txt)}
.f input[type="number"]{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.f input#bxPrint{font-family:var(--f-mono)}
.f input::placeholder{font-family:var(--f-body);font-size:13px;color:var(--faint)}
.f input:focus{outline:none;border-bottom-color:var(--or);background:var(--sel)}
.f3,.f2{display:flex;gap:8px}
.f.kg{flex:0 0 100px}
.bx-ex{font-size:12px;line-height:18px;color:var(--m2)}
.bx-ft{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px;border-top:1px solid var(--line)}
.bx-btns{display:flex;gap:8px}
.btn-or,.btn-ol,.btn-warn{flex:1 1 0;display:flex;align-items:center;justify-content:center;height:40px;padding-inline:10px;font-size:14px;font-weight:700;line-height:18px;color:var(--txt);white-space:nowrap}
.btn-or{background:var(--or)}
.btn-or:hover:not(:disabled){background:#FF7440}
.btn-ol{background:var(--wh);border:2px solid var(--ink)}
.btn-ol:hover:not(:disabled){background:var(--pap)}
.btn-warn{background:var(--warn);color:var(--wh)}
.btn-or:disabled,.btn-ol:disabled{background:var(--con);border-color:var(--con);color:var(--m3)}
.bx-note{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;line-height:16px;color:var(--m1)}
.bx-del{flex:0 0 auto;font-weight:700;color:var(--warn);white-space:nowrap}
.bx-del:hover{text-decoration:underline;text-underline-offset:3px}
.bx-conf{display:flex;flex-direction:column;gap:10px;padding:12px;border:2px solid var(--warn);background:var(--wh);font-size:13px;line-height:18px}
.bx-conf div{display:flex;gap:8px}

/* ---------- small dialogs ---------- */
.cpy{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;width:520px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;background:var(--wh);border:2px solid var(--ink);box-shadow:8px 8px 0 rgba(28,28,26,.25)}
.cpy-h{display:flex;height:40px;background:var(--ink)}
.cpy-h h2{flex:1 1 0;display:flex;align-items:center;padding-left:14px;font-size:13px;font-weight:700;color:#F2F1ED}
.cpy .hint{border-bottom:0;background:var(--wh)}
.copy-fallback{display:block;width:calc(100% - 28px);min-height:160px;margin:0 14px 14px;padding:8px 10px;border:0;border-radius:0;border-bottom:2px solid var(--ink);background:var(--pap);font-family:var(--f-mono);font-size:12px;line-height:18px;resize:vertical}
.sheet{display:none}
.toast{position:fixed;left:50%;bottom:24px;z-index:50;transform:translate(-50%,16px);max-width:calc(100vw - 32px);padding:10px 16px;background:var(--ink);color:#F2F1ED;font-size:13px;line-height:18px;box-shadow:var(--sh);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* read out only (a moved row's new place) */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.tabbar{display:none}

/* ---------- guided tour ---------- */
.tour-dim{position:fixed;inset:0;z-index:60;background:transparent}
.tour-spot{position:fixed;z-index:61;box-shadow:0 0 0 9999px rgba(28,28,26,.55),0 0 0 3px var(--or);pointer-events:none;transition:left .28s ease,top .28s ease,width .28s ease,height .28s ease}
.tour-spot.center{box-shadow:0 0 0 9999px rgba(28,28,26,.55)}
.tour-card{position:fixed;z-index:62;width:min(340px,calc(100vw - 24px));display:flex;flex-direction:column;gap:10px;padding:14px 16px 12px;background:var(--wh);color:var(--txt);border:2px solid var(--ink);box-shadow:var(--sh)}
.tour-step{font-family:var(--f-mono);font-size:11px;line-height:14px;letter-spacing:.12em;color:var(--m1)}
.tour-card h3{font-size:16px;font-weight:700;line-height:22px}
.tour-card p.tour-body{font-size:13px;line-height:21px}
.tour-card ul{margin:0;padding-left:1.2em;font-size:13px;line-height:20px}
.tour-dots{display:flex;gap:4px}
.tour-dots i{width:6px;height:6px;background:var(--line)}
.tour-dots i.on{width:16px;background:var(--ink)}
.tour-nav{display:flex;align-items:center;gap:8px}
.tour-nav .btn-or,.tour-nav .btn-ol{flex:0 0 auto;height:32px;padding-inline:14px;font-size:13px}
.tour-head{display:flex;align-items:center;gap:8px;margin:-6px -8px -4px 0}
.tour-head .tour-step{flex:1 1 auto}
.tour-x{flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center;font-size:20px;line-height:1;color:var(--m1)}
.tour-x:hover,.tour-x:focus-visible{color:var(--ink);background:var(--sel);outline:none}
/* 次へ keeps its width on the last step (はじめる), so it does not move */
#tourNext{min-width:88px}
/* a short phone: the 3D gives way while the tour is open, so the inputs it describes show above the card */
@media (max-width:980px) and (max-height:760px){.app.touring .viewport{flex-basis:120px;height:120px}}

/* ---------- PC: a narrow 3D column ---------- */
/* PC with a narrow 3D column (981px wide with the cargo list on the left: a 581px bar). The bar has to hold the switcher,
   視点, 配置図, 寸法 and 軽量表示: buttons get tighter, and the switcher goes to two lines (「143か所目/143」 over
   「12,345箱」) so a 5-digit count still shows whole. Left layout: bar = width - 400px; bottom layout: width - 330px. */
@media (min-width:981px) and (max-width:1129px){
  .app .hs-a{flex-basis:26px;width:26px}
  .app .hs-mid{flex-basis:126px;width:126px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-content:center;gap:0 1px;padding-inline:7px}
  .app .hs-n{grid-area:1/1;font-size:12px;line-height:14px}
  .app .hs-of{grid-area:1/2;font-size:11px;line-height:14px}
  .app .hs-c{grid-area:2/1/3/3;max-width:none;font-size:12px;line-height:14px}
  .app .hs-mid .hs-dd{grid-area:1/3/3/4;align-self:center;margin-left:5px}
  .app .hs-of .hs-lg{display:none}
  .app .hs-of .hs-sh{display:inline}
  .app .hs-list{left:26px}
  .app .vseg button,.app .vbar .vb{padding-inline:7px}
  .app .vbar .vb{gap:5px}
}
/* the table under a narrow 3D column (bottom layout under 1130px): the size and print columns give the name some room
   back from 積む順 */
@media (min-width:981px) and (max-width:1129px){
  .app[data-layout="bottom"] .c-d{flex-basis:62px}
  .app[data-layout="bottom"] .c-d.kg{flex-basis:70px}
  .app[data-layout="bottom"] .c-p{flex-basis:88px}
}
@media (min-width:1130px) and (max-width:1199px){
  .app:not([data-layout="bottom"]) .hs-a{flex-basis:26px;width:26px}
  .app:not([data-layout="bottom"]) .hs-mid{flex-basis:126px;width:126px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-content:center;gap:0 1px;padding-inline:7px}
  .app:not([data-layout="bottom"]) .hs-n{grid-area:1/1;font-size:12px;line-height:14px}
  .app:not([data-layout="bottom"]) .hs-of{grid-area:1/2;font-size:11px;line-height:14px}
  .app:not([data-layout="bottom"]) .hs-c{grid-area:2/1/3/3;max-width:none;font-size:12px;line-height:14px}
  .app:not([data-layout="bottom"]) .hs-mid .hs-dd{grid-area:1/3/3/4;align-self:center;margin-left:5px}
  .app:not([data-layout="bottom"]) .hs-of .hs-lg{display:none}
  .app:not([data-layout="bottom"]) .hs-of .hs-sh{display:inline}
  .app:not([data-layout="bottom"]) .hs-list{left:26px}
  .app:not([data-layout="bottom"]) .vseg button,.app:not([data-layout="bottom"]) .vbar .vb{padding-inline:7px}
  .app:not([data-layout="bottom"]) .vbar .vb{gap:5px}
}
/* ---------- PC: the summary band in a narrow right column ----------
   One row needs about 1010px of right column (left layout: width - 400px; bottom layout: width - 330px). Below that the
   values get 16px and the cells fixed, tighter widths (needs ~860px); below that the band takes two rows: 箱数 · 必要本数
   · 1本目の箱数, then the three meters. Labels and values stay whole (a value over its cell still gets .tight and a title). */
@media (min-width:981px) and (max-width:1199px){
  .app .sum{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));height:auto}
  .app .sc{width:auto;height:54px;padding-inline:12px;grid-column:span 3}
  .app .sc.need{width:auto;grid-column:span 6;gap:10px;padding-right:10px}
  .app .sc:nth-child(3){border-right:0}
  .app .sc.m{grid-column:span 4;height:50px;border-top:1px solid var(--line)}
  .app .sc.m .sv{font-size:16px;line-height:20px}
  .app .sc.m .meter{height:4px}
}
@media (min-width:1200px) and (max-width:1269px){
  .app:not([data-layout="bottom"]) .sum{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));height:auto}
  .app:not([data-layout="bottom"]) .sc{width:auto;height:54px;padding-inline:12px;grid-column:span 3}
  .app:not([data-layout="bottom"]) .sc.need{width:auto;grid-column:span 6;gap:10px;padding-right:10px}
  .app:not([data-layout="bottom"]) .sc:nth-child(3){border-right:0}
  .app:not([data-layout="bottom"]) .sc.m{grid-column:span 4;height:50px;border-top:1px solid var(--line)}
  .app:not([data-layout="bottom"]) .sc.m .sv{font-size:16px;line-height:20px}
  .app:not([data-layout="bottom"]) .sc.m .meter{height:4px}
}
@media (min-width:1200px) and (max-width:1269px){
  .app[data-layout="bottom"] .sc{flex:0 0 108px;width:108px;padding-inline:12px}
  .app[data-layout="bottom"] .sc.need{flex:0 0 290px;width:290px;gap:10px;padding-right:10px}
  .app[data-layout="bottom"] .sc.m{flex:1 1 0;width:auto;min-width:112px}
  .app[data-layout="bottom"] .sl{font-size:11px;line-height:15px}
  .app[data-layout="bottom"] .sv{font-size:16px;line-height:22px}
}
@media (min-width:1270px) and (max-width:1339px){
  .app .sc{flex:0 0 108px;width:108px;padding-inline:12px}
  .app .sc.need{flex:0 0 290px;width:290px;gap:10px;padding-right:10px}
  .app .sc.m{flex:1 1 0;width:auto;min-width:112px}
  .app .sl{font-size:11px;line-height:15px}
  .app .sv{font-size:16px;line-height:22px}
}
@media (min-width:1340px) and (max-width:1409px){
  .app:not([data-layout="bottom"]) .sc{flex:0 0 108px;width:108px;padding-inline:12px}
  .app:not([data-layout="bottom"]) .sc.need{flex:0 0 290px;width:290px;gap:10px;padding-right:10px}
  .app:not([data-layout="bottom"]) .sc.m{flex:1 1 0;width:auto;min-width:112px}
  .app:not([data-layout="bottom"]) .sl{font-size:11px;line-height:15px}
  .app:not([data-layout="bottom"]) .sv{font-size:16px;line-height:22px}
}
/* ---------- touch screens: 16px fields, so the page does not zoom in on focus ---------- */
@media (pointer:coarse){
  .pv input[type="number"],.pv select,.f input,.srch input,.c-q input,.c-kin input,.lf input{font-size:16px}
  /* a row's ↑ / ↓ and 積む順番: bigger to tap */
  .box-ord{flex-basis:40px;margin-right:-2px}
  .ord-seg{height:38px}
}

/* =================== phones (980px and below) =================== */
@media (max-width:980px){
  body{font-size:13px}
  .pc-only{display:none!important}
  .sp-only{display:revert}
  .top{height:calc(44px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);padding-left:16px;box-shadow:inset 0 -1px 0 #2B2B29}
  .top h1{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .top > .grow{display:none}
  .lay,#helpBtn,#copyBtn{display:none}
  .tbtn{height:44px}
  .tbtn.primary{padding-inline:14px}
  .tbtn.more{display:flex;justify-content:center;width:44px;padding:0;font-size:18px;line-height:22px}
  .body{flex-direction:column}
  .work{display:contents}
  .cond{order:4;flex:1 1 0;width:auto;min-height:0;border-right:0;overflow-y:auto}
  .app[data-layout="bottom"] .cond{width:auto}
  .sum,.msg-line,.msg-err,.msg-detail-pc{display:none}
  .sum-sp{order:1;flex:0 0 auto;display:flex;align-items:center;gap:10px;height:44px;padding:0 10px 0 14px;background:var(--wh);border-bottom:1px solid var(--line)}
  .ss-a{flex:1 1 0;min-width:0;display:flex;align-items:baseline;gap:4px;white-space:nowrap;overflow:hidden}
  .ss-a b{font-size:14px;font-weight:700;line-height:18px;color:var(--txt)}
  .ss-a b:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .ss-a .arr{font-size:10px;line-height:12px;color:var(--m3)}
  .ss-m{flex:0 0 auto;display:flex;gap:8px}
  .ss-m > div{flex:0 0 40px;width:40px;display:flex;flex-direction:column;gap:1px}
  .ss-m span{font-size:9px;line-height:12px;color:var(--m1)}
  .ss-m b{font-size:11px;font-weight:700;line-height:13px;color:var(--txt);white-space:nowrap;overflow:hidden}
  .ss-m .meter{height:2px}
  .cmp-btn2{flex:0 0 auto;display:flex;align-items:center;height:26px;padding-inline:7px;border:1px solid var(--ink);font-size:11px;font-weight:700;line-height:14px;color:var(--txt)}
  .cmp-btn2[aria-expanded="true"]{background:var(--ink);color:var(--wh)}
  .msg{display:none}
  .viewport{order:2;flex:0 0 256px;height:256px}
  .vbar{position:absolute;left:10px;right:10px;top:10px;height:30px;background:transparent;border:0;pointer-events:none;gap:6px}
  .vbar > *{pointer-events:auto}
  .vbar > .grow{pointer-events:none}
  .hs{height:30px;background:var(--wh);border:1px solid var(--ink)}
  .hs-a{flex-basis:28px;width:28px;font-size:15px;line-height:18px}
  .hs-a + .hs-mid + .hs-a{border-right:0}
  .hs-mid{flex-basis:118px;width:118px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-content:center;gap:0 2px;padding-inline:8px}
  .hs-n{grid-area:1/1;font-size:11px;line-height:13px}
  .hs-of{grid-area:1/2;font-size:10px;line-height:13px}
  .hs-c{grid-area:2/1/3/3;max-width:none;font-size:12px;line-height:13px}
  .hs-mid .hs-dd{grid-area:1/3/3/4;align-self:center;margin-left:6px;border-left-width:3.5px;border-right-width:3.5px;border-top-width:4px}
  .hs-of .hs-lg{display:none}
  .hs-of .hs-sh{display:inline}
  .vseg,.layer{display:none}
  .box-row{gap:8px}
  .vb{height:30px;padding-inline:10px;background:var(--wh);border:1px solid var(--ink);font-size:12px;line-height:16px}
  /* checkboxes 20px on phones */
  input.ck.ck,.vb .ckv{width:20px;height:20px}
  input.ck.ck:checked,[aria-pressed="true"] > .ckv{background-size:15px 15px}
  .vb.dimt{gap:6px}
  #planBtn[aria-expanded="true"]{background:var(--or)}
  .scene{flex:1 1 0}
  .notes{left:10px;right:auto;bottom:10px;align-items:flex-start;max-width:calc(100% - 20px)}
  .note{padding:3px 8px;font-size:11px;line-height:14px;border-width:1px}
  .msg-chip{display:flex;align-items:center;gap:6px;max-width:100%}
  .msg-chip .tag{font-size:10px;line-height:14px;padding:0 4px}
  .msg-chip .mc-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
  .msg-chip.err{border-color:var(--warn);color:var(--warn)}
  .mtitle{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;flex:0 0 32px;height:32px;padding-inline:16px;background:var(--con);border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
  .mtitle b{font-size:13px;font-weight:700;line-height:16px;color:var(--txt);white-space:nowrap}
  .mtitle > span:not(.grow){min-width:0;font-size:11px;line-height:14px;color:var(--m1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-info{flex:0 0 auto;height:32px;margin-right:-8px;padding-inline:8px;font-size:13px;line-height:16px;color:var(--m1)}
  .m-info[aria-expanded="true"]{color:var(--ink)}
  .sec{display:none}
  .app[data-tab="cargo"] #secCargo,.app[data-tab="space"] #secSpace,.app[data-tab="load"] #secLoad{display:flex}
  .app[data-layout="bottom"] #secCargo{display:none}
  .app[data-layout="bottom"][data-tab="cargo"] #secCargo{display:flex}
  .sec-head{display:none}
  .sec[data-open] .sec-body{display:flex}
  .m-actions{display:flex;height:38px;background:var(--wh);border-bottom:1px solid var(--line)}
  .m-actions button{flex:1 1 0;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:16px;color:var(--txt)}
  .m-actions button:first-child{font-weight:700}
  .m-actions button + button{border-left:1px solid var(--line)}
  .m-actions button[aria-expanded="true"]{background:var(--pap)}
  .disc,.cond > .grow-v{display:none}
  .ct{display:none!important}
  .tabbar{order:5;flex:0 0 auto;display:flex;height:calc(62px + max(22px,env(safe-area-inset-bottom,0px)));padding-bottom:max(22px,env(safe-area-inset-bottom,0px));background:var(--wh);border-top:1px solid var(--ink)}
  .tab{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;margin-top:-1px;border-top:3px solid transparent;font-size:12px;line-height:16px;color:var(--m3)}
  .tab svg{display:block}
  .tab[aria-selected="true"]{border-top-color:var(--ink);color:var(--ink);font-weight:700}

  /* sheets: from the bottom over a dimmed page */
  .ov{z-index:40}
  .cmp,.plan,.ld,.hs-list,.sheet,.msg.as-sheet,.cpy{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:41;width:auto;max-width:none;max-height:85dvh;transform:none;display:flex;flex-direction:column;overflow-y:auto;background:var(--wh);border:0;border-top:2px solid var(--ink);box-shadow:none;padding-bottom:env(safe-area-inset-bottom,0px)}
  .cmp[hidden],.plan[hidden],.ld[hidden],.hs-list[hidden],.sheet[hidden],.cpy[hidden]{display:none!important}
  .grab{display:flex;justify-content:center;flex:0 0 auto;padding:8px 0 4px}
  .grab i{width:40px;height:4px;background:var(--faint)}
  .sh-h{display:flex;flex:0 0 auto;align-items:stretch;height:44px;border-bottom:1px solid var(--ink)}
  .sh-h h2{flex:1 1 0;min-width:0;display:flex;align-items:center;padding-left:16px;font-size:15px;font-weight:700;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sh-x{flex:0 0 52px;width:52px;border-left:1px solid var(--line);font-size:18px;line-height:22px;color:var(--txt)}
  .cmp{max-height:calc(100dvh - 120px)}
  .cmp-h{position:static;height:44px;background:var(--wh);border-bottom:1px solid var(--ink);padding-left:16px}
  .cmp-ht{flex-direction:column;align-items:flex-start;justify-content:center;gap:0}
  .cmp-h h2{font-size:15px;line-height:18px;color:var(--txt)}
  .cmp-sub{font-size:11px;line-height:14px;color:var(--m1)}
  .cmp-x{flex:0 0 52px;width:52px;height:44px;padding:0;border-left:1px solid var(--line);font-size:0;color:var(--txt)}
  .cmp-x::after{content:"×";font-size:18px;line-height:22px}
  .ctab th{height:28px;background:var(--pap);border-bottom:1px solid var(--line)}
  .ctab th:first-child,.ctab td:first-child{padding-left:16px}
  .ctab th:last-child,.ctab td:last-child{padding-right:16px}
  .ctab td{height:46px}
  .ctab td:first-child{font-size:14px;line-height:18px}
  .ctab tbody tr.is-cur{background:var(--sel)}
  .ctab tbody tr.is-cur td:first-child{padding-left:12px;box-shadow:inset 4px 0 0 var(--or)}
  .ctab col.c1{width:40px}.ctab col.c2{width:70px}.ctab col.c3{width:56px}.ctab col.c4{width:70px}
  .ctab.single col.c1{width:58px}.ctab.single col.c2{width:58px}.ctab.single col.c3{width:52px}.ctab.single col.c4{width:70px}
  .howto .i-b{display:none}
  .add-row{padding-top:14px}
  .add-b{height:46px;font-size:15px}
  .ld-fh b{display:none}
  .ld-fh{height:40px}
  .cmp-note{padding:10px 16px 30px}
  .plan{max-height:80dvh}
  .plan-h{background:var(--wh);height:44px;border-bottom:1px solid var(--ink)}
  .plan-h h2{padding-left:16px;font-size:15px;line-height:18px;color:var(--txt)}
  .px{flex-basis:52px;width:52px;border-left-color:var(--line);font-size:18px;color:var(--txt)}
  .plan-b{padding:12px 16px 24px}
  .ld{max-height:80dvh}
  .ld .msg-sh{display:flex}
  .cmp > *,.plan > *,.sheet > *,.cpy > *,.ld > :not(.ld-list){flex-shrink:0}
  .ld-list{max-height:none;flex:1 1 auto}
  .ld-row{height:48px;padding-inline:16px}
  .ld-f{height:48px;padding-inline:16px}
  .srch{padding-inline:16px}
  .hs-list{max-height:70dvh;overflow:hidden}
  .hs-list .msg-sh{display:flex}
  .hs-items{flex:1 1 auto;min-height:0;max-height:none}
  .hs-item{height:46px;padding-inline:16px;font-size:14px}
  .sheet{padding-bottom:max(22px,env(safe-area-inset-bottom,0px))}
  .mm{display:flex;align-items:center;height:52px;padding-inline:16px;border-bottom:1px solid var(--line);font-size:15px;line-height:18px;color:var(--txt);text-align:left}
  .mm:active{background:var(--pap)}
  .mm-st{margin-left:auto;font-size:13px;font-weight:700;color:var(--m1)}
  .mm[aria-pressed="true"] .mm-st{color:var(--or)}
  .vb.lite{display:none}
  .mm-note{padding:12px 16px 4px;font-size:12px;line-height:18px;color:var(--m1)}
  .msg.as-sheet{max-height:75dvh}
  .msg.as-sheet .msg-line{display:flex;flex-wrap:wrap;padding:12px 16px 4px}
  .msg.as-sheet .msg-t{white-space:normal;font-size:13px;line-height:20px;flex-basis:100%}
  .msg.as-sheet .msg-more{display:none}
  .msg.as-sheet .msg-err{display:block;margin:6px 16px 0}
  .msg.as-sheet .msg-detail{max-height:none;overflow:visible;padding:8px 16px 16px;font-size:13px;line-height:20px}
  .msg.as-sheet .msg-sh{display:flex}
  .msg.as-sheet .vw-msg:not(:empty){display:block;margin-top:8px;padding:6px 10px 8px;border:1px solid var(--line)}
  /* a sheet taller than the screen scrolls, its parts keep their height (the sentence is not cut under the block) */
  .msg.as-sheet > *{flex-shrink:0}
  .msg.as-sheet #mixTable:not([hidden]) + .vw-msg{margin-top:10px}
  .mix{font-size:12px}
  .cpy{transform:none}
  .cpy-h{background:var(--wh);border-bottom:1px solid var(--ink)}
  .cpy-h h2{color:var(--txt);font-size:15px;padding-left:16px}
  .cpy-h .px{color:var(--txt);border-left-color:var(--line)}
  /* 段ボールの登録・編集: the whole screen, list then edit */
  .bx{z-index:41;left:0;top:0;right:0;bottom:0;transform:none;width:auto;height:auto;max-width:none;max-height:none;border:0;box-shadow:none;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);background:var(--wh)}
  .bx-h{height:44px}
  .bx-h h2{padding-left:16px}
  .bx-store{display:none}
  .bx-b{flex-direction:column}
  .bx-lc{border-right:0}
  .bx[data-step="edit"] .bx-lc,.bx[data-step="list"] .bx-ec{display:none}
  .bx-ec{flex:1 1 0;width:auto}
  .bx-back{display:flex;align-items:center;height:44px;margin-left:-6px;padding-inline:6px;font-size:13px;font-weight:700;color:var(--txt)}
  .bx-eh{padding-inline:16px}
  .bx-lh{padding:0 16px}
  .bx-it{height:52px;padding:0 16px}
  .bx-c1{flex-basis:auto;padding-left:10px}
  .bx-c3,.bx-lh .bx-c3{display:none}
  .bx-it{flex-wrap:nowrap}
  .bx-f{padding:16px}
  .bx-ft{padding:14px 16px 16px}
  .toast{top:calc(env(safe-area-inset-top,0px) + 52px);bottom:auto;transform:translate(-50%,-12px)}
  .toast.show{transform:translate(-50%,0)}
}
@media (max-width:420px){
  /* the 運賃 block of a pallet 置き場所 a little tighter, so 置き場所 still needs no scrolling */
  .vw{line-height:15px}
  .bx-c2{flex-basis:56px}
  .bx-it .bx-c1{font-size:12px}
}
/* phones under 375px: a row with ↑ / ↓ has the order buttons, the weight, the quantity and the gaps a little narrower,
   so the name and the sizes still show; sizes longer than that go on to a second line (after a ×). Up to 374px, not
   340: from 341 the wider fields left the name less room than at 340 (75px at 341, 106 at 340), and at 341 every
   size went on to two lines */
@media (max-width:374px){
  .rows:not(.one) .box-row{gap:6px}
  .box-ord{flex-basis:32px;margin-right:-4px}
  .box-row .kgw{flex-basis:56px;width:56px}
  .box-row .qty{flex-basis:70px;width:70px}
  .box-meta{white-space:normal}
}
/* 320px phones: the bar over the 3D (switcher, 配置図, 寸法) keeps its 10px inset on the right */
@media (max-width:340px){
  .vbar{gap:4px}
  .vb{padding-inline:5px}
  .vb.dimt{gap:4px}
}
/* このツールについて: what the tool does and a short FAQ, in the HTML so search engines read it. PC: a dialog over a
   dimmed page, opened from the header; phones: a sheet from the bottom, opened from ⋯. Plus the message without JavaScript */
.about{width:640px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 48px);margin:auto;padding:0;border:2px solid var(--ink);border-radius:0;background:var(--wh);color:var(--txt);box-shadow:8px 8px 0 rgba(28,28,26,.25);overflow:hidden}
.about:not([open]){display:none}
.about[open]{display:flex;flex-direction:column}
.about::backdrop{background:rgba(28,28,26,.45)}
.about > *{flex-shrink:0}
.ab-h{display:flex;align-items:stretch;height:44px;background:var(--ink)}
.ab-h h2{flex:1 1 0;min-width:0;display:flex;align-items:center;padding-left:18px;font-size:15px;font-weight:700;line-height:18px;color:#F2F1ED;white-space:nowrap}
.ab-x{flex:0 0 52px;width:52px;border-left:1px solid var(--dk-line);font-size:18px;line-height:22px;color:#F2F1ED}
.ab-x:hover{background:#2B2B29}
.about .ab-b{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 22px;font-size:13px;line-height:21px}
.ab-lead{font-size:14px;line-height:23px}
.ab-dl,.ab-faq{margin:0}
.ab-dl{margin-top:16px;border-top:2px solid var(--ink)}
.ab-dl > div{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.ab-dl dt{flex:0 0 64px;font-weight:700}
.ab-dl dd{flex:1 1 0;min-width:0;margin:0}
.ab-q{margin-top:22px;padding-bottom:6px;border-bottom:2px solid var(--ink);font-size:13px;font-weight:700;line-height:16px}
.ab-faq dt{padding-top:10px;font-weight:700}
.ab-faq dd{margin:2px 0 0;padding-bottom:10px;border-bottom:1px solid var(--line);color:var(--m2)}
.ab-f{display:flex;align-items:center;gap:6px;padding:10px 20px;background:var(--pap);border-top:1px solid var(--line);font-size:12px;line-height:16px;color:var(--m1)}
.ab-f a{color:var(--txt);font-weight:700;text-underline-offset:3px}
.nojs{position:fixed;left:50%;top:50%;z-index:70;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 32px));padding:16px 18px;background:var(--wh);border:2px solid var(--ink);box-shadow:8px 8px 0 rgba(28,28,26,.25);font-size:13px;line-height:21px;color:var(--txt)}
.nojs p + p{margin-top:6px}
.nojs .nojs-t{font-size:15px;font-weight:700;line-height:20px}
@media (max-width:980px){
  #aboutBtn{display:none}
  .about{top:auto;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:85dvh;margin:0;border:0;border-top:2px solid var(--ink);box-shadow:none}
  .ab-h{background:var(--wh);border-bottom:1px solid var(--ink)}
  .ab-h h2{padding-left:16px;color:var(--txt)}
  .ab-x{border-left-color:var(--line);color:var(--txt)}
  .ab-x:hover{background:var(--pap)}
  .about .ab-b{padding:14px 16px 18px}
  .ab-f{padding:10px 16px max(22px,env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- short screens, landscape phones, tablets ---------- */
@media (max-width:980px){
  /* the 3D view takes a share of the screen's height (256 px on a tall phone, as before; less on a short one) */
  .viewport{flex-basis:clamp(120px,32dvh,256px);height:clamp(120px,32dvh,256px)}
  /* typing (the keyboard is up) or a short screen: the 3D view is a strip and the tab bar goes, so the field and its
     panel stay usable (ui/compact.ts) */
  .app.kb .viewport{flex-basis:48px;height:48px}
  .app.kb .notes,.app.kb #labels,.app.kb #tagLayer{display:none}
  .app.kb .tabbar{display:none}
}
/* tablets (portrait): a taller 3D view, and its view buttons */
@media (min-width:600px) and (max-width:980px) and (min-height:701px){
  .viewport{flex-basis:clamp(256px,42dvh,600px);height:clamp(256px,42dvh,600px)}
  .vseg{display:flex;height:30px;background:var(--wh);border:1px solid var(--ink)}
  .vseg button{padding-inline:10px;font-size:12px}
  .vseg button:first-child{border-left:0}
}
/* phones on their side: the 3D view (and the result above it) left, the inputs right, a slim tab bar under them */
@media (min-width:560px) and (max-width:980px) and (max-height:500px) and (orientation:landscape){
  .app{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .body{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,46%);grid-template-rows:auto minmax(0,1fr)}
  .sum-sp{grid-column:1;grid-row:1}
  .viewport,.app.kb .viewport{grid-column:1;grid-row:2;flex-basis:auto;height:auto;min-height:0}
  .cond{grid-column:2;grid-row:1 / 3;border-left:2px solid var(--ink)}
  .tabbar{height:calc(40px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
  .tab{flex-direction:row;gap:6px}
  .tab svg{width:18px;height:18px}
  .app.kb .notes,.app.kb #labels,.app.kb #tagLayer{display:revert}
  /* 運賃 of a pallet 置き場所: one line here (the whole block in 詳しく), so the panel needs no scrolling */
  #vwBox > .vw-c,#vwBox > .vw-l,#vwBox > .vw-t{display:none}
  #vwBox > .vw-s{display:flex}
  #vwBox{padding-top:2px;padding-bottom:2px;line-height:15px}
  /* 詳しく as tall as the other sheets here, so the block and the sentence fit */
  .msg.as-sheet{max-height:85dvh}
}

/* a weight that leaves out boxes with no weight; a 入るだけ row that got nothing */
.uw{margin-left:4px;font-size:.8em;color:var(--warn)}
.zero0{font-family:var(--f-body);font-size:12px;font-weight:700;line-height:16px;color:var(--warn)}
.c-nm .zero0{margin-left:6px}
.zero0[hidden]{display:none}
/* phones: the result's one line — the short name may give way, 「×N本」 never does */
#mNeed{display:flex;min-width:0}
#mNeed .nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
#mNeed .nn{flex:0 0 auto}
.ss-a.two{flex-direction:column;align-items:flex-start;justify-content:center;gap:0}
.ss-a.two .arr{display:none}
.ss-a.two b{line-height:16px}
.ss-a.two #mNeed{max-width:100%;font-size:12px;line-height:15px}