/* 家計簿の見た目。白地の業務画面。色の意味:
   収入=青 #2a78d6 / 支出=橙 #eb6834（色覚の違いでも見分けられることを検査済み）
   カレンダーの支出の濃淡=橙の5段階 #f4a072 #ec7f4c #d8622c #b44d1f #8a3a16（段の差と白地との差を検査済み・app.js）
   状態は色だけで伝えない（必ず印と言葉を添える）: 注意=#fab219 / 予算超え=#d03b3b / 順調=#0ca30c */

:root {
  --ink: #1f1f1d;
  --ink2: #52514e;
  --ink3: #6b6a66;
  --muted: #898781;
  --line: #e1e0d9;
  --line2: #c3c2b7;
  --page: #ffffff;   /* 画面全体の地も白（2026-10-08 中田さん：大きな面に色を敷かない）。区切りは枠の細い線で付ける */
  --card: #ffffff;
  --accent: #256abf;
  --accent-soft: #e8f0fb;
  --income: #2a78d6;
  --expense: #eb6834;
  --warn: #fab219;
  --over: #d03b3b;
  --good: #0ca30c;
  --nav-h: 60px;
  --font: "BIZ UDPGothic", "Noto Sans JP", "Meiryo", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--page);
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; line-height: 1.45; }
h1, h2, h3 { margin: 0; font-weight: 700; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- 線画のアイコン ---------- */
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico.sm { width: 16px; height: 16px; }

/* ---------- ボタン ---------- */
.iconBtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--ink2); cursor: pointer;
}
.iconBtn:hover { background: #efefec; }
.iconBtn:focus-visible, .btn:focus-visible, .btnPrimary:focus-visible, .navBtn:focus-visible, .segBtn:focus-visible, .linkBtn:focus-visible, .row:focus-visible, .bdRow:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.btn, .btnPrimary, .btnDanger {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line2); background: #fff; color: var(--ink);
}
.btn:hover { background: #f4f4f2; }
a.btn { text-decoration: none; }
.btnPrimary { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 700; }
.btnPrimary:hover { background: #1c5cab; }
.btnDanger { border-color: #e6b8b8; color: #b42d2d; }
.btnDanger:hover { background: #fdf3f3; }
.btn:disabled, .btnPrimary:disabled { opacity: .55; cursor: default; }
.linkBtn { display: inline-flex; align-items: center; min-height: 44px; border: 0; background: none; padding: 0 8px; margin: -8px -4px; color: var(--accent); cursor: pointer; font-size: 14px; }
.linkBtn:hover { text-decoration: underline; }

/* ---------- ログイン ---------- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.loginBox { width: 100%; max-width: 340px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; }
.loginBox h1 { font-size: 22px; margin-bottom: 8px; }
.loginBox label { font-size: 14px; color: var(--ink2); }
.loginBox input { height: 44px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 8px; }
.loginBox .btnPrimary { margin-top: 8px; min-height: 44px; }
.err { margin: 0; color: #b42d2d; font-size: 14px; }

/* ---------- 上の帯（期間） ---------- */
.app { min-height: 100vh; padding-bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); }
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top));
  background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line);
}
.period { display: flex; align-items: center; gap: 2px; min-width: 0; }
.periodLabel { font-size: 18px; white-space: nowrap; padding: 0 4px; }
.periodSub { display: block; font-size: 12px; font-weight: 400; color: var(--ink3); }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 8px; flex: none; }
.segBtn { position: relative; border: 0; background: #fff; padding: 6px 14px; cursor: pointer; color: var(--ink2); }
.segBtn:first-child { border-radius: 7px 0 0 7px; }
.segBtn:last-child { border-radius: 0 7px 7px 0; }
.segBtn + .segBtn { border-left: 1px solid var(--line2); }
/* 指で押す的を44px角まで広げる（見た目は変えず、押せる範囲だけ外へ）。隣り合う的は外側にだけ広げて重ねない */
.segBtn::after { content: ""; position: absolute; top: -5px; bottom: -5px; left: 0; right: 0; }
.segBtn:first-child::after { left: -4px; }
.segBtn:last-child::after { right: -4px; }
.iconBtn { position: relative; }
.iconBtn::after { content: ""; position: absolute; inset: -5px; }   /* 枠の内側から測るので 34+5+5=44 */
.segBtn[aria-selected="true"] { background: var(--accent); color: #fff; font-weight: 700; }

/* ---------- 下のメニュー ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: center;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: #fff; border-top: 1px solid var(--line);
}
.navBtn {
  position: relative; flex: 1 1 0; max-width: 140px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; background: none; color: var(--ink3); cursor: pointer; font-size: 12px;
}
.navBtn[aria-current="page"] { color: var(--accent); font-weight: 700; }
.navBtn .navIcon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; }   /* 真ん中の丸と同じ高さにそろえる＝下の文字が一列に並ぶ */
.navAdd .navIcon { border-radius: 50%; background: var(--accent); color: #fff; }
.navAdd[aria-current="page"] .navIcon { background: #1c5cab; }
.badge {
  position: absolute; top: 4px; left: 50%; margin-left: 6px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--over); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* ---------- 並び ---------- */
.main { max-width: 1200px; margin: 0 auto; padding: 12px; }
.cols { display: grid; grid-template-columns: 1fr; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.view > .card + .card { margin-top: 12px; }
@media (min-width: 960px) {
  .main { padding: 16px 20px; }
  .cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
  .col { gap: 16px; }
  /* 上の帯の中身を、本文の列（最大1200px・中央）の端にそろえる */
  .top { padding-left: max(20px, calc((100% - 1200px) / 2 + 20px)); padding-right: max(20px, calc((100% - 1200px) / 2 + 20px)); }
}
.col { container-type: inline-size; }   /* 列の幅で中の並びを切り替える（収入・支出・差額） */

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.cardHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cardHead .cardTitle { margin-bottom: 0; }
.cardTitle { font-size: 15px; margin-bottom: 10px; }
.cardTools { display: flex; align-items: center; gap: 4px; }
.hint { margin: 0 0 10px; font-size: 13px; color: var(--ink3); }
.empty { padding: 18px 4px; color: var(--ink3); font-size: 14px; text-align: center; }

/* ---------- 収入・支出・差額 ---------- */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; min-width: 0; }
.kpi + .kpi { border-left: 1px solid var(--line); }
.kpiLabel { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); }
.kpiValue { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpiSub { font-size: 12px; color: var(--ink3); }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.key.income { background: var(--income); }
.key.expense { background: var(--expense); }
/* 列が狭いとき（スマホ・PCの2列の左）は、横3つに並べると金額が切れるので、1行に1つ（見出し左・金額右）にする */
@container (max-width: 600px) {
  .kpis { grid-template-columns: 1fr; }
  .kpi { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 0; padding: 9px 14px; }
  .kpi + .kpi { border-left: 0; border-top: 1px solid var(--line); }
  /* ★.kpi の中だけに絞る＝同じ名前の部品（お店ごとの覚えの「→ 使い道」など）を巻き込まない（10月7日に3段に崩れた） */
  .kpi .kpiValue { text-align: right; font-size: 20px; }
  .kpi .kpiSub { grid-column: 1 / -1; text-align: right; }
}

/* ---------- 横の棒（予算・目標・内訳） ---------- */
.meter { position: relative; height: 10px; border-radius: 5px; background: #eeede8; overflow: hidden; }
.meterFill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--expense); }
.meterFill.income { background: var(--income); }
.meterFill.over { background: var(--over); }
.meterMark { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.meterText { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--ink2); flex-wrap: wrap; }
.meterBig { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.budgetTop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }

.status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 1px 7px 1px 5px; border-radius: 10px; white-space: nowrap; }
.status.warn { background: #fff6e0; color: #7a5300; }
.status.warn .ico { color: #c98500; }
.status.over { background: #fdeaea; color: #a32727; }
.status.over .ico { color: var(--over); }
.status.good { background: #e9f7e9; color: #1d6b1d; }
.status.good .ico { color: var(--good); }
.status.review { background: #fff6e0; color: #7a5300; }
.status.review .ico { color: #c98500; }
.status.plain { background: #efefec; color: var(--ink2); font-weight: 400; }

/* 内訳 */
.breakdown { display: flex; flex-direction: column; }
.bdRow {
  display: grid; grid-template-columns: minmax(84px, 9em) minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
  width: 100%; min-height: 44px; padding: 7px 4px; border: 0; border-bottom: 1px solid #f0efea; background: none; text-align: left; cursor: pointer;
}
.bdRow:hover { background: #f8f8f6; }
.bdName { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 14px; }
.bdName span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bdAmt { font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.bdAmt small { color: var(--ink3); margin-left: 6px; font-size: 12px; }
.bdBar { height: 8px; border-radius: 0 4px 4px 0; background: var(--expense); min-width: 2px; }
.bdBar.income { background: var(--income); }
.bdTrack { min-width: 0; }
.bdSub { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--ink3); padding-left: 20px; }
.bdRow.child { padding-left: 4px; background: #fbfbfa; }
.bdRow.child .bdName { padding-left: 20px; font-size: 13px; color: var(--ink2); }
.bdRow.child .bdBar { height: 6px; opacity: .8; }
.caret { display: inline-flex; width: 16px; color: var(--ink3); transition: transform .15s; }
.caret.open { transform: rotate(90deg); }
.caret.none { visibility: hidden; }

/* ---------- グラフ ---------- */
.chart { position: relative; }
.legend { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--ink2); margin-bottom: 6px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.chartSvg { display: block; width: 100%; height: auto; overflow: visible; }
.chartSvg text { font-family: var(--font); }
.hit { cursor: pointer; outline: none; }

/* カレンダー */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }   /* 隙間2px＝スマホ(390px)でも1マス44px以上の幅 */
.calHead { font-size: 12px; color: var(--ink3); text-align: center; padding-bottom: 2px; }
.calHead.sun { color: #b23a3a; }
.calHead.sat { color: #2f62a8; }
.calCell {
  /* ★width:100% が要る＝縦横比と最低の高さ(44px)があると、幅が高さから逆算されて列より広がり、隣のマスに重なる
     （10月7日に実測で8px重なった。min-width:0 では直らなかった）。幅を列に固定すれば、高さだけが縦横比と最低の高さで決まる */
  position: relative; width: 100%; aspect-ratio: 1 / 0.82; min-height: 44px; border: 0; border-radius: 6px; padding: 3px 4px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  background: #f3f3f0; color: #141413; cursor: pointer; text-align: left; overflow: hidden;   /* 中ほどの橙(#d8622c)の上でも文字の濃さが足りるよう、ふつうの文字より少し濃く */
}
.calCell.blank { background: none; cursor: default; }
.calCell.future { background: #fafaf8; color: var(--muted); cursor: default; }
.calCell.today { box-shadow: inset 0 0 0 2px var(--ink); }
.calCell.dark { color: #fff; }
.calDay { font-size: 12px; line-height: 1.2; }
.calAmt { font-size: 11px; line-height: 1.2; align-self: flex-end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calCell:hover:not(.blank):not(.future) { box-shadow: inset 0 0 0 2px var(--accent); }
.calLegend { display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin-top: 8px; font-size: 12px; color: var(--ink3); }
.calLegend i { display: inline-block; width: 16px; height: 12px; border-radius: 3px; }
@media (max-width: 420px) { .calAmt { font-size: 10px; } }

/* 表で見る */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl thead th { color: var(--ink2); font-weight: 700; border-bottom: 1px solid var(--line2); }
.tblWrap { overflow-x: auto; }

/* ふきだし */
.tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: #fff; border: 1px solid var(--line2); border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.12);
  padding: 8px 10px; font-size: 13px; min-width: 120px;
}
.tip b { display: block; margin-bottom: 4px; }
.tipRow { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.tipRow > span:first-child { display: inline-flex; align-items: center; gap: 5px; color: var(--ink2); }
.tipRow > span:last-child { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- 明細の並び ---------- */
.rows { display: flex; flex-direction: column; }
.dayHead { font-size: 12px; color: var(--ink3); padding: 10px 4px 4px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center;
  width: 100%; padding: 9px 4px; border: 0; border-bottom: 1px solid #f0efea; background: none; text-align: left; cursor: pointer;
}
.row:hover { background: #f8f8f6; }
.rowMain { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rowStore { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowAmt { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rowAmt.income::before { content: "+"; }
.rowAmt.excluded { color: var(--muted); text-decoration: line-through; font-weight: 400; }
.rowSub { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--ink3); }
.rowSub .ico { color: var(--ink3); }
.catTag { display: inline-flex; align-items: center; gap: 4px; }
.listSum { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--ink2); padding: 8px 4px; border-bottom: 1px solid var(--line); }
.listSum b { color: var(--ink); font-variant-numeric: tabular-nums; }
.listSum .spacer { flex: 1; }
.more { padding: 10px; text-align: center; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters input, .filters select { height: 38px; border: 1px solid var(--line2); border-radius: 8px; padding: 0 10px; background: #fff; }
.filters input { flex: 1 1 180px; min-width: 0; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border: 1px solid var(--accent); border-radius: 16px; background: var(--accent-soft); color: var(--accent); cursor: pointer; font-size: 13px; }

/* ---------- 入力のかたち ---------- */
.form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > label, .fieldLabel { font-size: 13px; color: var(--ink2); }
.field input[type="text"], .field input[type="date"], .field input[type="time"], .field input[type="number"], .field input:not([type]), .field select, .field textarea {
  width: 100%; height: 42px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 8px; background: #fff;
}
.field textarea { height: auto; min-height: 64px; padding: 8px 10px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .filters input:focus, .filters select:focus, .loginBox input:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}
.field .amount { font-size: 20px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.fieldRow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chip::after { content: ""; position: absolute; inset: -4px; }
.check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.check small { display: block; color: var(--ink3); font-size: 12px; }
.formBtns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding-top: 4px; }
.formBtns .grow { flex: 1; }
.kindSeg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; }
.kindSeg button { min-height: 44px; border: 0; background: #fff; padding: 8px 0; cursor: pointer; color: var(--ink2); }
.kindSeg button + button { border-left: 1px solid var(--line2); }
.kindSeg button[aria-pressed="true"] { background: var(--ink); color: #fff; font-weight: 700; }
.formMsg { font-size: 13px; color: #b42d2d; min-height: 0; margin: 0; }

/* 画像を上げる */
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 120px; border: 2px dashed var(--line2); border-radius: 10px; color: var(--accent); cursor: pointer; background: #fbfcfe;
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop .ico { width: 28px; height: 28px; }
.uploadLog { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.upItem { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.upItem b { display: block; font-size: 12px; color: var(--ink3); font-weight: 400; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upItem p { margin: 0; white-space: pre-line; }
.upItem.busy p { color: var(--ink3); }
.upItem.ng { border-color: #e6b8b8; background: #fdf6f6; }

/* 読み取り待ち */
.pend { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 10px 4px; border-bottom: 1px solid #f0efea; align-items: start; }
.pend img, .thumb { width: 72px; height: 96px; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--line); background: #f3f3f0; }
.pendBody { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px; }
.pendBtns { display: flex; gap: 6px; flex-wrap: wrap; }
.pendBtns .btn, .pendBtns .btnDanger { min-height: 32px; padding: 4px 10px; font-size: 13px; }

/* 設定 */
.setRows { display: flex; flex-direction: column; }
.setRow { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid #f0efea; }
.setRow input, .setRow select { height: 36px; border: 1px solid var(--line2); border-radius: 8px; padding: 0 8px; width: 100%; background: #fff; text-align: right; }
.setGroup { font-size: 12px; color: var(--ink3); padding: 10px 0 2px; }
.setTotal { display: flex; justify-content: space-between; padding: 10px 0 4px; font-weight: 700; }
.catRow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 76px 36px; gap: 6px; align-items: center; padding: 5px 0; }   /* 行の高さ44＝ごみ箱の押せる範囲（上下4pxずつ広げた分）が隣の行と重ならない */
.catRow input, .catRow select { height: 34px; border: 1px solid var(--line2); border-radius: 8px; padding: 0 8px; width: 100%; background: #fff; min-width: 0; }
.catHead { font-size: 12px; color: var(--ink3); }
.catHeadM { display: none; }
@media (max-width: 520px) {   /* スマホ：横に4つ並べると名前が欄で切れるので、名前の下にまとめを置く（2段） */
  .catRow { grid-template-columns: minmax(0, 1fr) 70px 36px; grid-template-areas: "n k d" "g k d"; gap: 4px 6px; padding: 6px 0; border-bottom: 1px solid #f0efea; }
  .catRow > :nth-child(1) { grid-area: n; }
  .catRow > :nth-child(2) { grid-area: g; }
  .catRow > :nth-child(3) { grid-area: k; align-self: center; }
  .catRow > :nth-child(4) { grid-area: d; align-self: center; }
  .catRow.catHead { grid-template-areas: "m k d"; border-bottom: 0; }
  .catRow.catHead > span:nth-child(1), .catRow.catHead > span:nth-child(2) { display: none; }
  .catRow.catHead > .catHeadM { display: block; grid-area: m; }
}
.ruleRow { display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid #f0efea; font-size: 14px; }
.ruleRow span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ruleAdd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; margin-top: 10px; }
.ruleAdd input, .ruleAdd select { height: 36px; border: 1px solid var(--line2); border-radius: 8px; padding: 0 8px; min-width: 0; background: #fff; }

/* ---------- 1件の編集（下から出る板） ---------- */
.sheet { position: fixed; inset: 0; z-index: 50; background: rgba(20,20,18,.45); display: flex; align-items: flex-end; justify-content: center; }
.sheetBox {
  width: 100%; max-width: 560px; overflow: auto;
  max-height: 92vh; max-height: 92dvh;   /* dvh＝iPhoneのブラウザの下の帯が出ているときの高さで測る（帯の分だけ見出しが上に切れないように） */
  background: #fff; border-radius: 14px 14px 0 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
}
.sheetHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sheetHead h2 { font-size: 16px; }
.sheetImg { display: block; max-width: 100%; max-height: 30vh; margin: 0 auto 12px; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; }
/* 板の中では「保存」を下に貼り付ける＝画像や長い入力の下まで指で送らなくても押せる */
.sheetBox .formBtns { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); z-index: 1; margin: 0 -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
.sheetImg.big { max-height: none; cursor: zoom-out; }
@media (min-width: 960px) {
  .sheet { align-items: center; }
  .sheetBox { border-radius: 14px; max-height: 88vh; }
}

/* 知らせ */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  /* 幅は文の長さに合わせ、最大幅で折り返す（幅を決めないと、真ん中から右の半分しか使えずスマホで細く折れる） */
  z-index: 70; width: max-content; max-width: min(92vw, 480px); padding: 10px 14px; border-radius: 10px;
  background: #24241f; color: #fff; font-size: 14px; white-space: pre-line; box-shadow: 0 6px 20px rgba(0,0,0,.2);
  pointer-events: none;   /* 知らせは押しても何も起きない＝出ている数秒の間も、下のボタンを押せるように */
}
.toast.ng { background: #8f1f1f; }

.loading { opacity: .55; transition: opacity .15s; }

/* スマホでは指で押すので、ボタン・入力欄・選ぶ欄の高さを44pxにそろえる（★ほかの決まりより後ろに置く＝上書きされないように）。
   入力欄の文字は16px：iPhoneは16pxより小さい欄を押すと画面を勝手に拡大するため */
@media (max-width: 959px) {
  .btn, .btnPrimary, .btnDanger, .pendBtns .btn, .pendBtns .btnDanger { min-height: 44px; }
  input:not([type="checkbox"]):not([type="file"]), select { min-height: 44px; }
  input, select, textarea { font-size: 16px; }
  .field .amount { font-size: 20px; }
}