/* 飾らない。白地・黒の細い罫線・標準的な部品。表計算ソフトのような見た目。 */
:root {
  --ink: #000;
  --sub: #555;
  --line: #999;
  --head: #e6e6e6;
  --desk: #c8c8c8;
  --font: "BIZ UDPGothic", "BIZ UDGothic", "Yu Gothic UI", "Hiragino Sans", Meiryo, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font: 15px/1.6 var(--font); }
button, select, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.top { padding: 12px 16px; border-bottom: 1px solid var(--ink); }
.top h1 { margin: 0; font-size: 20px; }
.top p { margin: 2px 0 0; font-size: 13px; color: var(--sub); }

.layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); align-items: start; }
.panel { padding: 12px 16px 40px; border-right: 1px solid var(--ink); position: sticky; top: 0; max-height: 100vh; overflow-y: auto; }
.preview { background: var(--desk); padding: 10px 16px 60px; min-height: 100vh; }

fieldset { margin: 0 0 12px; padding: 8px 10px 10px; border: 1px solid var(--ink); border-radius: 0; min-width: 0; }
legend { padding: 0 4px; font-weight: 700; font-size: 14px; }
.line { display: flex; align-items: center; gap: 8px; margin: 4px 0; flex-wrap: wrap; }
.line label { flex: 1; min-width: 0; }
.blk { display: block; margin: 6px 0; }
.grp { margin: 6px 0; }
.grp > b { display: block; font-size: 13px; }
.note { margin: 4px 0 0; font-size: 12px; color: var(--sub); line-height: 1.5; }
.quick { margin: 6px 0 0; font-size: 13px; }
.quick a { margin-right: 8px; }
a { color: var(--ink); text-underline-offset: 2px; }

select, input[type=text], textarea {
  width: 100%; max-width: 100%; padding: 5px 6px; background: #fff; border: 1px solid var(--ink); border-radius: 0; font-size: 15px;
}
.panel select { width: auto; max-width: 100%; }
.line label { flex: none; }
label > select { margin-top: 2px; }
textarea { resize: vertical; }
button { padding: 4px 12px; background: #f2f2f2; border: 1px solid var(--ink); border-radius: 0; cursor: pointer; font-size: 14px; }
button:hover { background: #e2e2e2; }
button.go { background: var(--ink); color: #fff; font-weight: 700; }
button.go:hover { background: #333; }
.chk { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; padding: 3px 0; cursor: pointer; }
.chk input { width: 18px; height: 18px; margin: 0; accent-color: #000; }
.chk small { color: var(--sub); }
.grp .chk { display: flex; }
:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

.cols { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid var(--line); }
.cols li { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-bottom: 1px solid var(--line); }
.cols li:last-child { border-bottom: 0; }
.cols .nm { flex: 1; min-width: 0; }
.cols button { padding: 1px 8px; font-size: 13px; }

.bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; margin-bottom: 4px; }
.acts { display: flex; gap: 6px; }
.preview .note { margin-bottom: 10px; color: #333; }

.pagebox { position: relative; flex: none; background: #fff; border: 1px solid #777; }

/* ===== 紙面(大学シャトルバス時刻表にそろえる: 白黒・細い罫線・太字の時刻・MSゴシック系) ===== */
.paper { font-family: "MS PGothic", "ＭＳ Ｐゴシック", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 7pt; line-height: 1.2; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sheet { width: 210mm; height: 297mm; padding: 10mm 9mm 0; background: #fff; position: relative; overflow: hidden; }
#measure { position: absolute; left: -9999px; top: 0; width: 192mm; visibility: hidden; pointer-events: none; }

.paper .ttl { position: relative; text-align: center; font-weight: 700; font-size: 11pt; padding: 1mm 0 3mm; }
.paper .ttl.small { font-size: 8pt; padding-bottom: 1.5mm; }
.paper .ttl .dt { position: absolute; right: 0; top: -1mm; font-size: 6pt; }
.paper .pair { display: grid; grid-template-columns: minmax(0, 1fr) 6mm minmax(0, 1fr); }
.paper .pair.one { grid-template-columns: minmax(0, 1fr); }
.paper .half { display: grid; min-width: 0; border-left: 0.2mm solid #000; border-right: 0.2mm solid #000; border-bottom: 0.2mm solid #000; }
.paper .half > div { min-width: 0; border-left: 0.2mm solid #000; padding: .3mm .8mm; min-height: var(--rowh, 5mm); display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: var(--fs, 7.5pt); font-variant-numeric: tabular-nums; white-space: nowrap; }
.paper .half > div:first-child { border-left: 0; }
.paper .half > div.nt { justify-content: flex-start; text-align: left; font-size: calc(var(--fs, 7.5pt) * .75); white-space: nowrap; overflow: hidden; }
.paper .half.gray > div { background: #dadada; }
.paper .half.none { border: 0; }
.paper .half.lab { border: 0; }
.paper .half.lab > div { border: 0; min-height: 0; justify-content: flex-start; padding: 0 0 .6mm 0; font-weight: 400; font-size: 6.5pt; white-space: nowrap; overflow: visible; }
.paper .half.lab > div b { font-size: 7.5pt; margin-right: 1mm; }
.paper .half.hd { border-top: 0.2mm solid #000; }
.paper .half.hd > div { min-height: 0; padding: .6mm .5mm; font-weight: 400; white-space: normal; }
.paper .hc { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.paper .hc span { font-size: 6pt; }
.paper .hc small { font-size: 4.6pt; }
.paper .no { display: flex; align-items: center; justify-content: center; font-size: 5.5pt; }
.paper .empty { border: 0.2mm solid #000; padding: 4mm; text-align: center; font-size: 8pt; }
.paper .ft { position: absolute; left: 10mm; right: 10mm; bottom: 5mm; display: flex; justify-content: flex-end; align-items: baseline; gap: 4mm; font-size: 7pt; }
.paper .ft .br { color: #888; font-size: 6.5pt; letter-spacing: .04em; }

.mbar { display: none; }
.toast { position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); background: #000; color: #fff; padding: 6px 14px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50; }
.toast.on { opacity: 1; }

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .panel { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--ink); padding: 12px 12px 20px; }
  .preview { min-height: 0; padding: 10px 8px 80px; }
  .acts .go { display: none; }
  .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; gap: 6px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #000; }
  .mbar button { flex: 1; padding: 10px 4px; font-size: 14px; }
  .mbar button.go { flex: 1.5; }
}

@page { size: A4 portrait; margin: 0; }
@media print {
  html, body { background: #fff !important; }
  .top, .panel, .bar, .preview > .note, .mbar, .toast, #measure { display: none !important; }
  .layout { display: block; }
  .preview { padding: 0 !important; background: none !important; min-height: 0; }
  .sheets { display: block; }
  .pagebox { width: 210mm !important; height: 296mm !important; border: 0 !important; break-after: page; page-break-after: always; overflow: hidden; }
  .pagebox:last-child { break-after: auto; page-break-after: auto; }
  .sheet { transform: none !important; height: 296mm; }
}
.chk.dim { color: var(--sub); cursor: default; }
.chk.dim input { accent-color: #999; }

.fold { margin: 0 0 12px; border: 1px solid var(--ink); }
.fold > summary { list-style: none; cursor: pointer; padding: 6px 10px; font-weight: 700; font-size: 14px; display: flex; align-items: baseline; gap: 6px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "▽"; font-size: 12px; }
.fold[open] > summary::before { content: "△"; }
.fold > summary small { margin-left: auto; font-weight: 400; color: var(--sub); font-size: 12px; }
.fold .in { padding: 2px 10px 10px; border-top: 1px solid var(--line); }
input[type=range] { width: 100%; accent-color: #000; display: block; }
.blk output { font-weight: 700; margin-left: 6px; }

.chips { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.chips li { border: 1px solid var(--ink); padding: 1px 4px 1px 8px; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.chips li.note { border: 0; padding: 0; }
.chips button { padding: 0 6px; line-height: 1.3; font-size: 14px; }

/* 広告(1枚ずつ表示して、数秒でスライド。指でもスライドできる。画面だけで、印刷には出ない) */
.ad { width: 100%; max-width: 380px; margin: 18px 0 0; }
.ad .adl { font-size: 10px; color: var(--sub); }
.adslides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.adslides::-webkit-scrollbar { display: none; }
.adslides a { flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; line-height: 1.3; height: 96px; }
.adslides img { display: block; flex: none; width: 100%; aspect-ratio: 11 / 2; height: auto; object-fit: contain; background: #eee; }
.adc { flex: none; font-size: 12px; font-weight: 700; color: var(--ink); }
.adt { width: 100%; flex: 1 1 0; min-height: 0; border: 1px solid var(--ink); padding: 8px 10px; text-align: center; color: var(--ink); text-decoration: none; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.adt b { font-size: 14px; }
.adt small { font-size: 11px; color: var(--sub); }
.addots { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.addots button { width: 14px; height: 4px; padding: 0; border: 0; background: #c9c9c9; cursor: pointer; }
.addots button.on { background: #000; }
.ad .adn { margin: 3px 0 0; font-size: 10px; color: var(--sub); line-height: 1.4; }
@media print { .ad { display: none !important; } }
.adslides a { text-decoration: none; }

/* 紙面ビューア(拡大縮小・移動) */
.zbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; }
.zbar button { min-width: 36px; padding: 3px 10px; }
.zbar output { min-width: 48px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.zbar .zh { font-size: 11px; color: #333; flex: 1 1 200px; }
.vp { position: relative; overflow: hidden; height: calc(100vh - 190px); min-height: 420px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; border: 1px solid #777; background: #b9b9b9; }
.vp.grab { cursor: grabbing; }
.stage { width: 210mm; transform-origin: 0 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.stage .pagebox { flex: none; }
@media (max-width: 900px) { .vp { height: 70vh; min-height: 360px; } }
@media print {
  .zbar { display: none !important; }
  .vp { height: auto !important; min-height: 0 !important; overflow: visible !important; border: 0 !important; background: none !important; }
  .stage { transform: none !important; width: auto !important; display: block !important; }
}

.preview, .panel, .vp { min-width: 0; max-width: 100%; }
html, body { overflow-x: hidden; }