:root{--bg:#f6f6f4;--card:#fff;--ink:#1d1d1b;--sub:#6b6b66;--line:#d9d9d3;--acc:#1f5eff;--accbg:#e8efff;--warn:#fff4d6;--bad:#c0392b;--ok:#1e7d46}
@media (prefers-color-scheme:dark){:root{--bg:#161615;--card:#212120;--ink:#ececE8;--sub:#9a9a93;--line:#3a3a37;--acc:#7aa2ff;--accbg:#22304f;--warn:#4a3f1c;--bad:#ff8a7a;--ok:#6fd49a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 -apple-system,"Hiragino Sans","Noto Sans JP",sans-serif}
#top{display:flex;align-items:center;gap:18px;padding:10px 20px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{font-size:15px}
#top nav{display:flex;gap:4px}
#top nav a{color:var(--sub);text-decoration:none;padding:6px 12px;border-radius:7px}
#top nav a.on{background:var(--accbg);color:var(--acc);font-weight:600}
.grow{flex:1}.who{font-size:12px;color:var(--sub)}
main{padding:16px 20px 60px;max-width:1280px;margin:0 auto}
h2{font-size:17px;margin:0 0 12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:14px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin-bottom:10px}
label{display:flex;flex-direction:column;font-size:12px;color:var(--sub);gap:2px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:5px 7px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:-1px}
table{border-collapse:collapse;width:100%}
th,td{border:1px solid var(--line);padding:3px 6px;text-align:left;white-space:nowrap}
th{background:var(--bg);font-weight:600;font-size:12px;position:sticky}
.n{text-align:right}
tr.click{cursor:pointer}tr.click:hover td{background:var(--accbg)}
.btn{border:1px solid var(--acc);background:var(--acc);color:#fff;padding:6px 14px;border-radius:7px;cursor:pointer;font:inherit}
.btn.sec{background:transparent;color:var(--acc)}
.btn.bad{border-color:var(--bad);color:var(--bad);background:transparent}
.btn:disabled{opacity:.4;cursor:default}
.tag{display:inline-block;font-size:11px;padding:1px 8px;border-radius:10px;background:var(--warn)}
.tag.ok{background:transparent;color:var(--ok);border:1px solid var(--ok)}
.tag.legacy{background:var(--bg);color:var(--sub);border:1px solid var(--line)}
.small{font-size:12px;color:var(--sub)}
.warn{color:var(--bad)}
.hint{background:var(--accbg);border-radius:8px;padding:8px 12px;font-size:12.5px;margin-bottom:12px}
.grid input{border:none;width:100%;padding:5px 4px;background:transparent;border-radius:0}
.grid input.q{width:46px;text-align:right}
.grid input.r{width:62px;text-align:right}
.grid td{padding:0 2px}
.grid td.calc{text-align:right;background:var(--bg);padding:3px 6px}
.grid td.edited{background:var(--warn)}
.grid td.edited input{background:transparent}
.tot{display:flex;gap:24px;justify-content:flex-end;margin-top:10px;font-size:15px}
.tot b{font-size:18px}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#222;color:#fff;padding:9px 18px;border-radius:8px;opacity:0;transition:.25s;pointer-events:none}
#toast.show{opacity:.95}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:20}
#modal[hidden]{display:none}
.modal-card{background:var(--card);border-radius:12px;padding:18px;width:min(720px,94vw);max-height:90vh;overflow:auto}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.fgrid .w2{grid-column:span 2}.fgrid .w3{grid-column:span 3}
/* 印刷用の用紙 */
.paper{background:#fff;color:#111;border:1px solid #bbb;padding:26px 30px;font-family:"Hiragino Mincho ProN","Noto Serif JP",serif;font-size:12px;max-width:780px;margin:0 auto}
.paper table th,.paper table td{border-color:#999;font-size:11.5px;color:#111}
.paper th{background:#fff}
.pp{display:flex;justify-content:space-between;gap:20px;margin-bottom:14px}
.pbar{max-width:780px;margin:0 auto 10px;display:flex;gap:8px;align-items:center}
#print{display:none}
body.printing #app,body.printing #modal{display:none}
body.printing #print{display:block}
body.printing{background:#fff}
@media print{#app,#modal,.pbar{display:none!important}#print{display:block!important}.paper{border:none;max-width:none;padding:0}@page{size:A4;margin:14mm}}
/* 入力表の列幅 */
#grid{table-layout:auto;width:auto;min-width:100%}
#grid td:nth-child(1) input{min-width:58px}
#grid td:nth-child(2) input{min-width:92px}
#grid td:nth-child(3) input{min-width:170px}
#grid td:nth-child(4) input{min-width:96px}
#grid td:nth-child(n+5):nth-child(-n+9) input{min-width:42px;width:44px}
#grid td:nth-child(11) input,#grid td:nth-child(12) input,#grid td:nth-child(13) input{min-width:64px}
#grid td.calc{min-width:54px}
/* スマホ（iPhone）向け */
@media (max-width:760px){
  #top{flex-wrap:wrap;gap:6px 10px;padding:8px 12px}
  #top nav{order:3;width:100%;overflow-x:auto}
  main{padding:12px 10px 60px}
  input,select,textarea{font-size:16px}      /* iOSで入力時に拡大されないように */
  .row{gap:8px}.row label{flex:1 1 140px}
  .tot{flex-wrap:wrap;gap:8px 16px;justify-content:flex-start}
  .bar .btn{flex:1 1 auto}
  .fgrid{grid-template-columns:1fr 1fr}.fgrid .w2,.fgrid .w3{grid-column:span 2}
  .paper{padding:14px;font-size:11px}.pp{flex-direction:column}
}
.row.col label{flex:none}
tr.voided td{color:var(--sub);text-decoration:line-through}
.grid td.auto{background:var(--accbg)}.grid td.auto input{background:transparent}