/* 초이장부 design system (23판): black and white, two people's colours only.
   Loaded after every other stylesheet. It replaces the glass layer with flat white, turns cards into sections
   under a 2px ink rule, and sets one ink accent for actions, charts and states (no green or red). */
:root,:root[data-theme="light"]{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f5f6f8; --surface-3:#eef0f3; --line:#e3e6eb; --line-2:#eef0f3; --grid:#eef0f3;
  --ink:#15171c; --ink-2:#3e4553; --ink-3:#6b7280; --ink-4:#9aa1ad; --ph:#8a92a0;
  --brand:#15171c; --brand-2:#000000; --brand-soft:#f5f6f8; --brand-ink:#ffffff; --brand-line:#e3e6eb; --brand-btn:#15171c; --brand-btn-2:#000000;
  --brand-t:#15171c; --chip-t:#15171c;
  --p1:#2f5bff; --p2:#ff6b5a; --coral:#ff6b5a; --coral-soft:#fff0ee;
  --good:#15171c; --good-soft:#f5f6f8; --good-t:#15171c;
  --bad:#15171c; --bad-soft:#f5f6f8; --bad-t:#15171c;
  --warn:#15171c; --warn-soft:#f5f6f8; --warn-t:#15171c;
  --note:#f5f6f8; --note-ink:#3e4553;
  --t-assets:#15171c; --t-liabilities:#6b7280; --t-capital:#9aa1ad; --t-expenses:#3e4553; --t-income:#9aa1ad;
  --s1:#15171c; --s2:#5b6270; --s3:#9aa1ad; --s4:#3e4553; --s5:#c9ced6; --s6:#7b8290; --s7:#2a2e36; --s8:#b4bac4; --s0:#d9dde4;
  --sh-1:none; --sh-2:0 12px 32px rgba(21,23,28,.12); --sh-3:0 24px 60px rgba(21,23,28,.22);
  --r-xl:14px; --r-lg:12px; --r:10px; --r-sm:8px;
  --glass:#ffffff; --glass-strong:#ffffff; --glass-edge:transparent; --glass-hi:0 0 0 transparent; --glass-sh:0 0 0 transparent; --blur:none;
  --font:"Noto Sans KR","Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --side:232px;
  color-scheme:light}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1013; --surface:#0f1013; --surface-2:#1a1c21; --surface-3:#24272d; --line:#2c3038; --line-2:#1f2227; --grid:#24272d;
  --ink:#f2f3f5; --ink-2:#c9ced6; --ink-3:#9aa1ad; --ink-4:#6b7280; --ph:#7b8290;
  --brand:#f2f3f5; --brand-2:#ffffff; --brand-soft:#1a1c21; --brand-ink:#0f1013; --brand-line:#2c3038; --brand-btn:#f2f3f5; --brand-btn-2:#ffffff;
  --brand-t:#f2f3f5; --chip-t:#f2f3f5;
  --p1:#7d97ff; --p2:#ff8b7c; --coral:#ff8b7c; --coral-soft:#2c1c1a;
  --good:#f2f3f5; --good-soft:#1a1c21; --good-t:#f2f3f5; --bad:#f2f3f5; --bad-soft:#1a1c21; --bad-t:#f2f3f5; --warn:#f2f3f5; --warn-soft:#1a1c21; --warn-t:#f2f3f5;
  --note:#1a1c21; --note-ink:#c9ced6;
  --t-assets:#f2f3f5; --t-liabilities:#9aa1ad; --t-capital:#6b7280; --t-expenses:#c9ced6; --t-income:#6b7280;
  --s1:#f2f3f5; --s2:#9aa1ad; --s3:#6b7280; --s4:#c9ced6; --s5:#4c525c; --s6:#7b8290; --s7:#e0e3e8; --s8:#5b6270; --s0:#3a3e46;
  --glass:#0f1013; --glass-strong:#0f1013;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1013; --surface:#0f1013; --surface-2:#1a1c21; --surface-3:#24272d; --line:#2c3038; --line-2:#1f2227; --grid:#24272d;
  --ink:#f2f3f5; --ink-2:#c9ced6; --ink-3:#9aa1ad; --ink-4:#6b7280; --ph:#7b8290;
  --brand:#f2f3f5; --brand-2:#ffffff; --brand-soft:#1a1c21; --brand-ink:#0f1013; --brand-line:#2c3038; --brand-btn:#f2f3f5; --brand-btn-2:#ffffff;
  --brand-t:#f2f3f5; --chip-t:#f2f3f5;
  --p1:#7d97ff; --p2:#ff8b7c; --coral:#ff8b7c; --coral-soft:#2c1c1a;
  --good:#f2f3f5; --good-soft:#1a1c21; --good-t:#f2f3f5; --bad:#f2f3f5; --bad-soft:#1a1c21; --bad-t:#f2f3f5; --warn:#f2f3f5; --warn-soft:#1a1c21; --warn-t:#f2f3f5;
  --note:#1a1c21; --note-ink:#c9ced6;
  --t-assets:#f2f3f5; --t-liabilities:#9aa1ad; --t-capital:#6b7280; --t-expenses:#c9ced6; --t-income:#6b7280;
  --s1:#f2f3f5; --s2:#9aa1ad; --s3:#6b7280; --s4:#c9ced6; --s5:#4c525c; --s6:#7b8290; --s7:#e0e3e8; --s8:#5b6270; --s0:#3a3e46;
  --glass:#0f1013; --glass-strong:#0f1013;
  color-scheme:dark}

/* ----- base ----- */
html,body{background:var(--bg)}
body{font-family:var(--font);letter-spacing:-.01em;font-feature-settings:normal}
body::before,body::after{display:none!important;content:none!important}
.tnum,.num{font-variant-numeric:tabular-nums}
.ico{stroke-width:2}

/* ----- shell ----- */
.app{background:linear-gradient(to right,var(--surface) calc(var(--side) - 1px),var(--line) calc(var(--side) - 1px),var(--line) var(--side),var(--bg) var(--side))}
.side{background:var(--surface);border-right:1px solid var(--line);padding:24px 16px 16px;gap:2px;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.side .brand{padding:0 10px 18px;font-weight:900;letter-spacing:-.03em;gap:9px}
.ledger-btn{border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:none;padding:8px 10px;margin-bottom:6px}
.ledger-dot{border-radius:7px}
.nav-sec{font-size:11px;font-weight:700;color:var(--ink-4);letter-spacing:.08em;padding:16px 12px 4px}
.nav{gap:1px}
.nav button{height:36px;padding:0 12px;border-radius:8px;gap:10px;font-size:14px;font-weight:500;color:var(--ink-2)}
.nav button:hover{background:var(--surface-2);color:var(--ink)}
.nav button[aria-current="page"]{background:var(--ink);color:var(--brand-ink);font-weight:700}
.nav button[aria-current="page"] .badge{background:var(--brand-ink);color:var(--ink)}
.nav button.dev{color:var(--ink-4)}
.nav button.dev .dev-tag{font-size:11px;font-weight:500;margin-left:2px}
.side-cta{margin-top:12px}
.side-cta .btn.pri{height:44px;border-radius:10px}
.people{background:var(--surface-2);border-radius:10px}
.ava{box-shadow:0 0 0 2px var(--surface)}

/* ----- page ----- */
@media (min-width:1280px){.content{max-width:1200px;padding:32px 44px 72px;gap:26px}}
.phead{align-items:center;gap:12px}
.phead small{font-size:12px;color:var(--ink-3);font-weight:600}
.phead h1{font-size:30px;font-weight:900;letter-spacing:-.03em}
.grid{column-gap:32px;row-gap:30px}
@media (max-width:1099px){.grid{column-gap:8px;row-gap:26px}}

/* cards become sections under a 2px ink rule */
.card{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border-top:2px solid var(--ink)!important;padding:14px 0 0!important;gap:14px}
.card::before,.card::after{display:none!important}
.card.flat{background:var(--surface-2)!important;border-top:0!important;border-radius:12px!important;padding:16px 18px!important}
.card.pad0{padding:0!important}
.card-h{padding:0!important;min-height:24px}
.card.pad0>.card-h{padding:14px 0 6px!important}
.card-h h2,.card-h h3{font-size:15px;font-weight:900;letter-spacing:-.02em}
.card-h .lbl,.lbl{font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.card-h .more{color:var(--ink-3);font-size:12.5px;font-weight:500}
.lrow{padding-left:0!important;padding-right:0!important}
.lrow+.lrow::before{left:0!important;right:0!important;background:var(--line-2)}
.hero{font-weight:900;letter-spacing:-.04em}
.hero small{color:var(--ink-3);font-weight:500;font-size:.42em}
.kv span{font-size:12px;color:var(--ink-3);font-weight:600}
.kv b{font-weight:700}
.muted{color:var(--ink-2)}.faint,.sub{color:var(--ink-3)}

/* ----- controls ----- */
.btn{height:38px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:14px;box-shadow:none}
.btn:hover{background:var(--surface-2)}
.btn.pri{background:var(--ink);border-color:var(--ink);color:var(--brand-ink)}
.btn.pri:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn.soft{background:var(--surface-2);border-color:transparent;color:var(--ink)}
.btn.ghost{border-color:transparent;background:none;color:var(--ink-2)}
.btn.danger{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn.sm{height:32px;border-radius:7px;font-size:13px}
.btn kbd{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.2)}
.ibtn{border-radius:8px}
.seg{background:transparent;border:1px solid var(--line);border-radius:8px;padding:0;gap:0;overflow:hidden}
.seg button{height:36px;border-radius:0;padding:0 12px;font-size:13px;font-weight:700;color:var(--ink-3)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--brand-ink);box-shadow:none}
.seg.full button{height:38px;font-size:14px}
.mnav{border:1px solid var(--line);border-radius:8px;padding:0;background:var(--surface);gap:0}
.mnav .ibtn{width:32px;height:36px;border-radius:0;color:var(--ink-3)}
.mnav .lab{font-size:14px;font-weight:700;height:36px;border-radius:0;min-width:0;padding:0 6px}
.pp-sel{border-radius:8px}
.pp-dates input{border-radius:8px}
.searchkey{border-radius:8px;height:38px;min-width:200px}
.chip{border-radius:8px;height:32px;font-weight:500;color:var(--ink-2)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--brand-ink);font-weight:700}
.chip.brand{background:var(--surface-2);color:var(--ink)}
.badge{border-radius:4px;height:20px;padding:0 7px;font-size:11px;background:var(--surface-2);color:var(--ink-2)}
.badge.brand,.badge.good,.badge.warn,.badge.bad{background:var(--surface-2);color:var(--ink)}
.badge.coral{background:var(--coral-soft);color:var(--coral)}
.delta{border-radius:4px;height:22px;padding:0 6px;font-size:12px}
.delta.good,.delta.bad,.delta.flat{background:var(--surface-2);color:var(--ink)}
.pos,.neg,.good-t,.bad-t{color:var(--ink)!important}
input,select,textarea{border-radius:8px}

/* ----- bars: ink fill, the plan as a 2px ink line ----- */
.bar{height:8px;border-radius:2px;background:var(--surface-3);overflow:visible}
.bar i{border-radius:2px;background:var(--ink)}
.bar.over i,.bar.warn i,.bar.ink i{background:var(--ink)}
.bar em{top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:1}
.bar.thin{height:6px}

/* ----- tables ----- */
table.fin thead th{font-size:11px;color:var(--ink-3);border-bottom:2px solid var(--ink)}
table.fin tr.big td{background:var(--surface-2)}
table.fin tr.tot td{border-top:2px solid var(--ink);border-bottom:0}

/* ----- phone ----- */
.mtop{background:var(--surface)!important;border-bottom:1px solid var(--line);-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
.tabbar{background:var(--surface)!important;border-top:1px solid var(--line)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
.tabbar button{color:var(--ink-4);font-weight:500}
.tabbar button[aria-current="page"]{color:var(--ink);font-weight:900}
.tabbar .add{background:var(--ink)!important;color:var(--brand-ink)!important;border-radius:14px!important;box-shadow:none!important}

/* ----- sheets and panels ----- */
.sheet,.sheet-in,.panel,.cmd{box-shadow:var(--sh-3)}

/* ===== 예산 ===== */
.bd .bd-use,.bd .bd-pace{gap:10px}
.bd-big{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.bd-big>b{font-size:84px;font-weight:900;letter-spacing:-.05em;line-height:1}
.bd-big .bq-head{font-size:15px;font-weight:700;letter-spacing:-.02em;margin:0}
.bar.bd-bar{height:22px;margin-top:4px}
.bar.bd-bar em{top:-4px;bottom:-4px}
.bd-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2);padding-top:12px;margin-top:4px}
.bd-three>div{display:flex;flex-direction:column;gap:2px;padding:0 14px;border-left:1px solid var(--line-2)}
.bd-three>div:first-child{padding-left:0;border-left:0}
.bd-three span{font-size:11px;color:var(--ink-3)}
.bd-three b{font-size:18px;font-weight:700}
.bd-kinds{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0!important;padding-top:0!important}
.bd-kind{display:flex;flex-direction:column;gap:8px;padding:14px 18px 14px 0;border-right:1px solid var(--line-2);margin-right:18px}
.bd-kind:last-child{border-right:0;margin-right:0}
.bd-kv{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.bd-kv b{font-size:30px;font-weight:900;letter-spacing:-.03em;line-height:1}
.bd-kv b small{font-size:14px;font-weight:500;color:var(--ink-3);margin-left:3px}
.bd-kv span{font-size:12px}
.bd-dash{border-top:1px dashed var(--line);margin-top:4px}
.bd-grid{display:flex;flex-direction:column}
.bd-r{display:grid;grid-template-columns:minmax(0,1.4fr) 92px 170px 100px 100px minmax(80px,1fr) 52px;gap:14px;align-items:center;padding:9px 0;border:0;border-top:1px solid var(--line-2);background:none;text-align:left;font-size:13px;color:var(--ink);width:100%}
.bd-grid.inc .bd-r{grid-template-columns:minmax(0,1.6fr) 110px 110px minmax(80px,1fr) 52px}
.bd-hd{border-top:0;color:var(--ink-3);font-size:11px;font-weight:700;padding:6px 0 4px}
.bd-g{background:var(--surface-2);border-top:0;border-radius:6px;padding:8px;margin-top:6px;font-weight:900;cursor:pointer}
.bd-g .caret{display:inline-flex;margin-right:6px;color:var(--ink-3);transition:transform .15s}
.bd-g .caret.open{transform:rotate(90deg)}
.bd-n{padding-left:16px;min-width:0}
.bd-n .alink{font-weight:500;text-align:left}
.bd-tb .bar{display:block}
.bd-pd{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-r .r{text-align:right}
.bt-sel{height:28px;padding:0 6px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-size:12px;font-weight:700;color:var(--ink);max-width:100%}
.bt-sel.sm{height:26px}
@media (max-width:1099px){
  .bd-big>b{font-size:56px}
  .bd-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bd-kind{margin-right:0;padding:12px 12px 12px 0}
  .bd-kind:nth-child(2n){border-right:0;padding-left:12px}
  .bd-kind{min-width:0}.bd-kind .bd-kv b{font-size:clamp(17px,5.4vw,22px);white-space:nowrap}.bd-kind .bd-kv span{font-size:11.5px;overflow-wrap:anywhere}
  .bd-three>div{padding:0 8px}.bd-three b{font-size:clamp(13px,4.2vw,18px)}
  .bd-r,.bd-grid.inc .bd-r{grid-template-columns:minmax(0,1fr) auto auto;row-gap:6px}
  .bd-hd{display:none}
  .bd-r>:nth-child(n+2){font-size:12px}
}

/* ===== 홈 ===== */
.home-ava{display:flex}.home-ava>*+*{margin-left:-6px}.home-ava .ava{width:30px;height:30px;font-size:12.5px;box-shadow:0 0 0 2px var(--surface)}
/* the one-line input */
.qline{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
.qline-in{display:flex;align-items:center;gap:12px;height:58px;border:1.5px solid var(--ink);border-radius:12px;padding:0 8px 0 20px;background:var(--surface);cursor:text}
.qline-in:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent)}
.qline-in>.ico{color:var(--ink);flex:none}
.qline-in input{flex:1 1 0;width:0;min-width:0;border:0!important;outline:0!important;box-shadow:none!important;background:transparent;font-size:16px;height:100%;padding:0;color:var(--ink)}
.qline-in input::placeholder{color:var(--ph)}
.qline-in kbd{font-size:12px;color:var(--ink-3);border:1px solid var(--line);border-radius:5px;padding:2px 7px;background:var(--surface);font-family:inherit}
.qline-in .btn.pri{height:42px;padding:0 18px;border-radius:9px;font-weight:700}
.qline-fq{display:flex;flex-wrap:wrap;gap:6px}.qline-fq .chip small{color:var(--ink-3);margin-left:4px}
.qline-pv{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:12.5px;color:var(--ink-3);padding:0 4px}
.qline-pv b{color:var(--ink);font-weight:700}.qline-pv em{font-style:normal;color:var(--ink-2);font-weight:600}
/* spending and income */
.home-hero{gap:0!important}
.home-hero .card-h .lbl{color:var(--ink-2)}
.hh-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;margin-top:18px}
.hh-k{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:2px}
.hh-num{font-size:44px;line-height:1.15;font-weight:900;letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap;padding-bottom:8px;border-bottom:1px solid var(--line)}
.hh-num small{font-size:15px;font-weight:500;color:var(--ink-3);letter-spacing:0;margin-left:6px}
.hh-cmp{display:flex;gap:8px;align-items:baseline;margin-top:9px;font-size:13px;color:var(--ink-3)}
.hh-cmp b{font-size:14.5px;font-weight:800;color:var(--ink)}
.hh-bud{border-top:1px solid var(--line);margin-top:16px;padding-top:16px;display:grid;gap:9px}
.hh-bud-h{display:flex;align-items:baseline;gap:6px;font-size:13px;color:var(--ink-3)}
.hh-bud-h b{color:var(--ink);font-weight:800}
.hh-bud-h b.tnum{font-size:19px;font-weight:900;letter-spacing:-.02em}
.hh-bud .bar{height:14px;border-radius:3px}.hh-bud .bar i{border-radius:3px}
.hh-bud .sub{font-size:12.5px}
/* lists with the title above a 2px rule */
.home-due,.home-recent,.home-cats{border-top:0!important;padding-top:0!important;gap:0!important}
.home-due>.card-h,.home-recent>.card-h,.home-cats>.card-h{border-bottom:2px solid var(--ink);padding-bottom:10px!important;min-height:0}
.home-due .card-h h2,.home-recent .card-h h2,.home-cats .card-h h2{font-size:15px}
.dl-row,.hr-row,.hc-row{border:0;border-radius:0}
.dl-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 0;border-bottom:1px solid var(--line-2);background:none;color:inherit}
.dl-row:hover .t b{text-decoration:underline;text-underline-offset:3px}
.dl-row .t{display:grid;min-width:0}
.dl-row .t b{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-row .t small{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-row .v{font-size:16px;font-weight:800;letter-spacing:-.01em}
.dl-row.dl-nw{border-bottom:0}
.dl-empty{padding:14px 0;border-bottom:1px solid var(--line-2)}
.hr-cnt{display:flex;align-items:center;gap:10px;font-size:12.5px}
.hr-who{display:inline-flex;align-items:center;gap:4px;color:var(--ink-2);font-weight:600}
.hr-who .ava.sm{box-shadow:none}
.hr-row{display:grid;grid-template-columns:30px 44px minmax(0,1fr) minmax(0,1.3fr) minmax(128px,auto);grid-template-areas:"ava d nm ac v";align-items:center;column-gap:12px;width:100%;min-height:51px;padding:8px 0;border-bottom:1px solid var(--line-2);background:none;color:inherit;text-align:left}
.hr-row:hover .nm{text-decoration:underline;text-underline-offset:3px}
.hr-row>.ava,.hr-row>.hr-nb{grid-area:ava}
.hr-row .ava{width:30px;height:30px;font-size:12px;box-shadow:none}
.hr-sub{display:contents}
.hr-row .d{grid-area:d;font-size:13px;color:var(--ink-3)}
.hr-row .nm{grid-area:nm;font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-row .ac{grid-area:ac;font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-row .v{grid-area:v;font-size:15.5px;font-weight:800;text-align:right;white-space:nowrap}
.hr-all,.hc-all{border:0;background:none;padding:2px 0;cursor:pointer;margin-top:12px;justify-self:start;align-self:flex-start;color:var(--ink-3)!important;font-size:12.5px!important;font-weight:500}
.hc-row{display:grid;grid-template-columns:minmax(0,1fr) 88px 86px;align-items:center;gap:12px;width:100%;min-height:39px;padding:6px 0;border-bottom:1px solid var(--line-2);background:none;color:inherit;text-align:left}
.hc-row:not(:disabled):hover .nm{text-decoration:underline;text-underline-offset:3px}
.hc-row .nm{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-row .bar{height:6px}
.hc-row.etc .bar i{background:var(--ink-4)}
.hc-row .v{font-size:14px;font-weight:800;text-align:right}
.hc-row:disabled{cursor:default;opacity:1}
@media (max-width:1099px){
  .hh-two{gap:0}
  .hh-cell+.hh-cell{border-left:1px solid var(--line);padding-left:16px}
  .hh-num{font-size:30px;border-bottom:0;padding-bottom:0}
  .hh-num small{display:none}
  .hh-cmp{margin-top:4px;font-size:11.5px;flex-wrap:wrap;gap:2px 6px}.hh-cmp b{font-size:12.5px}
  .qline-in{height:50px;padding-left:14px}.qline-in input{font-size:15px}.qline-in .btn.pri{height:38px;padding:0 14px}
  .dl-row.dl-nw{display:none}
  .hr-row{grid-template-columns:30px minmax(0,1fr) auto;grid-template-areas:"ava nm v" "ava sub v";row-gap:1px;min-height:56px}
  .hr-sub{display:flex;gap:6px;grid-area:sub;min-width:0;font-size:12.5px;color:var(--ink-3)}
  .hr-row .d,.hr-row .ac{grid-area:auto;font-size:12.5px}
  .hc-row{grid-template-columns:minmax(0,1fr) 46% 80px}
}
@media (max-width:420px){.hh-num{font-size:clamp(21px,7.4vw,30px)}}

/* ===== 예산 설정 ===== */
.ttl-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bs-sum{gap:16px!important}
.bs-sum .bs-top{align-items:flex-end}
.bs-sum .big{font-size:48px;font-weight:900;letter-spacing:-.045em;line-height:1.1}
.bs-sum .big small{font-size:16px;font-weight:500;color:var(--ink-3);margin-left:6px;letter-spacing:0}
.bs-leg{display:flex;gap:0;flex-wrap:wrap}
.bs-leg>div{display:grid;gap:2px;padding:0 22px;border-left:1px solid var(--line)}
.bs-leg>div:first-child{border-left:0;padding-left:0}.bs-leg>div:last-child{padding-right:0}
.bs-leg span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3)}
.bs-leg i{width:9px;height:9px;border-radius:2px;display:inline-block}
.bs-leg b{font-size:19px;font-weight:800;letter-spacing:-.02em;text-align:right}
.bs-stack{display:flex;gap:2px;height:14px;border-radius:3px;overflow:hidden}
.bs-stack i{display:block;min-width:2px}
.bs-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bs-tools .btn{height:38px;padding:0 14px;font-weight:500;box-shadow:none!important;border:1px solid var(--line)}
.bs-hols{font-size:12.5px}
.bs-list{border-top:0!important;padding:0!important;gap:0!important}
.bs-list>.card-h{border-bottom:2px solid var(--ink);padding-bottom:10px!important}
.bs-list .bs-row.bs2{grid-template-columns:minmax(130px,1.3fr) 92px minmax(150px,1.6fr) 92px 100px 100px 132px;gap:12px;padding:8px 0 8px 12px;border-bottom:1px solid var(--line-2)}
.bs-list .bs-row.bs2.inc{grid-template-columns:minmax(160px,2fr) 120px 120px 150px}
.bs-list .bs-row.bs2.bs-head{font-size:11.5px;font-weight:700;color:var(--ink-3);padding:9px 0;border-bottom:0;background:none}
.bs-list .bs-head .bs-r{color:var(--ink-3);font-size:11.5px}
.bs-list .bs-row.gh{background:var(--surface-2);margin-top:0;padding:9px 0 9px 10px;border-bottom:0}
.bs-list .bs-row.gh .bs-n b{font-size:13.5px;font-weight:800}
.bs-list .bs-row.gh .bs-r{color:var(--ink);font-weight:700}
.bs-list .bs-row.tot{border-top:2px solid var(--ink);border-bottom:0;padding:12px 0 12px 10px}
.bs-list .bs-n{font-size:14px}
.bs-list .bs-r{font-size:13.5px;color:var(--ink-3)}
.bs-list .bs-v{display:flex;justify-content:flex-end}
.bs-list input.bs-in{height:38px;width:100%;max-width:132px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-weight:700}
.bs-list input.bs-in:focus{border-color:var(--ink)}
.bs-bt .bt-sel,.bs-hol .bt-sel{width:100%}
.pd-btn{width:100%;height:32px;border:1px solid var(--line);border-radius:6px;background:var(--surface);text-align:left;padding:0 10px;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.pd-btn.guess{font-weight:500;color:var(--ink-3);border-style:dashed}
.pd-btn:hover{border-color:var(--ink-3)}
.pd-in{width:100%;height:32px;border:1px solid var(--ink);border-radius:6px;padding:0 10px;font-size:13px;font-weight:700}
.pd-txt{font-size:13px}
.bs-none{display:grid;place-items:center;width:100%;max-width:132px;height:38px;border-radius:6px;background:var(--surface-2);color:var(--ink-4);font-size:12.5px}
@media (max-width:1099px){
  .bs-sum .big{font-size:36px}
  .bs-leg{width:100%}.bs-leg>div{flex:1;padding:0 10px}.bs-leg b{font-size:15px;text-align:left}
  .bs-list .bs-row.bs2.bs-head{display:none}
  .bs-list .bs-row.bs2{grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr) 120px;grid-template-areas:"n n n v" "bt pd hol hol" "r1 r1 r2 r2";row-gap:6px;column-gap:8px;padding:10px 0}
  .bs-list .bs-row.bs2.inc,.bs-list .bs-row.bs2.gh,.bs-list .bs-row.bs2.tot{grid-template-columns:minmax(0,1fr) 120px;grid-template-areas:"n v" "r1 r2"}
  .bs-list .bs-row.bs2.gh>span:empty,.bs-list .bs-row.bs2.tot>span:empty{display:none}
  .bs-list .bs-row.bs2 .bs-n{grid-area:n}.bs-list .bs-row.bs2 .bs-v{grid-area:v}
  .bs-list .bs-row.bs2 .bs-bt{grid-area:bt}.bs-list .bs-row.bs2 .bs-pd{grid-area:pd}.bs-list .bs-row.bs2 .bs-hol{grid-area:hol}
  .bs-list .bs-row.bs2 [data-k="pa"]{grid-area:r1}.bs-list .bs-row.bs2 [data-k="avg"]{grid-area:r2}
  .bs-list .bs-r{text-align:left;font-size:12px}
  .bs-list .bs-r::before{content:attr(data-l) " ";font-weight:600}
  .bs-list .bs-row.bs2 .bs-hol>.faint,.bs-list .bs-row.bs2 .bs-pd>.faint{display:none}
}

/* ===== 개발 예정 ===== */
.coming-note{display:flex;align-items:center;gap:12px;background:var(--surface-2);border-radius:12px;padding:12px 16px;font-size:14px}
.coming-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.coming-tile{border:1.5px dashed var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-height:160px}
.coming-tile b{font-size:14px}
.coming-tile p{font-size:12px;color:var(--ink-3);margin:0}
.coming-tile .sk{display:block;height:12px;border-radius:3px;background:var(--surface-3)}
.sk.w90{width:90%}.sk.w60{width:60%}.sk.w35{width:35%}
@media (max-width:700px){.coming-grid{grid-template-columns:1fr}}

/* ===== shell overrides of the glass layout ===== */
@media (min-width:1280px){
  .app{grid-template-columns:var(--side) minmax(0,1fr)}
  .app .side{top:0;height:100vh;margin:0;border-radius:0;padding:24px 16px 16px;gap:2px}
}
@media (min-width:768px) and (max-width:1279px){
  .app{grid-template-columns:76px minmax(0,1fr)}
  .app .side{top:0;height:100vh;margin:0;border-radius:0;padding:16px 10px}
  .app{background:linear-gradient(to right,var(--surface) 75px,var(--line) 75px,var(--line) 76px,var(--bg) 76px)}
}
.app .side .nav button{height:36px;border-radius:8px;box-shadow:none}
.app .side .nav button[aria-current="page"]{background:var(--ink);color:var(--brand-ink);box-shadow:none}
@media (min-width:1280px){.app .side .nav-sec{padding:16px 12px 4px}.app .side .brand{padding-bottom:18px;font-size:17px}}
@media (min-width:768px) and (max-width:1279px){
  .app .side .brand{font-size:0;padding:2px 0 12px;justify-content:center}
  .app .side .nav-sec{display:block;height:1px;padding:0;margin:8px 12px;font-size:0;background:var(--line)}
  .app .side .nav button{height:40px;justify-content:center;padding:0}
  .app .side-cta .btn.pri,.app .side-cta .side-imp{flex:none;width:100%;height:42px;border-radius:10px}
}
.btn.pri,.btn.pri:hover{box-shadow:none}
.nav button:hover{background:var(--surface-2)}

/* side foot: 설정 with the shortcut key beside it, and presence in one quiet line */
.side-cta{display:flex!important;flex-direction:row;gap:6px;align-items:stretch}.side-cta .btn.pri{flex:1;width:auto;min-width:0;height:44px}
.side-cta .side-imp{width:44px;height:44px;padding:0;flex:none;border:1px solid var(--line);border-radius:10px;justify-content:center}
.side-set{display:flex!important;flex-direction:row;align-items:center;gap:4px}
.side-set>button:first-child{flex:1}
.side-set .kbd-btn{width:36px;flex:none;justify-content:center;padding:0}
.side-set .kbd-btn kbd{font-size:11px;border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--ink-3);background:var(--surface);font-family:inherit}
.side-who{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);padding:6px 12px 0}
.side-who .online{position:static;width:7px;height:7px;border-radius:50%;background:var(--p1);box-shadow:none}
@media (max-width:1279px){.side-cta{flex-direction:column!important}.side-cta .side-imp{width:100%;height:40px}.side-set{flex-direction:column}.side-set .kbd-btn{width:100%}}

/* sections have no side padding, so nothing inside bleeds past them */
:root{--cp:0px}
@media (max-width:1099px){:root{--cp:0px}}
.split{margin:0!important}
.tbl{margin:0!important;padding:0!important}

/* ===== 현금 흐름 (24판) ===== */
.cf2 .cf-wf,.cf2 .cf-side{border-top:0!important;padding-top:0!important;gap:0!important}
.cf2 .cf-wf>.card-h,.cf2 .cf-side>.card-h{border-bottom:2px solid var(--ink);padding-bottom:10px!important}
.cfw{margin-top:14px}
.cfw svg text{font-size:12px;fill:var(--ink-4)}
.cfw .cfw-v{font-size:13px;font-weight:700;fill:var(--ink-2)}
.cfw .cfw-v.tot{font-size:15px;font-weight:900;fill:var(--ink)}
.cfw .cfw-l{font-size:13px;fill:var(--ink-3)}
.cfw .cfw-l.tot{font-weight:700;fill:var(--ink)}
.cfw .cfw-s{font-size:11px;fill:var(--ink-4)}
.cfw.cmp svg text{font-size:10.5px}
.cfw.cmp .cfw-v{font-size:11px}
.cfw.cmp .cfw-v.tot{font-size:12px;font-weight:800}
.cfw.cmp .cfw-l{font-size:11.5px}
.cfw.cmp .cfw-s{font-size:10.5px}
.cfp{display:flex;flex-direction:column}
.cfp-r{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:46px;padding:8px 0;border:0;border-bottom:1px solid var(--line-2);background:none;color:inherit;text-align:left}
.cfp-r:disabled{cursor:default;opacity:1}
.cfp-r .d{font-size:13px;color:var(--ink-3);display:flex;flex-direction:column}.cfp-r .d small{font-size:11px;color:var(--ink-4)}
.cfp-r .t{display:flex;flex-direction:column;min-width:0}.cfp-r .t b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cfp-r .t small{font-size:12px;color:var(--ink-3)}
.cfp-r .v{font-size:14.5px;font-weight:800}
.cfp-r.more{min-height:36px}
.cfp-tot{display:flex;align-items:center;justify-content:space-between;border-top:2px solid var(--ink);padding:12px 0;margin-top:-1px}
.cfp-tot span{font-size:14px;font-weight:900}.cfp-tot b{font-size:17px;font-weight:900}
.cf-tree{border-top:0!important;padding-top:6px!important;gap:0!important}
.cft-tools{padding-bottom:10px}
.cft-top{border-top:2px solid var(--ink)}
.cft{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);align-items:center;gap:16px;min-height:42px;border-top:1px solid var(--line-2);font-size:13.5px}
.cft.t{min-height:42px}.cft.t .cft-l{font-size:14px;font-weight:500}.cft.t>b{justify-self:end;font-size:15px;font-weight:800}
.cft-top .cft:first-child{border-top:0}
.cft-body{border-top:2px solid var(--ink);margin-top:18px}
.cft.s{border-top:2px solid var(--ink);min-height:46px}.cft-body>.cft.s:first-child{border-top:0}
.cft.s .cft-l{font-size:14.5px;font-weight:900}
.cft-l{display:flex;align-items:center;gap:6px;min-width:0;border:0;background:none;color:inherit;font:inherit;text-align:left;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.cft-l{cursor:pointer}
.cft-l small{margin-left:6px;font-size:11.5px}
.cft.b .cft-l{padding-left:22px;font-weight:700}
.cft.b.z .cft-l{font-weight:400;color:var(--ink-4)}
.cft.a,.cft.e{background:var(--surface-2)}
.cft.a .cft-l{padding-left:42px}
.cft.e{min-height:34px}.cft.e .cft-l{padding-left:64px;color:var(--ink-3);font-size:12.5px;gap:10px}
.cft.e .cft-l:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cfe{position:relative;display:block;height:20px}.cfe b{position:absolute;top:1px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.cfe b.n{right:calc(50% + 8px)}.cfe b.p{left:calc(50% + 8px)}
.cfd{position:relative;display:block;height:22px}
.cfd .ax{position:absolute;left:50%;top:2px;bottom:2px;width:1px;background:var(--line)}
.cfd .p{position:absolute;left:50%;top:6px;height:10px;background:var(--ink);border-radius:0 3px 3px 0}
.cfd .n{position:absolute;right:50%;top:6px;height:10px;background:var(--ink-4);border-radius:3px 0 0 3px}
.cfd .lp{position:absolute;top:2px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.cfd .lp.z{color:var(--ink-4);font-weight:500}
/* p13: on PC too the bars keep to their own cell and every amount sits right-aligned in one column at the row end */
@media (min-width:768px){
  .cfd-bars{right:132px}
  .cfd .lp{left:auto!important;right:0!important;text-align:right}
  .cfe b.n,.cfe b.p{left:auto;right:0}
}
@media (max-width:1099px){
  .cft{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:8px}
  .cft.b .cft-l{padding-left:14px}.cft.a .cft-l{padding-left:26px}.cft.e .cft-l{padding-left:38px}
  .cfp-r{grid-template-columns:54px minmax(0,1fr) auto}
}

/* ===== 자산 현황, 수입 지출 (24판) ===== */
.kpi4{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0!important;padding-top:0!important}
.kpi{display:flex;flex-direction:column;gap:3px;padding:16px 20px 18px;border-left:1px solid var(--line);min-width:0}
.kpi:first-child{border-left:0;padding-left:0}
.kpi .lbl{color:var(--ink-2)}
.kpi b{font-size:24px;font-weight:900;letter-spacing:-.035em;white-space:nowrap}
.kpi b.big{font-size:30px}
.kpi b small{font-size:13px;font-weight:500;color:var(--ink-3);margin-left:4px;letter-spacing:0}
.kpi .sub{font-size:12.5px;color:var(--ink-3)}
.flatsec{border-top:0!important;padding-top:0!important}
.mixb{display:grid;gap:10px}
.mixb-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.mixb-lg{display:flex;flex-wrap:wrap;gap:4px 16px;margin-left:auto;font-size:12.5px;color:var(--ink-2)}
.mixb-lg span{display:inline-flex;align-items:center;gap:6px}.mixb-lg i{width:9px;height:9px;border-radius:2px;display:inline-block}.mixb-lg b{font-weight:800;color:var(--ink)}
.mixb-bar{display:flex;gap:2px;height:16px;border-radius:2px;overflow:hidden;background:var(--surface-3)}
.mixb-bar i{display:block;min-width:2px}
.mixb-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px 16px}
.mixb-cols div{display:flex;flex-direction:column;gap:1px;min-width:0}
.mixb-cols span{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mixb-cols b{font-size:14px;font-weight:800}
.stmt{border-top:0!important;padding-top:0!important;gap:8px!important}
.stmt-tools{gap:14px}
.stmt-tools .fold-btns .btn{height:32px;border:1px solid var(--line)}
.stmt table.fin thead th{border-bottom:2px solid var(--ink);padding-top:10px;padding-bottom:10px}
.stmt table.fin tr.sec.top td{color:var(--ink);font-size:15px;font-weight:900;padding-top:14px;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.stmt table.fin tbody+tbody tr.sec.top td{border-top:2px solid var(--ink)}
.stmt table.fin tr.sec:not(.top) td{font-size:12px;font-weight:700;color:var(--ink-3);padding-top:18px}
.stmt table.fin tr.qrow td,.stmt table.fin tr.qrow .alink{color:var(--ink-4)}
.stmt table.fin tr.big td{background:var(--surface-2);font-weight:900}
.stmt table.fin tr.capsec td{color:var(--ink-2)}
.stmt table.fin tr.capsec-close td{padding:6px 0;border:0}
@media (max-width:1099px){
  .kpi4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:12px 12px 14px}.kpi:nth-child(3){border-left:0;padding-left:0}.kpi:nth-child(n+3){border-top:1px solid var(--line)}
  .kpi b{font-size:19px}.kpi b.big{font-size:22px}
  .mixb-lg{margin-left:0}
}

/* ===== 거래내역 (24판) ===== */
.tx-tools{gap:12px!important}
.tx-search{display:flex;align-items:center;gap:10px;height:46px;border:1.5px solid var(--ink);border-radius:10px;padding:0 14px;background:var(--surface);cursor:text}
.tx-search>.ico{color:var(--ink-3);flex:none}
.tx-search input{flex:1 1 0;width:0;min-width:0;border:0!important;outline:0!important;box-shadow:none!important;background:transparent;font-size:15px;height:100%;padding:0}
.tx-filters{gap:8px;align-items:center;flex-wrap:wrap}
.tx-sel select{height:36px;font-size:13px;font-weight:700;border:1px solid var(--line);border-radius:8px;padding:0 28px 0 10px;max-width:190px;background-color:var(--surface)}
.tx-sum{display:inline-flex;gap:12px;font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.tx-sum b{color:var(--ink);font-weight:800}
.tx-list{border-top:0!important}
.tx-list .thead{border-top:2px solid var(--ink);border-bottom:0;padding:9px 0;font-size:11.5px}
.tx-list .dayh{padding:16px 0 6px;font-size:13.5px;font-weight:900;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line-2);position:static;background:none}
.tx-list .dayh span{font-size:12.5px;font-weight:500;color:var(--ink-3)}
.tx-list .monh{padding:22px 0 4px}
.tx-list .tx{padding:9px 0;border-bottom:1px solid var(--line-2)}
.tx.wide.tx2,.thead.wide.tx2{grid-template-columns:22px 30px minmax(0,1fr) minmax(110px,150px) minmax(140px,240px) 112px;column-gap:14px}
.tx.wide.tx2.bal,.thead.wide.tx2.bal{grid-template-columns:22px 30px minmax(0,1fr) minmax(110px,150px) minmax(140px,240px) 112px 112px}
.tx.tx2 .ava{width:28px;height:28px;font-size:12px;box-shadow:none}
.tx.tx2 .glyph{width:30px;height:30px;border-radius:9px}.tx.tx2 .glyph .ico{width:17px;height:17px}
.tx.tx2 .tx-t{font-size:14px;font-weight:700}
.tx.tx2 .tx-s{font-size:12px}
.tx.tx2 .tx-c{font-size:13px;color:var(--ink)}.tx.tx2 .tx-c.faint{color:var(--ink-3)}
.tx.tx2 .tx-a{font-size:14.5px;font-weight:800}
.tx.tx2 .tx-a.inc,.tx.tx2 .tx-a.refund{color:var(--ink)}
.tx.tx2 .tx-a.tr{color:var(--ink-3);font-weight:500}
.tx.tx2:hover{background:var(--surface-2)}
.tx.tx2.open{background:var(--surface-2);border-radius:8px 8px 0 0;border-bottom-color:transparent;padding-left:10px;padding-right:10px;margin:0 -10px;width:calc(100% + 20px)}
.tx.tx2.open input[type=checkbox]{opacity:1}
.txe{background:var(--surface-2);border-radius:0 0 8px 8px;margin:0 -10px 6px;padding:4px 10px 14px 76px;display:grid;gap:12px}
.txe-g1{display:grid;grid-template-columns:160px 140px minmax(0,1fr) 120px;gap:12px}
.txe-g2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.txe .field{gap:4px}.txe .field>span{font-size:11px;font-weight:700;color:var(--ink-3)}
.txe input,.txe select{height:36px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:14px;padding:0 10px}
.txe input.r{text-align:right;font-weight:700}
.txe-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.txe-f .btn.sm{height:34px;padding:0 12px}
@media (max-width:1099px){.tx-list .tx{padding:11px 0}.tx-sum{width:100%}}

/* ===== 거래 입력 (24판) ===== */
.es-auto{display:flex;align-items:center;gap:10px;height:46px;border:1.5px solid var(--ink);border-radius:10px;padding:0 12px 0 14px;background:var(--surface);cursor:text}
.es-auto>.ico{color:var(--ink);flex:none}
.es-auto input{flex:1 1 0;width:0;min-width:0;border:0!important;outline:0!important;box-shadow:none!important;background:transparent;font-size:15px;height:100%;padding:0}
.es-auto-k{font-size:12px;color:var(--ink-3);flex:none}
.es-rows{display:grid;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.es-row{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:10px}
.es-row>.es-l,.es-row>.h.es-l{font-size:12.5px;font-weight:700;color:var(--ink-3);margin:0}
.pickrow.es-row .h{display:block}
.pickrow.es-row .chips{flex-wrap:wrap}
.chip-more{height:32px;padding:0 10px;border:1px solid var(--line);border-radius:8px;color:var(--ink-3)!important;text-decoration:none!important;font-weight:500}
.es-item{display:flex;align-items:center}
.es-item input{flex:1;min-width:0}
.es-item .es-tag{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none}
.es-k{margin-left:8px;font-size:11px;opacity:.7;font-family:inherit;background:none;border:0}
@media (max-width:1099px){.es-row{grid-template-columns:1fr;gap:6px}}
.chip,.quick-amt button,.chip-more{box-shadow:none!important}
.chip{border:1px solid var(--line);background:var(--surface)}
.chip-more{font-size:13px}

/* ===== r24fin (24판 마무리) ===== */
/* the old glass rule (.chip:not(.on):not(.brand), app.css) made chip borders transparent: the entry sheet chips read as plain text */
.es-row .chip:not(.on):not(.brand){border-color:var(--line);background:var(--surface)}
/* 수입 지출 section labels sit on the page like the board (no grey band) */
.stmt table.fin tr.sec:not(.top) td{background:transparent}
/* 현금 흐름: the note under the tree keeps its distance from the last row */
.cf-tree>p.sub{margin-top:14px}
/* secondary buttons: the old glass rule in app.css (higher specificity) left them with a transparent border and a drop shadow;
   the boards show a 1px line and no shadow (내보내기, 메모, 휴지통, 저장하고 계속, 삭제, 복제, 취소) */
.btn:not(.pri):not(.danger):not(.ghost):not(.soft){border-color:var(--line);box-shadow:none}
/* entry sheet: 전체 보기 lines up with the account chips */
.pickrow.es-row .chips{align-items:center}
.pickrow.es-row .chip-more{height:36px}
/* dark: app.css lays a 26% white wash over the chosen segment, which left the dark label on grey (월, 전체, 모두 hard to read) */
:root:not([data-theme="light"]) .seg button[aria-pressed="true"],:root[data-theme="dark"] .seg button[aria-pressed="true"]{background:var(--ink);color:var(--brand-ink);box-shadow:none}
/* phones have no sidebar: the sidebar divider drawn in the .app background showed as a grey line through every screen at x=231 */
@media (max-width:767px){.app{background:var(--bg)}}

/* 거래 입력 달력 (MiniCal): unfolds under the 날짜 row */
.es-cal{align-items:start}
.mc{width:100%;max-width:340px;border:1px solid var(--line);border-radius:14px;padding:10px 12px 12px;background:var(--surface)}
.mc-h{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}
.mc .mc-nav{width:34px;height:34px}
.mc-t{display:inline-flex;align-items:center;gap:4px;border:0;background:none;font:inherit;font-size:15px;font-weight:800;color:var(--ink);padding:6px 10px;border-radius:9px;cursor:pointer;letter-spacing:-.01em}
.mc-w,.mc-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.mc-w span{text-align:center;font-size:11.5px;font-weight:700;color:var(--ink-4);padding:4px 0 6px}
.mc-d{position:relative;height:38px;border:0;border-radius:999px;background:none;font:inherit;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0}
.mc-d.we{color:var(--ink-4)}
.mc-d.hol::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ink-4)}
.mc-d.td{box-shadow:inset 0 0 0 1.5px var(--ink)}
.mc-d.on{background:var(--ink);color:var(--surface);font-weight:800;box-shadow:none}
.mc-d.on::after{background:var(--surface)}
.mc-d:focus-visible,.mc-m button:focus-visible,.mc-t:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mc-m{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-top:4px}
.mc-m button{height:44px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.mc-m button.td{border-color:var(--ink)}
.mc-m button.on{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:800}
@media (hover:hover){.mc-t:hover,.mc-d:not(.on):hover,.mc-m button:not(.on):hover{background:var(--surface-2)}}
.mc-hl{margin:8px 2px 0;font-size:12px;line-height:1.5;color:var(--ink-3)}
@media (max-width:1099px){.es-cal>.es-l{display:none}.mc{max-width:none}.mc-d{height:42px}}
@media (max-width:767px){.mc{border:0;border-radius:0;padding:2px 0 0;background:none}.mc-w,.mc-g{gap:0}}