/* ═══════════════════════════════════════════════════════════════════ 디자인 토큰 — 테마 가능한 단일 계약 (Themeable token contract) ───────────────────────────────────────────────────────────────── ★ 이 파일 어디에도 색 리터럴(#hex)을 직접 쓰지 않는다. 전부 아래 토큰 참조. 그래서 `themes.css`가 이 토큰만 덮어쓰면 소스 수정 0으로 전 화면 톤이 바뀐다. 토큰 계층 TIER 1 브랜드 — 모든 테마가 반드시 정의 (프라이머리 계열 8종) TIER 2 표면·텍스트 — 다크 계열 테마만 덮어씀 (배경/카드/테두리/글자 4단계) TIER 3 상태색 — 성공·주의·위험·정보. 다크는 tint만 조정 TIER 4 고정값 — 라운드·간격·elevation·고객사 CI. 테마와 무관 기본값은 **blue(JAVISEO)** — DESIGN_JAVISEO.md §2-A/2-B 원본 값. 테마 미지정(data-theme 없음) 상태에서도 이 값으로 정상 동작한다. ═══════════════════════════════════════════════════════════════════ */ :root { /* ── TIER 1 · 브랜드 ─────────────────────────────────────────────── */ --nu-primary: #3577F0; /* 활성 메뉴·주요 버튼·강조 */ --nu-primary-dark: #2A63D6; /* hover/pressed */ --nu-primary-light: #6AA0FF; /* 보조 강조 */ --nu-primary-lightest:#A9C6F7; /* 포커스 테두리·카드 hover 테두리 */ --nu-primary-darkest: #1E4FA8; /* 프라이머리 계열 최심도 */ /* ↓ darkest 는 '진한 배경'과 '진한 글자' 두 역할로 쓰이는데, 다크 톤에서는 이 둘이 정반대 방향(배경은 더 어둡게 / 글자는 더 밝게)이라 반드시 갈라 둬야 한다. */ --nu-primary-deep: #1E4FA8; /* 채움 — 배너·헤더 그라디언트의 진한 쪽 */ --nu-brand-text: #1E4FA8; /* 글자 — 연한 브랜드 배경(tint) 위의 진한 글자 */ --nu-primary-tint: #E9F1FE; /* 선택 행·배지 배경 */ --nu-primary-tint-2: #DCE9FD; /* tint보다 한 단계 진한 배경 */ --nu-primary-selection:#C7DBFB; /* ::selection */ --nu-gradient: linear-gradient(135deg, var(--nu-primary), var(--nu-primary-deep)); /* ── TIER 2 · 표면 / 텍스트 ──────────────────────────────────────── */ --nu-page: #F4F5F7; /* 페이지 배경 */ --nu-card: #FFFFFF; /* 카드·사이드바·헤더 표면 */ /* 카드 안에 또 카드가 들어가는 3단 구조(페이지 > 큰 박스 > 개별 박스·그래프 배경)의 3단계. 라이트 톤은 카드가 이미 흰색이라 더 밝힐 수 없다 → 기본값은 카드와 같게 두고(시각 변화 0), 다크 계열 톤만 한 단계 밝은 값으로 덮어써서 층을 만든다. */ --nu-card-2: var(--nu-card); --nu-hover: #EEF1F6; /* 행·버튼 hover */ --nu-row-alt: #FAFBFC; /* 표 홀짝 행 */ --nu-surface-2: #EEF0F4; /* 트랙·비활성 칩 배경 */ --nu-surface-3: #E4E7ED; /* 게이지 트랙·구분 배경 */ --nu-surface-4: #D5DAE3; /* 스크롤바 thumb 등 */ --nu-border: #E4E7ED; --nu-border-l: #EEF0F4; /* 가이드선 등 약한 선 */ --nu-border-strong:#C3CCD8; --nu-txt1: #111827; /* 제목·강조 */ --nu-txt2: #374151; /* 본문 */ --nu-txt3: #6B7280; /* 보조 */ --nu-txt4: #9CA3AF; /* 캡션·비활성 */ --nu-txt-disabled: #B8B8B8; --nu-on-accent: #FFFFFF; /* 컬러 채움 위 글자 — 어떤 테마든 흰색 유지 */ --nu-ink: #000000; /* 그림자·최대 대비 */ /* ── TIER 3 · 상태색 ───────────────────────────────────────────── 상태 전용. 카테고리(차트 시리즈) 색으로 재사용 금지. 글자로 쓸 때는 반드시 *-text (대비 4.5:1 확보) */ --nu-success: #059669; --nu-success-light: #D1FAE5; --nu-success-text: #065F46; --nu-success-light-2: #DCFCE7; --nu-success-soft: #22C55E; --nu-success-border: #B8D8B8; --nu-warning: #D97706; --nu-warning-light: #FEF3C7; --nu-warning-text: #92400E; --nu-warning-light-2: #FFF3D6; --nu-warning-light-3: #FBF0DC; --nu-warning-border: #F0C675; --nu-warning-border-2: #EBD9AE; --nu-warning-soft: #F5B301; --nu-warning-text-2: #A36200; --nu-alert: #DC2626; --nu-alert-light: #FEE2E2; --nu-alert-text: #991B1B; --nu-alert-light-2: #FDF1F1; --nu-alert-border: #F0B8B8; --nu-alert-text-2: #7A1A1A; --nu-info: #2563EB; --nu-info-light: #DBEAFE; --nu-info-text: #1E40AF; --nu-info-border: #BCD9EF; /* ── TIER 4 · 고정값 (테마와 무관) ──────────────────────────────── */ /* 고객사 (주)오토젠 CI — 회사 아이덴티티라 어떤 테마에서도 바뀌지 않는다 */ --brand-ci: #ED1C24; --brand-ci-dark: #7F0F1A; /* Elevation — 라이트는 flat 기조, 그림자는 절제해서 사용 */ --nu-elev-low: 0 2px 4px 0 rgba(0,0,0,0.08); --nu-elev-medium: 0 4px 8px 0 rgba(0,0,0,0.12); --nu-elev-high: 0 8px 16px 0 rgba(0,0,0,0.16); --nu-elev-highest: 0 16px 32px 0 rgba(0,0,0,0.20); /* Opacity (NuDS §Opacity) */ --nu-op-disabled: 0.32; --nu-op-medium: 0.48; --nu-op-scrim: 0.72; /* Border radius (NuDS §Shapes) — 컴포넌트 기본은 medium(8) ~ large(12) */ --nu-r-small: 4px; --nu-r-medium: 8px; --nu-r-large: 12px; --nu-r-xl: 16px; --nu-r-xxl: 24px; --nu-r-pill: 999px; /* Spacing (NuDS §Spacing) — 4/8px 배수. 임의 수치 금지 */ --nu-s-quarck: 4px; --nu-s-nano: 8px; --nu-s-xxxs: 12px; --nu-s-xxs: 16px; --nu-s-xs: 24px; --nu-s-sm: 32px; --nu-s-md: 40px; --nu-s-lg: 48px; --nu-s-xl: 56px; --nu-s-xxl: 64px; --nu-s-xxxl: 80px; /* ── 파생 별칭 (테마가 덮어쓸 필요 없음 — 위 토큰을 따라간다) ────── 레거시 이름 200여 곳이 그대로 살아 있어야 하므로 이름은 유지하고 값만 참조로 잇는다. */ --jv-page: var(--nu-page); --jv-card: var(--nu-card); --jv-hover: var(--nu-hover); --jv-border: var(--nu-border); --jv-border-l: var(--nu-border-l); --jv-txt1: var(--nu-txt1); --jv-txt2: var(--nu-txt2); --jv-txt3: var(--nu-txt3); --jv-txt4: var(--nu-txt4); --jv-primary: var(--nu-primary); --jv-primary-hover: var(--nu-primary-dark); --jv-primary-light: var(--nu-primary-tint); --jv-primary-mid: var(--nu-primary-lightest); --jv-success: var(--nu-success); --jv-success-light: var(--nu-success-light); --jv-success-text: var(--nu-success-text); --jv-warning: var(--nu-warning); --jv-warning-light: var(--nu-warning-light); --jv-warning-text: var(--nu-warning-text); --jv-danger: var(--nu-alert); --jv-danger-light: var(--nu-alert-light); --jv-danger-text: var(--nu-alert-text); --jv-info: var(--nu-info); --jv-info-light: var(--nu-info-light); --jv-info-text: var(--nu-info-text); /* violet 슬롯은 프라이머리 계열로 통일 — 톤이 바뀌면 같이 따라온다 */ --jv-violet: var(--nu-primary-light); --jv-violet-light: var(--nu-primary-tint); --jv-violet-text: var(--nu-brand-text); --jv-shadow: 0 1px 3px 0 rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03); /* 더 오래된 별칭 */ --bg: var(--nu-page); --panel: var(--nu-card); --border: var(--nu-border); --sidebar: var(--nu-card); --header: var(--nu-card); --text: var(--nu-txt1); --muted: var(--nu-txt3); --accent: var(--nu-alert); --accent2: var(--nu-warning); --accent3: var(--nu-success); --accent4: var(--nu-primary); --row-alt: var(--nu-row-alt); --row-hover: var(--nu-hover); --th-bg: var(--nu-page); --th-text: var(--nu-txt2); --shadow: var(--jv-shadow); --shadow-lg: var(--nu-elev-medium); /* 차트가 읽어가는 값 — app.js가 getComputedStyle로 가져간다(테마 따라 자동 전환). 카테고리 8슬롯 + '기타' 1. 상태색과 겹치지 않게 고른 색이며 순서 고정. */ --chart-axis-tick: var(--nu-txt3); --chart-axis-legend: var(--nu-txt2); --chart-grid: rgba(0,0,0,0.06); --chart-track: var(--nu-surface-2); --chart-1: #820AD1; --chart-2: #00897B; --chart-3: #C77700; --chart-4: #1668D6; --chart-5: #957E23; --chart-6: #D6336C; --chart-7: #6E9B00; --chart-8: #B5432B; --chart-other: #8C8C8C; /* 반투명 채움 — 선그래프 면(area)과 '계획(목표)' 유령 막대. ★ 알파를 토큰으로 뺀 이유: 같은 12%도 흰 배경에서는 보이지만 검은 배경에서는 사라진다. 다크 계열 톤이 알파만 키워서 대응할 수 있게 값 자체를 테마 소유로 둔다. (app.js 는 시리즈 색 + 이 알파를 합쳐 rgba 를 만든다 — 코드에 hex·알파를 두지 않는다) */ --chart-area-alpha: 0.12; /* 선그래프 아래 면 채움 */ --chart-ghost: #820AD1;/* '계획' 유령 막대 — 실적 막대 뒤의 참조값 */ --chart-ghost-alpha: 0.20; /* 유령 막대 채움 */ --chart-ghost-line-alpha: 0.45; /* 유령 막대 테두리 */ }