:root{
  --green:#3aa676;
  --green-d:#2e8c61;
  --green-l:#5dbb8d;
  --green-soft:#d8f0e3;
  --mint:#eef8f2;
  --bg:#f0f7f3;
  --card:#ffffff;
  --ink:#143a2c;
  --ink-2:#5e8b78;
  --line:#e2efe8;
  --good:#16a34a;
  --warn:#f59e0b;
  --bad:#ef4444;
  --shadow:0 6px 20px rgba(46,140,97,.10);
  --tab-h:62px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--ink);
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select,textarea{font-family:inherit;font-size:16px;}

#app{max-width:520px;margin:0 auto;min-height:100vh;position:relative;}
#view{padding:calc(var(--safe-t) + 8px) 16px calc(var(--tab-h) + var(--safe-b) + 90px);}

/* ヘッダー */
.head{display:flex;align-items:baseline;justify-content:space-between;padding:10px 2px 6px;}
/* 見出しは画面幅で縮む。「ほしいもの・やりたいこと」のような長い見出しでも
   小さい端末で歯車にぶつからないように、はみ出さず縮める。 */
.head h1{font-size:clamp(16px,5vw,20px);margin:0;font-weight:800;letter-spacing:.02em;
  min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.head .sub{font-size:12px;color:var(--ink-2);}

/* カード */
.card{background:var(--card);border-radius:20px;padding:18px;box-shadow:var(--shadow);margin-bottom:14px;}
.card-t{font-size:13px;color:var(--ink-2);font-weight:700;margin:0 0 12px;display:flex;align-items:center;justify-content:space-between;}

/* 期間まとめ（日週月を縦に） */
.psum{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);}
.psum:last-child{border-bottom:none;}
.psum .pk{width:30px;height:30px;border-radius:9px;background:var(--green-soft);color:var(--green-d);font-weight:800;font-size:13px;display:grid;place-items:center;flex:none;}
.psum .pbody{flex:1;min-width:0;}
.psum .ptop{display:flex;justify-content:space-between;align-items:baseline;}
.psum .pr{font-weight:800;font-size:17px;white-space:nowrap;flex:none;}
.psum .pr.over{color:var(--bad);}
.psum .pmeta{font-size:11px;color:var(--ink-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.psum .pbar{height:7px;border-radius:99px;background:var(--mint);overflow:hidden;margin-top:6px;}
.psum .pbar>i{display:block;height:100%;border-radius:99px;background:var(--green);transition:width .4s ease;}
.psum .pbar>i.over{background:var(--bad);}
.psum .edit{font-size:11px;color:var(--green);font-weight:700;flex:none;}

/* セグメント棒（塗り分け＋データラベル） */
.seg-block{margin-bottom:14px;}
.seg-block:last-child{margin-bottom:0;}
.seg-label{font-size:12px;font-weight:800;color:var(--ink-2);margin-bottom:5px;display:flex;justify-content:space-between;}
.segbar{display:flex;height:34px;border-radius:10px;overflow:hidden;background:var(--mint);}
.segbar>i{display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:800;min-width:0;overflow:hidden;white-space:nowrap;padding:0 2px;transition:flex-basis .4s ease;}
.segbar .empty-seg{flex:1;color:var(--ink-2);font-size:11px;font-weight:600;}
.seg-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:8px;}
.seg-legend span{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ink-2);}
.seg-legend .dot{width:9px;height:9px;}

/* 財布/凡例行 */
.wallet-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);}
.wallet-row:last-child{border-bottom:none;}
.dot{width:12px;height:12px;border-radius:50%;flex:none;}
.wallet-row .nm{font-weight:700;font-size:15px;flex:1;}
.wallet-row .vl{font-weight:800;font-size:15px;}
.wallet-row .small{font-size:12px;color:var(--ink-2);font-weight:600;}

/* 記録リスト */
.entry{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);}
.entry:last-child{border-bottom:none;}
/* 以前は大ジャンルの色をそのまま背景に敷いていたため、食費（赤）の記録が
   赤いブロックとして延々と並び、リスト全体が緊張した見た目になっていた。
   背景を淡くして、絵文字を主役にする。 */
.entry .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:19px;flex:none;font-weight:800;
  background:var(--mint)!important;box-shadow:inset 0 0 0 2px rgba(0,0,0,.04);}
.entry .info{flex:1;min-width:0;}
.entry .info .c{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.entry .info .m{font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.entry .amt{font-weight:800;font-size:16px;}
.entry .tag{font-size:10px;padding:2px 7px;border-radius:99px;font-weight:700;color:#fff;}

.empty{text-align:center;color:var(--ink-2);font-size:14px;padding:30px 10px;}
.empty .big{font-size:30px;display:block;margin-bottom:8px;}

/* FAB */
/* 中央固定だと円グラフの中心の合計・カレンダーの月末・記録リストの行を
   常に隠してしまっていたので、右下に寄せて中身と重ならないようにした。 */
.fab{position:fixed;left:50%;margin-left:min(194px, calc(50vw - 34px));transform:translateX(-50%);bottom:calc(var(--tab-h) + var(--safe-b) + 14px);
  width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,var(--green) 0%,var(--green-l) 100%);
  color:#fff;font-size:32px;font-weight:300;line-height:1;box-shadow:0 8px 22px rgba(46,140,97,.45);z-index:40;display:grid;place-items:center;}
.fab:active{transform:translateX(-50%) scale(.93);}
.fab.hidden{display:none!important;}

/* タブバー */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(var(--tab-h) + var(--safe-b));padding-bottom:var(--safe-b);
  max-width:520px;margin:0 auto;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-top:1px solid var(--line);display:flex;}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#9db5aa;}
/* 選択中は「色が少し濃い」だけでは伝わらない。丸い下地・線の太さ・文字の太さの3つを同時に変える */
.tab .tab-ico{display:grid;place-items:center;width:54px;height:28px;border-radius:999px;color:inherit;transition:background .15s ease;}
.tab .tab-ico svg{width:22px;height:22px;}
.tab.on{color:var(--green-d);}
.tab.on .tab-ico{background:var(--green-soft);color:var(--green-d);}
.tab.on .tab-ico svg{stroke-width:2.2;}
/* 5タブになったので、狭い端末（iPhone SE 幅 320px）でも折り返さないようにする。
   「ほしいもの」「カレンダー」が2行になると、タブバーだけ壊れて見える。 */
.tab .tab-label{font-size:10px;font-weight:700;white-space:nowrap;}
@media (max-width:360px){ .tab .tab-label{font-size:9px;letter-spacing:-.02em;} }
.tab.on .tab-label{font-weight:800;}
.tab:active .tab-ico{background:var(--mint);}


/* カレンダー */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.cal-head .m{font-size:17px;font-weight:800;}
.cal-head button{width:40px;height:40px;border-radius:12px;background:var(--card);font-size:18px;box-shadow:var(--shadow);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-dow{text-align:center;font-size:11px;font-weight:700;color:var(--ink-2);padding:4px 0;}
.cal-cell{aspect-ratio:1/1.5;border-radius:11px;background:var(--card);padding:5px 2px 4px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;box-shadow:0 1px 4px rgba(46,140,97,.06);position:relative;overflow:hidden;}
.cal-cell.blank{background:transparent;box-shadow:none;}
.cal-cell .d{font-size:12px;font-weight:700;color:var(--ink-2);line-height:1;}
.cal-cell.today .d{background:var(--green);color:#fff;border-radius:50%;width:19px;height:19px;display:grid;place-items:center;}
.cal-cell .emo{font-size:11px;line-height:1.15;margin-top:3px;text-align:center;word-break:break-all;max-width:100%;flex:1;overflow:hidden;}
.cal-cell .v{font-size:10px;font-weight:800;margin-top:auto;line-height:1.1;text-align:center;width:100%;white-space:nowrap;overflow:hidden;}
.cal-cell.has .v{color:var(--green-d);}
/* 使わなかった日は、ひと目で「並んでいる」のが分かる濃さにする。
   記録が0件なだけの日（.maybe）とは、はっきり差をつけておく。 */
.cal-cell.nospend{background:#b3e3cb;box-shadow:0 1px 4px rgba(46,140,97,.18);}
.cal-cell.nospend .d{color:#1f6b48;}
.cal-cell.nospend .v{font-size:13px;}
.cal-cell.sel{outline:2px solid var(--green);}

/* イベント */
.event-chip{display:inline-flex;align-items:center;gap:6px;background:var(--mint);border-radius:99px;padding:7px 12px;font-size:13px;font-weight:700;margin:0 6px 6px 0;}
.event-chip .x{color:var(--ink-2);font-size:15px;margin-left:2px;}
.preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.preset{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;border-radius:13px;background:var(--card);box-shadow:0 1px 4px rgba(46,140,97,.08);font-size:11px;font-weight:700;border:2px solid transparent;}
.preset.on{border-color:var(--green);background:var(--green-soft);}
.preset .e{font-size:22px;}

/* グラフ */
.donut-wrap{display:flex;flex-direction:column;align-items:center;}
.legend{width:100%;margin-top:6px;}
.legend .wallet-row .nm{font-size:14px;}

/* 推移（積み上げ縦棒） */
.vchart-wrap{position:relative;}
.vchart{display:flex;align-items:flex-end;gap:6px;height:130px;padding:24px 0 0;box-sizing:content-box;}
.vcol{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0;justify-content:flex-end;}
.vstack{width:62%;max-width:30px;border-radius:6px 6px 0 0;overflow:hidden;display:flex;flex-direction:column-reverse;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.vstack>i{display:block;}
.vcol .vtot{font-size:9px;font-weight:800;color:var(--ink);margin-bottom:3px;white-space:nowrap;}
.vlabs{display:flex;gap:6px;margin-top:5px;}
.vlabs .vlab{flex:1;min-width:0;text-align:center;font-size:9px;font-weight:700;color:var(--ink-2);white-space:nowrap;overflow:hidden;}
.budget-line{position:absolute;left:0;right:0;border-top:2px dashed var(--green-d);opacity:.85;pointer-events:none;}
.budget-line span{position:absolute;right:0;top:-8px;font-size:9px;font-weight:800;color:var(--green-d);background:var(--card);padding:0 4px;border-radius:4px;}

/* 記録画面のプルダウン配置 */
.rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.field.mini{margin:0;}

/* マークパレット */
.mark-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-height:168px;overflow-y:auto;padding:2px;}
.mark-grid .pick{padding:8px 2px;}
.mark-grid .pick .e{font-size:20px;}

/* 小分類の行編集 */
.sub-row{display:flex;gap:6px;align-items:center;margin-bottom:6px;}
.sub-row .input{padding:10px 10px;}
.sub-row .input.mark{width:56px;text-align:center;flex:none;}
.sub-row .btn{flex:none;}

/* カレンダー日別の財布内訳 */
.day-wallets{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 10px;}
.dw{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;background:var(--mint);padding:5px 10px;border-radius:99px;}

/* フィルタ */
.chips{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.chip{padding:8px 14px;border-radius:99px;background:var(--card);font-size:13px;font-weight:700;color:var(--ink-2);box-shadow:0 1px 4px rgba(46,140,97,.08);}
.chip.on{background:var(--green);color:#fff;}

/* 設定 */
.list-item{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line);}
.list-item:last-child{border-bottom:none;}
.list-item .nm{flex:1;font-weight:700;font-size:15px;}
.list-item .sub{font-size:12px;color:var(--ink-2);font-weight:600;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 16px;border-radius:13px;font-weight:800;font-size:15px;background:var(--green);color:#fff;width:100%;}
.btn.sub{background:var(--mint);color:var(--green-d);}
.btn.ghost{background:transparent;color:var(--ink-2);}
.btn.danger{background:#fee2e2;color:var(--bad);}
.btn.sm{width:auto;padding:8px 12px;font-size:13px;border-radius:10px;}
.row-gap{display:flex;gap:10px;}

label.field{display:block;margin-bottom:14px;}
.lb{font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:6px;display:block;}
.input{width:100%;padding:13px 14px;border-radius:13px;border:1.5px solid var(--line);background:var(--card);font-size:16px;font-weight:600;color:var(--ink);outline:none;}
.input:focus{border-color:var(--green-l);}

/* モーダル */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(20,58,44,.45);}
.modal.hidden{display:none;}
.sheet{background:var(--bg);width:100%;max-width:520px;border-radius:26px 26px 0 0;max-height:94vh;overflow-y:auto;padding:14px 16px calc(20px + var(--safe-b));animation:up .25s ease;}
@keyframes up{from{transform:translateY(100%);}to{transform:translateY(0);}}
.sheet-grab{width:40px;height:5px;border-radius:99px;background:var(--line);margin:2px auto 12px;}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.sheet-head .t{font-size:18px;font-weight:800;}
.sheet-head .x{font-size:22px;color:var(--ink-2);width:34px;height:34px;}
/* お知らせ用。下フリックで閉じないので、つまみは出さない（閉じられそうに見せない） */
.sheet.locked .sheet-grab{display:none;}
.sheet.locked{padding-top:20px;}

.amount-display{text-align:center;font-size:44px;font-weight:800;letter-spacing:-.02em;padding:6px 0 4px;color:var(--ink);}
.amount-display .yen{font-size:24px;color:var(--ink-2);margin-right:4px;}
.amount-display.zero{color:#a9cdba;}

.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px;}
.key{padding:16px 0;border-radius:14px;background:var(--card);font-size:24px;font-weight:700;box-shadow:0 1px 4px rgba(46,140,97,.08);}
.key:active{background:var(--green-soft);}
.key.wide{font-size:18px;}

.pick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.pick{padding:12px 4px;border-radius:14px;background:var(--card);box-shadow:0 1px 4px rgba(46,140,97,.08);text-align:center;font-size:12px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:5px;border:2px solid transparent;}
.pick.on{border-color:var(--green);background:var(--green-soft);}
.pick .e{font-size:22px;}
.pick.wallet{flex-direction:row;justify-content:center;gap:6px;font-size:13px;}

.seg-toggle{display:flex;background:var(--mint);border-radius:12px;padding:4px;gap:4px;margin-bottom:12px;}
.seg-toggle button{flex:1;padding:8px 0;border-radius:9px;font-size:13px;font-weight:700;color:var(--ink-2);}
.seg-toggle button.on{background:var(--card);color:var(--green-d);box-shadow:0 2px 6px rgba(46,140,97,.12);}

/* タップ可能を示す矢印 */
.chev{color:var(--green);font-weight:800;font-size:13px;}
.card-t .muted{font-weight:600;font-size:11px;}
.seg-block{cursor:pointer;}

/* 固定費バッジ */
.fixed-badge{font-size:9px;font-weight:800;color:var(--green-d);background:var(--green-soft);padding:1px 6px;border-radius:99px;vertical-align:middle;}

/* 絵文字パレット（スクロール） */
.emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-height:180px;overflow-y:auto;padding:2px;-webkit-overflow-scrolling:touch;}
.emoji-grid .pick{padding:8px 2px;}
.emoji-grid .pick .e{font-size:22px;}
.emoji-btn{flex:none;min-width:56px;padding:8px;font-size:16px;}
.emoji-pop{background:var(--card);border-radius:16px;padding:12px;margin:0 0 14px;box-shadow:var(--shadow);}
.emoji-pop-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:8px;}

/* 保存後の続けて入力 */
.after-save{text-align:center;padding:14px 0 18px;}
.after-ic{width:54px;height:54px;border-radius:50%;background:var(--green);color:#fff;font-size:28px;font-weight:800;display:grid;place-items:center;margin:0 auto 10px;}
.after-t{font-size:18px;font-weight:800;margin:0 0 4px;}

/* 記録タブ 日付グループ */
.rec-day{margin-bottom:6px;}
.rec-day:last-child{margin-bottom:0;}
.rec-day-head{display:flex;justify-content:space-between;font-size:12px;font-weight:800;color:var(--ink-2);padding:10px 0 4px;border-bottom:2px solid var(--line);margin-bottom:2px;}
.rec-day:first-child .rec-day-head{padding-top:0;}

/* 記録モーダルを縦にコンパクト化（保存ボタンがスクロールなしで届くように） */
.rec-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin:2px 0 10px;}
.rec-fields .field{margin-bottom:0;}
.rec-fields .field.wide{grid-column:1 / -1;}
.rec-fields .lb{margin-bottom:3px;font-size:12px;}
.rec-fields .input{padding:10px 12px;}
.amount-display{font-size:36px;padding:2px 0;}
.keypad{gap:6px;margin-top:4px;margin-bottom:12px;}
.key{padding:12px 0;font-size:22px;}

/* 集計ドリルの行 */
.drill-row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line);cursor:pointer;}
.drill-row:last-child{border-bottom:none;}
.drill-row .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;color:#fff;flex:none;}
.drill-row .nm{flex:1;font-weight:700;font-size:15px;}
.drill-row .vl{font-weight:800;font-size:15px;}

/* 日記 */
.diary-mk{font-size:9px;margin-left:1px;}
.diary-view{background:var(--mint);border-radius:14px;padding:12px;margin:4px 0;}
.diary-view-h{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:800;color:var(--green-d);margin-bottom:6px;}
.diary-view-t{margin:0 0 8px;font-size:14px;line-height:1.55;white-space:pre-wrap;}
.diary-img{width:100%;border-radius:12px;display:block;margin:6px 0;}
textarea.input{font-family:inherit;line-height:1.5;}
.diary-text{min-height:112px;resize:vertical;}

/* v7: 読みやすさのため小さすぎる文字を底上げ */
.seg-legend span{font-size:12px;}
.psum .pmeta{font-size:12px;}
.entry .info .m{font-size:12.5px;}
.entry .tag{font-size:11px;}
.cal-dow{font-size:12px;}
.cal-cell .d{font-size:13px;}
.cal-cell .emo{font-size:12px;}
.cal-cell .v{font-size:11px;}
.cal-cell.nospend .v{font-size:14px;}
.vcol .vtot{font-size:10.5px;}
.vlabs .vlab{font-size:10.5px;}
.budget-line span{font-size:10.5px;}
.segbar>i{font-size:11px;}
.tab .tab-label{font-size:11px;white-space:nowrap;}
.fixed-badge{font-size:10px;}
.wallet-row .small{font-size:12px;}
.card-t .muted{font-size:12px;}

/* v7: 「元に戻す」トースト */
.toast.undo{display:flex;align-items:center;gap:14px;padding:11px 14px 11px 18px;}
.toast .undo-btn{color:#7fe3b4;font-weight:800;font-size:14px;padding:2px 6px;white-space:nowrap;}

/* v8: 設定リストのアイコンを中央に */
.list-item .ic{display:grid;place-items:center;line-height:1;}
/* v8: ホーム残額の金額を強調 */
.psum .pmeta{font-size:12.5px;}
.psum .pmeta b{color:var(--ink);font-weight:800;font-size:13.5px;}
/* v8: 記録の検索 */
.rec-search{position:relative;margin:0 0 12px;}
.rec-search .input{padding-right:40px;}
.rec-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;color:var(--ink-2);font-size:19px;display:grid;place-items:center;}
/* v8: 朝のお知らせ */
.greet-amt{text-align:center;font-size:42px;font-weight:800;color:var(--green-d);padding:6px 0 2px;letter-spacing:-.02em;}
.greet-amt.over{color:var(--bad);}

.hidden{display:none!important;}
.spacer{height:8px;}
.center{text-align:center;}
.muted{color:var(--ink-2);font-size:13px;}
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 90px);transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 18px;border-radius:14px;font-size:14px;font-weight:700;z-index:80;box-shadow:0 8px 20px rgba(0,0,0,.25);animation:pop .2s ease;}
@keyframes pop{from{transform:translateX(-50%) translateY(8px);opacity:0;}to{transform:translateX(-50%) translateY(0);opacity:1;}}


/* ============================================================
   v10 で追加したもの
   ============================================================ */

/* --- 起動に失敗したときの画面（以前は真っ白のまま無反応だった） --- */
.fatal{text-align:center;padding:48px 10px;}
.fatal-ic{font-size:44px;margin-bottom:10px;}
.fatal-t{font-size:18px;font-weight:800;margin:0 0 10px;}
.fatal-m{font-size:13.5px;color:var(--ink-2);line-height:1.8;margin:0 0 22px;}

/* 進捗バー（.psum の中だけでなく、どこでも使えるようにする） */
.pbar{height:7px;border-radius:99px;background:var(--mint);overflow:hidden;margin-top:2px;}
.pbar>i{display:block;height:100%;border-radius:99px;background:var(--green);transition:width .4s ease;}
.pbar>i.over{background:var(--bad);}
.hero .pbar{margin-top:4px;}

/* --- ホームのヒーロー（残額をひとつだけ大きく） --- */
.seg-toggle.sm{margin-bottom:0;padding:3px;gap:3px;flex:none;}
.seg-toggle.sm button{padding:6px 14px;font-size:12.5px;flex:none;}
.card.hero{padding:14px 18px 16px;margin-bottom:12px;}
.hero-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px;}
.hero-set{font-size:12px;font-weight:700;color:var(--green-d);white-space:nowrap;padding:6px 2px;}
.hero-cap{margin:0;font-size:12.5px;color:var(--ink-2);font-weight:700;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.hero-range{font-size:11.5px;color:var(--ink-2);font-weight:600;opacity:.85;}
.hero-amt{font-size:clamp(34px,10vw,42px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:4px 0 2px;white-space:nowrap;}
.hero-amt.over{color:var(--bad);}
.hero-sub{margin:0 0 8px;font-size:12.5px;color:var(--ink-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hero-sub b{color:var(--ink);font-weight:800;}
.hero-note{margin:9px 0 0;line-height:1.7;font-size:11.5px;color:var(--ink-2);}

/* --- 内訳カード（財布別 / ジャンル別をタブで切替） --- */
/* 内訳カード（財布別・ジャンル別を上下に並べ、1画面で両方見えるように圧縮） */
.card.bd{padding:14px 16px 15px;margin-bottom:12px;}
.bd-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px;}
.bd-t{font-size:12.5px;font-weight:800;color:var(--ink-2);}
.bd-total{font-size:13px;font-weight:800;white-space:nowrap;}
.bd-hint{margin:2px 0 0;font-size:11px;color:var(--ink-2);text-align:center;opacity:.75;}
.card.bd .segbar{height:30px;}
.card.bd .seg-legend{margin-top:9px;gap:6px 12px;}
.segbar.tappable>i{cursor:pointer;}
.segbar.tappable>i:active{filter:brightness(.9);}

/* 凡例は全項目を出す。名前が長いときだけ末尾を … で省略して、
   折り返しで高さが伸びないようにする（金額は必ず読めるまま残す） */
.seg-legend > span{white-space:nowrap;display:inline-flex;align-items:center;gap:5px;max-width:100%;}
.seg-legend .lg-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:7.2em;}
.seg-legend .lg-val{flex:none;color:var(--ink);font-weight:800;}

.hero-sub b.warn{color:var(--bad);}
/* 内訳カードの注記（固定費を含めていないことを、その場で言う） */
.bd-note{margin:8px 0 0;font-size:11.5px;color:var(--ink-2);}
.hero-extra{margin:6px 0 0;font-size:12.5px;color:var(--ink-2);font-weight:600;}
.hero-extra b{color:var(--ink);}
.hero-extra b.warn{color:var(--bad);}

/* --- 保存直後（このアプリ最大の見せ場） --- */
.as-cap{margin:2px 0 0;font-size:13px;color:var(--ink-2);font-weight:700;text-align:center;}
.as-amt{font-size:clamp(40px,12vw,50px);font-weight:800;letter-spacing:-.02em;text-align:center;line-height:1.2;margin:2px 0;}
.as-amt.over{color:var(--bad);}
.as-sub{margin:0 0 6px;text-align:center;font-size:13px;color:var(--ink-2);font-weight:700;}
.as-meta{margin:10px 0 0;text-align:center;font-size:12.5px;color:var(--ink-2);}
.linkish{color:var(--green-d);font-weight:700;text-decoration:underline;font-size:12.5px;}

/* --- 日付の入力欄（環境によって 08/20/2026 と出てしまうのを避ける） --- */
.datefield{position:relative;}
.datebtn{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;font-weight:700;color:var(--ink);}
.df-caret{color:var(--ink-2);font-size:12px;flex:none;}
/* その場に開く月カレンダー（端末標準のピッカーに頼らない） */
/* 記録シートは2列組みなので、その場に開くと半分の幅しか使えない。
   浮かせて右端に合わせ、下のキーパッドに重ねる。 */
.dfcal{position:absolute;top:calc(100% + 8px);right:0;z-index:20;width:320px;max-width:calc(100vw - 44px);
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 10px 12px;box-shadow:0 10px 28px rgba(20,58,44,.18);}
.dfcal.hidden{display:none;}
.dfhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.dfhead span{font-size:13.5px;font-weight:800;color:var(--ink);}
.dfnav{width:30px;height:30px;border-radius:10px;font-size:19px;color:var(--green-d);background:var(--mint);}
.dfnav:active{filter:brightness(.94);}
.dfgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.dfw{font-size:10px;font-weight:800;color:var(--ink-2);text-align:center;padding-bottom:2px;}
.dfd{aspect-ratio:1/0.84;border-radius:10px;font-size:13px;font-weight:700;color:var(--ink);background:transparent;display:grid;place-items:center;}
.dfd.blank{visibility:hidden;}
.dfd.td{color:var(--green-d);background:var(--mint);}
.dfd.on{background:var(--green);color:#fff;}
.dfd:active{filter:brightness(.94);}
.dfquick{display:flex;gap:8px;margin-top:8px;}
.dfquick .chip{flex:1;text-align:center;}
.chips.sm{margin:8px 0 0;gap:6px;}
.chips.sm .chip{padding:6px 12px;font-size:12px;}

/* --- 初期設定 --- */
.setup{padding-bottom:30px;}
.setup-hero{padding:26px 4px 20px;}
.setup-kicker{margin:0 0 6px;font-size:12px;font-weight:800;color:var(--green-d);letter-spacing:.08em;}
.setup-title{margin:0 0 12px;font-size:23px;font-weight:800;line-height:1.5;letter-spacing:-.01em;}
.setup-title b{color:var(--green-d);}
.setup-lead{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.9;}
.big-input{font-size:22px!important;font-weight:800;text-align:center;letter-spacing:.02em;}
.btn.lg{padding:15px 16px;font-size:16.5px;border-radius:15px;}
.hint{display:block;margin-top:7px;font-size:11.5px;color:var(--ink-2);line-height:1.7;}

/* --- ノーマネーデーを2段階に（確定した日と、記録が無いだけの日を区別する） --- */
.cal-cell.maybe .maybe-mk{opacity:.28;}
.cal-cell.maybe{background:rgba(216,240,227,.35);}

/* 推移グラフ：列が細いと金額ラベルが隣とぶつかって読めないので、
   列に最低幅を持たせて横スクロールにする。
   棒とラベルは同じ枠の中に入れて、ズレないようにしている。
   右端の余白は、＋ボタンが最新の列を隠さないための逃げ場。 */
.vscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin:0 -2px;}
.vscroll::-webkit-scrollbar{height:0;}
.vinner{width:max-content;min-width:100%;padding-right:54px;box-sizing:content-box;}
.vchart .vcol{flex:1 0 auto;min-width:46px;}
.vlabs .vlab{flex:1 0 auto;min-width:46px;}

/* 使い方ガイド（設定からいつでも開ける常設ページ） */
.card.guide-entry{display:flex;align-items:center;gap:12px;padding:15px 16px;cursor:pointer;}
.card.guide-entry:active{background:var(--mint);}
.guide-entry .ge-ic{font-size:22px;line-height:1;flex:none;}
.guide-entry .ge-tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;}
.guide-entry .ge-tx b{font-size:15px;}
.guide-entry .ge-tx span{font-size:11.5px;color:var(--ink-2);line-height:1.45;}
.guide-entry .ge-arrow{font-size:22px;color:var(--ink-2);flex:none;}
.g-lead{margin:0 0 14px;font-size:13px;color:var(--ink-2);line-height:1.7;}
.g-sec{background:var(--card);border-radius:16px;margin-bottom:9px;box-shadow:var(--shadow);overflow:hidden;}
.g-sec>summary{display:flex;align-items:center;gap:10px;padding:14px 15px;cursor:pointer;list-style:none;}
.g-sec>summary::-webkit-details-marker{display:none;}
.g-sec .g-ic{flex:none;width:22px;height:22px;border-radius:999px;background:var(--green-soft);color:var(--green-d);font-size:11.5px;font-weight:800;display:grid;place-items:center;}
.g-sec .g-t{flex:1;font-size:14px;font-weight:800;color:var(--ink);line-height:1.4;}
.g-sec .g-mk{flex:none;font-size:17px;font-weight:700;color:var(--ink-2);transition:transform .15s ease;}
.g-sec[open] .g-mk{transform:rotate(45deg);}
.g-sec .g-body{padding:0 15px 14px;border-top:1px solid var(--line);margin-top:-1px;padding-top:12px;}
.g-sec .g-body p{margin:0 0 9px;font-size:13.5px;line-height:1.85;color:var(--ink);}
.g-sec .g-body p:last-child{margin-bottom:0;}
.g-sec .g-body p.g-how{background:var(--mint);border-radius:11px;padding:10px 12px;font-size:12.5px;color:var(--ink-2);line-height:1.75;}
.g-sec .g-body p.g-how b{color:var(--ink);}

/* 記録がまだ無いときの空状態（アイコンと同じ双葉を薄く置く） */
.sprout{display:block;width:92px;height:auto;margin:0 auto 12px;}
.sprout.lg{width:118px;margin-bottom:16px;}
.home-empty{padding:26px 18px 8px;text-align:center;}
.home-empty .he-t{margin:0 0 8px;font-size:14.5px;font-weight:800;color:var(--ink-2);}
.home-empty .he-s{margin:0;font-size:12.5px;line-height:1.85;color:var(--ink-2);opacity:.9;}
.home-empty .he-s b{color:var(--green-d);}
.home-empty .he-s2{margin:14px auto 0;max-width:20em;font-size:12px;line-height:1.75;color:var(--ink-2);background:var(--card);border-radius:14px;padding:11px 15px;box-shadow:var(--shadow);}
.home-empty .he-s2 b{color:var(--green-d);}
.setup-guide-note{margin:8px auto 0;max-width:22em;font-size:12px;line-height:1.8;color:var(--ink-2);text-align:left;background:var(--card);border-radius:14px;padding:11px 14px;box-shadow:var(--shadow);}
.setup-guide-note b{color:var(--ink);}

/* 使わなかった日（🌱）— ホームからも記録できるようにした入口 */
.ns-chip{display:block;width:100%;margin:10px 0 0;padding:10px 12px;border-radius:13px;border:1.5px dashed var(--green-l);
  background:transparent;color:var(--green-d);font-size:12.5px;font-weight:800;line-height:1.4;}
.ns-chip.on{border-style:solid;border-color:var(--green);background:var(--green-soft);}
.ns-chip:active{filter:brightness(.96);}
.ns-count{margin:8px 0 0;font-size:12.5px;font-weight:700;color:var(--ink-2);}
.ns-count b{color:var(--green-d);}
.ns-mk{margin-left:3px;}
.home-empty.sm{padding:22px 18px 6px;}
.home-empty.sm .he-t{margin:0;font-size:13px;}

/* 更新のお知らせ */
.wn{margin:0;padding-left:1.1em;}
.wn li{font-size:13.5px;line-height:1.85;color:var(--ink);margin-bottom:7px;}
a.card.guide-entry{text-decoration:none;color:inherit;}

/* 見出しの右の歯車（設定は下のタブから外し、ここに置いた） */
.head-right{display:flex;align-items:center;gap:10px;flex:none;}
.head.bare{padding:4px 2px 0;justify-content:flex-end;min-height:34px;}
.head.bare h1{display:none;}
.gear{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);background:transparent;flex:none;}
.gear svg{width:21px;height:21px;}
.gear:active{background:var(--mint);}
.backbtn{font-size:14px;font-weight:700;color:var(--green-d);background:transparent;padding:2px 4px 2px 0;}

/* ふところの印（空の画面用） */
.pouch{display:block;width:92px;height:auto;margin:0 auto 12px;}
.pouch.lg{width:118px;margin-bottom:16px;}

/* ほしいものリスト */
.card.wl-sum{text-align:center;padding:18px 16px 16px;}
.wl-sum-cap{margin:0;font-size:12.5px;font-weight:800;color:var(--ink-2);}
.wl-sum-amt{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:4px 0 2px;color:var(--green-d);}
.wl-sum-sub{margin:0;font-size:12px;color:var(--ink-2);}
.wl-sum-rem{margin:10px 0 0;font-size:12.5px;color:var(--ink-2);font-weight:600;}
.wl-sum-rem b{color:var(--ink);}
.wl-item{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:14px 16px 12px;margin-bottom:10px;}
.wl-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.wl-name{font-size:15px;font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wl-amt{font-size:15px;font-weight:800;white-space:nowrap;flex:none;}
.wl-meta{margin:5px 0 0;font-size:11.5px;color:var(--ink-2);line-height:1.6;}
.wl-ripe{color:var(--green-d);}
.wl-ok{color:var(--green-d);font-weight:800;}
.wl-ng{color:var(--bad);font-weight:800;}
/* 使いたい月。判定（買えます／足りません）の代わりに出るので、同じ位置・同じ大きさ */
.wl-plan{color:#5e8b78;font-weight:800;}
.wl-plan-row{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);}
/* 見送った合計を育てるボタン。数字の真下に置いて、操作と結果をつなげる */
.wl-skip{margin-top:12px;}
/* 入れた瞬間に合計が一度だけ跳ねる。ごほうびは新しい画面ではなく、数字が育つこと */
@keyframes wlPop{0%{transform:scale(1)}35%{transform:scale(1.09)}100%{transform:scale(1)}}
.wl-sum-amt.pop{animation:wlPop .42s ease-out;}
@media (prefers-reduced-motion: reduce){ .wl-sum-amt.pop{animation:none;} }
.wl-more{margin:8px 4px 2px;font-size:12px;color:var(--ink-2);text-align:center;}

.wl-plan-sum{margin:4px 0 0;font-size:13px;color:var(--ink-2);}
.wl-plan-sum:first-child{margin-top:0;}
.wl-plan-sum b{color:var(--ink);font-size:15px;}
.wl-memo{margin:5px 0 0;font-size:12px;color:var(--ink-2);}
.wl-acts{display:flex;gap:8px;margin-top:11px;}
.wl-acts .btn{flex:1;}
.wl-fold{background:var(--card);border-radius:16px;box-shadow:var(--shadow);margin-top:12px;overflow:hidden;}
.wl-fold>summary{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;cursor:pointer;list-style:none;font-size:13.5px;font-weight:800;color:var(--ink-2);}
.wl-fold>summary::-webkit-details-marker{display:none;}
.wl-cnt{font-size:12px;font-weight:700;}
.wl-done{display:flex;align-items:center;gap:10px;padding:10px 15px;border-top:1px solid var(--line);}
.wl-done .wl-name{flex:1;font-size:13.5px;}
.wl-done .wl-amt{font-size:13.5px;color:var(--ink-2);}


/* ============================================================
   ジャンル別の予算（v20）
   ホームの主役（あと使えるお金）は譲らないので、下に1枚置くだけ。
   タブにはしない ―― タブの中にタブになるうえ、一度入れると戻しにくい。
   ============================================================ */
.cb-card{padding:14px 16px 12px;}
.cb-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.cb-empty{margin:0;font-size:13px;color:var(--ink-2);line-height:1.7;}
.cb-row{padding:10px 0;border-top:1px solid var(--line);}
.cb-row:first-of-type{border-top:none;padding-top:2px;}
.cb-top{display:flex;align-items:center;justify-content:space-between;}
.cb-nm{font-size:14px;font-weight:800;display:flex;align-items:center;gap:6px;}
.cb-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.cb-line{margin:4px 0 6px;font-size:12px;color:var(--ink-2);line-height:1.6;}
.cb-left b{font-size:15px;color:var(--green-d);}
.cb-over{color:var(--bad);font-weight:800;}
.cb-none{color:var(--ink-2);}
.cb-hint{color:var(--ink-2);}
.pbar.sm{height:5px;}
.cb-smalls{margin-top:8px;padding-left:14px;border-left:2px solid var(--line);}
.cb-sm{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:3px 0;}
.cb-sm-n{color:var(--ink-2);}
.cb-sm-v{font-weight:700;color:var(--ink-2);}
.cb-sm-v.over{color:var(--bad);}
.cb-warn{margin:8px 0 0;font-size:12px;line-height:1.6;color:#8a6d2f;background:#fdf6e3;
  border-radius:10px;padding:8px 10px;}
/* 決めた合計と、まだ割り当てていない額 */
.cb-sum{background:var(--green-soft);border-radius:12px;padding:9px 12px;margin-bottom:10px;}
.cb-sum-l{margin:0;font-size:12px;color:var(--ink-2);}
.cb-sum-l b{font-size:15px;color:var(--ink);}
.cb-sum-r{margin:3px 0 0;font-size:12px;color:var(--ink-2);line-height:1.6;}
.cb-sum-r b{color:var(--green-d);}
/* ¥0 で決めたジャンル（使わない予定）。使わずに終われば達成なので🌱 */
.cb-zero{color:var(--green-d);font-weight:800;}
.cb-sm-v.zero{color:var(--green-d);}
/* 「使わない」ボタン */
/* シートの地色がミントなので、mint の下地だと「押せる」ように見えなかった。
   白＋枠にして、選ぶと緑で塗りつぶす。 */
.cbe-z{flex:none;font-size:11px;font-weight:700;color:var(--ink-2);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:5px 10px;}
.cbe-z.on{background:var(--green-d);border-color:var(--green-d);color:#fff;}
.cbe-i:disabled{background:var(--mint);color:transparent;}

.cb-tie{margin:10px 0 0;font-size:12px;line-height:1.7;color:var(--ink-2);
  background:var(--green-soft);border-radius:10px;padding:8px 10px;}
.cb-tie b{color:var(--ink);}
.cb-future{margin:8px 0 0;font-size:12px;color:var(--green-d);font-weight:700;}
.cb-axis{margin:0 0 10px;}
.cbe-months{flex-wrap:wrap;gap:6px;}
.cb-note{margin:10px 0 0;font-size:11px;color:var(--ink-2);}

/* 予算を決める画面 */
.cbe-grp{margin-bottom:14px;}
.cbe-row{display:flex;align-items:center;gap:10px;padding:4px 0;}
.cbe-row.sm{padding-left:14px;}
.cbe-n{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 財布は他の画面と同じく色の丸で示す（👛 を並べても見分けがつかない） */
.cbe-n .dot{display:inline-block;vertical-align:middle;margin:-2px 7px 0 0;}
.cbe-row.sm .cbe-n{font-size:13px;color:var(--ink-2);}
.cbe-i{width:96px;flex:none;text-align:right;padding:8px 10px;font-size:14px;}

/* 月ごとの小見出し（月タブの代わり。合計とリストが噛み合うようにした） */
.wl-grp{display:flex;align-items:baseline;justify-content:space-between;
  margin:16px 4px 8px;font-size:13px;font-weight:800;color:var(--green-d);}
.wl-grp-n{font-size:11px;font-weight:700;color:var(--ink-2);}
.wl-search{margin-bottom:10px;}

/* 推移グラフ：棒ごとの「その月の予算に対する％」（v23）
   破線をやめた理由は app.js のコメント参照。破線が最大値を決めて棒が潰れていた。 */
.vpct{display:block;font-size:9.5px;font-weight:800;color:var(--green-d);letter-spacing:-.02em;}
.vpct.over{color:var(--bad);}