:root {
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  color:#24342b; background:#edf4ef;
  --ink:#24342b; --deep:#1f523b; --accent:#8b5a31; --paper:#fff;
  --line:#c8d6cd; --muted:#5c6d63; --wash:#f5f9f6;
  --ok:#176747; --wait:#8a5917; --bad:#943d37;
}
* { box-sizing:border-box; }
body { margin:0; overflow-x:hidden; }
h1,h2,h3,p,dl { margin:0; }
h1 { margin:8px 0; font-size:1.68rem; line-height:1.45; }
h2 { margin-bottom:18px; font-size:1.3rem; line-height:1.5; }
h3 { margin:14px 0 8px; font-size:1.08rem; }
p { margin:10px 0 16px; }
a { color:#276948; text-underline-offset:4px; }
a,button,input,select,textarea,p,dt,dd,strong,span { overflow-wrap:anywhere; }
button,input,select,textarea { font:inherit; }
button,input,select,textarea,a { touch-action:manipulation; }
button { padding:10px 16px; border:1px solid var(--accent); border-radius:5px; background:var(--accent); color:#fff; font-weight:700; cursor:pointer; }
button.secondary { border-color:#718378; background:#fff; color:var(--deep); }
:focus-visible { outline:3px solid #dfaa38; outline-offset:3px; }
label { display:block; margin:12px 0 5px; font-size:.875rem; font-weight:700; }
input,select,textarea { width:100%; max-width:100%; min-width:0; padding:10px 12px; border:1px solid #9fafA5; border-radius:4px; background:#fff; color:var(--ink); }
textarea { min-height:88px; resize:vertical; }
.app { width:min(100%,1420px); margin:0 auto; padding:24px; }
.mast { position:relative; overflow:hidden; padding:24px 28px; border-radius:8px; background:var(--deep); color:#fff; }
.mast::after { position:absolute; inset:0; background:repeating-linear-gradient(120deg,transparent 0 82px,rgba(255,255,255,.045) 82px 126px); content:""; pointer-events:none; }
.mast > * { position:relative; z-index:1; }
.mast p { margin:0; }
.eyebrow { color:#e6f0e9; font-size:.875rem; letter-spacing:.08em; }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:14px 0; }
.steps a { min-width:0; padding:10px; border:1px solid var(--line); border-radius:4px; background:#fff; font-size:.875rem; text-decoration:none; }
.steps a[aria-current="page"] { border-color:#6c8d78; background:#e2efe7; color:#1f523b; font-weight:700; }
.toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:14px; margin:20px 0; }
.toolbar > div { flex:1 1 430px; min-width:0; }
.toolbar label,.toolbar p { margin:0 0 5px; font-size:.875rem; }
.toolbar p { margin:0; }
.message { position:sticky; top:5px; z-index:8; margin:12px 0; padding:13px 18px; border:1px solid #79aa8a; border-radius:5px; background:#e7f4eb; color:#225a3d; }
.message:empty { display:none; }
.message--error { border-color:#d29b96; background:#fff0ef; color:#8d332d; }
.layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.layout--wide { grid-template-columns:minmax(0,1.35fr) minmax(360px,.8fr); }
.layout > div { min-width:0; }
.panel { min-width:0; margin-bottom:20px; padding:22px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0; }
.metric { min-width:0; padding:16px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.metric span,.metric small { display:block; color:var(--muted); font-size:.875rem; }
.metric strong { display:block; color:var(--deep); font-size:1.38rem; }
.cardgrid,.product-grid,.checkgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.cardgrid--single { grid-template-columns:1fr; }
.card,.checkcard,.product-card,.box-card { min-width:0; padding:17px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.card.selected,.product-card.selected { border-color:#6e9880; background:#f0f8f3; }
.cardhead { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.cardhead strong { font-size:1.04rem; }
.status { display:inline-block; padding:3px 9px; border-radius:4px; background:#e6ece8; color:#3d4f45; font-size:.875rem; font-weight:700; }
.status.ok { background:#def1e7; color:var(--ok); }
.status.wait { background:#fff0d8; color:var(--wait); }
.status.bad { background:#f9e0e0; color:var(--bad); }
.kv { display:grid; grid-template-columns:minmax(120px,.75fr) minmax(0,1.55fr); gap:0 14px; margin:8px 0; }
.kv dt,.kv dd { margin:0; padding:9px 0; border-bottom:1px solid #e1e8e3; }
.kv dt { color:var(--muted); font-size:.875rem; font-weight:700; }
.fieldgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 15px; }
.fieldgrid > div { min-width:0; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:15px 0 7px; }
.notice { margin:14px 0; padding:14px 16px; border:1px solid #d4bf91; border-radius:5px; background:#fff9e9; }
.notice.teal { border-color:#a9beb3; background:#f0f7f3; }
.tasks { padding-left:22px; }
.tasks li { margin:8px 0; }
.checkgrid { margin:18px 0; }
.checkcard strong { display:block; margin-bottom:6px; }
.product-photo { overflow:hidden; margin:12px 0 16px; border:1px solid #bdcbc2; border-radius:5px; background:#f7f7f5; }
.product-photo img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; background:#f7f7f5; }
.product-photo figcaption { padding:7px 10px; background:#eef3ef; color:var(--muted); font-size:.875rem; font-weight:700; }
.allocation-list { display:grid; grid-template-columns:1fr; gap:16px; }
.allocation-card .allocation-body { display:grid; grid-template-columns:minmax(220px,.72fr) minmax(340px,1.28fr); gap:22px; align-items:start; }
.allocation-card .product-photo { margin:4px 0 0; }
.allocation-card .kv { margin-top:0; }
.event { margin-bottom:10px; padding:12px 14px; border-left:4px solid #6e9880; background:#f3f8f5; }
.event span { display:block; color:var(--muted); font-size:.875rem; }
.small,.footer { color:var(--muted); font-size:.875rem; }
.footer { margin-top:24px; }
details { margin:10px 0; padding:10px 12px; border:1px solid var(--line); background:#fff; }
summary { cursor:pointer; font-weight:700; }
@media (max-width:1050px) { .layout,.layout--wide { grid-template-columns:1fr; } }
@media (max-width:820px) { .allocation-card .allocation-body { grid-template-columns:1fr; } }
@media (max-width:760px) {
  .app { padding:14px; } .mast { padding:20px; } h1 { font-size:1.42rem; }
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metrics,.cardgrid,.product-grid,.checkgrid { grid-template-columns:1fr; }
  .panel { padding:16px; } .fieldgrid { grid-template-columns:1fr; }
  .kv { grid-template-columns:105px minmax(0,1fr); }
}