*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#07090f;--bg1:#0c0f1a;--bg2:#111520;--bg3:#171c2c;--bg4:#1e2436;
  --glass:rgba(255,255,255,.038);--glass2:rgba(255,255,255,.06);
  --b:rgba(255,255,255,.07);--b2:rgba(255,255,255,.12);--b3:rgba(255,255,255,.18);
  --t:#dde4f5;--t2:#8492b4;--t3:#3a4666;
  --p:#7c6af7;--p2:#9d8ffa;--p3:#c4bafd;--pg:rgba(124,106,247,.14);--pg2:rgba(124,106,247,.06);
  --pk:#f06292;--pkg:rgba(240,98,146,.12);
  --tl:#26c6b0;--tlg:rgba(38,198,176,.12);
  --am:#f5a623;--amg:rgba(245,166,35,.12);
  --bl:#5b9cf6;--blg:rgba(91,156,246,.12);
  --rd:#ef5350;--rdg:rgba(239,83,80,.12);
  --r:14px;--r2:10px;
}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--t);font-family:'Outfit',sans-serif;font-size:13px}
.mi{font-family:'Material Icons Round';font-style:normal;font-size:inherit;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased}

/* NOISE */
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");pointer-events:none;z-index:9999}
/* GLOWS */
.glow{position:fixed;border-radius:50%;pointer-events:none;filter:blur(120px);z-index:0}
.g1{width:600px;height:600px;background:rgba(124,106,247,.06);top:-200px;left:-100px}
.g2{width:400px;height:400px;background:rgba(91,156,246,.04);bottom:-100px;right:0}

/* LAYOUT */
.app{display:flex;height:100vh;position:relative;z-index:1}

/* SIDEBAR */
.sidebar{width:56px;background:var(--bg1);border-right:1px solid var(--b);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:2px;flex-shrink:0;z-index:10}
.nb{width:40px;height:40px;border-radius:var(--r2);border:none;background:transparent;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s;position:relative;font-size:20px}
.nb:hover{background:var(--glass);color:var(--t2)}
.nb.on{background:var(--pg);color:var(--p2)}
.nb.on::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:18px;background:var(--p2);border-radius:0 3px 3px 0}
.nb-tip{position:absolute;left:52px;top:50%;transform:translateY(-50%);background:var(--bg3);border:1px solid var(--b2);padding:5px 10px;border-radius:8px;font-size:11px;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:100}
.nb:hover .nb-tip{opacity:1}
.sp{flex:1}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{height:54px;border-bottom:1px solid var(--b);background:rgba(7,9,15,.85);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0;z-index:5}
.page-title{font-size:15px;font-weight:700;letter-spacing:-.3px}
.page-sub{font-size:10px;color:var(--t3);letter-spacing:.8px;text-transform:uppercase;margin-top:1px}
.tbar-right{display:flex;align-items:center;gap:8px}
/* filter pills */
.fpills{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.pill{padding:4px 11px;border-radius:99px;border:1px solid var(--b);background:transparent;color:var(--t2);font-family:'Outfit',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:all .18s;white-space:nowrap}
.pill:hover{border-color:var(--b2);color:var(--t)}
.pill.on{background:var(--pg);border-color:rgba(124,106,247,.4);color:var(--p2)}
.pill.eur.on{background:var(--blg);border-color:rgba(91,156,246,.4);color:var(--bl)}
.pill.krw.on{background:var(--amg);border-color:rgba(245,166,35,.4);color:var(--am)}
.fsep{width:1px;height:12px;background:var(--b)}
.btn-add{background:var(--p);color:#fff;border:none;border-radius:var(--r2);padding:7px 14px;font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;box-shadow:0 0 18px rgba(124,106,247,.35);transition:all .18s}
.btn-add:hover{box-shadow:0 0 28px rgba(124,106,247,.55);transform:translateY(-1px)}

/* CONTENT */
.content{flex:1;overflow-y:auto;padding:18px 20px;scrollbar-width:thin;scrollbar-color:var(--bg3) transparent}
.content::-webkit-scrollbar{width:4px}
.content::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:99px}
.page{display:none}.page.on{display:block}

/* SECTION LABEL */
.slbl{font-size:10px;font-weight:600;color:var(--t3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.slbl::after{content:'';flex:1;height:1px;background:var(--b)}

/* STAT GRID */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
@media(max-width:1000px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.sc{background:var(--glass);border:1px solid var(--b);border-radius:var(--r);padding:18px;position:relative;overflow:hidden;transition:border-color .2s,transform .2s;animation:fadeUp .4s ease both}
.sc:hover{border-color:var(--b2);transform:translateY(-2px)}
.sc-glow{position:absolute;width:100px;height:100px;border-radius:50%;filter:blur(40px);top:-20px;right:-20px;opacity:.5}
.sc-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:17px}
.sc-badge{position:absolute;top:14px;right:14px;font-size:9px;font-weight:700;letter-spacing:.5px;padding:3px 7px;border-radius:99px}
.sc-label{font-size:9px;color:var(--t2);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:4px}
.sc-val{font-size:22px;font-weight:800;letter-spacing:-1px;line-height:1}
.sc-sub{font-size:10px;color:var(--t3);margin-top:4px}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* SPARKLINE CARDS */
.sc-spark{padding:14px 16px 0!important;background:rgba(var(--ca-rgb),.07)!important;border-color:rgba(var(--ca-rgb),.24)!important;transition:border-color .2s,transform .2s,background .35s}
.sc-spark:hover{border-color:rgba(var(--ca-rgb),.42)!important}
.sc-spark .sc-glow{width:220px;height:220px;opacity:.45;top:-50px;right:-50px}
.sc-spark-top{display:flex;align-items:flex-start;gap:11px;margin-bottom:10px}
.sc-spark-body{flex:1;min-width:0}
.sc-spark-val-row{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.sc-sparkline-wrap{margin:0 -16px;height:56px;overflow:hidden;border-radius:0 0 var(--r) var(--r);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 14%);mask-image:linear-gradient(to bottom,transparent 0%,black 14%)}
.sc-sparkline-wrap svg{width:100%;height:100%;display:block}
/* change badge */
.sc-chg-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:.2px;padding:2px 6px;border-radius:99px;white-space:nowrap;flex-shrink:0;background:var(--glass);color:var(--t3);transition:background .2s,color .2s}
.sc-chg-good{background:rgba(38,198,176,.15)!important;color:#26c6b0!important}
/* inside sparkline cards — badge always uses card accent color */
.sc-spark .sc-chg-badge,.sc-spark .sc-chg-good,.sc-spark .sc-chg-bad{background:rgba(var(--ca-rgb),.15)!important;color:rgb(var(--ca-rgb))!important}
.sc-chg-bad{background:rgba(240,98,146,.15)!important;color:#f06292!important}

/* INSIGHT STRIP */
.insight-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
@media(max-width:900px){.insight-strip{grid-template-columns:1fr}}
.ins-card{background:var(--glass);border:1px solid var(--b);border-radius:var(--r2);padding:10px 14px;display:flex;align-items:center;gap:10px;transition:border-color .2s;animation:fadeUp .35s ease both}
.ins-card:hover{border-color:var(--b2)}
.ins-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ins-text{font-size:12px;font-weight:600;color:var(--t);line-height:1.4}

/* CHART CARD */
.cc{background:var(--glass);border:1px solid var(--b);border-radius:var(--r);padding:18px;animation:fadeUp .4s .1s ease both}
.cc-head{font-size:9px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);margin-bottom:14px;display:flex;align-items:center;gap:7px}
.cc-head-link{margin-left:auto;background:none;border:none;color:var(--t3);cursor:pointer;padding:3px;border-radius:6px;display:flex;align-items:center;transition:color .15s,background .15s;opacity:.55}
.cc-head-link:hover{color:var(--p2);background:var(--pg);opacity:1}
.cc-dot{width:5px;height:5px;border-radius:50%;background:var(--p2);box-shadow:0 0 6px var(--p)}
.grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-bottom:14px}
.grid-2-eq{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:880px){.grid-2,.grid-2-eq{grid-template-columns:1fr}}

/* DONUT */
.donut-wrap{display:flex;align-items:center;gap:20px}
.donut-canvas{position:relative;width:168px;height:168px;flex-shrink:0}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donut-pct{font-size:24px;font-weight:800;letter-spacing:-1px}
.donut-lbl{font-size:8px;color:var(--t3);letter-spacing:1px;text-transform:uppercase}
.legend{flex:1;display:flex;flex-direction:column;gap:10px}
.legend-row{display:flex;align-items:center;justify-content:space-between;border-radius:7px;padding:3px 6px;margin:0 -6px;transition:background .15s,opacity .15s}
.legend-left{display:flex;align-items:center;gap:8px}
.legend-bar{width:3px;height:14px;border-radius:99px;transition:height .15s}
.legend-name{font-size:11px;color:var(--t2)}
.legend-right{display:flex;align-items:center;gap:8px}
.legend-pct{font-size:9px;font-weight:700;color:var(--t3);letter-spacing:.3px;min-width:24px;text-align:right}
.legend-val{font-size:13px;font-weight:700}
/* Legend interactive mode (when a bank is selected) */
.legend.bank-mode .legend-row{cursor:pointer}
.legend.bank-mode .legend-row:hover{background:var(--glass2)}
.legend.bank-mode .legend-row.active{background:var(--pg2)}
.legend.bank-mode .legend-row.active .legend-bar{height:18px}
/* Bank detail transaction panel */
.btx-row{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:var(--r2);background:var(--glass);border:1px solid transparent;transition:all .15s;cursor:pointer;margin-bottom:5px;animation:fadeUp .2s ease}
.btx-row:hover{border-color:var(--b);background:var(--glass2)}
.btx-ico{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px}
.btx-cat-ico{width:26px;height:26px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.btx-body{flex:1;min-width:0}
.btx-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btx-meta{font-size:10px;color:var(--t3);display:flex;align-items:center;gap:5px;margin-top:2px}
.btx-right{display:flex;align-items:center;gap:7px;flex-shrink:0}
.btx-amt{font-size:13px;font-weight:800;font-family:'DM Mono',monospace;letter-spacing:-.3px}

/* BANK GRID */
.bank-grid{display:grid;gap:7px;margin-bottom:14px}
.bcard{background:var(--glass);border:1px solid var(--b);border-radius:var(--r2);padding:10px 11px;cursor:pointer;transition:all .18s;position:relative;min-width:0}
.bcard:hover{border-color:var(--b2);transform:translateY(-1px)}
.bcard.on{border-color:rgba(124,106,247,.4);background:var(--pg2)}
.bcard-icon{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;margin-bottom:6px}
.bcard-icon .mi{font-size:13px}
.bcard-name{font-size:10px;font-weight:700;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcard-bal{font-size:12px;font-weight:800;letter-spacing:-.3px;white-space:nowrap}
.bcard-cur{font-size:8px;color:var(--t3);letter-spacing:.5px;text-transform:uppercase;margin-top:1px}

/* CAT TABLE */
.cat-table-head{display:grid;grid-template-columns:1fr 70px 70px 110px 24px;gap:8px;padding:0 0 8px;border-bottom:1px solid var(--b);font-size:9px;color:var(--t3);letter-spacing:1px;text-transform:uppercase}
.cat-table-row{display:grid;grid-template-columns:1fr 70px 70px 110px 24px;gap:8px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.03);align-items:center}
.cat-table-row:last-child{border-bottom:none}
.cat-expand-btn{width:100%;margin-top:8px;padding:7px;background:var(--glass);border:1px solid var(--b);border-radius:var(--r2);color:var(--t3);font-size:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;transition:background .15s,color .15s}
.cat-expand-btn:hover{background:var(--glass2);color:var(--t)}.cat-expand-btn .mi{font-size:14px}
.cat-name-cell{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}
.cat-ic{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.cat-amt{font-size:12px;font-weight:700;text-align:right}
.cat-bud{font-size:11px;color:var(--t3);text-align:right}
.cat-bud-editable{cursor:pointer;border-radius:6px;padding:2px 6px;margin:-2px -6px;transition:background .15s}
.cat-bud-editable:hover{background:var(--glass2);color:var(--t)}
.cat-bud-input{width:70px;background:var(--bg2);border:1px solid var(--p);border-radius:6px;padding:3px 7px;color:var(--t);font-family:'Outfit',sans-serif;font-size:11px;text-align:right;outline:none;box-shadow:0 0 0 3px rgba(124,106,247,.12)}
.cat-bar-wrap{display:flex;flex-direction:column;gap:3px}
.cat-bar-bg{height:4px;background:rgba(255,255,255,.05);border-radius:99px;overflow:hidden}
.cat-bar-fill{height:100%;border-radius:99px;transition:width .7s ease}
.cat-pct{font-size:9px;font-weight:700}

/* TX TOOLBAR */
.tx-toolbar{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.tx-search-wrap{position:relative;display:flex;align-items:center}
.tx-search-icon{position:absolute;left:12px;font-size:17px;color:var(--t3);pointer-events:none}
.tx-search{width:100%;background:var(--glass);border:1px solid var(--b);border-radius:var(--r2);padding:10px 36px 10px 38px;color:var(--t);font-family:'Outfit',sans-serif;font-size:13px;outline:none;transition:border-color .18s,box-shadow .18s}
.tx-search:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(124,106,247,.12)}
.tx-search::placeholder{color:var(--t3)}
.tx-search-clear{position:absolute;right:8px;width:24px;height:24px;border-radius:6px;border:none;background:transparent;color:var(--t3);cursor:pointer;display:none;align-items:center;justify-content:center;font-size:16px;transition:background .12s}
.tx-search-clear:hover{background:var(--glass2)}
.tx-search:not(:placeholder-shown) ~ .tx-search-clear,
.tx-search-wrap:focus-within .tx-search-clear{display:flex}
.tx-date-filters{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.tx-date-input{width:125px;background:var(--bg2);border:1px solid var(--b);border-radius:var(--r2);padding:5px 10px;color:var(--t);font-family:'Outfit',sans-serif;font-size:11px;outline:none;color-scheme:dark;display:none}
.tx-date-input:focus{border-color:var(--p)}
.tx-date-sep{font-size:11px;color:var(--t3);display:none}
.tx-date-filters.show-custom .tx-date-input,
.tx-date-filters.show-custom .tx-date-sep{display:inline-block}
.tx-active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:0;margin-bottom:6px}
.tx-active-filters:empty{display:none}
.af-badge{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;background:var(--pg2);border:1px solid rgba(124,106,247,.25);border-radius:20px;font-size:11px;font-weight:600;color:var(--p2);cursor:pointer;transition:background .15s}
.af-badge:hover{background:var(--pg)}
.tx-list-info{font-size:11px;color:var(--t3);margin-bottom:8px;display:flex;align-items:center;gap:6px}
/* TX TYPE BAR */
.tx-type-bar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tx-type-pills{display:flex;align-items:center;gap:5px;flex-wrap:wrap;flex:1}
.tx-sort-btn{width:30px;height:30px;border-radius:9px;border:1px solid var(--b);background:var(--glass);color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;transition:all .18s}
.tx-sort-btn:hover{border-color:var(--p2);color:var(--p2);background:var(--pg)}
/* TX BULK BAR */
.tx-bulk-bar{display:none;align-items:center;gap:12px;padding:9px 14px;background:var(--pg2);border:1px solid rgba(124,106,247,.18);border-radius:var(--r2);margin-bottom:10px;animation:fadeUp .2s ease}
.tx-bulk-bar.show{display:flex}
.tx-bulk-check-all{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--t);cursor:pointer;flex:1}

/* ── 커스텀 체크박스 (공통) ─────────────────────────── */
.tx-bulk-check-all input[type=checkbox],
.tx-check{-webkit-appearance:none;appearance:none;width:15px;height:15px;border:1.5px solid var(--b2);border-radius:4px;background:var(--bg2);cursor:pointer;flex-shrink:0;position:relative;transition:background .15s,border-color .15s}
.tx-bulk-check-all input[type=checkbox]:hover,
.tx-check:hover{border-color:var(--p2)}
.tx-bulk-check-all input[type=checkbox]:checked,
.tx-check:checked{background:var(--p);border-color:var(--p)}
.tx-bulk-check-all input[type=checkbox]:checked::after,
.tx-check:checked::after{content:'';display:block;position:absolute;inset:0;margin:auto;width:4px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-0.5px)}

/* TX ROW checked state */
.tx-row.checked{background:var(--pg2);border-color:rgba(124,106,247,.25)}

/* TX LIST */
.tx-list{display:flex;flex-direction:column;gap:5px}
.tx-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r2);background:var(--glass);border:1px solid transparent;transition:all .18s;animation:fadeUp .25s ease}
.tx-row:hover{border-color:var(--b);background:var(--glass2)}
.tx-ico{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px}
.tx-cat-ico{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px}
.tx-body{flex:1;min-width:0}
.tx-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-meta{font-size:10px;color:var(--t3);display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:2px}
.tx-tag{padding:1px 6px;border-radius:99px;font-size:9px;font-weight:700;letter-spacing:.3px}
.tx-right{text-align:right;flex-shrink:0}
.tx-amt{font-size:15px;font-weight:800;letter-spacing:-.5px;font-family:'DM Mono',monospace}
.tx-date{font-size:10px;color:var(--t3);margin-top:2px}
.tx-actions{display:flex;gap:4px;flex-shrink:0}
.tx-btn{width:28px;height:28px;border-radius:7px;border:1px solid var(--b);background:transparent;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .18s}
.tx-btn:hover.edit{background:var(--pg);border-color:rgba(124,106,247,.3);color:var(--p2)}
.tx-btn:hover.del{background:var(--pkg);border-color:rgba(240,98,146,.3);color:var(--pk)}

/* GOAL CARDS */
.goals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-bottom:14px}
.gcard{background:var(--glass);border:1px solid var(--b);border-radius:var(--r);padding:18px;transition:border-color .2s;position:relative}
.gcard:hover{border-color:var(--b2)}
.gcard.gcard-loss{border-color:rgba(240,82,82,.18);background:linear-gradient(135deg,rgba(240,82,82,.04) 0%,var(--glass) 100%)}
.gcard.gcard-loss:hover{border-color:rgba(240,82,82,.35)}
.gcard-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}
.gcard-left{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden}
.gcard-ico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.gcard-name{font-size:14px;font-weight:700;letter-spacing:-.3px;white-space:normal;word-break:break-word}
.gcard-meta{font-size:10px;color:var(--t3);margin-top:3px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.gcard-badge{padding:2px 7px;border-radius:99px;font-size:9px;font-weight:700}
.gcard-right{text-align:right}
.gcard-cur{font-size:18px;font-weight:800;letter-spacing:-.5px;font-family:'DM Mono',monospace}
.gcard-tgt{font-size:10px;color:var(--t3);margin-top:2px}
.progress-track{height:5px;background:rgba(255,255,255,.05);border-radius:99px;overflow:hidden;margin:12px 0 7px}
.progress-fill{height:100%;border-radius:99px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.gcard-foot{display:flex;justify-content:space-between;font-size:10px;color:var(--t3)}
.gcard-pct{font-weight:700}
.gcard-hist{margin-top:12px;border-top:1px solid var(--b);padding-top:12px}
.gcard-hist-title{font-size:9px;color:var(--t3);letter-spacing:1px;text-transform:uppercase;margin-bottom:7px;display:flex;align-items:center;gap:5px}
.hist-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.025);font-size:11px}
.hist-row:last-child{border-bottom:none}
.hist-date{color:var(--t3)}
.hist-amt{font-weight:700;font-family:'DM Mono',monospace}
.monthly-badge{display:flex;align-items:center;gap:7px;margin-top:10px;padding:9px 11px;border-radius:9px;background:var(--pkg);border:1px solid rgba(240,98,146,.12)}
.gcard-actions{display:flex;gap:5px;margin-top:11px;border-top:1px solid var(--b);padding-top:11px}
.gact{flex:1;display:flex;align-items:center;justify-content:center;padding:7px 0;border-radius:9px;border:1px solid var(--b);background:transparent;color:var(--t2);font-family:'Outfit',sans-serif;font-size:12px;cursor:pointer;transition:all .18s;gap:4px}
.gact:hover.upd{background:var(--tlg);border-color:rgba(38,198,176,.3);color:var(--tl)}
.gact:hover.edt{background:var(--pg);border-color:rgba(124,106,247,.3);color:var(--p2)}
.gact:hover.del{background:var(--pkg);border-color:rgba(240,98,146,.3);color:var(--pk)}

/* SUB CARDS */
.sub-card{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:var(--r2);background:var(--glass);border:1px solid transparent;transition:all .18s;margin-bottom:6px;animation:fadeUp .25s ease}
.sub-card:hover{border-color:var(--b)}
.sub-card.paused{opacity:.55}
.sub-card.ended{opacity:.35}
.sub-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.sub-body{flex:1;min-width:0}
.sub-name{font-size:13px;font-weight:700}
.sub-meta{font-size:10px;color:var(--t3);display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px}
.sub-status{padding:2px 7px;border-radius:99px;font-size:9px;font-weight:700}
.sub-right{text-align:right;flex-shrink:0}
.sub-amt{font-size:15px;font-weight:800;letter-spacing:-.5px;font-family:'DM Mono',monospace}
.sub-period{font-size:10px;color:var(--t3);margin-top:1px}
.sub-actions{display:flex;gap:5px;flex-shrink:0}
.sub-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--b);background:transparent;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;transition:all .18s}
.sub-btn:hover.pause{background:var(--amg);border-color:rgba(245,166,35,.3);color:var(--am)}
.sub-btn:hover.play{background:var(--tlg);border-color:rgba(38,198,176,.3);color:var(--tl)}
.sub-btn:hover.edit{background:var(--pg);border-color:rgba(124,106,247,.3);color:var(--p2)}
.sub-btn:hover.del{background:var(--pkg);border-color:rgba(240,98,146,.3);color:var(--pk)}
.sub-tabs{display:flex;gap:5px;margin-bottom:14px}

/* SETTINGS */
.setc{background:var(--glass);border:1px solid var(--b);border-radius:var(--r);padding:20px;margin-bottom:10px}
.setc-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;cursor:pointer;flex-wrap:wrap}
.setc-head-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.setc-title{font-size:13px;font-weight:700;flex:1}
.setc-subtitle{font-size:10px;color:var(--t3);font-weight:500;width:100%;padding-left:52px;margin-top:-10px;margin-bottom:2px;letter-spacing:.01em;line-height:1.3}
.setc-toggle{font-size:20px;color:var(--t3);transition:transform .2s}
.setc-toggle.open{transform:rotate(180deg)}
.setc-body{display:none}
.setc-body.open{display:block}
.setc p{font-size:11px;color:var(--t2);line-height:1.7;margin-bottom:12px}
/* ── CATS-BUD INNER TABS ─────────────────────────────────── */
.cats-tab-bar{display:flex;gap:0;background:var(--bg2);border:1px solid var(--b);border-radius:var(--r2);overflow:hidden;margin-bottom:16px;width:fit-content}
.cats-tab-btn{border:none;background:transparent;color:var(--t3);font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;padding:6px 18px;cursor:pointer;transition:all .18s;border-right:1px solid var(--b);white-space:nowrap}
.cats-tab-btn:last-child{border-right:none}
.cats-tab-btn.on{background:var(--pg);color:var(--p2)}
.cats-tab-pane{display:none}
.cats-tab-pane.on{display:block}

/* ── LIGHT MODE ────────────────────────────────────────────── */
html[data-theme="light"]{
  --bg:#f4f6fb;--bg1:#edf0f8;--bg2:#e4e8f3;--bg3:#d8dded;--bg4:#cdd3e7;
  --glass:rgba(0,0,0,.025);--glass2:rgba(0,0,0,.05);
  --b:rgba(0,0,0,.07);--b2:rgba(0,0,0,.12);--b3:rgba(0,0,0,.18);
  --t:#1a2040;--t2:#3d4d80;--t3:#8090b8;
}
html[data-theme="light"] .topbar{background:rgba(237,240,248,.88)}
html[data-theme="light"] .sidebar{background:var(--bg1)}
html[data-theme="light"] .bank-dd-list{box-shadow:0 8px 28px rgba(0,0,0,.12)}
html[data-theme="light"] .fg input[type=text],
html[data-theme="light"] .fg input[type=number],
html[data-theme="light"] .fg input[type=date],
html[data-theme="light"] .fg select,
html[data-theme="light"] .fg textarea{color-scheme:light}
html[data-theme="light"] .tx-date-input{color-scheme:light}

/* ── SETTINGS CARD GRID ────────────────────────────────────── */
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.scard{background:var(--glass);border:1px solid var(--b);border-radius:var(--r);padding:22px 24px}
.scard-full{grid-column:1/-1}
.scard-head{margin-bottom:18px}
.scard-title{font-size:14px;font-weight:700;color:var(--t);margin-bottom:3px;letter-spacing:-.2px}
.scard-sub{font-size:10px;color:var(--t3);font-weight:500;letter-spacing:.01em;line-height:1.4}
.scard-div{height:1px;background:var(--b);margin:16px 0}
/* Theme selector */
.stheme-opts{display:flex;gap:8px;flex-wrap:wrap}
.stheme-btn{flex:1;min-width:70px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;border-radius:var(--r2);border:1px solid var(--b2);background:var(--bg3);cursor:pointer;font-family:'Outfit',sans-serif;font-size:11px;font-weight:600;color:var(--t2);transition:all .18s}
.stheme-btn:hover{border-color:rgba(124,106,247,.4);color:var(--p2);background:rgba(124,106,247,.08)}
.stheme-btn.on{border-color:rgba(124,106,247,.55);background:var(--pg);color:var(--p2)}
.stheme-btn .mi{font-size:22px}
/* Nav toggles */
.snav-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--b)}
.snav-row:last-child{border-bottom:none}
.snav-info{display:flex;align-items:center;gap:9px}
.snav-icon{font-size:17px;color:var(--t3)}
.snav-label{font-size:12px;font-weight:600;color:var(--t)}
.snav-badge{font-size:9px;font-weight:700;color:var(--t3);background:var(--bg3);border:1px solid var(--b);border-radius:99px;padding:2px 7px;letter-spacing:.5px}
.snav-toggle{position:relative;width:36px;height:20px;flex-shrink:0;cursor:pointer;display:inline-block}
.snav-toggle input{opacity:0;width:0;height:0;position:absolute}
.snav-slider{position:absolute;inset:0;background:var(--bg3);border-radius:99px;transition:background .2s,border-color .2s;border:1px solid var(--b2)}
.snav-slider::before{content:'';position:absolute;width:14px;height:14px;left:2px;top:2px;border-radius:50%;background:var(--t3);transition:transform .2s,background .2s}
.snav-toggle input:checked~.snav-slider{background:rgba(124,106,247,.3);border-color:rgba(124,106,247,.5)}
.snav-toggle input:checked~.snav-slider::before{transform:translateX(16px);background:var(--p2)}
.snav-row.locked .snav-label{color:var(--t2)}
.snav-row.locked .snav-toggle{opacity:.35;pointer-events:none}

/* FORMS */
.fg{margin-bottom:12px}
.fg label,.fg>div>label{display:block;font-size:9px;font-weight:700;color:var(--t3);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:6px}
.fg input[type=text],.fg input[type=number],.fg input[type=date],.fg input[type=password],.fg select,.fg textarea{width:100%;background:var(--bg2);border:1px solid var(--b);border-radius:var(--r2);padding:9px 13px;color:var(--t);font-family:'Outfit',sans-serif;font-size:13px;outline:none;transition:border-color .18s,box-shadow .18s;appearance:none;color-scheme:dark}
.fg select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238492b4' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
/* .fg 밖 select — 동적 생성 (은행 선택 등) */
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(124,106,247,.12)}
.fg input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.5);cursor:pointer}
.fgr{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.fgr .fg{margin-bottom:0}
.fg-full{grid-column:1/-1}
.irow{display:flex;gap:8px}.irow input{flex:1}
.btn-sm{background:var(--pg);color:var(--p2);border:1px solid rgba(124,106,247,.2);border-radius:9px;padding:0 14px;height:40px;font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .18s}
.btn-sm:hover{background:rgba(124,106,247,.22)}
.btn-sm.danger{background:var(--pkg);color:var(--pk);border-color:rgba(240,98,146,.2)}
.btn-sm.danger:hover{background:rgba(240,98,146,.2)}
.btn-sm.teal{background:var(--tlg);color:var(--tl);border-color:rgba(38,198,176,.2)}
.btn-sm.teal:hover{background:rgba(38,198,176,.2)}
.btn-back{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.05);color:var(--t2);border:1px solid var(--b2);border-radius:50px;padding:0 16px 0 12px;height:36px;font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:background .16s,color .16s,border-color .16s}
.btn-back:hover{background:rgba(124,106,247,.14);color:var(--p2);border-color:rgba(124,106,247,.35)}
.btn-back .mi{font-size:14px;line-height:1}
.btn-full{width:100%;background:linear-gradient(135deg,var(--p),#5b48d4);color:#fff;border:none;border-radius:var(--r2);padding:12px;font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 4px 20px rgba(124,106,247,.4);transition:box-shadow .18s,transform .18s;margin-top:6px;letter-spacing:-.2px}
.btn-full:hover{box-shadow:0 4px 28px rgba(124,106,247,.6);transform:translateY(-1px)}
.btn-full:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-full.teal{background:linear-gradient(135deg,var(--tl),#0891b2);box-shadow:0 4px 20px rgba(38,198,176,.35)}
.btn-full.pink{background:linear-gradient(135deg,var(--pk),#be185d);box-shadow:0 4px 20px rgba(240,98,146,.35)}
.btn-full.blue{background:linear-gradient(135deg,var(--bl),#2563eb);box-shadow:0 4px 20px rgba(91,156,246,.35)}

/* INIT BAL ROWS */
.bal-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--b)}
.bal-row:last-child{border-bottom:none}
.bal-ico{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.bal-name{flex:1;font-size:13px;font-weight:600}
.bal-sym{font-size:13px;color:var(--t2);flex-shrink:0}
.bal-input:focus{border-color:var(--p)!important;box-shadow:0 0 0 3px rgba(124,106,247,.12)!important}
.bal-input{width:130px!important;text-align:right;background:var(--bg2)!important;border:1px solid var(--b)!important;border-radius:var(--r2)!important;padding:8px 12px!important;color:var(--t)!important;font-family:Outfit,sans-serif!important;font-size:13px!important;outline:none!important;transition:border-color .18s,box-shadow .18s!important}

/* CAT MGR ROWS */
.cat-mgr-row{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--b)}
.cat-mgr-row:last-child{border-bottom:none}
.cat-mgr-ico{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.cat-mgr-name{flex:1;font-size:12px;font-weight:600}
.cat-mgr-badge{font-size:9px;color:var(--t3);padding:2px 7px;border-radius:99px;flex-shrink:0}
.cat-del-btn{width:30px;height:30px;border-radius:8px;border:1px solid rgba(240,98,146,.3);background:var(--pkg);color:var(--pk);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;transition:background .15s;flex-shrink:0}
.cat-del-btn:hover{background:rgba(240,98,146,.22)}

/* BACKUP */
.backup-btns{display:flex;gap:9px;flex-wrap:wrap}
.backup-btn{display:flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--r2);font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .18s}
.backup-btn.export{background:var(--tlg);color:var(--tl);border:1px solid rgba(38,198,176,.25)}
.backup-btn.export:hover{background:rgba(38,198,176,.2)}
.backup-btn.import{background:var(--pg);color:var(--p2);border:1px solid rgba(124,106,247,.25)}
.backup-btn.import:hover{background:rgba(124,106,247,.2)}
#backup-info{font-size:11px;color:var(--t3);margin-top:10px;min-height:16px}

/* MODAL */
.ov{position:fixed;inset:0;background:rgba(4,5,12,.82);backdrop-filter:blur(8px);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s}
.ov.on{opacity:1;pointer-events:all}
.modal{background:var(--bg2);border:1px solid var(--b2);border-radius:18px;padding:26px;width:480px;max-width:94vw;box-shadow:0 40px 80px rgba(0,0,0,.6);transform:translateY(12px) scale(.97);transition:transform .22s;position:relative;max-height:90vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--bg3) transparent}
.ov.on .modal{transform:none}
.modal-sm{width:360px}
.modal-title{font-size:17px;font-weight:800;letter-spacing:-.5px;margin-bottom:18px;padding-right:30px}
.modal-close{position:absolute;top:16px;right:16px;width:28px;height:28px;border-radius:7px;background:var(--glass);border:1px solid var(--b);color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:background .18s}
.modal-close:hover{background:var(--glass2)}

/* TOAST */
.toast{position:fixed;bottom:22px;right:22px;z-index:500;background:var(--bg3);border:1px solid var(--b2);border-radius:11px;padding:11px 16px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px;transform:translateY(60px);opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1);max-width:320px;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.toast.show{transform:none;opacity:1}
.toast.ok{border-color:rgba(38,198,176,.3)}
.toast.err{border-color:rgba(240,98,146,.3)}

/* EMPTY */
.empty{padding:40px 20px;text-align:center;color:var(--t3);font-size:12px;line-height:1.8}
.empty .mi{font-size:36px;display:block;margin-bottom:10px;opacity:.25}

/* TRANSFER PANEL */
.transfer-panel{display:none;background:var(--pg2);border:1px solid rgba(124,106,247,.18);border-radius:var(--r2);padding:13px;margin:4px 0 8px}
.transfer-panel.show{display:block}
.save-goal-panel{display:none;background:var(--tlg);border:1px solid rgba(38,198,176,.22);border-radius:var(--r2);padding:13px;margin:4px 0 8px}
.save-goal-panel.show{display:block}

/* RECURRING PANEL */
.recurring-panel{display:none;background:var(--amg);border:1px solid rgba(245,166,35,.18);border-radius:var(--r2);padding:13px;margin:4px 0 8px}
.recurring-panel.show{display:block}

/* SPLIT PANEL */
.split-panel{display:none;background:var(--tlg);border:1px solid rgba(38,198,176,.18);border-radius:var(--r2);padding:13px;margin:4px 0 8px}
.split-panel.show{display:block}
.split-row{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.split-row .fg{flex:1.2;margin:0}
.split-row input{flex:1;background:var(--bg2);border:1px solid var(--b);border-radius:8px;padding:7px 10px;color:var(--t);font-family:'Outfit',sans-serif;font-size:12px;outline:none;text-align:right}
.split-row input:focus{border-color:var(--tl)}
.split-del{width:26px;height:26px;border-radius:7px;border:1px solid rgba(240,98,146,.25);background:transparent;color:var(--pk);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:background .12s}
.split-del:hover{background:var(--pkg)}

/* RECURRING BADGE in tx list */
.tx-rec-badge{font-size:9px;font-weight:700;padding:1px 5px;border-radius:99px;background:var(--amg);color:var(--am)}

/* ── 반복/분할 옵션 체크박스 ── */
.fx-opt-label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--t2);cursor:pointer;user-select:none}
.fx-opt-check{-webkit-appearance:none;appearance:none;width:15px;height:15px;border:1.5px solid var(--b2);border-radius:4px;background:var(--bg2);cursor:pointer;flex-shrink:0;position:relative;transition:background .15s,border-color .15s}
.fx-opt-check:hover{border-color:var(--p2)}
.fx-opt-check:checked{background:var(--p);border-color:var(--p)}
.fx-opt-check:checked::after{content:'';display:block;position:absolute;inset:0;margin:auto;width:4px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-0.5px)}
.transfer-arrow-row{display:flex;align-items:center;gap:11px;margin-top:9px}
.transfer-bank-label{flex:1}
.transfer-bank-name{font-size:13px;font-weight:700}

/* ── number input 스핀 버튼 완전 제거 ── */
input[type=number] { -moz-appearance:textfield; appearance:textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; display:none; }

input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;display:none}
.bal-input{width:130px!important;text-align:right;background:var(--bg2)!important;border:1px solid var(--b)!important;border-radius:var(--r2)!important;padding:8px 12px!important;color:var(--t)!important;font-family:Outfit,sans-serif!important;font-size:13px!important;outline:none!important}
.bal-input:focus{border-color:var(--p)!important;box-shadow:0 0 0 3px rgba(124,106,247,.12)!important}
.backup-btns{display:flex;gap:9px;flex-wrap:wrap}
.backup-btn{display:flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--r2);font-family:Outfit,sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .18s}
.backup-btn.export{background:var(--tlg);color:var(--tl);border:1px solid rgba(38,198,176,.25)}
.backup-btn.import{background:var(--pg);color:var(--p2);border:1px solid rgba(124,106,247,.25)}
.fgr{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:12px}
.fgr .fg{margin-bottom:0}
.gcard-name{white-space:normal!important;word-break:break-word!important}
.ctooltip{position:relative;display:inline-flex}
.ctooltip-text{position:absolute;bottom:calc(100%+6px);left:50%;transform:translateX(-50%);background:var(--bg3);border:1px solid var(--b2);padding:5px 10px;border-radius:8px;font-size:11px;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:100;color:var(--t)}
.ctooltip:hover .ctooltip-text{opacity:1}


/* ── 모달 드래그 ── */
.modal-title{cursor:grab;user-select:none;-webkit-user-select:none}
.modal-title:active{cursor:grabbing}
.modal.is-dragging{transition:none!important}

/* ── 세팅 섹션 드래그 ── */
.setc{transition:opacity .15s,box-shadow .15s}
.setc.drag-src{opacity:.4}
.setc.drag-over-top{box-shadow:0 -3px 0 var(--p2)}
.setc.drag-over-bot{box-shadow:0 3px 0 var(--p2)}
.setc-drag-handle{width:22px;height:100%;display:flex;align-items:center;justify-content:center;color:var(--t3);cursor:grab;flex-shrink:0;font-size:18px;opacity:0;transition:opacity .15s}
.setc-drag-handle:active{cursor:grabbing}
.setc-head:hover .setc-drag-handle{opacity:1}

/* ── 커스텀 드롭다운 ───────────────────────────────────────── */
.fg select { display:none !important }
.cdd-wrap { position:relative; width:100% }
.cdd-trigger {
  width:100%; background:var(--bg2); border:1px solid var(--b);
  border-radius:var(--r2); padding:9px 34px 9px 13px;
  color:var(--t); font-family:'Outfit',sans-serif; font-size:13px;
  cursor:pointer; display:flex; align-items:center;
  user-select:none; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; min-height:40px; box-sizing:border-box;
  transition:border-color .18s, box-shadow .18s;
}
.cdd-trigger:hover { border-color:var(--b2) }
.cdd-trigger.open  { border-color:var(--p); box-shadow:0 0 0 3px rgba(124,106,247,.12) }
.cdd-arrow {
  position:absolute; right:10px; top:50%;
  transform:translateY(-50%); pointer-events:none;
  color:var(--t3); font-size:18px; line-height:1;
  transition:transform .18s;
}
.cdd-wrap.open .cdd-arrow { transform:translateY(-50%) rotate(180deg) }
.cdd-list {
  position:fixed; z-index:99999;
  background:var(--bg2); border:1px solid var(--b2);
  border-radius:var(--r2); display:none;
  max-height:220px; overflow-y:auto;
  box-shadow:0 16px 40px rgba(0,0,0,.7);
  scrollbar-width:thin; scrollbar-color:var(--bg3) transparent;
}
.cdd-list::-webkit-scrollbar { width:4px }
.cdd-list::-webkit-scrollbar-thumb { background:var(--bg3); border-radius:99px }
.cdd-wrap.open .cdd-list { display:block; animation:cddIn .12s ease }
@keyframes cddIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
.cdd-opt {
  padding:9px 14px; font-size:13px; color:var(--t2);
  cursor:pointer; transition:background .1s, color .1s;
}
.cdd-opt:hover  { background:var(--bg3); color:var(--t) }
.cdd-opt.active { background:var(--pg); color:var(--p2); font-weight:600 }

/* ── overview month nav ─────────────────────────────────── */
.ov-month-nav {
  display:flex; align-items:center; gap:8px;
  margin-bottom:18px; position:relative;
}
.ov-nav-lbl {
  font-size:16px; font-weight:800; color:var(--t);
  letter-spacing:-.3px; min-width:80px; text-align:center;
}
.ov-nav-btn {
  width:32px; height:32px; border-radius:9px;
  background:var(--bg2); border:1px solid var(--b);
  color:var(--t2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, border-color .15s, color .15s;
}
.ov-nav-btn:hover:not(:disabled) { background:var(--pg); border-color:rgba(124,106,247,.3); color:var(--p2) }
.ov-nav-btn:disabled { opacity:.3; cursor:not-allowed }
.ov-nav-btn .mi { font-size:20px; line-height:1 }

/* 월 라벨 — 클릭 가능 */
.ov-nav-lbl-pick{cursor:pointer;border-radius:8px;padding:4px 10px;transition:background .15s,color .15s}
.ov-nav-lbl-pick:hover{background:var(--pg);color:var(--p2)}

/* 월 선택 팝업 */
#month-picker-popup{position:fixed;z-index:9999;background:var(--bg3);border:1px solid var(--b2);border-radius:14px;padding:14px;box-shadow:0 16px 48px rgba(0,0,0,.65);min-width:220px;animation:fadeUp .18s ease both}
.mp-year-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.mp-year-lbl{font-size:13px;font-weight:800;color:var(--t)}
.mp-arr{background:none;border:none;color:var(--t2);cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center;transition:background .13s,color .13s}
.mp-arr:hover:not(:disabled){background:var(--glass2);color:var(--t)}
.mp-arr.mp-disabled,.mp-arr:disabled{opacity:.25;cursor:not-allowed}
.mp-arr .mi{font-size:18px}
.mp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.mp-btn{background:none;border:1px solid transparent;border-radius:8px;padding:6px 4px;font-family:Outfit,sans-serif;font-size:11px;font-weight:600;color:var(--t2);cursor:pointer;transition:background .13s,color .13s,border-color .13s;text-align:center}
.mp-btn:hover:not(:disabled):not(.mp-active){background:var(--glass2);color:var(--t);border-color:var(--b)}
.mp-btn.mp-active{background:var(--pg);color:var(--p2);border-color:rgba(124,106,247,.4)}
.mp-btn.mp-disabled{opacity:.22;cursor:not-allowed}

.ov-today-btn {
  margin-left:4px; display:flex; align-items:center; gap:5px;
  background:var(--pg); border:1px solid rgba(124,106,247,.3); border-radius:9px;
  color:var(--p2); font-family:Outfit,sans-serif; font-size:11px; font-weight:700;
  padding:6px 12px; cursor:pointer;
  transition:background .15s;
}
.ov-today-btn:hover { background:rgba(124,106,247,.25) }
.ov-today-btn .mi { font-size:14px }

/* ── cc show-all link ───────────────────────────────────── */
.cc-head { display:flex; align-items:center; gap:6px; }
.cc-show-all {
  margin-left:auto; background:none; border:none;
  color:var(--p2); font-size:11px; font-weight:700;
  cursor:pointer; font-family:Outfit,sans-serif;
  padding:2px 0; letter-spacing:.2px;
  transition:color .15s;
}
.cc-show-all:hover { color:var(--p3) }

/* ── 커스텀 월 선택 피커 ─────────────────────────────────── */
#snap-picker {
  position:fixed; z-index:99999;
  background:var(--bg2); border:1px solid var(--b2);
  border-radius:14px; padding:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.75);
  min-width:216px;
  animation:cddIn .14s ease;
}
.smp-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.smp-yr-lbl {
  font-size:14px; font-weight:700; color:var(--t); letter-spacing:.3px;
}
.smp-yr-btn {
  width:30px; height:30px; border-radius:8px;
  background:var(--bg3); border:1px solid var(--b);
  color:var(--t2); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.smp-yr-btn:hover { background:var(--pg); color:var(--p2); border-color:rgba(124,106,247,.3) }
.smp-yr-btn .mi { font-size:18px; line-height:1 }
.smp-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
}
.smp-m {
  padding:8px 4px; border-radius:9px; border:1px solid transparent;
  background:var(--bg3); color:var(--t2);
  font-family:Outfit,sans-serif; font-size:12px; font-weight:600;
  cursor:pointer; text-align:center;
  transition:background .15s, color .15s, border-color .15s;
}
.smp-m:hover { background:var(--glass); color:var(--t); border-color:var(--b2) }
.smp-m.active {
  background:var(--pg); color:var(--p2);
  border-color:rgba(124,106,247,.35);
  box-shadow:0 0 0 3px rgba(124,106,247,.12);
}
#snap-month-btn:hover { border-color:var(--b2) }
#snap-month-btn.open  { border-color:var(--p); box-shadow:0 0 0 3px rgba(124,106,247,.12) }

/* ── 프라이버시 블러 ─────────────────────────────────────── */
.privacy-toggle:hover { background:var(--glass); color:var(--t) }
.privacy-toggle.on { background:var(--pkg); border-color:rgba(240,98,146,.3); color:var(--pk) }
body.privacy-blur .sc-val,
body.privacy-blur .tx-amt,
body.privacy-blur .bcard-bal,
body.privacy-blur .gcard-cur,
body.privacy-blur .gcard-tgt,
body.privacy-blur .sub-amt,
body.privacy-blur .legend-val,
body.privacy-blur .cat-amt,
body.privacy-blur .cat-bud,
body.privacy-blur .hist-amt,
body.privacy-blur .bal-input,
body.privacy-blur .sc-sub,
body.privacy-blur .arch-bal {
  filter:blur(8px); user-select:none; -webkit-user-select:none; transition:filter .25s ease;
}
body.privacy-blur .sc-val:hover,
body.privacy-blur .tx-amt:hover,
body.privacy-blur .bcard-bal:hover,
body.privacy-blur .gcard-cur:hover,
body.privacy-blur .sub-amt:hover,
body.privacy-blur .legend-val:hover {
  filter:blur(0); transition:filter .15s ease;
}
/* Icon Picker */
.ipk-lbl{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;margin:10px 0 5px;padding:0 2px}
.ipk-lbl:first-child{margin-top:0}
.ipk-row{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.ipk-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 5px 5px;width:52px;border-radius:9px;background:var(--bg3);border:1px solid var(--b);cursor:pointer;transition:background .15s,border-color .15s}
.ipk-btn:hover{background:var(--pg);border-color:rgba(124,106,247,.35)}
.ipk-btn .mi{font-size:20px;color:var(--t2)}
.ipk-btn:hover .mi{color:var(--p2)}
.ipk-name{font-size:8px;color:var(--t3);max-width:48px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
#icon-picker-grid::-webkit-scrollbar{width:4px}
#icon-picker-grid::-webkit-scrollbar-track{background:transparent}
#icon-picker-grid::-webkit-scrollbar-thumb{background:var(--b2);border-radius:4px}

/* ── HOUSE SAVINGS TRACKER ─────────────────────────────── */
.hmp-btn{display:flex;align-items:center;gap:8px;padding:0 12px;height:40px;border-radius:var(--r2);background:var(--bg3);border:1px solid var(--b);cursor:pointer;color:var(--t2);width:100%;font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;transition:border-color .18s}
.hmp-btn:hover{border-color:var(--b2)}
.hs-k-tabs{display:flex;border-radius:var(--r2);border:1px solid var(--b);overflow:hidden;height:40px}
.hs-k-tab{flex:1;border:none;border-right:1px solid var(--b);background:transparent;color:var(--t3);font-family:'Outfit',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s}
.hs-k-tab:last-child{border-right:none}
.hs-k-tab.on{background:var(--tlg);color:var(--tl)}
.house-hero{background:linear-gradient(135deg,rgba(91,156,246,.08) 0%,rgba(124,106,247,.08) 100%);border-color:rgba(91,156,246,.2)}
.hacc-card{background:var(--glass);border:1px solid var(--b);border-radius:var(--r);padding:14px;display:flex;align-items:flex-start;gap:10px;position:relative;transition:border-color .18s}
.hacc-card:hover{border-color:var(--b2)}
.hacc-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}
.hacc-info{flex:1;min-width:0}
.hacc-name{font-size:11px;font-weight:600;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hacc-bal{font-size:16px;font-weight:700;color:var(--t);margin-top:3px;letter-spacing:-.3px}
.hacc-sub{font-size:10px;color:var(--t3);margin-top:3px}
.hacc-edit{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:7px;background:var(--bg3);border:1px solid var(--b);color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;opacity:0;transition:opacity .15s}
.hacc-card:hover .hacc-edit{opacity:1}
.hacc-status{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:99px;font-size:9px;font-weight:700;letter-spacing:.04em;margin-top:4px}
.hacc-status.active{background:var(--tlg);color:var(--tl)}
.hacc-status.pending{background:var(--bg3);color:var(--t3);border:1px solid var(--b)}
/* Timeline */
.htl-wrap{position:relative;padding:28px 0 48px}
.htl-track{position:relative;height:6px;background:var(--bg3);border-radius:99px;overflow:visible}
.htl-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--bl),var(--p2));border-radius:99px;transition:width .7s ease}
.htl-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;border:2px solid;display:flex;align-items:center;justify-content:center;z-index:2;transition:all .3s}
.htl-dot .mi{font-size:11px}
.htl-lbl{position:absolute;top:20px;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;pointer-events:none}
.htl-lbl-name{font-size:9px;font-weight:700;display:block}
.htl-lbl-date{font-size:9px;color:var(--t3);display:block;margin-top:1px}
.htl-now-pin{position:absolute;top:50%;transform:translate(-50%,-50%);z-index:3}
.htl-now-line{width:2px;height:32px;background:var(--am);border-radius:1px;margin:0 auto;transform:translateY(-50%)}
.htl-now-tag{background:var(--am);color:#000;font-size:8px;font-weight:700;padding:2px 5px;border-radius:4px;white-space:nowrap;display:block;text-align:center;margin-top:2px}
/* ── BANK DROPDOWN (5+ banks) ─────────────────────────────── */
.bank-dd{position:relative;display:inline-flex}
.bank-dd-list{position:absolute;top:calc(100% + 5px);left:0;min-width:140px;background:var(--bg2);border:1px solid var(--b2);border-radius:var(--r2);padding:4px;z-index:900;box-shadow:0 8px 28px rgba(0,0,0,.6)}
.bank-dd-item{display:block;width:100%;text-align:left;padding:6px 10px;border-radius:6px;border:none;background:transparent;color:var(--t2);font-family:'Outfit',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:background .13s,color .13s}
.bank-dd-item:hover{background:var(--bg3);color:var(--t)}
.bank-dd-item.on{background:var(--pg);color:var(--p2)}
/* ── LANGUAGE SETTINGS ────────────────────────────────────── */
.lang-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lang-row-label{font-size:11px;font-weight:600;color:var(--t2);flex-shrink:0}
.lang-tabs{display:flex;border-radius:var(--r2);border:1px solid var(--b);overflow:hidden;height:36px}
.lang-btn{flex:1;border:none;border-right:1px solid var(--b);background:transparent;color:var(--t3);font-family:'Outfit',sans-serif;font-size:11px;font-weight:600;cursor:pointer;padding:0 14px;transition:all .15s;white-space:nowrap}
.lang-btn:last-child{border-right:none}
.lang-btn.on{background:var(--pg);color:var(--p2)}
/* ── CURRENCY PILLS (설정 페이지) ─────────────────────────── */
.curr-chips-grid{display:flex;flex-wrap:wrap;gap:5px}
.curr-pill{display:inline-flex;align-items:center;gap:4px;background:var(--bg3);border:1px solid var(--b2);border-radius:50px;padding:5px 11px 5px 8px;cursor:pointer;font-size:11px;font-weight:700;color:var(--t2);transition:background .15s,border-color .15s,color .15s;white-space:nowrap;line-height:1.2}
.curr-pill:hover{border-color:rgba(124,106,247,.45);background:rgba(124,106,247,.12);color:var(--t)}
.curr-pill:not(.on):hover .curr-pill-sym{color:rgba(157,143,250,.8)}
.curr-pill.on{background:rgba(124,106,247,.22);border:1px solid rgba(157,143,250,.6);color:#c4baff}
.curr-pill.solo{opacity:.35;cursor:not-allowed;pointer-events:none}
.curr-pill.locked{cursor:not-allowed;border-color:rgba(245,166,35,.4);background:rgba(245,166,35,.1);color:var(--am)}
.curr-pill.locked .curr-pill-sym{color:var(--am)}
.curr-pill.locked:hover{background:rgba(245,166,35,.12);border-color:rgba(245,166,35,.5);color:var(--am)}

/* Single-currency label inside a saving/debt modal — replaces the dropdown when only 1 currency is active */
.cur-single-label{display:flex;align-items:center;gap:8px;padding:10px 13px;background:var(--bg3);border:1px solid var(--b);border-radius:var(--r2);font-family:'DM Mono',monospace;font-size:14px;color:var(--p2);font-weight:600}
.cur-single-label::after{content:'자동';margin-left:auto;font-family:'Outfit',sans-serif;font-size:9px;font-weight:500;color:var(--t3);letter-spacing:.06em;text-transform:uppercase}
.curr-pill-sym{font-family:'DM Mono',monospace;font-weight:800;font-size:12px;color:var(--t3);transition:color .15s}
.curr-pill.on .curr-pill-sym{color:var(--p2)}
/* ── STOCK SORT BAR ───────────────────────────────────────── */
.stk-sort-row{display:flex;align-items:center;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.stk-sort-lbl{font-size:10px;font-weight:600;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;flex-shrink:0;margin-right:2px}
.stk-portfolio-wrap{display:grid;grid-template-columns:140px 1fr;gap:14px;align-items:center;margin-bottom:14px}
.stk-donut-box{position:relative;width:120px;height:120px;margin:0 auto}
.stk-donut-legend{display:flex;flex-direction:column;gap:6px}
.stk-legend-row{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--t2)}

/* ── LUMEN OVERVIEW ───────────────────────────────────────── */
.lov-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.lov-sep{width:1px;height:16px;background:var(--b);flex-shrink:0}
.lov-tabs{display:flex;gap:5px;flex-wrap:wrap}
.lov-tab{height:26px;padding:0 12px;border-radius:99px;border:1px solid var(--b);background:transparent;color:var(--t2);font-family:'DM Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.04em;cursor:pointer;transition:all .18s;white-space:nowrap;user-select:none}
.lov-tab:hover{background:var(--glass2)}
.lov-tab.on{border-color:rgba(124,106,247,.42);background:var(--pg);color:var(--p2)}
.lov-tab.on.t-eur{border-color:rgba(124,106,247,.42);background:var(--pg);color:var(--p2)}
.lov-tab.on.t-krw{border-color:rgba(240,98,146,.4);background:var(--pkg);color:var(--pk)}
.lov-tab.on.t-usd{border-color:rgba(91,156,246,.4);background:var(--blg);color:var(--bl)}
.lov-tab.on.t-gbp{border-color:rgba(245,166,35,.38);background:var(--amg);color:var(--am)}
.lov-tab.faded{opacity:.28;pointer-events:none}
.lov-chips{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.lov-chip{height:26px;padding:0 10px;border-radius:7px;border:1px solid var(--b);background:transparent;color:var(--t2);font-size:11px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .18s;user-select:none}
.lov-chip:hover{background:var(--glass2);color:var(--t)}
.lov-chip .mi{font-size:13px}
.lov-chip.on{border-color:rgba(124,106,247,.45);background:var(--pg);color:var(--p2);box-shadow:0 0 0 1px rgba(124,106,247,.22)}
.lov-chip.faded{opacity:.28;pointer-events:none}
.lov-chip.hidden{display:none}

/* Currency / Bank cards grid */
.lov-grid{display:grid;gap:10px;margin-bottom:14px;transition:all .22s}
.lov-grid.state-all{grid-template-columns:repeat(var(--lov-n,4),1fr)}
.lov-grid.state-banks{grid-template-columns:repeat(var(--lov-n,2),1fr)}

.lov-card{border-radius:var(--r);padding:14px 16px;border:1px solid var(--b);position:relative;overflow:hidden;cursor:pointer;transition:border-color .18s,opacity .18s,box-shadow .18s;animation:fadeUp .35s ease both}
.lov-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1.5px;pointer-events:none}
.lov-card.faded{opacity:.35}

/* Currency variants (gradient + accent line) */
.lov-c-eur{background:linear-gradient(135deg,rgba(56,44,132,.26) 0%,rgba(18,14,42,.08) 55%,rgba(12,15,26,0) 100%);border-color:rgba(124,106,247,.18)}
.lov-c-eur::after{background:linear-gradient(to right,transparent,rgba(124,106,247,.42),transparent)}
.lov-c-krw{background:linear-gradient(135deg,rgba(132,38,68,.22) 0%,rgba(42,12,24,.08) 55%,rgba(12,15,26,0) 100%);border-color:rgba(240,98,146,.16)}
.lov-c-krw::after{background:linear-gradient(to right,transparent,rgba(240,98,146,.4),transparent)}
.lov-c-usd{background:linear-gradient(135deg,rgba(36,60,124,.2) 0%,rgba(14,22,48,.07) 55%,rgba(12,15,26,0) 100%);border-color:rgba(91,156,246,.15)}
.lov-c-usd::after{background:linear-gradient(to right,transparent,rgba(91,156,246,.38),transparent)}
.lov-c-gbp{background:linear-gradient(135deg,rgba(84,58,9,.2) 0%,rgba(30,20,4,.07) 55%,rgba(12,15,26,0) 100%);border-color:rgba(245,166,35,.15)}
.lov-c-gbp::after{background:linear-gradient(to right,transparent,rgba(245,166,35,.38),transparent)}
.lov-c-def{background:linear-gradient(135deg,rgba(60,60,80,.22) 0%,rgba(20,20,30,.08) 55%,rgba(12,15,26,0) 100%);border-color:rgba(255,255,255,.1)}
.lov-c-def::after{background:linear-gradient(to right,transparent,rgba(255,255,255,.22),transparent)}

/* Focused (account selected) — currency-tinted brighter border */
.lov-card.focused.lov-c-eur{border-color:rgba(124,106,247,.55);box-shadow:0 0 0 1px rgba(124,106,247,.28)}
.lov-card.focused.lov-c-krw{border-color:rgba(240,98,146,.5);box-shadow:0 0 0 1px rgba(240,98,146,.26)}
.lov-card.focused.lov-c-usd{border-color:rgba(91,156,246,.5);box-shadow:0 0 0 1px rgba(91,156,246,.24)}
.lov-card.focused.lov-c-gbp{border-color:rgba(245,166,35,.5);box-shadow:0 0 0 1px rgba(245,166,35,.24)}

/* Currency-level card (ALL view) */
.lov-badge{display:inline-block;font-family:'DM Mono',monospace;font-size:9px;font-weight:500;letter-spacing:.04em;padding:2px 7px;border-radius:4px;margin-bottom:6px}
.lov-badge.b-eur{background:rgba(124,106,247,.14);color:rgba(155,139,250,.9)}
.lov-badge.b-krw{background:rgba(240,98,146,.14);color:rgba(240,98,146,.9)}
.lov-badge.b-usd{background:rgba(91,156,246,.14);color:rgba(91,156,246,.9)}
.lov-badge.b-gbp{background:rgba(245,166,35,.14);color:rgba(245,166,35,.9)}
.lov-badge.b-def{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7)}
.lov-bal{font-family:'DM Mono',monospace;font-size:22px;font-weight:500;line-height:1;margin-bottom:4px}
.lov-sub{font-size:10px;color:var(--t2);margin-bottom:9px;min-height:13px}
.lov-hr{height:1px;background:var(--b);margin-bottom:9px}
.lov-stats{display:flex;gap:0}
.lov-stat{flex:1;display:flex;flex-direction:column;gap:1px;padding-right:12px;min-width:0}
.lov-stat+.lov-stat{border-left:1px solid var(--b);padding-left:12px;padding-right:0}
.lov-stat:last-child{padding-right:0}
.lov-stat-l{font-family:'DM Mono',monospace;font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lov-stat-v{font-family:'DM Mono',monospace;font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Bank-level card (currency selected) */
.lov-bank-top{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.lov-bank-ico{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}
.lov-bank-meta{flex:1;min-width:0}
.lov-bank-name{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lov-bank-sub{font-size:10px;color:var(--t2);margin-top:1px}
.lov-bank-bal{font-family:'DM Mono',monospace;font-size:20px;font-weight:500;line-height:1;text-align:right;flex-shrink:0}
.lov-card.lov-bank .lov-stat-l{font-size:8px}
.lov-card.lov-bank .lov-stat-v{font-size:14px;margin-top:2px}

/* 6-Month Flow chart card */
.lov-chart{background:var(--glass);border:1px solid var(--b);border-radius:var(--r);padding:14px 16px;margin-bottom:14px}
.lov-chart-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px;flex-wrap:wrap}
.lov-chart-hd-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lov-dot{width:6px;height:6px;border-radius:50%;background:var(--p)}
.lov-chart-lbl{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--t2)}
.lov-legend{display:flex;gap:12px;margin-left:6px}
.lov-leg{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--t2)}
.lov-leg-bar{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.lov-leg-line{width:14px;height:2.5px;border-radius:99px;flex-shrink:0}

/* Detail cards (이달 지출 / 투자 / 저축 / 부채) */
.lov-details{display:grid;gap:10px;grid-template-columns:repeat(var(--lov-dn,4),1fr);margin-bottom:0}
.lov-dc{background:var(--bg1);border:1px solid var(--b);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:border-color .18s,transform .18s;animation:fadeUp .35s ease both}
.lov-dc:hover{transform:translateY(-1px)}
.lov-dc.dc-sp{border-color:rgba(124,106,247,.2)} .lov-dc.dc-sp:hover{border-color:rgba(124,106,247,.42)}
.lov-dc.dc-iv{border-color:rgba(245,166,35,.2)}  .lov-dc.dc-iv:hover{border-color:rgba(245,166,35,.42)}
.lov-dc.dc-sv{border-color:rgba(38,198,176,.18)} .lov-dc.dc-sv:hover{border-color:rgba(38,198,176,.42)}
.lov-dc.dc-db{border-color:rgba(240,98,146,.2)}  .lov-dc.dc-db:hover{border-color:rgba(240,98,146,.42)}
.lov-dc-banner{padding:10px 13px;border-bottom:1px solid var(--b);display:flex;align-items:center;gap:8px}
.dc-sp .lov-dc-banner{background:rgba(124,106,247,.07);border-bottom-color:rgba(124,106,247,.18)}
.dc-iv .lov-dc-banner{background:rgba(245,166,35,.06);border-bottom-color:rgba(245,166,35,.18)}
.dc-sv .lov-dc-banner{background:rgba(38,198,176,.06);border-bottom-color:rgba(38,198,176,.18)}
.dc-db .lov-dc-banner{background:rgba(240,98,146,.06);border-bottom-color:rgba(240,98,146,.18)}
.lov-dc-ico{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.lov-dc-tx{flex:1;min-width:0}
.lov-dc-title{font-size:11px;font-weight:700}
.lov-dc-sub{font-size:8.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lov-dc-r{text-align:right;flex-shrink:0}
.lov-dc-total{font-family:'DM Mono',monospace;font-size:14px;font-weight:500;line-height:1}
.lov-dc-meta{font-size:9px;margin-top:2px}
.lov-dc-body{padding:0}
.lov-dc-body:empty{display:none}
/* Grid: row 1 = [icon | name | value], row 2 (optional) = full-width bar.
   Grid template keeps the bar consistent across items regardless of value length. */
.lov-dc-item{display:grid;grid-template-columns:22px 1fr auto;grid-template-areas:"ic main r";column-gap:7px;align-items:center;padding:7px 13px;border-bottom:1px solid var(--b)}
.lov-dc-item:last-child{border-bottom:none}
.lov-dc-item.has-bar{grid-template-areas:"ic main r" "bar bar bar";row-gap:4px}
/* Investments / Savings / Debt — no per-item icon column (2-column grid) */
.lov-dc-item.no-ic{grid-template-columns:1fr auto;grid-template-areas:"main r"}
.lov-dc-item.no-ic.has-bar{grid-template-areas:"main r" "bar bar"}
.lov-dc-item-ic{grid-area:ic;width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:600}
.lov-dc-item-main{grid-area:main;min-width:0}
.lov-dc-item-name{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lov-dc-item-sub{font-size:9px;color:var(--t2);margin-top:1px}
.lov-dc-item-r{grid-area:r;text-align:right}
.lov-dc-item-v{font-family:'DM Mono',monospace;font-size:11px;font-weight:500}
.lov-dc-item-chg{font-size:9px;margin-top:1px}
.lov-dc-bar{grid-area:bar;width:100%;height:2.5px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden}
.lov-dc-bar-f{height:100%;border-radius:99px}
.lov-dc-more{padding:6px 13px;font-size:9.5px;color:var(--t3);text-align:center;border-top:1px solid var(--b)}
.lov-dc-empty{padding:14px 13px;font-size:10px;color:var(--t3);text-align:center}

/* multi-currency stack in banner (used when S.curF===ALL and >=2 currencies) */
.lov-dc-stack{display:flex;flex-direction:column;gap:3px;align-items:stretch;min-width:0}
.lov-dc-stack-row{display:flex;gap:7px;justify-content:flex-end;align-items:baseline;white-space:nowrap;font-family:'DM Mono',monospace}
.lov-dc-stack-cur{font-size:8.5px;letter-spacing:.06em;color:var(--t3);align-self:center}
.lov-dc-stack-val{font-size:11px;font-weight:500;line-height:1}
.lov-dc-stack-pct{font-size:9px;color:var(--t2);min-width:48px;text-align:right}

/* Spending drill-down header */
.lov-detail-hd{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.lov-detail-title{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700}
.lov-detail-sub{font-size:10px;font-weight:500;color:var(--t2);font-family:'DM Mono',monospace;letter-spacing:.06em;margin-left:2px}
.icon-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--b);background:transparent;color:var(--t2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .18s;flex-shrink:0}
.icon-btn:hover{background:var(--glass2);color:var(--t)}
.icon-btn .mi{font-size:15px}

@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.stk-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.stk-legend-pct{margin-left:auto;font-size:10px;font-weight:700;color:var(--t3)}

/* ───── LUMEN Onboarding Overlay (shared by index.html & lumen.html) ───── */
.lumen-onb{position:fixed;inset:0;z-index:1000;background:var(--bg);display:none;flex-direction:column;overflow:hidden;font-family:'Outfit',sans-serif}
.lumen-onb.on{display:flex}
.lumen-onb-top{padding:22px 40px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}
.lumen-onb-brand{font-family:'Familjen Grotesk',sans-serif;font-size:18px;letter-spacing:2.8px;color:var(--t);display:flex;align-items:center;gap:10px}
.lumen-onb-brand svg{width:28px;height:28px}
.lumen-onb-step-num{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;color:var(--t3);text-transform:uppercase}
.lumen-onb-skip{background:transparent;border:1px solid var(--b2);color:var(--t3);border-radius:99px;padding:6px 13px;font-size:11px;font-weight:500;font-family:'Outfit',sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .15s}
.lumen-onb-skip:hover{border-color:var(--b3);color:var(--t2)}
.lumen-onb-skip .mi{font-size:13px}
.lumen-onb-bar{height:2px;background:var(--b);margin:16px 40px 0;border-radius:2px;overflow:hidden}
.lumen-onb-bar-fill{height:100%;background:var(--p);border-radius:2px;transition:width .4s cubic-bezier(.22,1,.36,1)}
.lumen-onb-body{flex:1;overflow-y:auto;padding:50px 60px 20px;display:flex;justify-content:center}
.lumen-onb-inner{width:100%;max-width:720px;display:flex;flex-direction:column}
.lumen-onb-eyebrow{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2.5px;color:var(--t3);text-transform:uppercase;margin-bottom:14px}
.lumen-onb-title{font-family:'Familjen Grotesk',sans-serif;font-size:34px;font-weight:400;color:var(--t);line-height:1.15;margin-bottom:12px;letter-spacing:-.5px}
.lumen-onb-sub{font-size:14px;color:var(--t3);margin-bottom:32px;line-height:1.6}
.lumen-onb-input{width:100%;background:var(--bg3);border:1px solid var(--b2);border-radius:var(--r2);padding:14px 16px;color:var(--t);font-family:'Outfit',sans-serif;font-size:16px;outline:none;transition:border-color .2s}
.lumen-onb-input:focus{border-color:var(--p)}
.lumen-onb-theme-row{display:grid;grid-template-columns:1fr 1.2fr;gap:32px}
.lumen-onb-theme-opts{display:flex;flex-direction:column;gap:12px}
.lumen-theme-card{background:var(--bg2);border:1px solid var(--b);border-radius:var(--r2);padding:16px 18px;cursor:pointer;display:flex;align-items:center;gap:14px;transition:all .2s}
.lumen-theme-card:hover{border-color:var(--b3)}
.lumen-theme-card.on{border-color:var(--p);background:var(--pg2)}
.lumen-theme-swatch{width:40px;height:40px;border-radius:10px;border:1px solid var(--b2);display:grid;grid-template-columns:1fr 1fr}
.lumen-theme-swatch .s1{background:#11091f;border-radius:10px 0 0 10px}
.lumen-theme-swatch .s2{background:#F5F3FF;border-radius:0 10px 10px 0}
.lumen-theme-card[data-t="dark"] .lumen-theme-swatch{background:#11091f}
.lumen-theme-card[data-t="light"] .lumen-theme-swatch{background:#F5F3FF}
.lumen-theme-name{font-weight:600;color:var(--t);font-size:14px}
.lumen-theme-desc{font-size:11px;color:var(--t3);margin-top:2px}
.lumen-theme-preview{background:var(--bg2);border:1px solid var(--b);border-radius:var(--r);padding:18px;min-height:260px;display:flex;flex-direction:column;gap:10px}
.lumen-prev-bar{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.lumen-prev-dot{width:7px;height:7px;border-radius:99px;background:var(--p)}
.lumen-prev-label{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;color:var(--t3);text-transform:uppercase}
.lumen-prev-card{background:var(--bg3);border:1px solid var(--b);border-radius:var(--r2);padding:10px 12px}
.lumen-prev-k{font-size:9px;color:var(--t3);letter-spacing:.5px;text-transform:uppercase}
.lumen-prev-v{font-family:'Familjen Grotesk',sans-serif;font-size:20px;color:var(--t);margin-top:2px}
.lumen-prev-chart{height:44px;background:linear-gradient(90deg, var(--pg) 0%, var(--p) 100%);border-radius:8px;opacity:.6}
.lumen-onb-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;min-height:28px}
.lumen-chip-sel{background:var(--p);color:#fff;border-radius:99px;padding:5px 12px;font-size:11px;font-weight:500;display:inline-flex;align-items:center;gap:5px}
.lumen-chip-sel .x{cursor:pointer;opacity:.8;font-size:14px;line-height:1}
.lumen-chip-sel.primary::before{content:'★';font-size:10px;margin-right:2px}
.lumen-search{width:100%;background:var(--bg3);border:1px solid var(--b2);border-radius:var(--r2);padding:10px 14px;color:var(--t);font-family:'Outfit',sans-serif;font-size:13px;outline:none;margin-bottom:14px}
.lumen-cur-group{margin-bottom:14px}
.lumen-cur-group-title{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase;margin-bottom:8px}
.lumen-cur-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:6px}
.lumen-cur-btn{background:var(--bg3);border:1px solid var(--b);border-radius:var(--r2);padding:8px 10px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;color:var(--t2);font-size:12px;transition:all .15s}
.lumen-cur-btn:hover{border-color:var(--b3)}
.lumen-cur-btn.on{background:var(--pg);border-color:var(--p);color:var(--t)}
.lumen-cur-btn .sym{font-family:'DM Mono',monospace;color:var(--t3);font-size:11px}
.lumen-onb-bank-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg2);border:1px solid var(--b);border-radius:var(--r2);margin-bottom:8px}
.lumen-onb-bank-icon{width:34px;height:34px;border-radius:10px;background:var(--bg3);border:1px solid var(--b);display:flex;align-items:center;justify-content:center;color:var(--t2);flex-shrink:0}
.lumen-onb-bank-name{flex:1;font-weight:500;color:var(--t);font-size:13px}
.lumen-onb-bank-cur{font-family:'DM Mono',monospace;font-size:10px;color:var(--t3)}
.lumen-onb-bank-input{background:var(--bg3);border:1px solid var(--b2);border-radius:var(--r2);padding:8px 10px;width:140px;text-align:right;color:var(--t);font-family:'Outfit',sans-serif;font-size:13px;outline:none}
.lumen-onb-bank-rm{background:none;border:none;color:var(--t3);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center}
.lumen-onb-bank-rm:hover{color:var(--pk,#f06292)}
.lumen-add-bank{width:100%;background:transparent;border:1px dashed var(--b2);border-radius:var(--r2);padding:12px;color:var(--t3);cursor:pointer;font-size:12px;margin-top:4px}
.lumen-add-bank:hover{border-color:var(--p);color:var(--p)}
.lumen-ic-grid{display:grid;grid-template-columns:repeat(6, minmax(0,1fr));gap:8px}
.lumen-ic-btn{width:100%;aspect-ratio:1 / 1;border-radius:12px;border:1px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s, box-shadow .15s, border-color .15s}
.lumen-ic-btn .mi{font-size:20px}
.lumen-ic-btn:hover{transform:translateY(-1px)}
.lumen-ic-btn.on{border-color:var(--p);box-shadow:0 0 0 3px var(--pg2)}
.lumen-budcur-row{display:flex;align-items:center;gap:14px;margin:4px 0 12px 0;padding-bottom:10px;border-bottom:1px solid var(--b)}
.lumen-budcur-label{font-size:10px;color:var(--t3);letter-spacing:.10em;text-transform:uppercase}
.lumen-budcur-tabs{display:flex;gap:6px;flex-wrap:wrap}
.lumen-budcur-tab{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--b2);border-radius:99px;padding:5px 12px;color:var(--t2);font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s, border-color .15s, color .15s}
.lumen-budcur-tab:hover{border-color:var(--p);color:var(--p)}
.lumen-budcur-tab.on{background:var(--pg2);border-color:var(--p);color:var(--p)}
.lumen-budcur-sym{font-family:'DM Mono',monospace;font-weight:800;font-size:12px;opacity:.75}
.lumen-onb-bud-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg2);border:1px solid var(--b);border-radius:var(--r2);margin-bottom:6px}
.lumen-onb-bud-name{flex:1;color:var(--t);font-size:13px}
.lumen-onb-bud-in{background:var(--bg3);border:1px solid var(--b2);border-radius:var(--r2);padding:7px 10px;width:140px;text-align:right;color:var(--t);font-family:'Outfit',sans-serif;font-size:13px;outline:none}
.lumen-onb-bud-sym{font-family:'DM Mono',monospace;color:var(--t3);font-size:11px;width:20px;text-align:center}
.lumen-onb-bud-badge{font-size:10px;color:var(--t3);font-style:italic;min-width:60px;text-align:right}
.lumen-onb-yn{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.lumen-yn-card{background:var(--bg2);border:1px solid var(--b);border-radius:var(--r);padding:28px 22px;cursor:pointer;text-align:center;transition:all .2s}
.lumen-yn-card:hover{border-color:var(--b3)}
.lumen-yn-card.on{border-color:var(--p);background:var(--pg2)}
.lumen-yn-icon{width:48px;height:48px;margin:0 auto 12px;border-radius:14px;background:var(--pg);display:flex;align-items:center;justify-content:center;color:var(--p);font-size:26px}
.lumen-yn-card.on .lumen-yn-icon{background:var(--p);color:#fff}
.lumen-yn-card.no .lumen-yn-icon{background:var(--glass);color:var(--t3)}
.lumen-yn-card.no.on .lumen-yn-icon{background:var(--t3);color:var(--bg)}
.lumen-yn-lbl{font-family:'Familjen Grotesk',sans-serif;font-size:19px;font-weight:500;color:var(--t)}
.lumen-yn-desc{font-size:11px;color:var(--t3);margin-top:6px}
.lumen-yn-badge{display:inline-block;margin-top:12px;padding:4px 10px;font-size:10px;background:var(--pg);color:var(--p2);border-radius:99px;letter-spacing:.3px}
.lumen-onb-done{text-align:center;padding:10px 0}
.lumen-done-halo{width:120px;height:120px;margin:0 auto 22px}
.lumen-done-title{font-family:'Familjen Grotesk',sans-serif;font-size:36px;font-weight:400;color:var(--t);margin-bottom:8px;letter-spacing:-.5px}
.lumen-done-sub{font-size:14px;color:var(--t3);margin-bottom:32px}
.lumen-done-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:560px;margin:0 auto 28px}
.lumen-summary-card{background:var(--bg2);border:1px solid var(--b);border-radius:var(--r2);padding:14px;text-align:left;transition:transform .15s ease, border-color .15s ease, background .15s ease}
.lumen-summary-card.clickable{cursor:pointer}
.lumen-summary-card.clickable:hover{border-color:var(--p);background:var(--bg3);transform:translateY(-1px)}
.lumen-sum-k{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.2px;color:var(--t3);text-transform:uppercase;margin-bottom:6px}
.lumen-sum-v{font-family:'Familjen Grotesk',sans-serif;font-size:17px;color:var(--t);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lumen-sum-extra{font-size:11px;color:var(--t3);margin-left:4px;font-family:'DM Mono',monospace}
.lumen-sum-bud-list{font-size:13px;color:var(--t);white-space:normal;line-height:1.4;display:block}
.lumen-onb-foot{padding:16px 40px 20px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--b);background:var(--bg)}
.lumen-onb-back{background:transparent;border:1px solid var(--b2);color:var(--t2);border-radius:var(--r2);padding:9px 18px;font-size:12px;cursor:pointer;font-family:'Outfit',sans-serif}
.lumen-onb-back:hover{border-color:var(--b3)}
.lumen-onb-back:disabled{opacity:.3;cursor:not-allowed}
.lumen-onb-next{background:var(--p);color:#fff;border:none;border-radius:var(--r2);padding:10px 22px;font-size:13px;font-weight:600;cursor:pointer;font-family:'Outfit',sans-serif;display:inline-flex;align-items:center;gap:6px}
.lumen-onb-next:hover{filter:brightness(1.08)}
.lumen-onb-next:disabled{opacity:.3;cursor:not-allowed}
.lumen-onb-next.lumen-onb-add-btn{justify-content:center;gap:0}
/* Skip variant — same shape as Continue but muted (used on incomplete steps) */
.lumen-onb-next.is-skip{background:transparent;border:1px solid var(--b2);color:var(--t2);font-weight:500}
.lumen-onb-next.is-skip:hover{border-color:var(--b3);color:var(--t);filter:none}