/* 2026-09-26 가계부 A안 — 흰 바탕·큰 숫자 · v0.0412 에서 모바일 밀도 한 단계 줄임("너무 큼직큼직") (docs/mockups/2026-09-26-ledger.html 의 처음 안). ★ 지출 화면에는 예전 규칙이 여러 겹 쌓여 있다(refresh-spend.css 끝쪽 덮어쓰기 · LESSONS 09-23). 여기서는 모든 선택자 앞에 #view-ledger 를 한 번 더 붙여 이긴다. 이 파일은 가장 마지막에 읽는다. ★ 새 색을 만들지 않는다. 쓰는 변수는 refresh.css 에 정의된 것뿐이다(--mr-*, --fill, --text-secondary). */ #view-ledger { --lg-gut:28px; --lg-band:var(--mr-bg); --lg-good:#12a36a; --lg-bad:var(--critical); } @media (max-width:700px) { #view-ledger { --lg-gut:16px; } body[data-mori-view="ledger"] .wrap { padding-inline:16px; } } /* 2026-09-27 좌우 여백 18 → 16 (사용자 “좌우 공백이 너무 커”) — 두 값은 늘 같아야 카드가 화면 끝에 닿는다 */ @media (max-width:380px) { #view-ledger { --lg-gut:14px; } body[data-mori-view="ledger"] .wrap { padding-inline:14px; } } :root[data-theme="dark"] #view-ledger { --lg-good:#3ecf8e; } /* 가계부에 있는 동안은 바탕을 카드색(흰색)으로. 구획은 카드 테두리 대신 회색 띠로 나눈다. */ html:has(body[data-mori-view="ledger"]), body[data-mori-view="ledger"] { background:var(--mr-card); } body[data-mori-view="ledger"] .topbar { background:var(--mr-card); border-bottom-color:transparent; } /* ── 네 탭: 상자 없는 큰 글자 ── */ #view-ledger > .seg-scroll { margin:0 calc(-1 * var(--lg-gut)) 2px !important; padding:4px var(--lg-gut) 0; background:var(--mr-card); } #view-ledger #ledger-sub { display:flex; gap:16px; padding:0; background:none; border-radius:0; box-shadow:none; } #view-ledger #ledger-sub button { min-height:0; height:auto; padding:2px 0 6px; border:0; border-radius:0; background:none; box-shadow:none; font-size:16px; line-height:1.3; font-weight:750; letter-spacing:-.4px; color:var(--mr-muted); } #view-ledger #ledger-sub button[aria-pressed="true"] { color:var(--mr-ink); background:none; box-shadow:none; } /* ───────────── 지출 ───────────── */ #view-ledger #view-spend .mr-spend-overview { margin:0 0 4px; } #view-ledger #view-spend .mr-spend-summary, #view-ledger #view-spend .mr-spend-compact .mr-spend-summary { display:block; padding:0; border:0; border-radius:0; background:transparent; color:var(--mr-ink); box-shadow:none; } /* 월 줄: ‹ 10월 › 기간 …… 최신 ⋯ */ #view-ledger #view-spend .mr-spend-summary #period-bar, #view-ledger #view-spend .mr-spend-compact .mr-spend-summary #period-bar { position:relative; display:flex; flex-wrap:nowrap; align-items:center; gap:2px; margin:4px 0 2px; padding:0; } #view-ledger #view-spend .mr-spend-summary .pb-range { display:contents; } #view-ledger #view-spend .mr-spend-summary #period-bar > #cyc-prev { order:1; } #view-ledger #view-spend .mr-spend-summary #cyc-title { order:2; flex:none; white-space:nowrap; color:var(--mr-ink); font-size:14px; line-height:1.3; font-weight:750; letter-spacing:-.3px; } #view-ledger #view-spend .mr-spend-summary #period-bar > #cyc-next { order:3; } #view-ledger #view-spend .mr-spend-summary #cyc-range { order:4; flex:1 1 auto; min-width:0; margin-left:6px; text-align:left; color:var(--mr-muted); font-size:11px; line-height:1.3; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #view-ledger #view-spend .mr-spend-summary #period-bar > #cyc-latest { order:5; grid-area:auto; width:auto; height:24px; min-height:24px; padding:0 8px; border:1px solid var(--mr-line); border-radius:999px; background:transparent; color:var(--mr-ink); font-size:11px; font-weight:650; } #view-ledger #view-spend .mr-spend-summary #period-bar > #spend-more { order:6; } #view-ledger #view-spend .mr-spend-summary #period-bar > #cyc-prev, #view-ledger #view-spend .mr-spend-summary #period-bar > #cyc-next { width:24px; min-width:24px; height:28px; min-height:28px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--mr-muted); font-size:19px; line-height:1; } #view-ledger #view-spend #spend-more { display:grid; place-items:center; width:30px; height:30px; min-height:30px; padding:0; border:0; border-radius:10px; background:transparent; color:var(--mr-ink); } #view-ledger #view-spend #spend-more[aria-expanded="true"] { background:var(--fill); } #view-ledger #view-spend .spend-more-menu { position:absolute; right:0; top:calc(100% + 4px); z-index:35; min-width:210px; padding:6px; border:1px solid var(--mr-line); border-radius:14px; background:var(--mr-card); box-shadow:0 12px 32px -12px rgba(23,38,60,.35); } #view-ledger #view-spend .spend-more-menu[hidden] { display:none; } #view-ledger #view-spend .spend-more-menu button { display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:0 12px; border:0; border-radius:10px; background:transparent; color:var(--mr-ink); font-size:13px; font-weight:650; text-align:left; } #view-ledger #view-spend .spend-more-menu button span { margin-left:auto; color:var(--mr-muted); font-size:11.5px; font-weight:500; } #view-ledger #view-spend .spend-more-menu button:hover, #view-ledger #view-spend .spend-more-menu button:focus-visible { background:var(--fill); } /* 금액: 크게. '우리 집이 쓴 돈' 제목은 필터를 걸었을 때만 보인다. */ #view-ledger #view-spend .mr-spend-summary-main, #view-ledger #view-spend .mr-spend-compact .mr-spend-summary-main { display:block; margin:2px 0 0; } #view-ledger #view-spend .mr-spend-summary:not(.is-filtered) .mr-spend-summary-main h2 { display:none; } #view-ledger #view-spend .mr-spend-summary.is-filtered .mr-spend-summary-main h2 { display:block; margin:0; color:var(--mr-muted); font-size:11.5px; font-weight:600; } #view-ledger #view-spend .mr-spend-total, #view-ledger #view-spend .mr-spend-compact .mr-spend-total { display:block; max-width:100%; color:var(--mr-ink); font-size:24px; line-height:1.25; font-weight:750; letter-spacing:-.6px; text-align:left; overflow-wrap:anywhere; } @media (max-width:350px) { #view-ledger #view-spend .mr-spend-total, #view-ledger #view-spend .mr-spend-compact .mr-spend-total { font-size:22px; } } /* 지난달 이맘때 비교: 덜 썼으면 초록 띠, 더 썼으면 빨간 띠 */ #view-ledger #view-spend .mr-spend-comparison { display:flex; flex-wrap:wrap; align-items:center; gap:5px; min-height:0; margin:4px 0 0; color:var(--text-secondary); font-size:12px; line-height:1.4; font-weight:500; } /* 비교 띠는 분석으로 가는 버튼(v0.0413) */ #view-ledger #view-spend button.mr-spend-comparison { width:auto; min-height:28px; padding:0; border:0; background:none; box-shadow:none; font-family:inherit; text-align:left; cursor:pointer; } #view-ledger #view-spend .mr-spend-comparison .mr-go { color:var(--mr-muted); font-size:15px; line-height:1; margin-left:-1px; } #view-ledger #view-spend .mr-spend-comparison em { font-style:normal; font-weight:700; font-size:11.5px; padding:2px 6px; border-radius:6px; color:var(--mr-ink); background:var(--fill); } #view-ledger #view-spend .mr-spend-comparison.is-less em { color:var(--lg-good); background:color-mix(in srgb,var(--lg-good) 13%,transparent); } #view-ledger #view-spend .mr-spend-comparison.is-more em { color:var(--lg-bad); background:color-mix(in srgb,var(--lg-bad) 12%,transparent); } /* 누적 곡선 */ #view-ledger #view-spend .mr-spend-pace { margin:6px 0 0; } #view-ledger #view-spend .mr-spend-pace-plot { position:relative; height:38px; } #view-ledger #view-spend .mr-spend-pace-plot svg { display:block; width:100%; height:100%; overflow:visible; } #view-ledger #view-spend .mr-spend-pace .pace-prev { fill:none; stroke:var(--mr-muted); stroke-width:1.5; stroke-dasharray:3 4; opacity:.75; vector-effect:non-scaling-stroke; } #view-ledger #view-spend .mr-spend-pace .pace-cur { fill:none; stroke:var(--mr-accent); stroke-width:2.4; stroke-linejoin:round; vector-effect:non-scaling-stroke; } #view-ledger #view-spend .mr-spend-pace .pace-fill { fill:var(--mr-accent); opacity:.1; stroke:none; } #view-ledger #view-spend .mr-spend-pace .pace-dot { position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border:2px solid var(--mr-card); border-radius:50%; background:var(--mr-accent); } #view-ledger #view-spend .mr-spend-pace-axis { position:relative; display:flex; justify-content:space-between; margin-top:2px; color:var(--mr-muted); font-size:10px; line-height:1.3; } #view-ledger #view-spend .mr-spend-pace-axis b { position:absolute; top:0; transform:translateX(-50%); color:var(--mr-accent); font-weight:700; background:var(--mr-card); padding:0 3px; } /* 등록 기준·비교 기간: 작게 한 줄(숨기지 않는다) */ #view-ledger #view-spend .mr-spend-summary-meta { position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; margin:4px 0 0; color:var(--mr-muted); font-size:10.5px; line-height:1.4; } /* 내역 · 분석 · 달력 전환 */ #view-ledger #view-spend .ctrl-row { display:block; margin:10px 0 6px; } #view-ledger #view-spend #spend-sub { display:flex; width:100%; max-width:none; height:auto; gap:0; margin:0; padding:2px; border:0; border-radius:10px; background:var(--fill); } #view-ledger #view-spend #spend-sub button { flex:1 1 0; height:30px; min-height:30px; padding:0; border:0; border-radius:8px; background:transparent; box-shadow:none; color:var(--mr-muted); font-size:12.5px; font-weight:650; } #view-ledger #view-spend #spend-sub button[aria-pressed="true"] { background:var(--mr-card); color:var(--mr-ink); box-shadow:0 1px 3px rgba(23,38,60,.14); } #view-ledger #view-spend .ctrl-row #meta-row, #view-ledger #view-spend #search-btn { display:none !important; } /* + 는 오른쪽 아래 떠 있는 버튼 */ #view-ledger #view-spend #ledger-add { position:fixed; right:18px; bottom:calc(var(--mr-bottom) + 28px + env(safe-area-inset-bottom,0px)); z-index:30; display:grid; place-items:center; width:48px; min-width:48px; height:48px; min-height:48px; margin:0; padding:0 0 3px; border:0; border-radius:50%; background:var(--mr-accent); color:#fff; font-size:28px; font-weight:400; line-height:1; box-shadow:0 10px 24px -8px color-mix(in srgb,var(--mr-accent) 70%,transparent); } @media (min-width:760px) { #view-ledger #view-spend #ledger-add { right:max(18px, calc(50% - 560px)); } } /* 분류 칩 — 내역에서만 */ #view-ledger #mr-spend-chips { display:flex; gap:5px; overflow-x:auto; margin:0 calc(-1 * var(--lg-gut)) 6px; padding:2px var(--lg-gut); scrollbar-width:none; } #view-ledger #mr-spend-chips::-webkit-scrollbar { display:none; } #view-ledger #mr-spend-chips:empty, #view-ledger #view-spend:has(#pane-list[hidden]) #mr-spend-chips { display:none; } #view-ledger .mr-chip { flex:none; display:inline-flex; align-items:center; gap:3px; height:28px; min-height:28px; padding:0 10px; border:0; border-radius:999px; background:var(--fill); color:var(--text-secondary); font-size:11.5px; font-weight:550; white-space:nowrap; } #view-ledger .mr-chip b { margin-left:2px; color:var(--mr-ink); font-weight:700; } #view-ledger .mr-chip[aria-pressed="true"] { background:var(--mr-ink); color:var(--mr-card); } #view-ledger .mr-chip[aria-pressed="true"] b { color:var(--mr-card); } /* 검색 + 필터 아이콘 */ #view-ledger #view-spend #search-row { display:flex; gap:6px; margin:0 0 2px; } #view-ledger #view-spend #search-row[hidden] { display:none; } #view-ledger #view-spend #spend-q { flex:1 1 auto; min-width:0; height:36px; min-height:36px; padding:0 12px; border:0; border-radius:10px; background:var(--fill); color:var(--mr-ink); font-size:13px; } #view-ledger #view-spend #sf-open { position:relative; flex:none; display:grid; place-items:center; width:36px; height:36px; min-height:36px; padding:0; border:0; border-radius:10px; background:var(--fill); color:var(--text-secondary); } #view-ledger #view-spend #sf-open .sf-text, #view-ledger #view-spend #sf-open .chev { display:none; } #view-ledger #view-spend #sf-open.on { background:color-mix(in srgb,var(--mr-accent) 14%,transparent); color:var(--mr-accent); } /* 목록: 상자 없이, 분류색 동그라미 아이콘 */ #view-ledger #view-spend #pane-list .card.capped { margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; } #view-ledger #view-spend #day-groups .day-head, #view-ledger #view-spend #day-groups .day-head:not(:first-child) { margin:2px 0 0; padding:10px 0 2px; border:0; background:transparent; } #view-ledger #view-spend .day-head .d, #view-ledger #view-spend .day-head .s { color:var(--mr-muted); font-size:11.5px; line-height:1.4; font-weight:600; } #view-ledger #view-spend .item { grid-template-columns:32px minmax(0,1fr) auto; column-gap:10px; row-gap:1px; min-height:48px; padding:6px 0; border:0; background:transparent; } #view-ledger #view-spend .item + .item { border-top:0; } #view-ledger #view-spend .item .ic, #view-ledger #view-spend .item:has(.m) .ic { width:32px; height:32px; margin:0; align-self:center; border-radius:50%; font-size:16px; background:color-mix(in srgb,var(--ic, var(--mr-accent)) 16%,transparent); } #view-ledger #view-spend .item .t { font-size:13.5px; line-height:1.35; font-weight:650; letter-spacing:-.3px; } #view-ledger #view-spend .item .a { font-size:13.5px; line-height:1.35; font-weight:650; letter-spacing:-.3px; } #view-ledger #view-spend .item .c, #view-ledger #view-spend .item .m { color:var(--mr-muted); font-size:12px; line-height:1.35; } /* 보조 글자는 12px 아래로 내리지 않는다 — tests/browser/cases/spend.js */ #view-ledger #view-spend #list-more { padding:10px 0 4px !important; } /* ───────────── 지출 분석 ───────────── */ #view-ledger #mr-spend-analysis .st-card { border:0; border-radius:0; background:transparent; box-shadow:none; padding:12px 0 10px; margin:0; } #view-ledger #mr-spend-analysis .st-card + .st-card { border-top:8px solid var(--lg-band); margin-inline:calc(-1 * var(--lg-gut)); padding-inline:var(--lg-gut); } #view-ledger #mr-spend-analysis .st-card header h2 { font-size:14px; font-weight:750; letter-spacing:-.3px; } #view-ledger #mr-spend-analysis .st-bar { fill:color-mix(in srgb,var(--mr-accent) 26%,var(--fill)); opacity:1; } #view-ledger #mr-spend-analysis .st-bar.is-current { fill:var(--mr-accent); } #view-ledger #mr-spend-analysis .st-bar.is-current.is-open { opacity:.7; } #view-ledger #mr-spend-analysis .st-category-list { display:block; } #view-ledger #mr-spend-analysis .mr-spend-analysis-row { display:grid; grid-template-columns:30px minmax(0,1fr) auto auto; grid-template-areas:"ic name pct amt" "ic track track track"; align-items:center; column-gap:10px; row-gap:4px; width:100%; min-height:0; padding:6px 0; border:0; border-radius:0; background:transparent; text-align:left; } #view-ledger #mr-spend-analysis .mr-spend-analysis-row .ic { grid-area:ic; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; font-size:14px; background:color-mix(in srgb,var(--cat) 16%,transparent); } #view-ledger #mr-spend-analysis .mr-spend-analysis-row .mr-spend-analysis-name { grid-area:name; min-width:0; color:var(--mr-ink); font-size:13px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #view-ledger #mr-spend-analysis .mr-spend-analysis-row small { grid-area:pct; color:var(--mr-muted); font-size:11px; font-weight:500; } #view-ledger #mr-spend-analysis .mr-spend-analysis-row strong { grid-area:amt; min-width:76px; color:var(--mr-ink); font-size:13px; font-weight:650; text-align:right; } #view-ledger #mr-spend-analysis .mr-spend-analysis-row .st-track { grid-area:track; display:block; height:4px; border-radius:9px; background:var(--fill); overflow:hidden; } #view-ledger #mr-spend-analysis .mr-spend-analysis-row .st-track i { display:block; height:100%; border-radius:9px; background:var(--cat); } @media (min-width:760px) { #view-ledger #mr-spend-analysis .st-card + .st-card { border-top:0; margin-inline:0; padding-inline:0; } } /* 분석 맨 위: 지난달과 누적 비교 (요약에서 옮겨 옴, v0.0413) */ #view-ledger #mr-spend-analysis .st-pace .mr-spend-pace { margin:4px 0 0; } #view-ledger #mr-spend-analysis .st-pace .mr-spend-pace-plot { height:96px; } #view-ledger #mr-spend-analysis .mr-spend-pace-legend { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:10px; color:var(--text-secondary); font-size:11.5px; } #view-ledger #mr-spend-analysis .mr-spend-pace-legend span { display:inline-flex; align-items:center; gap:5px; } #view-ledger #mr-spend-analysis .mr-spend-pace-legend b { color:var(--mr-ink); font-weight:700; } #view-ledger #mr-spend-analysis .mr-spend-pace-legend i { display:inline-block; width:14px; height:0; border-top:2.4px solid var(--mr-accent); border-radius:2px; } #view-ledger #mr-spend-analysis .mr-spend-pace-legend .is-prev i { border-top:1.6px dashed var(--mr-muted); } #view-ledger #mr-spend-analysis .mr-spend-pace-legend .is-all { color:var(--mr-muted); } #view-ledger #mr-spend-analysis .mr-spend-pace-meta { margin-top:6px; color:var(--mr-muted); font-size:10.5px; line-height:1.4; } /* 고정비 */ #view-ledger #mr-spend-analysis .st-fixed-head { display:flex; align-items:baseline; gap:8px; margin:2px 0 8px; } #view-ledger #mr-spend-analysis .st-fixed-head strong { color:var(--mr-ink); font-size:18px; font-weight:750; letter-spacing:-.4px; } #view-ledger #mr-spend-analysis .st-fixed-head small { color:var(--mr-muted); font-size:11.5px; font-weight:600; } #view-ledger #mr-spend-analysis .st-split { height:8px; border-radius:9px; background:color-mix(in srgb,var(--mr-accent) 18%,var(--fill)); overflow:hidden; } #view-ledger #mr-spend-analysis .st-split i { display:block; height:100%; border-radius:9px; background:var(--mr-accent); } #view-ledger #mr-spend-analysis .st-note { margin:8px 0 0; color:var(--text-secondary); font-size:12px; line-height:1.45; } #view-ledger #mr-spend-analysis .st-note.is-more { color:var(--lg-bad); } #view-ledger #mr-spend-analysis .st-note.is-less { color:var(--lg-good); } #view-ledger #mr-spend-analysis .st-actions { display:flex; gap:6px; margin-top:10px; } #view-ledger #mr-spend-analysis .st-actions button { height:28px; min-height:28px; padding:0 10px; border:0; border-radius:999px; background:var(--fill); color:var(--text-secondary); font-size:11.5px; font-weight:600; } /* 자주 가는 곳 · 매달 나가는 것: 순위 행 (누르면 그 이름으로 검색한 내역) */ #view-ledger #mr-spend-analysis .st-rank { display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:6px 0; border:0; border-radius:0; background:transparent; color:inherit; text-align:left; } #view-ledger #mr-spend-analysis .st-rank b { flex:none; width:20px; height:20px; display:grid; place-items:center; border-radius:6px; background:var(--fill); color:var(--text-secondary); font-size:11px; font-weight:700; } #view-ledger #mr-spend-analysis .st-rank:first-of-type b { background:color-mix(in srgb,var(--mr-accent) 14%,transparent); color:var(--mr-accent); } #view-ledger #mr-spend-analysis .st-rank .nm { flex:1 1 auto; min-width:0; color:var(--mr-ink); font-size:13px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #view-ledger #mr-spend-analysis .st-rank small { flex:none; color:var(--mr-muted); font-size:11px; } #view-ledger #mr-spend-analysis .st-rank strong { flex:none; min-width:76px; color:var(--mr-ink); font-size:13px; font-weight:650; text-align:right; } /* 요일별: 쓴 날 하루 평균 막대, 가장 많은 요일만 진하게 */ #view-ledger #mr-spend-analysis .st-week-bars { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; align-items:end; height:92px; margin-top:4px; } #view-ledger #mr-spend-analysis .st-week-bars div { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; height:100%; } #view-ledger #mr-spend-analysis .st-week-bars i { display:block; width:100%; max-width:30px; border-radius:6px 6px 3px 3px; background:color-mix(in srgb,var(--mr-accent) 24%,var(--fill)); } #view-ledger #mr-spend-analysis .st-week-bars .is-top i { background:var(--mr-accent); } #view-ledger #mr-spend-analysis .st-week-bars span { color:var(--mr-muted); font-size:11px; line-height:1; } #view-ledger #mr-spend-analysis .st-week-bars .is-top span { color:var(--mr-ink); font-weight:700; } /* ───────────── 수입 ───────────── */ #view-ledger #view-income .income-card { margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; } #view-ledger #view-income .income-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:6px 0 0; } #view-ledger #view-income .income-head h2 { margin:0; color:var(--mr-muted); font-size:12px; font-weight:600; letter-spacing:0; } #view-ledger #view-income #income-total { display:block; margin-top:1px; color:var(--mr-ink); font-size:24px; line-height:1.25; font-weight:750; letter-spacing:-.6px; } /* ★ 공통 규칙 body button.mori-add 가 flex:0 0 32px 로 가로를 묶는다 — 높이만 키우면 32×36 타원이 된다(2026-09-26 v0.0415). */ #view-ledger #view-income #income-add { display:grid; place-items:center; flex:0 0 36px; width:36px; min-width:36px; height:36px; min-height:36px; aspect-ratio:1; padding:0 0 2px; border:0; border-radius:50%; background:var(--mr-accent); color:#fff; font-size:22px; line-height:1; box-shadow:0 8px 18px -8px color-mix(in srgb,var(--mr-accent) 70%,transparent); } #view-ledger #view-income .income-month { margin:4px 0 0; color:var(--mr-muted); font-size:11.5px; } #view-ledger #view-income .income-filters { display:flex; flex-wrap:wrap; gap:5px; margin:10px 0 0; } #view-ledger #view-income .income-filters select { flex:none; width:auto; height:28px; min-height:28px; padding:0 26px 0 10px; border:0; border-radius:999px; background-color:var(--fill); color:var(--mr-ink); font-size:11.5px; font-weight:600; } #view-ledger #view-income .income-filters input { flex:1 1 100%; height:36px; min-height:36px; padding:0 12px; border:0; border-radius:10px; background:var(--fill); font-size:13px; } #view-ledger #view-income #income-chart { margin-top:6px; } #view-ledger #view-income .income-trend-card { border:0; border-radius:0; background:transparent; box-shadow:none; padding:12px 0 8px; margin:0; } #view-ledger #view-income .income-trend-card header h3 { font-size:14px; font-weight:750; letter-spacing:-.3px; } #view-ledger #view-income .income-bar-rect { fill:var(--mr-accent); } #view-ledger #view-income #income-list { border-top:8px solid var(--lg-band); margin:8px calc(-1 * var(--lg-gut)) 0; padding:6px var(--lg-gut) 0; } #view-ledger #view-income .income-row { display:flex; align-items:center; gap:4px; } #view-ledger #view-income .income-row-main { flex:1 1 auto; min-width:0; display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; column-gap:10px; min-height:48px; padding:6px 0; border:0; background:transparent; color:inherit; text-align:left; } #view-ledger #view-income .income-row .ic { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; font-size:16px; background:color-mix(in srgb,var(--mr-accent) 13%,transparent); } #view-ledger #view-income .income-row .t { min-width:0; display:flex; flex-direction:column; gap:2px; } #view-ledger #view-income .income-row .t b { color:var(--mr-ink); font-size:13.5px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #view-ledger #view-income .income-row .t small { color:var(--mr-muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #view-ledger #view-income .income-row .a { color:var(--mr-accent); font-size:13.5px; font-weight:650; white-space:nowrap; } #view-ledger #view-income .income-row-del { flex:none; display:grid; place-items:center; width:30px; height:30px; min-height:30px; padding:0; border:0; border-radius:9px; background:transparent; color:var(--mr-muted); } #view-ledger #view-income .income-row-del:hover { background:var(--fill); color:var(--critical); } #view-ledger #view-income #income-list .empty { padding:22px 0; } /* 달력: 두 카드를 평평하게, 사이는 띠 */ @media (max-width:759px) { #view-ledger #pane-cal > .card { margin:0 calc(-1 * var(--lg-gut)); padding:14px var(--lg-gut); border:0; border-radius:0; background:transparent; box-shadow:none; } #view-ledger #pane-cal > .card ~ .card { border-top:8px solid var(--lg-band); } } /* ───────────── 투자 ───────────── */ /* 하위 메뉴: 상자 없는 알약, 고른 것만 옅은 파랑 */ #view-ledger #iv-nav { display:flex; gap:2px; margin:0 calc(-1 * var(--lg-gut)) 2px; padding:6px var(--lg-gut) 4px; overflow-x:auto; scrollbar-width:none; border:0; border-radius:0; background:var(--mr-card); box-shadow:none; } #view-ledger #iv-nav::-webkit-scrollbar { display:none; } #view-ledger #iv-nav button, #app #view-ledger #iv-nav button { flex:none; width:auto; min-height:30px; height:30px; padding:0 11px; border:0; border-radius:999px; background:transparent; box-shadow:none; color:var(--mr-muted); font-size:12.5px; font-weight:650; } #view-ledger #iv-nav button[aria-selected="true"], #app #view-ledger #iv-nav button[aria-selected="true"] { background:color-mix(in srgb,var(--mr-accent) 13%,transparent); color:var(--mr-accent); box-shadow:none; } /* 범위 칩 */ #view-ledger #iv-sub { display:flex; gap:5px; margin:4px calc(-1 * var(--lg-gut)) 8px !important; padding:0 var(--lg-gut); overflow-x:auto; scrollbar-width:none; border:0; background:none; box-shadow:none; } #view-ledger #iv-sub::-webkit-scrollbar { display:none; } #view-ledger #iv-sub button { flex:none; height:28px; min-height:28px; padding:0 10px; border:0; border-radius:999px; background:var(--fill); box-shadow:none; color:var(--text-secondary); font-size:11.5px; font-weight:600; } #view-ledger #iv-sub button[aria-pressed="true"] { background:var(--mr-ink); color:var(--mr-card); } /* 총평가: 크게 */ #view-ledger #iv-pane-glance .iv-total-line small { color:var(--mr-muted); font-size:12px; font-weight:600; } #view-ledger #iv-pane-glance .iv-total-line strong { color:var(--mr-ink); font-size:24px; line-height:1.25; font-weight:750; letter-spacing:-.6px; } /* ───────────── 자산 ───────────── */ #view-ledger #as-sub, #view-ledger .as-nav { display:flex; width:auto; gap:4px; margin:6px 0 4px; padding:0; border:0; background:none; box-shadow:none; } #view-ledger #as-sub button { min-width:0; min-height:30px; height:30px; padding:0 11px; border:0; border-radius:999px; background:transparent; box-shadow:none; color:var(--mr-muted); font-size:12.5px; font-weight:650; } #view-ledger #as-sub button[aria-pressed="true"], #view-ledger #as-sub button[aria-selected="true"] { background:color-mix(in srgb,var(--mr-accent) 13%,transparent); color:var(--mr-accent); box-shadow:none; } #view-ledger #as-tree .as-eyebrow { color:var(--mr-muted); font-size:12px; font-weight:600; } #view-ledger #as-tree .as-total { color:var(--mr-ink); font-size:24px; line-height:1.25; font-weight:750; letter-spacing:-.6px; } #view-ledger #as-tree .as-stack { display:flex; gap:2px; height:8px; margin:12px 0 2px; border-radius:9px; overflow:hidden; } #view-ledger #as-tree .as-stack i { display:block; height:100%; min-width:3px; } #view-ledger #as-tree .as-breakdown summary { display:grid; grid-template-columns:10px minmax(0,1fr) auto 16px; grid-template-areas:"dot label amt chev" "dot label pct chev"; column-gap:10px; row-gap:0; align-items:center; padding:9px 0; } #view-ledger #as-tree .as-breakdown summary .as-dot { grid-area:dot; width:10px; height:10px; border-radius:3px; } #view-ledger #as-tree .as-breakdown summary > span:not(.as-chevron) { grid-area:label; color:var(--mr-ink); font-size:13.5px; font-weight:650; } #view-ledger #as-tree .as-breakdown summary > b { grid-area:amt; color:var(--mr-ink); font-size:13.5px; font-weight:650; text-align:right; } #view-ledger #as-tree .as-breakdown summary .as-pct { grid-area:pct; color:var(--mr-muted); font-size:10.5px; font-weight:500; text-align:right; } #view-ledger #as-tree .as-breakdown summary .as-chevron { grid-area:chev; } #view-ledger #as-tree :is([data-asset-section="cash"] .as-dot, [data-stack="cash"]) { background:var(--mr-accent); } #view-ledger #as-tree :is([data-asset-section="deposit"] .as-dot, [data-stack="deposit"]) { background:#12b886; } #view-ledger #as-tree :is([data-asset-section="invest"] .as-dot, [data-stack="invest"]) { background:#f59f3a; } #view-ledger #as-tree :is([data-asset-section="other"] .as-dot, [data-stack="other"]) { background:#94a3b8; } /* 투자 한눈에·자산 세 판: 카드 테두리 대신 회색 띠 (휴대폰 폭) */ @media (max-width:759px) { /* ★ #iv-pane-glance 는 flex 세로 배치 + 카드 width:100% (refresh-invest.css). width 를 풀지 않으면 음수 여백이 카드를 넓히지 못하고 왼쪽으로 14px 밀기만 해서 오른쪽이 잘려 보였다(2026-09-27 사용자 신고). */ #view-ledger :is(#iv-pane-glance, #as-pane-summary, #as-pane-flow, #as-pane-records) > .card { width:auto; max-width:none; align-self:stretch; } #view-ledger :is(#iv-pane-glance, #as-pane-summary, #as-pane-flow, #as-pane-records) > .card { margin:0 calc(-1 * var(--lg-gut)); padding:14px var(--lg-gut) 12px; border:0; border-radius:0; background:transparent; box-shadow:none; } #view-ledger :is(#iv-pane-glance, #as-pane-summary, #as-pane-flow, #as-pane-records) > .card ~ .card { border-top:8px solid var(--lg-band); } #view-ledger #iv-pane-glance > .card:first-child { padding-top:8px; } #view-ledger #as-pane-summary > .card:first-child { padding-top:10px; } } /* 투자 한눈에 빈 상태: '내 투자 평가액 · 아직 없어요 · 안내'는 왼쪽 열, 갱신 버튼만 오른쪽 열. 자동 배치에 맡기면 '아직 없어요'가 버튼 폭의 좁은 열로 가서 한 글자씩 줄바꿈된다(2026-09-26 확인). */ #view-ledger #gl-hero:has(.mr-invest-empty-value) > :is(.k, .v, .n) { grid-column:1; } #view-ledger #gl-hero:has(.mr-invest-empty-value) > .iv-status-toolbar { grid-column:2; grid-row:1 / span 3; align-self:start; } #view-ledger #gl-hero .mr-invest-empty-value { color:var(--mr-ink); font-size:20px; line-height:1.3; font-weight:750; } /* ───────────── 투자 한눈에 다듬기 (v0.0417, 2026-09-27 “우측이 애매하게 짤려”) ───────────── */ @media (max-width:759px) { /* flex 간격 10px 와 회색 띠 8px 가 겹쳐 흰 틈이 생긴다 — 간격은 띠 하나로 */ #view-ledger #iv-pane-glance.mr-invest-layout { gap:0; } } /* 총평가 아래: 두 칸 나란히 → 이름…금액 한 줄씩. 평가손익이 두 줄로 꺾이지 않게 */ #app #view-ledger #iv-pane-glance .mr-invest-hero .iv-compact-metrics { display:grid; grid-template-columns:minmax(0,1fr); gap:3px; margin-top:8px; padding-top:0; border-top:0; } #app #view-ledger #iv-pane-glance .mr-invest-hero .iv-compact-metrics > div { display:flex; flex-direction:row; align-items:baseline; justify-content:space-between; gap:12px; } #app #view-ledger #iv-pane-glance .mr-invest-hero .iv-compact-metrics small { color:var(--mr-muted); font-size:12px; font-weight:500; } #app #view-ledger #iv-pane-glance .mr-invest-hero .iv-compact-metrics strong { font-size:13.5px; font-weight:650; white-space:nowrap; overflow-wrap:normal; } #app #view-ledger #iv-pane-glance .mr-invest-price-note, #app #view-ledger #iv-pane-glance .iv-refresh-health { margin-top:6px; font-size:11px; line-height:1.4; } #app #view-ledger #iv-pane-glance .iv-refresh-health + * { margin-top:0; } /* ───── 내 투자 목업 v2 (2026-09-27, 사용자 “좌/우 사이 공백이 너무 커 … 한 줄로”) ───── */ /* 총평가 안 1: 금액 → 손익 한 줄 → 얇은 선 아래 '투자 원금 · 주문가능 현금' */ /* ★ mori-trade.css 가 .iv-compact-metrics 를 grid-row:2 로 못 박아 둬서, 손익 줄이 그 아래로 밀렸다 — 차례를 적어 둔다 */ #app #view-ledger #iv-pane-glance .mr-invest-hero .iv-compact-metrics { grid-row:3; } #app #view-ledger #iv-pane-glance .iv-hero-pl { grid-row:2; grid-column:1/-1; margin-top:1px; font-size:14px; font-weight:700; line-height:1.35; } #app #view-ledger #iv-pane-glance .iv-hero-pl small { font-size:12px; font-weight:600; margin-left:2px; } #app #view-ledger #iv-pane-glance .mr-invest-hero .iv-compact-metrics { margin-top:10px; padding-top:9px; border-top:1px solid var(--mr-line); } #app #view-ledger #iv-pane-glance .iv-cash-note { color:var(--mr-muted); font-size:11px; font-weight:500; } /* 보유 종목: 표 한 줄 — 종목(계좌는 이름 옆 작은 글자) · 수량 · 평가액 · 수익률 */ #app #view-ledger #view-savings .iv-hold { width:100%; border-collapse:collapse; table-layout:auto; } #app #view-ledger #view-savings .iv-hold th { padding:4px 0 5px; border-bottom:1px solid var(--mr-line); color:var(--mr-muted); font-size:10.5px; font-weight:600; text-align:right; white-space:nowrap; } #app #view-ledger #view-savings .iv-hold th:first-child { text-align:left; } #app #view-ledger #view-savings .iv-hold td { padding:7px 0; border-bottom:1px solid color-mix(in srgb,var(--mr-line) 55%,transparent); font-size:12.5px; line-height:1.35; text-align:right; white-space:nowrap; } #app #view-ledger #view-savings .iv-hold :is(td,th) + :is(td,th) { padding-left:10px; } #app #view-ledger #view-savings .iv-hold td.nm { width:100%; max-width:0; text-align:left; overflow:hidden; text-overflow:ellipsis; } #app #view-ledger #view-savings .iv-hold .pos-name { color:var(--mr-ink); font-weight:650; } #app #view-ledger #view-savings .iv-hold .pos-account { margin-left:5px; padding:0; border:0; background:none; color:var(--mr-muted); font-size:10.5px; font-weight:500; } #app #view-ledger #view-savings .iv-hold .pos-account + .pos-account::before { content:"· "; } /* ★ 옛 .pos-qty 딱지 규칙(display:inline-flex·테두리)이 표 칸을 상자로 만들었다 — 표 칸으로 되돌린다 */ #app #view-ledger #view-savings .iv-hold td.pos-qty { display:table-cell; padding:7px 0 7px 10px; border:0; border-bottom:1px solid color-mix(in srgb,var(--mr-line) 55%,transparent); border-radius:0; background:none; color:var(--text-secondary); font-size:11.5px; font-weight:500; } #app #view-ledger #view-savings .iv-hold .val { color:var(--mr-ink); font-weight:650; } #app #view-ledger #view-savings .iv-hold .pl { font-weight:600; } #app #view-ledger #view-savings .iv-hold-sub td { padding:0 0 7px; text-align:left; color:var(--mr-muted); font-size:11px; } #app #view-ledger #view-savings .iv-hold-row:has(+ .iv-hold-sub) td { border-bottom:0; } /* 대표 지수: '이름 값 변동%' 한 줄 × 두 칸 */ #app #view-ledger #view-savings #idx-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:14px; row-gap:0; } #app #view-ledger #view-savings #idx-grid .idx-cell { display:flex; align-items:baseline; gap:6px; min-width:0; padding:6px 0; border:0; border-bottom:1px solid color-mix(in srgb,var(--mr-line) 55%,transparent); border-radius:0; background:none; white-space:nowrap; } #app #view-ledger #view-savings #idx-grid .nm3 { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--text-secondary); font-size:12.5px; font-weight:500; margin:0; } #app #view-ledger #view-savings #idx-grid .v3 { color:var(--mr-ink); font-size:12.5px; font-weight:650; margin:0; } #app #view-ledger #view-savings #idx-grid .c3 { width:50px; text-align:right; font-size:11px; font-weight:650; margin:0; } /* 보유 구성 범례: 한 줄씩 */ #app #view-ledger #view-savings .mr-invest-legend-item { min-height:0; padding:3px 0; }/* ───── 계획 진행 카드 목업 v2 (2026-09-27, 사용자 “지금 UI가 너무 별로야 … 사람이 사용하기 좋게”) ───── '800,000원 / 2,500,000원 매수' 한 줄 → 막대 → 남은 예산·주기 → 다음 매수 → 할 일 → 비율 → 회차 한 줄씩 */ #app #view-ledger #iv-pane-plan .mt-plan-state { border:0; border-radius:999px; padding:3px 9px; font-size:11.5px; background:color-mix(in srgb,var(--plan-accent) 12%,transparent); } #app #view-ledger #iv-pane-plan .mt-plan-state[data-warn="true"] { color:#b86e00; background:color-mix(in srgb,#f59f3a 15%,transparent); } #app #view-ledger #iv-pane-plan .mt-plan-state[data-state="done"] { color:var(--plan-muted); background:color-mix(in srgb,var(--plan-line) 60%,transparent); } #app #view-ledger #iv-pane-plan .mt-plan-headline { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px; margin:14px 0 8px; font-variant-numeric:tabular-nums; } #app #view-ledger #iv-pane-plan .mt-plan-headline .mt-plan-metrics { display:inline; } #app #view-ledger #iv-pane-plan .mt-plan-headline .mt-plan-metrics b { font-size:21px; font-weight:750; } #app #view-ledger #iv-pane-plan .mt-plan-headline .mt-plan-budget { display:inline-flex; align-items:baseline; gap:4px; margin:0; } #app #view-ledger #iv-pane-plan .mt-plan-headline .mt-plan-budget strong { font-size:14px; font-weight:600; color:var(--plan-muted); } #app #view-ledger #iv-pane-plan .mt-plan-headline .mt-plan-budget span { font-size:13px; } #app #view-ledger #iv-pane-plan .mt-plan-track { height:6px; margin:0 0 7px; } #app #view-ledger #iv-pane-plan .mt-plan-meta { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--plan-muted); } #app #view-ledger #iv-pane-plan .mt-plan-meta b { font-size:12px; font-weight:650; color:var(--plan-ink); } #app #view-ledger #iv-pane-plan .mt-plan-split { font-size:11.5px; margin-top:4px; } #app #view-ledger #iv-pane-plan .mt-plan-next { margin:14px 0 0; padding:11px 12px; border-radius:10px; background:color-mix(in srgb,var(--plan-accent) 7%,var(--plan-card)); } #app #view-ledger #iv-pane-plan .mt-plan-next small { font-size:11.5px; color:var(--plan-accent); font-weight:650; } #app #view-ledger #iv-pane-plan .mt-plan-next > div { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-top:2px; } #app #view-ledger #iv-pane-plan .mt-plan-next b { font-size:14px; font-weight:700; } #app #view-ledger #iv-pane-plan .mt-plan-next strong { font-size:14px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; } #app #view-ledger #iv-pane-plan .mt-plan-next p { margin:3px 0 0; font-size:11.5px; line-height:1.5; color:var(--plan-muted); } #app #view-ledger #iv-pane-plan .mt-plan-guidance { margin:10px 0 0; padding:10px 12px; font-size:12.5px; } #app #view-ledger #iv-pane-plan .mt-plan-guidance[data-warn="true"] { background:color-mix(in srgb,#f59f3a 12%,var(--plan-card)); } #app #view-ledger #iv-pane-plan .mt-plan-subhead { display:flex; justify-content:space-between; align-items:baseline; margin:18px 0 7px; } #app #view-ledger #iv-pane-plan .mt-plan-subhead h4 { margin:0; font-size:13px; font-weight:650; } #app #view-ledger #iv-pane-plan .mt-plan-subhead span { font-size:11.5px; color:var(--plan-muted); } #app #view-ledger #iv-pane-plan .mt-plan-stack { display:flex; height:8px; border-radius:4px; overflow:hidden; gap:2px; margin-bottom:6px; } #app #view-ledger #iv-pane-plan .mt-plan-stack i { display:block; height:100%; } #app #view-ledger #iv-pane-plan .mt-plan-ratio-row { display:grid; grid-template-columns:8px minmax(0,1fr) auto 38px; align-items:center; gap:8px; padding:4px 0; font-size:12.5px; } #app #view-ledger #iv-pane-plan .mt-plan-ratio-row > i { width:8px; height:8px; border-radius:2px; } #app #view-ledger #iv-pane-plan .mt-plan-ratio-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #app #view-ledger #iv-pane-plan .mt-plan-ratio-row b { font-weight:600; font-variant-numeric:tabular-nums; } #app #view-ledger #iv-pane-plan .mt-plan-ratio-row small { text-align:right; font-size:11.5px; color:var(--plan-muted); } #app #view-ledger #iv-pane-plan .mt-plan-cycle-heading { margin:18px 0 2px; } #app #view-ledger #iv-pane-plan .mt-plan-cycle-heading > span { font-size:11.5px; } /* 회차: 번호 · 날짜 · 금액 · 상태 · › 를 한 줄에 */ #app #view-ledger #iv-pane-plan .mt-cycle > summary { grid-template-columns:22px minmax(0,1fr) auto auto 10px; gap:8px; padding:10px 0; } #app #view-ledger #iv-pane-plan .mt-cycle-num { width:22px; height:22px; font-size:11px; } #app #view-ledger #iv-pane-plan .mt-cycle-num[data-tone="done"] { background:color-mix(in srgb,#12a36a 14%,transparent); border-color:transparent; color:#12a36a; } #app #view-ledger #iv-pane-plan .mt-cycle-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #app #view-ledger #iv-pane-plan .mt-cycle-name b { font-size:12.5px; white-space:nowrap; } #app #view-ledger #iv-pane-plan .mt-cycle-amt { font-size:12.5px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; } #app #view-ledger #iv-pane-plan .mt-cycle-amt[data-muted="true"] { color:var(--plan-muted); font-weight:500; } #app #view-ledger #iv-pane-plan .mt-cycle-state { max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; padding:2px 7px; border-radius:999px; font-size:11px; font-weight:600; background:color-mix(in srgb,var(--plan-line) 55%,transparent); } #app #view-ledger #iv-pane-plan .mt-cycle-state[data-tone="done"] { color:#12a36a; background:color-mix(in srgb,#12a36a 12%,transparent); } #app #view-ledger #iv-pane-plan .mt-cycle-state[data-tone="now"] { color:var(--plan-accent); background:color-mix(in srgb,var(--plan-accent) 12%,transparent); } #app #view-ledger #iv-pane-plan .mt-cycle-state[data-tone="wait"] { color:#b86e00; background:color-mix(in srgb,#f59f3a 15%,transparent); } #app #view-ledger #iv-pane-plan .mt-cycle-chev { font-style:normal; color:var(--plan-muted); transition:transform .15s; } #app #view-ledger #iv-pane-plan .mt-cycle[open] .mt-cycle-chev { transform:rotate(90deg); } #app #view-ledger #iv-pane-plan .mt-cycle-detail { padding-left:30px; } #app #view-ledger #iv-pane-plan .mt-plan-rules > summary { font-size:12.5px; color:var(--plan-ink); font-weight:600; } /* 버튼: '계획 수정' 은 넓게, 중지는 빨간 글씨 링크 */ #app #view-ledger #iv-pane-plan .mt-plan-actions { display:grid; gap:6px; margin-top:14px; } #app #view-ledger #iv-pane-plan .mt-plan-actions .mt-plan-edit { font-weight:650; font-size:13px; } #app #view-ledger #iv-pane-plan .mt-plan-actions .mt-stop-plan { border:0; background:none; min-height:36px; color:#d84a3a; font-size:12.5px; } @media (max-width:360px) { #app #view-ledger #iv-pane-plan .mt-cycle > summary { gap:6px; } #app #view-ledger #iv-pane-plan .mt-cycle-state { max-width:64px; } #app #view-ledger #iv-pane-plan .mt-plan-headline .mt-plan-metrics b { font-size:19px; } } /* ───── 자산 · 월별결산 (2026-09-27 목업 v3) — 달이 가로, 항목 칸 고정, 누르면 펼침 ───── */ #app #view-assets .as-settle-card { padding-inline:0; overflow:hidden; } #app #view-assets .as-st-top { display:grid; gap:1px; padding:0 16px; } #app #view-assets .as-st-top span { font-size:11.5px; color:var(--mr-muted); } #app #view-assets .as-st-top strong { font-size:18px; font-weight:750; letter-spacing:-.3px; color:var(--mr-ink); } #app #view-assets .as-st-top small { font-size:11px; color:var(--mr-muted); } #app #view-assets .as-st-bars { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; align-items:end; height:72px; padding:6px 16px 0; } #app #view-assets .as-st-bars div { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0; } #app #view-assets .as-st-bars b { font-size:10.5px; font-weight:700; white-space:nowrap; color:var(--mr-ink); } #app #view-assets .as-st-bars i { display:block; width:100%; max-width:28px; min-height:1px; border-radius:4px 4px 1px 1px; background:color-mix(in srgb,var(--mr-accent,#356cf5) 28%,transparent); margin-top:2px; } #app #view-assets .as-st-bars .cur i { background:var(--mr-accent,#356cf5); } #app #view-assets .as-st-bars small { font-size:10.5px; color:var(--mr-muted); margin-top:3px; } #app #view-assets .as-st-bars .cur small { color:var(--mr-ink); font-weight:700; } #app #view-assets .as-st-scroll { overflow-x:auto; margin-top:10px; } #app #view-assets .as-st-table { border-collapse:separate; border-spacing:0; min-width:100%; font-size:12px; font-variant-numeric:tabular-nums; } #app #view-assets .as-st-table :is(th,td) { padding:6px 8px 6px 0; text-align:right; white-space:nowrap; border-bottom:1px solid color-mix(in srgb,var(--mr-line) 60%,transparent); } #app #view-assets .as-st-table :is(th,td):last-child { padding-right:16px; } #app #view-assets .as-st-table thead th { font-size:11px; font-weight:650; color:var(--mr-muted); padding-top:0; border-bottom-color:var(--mr-line); } #app #view-assets .as-st-table thead th.cur { color:var(--mr-accent,#356cf5); } #app #view-assets .as-st-table tr > th:first-child { position:sticky; left:0; z-index:1; background:var(--mr-card,var(--surface-1,#fff)); text-align:left; padding-left:16px; padding-right:10px; min-width:96px; font-weight:500; color:var(--text-secondary); } #app #view-assets .as-st-table td.cur { background:color-mix(in srgb,var(--mr-line) 35%,transparent); } #app #view-assets .as-st-g td { font-weight:700; color:var(--mr-ink); } #app #view-assets .as-st-g th button { display:flex; align-items:center; gap:4px; width:100%; min-height:24px; padding:0; border:0; background:none; font:inherit; font-size:12.5px; font-weight:750; color:var(--mr-ink); text-align:left; } #app #view-assets .as-st-g th button i { font-style:normal; color:var(--mr-muted); font-size:12px; transition:transform .15s; } #app #view-assets .as-st-g th button[aria-expanded="true"] i { transform:rotate(90deg); } #app #view-assets .as-st-g.hl :is(th,td) { background:color-mix(in srgb,var(--mr-accent,#356cf5) 9%,var(--mr-card,#fff)); } #app #view-assets .as-st-g.hl th button { color:var(--mr-accent,#356cf5); } #app #view-assets .as-st-c td { color:var(--text-secondary); } #app #view-assets .as-st-c th { padding-left:28px !important; } #app #view-assets .as-st-c.sub2 :is(th,td) { font-size:11px; color:var(--mr-muted); } #app #view-assets .as-st-c.sub2 th { padding-left:38px !important; } #app #view-assets .as-st-note { margin:8px 16px 0; font-size:11px; line-height:1.5; color:var(--mr-muted); } /* ───── 모리 의견 한 장 (2026-09-27 목업 v3) — 숫자와 표만, 색은 상태 알약 하나 ───── */ #app #view-ledger #iv-pane-mori .mo-card { display:grid; gap:10px; } #app #view-ledger #iv-pane-mori .mo-head { display:flex; align-items:flex-start; gap:10px; } #app #view-ledger #iv-pane-mori .mo-head > div { flex:1; min-width:0; } #app #view-ledger #iv-pane-mori .mo-head small { font-size:11px; color:var(--mr-muted); } #app #view-ledger #iv-pane-mori .mo-head h2 { margin:2px 0 0; font-size:17px; font-weight:750; line-height:1.35; color:var(--mr-ink); word-break:keep-all; text-wrap:balance; } #app #view-ledger #iv-pane-mori .mo-pill { flex:none; height:20px; padding:0 8px; border-radius:999px; display:inline-flex; align-items:center; font-size:10.5px; font-weight:700; background:color-mix(in srgb,var(--mr-line) 70%,transparent); color:var(--text-secondary); white-space:nowrap; } #app #view-ledger #iv-pane-mori .mo-pill[data-tone="warn"] { background:color-mix(in srgb,#f59f3a 16%,transparent); color:#b86e00; } #app #view-ledger #iv-pane-mori .mo-pill[data-tone="stop"] { background:color-mix(in srgb,#e5484d 14%,transparent); color:#c9353a; } #app #view-ledger #iv-pane-mori .mo-sig { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--mr-line); border-radius:10px; } #app #view-ledger #iv-pane-mori .mo-sig > div { padding:7px 9px; min-width:0; } #app #view-ledger #iv-pane-mori .mo-sig > div + div { border-left:1px solid color-mix(in srgb,var(--mr-line) 60%,transparent); } #app #view-ledger #iv-pane-mori .mo-sig small { display:block; font-size:10.5px; color:var(--mr-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #app #view-ledger #iv-pane-mori .mo-sig b { display:block; margin-top:1px; font-size:13px; font-weight:750; color:var(--mr-ink); white-space:nowrap; } #app #view-ledger #iv-pane-mori .mo-sig em { display:block; font-style:normal; font-size:10.5px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #app #view-ledger #iv-pane-mori .mo-sh { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; } #app #view-ledger #iv-pane-mori .mo-sh h3 { margin:0; font-size:13.5px; font-weight:750; color:var(--mr-ink); } #app #view-ledger #iv-pane-mori .mo-sh span { font-size:11px; color:var(--mr-muted); } #app #view-ledger #iv-pane-mori .mo-tbl { width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums; } #app #view-ledger #iv-pane-mori .mo-tbl th { padding:0 0 5px; font-size:10.5px; font-weight:600; color:var(--mr-muted); text-align:right; border-bottom:1px solid var(--mr-line); white-space:nowrap; } #app #view-ledger #iv-pane-mori .mo-tbl td { padding:6px 0; text-align:right; border-bottom:1px solid color-mix(in srgb,var(--mr-line) 55%,transparent); white-space:nowrap; color:var(--mr-ink); } #app #view-ledger #iv-pane-mori .mo-tbl :is(th,td):first-child { text-align:left; width:100%; max-width:0; overflow:hidden; text-overflow:ellipsis; } #app #view-ledger #iv-pane-mori .mo-tbl :is(th,td) + :is(th,td) { padding-left:10px; } #app #view-ledger #iv-pane-mori .mo-tbl tfoot td { font-weight:750; border-bottom:0; padding-top:7px; } #app #view-ledger #iv-pane-mori .mo-chg { font-size:11px; color:var(--mr-muted) !important; } #app #view-ledger #iv-pane-mori .mo-kv { display:grid; grid-template-columns:auto 1fr; gap:5px 12px; margin:0; font-size:12px; } #app #view-ledger #iv-pane-mori .mo-kv:empty { display:none; } #app #view-ledger #iv-pane-mori .mo-kv dt { color:var(--mr-muted); } #app #view-ledger #iv-pane-mori .mo-kv dd { margin:0; text-align:right; font-weight:650; color:var(--mr-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #app #view-ledger #iv-pane-mori .mo-btns { display:grid; grid-template-columns:1fr 1.4fr; gap:6px; } #app #view-ledger #iv-pane-mori .mo-btns button { height:40px; border:0; border-radius:10px; font:inherit; font-size:13px; font-weight:700; } #app #view-ledger #iv-pane-mori .mo-again { background:color-mix(in srgb,var(--mr-line) 60%,transparent); color:var(--mr-ink); } #app #view-ledger #iv-pane-mori .mo-go { background:var(--mr-accent,#356cf5); color:#fff; } #app #view-ledger #iv-pane-mori button.mo-past { display:flex; border-radius:0; min-height:0; box-shadow:none; align-items:center; gap:8px; width:100%; padding:8px 0 0; border:0; border-top:1px solid color-mix(in srgb,var(--mr-line) 60%,transparent); background:none; font:inherit; font-size:12.5px; color:var(--mr-ink); text-align:left; } #app #view-ledger #iv-pane-mori .mo-past small { flex:1; font-size:11px; color:var(--mr-muted); } #app #view-ledger #iv-pane-mori .mo-past i { font-style:normal; color:var(--mr-muted); transition:transform .15s; } #app #view-ledger #iv-pane-mori .mo-past[aria-expanded="true"] i { transform:rotate(90deg); } #app #view-ledger #iv-pane-mori .mo-past-list > div { display:grid; grid-template-columns:78px 1fr; gap:8px; padding:5px 0; font-size:12px; border-bottom:1px solid color-mix(in srgb,var(--mr-line) 50%,transparent); } #app #view-ledger #iv-pane-mori .mo-past-list b { font-weight:600; color:var(--text-secondary); } #app #view-ledger #iv-pane-mori .mo-past-list span { color:var(--mr-ink); word-break:keep-all; } #app #view-ledger #iv-pane-mori .mo-more > summary { cursor:pointer; font-size:12.5px; font-weight:650; color:var(--text-secondary); min-height:36px; display:flex; align-items:center; } #app #view-ledger #iv-pane-mori .mo-more > .card { margin:8px 0 0; box-shadow:none; } /* ───── 계획 있음 (2026-09-27 목업 v3) — 색은 파랑 하나 + 회색, 할 일만 주황 ───── */ #app #view-ledger #iv-pane-plan .mt-quick { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:0 0 10px; } #app #view-ledger #iv-pane-plan .mt-quick button { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; min-height:0; padding:7px 2px; border:1px solid var(--plan-line); border-radius:10px; background:var(--plan-card); font:inherit; font-size:11px; font-weight:650; color:var(--plan-ink); } #app #view-ledger #iv-pane-plan .mt-quick button i { font-style:normal; width:22px; height:22px; border-radius:7px; display:grid; place-items:center; background:color-mix(in srgb,var(--plan-accent) 10%,transparent); color:var(--plan-accent); font-size:11px; font-weight:800; } #app #view-ledger #iv-pane-plan .mt-quick button span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #app #view-ledger #iv-pane-plan .mt-plan3 { padding:12px 14px; } #app #view-ledger #iv-pane-plan .mt-plan3 .mt-plan-heading { display:flex; align-items:center; gap:6px; } #app #view-ledger #iv-pane-plan .mt-plan3 .mt-plan-heading h3 { margin:0; font-size:15px; font-weight:750; } #app #view-ledger #iv-pane-plan .mt-plan3 .mt-plan-sum { margin-left:auto; font-size:11.5px; color:var(--plan-muted); white-space:nowrap; font-variant-numeric:tabular-nums; } #app #view-ledger #iv-pane-plan .mt-plan3 .mt-plan-sum b { font-size:13px; font-weight:750; color:var(--plan-ink); } #app #view-ledger #iv-pane-plan .mt-plan3 .mt-plan-sum :is(.mt-plan-metrics,.mt-plan-budget) { display:inline; margin:0; } #app #view-ledger #iv-pane-plan .mt-plan3 .mt-plan-sum strong { font-size:11.5px; font-weight:600; color:var(--plan-muted); } #app #view-ledger #iv-pane-plan .mt-plan3 .mt-plan-state[data-warn="true"] { color:var(--plan-muted); background:color-mix(in srgb,var(--plan-line) 60%,transparent); } #app #view-ledger #iv-pane-plan .mt-plan3 .mt-plan-track { height:5px; margin:8px 0 4px; } #app #view-ledger #iv-pane-plan .mt-plan3 .mt-plan-meta { font-size:11px; } #app #view-ledger #iv-pane-plan .mt-alloc { margin-top:12px; font-variant-numeric:tabular-nums; } #app #view-ledger #iv-pane-plan .mt-alloc-row { display:grid; grid-template-columns:minmax(0,1fr) 66px 70px; gap:8px; align-items:baseline; padding:6px 0; border-bottom:1px solid color-mix(in srgb,var(--plan-line) 60%,transparent); font-size:12.5px; } #app #view-ledger #iv-pane-plan .mt-alloc-row > span + span { text-align:right; justify-self:end; white-space:nowrap; } #app #view-ledger #iv-pane-plan .mt-alloc-row > span:last-child { font-weight:750; } #app #view-ledger #iv-pane-plan .mt-alloc-hdr { padding:0 0 4px; font-size:10.5px; font-weight:600; color:var(--plan-muted); border-bottom-color:var(--plan-line); } #app #view-ledger #iv-pane-plan .mt-alloc-hdr > span:last-child { font-weight:600; } #app #view-ledger #iv-pane-plan .mt-alloc-nm { min-width:0; } #app #view-ledger #iv-pane-plan .mt-alloc-nm b { display:block; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #app #view-ledger #iv-pane-plan .mt-alloc-nm small { margin-left:4px; font-size:10.5px; font-weight:500; color:var(--plan-muted); } #app #view-ledger #iv-pane-plan .mt-alloc-nm i { display:block; height:3px; margin-top:4px; border-radius:3px; background:color-mix(in srgb,var(--plan-line) 70%,transparent); overflow:hidden; } #app #view-ledger #iv-pane-plan .mt-alloc-nm u { display:block; height:100%; background:var(--plan-accent); border-radius:3px; } #app #view-ledger #iv-pane-plan .mt-alloc-sum { border-bottom:0; font-weight:750; } #app #view-ledger #iv-pane-plan .mt-alloc-sum > span:first-child { font-size:11.5px; color:var(--plan-muted); font-weight:600; } #app #view-ledger #iv-pane-plan .mt-tl { list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); position:relative; } #app #view-ledger #iv-pane-plan .mt-tl::before { content:""; position:absolute; left:calc(50% / var(--n)); right:calc(50% / var(--n)); top:10px; height:2px; background:color-mix(in srgb,var(--plan-line) 80%,transparent); } #app #view-ledger #iv-pane-plan .mt-tl-node { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; font-variant-numeric:tabular-nums; } #app #view-ledger #iv-pane-plan .mt-tl-node i { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:10px; font-weight:800; background:var(--plan-card); border:2px solid var(--plan-line); color:var(--plan-muted); } #app #view-ledger #iv-pane-plan .mt-tl-node[data-tone="done"] i { background:var(--plan-accent); border-color:var(--plan-accent); color:#fff; } #app #view-ledger #iv-pane-plan .mt-tl-node[data-tone="now"] i, #app #view-ledger #iv-pane-plan .mt-tl-node[data-tone="wait"] i { border-color:var(--plan-accent); color:var(--plan-accent); } #app #view-ledger #iv-pane-plan .mt-tl-node b { font-size:12px; font-weight:700; white-space:nowrap; } #app #view-ledger #iv-pane-plan .mt-tl-node small { font-size:10.5px; color:var(--plan-muted); } #app #view-ledger #iv-pane-plan .mt-tl-node em { font-style:normal; font-size:12px; font-weight:650; white-space:nowrap; color:var(--plan-ink); } #app #view-ledger #iv-pane-plan .mt-tl-node[data-tone="plan"] em { color:var(--plan-muted); font-weight:500; } #app #view-ledger #iv-pane-plan .mt-tl-node span { font-size:10px; font-weight:700; color:var(--plan-muted); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; } #app #view-ledger #iv-pane-plan .mt-tl-node[data-tone="wait"] span { color:#b86e00; } #app #view-ledger #iv-pane-plan .mt-plan3 .mt-plan-guidance { margin:12px 0 0; padding:7px 10px; font-size:11.5px; line-height:1.5; word-break:keep-all; } #app #view-ledger #iv-pane-plan .mt-plan3 .mt-plan-guidance[data-warn="true"] b { color:#b86e00; } #app #view-ledger #iv-pane-plan .mt-plan-orders, #app #view-ledger #iv-pane-plan .mt-plan3 .mt-plan-rules { margin:0; padding:0; border:0; } #app #view-ledger #iv-pane-plan .mt-plan-orders { margin-top:8px; } #app #view-ledger #iv-pane-plan .mt-plan-orders > summary, #app #view-ledger #iv-pane-plan .mt-plan3 .mt-plan-rules > summary { display:flex; justify-content:space-between; align-items:center; min-height:34px; padding:6px 0; font-size:12.5px; font-weight:600; color:var(--plan-ink); cursor:pointer; list-style:none; border-top:1px solid color-mix(in srgb,var(--plan-line) 60%,transparent); } #app #view-ledger #iv-pane-plan .mt-plan-orders > summary::-webkit-details-marker { display:none; } #app #view-ledger #iv-pane-plan .mt-plan-orders > summary span { font-size:11px; font-weight:500; color:var(--plan-muted); } #app #view-ledger #iv-pane-plan .mt-plan3 .mt-plan-rules { margin-top:0; } #app #view-ledger #iv-pane-plan .mt-plan3 .mt-plan-actions { display:flex; justify-content:space-between; align-items:center; margin-top:6px; } #app #view-ledger #iv-pane-plan .mt-plan3 .mt-plan-actions button { min-height:34px; padding:6px 0; border:0; background:none; font-size:12.5px; font-weight:650; } #app #view-ledger #iv-pane-plan .mt-plan3 .mt-plan-actions .mt-plan-edit { color:var(--plan-accent); } #app #view-ledger #iv-pane-plan .mt-plan3 .mt-plan-actions .mt-stop-plan { color:#d84a3a; } /* 승인 창 — 조금 더 크게(사용자 “조금 더 창을 키워도 될 것 같아”) */ #mt-command-dialog { width:min(560px,calc(100vw - 16px)); max-height:92dvh; } @media (max-width:600px) { #mt-command-dialog { width:calc(100vw - 12px); max-width:none; margin:auto auto 6px; border-radius:18px; } } /* ───── 월별결산 v0.0430 — 기간 · 그래프(체크로 끄기) · 올해 합계 · 오른쪽 아래 ＋ ───── */ #app #view-assets .as-st-range { display:flex; gap:0; margin:10px 16px 0; padding:2px; border-radius:9px; background:color-mix(in srgb,var(--mr-line) 60%,transparent); } #app #view-assets .as-st-range button { flex:1; min-height:28px; height:28px; padding:0; border:0; border-radius:7px; background:transparent; font:inherit; font-size:12px; font-weight:650; color:var(--mr-muted); box-shadow:none; } #app #view-assets .as-st-range button[aria-pressed="true"] { background:var(--mr-card,#fff); color:var(--mr-ink); box-shadow:0 1px 2px rgba(23,38,60,.16); } #app #view-assets .as-st-chart { padding:6px 12px 0; } #app #view-assets .as-st-chart svg { display:block; width:100%; height:auto; overflow:visible; } #app #view-assets .as-st-chart-empty { padding:24px 0; text-align:center; font-size:12px; color:var(--mr-muted); } #app #view-assets .as-st-grid { stroke:color-mix(in srgb,var(--mr-line) 80%,transparent); stroke-width:1; fill:none; } #app #view-assets .as-st-ax { fill:var(--mr-muted); font-size:9.5px; font-family:inherit; } #app #view-assets .as-st-ax.cur { fill:var(--mr-ink); font-weight:700; } #app #view-assets .as-st-bar { fill:color-mix(in srgb,var(--mr-accent,#356cf5) 30%,transparent); } #app #view-assets .as-st-bar.neg { fill:color-mix(in srgb,#e5484d 35%,transparent); } #app #view-assets .as-st-in { fill:none; stroke:var(--mr-accent,#356cf5); stroke-width:2; stroke-linejoin:round; } #app #view-assets .as-st-in-dot { fill:var(--mr-accent,#356cf5); } #app #view-assets .as-st-out { fill:none; stroke:var(--text-secondary,#52616d); stroke-width:1.6; stroke-dasharray:4 3; stroke-linejoin:round; } #app #view-assets .as-st-out-dot { fill:var(--text-secondary,#52616d); } #app #view-assets .as-st-legend { display:flex; flex-wrap:wrap; gap:4px 12px; padding:6px 16px 0; font-size:11.5px; color:var(--text-secondary); } #app #view-assets .as-st-chk { display:inline-flex; align-items:center; gap:5px; cursor:pointer; white-space:nowrap; } #app #view-assets .as-st-chk input { width:14px; height:14px; margin:0; accent-color:var(--mr-accent,#356cf5); } #app #view-assets .as-st-chk i { display:inline-block; width:12px; height:3px; border-radius:2px; background:var(--mr-accent,#356cf5); } #app #view-assets .as-st-chk[data-k="out"] i { background:repeating-linear-gradient(90deg,var(--text-secondary,#52616d) 0 4px,transparent 4px 7px); } #app #view-assets .as-st-chk[data-k="sur"] i { height:8px; width:8px; background:color-mix(in srgb,var(--mr-accent,#356cf5) 30%,transparent); } #app #view-assets .as-st-chk.yr { margin-left:auto; } #app #view-assets .as-st-chk.yr i { display:none; } #app #view-assets .as-st-table th.yr, #app #view-assets .as-st-table td.yr { border-left:1px solid var(--mr-line); padding-left:8px; font-weight:700; } #app #view-assets .as-st-table td.tap { cursor:pointer; text-decoration:underline dotted color-mix(in srgb,var(--mr-muted) 70%,transparent); text-underline-offset:3px; } #app #view-assets .as-st-table thead th[data-month="year"] { color:var(--mr-ink); } #view-ledger #as-pane-settle #as-income-add { position:fixed; right:18px; bottom:calc(var(--mr-bottom) + 28px + env(safe-area-inset-bottom,0px)); z-index:30; display:grid; place-items:center; width:48px; min-width:48px; height:48px; min-height:48px; margin:0; padding:0 0 3px; border:0; border-radius:50%; background:var(--mr-accent); color:#fff; font-size:28px; font-weight:400; line-height:1; box-shadow:0 10px 24px -8px color-mix(in srgb,var(--mr-accent) 70%,transparent); } @media (min-width:760px) { #view-ledger #as-pane-settle #as-income-add { right:max(18px, calc(50% - 560px)); } } #view-ledger #as-pane-settle[hidden] #as-income-add { display:none; } /* 수입 기록 시트 */ .as-income-sheet { width:min(520px,calc(100vw - 12px)); max-width:none; margin:auto auto 6px; padding:12px 16px 16px; border:0; border-radius:18px; background:var(--mr-card,#fff); color:var(--mr-ink,#17263c); } .as-income-sheet::backdrop { background:rgba(12,18,28,.38); } .as-income-sheet header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .as-income-sheet h3 { margin:0; font-size:15px; font-weight:750; } .as-income-sheet header small { font-size:11.5px; color:var(--mr-muted,#8793a0); } .as-income-sheet [data-sheet-close] { width:32px; height:32px; min-height:0; border:0; background:none; font-size:22px; color:var(--mr-muted,#8793a0); } .as-is-list { margin-top:8px; } .as-is-row { display:grid; grid-template-columns:40px minmax(0,1fr) auto auto auto; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid color-mix(in srgb,var(--mr-line,#e3e8ee) 70%,transparent); font-size:12.5px; } .as-is-row span { color:var(--mr-muted,#8793a0); } .as-is-row em { font-style:normal; color:var(--text-secondary,#52616d); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .as-is-row b { font-weight:700; font-variant-numeric:tabular-nums; } .as-is-row button { min-height:0; padding:3px 4px; border:0; background:none; font-size:11.5px; color:var(--mr-muted,#8793a0); } .as-is-row button[data-sheet-del] { color:#d84a3a; } .as-is-empty { font-size:12px; color:var(--mr-muted,#8793a0); padding:12px 0; } .as-is-add { width:100%; min-height:40px; margin-top:12px; border:0; border-radius:10px; background:var(--mr-accent,#356cf5); color:#fff; font:inherit; font-size:13.5px; font-weight:700; } /* ───── 월별결산 v0.0431 — 달 띠(잉여금) + 고른 달의 흐름. 표·그래프 없음, 넓게 ───── */ #app #view-assets .as-settle-card { padding:12px 0 10px; } #app #view-assets .as-ms-head { display:flex; justify-content:space-between; align-items:flex-end; gap:10px; padding:0 16px; } #app #view-assets .as-ms-head small { display:block; font-size:11.5px; color:var(--mr-muted); } #app #view-assets .as-ms-head strong { font-size:19px; font-weight:750; letter-spacing:-.3px; color:var(--mr-ink); } #app #view-assets .as-ms-head > span { font-size:11px; color:var(--mr-muted); white-space:nowrap; } #app #view-assets .as-ms { display:flex; gap:4px; overflow-x:auto; padding:10px 16px 4px; scrollbar-width:none; } #app #view-assets .as-ms::-webkit-scrollbar { display:none; } #app #view-assets .as-ms button { flex:0 0 54px; display:grid; grid-template-rows:12px 16px 40px 18px; justify-items:center; align-items:end; gap:1px; min-height:0; margin:0; padding:5px 0 5px; border:0; border-radius:10px; background:transparent; box-shadow:none; font:inherit; cursor:pointer; } #app #view-assets .as-ms button em { align-self:start; font-style:normal; font-size:9.5px; color:var(--mr-muted); } #app #view-assets .as-ms button b { font-size:11px; font-weight:700; color:var(--mr-ink); white-space:nowrap; font-variant-numeric:tabular-nums; } #app #view-assets .as-ms button i { display:block; width:18px; min-height:0; border-radius:4px 4px 1px 1px; background:color-mix(in srgb,var(--mr-accent,#356cf5) 26%,transparent); } #app #view-assets .as-ms button.neg i { background:color-mix(in srgb,#e5484d 35%,transparent); } #app #view-assets .as-ms button small { font-size:11.5px; color:var(--mr-muted); } #app #view-assets .as-ms button[aria-selected="true"] { background:color-mix(in srgb,var(--mr-accent,#356cf5) 10%,var(--mr-card,#fff)); } #app #view-assets .as-ms button[aria-selected="true"] i { background:var(--mr-accent,#356cf5); } #app #view-assets .as-ms button.neg[aria-selected="true"] i { background:#e5484d; } #app #view-assets .as-ms button[aria-selected="true"] small { color:var(--mr-accent,#356cf5); font-weight:750; } #app #view-assets .as-ms-year { display:flex; flex-wrap:wrap; gap:3px 12px; margin:6px 16px 0; padding-top:8px; border-top:1px solid color-mix(in srgb,var(--mr-line) 70%,transparent); font-size:11.5px; color:var(--text-secondary); } #app #view-assets .as-ms-year span:first-child { font-weight:650; color:var(--mr-ink); } #app #view-assets .as-ms-year b { color:var(--mr-ink); font-weight:700; font-variant-numeric:tabular-nums; } /* 고른 달의 흐름 — 색 칠한 칸 대신 줄로 */ #app #view-assets #as-pane-settle .as-month-card { padding:12px 16px 12px; } #app #view-assets .as-md-hero { display:grid; gap:2px; padding:2px 0 12px; border-bottom:1px solid var(--mr-line); } #app #view-assets .as-md-hero small { font-size:11.5px; color:var(--mr-muted); } #app #view-assets .as-md-hero strong { font-size:23px; font-weight:750; letter-spacing:-.4px; color:var(--mr-ink); font-variant-numeric:tabular-nums; } #app #view-assets .as-md-hero strong.down { color:#d84a3a; } #app #view-assets .as-md-hero strong.up { color:var(--mr-ink); } #app #view-assets .as-md-hero span { font-size:12px; color:var(--text-secondary); font-variant-numeric:tabular-nums; } #app #view-assets #as-pane-settle .as-flow-fold { margin:0; border:0; border-bottom:1px solid var(--mr-line); border-radius:0; background:transparent; overflow:visible; } #app #view-assets #as-pane-settle .as-flow-fold > summary { min-height:48px; padding:0; background:transparent !important; color:var(--mr-ink) !important; } #app #view-assets #as-pane-settle .as-flow-fold > summary strong { font-size:14px; font-weight:700; } #app #view-assets #as-pane-settle .as-flow-fold > summary b { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; } #app #view-assets #as-pane-settle .as-flow-fold[open] > summary .as-flow-chevron, #app #view-assets #as-pane-settle .as-flow-nested[open] > summary .as-flow-chevron { transform:rotate(180deg); } #app #view-assets #as-pane-settle .as-flow-nested:not([open]) > summary .as-flow-chevron { transform:none; } #app #view-assets #as-pane-settle .as-flow-fold-body { padding:0 0 10px; } #app #view-assets #as-pane-settle .as-flow-row { display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:34px; padding:0 0 0 12px; font-size:13px; color:var(--mr-ink); } #app #view-assets #as-pane-settle .as-flow-row span { color:var(--text-secondary); } #app #view-assets #as-pane-settle .as-flow-row b { font-weight:650; font-variant-numeric:tabular-nums; } #app #view-assets #as-pane-settle .as-flow-row.sub2 { min-height:28px; padding-left:24px; font-size:12px; } #app #view-assets #as-pane-settle .as-flow-row.sub2 :is(span,b) { color:var(--mr-muted); font-weight:500; } #app #view-assets #as-pane-settle .as-flow-row.tap { cursor:pointer; border-radius:8px; } #app #view-assets #as-pane-settle .as-flow-row.tap span::after { content:" ›"; color:var(--mr-muted); } #app #view-assets #as-pane-settle .as-flow-row.tap:hover { background:color-mix(in srgb,var(--mr-line) 35%,transparent); } #app #view-assets #as-pane-settle .as-flow-nested { margin:0 0 0 12px; border:0; border-radius:0; } #app #view-assets #as-pane-settle .as-flow-nested > summary { min-height:34px; padding:0; background:transparent; font-size:13px; } #app #view-assets #as-pane-settle .as-flow-nested > summary strong { font-weight:600; color:var(--text-secondary); } #app #view-assets #as-pane-settle .as-flow-nested-body { background:transparent; padding:0 0 4px; } #app #view-assets #as-pane-settle .as-ratio-compact { min-height:36px; padding:0 0 0 12px; border:0; font-size:13px; } #app #view-assets #as-pane-settle .as-ratio-compact span { color:var(--text-secondary); font-weight:500; } #app #view-assets #as-pane-settle .as-ratio-compact strong { font-size:13px; } #app #view-assets .as-md-sub { padding:8px 0 0 12px; font-size:11px; font-weight:650; color:var(--mr-muted); } #app #view-assets .as-md-links { display:flex; justify-content:space-between; align-items:center; padding:4px 0 0 12px; } #app #view-assets .as-md-links [data-flow-go] { min-height:30px; padding:4px 0; border:0; background:none; box-shadow:none; color:var(--mr-accent,#356cf5); font:inherit; font-size:12.5px; font-weight:650; } #app #view-assets .as-md-empty { margin:0; padding:6px 0 4px 12px; font-size:12px; color:var(--mr-muted); } #app #view-assets .as-md-line { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:12px 0 0; font-size:13px; } #app #view-assets .as-md-line small { display:block; font-size:10.5px; color:var(--mr-muted); } #app #view-assets .as-md-line b { font-weight:700; font-variant-numeric:tabular-nums; } #app #view-assets #as-pane-settle .as-month-note { margin:10px 0 0; font-size:11px; line-height:1.5; } /* 개요 — 총자산 아래 ‘얼마나 늘었나’ 세 칸 */ #app #view-assets .as-deltas { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:12px 0 4px; border:1px solid var(--mr-line); border-radius:12px; } #app #view-assets .as-deltas > div { padding:8px 10px; min-width:0; } #app #view-assets .as-deltas > div + div { border-left:1px solid color-mix(in srgb,var(--mr-line) 70%,transparent); } #app #view-assets .as-deltas small { display:block; font-size:11px; color:var(--mr-muted); white-space:nowrap; } #app #view-assets .as-deltas b { display:block; margin-top:1px; font-size:13.5px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; } #app #view-assets .as-deltas b.up { color:#d84a3a; } #app #view-assets .as-deltas b.down { color:var(--mr-accent,#356cf5); } #app #view-assets .as-deltas.empty { display:block; padding:9px 12px; font-size:12px; color:var(--mr-muted); } /* 네 가지 자산 줄은 색 점 없이 */ #app #view-assets #as-tree .as-dot { display:none; } /* ───── 지출 탭 v0.0431 — 밑줄 탭 + 같은 줄 오른쪽 검색·필터, 분류 칩 줄 없앰 ───── */ #view-ledger #view-spend .ctrl-row { display:flex; align-items:flex-end; gap:8px; margin:12px 0 4px; border-bottom:1px solid var(--mr-line); } #view-ledger #view-spend #spend-sub { display:flex; flex:none; width:auto; gap:16px; margin:0; padding:0; border:0; border-radius:0; background:transparent; } #view-ledger #view-spend #spend-sub button { flex:none; height:38px; min-height:38px; padding:0 1px; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--mr-muted); font-size:14px; font-weight:650; } #view-ledger #view-spend #spend-sub button[aria-pressed="true"] { background:transparent; color:var(--mr-ink); box-shadow:inset 0 -2px 0 var(--mr-ink); } #view-ledger #view-spend .ctrl-row .ctrl-spacer { flex:1 1 auto; } #view-ledger #view-spend .ctrl-row #search-row { flex:0 1 172px; min-width:0; margin:0 0 5px; gap:4px; } #view-ledger #view-spend .ctrl-row #spend-q { height:32px; min-height:32px; padding:0 10px; font-size:12.5px; border-radius:9px; } #view-ledger #view-spend .ctrl-row #sf-open { width:32px; height:32px; min-height:32px; border-radius:9px; } #view-ledger #mr-spend-chips { display:none !important; } /* ───── 월별결산 v0.0432 — 들어온 돈 · 나간 돈 · 남은 돈을 크게, 아래 ‘달마다’ 세로 목록 ───── */ #app #view-assets #as-pane-settle .as-month-card { padding:14px 16px 12px; } #app #view-assets #as-pane-settle #as-month-heading { font-size:16px; font-weight:750; } #app #view-assets .as-io { display:grid; gap:2px; padding:8px 0 14px; border-bottom:1px solid var(--mr-line); } #app #view-assets .as-io-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:4px 0; } #app #view-assets .as-io-row span { font-size:14px; color:var(--text-secondary); font-weight:600; } #app #view-assets .as-io-row b { font-size:22px; font-weight:750; letter-spacing:-.4px; color:var(--mr-ink); font-variant-numeric:tabular-nums; white-space:nowrap; } #app #view-assets .as-io-row.out b { color:var(--text-secondary); } #app #view-assets .as-io-row.left { padding-top:6px; } #app #view-assets .as-io-row.left span { color:var(--mr-ink); font-weight:750; } #app #view-assets .as-io-row.left b { font-size:26px; color:var(--mr-accent,#356cf5); } #app #view-assets .as-io-row.left b.neg { color:#d84a3a; } #app #view-assets .as-io-bar { display:flex; height:12px; margin:8px 0 2px; border-radius:6px; overflow:hidden; background:color-mix(in srgb,var(--mr-line) 55%,transparent); } #app #view-assets .as-io-bar i { display:block; height:100%; } #app #view-assets .as-io-bar i.out { background:color-mix(in srgb,var(--text-secondary,#52616d) 45%,transparent); } #app #view-assets .as-io-bar i.out.over { background:color-mix(in srgb,#e5484d 55%,transparent); } #app #view-assets .as-io-bar i.left { background:var(--mr-accent,#356cf5); } #app #view-assets .as-io-note { margin:4px 0 0; font-size:12px; color:var(--mr-muted); } #app #view-assets #as-pane-settle .as-flow-fold > summary strong { font-size:13px; font-weight:650; color:var(--text-secondary); } #app #view-assets #as-pane-settle .as-flow-fold > summary b { font-size:13px; font-weight:650; color:var(--text-secondary); } #app #view-assets #as-pane-settle .as-flow-fold > summary { min-height:42px; } /* 달마다 */ #app #view-assets .as-settle-card { padding:14px 16px 10px; } #app #view-assets .as-ml-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; } #app #view-assets .as-ml-head h3 { margin:0; font-size:15px; font-weight:750; color:var(--mr-ink); } #app #view-assets .as-ml-head span { font-size:12px; color:var(--mr-muted); } #app #view-assets .as-ml-head b { color:var(--mr-accent,#356cf5); font-weight:750; } #app #view-assets .as-ml-year { margin:4px 0 6px; font-size:12px; color:var(--text-secondary); line-height:1.6; } #app #view-assets .as-ml-year span { font-weight:700; color:var(--mr-ink); margin-right:2px; } #app #view-assets .as-ml-year b { color:var(--mr-ink); font-weight:700; } #app #view-assets .as-ml { display:grid; } #app #view-assets .as-ml button { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-height:52px; margin:0; padding:8px 8px; border:0; border-bottom:1px solid color-mix(in srgb,var(--mr-line) 60%,transparent); border-radius:0; background:transparent; box-shadow:none; font:inherit; text-align:left; cursor:pointer; } #app #view-assets .as-ml button:last-child { border-bottom:0; } #app #view-assets .as-ml button[aria-pressed="true"] { background:color-mix(in srgb,var(--mr-accent,#356cf5) 8%,transparent); border-radius:10px; } #app #view-assets .as-ml .m { font-size:14px; font-weight:700; color:var(--mr-ink); white-space:nowrap; } #app #view-assets .as-ml .m small { display:block; font-size:10px; font-weight:600; color:var(--mr-accent,#356cf5); } #app #view-assets .as-ml .bar { display:flex; height:10px; border-radius:5px; overflow:hidden; background:transparent; } #app #view-assets .as-ml .bar i { display:block; height:100%; } #app #view-assets .as-ml .bar i.out { background:color-mix(in srgb,var(--text-secondary,#52616d) 38%,transparent); } #app #view-assets .as-ml .bar i.left { background:var(--mr-accent,#356cf5); } #app #view-assets .as-ml .bar i.over { background:color-mix(in srgb,#e5484d 55%,transparent); } #app #view-assets .as-ml .n { display:grid; justify-items:end; min-width:78px; } #app #view-assets .as-ml .n b { font-size:15px; font-weight:750; color:var(--mr-ink); font-variant-numeric:tabular-nums; white-space:nowrap; } #app #view-assets .as-ml .n b.neg { color:#d84a3a; } #app #view-assets .as-ml .n small { font-size:11px; color:var(--mr-muted); font-variant-numeric:tabular-nums; white-space:nowrap; } #app #view-assets .as-ml button.empty .m { color:var(--mr-muted); } #app #view-assets .as-ml-note { margin:8px 0 0; font-size:11px; color:var(--mr-muted); line-height:1.5; } /* 카드 결제일 (2026-09-27) — 지출 달 줄 오른쪽 작은 알약, 설정은 두 칸 나란히 */ #view-ledger #view-spend .mr-spend-summary #cyc-pay { order:4; flex:none; height:20px; padding:0 7px; border-radius:999px; background:var(--fill); color:var(--text-secondary); font-size:10.5px; font-weight:650; line-height:20px; white-space:nowrap; } #view-ledger #view-spend .mr-spend-summary #cyc-pay[hidden] { display:none; } .set-duo { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .set-duo .field { margin:0; } .set-duo select { width:100%; } /* ───── 결산표 두 장 v0.0434 — 월별결산 = 가계 손익표, 개요 = 자산 현황표 (회사 월간 결산처럼 한 장) ───── */ #app #view-assets .as-settle-card, #app #view-assets #as-pane-summary > .card:first-child { padding:12px 0 12px; } #app #view-assets .st-doc { padding:0 16px; } #app #view-assets .st-doc-h { display:flex; align-items:center; gap:4px; } #app #view-assets .st-doc-h h2 { margin:0; font-size:15px; font-weight:750; color:var(--mr-ink); } #app #view-assets .st-doc-h small { font-size:11px; color:var(--mr-muted); } #app #view-assets .st-sp { flex:1; } #app #view-assets .st-arr { width:24px; min-width:24px; height:26px; min-height:26px; padding:0; border:0; background:none; box-shadow:none; color:var(--text-secondary); font-size:17px; line-height:1; } #app #view-assets .st-arr:disabled { opacity:.3; } #app #view-assets .st-doc-sub { margin-top:1px; font-size:11px; color:var(--mr-muted); } #app #view-assets .st-kpi { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:10px 16px 0; border:1px solid var(--mr-line); border-radius:10px; } #app #view-assets .st-kpi > div { padding:7px 9px; min-width:0; } #app #view-assets .st-kpi > div + div { border-left:1px solid color-mix(in srgb,var(--mr-line) 60%,transparent); } #app #view-assets .st-kpi small { display:block; font-size:10.5px; color:var(--mr-muted); } #app #view-assets .st-kpi b { display:block; margin-top:1px; font-size:15px; font-weight:750; color:var(--mr-ink); white-space:nowrap; font-variant-numeric:tabular-nums; } #app #view-assets .st-kpi b.st-acc { color:var(--mr-accent,#356cf5); } #app #view-assets .st-kpi em { display:block; font-style:normal; font-size:10.5px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #app #view-assets .st-up { color:#d84a3a; } #app #view-assets .st-down { color:var(--mr-accent,#356cf5); } #app #view-assets .st-kpi b.st-up { color:#d84a3a; } #app #view-assets .st-kpi b.st-down { color:var(--mr-accent,#356cf5); } #app #view-assets .st-dash { color:var(--mr-muted); } #app #view-assets .st-cmp { display:flex; margin:10px 16px 0; padding:2px; border-radius:8px; background:color-mix(in srgb,var(--mr-line) 60%,transparent); } #app #view-assets .st-cmp button { flex:1; height:26px; min-height:26px; padding:0; border:0; border-radius:6px; background:transparent; box-shadow:none; font:inherit; font-size:11.5px; font-weight:650; color:var(--mr-muted); white-space:nowrap; } #app #view-assets .st-cmp button[aria-pressed="true"] { background:var(--mr-card,#fff); color:var(--mr-ink); box-shadow:0 1px 2px rgba(23,38,60,.14); } #app #view-assets .st-table { width:calc(100% - 32px); margin:8px 16px 0; border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums; } #app #view-assets .st-table th { padding:4px 0 5px; border-bottom:1.5px solid var(--mr-ink); font-size:10.5px; font-weight:650; color:var(--mr-muted); text-align:right; white-space:nowrap; } #app #view-assets .st-table th:first-child { text-align:left; } #app #view-assets .st-table td { padding:4.5px 0; border-bottom:1px solid color-mix(in srgb,var(--mr-line) 55%,transparent); text-align:right; white-space:nowrap; color:var(--mr-ink); } #app #view-assets .st-table td:first-child { text-align:left; width:100%; max-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--text-secondary); } #app #view-assets .st-table :is(td,th) + :is(td,th) { padding-left:8px; } #app #view-assets .st-table td.st-c { width:58px; } #app #view-assets .st-table tr.g td { padding-top:6px; font-weight:750; border-bottom-color:var(--mr-line); } #app #view-assets .st-table tr.g td:first-child { color:var(--mr-ink); } #app #view-assets .st-table tr.s td:first-child { padding-left:10px; } #app #view-assets .st-table tr.t td { padding-top:6px; padding-bottom:6px; font-weight:800; background:color-mix(in srgb,var(--mr-accent,#356cf5) 8%,transparent); border-top:1.5px solid var(--mr-ink); border-bottom:1.5px solid var(--mr-ink); } #app #view-assets .st-table tr.t td:first-child { padding-left:6px; color:var(--mr-accent,#356cf5); } #app #view-assets .st-table tr.m td { font-size:11.5px; color:var(--mr-muted); } #app #view-assets .st-table tr.tap { cursor:pointer; } #app #view-assets .st-table tr.tap td:first-child i { font-style:normal; color:var(--mr-muted); display:inline-block; transition:transform .15s; } #app #view-assets .st-table tr.tap.open td:first-child i { transform:rotate(90deg); } #app #view-assets .st-table tr.tap:hover td { background:color-mix(in srgb,var(--mr-line) 25%,transparent); } #app #view-assets .st-table tr.sub td { padding:3px 0; font-size:11px; color:var(--mr-muted); border-bottom-style:dashed; } #app #view-assets .st-table tr.sub td:first-child { padding-left:22px; } #app #view-assets .st-memo { margin:10px 16px 0; padding:8px 10px; border-left:3px solid var(--mr-ink); background:color-mix(in srgb,var(--mr-line) 30%,transparent); font-size:12px; line-height:1.6; color:var(--mr-ink); } #app #view-assets .st-memo p { margin:0; } #app #view-assets .st-memo b { font-weight:700; } #app #view-assets .st-foot { margin:8px 16px 0; font-size:10.5px; line-height:1.5; color:var(--mr-muted); } #app #view-assets .st-spark { display:flex; align-items:center; gap:10px; margin:8px 16px 0; font-size:11px; color:var(--mr-muted); } #app #view-assets .st-spark svg { flex:1; height:26px; } #app #view-assets .st-spark polyline { fill:none; stroke:var(--mr-accent,#356cf5); stroke-width:1.6; } #app #view-assets .st-goal { display:flex; align-items:center; gap:8px; margin:10px 16px 0; padding-top:8px; border-top:1px solid color-mix(in srgb,var(--mr-line) 60%,transparent); font-size:11.5px; color:var(--text-secondary); } #app #view-assets .st-goal b { margin-left:auto; font-weight:700; color:var(--mr-ink); } #app #view-assets #as-tree .as-goal-form { margin:6px 16px 0; } #app #view-assets #as-tree .as-balance-note { margin:8px 16px 0; } /* ───── 잉여금 사용안 v0.0441 — 손익표 아래: 예금사다리·적금 / 투자(계획 · 잉여금 몫 · CMA) · 식 한 줄 · 실제 매수 막대 ───── */ #app #view-assets .st-sec{display:flex;align-items:baseline;gap:6px;margin:16px 16px 0} #app #view-assets .st-sec h3{margin:0;font-size:13px;font-weight:750;color:var(--mr-ink)} #app #view-assets .st-sec small{font-size:11px;color:var(--mr-muted)} #app #view-assets .st-sp{flex:1} #app #view-assets .st-link{min-height:0;height:auto;padding:0;border:0;background:none;box-shadow:none;font-size:11.5px;font-weight:650;color:var(--mr-accent,#356cf5)} #app #view-assets .st-plan{margin-top:6px} #app #view-assets .st-plan td small{margin-left:4px;font-size:10.5px;font-weight:600;color:var(--mr-muted)} #app #view-assets .st-formula{margin:10px 16px 0;padding:9px 11px;border-radius:10px;background:color-mix(in srgb,var(--mr-accent,#356cf5) 9%,transparent);font-size:12.5px;line-height:1.6;color:var(--mr-ink)} #app #view-assets .st-formula b{font-weight:750} #app #view-assets .st-formula strong{font-size:14px;font-weight:800;color:var(--mr-accent,#356cf5)} #app #view-assets .st-formula small{display:block;margin-top:2px;font-size:11px;color:var(--text-secondary)} #app #view-assets .st-bar{margin:10px 16px 0;padding:8px 10px;border:1px solid var(--mr-line);border-radius:10px;font-size:12px} #app #view-assets .st-bar-h{display:flex;align-items:baseline;gap:6px} #app #view-assets .st-bar-h b{font-size:14px;font-weight:800;color:var(--mr-ink)} #app #view-assets .st-ok{color:var(--mr-accent,#356cf5);font-weight:700} #app #view-assets .st-bar-t{position:relative;height:8px;margin:8px 0 5px;border-radius:4px;background:color-mix(in srgb,var(--mr-line) 70%,transparent)} #app #view-assets .st-bar-t i{position:absolute;top:0;bottom:0;border-radius:4px} #app #view-assets .st-bar-t .a{left:0;background:var(--mr-accent,#356cf5)} #app #view-assets .st-bar-t .b{background:color-mix(in srgb,var(--mr-accent,#356cf5) 45%,transparent)} #app #view-assets .st-bar-t .plan{top:-3px;bottom:-3px;width:0;border-left:2px solid var(--mr-ink);border-radius:0} #app #view-assets .st-bar-k{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:10.5px;color:var(--mr-muted)} #app #view-assets .st-bar-k i{display:inline-block;width:8px;height:8px;margin-right:4px;border-radius:2px;vertical-align:middle} #app #view-assets .st-bar-k i.a{background:var(--mr-accent,#356cf5)} #app #view-assets .st-bar-k i.b{background:color-mix(in srgb,var(--mr-accent,#356cf5) 45%,transparent)} #app #view-assets .st-bar-k i.plan{width:0;height:10px;border-left:2px solid var(--mr-ink);border-radius:0} /* CMA 통장 · 이 달 — 실제 출금(투자 이체) · 이자 · 잔액 맞추기 (2026-09-27) */ #app #view-assets .st-cma{margin:10px 16px 0;padding:9px 11px;border:1px solid var(--mr-line);border-radius:10px;font-size:12px} #app #view-assets .st-cma-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-bottom:4px} #app #view-assets .st-cma-h b{font-size:13px;font-weight:750;color:var(--mr-ink)} #app #view-assets .st-cma-h small{font-size:11px;color:var(--mr-muted)} #app #view-assets .st-flow{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} #app #view-assets .st-flow td{padding:4px 0;border-bottom:1px solid color-mix(in srgb,var(--mr-line) 55%,transparent);text-align:right;white-space:nowrap;color:var(--mr-ink)} #app #view-assets .st-flow td:first-child{text-align:left;color:var(--text-secondary);white-space:normal} #app #view-assets .st-flow td small{margin-left:4px;font-size:10.5px;color:var(--mr-muted)} #app #view-assets .st-flow tr.t td{font-weight:800;border-bottom:0;border-top:1.5px solid var(--mr-ink)} #app #view-assets .st-cma-note{margin-top:6px;padding:6px 8px;border-radius:8px;background:color-mix(in srgb,var(--mr-line) 35%,transparent);font-size:11.5px;line-height:1.5;color:var(--text-secondary)} #app #view-assets .st-cma-note b{color:var(--mr-ink)} /* 개요 = 자산 추이 (2026-09-27) — 달 말 순자산 막대 12개월 · 최근 6개월 표 · 지금 구성 한 줄 */ #app #view-assets .st-bars{display:flex;align-items:flex-end;gap:5px;height:96px;margin:12px 16px 0;padding-bottom:16px;border-bottom:1px solid var(--mr-line)} #app #view-assets .st-bars>div{position:relative;flex:1;min-width:0;border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--mr-muted) 28%,transparent)} #app #view-assets .st-bars>div.on{background:var(--mr-accent,#356cf5)} #app #view-assets .st-bars>div span{position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);font-size:9.5px;color:var(--mr-muted);white-space:nowrap} #app #view-assets .st-bars>div.on span{color:var(--mr-accent,#356cf5);font-weight:700} #app #view-assets .st-trend td small{font-size:10px;color:var(--mr-muted)} #app #view-assets .st-trend tr.t td:first-child{white-space:nowrap} #app #view-assets .st-now-mix{margin:8px 16px 0;font-size:11.5px;line-height:1.7;color:var(--text-secondary)} #app #view-assets .st-now-mix b{font-weight:700;color:var(--mr-ink)} #app #view-assets #as-tree .st-kpi em { white-space:normal; overflow:visible; } #app #view-assets .st-nw { white-space:nowrap; } /* ───── 내 투자 목업 ③ (2026-09-27) — 이번 달 매수 막대 · 계좌별 표 · 보유 종목 표 · 지수 한 줄. 총평가는 v0.0447 모양(2026-09-28 사용자 “총 평가 부분만 돌려”) ───── */ /* 이번 달 매수 */ #app #view-ledger #iv-pane-glance #iv-monthly { display:flex; flex-direction:column; align-items:stretch; gap:0; margin-block:0; border-left:0; } #app #view-ledger #iv-pane-glance .iv-mon-h { display:flex; align-items:baseline; gap:6px; } #app #view-ledger #iv-pane-glance .iv-mon-h h2 { margin:0; font-size:14px; } #app #view-ledger #iv-pane-glance .iv-mon-h small { margin-right:auto; font-size:11px; color:var(--mr-muted); } #app #view-ledger #iv-pane-glance #iv-monthly .iv-mon-link { align-self:auto; max-width:none; min-height:0; padding:0; border:0; background:none; box-shadow:none; color:var(--mr-accent,#356cf5); font-size:11.5px; font-weight:600; } #app #view-ledger #iv-pane-glance .iv-mon-num { display:flex; align-items:baseline; gap:6px; margin-top:6px; font-variant-numeric:tabular-nums; } #app #view-ledger #iv-pane-glance .iv-mon-num b { font-size:15px; font-weight:750; color:var(--mr-ink); } #app #view-ledger #iv-pane-glance .iv-mon-num span { font-size:11.5px; color:var(--mr-muted); } #app #view-ledger #iv-pane-glance .iv-sp { flex:1; } #app #view-ledger #iv-pane-glance .iv-mon-bar { display:block; height:7px; margin-top:5px; border-radius:4px; overflow:hidden; background:color-mix(in srgb,var(--mr-line) 70%,transparent); } #app #view-ledger #iv-pane-glance .iv-mon-bar i { display:block; height:100%; border-radius:4px; background:var(--mr-accent,#356cf5); } #app #view-ledger #iv-pane-glance .iv-mon-foot { display:flex; align-items:center; gap:10px; margin-top:7px; } #app #view-ledger #iv-pane-glance .iv-mon-foot p { flex:1; min-width:0; margin:0; font-size:11px; line-height:1.45; color:var(--mr-muted); } #app #view-ledger #iv-pane-glance #iv-monthly .iv-mon-foot button { flex:none; align-self:center; max-width:none; min-height:32px; padding:5px 11px; font-size:11.5px; white-space:nowrap; } /* 계좌별 표 — 요약 줄 = 계좌 · 원금 · 평가 · 수익률 */ #app #view-ledger #iv-pane-glance #iv-account-overview .iv-account-heading h2 { font-size:14px; } #app #view-ledger #iv-pane-glance #iv-account-overview .iv-account-heading button { min-height:26px; padding:3px 7px; font-size:10.5px; } #app #view-ledger #iv-pane-glance .iv-account-cols, #app #view-ledger #iv-pane-glance #iv-account-overview .iv-account-row summary { display:grid; grid-template-columns:minmax(0,1fr) 62px 62px 52px; gap:6px; align-items:center; } #app #view-ledger #iv-pane-glance .iv-account-cols { margin-top:8px; padding-bottom:5px; border-bottom:1px solid var(--mr-line); font-size:10.5px; font-weight:600; color:var(--mr-muted); } #app #view-ledger #iv-pane-glance .iv-account-cols span + span { text-align:right; } #app #view-ledger #iv-pane-glance #iv-account-overview .iv-account-row { margin:0; padding:0; border:0; border-bottom:1px solid color-mix(in srgb,var(--mr-line) 55%,transparent); border-radius:0; background:none; } #app #view-ledger #iv-pane-glance #iv-account-overview .iv-account-row summary { min-height:40px; padding:6px 0; font-size:12.5px; list-style:none; cursor:pointer; } #app #view-ledger #iv-pane-glance #iv-account-overview .iv-account-row summary::-webkit-details-marker { display:none; } #app #view-ledger #iv-pane-glance #iv-account-overview .iv-account-name b { overflow:hidden; font-size:12.5px; white-space:nowrap; text-overflow:ellipsis; } #app #view-ledger #iv-pane-glance #iv-account-overview .iv-account-name small { margin-top:1px; font-size:10.5px; } #app #view-ledger #iv-pane-glance #iv-account-overview summary .n { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--mr-ink); } #app #view-ledger #iv-pane-glance #iv-account-overview summary .n.up { color:#d84a3a; } #app #view-ledger #iv-pane-glance #iv-account-overview summary .n.down { color:var(--mr-accent,#356cf5); } #app #view-ledger #iv-pane-glance #iv-account-overview .iv-account-row[open] { padding-bottom:8px; } /* 보유 종목 표 — 종목 · 평가 · 비중 · 수익률 (막대 · 목표는 2026-09-28 뺌) */ #app #view-ledger #iv-pane-glance .iv-sec { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; margin-bottom:4px; } #app #view-ledger #iv-pane-glance .iv-sec h2 { margin:0; font-size:14px; } #app #view-ledger #iv-pane-glance .iv-sec small { font-size:10.5px; color:var(--mr-muted); } #app #view-ledger #iv-pane-glance .iv-alloc-t { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; } #app #view-ledger #iv-pane-glance .iv-alloc-t th { padding:4px 0 5px; border-bottom:1px solid var(--mr-line); font-size:10.5px; font-weight:600; color:var(--mr-muted); text-align:right; white-space:nowrap; } #app #view-ledger #iv-pane-glance .iv-alloc-t th:first-child { text-align:left; } #app #view-ledger #iv-pane-glance .iv-alloc-t td { padding:7px 0; border-bottom:1px solid color-mix(in srgb,var(--mr-line) 55%,transparent); font-size:12.5px; line-height:1.35; text-align:right; white-space:nowrap; vertical-align:top; color:var(--mr-ink); } #app #view-ledger #iv-pane-glance .iv-alloc-t :is(td,th) + :is(td,th) { padding-left:10px; } #app #view-ledger #iv-pane-glance .iv-alloc-t td:first-child { width:100%; max-width:0; text-align:left; } #app #view-ledger #iv-pane-glance .iv-alloc-t .iv-hn { display:block; overflow:hidden; text-overflow:ellipsis; font-weight:650; } #app #view-ledger #iv-pane-glance .iv-alloc-t td:first-child small { display:block; overflow:hidden; text-overflow:ellipsis; font-size:10.5px; color:var(--mr-muted); } #app #view-ledger #iv-pane-glance .iv-alloc-t td small { font-size:10.5px; color:var(--mr-muted); } #app #view-ledger #iv-pane-glance .iv-alloc-t td.up { color:#d84a3a; } #app #view-ledger #iv-pane-glance .iv-alloc-t td.down { color:var(--mr-accent,#356cf5); } #app #view-ledger #iv-pane-glance .iv-alloc-t td.flat { color:var(--mr-muted); } #app #view-ledger #iv-pane-glance .iv-foot { margin:7px 0 0; font-size:10.5px; line-height:1.5; color:var(--mr-muted); } #app #view-ledger #iv-pane-glance .iv-foot + .iv-foot { margin-top:2px; } /* 대표 지수 — 접으면 제목 아래 한 줄 */ #app #view-ledger #iv-pane-glance h2.fold[data-fold="idx"] { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; } #app #view-ledger #iv-pane-glance h2.fold[data-fold="idx"] .idx-line { flex-basis:100%; font-size:11.5px; font-weight:500; line-height:1.5; color:var(--text-secondary); } #app #view-ledger #iv-pane-glance h2.fold[data-fold="idx"][aria-expanded="true"] .idx-line { display:none; } #app #view-ledger #iv-pane-glance .idx-line .up { color:#d84a3a; } #app #view-ledger #iv-pane-glance .idx-line .down { color:var(--mr-accent,#356cf5); } /* ───── 내 투자 총평가 — 증권사형 (2026-09-28 사용자 “증권사형이 가장 나은데, 지금은 좌우 공백이 너무 커서 어지러움”) ───── 큰 금액 → 옅은 칸 네 개(이름 위 · 금액 아래, 왼쪽 정렬). 칸이 넓어지는 태블릿 · PC 폭(카드 560px 이상)에서는 네 칸 한 줄. */ #app #view-ledger #iv-pane-glance #gl-hero.iv-hero-c { display:block; container-type:inline-size; } #app #view-ledger #iv-pane-glance .iv-c-lab { display:block; font-size:12px; color:var(--mr-muted); } #app #view-ledger #iv-pane-glance .iv-c-big { display:block; margin-top:1px; font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1.2; color:var(--mr-ink); font-variant-numeric:tabular-nums; } #app #view-ledger #iv-pane-glance .iv-c-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 12px; margin-top:10px; padding:10px 12px; border-radius:10px; background:var(--mr-bg); } #app #view-ledger #iv-pane-glance .iv-c-grid > div { min-width:0; } #app #view-ledger #iv-pane-glance .iv-c-grid small { display:block; font-size:11px; color:var(--mr-muted); } #app #view-ledger #iv-pane-glance .iv-c-grid b { display:block; margin-top:1px; font-size:14px; font-weight:700; color:var(--mr-ink); white-space:nowrap; font-variant-numeric:tabular-nums; } #app #view-ledger #iv-pane-glance .iv-c-grid b.up { color:#d84a3a; } #app #view-ledger #iv-pane-glance .iv-c-grid b.down { color:var(--mr-accent,#356cf5); } #app #view-ledger #iv-pane-glance .iv-c-grid .iv-c-note { margin-top:1px; font-size:10.5px; } @container (min-width:560px) { #app #view-ledger #iv-pane-glance .iv-c-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } } #app #view-ledger #iv-pane-glance #gl-hero .mr-invest-realized { margin-top:8px; font-size:11.5px; color:var(--text-secondary); } #app #view-ledger #iv-pane-glance .iv-c-hint { margin:4px 0 0; font-size:12px; color:var(--mr-muted); } /* ───── 내 투자 새로고침 줄 (2026-09-28 사용자 “가장 위에 … 콤팩트하게 … 가장 잘 보이되, 눈에는 또 잘 안 띄게”, “눌러야 펼치게”) ───── 총평가 위 · 카드 · 테두리 없는 옅은 11px 한 줄 + 작은 버튼. 실패하면 ‘k개 못 가져옴 ▾’를 눌러 바로 밑 분홍 칸을 편다. */ #app #view-ledger #iv-pane-glance #iv-refresh-card { display:block; padding:0 0 4px; } #app #view-ledger #iv-pane-glance .iv-rf-line { display:flex; align-items:center; gap:8px; min-height:28px; } #app #view-ledger #iv-pane-glance .iv-rf-slot { flex:1; min-width:0; } #app #view-ledger #iv-pane-glance .iv-rf-txt { display:flex; flex-wrap:wrap; align-items:center; gap:2px 5px; font-size:11px; line-height:1.4; color:var(--mr-muted); } #app #view-ledger #iv-pane-glance .iv-rf-dot { flex:none; width:6px; height:6px; border-radius:50%; background:#b9c1cb; } #app #view-ledger #iv-pane-glance .iv-rf-dot.ok { background:#12a36a; } #app #view-ledger #iv-pane-glance .iv-rf-dot.bad { background:#d84a3a; } #app #view-ledger #iv-pane-glance .iv-rf-dot.run { background:#f0a020; } #app #view-ledger #iv-pane-glance .iv-rf-more { min-height:0; padding:0; border:0; background:none; box-shadow:none; font:inherit; font-weight:650; color:#c43d2f; cursor:pointer; } #app #view-ledger #iv-pane-glance #iv-refresh-card .iv-status-toolbar { display:contents; } #app #view-ledger #iv-pane-glance #iv-refresh-card .iv-status-toolbar[hidden] { display:none !important; } #app #view-ledger #iv-pane-glance #iv-refresh-card #iv-price-msg { display:none; } #app #view-ledger #iv-pane-glance #iv-refresh-card #iv-refresh { flex:none; display:flex; align-items:center; gap:3px; width:auto; min-width:0; height:26px; min-height:26px; padding:0 8px; border:1px solid var(--mr-line); border-radius:8px; background:var(--mr-card); box-shadow:none; color:var(--text-secondary); font-size:11px; font-weight:600; white-space:nowrap; } #app #view-ledger #iv-pane-glance #iv-refresh-card #iv-refresh span { font-size:13px; line-height:1; } #app #view-ledger #iv-pane-glance .iv-rf-panel { margin:2px 0 6px; padding:8px 10px; border-radius:9px; background:color-mix(in srgb,#d84a3a 7%,var(--mr-card)); font-size:11.5px; } #app #view-ledger #iv-pane-glance .iv-rf-panel[hidden] { display:none; } #app #view-ledger #iv-pane-glance .iv-rf-fh { display:flex; align-items:baseline; gap:6px; margin-bottom:2px; font-size:11px; font-weight:700; color:#c43d2f; } #app #view-ledger #iv-pane-glance .iv-rf-close { margin-left:auto; min-height:0; padding:0; border:0; background:none; box-shadow:none; font:inherit; font-weight:600; color:var(--text-secondary); cursor:pointer; } #app #view-ledger #iv-pane-glance .iv-rf-fi { display:grid; grid-template-columns:14px minmax(0,1fr); gap:0 4px; padding:4px 0; border-top:1px solid color-mix(in srgb,#d84a3a 14%,transparent); } #app #view-ledger #iv-pane-glance .iv-rf-fh + .iv-rf-fi { border-top:0; } #app #view-ledger #iv-pane-glance .iv-rf-fi i { font-style:normal; font-weight:700; color:#c43d2f; } #app #view-ledger #iv-pane-glance .iv-rf-fi b { min-width:0; font-weight:650; color:var(--mr-ink); } #app #view-ledger #iv-pane-glance .iv-rf-fi p { grid-column:2; margin:1px 0 0; font-size:11px; line-height:1.4; color:var(--text-secondary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } #app #view-ledger #iv-pane-glance .iv-rf-ok { margin-top:4px; padding-top:5px; border-top:1px solid color-mix(in srgb,#d84a3a 14%,transparent); font-size:11px; color:var(--text-secondary); } #app #view-ledger #iv-pane-glance .iv-rf-ok i { margin-right:3px; font-style:normal; font-weight:700; color:#12a36a; } #app #view-ledger #iv-pane-glance .iv-rf-raw { display:block; margin-top:4px; min-height:0; padding:0; border:0; background:none; box-shadow:none; font:inherit; font-size:11px; font-weight:650; color:var(--mr-accent,#356cf5); cursor:pointer; } @media (max-width:759px) { #view-ledger #iv-pane-glance > #iv-refresh-card + .card { padding-top:4px; } } @media (min-width:760px) { #app #view-ledger #iv-pane-glance #iv-refresh-card { padding-inline:12px; } }