/* 「連番の整理券・引換券」の画面。共通の部品(入力・結果の数字・注意)と色・大きさの変数は、src/style.css。ここは、この道具だけの物(紙は、いつも白地に黒)。 */
.options { --opt-min: 15rem; }
/* 紙の向き・番号の大きさ: 見出し(legend)つきの小さな組。丸は横に並べて、箱を高くしない */
.group { border: 0; padding: 0; margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); }
.group legend { padding: 0; font-size: var(--fs-s); }
/* 欄のそばの誤りの文。欄の枠も変える(色だけに頼らず、文でも示す) */
.field-msg { margin: 0; color: var(--error-text); font-size: var(--fs-s); font-weight: 700; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--error-text); box-shadow: 0 0 0 1px var(--error-text); }
.field input[type="text"], .field select { width: 100%; max-width: 22rem; }
.printbox { margin-top: var(--sp-4); }
.printbox .actions { margin-top: 0.6rem; }
#draw-box { margin-top: var(--sp-4); }
#draw-box .actions { margin-top: 0.6rem; }
table.draw-table { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--fs-s); }
table.draw-table th, table.draw-table td { border: 1px solid var(--line); padding: 0.2rem 0.8rem; text-align: left; white-space: nowrap; overflow-wrap: normal; }
table.draw-table thead th { background: var(--bg); }

/* 紙の送り */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.4rem 0; }
.pager-label { font-variant-numeric: tabular-nums; min-width: 8rem; text-align: center; }

/* 紙(A4)。画面では、枠の幅に合わせて縮めて見せる(--u=紙の1mm にあたる長さ。印刷では本物の 1mm)。
   券は紙の端から 8mm 内側に並べる(プリンターが端まで刷れなくても、切れない) */
.sheet-frame { container-type: inline-size; width: 100%; margin-top: 0.4rem; }
.sheet-frame.portrait { max-width: 32rem; }
.sheet-frame.landscape { max-width: 46rem; }
.sheet {
  --u: calc(100cqw / 210); --pw: calc(210 * var(--u)); --ph: calc(297 * var(--u));
  --cw: calc((var(--pw) - 16 * var(--u)) / var(--cols)); --ch: calc((var(--ph) - 16 * var(--u)) / var(--rows));
  --k: 0.36;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  box-sizing: border-box; width: 100%; aspect-ratio: 210 / 297; padding: calc(8 * var(--u));
  background: #fff; color: #000; border: 1px solid #999; box-shadow: 0 1px 4px rgb(0 0 0 / 25%); overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif; line-height: 1.15;
}
.sheet.landscape {
  --u: calc(100cqw / 297); --pw: calc(297 * var(--u)); --ph: calc(210 * var(--u));
  aspect-ratio: 297 / 210;
}
/* 番号の大きさ(大・中・小)。--k=高さに対する割合、--kw=券の部分の幅に対する割合(半券ありは幅の側が先に効くので、こちらも変える) */
.sheet { --kw: 0.84; }
.sheet.size-medium { --k: 0.28; --kw: 0.66; }
.sheet.size-small { --k: 0.2; --kw: 0.5; }
/* 券1枚の中の1つの部分の幅(半券があれば半分) */
.sheet { --pwid: var(--cw); }
.sheet.has-stub { --pwid: calc(var(--cw) / 2); }

.ticket { display: flex; min-width: 0; min-height: 0; overflow: hidden; box-sizing: border-box; break-inside: avoid; page-break-inside: avoid; }
/* 切り取り線: 隣の券と線が二重にならないよう、上と左だけに引き、端の券だけ右と下にも引く */
.sheet.cut .ticket { border-top: calc(0.25 * var(--u)) dashed #000; border-left: calc(0.25 * var(--u)) dashed #000; }
.sheet.cut .ticket.last-col { border-right: calc(0.25 * var(--u)) dashed #000; }
.sheet.cut .ticket.last-row { border-bottom: calc(0.25 * var(--u)) dashed #000; }

.part { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--ch) * 0.02); padding: calc(var(--ch) * 0.04) calc(var(--pwid) * 0.05); text-align: center; overflow: hidden; }
/* 半券との境目: ミシン目風の点線 */
.part.stub { border-left: calc(0.35 * var(--u)) dotted #000; }
.t-num { font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; font-size: min(calc(var(--ch) * var(--k)), calc(var(--pwid) * var(--kw) / var(--nw))); }
.t-word { white-space: nowrap; font-size: min(calc(var(--ch) * 0.1), calc(var(--pwid) * 0.84 / var(--ww))); }
/* 題と一言は、長いと折り返し、字を小さくして2行に収める。小さくするのは 3mm(MIN_TEXT_MM)まで。それより長いときは、3mm のまま行を増やして折り返す */
.t-title, .t-note { overflow-wrap: anywhere; max-width: 100%; }
.t-title { font-weight: 700; font-size: max(calc(3 * var(--u)), min(calc(var(--ch) * 0.09), calc(var(--pwid) * 0.84 * 1.8 / var(--tw)))); }
.t-note { font-size: max(calc(3 * var(--u)), min(calc(var(--ch) * 0.085), calc(var(--pwid) * 0.84 * 1.8 / var(--ow)))); }

/* 「スマホだけで順番を呼ぶ版(まだ有りません)」の案内(結果の後ろ。印刷には出ない) */
.call { border: 1px dashed var(--line); border-radius: var(--r-m); padding: 0.4rem 0.9rem 0.8rem; margin-top: var(--sp-5); }
.call h3 { margin-top: 0.4rem; }
.call-count { margin: 0.3rem 0 0; }
.call-thanks { font-weight: 700; margin-bottom: 0; }
.call-thanks:empty { display: none; }

/* 抽選の控え(印刷のときだけ) */
.print-area { display: none; }
.draw-sheet { color: #000; background: #fff; }
.draw-list { column-count: 4; column-gap: 8mm; font-variant-numeric: tabular-nums; }
.draw-item { break-inside: avoid; padding: 0.5mm 0; border-bottom: 0.2mm solid #999; font-size: 10pt; }

/* 印刷: 全部の紙(印刷の直前に作る .print-area)だけを出す。結果が新しいときだけ(html.nt-print)。紙は1枚ずつ改ページし、券は途中で割れない */
@page nt-p { size: A4 portrait; margin: 0; }
@page nt-l { size: A4 landscape; margin: 0; }
@page nt-d { size: A4 portrait; margin: 15mm; }
@media print {
  html.nt-print header.site, html.nt-print footer.site, html.nt-print .skip,
  html.nt-print main .wrap > :not(#tool), html.nt-print #tool > :not(#result), html.nt-print .no-print,
  html.nt-print #result > :not(#print-area) { display: none !important; }
  html.nt-print, html.nt-print body { background: #fff; color: #000; }
  html.nt-print body { display: block; min-height: 0; }
  html.nt-print main { padding: 0; }
  html.nt-print .wrap { max-width: none; padding: 0; }
  html.nt-print .tool { border: 0; border-radius: 0; padding: 0; margin: 0; background: none; }
  html.nt-print .result { margin: 0; padding: 0; }
  html.nt-print .result.old { opacity: 1; }
  html.nt-print #print-area { display: block; margin: 0; }
  html.nt-print .sheet { --u: 1mm; width: 210mm; height: 296mm; aspect-ratio: auto; border: 0; box-shadow: none; margin: 0; page: nt-p; break-inside: avoid; }
  html.nt-print .sheet.landscape { width: 297mm; height: 209mm; page: nt-l; }
  html.nt-print .sheet + .sheet, html.nt-print .sheet + .draw-sheet { break-before: page; }
  html.nt-print .draw-sheet { page: nt-d; }
}