/* くるみ家計簿 — 画面の見た目(2026-10-27 作成。段階2 の殻)。色は :root の変数にまとめ、色合いの読み替え(方法2 の COLOR_THEMES)は段階5 で移す */
:root {
  --bg: #fbf4ec;          /* 背景(アイコンの上側のベージュに合わせる) */
  --card: #ffffff;
  --ink: #3b3330;
  --muted: #7a6f6a;
  --line: #e9ddd3;
  --accent: #e07a6f;      /* 風呂敷の赤 */
  --accent-soft: #f8d9d4;
  --ok: #4f9d69;
  --warn: #d9a441;
  --ng: #c84b4b;
  --premium: #d19a2a;     /* ★ の札 */
  --radius: 14px;
  --shadow: 0 2px 10px rgba(80, 50, 40, 0.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif; font-size: 16px; line-height: 1.6; }
body { min-height: 100vh; -webkit-text-size-adjust: 100%; background: transparent; } /* 背景色は html に(body::before の柄の層は body の背景より後ろに描かれるため。v187) */
a { color: var(--accent); }
button { font: inherit; }
input, select, textarea { font: inherit; }
.hidden { display: none !important; }

/* ===== ログイン前 ===== */
.gate { max-width: 440px; margin: 0 auto; padding: 32px 16px 48px; text-align: center; }
.gate .logo { width: 112px; height: 112px; border-radius: 26px; box-shadow: var(--shadow); }
.gate h1 { font-size: 26px; margin: 14px 0 6px; letter-spacing: 0.04em; }
.gate .tagline { margin: 0; font-size: 17px; color: var(--ink); }
.gate .tagline-sub { margin: 2px 0 22px; font-size: 14px; color: var(--muted); }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 16px; text-align: left; }
.card h2 { font-size: 17px; margin: 0 0 12px; }
.field { display: block; margin: 10px 0; }
.field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.field input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.field input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.btn { display: block; width: 100%; padding: 12px; margin-top: 12px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.google { background: #fff; color: var(--ink); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn.google.stacked { flex-direction: column; gap: 0; line-height: 1.35; } /* 「Google で登録」と補足を2行に(2026-10-28 ユーザー指示) */
.btnSub { font-size: 12px; font-weight: 400; color: var(--muted); }
.btn.link { background: none; color: var(--accent); padding: 6px; margin: 0; width: auto; display: inline; font-weight: 500; }
.btn.link.inlineLink { padding: 0 2px; font-size: inherit; text-decoration: underline; } /* 文の中の「再読み込み」(基本設定。2026-10-29) */
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; margin: 14px 0 4px; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 12px; font-size: 14px; }
.note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.status { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; }
.status:empty { min-height: 0; margin: 0; } /* 知らせが無いときは場所を取らない(ログインの枠を短く。2026-10-28 ユーザー指示) */
.status.ok { color: var(--ok); }
.status.ng { color: var(--ng); }
.status.busy { color: var(--muted); }
.foot { margin-top: 26px; font-size: 13px; color: var(--muted); }
.foot a { color: var(--muted); margin: 0 6px; }
.checkbox { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin-top: 12px; }
.checkbox input { margin-top: 5px; }
.notice { background: #fff6e8; border: 1px solid #f1dcb8; border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 12px 0; }
.codeCheck { font-size: 14px; margin: 6px 0 0; color: var(--ok); }
.codeCheck.ng { color: var(--ng); }

/* ===== ログイン後の殻 ===== */
.topbar { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid var(--line); }
.topbar .row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.topbar img { width: 34px; height: 34px; border-radius: 9px; }
.topbar .title { font-weight: 700; }
.topbar .sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
/* 家計簿の名前と「○○さん」は別の行に。途中では折り返さず、長いときは … で省く(2026-10-28 ユーザー指示で変更) */
.topbar .names { min-width: 0; }
.topbar .sub span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .spacer { flex: 1; }
.planBadge { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 3px 10px; font-size: 12px; line-height: 1.35; background: #fff; cursor: pointer; }
.planBadge span { white-space: nowrap; }
.planBadge .pbSub { font-size: 11px; }
.planBadge.premium { border-color: var(--premium); color: var(--premium); }
.tabs { display: flex; overflow-x: auto; gap: 4px; padding: 0 8px 6px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 0 0 auto; border: 0; background: none; padding: 8px 12px; border-radius: 10px; color: var(--muted); cursor: pointer; }
.tabs button.active { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
main { max-width: 760px; margin: 0 auto; padding: 14px 12px 60px; }
/* タブの見出し(ホーム・日常費…)は、選んだタブと同じ言葉なので画面には出さない。読み上げ(スクリーンリーダー)では読まれる(2026-10-30 広村の指示) */
main h2 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
main { padding-top: 10px; }
.tabAbout { font-size: 13px; color: var(--muted); margin: 0 0 8px; display: flex; align-items: center; justify-content: flex-end; gap: 2px; } /* 固定費・特別費の「○○について ？」(右寄せ。2026-10-30 広村の指示) */
.tabAbout + .helpNote { text-align: left; }
.section { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px; }
.section h3 { font-size: 16px; margin: 0 0 8px; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--muted); flex: 0 0 auto; white-space: nowrap; } /* 見出しは折り返さない(「いまのプラン」が2文字ずつ折れたため。2026-10-28 ユーザー指示) */.placeholder { color: var(--muted); font-size: 14px; padding: 18px 0; text-align: center; }
.badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--premium); color: var(--premium); margin-left: 6px; vertical-align: middle; }
.badge.fixed { border-color: var(--muted); color: var(--muted); }
.notices .item { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.contactCode { font-size: 12px; color: var(--muted); text-align: right; margin-top: 18px; }
.contactCode b { letter-spacing: 0.12em; }
.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: #3b3330; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; box-shadow: var(--shadow); z-index: 20; }
.danger { color: var(--ng); }
@media (min-width: 720px) { .gate { padding-top: 56px; } }

/* ===== 段階3-1(2026-10-28): 日常費タブ。今の Index.html の見た目を A案の色に合わせて移した ===== */
.tabs.subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; overflow: visible; }
/* ボタンの中では折り返さず、文字の長さに合わせて幅を配る(「集計・確認」が「集計・確」「認」に折れたため。2026-10-28 ユーザー指示で変更) */
.tabs.subtabs button { flex: 1 1 auto; white-space: nowrap; font-size: 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px; color: var(--muted); }
@media (max-width: 360px) { .tabs.subtabs { gap: 6px; } .tabs.subtabs button { font-size: 13px; padding: 8px 4px; } } /* 幅の狭いスマホでも4つを1行に */
.tabs.subtabs button.active { background: var(--accent-soft); color: var(--ink); font-weight: 600; border-color: var(--accent-soft); }
.monthRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
label.inline { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
label.inline input[type="month"] { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.summaryStatus { margin: 8px 0 4px; font-size: 14px; min-height: 1.4em; white-space: pre-wrap; }
.loadingMsg { color: #1a56b8; font-weight: bold; }
.errorMsg { color: var(--ng); font-weight: bold; }
.placeholder.small { padding: 6px 0; font-size: 13px; }
.muted { color: var(--muted); }
.smallBtn { width: auto; padding: 4px 8px; font-size: 12px; margin: 0; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.smallBtn.secondary { background: #fff; }
.btn.link.danger { color: var(--ng); margin-top: 10px; }
.btn.dangerFill { background: var(--ng); }
.row2 { display: flex; gap: 8px; }
.row2 > div { flex: 1; min-width: 0; }
.row2 > .dateCol { flex: 0 0 150px; }
.btnRow { display: flex; gap: 8px; }
.btnRow .btn { flex: 1; margin-top: 12px; }
.line { border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px 10px; margin-top: 10px; background: #fff; }
.lineTitle { display: flex; justify-content: space-between; align-items: center; font-weight: bold; font-size: 13px; margin-top: 6px; }
.line label, .editForm label { display: block; margin-top: 8px; font-size: 14px; }
.line input, .line select, .editForm input, .editForm select { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-top: 2px; }
.req { color: #c5221f; font-size: 11px; font-weight: normal; margin-left: 4px; }
.fieldError { outline: 2px solid #d93025; background: #fdecea; border-radius: 4px; }
.amtSatRow { display: flex; align-items: flex-end; gap: 10px; }
.amtSatRow > label.amt { flex: 0 0 45%; min-width: 0; }
.satPickerWrap { flex: 1; min-width: 0; }
.satPickerLabel, .payerPickerLabel { font-size: 13px; color: var(--muted); }
.satPicker { display: flex; gap: 6px; margin-top: 4px; }
.satBtn { flex: 1; width: auto; margin: 0; padding: 4px 0; font-size: 24px; line-height: 1.25; background: #f1f3f4; border: 2px solid transparent; border-radius: 8px; opacity: .4; cursor: pointer; }
.satBtn[aria-pressed="true"] { opacity: 1; border-color: var(--accent); background: var(--accent-soft); }
.satCycleBtn { width: auto; margin: 2px 0 0; padding: 0 8px; font-size: 20px; line-height: 1.3; background: #fff; border: 1px solid var(--line); border-radius: 8px; color: #999; cursor: pointer; }
.satCycleBtn.on { color: #000; border-color: #bbb; }
.payerPickerWrap { margin-top: 8px; }
.payerPicker { display: flex; gap: 6px; margin-top: 4px; }
.payerBtn { flex: 1; width: auto; margin: 0; padding: 6px 4px; font-size: 14px; background: #f1f3f4; border: 2px solid transparent; border-radius: 8px; color: #555; cursor: pointer; }
.payerBtn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: bold; }
.payerTag { display: inline-block; margin-left: 6px; padding: 0 6px; font-size: 11px; line-height: 1.6; border-radius: 8px; background: var(--accent-soft); color: var(--ink); white-space: nowrap; vertical-align: middle; }
.hint { background: #fff8e1; border: 1px solid #ffe08a; border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-top: 12px; line-height: 1.6; }
.helpBtn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 0 0 4px; padding: 0; border-radius: 50%; border: 1px solid #bbb; background: #fff; color: #555; font-size: 13px; cursor: pointer; vertical-align: middle; }
.helpBtn[aria-expanded="true"] { background: #555; color: #fff; border-color: #555; }
/* 指で押しやすいように、見た目は 22px のまま当たり判定を周り 9px 広げる(約 40px)。押し損ねて周りのラベルに当たり、チェックが切り替わるだけで「？」が開かないことがあった(2026-10-29 広村の指摘) */
.helpBtn { position: relative; }
.helpBtn::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
/* 5段階の満足度のボタン列(固定費・特別費。2026-10-30 広村の決定 B 案)。選んだものだけ色付き、ほかは灰色 */
.levelPickerLabel { font-size: 14px; margin-top: 8px; }
.levelPicker { display: flex; gap: 4px; margin-top: 4px; }
.levelBtn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px; margin: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--muted); cursor: pointer; }
.levelBtn .levelEmoji { font-size: 20px; line-height: 1.2; filter: grayscale(1); opacity: .55; }
.levelBtn .levelLabel { font-size: 10px; line-height: 1.3; white-space: nowrap; }
.levelBtn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.levelBtn.on .levelEmoji { filter: none; opacity: 1; }
.helpNote { display: block; margin-top: 4px; padding: 6px 8px; font-size: 13px; color: #444; background: #f3f3f3; border-radius: 6px; }
.hint .helpNote { background: #fff; }
/* 次に押すボタンを数秒光らせる(2026-11-02 広村の指示): 近道(?start=camera)で開いたときの「カメラを起動」(ledger.js openInput)と、写真を撮った/選んだあとの「画像から読み取る」(receipt.js onFileChosen)。付けた側が 4秒で外す */
.btn.shortcutFocus { animation: shortcutPulse 1.1s ease-in-out 3; }
@keyframes shortcutPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 122, 111, 0); } 50% { box-shadow: 0 0 0 10px rgba(224, 122, 111, 0.45); } }
.totalBox { margin-top: 16px; padding: 12px; background: #f7f1ea; border-radius: 10px; font-size: 13px; }
.totalBox .big { font-size: 22px; font-weight: bold; display: block; margin-top: 2px; }
.saveStatus { display: none; margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 15px; font-weight: bold; white-space: pre-wrap; }
.saveStatus.show { display: block; }
.saveStatus.loading { background: #f1f3f4; color: #444; border: 1px solid #ddd; }
.saveStatus.ok { background: #e6f4ea; color: #1e7e34; border: 1px solid #8fcda1; }
.saveStatus.error, .saveStatus.savingsBlocked { background: #fdecea; color: #c5221f; border: 1px solid #f5b7b1; }
.busySpin { display: inline-block; width: 14px; height: 14px; border: 2px solid #c7d4ea; border-top-color: #1a56b8; border-radius: 50%; vertical-align: -2px; margin-right: 8px; animation: busySpin 0.8s linear infinite; }
@keyframes busySpin { to { transform: rotate(360deg); } }
#busyBanner { display: none; position: fixed; left: 12px; right: 12px; bottom: 16px; z-index: 900; align-items: center; background: #3b3330; color: #fff; padding: 12px 16px; border-radius: 10px; font-size: 15px; font-weight: bold; box-shadow: var(--shadow); }
#busyBanner.show { display: flex; }
#busyBanner .busySpin { width: 18px; height: 18px; border-color: rgba(255,255,255,0.4); border-top-color: #fff; flex: none; }
table.recordTable { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
table.recordTable td { border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: left; vertical-align: top; }
table.recordTable td.num { text-align: right; white-space: nowrap; }
tr.dup td { background: #fff9ec; }
/* 重複の印の行(明細のすぐ下。札とボタンを1行に。2026-10-30) */
tr.hasDupLine td { border-bottom: 0; }
tr.dupLine td { padding-top: 0; }
/* 札とボタンの高さ(上下の中心)をそろえる(2026-10-30 広村の指摘) */
tr.dupLine .dupLineInner { display: flex; align-items: center; gap: 8px; }
tr.dupLine .dupDelBtn { margin-left: auto; color: var(--ng); border-color: var(--ng); } /* 重複の可能性の行の右端に「削除」(2026-11-02 広村の指示) */
tr.dupLine .badge.warn { margin: 0; padding: 3px 8px; line-height: 1.4; }
tr.dupLine .dupOkBtn { margin: 0; line-height: 1.4; }
.recordListStoreRow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.recordListMemo { font-size: 12px; color: #888; text-align: right; }
.badge.warn { background: #ffe0b2; color: #8a4b00; font-weight: bold; border: 0; }
.badge.ng { background: #fdecea; color: #c5221f; border: 0; }
.dupAlert { margin-top: 8px; padding: 8px 10px; background: #fff4e0; border: 1px solid #f0b45c; border-radius: 8px; font-size: 13px; line-height: 1.6; color: #6b3f00; }
.dupAlert ul { margin: 4px 0; padding-left: 18px; }
.dupAlert .dupNote { margin-top: 4px; font-size: 12px; color: #8a6d3b; }
.editForm { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 12px; }
/* 一覧のその明細の直下に差し込んだとき(2026-11-02 広村の指示): 枠で囲った板に */
tr.editFormRow > td { padding: 6px 0 10px; background: transparent; }
tr.editFormRow .editForm { margin-top: 0; border: 1px solid var(--line); border-radius: 10px; padding: 10px 10px 12px; background: var(--bg); }
.confirmBox { margin-top: 10px; padding: 10px 12px; border: 1px solid #f5b7b1; background: #fff6f5; border-radius: 10px; }
.recordActionStatus { margin-top: 8px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; color: #555; }
.recordActionStatus.error { color: #c5221f; font-weight: bold; }
/* 電卓(金額欄をタップすると画面の下から出る) */
.calcOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 3000; display: flex; align-items: flex-end; justify-content: center; }
.calcCard { background: #fff; width: 100%; max-width: 480px; border-radius: 16px 16px 0 0; padding: 14px 14px 20px; box-sizing: border-box; }
.calcHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; color: #555; }
.calcHeaderBtns { display: flex; align-items: center; gap: 4px; }
.calcCloseBtn { background: none; border: none; font-size: 20px; line-height: 1; color: #888; padding: 4px 8px; width: auto; margin: 0; cursor: pointer; }
.calcEmptyBtn { width: auto; margin: 0; padding: 4px 10px; font-size: 12px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 6px; color: #666; cursor: pointer; }
.calcDisplay { font-size: 30px; text-align: right; padding: 14px 10px; background: #f5f5f5; border-radius: 8px; margin-bottom: 10px; overflow-x: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calcGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.calcBtn { font-size: 20px; padding: 16px 0; border-radius: 10px; border: 1px solid #ddd; background: #fff; color: #222; width: auto; margin: 0; cursor: pointer; }
.calcBtn.zero { grid-column: span 2; }
.calcBtn.op { background: #eef3ff; color: #1a56b8; }
.calcBtn.func { background: #f5f5f5; color: #666; }
.calcConfirmBtn { margin-top: 10px; }

/* ===== 段階3-2(2026-10-28): 集計(予算の棒・円グラフ・推移)・カレンダー・全画面表示・振り返り・日別明細・ライフログ・目標・お知らせ。今の Index.html の見た目を A案の色に合わせて移した ===== */
.tabs.subtabs.modeTabs { margin-top: 10px; }
.tabs.subtabs.modeTabs button { flex: 1 1 40%; }
details#budgetBox { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: #fff; }
details#budgetBox summary { cursor: pointer; font-weight: 600; font-size: 14px; background: var(--bg); padding: 8px 10px; border-radius: 8px; } /* 薄い色を付けてボタンらしく(2026-10-29 広村の指示) */
details#budgetBox[open] summary { margin-bottom: 4px; }
details#budgetBox label { display: block; font-size: 14px; margin-top: 8px; }
details#budgetBox input[type="number"] { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; margin-top: 2px; }
details#budgetBox .btn { margin-top: 10px; }
.chart { margin-top: 10px; }
.pRow { margin-top: 10px; font-size: 13px; }
.pRow span { color: var(--muted); }
.warn { margin-top: 8px; font-size: 13px; font-weight: bold; color: var(--ng); }
.warnPace { font-size: 17px; }
.cards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cards .card { flex: 1 1 45%; background: #f7f1ea; border-radius: 8px; padding: 10px; box-shadow: none; }
.cards .card .label { font-size: 12px; color: var(--muted); }
.cards .card .value { font-size: 22px; font-weight: bold; margin-top: 2px; }
.cards .card.neg .value { color: var(--ng); }
/* 予算の使用状況(1本の棒。塗り=使った金額、縦線と吹き出し=今日) */
.budgetGauge { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: end; margin-top: 10px; }
.budgetGaugeLabel { font-size: 13px; color: var(--muted); white-space: nowrap; padding-bottom: 5px; }
.budgetGaugeBudget { font-size: 15px; font-weight: bold; white-space: nowrap; }
.budgetGaugeTrackWrap { position: relative; padding-top: 30px; }
.budgetGaugeTrackWrap.noToday { padding-top: 0; }
.budgetGaugeTrack { position: relative; height: 28px; border-radius: 5px; background: #e8eaed; overflow: hidden; }
.budgetGaugeFill { height: 100%; background: #1a73e8; border-radius: 5px 0 0 5px; min-width: 3px; }
.budgetGauge.over .budgetGaugeFill { background: #ea4335; }
.budgetGaugePct { position: absolute; top: 0; right: 8px; bottom: 0; display: flex; align-items: center; font-size: 14px; font-weight: bold; color: #202124; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 5px #fff; pointer-events: none; }
.budgetGaugeTodayLine { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #5f6368; pointer-events: none; }
.budgetGaugeToday { position: absolute; top: 0; width: 0; height: 30px; pointer-events: none; }
.budgetGaugeTodayTip { position: absolute; top: 0; left: 0; transform: translateX(-50%); padding: 2px 9px; border-radius: 8px; background: #757575; color: #fff; font-size: 12px; line-height: 18px; white-space: nowrap; }
.budgetGaugeToday.nearStart .budgetGaugeTodayTip { transform: translateX(-12px); }
.budgetGaugeToday.nearEnd .budgetGaugeTodayTip { transform: translateX(calc(-100% + 7px)); }
.budgetGaugeToday::after { content: ''; position: absolute; top: 22px; left: -5px; border: 5px solid transparent; border-top: 7px solid #757575; border-bottom: 0; }
.budgetGaugeNums { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; font-size: 15px; font-weight: bold; white-space: nowrap; }
.budgetGaugeRemain { margin-left: auto; }
.budgetGaugeCap { font-size: 11px; font-weight: normal; margin-left: 1px; }
.budgetGaugeBudgetCap { font-size: 11px; font-weight: normal; color: var(--muted); margin-right: 3px; } /* 予算額の左の「予算」(ホームのカテゴリごとの予算使用状況。2026-10-29) */
.budgetGaugeSpent { color: #1a73e8; }
.budgetGauge.over .budgetGaugeSpent { color: var(--ng); }
.budgetGaugeRemain.neg { color: var(--ng); }
/* 週ごとのカード */
.weekCard { border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-top: 10px; background: #fff; }
.weekCard.current { border: 2px solid #1a73e8; padding: 9px; background: #d2e3fc; box-shadow: 0 2px 8px rgba(26,115,232,.4); }
.weekTitle { font-weight: bold; font-size: 14px; }
.weekTitle span { font-weight: normal; color: var(--muted); font-size: 12px; }
.weekNums { font-size: 13px; margin-top: 6px; line-height: 1.6; color: #1a56b8; }
.weekSat { font-size: 12px; margin-top: 6px; color: #444; }
.badge.now { background: #1a73e8; color: #fff; font-weight: bold; border: 0; }
/* 円グラフ */
.pieTitle { font-weight: bold; font-size: 12px; margin-top: 12px; }
.pieTitle.big { font-size: 15px; margin-top: 20px; }
.pieBox { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.pie { flex: 0 0 112px; width: 112px; height: 112px; }
.pie path, .pie circle { stroke: #fff; stroke-width: 2; }
.legend { flex: 1; min-width: 0; font-size: 12px; }
.lgRow { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.lgRow .dot { flex: 0 0 10px; margin: 0; }
.lgName { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgPct { color: var(--muted); min-width: 3em; text-align: right; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.pieTotal { font-size: 12px; text-align: right; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); color: #333; }
.pieTotal b { font-size: 14px; }
/* 推移 */
.trendTitle { margin-top: 20px; }
.trendToggle { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: #555; }
.trendToggle input { width: auto; margin-top: 0; }
.trendChartWrap { position: relative; margin-top: 4px; }
.trendLineSvg { width: 100%; height: 160px; display: block; background: #f7f1ea; border-radius: 6px; }
.trendAxis { display: flex; justify-content: space-between; font-size: 11px; color: #888; margin-top: 2px; }
.trendPointLabels { position: absolute; inset: 0; pointer-events: none; }
.trendPointLabel { position: absolute; transform: translate(-50%, calc(-100% - 4px)); font-size: 10px; font-weight: bold; color: #1a56b8; white-space: nowrap; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.trendPointLabel.prior { transform: translate(-50%, 4px); color: #607d8b; }
.dot.trendCur { background: #4285f4; }
.dot.trendPrior { background: #b0bec5; }
/* 満足度の集計 */
.satSummary { margin-top: 16px; }
.satSummaryTable { width: auto; min-width: 60%; border-collapse: collapse; font-size: 13px; }
.satSummaryTable td { padding: 3px 10px 3px 0; }
.satSummaryTable td.emoji { font-size: 18px; }
.satSummaryTable td.num { text-align: right; }
/* カテゴリ別の予算 */
.vbdHeader { background: #f7f1ea; border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.vbdHeaderRow { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; }
.vbdHeaderRow b { font-size: 15px; }
.vbdHeaderRow.muted { font-size: 12px; }
.vbdUnallocNeg { color: var(--ng); font-weight: bold; } /* 未振り分けがマイナス(2026-11-02) */
.budgetCeilingRow { font-size: 13px; margin: 8px 0 2px; } /* 「日常費予算の上限目安」は予算の欄の上(2026-11-02 広村の指示) */
.budgetCeilingRow b { font-size: 14px; }
.budgetCeilingRow .helpBtn { margin: 0 2px; }
.budgetCeilingNote { margin: 2px 0 6px; }
.vbdUnallocFitRow .smallBtn { margin: 0; }
.vbdRow { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.vbdCatHeader { display: flex; align-items: center; gap: 8px; } /* カテゴリ名 → 「ホーム」のチェック → 前月実績(右端)。2026-10-28 広村の指示でチェックをカテゴリ名の右隣に */
.vbdCatName { font-weight: bold; font-size: 13px; }
.vbdRef { font-size: 11px; color: #888; }
.vbdCatHeader .vbdRef { margin-left: auto; white-space: nowrap; }
details#budgetBox .vbdCatHeader .vbdHome { margin-top: 0; } /* details#budgetBox label の margin-top を打ち消し、カテゴリ名と同じ高さに */
details#budgetBox .vbdSubRow input[type="checkbox"] { width: auto; } /* 上の「.vbdSubRow input は 110px」をチェックに効かせない(Chrome・Android で箱が横に伸びて行がはみ出していた) */
.vbdCatAmount { margin-top: 4px; }
.vbdCatAmount label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; margin-top: 0; }
details#budgetBox .vbdCatAmount input, details#budgetBox .vbdSubRow input { width: 110px; text-align: right; margin-top: 0; padding: 6px 8px; }
.vbdCatAmount input.vbdComputed { background: #f0f0f0; color: #555; }
.vbdSubList { margin: 6px 0 4px 10px; border-left: 2px solid #eee; padding-left: 8px; }
.vbdSubRow { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 12px; }
.vbdSubRow .vbdSubName { flex: 1; min-width: 0; }
.vbdSubRow .vbdRef { flex: 0 0 auto; white-space: nowrap; }
/* カレンダー */
.calWrap { margin-top: 20px; cursor: pointer; }
.homeCalendar .calWrap { margin-top: 12px; }
.calTitle { font-weight: bold; font-size: 14px; }
.calGrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 2px; margin-top: 8px; font-size: 10px; }
.calDow { text-align: center; color: var(--muted); padding: 2px 0; font-size: 11px; overflow-wrap: break-word; }
.calCell { background: #f7f1ea; border-radius: 4px; padding: 3px 2px; min-height: 40px; min-width: 0; overflow: hidden; }
.calCell.blank { background: transparent; }
.calCell.today { outline: 2px solid #1a73e8; }
.calDay { font-size: 10px; color: #888; }
.calAmt { font-size: 11px; font-weight: bold; margin-top: 2px; overflow-wrap: break-word; }
/* マスの金額は折り返さず、入らないときは文字を縮めて1行に(マスの幅 ÷ 文字列のおおよその幅 --w。--w は calendar.js が付ける)。
   対応していないブラウザ(iOS 15 以前など)では今までどおり折り返す。2026-10-28 ユーザー指示(万を超えると折り返していた) */
@supports (font-size: 1cqw) {
  .calCell { container-type: inline-size; }
  .calAmt { white-space: nowrap; overflow-wrap: normal; letter-spacing: -0.1px; font-size: clamp(6.5px, calc(100cqw / var(--w, 4.3)), 11px); }
  .calAmt.calAmtWrap { white-space: normal; overflow-wrap: break-word; } /* 7桁以上は縮めても入らないので折り返す */
  @media (max-width: 359px) { .calAmt.calAmt6 { white-space: normal; overflow-wrap: break-word; } } /* 幅の狭い端末では6桁も折り返す */
}
.calWeek { background: #eef1f5; border-radius: 4px; padding: 3px 2px; font-size: 9px; line-height: 1.5; min-width: 0; overflow: hidden; overflow-wrap: break-word; }
/* 週予算を超えた週は水色+傘、週予算内に収まった終わった週はピンク+はなまる(絵は SVG) */
.calWeek.over { background: #e3f2fd url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cg%20fill='%231976D2'%20fill-opacity='.45'%20stroke='%231976D2'%20stroke-opacity='.45'%20stroke-width='6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20stroke='none'%20d='M10%2055A40%2040%200%200%201%2090%2055A10%2010%200%200%201%2070%2055A10%2010%200%200%201%2050%2055A10%2010%200%200%201%2030%2055A10%2010%200%200%201%2010%2055Z'/%3E%3Cpath%20fill='none'%20d='M50%2015V7M50%2055V84A8%208%200%200%201%2034%2084'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 2px top 2px / 50% auto; }
/* はなまるの絵は今のアプリと同じ SVG(ユーザー提供の「はなまるサンプル.png」の輪郭。2026-10-28 広村の指摘で、3-2 で描き直した簡略版から戻した) */
.calWeek.calWeekGoal { background: #fce4ec url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20474%20395'%3E%3Cpath%20fill='%23FF2682'%20fill-opacity='.45'%20fill-rule='evenodd'%20d='M182.3%203.3L197.9%203.1L219.7%209.3L230.2%2015.8L244%2032L282.3%2016.3L315.1%206.1L354%204L377.6%209.4L395.8%2022.3L406.7%2039.3L409.9%2050.1L410%2066L406.6%2080.7L438.7%2093.3L449.8%20102.3L455.6%20111.4L459.9%20128.1L460%20151L452.7%20176.7L438.2%20200.2L425.3%20215.3L415.7%20253.7L405.7%20276.7L392.8%20292.8L372.2%20311.2L352.6%20324.6L333.9%20331.9L314.1%20330.9L292.4%20323.4L259.2%20355.2L241.7%20367.7L221.7%20377.7L193.9%20386.9L159%20388L138.3%20383.7L117.4%20374.6L90.8%20353.2L75.3%20327.7L72.1%20315.9L72.2%20297.8L55.3%20292.7L38.3%20282.7L28.8%20274.2L19.3%20261.7L9.1%20235.9L8%20216L12.3%20192.3L22.3%20170.3L39.3%20151.3L53.6%20140.6L55.1%20119.1L60.3%2098.3L70.3%2078.3L81.8%2061.8L110.8%2034.8L130.3%2022.3L159.3%209.3ZM182.1%2020.1L168.3%2023.3L140.3%2036.3L119.8%2049.8L100.3%2067.3L87.3%2084.3L77.3%20104.3L74.1%20116.1L73.5%20134.5L104%20134L118.6%20136.6L132.8%20118.8L156.8%2095.8L177.3%2081.3L201.8%2069.8L215.9%2044.9L214.7%2033.3L212.2%2027.8L204.7%2022.3L197%2020ZM327.1%2023.1L300.3%2029.3L265.4%2042.4L250.4%2052.4L242.5%2063.5L266.9%2065.1L293.7%2072.3L320.7%2087.3L334.2%2099.8L346.7%20116.3L358.9%20146.1L363%20176L361.5%20200.5L387.9%20200.9L407.6%20195.6L423.2%20184.2L432.6%20167.6L437%20150L435.7%20123.3L426.2%20110.8L412.9%20105.1L389%20103L355.8%20104.2L355.3%20100.3L369.7%2083.7L378.7%2064.7L382%2051L379.7%2040.3L372.2%2031.8L360.7%2026.3L343%2023ZM243.1%2083.1L210.3%2089.3L189.3%2099.3L166.8%20114.8L137.8%20144.8L124.4%20166.4L118.4%20180.4L110%20214L111.1%20232.9L115.4%20244.6L132.8%20266.2L145.3%20275.7L159.3%20282.7L182.1%20288.9L207%20290L237.9%20284.9L255.7%20278.7L277.7%20267.7L298.2%20253.2L313.2%20238.2L322.7%20225.7L329.7%20211.7L334.9%20190.9L334.9%20165.1L328.7%20141.3L319.6%20121.4L307.6%20105.4L290.7%2093.3L268.9%2086.1ZM229.3%20115.3L248.9%20115.1L262.6%20119.4L274.2%20129.8L278.7%20138.3L282%20152L281.9%20172.9L277.7%20192.7L270.7%20208.7L251.2%20230.2L239.9%20236.9L228.1%20236.9L218.3%20232.7L209.8%20225.2L206.3%20218.7L204%20211L204.1%20194.1L207.4%20183.4L215.4%20172.4L224.1%20168.1L234%20168L260.9%20176.9L266%20160L265.9%20145.1L263.6%20138.4L252.7%20130.3L238%20129L221.4%20133.4L207.3%20140.3L194.8%20148.8L181.8%20161.8L172.3%20177.3L168.1%20189.1L168.4%20218.6L173.8%20228.2L180.8%20235.2L201.1%20243.9L236.9%20243.9L257.9%20240.9L273%20236L277.2%20236.8L277.9%20241.9L268.7%20253.7L252.9%20258.9L227%20263L191.1%20261.9L178.4%20257.6L165.8%20249.2L151.4%20230.6L147%20217L147%20197L150.1%20184.1L160.3%20160.3L179.4%20138.4L205.3%20122.3ZM85.1%20154.1L80.5%20155.8L87%20161L98.1%20164.9L101.7%20165.4L104.9%20158.9L93.9%20154.1ZM58.8%20165.5L45.8%20177.8L36.3%20193.3L30.1%20212.1L30.1%20231.9L36.3%20246.7L45.8%20257.2L66.3%20269.7L81.9%20273.9L90.2%20270.2L99.9%20259.9L90%20231L90%20206L93.9%20185.1L74.4%20179.6ZM231.8%20187.5L227.4%20193.4L224.1%20204.1L224.1%20212.9L227.1%20215.9L230.5%20215.5L239.9%20202.9L238%20195ZM392.8%20225.5L380%20228L353.5%20228.5L346.7%20241.7L334.2%20258.2L304.8%20280.8L303.8%20295.2L317.3%20303.7L327.9%20304.9L340.7%20299.7L358.2%20287.2L367.2%20279.2L379.7%20262.7L391.7%20236.7ZM113.1%20279.1L98.8%20287.8L91%20297L88%20306L90.4%20322.6L98.8%20335.2L116.3%20350.7L139.4%20362.6L165.1%20368.9L194.7%20365.7L210%20360L230.7%20347.7L251.2%20328.2L259.7%20315.7L265.8%20301L225.9%20311.9L203.9%20314.9L177.1%20311.9L141.4%20299.6Z'/%3E%3C/svg%3E") no-repeat right 2px top 2px / 50% auto; }
.calWeek .wLabel { color: var(--muted); }
.calWeek .wNeg { color: var(--ng); }
.calNoMoney { text-align: center; font-size: 22px; line-height: 1.15; margin-top: 0; }
.calWeekRating { font-size: 13px; font-weight: bold; color: #1a56b8; line-height: 1.2; }
.calMonthRating { margin-left: 8px; font-size: 13px; font-weight: bold; color: #1a56b8; white-space: nowrap; }
.calLog { margin-top: 2px; font-size: 16px; line-height: 1.15; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; overflow: hidden; text-align: center; }
.calLogMore { display: block; margin-top: 1px; font-size: 11px; line-height: 1; font-weight: bold; color: #888; }
/* 全画面表示(カレンダー・過去の振り返り・日別明細) */
.calModal { position: fixed; inset: 0; background: #fff; z-index: 1000; padding: 12px; overflow-y: auto; }
.calModal .calWrap { cursor: default; }
.calModal .calNoMoney { font-size: 32px; }
.calModal .calWeekRating { font-size: 16px; }
.calModal .calLog { font-size: 18px; }
.calModal .calLogMore { font-size: 12px; }
.calModal .calWeek[data-week] { cursor: pointer; }
.calModalBar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.calModalBar.dayDetailCloseBar { justify-content: center; margin-top: 28px; }
.closeBtnLarge { width: auto; padding: 12px 40px; }
.calModal h3 { font-size: 16px; margin: 8px 0; }
.calModal .line { margin-top: 10px; }
/* 振り返り */
/* 上の「絵文字ごとの日数(この月)」(または カレンダー)との間を1行分あける(2026-11-02 広村の指示)。.calModal h3 の margin に負けないよう h3 を付けて書く(.reviewTitle だけでは効いていなかった) */
.calModal h3.reviewTitle { margin-top: 50px; }
.reviewRow { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-top: 10px; }
.reviewRow.reviewRowMonth { background: #eef4ff; border-color: #b7cdf5; }
.reviewRow.reviewRowFocus { border-color: #1a73e8; box-shadow: 0 0 0 2px rgba(26,115,232,.35); }
.reviewRowTitle { font-size: 14px; font-weight: bold; }
.reviewRowSub, .reviewSatCounts { font-size: 12px; font-weight: normal; color: var(--muted); margin-left: 6px; }
.reviewRowInputs { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
.reviewRowInputs select { width: 76px; flex: 0 0 auto; padding: 8px 4px; border: 1px solid var(--line); border-radius: 8px; }
.reviewRowInputs textarea { flex: 1; min-width: 0; padding: 8px; font-size: 16px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.premiumNote { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #fff6e8; border: 1px solid #f1dcb8; font-size: 14px; line-height: 1.6; }
.tableScroll { overflow-x: auto; margin-top: 8px; }
.reviewHistoryTable { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.reviewHistoryTable th, .reviewHistoryTable td { border-bottom: 1px solid var(--line); padding: 6px 3px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.reviewHistoryTable th { background: #f7f1ea; font-size: 10px; line-height: 1.3; vertical-align: middle; }
.reviewHistoryTable th.colPeriod { width: 21%; }
.reviewHistoryTable th.colRemain { width: 20%; }
.reviewHistoryTable th.colRating { width: 10%; text-align: center; }
.reviewHistoryTable th.colNoMoney { width: 15%; }
.reviewHistoryTable td.num { text-align: right; white-space: nowrap; }
.reviewHistoryTable td.num.neg { color: var(--ng); }
.reviewHistoryTable tr.monthRow td { background: #eef4ff; font-weight: bold; }
/* 日別明細 */
.dayDetailLineTitle { font-size: 18px; }
.dayDetailLineTitle .satCycleBtn { margin: 0 8px 0 auto; font-size: 22px; }
.dayDetailCatAmt { font-size: 17px; margin-top: 4px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dayDetailMemo { font-size: 12px; color: #888; }
/* ライフログ */
.lifelogBox { margin-top: 20px; padding: 10px 12px; border: 1px solid #d6e4c6; border-radius: 10px; background: #f6faf0; }
.lifelogTitle { font-weight: bold; font-size: 14px; }
.lifelogEmojiGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.lifelogEmojiBtn { width: auto; margin: 0; padding: 6px 2px 4px; background: #fff; border: 2px solid #ddd; border-radius: 10px; color: #555; line-height: 1.2; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.lifelogEmojiBtn[aria-pressed="true"] { border-color: #1a73e8; background: #e8f0fe; color: #1a56b8; font-weight: bold; }
.lifelogEmojiChar { font-size: 22px; line-height: 1.2; }
.lifelogEmojiLabel { font-size: 10px; overflow-wrap: anywhere; }
.lifelogExtra { margin-top: 8px; font-size: 12px; color: #555; }
.lifelogExtra .lifelogEmojiBtn { display: inline-flex; flex-direction: row; gap: 4px; padding: 4px 8px; margin: 2px 4px 0 0; }
.lifelogBox textarea { width: 100%; margin-top: 8px; padding: 8px; font-size: 16px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.lifelogSection { margin-top: 16px; }
.lifelogSectionTitle { font-weight: bold; font-size: 14px; }
.lifelogMonthRow { display: flex; gap: 8px; align-items: baseline; padding: 6px 4px; border-bottom: 1px solid #e8e8e8; cursor: pointer; font-size: 13px; }
.lifelogMonthDate { flex: 0 0 auto; color: var(--muted); white-space: nowrap; }
.lifelogMonthEmojis { flex: 0 0 auto; font-size: 15px; white-space: nowrap; }
/* 絵文字ごとの日数(全画面の「この月のできごと」の下。2026-11-02 広村の指示)。0日の候補は薄く */
.lifelogCounts { margin-top: 12px; padding: 8px 10px; background: #f6faf0; border: 1px solid #d6e4c6; border-radius: 10px; }
.lifelogCountsTitle { font-weight: bold; font-size: 13px; }
.lifelogCountGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 4px 10px; margin-top: 6px; }
.lifelogCountChip { display: flex; align-items: baseline; gap: 4px; font-size: 13px; min-width: 0; }
.lifelogCountChip.zero { color: var(--muted); }
.lifelogCountEmoji { font-size: 16px; flex: 0 0 auto; }
.lifelogCountLabel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lifelogCountNum { flex: 0 0 auto; white-space: nowrap; margin-left: auto; }
/* カレンダーの下の説明書き(2026-11-02 広村の指示)。次の見出し(ホームは「○年○月の予算消化（日常費）」、日常費タブ「集計」は「入力一覧(確認・修正)」)との間を1行分あける */
.calTapNote { margin-top: 6px; margin-bottom: 30px; }
.lifelogMonthText { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
/* ホーム: 目標・お知らせ */
#homeGoalArea { margin-top: 14px; }
.homeGoalLabel { display: block; font-size: 14px; font-weight: 600; }
.goalBoxText { width: 100%; margin-top: 4px; padding: 8px; font-size: 15px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; box-sizing: border-box; } /* 目標の欄(ホームと左上のアイコン先の画面で共通。2026-11-01) */
.homeGoalFooter { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-size: 12px; }
.homeGoalBtns { display: flex; gap: 6px; }
.homeGoalDate { margin-left: 6px; font-size: 12px; font-weight: normal; color: var(--muted); }
.homeGoalHistoryTitle { font-weight: bold; font-size: 14px; }
.homeGoalHistoryTitleRow, .homeGoalHistoryDateRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.homeGoalHistoryItem { padding: 8px 0; border-top: 1px solid var(--line); }
.homeGoalHistoryDate { font-size: 12px; color: var(--muted); }
.homeGoalHistoryText { margin-top: 2px; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.homeGoalHistoryEval { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 13px; }
.homeGoalHistoryEval select, .homeGoalHistoryEval input { padding: 6px; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; }
.homeGoalHistoryEval input { flex: 1 1 8em; min-width: 0; }
.homeGoalHistoryItemStatus { font-size: 12px; }
.homeNoticeItem { display: flex; align-items: center; gap: 8px; }
.homeNoticeItem .noticeText { flex: 1; min-width: 0; }

/* ===== 段階3-3(2026-10-28): レシート読み取り(撮影・アップロードのボタン、写真、読み取るボタン、残り枚数) ===== */
.photoBtnHelpRow { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.photoBtnHelpRow > .btn { flex: 1 1 auto; margin-top: 0; }
.photoBtnHelpRow > .helpBtn { flex: none; margin: 0; }
.photoInfo { margin-top: 6px; font-size: 13px; color: var(--muted); }
.photoItem { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.photoItem img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.photoItem span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.analyzeBtn { margin-top: 36px; background: #c9655a; } /* 他のボタンより1行分下げ、色を少しだけ濃く(2026-10-07) */
/* レシート入力の5つのボタンの配色(2026-11-02 広村の指示。白い「手入力」「画像ファイルをアップロードする」が埋もれて見えたため): カメラ2つは風呂敷の赤、手入力はからし色、アップロードは青磁色、読み取るは濃い赤 */
.btn.manualBtn { background: #cf9a3c; }
.btn.uploadBtn { background: #5f9ea0; }
.btn.statementBtn { background: #6b8fb0; } /* 利用明細の一覧(2026-11-02)。アップロードの青磁色と区別する青灰色 */
/* 取り込み(2026-11-02): 利用明細のファイルの確認の表 */
.importMapping { margin-top: 10px; }
.importMappingRow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 4px; font-size: 13px; }
.importMappingRow select { width: 100%; margin-top: 2px; }
.importToolbar { display: flex; gap: 8px; margin-top: 12px; }
.importToolbar .smallBtn { margin: 0; }
.importRows { margin-top: 6px; }
.importRow { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.importRow.off { color: var(--muted); }
.importRow input { flex: none; width: 18px; height: 18px; margin: 0; }
.importMain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.importStore { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.importSub { font-size: 12px; color: var(--muted); }
.importAmt { font-weight: 600; white-space: nowrap; margin-right: 4px; }
.importBadge { margin-left: 4px; }
.importBadge.dup { background: #fff3cd; color: #7a5a00; }
.importBadge.near { background: #ffe3cc; color: #8a4b00; }
.importToggle { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; }
.importToggle input { width: 18px; height: 18px; margin: 0; }
/* 日付ごとに左(取り込む行)・右(今ある明細)をそろえる表(2026-11-02 広村の決定) */
.importPairHead { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.importPairHead span:last-child { padding-left: 6px; }
.importDateHead { font-size: 12px; font-weight: bold; color: var(--muted); margin-top: 10px; }
.importPair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-bottom: 1px solid var(--line); padding: 4px 0; }
.importCell { min-width: 0; }
.importCellR { border-left: 1px solid var(--line); padding-left: 6px; }
.importPaired .importRow { border-bottom: 0; padding: 2px 0; align-items: flex-start; }
.importPaired .importStore { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.importExist { display: flex; flex-direction: column; min-width: 0; font-size: 13px; padding: 2px 4px; }
.importExist .importStore { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.importEmpty { color: var(--line); font-size: 13px; padding-left: 4px; }
.matchExact { background: #fff3cd; border-radius: 6px; }
.matchNear { background: #ffe8d6; border-radius: 6px; }
.importRow.matchExact, .importRow.matchNear { padding-left: 4px; padding-right: 4px; }
.importFooter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.importFooter #importCount { flex: 1 1 100%; font-size: 13px; }
.importFooter .btn { margin-top: 0; width: auto; flex: 1 1 auto; padding: 10px 12px; }
.receiptQuota { margin-top: 6px; }
.receiptRuleLinkRow { text-align: right; margin-top: 8px; }
/* 「買い物の記録」の「入力一覧(確認・修正)」の見出しの上を1行分あける(2026-11-02 広村の指示。上は「レシート読み取りのルールを設定する」、手入力を開いているときは「保存」の行)。id で書くので .section h3 の margin に負けない */
#recordListHeadingInput { margin-top: 32px; }

/* ===== 2026-10-28 広村の指摘・追加 ===== */
/* 2. 振り返りの評価は、端末の選択肢だと記号の大きさが揃わないので、同じ大きさのボタン5つに */
.ratingPicker { display: flex; gap: 4px; flex: 0 0 auto; }
.ratingBtn { width: 36px; height: 36px; padding: 0; margin: 0; font-size: 18px; line-height: 1; font-family: "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif; background: #f1f3f4; border: 2px solid transparent; border-radius: 8px; color: #555; cursor: pointer; }
.ratingBtn[aria-pressed="true"] { border-color: #1a73e8; background: #e8f0fe; color: #1a56b8; font-weight: bold; }
.reviewRowInputs { flex-wrap: wrap; }
.reviewRowInputs textarea { flex: 1 1 100%; }
/* 3. できごとの絵文字がある日のノーマネーデーの印は、日にちの横に小さく(絵文字の並びとは別) */
.calDay .calNoMoneyMini { margin-left: 2px; font-size: 11px; }
.calDay .calPhotoMini { margin-left: 2px; font-size: 9px; } /* この日の写真の印(v212) */
.dayPhotos { margin: 8px 0 10px; }
/* 7. ホームのカテゴリごとの予算使用状況 */
.homeCatBudget { margin-top: 14px; }
/* 名前の欄の幅をそろえて、棒の始まる位置を同じにする(長い名前は2行に折り返す。2026-10-28 ユーザー指示で変更) */
.homeCatBudget .budgetGauge { margin-top: 10px; grid-template-columns: 6.5em minmax(0, 1fr); }
.homeCatBudget .budgetGaugeLabel { white-space: normal; line-height: 1.3; overflow-wrap: anywhere; padding-bottom: 3px; }
.homeCatBudget .budgetGaugeBudget { white-space: normal; } /* 「予算 ¥1,000,000」のように欄に収まらないときは2行に(棒に重ねない。2026-10-29) */
.vbdHome { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.vbdHome input { width: auto; margin: 0; }
/* 5. 読み取り・手入力のあとは、明細1 がいちばん上に来るところで止める(上部の帯の分だけ余白) */
.line, .saveStatus { scroll-margin-top: 8px; }
.radioRow { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin-top: 8px; }
.radioRow input { margin-top: 4px; }
.homeCatBudgetTitle { font-size: 15px; margin: 18px 0 0; }

/* ===== 段階3-4(2026-10-28): 検索・まとめて設定・基本設定・はじめての方への案内(今の Index.html の見た目を移した) ===== */
/* 検索 */
.searchSummary { margin-top: 10px; font-weight: bold; }
.searchMonthly { font-size: 12px; color: #555; margin-top: 4px; }
/* 並び順とボタン2つ(CSV・まとめて設定)。ボタンの文字は折り返さず、幅が足りなければボタンの列を次の行へ(「CSVに書き出/す」と折れていた。2026-10-29 広村の指摘) */
.searchToolRow { align-items: flex-end; margin-top: 6px; flex-wrap: wrap; }
.searchToolRow > div:first-child { flex: 1 1 150px; }
.searchToolRow > .searchToolBtns { flex: 0 0 auto; }
.searchToolBtns { display: flex; gap: 6px; }
.searchToolBtns .smallBtn { width: auto; margin-top: 0; flex: none; padding: 8px 10px; white-space: nowrap; }
#searchTable .editBtn { white-space: nowrap; } /* 結果の「編集」も「編/集」と折れないように(2026-10-29) */
.searchTruncated { font-size: 12px; color: #c5221f; margin-top: 4px; }
#searchView label, .bulkPanel label { display: block; margin-top: 8px; font-size: 14px; }
#searchView input, #searchView select, .bulkPanel input, .bulkPanel select { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; margin-top: 2px; box-sizing: border-box; }
.bulkBtnRow { margin: 6px 0 0; text-align: right; }
.bulkBtnRow .smallBtn { width: auto; margin-top: 0; padding: 6px 10px; }
/* まとめて設定(選択モード) */
.bulkPanel { border: 1px solid #c9d7ee; border-radius: 8px; padding: 8px 10px 10px; margin-top: 8px; background: #f4f7fd; }
.bulkTitle { font-weight: bold; font-size: 15px; }
.bulkSectionTitle { font-weight: bold; margin-top: 8px; font-size: 14px; }
.bulkPanel .btnRow { margin-top: 6px; }
.bulkPanel .btnRow .smallBtn { margin-top: 0; flex: 1; padding: 8px 4px; }
.bulkCount { margin-top: 6px; font-weight: bold; color: #1a56b8; }
table.bulkMode .editBtn { display: none; }
/* 選択モードでも満足度の絵文字は見せる(押しても切り替えず、行の選択になる。2026-10-30 広村の指示) */
table.bulkMode .satCycleBtn { pointer-events: none; }
table.bulkMode tr.bulkRow { cursor: pointer; }
table.bulkMode tr.bulkSelected td { background: #e8f0fe; }
td.bulkCell { width: 28px; text-align: center; vertical-align: middle; }
td.bulkCell input { width: 20px; height: 20px; margin: 0; padding: 0; }
/* 基本設定 */
/* 基本設定の項目の見出しの上に1行分の空き(2026-10-29 広村の指示)。`.section h3` の margin が勝っていて今までの margin-top は効いていなかったので、同じ強さ以上の書き方にする */
.section h3.settingsH3 { margin-top: 30px; }
#settingsStatus:empty { display: none; } /* 最初の見出し「支出カテゴリの追加・削除」の上に空行を作らない(文があるときだけ出す) */
#settingsPlanText { white-space: pre-line; } /* プランの文の \n(「終了後は…」の前)で改行(2026-10-29 広村の指示) */
#settingsLists .btn.secondary { margin-top: 8px; }
.editRow { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.editRow input, .editRow select { flex: 1; min-width: 0; margin-top: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; }
.editRow input.fixedName { background: #f1f3f4; color: #555; }
.editRow .smallBtn { flex: 0 0 auto; width: auto; margin-top: 0; padding: 8px 8px; }
.editRow .badge.fixed { flex: 0 0 auto; }
.editRow.ruleRow { display: block; margin-top: 10px; padding: 4px 10px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fafafa; }
.ruleRow label { display: block; margin-top: 8px; font-size: 13px; }
.ruleRow input, .ruleRow select { width: 100%; margin-top: 4px; box-sizing: border-box; }
.ruleRow .ruleBtnRow { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.plainFieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.plainFieldset:disabled { opacity: 0.7; }
.receiptDefaultBox { margin-top: 16px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fafafa; }
.receiptDefaultTitle { font-size: 14px; font-weight: bold; }
.receiptDefaultRow { margin-top: 10px; }
.receiptDefaultLabel { font-size: 13px; font-weight: bold; color: #444; }
.receiptDefaultRow label { display: block; margin-top: 4px; font-size: 13px; }
.receiptDefaultRow select { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; box-sizing: border-box; }
.premiumStar { width: auto; padding: 0 6px; margin: 0; font-size: 14px; line-height: 1.4; background: #fff6e8; border: 1px solid #f1dcb8; border-radius: 999px; color: #b8860b; vertical-align: middle; }
.homeNoticeLabel { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 14px; line-height: 1.5; }
.homeNoticeLabel input[type="checkbox"] { width: 18px; height: 18px; margin-top: 3px; padding: 0; flex: none; }
.homeNoticeLabel > span { flex: 0 1 auto; min-width: 0; }
.homeNoticeLabel .helpBtn { flex: none; margin: 0; }
.settingNoteRow .helpBtn { vertical-align: middle; margin-top: -4px; margin-bottom: -4px; }
.settingSubLabel { margin-top: 12px; font-size: 14px; font-weight: bold; }
label.selectLabel { display: block; margin-top: 10px; font-size: 14px; }
label.selectLabel select { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; box-sizing: border-box; }
.editRow .ll_emoji { flex: 0 0 56px; text-align: center; font-size: 20px; padding: 4px; }
.lifelogMissingRow { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; }
.lifelogMissingRow .lifelogEmojiChar { font-size: 22px; }
.lifelogMissingRow .smallBtn { width: auto; margin: 0 0 0 auto; }
.btn.saveSettingsBtn { margin-top: 24px; }
/* はじめての方への案内(ツアー) */
.tourLayer { position: fixed; inset: 0; z-index: 3000; }
.tourLayer.center { background: rgba(0,0,0,0.55); }
.tourHole { position: fixed; border-radius: 10px; box-shadow: 0 0 0 200vmax rgba(0,0,0,0.55); outline: 3px solid #f0c36d; pointer-events: none; transition: top .2s, left .2s, width .2s, height .2s; }
.tourBubble { position: fixed; z-index: 3001; width: min(340px, calc(100vw - 32px)); box-sizing: border-box; background: #fff; color: #222; border-radius: 12px; padding: 14px 14px 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.3); font-size: 14px; line-height: 1.65; }
.tourBubble h4 { margin: 0 72px 6px 0; font-size: 16px; }
.tourBubble p { margin: 0 0 6px; }
.tourBubble button { font: inherit; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 8px 12px; }
.tourClose { position: absolute; top: 6px; right: 6px; width: auto; margin: 0; padding: 2px 8px; font-size: 13px; background: none; border: none; color: #666; }
.tourBubble .tourClose { border: none; background: none; }
.tourNav { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.tourNav .tourCount { flex: 1; font-size: 12px; color: #888; }
.tourNav button { width: auto; margin: 0; padding: 7px 14px; font-size: 14px; }
.tourBubble .tourNext { background: var(--accent); color: #fff; border: 1px solid var(--accent); font-weight: bold; }
.tourMock { display: flex; gap: 6px; margin: 6px 0 2px; }
.tourMock span { flex: 1; text-align: center; padding: 8px 4px; border: 1px solid var(--line); border-radius: 10px; background: #f7f1ea; font-size: 13px; color: #555; }
.tourWelcome button { display: block; width: 100%; margin-top: 8px; text-align: left; }
.tourWelcome button small { display: block; font-size: 12px; font-weight: normal; color: #666; }
.tourWelcome .tourNext small { color: #fff; }
.tutorialItem { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: #444; }
.tutorialItem .btn { flex: none; width: 11em; margin: 0; padding: 8px 6px; font-size: 14px; }
/* はじめにやることリスト(ホームの上) */
.starterChecklist { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #c9d7ee; border-radius: 10px; background: #f4f7fd; }
.starterChecklistHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: bold; }
.starterChecklistHead .smallBtn { width: auto; margin: 0; }
.starterBar { height: 6px; margin: 8px 0; background: #dde3ee; border-radius: 3px; overflow: hidden; }
.starterBar b { display: block; height: 100%; background: #34a853; border-radius: 3px; }
.starterItem { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #e3e3e3; font-size: 14px; }
.starterItem:last-child { border-bottom: none; }
.starterItem .mark { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #bbb; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; box-sizing: border-box; }
.starterItem.done .mark { background: #34a853; border-color: #34a853; color: #fff; }
.starterItem.done .label { color: #888; text-decoration: line-through; }
.starterItem .label { flex: 1; }
.starterItem .smallBtn { width: auto; margin: 0; flex: none; }

/* ===== 4-0(2026-10-29): カテゴリの改名の確認・消すときの案内(基本設定) ===== */
.settingsConfirm { margin-top: 16px; }
.settingsConfirm #settingsConfirmMsg div { margin-top: 4px; font-size: 14px; line-height: 1.6; }
.rowNotice { margin: 4px 0 6px; padding: 8px 10px; border: 1px solid #f5b7b1; background: #fff6f5; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.rowNotice .btnRow { margin-top: 6px; justify-content: flex-end; }
.rowNotice .btnRow .smallBtn { flex: 0 0 auto; width: auto; margin-top: 0; padding: 6px 12px; }
.smallBtn.dangerFill { background: var(--ng); color: #fff; border-color: var(--ng); }

/* ===== 4-0(2026-10-29): 予算の使用状況のページ(論点25)とホームの「今週｜今月」(論点27) ===== */
.homeBudgetHead, .homeCatBudgetHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.homeBudgetHead h3 { margin: 0; }
.tabs.subtabs.unitTabs { margin: 0; flex: 0 0 auto; }
.tabs.subtabs.unitTabs button { flex: 0 0 auto; padding: 4px 12px; font-size: 13px; }
/* 上の余白は見出しとボタンでなく枠(head)に持たせ、見出しが長くて「すべて見る」が次の行に回ったときも2行の間が詰まるように(row-gap 2px。2026-10-29 広村の指示: 見出しと「すべて見る」を近づける) */
.homeCatBudgetHead { margin-top: 18px; row-gap: 0; }
.homeCatBudgetHead .homeCatBudgetTitle { margin: 0; line-height: 1.3; }
.btn.link.homeBudgetAllBtn { margin: 0 0 0 auto; padding: 0 6px; line-height: 1.4; font-size: 13px; white-space: nowrap; } /* margin-left: auto = 次の行に回っても右寄せ(2026-10-29 広村の指摘) */
.homeBudgetAllRow { display: flex; justify-content: flex-end; margin-top: 4px; } /* 「すべて見る」は棒の一番下の右(2026-10-31 広村の指示) */
.budgetUsageTitle { margin: 8px 0 4px; }
.budgetUsageMonthRow { justify-content: center; margin-top: 4px; }
.budgetUsageYm { font-weight: bold; font-size: 16px; min-width: 7em; text-align: center; }
.budgetUsageTools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.budgetUsageTools label.inline select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
#budgetUsageStatus:empty { min-height: 0; margin: 4px 0 0; } /* 読み込みの文が無いときは空けない(今週｜今月 と「今週 ○/○〜」の間を詰める。2026-10-31 広村の指示) */
.note.buHomeNote { font-size: min(13px, calc((100vw - 26px) / 29.5)); } /* 1行目(27字)が狭いスマホでも折り返さないよう、幅に合わせて少しだけ小さく(広い画面は 13px のまま。2026-10-31 広村の指示) */
.buRow { margin-top: 14px; }
.buRow.buSub { margin-left: 14px; padding-left: 8px; border-left: 2px solid #eee; } /* サブカテゴリは左の寄せ分(22px)だけ棒も右から始まる */
/* 名前・「ホーム」・繰越は棒の左の欄に(棒のそば)。欄の幅をそろえて棒の始まりを同じにする(ホームの 6.5em と同じ考え方。2026-10-29 広村の指摘) */
.buRow .budgetGauge { margin-top: 4px; grid-template-columns: 7em minmax(0, 1fr); }
/* 名前と「ホーム」は横並び(収まらない名前のときは「ホーム」が次の行に回る)。繰越はその下の行(2026-10-29 広村の指示: チェックはカテゴリ名の右) */
.buRow .budgetGaugeLabel { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 2px; white-space: normal; line-height: 1.3; overflow-wrap: anywhere; padding-bottom: 3px; }
.buRow .budgetGaugeBudget { white-space: normal; }
.buName, .buUnallocName { font-weight: bold; font-size: 14px; color: var(--ink); }
.buCarry { flex-basis: 100%; font-size: 12px; }
.buTotal { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; }
.buTotal b { font-size: 18px; }
.buNoBudget { margin-top: 14px; color: var(--muted); }
.buNoBudgetTitle { font-size: 13px; font-weight: bold; }
.buNoBudgetRow { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.buUnallocNote { margin-top: 4px; font-size: 13px; color: var(--ng); } /* 未振り分けがマイナス(2026-11-02) */
.settingsSubNote { margin-top: 12px; }

/* ===== 4-0(2026-10-29): 医療費控除の印(論点26) ===== */
.medicalBlock { margin-top: 10px; padding: 8px 10px; border: 1px dashed #c9d7ee; border-radius: 8px; background: #f7faff; }
.medicalTargetLabel { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-top: 0 !important; }
.medicalTargetLabel input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: none; }
.medicalTargetLabel .helpBtn { margin: 0; }
.medicalFields label { font-size: 13px; }
.medicalSelfLabel { display: flex !important; align-items: flex-start; gap: 6px; margin-top: 22px !important; font-size: 13px; }
.medicalSelfLabel input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.badge.med { margin-left: 4px; background: #e3f2fd; color: #1a56b8; border: 0; font-weight: bold; }
/* 明細の一覧: 店舗名の下の「目印の行」と、金額の左の支払者の札(2026-10-30 広村の指示) */
.recordListMarks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.mark { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 4px; border-radius: 6px; background: #f1ece7; color: var(--ink); font-size: 12px; line-height: 1; font-family: -apple-system, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Hiragino Sans", sans-serif; }
#recordTable .editBtn, #recordTableInput .editBtn { white-space: nowrap; } /* 「編集」を縦に折らない(2026-10-30) */
.mark--med { background: #e3f2fd; color: #1a56b8; font-weight: bold; }
.mark--fp { background: #ede7f6; color: #4a3aa7; font-weight: bold; }
.amtLine { display: flex; justify-content: flex-end; align-items: center; gap: 4px; flex-wrap: nowrap; white-space: nowrap; } /* 札は金額の左のまま(狭い画面でも上に回さない。2026-10-30) */
.amtLine .payerTag { margin-left: 0; }
.ruleMedical { margin-top: 8px; }
.ruleMedicalLabel { margin-top: 0; }

/* ===== 固定費タブ(4-1。2026-10-29。今の Index.html の固定費の CSS を移した) ===== */
.fixedSaveReminder { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: #555; }
.fixedConfirmBar { margin-top: 10px; padding: 10px; border-radius: 10px; background: #f7f7f7; }
.fixedConfirmBar.hasUnconfirmed { background: #fff8e1; border: 1px solid #f0c36d; }
.fixedConfirmCount { font-size: 15px; font-weight: bold; }
.fixedConfirmBar .btn { margin-top: 8px; }
.fixedConfirmBarNote { margin-top: 8px; font-size: 13px; color: #555; }
.fixedBucketUnconfirmed { color: #b26a00; font-weight: bold; }
.fixedBucket { border: 1px solid #ddd; border-radius: 8px; padding: 10px; margin-top: 10px; }
.fixedBucketPocket { border-color: #d7c7e8; background: #fbf8ff; }
.fixedBucketHeader { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fixedBucketTitle { font-size: 15px; }
.fixedBucketCount { color: #666; font-size: 13px; margin-right: auto; white-space: nowrap; }
.fixedBucketToggleBtn { padding: 8px 16px; font-size: 14px; flex: 0 0 auto; }
.fixedBucketBody { margin-top: 10px; }
.fixedUtilityYearBtn { width: auto; margin: 0 0 4px; padding: 6px 12px; font-size: 13px; white-space: nowrap; } /* 光熱費の明細の上の「使用量・料金を1年分まとめて入力」(1行。2026-10-30) */
.fixedRow { border: 1px solid #ddd; border-radius: 8px; padding: 10px; margin-top: 10px; background: #fff; }
.fixedRow.fixedRow--unconfirmed { background: #fff8e1; border-color: #f0c36d; }
.fixedRowEdit label { margin-top: 6px; }
/* 入力欄は日常費の入力欄と同じ形(角の丸い枠・列の幅いっぱい。メモも横いっぱい)。チェックは除く(2026-10-30 広村の指示) */
.fixedRowEdit input:not([type="checkbox"]):not([type="radio"]), .fixedRowEdit select { display: block; width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-top: 2px; font-size: 16px; }
.fixedRowEdit .fixed_categoryFixed { background: #f5f5f5; }
/* 「日常費に移動」の確認欄の入力欄も同じ形(2026-10-30 広村の指示) */
.fixedToLedger label { display: block; margin-top: 6px; font-size: 14px; }
.fixedToLedger input, .fixedToLedger select { display: block; width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-top: 2px; font-size: 16px; }
/* 支払者(左)と使用量・保険の対象(右)の行。支払者の記録がオフのときは左を空けて右の欄の幅を保つ(2026-10-30) */
.fixedPayerSpacer { display: none; }
.fixed_payerRow.hidden + .fixedPayerSpacer { display: block; }
.fixedSummaryLine { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.fixedSummaryMain { flex: 1; min-width: 0; font-size: 14px; }
.fixedSummaryCat { color: #666; font-weight: normal; font-size: 13px; }
.fixedSatisfactionBadge { font-weight: bold; margin-left: 2px; }
.fixedRowBtnRow { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.fixedConfirmLine { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 13px; }
.fixedConfirmLine .smallBtn { margin-left: auto; padding: 6px 12px; font-size: 13px; }
.fixedConfirmBadge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: bold; white-space: nowrap; }
.fixedConfirmBadge.unconfirmed { background: #f9a825; color: #fff; }
.fixedConfirmBadge.confirmed { background: #e6f4ea; color: #1e7e34; }
.fixedSameBadge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 12px; color: #555; border: 1px solid #ccc; white-space: nowrap; }
.fixedSameLabel { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 8px; }
.fixedSameLabel input[type="checkbox"] { width: auto; margin: 0; padding: 0; }
/* 金額の右隣の「毎月同じ金額」: 金額の入力欄と下をそろえる(2026-10-30 広村の指示) */
.fixedAmountRow { align-items: flex-end; }
.fixedAmountRow label.amt, .fixed_usageRow label { display: block; }
.fixedAmountRow input.fixed_incl, .fixed_usageRow input.fixed_usage { display: block; width: 100%; box-sizing: border-box; } /* 列の幅に収め、右隣のチェックに重ねない */
.fixedAmountRow .fixedSameCol .fixedSameLabel { margin: 0 0 10px; white-space: nowrap; }
.row2 > .fixedSameCol { flex: 0 0 auto; } /* チェックは文字の幅だけ。残りを金額の欄に */
.fixedRowDeleteConfirm .btnRow .smallBtn { flex: 1; padding: 8px; font-size: 13px; }
.fixedTotalsTitle { margin-top: 18px; }
.fixedTrendWidget { margin-top: 14px; }
.fixedTrendWidget h3 { margin-top: 10px; }
.fixedTrendsTitle { margin: 0 0 8px; }
.fixedTrendUsageBody { margin-top: 4px; }
.usageTrendChart { display: flex; align-items: flex-end; gap: 4px; height: 160px; margin-top: 4px; padding: 20px 4px 4px; background: #f5f5f5; border-radius: 6px; }
.usageTrendColumn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.usageTrendBars { width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.usageTrendBar { flex: 1; max-width: 16px; min-height: 1px; border-radius: 2px 2px 0 0; position: relative; }
.usageTrendBarCur { background: #4285f4; }
.usageTrendBarPrior { background: #b0bec5; }
.usageTrendValue { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 2px; font-size: 10px; font-weight: bold; color: #1a56b8; white-space: nowrap; }
.usageTrendValue.prior { color: #607d8b; }
.usageTrendMonthLabel { font-size: 10px; color: #777; margin-top: 4px; }
/* 見出しとボタンを同じ行・同じ高さに(折り返さず、狭いときはボタンの文字を2行に。2026-10-30 広村の指示) */
.fixedUtilityTitleRow { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 28px; }
.fixedUtilityTitleRow h3.fixedUtilityTitle { margin: 0; flex: 1 1 auto; min-width: 0; line-height: 1.3; } /* 長い見出し(無料のときの「使用量と料金」)は折り返す */
.fixedUtilityTitleRow .smallBtn { margin: 0 0 0 auto; white-space: normal; text-align: center; line-height: 1.3; flex: 0 0 auto; max-width: 50%; }
.utilYearBar { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.utilYearBar .smallBtn { padding: 6px 14px; font-size: 14px; }
.utilYearLabel { font-size: 18px; font-weight: bold; }
.utilTable { width: 100%; border-collapse: collapse; margin-top: 10px; table-layout: fixed; }
.utilTable th, .utilTable td { border-bottom: 1px solid #e0e0e0; padding: 4px 2px; text-align: center; vertical-align: top; }
.utilTable th { font-size: 12px; background: #f5f5f5; font-weight: bold; line-height: 1.3; vertical-align: middle; }
.utilTable th.utilMonthCol, .utilTable td.utilMonthCol { width: 44px; font-size: 13px; text-align: left; padding-left: 4px; }
.utilTable td.utilMonthCol { padding-top: 10px; } /* 月の文字を1つ目の入力欄の高さに。見出しの「月」には効かせない(「電気 ガス 水道」と同じ高さに。2026-10-30 広村の指摘) */
.utilFieldRow { display: flex; align-items: center; gap: 2px; }
.utilFieldRow + .utilFieldRow { margin-top: 3px; }
.utilTable input { flex: 1; min-width: 0; width: 100%; padding: 6px 3px; font-size: 15px; margin: 0; text-align: right; -moz-appearance: textfield; }
.utilTable input::-webkit-outer-spin-button, .utilTable input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.utilTable input::placeholder { font-size: 11px; }
.utilTable input.changed { background: #fff8e1; border-color: #f9a825; }
.utilTable input:disabled { background: #f3f3f3; color: #aaa; }
.utilUnit { flex: none; font-size: 10px; color: #888; width: 22px; text-align: left; white-space: nowrap; }
.utilCarried { color: #999; font-size: 11px; margin-left: 1px; }
/* ホーム: 固定費に未確認の明細が残っているときのお知らせ(押すと固定費タブをその月で開く) */
.homeFixedNotice { margin: 0 0 14px; padding: 8px 10px; border-radius: 8px; background: #fff8e1; border: 1px solid #f0c36d; color: #8a5a00; font-size: 13px; cursor: pointer; }
/* 日常費の修正欄: 「固定費に移動」の確認欄 */
.moveFixedSame { margin-top: 10px; padding: 8px 10px; border: 1px solid #f0c36d; border-radius: 8px; background: #fff8e5; font-size: 14px; line-height: 1.6; }
.moveFixedSame label { display: block; margin-top: 4px; font-weight: normal; }
.moveFixedSame input[type="radio"] { width: auto; margin: 0 6px 0 0; }
.movePanel { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafafa; }
.movePanel .mvMsg { font-size: 14px; line-height: 1.6; }

/* ===== 特別費タブ(4-2。2026-10-30。今の Index.html の特別費の CSS を移した) ===== */
.specialTopRow label select { width: 100%; }
.specialAboutSubBtns { display: flex; gap: 8px; margin-top: 4px; }
.helpBtn.helpSubBtn { width: auto; height: auto; padding: 4px 12px; border-radius: 6px; font-size: 13px; margin: 0; }
.specialAboutNote { margin-top: 8px; padding: 8px; background: #fff; border-radius: 6px; }
.specialAboutNoteTitle { font-weight: bold; margin-bottom: 4px; }
.specialRow { border: 1px solid #ddd; border-radius: 8px; padding: 10px; margin-top: 10px; }
.specialRowEdit label { margin-top: 6px; }
/* 入力欄・選択欄の枠は固定費と同じ角丸・列の幅いっぱい(備考も横いっぱい。2026-10-30 広村の指示) */
.specialRowEdit input:not([type="checkbox"]):not([type="radio"]), .specialRowEdit select { display: block; width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-top: 4px; font-size: 15px; }
.specialRowEdit .levelPicker { margin-bottom: 4px; }
.specialToLedger label { display: block; margin-top: 6px; font-size: 14px; }
.specialToLedger input, .specialToLedger select { display: block; width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-top: 4px; font-size: 15px; }
.specialSummaryMain .amtLine { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.specialSummaryMain .recordListMarks { margin-top: 4px; }
.specialSummaryLine { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.specialSummaryMain { flex: 1; min-width: 0; font-size: 14px; }
.specialSummaryCat { color: #666; font-weight: normal; font-size: 13px; }
.specialSummaryMemo, .specialSummaryActual { color: #666; font-size: 13px; margin-top: 2px; }
.specialSatisfactionBadge { font-weight: bold; margin-left: 2px; }
.specialRowAnnualTotal { font-size: 13px; color: #333; margin-top: 4px; }
.specialRowBtnRow { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.specialRowBtnGroup { display: flex; flex-wrap: wrap; gap: 6px; }
.specialRowDeleteConfirm .btnRow .smallBtn { flex: 1; padding: 8px; font-size: 13px; }
.specialMonthChecks { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; }
.specialMonthChk { display: inline-flex; align-items: center; gap: 3px; width: auto; margin-top: 0; font-size: 13px; font-weight: normal; }
.specialMonthChk input[type="checkbox"] { width: auto; margin: 0; padding: 0; }
.specialIrregularRow { display: flex; align-items: flex-start; gap: 4px; margin-top: 6px; }
.specialIrregularRow .helpBtn { flex: none; margin-top: 6px; }
.specialIrregularLabel { display: flex; align-items: flex-start; gap: 6px; width: auto; margin-top: 4px; font-size: 13px; font-weight: normal; line-height: 1.5; }
.specialIrregularLabel input[type="checkbox"] { width: auto; margin: 3px 0 0; padding: 0; flex: none; }
.specialBreakdownToggle { margin-top: 10px; }
.specialBreakdownToggle label { display: flex; align-items: center; gap: 6px; width: auto; font-weight: normal; font-size: 13px; }
.specialBreakdownToggle label input[type="checkbox"] { width: auto; margin: 0; padding: 0; }
.specialBreakdownNote { margin-top: 2px; font-size: 12px; }
.specialActualArea { margin-top: 6px; padding: 8px; background: #f7f7f7; border-radius: 8px; }
.specialActualEmptyNote { margin: 0 0 6px; }
.specialActualRow { margin-top: 6px; }
/* 実績明細は 1行目: 日付・金額、2行目: メモ・「日常費に移動」・削除(2026-10-30) */
.specialActualMain, .specialActualSub { display: flex; gap: 6px; align-items: center; }
.specialActualSub { margin-top: 4px; }
.specialActualMain .specialActual_date { flex: 1 1 55%; min-width: 0; margin-top: 0; }
.specialActualMain .specialActual_amount { flex: 1 1 45%; min-width: 0; margin-top: 0; text-align: right; }
.specialActualSub .specialActual_memo { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.specialActualSub .smallBtn { flex: 0 0 auto; margin-top: 0; white-space: nowrap; }
.specialActualRow .medicalBlock { margin-top: 4px; }
/* 内訳の1件の満足度(3行目。2026-10-31) */
.specialActualSat { margin-top: 4px; } /* 「満足度」はボタン列の上(狭い画面でもボタンを幅いっぱいに) */
.specialActualSatLabel { display: block; font-size: 13px; }
.specialActualSat .levelPicker { margin-top: 2px; margin-bottom: 0; }
/* 不定期の文・内訳を設けるの「？」(2026-10-31) */
.specialIrregularHelp p { margin: 0 0 6px; }
.specialIrregularHelp p:last-child { margin-bottom: 0; }
.specialBreakdownLine { display: flex; align-items: center; gap: 4px; }
.specialBreakdownLine label { width: auto; }
.specialBonusAllocArea { margin-top: 48px; }
.specialBonusAllocRow { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.specialBonusAllocIndex { flex: 0 0 auto; font-weight: bold; width: 1.2em; text-align: right; }
.specialBonusAllocAmount { flex: 1 1 auto; min-width: 0; text-align: right; margin-top: 0; }
.specialBonusAllocMonthLabel { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: normal; white-space: nowrap; margin: 0; }
.specialBonusAllocMonthLabel select { width: auto; margin-top: 0; }
/* 見出しの上を1行分あける(2026-11-01 広村の指示)。.section h3 の margin に負けないよう h3 を付けて書く。「集計」の下には空白を置かない: 見出し「集計」と「くわしい集計を見る ▾」は同じ行(左に見出し・右にボタン)、1行目の箱の上の余白は小さく */
.specialTotalsHead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 44px; }
.section h3.specialTotalsTitle { margin: 0; }
.section h3.specialScheduleTitle { margin: 44px 0 8px; }
.specialTotalsHead + .specialTotalsRow .totalBox { margin-top: 6px; }
.specialBarChart { display: flex; align-items: flex-end; gap: 4px; height: 240px; margin-top: 10px; padding: 6px 4px 4px; background: #f5f5f5; border-radius: 6px; cursor: pointer; }
.specialBarColumn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; position: relative; }
.specialBarTrack { width: 100%; height: 100%; display: flex; align-items: flex-end; }
.specialBarTrackStacked { flex-direction: column-reverse; }
.specialStackedSegment { width: 100%; min-height: 1px; }
.specialBarMonthLabel { font-size: 10px; color: #777; margin-top: 4px; }
.specialBarValue { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; font-size: 10px; font-weight: bold; color: #333; white-space: nowrap; background: #fff; padding: 1px 3px; border-radius: 2px; pointer-events: none; }
.specialBarChartLarge { height: 420px; cursor: default; }
.specialBarChartLarge .specialBarValue { font-size: 12px; }
.tableScroll { overflow-x: auto; margin-top: 8px; }
.tableScroll table { width: 100%; border-collapse: collapse; margin-top: 0; font-size: 12px; white-space: nowrap; }
.tableScroll th, .tableScroll td { border-bottom: 1px solid #e0e0e0; padding: 4px 6px; text-align: left; }
.tableScroll .num { text-align: right; }
.legend { flex: 1; min-width: 0; font-size: 12px; }
.lgRow { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.lgRow .dot { flex: 0 0 10px; margin: 0; }
.lgName { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.specialBoxTitle { font-size: 15px; font-weight: bold; }
.specialReserveDetail { color: #555; font-size: 13px; margin-top: 4px; }
.specialReserveDetail div { margin-top: 2px; }
.specialReserveGuideUnit { font-size: 13px; font-weight: normal; margin-left: 2px; }
.specialReserveTrendLabel { font-size: 15px; font-weight: bold; margin-top: 20px; }
.specialReserveTrendLatest { font-weight: normal; color: #666; margin-left: 6px; }
.specialReserveTrendChartWrap { position: relative; margin-top: 10px; background: #f5f5f5; border-radius: 6px; padding: 6px 4px 4px; }
.specialReserveTrendSvg { width: 100%; height: 160px; display: block; }
.specialReserveTrendZeroLine { stroke: #999; stroke-width: 1; stroke-dasharray: 3,3; }
.specialReserveTrendBarPos { fill: #1e7e34; }
.specialReserveTrendBarNeg { fill: #c5221f; }
.specialReserveTrendValueLabels { position: absolute; inset: 0; pointer-events: none; }
.specialReserveTrendValueLabel { position: absolute; font-size: 10px; color: #333; white-space: nowrap; }
.specialReserveTrendValueLabel.pos { transform: translate(-50%, -100%); margin-top: -2px; }
.specialReserveTrendValueLabel.neg { transform: translateX(-50%); margin-top: 2px; }
.axis { position: relative; height: 16px; margin-top: 2px; font-size: 11px; color: #777; }
.axis span { position: absolute; top: 0; transform: translateX(-50%); }
.axis span.last { transform: translateX(-100%); }
.specialReserveTrendCalcToggleBtn { margin-top: 10px; padding: 8px 16px; font-size: 13px; }
.specialReserveEditRow { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.specialReserveEditMonthLabel { flex: 0 0 auto; font-weight: bold; width: 3em; }
.specialReserveEditAmount { flex: 1 1 auto; min-width: 0; text-align: right; margin-top: 0; }
.specialReserveEditRow .specialReserveResetBtn { flex: 0 0 auto; margin-top: 0; white-space: nowrap; }
.specialReserveEditStatusBadge { flex: 0 0 auto; width: 3.6em; font-size: 12px; text-align: center; }
.specialReserveEditRow--confirmed .specialReserveEditStatusBadge { color: #2E8B57; font-weight: bold; }
.specialReserveEditRow--unconfirmed .specialReserveEditStatusBadge, .specialReserveEditRow--editable .specialReserveEditStatusBadge { color: #999; }
.specialReserveEditRow--unconfirmed .specialReserveEditAmount { background: #f2f2f2; color: #999; }
.specialReserveEditRow--unconfirmed { opacity: 0.5; }
.specialReserveEditSourceLabel { font-size: 11px; color: #888; margin: 0 0 2px calc(3em + 8px); }
.specialReserveEditOriginal { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: #555; margin: 0 0 4px calc(3em + 8px); }
.specialReserveEditOriginal .smallBtn { margin-top: 0; }
#specialReserveEditArea h3 { margin-top: 20px; }
.specialIrregularSaveNote { margin-top: 6px; font-size: 13px; font-weight: normal; color: #8a5a00; }

/* ===== 下の帯(メインタブ)・「＋ 記録」・せり上がる一覧(2026-10-30 広村の決定。メインタブを画面の下へ。設計書 08 §0-1b) ===== */
:root { --bbH: 58px; --safeB: env(safe-area-inset-bottom, 0px); }
main { padding-bottom: calc(var(--bbH) + var(--safeB) + 28px); }
body.fabOn main { padding-bottom: calc(var(--bbH) + var(--safeB) + 96px); } /* 「＋ 記録」が出ているときは、いちばん下の明細・ボタンがボタンの下に隠れないように */
.bottomBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: center; background: #fff; border-top: 1px solid var(--line); padding-bottom: var(--safeB); }
.bottomBar button { flex: 1 1 0; max-width: 152px; height: var(--bbH); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin: 0; padding: 4px 2px; border: 0; background: none; color: var(--muted); font-size: 11px; line-height: 1.2; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bottomBar button svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bottomBar button.active { color: var(--accent); font-weight: 700; }
.bottomBar button.active svg { stroke-width: 2.2; }
body.kbOpen .bottomBar, body.kbOpen .fab { display: none; } /* 文字を打つあいだは隠す(スマホのキーボードの上に浮いて邪魔になるため) */
.fab { position: fixed; right: 16px; bottom: calc(var(--bbH) + var(--safeB) + 16px); z-index: 41; display: inline-flex; align-items: center; gap: 4px; width: auto; height: 50px; margin: 0; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; box-shadow: 0 4px 14px rgba(224, 122, 111, 0.45); cursor: pointer;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* 長押しの標準の動き(文字選択・メニュー)を出さない */
.fab .fabPlus { font-size: 22px; line-height: 1; font-weight: 400; }
.fab.pressing { transform: scale(0.95); }
@media (min-width: 800px) { .fab { right: calc(50% - 380px + 16px); } } /* PC では本文の幅(760px)の右端にそろえる */
.fab.saveMode { padding: 0 20px; } /* 「保存する」(v190): ＋ の印は無し */
.fab.saveMode.pocket { background: #7e57c2; box-shadow: 0 4px 14px rgba(126, 87, 194, 0.45); } /* 「おこづかいに保存」は入力欄(pocketMode)と同じ紫系 */
.fab:disabled { opacity: 0.7; cursor: default; } /* 保存中 */
.toast { bottom: calc(var(--bbH) + var(--safeB) + 18px); z-index: 45; }
#busyBanner { bottom: calc(var(--bbH) + var(--safeB) + 16px); }
.sheetOverlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.4); }
.sheet { width: 100%; max-width: 520px; background: #fff; border-radius: 18px 18px 0 0; padding: 8px 16px calc(14px + var(--safeB)); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2); animation: sheetUp 0.18s ease-out; }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.sheetHandle { width: 40px; height: 4px; margin: 2px auto 10px; border-radius: 2px; background: #d8ccc3; }
.sheetTitle { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.sheetList button { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 13px 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink); font-size: 16px; text-align: left; cursor: pointer; }
.sheetList button:last-child { border-bottom: 0; }
.sheetList button.active { color: var(--accent); font-weight: 700; }
.sheetList button svg { flex: none; width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sheetList button .sheetSub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.sheetList button.current::after { content: 'いつもの動き'; flex: none; margin-left: auto; padding: 1px 7px; border: 1px solid var(--accent); border-radius: 999px; font-size: 11px; color: var(--accent); } /* 長押しの一覧で、タップのときの動きに札 */
.sheetList button.current > span { flex: 1 1 auto; min-width: 0; }
.btn.link.sheetLink { display: block; width: 100%; margin-top: 8px; text-align: center; font-size: 14px; }
.sheet .sheetCloseBtn { margin-top: 10px; }
.sheetMsg { margin: 8px 0 4px; font-size: 15px; font-weight: 600; }
.sheet .sheetNote { margin: 0; }
.sheetBtnRow { display: flex; gap: 10px; }
.sheetBtnRow .btn { flex: 1; margin-top: 12px; }
ul.helpList { margin: 6px 0 0; padding-left: 18px; font-size: 14px; } /* 使い方「画面の見方と操作」 */
ul.helpList li { margin: 4px 0; }
body.fabOn .toast { bottom: calc(var(--bbH) + var(--safeB) + 16px + 50px + 12px); } /* 「＋ 記録」が出ているときは、知らせをその上に(重ならないように) */
/* 日常費のサブタブをスワイプで切り替えたとき、次の画面が横から入る(2026-10-30 広村の指摘「反応が鈍い」で追加) */
@keyframes subSlideL { from { transform: translateX(40%); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes subSlideR { from { transform: translateX(-40%); opacity: 0.4; } to { transform: none; opacity: 1; } }
.subSlideL { animation: subSlideL .22s ease-out; }
.subSlideR { animation: subSlideR .22s ease-out; }
#main { overflow-x: hidden; } /* 指についてくる画面が横にはみ出してもページが横に揺れないように */
/* 移動の確認欄(日常費 ⇔ 特別費・固定費)のボタン: 「実行する」は右端で色付き、「やめる」は灰色(2026-10-31 広村の指示) */
.btnRow.moveBtnRow { justify-content: flex-end; margin-top: 10px; }
.moveBtnRow .smallBtn { padding: 8px 16px; font-size: 14px; }
.smallBtn.moveExecBtn { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.smallBtn.moveExecBtn:disabled { opacity: 0.5; }
.moveCancelBtn { background: #e9e6e4; border: 1px solid #e9e6e4; color: var(--ink); }

/* ===== 4-3(2026-10-31): 収入タブ・バランス表・貯蓄のカード・月途中の貯蓄 ===== */
.incEditBtnRow { text-align: right; }
.incEditBtnRow .smallBtn { width: auto; margin-top: 4px; }
.incPointsDetail { margin-top: 8px; padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; background: #fafafa; }
.incPointsDetailTitleRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.incPointsDetailTitle { font-weight: bold; font-size: 14px; }
.incPointsDetailTable { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 13px; }
.incPointsDetailTable th, .incPointsDetailTable td { padding: 4px 4px; border-bottom: 1px solid #e3e3e3; text-align: left; vertical-align: top; word-break: break-word; }
.incPointsDetailTable th { font-weight: normal; color: #666; white-space: nowrap; }
.incPointsDetailTable .num { text-align: right; white-space: nowrap; }
.incPointsDetailTotalRow td { font-weight: bold; border-bottom: none; }
.incDetailLineBtnRow { display: flex; justify-content: flex-end; margin-top: 6px; }
/* バランス表: 収入・支出の2枚のカードを左右に(今の Index.html と同じ形) */
.balanceCards { margin-top: 8px; display: flex; align-items: stretch; gap: 8px; }
.balanceSection { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border-radius: 16px; padding: 10px 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); background: #fff; }
.balanceSection.income { background: #fff6f7; }
.balanceSection.expense { background: #f4f6fd; }
.balanceSpacer { flex: 1 1 auto; }
.balanceSectionHeader { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 4px; font-size: 13px; font-weight: bold; padding-bottom: 6px; border-bottom: 1px dashed rgba(0,0,0,0.12); box-sizing: border-box; min-height: 30px; }
.balanceSection.income .balanceSectionHeader { color: #C2255C; }
.balanceSection.expense .balanceSectionHeader { color: #4A55A8; }
.balanceSectionHeader .smallBtn, .balanceRowLabel .smallBtn, .balanceRowValue .smallBtn { width: auto; margin-top: 0; padding: 2px 8px; font-size: 10px; border-radius: 20px; background: #fff; }
.balanceSection.expense .balanceRowLabel .smallBtn, .balanceSection.expense .balanceRowValue .smallBtn { color: #4A55A8; border: 1px solid #C2C7F5; }
.balanceRow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 2px; gap: 6px; padding: 7px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.balanceRow:last-child { border-bottom: none; }
.balanceRowLabel { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 11px; color: #444; }
.balanceRowValue { text-align: right; font-size: 11px; font-weight: 600; color: #333; white-space: nowrap; }
.balanceRowValue.dual { display: flex; flex-direction: column; align-items: stretch; gap: 1px; margin-left: auto; }
.valLine { font-size: 10px; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.valLabel { font-size: 9px; color: #888; font-weight: normal; }
.balanceRow.savings { background: rgba(255, 201, 60, 0.2); border-radius: 10px; padding: 7px 8px; margin: 2px 0; border-bottom: none; }
.balanceRow.total { margin-top: 4px; padding-top: 10px; border-top: 2px solid rgba(0,0,0,0.14); border-bottom: none; box-sizing: border-box; min-height: 50px; }
.balanceRow.total .balanceRowLabel, .balanceRow.total .balanceRowValue { font-size: 12px; font-weight: bold; }
.balanceRow input[type="number"] { width: 72px; text-align: right; margin-top: 0; box-sizing: border-box; font-size: 11px; padding: 3px 5px; border-radius: 6px; border: 1px solid var(--line); }
.balanceFixedUnconfirmedNote { margin: 2px 0 6px; padding: 4px 8px; border-radius: 6px; background: #fff8e1; color: #8a5a00; font-size: 12px; }
.balanceNote { margin-top: 6px; font-size: 11px; color: var(--muted); }
.btn.balanceSaveBtn { margin-top: 20px; }
/* 「○年○月の貯蓄」のカード(保存ボタンから1行分あける) */
.savingsCard { margin-top: 34px; padding: 10px 12px; border: 1px solid #e6d3a1; border-radius: 10px; background: #fff9e8; }
.savingsCardTitle { font-weight: bold; font-size: 15px; }
.savingsCardMain { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.savingsCardTotal { font-size: 24px; font-weight: bold; color: #8a5a00; }
.savingsCardRate { font-size: 14px; color: #555; }
.savingsCardBreakdown { font-size: 12px; color: #555; margin-top: 4px; }
.savingsCardItem { white-space: nowrap; }
.savingsCardYtd { font-size: 13px; margin-top: 6px; }
/* 「支出の内訳(全体)」の見出しと「予算(予定)/現状」の切り替え・貯蓄のカードの見出しと切り替え・バランス表の「？」の段落(2026-11-02 広村の指示) */
.pieTitleRow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin-top: 20px; }
.pieTitleRow .pieTitle.big { margin-top: 0; }
.savingsCardTitle { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }
.trendToggle.hidden { display: none !important; }
#homeBalanceSection .helpNote p { margin: 0 0 8px; }
#homeBalanceSection .helpNote p:last-child { margin-bottom: 0; }
/* 月途中の貯蓄の明細 */
.savingsDetailRow { border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px 10px; margin-top: 10px; background: #fff; }
.savingsDetailRow label { display: block; margin-top: 8px; font-size: 14px; }
.savingsDetailRow input, .savingsDetailRow select { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-sizing: border-box; margin-top: 2px; }
.savingsRowBtnRow { display: flex; justify-content: flex-end; margin-top: 8px; }
/* 収入タブの入力欄は日常費・固定費と同じ角丸の枠(2026-10-31 広村の指示)。読み取り専用の欄は薄い灰色 */
#incomeMain label { display: block; margin-top: 8px; font-size: 14px; }
#incomeMain .row2 > div > label { line-height: 1.3; }
#incomeMain input[type="number"], #incomeMain input[type="text"] { display: block; width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-top: 2px; font-size: 16px; }
#incomeMain input[disabled] { background: #f3f3f3; color: #444; }
#incomeMain .helpNote p { margin: 0 0 6px; }
#incomeMain .helpNote p:last-child { margin-bottom: 0; }
.incPointsOnlyNote { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.incPointsOnlyNote .smallBtn { flex: none; }
/* 左上のアイコン(タップで「このアプリについて」。2026-11-01) */
.topbarIconBtn { flex: none; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 9px; background: none; cursor: pointer; display: block; }
.topbarIconBtn img { display: block; }
.appInfoSheet { text-align: center; }
.appInfoIcon { display: block; width: 96px; height: 96px; border-radius: 22px; margin: 6px auto 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
.appInfoTitle { font-size: 20px; font-weight: 700; }
.appInfoSub { font-size: 14px; color: var(--muted); line-height: 1.5; }
.appInfoGoalLabel { margin-top: 16px; font-size: 14px; font-weight: 600; text-align: left; }
.appInfoGoal { margin-top: 4px; padding: 10px 12px; background: #f7f1ea; border-radius: 10px; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5; min-height: 2.6em; }

/* 「その他」の一覧は幅を3分の1に(2026-11-01 広村の指示)。右下の「その他」のボタンの上に、小さな一覧として出す(狭い画面でも文字が切れないよう最小 148px) */
#moreSheet { justify-content: flex-end; align-items: flex-end; padding: 0 8px calc(var(--bbH) + var(--safeB) + 6px) 0; box-sizing: border-box; }
#moreSheet .sheet { width: 50%; min-width: 148px; max-width: 320px; border-radius: 14px; padding: 6px 8px 8px; } /* 幅は画面の半分(2026-11-02 広村の指示。前は3分の1) */
#moreSheet .sheetHandle { display: none; }
#moreSheet .sheetTitle { font-size: 13px; padding: 2px 6px 4px; color: var(--muted); }
#moreSheet .sheetList button { padding: 10px 6px; gap: 8px; font-size: 14px; }
#moreSheet .sheetList button svg { width: 20px; height: 20px; }
.appInfoSheet { max-height: 88vh; overflow-y: auto; }
.appInfoGoalArea { margin-top: 12px; text-align: left; }
/* 特別費の集計(2026-11-01): 年間合計と月平均を横に。拡大画面の月の内訳 */
.specialTotalsRow { gap: 8px; }
.specialTotalsRow .totalBox { flex: 1; min-width: 0; margin-top: 16px; }
.specialTotalsRow .totalBox .big { font-size: 20px; }
.specialBarChartLarge .specialBarColumn { cursor: pointer; border-radius: 4px; }
.specialBarChartLarge .specialBarColumn.selected { background: #ffe9c2; outline: 2px solid #e8b23d; }
.specialChartModeRow { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.specialChartModeRow .specialChartHint { margin: 0; }
.specialChartYearBtn.active { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--ink); font-weight: 600; }
.specialChartDetail { margin-top: 8px; }
.specialChartDetailTitle { font-weight: bold; font-size: 14px; margin: 8px 0 4px; }
.specialChartDetailTotal { font-weight: normal; color: #555; margin-left: 6px; }
.specialSummaryMonths { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.specialSummaryAnnual { margin-left: auto; white-space: nowrap; }


/* ===== お小遣い(段階4-4 前半。2026-11-03。08 §4〜§7) ===== */
#inputView.pocketMode .line { border-color: #b39ddb; background: #faf7ff; } /* 入力欄の色が変わる(色合いの読み替えは段階5) */
#inputView.pocketMode .payerPickerWrap { display: none !important; } /* お小遣いの明細に支払者は無い */
.pocketLockNote { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: #f3eefc; color: #5e3ea1; font-size: 13px; }
.statusLinkBtn { margin-left: 8px; vertical-align: middle; }
.pocketCard { margin-top: 10px; padding: 12px; background: #f7f1ea; border-radius: 10px; }
.pocketCard.over { background: #fdecea; }
.pocketKv { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; padding: 2px 0; gap: 8px; }
.pocketKv b { font-size: 18px; white-space: nowrap; }
.pocketBar { height: 10px; background: #e6ded4; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.pocketBarFill { height: 100%; background: #8e6cc2; border-radius: 999px; }
.pocketCard.over .pocketBarFill { background: var(--ng); }
.pocketOver { margin-top: 6px; color: var(--ng); font-weight: bold; font-size: 14px; }
.pocketBtnRow .btn { flex: 1; min-width: 0; }
.pocketMonthlyTable tr[data-ym] { cursor: pointer; }
.pocketMonthlyTable tr.current td { background: #f7f1ea; }
.calPocket { font-size: 10px; color: #6a4aa8; font-weight: bold; margin-top: 1px; overflow-wrap: break-word; }
.dayPocketTitle { margin: 14px 0 4px; font-size: 14px; color: #5e3ea1; border-top: 1px solid var(--line); padding-top: 10px; }
.dayPocketLine { border-color: #b39ddb; background: #faf7ff; }

/* 対象月の「◂ 対象月 [年月] ▸」・特別費の対象年(v143) */
.monthNav { gap: 4px; } /* v166: 年月の欄を広げたぶん間隔を少し詰める */
.monthNav .monthNavBtn, .yearNav .monthNavBtn { padding: 5px 8px; font-size: 14px; line-height: 1.2; flex: none; width: auto; margin: 0; }
.monthNavBtn:disabled { opacity: 0.35; cursor: default; }
.yearNav { display: flex; align-items: center; gap: 6px; }
.yearNav select { flex: 1; min-width: 0; }
.calModalBarMonth { justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }

/* v144(2026-11-03 広村の指示): 更新の知らせ・移動の案内の色・固定費の注意書きの色・適用期間・満足度の「？」・記録の種類とお小遣いの見出しの色 */
.rowNoticeRow td { padding: 2px 8px 6px; }
.rowNotice { display: inline-block; background: #e6f4ea; color: #1e7e34; border: 1px solid #8fcda1; border-radius: 8px; padding: 4px 10px; font-size: 13px; font-weight: bold; }
.moveNotice { color: #b3541e; font-weight: bold; }
.fixedSaveReminder { color: #b3541e; font-weight: bold; }
.pocketAbout { color: #5e3ea1; font-weight: bold; }
.fixedPeriodRow input[type="month"] { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; box-sizing: border-box; background: #fff; }
.fixedPeriodNote { margin: 4px 0 0; }
.fixedRow.fixedRow--inactive { opacity: 0.65; background: #f4f4f4; }
.satPickerLabel .helpBtn { margin-left: 2px; }
.amtSatRow { flex-wrap: wrap; }
.amtSatRow .satHelpNote { flex: 0 0 100%; margin-top: 6px; }
.monthNav input[type="month"] { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; flex: 0 1 auto; width: 8.5em; min-width: 0; } /* v164→v166: スマホでは年月の欄を 8.5em(7.5em では「月」が見切れた)にして「(10/25〜11/24)」が同じ行に収まるように。伸ばさない(添え書きが無いとき横に長くなっていた) */
@media (min-width: 600px) { .monthNav input[type="month"] { width: auto; } }

/* v145(2026-11-03 広村の指示): 明細○（お小遣い）・お小遣い関連の確認文は紫・ポイントの案内・移動の知らせは見出しの下・特別費「修正内容を保存」は緑 */
.lineKindTag { color: #5e3ea1; font-weight: normal; margin-left: 4px; }
.mvMsg.pocketMsg { color: #5e3ea1; }
.pointsNote { white-space: pre-line; color: #b3541e; font-weight: bold; }
.listNotice { margin: 4px 0 8px; padding: 8px 10px; border-radius: 8px; background: #fff3e8; color: #b3541e; font-weight: bold; font-size: 14px; white-space: pre-wrap; }
.btn.reserveSaveBtn { background: #2e7d32; }

/* 段階4-4 後半(★): 暗証番号の画面・円グラフ・メモ・推移・設定の行・カテゴリの編集 */
.pocketLock { margin-top: 10px; padding: 18px 12px; background: #f3eefc; border-radius: 10px; text-align: center; }
.pocketLockTitle { font-weight: bold; color: #5e3ea1; margin-bottom: 10px; }
.pocketPinInput { width: 8em; max-width: 100%; margin: 0 auto; display: block; padding: 10px; font-size: 24px; letter-spacing: 0.5em; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.pocketLock .btn { max-width: 240px; margin-left: auto; margin-right: auto; }
.pocketForgotRow { margin-top: 10px; }
.pocketLock .helpNote { text-align: left; }
#pocketReauthPw { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; margin-top: 4px; }
.pocketPieArea .pieTitleRow { margin-top: 16px; }
.pocketMemoArea h3 { margin-top: 16px; }
.pocketMemoArea textarea { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.pocketMemoRead { padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; white-space: pre-wrap; font-size: 14px; }
.pocketMemoBtnRow .btn { flex: 0 0 auto; width: auto; padding: 8px 14px; margin-left: auto; }
.pocketTrendArea h3 { margin-top: 16px; }
.pocketBarAmount { background: #c9b8ea; }
.pocketBarSpent { background: #5e3ea1; }
.pocketBarSpent.over { background: #c5221f; }
.dot.pocketDotAmount { background: #c9b8ea; }
.dot.pocketDotSpent { background: #5e3ea1; }
.pocketSettingRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; }
.pocketSettingBtns { display: flex; gap: 6px; }
.pocketSettingBtns .smallBtn { padding: 6px 10px; font-size: 13px; }
.pocketPinForm { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafafa; }
.pocketPinForm input[type="password"] { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; margin-top: 4px; }
.pocketCatEditor { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafafa; }
.pcRow { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.pcRow input { flex: 1; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.pcRow .pc_name { flex: 0 0 38%; }
.pcRow .smallBtn { flex: none; }

/* v147: ロックする・ロック中のカレンダー・日別明細の解除・明細の見出しの隣の知らせ・推移と設定の間隔 */
.pocketLockBtn { margin-right: auto; padding: 5px 10px; font-size: 13px; }
.calPocket.locked { color: #5e3ea1; }
.dayPocketUnlock { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.dayPocketUnlock input { width: 7em; padding: 8px; font-size: 18px; letter-spacing: 0.3em; text-align: center; border: 1px solid var(--line); border-radius: 8px; }
.dayPocketUnlock .smallBtn { flex: none; padding: 8px 10px; }
.pocketListHead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.listNoticeInline { color: #b3541e; font-weight: bold; font-size: 14px; background: #fff3e8; padding: 4px 10px; border-radius: 8px; }
#pocketSettingsBox { margin-top: 28px; }
.pocketLockTitle { line-height: 1.6; }

/* v149: おこづかいタブの余白・予算消化の棒・カレンダー */
.pocketAbout span { text-align: right; line-height: 1.5; }
.pocketCalendarArea { margin-top: 24px; }
.pocketGauges { margin-top: 10px; }
.pocketListHead { margin-top: 24px; }
.pocketMemoArea h3 { margin-top: 28px; }
.pocketTrendArea h3 { margin-top: 28px; }
.pocketCatEditor .btn.secondary + .btn.secondary { margin-top: 10px; }

/* v151: 予算消化の見出しは無し(棒の名前と重なるため。v150 の見出しの位置合わせも不要に)。今週の棒の上に期間と「この週のみ｜繰越含む」。月ごとの一覧は上に1行分の余白。カレンダーが無いときの余白と★の見出し */
.pocketWeekHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 22px; font-size: 13px; }
.tabs.subtabs.pocketWeekModeTabs button.active { background: #5e3ea1; border-color: #5e3ea1; color: #fff; }
.pocketMonthlyTitle { margin-top: 50px; }
.pocketCalendarArea:empty { margin-top: 0; }
.pocketCalTitle { font-weight: bold; font-size: 15px; }

/* v152: 集計対象外のカテゴリ(基本設定のチェック・明細の札・薄い行・予算・集計の「集計対象外の内訳」・入力欄の注意) */
.catExcl { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; flex: none; }
.editRow .catExcl input { flex: none; width: auto; min-width: 0; margin: 0; padding: 0; }
.mark--ex { background: #efe9e0; color: #6b5a3e; font-weight: bold; }
.badge.ex { margin-left: 4px; background: #efe9e0; color: #6b5a3e; border: 0; font-weight: bold; }
.recordTable tr.rowExcluded td, .recordTable tr.rowExcluded .amtLine, .recordTable tr.rowExcluded .recordListStore { color: var(--muted); }
.excludedBreakdown { margin-top: 18px; }
.excludedBreakdown .pieTitle { margin-top: 12px; }
.l_exNote, #e_exNote { margin-top: 6px; }

/* v153: バランス表「集計対象外（事業など）」の「内訳」の窓(円グラフ+明細の一覧。日別明細と同じ枠 .calModal) */
#excludedModal h3 { font-size: 18px; margin: 4px 0 8px; }
#excludedModal .excludedBreakdown { margin-top: 12px; }
.excludedModalBtns { justify-content: center; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.excludedModalBtns .btn { width: auto; padding: 12px 24px; margin-top: 0; }
.exRecHead { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; flex-wrap: wrap; }
.exRecDate { font-size: 13px; color: var(--muted); font-weight: normal; flex: none; }
.exRecList .exEditBtn { flex: none; margin-left: 8px; }

/* v155: 2026-11-05 広村の指示(バランス表「内訳」を金額の左に・光熱費の1年分ボタンに色・特別費の冒頭文・おこづかいの週の見出しを棒の下に) */
.balanceRowValue.withBtn { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
.smallBtn.utilityYearBtn { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.tabAbout.tabIntro { justify-content: flex-start; flex-wrap: wrap; color: var(--ink); line-height: 1.5; }
.pocketWeekHead.below { margin-top: 6px; }
.fixedPeriodHelp { margin-top: 4px; }

/* v156: おこづかいタブ(2026-11-05 広村の指示): 棒の左の表記を2行に(棒を長く)・「この週のみ｜繰越含む」を右端・2つのボタンを2行+おこづかいの紫 */
.pocketGauges .budgetGaugeLabel { white-space: normal; line-height: 1.3; padding-bottom: 3px; }
.pocketWeekHead .tabs.subtabs.pocketWeekModeTabs { margin-left: auto; }
.btn.pocketMainBtn { background: #5e3ea1; color: #fff; border: 0; line-height: 1.35; padding: 10px 8px; }

/* v157: 金融資産タブ(5-1。2026-11-05)。行の一覧表示・確認/未確認は固定費の部品(.fixedSummaryLine ほか)を使う */
.tabs.subtabs.assetNameTabs { margin-top: 32px; } /* v159→v163: 上(確認のカード)との間に1行分。.tabs.subtabs の margin に負けないよう同じ強さで書く */
.assetTabUnconfirmed { display: block; font-size: 10px; color: #b35c00; line-height: 1.2; }
.assetTabUnconfirmed:empty { display: none; }
.assetNameGroup .assetOwnTotal .totalBox { margin-top: 6px; }
.assetCategoryGroup { margin-top: 14px; }
.assetCategoryLabel { font-weight: bold; font-size: 14px; margin: 6px 0 0; }
.assetAddBtn { margin-top: 8px; }
.assetRow--unconfirmed { border-color: #f0c36d; background: #fffdf5; }
.asset_currencyHint { font-size: 11px; color: var(--muted); margin-top: 2px; }
.assetInsPremiumRow { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
.assetYearSuffixRow { display: flex; align-items: center; gap: 4px; }
.assetYearSuffixRow input { flex: 1; min-width: 0; }
.assetFutureYearSpacer { visibility: hidden; }
.assetMainBreakdown { margin-top: 6px; }
.specialReserveDetail { font-size: 13px; margin-top: 4px; }
.section h3.assetSectionTitle { margin-top: 22px; } /* v163: .section h3 の margin に負けないよう h3 を付けて書く */
.assetSubTitle { margin: 16px 0 4px; font-size: 14px; }
.assetReserveSubTotal { margin-top: 6px; }
.assetNameTotals .card { flex: 1 1 100%; }
.assetTrendCtrl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.assetTrendBlock { margin-top: 14px; }
.assetTrendLabel { display: flex; align-items: baseline; gap: 8px; font-weight: bold; font-size: 14px; flex-wrap: wrap; }
.assetTrendLatest { margin-left: auto; font-size: 15px; }
.assetTrendLabelNote { font-size: 11px; color: var(--muted); font-weight: normal; }
.assetTrendChartWrap { position: relative; margin-top: 22px; }
.assetTrendSvg { width: 100%; height: 90px; display: block; }
.assetTrendValueLabels { position: absolute; inset: 0; pointer-events: none; }
.assetTrendValueLabel { position: absolute; transform: translate(0, -100%) rotate(-45deg); transform-origin: left bottom; font-size: 10px; color: #333; white-space: nowrap; }
.assetTrendRange { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.assetTrendTable { border-collapse: collapse; min-width: 100%; }
.assetTrendTable th, .assetTrendTable td { padding: 4px 6px; font-size: 12px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.assetTrendTable .num { text-align: right; }
.assetGoalToggleRow { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.assetGoalFlash { font-size: 12px; color: #188038; }
.assetGoal { margin: 6px 0 8px; padding: 8px; background: #f8f9fa; border: 1px solid #e3e3e3; border-radius: 8px; font-size: 13px; }
.assetGoalRow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.assetGoalRow:first-child { margin-top: 0; }
.assetGoalRow input { margin-top: 0; padding: 6px; font-size: 14px; }
.assetGoalRow .assetGoal_text { flex: 1 1 200px; width: auto; }
.assetGoalRow input[type="month"] { width: 9.5em; }
.assetGoalRow input[type="number"] { width: 7.5em; text-align: right; }
.assetGoalRateWrap { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.assetGoalCaption { font-weight: bold; color: #444; }
.assetGoalRate { font-weight: bold; color: #1a73e8; }
.assetGoalBtns { display: flex; gap: 6px; margin-left: auto; }
.assetGoal .helpNote { background: #fff; margin-top: 4px; }
.assetGoalStartSummary { color: #555; font-size: 12px; }
.assetHouseholdPieMode { display: flex; gap: 12px; font-size: 13px; margin: 4px 0; }
.assetMoveItem { display: flex; gap: 6px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.assetMoveItem input { margin: 2px 0 0; width: auto; flex: none; }

/* v158: 家計の月(開始日の設定。5-1b): 対象月の横とカレンダーの見出しの「(10/25〜11/24)」 */
.monthNavNote { font-size: 11px; color: var(--muted); margin-left: 4px; white-space: nowrap; }
.monthNavNote:empty { display: none; }
.calPeriodNote { font-size: 11px; color: var(--muted); margin-left: 4px; font-weight: normal; }

/* v159: 金融資産タブの直し(11 §36 の確認結果。2026-11-06): 「名義の統合」の見出しの上に1行分の余白 */
.section h3.assetSectionTitle.assetMergeTitle { margin-top: 44px; }

/* v163: 金融資産タブの直し(11 §36 の2回目。2026-11-06): 「金融資産の推移」の見出しの上に1行分、決めた目標の1行、基本設定「月の区切り」の「↓設定内容」 */
.section h3.assetSectionTitle.assetTrendTitle { margin-top: 40px; }
.assetGoalSummary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 4px; font-size: 13px; }
.assetGoalSummaryLabel { font-weight: bold; color: #1a73e8; }
.assetGoalSummaryText { color: var(--ink); }
.assetGoalSummaryTarget { color: #444; }
.assetGoalSummaryRate { font-weight: bold; color: #1a73e8; }
.monthSettingNoteHead { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* v165: メイン口座の内訳の2行目「（"特別費への備え"残高をマイナス）」 */
.assetMainSavingsNote { font-size: 12px; color: var(--muted); margin-top: 0 !important; }

/* v167: メイン口座の内訳「純粋な預貯金 ？: ¥○」の2行目「（"特別費への備え"残高をマイナス）」を「¥」の位置から */
.assetMainSavingsGrid { display: grid; grid-template-columns: max-content 1fr; column-gap: 4px; align-items: baseline; }

/* v168: 集計タブ(5-2。2026-11-06)。今の Index.html の annualReport*・annualBar*・payerShare*・savings*・annualLifelogTable・annualSatCats・reportOpenBox を移した */
.section h3.annualH3 { margin-top: 28px; }
.annualYearRow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.annualYearRow .yearNav { flex: 0 1 auto; }
.annualYearRow .yearNav select { width: auto; }
.annualYearRow .smallBtn { width: auto; margin: 0; }
.reportOpenBox { margin: 12px 0 16px; padding: 10px 12px; border: 1px solid #c9d7ee; border-radius: 10px; background: #f4f7fd; }
.annualBoxTitle { font-weight: bold; font-size: 14px; }
.annualReportTable table { border-collapse: collapse; }
.annualReportTable th, .annualReportTable td { padding: 4px 10px; border-bottom: 1px solid #eee; }
.annualReportTable td:first-child, .annualReportTable th:first-child { text-align: left; position: sticky; left: 0; background: var(--card, #fff); z-index: 1; border-right: 1px solid #ddd; }
.annualReportSectionRow td { font-weight: bold; background: #f5f5f5; }
.annualReportSectionRow td:first-child { background: #f5f5f5; }
.annualReportTable td.annualReportLabel { padding-left: 22px; color: #555; }
.annualReportTotalRow td { font-weight: bold; border-top: 1px solid #999; }
.annualReportGrandTotalRow td { font-weight: bold; border-top: 2px solid #333; }
.annualReportRatioRow td { color: #555; }
.annualReportRatioRow td.num { color: #1a56b8; }
.annualReportHelp { margin-top: 6px; }
.annualCatDiffUp { color: #c5221f; }
.annualCatDiffDown { color: #1a73e8; }
.annualBarChart { display: flex; gap: 3px; height: 200px; margin-top: 4px; padding: 10px 4px 4px; background: #f5f5f5; border-radius: 6px; }
.annualBarColumn { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.annualBarZones { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.annualBarPos { display: flex; align-items: flex-end; justify-content: center; gap: 1px; border-bottom: 1px solid #999; }
.annualBarNeg { display: flex; align-items: flex-start; justify-content: center; gap: 1px; }
.annualBar { flex: 1; max-width: 12px; min-height: 1px; border-radius: 2px 2px 0 0; }
.annualBarNeg .annualBar { border-radius: 0 0 2px 2px; }
.annualBarPos .annualBar.zero { min-height: 0; }
.annualBarIncome { background: #4285f4; }
.annualBarExpense { background: #eb6834; }
.annualBarSavings { background: #c9971f; }
.annualBarMonthLabel { font-size: 10px; color: #777; text-align: center; margin-top: 4px; white-space: nowrap; }
.annualBarColumn.future .annualBarMonthLabel { color: #bbb; }
.payerShareGroup { margin-top: 12px; }
.payerShareTitle { font-weight: bold; margin-top: 10px; }
.payerShareBlock { margin-top: 8px; }
.savingsSubTitle { font-weight: bold; margin-top: 16px; }
.savingsGapNote { font-size: 13px; margin-top: 4px; }
.savingsNamesBlock { margin-top: 8px; }
.savingsNamesTitle { font-size: 13px; color: #555; margin-top: 6px; }
.annualLifelogTable { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; table-layout: fixed; }
.annualLifelogTable th, .annualLifelogTable td { border-bottom: 1px solid #e0e0e0; padding: 6px 3px; text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
.annualLifelogTable th { background: #f5f5f5; font-size: 10px; line-height: 1.3; }
.annualLifelogTable th.colEmoji { width: 16%; }
.annualLifelogTable th.colDays { width: 22%; }
.annualLifelogTable .num { text-align: right; white-space: nowrap; }
.annualLifelogTable td.lifelogEmojiChar { font-size: 20px; padding-left: 0; padding-right: 0; }
.annualSatCats { font-size: 13px; margin-top: 6px; }
.satSummaryRow { cursor: pointer; }
.satSummaryRow:active { background: #eef3ff; }
.satListLineTitle { font-size: 15px; }
.satListCatAmt { font-size: 14px; }
#annualSatModal h3, #annualMedicalModal h3 { font-size: 18px; margin: 4px 0 8px; } /* v170: 医療費控除の明細の窓も */
.annualMedicalOpenRow { margin-top: 12px; }
.annualMedicalOpenRow .note { margin-top: 4px; }
.annualLineSvg { width: 100%; height: 160px; display: block; }

/* v169: 集計タブの直し(2026-11-07 広村の確認)。年別・月別の表の1列目は折り返さない(積み増しの行は labelLines で3行)。満足度の行の「明細 ›」。「多いカテゴリ」は見出しとカテゴリを2行に */
.annualReportTable td:first-child, .annualReportTable th:first-child { white-space: nowrap; }
.satSummaryTable td.satOpen { padding-right: 0; }
.satOpenMark { display: inline-block; font-size: 12px; line-height: 1.4; color: var(--accent, #1a56b8); border: 1px solid var(--accent, #1a56b8); border-radius: 12px; padding: 1px 8px; white-space: nowrap; }
.annualSatRow td:nth-child(2) { color: var(--accent, #1a56b8); }
.annualSatCatsHead { font-weight: bold; }
.annualSatCatsBody { padding-left: 1em; }

/* v171: 月次レポート(5-3。2026-11-07)。今の Index.html の .reportOpenRow・#reportModal・.reportToolbar・印刷の決まりを移した。レポートの用紙の CSS は web/report.js(REPORT_CSS。別のタブにも同じものを書く) */
.reportOpenRow { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.reportOpenRow label { flex: 1 1 140px; font-size: 13px; }
.reportOpenRow label input[type="month"] { width: 100%; margin-top: 2px; }
.reportOpenRow .btn { width: auto; margin: 0; flex: none; }
.reportOpenBox .note { margin-top: 6px; }
.reportOpenBox .saveStatus { margin-top: 8px; }
#reportModal { position: fixed; inset: 0; z-index: 1600; background: #e9ebee; overflow: auto; }
.reportToolbar { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; background: #fff; border-bottom: 1px solid #ccc; }
.reportToolbar .smallBtn { margin: 0; padding: 6px 10px; font-size: 13px; width: auto; }
.reportToolbar .saveStatus { margin: 0; padding: 4px 8px; font-size: 13px; }
.reportNameLabel { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.reportNameLabel input, .reportNameLabel select { width: 9em; margin: 0; padding: 4px 6px; font-size: 13px; }
.reportNameLabel input[type="checkbox"] { width: auto; padding: 0; }
.reportToolbarNote { flex-basis: 100%; font-size: 11px; color: #666; }
.reportToolbarNote.reportSampleNote { font-size: 13px; color: #b0623e; }
#reportPages { padding: 10px 0 30px; transform-origin: top left; }
@media print {
  body.printingReport { max-width: none !important; margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body.printingReport > *:not(#reportModal) { display: none !important; }
  body.printingReport #reportModal { position: static !important; overflow: visible !important; background: #fff !important; }
  body.printingReport .reportToolbar { display: none !important; }
  body.printingReport #reportPages { padding: 0 !important; zoom: 1 !important; transform: none !important; }
}
.annualMedicalExcelRow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }
.annualMedicalExcelRow .smallBtn { width: auto; margin: 0; }
.lifelogEmojiBtns { display: flex; gap: 8px; flex-wrap: wrap; }
.lifelogEmojiBtns .btn { flex: 1 1 auto; }

/* v172(2026-11-07 広村の確認結果): 基本設定「既定の候補に戻す」(カテゴリ・サブカテゴリ)のボタンの並び、集計タブのグラフの縦軸の目盛り。v173: 目盛りの余白 50→36px・文字 9px でグラフ本体を広く(広村の指示) */
.listEditBtns { display: flex; gap: 8px; flex-wrap: wrap; }
.listEditBtns .btn { flex: 1 1 auto; }
.annualBarChart { position: relative; padding-left: 36px; }
.annualBarColumn { position: relative; z-index: 1; }
.annualBarMonthLabel { height: 14px; line-height: 14px; }
.annualBarGrid { position: absolute; left: 0; right: 4px; top: 10px; bottom: 22px; z-index: 0; pointer-events: none; }
.annualBarTick { position: absolute; left: 36px; right: 0; border-top: 1px dashed #d4d4d4; }
.annualBarTick.zero { border-top-color: transparent; }
.annualBarTick span { position: absolute; right: calc(100% + 3px); top: -1px; transform: translateY(-50%); font-size: 9px; color: #777; white-space: nowrap; }
.trendChartRow { display: flex; align-items: stretch; }
.trendYAxis { position: relative; flex: 0 0 36px; margin-top: 4px; font-size: 9px; color: #777; }
.trendYAxis span { position: absolute; right: 3px; transform: translateY(-50%); white-space: nowrap; }
.trendChartRow .trendChartWrap { flex: 1; min-width: 0; }
.annualTrendAxis { margin-left: 36px; }

/* v174(2026-11-07 広村の指示): 日常費タブの「○月は N件の入力があります(…)」は表示しない(文は .summaryCount に隠したまま残す)。隠れた文だけのときは余白も取らない(読み込み中・知らせ・エラーのときは今までの余白) */
.summaryCount { display: none; }
.summaryStatus { min-height: 0; margin: 0; }
.summaryStatus:not(:has(.summaryCount)), .summaryStatus:has(> :not(.summaryCount)) { margin: 8px 0 4px; min-height: 1.4em; }

/* v175(2026-11-07 広村の決定): 買い物の記録の「記録の種類」はタブ風(見出しなし。旧 .recordKind のラジオは廃止)。おこづかい側を押しているときは入力欄(#inputView.pocketMode .line)と同じ紫 */
.recordKindTabs { margin: 10px 0 8px; }
.recordKindTabs button[data-kind="pocket"].active { background: #ede7f6; color: #5e3ea1; border-color: #b39ddb; }

/* v176(2026-11-07 広村の指示): 「自分のおこづかい」を選んでいるときは買い物の記録の欄(#inputView)全体の背景も紫に。明細の欄は白で浮かせ、🔒 の注記は少し濃く */
#inputView.pocketMode { background: #f3eefb; outline: 1px solid #d9cdf0; outline-offset: -1px; }
#inputView.pocketMode .line { background: #fff; }
#inputView.pocketMode .pocketLockNote { background: #e8dff7; }

/* 柄(5-4。v177 2026-11-07 広村の決定): body の背景に薄い柄(theme.js の applyPattern が --bg-pattern を入れる)。カードは不透明なので余白にだけ見える。レポートの窓・印刷には出さない */
/* v186: 柄は body::before の固定の層に敷く(画像の柄の濃さを透明度で変えるため)。カードは透けるので中身の後ろにも見える */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--bg-pattern, none); background-size: var(--bg-pattern-size, auto); background-repeat: repeat; opacity: var(--bg-pattern-alpha, 1); }
body.printingReport::before { display: none !important; }
@media print { body::before { display: none !important; } }
.patternRow { margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } /* 柄・濃さ(v181 で2つに戻す) */

/* 書き出し(段階6-1。2026-11-07): 「書き出し・取り込み」タブの上の欄 */
.exportPeriodRow { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 14px; margin-bottom: 8px; }
.exportPeriodRow label { display: inline-flex; align-items: center; gap: 4px; }
.exportRange input[type="month"] { width: 9.5em; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.exportKindsTitle { font-size: 13px; color: var(--muted); margin-top: 6px; }
.exportKinds { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; margin: 4px 0 8px; }
.exportKinds label { display: inline-flex; align-items: center; gap: 4px; }
.exportPocketLabel { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: #5e3ea1; margin-bottom: 8px; }
.exportSubRow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; }
.exportSubRow .smallBtn { width: auto; margin: 0; }



/* 柄の見せ方(v181 2026-11-07 広村の決定): 柄があるときは main の中のカードを少し透かして(78%)下の柄を見せる(v179/v180 で試した 帯・リボン・カードに描く は外した)。余白 16px・カードの間隔 16px は v179 のまま。全画面の窓・月次レポート・印刷には出さない */
main { padding-left: 16px; padding-right: 16px; }
.section { margin-bottom: 16px; }
html[data-pattern]:not([data-pattern="none"]) main .section { background-color: color-mix(in srgb, var(--card) 78%, transparent); }
@media print { .section { background-color: #fff !important; } }

/* 書き出しの状態の文は改行を活かす(v184。ロック中の3行の文)。おこづかいのラベルは4行 */
#exportStatus { white-space: pre-line; }
.exportPocketLabel span { line-height: 1.5; }

/* 柄の見本をタップして選ぶ(v186 広村の決定。24個をプルダウンでは選びにくいため) */
.patternPickTitle { font-size: 14px; margin: 10px 0 4px; }
.patternGroupTitle { font-size: 12px; color: var(--muted); margin: 8px 0 4px; }
.patternPicker { display: flex; flex-wrap: wrap; gap: 8px; }
.patternBtn { width: 76px; padding: 0; border: 2px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; cursor: pointer; margin: 0; color: var(--ink); }
.patternBtn.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.patternThumb { display: block; width: 100%; height: 48px; background-color: var(--bg); background-repeat: repeat; }
.patternThumb img { display: block; width: 100%; height: 48px; object-fit: cover; }
.patternThumb.none { display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); }
.patternName { display: block; font-size: 10px; line-height: 1.2; padding: 3px 2px 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 取り込み: 書き出したファイル(6-2。v189) */
.importDataFile { font-size: 13px; color: var(--muted); margin: 6px 0; }
.importDataTable { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.importDataTable th, .importDataTable td { padding: 5px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.importDataTable th { font-weight: normal; color: var(--muted); font-size: 12px; }
.importDataTable .num { text-align: right; white-space: nowrap; }
.importDataTable tr.muted td { color: var(--muted); }
.importDataTable td.importDataRemove { color: #c0392b; font-weight: bold; }
.importDataTable label { display: inline-flex; align-items: center; gap: 6px; }
.importDataTable label input { width: 18px; height: 18px; margin: 0; flex: none; }
.importDataProblems { font-size: 12px; color: var(--muted); margin-top: 2px; }
.importDataModeRow { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 14px; margin: 10px 0 4px; }
.importDataModeRow label { display: inline-flex; align-items: center; gap: 4px; }
.importDataModeRow input[type="text"] { width: 10em; padding: 6px 8px; font-size: 14px; }
.importDataPlan { margin-top: 6px; }
.importDataWarn { margin-top: 6px; font-size: 13px; color: #c0392b; }
.importDataChanges { font-size: 12px; color: var(--muted); margin-top: 2px; }
.importDataChanges div { padding-left: 1em; text-indent: -1em; } /* 更新の中身(v192) */
.importDataUndoBox { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff8f2; } /* 最後の取り込みを元に戻す(v194) */
.importDataUndoText { font-size: 13px; white-space: pre-wrap; }

/* グラフの色(v198): 基本設定のカテゴリの行の色ボタンと32色の一覧 */
.editRow .catColorBtn { flex: 0 0 auto; width: 32px; height: 32px; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.catColorDot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.catColorPop { position: absolute; z-index: 60; width: 248px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.catColorGrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: 8px; }
.catColorOpt { width: 24px; height: 24px; margin: 0; padding: 0; border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
.catColorOpt.selected { border-color: var(--ink); }
.catColorPop .catColorAuto { width: 100%; }

/* 取り込み: ほかの家計簿アプリ(6-2 後半。v200) */
.importExtHead { font-size: 12px; margin: 6px 0; }
.importExtBoxIn { margin-top: 10px; }
.importExtOpts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 13px; }
.importExtOpts label { display: flex; align-items: center; gap: 6px; }
.importExtOpts input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: none; }
.importExtOpts select { margin-top: 0; padding: 6px 8px; font-size: 13px; }
.importExtScroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.importExtScroll .importDataTable { min-width: 560px; }
.importExtScroll select { margin-top: 0; padding: 4px 6px; font-size: 13px; max-width: 150px; }
.importExtSummary { margin-top: 10px; font-size: 13px; font-weight: bold; }
.importExtRowsTable td { white-space: nowrap; }
.importExtRowsTable tr.muted td { color: var(--muted); }

/* 自分の画像(6-4a。v201): 画面いっぱいに1枚のときの柄の層、基本設定の枠 */
html[data-pattern-mode="cover"] body::before { background-size: cover; background-repeat: no-repeat; background-position: center; }
.patternThumb.custom { display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--muted); background-size: cover; background-position: center; }
.customImageBox { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; }
.customImageRow { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 6px; font-size: 13px; }
.customImageRow .smallBtn { width: auto; }
.customImageRow label.chk { display: inline-flex; align-items: center; gap: 6px; }
.customImageRow label.chk input { width: 18px; height: 18px; margin: 0; }
.customImagePreviewWrap { margin-top: 6px; }
.customImagePreviewWrap img { max-width: 160px; max-height: 120px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }

/* 背景画像を確認する(v204): 全画面の窓。元の画像/背景として */
.bgViewer { display: flex; flex-direction: column; padding: 0; background: var(--bg); z-index: 1300; }
.bgViewerBar { flex: none; justify-content: space-between; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; padding-bottom: calc(10px + var(--safeB, 0px)); background: rgba(255, 255, 255, 0.9); border-top: 1px solid var(--line); } /* 切り替え/閉じるは下(v205) */
.bgViewerModes { display: flex; gap: 6px; }
.bgViewerModes .smallBtn { width: auto; }
.bgViewerModes .bgViewerMode[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.bgViewerCtl { flex: none; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 8px 12px; font-size: 13px; background: rgba(255, 255, 255, 0.9); border-top: 1px solid var(--line); }
.bgViewerCtl select { margin-top: 0; padding: 4px 6px; font-size: 13px; }
.bgViewerCtl label.chk { display: inline-flex; align-items: center; gap: 6px; }
.bgViewerCtl label.chk input { width: 18px; height: 18px; margin: 0; }
.bgViewerStage { flex: 1 1 auto; position: relative; overflow: hidden; background: var(--bg); padding-top: var(--safeT, 0px); }
.bgViewerLayer { position: absolute; inset: 0; background-position: center; }
.bgViewerImg { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

.customImageSlotTitle { font-weight: bold; font-size: 13px; margin-bottom: 4px; } /* 自分の画像の枠(v206) */
/* 自動で入れ替えるときに使う画像のチェック(v207) */
.customImageUseRow { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 6px; }
.customImageUse { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.customImageUse.off { opacity: 0.5; }
.customImageUse input { width: 18px; height: 18px; margin: 0; }
.customImageUseThumb { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 6px; background-color: #fff; background-size: cover; background-position: center; background-repeat: no-repeat; }
.customImageUseThumb.empty { background-image: repeating-linear-gradient(45deg, #f1f1f1 0 6px, #fff 6px 12px); }
/* 「背景画像を確認する」の登録している画像の一覧(v207) */
.bgViewerThumbs { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: rgba(255, 255, 255, 0.9); border-top: 1px solid var(--line); overflow-x: auto; }
.bgViewerLabel { flex: none; font-size: 13px; white-space: nowrap; }
.bgViewerThumbList { display: flex; gap: 8px; }
.bgViewerThumb { position: relative; flex: none; width: 52px; height: 52px; padding: 0; border: 2px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; cursor: pointer; }
.bgViewerThumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bgViewerThumb[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08); }
.bgViewerThumb span { position: absolute; left: 2px; bottom: 2px; font-size: 11px; line-height: 1.2; padding: 0 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.85); }
/* 明細の写真(6-4b v210): 修正欄の欄・サムネイル・大きく見る窓・目印 */
.photoBlock { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; }
.photoHead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.photoHead .photoTitle { font-weight: bold; }
.photoHead .smallBtn { width: auto; }
.photoHead .error { color: #c5221f; }
.photoThumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; } /* 4枚が1段(v211 広村の指示) */
.photoThumbs:empty { display: none; }
.photoThumb { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; cursor: pointer; }
.photoThumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photoThumb.pending { cursor: default; }
.photoRemoveBtn { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 14px; line-height: 24px; text-align: center; cursor: pointer; }
.photoNote { margin-top: 6px; font-size: 13px; }
.photoNote:empty { display: none; }
.photoTitle.star::after { content: ' ★'; color: var(--premium); }
.line .photoBlock { margin-top: 10px; }
.mark--gone { background: #f3f3f3; color: #8a8a8a; }
.photoMark { margin-left: 4px; }
.imageUsage { font-size: 14px; padding: 6px 0; }
.imageUsage.warn { color: #8a4b00; font-weight: bold; }
.imageUsage.full { color: #c5221f; font-weight: bold; }
.photoViewer { display: flex; flex-direction: column; padding: 0; background: #111; z-index: 1300; }
.photoViewerStage { flex: 1 1 auto; position: relative; overflow: hidden; padding-top: var(--safeT, 0px); }
.photoViewerImg { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.photoViewerConfirm { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; background: #fff3e0; color: #5a3a00; }
.photoViewerConfirm .smallBtn { width: auto; }
.photoViewerConfirm .smallBtn.danger { background: #c5221f; color: #fff; border-color: #c5221f; }
.photoViewerBar { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; padding-bottom: calc(10px + var(--safeB, 0px)); background: rgba(255, 255, 255, 0.95); border-top: 1px solid var(--line); }
.photoViewerNav { display: flex; align-items: center; gap: 6px; }
.photoViewerNav .smallBtn, .photoViewerBtns .smallBtn { width: auto; }
.photoViewerLabel { font-size: 13px; white-space: nowrap; }
.photoViewerBtns { display: flex; gap: 6px; }
/* 画像を整理する(v213) */
.imageManager { display: flex; flex-direction: column; padding: 0; z-index: 1200; }
.imgMgrHead { flex: none; padding: 12px 12px 6px; padding-top: calc(12px + var(--safeT, 0px)); border-bottom: 1px solid var(--line); }
.imgMgrHead h3 { margin: 0 0 6px; font-size: 16px; }
.imgMgrFilters { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; }
.imgMgrFilters label { display: inline-flex; align-items: center; gap: 4px; }
.imgMgrFilters select { width: auto; padding: 4px 6px; font-size: 13px; margin: 0; }
.imgMgrSummary { margin-top: 6px; font-size: 13px; }
.imgMgrList { flex: 1 1 auto; overflow-y: auto; padding: 8px 12px; }
.imgMonth { margin-bottom: 14px; }
.imgMonthHead { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; font-weight: bold; margin-bottom: 6px; }
.imgMonthHead label.chk { display: inline-flex; align-items: center; gap: 6px; }
.imgMonthHead input { width: 18px; height: 18px; margin: 0; }
.imgGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; }
.imgItem { position: relative; min-width: 0; }
.imgItem .imgThumbBtn { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; cursor: pointer; }
.imgItem .imgThumbBtn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.imgItem .imgChkWrap { position: absolute; top: 2px; left: 2px; z-index: 1; }
.imgItem .imgChk { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); background: #fff; border-radius: 4px; }
.imgCap { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.imgMgrEmpty { padding: 20px 0; text-align: center; }
.imgMgrConfirm { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; background: #fff3e0; color: #5a3a00; }
.imgMgrConfirm .smallBtn { width: auto; }
.imgMgrConfirm .smallBtn.danger { background: #c5221f; color: #fff; border-color: #c5221f; }
.imgMgrBar { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; padding-bottom: calc(10px + var(--safeB, 0px)); background: rgba(255, 255, 255, 0.95); border-top: 1px solid var(--line); }
.imgMgrSelInfo { font-size: 13px; min-width: 0; }
.imgMgrBtns { display: flex; gap: 6px; flex: none; }
.imgMgrBtns .smallBtn { width: auto; }

/* 基本設定「プラン」(08 §2。7-1 v218) */
.planLines { white-space: pre-line; }
.planBox { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.planBoxTitle { font-weight: 600; margin-bottom: 6px; }
.planRadios label { display: block; margin: 4px 0; }
.planBtnRow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.planCode { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.planCode input { text-transform: uppercase; }
.planResult { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--ok); border-radius: 8px; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.planResult.ng { border-color: var(--line); color: var(--muted); }

.planBox .kv { border-bottom: 0; padding: 4px 0; }
.planBox .confirmBox { margin-top: 8px; }

/* お友だちに紹介する(08 §3。7-3 v220) */
.referralCode { font-size: 20px; letter-spacing: 1px; }
.referralLink { margin: 6px 0; }
.referralLinkText { word-break: break-all; font-size: 13px; }

/* アカウント・退会(08 §11。7-4 v222) */
.acctForm { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.acctForm label { display: block; margin: 6px 0; }
.acctFormTitle { font-weight: 600; margin-bottom: 6px; }
.leaveEntry { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; }
.leaveLink { font-size: 13px; color: var(--muted); }
.leaveList { margin: 4px 0 8px; padding-left: 18px; font-size: 13px; }
.leaveBox p { margin: 6px 0; font-size: 14px; }

/* ホームのお知らせの箱(v223): 未確認の行(既読なし。タップでその画面)。印は data-mark、右に ▸ */
.homeNotices h3 { margin-bottom: 4px; }
.homeNotices .notice { margin: 8px 0; }
.stateNotice { cursor: pointer; }
.stateNotice::before { content: attr(data-mark); flex: 0 0 auto; }
.stateNotice::after { content: '▸'; color: var(--muted); flex: 0 0 auto; margin-left: auto; }

.acctForm input, .leaveBox input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; } /* 角を丸く(v223 広村の指示) */

/* 退会の確認(v224 広村の指示): 「退会する」の入力欄は小さく、ボタンの行との間に1行あける */
.leaveBox #leaveConfirmInput { display: inline-block; width: 10em; margin-left: 6px; }
.leaveBox .btnRow { margin-top: 20px; }

/* FP(7-5a v225): FP の画面の帯・お客様一覧、利用者側の「FP に見せる」、見るだけモード */
.fpBar { background: #e8f1ff; border-bottom: 1px solid #b9d0f0; padding: 8px 12px; display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 13px; position: static; } /* v241: 貼り付けない(上の帯の下に隠れていた)。見ている相手は上の帯(sticky)の題名に */
.fpClient { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.fpClientHead { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fpKind { margin-left: auto; font-size: 12px; color: var(--muted); }
.fpClientMeta { font-size: 13px; margin-top: 4px; }
.fpScope { margin: 8px 0; }
.fpScope label.chk { display: block; margin: 4px 0; }
.consentBox { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: #fafafa; line-height: 1.6; }
.fpEditTitle { margin-top: 34px; } /* 閲覧の記録との間を1行あける(v226) */
.fpLogs { margin-top: 10px; }
body.fpMode #planBadge, body.fpMode #fab, body.fpMode #moreSheet button[data-tab="import"], body.fpMode #moreSheet button[data-tab="settings"], body.fpMode #moreSheet button[data-tab="help"] { display: none !important; }
body.fpReadOnly #fab, body.fpReadOnly .editBtn, body.fpReadOnly .dayEditBtn, body.fpReadOnly .pocketEditBtn, body.fpReadOnly .rowDel, body.fpReadOnly .lineDeleteBtn, body.fpReadOnly #homeInputBtn, body.fpReadOnly #subInputBtn, body.fpReadOnly #dayNewEntryBtn,
body.fpReadOnly #homeNotices, body.fpReadOnly #homeGoalArea, body.fpReadOnly .lifelogBox, body.fpReadOnly .lifelogSection, body.fpReadOnly .dayPhotos, body.fpReadOnly .photoBlock, body.fpReadOnly #subPocketBtn, body.fpReadOnly #subSearchBtn, body.fpReadOnly #starterChecklist,
body.fpReadOnly button[id*="Save"], body.fpReadOnly button[id*="save"], body.fpReadOnly button[id*="Delete"], body.fpReadOnly button[id*="delete"], body.fpReadOnly button[id*="Exec"], body.fpReadOnly button[id*="Merge"], body.fpReadOnly button[id*="Move"], body.fpReadOnly button[id^="add"], body.fpReadOnly button[id*="Add"], body.fpReadOnly button[id*="Reset"], body.fpReadOnly button[id*="Restore"], body.fpReadOnly button[id*="Grant"], body.fpReadOnly button[id*="Undo"], body.fpReadOnly button[id*="Confirm"], body.fpReadOnly #fixedConfirmAllBtn, body.fpReadOnly #assetConfirmAllBtn { display: none !important; }
body.fpReadOnly .satCycleBtn { pointer-events: none; }

/* /fp のログイン画面は「Google でログイン」だけ(v226。app.js が html に fpLogin を付ける) */
.fpOnly { display: none; }
html.fpLogin .fpOnly { display: block; }
html.fpLogin #loginForm, html.fpLogin #viewLogin .divider, html.fpLogin #viewLogin .links, html.fpLogin .loginSignupP { display: none; }

/* FP の画面の上の行(見出し+ログアウト。v227) */
.fpHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }

/* 基本設定「FP連携」の下の2つの機能名(v228) */
.fpSub { font-size: 15px; font-weight: 700; margin: 10px 0 6px; }

/* FP の画面: 表示の指定・招待コード・面談メモ(7-5b v229) */
.fpForm { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.fpForm input[type="email"], .fpForm input[type="text"], .fpForm input[type="number"], .fpForm input[type="date"], .fpForm textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line, #d8d2c6); border-radius: 10px; padding: 8px 10px; font-size: 15px; background: #fff; }
.fpForm label.field { display: block; } .fpForm label.field > span { display: block; font-size: 12px; color: var(--muted, #6b6b6b); margin: 4px 0 2px; }
.fpRows { list-style: none; margin: 6px 0 0; padding: 0; } .fpRow { border-top: 1px solid var(--line, #e6e0d6); padding: 8px 0; } .fpRow:first-child { border-top: 0; }
.fpCodeRow.warn, .fpUse.warn { background: #fff7e6; border-radius: 8px; padding: 6px 8px; }
.fpBadge { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: #eee; color: #555; margin-left: 4px; } .fpBadge.on { background: #e3f2e9; color: #1b6b3a; } .fpBadge.off { background: #f3e3e3; color: #8a2b2b; } .fpBadge.warn { background: #ffe8c2; color: #7a4a00; }
.fpCodeText { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.5px; }
.fpIssued { margin: 8px 0; padding: 8px 10px; background: #f4f7f3; border-radius: 10px; }
.fpUse { margin: 4px 0; } .small { font-size: 12px; }
.fpNotesBox { max-height: 85vh; overflow: auto; } .fpNoteText { white-space: pre-wrap; margin: 2px 0 4px; }
.fpEndForm { margin-top: 6px; padding: 8px; background: #f7f5f0; border-radius: 10px; }

/* 代行入力の未許可の表示(v230) */
.fpEditState { margin: 4px 0 6px; padding: 6px 10px; background: #f3f1ec; border-radius: 8px; font-size: 14px; }
/* 招待コードの「+ 発行する」と「種類」の高さをそろえる(v230) */
#fpCodes .planBtnRow label.selectLabel { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
#fpCodes .planBtnRow label.selectLabel select { display: inline-block; width: auto; margin: 0; padding: 0 8px; height: 32px; font-size: 13px; border-radius: 8px; }
#fpCodes .planBtnRow > .smallBtn { height: 32px; padding: 0 10px; font-size: 13px; }

/* FP の代わりの入力(7-5c v231): 書けるタブでは保存は出す。削除・写真・確認・取り込みなど FP ができないものは隠す */
body.fpEditing #fab, body.fpEditing .rowDel, body.fpEditing .lineDeleteBtn, body.fpEditing .dayEditBtn, body.fpEditing .pocketEditBtn, body.fpEditing #homeNotices, body.fpEditing #homeGoalArea, body.fpEditing .lifelogBox, body.fpEditing .lifelogSection, body.fpEditing .dayPhotos, body.fpEditing #subPocketBtn, body.fpEditing #starterChecklist,
body.fpEditing button[id*="Delete"], body.fpEditing button[id*="delete"], body.fpEditing button[id*="Exec"], body.fpEditing button[id*="Merge"], body.fpEditing button[id*="Move"], body.fpEditing button[id*="Reset"], body.fpEditing button[id*="Restore"], body.fpEditing button[id*="Undo"], body.fpEditing #fixedConfirmBar, body.fpEditing #fixedConfirmAllBtn, body.fpEditing #assetConfirmAllBtn, body.fpEditing .confirmBtn, body.fpEditing .fixedConfirmBtn, body.fpEditing .assetConfirmBtn,
body.fpEditing .photoAddBtn, body.fpEditing .receiptRuleLinkRow { display: none !important; } /* v238: FP も代わりの入力ではレシートの撮影・読み取りができる(枚数はお客様に数えない。広村の決定 No.46) */
.fpBar { flex-wrap: wrap; }
.fpChangeDay { margin-top: 10px; font-weight: 700; } .fpChange { border-top: 1px solid var(--line, #e6e0d6); padding: 6px 0; } .fpChange .diff { font-size: 13px; margin-left: 1.2em; } .fpChange.undone { opacity: 0.6; }

/* FP の画面: おこづかいの内訳の窓(7-5c-2 v232) */
.fpPocketTable { width: 100%; margin-top: 8px; } .fpPocketTable td { padding: 6px 4px; vertical-align: top; border-top: 1px solid var(--line, #e6e0d6); } .fpPocketTable td.num { text-align: right; white-space: nowrap; }
#pocketFpShareRow .consentBox { margin: 6px 0; }

/* 運営の画面(/admin。7-6a v233) */
body.adminMode #planBadge, body.adminMode #fab, body.adminMode #tabs, body.adminMode #fpBar { display: none !important; }
.adminKv { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0; } .adminKv b { font-size: 18px; }
.adminBar { height: 10px; background: #eee; border-radius: 999px; overflow: hidden; margin: 4px 0 8px; } .adminBarFill { height: 100%; background: #4a8c5c; } .adminBarFill.warn { background: #d9822b; }
.adminGroup { border: 1px solid var(--line, #e6e0d6); border-radius: 10px; padding: 6px 10px; margin: 6px 0; } .adminGroup summary { cursor: pointer; font-weight: 700; }
.adminAudit li { font-size: 13px; }
/* 7-6b v234: 課金の記録・画像の使用量・お知らせの配信 */
.adminBill li, .adminImages li, .adminNotices li { font-size: 13px; } .adminBillLine { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.adminMark { color: #1b6b3a; font-weight: 700; } .adminMark.ng { color: var(--ng); }
.adminRefund { margin-top: 4px; } .adminRefundForm { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: 6px; } .adminRefundForm input { width: 14em; }
.adminImages .adminBar { margin: 4px 0; } .adminRecountStatus { margin: 0 0 0 8px; }
.adminNoticeText { white-space: pre-wrap; margin: 4px 0; } #adminNoticeText { width: 100%; box-sizing: border-box; }

/* v237(2026-11-09 広村の指摘): FP の帯は「見ています / 見られるもの / 入力できるもの」の3行。基本設定「FP連携」の余白・部品の高さ。お知らせのリンク。件数の一覧 */
.fpBar #fpBarText { flex: 1 1 100%; display: flex; flex-direction: column; gap: 2px; }
.fpBarLine { font-size: 12px; color: #2b4a73; }
.fpEditTitle { margin-top: 48px; }
.fpEditNow { margin: 2px 0 6px; }
#settingsFpShare .fpEditRow label.selectLabel { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
#settingsFpShare .fpEditRow label.selectLabel select { display: inline-block; width: auto; margin: 0; padding: 0 8px; height: 32px; font-size: 13px; border-radius: 8px; }
#settingsFpShare .fpEditRow > .smallBtn { height: 32px; padding: 0 10px; font-size: 13px; box-sizing: border-box; }
.fpSub.plain { font-weight: 400; }
.homeNoticeItem .noticeText { white-space: pre-line; }
.noticeLink { color: inherit; text-decoration: underline; font-weight: 700; }
.fpChangeCounts { font-size: 14px; margin-left: 1em; }

/* v239(2026-11-09 広村の確認): 運営の画面 — 別ウインドウへの導線、設定値の欄は名前と同じ行、行の部品の高さをそろえる、説明の「？」、ホームの運営からのお知らせ */
.adminNav { font-size: 13px; margin: 0 0 10px; } .adminLink { text-decoration: underline; } .adminLinkBtn { text-decoration: none; display: inline-block; line-height: 30px; }
.adminFields .adminField { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; } .adminFields .adminField.block { flex-direction: column; align-items: stretch; gap: 4px; }
.adminFields .adminField label { font-size: 14px; } .adminNum { width: 7em !important; height: 32px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--line, #d8d2c6); border-radius: 8px; background: #fff; }
.adminFields .adminField select { height: 32px; padding: 0 8px; border: 1px solid var(--line, #d8d2c6); border-radius: 8px; background: #fff; }
.adminFields .adminField.block input[type="text"], .adminFields .adminField.block textarea { width: 100%; box-sizing: border-box; }
.adminHelpNote { font-size: 13px; margin: 2px 0 8px; }
.planBtnRow.adminRow { align-items: center; } .adminRow label.selectLabel { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.adminRow label.selectLabel input, .adminRow label.selectLabel select { display: inline-block; width: auto; margin: 0; height: 32px; padding: 0 8px; font-size: 13px; border-radius: 8px; box-sizing: border-box; border: 1px solid var(--line, #d8d2c6); background: #fff; }
.adminRow > .smallBtn { height: 32px; padding: 0 10px; font-size: 13px; box-sizing: border-box; } .adminTilde { line-height: 32px; }
.sysNoticeHead { display: inline-block; margin-bottom: 2px; }

/* v240: FP の代わりの入力で、FP 自身が入力した明細の修正欄だけ「この明細を削除する」を出す(ほかの削除は隠したまま) */
body.fpEditing.fpOwnRecord #deleteBtn { display: inline !important; }
body.fpEditing.fpOwnRecord #deleteExecBtn, body.fpEditing.fpOwnRecord #deleteCancelBtn { display: block !important; }

/* v241(2026-11-09 広村): FP が家計簿を見ている間は上の帯(貼り付く)を青くして題名に「○○ を見ています」。数え直すは横棒の右。まとめて削除 */
body.fpMode .topbar { background: #e8f1ff; border-bottom-color: #b9d0f0; }
body.fpMode .topbar .title { white-space: normal; line-height: 1.3; }
.adminBarRow { display: flex; align-items: center; gap: 8px; } .adminBarRow .adminBar { flex: 1; margin: 4px 0; } .adminBarRow .smallBtn { flex: none; height: 28px; padding: 0 10px; font-size: 13px; }
.bulkDeleteRow { margin-top: 10px; text-align: right; }
body.fpEditing #bulkDeleteBtn { display: inline !important; }
body.fpEditing #bulkDeleteExecBtn, body.fpEditing #bulkDeleteCancelBtn { display: block !important; }