/* ============================================================
   新Genba 共通UI（2026-09-10 UI改善・見本 v4 の配色と操作の型を移植）
   ★丸ごと @media screen で囲む＝印刷・PDF（請求書・見積書・送付状）には一切効かない。
     帳票の見た目は style.css の @media print が今まで通り担当する。
   ★style.css の後に読む。ここに無いものは style.css がそのまま効く。
   ============================================================ */
@media screen {

/* ---------- 色と基本 ---------- */
:root {
  --nav: #123c45;            /* 上のバー（濃い青緑） */
  --teal: #177e76;           /* 差し色（ボタン・選択） */
  --teal-dark: #12665f;
  --teal-soft: #e6f3ef;
  --teal-line: #bfe0d8;
  --navy: #12665f;
  --bg: #f3f6f7;
  --surface: #fff;
  --line: #d6e2e4;
  --line-soft: #e9f0f1;
  --text: #172c32;
  --text-2: #5e7076;
  --text-3: #7d8c91;
  --pale: #eaf5f2;
  --warn: #a04628;
  --warn-bg: #fff0df;
}
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); }
body.has-nav { padding-bottom: 0; }
a { color: var(--teal-dark); }
:focus-visible { outline: 3px solid #ba781d; outline-offset: 2px; }
button, .btn, .btn-light { min-height: 40px; }
.btn-light { display: inline-flex; align-items: center; justify-content: center; }
.container { max-width: 1120px; }
h1 { font-size: 24px; }
.hint { font-size: 13.5px; }

/* ---------- 上のバー（濃色）＋メインメニュー ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  background: var(--nav); color: #fff; border-bottom: 0;
  padding: 0 22px; height: 58px; flex-wrap: nowrap;
  box-shadow: 0 2px 10px rgba(18, 60, 69, .25);
}
.topbar .brand, .topbar .brand:hover { color: #fff; font-weight: 800; font-size: 19px; letter-spacing: .04em; white-space: nowrap; text-decoration: none; }
.topbar .brand-dot { background: #58c7b8; width: 9px; height: 9px; }
.topbar .mainnav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topbar .mainnav::-webkit-scrollbar { display: none; }
.topbar .mainnav a {
  color: #d8e9eb; text-decoration: none; font-size: 15px; padding: 8px 13px; border-radius: 8px; white-space: nowrap;
}
.topbar .mainnav a:hover { background: rgba(255,255,255,.10); color: #fff; }
.topbar .mainnav a[aria-current="page"] { background: rgba(255,255,255,.16); color: #fff; font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; position: relative; }
.topbar .user { color: #d8e9eb; font-size: 13px; white-space: nowrap; }
.topbar .nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.22);
}
.topbar .nav-toggle:hover { background: rgba(255,255,255,.18); }
.topbar .nav-toggle svg { width: 19px; height: 19px; }
/* ≡ を押すと出るメニュー（PC・スマホ共通の型） */
.topbar .nav-more {
  display: none; position: absolute; right: 14px; top: 56px; z-index: 40;
  flex-direction: column; gap: 2px; min-width: 200px; padding: 8px;
  background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(18,60,69,.22); margin: 0; width: auto;
}
.topbar .nav-more.open { display: flex; }
.topbar .nav-more a, .topbar .nav-more button {
  display: block; width: 100%; text-align: left; background: #fff; color: var(--text);
  font-size: 15px; padding: 10px 12px; border-radius: 8px; border: 0; text-decoration: none; min-height: 0; cursor: pointer;
}
.topbar .nav-more a:hover, .topbar .nav-more button:hover { background: var(--teal-soft); color: var(--teal-dark); }
.topbar .nav-more .nav-div { display: block; height: 1px; background: var(--line); margin: 6px 4px; }
.topbar .nav-more .nav-user { display: block; padding: 6px 12px 8px; font-size: 12.5px; color: var(--text-3); }

/* 下のメニュー（スマホだけ） */
.mobilebar { display: none; }

/* ---------- 共通部品 ---------- */
.heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.heading h1 { margin: 0; }
.heading p { color: var(--text-2); margin: 4px 0 0; font-size: 14px; }
.heading .actions, .head-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card + .card { margin-top: 18px; }
.card-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.card-title h2 { margin: 0; font-size: 18px; }
h2.sub { font-size: 17px; }
.muted { color: var(--text-2); font-size: 14px; }
.empty { color: var(--text-2); padding: 22px 12px; text-align: center; }

/* チップ（状態で絞る・表示の切替）。<a> でも <button> でも同じ見た目 */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 16px; padding: 0; list-style: none; }
.chips a, .chips button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 7px 14px;
  background: #fff; color: var(--text); border: 1px solid #bacccd; border-radius: 999px;
  font-size: 14.5px; text-decoration: none; cursor: pointer; line-height: 1.2;
}
.chips a:hover, .chips button:hover { background: #edf5f4; }
.chips a.selected, .chips button.selected { color: var(--teal-dark); border-color: var(--teal); background: var(--teal-soft); font-weight: 700; }
.chips .n { font-size: 12px; color: var(--text-3); background: #edf1f3; border-radius: 999px; padding: 1px 7px; }
.chips a.selected .n { color: var(--teal-dark); background: #fff; }

/* 数字カード */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 18px; }
.metric { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.metric small { display: block; color: var(--text-2); font-size: 13.5px; }
.metric strong { display: block; font-size: 26px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.metric.warn strong { color: var(--warn); }

/* 1件＝1行のカード列 */
.item { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line-soft); padding: 14px 0; }
.item:first-of-type { border-top: 0; }
.item h3 { margin: 0 0 3px; font-size: 16.5px; font-weight: 700; overflow-wrap: anywhere; }
.item p { margin: 3px 0; color: var(--text-2); font-size: 14px; }
.item .right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.amount { font-size: 21px; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 小さなラベル */
.label { display: inline-block; font-size: 13px; font-weight: 700; background: #edf1f3; color: var(--text-2); padding: 2px 9px; border-radius: 6px; }
.label.teal { color: #12665f; background: #e5f4ee; }
.label.orange { color: #94451e; background: var(--warn-bg); }
.label.red { color: #a03728; background: #fdeceb; }

/* 「次の操作」の枠 */
.next { background: var(--pale); border-radius: 10px; padding: 14px 16px; margin: 0 0 18px; }
.next strong { display: block; margin-bottom: 8px; }
.next .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.next .actions form { margin: 0; display: inline; }
.notice { background: #fff3e2; color: #85441b; padding: 11px 14px; border-radius: 8px; font-size: 14px; }

/* ---------- カレンダー（月・週） ---------- */
.cal-head { flex-wrap: wrap; gap: 10px 16px; }
.cal-head h1 { font-size: 23px; }
.cal-switch { display: flex; gap: 6px; margin: 0; }
.cal-switch a, .cal-switch button { min-width: 58px; }
.cal-head-right { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-viewtoggle { display: none; }
.page-cal .card { padding: 20px 18px; }

.cal { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cal th { background: #edf2f3; padding: 8px 0; font-size: 14px; font-weight: 700; color: var(--text); border: 1px solid var(--line); }
.cal th.wd-sat { color: #2665a2; }
.cal th.wd-sun { color: #ac493e; }
.cal-cell { border: 1px solid var(--line); border-radius: 0; height: 112px; padding: 7px 6px; vertical-align: top; background: #fff; }
.cal-out { background: #f3f5f6; }
.cal-out .cal-date { color: #8a979b; }
.cal-today { background: #f0f8f5; }
.cal-cell.cal-sel { box-shadow: inset 0 0 0 2px var(--teal); background: #e5f3ef; }
.cal-cell:not(.cal-out):hover { background: #edf6f3; }
.cal-date { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.cal-date .today-label { font-size: 11.5px; font-weight: 400; color: #146a62; }
.cal-cell.wd-sat .cal-date { color: #2665a2; }
.cal-cell.wd-sun .cal-date { color: #ac493e; }
.cal-ev { font-size: 13px; padding: 2px 6px; margin-bottom: 3px; border-radius: 4px; }

/* ============================================================
   「送った」のハンコ（2026-09-22 けん要望）
   けん「マスに収めるというよりは、レイヤーを重ねて表示するようなイメージ」
   ★だから絶対配置でチップの上に浮かせる＝現場名の文字は1文字も削らない。
   ★チップは overflow:hidden なので、ハンコはチップの外側（親の .cal-ev-wrap ではなく
     チップ自身を relative にして中に置く）。はみ出さない大きさにしてある。
   見 ＝見積書を送った／請 ＝請求書を送った。
   ============================================================ */
.cal-ev { position: relative; }
/* ★2026-09-22 けん要望＝「もっと大きく・目立つように」「請求済みの赤系はやめて」
   → 15px→18px（スマホ13→16px）に拡大、白い縁を太く＋薄い影で浮かせる。
     請求書は赤（未入金の警告色と紛らわしい）→ 深緑（「済んだ」の色）。見積書は青のまま。 */
.cal-stamp {
  position: absolute; top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; font-weight: 800; font-style: normal; line-height: 1;
  color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, .35);
  pointer-events: none;   /* チップのタップ（色をえらぶ）を邪魔しない */
}
/* ★2026-09-22 けん決定＝「オレンジと黄色」。カレンダーには案件の色（赤・緑・青…）が既に入っていて
   被るので、送った印だけの色にする。★黄色の上に白い文字は読めないので、黄色だけ文字をこげ茶にする。 */
.cal-stamp-inv { right: 2px; background: #e8760c; color: #fff; }       /* 請求書＝オレンジ＋白文字 */
.cal-stamp-est { right: 2px; background: #f7c92a; color: #3b2a00; }    /* 見積書＝黄色＋こげ茶文字 */
/* 両方あるときは請求書を右、見積書をその左に少し重ねて並べる */
.cal-ev .cal-stamp-inv + .cal-stamp-est,
.cal-ev .cal-stamp-est:not(:last-child) { right: 17px; }
/* 長い現場名がハンコの下に潜らないように、ハンコの分だけ右に余白を取る
   （文字は「…」で省略されるが、ハンコに隠れて読めなくなるよりよい） */
.cal-ev:has(.cal-stamp) { padding-right: 24px; }
.cal-ev:has(.cal-stamp-est):has(.cal-stamp-inv) { padding-right: 40px; }
/* スマホ＝マスが狭いので、ハンコを小さくして重ねを深くし、現場名の文字をできるだけ残す
   （実測＝2つ並べて余白34pxだと「テスト」が「テ」だけになった） */
@media (max-width: 720px) {
  /* スマホのチップは高さ17〜18px＝16pxが収まる上限（overflow:hidden なので大きいと切れる） */
  .cal-stamp { width: 16px; height: 16px; font-size: 10px; top: 1px; box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(0, 0, 0, .35); }
  .cal-ev .cal-stamp-inv + .cal-stamp-est,
  .cal-ev .cal-stamp-est:not(:last-child) { right: 13px; }
  /* ★既存のスマホ用 `.page-cal .cal-month .cal-ev { padding: 1px 3px }`（3クラス）に負けないよう、
     同じ長さの選択子で書く（`.cal-ev:has(...)` だけだと右余白3pxに上書きされた＝実測） */
  .page-cal .cal-month .cal-ev:has(.cal-stamp),
  .page-cal .cal-week .cal-ev:has(.cal-stamp) { padding-right: 20px; }
  .page-cal .cal-month .cal-ev:has(.cal-stamp-est):has(.cal-stamp-inv),
  .page-cal .cal-week .cal-ev:has(.cal-stamp-est):has(.cal-stamp-inv) { padding-right: 31px; }
}

/* 「色をえらぶ」小窓の「完了にする」（2026-09-22 けん要望）＝左に置き、詳細・とじるは右に寄せる
   （既存の .color-pop-actions は space-between なので、3つ目を足すと等間隔に散ってしまう） */
#colorDone { margin-right: auto; }
.color-pop-actions { gap: 8px; flex-wrap: wrap; }

/* 日付をタップした詳細に出す「何をいつ送ったか」 */
.dd-sent { margin-top: 3px; font-size: 13px; font-weight: 700; }
.dd-sent-inv { color: #c9620a; }   /* 請求書＝オレンジ（白地で読めるよう少し濃く） */
.dd-sent-est { color: #9a6b00; }   /* 見積書＝黄色系（白地に黄色は読めないので黄土色に） */
.cal-ev-x2 { display: block; }
.cal-ev-extra { display: none; }
.cal-more { display: block; font-size: 12.5px; color: var(--text-2); }
.cal-more-m { display: none; }
.cal-legend { margin-top: 12px; }

/* 選んだ日の詳細（現場名を全部見せる） */
.day-panel { margin-top: 18px; }
.day-detail { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.day-detail:first-child { border-top: 0; }
.day-detail .dd-bar { width: 6px; align-self: stretch; border-radius: 3px; background: #adb5bd; flex: none; }
.day-detail .dd-main { flex: 1; min-width: 0; }
.day-detail h3 { margin: 0 0 3px; font-size: 16.5px; overflow-wrap: anywhere; }
.day-detail .dd-meta { color: var(--text-2); font-size: 14px; margin: 2px 0; }
.day-detail .dd-memo { white-space: pre-wrap; font-size: 14px; color: var(--text); margin: 6px 0 0; background: #f7f9f9; border-radius: 8px; padding: 8px 10px; }
.day-detail .dd-out { font-size: 13.5px; color: var(--text-2); margin-top: 4px; }
.day-detail .dd-out.unpaid { color: var(--warn); font-weight: 700; }
.day-detail .dd-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.day-detail .dd-acts a, .day-detail .dd-acts button { min-height: 36px; padding: 6px 12px; font-size: 13.5px; }
.day-detail.dd-pev .dd-bar { background: #b9a6e0; }
.day-detail.dd-av .dd-bar { background: #a9d5b8; }
.day-detail.dd-av.off .dd-bar { background: #e6a6a6; }

/* 週表示＝同じ表を1行だけ出し、マスを高く */
.cal-week .cal-cell { height: 250px; }
.cal-week .cal-ev, .cal-week .cal-pev { white-space: normal; overflow: visible; text-overflow: clip; font-size: 13.5px; line-height: 1.45; padding: 6px 8px; margin-bottom: 6px; }
.cal-week .cal-ev-x2, .cal-week .cal-ev-extra { display: block; }
.cal-week .cal-more { display: none; }
.cal-week .cal-date small { font-weight: 400; color: var(--text-2); margin-left: 4px; }

/* 「日が決まっていない」置き場は下に */
.undated { margin-top: 18px; }

/* ---------- 請求（作る／作成済み）・三水2枚組 ---------- */
.pair { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 12px; }
.pair-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.pair-head h3 { margin: 0; font-size: 16.5px; }
.pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.pair-one { border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; background: #fbfcfc; }
.pair-one .cat { font-weight: 700; font-size: 15px; }
.pair-one .amount { font-size: 18px; }
.pair-one .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pair-one .acts a { min-height: 34px; padding: 5px 11px; font-size: 13.5px; }
/* 請求一覧＝スマホだけに出す部品（2026-09-22）。PCでは隠す＝今までの表を崩さない */
.inv-cards .inv-m-only { display: none; }

/* ============================================================
   請求一覧＝「月まとめ」と「そのほか」の区切り（2026-09-22 けん要望）
   けん「カードの大きさが一緒だから、スクロールしてどこで切り替わったか一目瞭然じゃない」。
   ★見出しだけでは、スクロールで見出しが画面から消えたあと分からなくなる。
     だから「見出し」＋「カードの左端の色線」の2つでやる＝スクロール中ずっと分かる。
   ★PC・スマホの両方に効かせる（境目はどちらでも要るため）。
   ============================================================ */
.inv-group-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 26px 0 10px; padding-left: 11px;
  font-size: 15px; font-weight: 700; color: var(--text-2);
  border-left: 5px solid var(--line);
}
.inv-group-head:first-of-type { margin-top: 14px; }
.inv-group-n { font-size: 13px; font-weight: 400; color: var(--text-3); }
/* 月まとめ＝オレンジ系／そのほか＝ティール（アプリの差し色）。見出しとカードの線でそろえる。
   ★オレンジは、この画面の「未入金」の札と同じ系統の色にした（新しい色を増やさない）。 */
.inv-group-head.inv-g-pair { border-left-color: var(--inv-gold, #c98a2b); }
.inv-group-head.inv-g-single { border-left-color: var(--teal, #0f9d77); }
/* ★カードの左端の色線＝スクロール中ずっと「どちらのグループか」が分かる目印 */
.inv-g-pair > .pair { border-left: 5px solid var(--inv-gold, #c98a2b); }
.inv-g-single > .tbl.rcards { border-left: 5px solid var(--teal, #0f9d77); padding-left: 10px; }

/* ---------- 管理（メニュー型） ---------- */
.admin-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.admin-menu a { display: block; padding: 15px 16px; background: #f8fbfb; border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 700; }
.admin-menu a small { display: block; font-weight: 400; color: var(--text-2); font-size: 13px; margin-top: 3px; }
.admin-menu a:hover { background: var(--teal-soft); border-color: var(--teal-line); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 6px 0 16px; overflow-x: auto; }
.tabs a { padding: 11px 16px; color: var(--text-2); font-weight: 700; text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a[aria-current="page"] { color: var(--teal-dark); border-bottom-color: var(--teal); }
.admin-section { margin-top: 18px; }
.admin-section > summary { cursor: pointer; font-weight: 700; font-size: 16px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.admin-section[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.admin-section > .card { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
.removed { margin-top: 12px; color: var(--text-2); font-size: 13.5px; }
.removed s { margin-right: 10px; }

/* 送付状の取り込み＝3段 */
.steps { display: flex; list-style: none; padding: 0; gap: 14px; flex-wrap: wrap; color: var(--text-2); margin: 6px 0 14px; }
.steps .active { color: var(--teal-dark); font-weight: 700; }
.comparison { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-top: 10px; }
.comparison.same { opacity: .75; }
.comparison label { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; color: var(--text); cursor: pointer; }
.comparison input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--teal); }
.cmp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cmp-row small { display: block; color: var(--text-2); font-size: 12.5px; }
.cmp-old { padding: 8px 10px; }
.cmp-new { background: #edf7f5; padding: 8px 10px; border-radius: 8px; }
.upload { display: block; border: 2px dashed #b2c8c8; border-radius: 10px; padding: 16px; margin: 12px 0; color: var(--text-2); }

/* ---------- 更新の案内・通信の案内 ---------- */
.sg-update {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 12px; max-width: calc(100% - 28px);
  background: var(--nav); color: #fff; border-radius: 12px; padding: 11px 14px 11px 16px;
  box-shadow: 0 8px 26px rgba(18,60,69,.35); font-size: 14.5px;
}
.sg-update button { min-height: 34px; padding: 6px 12px; font-size: 13.5px; background: #fff; color: var(--nav); border-radius: 8px; border: 0; font-weight: 700; white-space: nowrap; }
.sg-update .sg-x { background: transparent; color: #cfe3e4; font-weight: 400; padding: 4px 6px; }
#sgToast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 61;
  background: #123c45; color: #fff; border-radius: 10px; padding: 11px 16px; max-width: calc(100% - 28px);
  box-shadow: 0 6px 20px rgba(18,60,69,.3); font-size: 14.5px;
}
body.sg-offline .topbar { background: #6b4f2a; }
.sg-offline-bar { display: none; background: #fff3e2; color: #85441b; text-align: center; padding: 8px 12px; font-size: 14px; }
body.sg-offline .sg-offline-bar { display: block; }

/* ---------- デモ環境（DEMO_MODE のときだけ出る） ---------- */
.demo-badge { display: inline-block; background: #f59e0b; color: #1c1917; font-weight: 800; font-size: 12px; letter-spacing: .06em; border-radius: 6px; padding: 2px 8px; margin-left: 10px; vertical-align: 2px; }
.demo-bar { position: sticky; top: 58px; z-index: 29; background: #7c3aed; color: #fff; text-align: center; padding: 8px 12px; font-size: 14.5px; line-height: 1.5; }
.demo-bar b { background: #fff; color: #5b21b6; border-radius: 6px; padding: 1px 8px; margin-right: 6px; }
.demo-bar .demo-short { display: none; }
@media (max-width: 720px) { .demo-bar .demo-long { display: none; } .demo-bar .demo-short { display: inline; } }
.demo-note { background: #f3e8ff; color: #4c1d95; border: 1px solid #d8b4fe; border-radius: 10px; padding: 12px 14px; font-size: 14.5px; margin: 0 0 14px; }
.demo-enter { display: flex; flex-direction: column; gap: 10px; margin: 0 0 8px; }
.demo-enter .btn, .demo-enter .btn-light { width: 100%; min-height: 48px; font-size: 16px; font-weight: 700; }

/* ---------- 画面幅 ---------- */
@media (max-width: 850px) {
  .metrics { gap: 8px; }
  .metric { padding: 13px 14px; }
  .metric strong { font-size: 22px; }
  .cal-cell { height: 100px; }
}

@media (max-width: 720px) {
  .topbar { height: 54px; padding: 0 12px 0 14px; gap: 10px; }
  .topbar .mainnav { display: none; }                 /* 上のメニューは隠し、下のバーへ */
  .topbar .user { display: none; }
  .topbar .nav-more { top: 52px; right: 10px; }
  .demo-bar { top: 54px; font-size: 13.5px; padding: 6px 10px; }
  body.has-nav { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .mobilebar {
    display: flex; position: fixed; z-index: 35; left: 0; right: 0; bottom: 0;
    background: #fff; border-top: 1px solid var(--line); justify-content: space-around;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .mobilebar a {
    flex: 1; text-align: center; text-decoration: none; color: var(--text-2); font-size: 12px; font-weight: 700;
    padding: 6px 2px; border-radius: 8px; line-height: 1.2;
  }
  .mobilebar a[aria-current="page"] { color: var(--teal-dark); background: var(--teal-soft); }
  .sg-update, #sgToast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* 見積り一覧の合計の帯は下のメニューの上に止める＝下から8pxだとメニューに半分隠れていた（2026-10-14 点検の7） */
  .est-sum { bottom: calc(74px + env(safe-area-inset-bottom)); }
  .heading { display: block; }
  .heading .actions { margin-top: 10px; }
  .item { flex-wrap: wrap; gap: 10px; }
  .item .right { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; text-align: left; }
  .pair-grid { grid-template-columns: 1fr; }
  .cmp-row { grid-template-columns: 1fr; gap: 4px; }
  .chips a, .chips button { min-height: 36px; padding: 6px 12px; font-size: 14px; }
  .tabs a { padding: 10px 12px; }
}

@media (max-width: 600px) {
  .card-head, .actions, .head-btns { flex-wrap: wrap; }
  .metrics { grid-template-columns: 1fr; }
  .metric { display: flex; align-items: center; justify-content: space-between; }
  .metric strong { margin: 0; }
  /* 月表示：7列は保つ。マスは小さく、名前は1行に切って「ほかN件」。全文は下の詳細で */
  .page-cal .container { padding: 0 6px; }
  .page-cal .card { padding: 14px 6px; }
  .cal th { padding: 6px 0; font-size: 12.5px; }
  .cal-cell { height: 88px; padding: 4px 2px 3px; }
  .cal-date { font-size: 13px; justify-content: center; margin-bottom: 3px; }
  .cal-date .today-label { display: none; }
  .page-cal .cal-month .cal-ev, .page-cal .cal-week .cal-ev { font-size: 10px; line-height: 15px; height: 17px; padding: 1px 3px; margin-bottom: 2px; border-radius: 3px; }
  /* 3件目以降は隠して「ほかN件」（style.css の .page-cal .cal-month .cal-ev{display:block} より強い指定にする） */
  .page-cal .cal-month .cal-ev.cal-ev-x2, .page-cal .cal-month .cal-ev.cal-ev-extra { display: none; }
  .cal-more-d { display: none; }
  .cal-more-m { display: block; font-size: 11px; text-align: center; }
  .cal-week .cal-more { display: none; }
  /* 週表示：スマホも7マス横並び（けん決定 2026-09-21 16:12「この形で進めて（高さは月表示と同じ）」）
     ★2026-09-10 の見本v4「スマホは1日1行の縦並び」を、けんの明示指示で変えた。
       縦並び用の上書き9行はここから外した（中身は git 履歴 0ced00f 以前で見られる）。
     ★仕組み＝週表示の表の親は div.cal-month なので、縦並び用の上書きを外すだけで
       月表示のスマホ用ルール（style.css の .page-cal .cal-month .cal-ev / .cal-pev）が
       そのまま掛かり、見た目が月表示の1行と同じになる。足すのは月とズレる3点だけ。
     ・高さ＝185行の .cal-week .cal-cell{height:250px}（PC用）を月表示と同じ 88px に
     ・曜日＝週表示の日付は「9/21<small>月</small>」だが、横並びでは上の見出し行に曜日が
       出るので小さい曜日は隠す（テンプレートは触らない）
     ・私用の予定＝186行の .cal-week .cal-pev{padding:6px 8px; margin-bottom:6px} が
       月表示の高さ17pxの中で窮屈になるので、月表示と同じ余白に戻す */
  .cal-week .cal-cell { height: 88px; }
  .cal-week .cal-date small { display: none; }
  .page-cal .cal-week .cal-pev { padding: 1px 0 1px 2px; margin-bottom: 2px; }
  .day-detail { display: block; }
  .day-detail .dd-bar { display: none; }
  .day-detail .dd-acts { justify-content: flex-start; margin-top: 8px; }
  .day-detail.dd-ev { border-left: 4px solid var(--dd-color, #adb5bd); padding-left: 10px; }
}

/* ---------- 2026-09-11 スマホ手直し ---------- */
/* 折りたたみの説明（「詳しく見る」「色の見方」） */
details.more { margin: 10px 0 0; }
details.more > summary { cursor: pointer; color: var(--teal-dark); font-size: 14.5px; padding: 6px 0; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "▸"; font-size: 12px; }
details.more[open] > summary::before { content: "▾"; }
details.more > .hint, details.more > p { margin-top: 6px; }
.cal-legend-box .cal-legend { margin-top: 8px; }
/* 顧客の検索 */
.cust-search { display: flex; gap: 8px; align-items: center; margin: 4px 0 8px; }
.cust-search input[type=search] { flex: 1; margin-top: 0; font-size: 16px; padding: 11px 13px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
/* 表の中の「PCだけ」「カードだけ」の印（PCでは普通の表） */
.rc-pick { display: none; }
.rc-m-only { display: none; }
.rcards .rc-head .label, .rcards .rc-head .badge { margin-left: 6px; }
.rcards td.rc-head a { font-weight: 600; }

@media (max-width: 720px) {
  /* 一覧の表＝スマホでは1件1カード（横スクロールさせない・文字は15px） */
  .tbl.rcards { display: block; overflow: visible; white-space: normal; margin-top: 10px; }
  .tbl.rcards thead { display: none; }
  .tbl.rcards tbody { display: block; }
  .tbl.rcards tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
  .tbl.rcards td { display: block; border: 0; padding: 0; font-size: 15px; line-height: 1.5; white-space: normal; min-width: 0; text-align: left; overflow-wrap: anywhere; }
  .tbl.rcards td[data-label]::before { content: attr(data-label); display: block; font-size: 12.5px; color: var(--text-3); margin-bottom: 1px; }
  .tbl.rcards td.rc-head { grid-column: 1 / -1; font-size: 17px; font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  .tbl.rcards td.rc-full { grid-column: 1 / -1; }
  .tbl.rcards td.rc-acts { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 4px; }
  .tbl.rcards td.rc-acts .btn-light, .tbl.rcards td.rc-acts .btn { min-height: 40px; }
  .tbl.rcards td.rc-pc-only, .tbl.rcards td.rc-empty { display: none; }
  .tbl.rcards td.num { font-variant-numeric: tabular-nums; font-weight: 600; }
  .rc-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
  .rc-pick input { width: 22px; height: 22px; accent-color: var(--teal); }
  /* 売掛金：行の色帯（状態）はカードの左辺に */
  .rcv-tbl.rcards tr.rcv-row { border-left-width: 5px; }
  .rcv-tbl.rcards { min-width: 0; width: 100%; }   /* PC用の min-width:720px（横スクロール前提）をスマホでは外す */
  /* 売掛金カードの並び（PCの列順は変えず、スマホだけ order で並べ替え）＝番号・種別・状態 → 請求先・件名 → 売掛金・未回収・支払期限 → 請求日 → 入金まわり（値があるものだけ） → 備考 */
  .rcv-tbl.rcards td.rc-head { order: 0; }
  .rcv-tbl.rcards td.rc-o1 { order: 1; }
  .rcv-tbl.rcards td.rc-o2 { order: 2; grid-column: 1 / -1; }
  .rcv-tbl.rcards td.rc-o3 { order: 3; }
  .rcv-tbl.rcards td.rc-o4 { order: 4; }
  .rcv-tbl.rcards td.rc-o5 { order: 5; }
  .rcv-tbl.rcards .rc-title { display: block; font-size: 15px; color: var(--text); margin: 0; }
  .rcv-tbl.rcards .rc-m-only { display: block; font-size: 15px; font-weight: 400; margin-top: 2px; }
  .rcv-tbl.rcards .rc-outstanding { color: var(--warn); font-weight: 700; }
  .rcv-scroll { overflow: visible; }
  .rcv-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  /* 見積り一覧：チェックの見出し行は無いので、合計バーは今まで通り下に貼り付く */
  .c-pick { display: none; }
  /* 案件カード：中の情報を1枚に（リンクの入れ子をやめたので枠は割れない） */
  .proj-card { padding: 12px 14px; }
  .proj-card-title { font-size: 16px; }
  .proj-card-sub { font-size: 14.5px; }
  .proj-card-meta { font-size: 13.5px; }
  /* 管理：点検の2つの入口＝縦の大きなボタン */
  .admin-menu { grid-template-columns: 1fr; }
  .admin-menu a { padding: 16px 16px; font-size: 16px; }
  /* 請求：カードの中のボタンは押しやすく */
  .pair-one .acts a { min-height: 40px; }

  /* ============================================================
     請求一覧＝スマホで「三水の2枚組」と「一般の請求書」の形をそろえる
     （2026-09-22 けん要望「PCでは見やすいけどスマホだと見にくい」）
     ★ここは @media (max-width:720px) の中＝PCの見た目は1ミリも変わらない。
     ★app.css は丸ごと @media screen の中なので、請求書・見積書の印刷とPDFには効かない。
     ねらい＝どちらも「①顧客名 ②件名 ③金額 ④開く・PDF」の順で読めるようにする。
     ============================================================ */
  /* --- 一般の請求書＝先頭を顧客名にする（HTMLの順は変えず order で並べ替え） --- */
  .inv-cards.rcards tr { display: flex; flex-direction: column; gap: 2px; }
  .inv-cards.rcards td.inv-o1 { order: 1; font-size: 17px; font-weight: 700; }
  .inv-cards.rcards td.inv-o2 { order: 2; font-size: 13.5px; font-weight: 400; gap: 6px; }
  .inv-cards.rcards td.inv-o3 { order: 3; }
  .inv-cards.rcards td.inv-o4 { order: 4; font-size: 20px; font-weight: 700; margin-top: 2px; }
  .inv-cards.rcards td.inv-o5 { order: 5; font-size: 13.5px; color: var(--text-3); }
  .inv-cards.rcards td.inv-o6 { order: 6; margin-top: 8px; }
  .inv-cards .inv-m-only { display: inline-flex; }   /* 「開く」はスマホだけ出す */
  /* スマホは1件1カードなので、表の枠ではなく「カード1枚ずつ」の左端に色線を付ける
     ＝スクロール中ずっと、いまどちらのグループを見ているかが分かる（2026-09-22 けん要望） */
  .inv-g-single > .tbl.rcards { border-left: 0; padding-left: 0; }
  .inv-g-single .tbl.rcards tr { border-left: 5px solid var(--teal, #0f9d77); }
  .inv-group-head { margin: 22px 0 8px; }
  /* 顧客名は見出しなので「請求先」のラベルは出さない。番号・請求日は横に小さく添える */
  .inv-cards.rcards td.inv-o1[data-label]::before { display: none; }
  .inv-cards.rcards td.inv-o3[data-label]::before,
  .inv-cards.rcards td.inv-o5[data-label]::before,
  .inv-cards.rcards td.inv-o4[data-label]::before {
    display: inline; margin: 0 6px 0 0; white-space: nowrap;
  }
  .inv-cards.rcards td.inv-o3,
  .inv-cards.rcards td.inv-o4,
  .inv-cards.rcards td.inv-o5 { display: flex; align-items: baseline; gap: 0; }
  .inv-cards.rcards td.inv-o2 a { color: var(--text-3); font-weight: 400; }

  /* --- 三水の2枚組＝入れ子のカードを浅くして背を低くする --- */
  .pair { padding: 12px 14px; }
  .pair-head h3 { font-size: 17px; }
  .pair-grid { gap: 0; margin-top: 6px; }
  .pair-one {
    border: 0; border-top: 1px solid var(--line-soft); border-radius: 0;
    background: transparent; padding: 10px 0 2px;
  }
  .pair-one .cat { font-size: 13.5px; font-weight: 400; color: var(--text-3); }
  .pair-one .amount { font-size: 20px; font-weight: 700; }
  .pair-one .acts { margin-top: 6px; }
}
@media (max-width: 600px) {
  /* 月表示：情報を潰さない範囲で少しだけ低く（88→82px）。文字は小さくしない（10→11px） */
  .cal-cell { height: 82px; padding: 3px 2px 2px; }
  .cal-week .cal-cell { height: 82px; }   /* 週表示の横並びも月表示と同じ高さ（2026-09-21 けん決定） */
  .page-cal .cal-month .cal-ev, .page-cal .cal-week .cal-ev { font-size: 11px; line-height: 16px; height: 18px; }
  .cal-more-m { font-size: 12px; }
}

/* ── 2026-09-21 A案＝売掛金の1画面目に「行」を出すための詰め ──────────────
   新規クラスだけ（.rcv-summary-tight ／ .rcv-tbl-tight）。既存ルールは1行も書き換えていない。
   ★この塊は @media screen の中にあるので、請求書・見積書の印刷とPDFには一切効かない。 */
@media (max-width: 720px) {
  /* 数字カード＝枠と文字をすこしだけ詰める（枚数・数字・色はそのまま） */
  .rcv-summary-tight .rcv-sum-item { padding: 8px 10px; }
  .rcv-summary-tight .rcv-sum-label { margin-bottom: 2px; }
  .rcv-summary-tight .rcv-sum-val { font-size: 18px; }

  /* 行カード＝灰色の小見出しを値の横へ（短い項目だけ）。項目は1つも消していない */
  .rcv-tbl-tight.rcards tr { gap: 6px 12px; padding: 10px 12px; }
  .rcv-tbl-tight.rcards td[data-label]::before { margin-bottom: 0; }
  .rcv-tbl-tight.rcards td.rc-o3:not(.rc-empty),
  .rcv-tbl-tight.rcards td.rc-o4:not(.rc-empty) { display: flex; align-items: baseline; gap: 6px; }
  .rcv-tbl-tight.rcards td.rc-o3[data-label]::before,
  .rcv-tbl-tight.rcards td.rc-o4[data-label]::before { display: inline; margin: 0; white-space: nowrap; }
  /* 未回収・支払期限＝縦に積まず横に並べる */
  .rcv-tbl.rcv-tbl-tight.rcards .rc-m-only { display: inline-block; margin-top: 0; margin-right: 12px; }
}

/* ── 2026-09-21 A案＝案件カードの「顧客名」と「施工予定」を横に並べる ────────
   新規クラス1つだけ。色・文字の大きさ・太さは1つも変えていない（中の
   .proj-card-sub / .proj-card-meta の既存ルールをそのまま使う）。
   ★flex-wrap: wrap ＝ 顧客名が長いときは日付が自分の行へ折り返す
     ＝今までどおり2行に戻るだけで、日付が潰れたり切れたりしない。 */
.proj-card-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }

/* ── 2026-09-21 週表示で予定が黙って消える不具合の修正（けん指示「週表示も元に戻そう」）──
   症状＝スマホの週表示で、1日に3件以上あると3件目以降が消え、「ほかN件」も出ないので
         消えたことが分からない（実測＝10件のうち4件が消えていた）。
   原因＝月表示用の「隠す」ルール
         .page-cal .cal-month .cal-ev.cal-ev-x2 { display: none }（クラス4つ）が、
         週表示用の「出す」ルール .cal-week .cal-ev-x2 { display: block }（クラス2つ）より
         強いこと。.cal-month は月表示と週表示の共通の入れ物なので、月表示用のルールが
         週表示にも掛かってしまい、あとから書いてあっても効かなかった。
   直し方＝週表示用に、月表示より強いルール（クラス5つ）を足す。既存のルールは書き換えない。

   ★2026-09-21 15:57 けん決定で方針変更＝「全部出す」ではなく「3件まで＋『ほかN件』」。
     理由＝全部出すと予定が多い日だけ背が高くなって並びが乱れる（けん「週表示はなんか崩れてる」）。
           「全部見る」役目は一覧（アジェンダ）表示が持っているので、週表示は要点だけでよい。
     ★元の不具合の本体は「予定が消えること」ではなく「消えたのに札も出ないこと」だった。
       だから3件で打ち切ってよく、代わりに「ほかN件」の札を必ず出す（黙って消えないようにする）。
     ・4件目以降（.cal-ev-extra）は隠す＝.cal-week .cal-ev-extra{display:block}（クラス2つ）に
       勝つため、月表示の隠すルールと同じ強さ（クラス5つ）で書く。
     ・札は cal-more-d（「ほか n-3 件」＝上限3件のときに数字が合う）だけ出す。
       cal-more-m は「ほか n-2 件」でスマホの月表示用＝数字が合わないので出さない
       （.cal-week .cal-more{display:none} がそのまま効いて隠れたまま）。
     ・変えるのは @media (max-width: 720px) の中だけ＝PCの週表示は今までどおり全件表示・札なし。 */
@media (max-width: 720px) {
  .page-cal .cal-month .cal-week .cal-ev.cal-ev-x2 { display: block; }
  .page-cal .cal-month .cal-week .cal-ev.cal-ev-extra { display: none; }
  .page-cal .cal-week .cal-more.cal-more-d { display: block; }
}

/* ── 2026-09-21 ≡メニューに出す「版」（けん要望＝更新が届いたか一目で分かるように）──
   新規クラス1つだけ。小さい灰色の文字で、押せるものではないと分かる見た目にする。 */
.nav-more .nav-ver { display: block; padding: 8px 14px; font-size: 12px; color: var(--text-3); }

/* ── 2026-09-21 A案＝請求ページの数字カードをスマホで横2列に ────────────────
   新規クラス1つだけ。色・枠・角丸・文字の大きさは1つも変えていない（.metric の
   既存ルールをそのまま使う）。変わるのは並び方だけ。
   ★.metrics は送付状の住所取込ページ（admin_import_cover.html）でも使っているので、
     .metrics そのものは触らず、請求ページにだけ付く名前で上書きする。
   ★横3列も実測したが 158px と 164px で6pxしか違わず、3列はラベルが3行に折り返して
     窮屈になるため2列にした（2026-09-21 実測）。 */
@media (max-width: 600px) {
  .metrics.inv-metrics-2col { grid-template-columns: 1fr 1fr; }
  /* 3つ目（未入金額）は横いっぱいに＝半分の幅だと見出しが1〜2文字ずつ折り返していた（2026-10-14 点検の6） */
  .metrics.inv-metrics-2col .metric:last-child { grid-column: 1 / -1; }
}

/* ── 2026-09-21 A案＝カレンダー月表示の「ほかN件」をやめて予定を全部出す ──────
   けん決定＝案①（2026-09-21）。1行のままで名前は読めないが、隠れる予定が0件になり、
   カレンダー全体はむしろ縮む（実測 499px → 453px）。名前は日をタップして下の詳細で読む。
   ★副作用＝マスの高さが内容に合わせて伸び縮みするので、行の高さが不揃いになる（けん承知）。
   新規クラス .cal-showall が付いたときだけ、既存の3つのルールを打ち消す。
   色・文字の大きさ・角丸・余白は1つも変えていない。
   ★幅の条件は「隠す処理」が書いてあるのと同じ 720px / 600px の2つに対で書く
     （別の幅で書くと、隠れたまま／出たままの食い違いが起きる）。
   ★週表示には効かせない＝テンプレート側で week のときは .cal-showall を付けない。 */
@media (max-width: 720px) {
  .cal-month.cal-showall .cal-cell { height: auto; min-height: 88px; }
  .page-cal .cal-month.cal-showall .cal-ev.cal-ev-x2,
  .page-cal .cal-month.cal-showall .cal-ev.cal-ev-extra { display: block; }
  .cal-month.cal-showall .cal-more-m { display: none; }
}
@media (max-width: 600px) {
  .cal-month.cal-showall .cal-cell { min-height: 82px; }
}

/* ── 2026-09-21 請求書を「送ったか」の印（けん要望＝毎朝LINEでリマインド）──────
   既存の .chip の形をそのまま使い、色だけ足す。入金の印（chip-paid / chip-unpaid）と
   並ぶので、区別がつくよう色をずらす。 */
.chip-sent   { background: #e7f3ec; color: #1b6b45; }
.chip-unsent { background: #fff3e0; color: #9a5b00; }

/* ── 2026-09-21 請求書・見積書の操作ボタンを折り返す ─────────────────────
   ★理由＝「LINEで送る」を足したらスマホでボタンが5つになり、style.css 1158行の
     .actbar { display:flex } に flex-wrap が無いため「メール下書き」が縦に潰れた（実測）。
   ★style.css（原本）は触らず、ここで折り返しだけを許す＝
     入り切るときは今までどおり1行のまま。入り切らないときだけ2行になる。 */
.actbar { flex-wrap: wrap; }
.actbar .act, .actbar .act-form { flex: 0 0 auto; }

} /* /@media screen */