*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--primary:#2563eb;--primary-light:#dbeafe;--danger:#ef4444;--success:#22c55e;--warning:#f59e0b;--gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;--gray-400:#94a3b8;--gray-500:#64748b;--gray-600:#475569;--gray-700:#334155;--gray-800:#1e293b;--radius:12px;--radius-sm:8px;--shadow:0 1px 3px #0000001a;--shadow-md:0 4px 12px #0000001a;--nav-height:64px;--header-height:52px;--safe-bottom:env(safe-area-inset-bottom,0px)}html{-webkit-text-size-adjust:100%;font-size:16px}body{background:var(--gray-50);color:var(--gray-800);height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Pretendard,Noto Sans KR,sans-serif;line-height:1.5;overflow:hidden}#root{height:100dvh}#app{background:var(--gray-50);flex-direction:column;max-width:480px;height:100%;margin:0 auto;display:flex}#app-header{height:var(--header-height);border-bottom:1px solid var(--gray-200);background:#fff;flex-shrink:0;align-items:center;gap:8px;padding:0 16px;display:flex}#header-title{flex:1;font-size:18px;font-weight:700}#header-actions{align-items:center;gap:8px;display:flex}.sync-btn{cursor:pointer;width:36px;height:36px;color:var(--gray-500);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex}.sync-btn:active{background:var(--gray-100)}.sync-avatar-sm{border-radius:50%;width:28px;height:28px}.sync-user{background:var(--gray-50);border-radius:var(--radius-sm);align-items:center;gap:12px;margin-bottom:16px;padding:12px;display:flex}.sync-avatar{border-radius:50%;width:40px;height:40px}#app-main{-webkit-overflow-scrolling:touch;flex:1;overflow:hidden auto}.view{padding:16px;padding-bottom:calc(16px + var(--nav-height) + var(--safe-bottom));min-height:100%}#app-nav{height:var(--nav-height);padding-bottom:var(--safe-bottom);border-top:1px solid var(--gray-200);background:#fff;flex-shrink:0;justify-content:space-around;align-items:center;display:flex}.nav-btn{color:var(--gray-400);cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;font-size:11px;transition:color .2s;display:flex}.nav-btn.active{color:var(--primary)}.nav-btn svg{stroke:currentColor}.nav-add{background:var(--primary);color:#fff;width:52px;height:52px;box-shadow:var(--shadow-md);border-radius:50%;justify-content:center;align-items:center;margin-top:-20px;padding:0;display:flex}.nav-add svg{stroke:#fff}.btn{border-radius:var(--radius-sm);cursor:pointer;border:none;justify-content:center;align-items:center;gap:6px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .15s;display:inline-flex}.btn-primary{background:var(--primary);color:#fff}.btn-primary:active{background:#1d4ed8}.btn-secondary{background:var(--gray-100);color:var(--gray-700)}.btn-danger{background:var(--danger);color:#fff}.btn-outline{color:var(--gray-700);border:1px solid var(--gray-300);background:#fff}.btn-sm{padding:6px 12px;font-size:13px}.btn-block{width:100%}.btn-icon{width:36px;height:36px;color:var(--gray-600);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.btn-icon:active{background:var(--gray-100)}.hidden{display:none!important}.card{border-radius:var(--radius);box-shadow:var(--shadow);background:#fff;padding:16px}.month-nav{justify-content:center;align-items:center;gap:16px;padding:8px 0 16px;display:flex}.month-label{font-size:18px;font-weight:700}.summary-cards{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;display:grid}.summary-card{border-radius:var(--radius);box-shadow:var(--shadow);background:#fff;padding:14px}.summary-card.balance{grid-column:1/-1}.summary-label{color:var(--gray-500);margin-bottom:4px;font-size:12px}.summary-amount{font-size:18px;font-weight:700}.summary-card.income .summary-amount{color:var(--success)}.summary-card.expense .summary-amount{color:var(--danger)}.positive{color:var(--success)}.negative{color:var(--danger)}.alert-banner{border-radius:var(--radius-sm);cursor:pointer;background:#fef3c7;border:1px solid #fde68a;align-items:center;gap:8px;margin-bottom:16px;padding:12px 16px;font-size:14px;font-weight:500;display:flex}.alert-arrow{color:var(--gray-400);margin-left:auto}.section{margin-bottom:20px}.section-title{color:var(--gray-700);margin-bottom:10px;font-size:15px;font-weight:700}.breakdown-item{margin-bottom:10px}.breakdown-header{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.breakdown-amount{color:var(--gray-600);font-size:13px;font-weight:600}.breakdown-bar{background:var(--gray-100);border-radius:4px;height:8px;overflow:hidden}.breakdown-fill{border-radius:4px;height:100%;transition:width .3s}.tx-list{flex-direction:column;gap:2px;display:flex}.tx-date-group{margin-bottom:12px}.tx-date-header{color:var(--gray-500);background:var(--gray-50);z-index:1;padding:8px 0 4px;font-size:13px;font-weight:600;position:sticky;top:0}.tx-item{border-radius:var(--radius-sm);cursor:pointer;background:#fff;flex-direction:column;gap:6px;padding:12px;transition:background .15s;display:flex}.tx-item:active{background:var(--gray-50)}.tx-item.has-warning{border-left:3px solid var(--warning)}.tx-main{justify-content:space-between;align-items:flex-start;display:flex}.tx-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.tx-desc{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:500;overflow:hidden}.tx-meta{color:var(--gray-400);font-size:12px}.tx-amount{white-space:nowrap;margin-left:12px;font-size:15px;font-weight:700}.tx-amount.expense{color:var(--gray-800)}.tx-amount.income{color:var(--success)}.tx-categories{flex-wrap:wrap;gap:4px;display:flex}.cat-tag{white-space:nowrap;border-radius:10px;padding:2px 8px;font-size:11px;font-weight:500;display:inline-block}.cat-group{margin-bottom:16px}.cat-group-header{align-items:center;gap:6px;margin-bottom:8px;font-size:14px;font-weight:600;display:flex}.cat-group-required{color:var(--danger);font-weight:700}.cat-group.missing .cat-group-header{color:var(--danger)}.cat-group.missing .cat-chips{border:1.5px dashed var(--danger);border-radius:var(--radius-sm);padding:8px;animation:2s infinite pulse-border}@keyframes pulse-border{0%,to{border-color:var(--danger)}50%{border-color:#0000}}.cat-chips{flex-wrap:wrap;gap:8px;display:flex}.cat-chip{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:1.5px solid;border-radius:20px;align-items:center;padding:6px 14px;font-size:13px;font-weight:500;transition:all .15s;display:inline-flex}.cat-chip.selected{color:#fff}.cat-chip.suggested{border-width:2px;animation:1.5s infinite pulse-suggest}@keyframes pulse-suggest{0%,to{opacity:1}50%{opacity:.6}}.form-group{margin-bottom:16px}.form-label{color:var(--gray-600);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.form-input{border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);background:#fff;outline:none;width:100%;padding:10px 12px;font-size:15px;transition:border-color .15s}.form-input:focus{border-color:var(--primary)}.form-row{gap:10px;display:flex}.form-row>.form-group{flex:1}.toggle-group{border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);display:flex;overflow:hidden}.toggle-btn{cursor:pointer;color:var(--gray-400);background:#fff;border:none;flex:1;padding:10px;font-size:14px;font-weight:600;transition:all .15s}.toggle-btn.active{color:#fff}.toggle-btn.active.expense{background:var(--danger)}.toggle-btn.active.income{background:var(--success)}.drop-zone{border:2px dashed var(--gray-300);border-radius:var(--radius);text-align:center;cursor:pointer;background:#fff;padding:40px 20px;transition:all .2s}.drop-zone.dragover{border-color:var(--primary);background:var(--primary-light)}.drop-zone-icon{color:var(--gray-300);margin-bottom:8px;font-size:40px;display:block}.drop-zone-text{color:var(--gray-500);font-size:14px}.drop-zone-text strong{color:var(--primary)}.preview-table-wrap{border-radius:var(--radius-sm);border:1px solid var(--gray-200);margin:16px 0;overflow-x:auto}.preview-table{border-collapse:collapse;white-space:nowrap;width:100%;font-size:12px}.preview-table th,.preview-table td{border-bottom:1px solid var(--gray-100);text-align:left;padding:8px 10px}.preview-table th{background:var(--gray-50);color:var(--gray-600);font-weight:600;position:sticky;top:0}.preview-table tbody tr:hover{background:var(--gray-50)}.mapping-row{align-items:center;gap:8px;margin-bottom:8px;display:flex}.mapping-label{min-width:70px;color:var(--gray-600);font-size:13px;font-weight:500}.mapping-select{border:1px solid var(--gray-200);border-radius:var(--radius-sm);background:#fff;flex:1;padding:8px;font-size:13px}.cg-list{flex-direction:column;gap:12px;display:flex}.cg-item{border-radius:var(--radius);box-shadow:var(--shadow);background:#fff;padding:14px}.cg-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.cg-name{font-size:15px;font-weight:700}.cg-badge{border-radius:10px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-block}.cg-badge.required{color:var(--danger);background:#fee2e2}.cg-badge.optional{background:var(--gray-100);color:var(--gray-500)}.cg-badge.single{background:var(--primary-light);color:var(--primary)}.cg-badge.multi{color:var(--success);background:#f0fdf4}.cg-cats{flex-wrap:wrap;gap:6px;margin-bottom:10px;display:flex}.cg-cat-item{color:#fff;border-radius:14px;align-items:center;gap:4px;padding:4px 10px;font-size:12px;font-weight:500;display:inline-flex}.cg-cat-move{color:#fff;cursor:pointer;background:#ffffff40;border:none;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;padding:0;font-size:8px;display:flex}.cg-cat-delete{color:#fff;cursor:pointer;background:#ffffff4d;border:none;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;font-size:10px;display:flex}.cg-actions{gap:8px;display:flex}.cq-progress{margin-bottom:16px}.cq-progress-bar{background:var(--gray-200);border-radius:3px;height:6px;margin-top:8px;overflow:hidden}.cq-progress-fill{background:var(--primary);border-radius:3px;height:100%;transition:width .3s}.cq-progress-text{color:var(--gray-500);text-align:center;font-size:13px}.cq-card{border-radius:var(--radius);box-shadow:var(--shadow-md);background:#fff;margin-bottom:16px;padding:16px}.cq-card-desc{margin-bottom:4px;font-size:16px;font-weight:700}.cq-card-meta{color:var(--gray-500);font-size:13px}.cq-card-amount{margin-top:8px;font-size:20px;font-weight:700}.cq-actions{gap:10px;margin-top:16px;display:flex}.cq-actions .btn{flex:1}#modal-container{z-index:100;display:none;position:fixed;inset:0}#modal-container.active{justify-content:center;align-items:flex-end;display:flex}.modal-backdrop{background:#0006;position:absolute;inset:0}.modal{border-radius:var(--radius) var(--radius) 0 0;background:#fff;width:100%;max-width:480px;max-height:80dvh;animation:.25s ease-out slideUp;position:relative;overflow-y:auto}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-header{border-bottom:1px solid var(--gray-200);z-index:1;background:#fff;justify-content:space-between;align-items:center;padding:16px;display:flex;position:sticky;top:0}.modal-header h3{font-size:16px;font-weight:700}.modal-close{background:var(--gray-100);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;display:flex}.modal-body{padding:16px}.modal-actions{border-top:1px solid var(--gray-200);gap:8px;padding:16px;display:flex}.modal-actions .btn{flex:1}.toast{bottom:calc(var(--nav-height) + var(--safe-bottom) + 16px);color:#fff;z-index:200;opacity:0;white-space:nowrap;text-align:center;border-radius:20px;max-width:calc(100% - 32px);padding:10px 20px;font-size:14px;font-weight:500;transition:all .3s;position:fixed;left:50%;transform:translate(-50%)translateY(20px)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.toast-info{background:var(--gray-700)}.toast-success{background:var(--success)}.toast-warning{background:var(--warning);color:var(--gray-800)}.toast-error{background:var(--danger)}.empty-state{text-align:center;color:var(--gray-400);padding:40px 20px}.empty-state-icon{margin-bottom:8px;font-size:48px;display:block}.empty-state-text{font-size:14px}.payment-list{flex-direction:column;gap:6px;margin-top:8px;display:flex}.payment-item{align-items:center;gap:8px;padding:6px 0;font-size:13px;display:flex}.payment-item+.payment-item{border-top:1px solid var(--gray-100)}.payment-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.payment-name{flex:1;font-weight:600}.payment-amount{font-weight:700}.payment-detail{color:var(--gray-400);font-size:12px}.color-options{flex-wrap:wrap;gap:8px;display:flex}.color-option{cursor:pointer;border:2px solid #0000;border-radius:50%;width:32px;height:32px;transition:all .15s}.color-option.selected{border-color:var(--gray-800);transform:scale(1.15)}.search-bar{border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);background:#fff;align-items:center;gap:8px;margin-bottom:12px;padding:8px 12px;display:flex}.autocomplete-wrap{position:relative}.autocomplete-dropdown{z-index:50;border:1px solid var(--gray-200);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);background:#fff;max-height:200px;margin-top:2px;position:absolute;top:100%;left:0;right:0;overflow-y:auto}.autocomplete-item{cursor:pointer;padding:10px 12px;font-size:14px;transition:background .1s}.autocomplete-item:hover,.autocomplete-item.highlighted{background:var(--gray-50)}.search-bar input{border:none;outline:none;flex:1;font-size:14px}.search-bar svg{color:var(--gray-400);flex-shrink:0}.import-result{border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;background:#fff;padding:16px}.import-result-count{color:var(--primary);font-size:32px;font-weight:700}.import-result-label{color:var(--gray-500);margin-top:4px;font-size:14px}.import-result-dup{color:var(--warning);margin-top:8px;font-size:13px}.donut-container{align-items:center;gap:16px;padding:12px 0;display:flex}.donut{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:120px;height:120px;display:flex}.donut-hole{background:#fff;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:72px;height:72px;display:flex}.donut-label{color:var(--gray-500);font-size:10px}.donut-value{font-size:13px;font-weight:700}.donut-legend{flex-direction:column;flex:1;gap:4px;display:flex}.donut-legend-item{align-items:center;gap:6px;font-size:12px;display:flex}.donut-legend-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.donut-legend-label{flex:1}.donut-legend-pct{color:var(--gray-600);font-weight:600}.pace-card{margin-bottom:16px}.pace-stats{gap:20px;margin-bottom:12px;display:flex}.pace-stat-label{color:var(--gray-500);font-size:12px;display:block}.pace-stat-value{font-size:16px;font-weight:700}.pace-bar-wrap{margin-bottom:8px}.pace-bar{background:var(--gray-100);border-radius:4px;height:8px;position:relative;overflow:visible}.pace-bar-fill{background:var(--primary);border-radius:4px;height:100%;transition:width .3s}.pace-bar-marker{background:var(--gray-400);border-radius:1px;width:2px;height:14px;position:absolute;top:-3px}.pace-bar-labels{color:var(--gray-400);justify-content:space-between;margin-top:4px;font-size:11px;display:flex}.pace-diff{font-size:13px;font-weight:500}.pace-diff.over{color:var(--danger)}.pace-diff.under{color:var(--success)}.drilldown-card{margin-bottom:16px}.drilldown-breadcrumb{flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:14px;display:flex}.drilldown-chip-wrap{align-items:center;gap:4px;display:flex}.drilldown-chip{background:var(--gray-100);color:var(--gray-500);cursor:pointer;border-radius:14px;align-items:center;gap:4px;padding:4px 10px;font-size:13px;font-weight:500;transition:all .15s;display:inline-flex}.drilldown-chip.current{background:var(--primary);color:#fff;cursor:default}.drilldown-chip:not(.current):active{background:var(--gray-200)}.drilldown-chip-dot{border-radius:50%;width:8px;height:8px}.drilldown-chip.current .drilldown-chip-dot{opacity:.7}.drilldown-chip-amt{opacity:.7;margin-left:2px;font-size:11px}.drilldown-sep{color:var(--gray-300);font-size:12px}.segment-section{margin-bottom:14px}.segment-bar{background:var(--gray-100);border-radius:6px;height:12px;display:flex;overflow:hidden}.segment-piece{transition:width .3s}.segment-labels{flex-wrap:wrap;gap:8px;margin-top:6px;font-size:11px;font-weight:600;display:flex}.mini-segment{margin-top:6px}.mini-segment-bar{background:var(--gray-100);border-radius:3px;height:6px;display:flex;overflow:hidden}.mini-segment-labels{flex-wrap:wrap;gap:6px;margin-top:3px;font-size:10px;font-weight:500;display:flex}.drilldown-group-label{color:var(--gray-500);margin-bottom:8px;font-size:13px;font-weight:600}.drilldown-list{flex-direction:column;gap:4px;display:flex}.drilldown-item{border-radius:var(--radius-sm);border:1px solid var(--gray-100);padding:10px;transition:background .15s}.drilldown-item.clickable{cursor:pointer}.drilldown-item.clickable:active{background:var(--gray-50)}.drilldown-item-header{align-items:center;gap:6px;display:flex}.drilldown-item-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.drilldown-item-name{flex:1;font-size:14px;font-weight:600}.drilldown-item-amount{font-size:14px;font-weight:700}.drilldown-item-meta{color:var(--gray-400);align-items:center;gap:8px;margin-top:4px;font-size:12px;display:flex}.diff-up{color:var(--danger);font-weight:600}.diff-down{color:var(--success);font-weight:600}.drilldown-item-arrow{color:var(--gray-300);margin-left:auto;font-size:18px}.top-item{cursor:pointer;align-items:center;gap:10px;padding:8px 0;display:flex}.top-item+.top-item{border-top:1px solid var(--gray-100)}.top-rank{background:var(--gray-100);width:20px;height:20px;color:var(--gray-500);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:flex}.top-desc{white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:13px;overflow:hidden}.top-amount{white-space:nowrap;font-size:14px;font-weight:600}.calendar{margin-bottom:8px}.cal-header{text-align:center;grid-template-columns:repeat(7,1fr);display:grid}.cal-header-cell{color:var(--gray-400);padding:4px 0;font-size:12px;font-weight:600}.cal-header-cell.sun{color:var(--danger)}.cal-header-cell.sat{color:var(--primary)}.cal-grid{grid-template-columns:repeat(7,1fr);gap:2px;display:grid}.cal-cell{cursor:pointer;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;min-height:44px;padding:4px 2px;font-size:12px;transition:all .15s;display:flex}.cal-cell.empty{cursor:default}.cal-cell:not(.empty):active{transform:scale(.95)}.cal-cell.selected{color:#fff;background:var(--primary)!important}.cal-cell.selected .cal-amount{color:#fffc}.cal-cell.today{box-shadow:inset 0 0 0 1.5px var(--primary)}.cal-cell.sun .cal-day{color:var(--danger)}.cal-cell.sat .cal-day{color:var(--primary)}.cal-cell.selected .cal-day{color:#fff}.cal-day{font-weight:500}.cal-amount{color:var(--gray-500);margin-top:1px;font-size:9px}.filter-toggle-row{align-items:center;gap:8px;margin-top:8px;display:flex}.filter-toggle{border:1px solid var(--gray-200);color:var(--gray-600);cursor:pointer;background:#fff;border-radius:16px;align-items:center;gap:4px;padding:6px 12px;font-size:13px;font-weight:500;display:inline-flex}.filter-toggle.active{border-color:var(--primary);color:var(--primary)}.filter-badge{background:var(--danger);border-radius:50%;width:6px;height:6px}.filter-panel{border-radius:var(--radius-sm);border:1px solid var(--gray-200);background:#fff;margin-top:8px;padding:12px}.filter-group{margin-bottom:12px}.filter-group:last-child{margin-bottom:0}.filter-group-label{color:var(--gray-500);margin-bottom:6px;font-size:12px;font-weight:600}.filter-chips{flex-wrap:wrap;gap:6px;display:flex}.filter-amount-row{align-items:center;gap:8px;display:flex}.filter-amount-row .form-input{flex:1;padding:8px;font-size:13px}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mb-16{margin-bottom:16px}.text-center{text-align:center}.text-sm{font-size:13px}.text-gray{color:var(--gray-500)}.flex-between{justify-content:space-between;align-items:center;display:flex}