:root{
  --bg:#f5f6f8; --panel:#fff; --line:#e2e5ea; --ink:#1c2430; --sub:#69727e;
  --accent:#1f6feb; --accent-soft:#e8f0fe;
  --ok:#137a4b; --ok-bg:#e7f5ee; --warn:#a86400; --warn-bg:#fdf3e0;
  --ng:#b3261e; --ng-bg:#fdecea;
  --plus:#0b6b4f; --minus:#b3261e;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Hiragino Sans","Yu Gothic UI","Noto Sans JP",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.6}
header{background:#12243a;color:#fff;padding:12px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
header h1{font-size:17px;margin:0;font-weight:700;letter-spacing:.02em}
header .ver{font-size:11px;color:#9fb3cc;padding:2px 8px;border-radius:10px;background:#1d3552}
header .spacer{flex:1}
header select,header button{font-size:13px;padding:5px 10px;border-radius:6px;border:1px solid #2d4869;background:#1d3552;color:#fff}
header button{cursor:pointer}
header button:hover{background:#294a71}

.layout{display:grid;grid-template-columns:170px 1fr 320px;gap:0;align-items:start}
@media(max-width:1200px){.layout{grid-template-columns:150px 1fr}.summary{display:none}}

nav{background:#fff;border-right:1px solid var(--line);min-height:calc(100vh - 52px);padding:10px 0;position:sticky;top:0}
nav button{display:block;width:100%;text-align:left;padding:10px 16px;border:0;background:none;
  cursor:pointer;font-size:13.5px;color:var(--sub);border-left:3px solid transparent;font-family:inherit}
nav button:hover{background:#f2f5f9}
nav button.on{color:var(--accent);background:var(--accent-soft);border-left-color:var(--accent);font-weight:700}

main{padding:20px 24px;min-width:0}
.summary{padding:20px 20px 40px;position:sticky;top:0;max-height:100vh;overflow:auto}

h2{font-size:16px;margin:0 0 4px}
.lead{color:var(--sub);font-size:12.5px;margin:0 0 16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:16px}
.card h3{font-size:14px;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 14px}
@media(max-width:900px){.grid3,.grid4{grid-template-columns:repeat(2,1fr)}}

label.f{display:block;font-size:12px;color:var(--sub);margin-bottom:3px}
input[type=number],input[type=text],select{width:100%;padding:6px 8px;border:1px solid var(--line);
  border-radius:6px;font-size:13.5px;font-family:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
input[type=number]{text-align:right}
.hint{font-size:11.5px;color:var(--sub);margin-top:3px}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right}
th:first-child,td:first-child{text-align:left}
th{color:var(--sub);font-weight:600;font-size:11.5px;background:#fafbfc;white-space:nowrap}
tbody tr:hover{background:#fafbfd}
td.num{font-variant-numeric:tabular-nums}
.tw{overflow-x:auto}

.badge{display:inline-block;font-size:11px;padding:1px 7px;border-radius:9px;font-weight:700;white-space:nowrap}
.b-ok{background:var(--ok-bg);color:var(--ok)}
.b-warn{background:var(--warn-bg);color:var(--warn)}
.b-ng{background:var(--ng-bg);color:var(--ng)}
.b-info{background:var(--accent-soft);color:var(--accent)}

.kline{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line)}
.kline:last-child{border:0}
.kline .l{font-size:12.5px;color:var(--sub)}
.kline .v{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.big{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.plus{color:var(--plus)} .minus{color:var(--minus)}

.kasan-row{display:grid;grid-template-columns:26px 1fr 88px 108px;gap:8px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--line)}
.kasan-row .nm{font-size:13px}
.kasan-row .yen{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.kasan-row input{padding:4px 6px;font-size:12.5px}
.kasan-note{grid-column:2/5;font-size:11.5px;color:var(--sub);margin-top:-4px}
.req-ng{grid-column:2/5;font-size:11.5px;color:var(--ng);margin-top:-4px}

.bar{height:7px;background:#e9edf2;border-radius:4px;overflow:hidden;margin-top:5px}
.bar>i{display:block;height:100%;border-radius:4px}
.bar>i.ok{background:var(--ok)} .bar>i.warn{background:#e0a800} .bar>i.ng{background:var(--ng)}

.btn{padding:7px 14px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer;
  font-size:13px;font-family:inherit;color:var(--ink)}
.btn:hover{background:#f2f5f9}
.btn.pri{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.pri:hover{background:#175bc4}
.btn.dg{color:var(--ng);border-color:#f2c9c5}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.warnbox{background:var(--warn-bg);border:1px solid #f0dcb4;border-radius:8px;padding:10px 12px;
  font-size:12.5px;color:#6b4200;margin-bottom:12px}
.ngbox{background:var(--ng-bg);border:1px solid #f3c9c5;border-radius:8px;padding:10px 12px;
  font-size:12.5px;color:#8c1d18;margin-bottom:12px}
.okbox{background:var(--ok-bg);border:1px solid #bfe3d0;border-radius:8px;padding:10px 12px;
  font-size:12.5px;color:#0d5c39;margin-bottom:12px}