:root {
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  color:#342b27; background:#f4eee9;
  --ink:#342b27; --deep:#683326; --accent:#9a5438; --paper:#fff;
  --line:#d8cbc2; --muted:#70635c; --wash:#fbf7f4;
  --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:#8b432d; 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:#88766c; background:#fff; color:var(--deep); }
:focus-visible { outline:3px solid #dca731; 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 #ad9d93; 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:#f0e6e1; 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:#a87561; background:#f4e5de; color:#683326; 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:#b77960; background:#fff7f3; }
.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:#eee8e4; color:#51463f; 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 #ebe3de; }
.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.rose { border-color:#d1afa1; background:#fff5f1; }
.tasks { padding-left:22px; }
.tasks li { margin:8px 0; }
.product-photo { overflow:hidden; margin:12px 0 16px; border:1px solid #cdbfb5; border-radius:5px; background:#faf8f6; }
.product-photo img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; background:#faf8f6; }
.product-photo figcaption { padding:7px 10px; background:#f4eeea; 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(240px,.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 #a87561; background:#fbf6f2; }
.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); }
}