:root {
  --scale: 1;
  --ink: #0e1723;
  --ink-2: #45566a;
  --paper: #fff;
  --field: #e9eef3;
  --line: #bcc8d4;
  --signal: #0b5fba;
  --go: #0b6b3a;
  --flag: #a5231c;
  --tap: 76px;
  --radius: 14px;
  --font-body: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, "Noto Sans JP", Meiryo, sans-serif;
  --font-num: ui-monospace, "SF Mono", Bahnschrift, "DIN Alternate", Consolas, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; min-width: 0; margin: 0; padding: 0; }
body {
  background: var(--field);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: calc(20px * var(--scale));
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
button, input { font-family: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 4px solid var(--signal); outline-offset: 3px; }

.app {
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 1100px;
  margin: 0 auto;
  background: var(--paper);
  overflow-x: clip;
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 3px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  min-width: 0;
}
.bar__name { flex: 1 1 145px; min-width: 0; font-size: .8em; font-weight: 700; letter-spacing: .04em; }
.bar__name span { display: block; font-size: .68em; font-weight: 400; color: var(--ink-2); letter-spacing: .16em; }
.pending {
  min-height: var(--tap);
  max-width: 100%;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  border: 3px solid var(--flag);
  border-radius: 10px;
  color: var(--flag);
  font-size: .78em;
  font-weight: 700;
  white-space: nowrap;
  background: var(--paper);
}
.tool {
  flex: 0 0 auto;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 12px;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--line);
  border-radius: 10px;
  font-size: .8em;
  font-weight: 700;
}

main { width: 100%; min-width: 0; flex: 1; padding: 24px 20px 32px; display: flex; flex-direction: column; }
.home { margin: auto 0; display: grid; gap: 18px; }
.home__lead { font-size: 1.6em; font-weight: 700; line-height: 1.3; margin: 0 0 14px; }
.big {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 110px;
  padding: 20px 24px;
  text-align: left;
  border: none;
  border-radius: var(--radius);
  background: var(--signal);
  color: #fff;
  font-size: 1.35em;
  font-weight: 700;
}
.big--quiet { background: var(--paper); color: var(--ink); border: 3px solid var(--line); min-height: 96px; font-size: 1.2em; }
.big:active, .pick:active { transform: translateY(2px); }
.big__ico { font-size: 1.5em; line-height: 1; }

.prog { width: 100%; min-width: 0; display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.prog__n { font-family: var(--font-num); font-size: 1.5em; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prog__n em { font-style: normal; color: var(--ink-2); font-size: .6em; }
.prog__track { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; }
.prog__seg { flex: 1; height: 14px; border-radius: 7px; background: var(--field); border: 2px solid var(--line); }
.prog__seg.on { background: var(--signal); border-color: var(--signal); }

.q { min-width: 0; flex: 1; }
.q__label { font-size: clamp(1.55em, 8vw, 2em); font-weight: 700; line-height: 1.25; margin: 0 0 18px; letter-spacing: .01em; overflow-wrap: anywhere; }
.section-title { font-size: 1.5em; line-height: 1.25; margin: 0 0 14px; }
.grid { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 14px; }
.grid--kw { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.quantity-control {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 76px;
  align-items: stretch;
  gap: clamp(6px, 2vw, 12px);
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}
.quantity-btn {
  min-width: 0;
  min-height: 82px;
  padding: 8px;
  border: 3px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-num);
  font-size: 2em;
  font-weight: 700;
}
.quantity-btn:disabled { opacity: .38; cursor: not-allowed; }
.quantity-value { position: relative; min-width: 0; display: block; }
.quantity-input {
  appearance: textfield;
  height: 100%;
  min-height: 82px;
  padding: 12px 48px 12px 12px;
  text-align: center;
  font-family: var(--font-num);
  font-size: clamp(1.6em, 9vw, 2.5em);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.quantity-input::-webkit-inner-spin-button,
.quantity-input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.quantity-value > span {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: 1.1em;
  font-weight: 700;
  pointer-events: none;
}
.pick {
  min-height: var(--tap);
  padding: 14px 16px;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--line);
  border-radius: var(--radius);
  font-size: 1.05em;
  font-weight: 700;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pick .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.pick[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: #fff; }
.pick[aria-pressed="true"]::after { content: "✓"; font-size: 1.2em; }
.answer {
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 3px dashed var(--line);
  border-radius: var(--radius);
  font-size: 1.6em;
  font-weight: 700;
  min-height: 96px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--field);
  overflow-wrap: anywhere;
}
.answer.filled { border-style: solid; border-color: var(--signal); background: var(--paper); }
.field {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--tap);
  padding: 14px 18px;
  font-size: 1.3em;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--line);
  border-radius: var(--radius);
}
.field:focus { border-color: var(--signal); }
.sub { font-size: .8em; color: var(--ink-2); margin: 22px 0 8px; font-weight: 700; letter-spacing: .06em; }

.slip { border: 3px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.slip__row { display: flex; align-items: stretch; border-bottom: 2px solid var(--line); }
.slip__row:last-child { border-bottom: none; }
.slip__k {
  width: 32%;
  min-width: 150px;
  padding: 16px;
  background: var(--field);
  font-size: .85em;
  font-weight: 700;
  color: var(--ink-2);
  display: flex;
  align-items: center;
}
.slip__v {
  flex: 1;
  min-width: 0;
  padding: 16px;
  font-size: 1.2em;
  font-weight: 700;
  display: flex;
  align-items: center;
  overflow-wrap: anywhere;
}
.slip__fix { padding: 12px; display: flex; align-items: center; }
.fix {
  min-height: var(--tap);
  padding: 0 16px;
  background: var(--paper);
  border: 3px solid var(--signal);
  color: var(--signal);
  border-radius: 10px;
  font-weight: 700;
  font-size: .8em;
}
.cancel-btn {
  min-height: var(--tap);
  margin-top: 28px;
  padding: 12px 18px;
  background: var(--paper);
  color: var(--flag);
  border: 3px solid var(--flag);
  border-radius: var(--radius);
  font-size: 1em;
  font-weight: 700;
}

.done { margin: auto 0; text-align: center; }
.done__ico { font-size: 4em; line-height: 1; }
.done__t { font-size: 1.8em; font-weight: 700; margin: 8px 0 4px; }
.done__d { color: var(--ink-2); font-size: .9em; margin: 0; overflow-wrap: anywhere; }

.range { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 20px; }
.list-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.list-tab { min-width: 0; min-height: var(--tap); padding: 10px 14px; border: 3px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--paper); font-size: 1em; font-weight: 700; }
.list-tab[aria-pressed="true"] { border-color: var(--signal); color: #fff; background: var(--signal); }
.range__io { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 320px; }
.range__io .field { font-size: 1.05em; padding: 10px 14px; }
.range__sep { font-weight: 700; }
.mv {
  min-height: var(--tap);
  padding: 0 18px;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--line);
  border-radius: var(--radius);
  font-size: .9em;
  font-weight: 700;
  white-space: nowrap;
}

.tbl-wrap { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .9em; }
th, td { border: 2px solid var(--line); padding: 14px 12px; text-align: left; white-space: nowrap; }
th { background: var(--field); font-size: .85em; color: var(--ink-2); }
td.n { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
tr.row { cursor: pointer; }
tr.row:hover td, tr.row:focus td { background: var(--field); }
tr.row td.go { text-align: right; color: var(--signal); font-weight: 700; }
.restore { min-height: var(--tap); padding: 8px 16px; border: 3px solid var(--go); border-radius: 10px; color: var(--go); background: var(--paper); font-size: .9em; font-weight: 700; white-space: nowrap; }
.restore:disabled { opacity: .5; }
.empty { padding: 40px 16px; text-align: center; color: var(--ink-2); border: 3px dashed var(--line); border-radius: var(--radius); }
.msg { padding: 16px; border-radius: var(--radius); background: var(--field); font-size: .9em; margin-bottom: 16px; }
.msg--err { background: var(--flag); color: #fff; }

.pending-list { display: grid; gap: 18px; min-width: 0; }
.pending-card { min-width: 0; padding: 16px; border: 3px solid var(--line); border-radius: var(--radius); }
.pending-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.pending-card__head strong { font-size: 1.15em; }
.pending-card__head span { color: var(--ink-2); font-size: .78em; }
.pending-card__data { margin: 0 0 14px; border: 2px solid var(--line); border-radius: 10px; overflow: hidden; }
.pending-card__data > div { display: grid; grid-template-columns: minmax(88px, 30%) minmax(0, 1fr); border-bottom: 2px solid var(--line); }
.pending-card__data > div:last-child { border-bottom: 0; }
.pending-card__data dt, .pending-card__data dd { margin: 0; padding: 10px 12px; overflow-wrap: anywhere; }
.pending-card__data dt { color: var(--ink-2); background: var(--field); font-size: .8em; font-weight: 700; }
.pending-card__data dd { font-weight: 700; }
.retry { width: 100%; min-height: var(--tap); padding: 10px 16px; border: 3px solid var(--signal); border-radius: var(--radius); color: var(--signal); background: var(--paper); font-size: 1em; font-weight: 700; }
.retry:disabled { opacity: .5; }

.act {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  gap: 14px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 3px solid var(--line);
  width: 100%;
  min-width: 0;
}
.act button { min-width: 0; min-height: 88px; padding: 10px clamp(10px, 3vw, 22px); border-radius: var(--radius); font-size: clamp(1em, 4.5vw, 1.25em); font-weight: 700; border: none; white-space: normal; }
.act .back { flex: 0 1 36%; background: var(--paper); color: var(--ink); border: 3px solid var(--line); }
.act .next { flex: 1 1 auto; background: var(--signal); color: #fff; }
.act .next.go { background: var(--go); }
.act.act--single .back { flex: 1 1 100%; }
.act button:disabled { opacity: .38; cursor: not-allowed; }
.hide { display: none !important; }

.sheet {
  background: #fff;
  color: #000;
  padding: 14mm;
  margin: 0 auto 10mm;
  width: 210mm;
  min-height: 297mm;
  box-shadow: 0 0 0 2px var(--line);
  display: flex;
  flex-direction: column;
}
.sheet h1 { font-size: 20pt; margin: 0 0 2mm; letter-spacing: .1em; }
.sheet .meta { font-size: 10pt; color: #222; margin: 0 0 6mm; display: flex; justify-content: space-between; gap: 8mm; }
.sheet table { font-size: 10.5pt; width: 100%; }
.sheet th, .sheet td { border: 1px solid #000; padding: 2.5mm; color: #000; }
.sheet th { background: #eaeaea; }
.sheet .date-col { width: 26mm; }
.sheet .maker-col { width: 28mm; }
.sheet .kw-col { width: 16mm; }
.sheet .quantity-col { width: 16mm; }
.sheet .person-col { width: 30mm; }
.sheet .pg { margin-top: auto; padding-top: 4mm; text-align: right; font-size: 10pt; font-family: var(--font-num); }
.scroll-x { max-width: 100%; overflow-x: auto; padding-bottom: 10px; }

@page { size: A4 portrait; margin: 0; }

@media (max-width: 620px) {
  .bar { gap: 8px; padding-inline: 10px; }
  main { padding: 20px 14px 28px; }
  .range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .range__io { grid-column: 1 / -1; grid-row: 1; min-width: 0; flex-direction: column; align-items: stretch; }
  .range__sep { text-align: center; line-height: 1; }
  .mv { min-width: 0; padding-inline: 8px; }
  #prevM { grid-column: 1; grid-row: 2; }
  #nextM { grid-column: 2; grid-row: 2; }
  .slip__row { flex-wrap: wrap; }
  .slip__k { min-width: 110px; }
  .slip__fix { width: 100%; justify-content: flex-end; border-top: 2px solid var(--line); }
  .act { gap: 8px; padding-inline: 10px; }
  .act .back { flex-basis: 40%; }
}

@media (max-width: 420px) {
  .bar__name { flex-basis: 120px; font-size: .72em; }
  .tool { padding-inline: 8px; }
  .pending { order: 3; width: 100%; justify-content: center; }
  .prog { gap: 8px; }
  .prog__n { font-size: 1.2em; }
  .prog__track { gap: 3px; }
  .prog__seg { height: 12px; }
  .answer { min-height: var(--tap); padding: 14px; font-size: 1.25em; }
  .field { padding-inline: 12px; font-size: 1.1em; }
  .quantity-input { padding-right: 44px; font-size: 1.6em; }
  .act button { font-size: 1em; padding-inline: 8px; }
}

@media print {
  body { background: #fff; font-size: 10.5pt; }
  .app { max-width: none; }
  .bar, .act, .noprint { display: none !important; }
  main { padding: 0; }
  .scroll-x { overflow: visible; padding: 0; }
  .sheet {
    width: auto;
    min-height: 0;
    box-shadow: none;
    padding: 12mm;
    margin: 0;
    break-after: page;
    page-break-after: always;
  }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}