/* 한 화면에서 읽는 순서: 기간과 총액 → 주요 분류 → 사용 내역. */
#ledger-sub { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; gap:4px; padding:5px; background:var(--mr-line); border:0; border-radius:16px; }
#ledger-sub button { padding:10px 12px; min-height:42px; border:0; border-radius:12px; font-size:15px; font-weight:600; color:var(--mr-muted); }
#ledger-sub button[aria-pressed="true"] { background:var(--mr-card); color:var(--mr-ink); box-shadow:0 2px 5px #182a4808; }
#ledger-sub button::after { display:none; }
#view-spend { max-width:820px; margin-inline:auto; }
#view-spend .spend-unclassified { margin:0 0 10px; padding:9px 12px; border:1px solid var(--mr-line); border-radius:12px; background:var(--mr-card); color:var(--mr-ink); font-size:12px; font-weight:600; line-height:1.4; }
#view-spend .spend-unclassified[hidden] { display:none; }
#view-spend #meta-row, #view-spend #search-btn, #view-spend #sf-summary, #view-spend .pb-sums { display:none!important; }
.mr-spend-overview { display:block; margin-bottom:8px; }
.mr-spend-summary { position:relative; padding:18px 22px 19px; border-radius:24px; background:#1b2d4c; color:#fff; }
#view-spend .mr-spend-summary #period-bar { display:grid; grid-template-columns:36px minmax(0,1fr) 36px; align-items:center; gap:12px; padding:0; margin:0 0 20px; width:100%; border:0; border-radius:0; min-height:0; box-shadow:none; background:transparent; color:inherit; }
#view-spend .mr-spend-summary .pb-range { display:flex; flex-direction:column-reverse; gap:3px; text-align:center; }
#view-spend .mr-spend-summary #cyc-title { color:#fff; font-size:16px; font-weight:650; line-height:1.4; }
#view-spend .mr-spend-summary #cyc-range { color:#bdcce3; font-size:11px; line-height:1.4; font-weight:400; letter-spacing:.01em; }
#view-spend .mr-spend-summary #period-bar > button { width:36px; height:36px; min-height:36px; padding:0; border:1px solid #ffffff18; border-radius:12px; background:#ffffff0b; color:#dce6f7; font-size:23px; }
#view-spend .mr-spend-summary #period-bar > #cyc-latest { grid-column:2; grid-row:2; justify-self:center; width:auto; min-width:0; height:22px; min-height:22px; padding:0 8px; border:0; border-radius:999px; background:#ffffff16; color:#dce6f7; font:inherit; font-size:10px; font-weight:600; line-height:1; }
.mr-spend-summary-main { display:block; }
#view-spend .mr-spend-summary h2 { margin:0 0 4px; font-size:13px; line-height:1.5; font-weight:500; color:#cad6e8; }
.mr-spend-total { display:block; font-size:38px; font-weight:720; line-height:1.28; letter-spacing:-1.3px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.mr-spend-summary-meta { display:block; margin-top:10px; color:#becce0; font-size:11px; line-height:1.5; }
.mr-spend-row-notes { margin-top:4px; color:#becce0; font-size:11px; }
.mr-spend-insight { display:grid; grid-template-columns:36px minmax(0,1fr) auto 10px; align-items:center; gap:10px; width:100%; padding:15px 16px; margin-top:10px; border:1px solid var(--mr-line); border-radius:18px; background:var(--mr-card); color:var(--mr-ink); text-align:left; cursor:pointer; }
.mr-spend-insight-icon { display:grid; place-items:center; height:36px; border-radius:12px; background:var(--mr-soft); color:var(--mr-accent); font-size:24px; }
.mr-spend-insight-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.mr-spend-insight-copy small { color:var(--mr-muted); font-size:11px; }
.mr-spend-insight-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:650; }
.mr-spend-insight-value { font-size:15px; font-weight:650; white-space:nowrap; font-variant-numeric:tabular-nums; }
.mr-spend-chevron { color:var(--mr-muted); font-size:20px; font-weight:400; }
.mr-spend-manage-slot { display:flex; justify-content:flex-end; min-height:32px; }
#view-spend .mr-spend-manage-slot #go-make { background:transparent; color:var(--mr-muted); padding:6px 2px; min-height:32px; border:0; font-size:12px; }
.mr-spend-scope { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 3px 0; color:var(--mr-accent); font-size:12px; line-height:1.5; }
.mr-spend-scope > span { min-width:0; overflow-wrap:anywhere; }
.mr-spend-reset,.mr-spend-cat-clear { flex-shrink:0; padding:7px 0; min-height:32px; font-size:12px; border:0; background:transparent; color:var(--mr-accent); cursor:pointer; }
.mr-spend-cat-clear { display:block; }
#view-spend .ctrl-row { margin:16px 0 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
#view-spend .ctrl-row #go-make { margin-left:auto; min-height:38px; padding:6px 1px; border:0; background:transparent; color:var(--mr-muted); font-size:12px; flex-shrink:0; }
.mr-spend-compact .mr-spend-summary { padding-block:16px; }
#view-spend .mr-spend-compact .mr-spend-summary #period-bar { margin-bottom:13px; }
.mr-spend-compact .mr-spend-summary-main { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mr-spend-compact .mr-spend-total { font-size:26px; letter-spacing:-.6px; }
.mr-spend-compact .mr-spend-summary-meta { margin-top:5px; }
#view-spend #spend-sub { display:flex; gap:22px; padding:0 3px; border:0; background:transparent; border-radius:0; }
#view-spend #spend-sub button { border:0; border-radius:0; padding:7px 0 10px; min-height:38px; font-size:14px; font-weight:550; color:var(--mr-muted); background:transparent; box-shadow:none; position:relative; }
#view-spend #spend-sub button[aria-pressed="true"] { color:var(--mr-ink); font-weight:750; box-shadow:inset 0 -2px var(--mr-ink); }
#view-spend #spend-sub button[data-sub="chart"] { order:1; }
#view-spend #spend-sub button[data-sub="cal"] { order:2; }
#view-spend #search-row { display:flex!important; align-items:center; gap:8px; margin:0 0 16px; }
#view-spend #spend-q { flex:1; min-width:0; width:auto; min-height:44px; padding:11px 14px; border:1px solid var(--mr-line); border-radius:13px; background:var(--mr-card); color:var(--mr-ink); font-size:14px; }
#view-spend #spend-q::placeholder { color:var(--mr-muted); }
#view-spend #sf-open { flex-shrink:0; min-height:44px; padding:9px 12px; margin:0; border:1px solid var(--mr-line); border-radius:13px; background:var(--mr-card); color:var(--mr-ink); font-size:13px; }
#view-spend #sf-open.on { color:var(--mr-accent); border-color:var(--mr-accent); }
#view-spend .ctrl-spacer { display:none; }
#view-spend #pane-chart > :not(#mr-spend-analysis):not(.mr-spend-history) { display:none!important; }
.mr-spend-analysis-card { margin-bottom:14px; padding:20px; border:1px solid var(--mr-line); border-radius:20px; background:var(--mr-card); }
.mr-spend-analysis-card header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#view-spend .mr-spend-analysis-card h2 { margin:0; font-size:18px; font-weight:700; letter-spacing:-.4px; }
.mr-spend-analysis-card header > span { color:var(--mr-muted); font-size:12px; }
.mr-spend-analysis-card > p { color:var(--mr-muted); font-size:12px; line-height:1.6; margin:6px 0 16px; }
.mr-spend-analysis-row { display:grid; grid-template-columns:20px minmax(0,1fr) auto 10px; gap:7px; align-items:center; width:100%; padding:11px 0; text-align:left; border:0; background:transparent; color:var(--mr-ink); cursor:pointer; }
.mr-spend-analysis-name { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mr-spend-rank { font-size:12px; color:var(--mr-muted); }
.mr-spend-analysis-row > strong { font-size:14px; font-variant-numeric:tabular-nums; }
.mr-spend-analysis-track { grid-column:2 / 4; height:5px; border-radius:8px; overflow:hidden; background:var(--mr-line); }
.mr-spend-analysis-track > i { display:block; height:100%; background:var(--mr-accent); border-radius:inherit; }
.mr-spend-refund-note { grid-column:2 / 4; font-size:11px; color:var(--mr-muted); }
.mr-spend-analysis-empty { padding:22px 5px; font-size:14px; color:var(--mr-muted); text-align:center; }
.mr-spend-analysis-card details > summary { padding:14px 0 0; font-size:13px; color:var(--mr-accent); cursor:pointer; }
.mr-spend-large-row { display:grid; grid-template-columns:minmax(0,1fr) auto 10px; width:100%; gap:10px; align-items:center; text-align:left; padding:17px 0; border:0; border-bottom:1px solid var(--mr-line); background:transparent; color:var(--mr-ink); cursor:pointer; }
.mr-spend-large-row:last-child { border-bottom:0; padding-bottom:0; }
.mr-spend-large-row > span:first-child { display:flex; flex-direction:column; gap:5px; min-width:0; }
.mr-spend-large-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:600; }
.mr-spend-large-row small { font-size:12px; color:var(--mr-muted); }
.mr-spend-large-row > b { font-size:14px; font-variant-numeric:tabular-nums; }
.mr-spend-history { padding:18px 20px; border:1px solid var(--mr-line); border-radius:18px; background:var(--mr-card); }
.mr-spend-history > summary { display:flex; justify-content:space-between; font-size:14px; font-weight:600; list-style:none; cursor:pointer; }
.mr-spend-history > .card { margin:20px 0 0; padding:0; border:0; box-shadow:none; }
.mr-spend-insight:focus-visible,.mr-spend-analysis-row:focus-visible,.mr-spend-large-row:focus-visible { outline:2px solid var(--mr-accent); outline-offset:3px; }
@media(min-width:760px) { .mr-spend-total { font-size:44px; } .mr-spend-summary { padding:24px 30px; } #mr-spend-analysis { display:grid; grid-template-columns:1.2fr 1fr; gap:16px; align-items:start; } }
@media(max-width:360px) { .mr-spend-summary { padding:16px 19px; } .mr-spend-total { font-size:34px; } .mr-spend-insight { padding:13px; gap:8px; } .mr-spend-insight-value { font-size:14px; } }

#view-spend #pane-list .card.capped { background: var(--mr-card, #fff); border: 0; border-radius: 16px; box-shadow: none; }
#view-spend #day-groups .day-head { padding: 11px 14px 5px; background: var(--mr-card, #fff); border: 0; }
#view-spend #day-groups .day-head:not(:first-child) { border-top: 5px solid var(--mr-bg, #f4f6fa); margin-top: 3px; }
#view-spend .day-head .d, #view-spend .day-head .s { font-size: 10px; line-height: 1.5; color: var(--mr-muted, #7b889b); font-weight: 500; }
#view-spend .item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: 'icon title amount' 'icon meta meta'; column-gap: 10px; row-gap: 3px; min-height: 64px; padding: 11px 14px; border-color: var(--mr-line, #e8edf4); }
#view-spend .item:has(.m) { grid-template-areas: 'icon title amount' 'icon meta meta' 'icon memo memo'; }
#view-spend .item .ic, #view-spend .item:has(.m) .ic { grid-area: icon; width: 32px; height: 32px; border-radius: 11px; font-size: 18px; background: var(--mr-bg, #f4f6fa); align-self: start; margin-top: 3px; }
#view-spend .item .t { grid-area: title; font-size: 13px; line-height: 1.5; font-weight: 650; letter-spacing: -.3px; }
#view-spend .item .a { grid-area: amount; font-size: 12px; line-height: 1.5; font-weight: 650; letter-spacing: -.3px; }
#view-spend .item .c { grid-area: meta; max-width: none; font-size: 12px; line-height: 1.5; color: var(--mr-muted, #7b889b); }
#view-spend .item .m { grid-area: memo; font-size: 12px; line-height: 1.5; }
#view-spend .item .mr-spend-refund { color: var(--mr-success, #138871); }
#view-spend .item .skip-k { margin-left: 5px; font-size: 9px; font-weight: 500; }
#view-spend .item .planned-k { margin-left: 5px; padding: 1px 5px; border-radius: 5px; background: var(--mr-bg, #f4f6fa); color: var(--mr-muted, #7b889b); font-size: 9px; font-weight: 550; }
#view-spend .item.planned { cursor: default; opacity: .76; }
#view-spend .planned-dot { display:inline-block; width:4px; height:4px; margin-left:3px; vertical-align:middle; border-radius:50%; background:var(--series-1, #3974ee); }
#view-spend #cal-tiles .tile:first-child { display: none; }

#view-spend .cal-grid, #view-spend .cal-grid-head { grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
#view-spend .cal-cell { box-sizing:border-box; width:100%; max-width:100%; min-width:0; aspect-ratio:auto; min-height:46px; height:48px; padding:5px 3px; border-radius:8px; gap:3px; }
#view-spend .cal-cell[aria-pressed=true] { box-shadow:inset 0 0 0 2px var(--series-1); }
#view-spend .cal-cell:hover { transform:none; }
#view-spend .mr-spend-compact .mr-spend-summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 10px; align-items:center; padding:9px 12px; border-radius:14px; }
#view-spend .mr-spend-compact .mr-spend-summary #period-bar { grid-template-columns:20px minmax(0,1fr) 20px; gap:3px; margin:0; }
#view-spend .mr-spend-summary #period-bar > button { width:20px; height:28px; min-height:28px; font-size:20px; border:0; border-radius:6px; }
#view-spend .mr-spend-summary #cyc-title { font-size:12px; line-height:1.4; }
#view-spend .mr-spend-summary #cyc-range { font-size:9px; letter-spacing:-.3px; white-space:nowrap; }
#view-spend .mr-spend-summary .pb-range { gap:2px; }
#view-spend .mr-spend-compact .mr-spend-summary-main { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
#view-spend .mr-spend-summary h2 { margin:0; font-size:10px; line-height:1.4; }
#view-spend .mr-spend-compact .mr-spend-total { font-size:19px; line-height:1.3; letter-spacing:-.5px; white-space:nowrap; }
#view-spend .mr-spend-summary-meta { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#view-spend .mr-spend-row-notes { grid-column:1/-1; font-size:10px; }
#view-spend #meta-row { display:flex!important; justify-content:flex-end; margin-bottom:6px; }
#view-spend #meta-line { display:none; }

body button.mori-add { position:relative; display:inline-flex; justify-content:center; align-items:center; flex:0 0 32px; width:32px; min-width:32px; height:32px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--text-primary); font-family:inherit; font-size:26px; font-weight:400; line-height:1; }
button.mori-add::after { content:''; position:absolute; inset:-6px; }
button.mori-add:focus-visible { outline:2px solid var(--accent); }
#meta-row { gap:8px; flex-wrap:wrap; }
#meta-row #meta-line { flex:1 1 120px; }
#meta-row button { font:inherit; font-size:11px; padding:5px 3px; white-space:nowrap; }
dialog.ml-dialog { box-sizing:border-box; width:min(440px, calc(100% - 24px)); max-height:calc(100dvh - 32px); padding:18px; border:1px solid var(--grid); border-radius:18px; background:var(--surface-1); color:var(--text-primary); overflow-y:auto; font-family:inherit; font-size:13px; }
.ml-dialog header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.ml-dialog h3 { font:inherit; font-weight:650; margin:0; }
.ml-dialog button,.ml-dialog input,.ml-dialog select { font-family:inherit; font-size:13px; color:inherit; box-sizing:border-box; }
dialog.ml-dialog .ml-field input:not([type=checkbox]),dialog.ml-dialog .ml-field select { font-size:13px; }
.ml-dialog header button { border:0; background:transparent; width:32px; height:32px; font-size:24px; padding:0; }
.ml-field { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:8px; min-height:41px; margin:0; font-size:13px; }
.ml-date-entry { display:flex; gap:5px; min-width:0; }
.ml-dialog .ml-field .ml-date-entry input { flex:1; width:auto; min-width:0; }
.ml-dialog .ml-field .ml-date-entry button { flex:none; width:auto; min-width:48px; text-align:center; }
.ml-dialog .ml-date-entry button::after { content:none; }
.ml-date-picker { padding:8px 0 12px; }
.ml-date-picker[hidden] { display:none; }
.ml-date-picker .income-date-nav { display:flex; gap:4px; align-items:center; }
.ml-date-picker .income-date-nav input[type=number] { width:68px; min-width:0; padding:5px; }
.ml-date-picker .income-date-nav select { width:62px; min-width:0; padding:5px; }
.ml-date-picker .income-date-nav button { flex:none; min-width:28px; min-height:32px; padding:5px; }
.ml-date-picker .income-date-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; margin-top:8px; text-align:center; }
.ml-date-picker .income-date-grid span { padding:5px; color:var(--muted); }
.ml-date-picker .income-date-grid button { min-width:0; min-height:36px; padding:4px; border:0; border-radius:6px; background:var(--fill); box-shadow:none; }
.ml-field > span { color:var(--text-secondary); }
.ml-field input:not([type=checkbox]),.ml-field select,.ml-field button { width:100%; min-width:0; height:34px; margin:0; border:0; border-radius:6px; padding:6px 8px; background:var(--fill); text-align:left; }
.ml-field button { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ml-field button::after { content:' ›'; color:var(--muted); }
.ml-types { display:flex; gap:6px; }
.ml-field .ml-types button { width:auto; flex:1; padding:6px 0; text-align:center; border:1px solid transparent; }
.ml-field .ml-types button::after { content:none; }
.ml-amount-row { display:flex; align-items:center; margin:6px 0 14px; gap:4px; }
.ml-amount-row input { width:180px; max-width:80%; border:0; padding:4px 0; background:transparent; font-size:24px; font-weight:650; }
#ml-amount { font-size:24px; }
.ml-amount-row span { font-size:20px; }
.ml-dialog .ml-switch { appearance:none; width:36px; height:22px; border:0; border-radius:12px; margin:0 0 0 auto; background:var(--baseline); position:relative; cursor:pointer; }
.ml-switch::after { content:''; position:absolute; width:16px; height:16px; border-radius:50%; top:3px; left:3px; background:white; transition:transform .15s; }
.ml-dialog .ml-switch:checked { background:var(--series-3); }
.ml-switch:checked::after { transform:translateX(14px); }
.ml-switch:disabled { opacity:.55; }
.ml-dialog .ml-save { width:100%; margin-top:12px; min-height:38px; background:var(--accent); color:white; border:0; border-radius:9px; }
.ml-dialog .msg:empty { display:none; }
.ml-categories { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.ml-categories button { display:flex; flex-direction:column; justify-content:center; gap:5px; min-height:65px; padding:8px 3px; border:1px solid transparent; border-radius:12px; background:var(--fill); }
.ml-categories button span { font-size:20px; }
.ml-dialog button[aria-pressed=true] { border-color:var(--accent); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.ml-subcategories,.ml-actions { display:flex; flex-wrap:wrap; gap:7px; padding-top:10px; }
/* 카테고리·소분류 추가 (2026-09-26) */
.ml-dialog .ml-cat-add { border:1px dashed var(--grid); background:transparent; color:var(--text-secondary); }
.ml-cat-form { display:grid; gap:8px; margin-top:12px; padding:12px; border-radius:12px; background:var(--fill); }
.ml-cat-form[hidden] { display:none; }
.ml-cat-form b { font-size:13px; }
.ml-cat-form input { width:100%; min-height:38px; padding:0 10px; border:1px solid var(--grid); border-radius:9px; background:var(--surface-1); font:inherit; font-size:14px; }
.ml-cat-icons { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:4px; }
.ml-cat-icons button { min-height:34px; padding:0; border:1px solid transparent; border-radius:8px; background:var(--surface-1); font-size:17px; }
.ml-cat-form .msg:empty { display:none; }
.ml-cat-actions { display:flex; justify-content:flex-end; gap:6px; }
.ml-cat-actions button { min-height:34px; padding:0 14px; border:1px solid var(--grid); border-radius:9px; background:var(--surface-1); font:inherit; font-size:13px; font-weight:650; }
.ml-cat-actions button.primary { border-color:var(--accent); background:var(--accent); color:#fff; }
.ml-subcategories button,.ml-actions button,#ml-duplicates button { padding:7px 9px; border:1px solid transparent; background:var(--fill); border-radius:7px; font:inherit; font-size:12px; }
.ml-method-item { width:100%; text-align:left; min-height:42px; padding:10px; border:1px solid transparent; border-radius:8px; background:transparent; }
.ml-manager-tools { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:12px 0; }
.ml-manager-tools input { width:auto; max-width:75%; }
.ml-recurring-item { padding:12px 0; }
.ml-recurring-head { display:flex; justify-content:space-between; gap:10px; }
.ml-recurring-head strong { min-width:0; overflow-wrap:anywhere; }
.ml-recurring-head b { white-space:nowrap; }
.ml-recurring-meta { margin-top:5px; font-size:12px; color:var(--text-secondary); }

#view-spend .ctrl-row { display:grid; grid-template-columns:minmax(0,1fr) 26px auto; gap:6px; align-items:center; margin:10px 0; }
#view-spend #spend-sub { gap:12px; align-items:center; padding:0; height:32px; }
#view-spend #spend-sub button { padding:0; min-height:32px; height:32px; line-height:32px; font-size:12px; white-space:nowrap; }
#view-spend #ledger-add { height:32px; min-height:32px; width:26px; min-width:26px; font-size:24px; margin:0; }
#view-spend .ctrl-row #meta-row { display:flex!important; flex-wrap:nowrap; gap:7px; margin:0; height:32px; align-items:center; }
#view-spend .ctrl-row #meta-row button { font-family:inherit; font-size:10px; min-height:32px; height:32px; line-height:32px; padding:0; margin:0; white-space:nowrap; }
#view-spend #cal-tiles { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; border-radius:10px; background:var(--mr-card); font-size:12px; }
#view-spend #cal-tiles > span { white-space:nowrap; }
#view-spend #cal-tiles b { margin-left:4px; font-size:12px; }
#view-spend #cal-tiles > span:last-child { color:var(--mr-muted); font-size:11px; }
#view-spend #cal-tiles + div { height:10px!important; }
#view-spend #pane-chart > :not(#mr-spend-analysis) { display:none!important; }
#view-spend #mr-spend-analysis { display:flex; flex-direction:column; gap:12px; min-width:0; }
.st-card { padding:13px 12px; border:1px solid var(--mr-line); background:var(--mr-card); border-radius:15px; min-width:0; }
.st-card header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
#view-spend .st-card h2 { font-family:inherit; font-size:13px; font-weight:650; margin:0; }
.st-card header > span,.st-chart-meta { font-size:10px; color:var(--mr-muted); }
.st-range { display:flex; gap:5px; }
.st-range button,.st-category-picker button { font-family:inherit; font-size:11px; min-height:28px; padding:5px 8px; border:1px solid transparent; border-radius:7px; background:var(--mr-bg); color:var(--mr-muted); }
.st-range button[aria-pressed=true] { color:var(--mr-accent); background:var(--mr-soft); }
.st-chart { width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
.st-chart svg { display:block; width:100%; height:auto; max-height:190px; }
.st-chart [role=button] { cursor:pointer; }
.st-chart [role=button]:focus { outline:1px solid var(--accent); }
.st-grid { stroke:var(--mr-line); stroke-width:1; }
.st-axis { font-family:inherit; font-size:10px; fill:var(--mr-muted); }
.st-chart-meta { display:flex; justify-content:space-between; margin-top:5px; }
.st-composition { display:grid; grid-template-columns:105px minmax(0,1fr); align-items:center; gap:8px; }
.st-donut svg { display:block; width:100%; }
.st-donut-label { fill:var(--text-secondary); font-family:inherit; font-size:12px; }
.st-no-donut { text-align:center; color:var(--mr-muted); }
#view-spend .st-category-row { display:grid; grid-template-columns:6px minmax(0,1fr) auto 28px; gap:5px; width:100%; min-height:31px; padding:5px 0; margin:0; border:0; background:none; font-family:inherit; font-size:11px; }
.st-category-row > i { width:6px; height:6px; border-radius:50%; }
#view-spend .st-category-row .mr-spend-analysis-name { font-size:11px; white-space:normal; overflow-wrap:anywhere; }
#view-spend .st-category-row strong { font-size:11px; white-space:nowrap; }
.st-category-row small { font-size:10px; color:var(--mr-muted); text-align:right; }
.st-category-picker { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:9px; }
.st-category-picker button { --st-color:var(--accent); }
.st-category-picker button[aria-pressed=true] { color:var(--st-color); border-color:var(--st-color); background:var(--mr-card); }
.st-readout { font-size:11px; margin-top:5px; min-height:16px; color:var(--mr-muted); }
@media(max-width:360px) { #view-spend #spend-sub { gap:7px; } #view-spend #spend-sub button { font-size:11px; } #view-spend .ctrl-row { gap:4px; } #view-spend .ctrl-row #meta-row { gap:5px; } .st-composition { grid-template-columns:82px minmax(0,1fr); gap:6px; } }
#view-spend .mr-spend-compact .mr-spend-total{font-size:14px;line-height:20px;letter-spacing:0;font-weight:650}#view-spend .mr-spend-summary h2{font-size:11px;font-weight:500;line-height:16px}#view-spend .mr-spend-compact .mr-spend-summary{padding:8px 11px;gap:5px 10px}#view-spend .mr-spend-comparison{grid-column:1/-1;font-size:11px;line-height:16px;font-weight:500;color:inherit}.mr-spend-comparison small{display:block;font-size:9px;font-weight:400;opacity:.75;line-height:14px}#view-spend .ctrl-row{grid-template-columns:minmax(0,1fr) 24px auto;gap:5px}#view-spend #spend-sub{gap:10px}#view-spend #spend-sub button,#view-spend .ctrl-row #meta-row button{font-family:inherit;font-size:11px;font-weight:500;line-height:1;display:inline-flex;align-items:center;justify-content:center;height:32px;min-height:32px;padding:0;margin:0;letter-spacing:-.2px}#view-spend #spend-sub button[aria-pressed=true]{font-weight:650}#view-spend #ledger-add{font-family:inherit;font-size:20px;font-weight:400;line-height:1;display:inline-flex;align-items:center;justify-content:center;min-width:24px;width:24px;height:32px;min-height:32px;margin:0;padding:0}#view-spend .ctrl-row #meta-row{gap:8px}@media(max-width:360px){#view-spend #spend-sub{gap:6px}#view-spend .ctrl-row #meta-row{gap:6px}#view-spend #spend-sub button,#view-spend .ctrl-row #meta-row button{font-size:10px}}
#view-spend .mr-spend-compact .mr-spend-summary{grid-template-columns:minmax(0,1fr);padding:9px 12px;gap:5px;border-radius:12px}#view-spend .mr-spend-period-slot{width:100%}#view-spend .mr-spend-compact .mr-spend-summary #period-bar{grid-template-columns:24px minmax(0,1fr) 24px}#view-spend .mr-spend-summary .pb-range{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}#view-spend .mr-spend-compact .mr-spend-summary-main{flex-direction:row;justify-content:flex-start;align-items:baseline;gap:10px}#view-spend .mr-spend-summary h2{font-size:11px;font-weight:500}#view-spend .mr-spend-compact .mr-spend-total{font-size:14px;line-height:20px}#view-spend .mr-spend-comparison{min-height:30px;line-height:16px}#view-spend .spend-calendar-card{padding:12px}#view-spend .spend-calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}#view-spend .spend-calendar-heading h2{font-size:12px;line-height:18px;margin:0;font-weight:650}#view-spend #cal-tiles{display:block;margin:0;padding:0;background:none;box-shadow:none;border:0;border-radius:0;min-height:0;font-size:10px;line-height:18px;white-space:nowrap}#view-spend #cal-tiles b{font:inherit;font-weight:600}#view-spend #cal-sub{height:auto!important;margin:3px 0 8px;font-size:9px;line-height:14px}#view-spend .cal-grid-head{font-size:9px;margin:0 0 5px}#view-spend .cal-cell .d,#view-spend .cal-cell .a{font-family:inherit;font-size:9px;line-height:13px;letter-spacing:0}#view-spend .cal-cell .a{font-weight:600}#view-spend .cal-cell{height:40px;min-height:40px;padding:4px;border-radius:6px;gap:2px}#view-spend .cal-grid,#view-spend .cal-grid-head{gap:4px}#view-spend .cal-legend{margin-top:8px;gap:4px}#view-spend .cal-legend .sub{font-size:9px}#view-spend .cal-legend i{width:14px;height:7px}
#view-spend .mr-spend-summary #cyc-title{order:0}#view-spend .mr-spend-summary #cyc-range{order:1}

/* 지출 화면: 월 요약은 읽히는 크기로, 조작은 버튼처럼, 내역은 한 장부처럼 잇는다. */
#view-spend .mr-spend-compact .mr-spend-summary { padding:14px 16px; gap:10px; border-radius:18px; }
#view-spend .mr-spend-compact .mr-spend-summary #period-bar { grid-template-columns:32px minmax(0,1fr) 32px; gap:6px; margin:0; }
#view-spend .mr-spend-summary #period-bar > button { width:32px; height:32px; min-height:32px; border:1px solid #ffffff26; border-radius:9px; background:#ffffff12; font-size:22px; }
#view-spend .mr-spend-summary .pb-range { flex-direction:column; gap:2px; }
#view-spend .mr-spend-summary #cyc-title { font-size:15px; line-height:1.25; font-weight:700; }
#view-spend .mr-spend-summary #cyc-range { font-size:11px; line-height:1.3; letter-spacing:0; }
#view-spend .mr-spend-compact .mr-spend-summary-main { justify-content:space-between; align-items:baseline; gap:10px; }
#view-spend .mr-spend-summary h2 { font-size:12px; line-height:1.4; font-weight:550; color:#d5e1f1; }
#view-spend .mr-spend-compact .mr-spend-total { font-size:26px; line-height:1.2; font-weight:720; letter-spacing:-.6px; }
#view-spend .mr-spend-comparison { min-height:0; font-size:13px; line-height:1.45; font-weight:650; color:#fff; }
#view-spend .mr-spend-comparison small { margin-top:2px; font-size:12px; line-height:1.45; font-weight:500; color:#d5e1f1; opacity:1; }

#view-spend .ctrl-row { display:grid; grid-template-columns:36px minmax(0,1fr); gap:9px 10px; align-items:center; margin:14px 0 12px; }
#view-spend #spend-sub { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; width:100%; padding:4px; border-radius:13px; background:var(--mr-line); }
#view-spend #spend-sub button { display:flex; width:100%; height:38px; min-height:38px; padding:0 4px; border-radius:9px; background:transparent; color:var(--mr-ink); font-size:13px; line-height:1.2; font-weight:600; letter-spacing:0; box-shadow:none; }
#view-spend #spend-sub button[aria-pressed=true] { background:var(--mr-card); color:var(--mr-accent); font-weight:750; box-shadow:0 1px 4px #182a4818; }
#view-spend #ledger-add { grid-column:1; grid-row:2; width:36px; min-width:36px; height:36px; min-height:36px; padding:0; border-radius:10px; background:var(--mr-accent); color:#fff; font-size:23px; font-weight:500; }
#view-spend .ctrl-row #meta-row { grid-column:2; grid-row:2; display:flex!important; align-items:center; justify-content:flex-end; gap:6px; min-width:0; margin:0; flex-wrap:nowrap; }
#view-spend .ctrl-row #meta-row button { display:inline-flex; align-items:center; justify-content:center; flex:none; height:36px; min-height:36px; padding:0 9px; border:1px solid var(--mr-line); border-radius:9px; background:var(--mr-card); color:var(--mr-ink); font-size:13px; line-height:1.2; font-weight:650; letter-spacing:0; }
#view-spend .ctrl-row #meta-row #go-make { margin:0; padding:0 9px; border:1px solid var(--mr-line); background:var(--mr-card); color:var(--mr-ink); font-size:13px; }

#view-spend #pane-list .card.capped { padding:0; overflow:hidden; }
#view-spend #day-groups .day-head { padding:12px 14px 4px; border:0; background:transparent; }
#view-spend #day-groups .day-head:not(:first-child) { margin-top:2px; border-top:1px solid var(--mr-line); }
#view-spend .day-head .d, #view-spend .day-head .s { font-size:11px; line-height:1.45; font-weight:600; color:var(--mr-muted); }
#view-spend .item { min-height:56px; padding:9px 14px; border:0; background:transparent; }
#view-spend .item + .item { border-top:1px solid var(--mr-line); }
#view-spend .item .c, #view-spend .item .m { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#view-spend .item.planned { opacity:1; }
#view-spend .item .planned-k { font-size:10px; font-weight:650; color:var(--mr-accent); background:var(--mr-soft); }

/* 고정비 관리: 항목과 조작을 분리해 한 화면에서 반복·고정비·제외를 확인한다. */
#ml-manager { width:min(480px, calc(100% - 24px)); }
#ml-manager header h3 { font-size:17px; font-weight:750; }
#ml-manager .ml-manager-intro { margin:0 0 14px; color:var(--text-secondary); line-height:1.5; font-size:12px; }
#ml-manager .ml-manager-tools { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin:0 0 20px; }
#ml-manager .ml-manager-tools input { width:100%; max-width:none; min-height:40px; border:1px solid var(--grid); border-radius:9px; padding:0 10px; background:var(--surface-1); }
#ml-manager .ml-manager-tools button { min-height:40px; padding:0 13px; border:1px solid var(--accent); border-radius:9px; background:var(--accent); color:#fff; font-weight:700; white-space:nowrap; }
#ml-manager .ml-manager-section { border-top:1px solid var(--grid); padding:17px 0 8px; }
#ml-manager .ml-manager-section[hidden] { display:none; }
#ml-manager .ml-manager-section h4 { display:flex; align-items:baseline; gap:7px; margin:0 0 10px; color:var(--text-primary); font-size:14px; line-height:1.4; font-weight:750; }
#ml-manager .ml-manager-section h4 span { color:var(--text-secondary); font-size:11px; font-weight:600; }
#ml-manager .ml-manager-help { margin:-4px 0 10px; color:var(--text-secondary); font-size:11px; line-height:1.5; }
#ml-manager .ml-manager-empty { margin:0 0 8px; color:var(--text-secondary); font-size:12px; line-height:1.5; }
#ml-manager .ml-manager-item { padding:13px 0 15px; border-top:1px solid var(--grid); }
#ml-manager .ml-manager-section h4 + .ml-manager-item, #ml-manager .ml-manager-section > div > .ml-manager-item:first-child { border-top:0; }
#ml-manager .ml-manager-item-main { display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-width:0; }
#ml-manager .ml-manager-item-main strong { min-width:0; overflow-wrap:anywhere; color:var(--text-primary); font-size:15px; line-height:1.4; font-weight:750; }
#ml-manager .ml-manager-item-main b { flex:none; color:var(--text-primary); font-size:15px; line-height:1.4; white-space:nowrap; }
#ml-manager .ml-manager-detail { margin-top:5px; color:var(--text-secondary); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
#ml-manager .ml-manager-status { display:inline-block; margin-top:7px; padding:3px 8px; border-radius:20px; background:var(--fill); color:var(--text-primary); font-size:11px; line-height:1.4; font-weight:650; }
#ml-manager .ml-manager-status.is-muted { color:var(--text-secondary); }
#ml-manager .ml-manager-item-main .ml-manager-status { flex:none; margin:0; }
#ml-manager .ml-manager-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:12px; }
#ml-manager .ml-manager-actions button, #ml-manager .ml-manager-row-action, #ml-manager .ml-manager-more { display:inline-flex; align-items:center; justify-content:center; min-height:38px; border:1px solid var(--grid); border-radius:9px; padding:7px 8px; background:var(--surface-1); color:var(--text-primary); font-size:12px; line-height:1.3; font-weight:650; text-align:center; }
#ml-manager .ml-manager-actions button { width:100%; }
#ml-manager .ml-manager-actions button:first-child { border-color:var(--accent); color:var(--accent); }
#ml-manager .ml-manager-actions .ml-manager-danger { color:var(--text-secondary); }
#ml-manager .ml-manager-row-action, #ml-manager .ml-manager-more { margin-top:10px; }
#ml-manager .ml-manager-more { width:100%; }
#ml-manager #ml-duplicates-title { margin:14px 0 4px; font-size:13px; }

/* 고정비: 목록은 행으로, 조작은 펼쳤을 때만. 휴대폰에서도 이름·금액 열 유지. */
#ml-manager { width:min(720px,calc(100% - 24px)); }
#ml-manager .ml-manager-tools { grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin-bottom:10px; }
#ml-manager .ml-manager-tabs { display:flex; gap:0; border-bottom:1px solid var(--grid); margin-bottom:12px; }
#ml-manager .ml-manager-tabs button { flex:1; min-width:0; min-height:42px; padding:7px 2px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--text-secondary); font-family:inherit; font-size:12px; line-height:1.3; font-weight:600; white-space:nowrap; }
#ml-manager .ml-manager-tabs button[aria-pressed="true"] { border-bottom-color:var(--accent); color:var(--accent); }
#ml-manager .ml-manager-create { display:flex; gap:8px; margin:0 0 12px; }
#ml-manager .ml-manager-create button { flex:1; min-height:40px; border:1px solid var(--grid); border-radius:8px; background:var(--surface-1); color:var(--text-primary); font-family:inherit; font-size:13px; line-height:1.3; font-weight:600; padding:8px; }
#ml-manager #ml-rule-add { border-color:var(--accent); color:var(--accent); }
#ml-manager .ml-manager-help, #ml-rule-dlg .ml-manager-intro { font-size:12px; line-height:1.55; color:var(--text-secondary); }
#ml-manager .ml-manager-section { padding:12px 0 0; border:0; }
#ml-manager .ml-manager-section h4 { background:var(--fill); padding:8px; margin:0; font-size:12px; }
#ml-manager .ml-manager-section h4 span { font-size:12px; }
#ml-manager .ml-manager-item { padding:0; border:0; border-bottom:1px solid var(--grid); }
#ml-manager details.ml-manager-item > summary { position:relative; list-style:none; padding:12px 22px 12px 2px; cursor:pointer; }
#ml-manager details.ml-manager-item > summary::-webkit-details-marker { display:none; }
#ml-manager details.ml-manager-item > summary::after { content:'›'; position:absolute; right:3px; top:12px; font-size:18px; color:var(--text-secondary); }
#ml-manager details.ml-manager-item[open] > summary::after { transform:rotate(90deg); }
#ml-manager .ml-manager-item-main { gap:8px; }
#ml-manager .ml-manager-item-main strong, #ml-manager .ml-manager-item-main b { font-size:13px; font-weight:650; }
#ml-manager .ml-manager-detail { margin-top:4px; font-size:12px; }
#ml-manager summary .ml-manager-detail { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#ml-manager details[open] summary .ml-manager-detail { display:block; }
#ml-manager .ml-manager-status { font-size:12px; margin-top:5px; padding:2px 6px; border-radius:4px; }
#ml-manager details > .ml-manager-actions, #ml-manager details > .ml-manager-expanded { padding:0 2px 12px; margin-top:0; }
#ml-manager details > .ml-manager-row-action { margin:0 0 12px; }
#ml-manager .ml-manager-actions button { min-height:40px; font-size:12px; }
#ml-manager [hidden], #ml-rule-dlg [hidden] { display:none !important; }
#ml-rule-dlg { width:min(480px,calc(100% - 24px)); }
#ml-rule-dlg .ml-rule-fields { display:grid; gap:12px; }
#ml-rule-dlg label { display:grid; gap:6px; font-size:12px; color:var(--text-secondary); min-width:0; }
#ml-rule-dlg input, #ml-rule-dlg select { width:100%; min-width:0; min-height:42px; padding:8px 10px; border:1px solid var(--grid); border-radius:7px; font-family:inherit; font-size:13px; color:var(--text-primary); background:var(--surface-1); }
#ml-rule-dlg .ml-rule-pair, #ml-rule-amounts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
#ml-rule-preview { background:var(--fill); border-radius:8px; padding:12px; margin:16px 0 0; font-size:12px; line-height:1.5; color:var(--text-secondary); }
#ml-rule-preview strong { color:var(--text-primary); font-size:13px; }
#ml-rule-preview p { margin:5px 0; }
.ml-rule-example { display:flex; justify-content:space-between; gap:8px; padding:8px 0; border-top:1px solid var(--grid); font-size:12px; line-height:1.5; }
.ml-rule-example span { min-width:0; overflow-wrap:anywhere; }
.ml-rule-example small { display:block; font-size:12px; color:var(--text-secondary); }
.ml-rule-example b { flex:none; white-space:nowrap; font-size:12px; font-weight:600; }

/* 좁은 화면에서는 요약과 도구가 거래 목록을 밀어내지 않도록 압축한다. */
#view-spend .mr-spend-overview { margin-bottom:5px; }
#view-spend .mr-spend-compact .mr-spend-summary { padding:11px 14px 12px; gap:6px; border-radius:15px; }
#view-spend .mr-spend-compact .mr-spend-summary #period-bar { grid-template-columns:30px minmax(0,1fr) 30px; gap:5px; margin:0 0 4px; }
#view-spend .mr-spend-summary #period-bar > button { width:30px; height:30px; min-height:30px; border-radius:8px; }
#view-spend .mr-spend-summary #cyc-title { font-size:14px; line-height:1.2; }
#view-spend .mr-spend-summary #cyc-range { font-size:10px; line-height:1.2; white-space:normal; }
#view-spend .mr-spend-compact .mr-spend-summary-main { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:6px; min-width:0; }
#view-spend .mr-spend-summary h2 { margin:0; font-size:11px; line-height:1.35; }
#view-spend .mr-spend-compact .mr-spend-total { min-width:0; max-width:100%; font-size:clamp(19px, 5.8vw, 24px); line-height:1.2; text-align:right; overflow-wrap:anywhere; }
#view-spend .mr-spend-comparison { font-size:12px; line-height:1.35; }
#view-spend .mr-spend-comparison small { margin-top:1px; font-size:10px; line-height:1.35; }
#view-spend .ctrl-row { gap:5px 8px; margin:8px 0; }
#view-spend #spend-sub { gap:0; padding:0; border-radius:0; border-bottom:1px solid var(--mr-line); background:transparent; }
#view-spend #spend-sub button { height:36px; min-height:36px; border-radius:0; font-size:13px; }
#view-spend #spend-sub button[aria-pressed=true] { background:transparent; box-shadow:inset 0 -2px var(--mr-accent); }
#view-spend .ctrl-row #meta-row { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; height:auto; }
#view-spend .ctrl-row #meta-row button,
#view-spend .ctrl-row #meta-row #go-make { width:100%; min-width:0; height:36px; min-height:36px; margin:0; padding:3px 5px; font-size:12px; line-height:1.15; white-space:normal; text-align:center; }
#view-spend #search-row { gap:6px; margin:0 0 9px; }
#view-spend #spend-q, #view-spend #sf-open { min-height:40px; height:40px; border-radius:10px; }
#view-spend #spend-q { padding:8px 11px; font-size:13px; }
#view-spend #sf-open { padding:6px 10px; font-size:12px; }
@media (max-width:350px) {
  #view-spend .mr-spend-compact .mr-spend-summary-main { grid-template-columns:minmax(0,1fr); gap:1px; }
  #view-spend .mr-spend-compact .mr-spend-total { text-align:left; }
  #view-spend .ctrl-row #meta-row button, #view-spend .ctrl-row #meta-row #go-make { font-size:11px; }
}

/* 지출 탭과 세 관리 동작은 한 줄에 둔다. 좁은 폰은 버튼 이름만 짧게 쓴다. */
#view-spend .ctrl-row { display:flex; align-items:center; gap:4px; margin:8px 0; }
#view-spend #spend-sub { flex:1 1 auto; min-width:0; max-width:320px; width:auto; height:36px; display:flex; align-items:stretch; margin-right:auto; }
#view-spend #spend-sub button { flex:1 1 0; min-width:0; width:auto; height:36px; padding:0 1px; font-size:clamp(11px, 3vw, 12px); white-space:nowrap; }
#view-spend #ledger-add { flex:0 0 36px; width:36px; min-width:36px; height:36px; }
#view-spend .ctrl-row #meta-row { flex:0 0 auto; display:flex!important; align-items:center; gap:4px; min-width:0; height:36px; }
#view-spend .ctrl-row #meta-row button,
#view-spend .ctrl-row #meta-row #go-make { flex:0 0 auto; width:auto; min-width:0; height:36px; padding:2px 5px; font-size:clamp(10px, 2.8vw, 12px); white-space:nowrap; }
#view-spend .mr-manage-label-short { display:none; }
@media (max-width:350px) {
  #view-spend .mr-manage-label-full { display:none; }
  #view-spend .mr-manage-label-short { display:inline; }
}