/* 日タイ家計簿 — iPhone最優先・片手操作・大きな文字
   配色：藍（ベース）／金＝タイ／朱＝日本。文字は高コントラスト。 */
:root{
  --bg:#F2F4F7; --surface:#FFFFFF; --surface2:#E6EAF0; --line:#C9D1DC;
  --fg:#0F1722; --muted:#3F4A5A;
  --accent:#1E3F73; --accent-fg:#FFFFFF; --accent-soft:#DCE5F3;
  --th:#7A5200; --th-strong:#C8901E; --th-bg:#F6E7C6;
  --jp:#9C231D; --jp-strong:#C9372F; --jp-bg:#F7DCD9;
  --ok:#1F6E40; --warn:#8A5A00; --bad:#B0261C;
  --shadow:0 1px 2px rgba(15,25,45,.07),0 4px 14px rgba(15,25,45,.07);
  --font:-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Yu Gothic","Meiryo",system-ui,sans-serif;
  --tabh:86px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0E1218; --surface:#18202A; --surface2:#232C38; --line:#3A4658;
  --fg:#F4F6F9; --muted:#B9C3D0;
  --accent:#8DB0E6; --accent-fg:#0A111C; --accent-soft:#21324B;
  --th:#F0C462; --th-strong:#E3B04A; --th-bg:#3A2D12;
  --jp:#FF9A90; --jp-strong:#E8665C; --jp-bg:#42201E;
  --ok:#7AD49F; --warn:#F0BE62; --bad:#FF8478;
  --shadow:none; color-scheme:dark;}}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;width:100%;max-width:100%;overflow-x:clip}
body{margin:0;width:100%;max-width:100%;overflow-x:clip;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:19px;line-height:1.5;
  overscroll-behavior-y:none;-webkit-user-select:none;user-select:none}
input,textarea,select{-webkit-user-select:text;user-select:text}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
/* 左右の余白＝14px＋セーフエリア。幅はすべて「画面幅100%以内」で計算 */
:root{--gutL:calc(14px + env(safe-area-inset-left,0px));--gutR:calc(14px + env(safe-area-inset-right,0px))}
#app{width:100%;max-width:560px;margin:0 auto;padding-left:var(--gutL);padding-right:var(--gutR);
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px) + 96px)}

/* ===== 上部：国の切替 ===== */
.top{position:sticky;top:0;z-index:20;background:var(--bg);display:flex;gap:8px;align-items:stretch;width:100%;
  padding-top:calc(6px + env(safe-area-inset-top,0px));padding-bottom:6px;margin-top:calc(-1 * env(safe-area-inset-top,0px))}
.regionSwitch{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;background:var(--surface2);border-radius:14px;padding:4px}
.regionSwitch button{min-width:0;border:0;border-radius:11px;min-height:46px;font-size:20px;font-weight:800;background:transparent;color:var(--muted);white-space:nowrap;padding:0 6px}
.regionSwitch button.on:is(.TH,.PH,.MY,.VN,.ID,.KH){background:var(--th-strong);color:#1C1300}
.regionSwitch button.on.JP{background:var(--jp-strong);color:#FFFFFF}
.iconbtn{flex:0 0 54px;width:54px;border-radius:14px;border:2px solid var(--line);background:var(--surface);font-size:24px;padding:0}
.iconbtn.on{background:var(--accent-soft);border-color:var(--accent)}
.stayline{font-size:16px;color:var(--muted);padding:0 4px 8px;font-weight:600;overflow-wrap:anywhere}
.stayline b{color:var(--fg)}

/* ===== ＋支出：手順1 金額 ===== */
.typeRow{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0}
.todayMini{flex:1;text-align:center;font-size:16px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.todayMini b{color:var(--fg);font-size:18px}
.seg{display:flex;min-width:0;background:var(--surface2);border-radius:14px;padding:4px;gap:4px}
.seg button{flex:1 1 0;min-width:0;border:0;background:transparent;border-radius:11px;padding:8px 12px;font-size:18px;font-weight:700;color:var(--muted);min-height:50px}
.seg button.on{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.seg.small{flex:0 0 auto}
.seg.small button{min-height:44px;font-size:17px;padding:6px 12px}
.pill{flex:0 0 auto;border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:17px;font-weight:700;min-height:44px;white-space:nowrap}
.amtPanel{display:flex;align-items:center;gap:10px;width:100%;min-width:0;margin-top:6px;background:var(--surface);border-radius:20px;padding:6px 14px 6px 6px;box-shadow:var(--shadow);border:3px solid transparent}
.amtPanel:is(.TH,.PH,.MY,.VN,.ID,.KH){border-color:var(--th-strong)} .amtPanel.JP{border-color:var(--jp-strong)}
.curBtn{flex:0 0 60px;width:60px;height:60px;border-radius:14px;border:0;font-size:38px;font-weight:800}
.curBtn.THB{background:var(--th-bg);color:var(--th)} .curBtn.JPY{background:var(--jp-bg);color:var(--jp)}
.amtView{flex:1;min-width:0;text-align:right;font-size:clamp(46px,14vw,64px);font-weight:800;line-height:1.1;overflow:hidden;text-overflow:clip;white-space:nowrap}
.amtView.zero{color:var(--line)}
.conv{font-size:17px;color:var(--muted);min-height:24px;padding:2px 6px 0;display:flex;justify-content:space-between;gap:8px;font-weight:600;min-width:0}
.conv span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv button{flex:0 0 auto}
.conv button{border:0;background:none;color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-size:17px;padding:0}
.favs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding-top:6px;width:100%}
.fav{display:flex;align-items:center;gap:4px;min-width:0;width:100%;border:2px solid var(--accent);background:var(--accent-soft);border-radius:14px;
  padding:3px 8px;min-height:48px;font-size:clamp(16px,4.4vw,18px);font-weight:800;text-align:left;line-height:1.15}
.fav .fe{flex:0 0 auto;font-size:1.1em;line-height:1}
.fav .fl{flex:1 1 auto;min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere}
.fav .fa{flex:0 0 auto;white-space:nowrap}
.chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:6px}
.chip{min-width:0;border:2px solid var(--line);background:var(--surface);border-radius:12px;min-height:46px;font-size:clamp(17px,5vw,20px);font-weight:800;padding:4px 2px;white-space:nowrap;overflow:hidden;text-overflow:clip}
.chip.long{font-size:clamp(14px,4vw,16px)}
.chip.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.keypad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:6px}
.keypad button{min-width:0;border:0;background:var(--surface);border-radius:14px;height:clamp(50px,6.4vh,64px);font-size:30px;font-weight:700;box-shadow:var(--shadow)}
.keypad .fn{background:var(--surface2);font-size:26px}
.keypad .next{grid-row:span 2;height:auto;background:var(--accent);color:var(--accent-fg);font-size:22px;font-weight:800;line-height:1.3}
.keypad .next:disabled{background:var(--surface2);color:var(--muted)}
.keypad button:active{transform:scale(.97);filter:brightness(.92)}

/* ===== ＋支出：手順2 カテゴリー ===== */
.amtBack{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;min-width:0;border:0;background:var(--surface);border-radius:18px;padding:10px 16px;box-shadow:var(--shadow);margin-top:4px}
.amtBack .num{font-size:44px;font-weight:800;line-height:1.15;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.amtBack .edit{font-size:17px;color:var(--accent);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.amtBack:is(.TH,.PH,.MY,.VN,.ID,.KH) .num{color:var(--th)} .amtBack.JP .num{color:var(--jp)}
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.cat{min-width:0;border:3px solid transparent;background:var(--surface);border-radius:16px;min-height:96px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:17px;font-weight:700;line-height:1.25;text-align:center;word-break:keep-all;overflow-wrap:anywhere;box-shadow:var(--shadow)}
.cat .e{font-size:38px;line-height:1}
.cat.on{border-color:var(--accent);background:var(--accent-soft)}
.subs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.subs .chip{font-size:17px;min-height:48px;padding:6px 16px;max-width:100%}
.opts{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inp{max-width:100%;min-width:0;border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:12px 14px;font-size:19px;min-height:56px;width:100%}
select.inp{appearance:auto;-webkit-appearance:menulist}

/* ===== 保存ボタン ===== */
.savebar{position:fixed;left:0;right:0;bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px) + 10px);z-index:30;padding-left:var(--gutL);padding-right:var(--gutR);pointer-events:none}
.savebar button{pointer-events:auto;display:block;width:100%;max-width:532px;margin:0 auto;border:0;border-radius:18px;min-height:70px;background:var(--accent);color:var(--accent-fg);font-size:23px;font-weight:800;box-shadow:0 6px 20px rgba(15,35,75,.3);padding:6px 14px}
.savebar button:disabled{background:var(--surface2);color:var(--muted);box-shadow:none}

/* ===== 下部メニュー ===== */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.tabs .in{width:100%;max-width:560px;margin:0 auto;padding-inline:4px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);align-items:end;height:var(--tabh)}
.tabs button{min-width:0;padding:0;white-space:nowrap;border:0;background:none;height:var(--tabh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:15px;font-weight:700;color:var(--muted)}
.tabs button .e{font-size:26px;line-height:1}
.tabs button.on{color:var(--accent)}
.tabs button.plus{position:relative}
.tabs button.plus .p{display:grid;place-items:center;width:clamp(58px,16vw,66px);height:clamp(58px,16vw,66px);margin-top:-28px;border-radius:50%;background:var(--accent);color:var(--accent-fg);font-size:42px;font-weight:600;line-height:1;box-shadow:0 4px 14px rgba(15,35,75,.35);border:4px solid var(--surface)}
.tabs button.plus.on{color:var(--accent)}

/* ===== 一覧・パネル ===== */
h2{font-size:22px;margin:22px 4px 10px}
.panel{background:var(--surface);border-radius:18px;padding:14px 16px;box-shadow:var(--shadow);margin-bottom:12px}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-block:8px}
.kv+.kv{border-top:1px solid var(--surface2)}
.kv .k{color:var(--muted);font-size:17px;min-width:0}
.kv .v{font-weight:800;text-align:right;font-size:20px;min-width:0;overflow-wrap:anywhere}
.big{font-size:34px;font-weight:800;line-height:1.2}
.muted{color:var(--muted)}
.small{font-size:16px}
.bigAdd{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:84px;border:0;border-radius:20px;background:var(--accent);color:var(--accent-fg);font-size:26px;font-weight:800;box-shadow:0 6px 18px rgba(15,35,75,.25);margin-block:6px 6px}
.bigAdd span{font-size:40px;line-height:1}
.sum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.sum>div{background:var(--surface);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow);min-width:0}
.sum label{display:block;font-size:16px;color:var(--muted);font-weight:700}
.sum b{font-size:clamp(24px,7.5vw,30px);line-height:1.2;overflow-wrap:anywhere}
.sum span{display:block;font-size:15px;color:var(--muted)}
.tx{display:flex;align-items:center;gap:12px;padding:12px 2px;border:0;background:none;width:100%;text-align:left;border-top:1px solid var(--surface2)}
.tx:first-child{border-top:0}
.tx .e{font-size:30px;width:40px;text-align:center;flex:0 0 auto}
.tx .m{flex:1;min-width:0}
.tx .m div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.tx .m small{display:block;color:var(--muted);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx .a{font-weight:800;font-size:21px;text-align:right;flex:0 0 auto}
.tx .a small{display:block;font-weight:600;font-size:14px;color:var(--muted)}
.inc{color:var(--ok)}
.dayh{display:flex;justify-content:space-between;font-size:16px;color:var(--muted);font-weight:700;margin:18px 4px 6px}
.tag{display:inline-block;font-size:13px;font-weight:800;border-radius:6px;padding:1px 6px;vertical-align:1px}
.tag:is(.TH,.PH,.MY,.VN,.ID,.KH){background:var(--th-bg);color:var(--th)} .tag.JP{background:var(--jp-bg);color:var(--jp)}
.bar{height:12px;background:var(--surface2);border-radius:6px;overflow:hidden;margin-top:5px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:6px}
.bar i:is(.TH,.PH,.MY,.VN,.ID,.KH){background:var(--th-strong)} .bar i.JP{background:var(--jp-strong)}
.grp{padding-block:10px}
.grp+.grp{border-top:1px solid var(--surface2)}
.grp summary{list-style:none;cursor:pointer}
.grp summary::-webkit-details-marker{display:none}
.line{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.grp .line b{font-size:21px}
.grp .sub{padding:6px 0 2px 12px;font-size:17px}
.grp .sub .line{padding-block:4px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 12px}
.nav b{font-size:22px}
.nav button{width:60px;height:52px;border-radius:14px;border:2px solid var(--line);background:var(--surface);font-size:22px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.two>div{min-width:0}
.cmp{border-radius:16px;padding:12px 14px;min-width:0}
.cmp:is(.TH,.PH,.MY,.VN,.ID,.KH){background:var(--th-bg)} .cmp.JP{background:var(--jp-bg)}
.cmp .t{font-size:16px;font-weight:800}
.cmp:is(.TH,.PH,.MY,.VN,.ID,.KH) .t{color:var(--th)} .cmp.JP .t{color:var(--jp)}
.cmp .big{font-size:clamp(21px,6.6vw,27px);overflow-wrap:anywhere}
.verdict{background:var(--accent-soft);border-radius:16px;padding:14px 16px;font-weight:800;margin-top:10px;font-size:19px}
.tblwrap{overflow-x:auto}
.mtab{width:100%;border-collapse:collapse;font-size:17px}
.mtab td,.mtab th{padding:8px 4px;text-align:right;border-top:1px solid var(--surface2)}
.mtab th{font-weight:700;color:var(--muted);font-size:15px;border-top:0}
.mtab td:first-child,.mtab th:first-child{text-align:left}
.empty{text-align:center;color:var(--muted);padding:26px 10px}
.btn{min-width:0;border:2px solid var(--line);background:var(--surface);border-radius:14px;min-height:56px;padding:10px 16px;font-size:18px;font-weight:800}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn.dng{color:var(--bad);border-color:var(--bad);background:transparent}
.btn.full{width:100%}
.btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.stack{display:grid;gap:10px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.cal .h{text-align:center;font-size:15px;color:var(--muted);font-weight:700}
.cal button{min-width:0;overflow:hidden;border:2px solid var(--surface2);background:var(--surface);border-radius:10px;min-height:62px;padding:4px 1px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;font-size:16px;font-weight:700}
.cal button small{font-size:11.5px;font-weight:800;line-height:1.1}
.cal button:is(.TH,.PH,.MY,.VN,.ID,.KH) small{color:var(--th)} .cal button.JP small{color:var(--jp)}
.cal button.today{border-color:var(--accent)}
.cal button.sel{background:var(--accent-soft);border-color:var(--accent)}
.cash{display:flex;gap:10px}
.cash>div{flex:1;min-width:0}
.cash .big{font-size:clamp(22px,7vw,28px);overflow-wrap:anywhere}
.setrow{display:flex;align-items:center;gap:8px;padding-block:8px;border-top:1px solid var(--surface2)}
.setrow:first-child{border-top:0}
.setrow .btn{flex:0 0 auto;max-width:55%}
.setrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.mini{width:48px;height:48px;border-radius:12px;border:2px solid var(--line);background:var(--surface);font-size:19px;flex:0 0 auto}
.mini.on{background:var(--accent-soft);border-color:var(--accent)}
.note{font-size:16px;color:var(--muted);margin:8px 2px 0}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--muted);margin-right:6px}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)}
.field{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.field label{font-size:16px;color:var(--muted);font-weight:700}
.banner{background:var(--th-bg);color:var(--fg);border-radius:16px;padding:12px 14px;margin-bottom:12px;font-size:17px}
.banner b{display:block;margin-bottom:4px}

/* ===== シート ===== */
.scrim{position:fixed;inset:0;background:rgba(5,10,20,.5);z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--bg);width:100%;max-width:560px;padding-left:var(--gutL)!important;padding-right:var(--gutR)!important;max-height:92vh;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:24px 24px 0 0;padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px))}
.sheet h3{font-size:23px;margin:0 0 12px}
.bigchoice{display:grid;gap:12px}
.bigchoice button{border:3px solid var(--line);background:var(--surface);border-radius:18px;min-height:86px;font-size:25px;font-weight:800;display:flex;align-items:center;gap:14px;padding:12px 18px}
.bigchoice button .flag{font-size:42px}
.bigchoice button:is(.TH,.PH,.MY,.VN,.ID,.KH).on{border-color:var(--th-strong);background:var(--th-bg)}
.bigchoice button.JP.on{border-color:var(--jp-strong);background:var(--jp-bg)}
textarea.inp{min-height:160px;font-size:14px;font-family:ui-monospace,Menlo,monospace}

/* ===== 保存しました ===== */
.toast{position:fixed;left:var(--gutL);right:var(--gutR);top:calc(env(safe-area-inset-top,0px) + 8px);z-index:70;display:flex;justify-content:center;pointer-events:none}
.toast div{pointer-events:auto;max-width:532px;width:100%;background:var(--fg);color:var(--bg);border-radius:16px;padding:14px 16px;font-size:19px;font-weight:800;display:flex;align-items:center;gap:12px}
.toast div span{flex:1;min-width:0}
.toast button{border:0;background:var(--bg);color:var(--fg);border-radius:12px;padding:10px 14px;font-weight:800;font-size:17px;min-height:46px}

/* ===== ロック ===== */
.lock{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px 16px}
.lock .dots{display:flex;gap:16px}
.lock .dots i{width:20px;height:20px;border-radius:50%;border:2px solid var(--fg)}
.lock .dots i.f{background:var(--fg)}
.pad{display:grid;grid-template-columns:repeat(3,minmax(0,86px));gap:14px;width:min(100%,286px)}
.pad button{height:76px;border-radius:50%;border:2px solid var(--line);background:var(--surface);font-size:30px;font-weight:800}

@media (prefers-reduced-motion: no-preference){.toast div{animation:down .18s ease-out}@keyframes down{from{transform:translateY(-12px);opacity:0}}}
@media (max-width:360px){.cats{grid-template-columns:repeat(3,minmax(0,1fr))}.cat{min-height:86px;font-size:15px}.cat .e{font-size:32px}.regionSwitch button{font-size:18px}}
@media (min-width:700px){body{font-size:18px}}

/* ===== ロングステイ家計簿：国選び ===== */
.cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cgrid button{min-width:0;display:flex;align-items:center;gap:10px;border:3px solid var(--line);background:var(--surface);border-radius:16px;min-height:76px;padding:8px 10px;text-align:left;font-size:19px;font-weight:800}
.cgrid .flag{font-size:34px;line-height:1;flex:0 0 auto}
.cgrid small{display:block;font-size:14px;font-weight:600;color:var(--muted)}
.cgrid button span:last-child{min-width:0;overflow-wrap:anywhere}
.regionSwitch button.long{font-size:clamp(15px,4.4vw,18px)}
.curBtn{font-size:clamp(24px,7.5vw,38px)}

/* 日付ボタン（過去の日にも記録できる） */
.dateRow{display:grid;grid-template-columns:repeat(3,minmax(0,.8fr)) minmax(0,1.2fr);gap:8px;margin:10px 0 6px;min-width:0}
.dchip{min-width:0;border:2px solid var(--line);background:var(--surface);border-radius:14px;min-height:48px;padding:6px 4px;font-size:17px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg)}
.dchip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.dateRow.past .dchip.on{background:#E8890C;border-color:#E8890C;color:#fff}
.dnote{grid-column:1/-1;text-align:center;font-weight:800;font-size:16px;color:#B45F00;background:#FFF1DC;border-radius:10px;padding:6px 8px}

/* 内訳の選択（保存ボタンの上） */
.savesubs{pointer-events:auto;display:flex;flex-wrap:wrap;gap:8px;max-width:532px;margin:0 auto 8px;padding:8px;background:var(--surface);border:2px solid var(--line);border-radius:16px;box-shadow:0 6px 20px rgba(15,35,75,.18)}
.savesubs[hidden]{display:none}
.savebar .savesubs .chip{flex:1 1 0;width:auto;min-width:72px;min-height:52px;margin:0;font-size:18px;padding:4px 8px;background:var(--surface);color:var(--fg);border:2px solid var(--line);border-radius:12px;box-shadow:none}
.savebar .savesubs .chip.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
#app.withsubs{padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px) + 180px)}
a.btn{display:flex;align-items:center;justify-content:center;text-decoration:none;color:inherit;box-sizing:border-box}
.note a{color:var(--accent);font-weight:700}