/* ══════════════════════════════════════════════════════════════════════ SALBO Design Tokens · @version 0.1.0 · 2026-08-11 ────────────────────────────────────────────────────────────────────── 단일 진실원. finance-simulator 에서 선행 검증 후 space / control / salary 로 확산한다. (portal 은 현행 유지 — 대상 아님) 구조 [1] 팔레트 층 색 원자 · --veil 테마 기법 · 카테고리 틴트 → 살보커넥트 AURORA(connect.css) 에서 승계 [2] 프로파일 층 .profile-console (밀도 높음) / .profile-landing [3] 컴포넌트 층 프로파일 토큰만 참조. 리터럴 색·치수 금지 테마 원리 (AURORA 승계) 오버레이를 rgba(var(--veil), α) 로 쓴다. --veil 삼중항만 뒤집으면 알파 계조를 유지한 채 라이트/다크가 동시에 성립한다. 라이트 퍼스트인 이유 주 사용자층이 40~50대다. 재무앱은 랜딩보다 더 오래, 더 작은 숫자를 본다. 다크의 저대비 회색 본문은 노안에 특히 불리하다. ══════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────── [1] 팔레트 층 ───────────────────────────────────────────────────────────── */ :root{ /* 오버레이 기준색 — 라이트에선 잉크 */ --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; /* 브랜드 — 포인트는 아이리스, 넓은 면적은 애저 (finance-fund 의 "마젠타는 면적이 넓으면 눈이 피로" 판단을 계승) */ --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); /* ── 증감 방향 — 한국 재무·증시 관행 (△증가=적색 / ▽감소=청색) ── finance-portal/public/finance-loader.js:194-195 실측값을 그대로 따른다. ⚠ 서구 회계 관행(초록=플러스)과 정반대다. 사내 표준은 아래가 맞다. */ --delta-up:#EF4444; /* △ 증가 */ --delta-down:#3B82F6; /* ▽ 감소 */ --delta-flat:#8792A4; /* - 보합 */ /* 값의 부호 — '증감 방향'과는 다른 축이다. 음수는 색이 아니라 괄호로 표기하는 것이 회계 관행이다: (286) */ --neg:#B91C1C; /* ── 차트 계열색 — finance-portal --chart-1~6 과 동일 값 ────────── 포털이 매일 읽히는 대시보드이므로 데이터 색은 그쪽에 맞춘다. 규칙: 크롬(사이드바·버튼·칩)은 AURORA, 데이터(차트·범례)는 포털 팔레트. */ --chart-1:#60A5FA; /* 파랑 — 1순위 / cash-in */ --chart-2:#34D399; /* 에메랄드 — net · 잔액 */ --chart-3:#F59E0B; /* 앰버 — 3순위 */ --chart-4:#F87171; /* 연빨강 — cash-out */ --chart-5:#8B5CF6; /* 보라 — 5순위 */ --chart-6:#22D3EE; /* 시안 — 6순위 */ --chart-neutral:#CBD5E1; --chart-past:#93C5FD; /* 스파크라인 과거 구간 */ --chart-now:#EF4444; /* 스파크라인 최신 구간 강조 */ /* 폰트 — finance-fund/public/styles.css:66-70 과 동일 스택. Pretendard Variable 은 CDN 로드(문서 참조). 링크가 없으면 로컬 설치 여부에 따라 렌더가 갈리므로 반드시 함께 붙인다. */ --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; /* 숫자도 같은 패밀리를 쓴다. Pretendard 는 tabular-nums 를 지원하므로 monospace 를 섞을 이유가 없다 — 섞으면 본문과 자형이 어긋나 어색해진다. */ --font-num:var(--font); } :root[data-theme="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; --chart-past:#3B5580; --chart-now:#F87171; } /* ───────────────────────────────────────────────────────────── [2] 프로파일 층 console : 데이터 밀도 우선. 재무앱 본체 전 화면. AURORA 의 --sp7~11 / --r-xl,2xl / 오로라 백드롭 / glow 는 의도적으로 정의하지 않는다. 15년 × 20행 재무제표를 line-height 1.72 로 그리면 한 화면에 4년치도 안 들어간다. ───────────────────────────────────────────────────────────── */ .profile-console{ /* 타이포 — finance-fund 실측값 승계 (본문 14px / 내비 12.5px / lh 1.5) */ --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); --sh-modal:0 20px 60px rgba(15,23,42,.20); --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); --sh-modal:0 20px 60px rgba(0,0,0,.7); } /* landing 프로파일 = 기존 connect.css 값. 로그인·소개 화면용으로 남겨둔다 */ .profile-landing{ --lh:1.72; --sp7:44px; --sp8:60px; --sp9:80px; --sp10:112px; --sp11:150px; --r-xl:28px; --r-2xl:36px; --tr2:420ms cubic-bezier(.22,.61,.36,1); } /* ───────────────────────────────────────────────────────────── [3] 리셋 + 기본 ───────────────────────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ 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; } a{color:inherit;text-decoration:none} button,input,select{font-family:inherit;font-size:inherit;color:inherit} h1,h2,h3,h4{color:var(--ink);line-height:var(--lh-tight);font-weight:700} /* 숫자 — 자릿수 정렬. 재무앱에서 가장 중요한 한 줄 */ .num{font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-feature-settings:"tnum"} .neg{color:var(--neg)} .muted{color:var(--muted)} .faint{color:var(--faint)} /* 전년 대비 증감 — △적색 / ▽청색 (포털과 동일) */ .delta{display:inline-flex;align-items:center;gap:3px;font-weight:700;font-variant-numeric:tabular-nums} .delta--up{color:var(--delta-up)} .delta--down{color:var(--delta-down)} .delta--flat{color:var(--delta-flat)} ::selection{background:var(--brand-soft);color:var(--ink)} :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)} /* ───────────────────────────────────────────────────────────── 레이아웃 ───────────────────────────────────────────────────────────── */ .shell{display:flex;min-height:100vh} .sidebar{ position:fixed;inset:0 auto 0 0; width:var(--sidebar-w); background:var(--surface); border-right:1px solid var(--line); display:flex;flex-direction:column; z-index:100; } .sidebar__brand{ padding:var(--sp4) var(--sp4) var(--sp3); border-bottom:1px solid var(--line); } /* dcamp 워드마크 — finance-portal/public/dcamp_Logo_RGB_Orange.png 와 동일 원본. 오렌지 단색·투명 배경이라 라이트/다크 양쪽에서 그대로 성립한다. */ .sidebar__logo{height:18px;width:auto;margin-bottom:9px} .sidebar__title{font-size:var(--fs-md);font-weight:800;color:var(--ink);letter-spacing:-.02em} .nav{padding:var(--sp2);flex:1;overflow-y:auto} .nav__sec{ display:flex;align-items:center;gap:6px; 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__sec-chip{font-size:10.5px;padding:1px 6px} /* ── C안 · 저채도 틴트 (2026-08-11 확정) ────────────────── 아이콘마다 고유색을 주되 채도를 눌러 배지처럼 얹는다. 활성 항목만 배지 채도를 올린다. 라벨 텍스트에는 색을 쓰지 않는다 — 색은 '위치 기억'을 돕는 앵커일 뿐, 의미를 나르지 않는다. 활성 표시에서 좌측 세로바는 쓰지 않는다(지시 반영 2026-08-11). 배경 틴트 + 아이콘 배지 solid + 라벨 굵기만으로 충분히 판별된다. */ .nav__item{ 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); cursor:pointer; } .nav__item:hover{background:var(--surface-3);color:var(--ink)} .nav__ico{ 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__ico svg{display:block} .nav__item:hover .nav__ico{ background:color-mix(in srgb,var(--tint) 20%,transparent); color:var(--tint); } .nav__item.is-active{background:var(--brand-soft);color:var(--ink);font-weight:700} .nav__item.is-active .nav__ico{background:var(--tint);color:#fff} :root[data-theme="dark"] .nav__item.is-active .nav__ico{color:#0B1220} /* 항목별 틴트 지정 */ .nav__item{--tint:var(--c-slate)} .nav__item[data-tint="iris"] {--tint:var(--c-iris)} .nav__item[data-tint="azure"] {--tint:var(--c-azure)} .nav__item[data-tint="violet"]{--tint:var(--c-violet)} .nav__item[data-tint="cyan"] {--tint:var(--c-cyan)} .nav__item[data-tint="green"] {--tint:var(--c-green)} .nav__item[data-tint="tang"] {--tint:var(--c-tang)} .nav__item[data-tint="blue"] {--tint:var(--c-blue)} .nav__item[data-tint="pink"] {--tint:var(--c-pink)} .nav__item[data-tint="amber"] {--tint:var(--c-amber)} .nav__item[data-tint="rose"] {--tint:var(--c-rose)} .nav__item[data-tint="slate"] {--tint:var(--c-slate)} /* 사용자 블록 — finance-fund 하단 구성 승계 */ .sidebar__user{ display:flex;align-items:center;gap:var(--sp2); padding:var(--sp3);border-top:1px solid var(--line); } .sidebar__avatar{ width:28px;height:28px;flex:0 0 28px;border-radius:var(--r-pill); background:var(--grad);color:#fff; display:flex;align-items:center;justify-content:center; font-size:var(--fs-sm);font-weight:700; } .sidebar__uinfo{min-width:0} .sidebar__uname{font-size:var(--fs-sm);font-weight:700;color:var(--ink);line-height:1.3} .sidebar__umail{font-size:11px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sidebar__foot{ display:flex;align-items:center;justify-content:space-between;gap:var(--sp2); padding:0 var(--sp3) var(--sp3); } .sidebar__logout{ display:inline-flex;align-items:center;gap:4px; padding:4px 9px;border-radius:var(--r-sm); border:1px solid var(--line-2); font-size:11.5px;font-weight:600;color:var(--muted); transition:background var(--tr),color var(--tr),border-color var(--tr); } .sidebar__logout:hover{background:var(--danger-soft);color:var(--danger);border-color:transparent} .sidebar__logout svg{display:block;flex:0 0 13px} .main{flex:1;margin-left:var(--sidebar-w);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} .page{padding:var(--sp5);max-width:1560px;width:100%} .page__head{display:flex;align-items:flex-end;gap:var(--sp4);margin-bottom:var(--sp4)} .page__title{font-size:var(--fs-xl);letter-spacing:-.02em} .page__desc{font-size:var(--fs-sm);color:var(--muted);margin-top:2px} .grid{display:grid;gap:var(--sp4)} .grid--kpi{grid-template-columns:repeat(4,1fr)} .grid--main{grid-template-columns:minmax(0,1fr) 300px;align-items:start} @media(max-width:1280px){ .grid--kpi{grid-template-columns:repeat(2,1fr)} .grid--main{grid-template-columns:minmax(0,1fr)} } /* ───────────────────────────────────────────────────────────── 카드 ───────────────────────────────────────────────────────────── */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-rest); } .card__head{ display:flex;align-items:center;gap:var(--sp3); padding:var(--sp3) var(--sp4); border-bottom:1px solid var(--line); } .card__title{font-size:var(--fs-base);font-weight:700;color:var(--ink)} .card__body{padding:var(--sp4)} .card__body--flush{padding:0} /* KPI */ .kpi{padding:var(--sp4)} .kpi__label{ display:flex;align-items:center;gap:6px; font-size:var(--fs-sm);color:var(--muted);font-weight:600; } .kpi__dot{width:7px;height:7px;border-radius:var(--r-pill);flex:0 0 7px} .kpi__value{ font-family:var(--font-num); font-size:var(--fs-2xl);font-weight:800;color:var(--ink); line-height:1.15;letter-spacing:-.03em; margin:var(--sp2) 0 2px; } .kpi__unit{font-size:var(--fs-sm);font-weight:600;color:var(--faint);margin-left:3px} .kpi__meta{display:flex;align-items:center;gap:var(--sp2);font-size:var(--fs-xs);color:var(--faint)} .kpi__spark{margin-top:var(--sp3);display:block;width:100%;height:32px} /* ───────────────────────────────────────────────────────────── 칩 · 배지 · 버튼 ───────────────────────────────────────────────────────────── */ .chip{ display:inline-flex;align-items:center;gap:5px; padding:2px 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; } .chip--pos{background:var(--success-soft);color:var(--success)} .chip--neg{background:var(--danger-soft);color:var(--danger)} .chip--warn{background:var(--warning-soft);color:var(--warning)} .chip--info{background:var(--info-soft);color:var(--info)} .segmented{ display:inline-flex;padding:2px;gap:2px; background:var(--surface-3);border-radius:var(--r-sm); } .segmented button{ padding:4px 12px;border:0;border-radius:var(--r-xs); background:transparent;color:var(--muted); font-size:var(--fs-sm);font-weight:600;cursor:pointer; transition:background var(--tr),color var(--tr); } .segmented button:hover{color:var(--ink)} .segmented button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--sh-rest)} .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--primary{background:var(--brand);border-color:var(--brand);color:var(--brand-fg)} .btn--primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--brand-fg)} .btn--icon{padding:6px;width:30px;height:30px;justify-content:center} /* ───────────────────────────────────────────────────────────── 레버 패널 ───────────────────────────────────────────────────────────── */ .lever{padding:var(--sp3) var(--sp4);border-bottom:1px solid var(--line)} .lever:last-child{border-bottom:0} .lever__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp2)} .lever__name{font-size:var(--fs-sm);font-weight:600;color:var(--body)} .lever__val{font-family:var(--font-num);font-size:var(--fs-sm);font-weight:700;color:var(--brand)} .lever__hint{font-size:var(--fs-xs);color:var(--faint);margin-top:1px} .lever input[type=range]{ -webkit-appearance:none;appearance:none; width:100%;height:18px;margin-top:6px;background:transparent;cursor:pointer; } .lever input[type=range]::-webkit-slider-runnable-track{ height:4px;border-radius:var(--r-pill);background:var(--surface-3); } .lever input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none; width:14px;height:14px;margin-top:-5px;border-radius:var(--r-pill); background:var(--brand);border:2px solid var(--surface); box-shadow:var(--sh-rest); } .lever input[type=range]::-moz-range-track{height:4px;border-radius:var(--r-pill);background:var(--surface-3)} .lever input[type=range]::-moz-range-thumb{ width:14px;height:14px;border-radius:var(--r-pill); background:var(--brand);border:2px solid var(--surface); } /* ───────────────────────────────────────────────────────────── 테이블 — 밀도가 이 디자인의 시험대 ───────────────────────────────────────────────────────────── */ .tablewrap{overflow-x:auto} .table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm)} .table th,.table td{ padding:6px var(--sp3); border-bottom:1px solid var(--line); white-space:nowrap; } .table thead th{ position:sticky;top:0;z-index:2; background:var(--surface-2); color:var(--muted);font-weight:600;font-size:var(--fs-xs); text-align:right; border-bottom:1px solid var(--line-2); } .table thead th:first-child{text-align:left} .table td{text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--body)} .table td:first-child{ text-align:left;font-family:var(--font);color:var(--ink);font-weight:500; position:sticky;left:0;background:var(--surface);z-index:1; } .table tbody tr:hover td{background:var(--surface-2)} .table tbody tr:hover td:first-child{background:var(--surface-2)} .table tr.is-total td{ font-weight:700;color:var(--ink); background:var(--surface-2);border-top:1px solid var(--line-2); } .table tr.is-total td:first-child{background:var(--surface-2)} .table td.is-indent:first-child{padding-left:var(--sp5);color:var(--muted);font-weight:400} /* ───────────────────────────────────────────────────────────── 경고 스트립 ───────────────────────────────────────────────────────────── */ .alerts{display:flex;flex-direction:column;gap:var(--sp2)} .alert{ display:flex;align-items:flex-start;gap:var(--sp3); padding:var(--sp3);border-radius:var(--r-md); border:1px solid var(--line);background:var(--surface); font-size:var(--fs-sm); } .alert__bar{width:3px;align-self:stretch;border-radius:var(--r-pill);flex:0 0 3px} .alert--warn .alert__bar{background:var(--warning)} .alert--danger .alert__bar{background:var(--danger)} .alert--info .alert__bar{background:var(--info)} .alert__t{font-weight:600;color:var(--ink)} .alert__d{color:var(--muted);font-size:var(--fs-xs);margin-top:1px} /* ───────────────────────────────────────────────────────────── 차트 ───────────────────────────────────────────────────────────── */ .chart{display:block;width:100%;height:auto;overflow:visible} .chart .grid-line{stroke:var(--line);stroke-width:1} .chart .axis-text{fill:var(--faint);font-size:11px;font-family:var(--font);font-variant-numeric:tabular-nums} .chart .series{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .chart .threshold{stroke:var(--c-amber);stroke-width:1.5;stroke-dasharray:4 4} .chart .dot{stroke:var(--surface);stroke-width:2} .legend{display:flex;gap:var(--sp4);flex-wrap:wrap} .legend__i{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--muted);font-weight:600} .legend__sw{width:14px;height:3px;border-radius:var(--r-pill)} /* ───────────────────────────────────────────────────────────── 기타 ───────────────────────────────────────────────────────────── */ .stack{display:flex;flex-direction:column;gap:var(--sp4)} .row{display:flex;align-items:center;gap:var(--sp3)} .notice{ padding:var(--sp3) var(--sp4);border-radius:var(--r-md); background:var(--warning-soft);color:var(--warning); font-size:var(--fs-xs);font-weight:600; }