/* ══════════════════════════════════════════════════════════════════════ 돈관리 — 가계지출관리 · 내부용 ────────────────────────────────────────────────────────────────────── 디자인 원본: 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="lime"] {--tint:var(--c-lime)} .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 .rowlabel-top{fill:var(--ink);font-size:12.5px;font-weight:600} .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} /* 가로로 넘겨 보는 표(월 매트릭스 등)는 첫 열을 붙잡아 둔다 — 어느 행인지 잃지 않게 */ .tablewrap.stickyfirst td:first-child, .tablewrap.stickyfirst th:first-child{ position:sticky;left:0;z-index:2; background:var(--surface);border-right:1px solid var(--line); } .tablewrap.stickyfirst th:first-child{z-index:3;background:var(--surface-2)} .tablewrap.stickyfirst tbody tr:hover td:first-child{background:var(--surface-2)} 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)} /* ───────────────────────────────────────────────────────────── 드릴다운 — 누를 수 있는 것은 누를 수 있게 보여야 한다 ───────────────────────────────────────────────────────────── */ .chart .pick{cursor:pointer} .chart .pick:hover .mark{opacity:.78} .chart .pick:focus-visible{outline:2px solid var(--brand);outline-offset:1px} tr.pickrow{cursor:pointer} tr.pickrow:hover td{background:var(--brand-soft)} tr.pickrow:focus-visible{outline:2px solid var(--brand);outline-offset:-2px} tr.pickrow>td:first-child{position:relative} tr.pickrow:hover>td:first-child::after{ content:"›";position:absolute;right:2px;color:var(--brand);font-weight:800; } .tile.pick{cursor:pointer;transition:border-color var(--tr),box-shadow var(--tr)} .tile.pick:hover{border-color:var(--brand);box-shadow:var(--sh-hover)} /* 표 안에서 텍스트처럼 보이는 버튼 (사용처 → 드릴다운) */ .linkish{ background:none;border:0;padding:0;text-align:left;cursor:pointer; color:inherit;font-weight:600;font-size:inherit; } .linkish:hover{color:var(--brand);text-decoration:underline} /* 업종×월 매트릭스 — 셀 농도로 크기를 읽는다 (--k 는 JS가 넣는다) */ td.heat{background:color-mix(in srgb,var(--brand) calc(var(--k,0) * 100%),transparent)} td.heat.pick{cursor:pointer} td.heat.pick:hover{outline:2px solid var(--brand);outline-offset:-2px} /* ───────────────────────────────────────────────────────────── 드릴다운 시트 — 모바일은 바텀시트, 데스크톱은 가운데 모달 ───────────────────────────────────────────────────────────── */ body.sheet-open{overflow:hidden} .sheetwrap{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center} .sheetback{position:absolute;inset:0;background:rgba(0,0,0,.42);backdrop-filter:blur(2px)} .sheet{ position:relative;display:flex;flex-direction:column; width:min(960px,94vw);max-height:88vh; background:var(--bg-2);border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--sh-pop);overflow:hidden; } .sheethead{ display:flex;align-items:center;gap:var(--sp3); padding:var(--sp3) var(--sp4); background:var(--surface);border-bottom:1px solid var(--line);flex:none; } .sheettitle{min-width:0;flex:1} .sheettitle b{display:block;color:var(--ink);font-size:var(--fs-md);font-weight:700; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sheetbody{padding:var(--sp4);overflow-y:auto;-webkit-overflow-scrolling:touch} .sheetbody .card:last-child{margin-bottom:0} .sheetscope{margin-bottom:var(--sp3)} .tiles--sheet{grid-template-columns:repeat(4,1fr)} .tiles--sheet .tile{padding:var(--sp3)} .tiles--sheet .tile .v{font-size:var(--fs-xl)} /* ───────────────────────────────────────────────────────────── 거래 리스트 — 좁은 화면에서 표를 대신한다 ───────────────────────────────────────────────────────────── */ .txlist{display:flex;flex-direction:column;gap:6px} .txrow{ display:grid; grid-template-columns:auto 1fr auto auto; gap:0 var(--sp2);align-items:center; padding:9px var(--sp3);border:1px solid var(--line);border-radius:var(--r-md); background:var(--surface-2); } .txrow.mine{box-shadow:inset 3px 0 0 var(--brand)} .txrow.dup{opacity:.55} .txrow.dup .txmain b{text-decoration:line-through} .txsel{align-self:center} .txmain{min-width:0} .txmain b{display:block;color:var(--ink);font-size:var(--fs-sm);font-weight:700; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .txmeta{display:block;font-size:11.5px;color:var(--faint);margin-top:1px} .txamt{color:var(--ink);font-weight:700;font-size:var(--fs-md);white-space:nowrap;text-align:right} .txcat{display:block;font-size:11px;font-weight:600;color:var(--faint)} .txtoggle{ width:32px;height:32px;flex:none;cursor:pointer; border:1px solid var(--line-2);border-radius:var(--r-sm); background:var(--surface);color:var(--muted);font-size:13px; } .txtoggle:hover{background:var(--surface-3);color:var(--ink)} .txrow.open .txtoggle{background:var(--brand-soft);color:var(--brand);border-color:transparent} .txedit{ grid-column:1/-1;display:none;flex-wrap:wrap;gap:6px;align-items:center; margin-top:8px;padding-top:8px;border-top:1px dashed var(--line-2); } .txrow.open .txedit{display:flex} .txedit select{max-width:150px} .txedit input[type=text]{flex:1;min-width:110px} /* ───────────────────────────────────────────────────────────── 필터 패널 · 세그먼트 ───────────────────────────────────────────────────────────── */ .filters{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);padding:0 var(--sp3)} .filters>summary{ cursor:pointer;padding:10px 2px;font-size:var(--fs-sm);font-weight:700;color:var(--ink); list-style:none;display:flex;align-items:center;gap:6px; } .filters>summary::-webkit-details-marker{display:none} .filters>summary::before{content:"▸";color:var(--muted);transition:transform var(--tr)} .filters[open]>summary::before{transform:rotate(90deg)} .filters .row{margin-bottom:var(--sp3)} .bulkrow{padding-top:var(--sp2);border-top:1px dashed var(--line-2)} /* 보기 범위 — 상단바 전역 필터. 걸려 있으면 눈에 띄어야 한다 */ .scopesel{max-width:150px} .scopesel.on{ background:var(--brand-soft);border-color:transparent;color:var(--brand);font-weight:700; } .note.scopenote{ display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap; background:var(--brand-soft);border-color:transparent;color:var(--body);margin:0 0 var(--sp4); } .note.scopenote b{color:var(--brand)} /* 현금 지출 입력 목록 — 한 줄 편집 */ .cashlist{display:flex;flex-direction:column;gap:6px} .cashrow{ display:flex;gap:6px;align-items:center;flex-wrap:wrap; padding:8px var(--sp3);border:1px solid var(--line);border-radius:var(--r-md); background:var(--surface-2); } .cashrow .cMer{flex:1;min-width:120px} .cashrow .cAmt{width:110px;text-align:right} .cashrow .cCat{max-width:150px} /* 고정비 · 변동비 비율 막대 */ .splitbar{ display:flex;height:14px;border-radius:var(--r-pill);overflow:hidden; background:var(--surface-3);margin:var(--sp2) 0 var(--sp3); } .splitbar i{display:block;height:100%} .splitbar i.fx{background:var(--chart-5)} .splitbar i.vr{background:var(--chart-3)} .splitleg{display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp4);font-size:var(--fs-sm);color:var(--body)} .splitleg span{display:inline-flex;align-items:center;gap:6px;font-weight:600} .splitleg span.pick{cursor:pointer;border-radius:var(--r-xs)} .splitleg span.pick:hover{color:var(--brand)} .splitleg i{width:10px;height:10px;border-radius:3px;flex:none} .splitleg i.fx{background:var(--chart-5)} .splitleg i.vr{background:var(--chart-3)} /* 전월 대비 — 증감순 구성 리스트 */ .cmph{font-size:var(--fs-sm);font-weight:700;color:var(--ink);margin:var(--sp4) 0 var(--sp2)} .cmplist{display:flex;flex-direction:column;gap:5px} .cmprow{ display:flex;align-items:center;gap:var(--sp3); padding:9px var(--sp3);border:1px solid var(--line);border-radius:var(--r-md); background:var(--surface-2);cursor:pointer; } .cmprow:hover{border-color:var(--brand);background:var(--brand-soft)} .cmprow:focus-visible{outline:2px solid var(--brand);outline-offset:1px} .cmpmain{min-width:0;flex:1} .cmpmain b{display:block;color:var(--ink);font-size:var(--fs-sm);font-weight:700; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cmpdelta{font-weight:700;font-size:var(--fs-sm);white-space:nowrap; font-variant-numeric:tabular-nums;text-align:right} /* 분류 지정 리스트 — 좁은 화면에서 표를 대신한다(선택 컨트롤이 화면 밖으로 밀리지 않게) */ .qlist{display:flex;flex-direction:column;gap:6px} .qrow{ padding:10px var(--sp3);border:1px solid var(--line);border-radius:var(--r-md); background:var(--surface-2); } .qmain b{color:var(--ink);font-size:var(--fs-sm);font-weight:700} .qmeta{display:block;font-size:11.5px;color:var(--faint);margin-top:2px} .qact{display:flex;gap:6px;align-items:center;margin-top:8px} .qact select{flex:1;min-width:0} /* 접이식 섹션 카드 (업종 분류 설정) */ details.sect>summary{ cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px; font-size:var(--fs-base);color:var(--ink); } details.sect>summary::-webkit-details-marker{display:none} details.sect>summary::before{content:"▸";color:var(--muted);transition:transform var(--tr)} details.sect[open]>summary::before{transform:rotate(90deg)} details.sect>.hint{margin-top:6px} details.sect:not([open])>.hint{display:none} .seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden} .seg .btn{border:0;border-radius:0;border-right:1px solid var(--line)} .seg .btn:last-child{border-right:0} .btn.on{background:var(--brand-soft);color:var(--brand)} .btn.small{padding:4px 10px;font-size:var(--fs-xs)} .pill.warn{background:var(--warning-soft);color:var(--warning)} /* 표 안의 입력 — 인라인 편집 폭 */ td input[type=text]{width:100%;min-width:90px} td input[type=number].bud{width:104px;text-align:right} td input[type=range].rate{width:120px;vertical-align:middle} td select{max-width:190px} #fq,#dq{width:180px} .monthpick select{min-width:120px} .formgrid input[type=text],.formgrid input[type=number]{width:130px} .formgrid input#mMer{width:170px} /* ───────────────────────────────────────────────────────────── 모바일 내비게이션 — 사이드바를 덮개(drawer)로 전환 ───────────────────────────────────────────────────────────── */ .navbtn{display:none} .navback{display:none} @media(max-width:1280px){ .tiles{grid-template-columns:repeat(2,1fr)} } @media(max-width:900px){ .shell{grid-template-columns:1fr} .navbtn{display:inline-flex} .side{ position:fixed;top:0;left:0;bottom:0;z-index:120; width:min(272px,82vw);height:100dvh; transform:translateX(-100%); transition:transform 180ms ease; box-shadow:var(--sh-pop); padding-top:env(safe-area-inset-top); } .shell.nav-open .side{transform:none} .navback{ display:block;position:fixed;inset:0;z-index:110; background:rgba(0,0,0,.38);opacity:0;pointer-events:none;transition:opacity 180ms ease; } .shell.nav-open .navback{opacity:1;pointer-events:auto} .grid2,.grid3{grid-template-columns:1fr} .main{padding:var(--sp4)} /* 노치 대응 — viewport-fit=cover 를 켰으므로 상단 안전영역을 직접 비운다 */ .topbar{ padding:0 var(--sp3);gap:var(--sp2); padding-top:env(safe-area-inset-top); height:calc(var(--topbar-h) + env(safe-area-inset-top)); } .tiles--sheet{grid-template-columns:repeat(2,1fr)} .sheet{ width:100%;max-width:none;max-height:92dvh;align-self:flex-end; border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0; } .sheetwrap{align-items:flex-end} .sheetbody{padding:var(--sp3) var(--sp3) calc(var(--sp5) + env(safe-area-inset-bottom))} } /* ── 폰 (≤720px) ───────────────────────────────────────────── 여기서부터는 "표를 훑는" 화면이 아니라 "한 손으로 스크롤하는" 화면이다. · 입력 글자 16px — iOS 는 그보다 작으면 포커스 시 화면을 확대해 버린다 · 터치 타깃 최소 40px · 중첩 스크롤(.scroll-y) 해제 — 페이지 스크롤과 싸운다 ───────────────────────────────────────────────────────────── */ @media(max-width:720px){ .profile-console{--fs-2xl:23px;--fs-xl:19px;--sp5:16px} .main{padding:var(--sp3) var(--sp3) var(--sp6)} .card{padding:var(--sp3);border-radius:var(--r-md)} .tile{padding:var(--sp3)} .tiles{gap:var(--sp2)} .page-head{margin-bottom:var(--sp3);gap:var(--sp2);align-items:flex-start} .page-head h1{font-size:var(--fs-lg)} .page-head .spacer{display:none} .page-head .monthpick{width:100%;justify-content:space-between} .monthpick select{flex:1} .topbar__title{font-size:var(--fs-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .scroll-y{max-height:none;overflow:visible} /* 열을 짜부라뜨려 글자를 세로로 쌓느니 좌우로 넘겨 보는 편이 낫다 */ .tablewrap{-webkit-overflow-scrolling:touch} .tablewrap table{min-width:max-content} .tablewrap th,.tablewrap td{white-space:nowrap} .tablewrap td .small{white-space:normal} th,td{padding:8px var(--sp2)} /* iOS 확대 방지 + 터치 타깃 */ select,input[type=text],input[type=search],input[type=number],input[type=date],textarea{ font-size:16px;padding:8px 10px;min-height:40px; } .btn{padding:9px 14px;min-height:40px} .btn.small{padding:7px 11px;min-height:34px;font-size:var(--fs-xs)} .btn.icon{width:40px;height:40px} input[type=checkbox]{width:20px;height:20px} .row{gap:6px} #fq,#dq,.txedit input[type=text]{width:100%;flex:1 1 100%} .scopesel{max-width:104px;padding:6px;font-size:12.5px;min-height:34px} .cashrow{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center} .cashrow .cDate,.cashrow .cMer,.cashrow .cCat{grid-column:1/-1;max-width:none;width:100%} .cashrow .cAmt{grid-column:1/-1;width:100%} .cashrow .chk{justify-self:start} .formgrid .chk{justify-content:flex-start} .txedit select{max-width:none;flex:1 1 40%} td input[type=range].rate{width:88px} .ins{padding:var(--sp2) var(--sp3)} .legend{gap:var(--sp3)} .drop{padding:24px 14px} .formgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px} .formgrid input,.formgrid select{width:100% !important} .formgrid .chk,.formgrid .btn{grid-column:span 2} } @media(max-width:420px){ .tiles{grid-template-columns:1fr 1fr} .tile .v{font-size:20px} .txrow{padding:var(--sp2)} } /* ── 인쇄 ───────────────────────────────────────────────────── */ @media print{ .side,.topbar,.navback,.sheetwrap{display:none !important} .main{padding:0;max-width:none} .card,.tile{break-inside:avoid;box-shadow:none} body{background:#fff} } /* 모션 최소화 설정을 존중한다 */ @media(prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} }