@charset "UTF-8";
/* TKワークス 工事日報管理システム
 * ============================================================
 * 使う人が2種類いて、必要なものが正反対である。
 *
 *   現場監督 15〜18名 … 屋外・手袋・直射日光・個人スマホ・IT操作に不慣れ
 *                        → 一度に1つ。文字と当たり判定を大きく。迷わせない
 *   事務 1名          … PC・69名の通称・22件の稼働期間・月次の集計
 *                        → 一度に全部。詰めて並べる。行き来させない
 *
 * そこで **同じ語彙で密度だけを変える** 構成にしている。
 *   伝票（.slip）… 現場向け。複写式伝票。項目名は小さく外、値は大きく枠の中
 *   台帳（.ledger）… 事務向け。罫線の詰まった一覧。その場で直して一括保存
 *
 * 語彙の出どころ
 *   表題欄（.board）… 工事写真の黒板。工事名・日付・担当をチョーク色の枠に入れる
 *   検印（.stamp）  … 未入力は空の枠、入力済は朱の印
 *   枠（.cell）     … 伝票の記入枠。数字は等幅で桁を揃える
 *
 * 制約（好みではなく条件）
 *   - 外部フォントを読み込まない（PWAでオフライン動作させるため）
 *     → 書体で個性を出せない。大きさ・太さ・字間・罫で作る
 *   - 入力欄の文字は16px以上（iOSの自動ズームを避ける）
 *   - 当たり判定は最小56px（手袋のまま押す）
 *   - 淡い灰色の文字を使わない（直射日光下で消える）
 * ============================================================ */

:root {
  /* 黒板 */
  --slate: #263038;
  --chalk: #eef2f4;
  --chalk-dim: #a9b8c0;

  /* 紙と墨 */
  --paper: #d7dbdd;      /* コンクリート灰 */
  --slip: #ffffff;
  --slip-alt: #f1f4f5;
  --ink: #14181b;        /* 墨。枠線と本文 */
  --ink-2: #4d585f;      /* 項目名 */

  --rule: #c2c9cd;
  --rule-hard: #14181b;

  /* 朱。検印と注意にだけ使う。ここを増やすと注意が効かなくなる */
  --shu: #b3271b;
  --shu-pale: #fbeae8;
  --ok: #1f6b4d;

  --tap: 56px;
  --gap: 14px;

  /* 角と影。**面の段差で階層を出す**（罫線を減らしたぶんの代わり） */
  --radius: 14px;       /* カード（伝票・台帳・メニュー） */
  --radius-sm: 10px;    /* 入力欄・ボタン */
  --radius-xs: 7px;     /* 小さな札・チップの角 */
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(20 24 27 / 0.05), 0 1px 1px rgb(20 24 27 / 0.04);
  --shadow: 0 1px 2px rgb(20 24 27 / 0.05), 0 8px 20px -10px rgb(20 24 27 / 0.22);
  --shadow-lift: 0 2px 4px rgb(20 24 27 / 0.06), 0 14px 28px -12px rgb(20 24 27 / 0.3);
  --shadow-sheet: 0 -8px 40px -12px rgb(20 24 27 / 0.45);

  /* フォーカスは朱の輪。**枠線の色替えだけでは屋外で見えない** */
  --ring: 0 0 0 3px rgb(179 39 27 / 0.3);

  --ease: 150ms cubic-bezier(0.2, 0.7, 0.3, 1);

  --sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium",
    "Yu Gothic", "Noto Sans JP", "Meiryo", sans-serif;
  --mono: ui-monospace, "SF Mono", "Menlo", "Consolas", "Roboto Mono", monospace;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

body.is-locked { overflow: hidden; }

/* **`hidden` を必ず効かせる。** `display` を指定した部品（`.row__body` の grid、
   `.pick` の flex）には、ブラウザ既定の `[hidden]` が負けて隠れない */
[hidden] { display: none !important; }

/* 数値は等幅かつ桁揃え。時刻・時間・数量が縦に揃うのは装飾ではなく機能 */
.num,
input[type="time"],
input[type="number"],
input[type="date"] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* 項目名。小さく・詰めて・太く。伝票の印刷された見出しの扱い */
.lbl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink-2);
  line-height: 1.4;
}

:where(a) { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--shu);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ============================================================
   表題欄（黒板）
   工事写真の黒板。この画面が何で、誰が見ているかを常に出す。
   ここだけ濃くして、以下の伝票を静かに読ませる。
   ============================================================ */
.board {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--slate);
  color: var(--chalk);
  /* 罫線ではなく影で紙から浮かせる。上端の細い白は板の厚みとして残す */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    0 2px 12px -4px rgb(20 24 27 / 0.45);
}

.board__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.board__cell {
  padding: 10px 14px;
  min-width: 0;
}

/* 黒板の枠線はチョークの線。薄い白で引く */
.board__cell + .board__cell {
  border-left: 1px solid rgb(255 255 255 / 0.3);
}

.board__lbl {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--chalk-dim);
}

.board__val {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board__val--sm { font-size: 14px; letter-spacing: 0.02em; }

/* 戻る。黒板の左端に置く。現場では「戻れる」ことが分かるのが最優先 */
.board__back {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 14px;
  color: var(--chalk);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  border-right: 1px solid rgb(255 255 255 / 0.22);
}

.board__back::before { content: "‹"; font-size: 22px; line-height: 1; }
.board__back { transition: background var(--ease); border-radius: var(--radius-sm); }
.board__back:hover { background: rgb(255 255 255 / 0.1); }

.board--row { display: flex; align-items: stretch; }
.board--row .board__grid { flex: 1; min-width: 0; margin: 0; align-items: center; }

/* 利用者メニュー。黒板の「担当」の欄そのものを入口にする。
   **ログアウトとパスワード変更は、どの画面からでも同じ場所から。**
   ホームの一覧に並べると、毎日押す入口（日報・過去日報）に、月に一度も
   押さないものが混ざる（顧客指摘 2026-08-31）。
   開閉は details に任せる。JSが動かなくても押せば開く */
.acct {
  position: relative;
  border-left: 1px solid rgb(255 255 255 / 0.3);
}

.acct__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;                 /* 既定の三角を消す（Firefox） */
  transition: background var(--ease);
}
.acct__btn::-webkit-details-marker { display: none; }   /* 同上（Safari） */
.acct__btn:hover { background: rgb(255 255 255 / 0.1); }

.acct__who { min-width: 0; }

/* 押すと開くことの印。戻る矢印と同じく、細い山形で描く */
.acct__btn::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid var(--chalk-dim);
  border-bottom: 2px solid var(--chalk-dim);
  transform: rotate(45deg);
  transition: transform var(--ease);
}
.acct[open] .acct__btn::after { margin-top: 4px; transform: rotate(225deg); }

.acct__panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 30;
  min-width: 200px;
  padding: 6px;
  background: var(--slip);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
}

.acct__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.acct__item:hover { background: var(--slip-alt); }

/* ログアウトだけ区切る。押し間違えると入力の途中でも外に出る */
.acct__panel form {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
}
.acct__item--out { color: var(--shu); }

/* ============================================================
   版面
   ============================================================ */
.wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--gap);
}

.wrap--wide { max-width: 1180px; }
/* 台帳の入口。**札と項目の幅を揃える**（別々の幅だと画面が2枚に割れて見える） */
.wrap--mid { max-width: 880px; }

/* ============================================================
   伝票
   複写式伝票。角丸を付けない。枠は墨の実線。
   ============================================================ */
.slip {
  background: var(--slip);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* 見出し帯の角を切るために必要。中の表がはみ出すのも防ぐ */
  overflow: hidden;
}

.slip + .slip,
.menu + .slip,
.tally + .slip,
.btn--block + .slip { margin-top: var(--gap); }

/* 伝票の表題。細い帯に項目名を入れ、左端に朱の爪を付ける */
.slip__cap {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--slip);
}

/* 朱の爪。**太い帯だと注意の色が効かなくなる**ので、短い印にとどめる */
.slip__cap::before {
  content: "";
  flex: none;
  width: 3px;
  height: 15px;
  border-radius: var(--radius-pill);
  background: var(--shu);
}

.slip__cap h2,
.slip__cap h1 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  /* **見出しが折り返すと「作業 者」のように語の途中で割れる**（390px実機） */
  white-space: nowrap;
}

/* 見出しの帯に置くボタン（追加など）も割らない */
.slip__cap .btn { flex: none; white-space: nowrap; }

.slip__cap .slip__count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2);
}

.slip__body { padding: 16px 14px; }

.slip__note {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ink-2);
}

/* ============================================================
   入力欄
   項目名は小さく上に、値は大きく枠の中。伝票の記入枠と同じ扱い。
   ============================================================ */
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }

.field > .lbl { margin-bottom: 4px; }

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="time"],
input[type="date"],
input[type="number"],
input[type="file"],
select,
textarea {
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  background: var(--slip);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  appearance: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}

input[type="text"]:hover,
input[type="search"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="time"]:hover,
input[type="date"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover { border-color: var(--ink-2); }

/* ファイル選択欄だけブラウザ既定の見た目が残るため、枠・余白だけ他の入力欄に揃える。
   「Choose File」ボタン自体を凝った見た目にはしない（既存の入力欄と同じ枠に収まれば十分） */
input[type="file"] {
  display: flex;
  align-items: center;
  padding: 8px 12px;
}

input[type="time"],
input[type="number"],
input[type="date"] { font-family: var(--mono); }

textarea { min-height: 88px; line-height: 1.5; resize: vertical; }

select {
  /* 三角は自分で描く。OSごとの見た目差を消す */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) calc(50% + 2px),
    calc(100% - 13px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

/* フォーカスは輪で示す。**枠線の色替えだけでは屋外で見えない。**
   outline から box-shadow に替えたのは、角丸に沿わせるため */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--shu);
  box-shadow: var(--ring);
}

.field__help {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--ink-2);
}

.field__error {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--shu);
}

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* ============================================================
   算出値
   実働・残業はシステムが出す数。入力欄と見た目を必ず変える。
   （入力できるものと、できないものを取り違えさせない）
   ============================================================ */
.calc {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 10px 0 0;
  padding: 8px 12px;
  background: var(--slate);
  color: var(--chalk);
  border-radius: var(--radius-sm);
}

.calc__lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--chalk-dim); }

.calc__num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.calc__unit { font-size: 12px; color: var(--chalk-dim); }

/* ============================================================
   検印（.stamp）
   未入力は空の枠、入っていれば朱の印。色だけで区別しない（記号も変える）
   ============================================================ */
.stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  color: transparent;
}

.stamp--on { border-color: var(--shu); color: var(--shu);
  background: var(--shu-pale); }
.stamp--off::after { content: "—"; color: var(--rule); }

/* 所属の区分。現行の出面表が3色で塗り分けているので、記号でも分かるようにする */
.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
}

.mark--own { background: var(--ink); color: var(--slip); }
.mark--aff { background: var(--slip); color: var(--ink); }
.mark--sub { background: var(--slip); color: var(--shu); border-color: var(--shu); }

/* ============================================================
   ボタン
   色数を増やさない。主要操作は墨、控えめは白、危険は朱。
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 22px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--slip);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ease), border-color var(--ease),
    box-shadow var(--ease), transform var(--ease);
}

.btn:hover { background: #232a2f; box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }

.btn--block { width: 100%; }

/* 控えめ。**枠は必ず残す**（押せる場所が分からなくなる） */
.btn--quiet {
  color: var(--ink);
  background: var(--slip);
  border-color: var(--rule);
}

.btn--quiet:hover { background: var(--slip-alt); border-color: var(--ink-2); }

/* 枠なし。表の行に並べる小さな操作に使う。hoverで初めて面が出る */
.btn--ghost {
  color: var(--ink);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.btn--ghost:hover { background: var(--slip-alt); border-color: var(--rule);
  box-shadow: none; }

/* 危険。朱は検印と注意にしか使わないので、押す直前まで塗らない */
.btn--danger {
  color: var(--shu);
  background: var(--slip);
  border-color: var(--shu);
}

.btn--danger:hover { background: var(--shu); color: var(--slip); }

.btn--sm { min-height: 40px; padding: 0 14px; font-size: 14px;
  border-radius: var(--radius-xs); }

.btn[disabled] { opacity: 0.45; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }
}

/* 時刻のプリセット */
.preset {
  margin-bottom: 14px;
  padding: 12px;
  background: var(--slip-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}

.preset__label { display: block; margin-bottom: 8px; font-size: 12px;
  font-weight: 700; color: var(--ink-2); }

/* **ボタンは入力欄の下端に揃え、高さも入力欄に合わせる。** 既定の stretch だと
   項目名（始業・終業）の分まで縦に伸び、丸いボタンが入力欄より大きくなる（顧客指摘 2026-09-28） */
.preset__row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.preset__row .chip { min-height: var(--tap); flex: 1 1 auto; }
/* 390pxでは3つが1行に入らず、ボタンだけ次の行へ落ちる。**落ちたときは横いっぱいに**
   広げ、半端な幅で左に寄った見た目にしない（1440pxでは3つが1行に並ぶ） */
.preset__row > .row__cell { flex: 1 1 120px; }

.chip {
  min-height: 44px;
  padding: 0 16px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  background: var(--slip);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
}

.chip:hover { background: var(--slip-alt); border-color: var(--ink-2); }

/* ============================================================
   知らせ
   ============================================================ */
.alert {
  margin: 0 0 var(--gap);
  padding: 13px 15px;
  font-size: 15px;
  font-weight: 700;
  background: var(--shu-pale);
  border: 1px solid rgb(179 39 27 / 0.35);
  border-left: 3px solid var(--shu);
  border-radius: var(--radius-sm);
  color: var(--shu);
}

.alert--success { background: #eaf3ee; border-color: rgb(31 107 77 / 0.35);
  border-left-color: var(--ok); color: var(--ok); }
.alert--warning { background: #fdf3e3; border-color: rgb(138 90 18 / 0.35);
  border-left-color: #8a5a12; color: #8a5a12; }

/* ============================================================
   行（作業者・作業内容・機械・資材・下請）
   1人1枚。幅390pxで表組みは成立しないため、行ではなく札にする。
   ============================================================ */
/* 列幅を明示しないと、既定の auto は「コンテンツの幅まで広がる」列になる。
   氏名が長い作業者（外国籍の方など）の行があると、その行の分だけ列が
   コンテナ幅を超えて広がり、ページ全体が横スクロールしてしまう
   （390px実機・実データで確認済み）。minmax(0, 1fr) にして、
   列がコンテナ幅を超えて広がらないようにする。
   ※ 1fr だけでは grid item の既定の min-width: auto が働いて縮まないことがある。 */
.rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* 行の下の「行を追加」を行の枠から離す。**くっついていると、枠の一部に見える**
   （2026-09-28）。行が無いときは説明文の余白で足りるので空けない。
   作業者欄は間に「作業者 未登録」（行があるときは隠れている）が挟まるので、
   隣接（+）ではなく後続（~）で当てる */
.rows:has(> .row) ~ .btn,
.rows:has(> .row) ~ .grid2,
.rows__empty + .btn { margin-top: 10px; }

.row {
  padding: 13px;
  background: var(--slip);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--ease), box-shadow var(--ease);
}

.row:focus-within { border-color: var(--ink-2); box-shadow: var(--shadow); }

.row--removed { opacity: 0.6; background: var(--slip-alt); }
.row--removed .row__name { text-decoration: line-through; }
.row--removed .row__body { display: none; }

.row__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

/* 通称を大きく。監督は正式名ではなく普段の呼び名で人を認識する。
   一行省略（ellipsis）にはしない。誰の行か分からないまま時間や勤怠を
   直すと実害（別人の記録を書き換える）につながるため、氏名は最後まで
   見える必要がある。タップで確認するtitle属性はスマホでは実質使えない
   ので採らず、代わりに2行までの折り返しで全体を出す。 */
.row__name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  min-width: 0;
  overflow-wrap: break-word;
}

/* 外す・削除は**押す前は静かに**しておく。各カードの右上に赤い枠が並ぶと、
   不慣れな方には警告に見えるうえ、押し間違いも起きやすい。
   チェックが入ってから朱にして「この行は外れる」と分かるようにする。 */
.row__remove {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  cursor: pointer;
  flex: none;
  transition: color var(--ease), border-color var(--ease), background var(--ease);
}

.row__remove:hover { background: var(--slip-alt); border-color: var(--ink-2); }

.row--removed .row__remove,
.row__remove:has(:checked) { color: var(--shu); border-color: var(--shu); }

.row__remove input { width: 18px; height: 18px; min-height: 0; margin: 0;
  accent-color: var(--shu); }

.row__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.row__cell { display: block; min-width: 0; }
.row__cell > span { display: block; margin-bottom: 3px; font-size: 11px;
  font-weight: 700; letter-spacing: 0.14em; color: var(--ink-2); }
.row__cell input,
.row__cell select { min-height: var(--tap); }

.row__line { display: flex; gap: 8px; align-items: flex-start; }
.row__line > input,
.row__line > select { flex: 1 1 0; min-width: 0; }
.row__line > input[type="number"] { flex: 0 0 84px; }
/* 削除は隣の入力欄と同じ高さに。**44pxのまま上揃えだと下端が8pxずれる**（2026-09-28） */
.row__line > .row__remove { align-self: stretch; }
/* 下請の行は業者の欄の直下に項目名（人数・作業時間）が来る。詰まって
   上の欄の項目名に見えるので、作業者の行（氏名の下 9px）と同じくらい空ける */
.row--subcon .row__body { margin-top: 10px; }

.row__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
}

.row__check input { width: 22px; height: 22px; min-height: 0; accent-color: var(--ink); }

.rows__empty {
  margin: 10px 0 0;
  padding: 16px 12px;
  font-size: 14px;
  color: var(--ink-2);
  text-align: center;
  background: var(--slip-alt);
  border: 1px dashed var(--rule);
  border-radius: var(--radius-sm);
}

/* ============================================================
   保存の帯
   画面の下に貼り付ける。長い入力の途中でも保存に手が届くようにする。
   ============================================================ */
.save {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: var(--gap);
  padding: 10px var(--gap);
  margin-left: calc(var(--gap) * -1);
  margin-right: calc(var(--gap) * -1);
  background: var(--slate);
  box-shadow: var(--shadow-sheet);
}

.save__cancel {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  color: var(--chalk);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  /* 帯に削除できない理由が並ぶと、390pxで「キャ／ンセ／ル」と縦に割れていた */
  white-space: nowrap;
}

.save__btn { flex: 1; }

/* 台帳の帯は**並べ替えを保存するだけ**。日報の保存と同じ黒い帯にすると、
   一覧で何か大きな編集をしたように見える */
.save--quiet {
  justify-content: flex-end;
  background: var(--slip);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-left: 0;
  margin-right: 0;
}

.save--quiet .save__btn { flex: none; color: var(--ink);
  background: var(--slip); border-color: var(--rule); }
.save--quiet .save__btn:hover { background: var(--slip-alt);
  border-color: var(--ink-2); }
.save--quiet .save__note { color: var(--ink-2); }

/* 1件の編集画面の帯。**画面の端まで伸ばさず、伝票の幅に揃える。**
   貼り付けもしない（下に続きがある画面で、上に居座って隠す） */
.save--inline {
  position: static;
  margin-left: 0;
  margin-right: 0;
  border-radius: var(--radius);
  padding: 12px 14px;
}
/* 削除・キャンセル・保存を一並びにする。**削除だけ左端に離す**。
   入りきらない幅では折り返す。削除できない理由（.save__why）は文節で割らない
   ので縮められず、折り返さないと帯の左端からはみ出して読めなくなる */
.save--edit { justify-content: flex-end; flex-wrap: wrap; }
.save--edit .save__btn { flex: none; min-width: 9em; }
.save__del {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--slip);
  background: transparent;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--ease), border-color var(--ease);
}
.save__del:hover { background: rgb(179 39 27 / 0.6); border-color: var(--shu); }
/* 消せない理由。**押してから断らず、押せない理由を先に出す** */
.save__why { margin-right: auto; font-size: 13px; color: var(--chalk-dim); }

/* 削除の確認画面。**一手では消せないようにする** */
.danger__name {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  word-break: break-word;
}
.danger__note { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); }
.danger__act { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 18px; }
.danger__act .btn--danger { margin-left: auto; }
.save__btn.btn { color: var(--ink); background: var(--chalk); border-color: var(--chalk); }

/* ============================================================
   作業者を選ぶ画面
   ============================================================ */
.picker {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.picker[hidden] { display: none; }

.picker__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--slate);
  color: var(--chalk);
  box-shadow: 0 2px 12px -4px rgb(20 24 27 / 0.45);
  font-size: 15px;
  letter-spacing: 0.1em;
}

.picker__close {
  margin-left: auto;
  min-height: 44px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--chalk);
  background: transparent;
  border: 1px solid var(--chalk-dim);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--ease);
}

.picker__close:hover { background: rgb(255 255 255 / 0.12); }

.picker__body { flex: 1; overflow-y: auto; padding: 12px; }

/* 検索欄は一覧の外。**スクロールしても隠れない** */
.picker__search { padding: 12px 12px 0; }

.picker__group + .picker__group { margin-top: 16px; }

.picker__company {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink-2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}

.picker__names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* 工事名は「02ニセコモイワプロジェクト(Ｆ道路)」のように長い。
   2列に入れると1件が3行に折り返り、どこまでが1件か分からなくなるので、
   担当現場の画面だけ1列に落とす */
.picker__names--stack { grid-template-columns: 1fr; }

.pick {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 10px;
  font-size: 16px;
  font-weight: 700;
  background: var(--slip);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}

.pick:hover { border-color: var(--ink-2); background: var(--slip-alt); }
.pick:has(:checked) { border-color: var(--ink); background: var(--slip-alt); }

.pick input { width: 22px; height: 22px; min-height: 0; flex: none;
  accent-color: var(--ink); }
.pick span { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

/* すでに入っている人。押せないことを色だけで示さない */
.pick--used { background: var(--slip-alt); color: var(--ink-2); }
.pick--used::after { content: "追加済"; margin-left: auto; font-size: 11px;
  letter-spacing: 0.1em; }

.picker__foot {
  padding: 12px 14px;
  background: var(--slate);
  box-shadow: var(--shadow-sheet);
}

.picker__foot .btn { width: 100%; color: var(--ink); background: var(--chalk);
  border-color: var(--chalk); }

/* ============================================================
   ログイン
   ============================================================ */
.auth { max-width: 420px; margin: 0 auto; padding: 24px var(--gap) 40px; }

.auth__board {
  background: var(--slate);
  color: var(--chalk);
  padding: 22px 20px;
  border-radius: var(--radius) var(--radius) 0 0;
}

.auth__title {
  margin: 0;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.auth__sub {
  margin: 6px 0 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--chalk-dim);
}

.auth__body {
  background: var(--slip);
  border: 1px solid var(--rule);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

/* 見出しや短い案内文が**文節の途中で折り返す**のを構造的に防ぐ。
   「手続きで／きません」のような切れ方は、読み手が一度つまずく。
   意味の切れ目ごとに span で包み、その中では折り返させない */
.nowrap { white-space: nowrap; }

.auth__foot {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* ============================================================
   入口（ホーム）
   IT操作に不慣れな人が最初に見る画面。項目を増やさず、大きく置く。
   ============================================================ */
/* 画面の中の区切り。**自分のことと、会社ぜんたいのことを分ける** */
.group__ttl {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: var(--gap) 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}
.group__note { font-size: 12px; font-weight: 400; letter-spacing: 0;
  color: var(--ink-2); }

/* 幅は置かれた版面に合わせる。**ここで幅を決めると、外側の札と食い違う**
   （台帳の入口で札は版面いっぱい・項目は760pxになっていた／2026-08-29） */
.menu { display: grid; gap: 10px; }

.menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 14px 16px;
  background: var(--slip);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform var(--ease), box-shadow var(--ease),
    border-color var(--ease);
}

/* 押せる面であることは、触れたときに持ち上がることで伝える */
.menu__item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
  border-color: var(--ink-2);
}

.menu__item:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

@media (prefers-reduced-motion: reduce) {
  .menu__item { transition: none; }
  .menu__item:hover { transform: none; }
}

.menu__item--primary { background: var(--ink); color: var(--slip);
  border-color: var(--ink); }
.menu__item--primary .menu__sub { color: var(--chalk-dim); }

.menu__no {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  padding: 2px 6px;
  border: 1.5px solid currentColor;
  flex: none;
}

.menu__txt { min-width: 0; }
.menu__ttl { display: block; font-size: 18px; font-weight: 700;
  letter-spacing: 0.04em; }
.menu__sub { display: block; font-size: 12px; color: var(--ink-2); }
.today {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.today__y { font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--ink-2); letter-spacing: 0.06em; }

.today__d {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 42px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.today__w { font-size: 16px; font-weight: 700; }

/* 行き先があることの印。矢印は文字ではなく細い山形で描く（▶は野暮ったい） */
.menu__item::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-radius: 1px;
  opacity: 0.45;
  transform: rotate(45deg);
  transition: opacity var(--ease), transform var(--ease);
}

.menu__item:hover::after { opacity: 0.9; transform: rotate(45deg) translate(2px, -2px); }

/* PCでのみ出す。出面表Excelは列が多く、スマホでは開いても実質扱えない。
   **URLは生きている**ので、必要ならスマホからでも直接開ける */
.pc-only { display: none; }
@media (min-width: 768px) { .pc-only { display: flex; } }

/* ============================================================
   日報の一覧
   ============================================================ */
.log { list-style: none; margin: 0; padding: 0; }

.log > li + li { border-top: 1px solid var(--rule); }

/* 「まだ入っていない日」は、その場で休工にできるよう行の右端にボタンを置く。
   日報の一覧（.log）と同じ見た目のまま、1行に2つの操作を並べる */
.log--todo > li { display: flex; align-items: center; }
.log--todo > li > a { flex: 1 1 auto; min-width: 0; }
.log--todo > li > form { flex: none; padding: 0 12px 0 6px; }

.log a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 12px;
  padding: 12px;
  text-decoration: none;
}

.log a { transition: background var(--ease); border-radius: var(--radius-sm); }
.log a:hover { background: var(--slip-alt); }

.log__date {
  grid-row: 1 / 3;
  align-self: center;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  padding: 6px 9px;
  color: var(--ink);
  background: var(--slip-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}

.log__date b { display: block; font-size: 20px; }

.log__name { font-size: 16px; font-weight: 700; }

.log__meta {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink-2);
}

/* ============================================================
   台帳（事務向け・PC）
   Django標準の管理画面を使わずにこれを出す。
   69名・22件を1画面で直して、まとめて保存する。
   ============================================================ */
/* 列幅を決める。決めないと1列だけ極端に広がる。余りは氏名・工事名に寄せる。 */
.ledger col.c-mark { width: 4.5em; }
.ledger col.c-org { width: 9em; }
.ledger col.c-nick { width: 13em; }
.ledger col.c-order { width: 5.5em; }
.ledger col.c-flag { width: 6.5em; }
.ledger col.c-code { width: 5em; }
.ledger col.c-date { width: 11em; }
.ledger col.c-taiten { width: 9em; }
.ledger col.c-client { width: 13em; }
.ledger col.c-grip { width: 2.6em; }
.ledger col.c-act { width: 5.5em; }

/* 並べ替えのつまみ。**行そのものをドラッグ対象にすると、入力欄の文字を
   選ぼうとしただけで行が動く。** つまみだけを掴ませる */
.ledger__grip {
  cursor: grab;
  user-select: none;
  text-align: center;
  color: var(--ink-2);
  letter-spacing: -2px;
}
.ledger__grip:active { cursor: grabbing; }
.ledger tr.is-dragging { opacity: 0.4; }
.ledger tr.is-over > td { border-top: 2px solid var(--ink); }

.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.ledger th,
.ledger td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}

.ledger tbody tr:last-child td { border-bottom: none; }

/* 見出しは黒板にしない。**罫線と色を減らして、値そのものを主役にする** */
.ledger thead th {
  position: sticky;
  /* 黒板（.board）が画面に貼り付くので、その下に来るように押し下げる */
  top: 56px;
  z-index: 2;
  background: var(--slip-alt);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}

/* ゼブラは薄く。**行が読みやすくなる程度で、模様に見せない** */
.ledger tbody tr { transition: background var(--ease); }
.ledger tbody tr:nth-child(even) { background: rgb(20 24 27 / 0.018); }
.ledger tbody tr:hover { background: var(--slip-alt); }

/* 操作の列。行に触れるまで静かにしておく */
.ledger__act { text-align: right; white-space: nowrap; }
.ledger__act .btn { opacity: 0.75; transition: opacity var(--ease); }
.ledger tbody tr:hover .ledger__act .btn,
.ledger__act .btn:focus-visible { opacity: 1; }

/* 未入力・未設定。**空欄のままにすると「入れ忘れ」か「そもそも不要」かが
   分からない。** 言葉にして、朱で目立たせる */
.ledger__blank {
  display: inline-block;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--shu);
  background: var(--shu-pale);
  border-radius: var(--radius-pill);
}

.ledger__span { white-space: nowrap; font-family: var(--mono); font-size: 13px; }

/* 状態の札。色だけで区別しない（文字も変える） */
.tag {
  display: inline-block;
  /* **折り返すと丸い札が縦に割れて別物に見える。** 列幅より札を優先する */
  white-space: nowrap;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: var(--slip-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
}

.tag--off { color: var(--ink-2); background: transparent; }

/* 氏名は折り返さない。折り返すと通称を入れる相手を取り違える */
.ledger__name { font-weight: 700; white-space: nowrap; }
.ledger__code { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.ledger__proj { min-width: 15em; }

/* 1件の編集画面。PCでは2列、狭い画面では1列に落とす */
.form2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 14px; }
.form2__full { grid-column: 1 / -1; }

@media (min-width: 620px) {
  .form2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 一覧の下に置く小さな操作の帯（会社の並び順など） */
.slip__body--foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  background: var(--slip-alt);
}

.save__note { font-size: 12px; color: var(--chalk-dim); }
.slip__body--foot .save__note { color: var(--ink-2); }

/* 読み上げには残すが、画面には出さない見出し */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 未入力の件数。事務が「あと何件か」を一目で掴めるようにする */
/* 数字は独立した札にする。1枚の箱を罫線で割るより、**数が何個あるか**が掴みやすい */
.tally {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5em, 1fr));
  gap: 10px;
  margin-bottom: var(--gap);
}

.tally__item {
  padding: 12px 14px;
  background: var(--slip);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.tally__num { display: block; font-family: var(--mono); font-size: 26px;
  font-weight: 700; line-height: 1.1; }
.tally__num--alert { color: var(--shu); }
.tally__sub { display: block; font-size: 12px; color: var(--ink-2); }

/* ============================================================
   幅の切り替え
   狭い画面では台帳を諦めて札に落とす（横スクロールで入力させない）
   ============================================================ */
@media (max-width: 860px) {
  .ledger { font-size: 15px; }
  .ledger thead { display: none; }
  .ledger colgroup { display: none; }
  .ledger tbody tr {
    display: block;
    padding: 12px;
    background: var(--slip);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
  }
  .ledger tbody tr + tr { margin-top: 10px; }
  .ledger tbody tr:nth-child(even) { background: var(--slip); }
  .ledger td { display: flex; align-items: center; gap: 10px; border: none;
    padding: 4px 0; }
  .ledger td::before {
    content: attr(data-lbl);
    flex: 0 0 5.5em;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--ink-2);
  }
  /* つまみも並べ替えの帯も、狭い画面では出さない（ドラッグはPCの操作） */
  .ledger .ledger__grip { display: none; }
  .save--quiet { display: none; }
  .ledger__act { justify-content: flex-start; }
  .ledger__act .btn { opacity: 1; }
}

@media (min-width: 861px) {
  .row__body { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .picker__names { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 印刷（事務が台帳を紙で確認することがある） */
@media print {
  .board, .save, .btn { display: none; }
  body { background: #fff; }
  .slip { border-color: #000; }
}


/* ============================================================
   締切・深夜（2026-08-28 追加）
   ============================================================ */

/* 締切を過ぎた日報は fieldset ごと止める。枠線と余白の既定を消して、
   囲っていること自体が見えないようにする（見た目は今までと同じ） */
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }

/* ホームの締切表示。日付を主役にして、残り日数を添える */
.due {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--ink-2);
  font-size: 13px;
  color: var(--ink-2);
}
.due__day { font-size: 17px; color: var(--ink); letter-spacing: 0.02em; }
.due__left { margin-left: auto; font-weight: 700; }

/* 天気の早押し。**4つが折り返すと「雪」だけ2行目に落ちる**（390px実機）。
   均等に割って1行に収める */
.picks { display: flex; gap: 6px; margin-top: 6px; }
.picks .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; }

/* 2回目の勤務。深夜作業の日だけ開く */
.row__body--second { margin-top: 6px; }
/* 帯は暗色なので、文字は帯の色（chalk）で書く。**墨色だと暗い帯に沈んで読めない**
   （深夜の時間数がほぼ見えていなかった・2026-09-28） */
.calc__night { margin-left: 10px; font-size: 13px; color: var(--chalk-dim); }
.calc__night b { color: var(--chalk); }

/* 帯に並ぶものが増えた（食事補助）。**390pxで深夜が出た日に帯からはみ出す**ので折り返す */
.calc { flex-wrap: wrap; row-gap: 6px; }
/* **帯のボタンは上下中央に揃え、高さを1つに決める。** 帯は数字を揃えるため
   baseline 揃えで、チェックボックスを持つ「食事補助」だけ基準線が下にずれて
   「2回目」より上に浮いていた（顧客指摘 2026-09-28） */
.calc .btn { height: 40px; min-height: 0; }
/* 「2回目」と「食事補助」は**ひとまとめにして右に寄せる。** 別々だと390pxで
   片方だけ次の行へ落ち、左右に泣き別れる */
/* まとめた箱は「2回目」の文字の基準線で帯の数字と揃える（中央揃えにすると、
   基準線で並ぶ「実働 8.0 時間」だけが上に寄る）。箱の中は中央揃えにして、
   チェックボックスで基準線が下がる「食事補助」を「2回目」と同じ高さに置く */
.calc__tools { display: flex; align-items: center; gap: 6px; margin-left: auto;
  align-self: baseline; }
.calc__meal { gap: 8px; cursor: pointer; }
.calc__meal input { width: 20px; height: 20px; min-height: 0; margin: 0;
  accent-color: var(--ink); }
/* 付いている行は枠を太くして、帯の中で一目で分かるようにする。お金に関わるため */
.calc__meal:has(:checked) { background: var(--slip-alt); border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink); }


/* ============================================================
   出す前に画面で見る（2026-08-29 追加）
   顧客要望「エクセルやPDF出力前にプレビューを見れる画面があるとよい」。
   出してから間違いに気づくと、事務は毎回ダウンロードして開いて閉じる、を繰り返す。
   ============================================================ */

/* 出面表は31日ぶんの列がある。**この画面だけ版面の幅を外す** */
.wrap--full { max-width: none; }

/* 見た内容をそのまま出せるよう、上に固定の帯を置く */
.bar {
  position: sticky;
  top: 56px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: var(--gap);
  padding: 12px 16px;
  background: var(--slip);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.bar__txt { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.bar .btn { margin-left: auto; }

/* 日報が入っている月。**「何も入っていないのか」への答えを画面に置く** */
.have { margin: 0 0 16px; }
.have__ttl { display: block; margin-bottom: 8px; font-size: 12px;
  font-weight: 700; color: var(--ink-2); }
.have__list { display: flex; gap: 8px; flex-wrap: wrap; }
.have__none { margin: 0; font-size: 13px; color: var(--ink-2); }

.chip--sm {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.chip__n { font-size: 12px; font-weight: 400; color: var(--ink-2); }
/* 選ばれている月。**色だけで区別せず枠も変える** */
.chip--on { border-color: var(--shu); box-shadow: inset 0 0 0 1px var(--shu); }
.chip--on .chip__n { color: var(--shu); }

/* 出力の選び方。**見る → 出す** の順に並べる */
.out { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.out__item {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: var(--slip-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.out__ttl { font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--ink-2); }

@media (min-width: 620px) {
  .out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 出面表そのもの。31列あるので、この表だけ横に送る */
.sheet__scroll { overflow-x: auto; }

.sheet {
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
}

.sheet th,
.sheet td {
  border: 1px solid var(--rule);
  padding: 3px 6px;
  text-align: center;
}

.sheet thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--slip-alt);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

/* 氏名と区分は左端に貼り付ける。**横に送ると誰の行か分からなくなる** */
/* **`.sheet td` の text-align:center より詳細度を上げる。**
   クラスだけで書くと（0,1,0 対 0,1,1）中央寄せに負ける */
.sheet td.sheet__mark,
.sheet td.sheet__name,
.sheet th.sheet__mark,
.sheet th.sheet__name {
  position: sticky;
  z-index: 1;
  background: var(--slip);
  text-align: left;
}

.sheet td.sheet__mark,
.sheet th.sheet__mark { text-align: center; }

.sheet__mark { left: 0; width: 3.2em; text-align: center; }
.sheet__name { left: 3.2em; min-width: 9em; font-weight: 700; }
.sheet thead .sheet__mark,
.sheet thead .sheet__name { z-index: 2; background: var(--slip-alt); }

.sheet__day { width: 2.4em; font-family: var(--mono);
  font-variant-numeric: tabular-nums; }
.sheet__sum { width: 3.6em; font-family: var(--mono);
  font-variant-numeric: tabular-nums; background: var(--slip-alt); }

/* 残業・深夜の行は氏名を繰り返さず、行の役割だけを小さく置く */
.sheet__sub .sheet__name { font-size: 11px; font-weight: 700;
  color: var(--ink-2); }
.sheet__sub td { color: var(--ink-2); }

/* 人ごとの区切り。1人＝2行（深夜がある人は3行）のまとまりを見せる */
.sheet__top td { border-top: 1.5px solid var(--ink-2); }
.sheet__foot td { background: var(--slip-alt); }
.sheet__total td { background: var(--slate); color: var(--chalk);
  font-weight: 700; }
.sheet__total .sheet__mark,
.sheet__total .sheet__name { background: var(--slate); color: var(--chalk); }

/* 勤怠区分（有給・休など）は数ではない。数字と見分けが付くようにする */
.sheet .is-absence { font-family: var(--sans); color: var(--shu); }

.notes { margin: 6px 0 0; padding-left: 1.2em; font-size: 13px;
  line-height: 1.8; }

/* 日報のプレビュー。紙のCSSは寸法で書いてあるので、枠を分けて中で描く */
.paper {
  background: var(--slip);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.paper__frame {
  display: block;
  width: 100%;
  height: 78vh;
  min-height: 420px;
  border: 0;
  background: #fff;
}