/* 고정비 화면 (2026-09-29, D-81 · fixed-page.js)
   목업 fx2 그대로 — 한 줄 입구 · 요약 · 정리할 것 · 분류별 카드 · 펼침(할부 칸 · 6달 막대 · 조건 · 할 일).
   색은 전부 앱 토큰(--mr-*)이라 밝은·어두운 모드를 따로 적지 않는다. 보조 글자도 12px 아래로 내리지 않는다. */

/* 지출 목록의 ‘고정’ 딱지 */
#view-spend .item .fixed-k { margin-left:5px; padding:1px 5px; border-radius:5px; background:var(--mr-soft); color:var(--mr-accent); font-size:10px; font-weight:700; vertical-align:1px; }

/* 한 줄 입구 — 지출 탭 막대 [내역 · 분석 · 달력] 아래 */
.fxp-entry { position:relative; display:flex; align-items:center; gap:11px; width:100%; margin:8px 0 2px; padding:11px 14px 13px; border:0; border-radius:16px; background:var(--mr-card); color:var(--mr-ink); font:inherit; text-align:left; cursor:pointer; overflow:hidden; box-shadow:0 1px 2px #182a4808; }
.fxp-entry[hidden] { display:none; }
/* 탭 막대 아래 첫 줄 — 달력 탭에서는 숨긴다(날짜 칸을 보는 곳이라 방해만 된다) */
#view-spend .fxp-entry { margin:2px 0 10px; }
#view-spend:has(#pane-cal:not([hidden])) .fxp-entry { display:none; }
.fxp-entry:active { transform:scale(.995); }
.fxp-entry .ic { width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:11px; background:var(--mr-soft); }
.fxp-entry .ic svg { width:18px; height:18px; fill:none; stroke:var(--mr-accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.fxp-entry .tx { flex:1; min-width:0; }
.fxp-entry .tx small { display:block; color:var(--mr-muted); font-size:12px; font-weight:600; line-height:1.3; }
.fxp-entry .tx b { display:block; font-size:16px; font-weight:750; letter-spacing:-.3px; font-variant-numeric:tabular-nums; }
.fxp-entry .badge { padding:3px 8px; border-radius:99px; background:color-mix(in srgb,var(--mr-warning) 16%,transparent); color:var(--mr-warning); font-size:12px; font-weight:750; white-space:nowrap; }
.fxp-entry .sub { color:var(--mr-muted); font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.fxp-entry .chev { color:var(--mr-muted); font-size:18px; line-height:1; }
.fxp-entry .prog { position:absolute; left:0; right:0; bottom:0; height:3px; background:color-mix(in srgb,var(--mr-line) 45%,transparent); }
.fxp-entry .prog i { display:block; height:100%; background:var(--mr-accent); border-radius:0 3px 3px 0; }

/* 화면 */
#view-fixed { max-width:640px; margin-inline:auto; font-variant-numeric:tabular-nums; }
#view-fixed button { font-family:inherit; }
.fxp-top { display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.fxp-monsw { display:flex; align-items:center; gap:4px; flex:1; }
.fxp-monsw b { min-width:98px; font-size:16px; font-weight:750; text-align:center; }
.fxp-monsw button { width:34px; height:34px; border:0; border-radius:10px; background:var(--mr-card); color:var(--mr-ink); font-size:20px; line-height:1; cursor:pointer; }
.fxp-plus { height:36px; padding:0 14px; border:0; border-radius:11px; background:var(--mr-accent); color:#fff; font-size:14px; font-weight:750; white-space:nowrap; cursor:pointer; }

.fxp-hero { padding:16px 18px 15px; border-radius:20px; background:var(--mr-card); }
.fxp-hero small { color:var(--mr-muted); font-size:13px; font-weight:650; }
.fxp-sum { margin-top:2px; font-size:30px; font-weight:800; letter-spacing:-1px; line-height:1.2; }
.fxp-sum u { margin-left:2px; font-size:17px; font-weight:700; text-decoration:none; }
.fxp-bar { height:8px; margin-top:12px; border-radius:99px; background:color-mix(in srgb,var(--mr-line) 55%,transparent); overflow:hidden; }
.fxp-bar i { display:block; height:100%; border-radius:99px; background:var(--mr-accent); }
.fxp-legend { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px; color:var(--mr-muted); font-size:12px; }
.fxp-legend span::before { content:""; display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:2px; vertical-align:0; background:var(--mr-accent); }
.fxp-legend .d2::before { background:color-mix(in srgb,var(--mr-line) 80%,transparent); }
.fxp-legend b { color:var(--mr-ink); font-weight:700; }
.fxp-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:12px; }
.fxp-stats span { padding:7px 0 6px; border-radius:11px; background:var(--mr-bg); color:var(--mr-muted); font-size:12px; font-weight:650; text-align:center; }
.fxp-stats b { display:block; color:var(--mr-ink); font-size:16px; font-weight:750; }

/* 정리할 것 */
.fxp-todo { margin-top:10px; border-radius:16px; background:color-mix(in srgb,var(--mr-warning) 13%,var(--mr-card)); color:var(--mr-ink); overflow:hidden; }
.fxp-todo-h { display:flex; align-items:center; gap:10px; width:100%; padding:11px 14px; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.fxp-todo .dot { width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--mr-card); color:var(--mr-warning); font-size:12px; font-weight:850; }
.fxp-todo-h .t { flex:1; min-width:0; font-size:14px; font-weight:700; line-height:1.35; }
.fxp-todo-h .t small { display:block; overflow:hidden; color:var(--mr-muted); font-size:12px; font-weight:500; white-space:nowrap; text-overflow:ellipsis; }
.fxp-todo .chev { color:var(--mr-muted); font-size:13px; }
.fxp-todo-list { display:grid; gap:8px; padding:0 10px 10px; }
.fxp-todo-it { padding:11px 12px; border-radius:13px; background:var(--mr-card); }
.fxp-todo-it p { margin:0; font-size:13.5px; line-height:1.5; }
.fxp-todo-it p small { display:block; margin-top:2px; color:var(--mr-muted); font-size:12px; }
.fxp-btns { display:flex; gap:6px; margin-top:9px; }
.fxp-btns button { flex:1; min-height:36px; padding:0 8px; border:0; border-radius:10px; background:var(--mr-bg); color:var(--mr-ink); font-size:13px; font-weight:700; cursor:pointer; }
.fxp-btns button.p { background:var(--mr-accent); color:#fff; }

/* 줄 세우기 · 사람 */
.fxp-ctl { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:14px 2px 8px; }
.fxp-ctl .sp { flex:1; }
.fxp-seg { display:flex; padding:3px; border-radius:11px; background:color-mix(in srgb,var(--mr-line) 55%,transparent); }
.fxp-seg button { padding:6px 11px; border:0; border-radius:8px; background:transparent; color:var(--mr-muted); font-size:13px; font-weight:700; cursor:pointer; }
.fxp-seg button[aria-pressed="true"] { background:var(--mr-card); color:var(--mr-ink); box-shadow:0 1px 2px #0000001a; }
.fxp-who { display:flex; gap:3px; }
.fxp-who button { padding:6px 10px; border:0; border-radius:99px; background:transparent; color:var(--mr-muted); font-size:13px; font-weight:700; cursor:pointer; }
.fxp-who button[aria-pressed="true"] { background:var(--mr-ink); color:var(--mr-card); }

/* 항목 줄 */
.fxp-grp { margin-top:10px; border-radius:18px; background:var(--mr-card); overflow:hidden; }
.fxp-gh { display:flex; align-items:center; gap:7px; padding:11px 14px 8px; color:var(--mr-muted); font-size:13px; font-weight:750; }
.fxp-gh small { font-size:12px; font-weight:600; }
.fxp-gh .sp { flex:1; }
.fxp-gh b { color:var(--mr-ink); font-size:14px; }
.fxp-it { border-top:1px solid color-mix(in srgb,var(--mr-line) 45%,transparent); }
.fxp-grp > .fxp-it:first-child { border-top:0; }
.fxp-row { display:flex; align-items:center; gap:11px; width:100%; padding:11px 14px; border:0; background:transparent; color:var(--mr-ink); text-align:left; cursor:pointer; }
.fxp-row .ic, .fxp-cand .ic { width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb,var(--ic, var(--mr-accent)) 16%,transparent); font-size:18px; }
.fxp-row .ic img, .fxp-cand .ic img { width:20px; height:20px; }
.fxp-row .t { flex:1; min-width:0; }
.fxp-row .t b { display:flex; align-items:center; gap:6px; min-width:0; font-size:14.5px; font-weight:700; letter-spacing:-.2px; }
.fxp-row .t b em { overflow:hidden; font-style:normal; white-space:nowrap; text-overflow:ellipsis; }
.fxp-row .t i { display:block; margin-top:1px; overflow:hidden; color:var(--mr-muted); font-size:12px; font-style:normal; white-space:nowrap; text-overflow:ellipsis; }
.fxp-tag { flex:none; padding:2px 7px; border-radius:7px; font-size:12px; font-weight:750; white-space:nowrap; }
.fxp-tag.inst { background:var(--mr-soft); color:var(--mr-accent); }
.fxp-tag.end { background:var(--mr-bg); color:var(--mr-muted); }
.fxp-row .r { flex:none; text-align:right; }
.fxp-row .r b { display:block; font-size:14.5px; font-weight:750; letter-spacing:-.2px; }
.fxp-row .r b.exp { color:var(--mr-muted); font-weight:650; }
.fxp-row .r small { display:block; margin-top:1px; font-size:12px; font-weight:700; }
.fxp-row .r small.ok { color:var(--mr-success); }
.fxp-row .r small.wait { color:var(--mr-muted); }
.fxp-row .r small.miss { color:var(--mr-warning); }
.fxp-it.dim .fxp-row .t b, .fxp-it.dim .fxp-row .r b { color:var(--mr-muted); }
.fxp-it.open { background:color-mix(in srgb,var(--mr-accent) 5%,var(--mr-card)); }
.fxp-it.open .fxp-row .t b em { white-space:normal; }

/* 펼침 */
.fxp-more { display:grid; gap:12px; padding:2px 14px 14px; }
.fxp-inst { padding:12px 13px; border-radius:14px; background:var(--mr-card); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mr-accent) 22%,transparent); }
.fxp-inst .h { display:flex; align-items:baseline; gap:8px; }
.fxp-inst .h span { color:var(--mr-muted); font-size:12px; font-weight:700; }
.fxp-inst .h b { font-size:20px; font-weight:800; letter-spacing:-.4px; }
.fxp-inst .h b small { color:var(--mr-muted); font-size:13px; font-weight:650; }
.fxp-inst .h .sp { flex:1; }
.fxp-inst .h em { color:var(--mr-accent); font-size:12px; font-style:normal; font-weight:750; }
.fxp-segs { display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:3px; margin-top:10px; }
.fxp-segs i { height:9px; border-radius:3px; background:color-mix(in srgb,var(--mr-line) 55%,transparent); }
.fxp-segs i.on { background:color-mix(in srgb,var(--mr-accent) 55%,var(--mr-card)); }
.fxp-segs i.now { background:var(--mr-accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--mr-accent) 28%,transparent); }
.fxp-ibar { height:9px; margin-top:10px; border-radius:99px; background:color-mix(in srgb,var(--mr-line) 55%,transparent); overflow:hidden; }
.fxp-ibar i { display:block; height:100%; border-radius:99px; background:var(--mr-accent); }
.fxp-inst .l { display:flex; justify-content:space-between; gap:8px; margin-top:8px; color:var(--mr-muted); font-size:12px; }
.fxp-inst .l b { color:var(--mr-ink); font-weight:700; }
.fxp-inst.edit .h span { color:var(--mr-ink); font-size:13px; }
.fxp-inst-in { display:flex; gap:8px; margin-top:9px; }
/* 앱 공통 입력 모양(테두리 · 높이 · 너비)이 끼어들면 ‘이/번/달’ 로 쪼개진다(2026-09-29 첫 캡처) — 여기서 다 걷는다 */
.fxp-inst-in label { flex:1 1 0; min-width:0; display:flex; flex-direction:row; align-items:center; gap:6px; margin:0; padding:8px 11px; border-radius:11px; background:var(--mr-bg); color:var(--mr-muted); font-size:12px; font-weight:650; white-space:nowrap; }
.fxp-inst-in label:focus-within { box-shadow:inset 0 0 0 1.5px var(--mr-accent); }
#view-fixed .fxp-inst-in input, #fxp-add .fxp-inst-in input { flex:1 1 auto; width:0; min-width:0; height:auto; min-height:0; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--mr-ink); font:inherit; font-size:17px; font-weight:750; text-align:right; outline:0; }
.fxp-inst-in .k, .fxp-inst-in span { flex:none; }
.fxp-inst-end { margin:6px 0 0; color:var(--mr-accent); font-size:12.5px; font-weight:650; }
.fxp-inst-end:empty { display:none; }
.fxp-chart { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; align-items:end; height:84px; padding:0 2px; }
.fxp-chart div { display:grid; justify-items:center; align-content:end; gap:3px; height:100%; }
.fxp-chart i { display:block; width:100%; max-width:30px; border-radius:6px 6px 2px 2px; background:color-mix(in srgb,var(--mr-accent) 28%,var(--mr-card)); }
.fxp-chart div.now i { background:var(--mr-accent); }
.fxp-chart div.fut i { background:transparent; box-shadow:inset 0 0 0 1px var(--mr-line); }
.fxp-chart small { color:var(--mr-muted); font-size:12px; }
.fxp-chart div.now small { color:var(--mr-ink); font-weight:750; }
.fxp-chart em { color:var(--mr-muted); font-size:12px; font-style:normal; font-weight:700; white-space:nowrap; }
.fxp-kv { display:grid; grid-template-columns:78px 1fr; gap:6px 10px; margin:0; font-size:13px; }
.fxp-kv dt { color:var(--mr-muted); }
.fxp-kv dd { margin:0; color:var(--mr-ink); overflow-wrap:anywhere; }
.fxp-kv dd button { margin-left:6px; padding:0; border:0; background:transparent; color:var(--mr-accent); font-size:12px; font-weight:700; cursor:pointer; }
.fxp-txs { padding:9px 12px; border-radius:13px; background:var(--mr-card); }
.fxp-txs .h { margin-bottom:3px; color:var(--mr-muted); font-size:12px; font-weight:750; }
.fxp-tx { display:flex; align-items:center; gap:10px; padding:5px 0; font-size:13px; }
.fxp-tx span { flex:1; min-width:0; overflow-wrap:anywhere; }
.fxp-tx small { display:block; color:var(--mr-muted); font-size:12px; }
.fxp-none { margin:0; color:var(--mr-muted); font-size:12.5px; }
.fxp-acts { display:flex; flex-wrap:wrap; gap:6px; }
.fxp-acts button { flex:1 1 30%; min-height:38px; padding:0 8px; border:1px solid var(--mr-line); border-radius:11px; background:var(--mr-card); color:var(--mr-ink); font-size:13px; font-weight:700; cursor:pointer; }
.fxp-acts button.warn { color:var(--mr-warning); }
.fxp-fold { display:flex; align-items:center; gap:6px; width:100%; margin-top:12px; padding:10px 4px; border:0; background:transparent; color:var(--mr-muted); font-size:13px; font-weight:700; text-align:left; cursor:pointer; }
.fxp-empty { margin-top:10px; padding:26px 16px; border-radius:18px; background:var(--mr-card); color:var(--mr-muted); font-size:14px; text-align:center; }
.fxp-empty button { display:block; margin:10px auto 0; padding:8px 14px; border:0; border-radius:10px; background:var(--mr-accent); color:#fff; font-weight:700; }
.fxp-foot { margin:14px 4px 4px; color:var(--mr-muted); font-size:12px; line-height:1.55; }
.fxp-link { padding:0; border:0; background:transparent; color:var(--mr-accent); font-size:12px; font-weight:700; cursor:pointer; }

/* ＋ 고정비 — 폰에서는 아래에서 올라오는 판 */
dialog.fxp-sheet { width:min(460px, 100%); max-width:100%; max-height:88dvh; margin:auto auto 0; padding:14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-bottom:0; border-radius:22px 22px 0 0; }
@media (min-width:700px) { dialog.fxp-sheet { margin:auto; border-bottom:1px solid var(--grid); border-radius:20px; } }
dialog.fxp-sheet h3 { font-size:16px; }
.fxp-search { display:block; }
#fxp-add .fxp-search input { width:100%; height:38px; padding:0 12px; border:0; border-radius:11px; background:var(--mr-bg); color:var(--mr-ink); font-size:14px; }
.fxp-cands { display:grid; max-height:34dvh; margin-top:6px; overflow-y:auto; }
#fxp-add .fxp-cand { display:flex; align-items:center; gap:10px; padding:8px 4px; border:0; border-bottom:1px solid color-mix(in srgb,var(--mr-line) 45%,transparent); border-radius:0; background:transparent; text-align:left; box-shadow:none; cursor:pointer; }
#fxp-add .fxp-cand.on { padding-inline:9px; border-bottom-color:transparent; border-radius:12px; background:var(--mr-soft); }
.fxp-cand .t { flex:1; min-width:0; }
.fxp-cand .t b { display:block; overflow:hidden; font-size:14px; font-weight:700; white-space:nowrap; text-overflow:ellipsis; }
.fxp-cand .t i { display:block; color:var(--mr-muted); font-size:12px; font-style:normal; }
.fxp-cand .a { font-size:14px; font-weight:750; }
.fxp-sug { margin-top:10px; padding:10px 12px; border-radius:12px; background:color-mix(in srgb,var(--mr-success) 13%,var(--mr-card)); font-size:13px; line-height:1.55; }
.fxp-field { display:flex; align-items:center; gap:10px; margin-top:10px; padding:4px 4px 4px 12px; border-radius:12px; background:var(--mr-bg); color:var(--mr-muted); font-size:13px; font-weight:650; }
#fxp-add .fxp-field input { flex:1; min-width:0; height:34px; padding:0 8px; border:0; background:transparent; color:var(--mr-ink); font-size:14px; font-weight:700; }
.fxp-opt { display:flex; align-items:center; gap:8px; margin-top:8px; padding:10px 12px; border-radius:12px; background:var(--mr-bg); font-size:13.5px; font-weight:650; }
.fxp-add-help { margin:12px 2px 4px; color:var(--mr-muted); font-size:13px; line-height:1.55; }
/* 가져온 내역에 없는 돈은 반복 항목에서 — 고정비와 반복 항목은 다르다(2026-09-29) */
.fxp-add-note { margin:14px 2px 0; padding-top:10px; border-top:1px solid color-mix(in srgb,var(--mr-line) 45%,transparent); color:var(--mr-muted); font-size:12.5px; line-height:1.55; }
#fxp-add .fxp-add-note .fxp-link { display:inline; min-height:0; height:auto; padding:0; border:0; background:none; box-shadow:none; color:var(--mr-accent); font-size:12.5px; font-weight:700; line-height:inherit; vertical-align:baseline; }
#fxp-add .fxp-save { width:100%; min-height:42px; margin-top:12px; border:0; border-radius:12px; background:var(--mr-accent); color:#fff; font-size:14.5px; font-weight:800; box-shadow:none; cursor:pointer; }