:root { --bg: #f3f5f8; --panel: #ffffff; --line: #e4e8ee; --line-strong: #c7cfd9; --text: #1f2937; --muted: #6b7280; --primary: #2563eb; --primary-weak: #dbeafe; --success: #15803d; --success-weak: #dcfce7; --warn: #b45309; --warn-weak: #fef3c7; --danger: #b91c1c; --danger-weak: #fee2e2; --gray-weak: #e5e7eb; --left-w: 200px; --row-h: 131px; /* キャストの行の高さの基準（PC：左列の中身で決まる高さ）。時間帯が重なる予約がある行は段（--n）の数だけ高くなる（.track の min-height） */ --slot-w: 15px; /* 10分＝15px（1時間 90px・60分枠 88px。9/19 11:57 指示で 15分＝22px から変更）。.wide で 20px（1時間 120px・60分枠 118px：1行目「伊藤 様 確定 60分」が 1 行に収まる） */ --head-h: 46px; /* 半透明パネル（顧客情報・予約入力のドロワー／下シート、予約枠のポップアップ）： 下のボード＝予約状況がうっすら見えるように白を透かし、文字が読めるよう背後を少しぼかす。 --glass-strong は固定の見出し・ボタン行（スクロールした中身が透けて重ならないよう白を強める）。透け具合はこの2値で調整 */ --glass: rgba(255,255,255,.8); --glass-strong: rgba(255,255,255,.93); --glass-blur: 2px; --drawer-w: 440px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif; font-size: 14px; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); } body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } button { font: inherit; color: inherit; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } #frame { flex: 1; display: flex; justify-content: center; align-items: stretch; min-height: 0; } .app { position: relative; overflow: hidden; display: flex; flex-direction: column; width: 100%; height: 100vh; height: 100dvh; background: var(--bg); min-width: 0; } /* 100dvh：iPhone Safari でツールバーの分だけ下（シートのボタン）が隠れないように（対応外は 100vh） */ #frame.phone { padding: 16px; background: #2b3440; align-items: center; } #frame.phone .app { width: 390px; height: min(820px, calc(100vh - 32px)); border-radius: 30px; border: 8px solid #111; box-shadow: 0 12px 34px rgba(0,0,0,.45); } .compact { --left-w: 88px; --row-h: 124px; --slot-w: 15px; --head-h: 32px; font-size: 13px; } /* スマホ（9/20 11:05 指示：予約表をもっと見えるように）：左列 168px→88px（名前・状態・シフト・件数・メモの抜粋だけ。支給・控除・メモ入力は名前タップのシートへ）、 時間軸は PC と同じ 10分＝15px（旧 10px では 60分枠が 58px＝名前と状態しか出せなかった。15px なら 60分枠 88px＝他の分数と同じ 4 項目が出る）、時刻ヘッダー 40→32px */ .app.wide:not(.compact) { --slot-w: 20px; } /* テスト用「時間軸を広く」：PC／タブレット横のみ（10分＝20px） */ /* top bar */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; } .topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .store-name { font-weight: 700; white-space: nowrap; } .datenav { display: flex; align-items: center; gap: 4px; } .icon-btn { border: 1px solid var(--line-strong); background: var(--panel); border-radius: 8px; padding: 6px 10px; line-height: 1; } .date-btn { border: 1px solid var(--line-strong); background: var(--panel); border-radius: 8px; padding: 6px 10px; font-weight: 600; white-space: nowrap; } .chip { border: 1px solid var(--line-strong); background: var(--panel); border-radius: 999px; padding: 6px 12px; white-space: nowrap; } .chip-operator { background: var(--warn-weak); border-color: #f5d48a; } .chip-operator.set { background: var(--success-weak); border-color: #9ad4ae; } .toggle { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); white-space: nowrap; cursor: pointer; } .compact .toggle span { display: none; } /* 顧客検索（電話番号）：共通ヘッダーの中央。電話が鳴ったらすぐ打てるよう、どのタブでも常に見える位置に置く。 PC・タブレット＝日付の右・操作者の左（幅 ~300px）／スマホ幅＝ヘッダー内で1行使って全幅 */ .topbar { position: relative; } .topbar-center { flex: 1 1 260px; display: flex; justify-content: center; min-width: 0; } .cust-wrap { position: relative; width: 100%; max-width: 340px; } /* スマホ幅：2行目に「検索欄＋操作者」を並べる（3行にせず、ボードの表示領域を確保）。パネルはヘッダーの直下に全幅で開く */ .compact .topbar { padding: 4px 8px; gap: 5px 6px; } /* 9/20 11:05：ヘッダーを詰める（旧 6px 8px） */ .compact .topbar-center { order: 2; flex: 1 1 180px; } .compact .topbar-right { display: contents; } /* 中の操作者チップと「スマホ幅」をヘッダー直下の並びに出す */ .compact .topbar-right .toggle { order: 1; } /* 1行目の右端（試作の確認用スイッチ。実運用では無い） */ .compact .topbar-right .chip-operator { order: 3; } /* 2行目：検索欄の右 */ .compact .cust-wrap { max-width: none; position: static; } .compact .cust-input { padding-left: 8px; } .compact .cust-input .ico { display: none; } .compact .cust-input input { font-size: 16px; } /* 16px 未満だと iPhone Safari が番号欄のタップで画面を 16/15 倍に拡大し、戻らない（9/20 17:45 対応：左端が切れる・下の「予約を確定」が画面の外に出る原因） */ .compact .cust-go { padding: 0 10px; font-size: 13px; } .cust-search { display: flex; align-items: stretch; gap: 6px; } .cust-input { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 40px; padding: 0 6px 0 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); cursor: text; } .cust-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-weak); } .cust-input .ico { width: 16px; height: 16px; color: var(--muted); } .cust-input input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: .3px; padding: 0; } .cust-input input::placeholder { color: #9aa3b2; font-size: 14px; letter-spacing: 0; } .cust-clear { border: 0; background: #eef1f5; color: var(--muted); border-radius: 999px; width: 26px; height: 26px; line-height: 1; font-size: 13px; padding: 0; flex: none; } .cust-clear[hidden] { display: none; } .cust-go { padding: 0 14px; min-height: 40px; } /* 検索結果パネル（#custDrawer）：予約入力と同じ場所＝PC／タブレットは右ドロワー、スマホ幅は下からのシート（.drawer の共通スタイルを使う）。 予約入力（z 45）と重なったときは顧客検索を手前（z 46）に出す。閉じると下の予約入力が見える */ .drawer-wrap.cust-drawer { z-index: 46; } /* 予約入力（.drawer-wrap＝45）より手前。同じ詳細度だと後ろの .drawer-wrap の 45 に負けるので詳細度を上げる */ .cust-drawer[hidden] { display: none; } .compact .toolbar .hint { display: none; } .cust-tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13px; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .cust-tag.repeat { background: var(--success-weak); color: var(--success); border-color: #9ad4ae; } .cust-tag.new { background: var(--primary-weak); color: #1d4ed8; border-color: #93c5fd; } .cust-tag.caution { background: var(--danger-weak); color: var(--danger); border-color: #f3b4b4; } .cust-tag.short { background: var(--warn-weak); color: var(--warn); border-color: #f5d48a; } .cust-name { font-size: 22px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; } .cust-panel .cust-block:first-of-type { padding-top: 0; } .cust-name small { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 4px; } .cust-phone { font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: .3px; font-weight: 600; } .cust-meta { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 12px; } .cust-memo { background: #fbfcfd; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 38px; } .cust-memo.empty { color: #9aa3b2; } .cust-block { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; } .cust-count { margin-bottom: 2px; } .cust-count b { color: var(--text); font-size: 13px; } .cust-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .cust-list li { display: flex; align-items: center; gap: 8px; } .cust-list button { flex: 1; display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 9px 10px; min-height: 44px; } .cust-list button:hover { background: #f8fafc; } .cust-list .n { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cust-list .p { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; margin-left: auto; } .cust-list mark { background: #fde68a; color: inherit; border-radius: 2px; padding: 0 1px; } .cust-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; min-height: 40px; } .cust-check input { width: 20px; height: 20px; } .cust-hint { font-size: 12px; color: var(--muted); margin: 0; } .tabs { display: flex; background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; } .tab { flex: 1; min-width: 72px; padding: 10px 8px; border: 0; background: transparent; border-bottom: 3px solid transparent; white-space: nowrap; color: var(--muted); font-weight: 600; } .tab.active { color: var(--primary); border-bottom-color: var(--primary); } main { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* sub tabs / toolbars */ .toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; flex-wrap: wrap; } .seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: var(--panel); } .seg button { border: 0; background: transparent; padding: 6px 12px; white-space: nowrap; } .seg button.active { background: var(--primary); color: #fff; } .spacer { flex: 1; } .legend { display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 12px; } .legend span::before { content: ""; display: inline-block; width: 12px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; } .legend .lg-now::before { background: #ef4444; width: 3px; } /* board */ .board-scroll { flex: 1; min-height: 0; overflow: auto; background: var(--panel); border-top: 1px solid var(--line); } /* .board は横スクロールする中身の全幅に広げる（min-width: max-content）。 これがないと .board の箱は見えている幅のままになり、左列（position: sticky）は .board の箱の外へ出られないため、 夜の時間帯まで横スクロールすると左列（キャスト名）が一緒に流れてしまう */ .board { display: grid; grid-template-columns: var(--left-w) max-content; align-items: stretch; min-width: max-content; } .corner { position: sticky; top: 0; left: 0; z-index: 6; background: var(--panel); border-right: 2px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); height: var(--head-h); display: flex; align-items: center; padding: 0 10px; color: var(--muted); font-size: 12px; } .time-head { position: sticky; top: 0; z-index: 5; background: var(--panel); border-bottom: 1px solid var(--line-strong); height: var(--head-h); display: flex; } .hour { width: var(--hour-w); border-left: 1px solid var(--line-strong); position: relative; font-size: 12px; } .hour .hlabel { position: absolute; left: 3px; top: 4px; font-weight: 700; white-space: nowrap; } .hour .qlabels { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; font-size: 9px; color: var(--muted); } /* 10分＝15px の区切りに「00」「10」…を入れるため 9px */ .hour .qlabels span { flex: 1; text-align: left; padding-left: 1px; border-left: 1px dotted var(--line); overflow: hidden; } .hour .qlabels span:first-child { border-left: 0; } .compact .hour .qlabels { display: none; } /* 各キャストの行の仕切り線（左列〜時間表まで横幅いっぱい）は、区切り線より少し太く */ .left-cell { position: sticky; left: 0; z-index: 4; background: var(--panel); border-right: 2px solid var(--line-strong); border-bottom: 2px solid #b8c0cc; padding: 8px 8px 8px 10px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0; } .left-cell:hover { background: #f8fafc; } .left-cell .name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; } .left-cell .name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .left-cell .shift-line { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .left-cell .shift-line.none { color: #b0b7c3; } .left-cell .pay-line { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; font-size: 12px; font-variant-numeric: tabular-nums; } .left-cell .pay-item { white-space: nowrap; } .left-cell .pay-line .k { color: var(--muted); margin-right: 2px; } .compact .left-cell .pay-line { font-size: 11.5px; } .left-cell.row-absent { background: #fff5f5; } .left-cell.row-nocontact { background: #fffaf0; } .left-cell.row-left { background: #f7f7f8; } .memo-input { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font-size: 12px; line-height: 1.45; resize: none; background: #fbfcfd; cursor: text; margin-top: 2px; display: block; } .memo-input::placeholder { color: #b0b7c3; } .memo-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-weak); background: #fff; } .track { position: relative; border-bottom: 2px solid #b8c0cc; width: var(--track-w); /* 段（lane）：同じキャストで時間帯が重なる予約（9/20 12:29 指示で登録できる）は上下の段に分けて描く。--n ＝ 段の数（app.js が行ごとに入れる。入力中の点線枠が重なるときは reservations.js が 1 つ増やす）。 行の高さ ＝ 上 12px ＋ 段 × 通常の枠の高さ（--row-h − 18px）＋ 段の間 3px ＋ 下 6px。1 段なら --row-h と同じで、いまの行の高さは変わらない */ min-height: calc(12px + var(--n, 1) * (var(--row-h) - 18px) + (var(--n, 1) - 1) * 3px + 6px); background-image: repeating-linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px var(--hour-w)), repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px var(--slot-w)); } /* 退勤・連絡無し・欠勤の行：時間表を全幅グレーにして、今は予約を入れられない行だと見て分かるようにする。 区切り線（時間・区切り）はグレー地でも見えるよう少し濃い色に差し替える */ .track.off { background-color: var(--gray-weak); background-image: repeating-linear-gradient(to right, #aab2bd 0 1px, transparent 1px var(--hour-w)), repeating-linear-gradient(to right, #d3d8df 0 1px, transparent 1px var(--slot-w)); } /* キャストの出勤時間（案B）：行の上端に細いライン、両端に短い縦の目印。 出勤状況に関わらず全キャストに表示。予約の領域には掛からない。 通常は白地に茶色。退勤・連絡無し・欠勤（.off）はグレー地の上でも位置が分かる濃い灰色。 */ .shift-topline { --topline: #b08968; position: absolute; top: 0; height: 4px; background: var(--topline); pointer-events: none; z-index: 2; } .shift-topline::before, .shift-topline::after { content: ""; position: absolute; top: 0; width: 2px; height: 11px; background: var(--topline); } .shift-topline::before { left: 0; } .shift-topline::after { right: 0; } .shift-topline.off { --topline: #8b929c; } .legend .lg-topline::before { height: 3px; background: #b08968; vertical-align: 2px; } .legend .lg-off::before { background: var(--gray-weak); border: 1px solid #aab2bd; box-sizing: border-box; } .reason { font-size: 11px; color: var(--danger); font-weight: 600; white-space: nowrap; } .now-line { position: absolute; top: 0; bottom: 0; width: 2px; background: #ef4444; z-index: 3; pointer-events: none; } /* 予約・出勤時間ラインより手前 */ .time-head .now-line { top: auto; height: 8px; bottom: 0; } .left-cell .shift-line { display: flex; align-items: baseline; gap: 6px; } .left-cell .shift-line > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .left-cell .shift-line .cnt { font-size: 11px; color: var(--muted); background: #f1f5f9; border-radius: 999px; padding: 0 6px; flex: none; } /* 予約枠：出勤時間ラインの下（top 12px）から行の下端まで。色は DB に持たず、状態・予約経路・営業日から UI が決める。 優先：終了（グレー）＞ 接客中（ピンク）＞ 送信済み＝配車準備・移動中・到着（水色）＞ Web予約（紫）＞ 事前予約＝明日以降の営業日（黄）＞ 当日確定（黄緑）（名前は 9/21 14:50 指示。reservations.js の COLOR_LABEL） 色だけに頼らず、枠内に状態の文字（.j-st）を必ず出す 中身（9/19 指示）：.j1 名前 様＋状態＋コース分数（＋警告）／.j3 時刻／.j4 派遣先 部屋／.j5 送り・迎え .j1 は flex-wrap：幅が足りない枠（PC の 60分枠＝中身 76px）では「確定 60分」が次の行に折り返す（行の高さには余裕がある） .j5（送り・迎え）は折り返さない（9/19 11:15 指示：上下ではなく左右）。tight（60分枠）では見出しを 1 文字（送／迎）にし、それでも足りなければ名前を「…」で詰める .rsv は div[role=button]（中に送り・迎えのボタンがあるため）。cursor と user-select はボタンと同じにする */ .rsv { position: absolute; border-radius: 6px; /* 上下の位置は段で決める：--k ＝ この枠の段（0 が上・inline style）、--n ＝ 行の段の数（.track から継承）。1 段なら top 12px・下 6px（従来どおり） */ --lane-h: calc((100% - 18px - (var(--n, 1) - 1) * 3px) / var(--n, 1)); top: calc(12px + var(--k, 0) * (var(--lane-h) + 3px)); height: var(--lane-h); border: 1px solid; padding: 3px 4px; font-size: 12px; text-align: left; line-height: 1.25; cursor: pointer; user-select: none; overflow: hidden; z-index: 1; display: flex; flex-direction: column; gap: 1px; background: #fff; color: var(--text); font-family: inherit; } .rsv:hover { filter: brightness(.97); } .rsv:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } /* 上端の帯（.j0・9/21 11:59 指示）：枠の種類の文字を、枠の上端いっぱいの帯に白抜きで出す（色だけに頼らない）。 文字（9/21 14:50 指示）：予約の枠は「予約」ではなく凡例と同じ色の名前 ＝ 当日確定／事前予約／Web予約／送信済み／接客中／終了／取消（reservations.js の COLOR_LABEL）。撮影・休憩はそのまま。 帯の色 ＝ その枠の色の濃い版（当日確定＝濃い黄緑／事前予約＝濃い黄／Web予約＝濃い紫／送信済み＝濃い水色／接客中＝濃いピンク／終了・取消＝グレー）、撮影＝青、休憩＝茶。白い文字との明度差は 4.5:1 以上。 幅：予約の枠は最短のコース 60分 ＝ 90px（10分＝15px）なので 4 文字（「当日確定」10.5px・字間 .12em ＝ 約 47px＋余白 10px）が入る。narrow（72px 未満。今のコースには無い）は字間 0・10px・余白 2px で 4 文字 ≒ 44px を収める 枠の余白（padding 3px 4px）を打ち消して上・左右の端まで伸ばす（角は .rsv の overflow: hidden で丸まる）。帯の下の 1 行目（名前 様…）以降はこれまでどおり */ .rsv .j0 { display: block; flex: none; margin: -3px -4px 2px; padding: 0 5px; height: 14px; line-height: 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: #fff; background: #4b5563; white-space: nowrap; overflow: hidden; text-align: left; } .rsv.narrow .j0 { margin-left: -2px; margin-right: -2px; padding: 0 2px; letter-spacing: 0; font-size: 10px; } /* narrow の余白は 3px 2px。4 文字の名前（当日確定 など）が 43px の枠に入るよう字間 0 */ .rsv.c-today .j0 { background: #4d7c0f; } .rsv.c-future .j0 { background: #a16207; } .rsv.c-web .j0 { background: #7c3aed; } .rsv.c-dispatch .j0 { background: #0e7490; } .rsv.c-service .j0 { background: #be185d; } .rsv.c-finished .j0 { background: #6b7280; } .rsv.c-cancelled .j0 { background: #9ca3af; } .rsv.tb-shoot .j0 { background: #2563eb; } .rsv.tb-break .j0 { background: #78350f; } .compact .rsv .j0 { margin: -2px -4px 2px; height: 12px; line-height: 12px; font-size: 10px; letter-spacing: .1em; } /* スマホ幅：枠の余白は 2px 4px。帯 12px（行の高さは 104px → 114px に。下の .compact を参照） */ .rsv .j1 { font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; row-gap: 1px; min-width: 0; } .rsv .j-hd { flex: none; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 1px 4px; white-space: nowrap; max-width: 100%; } /* 状態＋分数はひとまとまりで折り返す（「確定 60分」が割れない）。まとまり自体が枠より広いときだけ中で折り返す */ .rsv .j1 .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; } .rsv .j-min { flex: none; font-size: 11px; font-weight: 600; color: #374151; white-space: nowrap; } .rsv .j3, .rsv .j4, .rsv .j5 { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #374151; } .rsv .j3 { font-variant-numeric: tabular-nums; color: #374151; } .rsv .j4 { color: var(--muted); display: flex; align-items: baseline; gap: 4px; } .rsv .j4 .dn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 派遣先名は「…」で詰める */ .rsv .j4 .rm { flex: none; font-weight: 700; color: #374151; } /* 部屋番号は必ず見える */ .rsv .j5 { display: flex; flex-wrap: nowrap; gap: 6px; white-space: nowrap; align-items: flex-start; } /* 送り／迎え の下に ✔済 などが付くと高さが違うので上端で揃える（9/21 15:16 指示） */ .rsv .j5 .dv { flex: 0 0 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; line-height: inherit; text-align: left; border-radius: 4px; } .rsv .j5 .dv.lg { flex-shrink: 1; } /* 3 文字以上の名前だけ、幅が足りないときに「…」で縮む */ .rsv .j5 .dv em { font-style: normal; color: var(--muted); margin-right: 3px; } .rsv .j5 .dv b { font-weight: 600; } .rsv .j5 .dv.tbd, .rsv .j5 .dv.tbd b { color: var(--muted); font-weight: 500; } .rsv .j5 .dv.ed { cursor: pointer; padding: 1px 3px; margin: -1px -3px; } /* タップできる（変更できる状態）：見た目の位置は変えずに当たりを広げる */ .rsv .j5 .dv.ed b { border-bottom: 1px dotted #9ca3af; } /* 点線の下線＝タップで変更できる印 */ .rsv .j5 .dv.ed:hover, .rsv .j5 .dv.ed:focus-visible { background: rgba(255,255,255,.85); outline: 1px solid var(--line-strong); } .rsv.tight .j5 .dv em { display: none; } /* 60分枠：見出しを 1 文字に（送 山本　迎 田中） */ .rsv.tight .j5 .dv .dv-l::before { content: attr(data-s); color: var(--muted); margin-right: 2px; } /* data-s は .dv-l（名前の行）に付ける：.dv が縦並び（名前の行／✔済 の行）になったため */ .rsv.tight .j5 { gap: 4px; } /* 10.5px：「送 山本」33.5px×2＋4px＝71px ≦ 中身 76px */ .compact .rsv.tight .j5 { font-size: 10px; } /* タブレット・スマホ幅の 90分枠（中身 72px）：32px×2＋4px＝68px */ .compact .rsv .j5 .dv.ed { padding: 3px 3px; margin: -3px -3px; } /* スマホ・タブレット：当たりを上下にも広げる */ .rsv.tight .j3 { font-size: 10px; } /* 60分枠（中身 78px）：11px だと「15:00～16:00」（74px）は入るが「翌1:00～翌2:00」（82px）が切れる */ .rsv.tight .j5 { font-size: 10.5px; } /* 同：「送 山本　迎 田中」（4 文字×2＋間隔）を 76px に収める。3 文字の名前は「…」で詰める */ .rsv.narrow { padding: 3px 2px; } .rsv.narrow .j3, .rsv.narrow .j4, .rsv.narrow .j5, .rsv.narrow .j-min { display: none; } /* 幅が足りない枠：名前と状態の文字（＋警告）だけ残す（色だけに頼らない） */ .compact .rsv.tight .j3 { letter-spacing: -.3px; } /* タブレット・スマホ幅の 90分枠（中身 72px）：「翌1:00～翌2:00」を収める */ .j-st { flex: none; font-size: 10px; font-weight: 800; padding: 0 4px; border-radius: 4px; background: rgba(255,255,255,.85); border: 1px solid rgba(0,0,0,.18); color: #1f2937; } /* 終了前警告のバッジ：1 行目（名前・状態）に続けて出す。枠の上側なので、幅が狭くても・中身が多くても隠れない（幅が足りなければ次の行に折り返す） */ .j-warn { flex: none; font-size: 11px; font-weight: 800; background: #ef4444; color: #fff; border-radius: 4px; padding: 1px 6px; line-height: 1.3; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .j-warn i { font-style: normal; } .rsv.narrow .j-warn { padding: 1px 3px; font-size: 10px; letter-spacing: -.2px; } /* 狭い枠：⚠ を省き「残り5分」だけを枠内に収める */ .rsv.narrow .j-warn i { display: none; } .j-caution { font-style: normal; font-size: 10px; font-weight: 800; background: var(--danger); color: #fff; border-radius: 999px; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; } .rsv.c-today { background: #e3f6c8; border-color: #84cc16; } /* 当日確定・開始前：黄緑 */ .rsv.c-future { background: #fef3c7; border-color: #f59e0b; } /* 事前予約（明日以降の営業日の予約）：薄い黄 */ .rsv.c-web { background: #ede9fe; border-color: #a78bfa; } /* Web予約：薄い紫 */ .rsv.c-dispatch { background: #cffafe; border-color: #22d3ee; } /* 送信済み（配車準備・移動中・到着）：薄い水色 */ .rsv.c-service { background: #fce7f3; border-color: #f472b6; } /* 接客中：薄いピンク */ .rsv.c-finished { background: #e5e7eb; border-color: #9ca3af; color: #4b5563; } /* 終了：薄いグレー */ .rsv.c-cancelled { background: #fff; border: 1px dashed var(--line-strong); color: var(--muted); } /* 取消（「取消を表示」ON のときだけ） */ .rsv.c-cancelled .j1 .nm, .rsv.c-cancelled .j-min { text-decoration: line-through; } .rsv.c-cancelled .j-st { background: #f3f4f6; } .track.off .rsv.c-finished { background: #f3f4f6; border-color: #6b7280; } /* グレーの行の上でも終了の枠が見えるように */ /* 接客中：終了予定の10分前から、枠全体（背景・枠線・影）を赤で点滅させる（0.8秒周期・パッと切り替わる）。 点滅の「明」は赤（#f87171）、「暗」は接客中のピンクに戻る＝接客中の枠が赤く光っていると分かる。文字は濃色のまま（明の側でも読める）。 終了予定を過ぎたら（超過）：点滅は止めて濃い赤の塗り＋赤枠で固定（点滅＝もうすぐ終了、固定の赤＝終了予定を過ぎている、と見分ける）。 ⚠バッジは白地＋赤文字にして、赤い背景の上でも埋もれないようにする */ .rsv.ending { border: 3px solid #dc2626; z-index: 2; animation: rsv-blink .8s steps(1, end) infinite; } .rsv.overdue { border: 3px solid #b91c1c; background: #fca5a5; box-shadow: 0 0 0 3px rgba(185,28,28,.4); z-index: 2; } .rsv.ending .j-warn, .rsv.overdue .j-warn { background: #fff; color: #b91c1c; border: 1px solid #b91c1c; font-size: 12px; padding: 1px 7px; } .rsv.wc .j-warn { font-size: 10.5px; padding: 1px 4px; } /* 警告つきの狭い枠（幅 124px 未満＝60分枠）：「⚠ 超過10分」が切れない大きさ */ .rsv.wc .j-hd { display: none; } /* 同：状態・分数の行を警告バッジに置き換える（「残り／超過」＝接客中。行の高さに収めるため） */ .rsv.narrow.ending .j-warn, .rsv.narrow.overdue .j-warn { font-size: 10px; padding: 1px 0; letter-spacing: -.3px; } /* スマホ幅の 60分枠（赤枠 3px のとき中身 44px）：「超過10分」を収める */ .rsv.ending .j-st, .rsv.overdue .j-st { background: #fff; } @keyframes rsv-blink { 0%, 49.9% { background: #f87171; border-color: #991b1b; box-shadow: 0 0 0 4px rgba(220,38,38,.55), 0 0 16px rgba(220,38,38,.9); } 50%, 100% { background: #fce7f3; border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220,38,38,.25); } } /* 端末の「視差効果を減らす」設定では点滅を止め、赤の塗り＋赤枠で固定（⚠・残り分数は残る） */ @media (prefers-reduced-motion: reduce) { .rsv.ending, .rs-warnbox.ending { animation: none; } .rsv.ending { background: #fca5a5; box-shadow: 0 0 0 3px rgba(220,38,38,.4); } } /* 予約入力中の仮の枠（点線） */ .rsv.ghost { background: rgba(37,99,235,.08); border: 2px dashed var(--primary); color: #1d4ed8; pointer-events: none; z-index: 2; } .rsv.ghost .j1 { color: #1d4ed8; } .legend .lg-today::before { background: #e3f6c8; border: 1px solid #84cc16; box-sizing: border-box; } .legend .lg-future::before { background: #fef3c7; border: 1px solid #f59e0b; box-sizing: border-box; } .legend .lg-web::before { background: #ede9fe; border: 1px solid #a78bfa; box-sizing: border-box; } .legend .lg-dispatch::before { background: #cffafe; border: 1px solid #22d3ee; box-sizing: border-box; } .legend .lg-service::before { background: #fce7f3; border: 1px solid #f472b6; box-sizing: border-box; } .legend .lg-finished::before { background: #e5e7eb; border: 1px solid #9ca3af; box-sizing: border-box; } .legend .lg-ending::before { background: #fce7f3; border: 2px solid #dc2626; box-sizing: border-box; } /* 9/20 指示：点滅は「いま対応が必要な枠」だけ。凡例の色見本は赤枠の固定表示（点滅なし） */ /* 撮影・休憩（9/21 11:28・11:29 指示）：キャストの行に時間帯で入れる枠（.rsv.tb）。予約ではないので斜線の地で見分け、色は 撮影＝青・休憩＝茶（予約の 6 色・出勤時間の茶ライン・現在時刻の赤と重ならない色）。 文字（「撮影」「休憩」）も必ず出す（色だけに頼らない）。幅 72px 未満（30 分の休憩など）は文字だけ、時刻はマウスオーバー／シートに出す */ .rsv.tb { color: #1f2937; } .rsv.tb .j1 .tb-note { color: #374151; font-weight: 600; } /* 種別の文字は上端の帯（.j0）に移した（9/21 11:59 指示）。1 行目は備考だけ（無ければ 1 行目は無い） */ .rsv.tb-shoot { background: repeating-linear-gradient(135deg, #dbeafe 0 6px, #f0f6ff 6px 12px); border-color: #3b82f6; } .rsv.tb-break { background: repeating-linear-gradient(135deg, #f1e4cf 0 6px, #faf5ec 6px 12px); border-color: #b45309; } .rsv.tb.narrow .j3 { display: block; font-size: 10px; line-height: 1.2; font-variant-numeric: tabular-nums; } /* 30分の休憩（幅 43px）：時刻を「21:00」「21:30」の 2 行で出す（「～」は隠す。予約の narrow は名前を優先して時刻を隠すが、撮影・休憩は帯の下が空くので出せる） */ .rsv.tb.narrow .j3 .tw { display: none; } .rsv.tb.narrow .j3 .ta, .rsv.tb.narrow .j3 .tz { display: block; white-space: nowrap; } .rsv.tb.narrow .j3 .tz::before { content: "～"; color: var(--muted); font-size: 8px; } /* 2 行目の頭に小さく「～」（終わりの時刻だと分かるように）。PC の中身 37px：8px＋「21:30」27.5px */ .rsv.tb.narrow .j3 .tz { letter-spacing: -.3px; } .compact .rsv.tb.narrow .j3 .tz::before { content: none; } /* スマホ幅（余白 2px 4px → 中身 33px）は「～」を省く */ .track.off .rsv.tb-shoot { border-color: #1d4ed8; } .track.off .rsv.tb-break { border-color: #92400e; } /* 空き時間の枠（.gap・9/21 11:59 指示）：予約と予約の間（撮影・休憩も塞いでいる時間として数える）。予約の枠の後ろに置き（z-index 0）、タップは通す（pointer-events: none → 予約入力中に空きをタップすると従来どおりキャスト・到着予定がセットされる）。 点線の枠＋薄い緑の地に「空き」と長さ（「30分」「1時間30分」）。段（lane）には関わらず行の上 12px から下 6px まで（空きの時間帯には何も無いので、段が複数の行でも全高で良い）。過ぎた空き（.past：本日で終わりが現在時刻より前）は薄く */ .gap { position: absolute; top: 12px; bottom: 6px; z-index: 0; pointer-events: none; box-sizing: border-box; border: 1px dashed #86b79a; border-radius: 6px; background: rgba(220,252,231,.45); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #166534; font-size: 11px; line-height: 1.2; overflow: hidden; text-align: center; padding: 0 1px; } .gap .g1 { font-weight: 700; letter-spacing: .08em; white-space: nowrap; } .gap .g2 { color: #374151; font-variant-numeric: tabular-nums; white-space: nowrap; } .gap.narrow { font-size: 10px; } .gap.narrow .g1 { letter-spacing: 0; } .gap.past { opacity: .5; } .gap .g3 { font-size: 10px; color: #4b5563; white-space: nowrap; } /* 出勤終了までの空き（.gap.tail・9/21 13:48 指示）：3 行目「出勤終了まで」（幅 72px 以上のときだけ出力） */ .track.off .gap { background: rgba(255,255,255,.4); border-color: #9aa5b1; color: #4b5563; } .legend .lg-gap::before { background: #e6f9ec; border: 1px dashed #86b79a; box-sizing: border-box; } .legend .lg-shoot::before { background: repeating-linear-gradient(135deg, #dbeafe 0 3px, #f0f6ff 3px 6px); border: 1px solid #3b82f6; box-sizing: border-box; } .legend .lg-break::before { background: repeating-linear-gradient(135deg, #f1e4cf 0 3px, #faf5ec 3px 6px); border: 1px solid #b45309; box-sizing: border-box; } .badge.tb-shoot { background: #dbeafe; color: #1e40af; border-color: #3b82f6; } .badge.tb-break { background: #f1e4cf; color: #7c2d12; border-color: #b45309; } /* 出退勤シート：状態ボタン（出勤・退勤・連絡無し・欠勤）の下に 撮影・休憩 の 2 ボタン（同じ大きさ・枠の色と同じ斜線） */ .tb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; } .tb-btn { border: 2px solid var(--line-strong); border-radius: 12px; padding: 14px 4px; font-weight: 700; white-space: nowrap; font-size: 15px; } .tb-btn.full { opacity: .55; } /* 休憩が 1 日 2 回入っている（9/21 13:45 指示）：薄く。タップすると案内（disabled にはしない＝押した理由が分かるように） */ .tb-btn.tb-shoot { border-color: #3b82f6; color: #1e40af; background: repeating-linear-gradient(135deg, #dbeafe 0 6px, #f0f6ff 6px 12px); } .tb-btn.tb-break { border-color: #b45309; color: #7c2d12; background: repeating-linear-gradient(135deg, #f1e4cf 0 6px, #faf5ec 6px 12px); } .compact .tb-btn { padding: 16px 4px; } .tb-note { margin: 6px 0 0; } .tb-list { margin-top: 6px; } .tb-list li .grow { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; } /* 撮影・休憩のシート：所要時間の早見（30／60／90／120分）と要約（日付 時刻～時刻（N分）／赤字＝入力の問題） */ .tb-quick { display: flex; gap: 6px; flex-wrap: wrap; margin: -2px 0 8px; } .tb-quick .chip.sm { min-height: 34px; } .tb-quick .chip.active { background: var(--primary-weak); border-color: var(--primary); color: #1e40af; font-weight: 700; } .tb-sum { margin: 0 0 10px; min-height: 1.45em; line-height: 1.45; } .tb-sum.ok { color: var(--text); font-weight: 600; } .tb-sum.err { color: var(--danger); } .compact .legend { display: none; } /* 状態のバッジ（予約詳細・利用履歴） */ .badge.rs-reserved { background: #f1f5f9; color: #475569; border-color: var(--line-strong); } .badge.rs-confirmed { background: #e3f6c8; color: #3f6212; border-color: #84cc16; } .badge.rs-dispatch { background: #cffafe; color: #155e75; border-color: #22d3ee; } .badge.rs-service { background: #fce7f3; color: #9d174d; border-color: #f472b6; } .badge.rs-finished { background: var(--gray-weak); color: #374151; border-color: #9ca3af; } .badge.rs-cancelled { background: #fff; color: var(--muted); border-color: var(--line-strong); text-decoration: line-through; } .kv .ta-r { text-align: right; overflow-wrap: anywhere; } /* 予約詳細：終了前警告の表示・延長の一覧・進行ボタン */ .rs-warnbox { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; font-weight: 700; border: 2px solid #dc2626; background: var(--danger-weak); color: #7f1d1d; } .rs-warnbox.ending { animation: warn-blink .8s steps(1, end) infinite; } .rs-warnbox.overdue { background: #fca5a5; } @keyframes warn-blink { 0%, 49.9% { background: #fca5a5; border-color: #991b1b; } 50%, 100% { background: var(--danger-weak); border-color: #dc2626; } } .rs-ext { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .rs-ext li { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .rs-ext li.voided > span:first-child { text-decoration: line-through; color: #9ca3af; } .rs-ext .void-tag { font-size: 11px; color: var(--danger); } .rs-progress .btn { min-height: 44px; } .hist li .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; } /* 顧客パネル：利用履歴（予約データから）・最近の派遣先 */ .cust-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .cust-hist button { width: 100%; display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 6px; align-items: center; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 6px 8px; font-size: 12px; min-height: 40px; } .cust-hist button:hover { background: #f8fafc; } .cust-hist button.cancelled { color: var(--muted); } .cust-hist .d { font-variant-numeric: tabular-nums; white-space: nowrap; } .cust-hist .m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .cust-hist .s, .cust-hist .y { white-space: nowrap; color: var(--muted); } /* スマホ幅（9/20 16:59 指示：履歴にキャストの名前も）：3 行 ＝ 1 行目 日時「9/19 22:00」／2 行目 キャスト（太字）＋状態（右端）／3 行目 コース・指名「120分・本指名」。 幅 ≒ 117px（375px の端末では 111px）には「日時＋状態」「コース＋状態」「日時＋コース」のどの組も入らない（状態「配車準備」58px・日時 74px・「120分・本指名」87px）ため、状態はキャスト名とだけ同じ行に置く。 曜日（.wd）と金額（.y）は隠す（曜日は上の「前回 9/19（土）」に、金額はタップで開く予約の詳細に出る） */ .compact .cust-hist button { grid-template-columns: auto minmax(0, 1fr); row-gap: 1px; } .compact .cust-hist .d { grid-row: 1; grid-column: 1 / -1; } .compact .cust-hist .d .wd { display: none; } .compact .cust-hist .s { grid-row: 2; grid-column: 1; color: inherit; font-weight: 700; } .compact .cust-hist .badge { grid-row: 2; grid-column: 2; justify-self: end; } .compact .cust-hist .m { grid-row: 3; grid-column: 1 / -1; font-weight: 500; } .compact .cust-hist .y { display: none; } /* 予約ドロワー PC／タブレット：画面右に開く（幅 440px まで）。main と tabs に右マージンを付けてボードを左に残す＝入力中も予約表が見える。 スマホ幅（.compact）：下からのシート（高さは JS が --sheet-h に入れる：画面の 56%／たたむと 58px）。 main の下マージンをシート分だけ空けるので、ボードは隠れず上半分でスクロールできる。「ボードで選ぶ」でバーだけ残してボード全体を見せる */ .drawer-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 45; pointer-events: none; } .drawer { pointer-events: auto; position: absolute; top: 0; right: 0; bottom: 0; width: min(var(--drawer-w), 100%); background: var(--glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border-left: 1px solid var(--line-strong); box-shadow: -10px 0 30px rgba(15,23,42,.18); overflow-x: hidden; overflow-y: auto; padding: 12px 16px 24px; } /* 横スクロールは出さない（9/20 11:35：Safari は select の文字がはみ出して横に動くため） */ /* ボードはドロワーの下まで広げ、ドロワーは半透明 → 入力中も予約状況がうっすら見える。 ドロワーの下に隠れた部分は操作できないので、右端（深夜）の時間帯も手前に出せるよう .board の右に余白を足す。 ツールバー（凡例など）はドロワーに隠れないよう右に余白を取って折り返す。 ボード以外の画面（シフト・スタッフ・設定）は従来どおり main を右に空ける（main[data-view] は app.js の render() が付ける） */ .app.panel-open:not(.compact) main[data-view="board"] .board { padding-right: var(--drawer-w); } .app.panel-open:not(.compact) main[data-view="board"] .toolbar { padding-right: calc(var(--drawer-w) + 12px); } /* PC／タブレット横（画面幅 1024px 以上）でドロワー（顧客検索・予約入力）が開いている間、ツールバーは折り返さず 1 行のまま（2026-09-19 指示：凡例が 2 行に変わらないこと）。 足りない幅は操作の案内文（.hint）を消して詰める。それでも足りなければ凡例の右端がドロワーの下に入る（半透明なのでうっすら見える。閉じれば元どおり）。 凡例が 2 行になってボードが下にずれるより 1 行を優先。1024px 未満（タブレット縦）は幅が足りないので従来どおり折り返す */ @media (min-width: 1024px) { .app.panel-open:not(.compact) main[data-view="board"] .toolbar { flex-wrap: nowrap; } .app.panel-open:not(.compact) main[data-view="board"] .toolbar .hint { display: none; } .app.panel-open:not(.compact) main[data-view="board"] .toolbar .legend { flex: 0 0 auto; flex-wrap: nowrap; white-space: nowrap; } .app.panel-open:not(.compact) main[data-view="board"] .toolbar .seg, .app.panel-open:not(.compact) main[data-view="board"] .toolbar .note, .app.panel-open:not(.compact) main[data-view="board"] .toolbar .toggle { flex: 0 0 auto; white-space: nowrap; } } /* 画面幅 1,840px 未満：案内文を消しても「区分ボタン＋件数＋取消を表示＋凡例（約 1,310px）」がドロワーの左（画面幅 − 464px）に入り切らないので、 ドロワーが開いている間だけ凡例の文字（12px→11px）と間隔を少し詰め、区分ボタンの左右余白を 2px ずつ削る（約 1,650px 以上で全部見える）。 それより狭い画面は凡例の右端がドロワーの下に入る（1 行は維持）。閉じれば元の大きさに戻る */ @media (min-width: 1024px) and (max-width: 1839px) { .app.panel-open:not(.compact) main[data-view="board"] .toolbar { gap: 6px; padding-right: calc(var(--drawer-w) + 8px); } .app.panel-open:not(.compact) main[data-view="board"] .toolbar .legend, .app.panel-open:not(.compact) main[data-view="board"] .toolbar .note, .app.panel-open:not(.compact) main[data-view="board"] .toolbar .toggle { font-size: 11px; } .app.panel-open:not(.compact) main[data-view="board"] .toolbar .legend { gap: 6px; } .app.panel-open:not(.compact) main[data-view="board"] .toolbar .legend span::before { margin-right: 3px; } .app.panel-open:not(.compact) main[data-view="board"] .toolbar .seg button { padding: 6px 10px; } } .app.panel-open:not(.compact) main:not([data-view="board"]), .app.panel-open:not(.compact) .tabs { margin-right: min(var(--drawer-w), 60%); } /* タブ（ボード／シフト／スタッフ／設定）は全幅に広がるので、「設定」がドロワーに隠れないよう従来どおり右を空ける */ /* PC／タブレット：顧客検索と予約入力が同時に開いているとき（入力中に別の電話が来た）は顧客検索が手前。 半透明なので後ろの予約入力が透けて二重に見えないよう、後ろのドロワーは見えなくする（位置・大きさは同じなので隠れていた）。 スマホ幅は顧客検索が右上の小さなパネルなので、下シートの予約入力はそのまま見せる */ .app.cust-open:not(.compact) .drawer-wrap:not(.cust-drawer) .drawer { visibility: hidden; } .bk-bar { display: none; } .compact .drawer { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: var(--sheet-h, 56%); max-height: 100%; padding: 0; overflow: hidden; border-left: 0; border-top: 1px solid var(--line-strong); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(15,23,42,.18); display: flex; flex-direction: column; } .app.compact.panel-open main[data-view="board"] .board { padding-bottom: var(--sheet-h, 0px); } /* 下の行もシートの上へスクロールで出せる */ .app.compact.panel-open main:not([data-view="board"]) { margin-bottom: var(--sheet-h, 0px); } .compact .drawer .bk-bar { display: flex; align-items: center; gap: 6px; padding: 10px 8px 6px 12px; min-height: 58px; flex: none; position: relative; border-bottom: 1px solid var(--line); } .compact .drawer.collapsed .bk-bar { border-bottom: 0; } .bk-grip { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 2px; background: #cbd5e1; } .bk-sum { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk-bar .btn.sm { min-height: 36px; padding: 6px 10px; } .bk-bar .close-btn { min-width: 40px; min-height: 36px; } .compact .drawer .bk-body { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 6px 12px 20px; } /* 横には動かさない（9/20 11:35 iPhone 実機：左右に動く） */ .compact .drawer.collapsed .bk-body { display: none; } .compact .drawer .bk-body > .sheet-head { display: none; } /* スマホ幅はバーが見出し・閉じるを兼ねる */ /* スマホ幅の顧客検索（.cust-drawer .drawer.pop）：下シートにせず、ヘッダー直下・画面右上の小さなパネルに出す。 実機では下シートがキーボードの裏に隠れるため、番号を打ちながら（操作しながら）名前・番号が見える上部に置く。 幅は左のキャスト名列（--left-w）を避けて右端に寄せる（ボードのキャスト名は見えたまま）。新規登録（.wide）は入力欄があるので全幅。 候補は「名前様／番号」の2行（.cust-list.two-line）。一致した1件（.hit）は緑で強調 */ .compact .cust-drawer .drawer.pop { top: 6px; right: 6px; bottom: auto; left: auto; width: min(260px, calc(100% - var(--left-w) - 10px)); height: auto; max-height: calc(100% - var(--sheet-h, 0px) - 12px); /* 下シートの予約入力が開いていれば、その上に収める（中でスクロール） */ display: block; overflow: auto; padding: 8px 10px 10px; background: var(--glass-strong); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 8px 24px rgba(15,23,42,.22); } .compact .cust-drawer .drawer.pop.wide { width: calc(100% - 12px); } .compact .cust-drawer .drawer.pop .bk-body { flex: none; overflow: visible; padding: 0; } .cust-pop-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .cust-pop-title { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: var(--muted); } .cust-pop-title b { font-size: 13px; color: var(--text); } .cust-pop-title small { font-size: 11px; font-weight: 500; } .cust-pop-title .cust-phone { font-size: 16px; color: var(--text); } .cust-pop-head .close-btn { min-width: 40px; min-height: 36px; margin-right: -6px; } .cust-list.two-line button { flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; min-height: 52px; } .cust-list.two-line .n { white-space: normal; overflow: visible; font-size: 15px; line-height: 1.25; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cust-list.two-line .n .cust-tag { font-size: 11px; padding: 1px 7px; } .cust-list.two-line .p { margin-left: 0; color: var(--text); font-size: 14px; letter-spacing: .3px; } .cust-list.two-line button.hit { border-color: #9ad4ae; background: var(--success-weak); } .cust-hint.warn { color: var(--warn); font-weight: 600; } .cust-pop-new { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; } .cust-pop-new .btn { width: 100%; min-height: 42px; } .compact .cust-drawer .drawer.pop .cust-hint { margin-top: 6px; } .compact .cust-drawer .drawer.pop .cust-phone { margin: 2px 0; } .compact .cust-drawer .drawer.pop .field { margin-top: 6px; } /* PC／タブレット：ドロワーを下へスクロールしても見出しと「✕」が見えるように上に固定 */ .app:not(.compact) .drawer .bk-body > .sheet-head { position: sticky; top: -12px; z-index: 2; background: var(--glass-strong); margin: -12px -16px 10px; padding: 12px 16px 8px; border-bottom: 1px solid var(--line); } /* スマホ幅の「予約を確定」（.bk-actions）：本文（.bk-body）の外＝シートの最下段に固定（9/20 17:45 指示：ボタンが隠れて押しづらい）。 本文をどこまでスクロールしていても、シートが見えている限り同じ位置に見える。本文の中の sticky（PC）ではなく flex の 1 段として置く。 下の余白は端末の下端（ホームバー）を避ける env(safe-area-inset-bottom) を足す（無い環境は 0）。「ボードを広く」で畳んでいる間（.drawer.collapsed）は本文と一緒に隠す */ .compact .bk-actions { position: static; flex: none; margin: 0; padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-strong); } .compact .drawer.collapsed .bk-actions { display: none; } .bk-cust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bk-name { font-size: 18px; font-weight: 700; } /* 予約入力の先頭：顧客情報カード（顧客情報と予約入力を一体化）。名前・電話・区分・利用実績・要注意・メモは常に表示、利用履歴・登録情報は「利用履歴を見る」で開閉。 要注意のお客様は枠と地色を赤系にして、入力中ずっと目に入るようにする */ .bk-custcard { display: flex; flex-direction: column; gap: 6px; background: #f8fafc; border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; margin: 2px 0 4px; } .bk-custcard.caution { border-color: #f3b4b4; background: #fff7f7; } .bk-custcard .cust-phone { font-size: 14px; } .bk-custcard .bk-name small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; } .bk-custcard .bk-cust > .note { font-size: 11px; } .bk-custcard .cust-memo { min-height: 0; padding: 6px 8px; background: #fff; } .bk-custcard .cust-hist { margin-top: 2px; } .bk-custbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .bk-custbar .btn.sm { min-height: 34px; } .bk-custedit { display: flex; flex-direction: column; gap: 2px; } .bk-custedit .field { margin-bottom: 4px; } .bk-custedit textarea { min-height: 52px; } .compact .bk-custcard { padding: 8px 10px; gap: 5px; } .bk-tip { margin: 6px 0 4px; background: var(--primary-weak); color: #1e3a8a; border-radius: 8px; padding: 6px 10px; } .compact .bk-tip { display: none; } .bk-sec { padding: 10px 0; border-top: 1px solid var(--line); } .bk-title { font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 6px; } .bk-sec select, .bk-sec input[type=text], .bk-sec input[type=date], .bk-sec input[type=number], .bk-sec textarea { border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 10px; background: var(--panel); width: 100%; min-height: 40px; } .bk-sec textarea { resize: vertical; min-height: 56px; } .bk-sec .field { margin-bottom: 8px; } .bk-sec select:disabled, .bk-sec input:disabled, .bk-sec textarea:disabled { background: #f3f4f6; color: var(--muted); } .bk-static { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; background: #f3f4f6; min-height: 40px; color: var(--muted); } .bk-prop { margin-top: 6px; font-size: 13px; background: #fbfcfd; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; overflow-wrap: anywhere; } .bk-opts { display: flex; flex-direction: column; gap: 4px; } .bk-opt { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; min-height: 40px; cursor: pointer; font-size: 13px; } .bk-opt.on { background: var(--primary-weak); border-color: #93c5fd; } .bk-opt input { width: 18px; height: 18px; flex: none; } .bk-opt .note { margin-left: auto; white-space: nowrap; } .bk-inline { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .bk-inline select { width: auto; flex: 1; } .bk-nom { display: flex; width: 100%; } .bk-nom button { flex: 1; min-height: 40px; padding: 6px 4px; font-size: 13px; } .bk-nom button:disabled { color: var(--muted); cursor: not-allowed; } .bk-nom button.active:disabled { background: #94a3b8; color: #fff; } .bk-recent { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .chip.sm { padding: 4px 10px; font-size: 12px; min-height: 32px; } .chip small { color: var(--muted); margin-left: 4px; font-size: 11px; } .bk-sec .bk-adjust { width: 130px; text-align: right; min-height: 34px; padding: 4px 8px; } .bk-actions { position: sticky; bottom: -24px; margin-bottom: -24px; background: var(--glass-strong); padding: 10px 0 12px; margin-top: 4px; border-top: 1px solid var(--line); } /* bottom／margin-bottom はドロワー本文の下余白（24px）と同じ値：最後までスクロールしても底に白い隙間が出ない */ .bk-actions .btn { min-height: 44px; } .bk-actions .btn.primary { flex: 1; font-size: 15px; } /* 設定：マスターの一覧（読み取り専用） */ .mst { width: 100%; border-collapse: collapse; font-size: 13px; } .mst th, .mst td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); } .mst th { color: var(--muted); font-weight: 600; font-size: 12px; } .mst td:nth-child(n+2), .mst th:nth-child(n+2) { white-space: nowrap; text-align: right; } .badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 1px 6px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; } .ico { width: 12px; height: 12px; flex: none; } .st-present { background: var(--success-weak); color: var(--success); border-color: #9ad4ae; } .st-left { background: var(--gray-weak); color: #374151; border-color: #cfd4dc; } .st-nocontact { background: var(--warn-weak); color: var(--warn); border-color: #f5d48a; } .st-absent { background: var(--danger-weak); color: var(--danger); border-color: #f3b4b4; } .st-none { background: #f1f5f9; color: var(--muted); border-color: var(--line-strong); } .kind-badge { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: #eef2ff; color: #3730a3; white-space: nowrap; } .empty-note { padding: 24px; color: var(--muted); text-align: center; } /* modal（画面の中央に表示） */ /* 暗幕は薄く（周りのボードが見える）、ポップアップ本体はドロワーと同じ半透明＋ぼかし（下の予約状況がうっすら見える） */ .backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.18); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; } .sheet { background: var(--glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); width: 100%; max-width: 560px; max-height: 100%; overflow-x: hidden; overflow-y: auto; border-radius: 16px; padding: 14px 16px 20px; box-shadow: 0 12px 40px rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.7); } /* 端末の「透明度を下げる」設定が有効なら、従来どおり不透明の白に戻す */ @media (prefers-reduced-transparency: reduce) { .drawer, .sheet { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; } .app:not(.compact) .drawer .bk-body > .sheet-head, .bk-actions { background: var(--panel); } .backdrop { background: rgba(15,23,42,.45); } } .sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .sheet-head h2 { margin: 0; font-size: 18px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .back-btn { border: 1px solid var(--line-strong); background: var(--panel); border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--primary); } .back-btn:hover { background: #f8fafc; } .close-btn { border: 0; background: transparent; font-size: 20px; padding: 4px 8px; color: var(--muted); } .section { padding: 10px 0; border-top: 1px solid var(--line); } .section h3 { margin: 0 0 6px; font-size: 13px; color: var(--muted); font-weight: 600; } .kv { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; } .kv .k { color: var(--muted); white-space: nowrap; } /* スマホ幅で「金額」が「金／額」に折れないように */ .status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .status-btn { border: 2px solid var(--line-strong); background: var(--panel); border-radius: 12px; padding: 14px 4px; font-weight: 700; white-space: nowrap; font-size: 15px; } .status-btn.present { border-color: #9ad4ae; color: var(--success); } .status-btn.left { border-color: #cfd4dc; color: #374151; } .status-btn.no_contact { border-color: #f5d48a; color: var(--warn); } .status-btn.absent { border-color: #f3b4b4; color: var(--danger); } .status-btn.active.present { background: var(--success-weak); } .status-btn.active.left { background: var(--gray-weak); } .status-btn.active.no_contact { background: var(--warn-weak); } .status-btn.active.absent { background: var(--danger-weak); } .compact .status-grid { grid-template-columns: repeat(2, 1fr); } .compact .status-btn { padding: 16px 4px; } .btn { border: 1px solid var(--line-strong); background: var(--panel); border-radius: 10px; padding: 9px 14px; white-space: nowrap; font-weight: 600; } .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; } .btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn.ghost { border-color: transparent; background: transparent; color: var(--primary); } .btn.sm { padding: 5px 10px; font-size: 12px; } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn-row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; } .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .field label { font-size: 12px; color: var(--muted); } .field input[type=text], .field input[type=number], .field input[type=date], .field input[type=time], .field input[type=tel], .field select, .field textarea { border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 10px; background: var(--panel); width: 100%; min-height: 40px; } .field textarea { min-height: 72px; resize: vertical; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* 送り・迎え（9/19 11:15・11:19 指示）：予約の詳細・予約入力では左右に並ぶチップ。タップ → その日に出勤するドライバー・内勤のプルダウン（.drv-menu） */ .drv-pair { display: flex; flex-wrap: nowrap; gap: 8px; min-width: 0; } .kv.kv-drv { align-items: center; } .kv.kv-drv .drv-pair { flex: 1; min-width: 0; justify-content: flex-end; } .kv.kv-drv .drv-pair .drv-chip { flex: 0 1 auto; max-width: 50%; } .drv-chip { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); font: inherit; font-size: 14px; color: var(--text); text-align: left; cursor: pointer; } .drv-chip em { font-style: normal; color: var(--muted); flex: none; font-size: 12px; } .drv-chip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .drv-chip .caret { margin-left: auto; color: var(--muted); font-style: normal; flex: none; } .drv-chip.tbd b { color: var(--muted); font-weight: 500; } .drv-chip:hover { background: #f8fafc; border-color: #9ca3af; } .drv-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } .drv-chip[disabled] { opacity: .6; cursor: default; } .drv-chip.static { border-color: transparent; background: transparent; padding-left: 0; cursor: default; } .bk-drv .drv-chip { min-height: 44px; } .drv-menu { position: fixed; z-index: 200; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 10px 28px rgba(15,23,42,.22); overflow: hidden; font-size: 14px; color: var(--text); } .drv-menu-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--line); flex: none; } .drv-menu-head .ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .drv-menu-head b { white-space: nowrap; } .drv-menu-head .note { font-size: 12px; line-height: 1.3; } /* 長ければ折り返す（「…」で切らない） */ .drv-menu-head .close-btn { flex: none; min-width: 36px; min-height: 36px; } .drv-list { overflow-y: auto; overflow-x: hidden; min-height: 0; } /* 行＝2 段（1 段目：名前・区分・✓／2 段目：シフト時間・出勤状況・時間外）。横にはみ出さない（スクロールバーを出さない） */ .drv-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px; align-items: center; width: 100%; min-height: 44px; padding: 6px 12px; border: 0; border-bottom: 1px solid var(--line); background: var(--panel); text-align: left; font: inherit; color: var(--text); cursor: pointer; } .drv-opt .l1, .drv-opt .l2 { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; } .drv-opt .l2 { grid-column: 1 / -1; } .drv-opt.one { min-height: 44px; } .drv-opt:last-child { border-bottom: 0; } .drv-opt:hover, .drv-opt:focus-visible { background: var(--primary-weak); outline: none; } .drv-opt.sel { background: #eff6ff; } .drv-opt .nm { font-weight: 600; flex: none; } .drv-opt.tbd .nm, .drv-opt.off .nm { color: var(--muted); font-weight: 500; } .drv-opt .kd { flex: none; font-size: 11px; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 6px; line-height: 16px; } .drv-opt .sh { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .drv-opt .st { flex: none; font-size: 11px; padding: 0 5px; border-radius: 4px; line-height: 16px; background: var(--gray-weak); color: #374151; white-space: nowrap; } .drv-opt .st.present { background: var(--success-weak); color: #166534; } .drv-opt .st.left, .drv-opt .st.no_contact, .drv-opt .st.absent { background: #fee2e2; color: #b91c1c; } .drv-opt .out-tag { flex: none; font-size: 11px; padding: 0 5px; border-radius: 4px; line-height: 16px; background: #fef3c7; color: #b45309; white-space: nowrap; } .drv-opt .chk { flex: none; color: var(--primary); font-weight: 700; } .drv-more { border: 0; border-top: 1px solid var(--line); background: #f8fafc; padding: 10px 12px; font: inherit; font-size: 13px; color: var(--primary); cursor: pointer; min-height: 40px; flex: none; } .drv-empty { padding: 8px 12px; } .drv-menu.compact { font-size: 15px; } /* スマホ幅（メニューは body 直下なので .app.compact の下ではない） */ .drv-menu.compact .drv-opt { min-height: 48px; } .hist { list-style: none; margin: 0; padding: 0; } .hist li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; } .hist li .t { color: var(--muted); width: 48px; } .hist li .op { color: var(--muted); } .hist li.voided { text-decoration: line-through; color: #9ca3af; } .hist li .void-tag { text-decoration: none; font-size: 11px; color: var(--danger); } .op-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .op-grid .op-btn { border: 2px solid var(--line-strong); border-radius: 12px; padding: 16px 6px; background: var(--panel); font-weight: 700; font-size: 15px; } .op-grid .op-btn.active { border-color: var(--primary); background: var(--primary-weak); } .note { font-size: 12px; color: var(--muted); } .warn-text { color: var(--danger); font-size: 12px; } /* shift view */ .week-scroll { flex: 1; min-height: 0; overflow: auto; background: var(--panel); border-top: 1px solid var(--line); } .week { display: grid; grid-template-columns: var(--left-w) repeat(7, minmax(112px, 1fr)); min-width: max-content; } .compact .week { grid-template-columns: 168px repeat(7, 104px); } /* シフト表の左列はこれまでどおり 168px（ボードの --left-w 88px は使わない：名前＋「キャスト・週 40h」を収める） */ .week .corner { height: 52px; } .day-head { position: sticky; top: 0; z-index: 5; background: var(--panel); border-bottom: 1px solid var(--line-strong); border-left: 1px solid var(--line); height: 52px; padding: 6px 8px; font-size: 12px; } .day-head .d { font-weight: 700; font-size: 14px; } .day-head.today { background: var(--primary-weak); } .day-head.sat .d { color: #1d4ed8; } .day-head.sun .d { color: #b91c1c; } .week .left-cell { min-height: 64px; cursor: default; justify-content: center; } .day-cell { border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 64px; padding: 6px; display: flex; flex-direction: column; gap: 4px; } .day-cell.today { background: #f5f9ff; } /* シフト編集「この時間を一括登録」（9/21 10:06 指示）：開始・終了の直下。タップで開き、終了日（いつまで）・案内文・「登録済みの日も上書き」が出る */ .bulk { margin: -2px 0 10px; } .bulk-toggle { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; border: 1px dashed var(--line-strong); background: #f8fafc; border-radius: 10px; padding: 8px 12px; font-weight: 600; color: var(--primary); text-align: left; } .bulk-toggle .caret { margin-left: auto; color: var(--muted); font-weight: 400; } .bulk-toggle[aria-expanded="true"] { border-style: solid; border-color: var(--primary); border-radius: 10px 10px 0 0; background: var(--primary-weak); } .bulk-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); } .bulk-body { border: 1px solid var(--primary); border-top: 0; border-radius: 0 0 10px 10px; padding: 10px 12px 2px; background: var(--panel); } .bulk-body .field { margin-bottom: 8px; } .bulk-body .field label { white-space: normal; line-height: 1.35; } .bulk-body .note { margin: 0 0 4px; line-height: 1.45; min-height: 1.45em; } .bulk-body .note.ok { color: var(--text); font-weight: 600; } .bulk-body .note.err { color: var(--danger); } .bulk-body .cust-check { font-size: 13px; } /* シフト編集のシートは 3 段構成（9/21 10:28 IMG_8302「一括登録を開くとボックスが見切れる」への対応。PC・タブレット・スマホ共通）： 見出し（上に固定）／本文 .sheet-body（ここだけ縦スクロール）／ボタン行 .sheet-foot（下に固定・区切り線）。シートの高さは中身の高さ、上限は画面（.backdrop の余白 16px を除く）。 旧：シート全体がスクロール＋スマホ幅だけボタン行を sticky → 一括登録の箱の下端・備考がボタン行の裏に隠れて見え、PC は画面が低いと「保存」が下に切れた */ .sheet.sheet-fixed-foot { display: flex; flex-direction: column; padding: 0; overflow: hidden; } .sheet.sheet-fixed-foot > .sheet-head { flex: none; margin: 0; padding: 14px 16px 8px; border-bottom: 1px solid var(--line); } /* 区切り線：本文が上に送られても見出しの下で切れているのが分かる */ .sheet.sheet-fixed-foot > .sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 16px 2px; overscroll-behavior: contain; } .sheet.sheet-fixed-foot > .sheet-foot { flex: none; margin: 0; padding: 10px 16px 14px; border-top: 1px solid var(--line); } /* シートの日付入力（.field input[type=date]）：iPhone・iPad の Safari は標準の見た目のまま幅 100% を指定すると箱が欄より約 22px 広くなり右端が切れて見えた（IMG_8302：「日付」「いつまで」の右の角がない）。 予約入力（.bk-form）と同じく標準の見た目を外して（appearance: none）自前の枠だけにし、値は左寄せ・空でも高さを保つ。Chromium・PC は見た目・動き変わらず */ .field input[type=date], .field input[type=time] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; width: 100%; box-sizing: border-box; background-clip: padding-box; } .field input[type=date]::-webkit-date-and-time-value, .field input[type=time]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.3em; } .field input[type=date]::-webkit-calendar-picker-indicator, .field input[type=time]::-webkit-calendar-picker-indicator { padding: 0; margin-left: 2px; } /* 空の日付入力の案内（iOS だけ）：iOS は空の日付入力に何も表示しない（PC・Android の「年/月/日」に当たる表示がない）ので「タップして日付を選択」を重ねる。値が入ると消える（.has-value は JS） */ .date-box { position: relative; } .date-box .date-ph { display: none; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; white-space: nowrap; } .app.ios .date-box:not(.has-value) .date-ph { display: block; } .shift-chip { border: 1px solid #93c5fd; background: #e6f0ff; color: #1e3a8a; border-radius: 6px; padding: 4px 6px; font-size: 12px; text-align: left; white-space: nowrap; } .add-btn { border: 1px dashed var(--line-strong); background: transparent; color: var(--muted); border-radius: 6px; padding: 4px; font-size: 12px; } .add-btn:hover { background: #f8fafc; } /* staff list */ .list { flex: 1; min-height: 0; overflow: auto; padding: 8px 12px 24px; display: flex; flex-direction: column; gap: 8px; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; } .card.inactive { opacity: .6; } .card .grow { flex: 1; min-width: 0; } .card .title { font-weight: 700; display: flex; align-items: center; gap: 6px; } .card .sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .form-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 8px 12px; max-width: 640px; } .form-panel h3 { margin: 0 0 10px; font-size: 15px; } .settings-scroll { flex: 1; min-height: 0; overflow: auto; padding-bottom: 24px; } /* toast */ #toast-root { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 100; pointer-events: none; } .app.compact.panel-open #toast-root { bottom: calc(var(--sheet-h, 56%) + 12px); } /* スマホ幅で下シート（顧客検索・予約入力）が開いている間は、シートのバーを隠さない */ .toast { background: #111827; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.25); animation: fade 3s forwards; max-width: 90%; } .toast.err { background: var(--danger); } .toast.ok { background: var(--success); } @keyframes fade { 0% { opacity: 0; transform: translateY(8px);} 8% { opacity: 1; transform: none;} 80% { opacity: 1;} 100% { opacity: 0;} } @media (max-width: 640px) { .topbar { padding: 6px 8px; } .toolbar { padding: 6px 8px; } } /* ---- 予約入力：1 項目 1 行（左：番号＋項目名／右：入力）。9/19 12:52 指示：実際に予約を取る流れの 14 項目順・スクロールを短く ---- */ .bk-form { padding: 2px 0 0; border-top: 0; } .bk-row { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 3px 8px; align-items: start; padding: 4px 0; border-top: 1px solid var(--line); } .bk-row:first-child { border-top: 0; } .bk-row.sub { padding-top: 0; border-top: 0; } /* 部屋番号：派遣先の続き（線なし・字下げ） */ .bk-row.sub .bk-lab { padding-left: 14px; font-weight: 600; font-size: 12px; } .bk-row.notes { border-top: 1px dashed var(--line); } .bk-lab { font-size: 13px; font-weight: 700; color: var(--text); padding-top: 9px; line-height: 1.2; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .bk-lab small { font-size: 11px; font-weight: 500; color: var(--muted); } .bk-ctl { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .bk-form select, .bk-form input[type=text], .bk-form input[type=date], .bk-form input[type=time], .bk-form input[type=number] { border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); width: 100%; min-height: 36px; padding: 5px 8px; font-size: 14px; } .bk-form input[type=number] { text-align: right; } .bk-form select:disabled, .bk-form input:disabled, .bk-form textarea:disabled { background: #f3f4f6; color: var(--muted); } .bk-form .bk-static { min-height: 36px; padding: 7px 10px; font-size: 13px; display: flex; align-items: center; } .bk-form textarea { min-height: 46px; padding: 6px 8px; } .bk-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; min-width: 0; } /* 1. 日時（9/20 12:29 指示：iPhone で日付と時刻の箱が重なる）：日付 3：時刻 2 に分け、それぞれを .bk-cell（overflow hidden・min-width 0）に入れる。 iOS Safari の日付・時刻の入力は中身の幅（「2026/09/20」＋余白）より狭くならず隣の箱に重なることがあるため、箱の側で必ず切る。見た目は自前（appearance: none）にして UA の最小幅も外す */ .bk-dt { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .bk-cell { min-width: 0; overflow: hidden; display: flex; } .bk-cell > input { flex: 1 1 0; width: 100%; min-width: 0; max-width: 100%; } .bk-form input[type=date], .bk-form input[type=time] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; background-clip: padding-box; } .bk-form input[type=date]::-webkit-date-and-time-value, .bk-form input[type=time]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.3em; } /* iOS：値を左寄せ・右の余白 24px を外す・空のとき高さが潰れないように */ .bk-form input[type=date]::-webkit-calendar-picker-indicator, .bk-form input[type=time]::-webkit-calendar-picker-indicator { padding: 0; margin-left: 2px; } .bk-mini { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .bk-mini em { font-style: normal; font-size: 11px; color: var(--muted); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk-line { display: flex; align-items: center; gap: 8px; min-width: 0; } /* 派遣先：ホテル／ビジネスホテル／自宅 を 1 行ずつ */ .bk-line em { flex: none; width: 92px; font-style: normal; font-size: 12px; color: var(--muted); } .bk-sub { line-height: 1.35; } .bk-area { display: flex; width: 100%; } .bk-area button { flex: 1; min-height: 36px; padding: 6px 2px; font-size: 13px; } .bk-area button:disabled { color: var(--muted); cursor: not-allowed; } .bk-area button.active:disabled { background: #94a3b8; color: #fff; } .pay-pair .pay-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-height: 46px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); font: inherit; text-align: left; cursor: pointer; min-width: 0; } .pay-btn em { font-style: normal; font-size: 12px; color: var(--muted); } .pay-btn b { font-size: 16px; } .pay-btn.active { border-color: var(--primary); background: var(--primary-weak); box-shadow: inset 0 0 0 1px var(--primary); } .pay-btn.active em { color: #1d4ed8; } .pay-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } .pay-btn[disabled] { opacity: .6; cursor: default; } .linkbtn { border: 0; background: transparent; color: var(--primary); font: inherit; font-size: 12px; padding: 2px 4px; cursor: pointer; text-decoration: underline; text-align: left; align-self: flex-start; } .bk-form .bk-prop { margin-top: 0; font-size: 12px; padding: 4px 8px; } /* 9. ポイント利用／10. 割引き を 1 行に（9/19 15:35 指示）→ 9/19 17:00 指示で 11. 金額調整（支払金額／キャスト給与）と同じボックス幅に。 行の構造は他の行と同じ「左：項目名（9.／10. の 2 行）／右：.bk-pair の 2 等分」。PC ≒ 134px・スマホ幅 ≒ 113px ずつで、11〜14 のボックスと縦にそろう。 割引のプルダウンは閉じた状態で名称だけ（この幅に「イベント割｜−￥2,000」は入らない）。金額は選ぶと小見出し（.bk-mini-lab）の右に太字で出す */ .bk-dual .bk-lab > span { display: block; } .bk-mini-lab { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; } .bk-mini-lab > span { flex: none; white-space: nowrap; } .bk-mini-val { font-style: normal; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .bk-mini-val.on { font-weight: 700; color: var(--text); } .cust-addr { font-size: 13px; overflow-wrap: anywhere; } /* 顧客カードの住所（登録があるときだけ 1 行） */ .cust-addr .k { display: inline-block; font-size: 11px; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; margin-right: 6px; line-height: 1.5; vertical-align: 1px; } .bk-custedit .field label small { font-weight: 400; margin-left: 4px; } .compact .bk-row { grid-template-columns: 96px minmax(0, 1fr); padding: 4px 0; gap: 3px 6px; } /* 「9. ポイント利用」が 1 行で収まる幅 */ .compact .bk-lab { font-size: 12px; padding-top: 10px; } .compact .bk-lab small { font-size: 10px; } .compact .bk-line em { width: 78px; font-size: 11px; } /* 「ビジネスホテル」11px × 7 文字 = 77px */ .compact .bk-form select, .compact .bk-form input[type=text], .compact .bk-form input[type=date], .compact .bk-form input[type=time], .compact .bk-form input[type=number] { font-size: 16px; padding: 6px 6px; } /* 16px：iPhone Safari の自動拡大を起こさせない（9/20 17:45。旧 13px） */ .compact .pay-btn b { font-size: 15px; } /* ---- スマホ幅のボード（9/20 11:05 指示：予約表をもっと見えるように・60分枠でも他の分数と同じ中身を出す） ---- 1) ヘッダー（店舗・日付／検索・操作者／タブ／キャスト・内勤・ドライバー／時刻）を詰める：計 234px → 約 180px 2) 左列を 168px → 88px（--left-w）：名前＋件数／状態／シフト時間／メモの抜粋（2 行まで）。支給・控除・メモ入力は名前をタップして開くシート（従来からある）で扱う 3) 時間軸を PC と同じ 10分＝15px（--slot-w）：60分枠 88px＝これまでの 90分枠と同じ幅なので、時刻・派遣先・送り迎えが出る（.tight の規則をそのまま使う） 4) 行の高さは予約枠の中身（5 行）で決まるので、枠の中の余白と文字を少し詰めて 130px → 約 100px に ※ 試作用のスイッチ（時間軸を広く／スマホ幅）は実機（幅 640px 以下の画面）では出さない。PC で「スマホ幅」を試すときは黒い枠の外（右上）に出す */ .compact .topbar-left { gap: 5px; } .compact .store-name { font-size: 13px; } .compact .icon-btn { padding: 5px 8px; font-size: 12px; } .compact .date-btn { padding: 5px 8px; font-size: 13px; } .compact .chip { padding: 5px 10px; font-size: 13px; } .compact .cust-input { min-height: 34px; border-radius: 8px; } .compact .cust-go { min-height: 34px; } .compact .tab { padding: 7px 6px; font-size: 13px; border-bottom-width: 2px; } .compact .toolbar { padding: 4px 8px; gap: 6px; } .compact .seg button { padding: 5px 9px; font-size: 13px; } .compact .toolbar .note { font-size: 11px; } .compact .toolbar .note.has-res .n-staff, .compact .toolbar .note.has-res .n-sep { display: none; } /* 「10名・予約 16件」→「予約 16件」（1 行に収める） */ .compact .toolbar .toggle span { display: inline; font-size: 11px; } /* 「取消を表示」の文字を出す（チェックボックスだけでは意味が分からない） */ .compact .toolbar .toggle input { margin: 0 2px 0 0; } .compact .corner { padding: 0 6px; font-size: 11px; } /* 左列（88px）：ボードだけ（.board）。シフト表の .left-cell（168px・min-height 64px）には掛けない */ .compact .board .left-cell { padding: 5px 4px 5px 6px; gap: 2px; min-height: 124px; } /* min-height：予約枠の中身（帯 12px＋2px ＋ 5 行 ≒ 78px）＋上 12px・下 6px＋余裕 4px（行の高さは左列で決まる）。9/21 11:59 の帯で 104px → 114px */ .compact .board .left-cell .name-row { gap: 2px 4px; } .compact .board .left-cell .name { font-size: 14px; } .compact .board .left-cell .badge { font-size: 10px; padding: 0 5px; gap: 2px; } .compact .board .left-cell .badge .ico { width: 10px; height: 10px; } .compact .board .left-cell .reason { font-size: 10px; white-space: normal; } .compact .board .left-cell .shift-line { font-size: 10.5px; gap: 4px; letter-spacing: -.2px; font-variant-numeric: tabular-nums; } /* 「14:00～翌5:00」（約 66px）を 76px に収める */ .compact .board .left-cell .shift-line .cnt { display: none; } /* 件数は名前の横（.cnt-top）に */ .left-cell .cnt-top { display: none; } .compact .board .left-cell .cnt-top { display: inline-block; font-size: 10px; color: var(--muted); background: #f1f5f9; border-radius: 999px; padding: 0 5px; line-height: 1.5; } .compact .board .left-cell .pay-line, .compact .board .left-cell .memo-input { display: none; } /* 支給・控除・メモ入力 → 名前タップのシート */ .left-cell .memo-line { display: none; } .compact .board .left-cell .memo-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; font-size: 10px; line-height: 1.3; color: #4b5563; margin-top: 1px; } /* メモの抜粋（2 行まで・枠なし＝10px で 7 文字が 1 行に入る）。タップ → シートで全文・編集 */ /* 予約枠：中身を少し詰める（行の高さ 131px → 124px。9/21 15:32：送り／迎え の下の ✔済／送信済 の行（13px）が入るよう 114px → 124px） */ .compact .rsv { padding: 2px 4px; gap: 0; line-height: 1.2; } .compact .rsv .j1 { row-gap: 0; } .compact .rsv > span { flex-shrink: 0; } /* 中身が多いときは下（送り／迎え）が切れるだけにし、時刻・派遣先の行が重なって潰れないようにする */ .rsv.ending .j-hd, .rsv.overdue .j-hd { display: none; } /* 9/21 15:32：警告（残り／超過）がある枠は幅に関わらず 状態・分数 の行を警告バッジに置き換える（.wc と同じ扱い。名前＋警告＋時刻＋派遣先＋送迎＋✔済 の 6 行を行の高さに収める。分数は詳細・マウスオーバーで） */ .compact .rsv .j5 .dv.ed { padding: 2px 3px; margin: -2px -3px; } /* 試作用スイッチの扱い */ @media (max-width: 640px) { .topbar .toggle { display: none; } } /* 実機（幅 640px 以下）：時間軸を広く／スマホ幅 は出さない */ #frame.phone .topbar-right .tg-wide { display: none; } /* PC の「スマホ幅」確認中：時間軸を広く はスマホ幅に効かないので出さない */ #frame.phone .topbar-right .tg-phone { position: fixed; top: 12px; right: 16px; z-index: 100; color: #fff; background: rgba(0,0,0,.35); border-radius: 999px; padding: 4px 10px; } #frame.phone .topbar-right .tg-phone span { display: inline; } /* ---- iPhone 実機の確認（9/20 11:35 指示・IMG_8295／8296）：シート本文が左右に動く／ボックスが重なって見える ---- 1) 左右に動く：WebKit（Safari／iOS）は