/* テーブル割当タブ（事前予約のガントチャート。039・040。2026-09-27、ユーザー指示）。描画は admin-reservation-board.js。
   行は「テイクアウト」（見るだけ）・「テーブル割当前」・各テーブル、横軸はその日の時刻です。予約1件は矢羽根1本から始まり、
   分割すると何本にもなります。
   ★ テイクアウトの矢羽根（.resv-bar.is-takeout）は動かせないので touch-action:none にしません（iPadで指が乗っても
     表をスクロールできるように）。
   ★ 位置と長さは JS が数字だけを渡し（--resv-start / --resv-len は「横軸の始まりから何分か」、--resv-lane は段）、
     px への換算はここ（--resv-ppm＝1分あたりの px）だけで行います。
   ★ 見出しの時刻の行（上）とテーブル名の列（左）は、.resv-scroll の中で position:sticky で残します。
     そのため横と縦のスクロールは .resv-scroll が1つで受け持ちます（ページ全体を横に流さない）。
   ★ 課金制限中でも、ボタンや矢羽根を止める規則は書きません。ドラッグは startPointerDrag() の入口で止まり、
     小窓（#reservation-seat-dialog）からの変更は使えるためです。止まっていることは .resv-restricted-note で伝えます。 */

.reservation-board {
    --resv-label-w: 132px;
    display: grid;
    gap: 10px;
}

.reservation-board.is-loading {
    opacity: .6;
}

.resv-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #f7faf9;
}

.resv-toolbar > label {
    flex: 0 1 200px;
    min-width: 0;
}

/* ---- iPad（Safari）の日付・時刻の欄（2026-10-05、ユーザー報告：タブレットの横画面で表示日と席の使用開始が崩れる） ----
   Safari の date / time の欄は、既定の見た目（appearance:auto）のままだと width・height・padding を守らず、
   中身の幅で広がって隣の欄やボタンに重なり、高さもほかの欄とずれ、値が中央に寄ります。
   ・appearance:none で、ほかの入力欄と同じ枠・余白・高さ（44px＝指で押せる大きさ）にそろえます。
   ・min-width:0 を、欄とそれを包む label の両方に付けます。label（admin.css で display:grid）の最小幅は中の欄の
     最小幅で決まるので、片方だけでは2列の小窓（.resv-dialog-times）の列からはみ出します。
   ・値（::-webkit-date-and-time-value）は左寄せにし、Safari が足す上下の余白を消します。 */
.resv-toolbar input[type="date"],
.resv-dialog-times input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    display: block;
    line-height: 1.4;
    max-width: 100%;
    min-height: 44px;
    min-width: 0;
}

.resv-toolbar input[type="date"]::-webkit-date-and-time-value,
.resv-dialog-times input[type="time"]::-webkit-date-and-time-value {
    margin: 0;
    text-align: left;
}

.resv-dialog-times > label {
    min-width: 0;
}

.resv-day-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.resv-day-steps button {
    min-height: 44px;
    padding: 9px 13px;
}

.resv-summary,
.resv-empty,
.resv-no-tables {
    margin: 0;
}

.resv-empty {
    color: var(--muted);
    font-weight: 800;
}

.resv-error {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff0f0;
    color: var(--danger);
    font-weight: 800;
}

/* 同じテーブルで時間が重なっているときの警告。重なっても置けます（赤くして知らせるだけ。ユーザー決定）。 */
.resv-warning {
    margin: 0;
    padding: 10px 14px;
    border: 1px solid #f0b8b8;
    border-radius: 10px;
    background: #fff0f0;
    color: var(--danger);
    font-weight: 900;
}

/* 課金制限中だけ出す注記（body.billing-restricted は admin.js の renderBillingBanner() が付けます）。 */
.resv-restricted-note {
    display: none;
    margin: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fdf6ec;
    color: #7c5316;
    font-size: 13px;
    font-weight: 800;
}

.billing-restricted .resv-restricted-note {
    display: block;
}

.billing-restricted .resv-bar,
.billing-restricted .resv-resize {
    cursor: pointer;
}

/* ---- 表の枠（横と縦のスクロール） ---- */
.resv-scroll {
    overflow: auto;
    /* 画面の高さに合わせますが、低い画面でも3行ほどは見えるようにします。 */
    max-height: max(260px, calc(100vh - var(--app-header-height, 81px) - 180px));
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    overscroll-behavior: contain;
}

.resv-grid {
    position: relative;
    width: calc(var(--resv-label-w) + var(--resv-minutes) * var(--resv-ppm));
}

.resv-head,
.resv-row {
    display: flex;
}

.resv-head {
    position: sticky;
    top: 0;
    z-index: 4;
    height: 34px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
}

.resv-head-corner,
.resv-row-label {
    position: sticky;
    left: 0;
    z-index: 3;
    flex: 0 0 var(--resv-label-w);
    width: var(--resv-label-w);
    border-right: 1px solid var(--line);
    background: var(--card);
}

.resv-head-corner {
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.resv-head-track,
.resv-track {
    position: relative;
    flex: 0 0 calc(var(--resv-minutes) * var(--resv-ppm));
    width: calc(var(--resv-minutes) * var(--resv-ppm));
}

.resv-hour {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--resv-at) * var(--resv-ppm));
    display: flex;
    align-items: center;
    padding-left: 5px;
    border-left: 1px solid var(--line);
    color: #40504c;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

/* 営業時間。見出しの下の帯と、各行の背景に薄く塗ります。 */
.resv-open-band {
    position: absolute;
    bottom: 0;
    left: calc(var(--resv-start) * var(--resv-ppm));
    width: calc(var(--resv-len) * var(--resv-ppm));
    height: 4px;
    background: #9fd3c4;
}

.resv-open {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--resv-start) * var(--resv-ppm));
    width: calc(var(--resv-len) * var(--resv-ppm));
    background: rgba(8, 117, 99, .05);
    pointer-events: none;
}

.resv-row {
    border-bottom: 1px solid var(--line);
}

.resv-row:last-of-type {
    border-bottom: 0;
}

.resv-row-label {
    display: grid;
    align-content: center;
    gap: 2px;
    padding: 6px 10px;
    min-width: 0;
}

.resv-row-label strong {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resv-row-label small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.resv-row-label .resv-row-alert {
    color: var(--danger);
}

.resv-row.is-unassigned .resv-row-label,
.resv-row.is-unassigned .resv-track {
    background-color: #fbfaf4;
}

/* 「テイクアウト」の行（いちばん上。見るだけ）。色はテイクアウトの橙（注文・予約タブの区分の印と同じ系統）です。 */
.resv-row.is-takeout .resv-row-label,
.resv-row.is-takeout .resv-track {
    background-color: #fff8ef;
}

.resv-row.is-takeout .resv-row-label strong {
    color: #9a5300;
}

/* 行の高さは段の数だけ伸びます（重なる予約も全部見えるように）。目盛りは1時間ごとの線と15分ごとの薄い線。 */
.resv-track {
    height: calc(max(1, var(--resv-lanes)) * var(--resv-lane-h));
    background-image:
        repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(60 * var(--resv-ppm))),
        repeating-linear-gradient(to right, #eef3f1 0 1px, transparent 1px calc(15 * var(--resv-ppm)));
}

.resv-row.is-drop-target .resv-track {
    background-color: #eef8f4;
}

.resv-row.is-drop-target .resv-row-label {
    box-shadow: inset 4px 0 0 var(--brand);
}

/* ---- 矢羽根 ----
   外側（.resv-bar）は切り抜かない四角です。フォーカスの枠と、つかむ・押す当たり判定はここに付けます。
   形（矢羽根）は中の .resv-bar-shape を clip-path で切り、外の色（枠）と ::after の内の色（面）の2層で描きます。
   ★ touch-action:none が無いと、指を動かした瞬間にブラウザがスクロールを取り、pointercancel で終わります。
     .board-card（商品ボード）とは別のクラスにして、課金制限の規則や bindBoards() に拾われないようにします。 */
.resv-bar {
    position: absolute;
    left: calc(var(--resv-start) * var(--resv-ppm));
    width: calc(var(--resv-len) * var(--resv-ppm));
    top: calc(var(--resv-lane) * var(--resv-lane-h) + 4px);
    height: calc(var(--resv-lane-h) - 8px);
    z-index: 1;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.resv-bar-shape {
    --tip: min(12px, 25%);
    position: absolute;
    inset: 0;
    background: #087563;
    clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%, var(--tip) 50%);
    pointer-events: none;
}

.resv-bar-shape::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: #dff5ec;
    clip-path: polygon(0 0, calc(100% - var(--tip) + 1px) 0, 100% 50%, calc(100% - var(--tip) + 1px) 100%, 0 100%, calc(var(--tip) - 1px) 50%);
}

/* 1段目に時刻、2段目に人数・注文番号の末尾・支払いの印。右の余白は矢羽根の先（--tip）のぶんで、
   文字が切り抜いた外へはみ出して見えないようにします。 */
.resv-bar-label {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    height: 100%;
    padding: 0 14px 0 15px;
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    pointer-events: none;
}

.resv-bar-time,
.resv-bar-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resv-bar-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

.resv-bar-label .payment-badge {
    flex: none;
    padding: 0 5px;
    border-radius: 5px;
    font-size: 10px;
    line-height: 1.4;
}

.resv-bar:hover .resv-bar-shape {
    background: #075b4e;
}

.resv-bar:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

.resv-bar.is-overlap .resv-bar-shape {
    background: #b83535;
}

.resv-bar.is-overlap .resv-bar-shape::after {
    background: #fbe3e3;
}

.resv-bar.is-dragging {
    opacity: .35;
}

/* 動かしている間の写し。ポインターの真下の行を elementFromPoint() で探すので、当たり判定を持たせません。 */
.resv-bar.is-preview {
    z-index: 5;
    opacity: .85;
    pointer-events: none;
    cursor: grabbing;
}

.resv-bar.is-saving {
    opacity: .6;
}

/* 保存の応答を待っている矢羽根（送った位置に描きます）。返るまでつかめず押せません（admin-reservation-board.js）。 */
.resv-bar.is-pending {
    opacity: .6;
    pointer-events: none;
    cursor: progress;
}

.is-resv-dragging .resv-bar {
    cursor: grabbing;
}

/* テイクアウトの矢羽根（受取時刻から15分＝30px。見るだけ）。押すと「注文の詳細」が開きます。
   ★ touch-action は manipulation です（none にしない）。動かせない矢羽根に指が乗っても、表を縦横にスクロールできます。
   ★ 30px には時刻も入らないので、見せるのは注文番号の末尾（4桁）だけです。受取時刻・支払いの印は title と読み上げに
     入れてあり（admin-reservation-board.js の reservationTakeoutBarHtml()）、支払いの印の札はここで隠します。 */
.resv-bar.is-takeout {
    cursor: pointer;
    touch-action: manipulation;
}

.resv-bar.is-takeout .resv-bar-shape {
    background: #d97904;
}

.resv-bar.is-takeout .resv-bar-shape::after {
    background: #fde9cf;
}

.resv-bar.is-takeout:hover .resv-bar-shape {
    background: #a85c00;
}

.resv-bar.is-takeout .resv-bar-label {
    padding: 0 4px 0 3px;
    color: #6b3a00;
    font-size: 9px;
    letter-spacing: -.02em;
}

.resv-bar.is-takeout .resv-bar-number {
    overflow: hidden;
    white-space: nowrap;
}

.resv-bar.is-takeout .resv-bar-label .payment-badge {
    display: none;
}

.is-resv-dragging .resv-bar.is-takeout {
    cursor: pointer;
}

/* 店内QRの矢羽根（テーブルの行。見るだけ。2026-09-28）。押すと、その組の注文の一覧が開きます。
   色は店内QRコードの紫（注文・予約タブの区分の印 .fulfillment-badge.onsite_dine_in と同じ系統）です。
   ★ touch-action は manipulation です（none にしない。テイクアウトの矢羽根と同じ理由）。
   ★ 会計済みの組（最初の注文〜会計）は面を薄くして、まだ席にいる会計前の組と見分けます。 */
.resv-bar.is-onsite {
    cursor: pointer;
    touch-action: manipulation;
}

.resv-bar.is-onsite .resv-bar-shape {
    background: #5e35a2;
}

.resv-bar.is-onsite .resv-bar-shape::after {
    background: #eee7fb;
}

.resv-bar.is-onsite:hover .resv-bar-shape {
    background: #45247d;
}

.resv-bar.is-onsite .resv-bar-label {
    color: #3d1f70;
}

.resv-bar.is-onsite.is-settled .resv-bar-shape::after {
    background: #f8f5fd;
}

.resv-bar.is-onsite.is-settled .resv-bar-label {
    color: #6b5a8a;
}

.is-resv-dragging .resv-bar.is-onsite {
    cursor: pointer;
}

.resv-row-label .resv-row-onsite {
    color: #5e35a2;
}

/* 両端のつまみ（開始・終了だけを動かす）。
   ★ 幅は矢羽根の長さの2割まで（最大10px）です。いちばん短い15分（30px）の矢羽根では6pxずつになり、真ん中の
     18pxをつかめば動かせます（10px＋内側への広げ4pxのままだと、動かせるのは真ん中の2pxだけでした）。
   ★ つまみやすくする広い当たり判定（::before）は、矢羽根の外側へだけ4px足します（内側へ広げると胴体を食うため）。 */
.resv-resize {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: min(10px, calc(var(--resv-len) * var(--resv-ppm) * .2));
    cursor: ew-resize;
}

.resv-resize::before {
    content: '';
    position: absolute;
    inset: 0;
}

.resv-resize.is-start {
    left: 0;
}

.resv-resize.is-start::before {
    left: -4px;
}

.resv-resize.is-end {
    right: 0;
}

.resv-resize.is-end::before {
    right: -4px;
}

/* 時間をずらした予約の、元のご予約の位置（点線の枠）。押せません。 */
.resv-origin {
    position: absolute;
    left: calc(var(--resv-start) * var(--resv-ppm));
    width: calc(var(--resv-len) * var(--resv-ppm));
    top: calc(var(--resv-lane) * var(--resv-lane-h) + 4px);
    height: calc(var(--resv-lane-h) - 8px);
    display: flex;
    align-items: flex-end;
    padding: 0 6px 2px;
    overflow: hidden;
    border: 2px dashed #7b8a86;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    pointer-events: none;
}

/* 「いま」の縦線。左のテーブル名の列（z-index:3）の下をくぐります。 */
.resv-now {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--resv-label-w) + var(--resv-now, 0) * var(--resv-ppm));
    z-index: 2;
    width: 2px;
    background: var(--danger);
    pointer-events: none;
}

/* ---- 割当の小窓（index.php の #reservation-seat-dialog）。土台は .confirm-dialog（admin-settings.css）です。 ---- */
.reservation-seat-dialog form {
    display: grid;
    gap: 12px;
    max-height: min(88vh, 760px);
    overflow: auto;
}

.reservation-seat-dialog h2 {
    margin: 0;
}

.resv-dialog-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 6px;
}

.reservation-seat-dialog .resv-dialog-head {
    color: var(--ink);
}

.resv-dialog-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f5f8f7;
}

.resv-dialog-facts dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.resv-dialog-facts dd {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 800;
}

.resv-dialog-times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.reservation-seat-dialog .resv-dialog-archived {
    margin: 0;
    color: var(--danger);
    font-weight: 800;
}

/* 分けた予約の「矢羽根 1 / 2」。 */
.resv-dialog-segment {
    padding: 1px 8px;
    border-radius: 999px;
    background: #e7f3ef;
    color: var(--brand-dark, #075b4e);
    font-size: 12px;
    font-weight: 900;
}

/* 「分割する」「この矢羽根を消す」。どちらも出さないとき（1名の予約で1本だけ）は行ごと隠します（hidden）。 */
.resv-dialog-segments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.resv-dialog-segments[hidden] {
    display: none;
}

/* ---- 予約の注文をまとめて見る一覧（index.php の #reservation-orders-dialog）。土台は .confirm-dialog です。
   見出しと閉じるボタンの並びは「注文の詳細」のポップアップ（admin-orders.css の .order-detail-dialog）と同じです。 ---- */
.reservation-orders-dialog {
    max-width: min(680px, calc(100vw - 32px));
}

.resv-orders-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 20px 0;
}

.reservation-orders-dialog .resv-orders-head h2 {
    margin: 0;
    font-size: 17px;
}

.resv-orders-head button {
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13px;
}

/* 枠の内側の余白は、子の要素の padding で取ります（margin にしない）。枠の外を押したら閉じる判定
   （admin.js の bindReservationOrdersDialog() の event.target === dialog）が、margin の隙間を枠の外と取り違えて
   一覧を閉じてしまうためです。注記の周りの余白は、外枠 .resv-orders-lead の padding です。 */
.resv-orders-lead {
    padding: 10px 20px 0;
}

.reservation-orders-dialog .resv-orders-note {
    margin: 0;
}

.resv-orders-body {
    display: grid;
    gap: 16px;
    max-height: min(74vh, 720px);
    overflow: auto;
    padding: 12px 20px 20px;
}

.resv-orders-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.resv-orders-summary div {
    padding: 10px 12px;
    border-radius: 10px;
    background: #f5f8f7;
}

.resv-orders-summary span {
    display: block;
    color: #40504c;
    font-size: 11px;
    font-weight: 800;
}

.resv-orders-summary strong {
    color: var(--brand-dark, #075b4e);
    font-size: 17px;
}

.resv-orders-group {
    display: grid;
    gap: 8px;
}

.resv-orders-group h3 {
    margin: 0;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--line);
    font-size: 14px;
}

.resv-orders-group.is-reservation h3 {
    border-bottom-color: #9fd3c4;
}

.reservation-orders-dialog .resv-orders-meta {
    margin: 0;
    color: var(--ink);
    font-weight: 800;
}

.reservation-orders-dialog .resv-orders-hint {
    margin: 0;
    padding: 10px 12px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    font-weight: 800;
}

.resv-orders-item {
    display: grid;
    gap: 6px;
}

.resv-orders-item .order-card {
    grid-template-columns: 1fr;
}

.resv-orders-item > button {
    justify-self: end;
}

@media (max-width: 760px) {
    /* 「テーブル割当前」（7文字）が1行に収まる幅です。 */
    .reservation-board {
        --resv-label-w: 108px;
    }

    .resv-toolbar > label {
        flex: 1 1 100%;
    }

    .resv-scroll {
        max-height: max(260px, calc(100vh - var(--app-header-height, 60px) - 150px));
    }

    .resv-row-label {
        padding: 6px 8px;
    }

    .resv-row-label strong {
        font-size: 13px;
    }

    .resv-dialog-facts,
    .resv-dialog-times {
        grid-template-columns: 1fr;
    }

    .resv-orders-head {
        padding: 14px 16px 0;
    }

    .resv-orders-lead {
        padding: 10px 16px 0;
    }

    .resv-orders-body {
        padding: 10px 14px 16px;
    }

    /* 合計のタイルは2つずつ。「注文の詳細を開く」は押しやすいよう幅いっぱいにします。 */
    .resv-orders-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resv-orders-item > button {
        justify-self: stretch;
    }
}

/* ---- 全画面で表示（2026-09-28、ユーザー指示。2026-10-14 から帯の「全画面」） ----
   iPad でガントチャート（.resv-scroll）を、ページのスクロールなしで画面いっぱいに広げます。
   admin.js の renderAppFullscreen() が、全画面かつテーブル割当タブのときだけ body.is-reservation-display を付けます。
   ・帯（ヘッダー）と左メニューは、全画面の共通の規則（admin.css の「全画面」）が隠します。左メニューは引き出しになるので、ここでは隠しません。
   ・ここで隠すのは 編集中の欄・公開の帯・Square審査の帯・パネルの見出しと説明・表の上の件数の行（.resv-summary）。
   ・★隠さないもの：お知らせ音の帯（#order-sound-bar）・契約の帯（#billing-banner）・重なりの警告（.resv-warning）・
     課金制限中の注記（.resv-restricted-note）・この日の予約がない／テーブルがないの案内。気づいてほしい知らせです。
   ・高さは #editor → #tab-reservations → .reservation-panel → #reservation-board → .resv-scroll と、
     min-height:0 で残りを渡していきます。どこかで min-height:0 が抜けると、表が中身の高さに伸びてページがスクロールします。
   ・表の中の縦横のスクロール・見出しの時刻とテーブル名の固定（position:sticky）は、ふだんと同じく .resv-scroll が受け持ちます。
   ・selector は body.is-board-wide を含めます。admin-boards.css の body.has-side-nav.is-board-wide main（左メニューの幅の余白）に勝つためです。
   注文・予約タブの全画面（admin-orders.css の body.is-order-display）と同じ作りです。 */
@media (min-width: 761px) {
    body.is-reservation-display .editor-head,
    body.is-reservation-display #publication-bar,
    body.is-reservation-display #square-review-banner,
    body.is-reservation-display .reservation-panel > .panel-head > div:first-child,
    body.is-reservation-display .resv-summary {
        display: none;
    }

    body.is-board-wide.is-reservation-display main,
    body.has-side-nav.is-board-wide.is-reservation-display main {
        margin: 0;
        max-width: none;
        /* 上の60pxは、全画面の浮かせたボタン（左上のメニュー・右上の全画面をやめる）の場所です（admin.css の「全画面」）。 */
        padding: 60px 10px 8px;
    }

    body.is-reservation-display #editor {
        display: flex;
        flex-direction: column;
        gap: 8px;
        height: calc(100vh - 68px);
        height: calc(100dvh - 68px);
    }

    body.is-reservation-display #editor > aside {
        flex: none;
        margin: 0;
    }

    body.is-reservation-display #tab-reservations {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    /* 上の1行＝左に表示日の操作、右に接続の表示。下に表。 */
    body.is-reservation-display .reservation-panel {
        align-items: center;
        display: grid;
        flex: 1 1 auto;
        gap: 8px 12px;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto minmax(0, 1fr);
        min-height: 0;
        padding: 8px 10px;
    }

    body.is-reservation-display .reservation-panel > .panel-head {
        align-items: center;
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }

    body.is-reservation-display .resv-toolbar {
        align-items: center;
        gap: 8px 12px;
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        padding: 6px 10px;
    }

    body.is-reservation-display .resv-toolbar > label {
        align-items: center;
        display: flex;
        flex: none;
        gap: 6px;
        white-space: nowrap;
    }

    /* 幅は字数で決めます。appearance:none にした Safari の date の欄は、width:auto だと幅が中身に合わず崩れます。 */
    body.is-reservation-display .resv-toolbar input {
        min-height: 38px;
        padding: 6px 8px;
        width: 10.5em;
    }

    body.is-reservation-display .resv-day-steps button {
        min-height: 38px;
        padding: 8px 12px;
    }

    body.is-reservation-display .reservation-panel > .reservation-board {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        gap: 8px;
        grid-column: 1 / -1;
        grid-row: 2;
        min-height: 0;
    }

    body.is-reservation-display .reservation-board > p {
        flex: none;
    }

    body.is-reservation-display .resv-scroll {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
    }
}