:root{--bg:#f4f6f5;--surface:#ffffff;--surface-subtle:#edf2ef;--text:#182e27;--muted:#53685e;--line:#dce5df;--control-line:#84988c;--accent:#086a50;--on-accent:#ffffff;--accent-soft:#e5f3eb;--warning:#80520c;--warning-soft:#fff3dc;--danger:#ad333b;--danger-soft:#fff0f0;--on-danger:#ffffff;--chart-1:#197b60;--chart-2:#5c8ea8;--chart-3:#9d89b7;--chart-4:#d0a14f;--chart-5:#bf8288;--chart-6:#a1b0a6;--chart-7:#748279;
  --r:12px;--r-s:12px;--haba:480px;--tabu:72px;
  color-scheme:light;}
:root[data-theme="dark"]{color-scheme:dark;--bg:#101a17;--surface:#192722;--surface-subtle:#22362e;--text:#edf5f0;--muted:#adbcb3;--line:#354a3f;--control-line:#708c7d;--accent:#87debb;--on-accent:#102a20;--accent-soft:#233d30;--warning:#f5cd83;--warning-soft:#3b301b;--danger:#ffa9ad;--danger-soft:#3d2529;--on-danger:#301316;--chart-1:#79cfa9;--chart-2:#8bb8d0;--chart-3:#bda7d7;--chart-4:#e1bf7c;--chart-5:#dea0a6;--chart-6:#91a79a;--chart-7:#c3cfc8;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#101a17;--surface:#192722;--surface-subtle:#22362e;--text:#edf5f0;--muted:#adbcb3;--line:#354a3f;--control-line:#708c7d;--accent:#87debb;--on-accent:#102a20;--accent-soft:#233d30;--warning:#f5cd83;--warning-soft:#3b301b;--danger:#ffa9ad;--danger-soft:#3d2529;--on-danger:#301316;--chart-1:#79cfa9;--chart-2:#8bb8d0;--chart-3:#bda7d7;--chart-4:#e1bf7c;--chart-5:#dea0a6;--chart-6:#91a79a;--chart-7:#c3cfc8;}}
:root[data-theme="light"]{color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  font-size:16px;line-height:1.65;font-synthesis:weight}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.35}
a{color:var(--accent);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary::marker{content:""}
small{font-size:12px}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.num,.money{font-variant-numeric:tabular-nums lining-nums}
svg.shirushi{width:22px;height:22px;flex:none;display:block}
.note{font-size:12px;color:var(--muted);line-height:1.65}
.lead{font-size:13px;color:var(--muted)}

/* 全体の列 */
.app{max-width:var(--haba);min-height:100vh;margin:0 auto;background:var(--bg)}
.wrap{padding:20px 16px 32px;display:flex;flex-direction:column;gap:16px}
.tabu-ari .wrap{padding-bottom:calc(var(--tabu) + 32px + env(safe-area-inset-bottom))}
.wrap-login{min-height:calc(100vh - 64px);justify-content:center}
.tab{display:flex;flex-direction:column;gap:16px}
.shiken-obi{background:var(--warning-soft);color:var(--warning);border-bottom:1px solid var(--line);text-align:center;font-size:13px;font-weight:700;line-height:1.4;padding:8px 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 頭の段（高さ 64px。左右の端は同じ 56px・ボタンは 44px） */
.top{height:64px;display:grid;grid-template-columns:56px minmax(0,1fr) 56px;align-items:center;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.top-hashi{width:56px;height:44px;display:flex;align-items:center}
.top-hashi:last-child{justify-content:flex-end}
.top h1{display:flex;justify-content:center;align-items:center;min-width:0;font-size:20px}
.brand{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:750;letter-spacing:.08em;color:var(--text);white-space:nowrap}
.brand svg.brand-ikon{width:25px;height:28px;color:var(--accent)}
.btn-maru{width:44px;height:44px;border-radius:12px;border:0;background:transparent;color:var(--text);display:inline-flex;align-items:center;justify-content:center;padding:0}
.btn-maru:hover{background:var(--surface-subtle)}
.btn-maru[aria-current]{background:var(--accent-soft);color:var(--accent)}
.tema-taiyou{display:none !important}
:root[data-theme="dark"] .tema-taiyou{display:block !important}
:root[data-theme="dark"] .tema-tsuki{display:none !important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tema-taiyou{display:block !important}:root:not([data-theme="light"]) .tema-tsuki{display:none !important}}

/* 頁の見出し（24px）と右の補い */
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.page-title{font-size:24px;font-weight:750;letter-spacing:.02em}
.tsuki-kiri{display:flex;align-items:center}
.date-label{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ya{color:var(--muted)}
.ya svg.shirushi{width:18px;height:18px}
.ya-nai{visibility:hidden}

/* 札・見出し・印 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.card h3{font-size:18px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px}
.section-head h3{display:flex;align-items:center;gap:8px}
.badge{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:12px;line-height:24px;padding:0;border-radius:4px;background:transparent;color:var(--muted);font-weight:600}
.badge.warn{color:var(--warning);background:var(--warning-soft);padding:0 6px}
.badge.ok{color:var(--accent)}
.chip{display:inline-flex;align-items:center;white-space:nowrap;font-size:12px;line-height:22px;padding:0 6px;border-radius:4px;background:var(--warning-soft);color:var(--warning);font-weight:600}

/* ボタン（高さ 48px 以上・主は緑・補助は枠・破壊だけ赤）と文字だけの操作（44px 以上） */
.btn{display:inline-flex;gap:8px;justify-content:center;align-items:center;min-height:48px;padding:10px 14px;font-size:14px;line-height:1.45;font-weight:700;border:1px solid var(--control-line);border-radius:var(--r-s);background:var(--surface);color:var(--text);text-align:center;text-decoration:none}
.btn svg.shirushi{width:20px;height:20px}
.btn-main{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-sub{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.btn.btn-kiken{background:var(--danger);border-color:var(--danger);color:var(--on-danger)}
.btn[disabled]{opacity:.55;cursor:default}
.btn-hiroi{width:100%}
.text-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:8px 4px;font-size:13px;font-weight:700;color:var(--accent);border:0;background:transparent}
.text-button svg.shirushi{width:18px;height:18px}
.text-button.muted{color:var(--muted)}
.text-button[disabled]{opacity:.55;cursor:default}
.btn-hikae{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 4px;font-size:13px;font-weight:600;color:var(--danger);background:transparent;border:0}

/* 下に固定するタブの棒（高さ 72px＋safe-area・3等分・印 22px と 12px の字・今のタブは色と太字） */
.tabu-bou{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--haba);height:calc(var(--tabu) + env(safe-area-inset-bottom));padding:6px 16px calc(6px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);z-index:20}
.tabu-naka{display:grid;grid-template-columns:repeat(3,1fr);height:100%}
.tabu{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;font-size:12px;color:var(--muted);border-radius:12px;text-decoration:none}
.tabu-ikon{display:flex;justify-content:center;align-items:center;width:48px;height:30px}
.tabu[aria-current="page"]{color:var(--accent);font-weight:700}
.tabu:focus-visible{outline-offset:-2px}
.maru{position:absolute;top:0;left:calc(50% + 10px);min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--warning);color:var(--surface);font-size:12px;font-weight:800;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
@media (min-width:600px){.app{border-inline:1px solid var(--line)}.tabu-bou{border-inline:1px solid var(--line)}}

/* レシートの絵 */

/* 撮るタブ（撮影の札と読み取りの状況の札） */
.capture-card{display:flex;flex-direction:column;gap:12px}
.capture-intro{display:flex;align-items:center;gap:16px;margin-bottom:4px}
.kongetsu{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.kongetsu span{font-size:24px;font-weight:750;color:var(--text);margin:0 2px}
.kamera{width:100%;min-height:96px;border:0;border-radius:var(--r-s);background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center}
.kamera svg.shirushi-kamera{width:40px;height:40px}
.kamera[disabled]{opacity:.55;cursor:default}
.kamera.kamera-line{min-height:0;justify-content:flex-start;background:transparent;color:var(--accent)}
.kamera-line svg.shirushi-kamera{width:24px;height:24px}
.capture-card .kekka{font-size:13px;color:var(--muted)}
.joukyou{padding-top:8px;padding-bottom:8px}
.joukyou:empty{display:none}
.upload-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);min-height:64px;color:var(--text)}
.upload-row:first-child{border-top:0}
.status-icon{width:24px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--muted);flex:none}
.status-icon.warn{color:var(--warning)}
.upload-text{flex:1;min-width:0}
.upload-name{display:block;font-size:14px;font-weight:700}
.upload-info{display:block;font-size:12px;color:var(--muted)}

/* 見るタブ: 合計の札（42px の金額・前月比・レシート・要確認・削減） */
.total{padding:16px 16px 0;overflow:hidden}
.total-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.total-top h3{font-size:14px;font-weight:700}
.total-value{font-size:42px;letter-spacing:-.04em;font-weight:750;line-height:1.2;margin:10px 0 6px;white-space:nowrap}
.yen{font-size:17px;letter-spacing:0;margin-left:5px;font-weight:600}
.comparison{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.comparison strong{color:var(--text);font-variant-numeric:tabular-nums}
.comparison svg.shirushi{width:20px;height:20px}
.total-footer{margin:12px -16px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);background:var(--surface-subtle)}
.kazu{padding:10px 8px;font-size:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:56px}
.kazu+.kazu{border-left:1px solid var(--line)}
.kazu .label{color:var(--muted)}
.kazu strong{font-size:17px;white-space:nowrap}
.kazu small{margin-left:2px}
.kazu-warn strong{color:var(--warning)}
.miru-kara:empty{display:none}
.empty-hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.empty-hero h3{font-size:20px}
.empty-hero p{font-size:13px;color:var(--muted)}

/* 改善の提案の札（上に小さな見出しを1つ。札は他の札と同じ白地と線。表は科目と増えた額の1行、提案の文と2か月の額は「詳しく見る」の中） */
.teian{display:flex;flex-direction:column}
.teian-midashi{font-size:13px;font-weight:700;color:var(--muted);padding:0 4px 8px}
.teian:empty{display:none}
.insight{padding:12px 16px}
.teian .insight{border-radius:0}
.teian .insight+.insight{margin-top:-1px}
.teian .teian-midashi+.insight{border-top-left-radius:var(--r);border-top-right-radius:var(--r)}
.teian .insight:last-child{border-bottom-left-radius:var(--r);border-bottom-right-radius:var(--r)}
.insight-gyou{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:15px}
.insight-na{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insight-sa{white-space:nowrap;font-variant-numeric:tabular-nums}
.insight-sa small{font-size:12px;color:var(--muted);margin-right:6px}
.insight-sa strong{color:var(--warning)}
.insight-bun{font-size:14px;line-height:1.7;padding-top:4px}
.insight-bun strong{font-variant-numeric:tabular-nums}
.insight-actions{position:relative;margin-top:4px}
.insight-actions>details{min-width:0}
.insight-actions>.text-button{position:absolute;top:0;right:0}
.insight-actions summary{display:inline-flex}
.insight-more{padding-top:4px;font-size:13px;color:var(--muted)}
.teian-mada{font-size:12px;color:var(--muted);padding:0 4px}

/* 推移の札（期間の切替・SVG の積み上げ棒・軸・凡例・内訳） */
.segment{display:flex;padding:4px;background:var(--surface-subtle);border-radius:12px;gap:4px;margin-bottom:16px}
.segment button{flex:1;min-height:44px;border-radius:9px;border:0;background:transparent;display:flex;justify-content:center;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text)}
.segment button svg.shirushi{width:18px;height:18px}
.segment button[aria-pressed="true"]{background:var(--surface);color:var(--accent)}
.chart-range{font-size:12px;color:var(--muted);margin-bottom:12px;font-variant-numeric:tabular-nums}
.plot{display:flex;gap:4px}
.axis{width:34px;flex:none;height:180px;position:relative;font-size:12px;line-height:1;color:var(--muted);text-align:right}
.jiku-me{position:absolute;right:0;transform:translateY(-50%);white-space:nowrap;font-variant-numeric:tabular-nums}
.j3{top:0}.j2{top:60px}.j1{top:120px}.j0{top:180px}
.plot-scroll{overflow-x:auto;flex:1;min-width:0;padding-bottom:4px;scrollbar-width:thin}
.suii-zu{display:block;overflow:visible}
.koushi{stroke:var(--line);stroke-width:1}
.atari{fill:transparent}
.bou-tsuki{cursor:pointer;outline:none}
.bou-tsuki:focus-visible .atari{stroke:var(--accent);stroke-width:2}
.bou-tsuki.erabu .atari{fill:var(--accent-soft)}
.tsuki-ji{fill:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.bou-tsuki.erabu .tsuki-ji{fill:var(--accent);font-weight:700;text-decoration:underline}
.dan.c1{fill:var(--chart-1)}.dan.c2{fill:var(--chart-2)}.dan.c3{fill:var(--chart-3)}.dan.c4{fill:var(--chart-4)}.dan.c5{fill:var(--chart-5)}.dan.c6{fill:var(--chart-6)}.dan.c7{fill:var(--chart-7)}
.swatch.c1,.bou-naka.c1{background:var(--chart-1)}.swatch.c2,.bou-naka.c2{background:var(--chart-2)}.swatch.c3,.bou-naka.c3{background:var(--chart-3)}
.swatch.c4,.bou-naka.c4{background:var(--chart-4)}.swatch.c5,.bou-naka.c5{background:var(--chart-5)}.swatch.c6,.bou-naka.c6{background:var(--chart-6)}.swatch.c7,.bou-naka.c7{background:var(--chart-7)}
.swatch{display:inline-block;width:9px;height:9px;border-radius:3px;flex:none}
.legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 6px;margin:12px 0 16px;font-size:12px;color:var(--muted)}
.legend:empty{display:none}
.hanrei{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden;white-space:nowrap}
.month-detail{padding:12px 0;border-top:1px solid var(--line);margin-bottom:12px}
.uchiwake-atama{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.uchiwake{display:grid;gap:6px;margin-top:8px;font-size:12px;color:var(--muted)}
.uchiwake-gyou{display:flex;justify-content:space-between;gap:8px}
.uchiwake-na{display:flex;align-items:center;gap:6px;min-width:0}
.uchiwake-gyou .money{white-space:nowrap;color:var(--text)}
.month-detail .note{margin-top:8px}
.graph-hint{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.graph-hint svg.shirushi{width:16px;height:16px}

/* 要確認の札（各件は畳んだ行。開くと直す欄） */
.review-card{padding-bottom:8px}
.ichiran{display:flex;flex-direction:column}
.yk{border-top:1px solid var(--line)}
.yk-gyou{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;grid-template-areas:"mise kin shirushi" "shita shita shirushi";column-gap:10px;row-gap:3px;align-items:center;padding:14px 0;min-height:76px}
.yk[open]>.yk-gyou{background:var(--surface-subtle);border-radius:10px;padding-inline:10px;margin-block:8px}
.yk-mise{grid-area:mise;font-size:14px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yk-kin{grid-area:kin;font-size:15px;font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.yk-shita .chip{background:transparent;padding:0;border-radius:0;font-weight:500;white-space:normal}
.yk-shita{grid-area:shita;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.yk-shirushi{grid-area:shirushi}
.yk-gyou-chofuku{grid-template-areas:"fuda fuda shirushi" "mise kin shirushi" "shita shita shirushi"}
.yk-gyou>.yk-chofuku-fuda{grid-area:fuda;justify-self:start}
.yk-chofuku{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0 0 14px}
.yk-chofuku-saki{margin:0;font-size:13px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.yk-shirushi,.km-shirushi{width:9px;height:9px;justify-self:center;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-2px) rotate(45deg)}
.yk[open] .yk-shirushi,.km[open] .km-shirushi{transform:translateY(2px) rotate(-135deg)}
.yk-naka{padding-bottom:16px}
.fields{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.field{display:grid;gap:6px;min-width:0}
.field>label,.field>legend{font-size:13px;font-weight:600}
.field input,.field select,.s-tasu input,.s-tasu select,.s-row input,.kansou-form textarea,.honnin-link input{width:100%;min-height:48px;border:1px solid var(--control-line);border-radius:var(--r-s);background:var(--surface);color:var(--text);padding:10px 12px;font-size:16px;min-width:0}
.field.yoku input{border-color:var(--warning);background:var(--warning-soft)}
::placeholder{color:var(--muted);opacity:1}
.gazou{margin-top:12px;text-align:center}
.gazou:empty{display:none}
.gazou img{max-width:100%;max-height:420px;border-radius:var(--r-s);border:1px solid var(--line)}
.btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.btns .btn{padding-inline:6px}
.btns-chofuku{grid-template-columns:repeat(2,minmax(0,1fr))}
.btns-chofuku .btn-main{grid-column:1 / -1}
.sakujo-dan{display:flex;margin-top:4px}
.sakujo-kakunin{margin-top:8px;padding:14px;background:var(--danger-soft);border:1px solid var(--danger);border-radius:12px}
.sakujo-bun{color:var(--danger);font-size:14px;font-weight:700}
.sakujo-taishou{font-size:13px;margin-top:4px;overflow-wrap:anywhere}
.sakujo-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.sakujo-btns .btn{font-size:13px}
.kouho{margin-top:12px;border-top:1px solid var(--line);padding:12px 0 0}
.kouho-midashi{font-size:12px;font-weight:700;color:var(--muted)}
.kouho-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.kouho-btns .btn{white-space:normal;overflow-wrap:anywhere;line-height:1.35;padding:8px 6px;font-size:13px}
.kouho-btns .btn-sub{background:var(--surface);border-color:var(--control-line);color:var(--text)}
.kouho-btns .btn-an{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.kouho-sonota:empty{display:none}
.kara{text-align:center;color:var(--muted);font-size:13px;padding:8px 0 12px}

/* 科目ごとの札（色の印・科目・金額・割合・色の横棒・前月比の差） */
.category-card{padding-bottom:4px}
.gyou-retsu{display:flex;flex-direction:column}
.km{border-top:1px solid var(--line)}
.km:first-child{border-top:0}
.km-gyou{display:block;padding:14px 0;min-height:80px;border-radius:var(--r-s)}
.km:first-child .km-gyou{padding-top:0;min-height:66px}
.km-ue{display:grid;grid-template-columns:minmax(0,1fr) auto auto 18px;align-items:center;gap:8px;font-size:14px;font-variant-numeric:tabular-nums}
.km-na{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;white-space:nowrap}
.km-na small{color:var(--muted)}
.km-kin{font-size:15px;font-weight:700;text-align:right;white-space:nowrap}
.km-wari{font-size:12px;color:var(--muted);text-align:right;min-width:2.6em}
.km-shita{display:flex;align-items:center;gap:12px;margin-top:8px}
.bou{height:5px;background:var(--surface-subtle);border-radius:5px;flex:1;overflow:hidden;min-width:0}
.bou-naka{display:block;height:100%;border-radius:5px;background:var(--chart-6)}
.km-sa{font-size:12px;color:var(--muted);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;min-width:9.5em}
.km-sa.fueta{color:var(--warning)}
.km-naka{padding-bottom:8px}
.kr{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;grid-template-areas:"mise kin btn" "hi kin btn";column-gap:8px;align-items:center;padding:10px 0;border-top:1px dashed var(--line);font-size:13px;font-variant-numeric:tabular-nums}
.kr-mise{grid-area:mise;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kr-hi{grid-area:hi;font-size:12px;color:var(--muted)}
.kr-kin{grid-area:kin;font-weight:700;text-align:right;white-space:nowrap}
.kr .sakujo-kakunin{grid-column:1/-1}
.btn-maru.btn-sakujo{grid-area:btn;color:var(--danger)}
.btn-sakujo svg.shirushi{width:20px;height:20px}
.w-0{width:0%}.w-1{width:1%}.w-2{width:2%}.w-3{width:3%}.w-4{width:4%}.w-5{width:5%}.w-6{width:6%}.w-7{width:7%}.w-8{width:8%}.w-9{width:9%}.w-10{width:10%}.w-11{width:11%}.w-12{width:12%}.w-13{width:13%}.w-14{width:14%}.w-15{width:15%}.w-16{width:16%}.w-17{width:17%}.w-18{width:18%}.w-19{width:19%}.w-20{width:20%}.w-21{width:21%}.w-22{width:22%}.w-23{width:23%}.w-24{width:24%}.w-25{width:25%}.w-26{width:26%}.w-27{width:27%}.w-28{width:28%}.w-29{width:29%}.w-30{width:30%}.w-31{width:31%}.w-32{width:32%}.w-33{width:33%}.w-34{width:34%}.w-35{width:35%}.w-36{width:36%}.w-37{width:37%}.w-38{width:38%}.w-39{width:39%}.w-40{width:40%}.w-41{width:41%}.w-42{width:42%}.w-43{width:43%}.w-44{width:44%}.w-45{width:45%}.w-46{width:46%}.w-47{width:47%}.w-48{width:48%}.w-49{width:49%}.w-50{width:50%}.w-51{width:51%}.w-52{width:52%}.w-53{width:53%}.w-54{width:54%}.w-55{width:55%}.w-56{width:56%}.w-57{width:57%}.w-58{width:58%}.w-59{width:59%}.w-60{width:60%}.w-61{width:61%}.w-62{width:62%}.w-63{width:63%}.w-64{width:64%}.w-65{width:65%}.w-66{width:66%}.w-67{width:67%}.w-68{width:68%}.w-69{width:69%}.w-70{width:70%}.w-71{width:71%}.w-72{width:72%}.w-73{width:73%}.w-74{width:74%}.w-75{width:75%}.w-76{width:76%}.w-77{width:77%}.w-78{width:78%}.w-79{width:79%}.w-80{width:80%}.w-81{width:81%}.w-82{width:82%}.w-83{width:83%}.w-84{width:84%}.w-85{width:85%}.w-86{width:86%}.w-87{width:87%}.w-88{width:88%}.w-89{width:89%}.w-90{width:90%}.w-91{width:91%}.w-92{width:92%}.w-93{width:93%}.w-94{width:94%}.w-95{width:95%}.w-96{width:96%}.w-97{width:97%}.w-98{width:98%}.w-99{width:99%}.w-100{width:100%}

/* 帳簿の札（月・金額・枚数・CSV と画像の台帳） */
.cb{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:14px 0;border-top:1px solid var(--line)}
.cb:first-child{border-top:0;padding-top:0}
.cb-ue{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.cb-tsuki{font-size:14px;font-weight:700;white-space:nowrap}
.cb-kin{font-size:13px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.cb-shita{display:flex;align-items:center;gap:8px;min-width:0}
.cb-mai{font-size:12px;color:var(--muted);white-space:nowrap}
.cb-shita .bou{max-width:120px;height:4px}
.cb-dl{grid-column:2;grid-row:1 / span 2;display:flex;gap:6px}
.btn-dl{min-height:44px;min-width:44px;padding:8px 10px;font-size:13px;background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.btn-dl svg.shirushi{width:18px;height:18px}

/* 相談タブ */
.soudan{display:flex;flex-direction:column;gap:16px}
.consult-intro{display:flex;gap:12px;align-items:center}
.consult-intro>div{min-width:0}
.consult-intro h3{font-size:16px}
.consult-symbol{width:24px;height:40px;flex:none;color:var(--accent);display:flex;align-items:center;justify-content:center}
.kekka{font-size:14px;color:var(--text);text-align:center}
.kekka:empty{display:none}
.kansou{display:flex;flex-direction:column;gap:12px}
.kansou-form{display:flex;flex-direction:column;gap:12px}
.kansou-form[hidden]{display:none}
.hoshi legend{font-size:13px;font-weight:600}
.hoshi-btns{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:8px}
.hoshi-1{position:relative}
.hoshi-1 input{position:absolute;opacity:0;inset:0;margin:0}
.hoshi-1 span{display:flex;align-items:center;justify-content:center;min-height:48px;border:1px solid var(--control-line);border-radius:var(--r-s);font-size:16px;font-weight:700;background:var(--surface);cursor:pointer}
.hoshi-1 input:checked+span{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.hoshi-1 input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.kansou-form textarea{resize:vertical;min-height:96px;line-height:1.65}

/* 初回のプロフィール（その間はタブを隠す） */
.profile-chuu .tab,.profile-chuu .tabu-bou{display:none !important}
.profile-chuu .wrap{padding-bottom:32px}
.profile{display:flex;flex-direction:column}
.welcome-mark{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:13px;font-weight:700;margin-bottom:8px}
.welcome-mark svg.shirushi{width:20px;height:20px}
.profile-title{font-size:24px;margin-bottom:8px}
.profile-lead{font-size:13px;color:var(--muted);margin-bottom:24px}
.profile-form{display:grid;gap:16px;min-width:0}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.choice{position:relative;cursor:pointer;min-width:0}
.choice span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;border:1px solid var(--control-line);border-radius:10px;font-size:13px;background:var(--surface);padding:8px 4px}
.choice input:checked+span{border:2px solid var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700;padding:7px 3px}
.choice input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.profile-consent{padding:12px 0 0;border-top:1px solid var(--line)}
.check-row{display:flex;align-items:flex-start;gap:10px;min-height:44px;font-size:13px;cursor:pointer;padding:4px 0}
.check-row input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent);flex:none}
.check-row:focus-within{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.nini{display:inline-block;margin-left:8px;color:var(--muted)}

/* 設定の頁 */
.settings-summary{display:flex;align-items:center;gap:12px;min-height:48px;font-size:15px}
.settings-summary>svg.shirushi:first-child{color:var(--accent)}
.settings-summary strong{flex:1}
.settings-summary small{color:var(--muted)}
.chevron{transition:transform .16s;color:var(--muted)}
svg.chevron{width:18px;height:18px}
details[open]>summary .chevron{transform:rotate(180deg)}
.settings-body{display:grid;gap:16px;padding-top:16px;border-top:1px solid var(--line);margin-top:12px}
.settei-yoyaku{padding-left:34px}
.settei-yoyaku:empty{display:none}
.s-list{display:flex;flex-direction:column}
.s-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:center;border-bottom:1px solid var(--line);padding:10px 0}
.s-row.kakushita>.s-na,.s-row.kakushita>.s-ops{opacity:.6}
.s-na{font-size:14px;font-weight:700;overflow-wrap:anywhere}
.s-na small{font-weight:600;color:var(--muted);margin-left:6px}
.s-ops{display:flex;gap:6px;flex-wrap:wrap}
.s-ops .btn{min-height:44px;min-width:44px;padding:6px 8px;font-size:13px;background:transparent;border-color:transparent;color:var(--accent)}
.s-ops .btn.btn-main{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.s-ops .btn.s-kesu{color:var(--danger)}
.s-ops-kamoku{display:grid;grid-template-columns:44px 44px repeat(3,minmax(max-content,1fr))}
.s-ops-kamoku>.btn{padding-inline:6px}
.s-row .sakujo-kakunin{margin-top:0}
.s-shiyou{margin:0;padding:12px 14px;background:var(--warning-soft);color:var(--warning);border:1px solid var(--warning);border-radius:var(--r-s);font-size:13px;font-weight:700;overflow-wrap:anywhere}
@media (max-width:369px){
  .s-ops-kamoku{grid-template-columns:repeat(6,minmax(0,1fr))}
  .s-ops-kamoku>.btn{grid-column:span 2}
  .s-ops-kamoku>.btn:nth-child(-n+2){grid-column:span 3}
}
.s-tasu{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.s-tasu-kisoku{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.s-tasu-kisoku .btn{grid-column:1 / -1}
.switch-row{display:flex;gap:12px;align-items:center;min-height:48px;cursor:pointer;margin:12px 0 4px}
.switch-text{font-size:14px;font-weight:600;flex:1}
.switch-track{height:28px;width:48px;border-radius:999px;background:var(--control-line);padding:3px;flex:none}
.switch-track::after{content:"";display:block;width:22px;height:22px;border-radius:50%;background:var(--surface);transition:transform .16s}
.switch-row input:checked~.switch-track{background:var(--accent)}
.switch-row input:checked~.switch-track::after{transform:translateX(20px);background:var(--on-accent)}
.switch-row input:focus-visible~.switch-track{outline:2px solid var(--accent);outline-offset:3px}
.settei-peeji .segment{margin:12px 0 0}
.settei-peeji .wrap{gap:8px}
.settei-peeji .page-heading{margin-bottom:8px}
.settei-peeji .card{padding:12px 16px}

/* 入口の頁（ログイン・登録・本人のリンク・入れない時） */
.login{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px 20px}
.login h2{font-size:20px;line-height:1.5;text-wrap:balance}
.login .lead{text-align:left;width:100%}
.touroku-form{display:flex;flex-direction:column;gap:16px;width:100%;text-align:left}
.touroku-form input[type=text]{width:100%;min-height:48px;border:1px solid var(--control-line);border-radius:var(--r-s);background:var(--surface);color:var(--text);padding:10px 12px;font-size:16px;min-width:0}
.req{display:inline-block;color:var(--warning);font-size:12px;font-weight:700;margin-left:6px}
.doui{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:14px;cursor:pointer}
.doui input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent)}
.chuui{font-size:13px;color:var(--muted);text-align:left;width:100%}
.chuui a{text-decoration:underline;text-underline-offset:2px}
.doui-honban span{word-break:auto-phrase}
.ayamari{margin:0;padding:12px 16px 12px 32px;background:var(--warning-soft);color:var(--warning);border-radius:var(--r-s);font-size:14px;text-align:left;width:100%}
.honnin-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100%}
.honnin-link input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--text);color:var(--bg);border-radius:8px;padding:10px 16px;font-size:14px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s;max-width:calc(100% - 32px);text-align:center;z-index:30}
.tabu-ari .toast{bottom:calc(var(--tabu) + 16px + env(safe-area-inset-bottom))}
.toast.mieru{opacity:1}

@media (max-width:350px){
  .card{padding:16px}
  .total{padding:16px 16px 0}
  .total-footer{margin-inline:-16px}
  .total-value{font-size:38px}
  .km-ue{font-size:13px;gap:6px}
  .btns{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}