:root{--ink:#26342f;--muted:#6c7871;--line:#dce1db;--panel:#fff;--bg:#f4f1e8;--nav:#344b44;--nav2:#253a35;--sage:#5d7f68;--sage-soft:#e7efe8;--amber:#c18a32;--amber-soft:#fbf0d6;--coral:#c96d55;--coral-soft:#f9e8e2;--blue:#557a91;--blue-soft:#e6eef3;--plum:#80647e;--plum-soft:#eee7ee;--red:#aa514a;--red-soft:#f7e5e2;--shadow:0 8px 24px rgba(45,55,48,.09)}
*{box-sizing:border-box}html{background:var(--bg);color:var(--ink);font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-size:14px}body{margin:0;min-width:940px;background:var(--bg)}button,input,select{font:inherit}.mock-app{display:grid;grid-template-columns:198px minmax(0,1fr);min-height:780px}.mock-side{position:relative;padding:20px 14px;background:linear-gradient(180deg,var(--nav),var(--nav2) 88%);color:#edf3ef}.mock-brand{display:flex;align-items:center;gap:10px;padding:0 8px 19px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.15)}.mock-brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--amber);color:#fff;font-size:14px;font-weight:900}.mock-brand strong{display:block;color:#fff;font-size:14px}.mock-brand small{display:block;margin-top:2px;color:#cad8d0;font-size:14px}.mock-nav{display:grid;gap:4px;margin:0;padding:0;list-style:none}.mock-nav a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;color:#dae6df;text-decoration:none;font-size:14px}.mock-nav a:before{content:"";width:7px;height:7px;border:1px solid currentColor;border-radius:50%}.mock-nav a.active{background:rgba(255,255,255,.15);color:#fff;font-weight:800}.mock-side-note{position:absolute;right:14px;bottom:18px;left:14px;padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:8px;color:#c6d4cc;font-size:14px;line-height:1.55}.mock-main{min-width:0}.mock-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:62px;padding:0 24px;border-bottom:1px solid var(--line);background:#fff}.mock-title{font-size:18px;font-weight:800}.mock-top-actions{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}.mock-user{display:flex;align-items:center;gap:7px;padding-left:10px;border-left:1px solid var(--line)}.mock-user-dot{width:28px;height:28px;border-radius:50%;background:#e4ece7}.mock-content{padding:20px 22px 28px}.mock-pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:15px}.mock-pagehead h1{margin:0 0 4px;font-size:21px;line-height:1.45}.mock-pagehead p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}.page-actions{display:flex;align-items:center;gap:8px}.sample-badge{display:inline-flex;align-items:center;padding:6px 9px;border:1px solid #d8cdb5;border-radius:999px;background:#fffaf0;color:#7d6132;font-size:14px;font-weight:800;white-space:nowrap}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 13px;border:1px solid #c7cec8;border-radius:7px;background:#fff;color:#3f5348;font-weight:800;text-decoration:none;white-space:nowrap}.btn.primary{border-color:var(--sage);background:var(--sage);color:#fff}.btn.amber{border-color:var(--amber);background:var(--amber);color:#fff}.grid{display:grid;gap:14px}.grid.two{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)}.grid.equal2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.card{min-width:0;padding:15px;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:var(--shadow)}.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.card-head h2,.card-head h3{margin:0;font-size:14px;line-height:1.5}.card-head p{margin:2px 0 0;color:var(--muted);font-size:14px}.badge{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;background:#edf0ed;color:#596861;font-size:14px;font-weight:800;white-space:nowrap}.badge.green{background:var(--sage-soft);color:#46664f}.badge.amber{background:var(--amber-soft);color:#87611e}.badge.coral{background:var(--coral-soft);color:#984d3b}.badge.blue{background:var(--blue-soft);color:#44697e}.badge.plum{background:var(--plum-soft);color:#6e536c}.badge.red{background:var(--red-soft);color:#91423d}.alert{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border:1px solid #e3c78f;border-radius:8px;background:#fff8e7;color:#73551f;font-size:14px;line-height:1.6}.alert:before{content:"!";display:grid;place-items:center;flex:0 0 19px;height:19px;border-radius:50%;background:var(--amber);color:#fff;font-weight:900}.alert.red{border-color:#dfb3ad;background:#fff2f0;color:#813d38}.alert.red:before{background:var(--red)}table{width:100%;border-collapse:collapse}th,td{padding:8px 9px;border-bottom:1px solid #e8ebe6;text-align:left;vertical-align:middle}th{background:#f5f6f2;color:#65716a;font-size:14px;font-weight:800}td{font-size:14px;line-height:1.45}tbody tr:last-child td{border-bottom:0}.num{text-align:right;font-variant-numeric:tabular-nums}.footer-note{margin-top:12px;color:#7c857f;font-size:14px;text-align:right}.metric-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:14px}.metric-grid div{padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff}.metric-grid span{display:block;color:var(--muted);font-size:14px}.metric-grid strong{display:block;margin-top:4px;font-size:14px}.metric-grid small{display:block;margin-top:2px;color:var(--muted);font-size:14px}.metric-grid .warn strong{color:#9b542f}.filterbar{display:flex;align-items:center;gap:7px;margin-bottom:12px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fff}.filterbar span{color:var(--muted);font-size:14px}.filter-chip{padding:6px 8px;border:1px solid #d7dcd7;border-radius:7px;background:#fafbf8;color:#4c5d53;font-size:14px}.filter-chip.active{border-color:#9cb1a0;background:var(--sage-soft);color:#43604b;font-weight:800}
.week-grid{display:grid;grid-template-columns:150px repeat(5,minmax(116px,1fr));overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:var(--shadow)}.week-cell{min-height:74px;padding:9px;border-right:1px solid #e7eae5;border-bottom:1px solid #e7eae5}.week-cell.head{min-height:auto;background:#f3f5f1;color:#5c6c63;font-size:14px;font-weight:800;text-align:center}.week-cell.client{background:#faf9f4}.week-cell.client strong{display:block;font-size:14px}.week-cell.client span{display:block;margin-top:3px;color:var(--muted);font-size:14px}.order-box{padding:7px;border-left:4px solid var(--sage);border-radius:6px;background:var(--sage-soft);font-size:14px;line-height:1.45}.order-box strong{display:block;font-size:14px}.order-box.closed{border-left-color:#a7aaa5;background:#f0f0ed;color:#7b807d}.order-box.check{border-left-color:var(--amber);background:var(--amber-soft)}.rule-list{display:grid;gap:7px}.rule-row{padding:9px;border:1px solid var(--line);border-radius:8px;background:#fff}.rule-row strong{display:flex;justify-content:space-between;gap:8px;font-size:14px}.rule-row p{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
.equation{display:grid;grid-template-columns:repeat(7,auto);align-items:center;justify-content:center;gap:8px;margin-bottom:14px;padding:13px;border:1px solid #dddcd4;border-radius:10px;background:#fff}.eq-box{min-width:93px;padding:10px;border-radius:8px;background:var(--sage-soft);text-align:center}.eq-box.base{background:var(--blue-soft)}.eq-box.minus{background:var(--coral-soft)}.eq-box.late{background:var(--amber-soft)}.eq-box span{display:block;color:var(--muted);font-size:14px}.eq-box strong{display:block;margin-top:3px;font-size:17px}.eq-op{color:#7e8982;font-weight:900}.source-list{display:grid;gap:7px}.source-item{display:grid;grid-template-columns:78px 1fr 54px 68px;gap:7px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px}.source-item .origin{font-weight:800}.source-item small{color:var(--muted)}
.production-grid{display:grid;grid-template-columns:160px repeat(5,minmax(82px,1fr));overflow:hidden;border:1px solid var(--line);border-radius:9px}.production-cell{padding:9px;border-right:1px solid #e7eae5;border-bottom:1px solid #e7eae5;background:#fff;text-align:right;font-size:14px}.production-cell.head{background:#f3f5f1;color:#5c6962;font-size:14px;font-weight:800}.production-cell.product{text-align:left;background:#faf9f4;font-weight:800}.production-cell.total{background:var(--sage-soft);font-weight:900}.progress-list{display:grid;gap:9px}.progress-row{display:grid;grid-template-columns:80px 1fr 36px;gap:8px;align-items:center;font-size:14px}.progress-track{height:12px;overflow:hidden;border-radius:999px;background:#e9ece8}.progress-track span{display:block;height:100%;border-radius:999px;background:var(--sage)}.progress-row.warn .progress-track span{background:var(--amber)}.special-list{display:grid;gap:7px}.special-item{padding:9px;border:1px solid #e0d3b6;border-radius:8px;background:#fff9ea;font-size:14px;line-height:1.5}.special-item b{display:block;margin-bottom:2px}
.route-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}.route-summary div{padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff}.route-summary span{display:block;color:var(--muted);font-size:14px}.route-summary strong{display:block;margin-top:3px;font-size:14px}.alloc-list{display:grid;gap:9px}.alloc-row{display:grid;grid-template-columns:110px minmax(250px,1fr) 65px 70px;gap:8px;align-items:center;font-size:14px}.alloc-row b{font-size:14px}.alloc-track{display:flex;height:19px;overflow:hidden;border-radius:5px;background:#ecefea}.alloc-track span{height:100%}.alloc-track .done{background:var(--sage)}.alloc-track .pending{background:var(--amber)}.alloc-track .short{background:var(--red)}.route-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.route-card{padding:11px;border-top:5px solid var(--sage);border-radius:8px;background:#fff;box-shadow:0 4px 14px rgba(45,55,48,.07)}.route-card.b{border-top-color:var(--amber)}.route-card.c{border-top-color:var(--blue)}.route-card h3{margin:0 0 8px;font-size:14px}.route-card p{display:flex;justify-content:space-between;margin:5px 0;color:var(--muted);font-size:14px}.route-card p b{color:var(--ink);font-size:14px}.check-line{display:flex;justify-content:space-between;padding:6px 0;border-top:1px dashed #dfe2dc;font-size:14px}
.timeline{position:relative;margin:4px 0;padding-left:18px}.timeline:before{content:"";position:absolute;top:7px;bottom:8px;left:6px;width:2px;background:#cbd6ce}.stop{position:relative;display:grid;grid-template-columns:58px 1fr auto;gap:8px;align-items:center;margin-bottom:8px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px}.stop:before{content:"";position:absolute;left:-17px;width:10px;height:10px;border:3px solid var(--sage);border-radius:50%;background:#fff}.stop.current{border-color:#d6b678;background:#fffaf0}.stop.current:before{border-color:var(--amber)}.stop b{font-size:14px}.stop small{display:block;margin-top:2px;color:var(--muted)}.load-panel{display:grid;gap:8px}.load-item{padding:9px;border:1px solid var(--line);border-radius:8px;background:#fff}.load-item div{display:flex;justify-content:space-between;gap:8px;font-size:14px}.load-item .bar{height:8px;margin-top:7px;overflow:hidden;border-radius:999px;background:#e9ece8}.load-item .bar span{display:block;height:100%;background:var(--sage)}
.quantity-compare{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:13px}.quantity-compare div{padding:11px;border:1px solid var(--line);border-radius:8px;background:#fff;text-align:center}.quantity-compare span{display:block;color:var(--muted);font-size:14px}.quantity-compare strong{display:block;margin-top:4px;font-size:17px}.quantity-compare .diff{background:var(--coral-soft)}.delivery-list{display:grid;gap:8px}.delivery-row{display:grid;grid-template-columns:54px 1fr 72px 70px;gap:8px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px}.delivery-row b{font-size:14px}.delivery-row small{display:block;margin-top:2px;color:var(--muted)}.container-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.container-grid div{padding:11px;border:1px solid var(--line);border-radius:8px;background:#fff}.container-grid span{display:block;color:var(--muted);font-size:14px}.container-grid strong{display:block;margin-top:4px;font-size:15px}
.reconcile{display:grid;grid-template-columns:repeat(7,auto);align-items:center;justify-content:center;gap:7px;margin-bottom:13px;padding:12px;border:1px solid #dddcd4;border-radius:10px;background:#fff}.rec-box{min-width:88px;padding:9px;border-radius:8px;background:var(--blue-soft);text-align:center}.rec-box.delivery{background:var(--sage-soft)}.rec-box.adjust{background:var(--coral-soft)}.rec-box.bill{background:var(--amber-soft)}.rec-box span{display:block;color:var(--muted);font-size:14px}.rec-box strong{display:block;margin-top:3px;font-size:16px}.rec-op{font-weight:900;color:#76827b}.billing-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:13px}.billing-summary div{padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff}.billing-summary span{display:block;color:var(--muted);font-size:14px}.billing-summary strong{display:block;margin-top:4px;font-size:14px}.billing-summary .attention{background:#fff9e9}
@media(max-width:1080px){body{min-width:900px}.mock-app{grid-template-columns:174px minmax(0,1fr)}.mock-content{padding-right:16px;padding-left:16px}.card{padding:13px}.week-grid{grid-template-columns:132px repeat(5,minmax(110px,1fr))}.equation,.reconcile{gap:5px}.eq-box,.rec-box{min-width:78px}.alloc-row{grid-template-columns:95px minmax(220px,1fr) 58px 64px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}