/* スマホ・タブレット向けの枠(1段目)。パソコン(901px 以上)の見た目は変えない。
   ・900px 以下: 上に1行の帯(☰・ソフト名・🔍・👤)、下によく使う画面のボタン帯。左のメニューは、☰ で横から引き出す
   ・提供元の表記は、640px 以下で1行に縮める(押すと全文)
   ・640px 以下: 表をカードにする(mobile.js が、見出しを各欄に付ける)
   ・1100px 以下: 表は枠の中で横に動かし、いちばん左の列(氏名など)を止めておく */

.m-top, .m-tabbar, .m-backdrop, .m-pc-only, .m-nav-phone { display: none; }

/* ---- 表: 枠の中で横に動かす(mobile.js が .m-scroll で包む)。いちばん左の列は止める ---- */
@media screen and (max-width: 1100px) {
  .m-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .m-scroll > table.table { min-width: 100%; }
  .m-scroll > table.table th { white-space: nowrap; }
  .m-scroll > table.table > * > tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--panel, #fff); min-width: 6.5em; }
  .m-scroll > table.table > thead > tr > :first-child { z-index: 2; }
}

@media screen and (max-width: 900px) {
  :root { --m-top-h: 52px; --tabbar-h: 60px; }
  html { -webkit-text-size-adjust: 100%; }

  /* 上の帯(1行) */
  .m-top { display: flex; align-items: center; gap: 4px; position: sticky; top: 0; z-index: 60; height: var(--m-top-h); padding: 0 6px; background: var(--side); color: var(--side-text); box-shadow: 0 2px 10px -4px rgba(16,24,40,.35); }
  .m-top-brand { flex: 1; min-width: 0; color: inherit; text-decoration: none; font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
  .m-top-btn { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: inherit; font-size: 21px; line-height: 1; cursor: pointer; }
  .m-top-btn[aria-expanded="true"], .m-top-btn:active { background: rgba(255,255,255,.18); }

  /* 左のメニュー → 横から引き出す */
  .layout { display: block; min-width: 0 !important; }
  .sidebar { position: fixed !important; top: 0; left: 0; bottom: 0; z-index: 80; width: min(86vw, 320px) !important; height: 100% !important; max-height: 100dvh; flex-direction: column !important; flex-wrap: nowrap !important; padding: 12px 10px calc(16px + env(safe-area-inset-bottom)) !important; overflow-y: auto; transform: translateX(-105%); transition: transform .22s ease; box-shadow: 4px 0 24px rgba(16,24,40,.35); }
  body.m-nav-open .sidebar { transform: none; }
  body.m-nav-instant .sidebar { transition: none; }
  .sidebar a { font-size: 16px !important; padding: 11px 14px !important; margin: 1px 0 !important; border-radius: 10px !important; }
  .nav-sortable, .nav-block { display: block !important; }
  .nav-block.nav-empty, .sidebar.nav-tabs-on .nav-block:not(.nav-active-tab) { display: none !important; } /* スタッフ・管理者・経営のタブは、そのまま */
  .sidebar { align-items: stretch !important; align-content: stretch !important; }
  .sidebar a.brand { flex: none !important; margin: 0 0 10px !important; text-align: left; font-size: 17px !important; }
  .nav-tabs { flex: none !important; margin: 0 0 8px !important; }
  .nav-clientmode { margin: 10px 4px; }
  body.m-nav-open .chat-fab, body.m-user-open .chat-fab, body.m-nav-open .chat-panel, body.m-user-open .chat-panel { display: none; }
  .nav-sort-toggle { display: none !important; } /* 並べ替え(ドラッグ)は、パソコンで */
  .m-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(16,24,40,.45); }
  body.m-nav-open .m-backdrop, body.m-user-open .m-backdrop { display: block; }
  body.m-nav-open { overflow: hidden; }

  /* 右上(検索・名前・マイページ・ログアウト) → 👤 で開く */
  .main { padding: 14px 14px 18px !important; }
  .main > .userbar { display: none !important; }
  body.m-user-open .main > .userbar { display: flex !important; position: fixed; top: calc(var(--m-top-h) + 6px); right: 8px; left: 8px; z-index: 75; float: none; margin: 0; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px; background: var(--panel, #fff); border-radius: 14px; box-shadow: 0 12px 32px rgba(16,24,40,.3); }
  body.m-user-open .userbar-search input { width: 100% !important; box-sizing: border-box; }
  body.m-user-open .userbar .userbar-btn { display: block; width: 100%; text-align: center; padding: 11px 14px; box-sizing: border-box; }
  body.m-user-open .userbar form { width: 100%; }
  body.m-user-open .userbar-name { text-align: center; }

  /* 下のボタン帯(よく使う画面) */
  .m-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--panel, #fff); border-top: 1px solid var(--line, #dde); box-shadow: 0 -2px 12px -6px rgba(16,24,40,.25); }
  .m-tabbar a, .m-tabbar button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: transparent; color: var(--muted, #555); font: inherit; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; }
  .m-tabbar .mi { font-size: 22px; line-height: 1; }
  .m-tabbar .on { color: var(--primary); }
  .m-tabbar .on .mi { transform: scale(1.08); }
  body.m-has-tabbar .credit-bar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)) !important; } /* 下のボタン帯がない画面(ログイン・利用者モード・打刻用端末)では、いちばん下 */
  body.m-has-tabbar { padding-bottom: calc(var(--credit-h, 24px) + var(--tabbar-h) + env(safe-area-inset-bottom)) !important; }
  body.m-has-tabbar .chat-fab { bottom: calc(var(--credit-h, 24px) + var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); }
  body:not(.m-has-tabbar) .chat-fab { bottom: calc(var(--credit-h, 24px) + 12px); }
  body:has(#chat-fab) .main { padding-bottom: 76px !important; } /* いちばん下まで送ったとき、右下の「質問」のボタンが、保存ボタン・入力欄に重ならないように */

  /* 押す所を大きく(指で押しやすく)。入力欄は16px(iPhone で、押したときに拡大されない) */
  .main .btn, .main button:not(.link):not(.m-top-btn):not(.hs-btn), .main .tabs a { min-height: 44px; box-sizing: border-box; }
  .main .btn { display: inline-flex; align-items: center; justify-content: center; }
  .main table .btn, .main table button, .main table input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .main table select { min-height: 36px; } /* 表の中は、行が高くなりすぎないように */
  .main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .main select, .main textarea { font-size: 16px !important; min-height: 44px; box-sizing: border-box; }
  .main input[type="checkbox"], .main input[type="radio"] { width: 22px; height: 22px; }
  .main label:has(> input[type="checkbox"], > input[type="radio"]):not(td label):not(th label) { padding-top: 9px; padding-bottom: 9px; } /* チェック欄の見出しごと、指で押しやすく */
  .main label.inline { max-width: 100%; white-space: normal; box-sizing: border-box; }
  .main label.inline > input[size], .main input[size] { max-width: 100%; min-width: 0; flex: 1 1 auto; }
  .main .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .main .tabs a { white-space: nowrap; display: inline-flex; align-items: center; }
  .main > h1 { font-size: 22px; margin: 4px 0 12px; }
}

@media screen and (max-width: 640px) {
  /* パソコンで使う画面の案内(幅640px以下だけ。タブレット縦では出さない) */
  .m-pc-only { display: block; position: fixed; inset: 0; z-index: 95; background: rgba(16,24,40,.55); padding: 18vh 18px 0; }
  .m-pc-only[hidden] { display: none; }
  .m-pc-only .m-pc-box { max-width: 420px; margin: 0 auto; background: var(--panel, #fff); border-radius: 16px; padding: 22px 18px; box-shadow: 0 16px 40px rgba(0,0,0,.3); text-align: center; }
  .m-pc-only .m-pc-icon { font-size: 40px; }
  .m-pc-only h2 { margin: 6px 0 8px; font-size: 19px; }
  .m-pc-only p { margin: 0 0 16px; line-height: 1.7; }
  .m-pc-only .actions { display: flex; flex-direction: column; gap: 10px; }
  .m-pc-only .btn { width: 100%; min-height: 48px; font-size: 16px; }
}

/* ---- スマホ: 提供元の表記は1行(押すと全文)・表はカード ---- */
/* スマホを横にしたとき(高さが500px以下)も、提供元の表記は1行(3行のままだと、入力できる所が半分ほどになる) */
@media screen and (max-width: 640px), screen and (max-width: 900px) and (max-height: 500px) {
  .credit-bar { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px 10px !important; font-size: 10.5px !important; cursor: pointer; }
  .credit-bar br { display: none; }
  .credit-bar.open { white-space: normal; overflow: visible; }
  .credit-bar.open br { display: inline; }
}
@media screen and (max-width: 640px) {
  table.table.m-cards, table.table.m-cards > tbody { display: block; width: 100%; min-width: 0 !important; }
  table.table.m-cards > thead { display: none; }
  table.table.m-cards > tbody > tr { display: block; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line, #dde); border-radius: 12px; background: var(--panel, #fff); box-shadow: 0 1px 3px rgba(16,24,40,.06); }
  table.table.m-cards > tbody > tr > td { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; padding: 5px 0 !important; border: 0 !important; border-bottom: 1px dashed var(--line, #e3e6ee) !important; text-align: right; position: static !important; min-width: 0 !important; background: transparent !important; }
  table.table.m-cards > tbody > tr > td:last-child { border-bottom: 0 !important; }
  table.table.m-cards > tbody > tr > td::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left; color: var(--muted, #667); font-size: 13px; font-weight: 600; }
  table.table.m-cards > tbody > tr > td[data-label=""]::before { display: none; }
  table.table.m-cards > tbody > tr > td:first-child { display: block; text-align: left; font-size: 17px; font-weight: 700; padding-top: 0 !important; }
  table.table.m-cards > tbody > tr > td:first-child::before { display: none; }
  table.table.m-cards > tbody > tr > td:empty { display: none; }
  .m-scroll.m-scroll-cards { overflow: visible; }
  /* コンパクト: 短い値の項目は2列の格子で横に並べる・項目名は小さく・行間を詰める */
  table.table.m-cards > tbody > tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; margin-bottom: 8px; padding: 8px 10px; }
  table.table.m-cards > tbody > tr > td { grid-column: 1 / -1; padding: 3px 0 !important; }
  table.table.m-cards > tbody > tr > td::before { font-size: 11.5px; font-weight: 500; }
  table.table.m-cards > tbody > tr > td[data-short="1"] { grid-column: auto; flex-direction: column; align-items: flex-start; gap: 0; text-align: left; border-bottom: 1px dashed var(--line, #e3e6ee) !important; }
  table.table.m-cards > tbody > tr > td[data-short="1"]::before { max-width: 100%; }
  table.table.m-cards > tbody > tr > td:first-child { font-size: 16px; }
  table.table.m-cards > tbody > tr > td:last-child { border-bottom: 0 !important; }
  /* カードにしない表: 横に動かす(1列目は固定)・文字は切らない */
  .m-scroll:not(.m-scroll-cards) > table.table td { white-space: normal; min-width: 4.5em; }
  .m-scroll:not(.m-scroll-cards) > table.table td, .m-scroll:not(.m-scroll-cards) > table.table th { padding: 6px 8px; }
}

@media print {
  .m-top, .m-tabbar, .m-backdrop, .m-pc-only { display: none !important; }
}

/* ---- タブレットを横にしたとき(901px 以上で、指で操作する端末): 画面の形はパソコンのまま、押す所と文字の欄を、指に合わせる ---- */
@media screen and (min-width: 901px) and (hover: none) and (pointer: coarse) {
  .mic-btn:not(.mic-mini) { min-height: 36px; padding: 4px 12px; }
  .userbar-btn { min-height: 40px; display: inline-flex; align-items: center; }
  .userbar-search input { font-size: 16px; min-height: 40px; }
  .main .btn:not(table .btn), .main button.btn:not(table button) { min-height: 44px; }
  .main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(table input), .main select:not(table select), .main textarea:not(table textarea) { font-size: 16px; min-height: 40px; } /* iPad で、押したときに拡大されない */
}

/* ===== 2段目: 現場の画面(スマホ・タブレット) ===== */
.m-only { display: none !important; }
@media screen and (max-width: 900px) {
  .m-only { display: block !important; }
  .m-wide { display: flex !important; width: 100%; justify-content: center; }

  /* ホーム: 数字は3つずつ小さく */
  .hm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .hm-tile { padding: 10px 8px !important; }
  .hm-tile .hm-n { font-size: 22px !important; }
  .hm-tile .hm-l { font-size: 11.5px !important; line-height: 1.3; }
  .home-staffpunch .btn-big { width: 100%; justify-content: center; min-height: 56px; font-size: 18px; }
  .hm-ride-list { list-style: none; padding: 0; margin: 0 0 10px; }
  .hm-ride-list li { padding: 6px 0; font-size: 16px; }

  /* スタッフの打刻: 自分の大きなボタン */
  .sp-me { text-align: center; }
  .sp-me-name { font-size: 18px; font-weight: 700; }
  .sp-me-clock { font-size: 44px; font-weight: 700; letter-spacing: .02em; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
  .sp-me-form { margin: 14px 0 10px; }
  .sp-me-go { width: 100%; min-height: 72px !important; font-size: 24px !important; border-radius: 16px !important; }
  .sp-me-done { font-size: 17px; font-weight: 700; color: var(--ok, #1a7f4b); }

  /* 利用者の打刻: 押す所を大きく */
  .punch-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 10px !important; }
  .punch-card .punch-go { width: 100%; min-height: 56px; font-size: 18px; }
  .punch-card .punch-name a { font-size: 17px; }

  /* 自分の送迎 */
  .mine-nav { flex-wrap: wrap; gap: 8px; }
  .mine-stops { list-style: none; counter-reset: st; padding: 0; margin: 0; }
  .mine-stop { counter-increment: st; display: grid; grid-template-columns: 34px 1fr; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--line, #e3e6ee); }
  .mine-stop::before { content: counter(st); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .mine-stop.done { opacity: .5; }
  .mine-stop.done::before { content: '✓'; background: var(--ok, #1a7f4b); }
  .mine-name { font-size: 18px; font-weight: 700; }
  .mine-time { font-size: 15px; color: var(--primary); margin-left: 6px; }
  .mine-place { font-size: 15px; margin-top: 2px; }
  .mine-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .mine-acts .btn { min-height: 44px; }
  .mine-check { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; padding: 8px 12px; border: 2px solid var(--line, #dde); border-radius: 12px; }

  /* 支援記録: 1人ずつ */
  .rec-one-bar { position: sticky; top: var(--m-top-h); z-index: 20; display: flex; align-items: center; gap: 8px; padding: 8px 0; background: var(--bg, #f5f6f8); }
  .rec-one-bar .btn { min-height: 48px; flex: none; }
  .rec-one-bar select { flex: 1; min-width: 0; }
  .rec-one tr.rec-row:not(.rec-cur) { display: none !important; }
  .rec-one .rec-chunk:not(:has(tr.rec-cur)) { display: none; }
  .rec-one-next { width: 100%; min-height: 52px; margin: 8px 0 18px; } /* 下の「一覧の内容を保存」と、押し間違えないよう、間をあける */
  .rec-one-bar[hidden], .rec-one-next[hidden] { display: none !important; }
  #rec-list.rec-cards td label:has(> input[type="checkbox"]) { display: inline-block; padding: 9px; margin: -9px 0; } /* カードの迎え・送り・食事のチェックを、指で押しやすく */
}
@media screen and (max-width: 640px) {
  .m-hide-phone { display: none !important; }
  .sp-others.m-folded { display: none; }
  .punch-opts { display: none; }
}

/* 電波がないときに置いた打刻の知らせ(public/offline.js) */
.offline-banner { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #fff7e6; border: 1px solid #f0b429; color: #7a4b00; font-weight: 600; font-size: 15px; }

/* ===== スマホのメニュー: スマホ向きを先に、パソコン向きは折りたたみ(src/lib/phone_menu.js・header.ejs) ===== */
@media screen and (max-width: 900px) {
  .sidebar.m-phone-nav .nav-tabs, .sidebar.m-phone-nav .nav-block { display: none !important; }
  .sidebar.m-phone-nav .m-nav-phone { display: block; }
  .m-nav-phone .nav-group { margin: 6px 4px 4px; }
  .m-nav-pc { margin: 12px 0 6px; border-top: 1px solid rgba(255,255,255,.2); padding-top: 8px; }
  .m-nav-pc > summary { cursor: pointer; padding: 11px 14px; font-size: 15px; font-weight: 700; list-style: none; opacity: .85; }
  .m-nav-pc > summary::-webkit-details-marker { display: none; }
  .m-nav-pc > summary::before { content: '▶  '; font-size: 12px; }
  .m-nav-pc[open] > summary::before { content: '▼  '; }
  .m-nav-pc-note { margin: 0 14px 6px; font-size: 12.5px; opacity: .75; line-height: 1.5; }
  .m-nav-pc a { font-size: 15px !important; opacity: .9; }
  .m-nav-pc a::before { content: '・'; }
}

/* 自分のシフト(スマホ): ボタン・今週・今日の出勤者。月の移動は1行 */
@media screen and (max-width: 900px) {
  .mine-sp .mine-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
  .mine-sp .mine-btns .btn { text-align: center; line-height: 1.3; padding: 8px 6px; }
  .mine-sp .mine-h { margin: 14px 0 6px; font-size: 16px; }
  .mine-wrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line, #dde); border-radius: 10px; margin-bottom: 4px; font-size: 16px; }
  .mine-wrow.work { background: #f1f8ff; border-color: #9cc5ee; }
  .mine-wrow.off { color: #868e96; font-size: 15px; padding: 5px 12px; }
  .mine-wrow.today { outline: 3px solid #ffb300; font-weight: 700; }
  .mine-wrow.sat .mine-wd { color: #1d6fd1; } .mine-wrow.sun .mine-wd { color: #d6336c; }
  .mine-today { list-style: none; margin: 0; padding: 0; }
  .mine-today li { padding: 7px 4px; border-bottom: 1px solid var(--line, #e3e6ee); font-size: 16px; }
  .mine-today li.me { background: #fff8e1; }
  .card.mine .toolbar { flex-wrap: nowrap; gap: 6px; align-items: center; }
  .card.mine .toolbar .btn { padding: 6px 8px; font-size: 14px; flex: none; }
  .card.mine .toolbar form { flex: 1; min-width: 0; margin: 0; }
  .card.mine .toolbar input[type="month"] { width: 100%; min-width: 0; }
  .card.mine .toolbar strong { display: none; }
}

/* ===== R28 担当P2: 全員の確定シフト(週表示)・希望シフト(縦リスト)・勤怠の申請(スマホ)。パソコンの幅では、何も変えない ===== */
.rq-list, .rq-bar, .m-req-phone, .m-days-toggle { display: none; }
@media screen and (max-width: 900px) {
  .sh-pc-only { display: none !important; }

  /* 全員の確定シフト: 週表示 */
  .sh-ph-seg { margin: 0 0 10px; }
  .sh-ph-note { margin: 4px 0 8px; }
  .sh-ph-nav { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 0 8px; }
  .sh-ph-nav .btn { flex: none; padding: 6px 10px; font-size: 14px; }
  .sh-ph-range { flex: 1; display: flex; flex-direction: column; align-items: center; font-size: 16px; line-height: 1.3; text-align: center; }
  .sh-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--line, #dde); border-radius: 10px; background: var(--panel, #fff); font-size: 13px; }
  .sh-leg { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
  .sh-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 28px; padding: 0 4px; border-radius: 8px; font-size: 14px; line-height: 1; box-sizing: border-box; border: 1px solid rgba(0,0,0,.12); }
  .sh-chip b { font-weight: 700; }
  .sh-chip-off { background: #f8f9fa; color: #adb5bd; border-color: #e9ecef; }
  .sh-chip-off b { font-weight: 400; }
  .sh-chip-custom { border-style: dashed; }
  .sh-wk-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line, #dde); border-radius: 10px; background: var(--panel, #fff); }
  table.sh-wk { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 0; }
  table.sh-wk th, table.sh-wk td { padding: 4px 1px; text-align: center; border-bottom: 1px solid var(--line, #e3e6ee); font-size: 12px; vertical-align: middle; }
  table.sh-wk th.sh-name { position: sticky; left: 0; z-index: 2; width: 58px; max-width: 58px; padding: 4px 3px; text-align: left; font-size: 11.5px; letter-spacing: -.02em; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; overflow: hidden; background: var(--panel, #fff); border-right: 1px solid var(--line, #dde); }
  table.sh-wk th.sh-name small { display: block; font-weight: 400; color: #b45309; font-size: 10px; }
  table.sh-wk thead th { background: #f4f6fa; font-weight: 400; line-height: 1.25; padding: 0; }
  table.sh-wk thead th a { display: block; padding: 6px 0; color: inherit; text-decoration: none; min-height: 40px; box-sizing: border-box; }
  table.sh-wk thead th b { font-size: 15px; }
  table.sh-wk th.sat, table.sh-wk td.sat { background: #eef5ff; } table.sh-wk th.sat a { color: #1d6fd1; }
  table.sh-wk th.sun, table.sh-wk td.sun { background: #fff0f4; } table.sh-wk th.sun a { color: #d6336c; }
  table.sh-wk th.today, table.sh-wk td.today { background: #fff3bf; box-shadow: inset 2px 0 0 #f59f00, inset -2px 0 0 #f59f00; }
  table.sh-wk th.today { box-shadow: inset 2px 0 0 #f59f00, inset -2px 0 0 #f59f00, inset 0 3px 0 #f59f00; }
  table.sh-wk tr.me th.sh-name { background: #fff8e1; color: #92400e; border-bottom: 2px solid #f59f00; }
  table.sh-wk tr.me td { background-image: linear-gradient(rgba(255,193,7,.16), rgba(255,193,7,.16)); border-bottom: 2px solid #f59f00; }
  table.sh-wk tr.me td.today { background-image: none; }
  table.sh-wk td .sh-chip { min-width: 34px; height: 30px; font-size: 15px; }
  details.sh-legend-box { margin: 0 0 8px; border: 1px solid var(--line, #dde); border-radius: 10px; background: var(--panel, #fff); }
  details.sh-legend-box > summary { padding: 8px 10px; cursor: pointer; min-height: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .sh-sum-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
  .sh-chip-s { min-width: 28px; height: 24px; font-size: 13px; }
  details.sh-legend-box .sh-legend { margin: 0; border: 0; padding: 0 10px 8px; font-size: 12.5px; gap: 4px 10px; }
  table.sh-wk .sh-t { display: block; font-size: 10px; line-height: 1.1; color: #495057; margin-top: 1px; }
  .sh-unfixed { color: #adb5bd; }
  .sh-ph-h { margin: 14px 0 6px; font-size: 16px; }
  .sh-days details.sh-day { border: 1px solid var(--line, #dde); border-radius: 10px; margin: 0 0 6px; background: var(--panel, #fff); }
  .sh-days details.sh-day > summary { padding: 11px 12px; font-size: 16px; cursor: pointer; min-height: 22px; }
  .sh-days details.sh-day.today { border-color: #f59f00; box-shadow: 0 0 0 2px #ffe08a; }
  .sh-days details.sh-day.sat > summary b { color: #1d6fd1; } .sh-days details.sh-day.sun > summary b { color: #d6336c; }
  .sh-days details.sh-day > p { margin: 0; padding: 0 12px 10px; }
  .sh-day-list { list-style: none; margin: 0; padding: 0 12px 8px; }
  .sh-day-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 6px 0; border-top: 1px solid var(--line, #e3e6ee); font-size: 15px; }
  .sh-day-list li.me { background: #fff8e1; margin: 0 -6px; padding-left: 6px; padding-right: 6px; border-radius: 6px; }
  .sh-time { color: var(--primary); font-variant-numeric: tabular-nums; }

  /* 希望シフト: 縦の日付リスト(JS が、元の表の入力欄を、ボタンに置き換える) */
  html.m-rq-js form.rq-form .bulk, html.m-rq-js form.rq-form .table-wrap, html.m-rq-js form.rq-form > .actions { display: none !important; }
  html.m-rq-js .rq-list { display: block; margin-bottom: 84px; }
  .rq-hint { margin: 4px 0 10px; line-height: 1.7; font-size: 15px; }
  .rq-day { padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--line, #dde); border-radius: 12px; background: var(--panel, #fff); }
  .rq-day.sat { background: #f3f8ff; } .rq-day.sun { background: #fff5f8; }
  .rq-day.closed { opacity: .72; }
  .rq-day.has { border-color: var(--primary); }
  .rq-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  .rq-date { font-size: 19px; font-weight: 700; } .rq-date small { font-size: 14px; font-weight: 600; margin-left: 2px; }
  .rq-day.sat .rq-date { color: #1d6fd1; } .rq-day.sun .rq-date { color: #d6336c; }
  .rq-closed { margin-left: 6px; color: #868e96; font-weight: 400; }
  .rq-cur { font-size: 14px; color: var(--primary); text-align: right; }
  .rq-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .main .rq-btns .rq-b { min-height: 52px; font-size: 24px; font-weight: 700; border: 2px solid var(--line, #cfd4dc); border-radius: 12px; background: #fff; color: #495057; cursor: pointer; padding: 0; }
  .rq-b.on[data-v="o"] { background: #2b8a3e; border-color: #2b8a3e; color: #fff; }
  .rq-b.on[data-v="t"] { background: #f59f00; border-color: #f59f00; color: #1f1f1f; }
  .rq-b.on[data-v="x"] { background: #c92a2a; border-color: #c92a2a; color: #fff; }
  .main .rq-more { margin-top: 8px; width: 100%; min-height: 40px; border: 0; background: transparent; color: var(--primary); font-size: 14px; text-decoration: underline; cursor: pointer; }
  .rq-time { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line, #dde); }
  .rq-time[hidden] { display: none; }
  .rq-time label { display: block; font-size: 14px; }
  .rq-time select { width: 100%; margin-top: 4px; }
  .rq-tt { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
  .rq-tt input { flex: 1; min-width: 0; }
  html.m-rq-js .rq-bar { display: flex; gap: 10px; position: fixed; left: 0; right: 0; z-index: 56; bottom: calc(var(--credit-h, 24px) + var(--tabbar-h, 60px) + env(safe-area-inset-bottom)); padding: 8px 12px; background: var(--panel, #fff); border-top: 1px solid var(--line, #dde); box-shadow: 0 -2px 12px -6px rgba(16,24,40,.25); }
  .rq-bar .rq-save { flex: 0 0 28%; }
  .rq-bar .rq-submit { flex: 1; font-size: 17px; min-height: 48px; }
  html.m-rq-js .chat-fab { bottom: calc(var(--credit-h, 24px) + var(--tabbar-h, 60px) + 76px + env(safe-area-inset-bottom)) !important; }

  /* 勤怠の申請: 上に短いフォーム・下に申請の状況。日ごとの表は「日ごとに見る」 */
  html.m-req-js .m-req-phone { display: block; }
  html.m-req-js .attend-days { display: none; }
  html.m-req-js .attend-days.m-open { display: block; }
  html.m-req-js .m-days-toggle { display: flex; width: 100%; margin: 12px 0 4px; }
  .m-req-phone h3 { margin: 6px 0 8px; font-size: 17px; }
  .m-req-field { display: block; margin: 0 0 10px; font-size: 15px; font-weight: 600; }
  .m-req-field input, .m-req-field textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; font-weight: 400; }
  .m-req-field textarea { min-height: 76px; }
  .m-req-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 10px; }
  .m-req-kind { display: block; margin: 0 !important; padding: 0 !important; position: relative; }
  .m-req-kind input { position: absolute; opacity: 0; width: 1px !important; height: 1px !important; min-height: 0 !important; }
  .m-req-kind span { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 2px solid var(--line, #cfd4dc); border-radius: 12px; background: #fff; font-size: 18px; font-weight: 700; color: #495057; }
  .m-req-kind input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
  .m-req-kind input:focus-visible + span { outline: 3px solid #ffb300; outline-offset: 1px; }
  .m-req-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .m-req-times[hidden] { display: none; }
  .m-req-times p { grid-column: 1 / -1; margin: 0 0 8px; }
  .m-req-go { width: 100%; min-height: 56px !important; font-size: 19px; margin-bottom: 8px; }
  .m-req-card { padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--line, #dde); border-radius: 12px; background: var(--panel, #fff); font-size: 15px; }
  .m-req-card.pending { border-left: 5px solid #f59f00; } .m-req-card.approved { border-left: 5px solid #2b8a3e; } .m-req-card.rejected { border-left: 5px solid #adb5bd; }
  .m-req-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 16px; }
  .m-req-card form { margin-top: 6px; }
}

/* R39: チャットの窓(スマホ・タブレット)。窓を「質問」のボタンの上に出す(重なってボタンの端がのぞいた)・見出しを1行に・閉じる「×」と候補のボタンを指で押せる大きさに */
@media screen and (max-width: 900px) {
  body.m-has-tabbar .chat-panel { bottom: calc(var(--credit-h, 24px) + var(--tabbar-h) + 60px + env(safe-area-inset-bottom)); height: min(560px, calc(100dvh - var(--m-top-h) - var(--credit-h, 24px) - var(--tabbar-h) - 72px - env(safe-area-inset-bottom))); }
  body:not(.m-has-tabbar) .chat-panel { bottom: calc(var(--credit-h, 24px) + 60px); height: min(560px, calc(100dvh - var(--credit-h, 24px) - 76px)); }
  .chat-panel { right: 8px; width: calc(100vw - 16px); max-width: 420px; }
  .chat-head { padding: 4px 4px 4px 12px; }
  .chat-head b { white-space: nowrap; }
  .chat-head .chat-x { min-width: 44px; min-height: 44px; font-size: 24px; }
  .chat-head a { white-space: nowrap; padding: 10px 4px; }
  .chat-chip { min-height: 36px; padding: 4px 12px; font-size: 14px; }
}
@media screen and (max-width: 640px) {
  .chat-head .small.muted { display: none; } /* 説明の一文は、狭い画面では出さない(「チャットボット」「大きく開く」が2行に割れた) */
}