/* ══════════════════════════════════════════════════════════════════════ 돈관리 — 가계지출관리 · 내부용 ────────────────────────────────────────────────────────────────────── 디자인 원본: finance-simulator/public/styles.css (SALBO Design Tokens v0.1.0) 토큰층([1][2])은 원본과 동일 값을 승계한다. 색·치수를 새로 만들지 않는다. 컴포넌트층([3])만 이 앱의 화면(타일·인사이트·업로드·미터)에 맞춰 쓴다. 차트 계열색은 --chart-1~6 을 쓴다. 기존 charts.js 가 --series-1~3 을 참조하므로 그 세 개는 별칭으로 남겨 둔다(신규 사용 금지). ══════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────── [1] 팔레트 층 — finance-simulator 와 동일 ───────────────────────────────────────────────────────────── */ :root{ color-scheme:light; /* 오버레이 기준색 — 라이트에선 잉크 */ --veil:15,23,42; --line:rgba(var(--veil),.10); --line-2:rgba(var(--veil),.15); --line-3:rgba(var(--veil),.26); /* 잉크 */ --ink:#0B1220; --body:#3D4759; --muted:#5F6B80; --faint:#8792A4; /* 서피스 */ --bg:#FFFFFF; --bg-2:#F5F7FC; --surface:#FFFFFF; --surface-2:#F7F9FD; --surface-3:#EEF2FA; /* 브랜드 */ --brand:#7C5CFF; --brand-hover:#6B4AE8; --brand-area:#4A73FF; --brand-soft:rgba(124,92,255,.10); --brand-fg:#FFFFFF; --grad:linear-gradient(115deg,#7C5CFF 0%,#4A73FF 42%,#22D3EE 100%); /* 카테고리 틴트 */ --c-iris:#7C5CFF; --c-azure:#4A73FF; --c-cyan:#22D3EE; --c-violet:#A855F7; --c-tang:#FF9E57; --c-pink:#FF5C8A; --c-green:#34D399; --c-lime:#A3E635; --c-rose:#F0526B; --c-amber:#F5B841; --c-blue:#3B82F6; --c-slate:#8B95B0; /* 의미색 */ --danger:#DC2626; --danger-soft:rgba(220,38,38,.10); --success:#16A34A; --success-soft:rgba(22,163,74,.10); --warning:#F97316; --warning-soft:rgba(249,115,22,.12); --info:#2563EB; --info-soft:rgba(37,99,235,.10); /* 증감 방향 — 한국 재무 관행 (△증가=적색 / ▽감소=청색). 가계지출에서도 같은 축을 쓴다: 지출이 늘면 적색, 줄면 청색. */ --delta-up:#EF4444; --delta-down:#3B82F6; --delta-flat:#8792A4; --neg:#B91C1C; /* 차트 계열색 */ --chart-1:#60A5FA; --chart-2:#34D399; --chart-3:#F59E0B; --chart-4:#F87171; --chart-5:#8B5CF6; --chart-6:#22D3EE; --chart-neutral:#CBD5E1; /* 폰트 — Pretendard Variable 은 CDN 로드(index.html 참조) */ --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont, system-ui,Roboto,"Helvetica Neue","Segoe UI", "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif; --font-num:var(--font); /* ── 별칭 — charts.js 하위호환. 새 코드에서는 쓰지 않는다 ── */ --series-1:var(--chart-1); --series-2:var(--chart-4); --series-3:var(--chart-2); --surface-1:var(--surface); --grid:var(--line); --axis:var(--line-3); --track:var(--surface-3); --critical:var(--danger); --good-text:var(--success); --text-primary:var(--ink); --text-secondary:var(--body); --text-muted:var(--faint); } :root[data-theme="dark"]{ color-scheme:dark; --veil:255,255,255; --line:rgba(var(--veil),.08); --line-2:rgba(var(--veil),.13); --line-3:rgba(var(--veil),.20); --ink:#F5F8FF; --body:#C4CDE2; --muted:#8B95B0; --faint:#5C6684; --bg:#060814; --bg-2:#0A0E1E; --surface:#0F1526; --surface-2:#141B30; --surface-3:#1A2340; --brand:#A48CFF; --brand-hover:#B9A6FF; --brand-area:#7DB4FF; --brand-soft:rgba(124,92,255,.18); --brand-fg:#0B1220; --danger:#F87171; --danger-soft:rgba(248,113,113,.14); --success:#4ADE80; --success-soft:rgba(74,222,128,.14); --warning:#FB923C; --warning-soft:rgba(251,146,60,.16); --info:#60A5FA; --info-soft:rgba(96,165,250,.14); --delta-up:#F87171; --delta-down:#60A5FA; --delta-flat:#5C6684; --neg:#FCA5A5; --chart-1:#7DB4FF; --chart-2:#4ADE80; --chart-3:#FBBF24; --chart-4:#FB8A8A; --chart-5:#A78BFA; --chart-6:#5EEAD4; --chart-neutral:#475569; } /* 시스템 다크 — 명시 선택(data-theme="light")이 없을 때만 따른다 */ @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]):not([data-theme="dark"]){ color-scheme:dark; --veil:255,255,255; --line:rgba(var(--veil),.08); --line-2:rgba(var(--veil),.13); --line-3:rgba(var(--veil),.20); --ink:#F5F8FF; --body:#C4CDE2; --muted:#8B95B0; --faint:#5C6684; --bg:#060814; --bg-2:#0A0E1E; --surface:#0F1526; --surface-2:#141B30; --surface-3:#1A2340; --brand:#A48CFF; --brand-hover:#B9A6FF; --brand-area:#7DB4FF; --brand-soft:rgba(124,92,255,.18); --brand-fg:#0B1220; --danger:#F87171; --danger-soft:rgba(248,113,113,.14); --success:#4ADE80; --success-soft:rgba(74,222,128,.14); --warning:#FB923C; --warning-soft:rgba(251,146,60,.16); --info:#60A5FA; --info-soft:rgba(96,165,250,.14); --delta-up:#F87171; --delta-down:#60A5FA; --delta-flat:#5C6684; --neg:#FCA5A5; --chart-1:#7DB4FF; --chart-2:#4ADE80; --chart-3:#FBBF24; --chart-4:#FB8A8A; --chart-5:#A78BFA; --chart-6:#5EEAD4; --chart-neutral:#475569; } } /* ───────────────────────────────────────────────────────────── [2] 프로파일 층 — console (데이터 밀도 우선) ───────────────────────────────────────────────────────────── */ .profile-console{ --fs-xs:12px; --fs-sm:12.5px; --fs-base:14px; --fs-md:15px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --lh:1.5; --lh-tight:1.32; --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px; --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-pill:9999px; --sh-rest:0 1px 2px rgba(15,23,42,.04); --sh-hover:0 4px 16px rgba(15,23,42,.09); --sh-pop:0 12px 32px -8px rgba(15,23,42,.18); --tr:140ms ease; --sidebar-w:220px; --topbar-h:52px; } :root[data-theme="dark"] .profile-console{ --sh-rest:0 1px 2px rgba(0,0,0,.30); --sh-hover:0 4px 16px rgba(0,0,0,.45); --sh-pop:0 12px 32px -8px rgba(0,0,0,.6); } /* ───────────────────────────────────────────────────────────── [3] 리셋 + 기본 ───────────────────────────────────────────────────────────── */ *{box-sizing:border-box} /* 작성자 스타일의 display 가 UA 의 [hidden] 을 이기므로 여기서 다시 못 박는다 */ [hidden]{display:none !important} html{-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--font); font-size:var(--fs-base); line-height:var(--lh); color:var(--body); background:var(--bg-2); word-break:keep-all; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{margin:0;color:var(--ink);line-height:var(--lh-tight);font-weight:700} a{color:inherit;text-decoration:none} button,select,input,textarea{font-family:inherit;font-size:inherit;color:inherit} .mono,.num,td.num,th.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} .muted{color:var(--muted)} .small{font-size:var(--fs-xs)} .right{text-align:right} .nowrap{white-space:nowrap} .scroll-y{max-height:560px;overflow-y:auto} ::selection{background:var(--brand-soft);color:var(--ink)} :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)} /* 지출 증감 — △적색(늘었다) / ▽청색(줄었다) */ .up{color:var(--delta-up)} .down{color:var(--delta-down)} /* ───────────────────────────────────────────────────────────── 레이아웃 — 사이드바 + 본문 app.js 가 .shell 을 display:grid 로 켠다(boot()). ───────────────────────────────────────────────────────────── */ .shell{grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh} .side{ background:var(--surface); border-right:1px solid var(--line); display:flex;flex-direction:column; position:sticky;top:0;height:100vh;overflow-y:auto; } .brand{padding:var(--sp4) var(--sp4) var(--sp3);border-bottom:1px solid var(--line)} .brand b{display:block;font-size:var(--fs-md);font-weight:800;color:var(--ink);letter-spacing:-.02em} .brand span{font-size:11.5px;color:var(--faint)} .nav{padding:var(--sp2);flex:1} .nav__sec{ font-size:var(--fs-xs);color:var(--faint);font-weight:700; padding:var(--sp4) var(--sp3) var(--sp1);letter-spacing:-.005em; } .nav__sec:first-child{padding-top:var(--sp2)} /* 저채도 틴트 — 아이콘마다 고유색을 배지처럼 얹고, 활성 항목만 채도를 올린다. 라벨 텍스트에는 색을 쓰지 않는다. 색은 '위치 기억' 앵커일 뿐이다. */ .nav a{ display:flex;align-items:center;gap:9px; padding:7px var(--sp3);border-radius:var(--r-sm); color:var(--muted);font-size:var(--fs-sm);font-weight:600; transition:background var(--tr),color var(--tr); --tint:var(--c-slate); } .nav a:hover{background:var(--surface-3);color:var(--ink)} .nav a .ic{ width:26px;height:26px;flex:0 0 26px; display:inline-flex;align-items:center;justify-content:center; border-radius:var(--r-xs); background:color-mix(in srgb,var(--tint) 12%,transparent); color:color-mix(in srgb,var(--tint) 78%,var(--muted)); transition:background var(--tr),color var(--tr); } .nav a .ic svg{display:block} .nav a:hover .ic{background:color-mix(in srgb,var(--tint) 20%,transparent);color:var(--tint)} .nav a.on{background:var(--brand-soft);color:var(--ink);font-weight:700} .nav a.on .ic{background:var(--tint);color:#fff} :root[data-theme="dark"] .nav a.on .ic{color:#0B1220} .nav a[data-tint="iris"] {--tint:var(--c-iris)} .nav a[data-tint="azure"] {--tint:var(--c-azure)} .nav a[data-tint="violet"]{--tint:var(--c-violet)} .nav a[data-tint="cyan"] {--tint:var(--c-cyan)} .nav a[data-tint="green"] {--tint:var(--c-green)} .nav a[data-tint="tang"] {--tint:var(--c-tang)} .nav a[data-tint="blue"] {--tint:var(--c-blue)} .nav a[data-tint="pink"] {--tint:var(--c-pink)} .nav a[data-tint="amber"] {--tint:var(--c-amber)} .nav a[data-tint="rose"] {--tint:var(--c-rose)} .nav a[data-tint="slate"] {--tint:var(--c-slate)} .side-foot{ padding:var(--sp3) var(--sp4);border-top:1px solid var(--line); font-size:11px;color:var(--faint);line-height:1.6; } /* 본문 래퍼 — 상단바를 고정하기 위해 .main 은 열 방향 플렉스다 */ .mainwrap{display:flex;flex-direction:column;min-width:0} .topbar{ position:sticky;top:0;z-index:50; height:var(--topbar-h); display:flex;align-items:center;gap:var(--sp3); padding:0 var(--sp5); background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line); } .topbar__title{font-size:var(--fs-md);font-weight:700;color:var(--ink)} .topbar__spacer{flex:1} .main{padding:var(--sp5);max-width:1560px;width:100%} .page-head{ display:flex;align-items:flex-end;gap:var(--sp4);flex-wrap:wrap; margin-bottom:var(--sp4); } .page-head h1{font-size:var(--fs-xl);letter-spacing:-.02em} .page-head .spacer{flex:1} .sub{font-size:var(--fs-sm);color:var(--muted);margin-top:2px} /* ───────────────────────────────────────────────────────────── 카드 · 타일 ───────────────────────────────────────────────────────────── */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-rest); padding:var(--sp4); margin-bottom:var(--sp4); } .card>h2{font-size:var(--fs-base);font-weight:700;color:var(--ink);margin-bottom:2px} .card>.hint{font-size:var(--fs-xs);color:var(--muted);margin-bottom:var(--sp3);line-height:1.55} /* 안내문 없이 제목 바로 밑에 표가 오는 카드 — 제목이 표에 붙어 버리지 않게 띄운다 */ .card>h2+.tablewrap{margin-top:var(--sp3)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp4)} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp4)} /* 타일(KPI) — 4장이 나란히 서므로 배경 틴트를 쓰지 않는다. 한 장만 바탕색이 다르면 숫자 비교가 흐트러진다. */ .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp3);margin-bottom:var(--sp4)} .tile{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-rest); padding:var(--sp4); } .tile .k{font-size:var(--fs-sm);color:var(--muted);font-weight:600} .tile .v{ font-family:var(--font-num);font-variant-numeric:tabular-nums; font-size:var(--fs-2xl);font-weight:800;color:var(--ink); line-height:1.15;letter-spacing:-.03em;margin:var(--sp2) 0 2px; } .tile .v small{font-size:var(--fs-sm);font-weight:600;color:var(--faint);margin-left:3px} .tile .d{font-size:var(--fs-xs);color:var(--faint)} /* ───────────────────────────────────────────────────────────── 차트 ───────────────────────────────────────────────────────────── */ .chart{display:block;width:100%;height:auto;overflow:visible} .chart .grid{stroke:var(--line);stroke-width:1} .chart .axis{stroke:var(--line-3);stroke-width:1} .chart .ref{stroke:var(--line-3);stroke-width:1} .chart .reflabel{fill:var(--faint);font-size:10px;text-anchor:end} .chart .track{fill:var(--surface-3)} .chart .mark{transition:opacity .12s} .chart .markg:hover .mark,.chart g:hover .mark{opacity:.8} .chart .line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .chart .dot{stroke:var(--surface);stroke-width:2} .chart .tick{fill:var(--faint);font-size:10.5px;font-variant-numeric:tabular-nums} .chart .tick-y{text-anchor:end} .chart .tick-x{text-anchor:middle} .chart .anchor-start{text-anchor:start} .chart .anchor-end{text-anchor:end} .chart .rowlabel{fill:var(--muted);font-size:11.5px} .chart .valuelabel{ fill:var(--ink);font-size:11.5px;text-anchor:end;font-variant-numeric:tabular-nums; } .chart .dlabel{fill:var(--muted);font-size:11px;text-anchor:middle;font-weight:600} .chart .dlabel-left{text-anchor:start} .chart .axistitle{fill:var(--faint);font-size:10.5px;text-anchor:middle} .legend{display:flex;gap:var(--sp4);flex-wrap:wrap;margin:var(--sp1) 0 var(--sp3)} .legend .lg{ display:inline-flex;align-items:center;gap:6px; font-size:var(--fs-xs);color:var(--muted);font-weight:600; } .legend .lg i{width:14px;height:3px;border-radius:var(--r-pill);display:inline-block} .empty{color:var(--faint);font-size:var(--fs-sm);padding:var(--sp4) 0;margin:0;text-align:center} /* ───────────────────────────────────────────────────────────── 표 — 밀도가 이 디자인의 시험대 ───────────────────────────────────────────────────────────── */ .tablewrap{overflow-x:auto} table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm)} th,td{text-align:left;padding:6px var(--sp3);border-bottom:1px solid var(--line);} th{ position:sticky;top:0;z-index:1; background:var(--surface-2); font-size:var(--fs-xs);color:var(--muted);font-weight:600; border-bottom:1px solid var(--line-2); } td{color:var(--body)} td.num,th.num{text-align:right} td.num{font-family:var(--font-num)} tbody tr:hover td{background:var(--surface-2)} tr.dup td{opacity:.5;text-decoration:line-through} tr.mine td:first-child{box-shadow:inset 2px 0 0 var(--brand)} /* ───────────────────────────────────────────────────────────── 컨트롤 ───────────────────────────────────────────────────────────── */ .row{display:flex;gap:var(--sp2);align-items:center;flex-wrap:wrap} .btn{ display:inline-flex;align-items:center;gap:6px; padding:6px 13px;border-radius:var(--r-sm); border:1px solid var(--line-2);background:var(--surface);color:var(--body); font-size:var(--fs-sm);font-weight:600;cursor:pointer; transition:background var(--tr),border-color var(--tr),color var(--tr); } .btn:hover{background:var(--surface-3);color:var(--ink)} .btn.pri{background:var(--brand);border-color:var(--brand);color:var(--brand-fg)} .btn.pri:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--brand-fg)} .btn.dang{color:var(--danger)} .btn.dang:hover{background:var(--danger-soft);color:var(--danger);border-color:transparent} .btn:disabled{opacity:.45;cursor:not-allowed} .btn.icon{padding:6px;width:30px;height:30px;justify-content:center} select,input[type=text],input[type=number],input[type=date],textarea{ background:var(--surface);border:1px solid var(--line-2); border-radius:var(--r-sm);padding:5px 10px;color:var(--ink); font-size:var(--fs-sm); } input[type=text]:focus,select:focus,input[type=number]:focus,input[type=date]:focus{ outline:2px solid var(--c-azure);outline-offset:1px; } input[type=checkbox]{width:15px;height:15px;accent-color:var(--brand);cursor:pointer} input[type=range]{accent-color:var(--brand)} label.chk{ display:inline-flex;align-items:center;gap:6px; font-size:var(--fs-sm);color:var(--muted);cursor:pointer; } .pill{ display:inline-block;padding:1.5px 8px;border-radius:var(--r-pill); font-size:var(--fs-xs);font-weight:600; background:var(--surface-3);color:var(--muted);border:1px solid transparent; } .pill.mine{background:var(--brand-soft);color:var(--brand)} .pill.inst{background:var(--info-soft);color:var(--info)} .pill.dup{background:var(--danger-soft);color:var(--danger)} .pill.pg{background:var(--warning-soft);color:var(--warning)} /* ───────────────────────────────────────────────────────────── 인사이트 — 좌측 3px 띠 하나로 등급을 표시한다 ───────────────────────────────────────────────────────────── */ .ins{ display:flex;gap:var(--sp3); padding:var(--sp3);border-radius:var(--r-md); border:1px solid var(--line);background:var(--surface-2); margin-bottom:var(--sp2);font-size:var(--fs-sm); } .ins .bar{width:3px;border-radius:var(--r-pill);flex:none} .ins.critical .bar{background:var(--danger)} .ins.serious .bar{background:var(--c-tang)} .ins.warning .bar{background:var(--warning)} .ins.info .bar{background:var(--info)} .ins h4{ font-size:var(--fs-sm);font-weight:700;color:var(--ink); display:flex;align-items:center;gap:7px; } .ins p{margin:4px 0 0;font-size:var(--fs-xs);color:var(--muted);line-height:1.55} .ins .act{margin-top:5px;font-size:var(--fs-xs);color:var(--body);font-weight:600} .ins .act b{color:var(--success)} .ins .act a{color:var(--brand);font-weight:700} .ins .act a:hover{text-decoration:underline} .ins .ico{font-size:var(--fs-xs)} /* ───────────────────────────────────────────────────────────── 업로드 ───────────────────────────────────────────────────────────── */ .drop{ border:1.5px dashed var(--line-3);border-radius:var(--r-lg); padding:34px 20px;text-align:center;background:var(--surface-2); cursor:pointer;transition:background var(--tr),border-color var(--tr); } .drop:hover,.drop.over{border-color:var(--brand);background:var(--brand-soft)} .drop b{display:block;font-size:var(--fs-md);color:var(--ink);margin-bottom:5px} .drop span{font-size:var(--fs-xs);color:var(--muted)} .note{ font-size:var(--fs-xs);line-height:1.6;color:var(--body); background:var(--surface-2);border:1px solid var(--line); border-radius:var(--r-md);padding:10px 12px;margin:10px 0; } .note b{color:var(--ink)} .note.bad{background:var(--danger-soft);border-color:transparent;color:var(--danger)} .note.bad b{color:var(--danger)} .note.ok{background:var(--success-soft);border-color:transparent;color:var(--success)} .note.ok b{color:var(--success)} .note code{background:var(--surface-3);padding:1px 5px;border-radius:var(--r-xs);font-size:11.5px} /* 예산 집행률 — 100% 초과는 색으로만이 아니라 길이도 꽉 찬 상태로 보인다 */ .meter{height:6px;background:var(--surface-3);border-radius:var(--r-pill);overflow:hidden;margin-top:6px} .meter i{display:block;height:100%;border-radius:var(--r-pill);background:var(--brand)} .meter i.over{background:var(--danger)} /* ───────────────────────────────────────────────────────────── 반응형 ───────────────────────────────────────────────────────────── */ @media(max-width:1280px){ .tiles{grid-template-columns:repeat(2,1fr)} } @media(max-width:900px){ .shell{grid-template-columns:1fr} .side{position:static;height:auto} .nav{display:flex;flex-direction:row;overflow-x:auto} .nav__sec{display:none} .nav a{white-space:nowrap} .tiles,.grid2,.grid3{grid-template-columns:1fr} .main{padding:var(--sp4)} .topbar{padding:0 var(--sp4)} } /* ── 인쇄 ───────────────────────────────────────────────────── */ @media print{ .side,.topbar{display:none !important} .main{padding:0;max-width:none} .card,.tile{break-inside:avoid;box-shadow:none} body{background:#fff} }