:root{--bg: oklch(97.5% .008 95);--surface: oklch(99.5% .004 95);--surface-2: oklch(96% .01 95);--ink: oklch(24% .02 265);--ink-soft: oklch(45% .02 265);--ink-faint: oklch(62% .015 265);--line: oklch(89% .01 265);--accent: oklch(48% .13 265);--accent-soft: oklch(94% .04 265);--confirmed: oklch(48% .13 265);--estimated: oklch(62% .13 70);--chip-est-fg: oklch(45% .12 60);--paid: oklch(58% .13 155);--overdue: oklch(55% .2 25);--cat-residence: oklch(55% .13 265);--cat-income: oklch(55% .13 200);--cat-business: oklch(58% .13 300);--cat-other: oklch(60% .02 265);--radius: 14px;--radius-sm: 9px;--shadow-sm: 0 1px 2px oklch(24% .02 265 / .06);--shadow-md: 0 8px 24px -12px oklch(24% .02 265 / .22);--space-section: clamp(1.25rem, 1rem + 2vw, 2.25rem);--text-hero: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);--duration: .18s;--ease: cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--ink);font-family:Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,system-ui,-apple-system,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;font-feature-settings:"palt"}#app{max-width:880px;margin:0 auto;padding:clamp(1rem,.5rem + 2vw,2rem)}.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:var(--space-section);flex-wrap:wrap}.topbar__title{font-size:var(--text-hero);font-weight:800;letter-spacing:.01em;margin:0}.topbar__sub{margin:.15rem 0 0;color:var(--ink-faint);font-size:.85rem}.topbar__actions{display:flex;align-items:center;gap:.5rem}.save-status{font-size:.78rem;color:var(--ink-faint);min-width:4.5rem;text-align:right}.btn{font:inherit;font-weight:600;border:1px solid transparent;border-radius:var(--radius-sm);padding:.5rem .95rem;cursor:pointer;transition:transform var(--duration) var(--ease),background var(--duration) var(--ease),box-shadow var(--duration) var(--ease)}.btn:active{transform:translateY(1px)}.btn--primary{background:var(--accent);color:#fcfcfc;box-shadow:var(--shadow-sm)}.btn--primary:hover{background:#2c4a96}.btn--ghost{background:var(--surface);color:var(--ink-soft);border-color:var(--line)}.btn--ghost:hover{background:var(--surface-2);color:var(--ink)}.btn:focus-visible,.icon-btn:focus-visible,.field__input:focus-visible,.menu__item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.menu{position:relative}.menu__panel{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);padding:.3rem;min-width:200px;z-index:20;display:flex;flex-direction:column}.menu__panel[hidden]{display:none}.menu__item{font:inherit;text-align:left;background:none;border:none;padding:.55rem .7rem;border-radius:7px;cursor:pointer;color:var(--ink-soft)}.menu__item:hover{background:var(--surface-2);color:var(--ink)}.menu__item--danger{color:var(--overdue)}.menu__section{margin:.35rem .7rem .1rem;font-size:.68rem;font-weight:700;letter-spacing:.04em;color:var(--ink-faint)}.menu__section:first-child{margin-top:.15rem}.next{background:linear-gradient(135deg,var(--accent) 0%,oklch(40% .14 280) 100%);color:#f8f8f8;border-radius:var(--radius);padding:1.1rem 1.3rem;margin-bottom:1rem;box-shadow:var(--shadow-md)}.next--overdue{background:linear-gradient(135deg,var(--overdue) 0%,oklch(45% .18 20) 100%)}.next--done{background:var(--surface);color:var(--ink-soft);box-shadow:var(--shadow-sm);border:1px solid var(--line)}.next__eyebrow{margin:0 0 .35rem;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;opacity:.85}.next__row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.next__title{margin:0;font-size:1.15rem;font-weight:700}.next__date{margin:.15rem 0 0;font-size:.9rem;opacity:.92}.next__rel{font-weight:700;margin-left:.4rem}.next__amount{margin:0;font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1.25rem}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.85rem .95rem;box-shadow:var(--shadow-sm)}.card--total{background:var(--accent-soft);border-color:transparent}.card__label{margin:0;font-size:.75rem;color:var(--ink-faint)}.card__value{margin:.25rem 0 0;font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}.card__value--est{color:var(--estimated)}.card__note{display:block;margin-top:.2rem;font-size:.72rem;color:var(--ink-faint)}.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.row{display:grid;grid-template-columns:auto 1fr auto auto auto auto;align-items:center;gap:.75rem;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--cat-other);border-radius:var(--radius-sm);padding:.7rem .95rem;box-shadow:var(--shadow-sm);transition:box-shadow var(--duration) var(--ease),transform var(--duration) var(--ease)}.row:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.row--residence{border-left-color:var(--cat-residence)}.row--income{border-left-color:var(--cat-income)}.row--business{border-left-color:var(--cat-business)}.row--paid{opacity:.62}.row--paid .row__label{text-decoration:line-through;text-decoration-color:var(--ink-faint)}.row--overdue{border-left-color:var(--overdue);background:color-mix(in oklch,var(--overdue) 11%,var(--surface))}.row__check input{width:1.15rem;height:1.15rem;accent-color:var(--paid);cursor:pointer}.row__label{margin:0;font-weight:700;font-size:.98rem}.row__meta{margin:.1rem 0 0;display:flex;gap:.5rem;flex-wrap:wrap;font-size:.76rem;color:var(--ink-faint)}.row__note{color:var(--ink-faint)}.row__due{text-align:right;font-size:.85rem;line-height:1.3;white-space:nowrap}.row__date{display:block;font-weight:600;font-variant-numeric:tabular-nums}.row__rel{font-size:.72rem;color:var(--ink-faint)}.row--overdue .row__rel{color:var(--overdue);font-weight:700}.row__amount{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;min-width:6rem}.chip{font-size:.7rem;font-weight:700;padding:.15rem .5rem;border-radius:999px;white-space:nowrap}.chip--confirmed{background:var(--accent-soft);color:var(--confirmed)}.chip--estimated{background:color-mix(in oklch,var(--estimated) 22%,var(--surface));color:var(--chip-est-fg)}.row__actions{display:flex;gap:.25rem}.icon-btn{font:inherit;font-size:.76rem;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:7px;padding:.3rem .5rem;cursor:pointer;transition:background var(--duration) var(--ease)}.icon-btn:hover{background:var(--surface-2);color:var(--ink)}.icon-btn--danger:hover{background:color-mix(in oklch,var(--overdue) 12%,var(--surface));color:var(--overdue);border-color:var(--overdue)}.empty{text-align:center;padding:3rem 1rem;background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius)}.empty__title{margin:0;font-weight:700;font-size:1.1rem}.empty__hint{margin:.4rem 0 1rem;color:var(--ink-faint);font-size:.9rem}.loading{text-align:center;padding:4rem 1rem;color:var(--ink-faint)}.gate{min-height:80vh;display:grid;place-items:center}.gate__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:2rem;width:min(380px,90vw);text-align:center}.gate__title{margin:0 0 .4rem;font-size:1.5rem}.gate__lead{margin:0 0 1.25rem;color:var(--ink-faint);font-size:.9rem}.gate__form{display:flex;flex-direction:column;gap:.6rem}.gate__passkey{width:100%}.gate__or{margin:.9rem 0 .6rem;font-size:.78rem;color:var(--ink-faint);position:relative}.gate__or:before,.gate__or:after{content:"";position:absolute;top:50%;width:28%;height:1px;background:var(--line)}.gate__or:before{left:0}.gate__or:after{right:0}.footer{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink-faint);text-align:center}.modal-overlay{position:fixed;inset:0;background:#12161f73;backdrop-filter:blur(2px);display:grid;place-items:center;padding:1rem;z-index:50;animation:fade var(--duration) var(--ease)}@keyframes fade{0%{opacity:0}}.modal{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:1.5rem;width:min(460px,95vw);max-height:92vh;overflow:auto}.modal__title{margin:0 0 1rem;font-size:1.2rem}.form{display:flex;flex-direction:column;gap:.85rem}.field{display:flex;flex-direction:column;gap:.3rem}.field__label{font-size:.8rem;font-weight:600;color:var(--ink-soft)}.field__label em{color:var(--overdue);font-style:normal}.field__input{font:inherit;padding:.5rem .65rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);color:var(--ink)}textarea.field__input{resize:vertical}.field-row{display:grid;grid-template-columns:1fr auto;gap:.85rem;align-items:end}.field--check{flex-direction:row;align-items:center;gap:.4rem;font-size:.85rem;color:var(--ink-soft);padding-bottom:.55rem;white-space:nowrap}.form__error{color:var(--overdue);font-size:.82rem;margin:0}.form__actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.4rem}@media(max-width:720px){.summary{grid-template-columns:repeat(2,1fr)}.row{grid-template-columns:auto 1fr auto;grid-template-areas:"check main amount" "check due status" "check actions actions";row-gap:.4rem}.row__check{grid-area:check}.row__main{grid-area:main}.row__amount{grid-area:amount}.row__due{grid-area:due;text-align:left}.row__status{grid-area:status;justify-self:end}.row__actions{grid-area:actions;justify-content:flex-end}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1rem 1rem .75rem;margin-bottom:1.25rem}.panel__title{margin:0 0 .5rem;font-size:.95rem;font-weight:700;color:var(--ink-soft)}.panel__range{font-size:.8rem;font-weight:600;color:var(--ink-faint);margin-left:.35rem}.timeline__scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.timeline svg{display:block}.tl-axis{stroke:var(--line);stroke-width:1}.tl-amount{fill:var(--ink);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}.tl-date{fill:var(--ink-faint);font-size:11px;font-variant-numeric:tabular-nums}.tl-paid{fill:var(--paid);font-size:14px;font-weight:800}.tl-next{fill:var(--accent);font-size:10px;font-weight:800}.timeline__legend{display:flex;flex-wrap:wrap;gap:.75rem 1rem;padding:.6rem .25rem .2rem;font-size:.72rem;color:var(--ink-faint)}.legend__item{display:inline-flex;align-items:center;gap:.35rem}.legend__dot{width:11px;height:11px;border-radius:3px}.legend__line{width:15px;height:0;border-top:2px dashed var(--estimated)}.legend__hollow{width:11px;height:11px;border:1.5px dashed var(--ink-faint);border-radius:3px}@media(prefers-color-scheme:dark){:root{--bg: oklch(21% .012 265);--surface: oklch(25% .012 265);--surface-2: oklch(29% .014 265);--ink: oklch(93% .008 265);--ink-soft: oklch(76% .012 265);--ink-faint: oklch(62% .014 265);--line: oklch(36% .012 265);--accent: oklch(72% .12 265);--accent-soft: oklch(34% .06 265);--confirmed: oklch(80% .1 265);--estimated: oklch(74% .13 75);--chip-est-fg: oklch(86% .11 78);--paid: oklch(72% .13 155);--overdue: oklch(70% .18 25);--cat-residence: oklch(68% .13 265);--cat-income: oklch(70% .12 200);--cat-business: oklch(72% .12 300);--cat-other: oklch(66% .02 265);--shadow-sm: 0 1px 2px oklch(0% 0 0 / .3);--shadow-md: 0 10px 28px -14px oklch(0% 0 0 / .6)}}