:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --border: #dde1e6;
  --text: #1f2430;
  /* うすい字。WCAG AA（文字のコントラスト比 4.5:1）を、紙の色（#f5f6f8）や青い行（#e2edff）の上でも満たす濃さ。
     2026-09-24 に #6b7280 から少しだけ濃くした（axe-core の検査、合格条件 G6）。 */
  --muted: #626976;
  /* 表の罫線は、うすい字を濃くする前の色から作る（罫線の見た目は変えない） */
  --muted-line-base: #6b7280;
  /* --primary は「設定 > 配色」で選んだ色に差し替わる。20色すべてパステル調なので、
     文字・罫線は濃いめの派生色、塗りは薄めの派生色を color-mix() で自動的に作る。 */
  --primary: #a8c8ec;
  --primary-dark: color-mix(in srgb, var(--primary) 86%, black);
  /* 白いボタン・選択中のメニューで、20配色すべて文字コントラスト 4.5:1 以上にする（合流 段2-5。元のコミット d6f1831）。 */
  --accent-strong: color-mix(in srgb, var(--primary) 46%, black);
  --accent-soft: color-mix(in srgb, var(--primary) 30%, white);
  --accent-band: color-mix(in srgb, var(--primary) 55%, white);
  --accent-mid: color-mix(in srgb, var(--primary) 75%, white);
  --accent-line: var(--primary);
  /* パステル地の上に載せる文字は黒系にする */
  --on-primary: #1f2430;
  /* 損益表の列幅（区画ごとの表すべてで共通）。他の表と同じ19pxの文字が収まる幅にする。 */
  --pl-label-w: 250px;
  --pl-col-w: 140px;
  /* 「一致」「選択中」などの緑と、注意の赤。どちらも白・紙の色・管理画面の地（#eef0f4）・薄い赤の地の上で
     4.5:1 を満たす濃さにした（2026-09-24、緑 #16a34a → #137a3a、赤 #dc2626 → #cc2222）。 */
  --ok: #137a3a;
  --ok-bg: #ecfdf3;
  --warn: #cc2222;
  --warn-bg: #fef2f2;
  font-size: 15px;
}

* { box-sizing: border-box; }

/* 押して選ぶものは、どのページでもカーソルを指差しにそろえる */
select { cursor: pointer; }

body {
  margin: 0;
  font-family: "Yu Gothic UI", "Hiragino Sans", "Meiryo", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* 上部のメニューバーは、マスタ管理の「配色」で選んだ色で塗る。 */
.topbar {
  background: var(--primary);
  border-bottom: 1px solid var(--primary-dark);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar h1 {
  font-size: 18px;
  margin: 0;
  white-space: nowrap;
  color: var(--on-primary);
}

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

/* ソフト名をクリックすると会社管理を開く */
.topbar h1 a#app-title {
  color: var(--on-primary);
  text-decoration: none;
}
.topbar h1 a#app-title:hover { text-decoration: underline; }

/* メニューバーに並ぶ白い部品（会社プルダウン・入力欄・ボタン）は、
   高さ・余白・角の丸みをすべて同じにして横一列に揃える。 */
.topbar select.company-select,
.topbar .period-selector input,
.topbar button.topbar-btn,
.topbar .nav-link {
  height: 32px;
  box-sizing: border-box;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
}

.topbar select.company-select,
.topbar .period-selector input,
.topbar button.topbar-btn {
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--on-primary) 25%, transparent);
  background: var(--panel);
  color: var(--text);
}

.topbar .nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
}

select.company-select {
  font-weight: normal;
  max-width: 220px;
  cursor: pointer;
}

.topbar .period-selector input { width: 150px; }
.topbar .period-selector input[type="search"] { width: 110px; }

.topbar nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
}

.nav-link {
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--on-primary);
  font-size: 14px;
}

/* 選択中のタブは白地に濃い色文字にして、バーの中でもはっきり分かるようにする */
.nav-link:hover { background: color-mix(in srgb, white 45%, transparent); }
.nav-link.active {
  background: var(--panel);
  color: var(--accent-strong);
  font-weight: 600;
}

/* メニューバーの中のボタンは、白地に濃い色文字でバーから浮かせる */
button.topbar-btn {
  background: var(--panel);
  color: var(--accent-strong);
  border-color: var(--panel);
  font-weight: 600;
  white-space: nowrap;
}

/* 2行表示のボタン。他のボタンと同じ高さ32pxに収まるよう、文字を小さくして行間を詰める。 */
.topbar button.topbar-btn-2line {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  font-size: 10px;
  line-height: 1.1;
}
button.topbar-btn:hover { background: var(--accent-soft); }

.period-selector { font-size: 13px; color: var(--on-primary); }
.period-selector input { margin-left: 6px; padding: 4px 6px; }

/* 対象年月のボタン。ブラウザ標準の月入力と同じ見た目にそろえる。 */
.period-label { margin-right: 6px; }
button.period-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: #333;
  font-size: 13px;
  cursor: pointer;
}
button.period-btn:hover { background: var(--accent-soft); }

/* 対象年月を選ぶポップアップ */
.period-picker { min-width: 320px; }
.period-year {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 8px 0 12px;
}
.period-year-label { font-size: 16px; font-weight: 700; }
.period-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 12px;
}
button.period-month {
  position: relative;
  padding: 10px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: #333;
  font-size: 14px;
  cursor: pointer;
}
button.period-month:hover { background: color-mix(in srgb, var(--primary) 22%, #fff); }
button.period-month.selected {
  background: var(--primary);
  border-color: var(--primary);
  font-weight: 700;
}

/* 手当てが必要な仕訳がある月に出す赤丸。件数はメニューバーの赤丸の合計。
   月のボタンの右上に重ねる（ボタンの文字が動かないようにするため）。 */
button.period-month .period-mark {
  position: absolute;
  top: -6px;
  right: -6px;
  margin-left: 0;
}

/* 取引Noのセル。2026-09-25 に仕訳の添付を廃止するまでは、請求書・領収書のPDFを扱うセルだった（ADR 0011）。 */
td.col-mfno[data-mfno-entry] { white-space: nowrap; }

/* 検索で見つかった行。勘定科目・税区分に色を付けているセルにも必ず色が乗るように、
   インライン指定より強い !important で行全体を塗る。 */
table tbody tr.mfno-hit td,
table tbody tr.mfno-hit th { background: var(--accent-mid) !important; }

main#app {
  padding: 20px 28px;
  max-width: 100%;
  margin: 0;
}

.loading, .error { padding: 40px; text-align: center; color: var(--muted); }
.error { color: var(--warn); }

h2 { font-size: 20px; margin: 0 0 16px; }
h3 { font-size: 16px; margin: 24px 0 10px; }

section { margin-bottom: 28px; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}

.card h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.card p { margin: 2px 0; }
.card.ok { background: var(--ok-bg); border-color: #b7ecc7; }
.card.warn { background: var(--warn-bg); border-color: #f3c1c1; }

table.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
  font-size: 13px;
}

table.data-table th, table.data-table td {
  border: 1px solid var(--border);
  padding: 6px 8px;
  text-align: left;
  white-space: nowrap;
}

table.data-table tr.dept-warning td {
  background: #ffd6ea;
}

/* ---------- 部門別損益（会計年度12か月を横に並べた表） ---------- */
/* 横スクロールしても科目名の列は常に見えるようにする。 */
.pl-scroll { overflow-x: auto; margin-bottom: 24px; }

/* 区画ごとに表を分けても列がぴったり揃うように、列幅は colgroup で固定する。 */
table.pl-table {
  table-layout: fixed;
  width: calc(var(--pl-label-w) + 13 * var(--pl-col-w));
}
col.pl-col-label { width: var(--pl-label-w); }
col.pl-col-month { width: var(--pl-col-w); }

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

/* ---------- 全体損益表（会社全体・科目別。月別表の右隣に縦に置く） ---------- */
/* 左に既存の表を上から詰めて並べ、右に全体損益表を1本の列として置く。
   縦長の全体損益表を月別表1つの中に入れると下に大きな空白ができるため、列を分けている。 */
.cpl-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.cpl-layout > .cpl-main {
  flex: 1 1 auto;
  /* 左側の表は自分の横スクロールで縮められるようにする（これが無いと表の幅まで広がってしまう） */
  min-width: 0;
}
#company-pl-slot { flex: 0 0 auto; }
/* 表の見出し（「損益計算書」＋開始月・終了月）。表と地続きに見えるよう、
   同じ幅・同じ枠線で囲み、下の枠線は表の上の枠線に任せる。
   枠線の色は表の中でしか使えない変数なので、同じ式でここにも用意する。 */
.cpl-controls {
  --sheet-border: color-mix(in srgb, var(--muted-line-base) 55%, white);
  box-sizing: border-box;
  width: calc(0.82 * var(--pl-label-w) + 0.95 * var(--pl-col-w));
  border: 3px solid var(--sheet-border);
  border-bottom: none;
  /* 表の見出しと同じグレー。プルダウンだけは白のままにして押せると分かるようにする。 */
  background: #f0f2f6;
  white-space: nowrap;
  font-size: 12px;
}
/* 「損益計算書」の見出し。表の科目名と同じ大きさにそろえる。 */
.cpl-title {
  padding: 5px 8px;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  border-bottom: 1px solid var(--border);
}
/* 開始月・終了月を左右half分ずつに分ける。区切りの線は引かず、余白で分ける。 */
.cpl-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 5px 8px 8px;
}
.cpl-field-label {
  display: block;
  padding-bottom: 3px;
  text-align: center;
}
/* 年月は丸みのある白いプルダウンにする */
.cpl-controls select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  text-align: center;
}
/* 科目1列＋金額1列。金額の列は月別表の列と同じ最小幅にする。 */
/* 金額の列は「2026年1月〜2026年12月」の見出しが2行で入ればよいので、月別表より少し狭くする。
   科目の列も、左の月別表と並べて置くぶん狭めにする（月別表の科目列は変えない）。 */
table.pl-table.cpl-table { width: calc(0.82 * var(--pl-label-w) + 0.95 * var(--pl-col-w)); }
table.cpl-table col.pl-col-label { width: calc(0.82 * var(--pl-label-w)); }
/* 「販売費及び一般管理費合計」のような長い科目名も、狭い列に収まるよう少し小さくする */
table.cpl-table .pl-label { font-size: 16px; }
col.cpl-col-amount { width: calc(0.95 * var(--pl-col-w)); }
/* 区分の中の科目行は少し下げて、見出しとの上下関係を分かりやすくする */
table.cpl-table tr.cpl-account .pl-label {
  padding-left: 26px;
  color: var(--muted);
}

/* ---------- 貸借対照表（資産の部・負債の部・純資産の部を横に並べた6列） ---------- */
/* 損益表と同じ見た目にそろえるが、列の数が違うので幅を上書きする。 */
table.pl-table.bs-table { width: calc(3 * (var(--pl-label-w) + 2.2 * var(--pl-col-w)) + 2 * 26px); }
col.bs-col-label { width: var(--pl-label-w); }
col.bs-col-amount { width: calc(2.2 * var(--pl-col-w)); }
col.bs-col-gap { width: 26px; }
/* 部と部のあいだの空白。一般仕訳の区画と区画のあいだと同じく、罫線を引かず白のままにする。 */
table.bs-table .bs-gap {
  background: #fff;
  border: none;
  padding: 0;
  /* 見出しの固定で付く影は、すき間には出さない */
  box-shadow: none;
}
/* 表の上枠線は表全体に引かれてしまい、すき間の上にも線が残る。
   表からは外して、すき間以外の見出しセルが1つずつ引くようにする。 */
table.pl-table.bs-table { border-top: none; }
table.bs-table thead th:not(.bs-gap) { border-top: 3px solid var(--sheet-border); }
/* 3つの部を横に並べるので、科目名の列は左に貼り付けない（2列目以降がずれるため） */
table.bs-table .pl-label {
  position: static;
  box-shadow: none;
}
/* 部と部のあいだに区切りを入れる */
table.bs-table th.pl-label { border-left: 3px solid var(--sheet-border); }
/* 行数が足りない部の空欄。罫線だけ残して中身は空にする。 */
table.bs-table .bs-blank { background: #fff; }
/* 階層の字下げ。決算書科目→勘定科目→補助科目、と一段ずつ下げる。 */
table.bs-table .bs-level-1 { padding-left: 20px; }
table.bs-table .bs-level-2 { padding-left: 36px; }
table.bs-table .bs-level-3 { padding-left: 56px; }
table.bs-table .bs-level-4 { padding-left: 76px; }
/* 部が横に並ぶので、行ではなくセル単位で見た目を変える。 */
/* 「資産の部」などの大見出し */
table.bs-table .bs-part {
  background: var(--accent-band);
  font-weight: 700;
}
/* 「流動資産」「株主資本」などの区分見出し */
table.bs-table th.bs-block { font-weight: 700; }
/* 「現金及び預金」などの決算書科目の見出し */
table.bs-table th.bs-group { font-weight: 600; }
/* 補助科目は、勘定科目の内訳と分かるよう控えめにする */
table.bs-table .bs-sub,
table.bs-table .bs-note { color: var(--muted); }
/* 要確認の行（2026-09-30 の新しい決まり。reports/balanceSheetAlerts.js）。赤文字・太字にし、理由を名前の横に
   小さく出す（色だけに頼らない）。確認済みの行と、赤にしない知らせは、うすい字で名前の横に出す。
   赤は注意の赤（--warn。白の上で 4.5:1 を満たす）。 */
table.bs-table .bs-alert { color: var(--warn); font-weight: 600; }
table.bs-table .bs-alert-reason { font-size: 12px; font-weight: 600; margin-left: 4px; }
table.bs-table .bs-alert-reviewed,
table.bs-table .bs-alert-notice { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.bs-alert-summary { margin: 8px 0 12px; }
.bs-alert-summary p { margin: 4px 0; }
.bs-alert-summary .bs-alert-count { font-size: 14px; }
/* 貸借の差額を生んでいる仕訳（全社の点検の1） */
.bs-gaps { margin: 8px 0 16px; }
.bs-gaps .bs-gap-table td { vertical-align: top; }
.bs-gaps .bs-gap-sums { margin: 6px 0; padding-left: 20px; }
.bs-gaps .bs-gaps-status:empty { display: none; }
/* 金額が入っているのに勘定科目が空の側（全社の点検の1。一般仕訳・仕訳一覧）。赤枠と「科目が空」の文字（色だけに頼らない） */
table td.cell-missing-account,
table td.journal-list-missing-account { outline: 2px solid #c0392b; outline-offset: -2px; }
.missing-account-mark { color: #b03a2e; font-size: 12px; font-weight: 600; }
/* 〔種別をまとめて入れる〕の窓（全社の点検の5） */
.account-type-fill-box .account-type-fill-scroll { max-height: 50vh; overflow: auto; }
.account-type-fill-box .sheet-scroll { margin-bottom: 8px; }
.account-type-fill-row { margin: 6px 0 10px; }
/* 要確認の一覧（ダイアログ） */
.bs-alert-list-box h4 { margin: 16px 0 6px; font-size: 14px; }
.bs-alert-list-toggle { display: inline-flex; align-items: center; gap: 4px; width: auto; margin: 0 0 8px; }
table.bs-alert-table tr.bs-alert-row th,
table.bs-alert-table tr.bs-alert-row td { color: var(--warn); }
.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
/* 合計 */
table.bs-table .bs-total { font-weight: 700; }
table.bs-table .bs-strong { background: var(--accent-soft); }
/* 貸借対照表のポップアップ。書き換えられるセルは押せると分かるようにする。 */
table.drill-table td.drill-cell { cursor: pointer; }
table.drill-table td.drill-cell:hover { background: var(--accent-soft); }
table.drill-table td.drill-cell input { width: 100%; box-sizing: border-box; }
/* 前の月からの繰越残高の行 */
table.drill-table tr.drill-carry td {
  background: var(--accent-band);
  font-weight: 700;
}
/* 「期首から」ボタン。閉じる×の左に置く。 */
.drill-box .drill-year {
  position: absolute;
  top: 14px;
  right: 56px;
}
.drill-box .drill-year.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
/* 編集中の行の「保存・削除・戻す」は、列幅に収まらないので縦に並べる。 */
table.drill-table td.drill-action {
  white-space: normal;
  text-align: center;
  /* ボタンを縦に並べるので、文字が収まる幅を確保する */
  min-width: 92px;
}
table.drill-table td.drill-action button {
  display: block;
  width: 100%;
  margin: 2px 0;
  /* ボタンは縦に並べるが、ボタンの中の文字は折り返さない */
  white-space: nowrap;
  padding-left: 4px;
  padding-right: 4px;
}
table.drill-table td.drill-action .drill-msg { display: block; margin-top: 4px; }

/* CSV書き出し。「期首から」がある画面ではその左、無い画面では×の左に置く。 */
.drill-box .drill-csv {
  position: absolute;
  top: 14px;
  right: 56px;
}
.drill-box:has(.drill-year) .drill-csv { right: 168px; }
table.bs-table td.bs-drill { cursor: pointer; }
table.bs-table td.bs-drill:hover { background: var(--accent-soft); }
table.pl-table td.pl-minus { color: #c0392b; }

table.pl-table .pl-label {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--panel);
  /* 表の左端の線。他の表と同じく、行の先頭のセルが引く。 */
  border-left: 3px solid var(--sheet-border);
  text-align: left;
  font-weight: 400;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  text-overflow: ellipsis;
}
table.pl-table thead .pl-label {
  z-index: 2;
  background: #f0f2f6;
  font-weight: 600;
}
table.pl-table thead th { text-align: right; }
table.pl-table thead th.pl-label { text-align: left; }

/* 部門の見出し行（部門名＋その部門の月次損益）。塗りだけで区切りを示し、
   他の表と罫線をそろえるため濃い枠線は引かない。 */
table.pl-table tr.pl-dept td,
table.pl-table tr.pl-dept .pl-label {
  background: var(--accent-band);
  font-weight: 700;
}

/* 売上高・損益は、部門名の行と同じ薄い塗りにする */
table.pl-table tr.pl-band td,
table.pl-table tr.pl-band .pl-label {
  background: var(--accent-band);
  font-weight: 700;
}
/* 現金増減・現金預金残高は塗らずに白のままにする */
table.pl-table tr.pl-white td,
table.pl-table tr.pl-white .pl-label {
  background: #fff;
  font-weight: 700;
}

/* 部門ブロックの中の科目行は少し下げて、見出しとの上下関係を分かりやすくする */
table.pl-table tr[data-dept-body] .pl-label {
  padding-left: 26px;
  color: var(--muted);
}
table.pl-table tr[data-dept-body] .pl-label.pl-empty { font-style: italic; }

/* 全社合計・区画合計の行 */
table.pl-table tr.pl-company td,
table.pl-table tr.pl-company .pl-label {
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
}
table.pl-table tr.pl-company td.pl-minus { color: #a01b12; }

/* 小計の行（損益・現金増減・現金預金残高など） */
table.pl-table tr.pl-total td,
table.pl-table tr.pl-total .pl-label {
  background: var(--accent-mid);
  font-weight: 700;
}

/* クリックでもとの仕訳を開けるセル */
table.pl-table td.pl-drill { cursor: pointer; }
table.pl-table td.pl-drill:hover,
table.pl-table td.pl-drill:focus {
  outline: 2px solid var(--accent-strong);
  outline-offset: -2px;
  background: var(--accent-soft);
}
table.pl-table tr.pl-company td.pl-drill:hover,
table.pl-table tr.pl-company td.pl-drill:focus {
  background: var(--primary-dark);
}

/* その区画（銀行）自身の口座を指す補助科目は、どちら側が自行か分かるように強調する。
   通常の太字（700）より太い900にして、文字も少し濃くする。 */
table.data-table td.own-block {
  font-weight: 900;
  color: #000;
}

/* 勘定科目・税区分のカラー設定ボタン（押すと色見本のポップアップが開く） */
button.color-pick-btn {
  min-width: 150px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
button.color-pick-btn:hover { border-color: var(--accent-strong); }

/* 「なし」の色見本は斜線で塗りつぶし無しを表す */
.theme-chip-none {
  background:
    linear-gradient(to top right, transparent 46%, var(--warn) 46%, var(--warn) 54%, transparent 54%),
    var(--panel);
}

/* 勘定科目・税区分の文字カラー選択 */
.theme-grid-text .theme-swatch { justify-content: flex-start; }
.theme-note { font-size: 11px; color: var(--muted); margin-left: 8px; }

/* マスタ管理「配色」の色見本 */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  max-width: 760px;
}
button.theme-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
button.theme-swatch:hover { background: var(--accent-soft); }
button.theme-swatch.selected { border-color: var(--accent-strong); }
button.theme-swatch.selected .theme-name { font-weight: 700; }
.theme-chip {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex: none;
}

/* 損益表から開く仕訳一覧のポップアップ */
.modal-box.modal-wide { max-width: min(1400px, 96vw); width: 96vw; }

/* 検索結果のポップアップの、行ごとの削除ボタン。行の高さに収まるようにする。 */
.modal-box th.col-search-del, .modal-box td.col-search-del { width: 64px; text-align: center; }
button.btn-search-del {
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 1px 8px;
  font-size: 11px;
  line-height: 1.5;
}
/* 損益表の金額をクリックすると出る仕訳の一覧。
   他の表と同じ大きさの文字にして、ポップアップも画面いっぱいまで広げる。 */
/* modal-wide（96vw）より強く指定して、画面いっぱいまで広げる */
.modal-box.drill-box {
  max-width: 94vw;
  width: 94vw;
  max-height: 94vh;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* 余白を詰めたぶん、表に使える幅を増やす */
.drill-box h3 { margin: 0 0 4px; }
.drill-box p.note { margin: 0 0 8px; }
.drill-scroll { flex: none; max-height: 74vh; }
table.drill-table input { width: 100%; box-sizing: border-box; font-size: 17px; padding: 2px 4px; }
/* 編集ボタンの列は中央にそろえる */
table.drill-table td.drill-action { text-align: center; }

/* 設定画面（勘定科目・税区分・部門）の表。
   列の数が少ないので幅は中身に合わせ、文字の大きさだけ他の表とそろえる。 */
table.master-table { width: auto; min-width: min(720px, 100%); }
/* data-table 側の 13px 指定より後に、同じ強さ以上で上書きする */
table.data-table.master-table td input,
table.data-table.master-table td select {
  font-size: 17px;
  padding: 2px 6px;
}
table.master-table td.drag-handle { text-align: center; }
/* カラー・削除・付け替えのボタンは列の中央にそろえる */
table.master-table td.master-action { text-align: center; }
/* 使用件数。件数は右にそろえ、何社で使っているかは小さく添える。 */
table.master-table td.master-usage { text-align: right; white-space: nowrap; }
/* マネーフォワードの税区分名。参照用なので本文より少し小さくする。 */
table.master-table td.mf-name { font-size: 15px; white-space: nowrap; }
.master-usage .usage-sub { margin-left: 8px; font-size: 13px; color: var(--muted); }
.master-usage .usage-none { color: var(--muted); font-size: 14px; }
/* 税区分の「非表示」（選ぶ所の選択肢から外した税区分）。名前は残るので、行を薄く出して印を添える。
   「表示に戻す」のボタンは押せることが分かるよう、薄くしない。 */
table.master-table tr.tax-hidden-row > td:not(:last-child) { opacity: 0.5; }
.tax-hidden-badge {
  margin-left: 8px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
/* 貼付登録で「読み取る」を押したあとに出る、登録前の確認一覧。
   ポップアップの中に収まるよう高さを抑える。 */
.paste-rules-box { display: flex; flex-direction: column; max-height: 92vh; }
.paste-preview-scroll { max-height: 46vh; }
/* 貼り付けた表に挟まっていた空白行。そのまま空の仕訳として作るので、
   一覧でも中身の無い行として、塗らずに少し低く出す。 */
table.sheet-table tr.paste-blank > td { background: #fff; height: 18px; }
.paste-rules-box h3 { margin: 14px 0 6px; }

/* ---------- 融資返済表 ---------- */
/* 登録ボタンは右上に置く */
.loan-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
/* 融資は横に並べる。返済が長いものほど左に置いてあるので、
   左から順に「残りが長い融資」を見比べられる。数が増えたら横にスクロールする。 */
.loan-list {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.loan-section {
  flex: none;
  margin-bottom: 0;
}
.loan-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}
.loan-head h3 { margin: 0; }
/* 返済表は5列だけなので、他の表よりかなり小さめの幅にする */
table.loan-table { width: 570px; }
table.loan-table th.loan-col-date, table.loan-table td.loan-col-date { width: 106px; }
table.loan-table th.loan-col-num { width: 116px; }
/* 数字が5列並ぶので、この表だけ文字を小さくして詰める */
table.loan-table th, table.loan-table td { font-size: 15px; }
/* 表の幅に合わせて、枠も伸びきらないようにする（横に並べるので幅は表ぴったり） */
.loan-section .sheet-scroll { width: max-content; }
table.loan-table td.loan-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- 返済金額・支払利息・借入残高（返済月ごとの集計表） ---------- */
/* 行＝返済月、列＝融資。列が増えるので、幅は中身に合わせて広げて横スクロールさせる。 */
table.loan-sum-table { width: max-content; min-width: 100%; }
/* 数字の列が何本も並ぶので、返済明細と同じく文字を小さくして詰める */
table.loan-sum-table th, table.loan-sum-table td { font-size: 15px; }
table.loan-sum-table td.loan-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
table.loan-sum-table th.loan-col-num { width: 132px; }
table.loan-sum-table th.loan-col-bank { text-align: center; }
/* 見出しの下に添える「対象年月から1年間の合計」。
   月ごとの金額と見分けが付くよう茶色にして、見出しの名前より小さく出す。 */
table.loan-sum-table thead th .loan-year-sum {
  display: block;
  margin-top: 2px;
  color: #8a5a2b;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 左に貼り付ける2列（返済月・合計）の幅。
   返済月は「2026年10月」が収まるいちばん狭い幅にきっちり固定する。
   合計を貼り付ける位置は返済月の幅そのものなので、返済月の幅が動くと
   2列のあいだに隙間ができたり、重なったりしてしまうため。
   合計はそれより少し広めにする。こちらは右に貼り付ける列が無いので、
   桁数の多い金額でも切れないよう、下限だけ決めて広がれるようにしておく。 */
table.loan-sum-table {
  --loan-month-w: 116px;
  --loan-total-w: 132px;
}
/* 返済月の列は、横にスクロールしても左に貼り付けたままにする */
table.loan-sum-table th.loan-col-month,
table.loan-sum-table td.loan-col-month {
  position: sticky;
  left: 0;
  z-index: 2;
  width: var(--loan-month-w);
  min-width: var(--loan-month-w);
  max-width: var(--loan-month-w);
  background: #f7f8fa;
  font-weight: 500;
}
/* 見出しの行と返済月の列が重なるところは、どちらより手前に出す */
table.loan-sum-table thead th.loan-col-month {
  z-index: 4;
  background: #f0f2f6;
}
/* 数字が入っていない欄（その月にその融資がまだ無い・もう無い） */
table.loan-sum-table td.loan-none { color: var(--muted); }
/* 金融機関ごとの小計と、全体の合計。数字を見分けやすいよう薄く色を敷く。 */
table.loan-sum-table td.loan-subtotal,
table.loan-sum-table th.loan-subtotal { background: #f4f6fa; font-weight: 600; }
/* 合計は返済月のすぐ右の列。返済月と同じく、横にスクロールしても左に貼り付けておく。
   左からの位置は返済月の列の実際の幅で決まるので、表を描いたあとに JavaScript で入れる。 */
table.loan-sum-table td.loan-total,
table.loan-sum-table th.loan-total {
  position: sticky;
  left: var(--loan-month-w);
  z-index: 2;
  width: var(--loan-total-w);
  min-width: var(--loan-total-w);
  background: var(--accent-soft);
  font-weight: 700;
}
table.loan-sum-table thead th.loan-total { z-index: 4; }
/* いちばん下の「合計」の行（融資ごとの総額） */
table.loan-sum-table tr.loan-row-total td {
  background: var(--accent-soft);
  font-weight: 700;
}
/* メニューバーの「対象年月」にあたる行。開いたときはこの行が表の先頭に来る。
   何十年ぶんも並ぶので、いま処理している月がひと目で分かるように色を付ける。
   返済明細（融資ごとの表）と、返済月ごとの集計表の両方で使う。 */
table.loan-table tr.loan-row-target td,
table.loan-sum-table tr.loan-row-target td { background: #fff6d8; }
table.loan-table tr.loan-row-target td.loan-col-date,
table.loan-sum-table tr.loan-row-target td.loan-col-month { font-weight: 700; }

/* ---------- 金融機関取引状況表 ---------- */
/* 金融機関ごとに1行、列は決まった数しかないので、幅は列ごとに決め打ちする */
table.bank-status-table { width: max-content; min-width: 100%; }
table.bank-status-table th, table.bank-status-table td { font-size: 15px; }
table.bank-status-table th.bank-col-name,
table.bank-status-table td.bank-col-name { width: 220px; }
table.bank-status-table th.bank-col-branch,
table.bank-status-table td.bank-col-branch { width: 140px; }
table.bank-status-table th.loan-col-num { width: 148px; }
table.bank-status-table td.loan-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* 残高が0の欄と、返済予定表がまだ無い欄 */
table.bank-status-table td.loan-none { color: var(--muted); }
/* 小計・合計の行 */
table.bank-status-table tr.bank-row-sum td {
  background: var(--accent-soft);
  font-weight: 700;
}
/* 金融機関として登録していない相手先（役員・関係会社など）の行 */
table.bank-status-table tr.bank-row-other td.bank-col-name { color: var(--muted); }

/* 返済表ごとに、自動仕訳で使う勘定科目を見出しの下に小さく出す */
.loan-auto-note {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--muted);
}

/* 登録ポップアップ */
.loan-modal { width: 720px; max-width: 94vw; }
/* 自動仕訳の設定は、返済表そのものの入力と分けて囲っておく */
.loan-auto-box {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 12px 10px;
  margin: 12px 0;
}
.loan-auto-box legend { font-size: 13px; color: var(--muted); padding: 0 6px; }
.loan-auto-box .note { margin: 6px 0; }
.loan-auto-box select { width: 100%; box-sizing: border-box; }
.loan-form-row {
  display: flex;
  gap: 16px;
  margin: 10px 0;
}
.loan-form-row label { flex: 1; }
.loan-form-row input { width: 100%; box-sizing: border-box; }
.loan-modal textarea { width: 100%; box-sizing: border-box; }

/* 貼付登録で、設定に無い名前が見つかったときの一覧 */
ul.paste-unknown {
  margin: 8px 0 0;
  padding-left: 22px;
  max-height: 26vh;
  overflow: auto;
}
ul.paste-unknown li { margin: 2px 0; }

/* 押すと並べ替えられる見出し。いまどの列で並べているかを矢印で示す。 */
table.master-table th.sortable { cursor: pointer; user-select: none; }
table.master-table th.sortable:hover { background: var(--accent-soft); }
.sort-mark {
  margin-left: 6px;
  font-size: 13px;
  color: var(--muted);
}
.sort-mark.on { color: var(--accent-strong); }
table.master-table td button { font-size: 14px; padding: 2px 10px; }

table.pl-table tr.pl-spacer td {
  background: var(--bg);
  padding: 3px;
  border-left: 0;
  border-right: 0;
}

table.data-table th {
  background: #f0f2f6;
  font-weight: 600;
}

table.data-table td input,
table.data-table td select {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  font-size: 13px;
  padding: 2px 4px;
}
table.data-table td input:hover,
table.data-table td select:hover { border-color: var(--border); }

/* 仕訳系テーブル（個別入力・定期仕訳一覧・仕訳一覧）で列幅を揃えるための共通クラス。
   table-layout:fixed で内容の長さに関わらず全テーブルで同じ幅にする。 */
table.journal-table { table-layout: fixed; }
.col-dept { width: 100px; }
.col-mfno { width: 70px; }
.col-account { width: 150px; }
.col-tax { width: 100px; }
.col-sub { width: 130px; }
.col-desc { width: 180px; }
.col-amount { width: 110px; }
.col-date { width: 130px; }
.col-action { width: 90px; }
.col-source { width: 95px; }

/* 全種類の仕訳をまとめて見る、読み取り専用の仕訳一覧。
   操作はすべて1本の行にまとめる。左に「全体」＋12か月の期間ボタン、
   右に検索欄、そのさらに右に月送り（◀前月・いまの月・翌月▶）。
   キーボードで進む順も「期間 → 検索 → 月送り」になるよう、HTML の並びを左→右にそろえてある。
   検索範囲・年度の注記やエラーはこの行の外（下）に出すので、注記が出ても行の中身は動かない。 */
.journal-list-bar {
  display: flex;
  align-items: center;
  /* 期間ボタンも右の操作も折り返さない。幅が足りないときはこの行だけ横にスクロールする
     （ボタンを隠したり、縦に折り返したりしない）。 */
  flex-wrap: nowrap;
  gap: 16px;
  margin: 12px 0 8px;
  overflow-x: auto;
  /* スクロールバーが出たときに、ボタンの下端が切れないようにする */
  padding-bottom: 2px;
}
/* 期間ボタンの帯。行の左端に貼り付け、12か月＋「全体」を1列のまま並べる。
   あとから出てくる .period-menu の flex-wrap・margin より強く指定して上書きする。 */
.journal-list-bar > .period-menu.journal-list-period-menu {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  margin: 0;
}
/* 検索欄と月送りのまとまり。行の右端に貼り付ける。 */
.journal-list-bar > .journal-list-tools {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 0 0 0 auto;
}
.journal-list-month-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  flex: 0 0 auto;
}
/* 行の外（下）に出す注記。行の中身の位置には影響しない。 */
.journal-list-notes { margin: 0 0 8px; }
/* 真ん中の「いまの月」。月を選んでいるときは押した状態（active）、年度全体のときは押せる状態。 */
.journal-list-month-nav .period-tab-current {
  min-width: 7.5em;
  font-weight: 700;
}
.journal-list-tools label.journal-list-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}
.journal-list-bar .journal-list-tools label.journal-list-search { flex: 0 0 auto; }
/* 検索欄はこれまでの実測 630px×21px に対して、幅は半分の 315px、高さは1.5倍の 31.5px にする。
   1行に収めるので伸び縮みはさせない（幅は 315px ちょうどで固定）。文字の大きさは変えない。 */
.journal-list-bar .journal-list-tools input#journal-list-search {
  width: 315px;
  max-width: none;
  height: 31.5px;
  flex: none;
  box-sizing: border-box;
}
.journal-list-scroll { max-height: calc(100vh - 330px); min-height: 240px; }
/* 表の上の1行：「1,008件中 300件を表示中」・全件の合計・「すべて表示」。表の枠の外なので、スクロールしても見え続ける。 */
.journal-list-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 8px;
  font-size: 13px;
}
.journal-list-count { font-weight: 700; }
.journal-list-totals { color: var(--muted); }
/* 押せないとき（全件を表示済み・読み込み中）。焦点は残すので disabled ではなく aria-disabled。 */
.period-tab.journal-list-show-all[aria-disabled="true"] {
  background: #f4f4f4;
  color: var(--muted);
  cursor: default;
}
.period-tab.journal-list-show-all[aria-disabled="true"]:hover { background: #f4f4f4; }
/* 表のいちばん下の案内（続きを読み込み中・全件表示済み）。横にスクロールしても左端に残す。 */
.journal-list-footer {
  position: sticky;
  left: 0;
  margin: 0;
  padding: 10px 12px;
  text-align: center;
}
.journal-list-footer .period-tab { margin-left: 8px; }
.journal-list-footer.journal-list-footer-done { font-weight: 700; }
table.journal-list-table td { vertical-align: top; }
table.journal-list-table td.num { text-align: right; white-space: nowrap; }
table.journal-list-table tr.journal-list-unbalanced td { background: var(--warn-bg); }
/* 金額を読み取れない行(数字でない値が入っている)。0円とは見せず、行を赤く塗って金額を赤字で出す。 */
table.journal-list-table tr.journal-list-invalid td { background: var(--warn-bg); }
table.journal-list-table td.journal-list-amount-invalid,
table.journal-list-table .journal-list-amount-part.journal-list-amount-invalid { color: var(--warn); font-weight: 700; }

/* 「要修正」は金融機関をまたいで1つの表にまとめるので、明細名の上に区画名を小さく出す */
.row-block-name {
  display: block;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}

table.journal-table td.col-desc,
table.journal-table td.col-sub,
table.journal-table td.col-account,
table.journal-table td.col-dept {
  white-space: normal;
  word-break: break-word;
}

/* 部門名が長いと列からはみ出すので、2行までで折り返して、それを超える分は隠す。
   テーブルのセル自体には行数の制限が効かないので、中に入れたこの要素で止める。 */
.clamp2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  word-break: break-word;
}

/* 横スクロールしても登録・編集ボタンが見えるよう、操作列を右端に固定する */
table.journal-table th.col-action,
table.journal-table td.col-action {
  position: sticky;
  right: 0;
  background: var(--panel);
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.08);
}
table.journal-table th.col-action {
  background: #f0f2f6;
}
table.journal-table tr.dept-warning td.col-action {
  background: #ffd6ea;
}

td.drag-handle {
  cursor: pointer;
  text-align: center;
  color: var(--muted);
  width: 20px;
  padding-left: 2px;
  padding-right: 2px;
  user-select: none;
}
table.data-table tr[draggable="true"].dragging {
  opacity: 0.4;
  background: #eef2ff;
}
table.data-table tr[draggable="true"] { cursor: pointer; }

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.tab-btn {
  border: none;
  background: transparent;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
}
.tab-btn.active { color: var(--accent-strong); border-bottom-color: var(--accent-strong); font-weight: 600; }
/* マウスを置いたときは薄い塗りにする。共通のボタンの濃い塗り（--primary-dark）のままだと、
   タブの字（うすい字・濃い派生色）とのコントラストが足りない（選んでいるタブで 2.2:1）。 */
.tab-btn:hover { background: var(--accent-soft); }

.add-row {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* 設定画面は追加欄が表の上にあるので、表とのあいだを空けて区切りを分かりやすくする */
.add-row + .sheet-scroll { margin-top: 22px; }

input[type="text"], input[type="number"], input[type="month"], input[type="date"],
select, textarea {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

button {
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--accent-strong);
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
  font-size: 13px;
}
button:hover { background: var(--primary-dark); }
button.secondary {
  background: #fff;
  color: var(--accent-strong);
}
button.secondary:hover { background: var(--accent-soft); }
button.danger {
  background: #fff;
  color: var(--warn);
  border-color: var(--warn);
}
button.danger:hover { background: var(--warn-bg); }

.btn-uniform {
  display: inline-block;
  width: 110px;
  margin-top: 4px;
  text-align: center;
  box-sizing: border-box;
}

.form-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 14px;
}

/* display を指定した要素は hidden 属性が効かなくなるので、こちらで消す */
[hidden] { display: none !important; }
.form-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}

/* 黄色: 明細名に分類ルールが複数マッチ（補助での絞り込みが必要） */
table.journal-table tr.row-yellow td { background: #fff6d8; }

/* 緑色: 同じ取引かもしれない行（金融仕訳の提案・資金移動の統合などで、選んだ行と同じ金額の行） */
table.journal-table tr.row-green td { background: #d8f0d5; }

/* 金額がまだ入っていない（0円の）仕訳。CSVエクスポートには含めない。 */
table.journal-table tr.row-zero td { background: #f1f2f4; color: var(--muted); }

/* 融資仕訳のポップアップ。表が横に広いので、画面幅いっぱいまで使う。 */
.loan-journal-box { min-width: min(1100px, 94vw); }
#loan-journal-table th.col-action, #loan-journal-table td.col-action { width: 80px; }

/* クレジット立替仕訳の「仕訳の内訳」。1行＝これから作る仕訳1件（科目・会社・金額）。 */
#credit-advance-table th.col-action, #credit-advance-table td.col-action { width: 110px; }
.credit-advance-part {
  display: grid;
  grid-template-columns: 4.5em 1fr auto;
  gap: 0 8px;
  align-items: baseline;
  white-space: nowrap;
}
.credit-advance-part + .credit-advance-part { border-top: 1px dotted #ddd; }

/* 資金移動確認のポップアップ。融資仕訳と同じく、表が横に広いので画面幅いっぱいまで使う。 */
.transfer-merge-box { min-width: min(1200px, 94vw); }
#transfer-merge-table th.col-action, #transfer-merge-table td.col-action { width: 120px; }
/* 「統合」の下に「統合しない」を縦に、同じ幅で並べる（合流 段2-6） */
#transfer-merge-table td.col-action button { display: block; width: 100%; margin: 4px 0; }
/* 「向き」（出金・入金）の列。文字が折り返さない幅にそろえる。 */
#transfer-merge-table th.col-mfno:first-child, #transfer-merge-table td.col-mfno:first-child { width: 60px; }
/* 組の2行にまたがるセル（統合後・統合ボタン）は、上下の中央にそろえる。 */
#transfer-merge-table td[rowspan] { vertical-align: middle; }
/* 「統合後」の欄だけは2行で出したいので、折り返しを止めない。 */
#transfer-merge-table td[rowspan].col-desc { white-space: normal; }
/* まだ仕訳になっていない明細の行。借方・貸方の4列をまとめて、状態を文字で出す。 */
#transfer-merge-table td.col-unregistered { color: var(--muted, #666); font-size: 15px; }

/* 見出しの行に操作ボタンを置くときの並び。見出しは左、ボタンは右端にそろえる。 */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* 見出しの上下の余白は、見出し1つのときと同じにする */
  margin: 24px 0 10px;
}
.section-head h3 { margin: 0; }

/* 「要修正」の補助提案CSVのポップアップ。読み取った一覧が横に広いので広めに取る。 */
.sub-hint-box { min-width: min(1200px, 94vw); }
.sub-hint-box textarea { width: 100%; }
.sub-hint-box #sub-hint-preview .sheet-scroll { max-height: 46vh; }
#sub-hint-table th.col-action, #sub-hint-table td.col-action { width: 80px; }

/* 補助提案CSVで入れた提案の文字。まだ決まっていないものなので、うすい字で出す。 */
.sub-hint {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.3;
}

/* 赤色: 取引Noの重複。正しい状態ではないので、組ごとに濃さを変えて赤で出す。 */
table.journal-table tr.row-error td { background: #ffdcdc; }
table.journal-table tr.row-error-alt td { background: #ffeeee; }

/* 「取引Noの重複」など、手当てが要る区画の見出し。手当てが要ると分かるように赤くする。 */
h3.section-error { color: #c0392b; }

/* 青色: 明細名にマッチする分類ルールが無い（新規ルール登録の対象） */
table.journal-table tr.row-blue td { background: #e2edff; }
/* 口座間の資金移動と思われる明細。登録すると二重計上になることがあるので、確認してから処理する */
table.journal-table tr.row-beige td { background: #f5ead8; }

/* 灰色: いちど仕訳にしたあとで人が仕訳を削除した利用明細。
   自動では仕訳にし直さない（削除しても復活しないようにするため）。押せば登録し直せる。 */
table.journal-table tr.row-skipped td { background: #f1f2f4; color: var(--muted); }
/* クレジット仕訳の確定（ADR 0015 の 3.15・3.21）：確定の後に来た明細は別の色、確定済みの仕訳には「確定」の印 */
table.journal-table tr.row-locked-late td { background: #f3ecfb; }
.credit-lock-badge,
.credit-late-badge { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 0.8em; white-space: nowrap; }
.credit-lock-badge { background: #1f4e8c; color: #fff; }
.credit-late-badge { background: #6b3fa0; color: #fff; }
.credit-lock-panel { margin: 8px 0 16px; padding: 8px 12px; border: 1px solid #d6dbe3; border-radius: 6px; }
.credit-lock-box { min-width: min(1180px, 96vw); max-height: 86vh; overflow-y: auto; }
/* クレジットカードの管理画面の一覧の利用の印（3.15。表示だけ）。前の取込と同じ行・取り下げは薄く出す */
.cc-table tr.cc-row-shadow td { color: var(--muted); background: #f1f2f4; }
.cc-use-mark { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 8px; font-size: 0.75em; background: #eef1f6; color: #3a4a63; white-space: nowrap; }

/* 所属登録で決めた貸方仕訳。カードごとに決まるものなので、
   クレジット仕訳の編集では入力欄を出さず、決まった内容を文字で見せる。 */
table.journal-table tr[data-editing] td.cell-fixed { background: #f1f2f4; }

/* 未処理行を編集中、分割行ぶんの入力欄を1列内に縦に並べる */
.split-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.split-stack-item input,
.split-stack-item select { width: 100%; }
.fixed-side-text {
  display: inline-block;
  padding: 6px 0;
  color: var(--muted);
  font-size: 13px;
}

.split-summary { font-size: 13px; margin: 8px 0; color: var(--muted); }

/* 仕訳行を追加する⊕。補助のプルダウンのすぐ下に置く。 */
button.btn-add-split-line {
  display: block;
  margin-top: 6px;
  padding: 0 4px;
  border: none;
  background: none;
  color: var(--accent-strong);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
button.btn-add-split-line:hover { color: var(--text); }

/* 金額を変更できない（1行のまま）ときは、入力できないことが分かるようにする */
input.us-amount[readonly] { background: #f2f3f5; color: var(--muted); }
.split-summary.mismatch { color: var(--warn); font-weight: 600; }

.actions-row { display: flex; gap: 8px; margin-top: 10px; }

/* 会社管理のバックアップ欄。データの消失に直結するので、線を引いて他の操作と分ける。 */
.backup-heading {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

/* 設定→金融仕訳登録で、明細名がぶつかっているルールの行。 */
table.journal-table tr.rule-conflict td { background: #fde0ec; }
/* その区画の銀行の口座が補助科目に入っていないルール。明細名のぶつかりとは別の理由なので少し濃いピンクにする */
table.journal-table tr.rule-no-bank-sub td { background: #fbcfe0; }

/* スプレッドシート風の表。一般仕訳の「簡易表」と「全体」で共通して使う。
   ・いちばん左の「区画」には、行ごとの区画名が入る（押すと選び直せる）
   ・まとまりの先頭に、横につながった見出しの行（区画バー）が入る
   ・まとまりどうしは白い余白の行で区切る */
.col-group { width: 110px; }
/* 表そのものを枠の中でスクロールさせ、見出しの行を枠の上に貼り付ける。
   ページごとスクロールすると貼り付けられないので、縦も枠の中で動かす。 */
.sheet-scroll { overflow: auto; margin-bottom: 24px; }
table.sheet-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f0f2f6;
  text-align: center;
  /* 行がこの下を流れていくので、少しだけ影を落として見出しを手前に見せる */
  box-shadow: 0 3px 5px -2px rgba(15, 20, 30, 0.25);
}
table.sheet-table td.col-group {
  vertical-align: middle;
  text-align: left;
  font-weight: 500;
  color: #000;
  background: #f7f8fa;
}
/* 区分の列には、その行の区画名を1行ずつ出す。長い区画名は「…」で切り詰める。
   押すとプルダウンになるので、押せると分かるようにしておく。 */
table.sheet-table td.col-group[data-field] { cursor: pointer; }
table.sheet-table td.col-group {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 区画名のバー。「設定 > 配色」で選んだテーマ色を、少しだけ薄めて塗る。
   すぐ上は罫線の無い余白の行なので、上の線はこの行が自分で引く。 */
table.sheet-table tr.sheet-section td {
  border-top: 3px solid var(--sheet-border);
  background: color-mix(in srgb, var(--primary) 75%, white);
  color: #000;
  font-weight: 700;
  text-align: center;
}
/* 区画バーの合計金額・件数は、区分の列と同じように区画名より小さく出す */
table.sheet-table tr.sheet-section .section-sum {
  font-size: 14px;
  font-weight: 400;
}
/* 編集中の行は入力欄が縦に並ぶので、1行に収める指定（切り詰め）を外す。
   金融仕訳の色付き行を開いたときに、入力欄が切れないようにするためのもの。 */
table.sheet-table tr[data-editing] td,
table.sheet-table td:has(input),
table.sheet-table td:has(select),
table.sheet-table td:has(.split-stack) {
  white-space: normal;
  overflow: visible;
}

/* まだ仕訳が無い区画の行。「追加」だけを置いて、そこから1件目を作れるようにする。 */
table.sheet-table td.sheet-empty-cell {
  color: var(--muted);
  font-size: 15px;
}

/* スプレッドシートに近い、大きめで読みやすい文字にする。
   1件が1行に収まるよう折り返しをやめ、列の幅はいちばん長い中身に合わせて広げる。
   表は枠の中で横にスクロールするので、幅が広がっても画面からはみ出さない。 */
/* 枠線の色。
   罫線は「隣どうしで重ねる（collapse）」ではなく、セルごとに右と下だけ引く。
   collapse だと、上に貼り付けた見出しの罫線がスクロール中に消えてしまうため。
   表の外枠は上と左だけ table 側で引いて、二重線にならないようにする。 */
table.sheet-table {
  --sheet-border: color-mix(in srgb, var(--muted-line-base) 55%, white);
  border-collapse: separate;
  border-spacing: 0;
  border: none;
  border-top: 3px solid var(--sheet-border);
}
/* 左端の線は表ではなく各行の先頭のセルが引く。
   こうすると区画のあいだの余白の行では線が途切れ、区画ごとに切り離して見える。 */
table.sheet-table thead th:first-child,
table.sheet-table tr.sheet-section td:first-child,
table.sheet-table td.col-group {
  border-left: 3px solid var(--sheet-border);
}
/* 区分の列を持たない表（重複・損益表のドリルダウン）は、
   どの行も左端から始まるので、行の先頭のセルがそのまま左の線を引く。 */
table.sheet-flat tbody tr > td:first-child {
  border-left: 3px solid var(--sheet-border);
}

table.sheet-table th,
table.sheet-table td {
  font-size: 19px;
  /* 行間と上下の余白を詰めて、1行あたりの高さを抑える */
  line-height: 1.1;
  /* 黒字で読みやすく。太すぎると詰まって見えるので、通常の太さにする */
  color: #000;
  font-weight: 400;
  /* 左右の余白は、文字が枠線の近くから始まるよう詰める */
  padding: 2px 5px;
  /* 罫線はセルの右と下だけ。左と上は隣のセル（と表の外枠）が持つ。 */
  border: none;
  border-right: 3px solid var(--sheet-border);
  border-bottom: 3px solid var(--sheet-border);
}
/* 1件を1行に収める。実際の仕訳には列より長い名前もあるので、
   隣の欄にはみ出さないよう「…」で切る（全文はマウスを乗せると出る）。 */
table.sheet-table td.col-dept,
table.sheet-table td.col-account,
table.sheet-table td.col-sub,
table.sheet-table td.col-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.sheet-table td.col-amount { font-variant-numeric: tabular-nums; position: relative; }
/* 金融仕訳の「出金」「入金」。表示中は1行を使わずに欄の左上へ重ね、
   他の表と行の高さをそろえる。金額は右寄せなので文字は重ならない。
   編集中（入力欄があるとき）はこれまでどおり金額の上に置く。 */
table.sheet-table td.col-amount:not(:has(input)) .amount-direction {
  position: absolute;
  top: 2px;
  left: 4px;
  margin: 0;
}
/* 日付と取引Noは数字なので、金額と同じく右にそろえる */
table.sheet-table td.col-date,
table.sheet-table td.col-mfno { text-align: right; }

table.sheet-table th.col-group, table.sheet-table td.col-group { width: 116px; }
/* 仕訳一覧の「区画」の列。一般仕訳の区分の列(col-group)と同じ幅にそろえる。 */
.journal-list-scroll table.sheet-table th.col-source,
.journal-list-scroll table.sheet-table td.col-source { width: 116px; }
table.sheet-table th.col-dept, table.sheet-table td.col-dept { width: 110px; }
table.sheet-table th.col-account, table.sheet-table td.col-account { width: 196px; }
/* 税区分は幅を大きく詰める。長い名前は「…」で切れるが、
   セルを押せば入力欄に全文が出るので読める（マウスを乗せても出る）。 */
table.sheet-table th.col-tax, table.sheet-table td.col-tax {
  width: 96px;
  padding-left: 4px;
  padding-right: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.sheet-table th.col-sub, table.sheet-table td.col-sub { width: 210px; }
table.sheet-table th.col-desc, table.sheet-table td.col-desc { width: 330px; }
table.sheet-table th.col-amount, table.sheet-table td.col-amount { width: 142px; }
table.sheet-table th.col-date, table.sheet-table td.col-date { width: 116px; }
table.sheet-table th.col-mfno, table.sheet-table td.col-mfno {
  width: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 左端の線は各行の先頭のセルが引く。区画のあいだの余白の行では線が途切れ、
   区画バーの左が二重線になることもない。 */
table.sheet-journal tbody tr:not(.sheet-gap) > td:first-child {
  border-left: 3px solid var(--sheet-border);
}

/* 金融仕訳だけにある「補助」「明細名」の列と、そこで詰める部門の列。
   一般仕訳と表全体の幅をそろえるための配分で、
   72 + 180 + (56 × 2) = 364px ＝ 一般仕訳の「区画」列128px + 余り236px にあたる。
   入りきらない文字は「…」で切れるが、マウスを乗せると全文が出る。 */
/* 補助は文字を小さくして、そのぶん幅を広げる（元帳適用から回す）。 */
table.sheet-journal th.col-rule, table.sheet-journal td.col-rule {
  width: 122px;
  font-size: 14px;
}
table.sheet-journal th.col-line, table.sheet-journal td.col-line { width: 180px; }
/* 元帳適用は、補助に回したぶんだけ狭める（表全体の幅は変えない）。 */
table.sheet-journal th.col-desc, table.sheet-journal td.col-desc { width: 252px; }
table.sheet-journal th.col-dept, table.sheet-journal td.col-dept { width: 56px; }
/* 部門の列は細くしているので、見出しの文字だけ小さくして収める */
table.sheet-journal thead th.col-dept { font-size: 11px; }
table.sheet-journal td.col-rule,
table.sheet-journal td.col-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 金融仕訳登録・クレジット仕訳登録の表。金額や日付の列が無いぶん、
   勘定科目の列を少し詰めて全体を収まりよくする。 */
table.sheet-rules th.col-account, table.sheet-rules td.col-account { width: 180px; }

/* 「全体」の編集ボタンの列。横スクロールしても右端に残る（journal-table の指定） */
table.sheet-table th.col-action, table.sheet-table td.col-action { width: 108px; }
/* 押すとその場で書き換えられるセル。マス目の中で入力欄が枠いっぱいに広がる。 */
table.sheet-table td[data-field] { cursor: pointer; }
table.sheet-table td[data-field] input {
  width: 100%;
  border: 1px solid var(--accent-strong);
  background: #fff;
  font-size: 17px;
  font-weight: 400;
  padding: 0 3px;
}
/* 書き換えたセルは5分間だけ青字にして、触った所がすぐ分かるようにする */
table.sheet-table td.cell-edited { color: #1558d6; }

/* 見出しの右端にある、列幅を変えるためのつまみ。
   ふだんは見えないが、近づくと縦線が出て、つかんで動かせることが分かる。 */
.col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
}
.col-resizer:hover { background: color-mix(in srgb, var(--accent-strong) 45%, transparent); }
/* 幅を変えている間は、表の文字が選択されないようにする */
body.col-resizing { user-select: none; cursor: col-resize; }

/* 見出しの行は、矢印のボタンが収まるよう本文の行より高くする */
table.sheet-table thead th { padding: 6px 5px; }
/* 税区分は列を細くしているので、見出しの文字だけ小さくして収める */
table.sheet-table thead th.col-tax { font-size: 15px; }
/* 見出しの右端に置く「戻る」「進む」。矢印のアイコンだけのボタンにする。 */
table.sheet-table thead th.col-action {
  padding: 4px 3px;
  line-height: 0;
}
button.sheet-history-btn {
  width: auto;
  min-width: 0;
  margin: 0 2px;
  padding: 3px 12px;
  font-size: 20px;
  line-height: 1.2;
  vertical-align: middle;
}
button.sheet-history-btn[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* 行の「追加」「削除」。行の高さに収まるよう小さくする。 */
table.sheet-table td.col-action .me-row-add,
table.sheet-table td.col-action .me-row-del {
  padding: 0 5px;
  font-size: 12px;
  line-height: 1.4;
}
table.sheet-table td.col-action button[disabled] {
  opacity: 0.4;
  cursor: default;
}
/* ボタンはベースラインに乗ると行を数px押し上げるので、この欄では行送りを持たせない。
   編集中はボタンを縦に並べるので、そのときだけ行送りを戻す。 */
/* 右の罫線ぶん中身が左に寄るので、右の余白を減らして見た目を中央にそろえる */
table.sheet-table td.col-action {
  line-height: 0;
  text-align: center;
  padding-right: 2px;
}
/* 操作の列は右端に貼り付いている。そのままだと上に貼り付けた見出しより手前に描かれ、
   スクロール中に見出しへ重なってしまうので、見出し（z-index:3）より後ろに置く。 */
table.sheet-table tbody td.col-action { z-index: 1; }
table.sheet-table tr[data-editing] td.col-action { line-height: 1.6; }
/* 編集ボタンは、簡易表と同じ行の高さに収まるよう小さくする。
   btn-uniform の幅110px・上余白4pxはここでは打ち消す。 */
table.sheet-table td.col-action button {
  width: auto;
  margin-top: 0;
  padding: 0 8px;
  font-size: 13px;
  line-height: 1.2;
  vertical-align: middle;
}
/* 部門名の折り返し用の枠は行間が広いので、この表では他のセルと同じ行間にそろえる */
table.sheet-table td .clamp2 { line-height: 1.1; }

/* 区画と区画のあいだの余白。罫線を消して白で塗り、表が区画ごとに切れて見えるようにする。 */
table.sheet-table tr.sheet-gap td {
  height: 20px;
  padding: 0;
  border: none;
  background: #fff;
}
/* 金額が0円の行（その月に当てはまる仕訳が無かった行を含む）。
   塗りだけ薄いグレーにして、文字は黒のままにする。
   いちばん左の区分列は区画ぜんぶをまたぐので、ここでは塗り替えない。 */
table.sheet-table tr.sheet-zero td:not(.col-group) { background: #f1f2f4; }
table.sheet-table td.col-amount { text-align: right; }

/* 取引金額の左上に出す「出金」「入金」。
   表示中と編集中で同じ位置に出したいので、金額の上の1行として置く。 */
.amount-direction {
  display: block;
  text-align: left;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

/* 「分割」（以前の「振込手数料分割」。class 名はそのまま）。編集中の取引金額の欄で、金額の真下ではなく行の下端近くに置く。
   入力欄と離すため、欄の下側に置き場所ぶんの余白をとってそこへ重ねる。
   「出金」「入金」が欄の左上に出るよう、中身は上詰めにする。 */
table.data-table td.col-amount-edit {
  position: relative;
  vertical-align: top;
  padding-bottom: 32px;
}
button.us-fee-split {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  padding: 3px 6px;
  font-size: 11px;
  white-space: nowrap;
  background: #f0f1f3;
  color: #555;
  border-color: var(--border);
}
button.us-fee-split:hover { background: #e3e5e9; }

/* ピンク色の行の理由。色だけでは分からないので文章で並べる */
.rule-pink-notes { margin: 8px 0; }
ul.rule-pink-list { margin: 4px 0 0; padding-left: 20px; }
ul.rule-pink-list li { margin-bottom: 6px; line-height: 1.5; }

/* 「貼付登録」。表をそのまま貼れるよう、横に広く折り返さない入力欄にする */
.paste-rules-box { max-width: 900px; }
.paste-rules-box textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

/* メニューバーの「金融仕訳」「クレジット仕訳」に出る赤丸。件数が0のときは隠す。 */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 9px;
  background: #d93025;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.nav-badge[hidden] { display: none; }

/* 金融CSVの取り込みポップアップ */
.bank-import-box { min-width: min(720px, 90vw); max-height: 80vh; overflow-y: auto; }
#paste-block { margin-top: 10px; }
#paste-block summary { cursor: pointer; font-size: 13px; }
#paste-lines {
  width: 100%;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* 一般仕訳タブの区画メニュー。押した区画の登録行と仕訳一覧だけを表示する。 */
.block-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

/* 一般仕訳の知らせの帯（⑤-1）。区画メニューのすぐ下に置き、利用者が「閉じる」を押すまで残す。
   緑＝保存済み、赤＝送っていない・保存されていない（取り消しを確かめた）、橙＝まだ確かめられていない・以前に処理済み。
   文字の色は、それぞれの地の色の上で WCAG AA（4.5:1）を満たす濃さにした。 */
.manual-entry-notices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: -6px 0 12px;
}
.manual-entry-notices[hidden] { display: none; }
.me-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
}
.me-notice-text { margin: 0; flex: 1 1 480px; }
.me-notice-icon { margin-right: 6px; font-weight: 700; }
.me-notice-volatile { display: block; font-size: 12px; }
.me-notice-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.me-notice-ok { background: var(--ok-bg); border-color: #b7ecc7; color: #14532d; }
.me-notice-error { background: var(--warn-bg); border-color: #f3c1c1; color: #7f1d1d; }
.me-notice-warn { background: #fff7e6; border-color: #f3d19c; color: #6b3500; }
.me-notice-note { background: var(--panel); color: var(--text); }

/* 金額が入っていない一般仕訳の帯と丸（⑤-2）。一覧を描くたびに数から出す（保存の結果の帯とは別）。
   区画の全部が0円なら強く（橙の帯）、一部だけなら弱く（灰色の1行）。橙の丸は赤丸（手当てが必要）と分ける。
   文字の色は地の色の上で WCAG AA（4.5:1）を満たす濃さにした。 */
.me-drafts { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; line-height: 1.6; }
.me-drafts-text { margin: 0; }
.me-drafts-strong { background: #fff7e6; border-color: #f3d19c; color: #6b3500; }
.me-drafts-weak { background: var(--panel); color: #4b5563; padding: 4px 12px; }
.nav-badge.draft-badge { background: #b45309; }
/* Q1：〔この区画の0円の仕訳を削除する〕と、その結果の文（一覧を描き直しても消えない置き場）・確かめの窓の一覧 */
.me-drafts-actions { margin-top: 6px; }
.me-drafts-status { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; line-height: 1.6; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: flex-start; }
.me-drafts-status[hidden] { display: none; }
.me-drafts-status-ok { background: var(--ok-bg); border-color: #b7ecc7; color: #14532d; }
.me-drafts-status-error { background: var(--warn-bg); border-color: #f3c1c1; color: #7f1d1d; }
.me-drafts-status-warn { background: #fff7e6; border-color: #f3d19c; color: #6b3500; }
.me-drafts-status-note { background: var(--panel); color: var(--text); }
.me-drafts-delete-box { max-width: min(860px, 94vw); }
.me-drafts-delete-list { max-height: 50vh; overflow: auto; }

.block-tab {
  padding: 6px 14px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  color: #333;
  cursor: pointer;
}

.block-tab:hover { background: color-mix(in srgb, var(--primary) 22%, #fff); }

/* 区画ボタンはドラッグでも並び替えられるが、まずは押すものなので指差しにする。
   実際につかんで動かしている間だけ、つかんだ形にする。 */
.block-tab[draggable="true"] { cursor: pointer; }
.block-tab.dragging { opacity: 0.5; cursor: grabbing; }

.block-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  font-weight: 700;
}

/* 区画メニューのいちばん右に寄せる管理系のボタン。区画そのものではないので見た目を分ける。 */
.block-tab-manage {
  margin-left: auto;
  background: #f4f4f4;
  color: #555;
}

/* 管理系のボタンが2つ以上あるときは、1つめだけを右へ寄せて残りはその隣に並べる */
.block-tab-manage ~ .block-tab-manage { margin-left: 0; }

.block-tab-manage:hover { background: #e6e6e6; }

/* 区画管理のすぐ右に置く月送り。「◀前月」「翌月▶」はボタン、あいだの年月は表示だけ。 */
.block-month-label {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  white-space: nowrap;
}
.block-month-btn { white-space: nowrap; }

/* ---------- 損益表の上の1本の行（左＝部門メニュー／右＝月送り） ---------- */
/* 左に「全体」＋部門のボタン、右に「◀前月・いまの月・翌月▶」を同じ行に置く。
   幅が足りないときは、この行だけを横にスクロールさせる（折り返したり隠したりしない）。
   この指定は損益表の行（.pl-toolbar の中）だけに効くので、他のタブの見た目は変わらない。 */
.pl-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  margin-bottom: 14px;
  overflow-x: auto;
  /* 横スクロールバーが出たときに、ボタンの下端が切れないようにする */
  padding-bottom: 2px;
}
/* 部門メニューは行の左端に貼り付け、1列のまま並べる（.block-menu の折り返し・余白を上書きする） */
.pl-toolbar > .block-menu.pl-toolbar-menu {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  margin: 0;
}
/* 月送りは行の右端に貼り付ける */
.pl-toolbar > .pl-month-nav {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 6px;
  margin-left: auto;
}
/* いまの月。年月が変わっても左右のボタンが動かないよう、幅を確保する。 */
.pl-month-nav .block-month-label { min-width: 7.5em; justify-content: center; }
.pl-month-nav button[disabled] { opacity: 0.5; cursor: default; }

/* 「管理」ボタンから開く仕訳区画の管理画面 */
.block-manager-box {
  max-width: min(920px, 94vw);
  width: 94vw;
  max-height: 88vh;
  overflow-y: auto;
}

/* 金融仕訳タブの「管理」「登録」から開く設定画面。表が横に長いので広めに取る。 */
.bank-manager-box,
.rule-manager-box {
  max-width: 96vw;
  width: 96vw;
  max-height: 88vh;
  /* ポップアップ自体はスクロールさせず、下の表だけを枠の中で動かす。
     こうすると見出しの行が枠の上に貼り付いたままになる。 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rule-manager-box #rule-manager-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* 区画メニューや注意書きが多いときは、ここでまとめてスクロールする */
  overflow-y: auto;
}
/* 表の枠。ここに高さの上限があるおかげで、見出しの行を上に貼り付けられる。
   縦に伸び縮みさせると中身の高さに引きずられて潰れるので、上限だけを決める。 */
.rule-manager-box .sheet-scroll {
  flex: none;
  max-height: 68vh;
}

.block-manager-box #blocks-table { width: 100%; }
.block-manager-box #blocks-table th:first-child,
.block-manager-box #blocks-table td:first-child { width: 28px; }
.block-manager-box #blocks-table th:nth-child(3) { width: 80px; }
.block-manager-box #blocks-table th:nth-child(4),
.block-manager-box #blocks-table th:nth-child(5) { width: 90px; }
.block-manager-box #blocks-table th:last-child { width: 80px; }
.block-manager-box .backup-heading { font-size: 14px; margin: 26px 0 8px; }

/* 定期仕訳の貼り付け欄 */
#template-paste {
  width: 100%;
  max-width: 900px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* 確認メッセージは一覧を並べることがあるので、改行をそのまま活かす。 */
.confirm-message {
  white-space: pre-line;
  max-height: 50vh;
  overflow-y: auto;
}

/* 1つを選ぶ確かめ（simpleDialogs.js の choiceModal）。選択肢を縦に並べ、説明は選択肢の下に小さく出す。 */
.choice-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}
.choice-option {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  cursor: pointer;
}
.choice-note {
  flex-basis: 100%;
  margin: 0 0 0 24px;
}
.cc-posting-note ul {
  margin: 4px 0 0;
  padding-left: 20px;
}

#autobackup-status { margin: 0 0 4px; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  background: #eef1f6;
  color: var(--muted);
}

.ok { color: var(--ok); }
.warn { color: var(--warn); }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 30, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-box {
  position: relative;
  background: var(--panel);
  border-radius: 10px;
  padding: 20px;
  min-width: 320px;
  max-width: 90vw;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

/* 直す必要のある入力欄（ルール管理のセルの書き換え）。赤枠で示す。
   作業用ソースの 97e7134 では使われていなかったので消したが、今の本番の ruleManager.js が input に付けるので残す（合流 段2-4）。
   select に付ける所は無いので、select.field-error は消した。 */
input.field-error {
  border: 2px solid var(--warn) !important;
  background: var(--warn-bg);
}

/* ポップアップ右上の閉じるボタン */
button.modal-close-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
button.modal-close-x:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.modal-box h3 { margin-top: 0; }
.modal-box .form-row { margin-bottom: 16px; }
.modal-box label { width: 100%; }
.modal-box select { width: 100%; }

footer.note {
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
}

/* 画面の上に数秒だけ出るお知らせ。取り込みなど、ポップアップを閉じたあとの結果を伝える。 */
.toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  max-width: min(680px, 92vw);
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: opacity 0.4s, transform 0.4s;
}

.toast-ok {
  background: var(--ok-bg);
  border: 1px solid #b7ecc7;
  color: #14532d;
}

.toast-warn {
  background: var(--warn-bg);
  border: 1px solid #f3c1c1;
  color: #7f1d1d;
}

.toast-out {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
}

/* クレジットカードの利用明細一覧 */
/* 利用日・利用店名・金額は、それぞれ中身が収まる最小の幅にする。
   width:1% と nowrap を組み合わせると、表全体も列も中身ぴったりの幅になる。 */
table.cc-table { width: auto; min-width: 0; }
table.cc-table th, table.cc-table td { white-space: nowrap; }
table.cc-table th.col-date, table.cc-table td.col-date,
table.cc-table th.col-desc, table.cc-table td.col-desc,
table.cc-table th.col-amount, table.cc-table td.col-amount { width: 1%; }
table.cc-table th.col-amount, table.cc-table td.col-amount { text-align: right; }
/* 幅をそろえたあとに念のため。はみ出す店名は「…」で切る。 */
table.cc-table td.col-desc { overflow: hidden; text-overflow: ellipsis; }

/* 利用者ごとの表は、下に積まずに右へ右へと並べる（人が変わるたびに右隣） */
.cc-people {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 18px;
  overflow-x: auto;
}

/* 1人ぶんの列。同じ人が何枚かカードを持っていれば、その人の表は縦に積む。 */
.cc-person-column {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cc-person-block { flex: 0 0 auto; }

/* まとめて表示している行。ほかの行と同じ白地のままにする。 */

/* CSV1本ぶんのかたまり。どのファイルから取り込んだ分かを区切って見せる。 */
.cc-import {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 16px 16px;
  margin-bottom: 22px;
  background: var(--panel);
}

/* 会社ごとの見出しと、その下の利用者ごとの見出し */
h3.cc-company {
  margin: 22px 0 6px;
  padding: 6px 10px;
  background: var(--accent-band);
  border-radius: 6px;
}

.cc-company-sum { font-size: 13px; font-weight: normal; }
h4.cc-person { font-size: 14px; margin: 14px 0 6px; }

/* 所属登録のポップアップ */
.owner-box { min-width: min(1180px, 96vw); max-height: 86vh; overflow-y: auto; }
.owner-box #owner-table { width: 100%; }
.owner-box #owner-table th:nth-child(1) { width: 28px; }
.owner-box #owner-table th:nth-child(2) { width: 130px; }
.owner-box #owner-table th:nth-child(3) { width: 280px; }
.owner-box #owner-table input { width: 100%; }

/* ---------- 会計システムの管理画面（#/companies） ---------- */
/* 日々の会計処理とは別の場所だと一目で分かるように、メニューバーの色と中身を変える。
   会社ごとのテーマカラーは使わず、どの会社で開いても同じ落ち着いた色にする。 */
/* .topbar nav の display:flex より強く効かせるため、同じ強さの指定にしている */
.system-only,
.topbar nav.system-only { display: none; }
body.system-mode .system-only { display: inline-flex; }
body.system-mode .topbar nav.system-only { display: flex; }
body.system-mode .accounting-only { display: none !important; }

body.system-mode .topbar {
  /* このバーの中の文字色（--on-primary）を白系に切り替える */
  --on-primary: #f3f4f6;
  background: #3f4756;
  border-bottom: 1px solid #2a3140;
}

/* メニューバーの右端のログイン名（auth.js が作る #user-chip）も、バーの文字色にそろえる。
   本文の黒い字のままだと、管理画面の濃いバーの上で 1.7:1 になり読めない。
   会計処理の画面では --on-primary が本文と同じ黒系なので、見た目は変わらない。
   ログイン名は「ユーザー管理」タブを開くリンクなので、指を置いたときだけ下線を出す。 */
.topbar #user-chip > span,
.topbar #user-chip > a { color: var(--on-primary); }
.topbar #user-chip > a { text-decoration: none; }
.topbar #user-chip > a:hover,
.topbar #user-chip > a:focus-visible { text-decoration: underline; }

/* 管理画面の「ユーザー管理」タブ（pages/userSettings.js）。左にボタン、右にその説明を並べる。 */
.user-settings-table { max-width: 900px; margin-bottom: 18px; }
.user-settings-table td { white-space: normal; vertical-align: middle; }
.user-settings-table td.col-action { width: 130px; text-align: center; }
.user-settings-table td.col-action .btn-uniform { margin-top: 0; }

body.system-mode .nav-link:hover { background: rgba(255, 255, 255, 0.16); }

body.system-mode .nav-link.nav-back {
  border: 1px solid rgba(255, 255, 255, 0.45);
}

/* 「管理画面」の札。ソフト名の右に小さく添える。 */
.system-label {
  align-items: center;
  padding: 2px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  color: #f3f4f6;
  font-size: 12px;
  font-weight: 600;
}

/* 管理画面の本文。会計処理の画面と紙の色を分けて、別の場所だと分かるようにする。
   会社ごとのテーマカラーに引っぱられないよう、この中だけ落ち着いた色に置き換える。 */
body.system-mode main#app {
  --accent-strong: #3f4756;
  --accent-soft: #e7eaef;
  --accent-band: #dfe3ea;
  --accent-mid: #cfd5de;
  background: #eef0f4;
  min-height: calc(100vh - 53px);
}

/* 管理画面ではタブがそのまま画面の切り替えになるので、押せる場所として大きめに見せる。 */
body.system-mode .tabs {
  gap: 6px;
  border-bottom: none;
  margin-bottom: 18px;
}

body.system-mode .tab-btn {
  padding: 9px 18px;
  border: 1px solid #c8cdd6;
  border-radius: 8px;
  background: var(--panel);
  color: #4b5565;
  font-size: 14px;
}

body.system-mode .tab-btn:hover { background: #e7eaef; }

body.system-mode .tab-btn.active {
  background: #3f4756;
  border-color: #3f4756;
  color: #fff;
  font-weight: 600;
}

/* 管理画面の「会計処理へ戻る」は、メニューバーの右端に寄せる */
body.system-mode .nav-link.nav-back { margin-left: auto; }

/* クレジットカードのメニュー。計上会社と計上年月は右端に寄せる。 */
.cc-menu { align-items: center; }
.cc-menu .cc-view-company {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.cc-menu button.cc-view-period { white-space: nowrap; }

/* まとめ登録のポップアップ */
.bundle-box { min-width: min(760px, 94vw); max-height: 86vh; overflow-y: auto; }

/* まとめ登録：上に置くおまとめ名の一覧。押すと下に詳細が出る。 */
table.bundle-list-table {
  width: 100%;
  margin-bottom: 18px;
  table-layout: fixed;
}

table.bundle-list-table th { width: 200px; background: var(--accent-band); }
table.bundle-list-table td.drag-handle { width: 200px; text-align: center; cursor: pointer; }
table.bundle-list-table td:last-child { width: 150px; color: var(--muted); font-size: 12px; }
table.bundle-list-table input { width: 100%; }
table.bundle-list-table tr.bundle-list-row { cursor: pointer; }
table.bundle-list-table tr.bundle-list-row:hover td { background: var(--accent-soft); }
table.bundle-list-table tr.bundle-list-row.selected td { background: var(--accent-mid); font-weight: 700; }
/* 選んだ行は地の色が濃いので、うすい字ではなく本文の字にする（うすい字だと 3.2:1 で読みにくい） */
table.bundle-list-table tr.bundle-list-row.selected td:last-child { color: var(--text); }
table.bundle-list-table tr.dragging { opacity: 0.5; }
.bundle-list-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* まとめ登録：選んだおまとめの条件の表。1行目がおまとめ名、2行目から条件。 */
table.bundle-table {
  width: 100%;
  margin-bottom: 16px;
  table-layout: fixed;
}

table.bundle-table th { width: 200px; background: var(--accent-band); }
table.bundle-table td:nth-child(2) { width: auto; }
table.bundle-table td:nth-child(3) { width: 150px; color: var(--muted); font-size: 12px; }
table.bundle-table td:last-child { width: 40px; text-align: center; }
table.bundle-table select, table.bundle-table input { width: 100%; }

/* 行を消すための小さな×ボタン */
button.btn-x {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}
button.btn-x:hover { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }

/* 明細の行。クリックするとおまとめに入れるポップアップが出る。 */
table.cc-table tr.cc-row { cursor: pointer; }
table.cc-table tr.cc-row:hover td { background: var(--accent-soft); }

/* 明細の行から開くおまとめ登録のポップアップ */
.quick-bundle-box { min-width: min(460px, 92vw); }
.quick-bundle-shop {
  margin: 4px 0 14px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  font-weight: 700;
}

/* 年月カレンダーに出す青丸。取り込んだCSVの本数など、件数を月の横に添える。 */
.period-mark-blue { background: #1565c0 !important; }

/* 色の付いた行はどこを押しても編集に切り替わる */
table.journal-table tr.row-clickable { cursor: pointer; }

/* 補助の欄に置く小さな登録ボタン。補助を選んだらそのまま押せる位置にある。 */
button.us-save-mini {
  display: block;
  margin: 8px 0 0 auto;
  padding: 2px 12px;
  font-size: 11px;
  line-height: 1.4;
}
button.us-save-mini:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- 仕訳一覧の期間ボタン（年度全体＋12か月） ---------- */
/* 区画のボタン帯（丸い錠剤形）と見分けがつくよう、角の少ない四角いボタンにする。
   先頭の「全体」は年度の12か月ぶん、続く12個はその年度の各月。 */
.period-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.block-menu-label {
  font-size: 12px;
  color: var(--muted);
  margin-right: 4px;
  white-space: nowrap;
}
.period-tab {
  padding: 5px 12px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: #333;
  cursor: pointer;
  white-space: nowrap;
}
.period-tab:hover { background: color-mix(in srgb, var(--primary) 22%, #fff); }
.period-tab.active {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
  font-weight: 700;
}
.period-tab-year { font-weight: 600; }
/* 押せない区画メニューのボタン */
.block-tab[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.block-tab[disabled]:hover { background: #f4f4f4; }
/* 一覧を読み直している間は薄くして、古い表だと分かるようにする */
#entry-list[aria-busy="true"] { opacity: 0.6; }
/* 日付が空の行に出す「どの月の行か」（periodHint を渡したときだけ） */
.sheet-period-hint {
  color: var(--muted);
  font-size: 13px;
}

/* ---------- 税区分の手動変更(赤字) ---------- */
/* 科目の既定税区分と違う税区分を人が選んだ行の税区分。文字色だけを赤にする。
   科目・税区分のカラー(style 属性の文字色・太字)や、書き換えたセルの5分間の青字(td.cell-edited)より
   優先させるため !important にする。太さ・背景は変えない。
   付けるのは accountTaxDefaults.js の isTaxOverridden が true のときだけ(TAX_OVERRIDE_CLASS)。 */
.tax-manual-override,
table.sheet-table td.tax-manual-override,
table.sheet-table td.cell-edited.tax-manual-override,
.tax-manual-override input,
.tax-manual-override select { color: #d32f2f !important; }

/* 設定→勘定科目で保存に失敗した行。その欄の下に理由を出し、画面の値は保存されている内容に戻す。 */
.master-table tr.row-save-error td { background: var(--warn-bg); }
.master-table .cell-error {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--warn);
  white-space: normal;
}
/* 勘定科目の追加に失敗したときの理由(追加欄の下) */
#add-error {
  margin: 4px 0 10px;
  font-size: 13px;
  color: var(--warn);
}
/* 一般仕訳の期首残高の印（修正 2）。日付のセルの札と、行の〔期首〕の押しボタン（押している間は濃い色）。 */
.opening-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  font-size: 11px;
  line-height: 1.5;
  border: 1px solid #4b5563;
  border-radius: 3px;
  color: #1f2937;
  background: #f3f4f6;
  white-space: nowrap;
}
button.me-opening[aria-pressed="true"] {
  background: #1f4f8a;
  border-color: #1f4f8a;
  color: #fff;
}
button.me-opening[aria-disabled="true"] {
  color: #4b5563;
  border-style: dashed;
}
/* 一般仕訳の要修正：開始仕訳らしい行・諸口の組（修正 2・6） */
.me-review-table td.num { text-align: right; }
/* 種別が未設定の科目（修正 1）。赤枠と「未設定」の文字・説明の文で示す（色だけに頼らない）。 */
.master-table td.account-type-unset select {
  border: 2px solid var(--warn);
}
.master-table .type-unset-note {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--warn);
  white-space: normal;
}
/* 決算書の区分（ADR 0022）。種別と合わない区分の行は、赤枠と注の文で示す（色だけに頼らない）。 */
.master-table td.bs-group-cell { white-space: nowrap; }
.master-table td.bs-group-cell select[aria-invalid="true"] {
  border: 2px solid var(--warn);
}
.master-table .bs-group-mismatch,
.master-table .bs-group-shadowed {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--warn);
  white-space: normal;
}
.master-table .bs-group-none { color: var(--muted); }

/* ---------- 仕訳一覧: 列幅 ---------- */

/* 列幅も「…」での省略も、他の仕訳の表と同じ共通の指定(journal-table・sheet-table)に任せる。
   枠は画面いっぱいのままにして、表だけを中央に置く。
   画面が表の幅より狭いときは左右の余白が0になるので、左端も隠れず、枠の中で横にスクロールできる。 */
.journal-list-scroll table.journal-list-table { margin-inline: auto; }

/* ---------- 仕訳一覧: 一般仕訳と同じ列の並び(区画→借方→貸方→元帳適用→取引金額→日付→取引No→操作) ---------- */
/* 区画の列は、一般仕訳の区分の列(col-group)と同じ見た目(薄いグレー・左寄せ)にそろえる。
   赤い行(不一致・読めない金額)では、他の欄と同じく赤のままにする。 */
.journal-list-scroll table.journal-list-table td.col-source {
  background: #f7f8fa;
  font-weight: 500;
  text-align: left;
}
.journal-list-scroll table.journal-list-table tr.journal-list-unbalanced td.col-source,
.journal-list-scroll table.journal-list-table tr.journal-list-invalid td.col-source { background: var(--warn-bg); }
/* 操作の列。この画面では幅だけ確保した空の欄(ボタンは置かない)。 */
.journal-list-scroll table.journal-list-table th.col-action,
.journal-list-scroll table.journal-list-table td.col-action { text-align: center; }
/* 取引金額(1列)。借方と貸方が同じならその金額を1つだけ出す。
   違うとき・片方が空欄のとき・読み取れないときは、借方・貸方を見出し付きで2行に出す。
   決め打ちの列幅でも金額が隠れないよう、この欄だけ折り返しを許す(全文は title でも見られる)。 */
.journal-list-scroll table.journal-list-table td.num.journal-list-amount-both {
  white-space: normal;
  line-height: 1.2;
}
.journal-list-amount-part { display: block; white-space: nowrap; }
.journal-list-amount-label {
  display: inline-block;
  min-width: 2.6em;
  margin-right: 4px;
  font-size: 11px;
  color: var(--muted);
  text-align: left;
}

/* ---------- キーボード操作と読み上げ（監査 分野14 / GPT F4） ---------- */
/* 見た目には出さず、読み上げソフトにだけ伝える文言（liveRegion.js の知らせる欄など） */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* キーボードで選んだ場所をはっきり見せる（マウスで押したときは出さない） */
table.sheet-table td[data-field]:focus-visible,
table.drill-table td[data-field]:focus-visible,
.drag-handle:focus-visible,
tr[tabindex]:focus-visible,
.sheet-scroll[tabindex]:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: -3px;
}
.drag-handle:focus-visible { background: var(--accent-soft); }

/* ④ 2-1（2回目）：その場でログインし直す窓（loginWaitDialog.js）の欄 */
.login-wait-form { margin: 8px 0 4px; }
.login-wait-form .login-wait-field { display: block; margin: 8px 0 4px; font-size: 13px; }
.login-wait-form .login-wait-field input[type="text"],
.login-wait-form .login-wait-field input[type="password"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 2px;
  padding: 6px 8px;
  font-size: 15px;
}
.login-wait-form .login-wait-id[readonly] { background: var(--accent-soft); }
.login-wait-form .remember-row { display: flex; align-items: center; gap: 6px; }
.login-wait-form .login-wait-submit { margin-top: 8px; }

/* ---------- 決算確定（年度ロック。ADR 0023） ---------- */
.fiscal-close-box { max-width: 900px; max-height: 85vh; overflow: auto; }
.fiscal-conditions { padding-left: 1.2em; }
.fiscal-conditions li { margin: 4px 0; }
.fiscal-conditions li.fiscal-ng strong { color: var(--warn); }
.fiscal-guide { padding-left: 1.2em; }
.fiscal-pending { border: 1px solid #f3c1c1; padding: 8px 12px; margin: 8px 0; }
/* 一般仕訳：確定済みの年度の月の帯（変更できない） */
.fiscal-lock-band { border: 1px solid #f3c1c1; background: var(--warn-bg); padding: 6px 10px; margin: 6px 0; }