/* 재무 대시보드 — 별도 모듈 스타일(home.html의 CSS 변수/테마를 그대로 공유).
모든 색은 :root 토큰(--brand/--ok/--err-l/--line ...) 참조 → 라이트·다크 자동 대응. */
#mode-finance { --pos: var(--ok); --neg: var(--err-l);
/* 월별 추이 차트 시리즈색 — dataviz 검증기 통과값(밝기밴드·채도·CVD·대비). 테마별로 별도 스텝. */
--ch-sales:#4C8BF5; --ch-exp:#C4841D; --ch-profit:#059669; }
:root[data-theme="dark"] #mode-finance { --ch-sales:#5E8CD4; --ch-exp:#B08A2E; --ch-profit:#2EA36E; }
#mode-finance .fin-head { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
#mode-finance .fin-head h2 { margin:0; font-size:22px; font-weight:700; letter-spacing:-.3px; }
#mode-finance .fin-spacer { flex:1; }
#mode-finance select.fin-month { font:inherit; font-weight:600; padding:9px 12px; border:1px solid var(--line-2); border-radius:10px; background:var(--card); color:var(--ink); }
#mode-finance .fin-disc { font-size:12px; color:var(--muted); margin-top:2px; }
/* 로그인 안내(게스트) */
#mode-finance .fin-guest { text-align:center; padding:44px 20px; color:var(--muted); }
#mode-finance .fin-guest .ti { font-size:40px; color:var(--brand); display:block; margin-bottom:12px; }
/* ── 요약 KPI 카드 ── */
#mode-finance .fin-kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:18px; }
#mode-finance .fin-kpi { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 16px 14px; box-shadow:var(--shadow); min-width:0; }
#mode-finance .fin-kpi .k-label { font-size:13px; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:6px; }
#mode-finance .fin-kpi .k-val { font-size:23px; font-weight:800; letter-spacing:-.5px; margin-top:8px; line-height:1.1; word-break:break-all; }
#mode-finance .fin-kpi .k-sub { font-size:12px; color:var(--muted); margin-top:6px; min-height:16px; }
#mode-finance .fin-kpi.accent { border-color:var(--brand); }
#mode-finance .fin-kpi .k-val.pos { color:var(--pos); } #mode-finance .fin-kpi .k-val.neg { color:var(--neg); }
#mode-finance .delta { font-weight:700; font-size:12px; padding:1px 6px; border-radius:6px; }
#mode-finance .delta.up { color:var(--pos); background:color-mix(in srgb, var(--pos) 12%, transparent); }
#mode-finance .delta.down { color:var(--neg); background:color-mix(in srgb, var(--neg) 12%, transparent); }
#mode-finance .delta.flat { color:var(--muted); }
#mode-finance .k-badge { font-size:10.5px; font-weight:700; color:var(--warn-ink); background:var(--warn); border:1px solid var(--warn-l); border-radius:5px; padding:0 5px; }
/* ── 2단(고정vs변동 / 카테고리) ── */
#mode-finance .fin-two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#mode-finance .fin-sec-h { font-weight:700; font-size:15px; margin:0 0 12px; display:flex; align-items:center; gap:8px; }
#mode-finance .fin-sec-h .ti { color:var(--brand); }
#mode-finance .fin-bar-row { margin-bottom:11px; }
#mode-finance .fin-bar-top { display:flex; justify-content:space-between; font-size:13px; margin-bottom:5px; }
#mode-finance .fin-bar-top b { font-weight:600; }
#mode-finance .fin-bar { height:9px; background:var(--brand-50); border-radius:6px; overflow:hidden; }
#mode-finance .fin-bar > span { display:block; height:100%; border-radius:6px; background:var(--brand); transition:width .3s; }
#mode-finance .fin-bar.fixed > span { background:var(--brand-d); }
#mode-finance .fin-bar.var > span { background:var(--brand-l); }
#mode-finance .fin-chip { font-size:11px; color:var(--muted); margin-left:6px; }
#mode-finance .fin-chip.exp { color:var(--warn-ink); }
#mode-finance .fin-empty { color:var(--muted); font-size:13px; padding:14px 4px; text-align:center; }
/* ── 거래 목록 ── */
#mode-finance .fin-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
#mode-finance .fin-filters select, #mode-finance .fin-filters input { font:inherit; font-size:13px; padding:7px 10px; border:1px solid var(--line-2); border-radius:8px; background:var(--card); color:var(--ink); }
#mode-finance table.fin-tx { width:100%; border-collapse:collapse; font-size:13.5px; }
#mode-finance table.fin-tx th { background:var(--brand); color:#fff; padding:8px 8px; text-align:left; font-size:12.5px; font-weight:600; white-space:nowrap; }
#mode-finance table.fin-tx td { border-bottom:1px solid var(--line); padding:6px 8px; vertical-align:middle; }
#mode-finance table.fin-tx tr:hover td { background:var(--brand-50); }
#mode-finance table.fin-tx td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
#mode-finance table.fin-tx td.num.inc { color:var(--pos); font-weight:600; }
#mode-finance .tx-cat { font:inherit; font-size:12.5px; padding:3px 6px; border:1px solid var(--line-2); border-radius:7px; background:var(--card); color:var(--ink); max-width:120px; }
#mode-finance .tx-fixed { cursor:pointer; border:1px solid var(--line-2); background:var(--card); border-radius:6px; padding:2px 8px; font-size:11.5px; color:var(--muted); font-weight:600; }
#mode-finance .tx-fixed.on { background:var(--brand-50); color:var(--brand-ink); border-color:var(--brand-100); }
#mode-finance .tx-del { background:none; border:none; color:var(--muted); cursor:pointer; padding:2px 6px; border-radius:6px; }
#mode-finance .tx-del:hover { color:var(--err-l); background:var(--err); }
#mode-finance .tx-list-wrap { max-height:440px; overflow:auto; border:1px solid var(--line); border-radius:12px; }
/* ── 고정비 등록 리스트 ── */
#mode-finance .fin-fixed-item { display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line); font-size:14px; }
#mode-finance .fin-fixed-item .ff-name { font-weight:600; }
#mode-finance .fin-fixed-item .ff-off { opacity:.5; }
#mode-finance .fin-fixed-item .ff-amt { font-variant-numeric:tabular-nums; }
/* ── 데이터 넣기 패널(탭) ── */
#mode-finance .fin-entry-tabs { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
#mode-finance .fin-etab { display:inline-flex; align-items:center; gap:7px; background:var(--brand-50); color:var(--brand-ink); border:1px solid var(--line); border-radius:10px; padding:8px 15px; font-weight:600; font-size:14px; cursor:pointer; }
#mode-finance .fin-etab.active { background:var(--brand); color:#fff; border-color:var(--brand-ink); }
#mode-finance .fin-drop { border:1.5px dashed var(--line-2); border-radius:14px; padding:26px; text-align:center; cursor:pointer; color:var(--muted); transition:.15s; }
#mode-finance .fin-drop.hover { border-color:var(--brand-l); background:var(--brand-50); color:var(--brand-ink); }
#mode-finance .fin-drop b { color:var(--ink); }
#mode-finance .fin-row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
#mode-finance .fin-row label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
#mode-finance .fin-row input, #mode-finance .fin-row select { font:inherit; padding:9px 11px; border:1px solid var(--line-2); border-radius:10px; background:var(--card); color:var(--ink); }
#mode-finance .fin-note { font-size:13px; color:var(--muted); margin:10px 0; line-height:1.6; }
#mode-finance .fin-warn { background:var(--warn); border:1px solid var(--warn-l); color:var(--warn-ink); border-radius:10px; padding:8px 12px; font-size:13px; margin:8px 0; }
/* ── 월별 추이 차트 ── */
#mode-finance .fin-chart-wrap { position:relative; }
#mode-finance .fin-chart-wrap svg { display:block; width:100%; height:auto; }
#mode-finance .fin-lgd { display:flex; gap:14px; font-size:12.5px; color:var(--muted); align-items:center; flex-wrap:wrap; }
#mode-finance .fin-lg { display:inline-flex; align-items:center; gap:6px; }
#mode-finance .fin-lg i { width:10px; height:10px; border-radius:3px; display:inline-block; }
#mode-finance .fin-lg i.dot { border-radius:50%; }
#mode-finance .fin-tip { position:absolute; pointer-events:none; background:var(--card); border:1px solid var(--line-2); border-radius:10px; box-shadow:var(--shadow); padding:9px 12px; font-size:12.5px; line-height:1.7; z-index:5; min-width:150px; }
#mode-finance .fin-tip b { font-size:13px; }
#mode-finance .fin-tip .tt-row { display:flex; justify-content:space-between; gap:14px; }
#mode-finance .fin-tip .tt-row i { width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:5px; }
#mode-finance .fin-trend-tbl summary { cursor:pointer; font-size:12.5px; color:var(--muted); margin-top:8px; }
#mode-finance .fin-trend-tbl table { font-size:12.5px; margin-top:8px; }
/* ── AI 인사이트·제안 ── */
#mode-finance .fin-ins { border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:10px; }
#mode-finance .fin-ins.sev-warn { border-color:var(--warn-l); background:color-mix(in srgb, var(--warn) 45%, transparent); }
#mode-finance .fin-ins.sev-good { border-color:color-mix(in srgb, var(--ok) 40%, var(--line)); background:color-mix(in srgb, var(--ok) 7%, transparent); }
#mode-finance .fin-ins-t { display:flex; align-items:center; gap:7px; font-size:14px; }
#mode-finance .fin-ins-t .ti { flex-shrink:0; }
#mode-finance .fin-ins.sev-warn .fin-ins-t .ti { color:var(--warn-ink); }
#mode-finance .fin-ins.sev-good .fin-ins-t .ti { color:var(--ok); }
#mode-finance .fin-ins.sev-info .fin-ins-t .ti { color:var(--brand); }
#mode-finance .fin-ins-sev { margin-left:auto; font-size:11px; font-weight:700; color:var(--muted); border:1px solid var(--line-2); border-radius:6px; padding:1px 7px; flex-shrink:0; }
#mode-finance .fin-ins-d { font-size:13px; color:var(--ink); margin:6px 0 0 25px; line-height:1.55; }
#mode-finance .fin-ins-s { font-size:13px; color:var(--brand-ink); font-weight:600; margin:6px 0 0 25px; line-height:1.5; }
#mode-finance .fin-ins-sum { font-size:14px; font-weight:600; margin-bottom:12px; padding:10px 12px; background:var(--brand-50); border-radius:10px; }
/* ── 입금 대사 ── */
#mode-finance .rec-row { display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px solid var(--line); }
#mode-finance .rec-row:last-of-type { border-bottom:none; }
#mode-finance .rec-row > div { flex:1; font-size:14px; }
#mode-finance .rec-pay { flex-shrink:0; background:var(--brand); color:#fff; border:none; border-radius:9px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; }
#mode-finance .rec-pay:hover { background:var(--brand-ink); }
#mode-finance .rec-pay:disabled { opacity:.5; cursor:default; }
@media (max-width:820px) {
#mode-finance .fin-kpis { grid-template-columns:repeat(2,1fr); }
#mode-finance .fin-two { grid-template-columns:1fr; }
}