/* ========================================
  共通設定（変数・リセット）
======================================== */
:root {
  /* -------------------------------------------------------------------
    CLAUDE.md「4.2 デザイントークン」

    ★Planner 裁定 16-L
      「数値・デザイントークン（色・寸法・余白・ボタン幅・ブレークポイント）
        → デザインポリシー（CLAUDE.md 4.2）が正」
      「画面構造・要素の配置・文言・クラス名 → 画面イメージが正」
      したがって以下の変数の【値】はポリシーに合わせ、
      クラス名・セレクタ・構造は画面イメージのまま変更しない。

    ★画面イメージ側の変数は「別名」としてポリシーのトークンを参照させている。
      こうすることで既存の var(--brand-600) 等の記述を書き換えずに、
      ポリシーのトークンが実際に使われる状態になる。
        --brand-600 → --brand-strong
        --ink-soft  → --ink-sub
        --ink-faint → --ink-weak
        --footer    → --footer-bg
  ------------------------------------------------------------------- */
  /* 色 */
  --brand: #1f4e79;
  --brand-strong: #2a5f92;
  --accent: #2f80ed;
  --ink: #1f2733;
  --ink-sub: #5b6675;
  --ink-weak: #8a95a3;
  --ok: #1e7d4f;
  --warn: #b7791f;
  --danger: #b42318;
  --bg: #f4f6f9;
  --surface: #ffffff;
  --footer-bg: #eef4fb;

  /* 寸法（ポリシー「4.2 レイアウト」「ボタン」） */
  --space: 4px;
  --btn-w: 120px;
  --btn-w-max: 240px;
  --btn-h: 36px;
  /* ★ヘッダー・フッターは狭くする（裁定 16-AS）。
     本文の縦幅を稼ぐため。以前は 52px / 61px だった。
     ヘッダー44px の内訳: 開閉ボタン 36px ＋ 上下 4px。 */
  --header-h: 44px;
  --sidebar-w: 224px;
  /* ★フッターの高さ（ヘッダー・フッター常時表示のために固定値で持つ）。
     内訳: padding 4px×2 ＋ フッター内のボタン高 32px ＋ border-top 1px = 41px。
     ★フッターのボタンだけ 32px にしている（--btn-h の 36px より低い）。
       フッターは常時表示のため、本文の縦幅を優先した（裁定 16-AU）。
     .footer に min-height として与え、.app の高さから差し引く。
     ★フッターの padding / --btn-h を変えたらこの値も直すこと。
       ずれると .content の下端がフッターに潜るか、隙間が空く。 */
  --footer-h: 41px;

  /* ------------------- 以下は画面イメージ style.css の定義 -------------------
    ★値がポリシーと同じものはそのまま、別名になっているものは var() で束ねる。
      --line だけは名前が衝突している。
        ポリシーの --line:#cdd5e0 は画面イメージの --line-strong に相当し、
        画面イメージの --line:#e2e7ee は淡い罫線である。
        全画面の罫線の濃さが変わってしまうため、ここは画面イメージのままとし
        docs/coding-standards.md「4.6」に乖離として記録している。
  ------------------------------------------------------------------- */
  --login-bg: #2a5f92;
  --ink-soft: var(--ink-sub);
  --ink-faint: var(--ink-weak);
  --line: #e2e7ee;
  --line-strong: #cdd5e0;
  --brand-600: var(--brand-strong);
  --brand-050: #eef3f9;
  --ok-bg: #e6f4ec;
  --warn-bg: #fbf1dd;
  --danger-bg: #fbeae8;
  --info: #175cd3;
  --info-bg: #e8f0fd;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --footer: var(--footer-bg);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  /* ★画面全体の縦スクロールを禁止する（ヘッダー・フッターの常時表示）。
     スクロールするのは .content の内側だけである。
     height を 100% にしないと、子の .app に高さの基準が無くなる。 */
  height: 100%;
  overflow: hidden;
}

body {
  font-family:
    "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}

h2 {
  font-size: 14px;
  margin: 0;
}

h3 {
  font-size: 13.5px;
  margin: 0;
}

.alert {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
  align-items: flex-start;
}

.alert--danger {
  background: var(--danger-bg);
  color: #7a1c14;
  border: 1px solid #f0c4bf;
}

.alert--info {
  background: var(--info-bg);
  color: #134a9e;
  border: 1px solid #c5dbfb;
}

.alert--ok {
  background: var(--ok-bg);
  color: #125c39;
  border: 1px solid #bfe3cd;
}

/* 注意（黄）。★エラー（赤）と区別する。処理は成功しており、確認を促すだけである
   （労働基準法の休憩不足・長時間労働の警告。CLAUDE.md 4.4 に「注意」区分として追加） */
.alert--warn {
  background: var(--warn-bg);
  color: #7a5410;
  border: 1px solid #e8d3a4;
}

/* 通知の中に複数件を並べる（作業時間の行エラー。「7/3 退勤時間は…」） */
.error-list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}

.error-list > li + li {
  margin-top: 4px;
}

/* ★先頭の丸（「・」）は出さない（Planner 裁定 16-AX）。
   画面イメージ（docs/画面イメージ/style.css）の .badge::before が
     content:""; width:6px; height:6px; border-radius:50%; background:currentColor
   で 6px の丸を描いていたが、状態は文言と背景色で十分に伝わっており、
   バッジが2列以上並ぶ画面（MS-01 の「区分」「状態」、RP-01 の承認状況）で
   丸が並んで文字が読みにくかった。

   ★画面イメージから取り込み直すときに復活させないこと。
     template/BadgeStyleTest が「定義が無いこと」を検証している。
   ★gap も残していない。丸が無くなり子要素が1つだけになったため効かない。 */
/* ★丸が文字を囲めていなかったのを直した（障害 #1）。原因は2つある。

   (1) line-height を body（1.6）から継承していた。
       11.5px × 1.6 ＝ 18.4px の行ボックスに上下 4px の padding が付くため、
       高さ 26.4px の丸の中に高さ 9px ほどの字面が浮く形になり、
       「丸だけが大きい」状態だった。line-height:1 にして丸を字面に寄せる。

   (2) 和文グリフはベースラインより上に偏って置かれる（字面の中心が
       行ボックスの中心より下に来る）。align-items:center は
       <b>行ボックス</b>を中央に置くだけなので、字面は下寄りに見える。
       実測で約 1.3px 下だった（docs/manual/screenshots/CM-06-SALES.png）。
       上下の padding を 1px ずらして字面を上下中央に見せる。

   ★padding の上下を揃えないこと。揃えると (2) が再発する。
   ★justify-content:center は、狭いセルで max-width に当たったときに
     字面が左へ寄らないようにするためである。 */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 12px 5px;
  border-radius: 20px;
  white-space: nowrap;
}

.badge--ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.badge--warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.badge--danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.badge--info {
  background: var(--info-bg);
  color: var(--info);
}

.badge--muted {
  background: #eef1f5;
  color: var(--ink-soft);
}

.w5 {
  width: 5%;
}

.w10 {
  width: 10%;
}

/* ========================================
  Margin（外側余白）
======================================== */

.mt-0 {
  margin-top: 0px !important;
}

.mt-4 {
  margin-top: 4px;
}
.mt-8 {
  margin-top: 8px;
}
.mt-16 {
  margin-top: 16px;
}
.mt-24 {
  margin-top: 24px;
}
.mt-32 {
  margin-top: 32px;
}

.mb-4 {
  margin-bottom: 4px;
}
.mb-8 {
  margin-bottom: 8px;
}
.mb-16 {
  margin-bottom: 16px;
}
.mb-24 {
  margin-bottom: 24px;
}
.mb-32 {
  margin-bottom: 32px;
}

.ml-8 {
  margin-left: 8px;
}
.ml-16 {
  margin-left: 16px;
}
.ml-24 {
  margin-left: 24px;
}

.mr-8 {
  margin-right: 8px;
}
.mr-16 {
  margin-right: 16px;
}
.mr-24 {
  margin-right: 24px;
}

.mx-16 {
  margin-left: 16px;
  margin-right: 16px;
}

.my-8 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.my-16 {
  margin-top: 16px;
  margin-bottom: 16px;
}

/* ========================================
  Padding（内側余白）
======================================== */
.p-8 {
  padding: 8px;
}

.p-16 {
  padding: 16px;
}

.p-24 {
  padding: 24px;
}

.pt-8 {
  padding-top: 8px;
}

.pt-16 {
  padding-top: 16px;
}

.pt-24 {
  padding-top: 24px;
}

.pb-8 {
  padding-bottom: 8px;
}

.pb-16 {
  padding-bottom: 16px;
}

.pb-24 {
  padding-bottom: 24px;
}

.pl-4 {
  padding-left: 4px;
}

.pl-8 {
  padding-left: 8px;
}

.pl-12 {
  padding-left: 12px;
}

.pl-16 {
  padding-left: 16px;
}

.pr-8 {
  padding-right: 8px;
}
.pr-16 {
  padding-right: 16px;
}

.px-16 {
  padding-left: 16px;
  padding-right: 16px;
}

.py-16 {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* ========================================
  全体レイアウト
======================================== */
/* base: 〜360px（スマホ最小） */

/* ★画面全体は「ビューポートに収まる固定シェル」である。
     ヘッダー（.topbar）とフッター（.footer）を常に表示し、
     スクロールするのは .content の内側だけにする。

   ・高さは 100dvh を使う。100vh だとスマホのアドレスバーの分だけ
     はみ出して、フッターが画面外に隠れる。
   ・.footer は .app の兄弟（外側）に置かれた position: fixed であるため、
     .app の高さから --footer-h を差し引いて場所を空ける。
   ・.sidebar も position: fixed のため、この flex 列には並ばない
     （並ぶのは .topbar と .main の2つだけ）。 */
.app {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--footer-h));
  overflow: hidden;
}

/* ヘッダーは縮まない。position: sticky は残してあるが、
   このシェルでは flex 列の先頭に固定されるため実際には効いていない。 */
.topbar {
  flex: 0 0 auto;
}

.main,
.login-main {
  flex: 1;
  /* ★サイドバーの開閉に合わせて滑らかに寄せる（.sidebar 側の transition と同じ 0.25s）。
     1024px 以上では margin-left と一緒に width も変わる（下の 3ペイン指定を参照） */
  transition: margin-left 0.25s ease, width 0.25s ease;
  margin-left: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* ★min-height: 0 が無いと flex アイテムは内容より小さくならないため、
     .main が中身の高さまで伸びて .app からはみ出し、
     .content の内側スクロールが効かなくなる。 */
  min-height: 0;
  overflow: hidden;
}

.content {
  padding: 16px 14px;
  width: 100%;
  /* ★縦スクロールはここだけで起きる */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ========================================
  レイアウト（12カラム Grid）
======================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

/* スマホ（デフォルト） */
.col-1 {
  grid-column: span 1;
}
.col-2 {
  grid-column: span 2;
}
.col-3 {
  grid-column: span 3;
}
.col-4 {
  grid-column: span 4;
}
.col-5 {
  grid-column: span 5;
}
.col-6 {
  grid-column: span 6;
}
.col-7 {
  grid-column: span 7;
}
.col-8 {
  grid-column: span 8;
}
.col-9 {
  grid-column: span 9;
}
.col-10 {
  grid-column: span 10;
}
.col-11 {
  grid-column: span 11;
}
.col-12 {
  grid-column: span 12;
}

/* ========================================
  画面表示
======================================== */
.screen {
  display: none;
  animation: fade 0.2s ease;
}

.screen.is-active {
  display: block;
}

.pc-only {
  display: none;
}

/* ========================================
  ボタン
======================================== */
/* ★寸法はデザインポリシー（CLAUDE.md 4.2）が正（Planner 裁定 16-L）。
     高さ36px / 基本幅120px固定（収まらない場合のみ最大240pxまで拡張）/
     左右padding16px / 角丸6px。
     隣接ボタン群の幅を揃えるのは min-width が担う（文言が短くても120pxになる）。 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  padding: 0 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: 0.15s;
  height: var(--btn-h);
  min-width: var(--btn-w);
  max-width: var(--btn-w-max);
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* アイコンのみの補助ボタン。120px固定の対象外にする
   （docs/coding-standards.md「4.7」に乖離として記録） */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--brand);
  padding: 8px;
  min-width: auto;
}

.btn--danger {
  background: #fff;
  border-color: #e6b4ae;
  color: var(--danger);
}

/* 一覧の行内アクション用。行高40px（ポリシー4.2）に収めるため
   120px固定・高さ36pxの対象外にする（docs/coding-standards.md「4.7」に記録） */
.btn--sm {
  padding: 5px 10px;
  font-size: 12px;
  height: 28px;
  min-width: auto;
}

.btn--unlock:disabled,
.btn--unlock:disabled:hover {
  cursor: not-allowed;
  border-color: var(--line-strong);
  background: #f2f4f7;
  color: var(--ink-faint);
  box-shadow: none;
  opacity: 1;
}

.btn--unlock:not(:disabled) {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

/* ログインカード内の全幅ボタン。画面イメージのとおり全幅にするため
   最大240pxの制限を外す（docs/coding-standards.md「4.7」に記録） */
.login-btn {
  height: 40px;
  width: 100%;
  max-width: none;
  justify-content: center;
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ========================================
  入力フォーム
======================================== */
.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--ink);
}

.field .hint {
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-top: 4px;
}

.req {
  color: var(--danger);
  margin-left: 3px;
}

.input,
.select,
.textarea {
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}

.work-table select,
.work-table input,
.work-table textarea {
  padding: 0 3px;
  height: 22px;
}

.login-field,
.account-field {
  margin-bottom: 12px;
}

.form-section {
  border-top: 1px dashed var(--line);
  margin-top: 6px;
  padding-top: 18px;
}

.form-section__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.switch-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input:focus,
.select:focus,
.textarea:focus,
.btn:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.12);
}

/* =========================================================
 * エラー表示
 * ========================================================= */

/* 画面下部に表示するエラー一覧 */
.validation-errors {
  padding: 14px 16px;
  border: 1px solid #e6b4ae;
  border-radius: 8px;
  background: var(--danger-bg);
  color: #7a1c14;
  scroll-margin-top: 80px;
}

/* hidden属性が付いている場合は非表示 */
.validation-errors[hidden] {
  display: none;
}

.validation-errors__title {
  margin-bottom: 6px;
  font-weight: 700;
}

.validation-errors ul {
  margin: 0;
  padding-left: 22px;
}

.validation-errors li + li {
  margin-top: 4px;
}

/* 入力エラーがある項目を赤枠にする */
#screen-user-edit .input.is-error,
#screen-user-edit .select.is-error,
#screen-user-edit .textarea.is-error {
  border-color: var(--danger);
  background: #fffafa;
}

/* エラー項目を選択したとき */
#screen-user-edit .input.is-error:focus,
#screen-user-edit .select.is-error:focus,
#screen-user-edit .textarea.is-error:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}

/* エラーが残っている間は登録・保存できない */
#userSaveButton:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ========================================
  ヘッダー
======================================== */
.hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -15px;
  height: 40px;
  width: 40px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* ★3カラムのGrid（裁定 16-AS）。
   左（システム名）と右（予備）を同じ 1fr にすることで、
   中央のカラムが画面の中央に来る。
   右カラムを削ると機能名が右へずれるので、空でも残すこと。 */
.topbar {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 30;
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* ★ユーザメニューを右端へ寄せる（裁定 16-AU でヘッダーへ戻した） */
.topbar__right {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* .topbar__title {
  font-weight: 700;
  font-size: 15px;
} */

.topbar__titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.topbar__system {
  color: var(--brand);
  font-size: 15px;
  font-weight: 800;
  /* ★1行に収める。.topbar は高さ固定（--header-h）の Grid であり、
     折り返すと帯からはみ出して文字が切れる。
     ★スマホ（<768px）では表示しない（下の max-width: 767px を参照）。 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* =========================================================================
  スマホ（<768px）のヘッダー・フッター
  --------------------------------------------------------------------------
  ★本ファイルは基本 min-width で組んでいるが、ここだけ max-width を使う。
    .topbar / .footer の既定値は PC 想定（gap 14px・padding 16px・3等分Grid）で
    書かれており、モバイルファーストに書き直すと全画面の見た目に影響する。
    影響範囲を「狭い幅のときだけ」に閉じるほうが安全である。

  ★<b>.topbar に overflow: hidden を付けてはならない。</b>
    ユーザメニューのドロップダウン（.user-menu__dropdown）は
    .topbar__right の中で absolute 配置されており、帯の外へはみ出して開く。
    隠すとアカウント設定・ログアウトが出てこなくなる。
========================================================================= */
@media (max-width: 767px) {
  /* ★★入力欄の文字は 16px 以上にする（全画面）。
       iOS Safari は 16px 未満の入力欄にフォーカスすると画面を自動でズームし、
       そのまま戻らない（裁定 16-AY / 16-AZ）。以前は work-report.css の
       勤務時間の「時」「分」セレクトにしか当てておらず、同じ日次モーダルの
       勤務・休憩・備考、MS-01 / RP-01 の検索条件、MS-02 の全欄が 13px のままだった。
     ★高さは変えない（36px のまま）。行の高さまで変えると PC 用に組んだ
       見出し内の select（.select--sm）などが崩れる。 */
  .input,
  .select,
  .textarea {
    font-size: 16px;
  }

  /* ★システム名を出さない。
     375px 幅ではシステム名（15px・太字）が2行に折り返し、
     44px の帯から縦にはみ出して文字が切れていた。
     Grid も 1fr auto 1fr（3等分）だと中央の機能名に幅が回らないため、
     「ハンバーガー ｜ 機能名 ｜ アカウント」の3点に組み替える。
     ★システム名はサイドバー（.brand）とログイン画面の見出しに出ている。 */
  .topbar {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 0 10px;
  }

  .topbar__system {
    display: none;
  }

  /* ★操作ボタンのある画面では著作権表示を出さない。
     41px の帯に「© 2026 LUCENTSQUARE / Ver. x」とボタン2つは並ばず、
     著作権表示が語の途中で切れて壊れて見えていた。
     ボタンは押せることが必要な機能であり、著作権表示は無くても困らない。
     ★:has() で「ボタンがある画面」だけに限定する。
       ボタンの無い画面（一覧・トップ）とログイン画面では著作権表示を残す。
     ★.pc-only で包まれたボタン（RP-02）は .action-buttons の<b>孫</b>なので一致しない。
       あれはスマホではページ内にボタンを持つため、フッターは著作権表示のままでよい。
     ★★フッターのフラグメント（th:fragment="footerActions"）の根は th:block にすること。
       div で包むとボタンが孫になり、この規則に一致しない。BP-01（input.html）が
       以前 div だったため、スマホで著作権表示とボタンが並んで文字が切れていた。 */
  .footer:has(.action-buttons > .btn) .footer__meta {
    display: none;
  }

  /* ボタンを帯いっぱいに広げる（指で押す領域を確保する） */
  .footer:has(.action-buttons > .btn) .action-buttons {
    flex: 1;
    gap: 8px;
  }

  .footer:has(.action-buttons > .btn) .action-buttons > .btn {
    flex: 1;
    min-width: 0;
  }
}

/* ★中央の機能名。ヘッダーで一番目立たせる要素にする */
.topbar__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.topbar__crumb {
  display: none;
}

.topbar__spacer {
  flex: 1;
}

.topbar__user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.role-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--brand-050);
  color: var(--brand);
  font-weight: 600;
}

/* .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-050);
  color: var(--brand);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
} */

.avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.user-menu {
  position: relative;
}

.user-menu__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 2px;
}

.user-menu__caret {
  font-size: 10px;
  color: var(--ink-faint);
}

.user-menu__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 228px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
  padding: 6px;
  display: none;
  z-index: 50;
}

.user-menu__dropdown.is-open {
  display: block;
}

.user-menu__head {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}

.user-menu__head b {
  display: block;
  font-size: 13px;
}

.user-menu__head span {
  font-size: 11.5px;
  color: var(--ink-faint);
}

.user-menu__item {
  border-radius: 6px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-menu__sep {
  height: 1px;
  background: var(--line);
  margin: 6px 0;
}

/* ========================================
  ログイン画面
======================================== */
.login-wrap {
  display: grid;
  place-items: center;
  background: var(--login-bg);
  padding: 20px;
  margin: -16px -14px;
  /* ★100% は「.content の内容領域の高さ」に解決される。
     .app が calc(100dvh - var(--footer-h)) の固定高になったため、
     .content の高さは確定しており % が使える。
     ★以前は calc(100vh - var(--header-h)) だった。そのままだと
       フッターの高さ分だけ余り、青い背景の中に縦スクロールが出る。
     上下の margin -16px は .content の padding を打ち消す分であり、
     100%（= 高さ - padding 32px）＋ 32px でちょうど埋まる。 */
  min-height: 100%;
}

.login-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 400px;
  overflow: hidden;
}

.login-card__head {
  background: var(--brand);
  color: #fff;
  padding: 24px;
  text-align: center;
}

.login-card__head h1 {
  font-size: 17px;
  margin: 0;
}

.login-card__body {
  padding: 20px;
}

.login-card__link {
  margin-top: 14px;
  text-align: center;
}

.login-card__description {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 16px;
}

.login-card__note {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin: 0 0 16px;
}

.alert__ico {
  font-size: 18px;
  line-height: 1.4;
}

/* ========================================
  サイドバー
 ======================================== */
/* ★top はヘッダーの高さ分だけ下げる（Planner 裁定 16-N の N1）。
     .sidebar は z-index:40・不透明で .topbar（z-index:30）より前面に出るため、
     top:0 のままだとシステム名と画面名（#pageTitle）がサイドバーに隠れてしまう。
     16-N は「ヘッダーは全幅のまま残し、サイドバーをその下に置く」と定めている
     （.topbar には左マージンを付けない）。
     高さは top と bottom:0 の両方を指定した固定配置により
     「ビューポート高 − ヘッダー高」に自動で決まるため、height の指定は不要。 */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--brand);
  color: #dbe4ef;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--header-h);
  left: 0;
  bottom: 0;
  z-index: 40;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}

.sidebar__brand {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: #fff;
  color: var(--brand);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  flex: 0 0 auto;
}

.brand-text b {
  display: block;
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
}

.brand-text span {
  font-size: 11px;
  color: #a9bdd4;
}

.sidebar-toggle {
  display: none;
}

.nav {
  overflow-y: auto;
  padding: 10px 0;
  flex: 1;
}

.nav__group {
  padding: 12px 20px 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #8ba3bf;
  font-weight: 700;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  color: #cdd9e8;
  font-size: 13.5px;
  border-left: 3px solid transparent;
}

.nav__item.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-left-color: #79b6ff;
  font-weight: 600;
}

.nav__ico {
  width: 18px;
  text-align: center;
  opacity: 0.9;
  font-size: 20px;
}

.nav__num {
  margin-left: auto;
  font-size: 11px;
  color: #8ba3bf;
}

/* ========================================
  サイドバー開閉
 ======================================== */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 25, 40, 0.45);
  z-index: 35;
}

body.nav-open .sidebar {
  transform: translateX(0);
}

body.nav-open .overlay {
  display: block;
}

/* ========================================
  ページ上部
======================================== */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.page-head h1 {
  font-size: 20px;
  margin: 0 0 3px;
}

.page-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ========================================
  トップページ情報
======================================== */
/* ★枠を低くしている（裁定 16-AU）。営業のトップは統計が8枚並ぶため、
   1枚あたりの高さが効く。padding と文字サイズを詰めた。 */
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 14px;
  box-shadow: var(--shadow);
}

.stat__label {
  font-size: 11.5px;
  color: var(--ink-soft);
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.stat__value {
  font-size: 18px;
  font-weight: 800;
  margin-top: 2px;
  letter-spacing: 0.01em;
}

.stat__value small {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.stat__sub {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 2px;
}

.stat__bar {
  height: 3px;
  border-radius: 3px;
  background: var(--brand);
  margin-top: 7px;
}

.report-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ★最大高を広げた（裁定 16-AU）。250px では3〜4行しか見えず、
   承認待ち・未提出の一覧が実質使えなかった。 */
.table-scroll {
  max-height: 420px;
  overflow: auto;
}

.table-scroll table {
  min-width: 500px;
}

/* ========================================
  カード
======================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

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

.card__head {
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/*
  カードの見出しに置く操作（絞り込みの選択欄など）。

  ★見出しは flex で「タイトル ‥ 右端」に並ぶ。バッジの右へ続けて置く。
*/
.card__head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* 見出しに収める小さい選択欄（本文の入力欄より1段低い） */
.select--sm {
  width: auto;
  min-width: 160px;
  height: 30px;
  padding: 3px 8px;
}

/*
  画面には出さず支援技術にだけ読ませるラベル。

  ★display:none や visibility:hidden にしてはならない。
    どちらも支援技術からも消えるため、ラベルが無いのと同じになる。
*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.card__head_btn {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card__body {
  padding: 12px;
}

.card__body.tight {
  padding: 0;
}

.card__footer {
  padding: 12px;
}

/* ========================================
  テーブル
======================================== */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead th {
  text-align: left;
  background: #f2f6fa !important;
  color: var(--ink-soft);
  font-weight: 700;
  padding: 2px 4px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  font-size: 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

tbody td {
  padding: 4px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

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

td.num,
th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* ========================================
  検索画面
======================================== */
#screen-inquiry.is-active,
#screen-user-list.is-active {
  display: flex;
  flex-direction: column;
  /* ★器（.content）の高さぴったりにする。
     以前は calc(100vh - var(--header-h) - 32px) だったが、
     .content 自体が固定高になったため、ここで実寸を計算する必要はない。
     計算式のままだとフッターの高さ分だけ高すぎて、
     表の下端がフッターに潜る。 */
  height: 100%;
}

#screen-inquiry .card:last-child,
#screen-user-list .card:last-child {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#screen-inquiry .search-table-scroll,
#screen-user-list.search-table-scroll {
  flex: 1;
  overflow: auto;
}

.search-table-scroll {
  /* ★フッターの高さも差し引く（ヘッダー・フッター常時表示のため） */
  max-height: calc(100dvh - var(--footer-h) - 560px);
  overflow: auto;
}

.search-table-scroll table {
  min-width: 850px;
}

.user-list table {
  min-width: 1000px;
}

.search-table-scroll th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

.result-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.result-card .search-table-scroll {
  flex: 1;
  overflow: auto;
  max-height: none;
}

.result-card .pagination {
  flex-shrink: 0;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}

.pager {
  display: flex;
  gap: 4px;
}

.pager button {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 5px;
  min-width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 12.5px;
}

.pager button.is-active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.work-time-col {
  width: 15%;
}

/* =========================================================
 * 検索条件
 * ========================================================= */
.search-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.search-toggle h2 {
  margin: 0;
}

/* 検索条件の折りたたみ（画面イメージの .search-toggle-btn に対応）。
   ★MS-01 と RP-01 の2画面で使う共通の挙動であるため、P5 で user.css から移した
   （開閉の JavaScript も common.js へ移している）。 */
.search-area.is-collapsed {
  display: none;
}

/* -------------------------------------------------------------------------
  検索条件の開閉ボタン（Planner 裁定 16-AU / 16-AW）

  ★テキストリンク（.btn--text「▲ 閉じる」）から丸いアイコンボタンへ変更した。
    ボタンに見えないという指摘への対応である。
  ★開閉の状態は山形アイコンの向き（下の rotate）で示す。
    ★aria-expanded を必ず持たせること。アイコンの向きだけでは支援技術に
      状態が伝わらない。属性の切り替えは js/common.js の toggleSearchArea が行う。
  ★<b>common.css に置く</b>（16-AW）。MS-01・RP-01 の2画面で使う共通部品であり、
    画面別CSSに置くと片方だけ古い見た目のまま残る（実際に RP-01 だけ適用されていた）。
------------------------------------------------------------------------- */
/* =========================================================================
  パスワードの表示／非表示（CM-01 / CM-04 / CM-07 / MS-02）
  --------------------------------------------------------------------------
  ★★<b>common.css に置く</b>（Planner 裁定 16-AW）。当初は MS-02 専用として
    user.css にあったが、パスワードを入力する画面すべてで使う部品になった。
    画面別CSSに残すと、その CSS を読まない画面ではボタンが素のまま欄の外に出る。

  ★<b>hidden のときに消えるよう明示する。</b>ボタンは JavaScript が
    有効になって初めて意味を持つため、テンプレートでは hidden を付けて出し、
    js/common.js が外す。.password-toggle-btn の display:flex は
    ブラウザ既定の [hidden]{display:none} より強いため、
    この指定が無いと<b>押しても何も起きないボタンが残る</b>。
========================================================================= */
.password-field {
  position: relative;
}

.password-field .input {
  width: 100%;
  /* アイコン（22px）＋左右の余白。文字がボタンの下に潜らないようにする */
  padding-right: 44px;
}

.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-weak);
  cursor: pointer;
}

.password-toggle-btn[hidden] {
  display: none;
}

.password-toggle-btn:hover {
  color: var(--ink-sub);
}

.password-toggle-btn .material-symbols-outlined {
  font-size: 22px;
}

.search-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-sub);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.search-toggle-btn:hover {
  background: var(--brand-050);
  color: var(--brand);
}

.search-toggle-btn .material-symbols-outlined {
  font-size: 20px;
  transition: transform 0.2s ease;
}

.search-toggle-btn[aria-expanded="false"] .material-symbols-outlined {
  transform: rotate(180deg);
}

/* 一覧が 0 件のときの行（CLAUDE.md「4.2」の「データがありません」）。
   ★画面イメージには 0 件時の表示が無いため新設したクラスである
     （docs/coding-standards.md「画面イメージに存在しないクラス」に記録）。
     MS-01 / RP-01 / RP-02 が使うため、P5 で user.css から移した。 */
.table-empty {
  text-align: center;
  color: var(--ink-weak);
  padding: 24px 8px;
}

/* ページング行の中のフォーム（検索条件を hidden で持ち回す GET フォーム）。
   .pagination が justify-content: space-between を持つため、余白だけ打ち消す。 */
.pagination form {
  margin: 0;
}

/* ========================================
  業務報告入力
======================================== */
.textarea-meta {
  display: flex;
  justify-content: flex-end;
  color: var(--ink-faint);
  font-size: 11.5px;
}

/* ========================================
  一覧のカード型表示（スマホ <768px。CLAUDE.md「4.3」）

  ★全画面共通の部品である（P4 で共通化した）。
    CLAUDE.md 4.3 は「スマホでは一覧をカード型（.day-item 形式）＋詳細は遷移」と定める。
    BP-01 / BP-02 の作業時間一覧と MS-01 のユーザ一覧が同じクラスを使う。
    .day-item__head / .day-item__icon は画面イメージ由来（クラス名は変えない。裁定 16-L）。
    .day-list は画面イメージがインラインスタイル（style="padding:10px 18px"）で
    書いていた入れ物をクラスへ起こしたもの。インラインスタイルは CSP（style-src）と
    相性が悪く、共通化もできない。
    ★画面イメージ由来のクラス（.day-item / .day-item__body）に新しい見た目を足さないこと。

  ★画面固有の状態表現（BP-01 の未入力・不備など）は {画面}.css に置くこと。
======================================== */
.day-list {
  padding: 10px 18px;
}

.day-list hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 8px 0;
}

.day-item__head {
  display: flex;
  align-items: center;
  gap: 4px;
}

.day-item__icon {
  font-size: 18px;
  color: #666;
  line-height: 1;
}

/* 一覧が0件のときのカード型表示（テーブルの「データがありません」と文言をそろえる） */
.day-list__empty {
  padding: 12px 0;
  color: var(--ink-sub);
  text-align: center;
}

/* ========================================
  確認画面
======================================== */

.report-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.report-side {
  margin-top: 0px;
  margin-bottom: 24px;
}

/* 編集時は右側非表示 */
.report-layout.edit .report-side {
  display: none;
}

.confirm-work-report {
  min-height: 125px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.confirm-work-content {
  min-height: 125px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  white-space: pre-line;
}

/* ========================================
  お知らせ
======================================== */
.timeline {
  position: relative;
  padding-left: 22px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--line);
}

.tl-item {
  position: relative;
  padding: 0 0 8px;
}

.tl-item::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand);
}

.tl-item.is-reject::before {
  border-color: var(--danger);
}

.tl-item:last-child {
  padding-bottom: 0;
}

.tl-time {
  font-size: 11.5px;
  color: var(--ink-faint);
}

.tl-title {
  font-weight: 600;
  font-size: 13px;
  margin: 1px 0;
}

.tl-desc {
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* ========================================
  アカウント設定、月次サマリ
======================================== */
.profile-info dl,
.summary-info dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 16px;
  margin: 0;
}

.profile-info dt,
.profile-info dd,
.summary-info dt,
.summary-info dd {
  margin: 0;
}

.profile-info dt,
.summary-info dt {
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

.profile-info dd,
.summary-info dd {
  word-break: break-word;
}

/* ========================================
  フッター
======================================== */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* ★サイドバーの開閉に追従させる */
  transition: left 0.25s ease;

  padding: 4px 16px;
  /* ★高さを固定する。.app の高さがこの値を差し引いて決まるため、
     実際の高さがこれとずれると .content の下端がフッターに潜る。
     ボタンが無い画面でも高さを揃える意図もある（画面間で床が動かない）。 */
  min-height: var(--footer-h);
  align-items: center;

  background: var(--footer);
  border-top: 1px solid #c7d8ee;

  display: flex;
  justify-content: flex-end;
  z-index: 100;
}

/* ========================================
  モーダル
======================================== */
.modal {
  display: none; /* 最初は非表示 */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;

  justify-content: center;
  align-items: center;
}

.modal.show {
  display: flex;
}

.modal-content {
  background: #fff;
  width: 95%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  border-radius: 8px;
  padding: 20px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-body {
  overflow-y: auto;
}

.modal-body textarea {
  width: 100%;
  resize: vertical;
}

#workContentModal textarea {
  min-height: 150px;
}

#returnModal textarea {
  min-height: 100px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* ========================================
  カレンダー
======================================== */
.mobile-only .sun {
  color: #d32f2f;
}

.mobile-only .sat {
  color: #1976d2;
}

/* ========================================
  承認経路
  ======================================== */
.approval-route-field {
  width: 100%;
  min-width: 0;
}

.approval-route {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.approval-step {
  position: relative;
  min-width: 0;
}

.approval-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -13px;
  transform: translateY(-50%);
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 800;
}

/* ★段数の文字（「第1承認者」）を出さなくなったため1行で足りる（裁定 16-BB）。
   以前は 52px（2行分）だった。BP-01 のヘッダー行もその分低くなる。 */
.approval-person {
  min-height: 34px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1px;
  padding: 6px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-soft);
  overflow: hidden;
}

.approval-person__name {
  overflow: hidden;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-person__state {
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.approval-person.is-approved {
  border-color: #a7d7bb;
  background: var(--ok-bg);
}

.approval-person.is-approved .approval-person__state {
  color: var(--ok);
}

.approval-person.is-returned {
  border-color: #efb9b3;
  background: var(--danger-bg);
}

.approval-person.is-returned .approval-person__state {
  color: var(--danger);
}

/* ========================================
  サマリ
======================================== */
.summary-info dl {
  grid-template-columns:
    auto 1fr
    auto 1fr;
}

.toolbar {
  padding: 10px 18px;
}

/* 360px〜（スマホ標準） */
@media (min-width: 360px) {
}

/* 768px〜（タブレット） */
@media (min-width: 768px) {
  /* ★--sidebar-w の上書き（画面イメージは 200px）は行わない。
       サイドバー幅はデザインポリシーの 224px 固定（裁定 16-L）。 */
  /* ========================================
    全体レイアウト
  ======================================== */
  /* ★★幅は必ず 100% で持つ。左右 margin を auto にしてはならない。
       .app は flex-direction: column であり、交差軸（横）の margin が auto だと
       align-items: stretch が打ち消されて .main は「中身の幅」になる
       （docs/coding-standards.md「9.6」でログイン画面について一度直した型と同じ）。
       中身が広い画面（BP-01 の作業時間・MS-01 / RP-01 の一覧）では
       .main がビューポートより広く育ち、.app の overflow: hidden で右側が切り落とされる。
       横スクロールする手段が無いため、タブレット（768〜約1030px）では
       MS-01 の行アクション・RP-01 の「確認」「選択をPDF出力」・BP-01 の備考列が
       押せない／読めない状態だった。逆に中身が狭い画面（トップ・アカウント設定）は
       中央に縮んで左右に余白が出ていた。
     ★max-width の上限は設けていない（従来から無い。docs/coding-standards.md「4.7」#2 は保留のまま）。 */
  .main {
    width: 100%;
    margin: 0;
  }

  /* ★一覧系画面（MS-01 / RP-01）だけ最大幅を外す。大画面でテーブルの列を広く使うため。
     フォーム系は読みやすさを優先し 1200px の上限を維持する（docs/coding-standards.md「23」）。 */
  .main.main--wide {
    max-width: none;
  }

  /* .content {
    padding: 20px 22px;
  } */

  /* ========================================
    画面表示
  ======================================== */

  .pc-only {
    display: block;
  }

  .mobile-only {
    display: none;
  }

  /* ========================================
    レイアウト（12カラム Grid）
  ======================================== */
  .col-md-1 {
    grid-column: span 1;
  }
  .col-md-2 {
    grid-column: span 2;
  }
  .col-md-3 {
    grid-column: span 3;
  }
  .col-md-4 {
    grid-column: span 4;
  }
  .col-md-5 {
    grid-column: span 5;
  }
  .col-md-6 {
    grid-column: span 6;
  }
  .col-md-7 {
    grid-column: span 7;
  }
  .col-md-8 {
    grid-column: span 8;
  }
  .col-md-9 {
    grid-column: span 9;
  }
  .col-md-10 {
    grid-column: span 10;
  }
  .col-md-11 {
    grid-column: span 11;
  }
  .col-md-12 {
    grid-column: span 12;
  }

  /* ========================================
    ヘッダー
  ======================================== */
  .topbar__crumb {
    color: var(--ink-faint);
    font-size: 12px;
  }

  /* ========================================
    トップ
  ======================================== */
  .stat__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

  .stat__right {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }

  .stat__sub {
    margin-top: 0;
  }

  /* ========================================
    アカウント設定
  ======================================== */
  .profile-info dl {
    grid-template-columns:
      auto 1fr
      auto 1fr;
  }

  .summary-info dl {
    grid-template-columns: auto 1fr;
  }

  /* ========================================
    入力フォーム
  ======================================== */
  .work-table .date-col {
    width: 10%;
  }

  .work-table .week-col {
    width: 10%;
  }

  .work-table .type-col {
    width: 10%;
  }

  .work-table .start-col,
  .work-table .end-col {
    width: 10%;
  }

  .work-table .break-col {
    width: 10%;
  }

  .work-table .actual-col {
    width: 10%;
  }

  .work-table .remark-col {
    width: 40%;
  }

  /* ========================================
    入力用カレンダー
  ======================================== */
  .calendar {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .calendar th,
  .calendar td {
    border: 1px solid var(--line);
    vertical-align: top;
  }

  .calendar th {
    background: var(--brand-050);
    text-align: center;
    padding: 8px;
  }

  .calendar td {
    padding: 6px;
    height: 80px;
  }

  .calendar .date {
    font-weight: bold;
  }

  .calendar th.sun,
  .calendar .sun .date {
    color: #d32f2f;
  }

  .calendar th.sat,
  .calendar .sat .date {
    color: #1976d2;
  }

  .calendar td.sun {
    background: #fff7f7;
  }

  .calendar td.sat {
    background: #f7faff;
  }

  /* ========================================
    業務報告画面、詳細画面
  ======================================== */
  .sun {
    color: #d32f2f;
  }

  .sat {
    color: #1976d2;
  }

  .confirm-layout {
    align-items: flex-start;
  }

  /* 左側 */
  .work-card {
    display: flex;
    flex-direction: column;
  }

  /* 共通 */
  .work-table-scroll {
    overflow-x: auto;
  }

  /* 確認画面のみ縦スクロール */
  .report-layout.confirm .work-table-scroll {
    overflow-y: auto;
    /* ★フッターの高さも差し引く */
    max-height: calc(100dvh - var(--footer-h) - 300px);
  }

  /* 入力画面は縦スクロールなし */
  .report-layout.edit .work-table-scroll {
    overflow-y: visible;
    max-height: none;
  }

  .work-table-scroll thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
  }

  /* ★以下の sticky のオフセットは 0 を基準にする。
     スクロールする器が「ページ全体」から .content の内側に変わったため
     （common.css 冒頭の .app / .content を参照）、
     .content の上端はすでにヘッダーの下にある。
     ここで var(--header-h) を足すと、ヘッダーの高さ分だけ
     下にずれた位置で貼り付いてしまう。 */

  /* 詳細画面 */
  /* 右側固定 */
  .confirm-sidebar {
    position: sticky;
    top: 16px;
    align-self: flex-start;
  }

  .table-header-wrapper {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    overflow: hidden;
  }

  .table-body-wrapper {
    overflow-x: auto;
  }

  .work-table {
    min-width: 800px;
    width: max-content;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
  }

  .report-head {
    position: sticky;
    top: 0; /* ★.content が器。ヘッダー分の加算は不要（上の注記を参照） */
    z-index: 20;
    background: #fff;
  }

  .report-side {
    margin-bottom: 0px;
  }

  /* ========================================
    モーダル
  ======================================== */
  /* ★min-height は入力フォームを持つモーダル（.work-record）だけに与える。
     全モーダルに掛けると、1行しか中身の無い確認ダイアログ（#confirmModal）まで
     画面高の 30〜40% に引き伸ばされ、文言とボタンの間に大きな空白ができる。 */
  .modal-content {
    height: auto;
    max-width: 500px;
  }

  .work-record .modal-content {
    min-height: 30vh;
  }

  .work-record .modal-body textarea {
    min-height: 20px;
    resize: vertical;
  }

  #workRecordBulkModal .modal-content {
    min-height: 20vh;
  }

  /* ========================================
    フッダー
  ======================================== */
  /* ★left: var(--sidebar-w) は PC（>=1024）のブロックへ移した。
       タブレット幅ではサイドバーがドロワーで常時非表示のため、
       左に余白だけが残ってしまうのを避ける。 */
  /* ★padding は上下 4px。--footer-h（41px = 4px×2 ＋ ボタン32px ＋ border 1px）と
     必ず一致させること。12px のままだと実際の高さが 57px になり、
     .app が 100dvh - 41px で確保した領域と 16px ずれて
     <b>本文の下端がフッターの裏に隠れる</b>（実測で確認済み）。 */
  .footer {
    left: 0;
    right: 0;
    padding: 4px 26px;
  }

  /* ========================================
    承認経路
  ======================================== */
  .approver-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .approver {
    display: block;
  }

  .approver__title {
    margin-bottom: 6px;
    font-size: 11.5px;
  }

  .approver__name {
    margin-bottom: 8px;
    font-size: 13px;
  }

  /* ========================================
    検索画面
  ======================================== */
  .work-time-col {
    width: 10%;
  }
}

/* 1024px〜（PC）
   ★ブレークポイントはデザインポリシー（768px / 1024px）が正（裁定 16-L）。
     画面イメージの 1025px から 1024px に合わせている。 */
@media (min-width: 1024px) {
  /* ========================================
    全体レイアウト（3ペイン）
    ★ポリシー「PC >=1024 はサイドバー展開の3ペイン」（CLAUDE.md 4.2 / 4.3）。
      画面イメージは PC でもドロワー（translateX(-100%)）だが、
      画面イメージ自身の .footer { left: var(--sidebar-w) } は
      サイドバー常時表示を前提に書かれており、.main に左マージンが無いのは
      モックの作り込み不足と判断された（裁定 16-L）。
  ======================================== */
  .sidebar {
    transform: translateX(0);
  }

  /* ★width は margin-left の分だけ減らす。100% のままだとサイドバー幅だけ右へはみ出す */
  .main {
    width: calc(100% - var(--sidebar-w));
    margin-left: var(--sidebar-w);
    margin-right: 0;
  }

  .footer {
    left: var(--sidebar-w);
  }

  /* -----------------------------------------------------------------
    サイドバーを持たない画面（layout/layout-plain.html。エラー画面など）
    ★Planner 裁定 16-N の N2。
      .app--plain は「サイドバーが無い」状態を表す修飾子である。
      これが無いと、サイドバーを描画しない画面にも上の3ペイン用の指定が効き、
      左に 224px の空白カラムとフッターの切り欠きが出る。
    ★.footer は .app の兄弟要素として出力される（layout.html / layout-plain.html
      とも <div class="app"> の外に置いている）ため、一般兄弟結合子で打ち消す。
    ★幅は 100%・margin は 0 に戻す（768px 以上の .main と同じ）。
      margin を auto にすると縦積み flex の stretch が打ち消され、中身の幅に縮む。
  ----------------------------------------------------------------- */
  .app--plain .main {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .app--plain ~ .footer {
    left: 0;
  }

  /* -----------------------------------------------------------------
    サイドバーの折りたたみ（Planner 裁定 16-AQ）

    ★PC でもサイドバーを閉じられるようにする。
      管理者以外は初期表示を閉じた状態にしており、その状態は
      body.nav-collapsed（layout.html がロールを見て付与）で表す。
      利用者が開閉したら localStorage に残す（js/common.js）。

    ★ハンバーガーは PC でも表示する。以前はここで display:none にしていたが、
      それでは閉じたサイドバーを開く手段が無くなる。
  ----------------------------------------------------------------- */
  body.nav-collapsed .sidebar {
    transform: translateX(-100%);
  }

  body.nav-collapsed .main {
    width: 100%;
    margin-left: 0;
  }

  body.nav-collapsed .footer {
    left: 0;
  }

  body.nav-open .overlay {
    display: none;
  }

  /* ========================================
    画面表示
  ======================================== */

  .pc-only {
    display: block;
  }

  .mobile-only {
    display: none;
  }

  /* ========================================
    レイアウト（12カラム Grid）
  ======================================== */
  .col-lg-1 {
    grid-column: span 1;
  }
  .col-lg-2 {
    grid-column: span 2;
  }
  .col-lg-3 {
    grid-column: span 3;
  }
  .col-lg-4 {
    grid-column: span 4;
  }
  .col-lg-5 {
    grid-column: span 5;
  }
  .col-lg-6 {
    grid-column: span 6;
  }
  .col-lg-7 {
    grid-column: span 7;
  }
  .col-lg-8 {
    grid-column: span 8;
  }
  .col-lg-9 {
    grid-column: span 9;
  }
  .col-lg-10 {
    grid-column: span 10;
  }
  .col-lg-11 {
    grid-column: span 11;
  }
  .col-lg-12 {
    grid-column: span 12;
  }

  .stat__value {
    font-size: 24px;
  }

  /* ========================================
    アカウント設定、月次サマリ
  ======================================== */
  .profile-info dl {
    grid-template-columns:
      auto 1fr
      auto 1fr
      auto 1fr;
  }
  .summary-info dl {
    grid-template-columns:
      auto 1fr
      auto 1fr;
  }

  /*案1*/
  .report-layout {
    display: grid;
    gap: 16px;
  }

  .report-layout.edit {
    grid-template-columns: 1fr;
  }

  .report-layout.confirm {
    grid-template-columns: 2fr 1fr;
  }

  /* PCでは右側を通常位置へ戻す */
  .report-side {
    order: initial;
  }

  /* 確認時だけ表示 */
  /* .report-layout.confirm .report-side {
    display: block;
  } */

  .report-side {
    display: flex;
    flex-direction: column;
  }

  #confirmActionArea {
    margin-top: auto;
  }

  /* ========================================
    モーダル
  ======================================== */
  /* ★min-height は .work-record だけ（上の 768px ブロックと同じ理由）。 */
  .modal-content {
    height: auto;
    max-width: 420px;
  }

  .work-record .modal-content {
    max-width: 600px;
  }

  .modal-body {
    flex: unset;
  }

  .modal-body textarea {
    height: 50px;
  }

  .work-table {
    min-width: 100%;
  }

  #workRecordBulkModal .modal-content {
    min-height: 30vh;
  }
}

/* ========================================
  ホバー
======================================== */
@media (hover: hover) and (pointer: fine) {
  .btn,
  .user-menu__item,
  .user-menu__btn,
  .nav__item,
  .hamburger,
  .sidebar-toggle,
  .stat {
    cursor: pointer;
  }

  .btn:hover {
    background: #f7f9fc;
  }

  .btn--primary:hover {
    background: var(--brand-600);
  }

  .btn--danger:hover {
    background: var(--danger-bg);
  }

  .user-menu__item:hover {
    background: var(--brand-050);
  }

  .btn--unlock:not(:disabled):hover {
    background: var(--brand-600);
  }

  .nav__item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
  }

  .calendar td:hover {
    background: var(--footer);
  }
}

/* =========================================================================
  P0 共通レイアウト追加分

  ★ここから下は docs/画面イメージ/style.css には無い、共通レイアウト
    （templates/layout/layout.html・templates/fragments/*.html）のための追記である。
    既存クラスの宣言は上書きせず、新しいクラス／より詳細なセレクタだけを使う。
========================================================================= */

/* -------------------------------------------------------------------------
  下部固定フッター
  画面イメージの .footer（操作ボタンを右寄せする固定バー）をそのまま使い、
  左側に著作権・バージョンを置くための要素だけを足す。
  .footer 自体の justify-content: flex-end は変更しない。
    → .footer__meta に margin-right:auto を与えることで
      「左＝著作権＋バージョン／右＝主要操作ボタン領域」になる。

  ★右側の操作ボタン領域は画面イメージと同じ .action-buttons を使う
    （画面イメージの .footer 直下も .action-buttons である）。
    同じ役割の修飾子クラスを新設しないこと（既存クラスで代替できるため）。
  ★.footer__meta は画面イメージに対応する要素が無いため新設である。
    docs/coding-standards.md「4.7」に乖離として記録している。
------------------------------------------------------------------------- */
.footer__meta {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--space) * 2);
  font-size: 11.5px;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -------------------------------------------------------------------------
  フッター内の PC 専用ボタン群（Planner 裁定 16-AP）

  BP-01 / RP-02 は「PCはフッター・スマホはページ内」で主要操作を出し分けるため、
  フッター側のボタンを .pc-only で包んでいる。

  ★.pc-only は 768px 以上で display: block になる（common.css の 768px ブロック）。
    そのままだとボタンが縦横の flex 整列を失い、gap も効かない。
    .footer の中だけ flex に上書きする（2クラスのため .pc-only より優先される）。
------------------------------------------------------------------------- */
.footer .pc-only {
  display: none;
}

@media (min-width: 768px) {
  .footer .pc-only {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }
}

/* ★固定フッターを避けるための padding-bottom: 72px は不要になった。
   .app の高さが calc(100dvh - var(--footer-h)) になり、
   .content の下端がフッターの上端で止まるため、そもそも重ならない。
   逃げの余白を残すと、スクロールしきったときに空白が見えてしまう。 */

/* -------------------------------------------------------------------------
  通知エリア（fragments/messages.html。CLAUDE.md「4.4」）
  成功=緑 / エラー=赤 / 情報=青 は画面イメージの .alert--ok / --danger / --info
  をそのまま使う。ここでは「1つだけ置く入れ物」と「不要時は高さ0」を定義する。
------------------------------------------------------------------------- */
.messages {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) * 2);
}

/* 通知の下側の余白は最後の通知に持たせる。
   ★.messages 自体に margin を付けたり :empty で消したりしない。
     テンプレートの改行が空白テキストとして残るため :empty は一致しない。
     display:flex の子が空白だけのときは行ボックスが作られないので、
     通知が1件も無ければ .messages の高さは 0 になる。 */
.messages > .alert:last-child {
  margin-bottom: 16px;
}

/* 成功通知の自動フェードアウト（js/common.js が is-fading を付与する） */
.messages .alert.is-fading {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* -------------------------------------------------------------------------
  入力欄直下のエラー（fragments/field-error.html。CLAUDE.md「4.4」）
  画面イメージには一覧表示（.validation-errors）と赤枠（.is-error）はあるが、
  項目直下の赤文字が無いため新設する。
------------------------------------------------------------------------- */
.field-error {
  margin: var(--space) 0 0;
  font-size: 11.5px;
  color: var(--danger);
}

/* 画面イメージの .is-error は #screen-user-edit 配下限定のため、全画面共通の指定を足す */
.input.is-error,
.select.is-error,
.textarea.is-error {
  border-color: var(--danger);
  background: #fffafa;
}

/* -------------------------------------------------------------------------
  エラー画面（templates/error/*.html）
  P1 で各テンプレートにインライン記述していたスタイルをここへ集約した。
------------------------------------------------------------------------- */
.error-page {
  max-width: 640px;
  margin: 0 auto;
}

.error-page__code {
  margin: 0;
  color: var(--danger);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
}

.error-page__title {
  margin: 8px 0 16px;
  font-size: 20px;
}

.error-page__text {
  margin: 0 0 8px;
  color: var(--ink-soft);
}

.error-page__actions {
  margin-top: 24px;
}

/* -------------------------------------------------------------------------
  ユーザメニュー・サイドバーを a / button 要素で組むための補正
  画面イメージはモックのため div ＋ onclick で作られているが、実装では
  リンクは a、ログアウトのような更新操作は button（POST）にする必要がある
  （CLAUDE.md「3」: ログアウトは GET リンク不可）。
  既存クラスの宣言は変えず、要素の既定スタイルを打ち消す指定だけを足す。
------------------------------------------------------------------------- */
a.user-menu__item,
a.nav__item {
  color: inherit;
  text-decoration: none;
}

a.nav__item {
  color: #cdd9e8;
}

a.nav__item.is-active {
  color: #fff;
}

button.user-menu__item {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}


/* -------------------------------------------------------------------------
  フッターのボタンを低くする（Planner 裁定 16-AU）

  ★--btn-h（36px）より低い 32px にしている。フッターは常時表示であり、
    本文の縦幅を優先した。--footer-h（41px）はこの高さを前提に計算している。
    ★どちらかを変えるときは必ず両方直すこと。
------------------------------------------------------------------------- */
.footer .btn {
  height: 32px;
}

/* -------------------------------------------------------------------------
  サイドバー最下部のアカウント設定（Planner 裁定 16-AV）

  ★.nav が flex:1 で伸びるため、この要素は常に最下部に来る。
  ★区切り線でメニュー本体と分ける（業務メニューと同列に見えないようにする）。
  ★ログアウトはここに置かない（ヘッダーのユーザメニューのみ）。理由は menu.html を参照。
------------------------------------------------------------------------- */
.sidebar__account {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 6px 0;
  flex: 0 0 auto;
}

/* =========================================================================
  表の寄せ（Planner 裁定 16-BB）
  --------------------------------------------------------------------------
  【ポリシー】CLAUDE.md「4.2」
    ・文字列                    → 左寄せ（既定。thead th / tbody td とも left）
    ・数値（件数・時間・日数）   → 右寄せ（.num。桁を揃えるため tabular-nums も付ける）
    ・短い固定幅の値            → 中央寄せ（見やすさ優先）
        日・曜日・時刻・状態バッジ・操作ボタン
    ★<b>見出し（th）とデータ（td）は必ず同じ寄せにする。</b>
      片方だけ変えると列がずれて読みにくくなる。
      そのためセレクタは常に「th と td の両方」に当てること。
========================================================================= */

/* 中央寄せの指定（見出し・データの両方に付ける） */
th.ta-c,
td.ta-c {
  text-align: center;
}

/* ★操作列（ボタン）は中央に寄せる。
   以前は flex-end（右）だったが、幅を固定した列では中央のほうが収まりが良い。
   MS-01 / RP-01 / トップの一覧で共通に使う。 */
.row-actions {
  justify-content: center;
}

/* -------------------------------------------------------------------------
  作業時間の表（.work-table。BP-01 / BP-02 / RP-02）

  ★列の構成が固定（8列・条件による増減が無い）なので :nth-child で指定する。
    こうすると<b>見出しとデータに同じ寄せが自動で当たる</b>ため、
    テンプレート4ファイルへクラスを撒く必要が無い（付け忘れも起きない）。
    ★列を増やす・順序を変えるときはここも直すこと。

      1 日付      中央（1〜31 の短い値。カレンダー的に読む）
      2 曜日      中央
      3 勤務      左  （区分名の文字列）
      4 出勤      中央（時刻。時・分のセレクトも中央）
      5 退勤      中央
      6 休憩(分)  右  （数値）
      7 実働(時間) 右  （数値）
      8 備考      左
------------------------------------------------------------------------- */
.work-table th:nth-child(1),
.work-table td:nth-child(1),
.work-table th:nth-child(2),
.work-table td:nth-child(2),
.work-table th:nth-child(4),
.work-table td:nth-child(4),
.work-table th:nth-child(5),
.work-table td:nth-child(5) {
  text-align: center;
}

.work-table th:nth-child(6),
.work-table td:nth-child(6),
.work-table th:nth-child(7),
.work-table td:nth-child(7) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ★数値の入力欄も右寄せにする（休憩（分））。
   表示だけ右で入力が左だと、保存前後で見た目が変わる。 */
.work-table td:nth-child(6) .input {
  text-align: right;
}

/* -------------------------------------------------------------------------
  ドロワー表示のサイドバー高さ（スマホ・タブレット）
  ★固定フッターと重ならないように、サイドバーの下端をフッターの高さ分だけ上げる。
    サイドバー最下部の「パスワード変更」がフッターに隠れないようにする。
  ★★適用幅は 1023px まで。サイドバーは 1024px 未満ではドロワーであり（裁定 16-AQ）、
    フッターは全幅（left: 0）かつ z-index が上（100 > 40）なので、
    タブレット（768〜1023px）でも同じ重なりが起きる。767px までに限定すると
    タブレットだけ「パスワード変更」が隠れたまま残る（実測で確認済み）。
    1024px 以上はフッターがサイドバー幅ぶん右に寄る（left: var(--sidebar-w)）ため
    重ならず、下端を上げると左下に空白ができる。
------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .sidebar {
    bottom: var(--footer-h);
  }
}