/* ═══════════════════════════════════════════════════════════════════════════ 색상 톤 프리셋 (Theme presets) ─────────────────────────────────────────────────────────────────────────── ★ 이 파일이 사이트 색상 톤의 **유일한 정의처**다. styles.css 에는 색 리터럴이 한 개도 없고 전부 토큰(--nu-*)을 참조하므로, 여기서 토큰만 덮어쓰면 소스 수정 0으로 전 화면이 통째로 바뀐다. 적용 방식 → :root[data-theme="purple"] 규칙이 :root 기본값을 이긴다. 값은 DB(site_settings.theme)에 저장되고, 서버가 HTML 서빙 시 주입한다. · 관리 화면: 사이트 관리 > 화면 테마 · API : GET /api/site-theme (공개) · PUT /api/admin/site-theme (관리자) ▣ 새 톤을 추가하려면 — 아래 블록 하나를 복사해 값만 바꾸고, backend/routes/admin.js 의 THEMES 목록에 키·이름을 한 줄 추가하면 끝이다. (styles.css·app.js 는 손대지 않는다) ▣ 각 톤이 반드시 정의해야 하는 것 = TIER 1 브랜드 8종 (아래 blue 블록 참고) 라이트 톤이면 그것만으로 충분하고, 다크 계열만 TIER 2·3을 추가로 덮어쓴다. ═══════════════════════════════════════════════════════════════════════════ */ /* ── blue — JAVISEO 원본 (DESIGN_JAVISEO.md §2-A/2-B) · 기본값 ──────────── 블루 프라이머리 + 쿨그레이 배경의 업무용 밀집형 대시보드. */ :root[data-theme="blue"] { --nu-primary: #3577F0; --nu-primary-dark: #2A63D6; --nu-primary-light: #6AA0FF; --nu-primary-lightest: #A9C6F7; --nu-primary-darkest: #1E4FA8; --nu-primary-deep: #1E4FA8; --nu-brand-text: #1E4FA8; --nu-primary-tint: #E9F1FE; --nu-primary-tint-2: #DCE9FD; --nu-primary-selection:#C7DBFB; } /* ── purple — Nubank NuDS (DESIGN.md) ───────────────────────────────────── "Purple is Nubank" — 보라가 유일한 강한 색, 중성색은 온도 없는 순수 그레이. */ :root[data-theme="purple"] { --nu-primary: #820AD1; --nu-primary-dark: #6B08AD; --nu-primary-light: #A633E6; --nu-primary-lightest: #D6A3F9; --nu-primary-darkest: #530789; --nu-primary-deep: #530789; --nu-brand-text: #530789; --nu-primary-tint: #F3E8FD; --nu-primary-tint-2: #EFDCFC; --nu-primary-selection:#E6CDFA; /* NuDS 중성색 규칙 — 웜/쿨 없는 순수 그레이("blank canvas") */ --nu-page: #F5F5F5; --nu-hover: #F5F5F5; --nu-row-alt: #FAFAFA; --nu-surface-2: #EFEFEF; --nu-surface-3: #E8E8E8; --nu-surface-4: #D1D1D1; --nu-border: #E8E8E8; --nu-border-l: #EFEFEF; --nu-border-strong: #B8B8B8; --nu-txt1: #111111; --nu-txt2: #2E2E2E; --nu-txt3: #6E6E6E; --nu-txt4: #A3A3A3; /* NuDS feedback 값 */ --nu-success: #1AAE5C; --nu-success-light: #E6F9EF; --nu-success-text: #0E7A3F; --nu-warning: #E5A30A; --nu-warning-light: #FFF8E6; --nu-warning-text: #8A6106; --nu-alert: #E5222D; --nu-alert-light: #FDE8E9; --nu-alert-text: #A3161E; --nu-info: #1E7FE6; --nu-info-light: #E8F2FD; --nu-info-text: #145FAD; } /* ── indigo — 차분한 남보라. 블루와 퍼플의 중간 ──────────────────────────── */ :root[data-theme="indigo"] { --nu-primary: #4F46E5; --nu-primary-dark: #3F37C9; --nu-primary-light: #7C74F0; --nu-primary-lightest: #B4B0F5; --nu-primary-darkest: #2E2A93; --nu-primary-deep: #2E2A93; --nu-brand-text: #2E2A93; --nu-primary-tint: #EEEDFD; --nu-primary-tint-2: #E0DEFB; --nu-primary-selection:#CDCAF8; } /* ── teal — 청록. 생산·설비 화면에서 눈이 덜 피로한 톤 ───────────────────── */ :root[data-theme="teal"] { --nu-primary: #0E7C86; --nu-primary-dark: #0A5F67; --nu-primary-light: #16A3AF; --nu-primary-lightest: #7CD4DE; --nu-primary-darkest: #08484E; --nu-primary-deep: #08484E; --nu-brand-text: #08484E; --nu-primary-tint: #E6F8FA; --nu-primary-tint-2: #CFF3F7; --nu-primary-selection:#A5E9F0; } /* ── red — 강한 경고 톤. ※ 위험 상태색(--nu-alert)과 색상이 겹치므로 "빨강 = 이상"으로 읽히던 화면(미달·지연·알람)의 구분이 약해진다. 그래서 이 톤에서는 상태 위험색을 한 단계 더 진하게 벌려 둔다. ───────────── */ :root[data-theme="red"] { --nu-primary: #C8202A; --nu-primary-dark: #A5161F; --nu-primary-light: #E04B54; --nu-primary-lightest: #F0A6AB; --nu-primary-darkest: #7A1015; --nu-primary-deep: #7A1015; --nu-brand-text: #7A1015; --nu-primary-tint: #FDEDEE; --nu-primary-tint-2: #FBDCDE; --nu-primary-selection:#F7C4C7; --nu-alert: #8E0F16; /* 브랜드 빨강보다 진하게 — 상태 구분 유지 */ --nu-alert-text: #6B0A10; } /* ── navy — 참조 디자인(사외 SCM 대시보드) 재현 톤 ──────────────────────── 컨셉: **어두운 네이비 사이드바 + 거의 흰 본문**. 색은 딱 두 곳에서만 강하다 — 좌측 내비게이션 면, 그리고 조회/저장 같은 주 액션 버튼. 나머지는 전부 중성 회색이고 빨강은 오직 "실적 미달·이상치" 숫자에만 남는다(상태색 그대로 사용). ▣ 이 톤만 특별한 점 2가지 — 다른 톤을 고치는 게 아니라 이 블록 안에서만 끝난다. ① 사이드바를 어둡게 만드는 방법 (styles.css 무수정) styles.css 의 사이드바 규칙은 `var(--jv-card)`·`var(--jv-txt2)` 같은 토큰만 참조한다. 커스텀 프로퍼티는 상속되므로 **.sidebar 요소 위에서 그 토큰들을 다시 선언**하면 사이드바 내부에서만 값이 뒤집힌다(아래 두 번째 블록). 본문 카드는 그대로 흰색이다. ※ 반드시 `--jv-*`(사이드바 규칙이 실제로 읽는 이름)를 덮어써야 한다. `--nu-card` 만 바꿔도 소용없다 — `--jv-card: var(--nu-card)` 는 :root 에서 이미 값이 확정된다. ② 라운드 축소 — TIER 4(테마 무관)를 이 톤에서만 예외적으로 덮어쓴다. 참조 화면은 각진 밀집형이라 pill 버튼·12px 카드가 붙으면 인상이 전혀 달라진다. 스케일 이름은 그대로 두고 값만 한 단계 줄이므로 "임의값 금지" 규칙은 유지된다. 각진 느낌이 싫으면 아래 라운드 6줄만 지우면 기본 스케일로 돌아온다. */ :root[data-theme="navy"] { /* TIER 1 — 딥 네이비. 주 액션 버튼·활성 표시·표 헤더가 이 계열로 묶인다 */ --nu-primary: #1F4788; --nu-primary-dark: #16386E; --nu-primary-light: #3D6EB5; --nu-primary-lightest: #A8BEDD; --nu-primary-darkest: #0F2A55; --nu-primary-deep: #12305E; /* 채움(배너 그라디언트) — 사이드바와 같은 계열 */ --nu-brand-text: #16386E; /* 연한 tint 위 글자 (표 헤더 등) */ --nu-primary-tint: #EAF0F9; --nu-primary-tint-2: #DDE6F4; --nu-primary-selection:#C8D8EE; /* TIER 2 — 쿨 그레이. 페이지는 거의 흰색, 카드와의 차이는 아주 얕게 둔다 */ --nu-page: #F1F3F7; --nu-hover: #EBF0F7; --nu-row-alt: #F9FAFC; --nu-surface-2: #EDF0F5; --nu-surface-3: #E1E6EE; --nu-surface-4: #C7CFDC; --nu-border: #DEE3EB; --nu-border-l: #EBEEF3; --nu-border-strong: #B4BECC; --nu-txt1: #15202F; --nu-txt2: #313E52; --nu-txt3: #667488; --nu-txt4: #94A0B1; /* 라운드 — 각진 업무 화면(위 ② 참고). pill 도 4px 로 눕혀 버튼이 사각형이 된다 */ --nu-r-small: 3px; --nu-r-medium: 5px; --nu-r-large: 6px; --nu-r-xl: 8px; --nu-r-xxl: 12px; --nu-r-pill: 4px; /* Elevation — 참조는 그림자 대신 얇은 선으로 면을 나눈다 → 그림자를 눌러 둔다 */ --nu-elev-low: 0 1px 2px 0 rgba(16,32,56,0.08); --nu-elev-medium: 0 2px 6px 0 rgba(16,32,56,0.10); --nu-elev-high: 0 6px 16px 0 rgba(16,32,56,0.14); --nu-elev-highest: 0 12px 28px 0 rgba(16,32,56,0.18); --jv-shadow: 0 1px 2px 0 rgba(16,32,56,0.05), 0 0 0 1px rgba(16,32,56,0.04); } /* 사이드바만 다크로 뒤집는다 — 값은 전부 #16253F 위에서 대비 4.5:1 이상으로 잡았다. (본문은 위 블록의 라이트 값 그대로. 여기 선언은 .sidebar 안쪽에만 상속된다) */ :root[data-theme="navy"] .sidebar { --jv-card: #16253F; /* 사이드바 면 */ --jv-border: #22355A; /* 우측 경계선 */ --jv-border-l: #253A60; /* 로고 아래 구분선 */ --jv-hover: #1F3355; --jv-txt1: #FFFFFF; /* 로고 글자·hover 메뉴 */ --jv-txt2: #C7D2E2; /* 메뉴 항목 기본 */ --jv-txt3: #8FA0B8; /* 그룹 헤더 라벨 */ --jv-txt4: #7E90AA; /* 접기 화살표·외부링크 아이콘 */ --jv-primary: #6FA0E8; /* 활성 항목 — 어두운 면에서는 연한 tint 가 안 보이므로 '가라앉은 파랑 + 흰 글자'로 */ --nu-primary-tint: #23406E; --nu-brand-text: #FFFFFF; --nu-primary: #6FA0E8; /* 활성 좌측 3px 바 · 스크롤바 hover */ --nu-surface-4: #33496F; /* 스크롤바 thumb */ } /* 고객사 CI(짙은 파랑+회색 PNG)는 네이비 면에서 묻힌다 → 다크 톤과 같은 흰 칩을 깐다. 여기 #FFFFFF 는 토큰이 아니라 리터럴이 맞다(CI 가독성 고정값). */ :root[data-theme="navy"] .brand-ci { background: #FFFFFF; padding: 4px 6px; border-radius: var(--nu-r-medium); } /* ── dark — 다크 모드 (JAVISEO §2-C 중성 검정 계열 + 밝힌 블루) ──────────── 두 디자인 지침 모두 "다크에서는 그림자로 높이를 만들지 말고 표면 밝기로 표현"을 요구한다 → elevation 토큰을 죽이고 표면 단계(surface-2/3/4)로 깊이를 준다. */ :root[data-theme="dark"] { /* TIER 1 — 어두운 배경에서 대비가 나오도록 프라이머리를 밝힌다 */ --nu-primary: #5B93F5; --nu-primary-dark: #3577F0; --nu-primary-light: #8AB4F8; --nu-primary-lightest: #3E5C8F; /* 다크에선 "연한 색"이 아니라 "가라앉은 색" */ --nu-primary-darkest: #A9C6F7; /* 표 헤더 글자 — 어두운 면 위라 밝아야 한다 */ --nu-primary-deep: #16305E; --nu-brand-text: #A9C6F7; --nu-primary-tint: #1B2740; /* 선택 행·배지 배경 */ --nu-primary-tint-2: #22314F; --nu-primary-selection:#2C4470; /* KPI 총계 배너 — 라이트 톤은 "밝은 브랜드 슬래브"가 맞지만, 어두운 화면에서 같은 채도로 칠하면 그 큰 면만 형광등처럼 떠서 화면이 두 동강 난다(다크인데 블루 모드처럼 보이는 원인). → 채도는 유지하되 명도를 눌러 **가라앉은 브랜드 네이비 패널**로 만든다. 흰 글자 대비 10.5~14.4:1, 페이지(#161616) 대비 1.7 로 배너 경계는 그대로 읽힌다. */ --nu-gradient: linear-gradient(135deg, #21406B, #182A45); /* TIER 2 — 표면·텍스트 반전. blak 과 같은 4단 깊이(사이드바는 다크에선 카드와 같은 면). #161616 페이지 < #232323 큰 박스(.panel) < #2C2C2C 개별 박스(그래프 배경·카드 속 카드) 한 칸 간격 대비 1.13~1.15 — 층은 보이되 카드가 떠 보이지 않는 폭. */ --nu-page: #161616; --nu-card: #232323; /* 큰 박스(.panel·위젯 패널) */ --nu-card-2: #2C2C2C; /* 그 안의 개별 박스 — 그래프 배경·호기 카드 */ --nu-hover: #363636; /* 개별 박스보다 한 단계 위 — 어느 층에서든 hover 가 보인다 */ --nu-row-alt: #262626; --nu-surface-2: #303030; --nu-surface-3: #3C3C3C; --nu-surface-4: #4E4E4E; --nu-border: #3A3A3A; --nu-border-l: #2E2E2E; --nu-border-strong: #565656; /* txt1·txt2·txt3 는 밝아진 개별 박스(#2C2C2C) 위에서도 5.5:1 이상이라 그대로 두고, 캡션(txt4)만 한 단계 올린다 — 기존 값은 2.95:1 로 캡션 하한(3.3)에도 못 미쳤다 */ --nu-txt1: #F5F5F5; --nu-txt2: #D4D4D4; --nu-txt3: #A3A3A3; --nu-txt4: #828282; --nu-txt-disabled: #656565; --nu-on-accent: #FFFFFF; /* TIER 3 — 상태색: 채움은 밝히고, tint는 어둡게, 글자는 밝게 */ --nu-success: #22C55E; --nu-success-light: #10281A; --nu-success-text: #6EE7A7; --nu-success-light-2: #143322; --nu-success-soft: #4ADE80; --nu-success-border: #1F5137; --nu-warning: #F5B301; --nu-warning-light: #2A2008; --nu-warning-text: #F5C842; --nu-warning-light-2: #33280A; --nu-warning-light-3: #3B2F0C; --nu-warning-border: #5C4A12; --nu-warning-border-2: #4A3B0F; --nu-warning-soft: #FBBF24; --nu-warning-text-2: #E0A800; --nu-alert: #F87171; --nu-alert-light: #2A1212; --nu-alert-text: #FCA5A5; --nu-alert-light-2: #331616; --nu-alert-border: #5C2626; --nu-alert-text-2: #FECACA; --nu-info: #60A5FA; --nu-info-light: #101E33; --nu-info-text: #93C5FD; --nu-info-border: #24467A; /* 다크에서는 그림자 대신 표면 밝기로 높이를 표현한다 */ --nu-elev-low: none; --nu-elev-medium: 0 4px 12px 0 rgba(0,0,0,0.45); /* 떠 있는 요소만 최소한으로 */ --nu-elev-high: 0 8px 20px 0 rgba(0,0,0,0.55); --nu-elev-highest: 0 16px 32px 0 rgba(0,0,0,0.65); --jv-shadow: 0 0 0 1px rgba(255,255,255,0.06); /* 차트 — 어두운 면 위에서 읽히도록 격자·시리즈를 밝힌다 */ --chart-grid: rgba(255,255,255,0.10); --chart-1: #C084FC; --chart-2: #45E0D2; --chart-3: #FFB03A; --chart-4: #7DB6FB; --chart-5: #E8CB2E; --chart-6: #FA8FC4; --chart-7: #B6E85A; --chart-8: #FF9C78; --chart-other: #9A9A9A; /* 빈 게이지·도넛 트랙 — surface-2(#262626)는 카드(#1E1E1E)와 붙어 링이 안 보인다 */ --chart-track: #3E3E3E; /* 반투명 채움 — 라이트 톤의 알파는 어두운 면에서 사라진다(자세한 설명은 blak 블록) */ --chart-area-alpha: 0.26; --chart-ghost: #C084FC; --chart-ghost-alpha: 0.40; --chart-ghost-line-alpha: 0.85; } /* 고객사 CI 마크(PNG)는 어두운 색이라 다크 배경에서 묻힌다 → 흰 칩을 깔아 준다. 여기서 #FFFFFF 는 토큰이 아니라 리터럴이 맞다 — CI 가독성을 위한 고정값이고, 표면 토큰(--nu-card)을 쓰면 다크에서 같이 어두워져 로고가 사라진다. */ :root[data-theme="dark"] .brand-ci { background: #FFFFFF; padding: 4px 6px; border-radius: var(--nu-r-medium); } /* 다크에서 브라우저 기본 위젯(스크롤바·폼 컨트롤)도 어둡게 */ :root[data-theme="dark"] { color-scheme: dark; } /* ── blak — 통합상황실(관제) 톤 ──────────────────────────────────────────── 컨셉: **거의 검은 블루-차콜 관제 화면**. 24시간 켜 두는 상황판이 기준이라 면(surface)은 최대한 가라앉히고, 색은 "지금 봐야 할 것"에만 남긴다. dark 톤과 무엇이 다른가 — 둘 다 어둡지만 목적이 다르다. · dark : 중성 검정(#121212) 야간 모드. 사이드바가 페이지보다 **밝다**. · blak : 푸른 기 도는 차콜. **사이드바·헤더가 가장 어둡고**(#14161A) 본문 → 카드 순으로 밝아지는 3단 깊이. 차트·상태색은 더 채도를 올려 어두운 면 위에서 멀리서도 읽히게 한다(대형 모니터 전제). 깊이 4단 (어두운 → 밝은) #14161A 사이드바·헤더 < #1E2229 페이지 < #272C34 큰 박스(.panel) < #303640 개별 박스 → 그림자로 높이를 만들지 않고 **면 밝기 차이**로만 층을 만든다(다크 공통 원칙). 한 칸 간격은 대비 1.14~1.15 — 층은 보이되 카드가 떠 보이지는 않는 폭이다. 개별 박스(그래프 배경·호기 카드)는 --nu-card-2 로, styles.css 가 `.panel 안의 카드`에만 적용한다. 라이트 톤은 --nu-card-2 = --nu-card 라 아무 변화가 없다. ▣ 사이드바·헤더를 페이지보다 더 어둡게 하는 방법 (styles.css 무수정) styles.css 의 .sidebar/.topbar 는 `var(--jv-card)` 를 읽는다. 커스텀 프로퍼티는 상속되므로 그 두 요소 위에서 --jv-* 를 다시 선언하면 그 안에서만 값이 뒤집힌다. (navy 톤과 같은 수법 — :root 의 --jv-card 는 이미 확정이라 --nu-card 만 바꿔선 안 된다) ▣ 대비 실측 — **가장 밝은 면(개별 박스 #303640) 기준**으로 잡았다. 글자는 어느 층에 놓이든 이 값 이상이 나온다(면이 어두울수록 대비는 올라간다). txt1 11.0:1 · txt2 7.6:1 · txt3 5.4:1 · txt4 3.3:1(캡션 한계 — 본문 금지) primary 4.6:1 · brand-text 7.4:1 · 상태 *-text 5.9~7.6:1 사이드바(#14161A) 위: 메뉴 글자 11.3:1 · 활성 메뉴 흰 글자(#2C6BC4 위) 5.2:1 ※ 면을 더 밝히면 이 값들이 같이 내려간다. 표면과 글자는 반드시 함께 조정할 것. ▣ 알려진 한계 — 채운 브랜드 버튼의 흰 글자는 대비 약 2.7:1(#FFFFFF on #5FA2F5)로 본문 기준 4.5:1 에 못 미친다. 프라이머리를 낮추면 이번엔 링크·차트 마크가 밝아진 면 위에서 죽으므로(밝은 면일수록 밝은 파랑이 필요하다) 다크 톤이 공통으로 안고 가는 맞교환이다 — 이 레포의 다른 톤도 전부 같은 상태다. 그래서 버튼 글자는 13px/700 이상으로 두고, 반드시 읽어야 하는 정보는 버튼 라벨에 싣지 않는다. */ :root[data-theme="blak"] { /* TIER 1 — 관제용 시안블루. 밝아진 개별 박스(#303640) 위에서도 4.5:1 이 나오게 잡았다 */ --nu-primary: #5FA2F5; --nu-primary-dark: #3D82DD; /* pressed */ --nu-primary-light: #8ABDF8; --nu-primary-lightest: #33547F; /* 다크에선 "연한 색"이 아니라 "가라앉은 색" */ --nu-primary-darkest: #A8CDFB; /* 표 헤더 글자 — 어두운 면 위라 밝아야 한다 */ --nu-primary-deep: #12294A; /* 채움(배너 그라디언트)의 진한 쪽 */ --nu-brand-text: #A8CDFB; /* tint 면 위 글자 */ --nu-primary-tint: #21375A; /* 선택 행 — 참조 화면의 파란 기 도는 선택 행 */ --nu-primary-tint-2: #2A4470; --nu-primary-selection:#31557F; /* KPI 총계 배너 — 기본 그라디언트(프라이머리→딥)를 그대로 두면 밝은 파란 슬래브가 되어 관제 화면에서 그 면만 떠 버린다. 명도를 눌러 가라앉은 브랜드 네이비 패널로. 흰 글자 대비 9.6~13.7:1, 페이지(#1E2229) 대비 1.66 으로 배너 경계는 뚜렷하다. */ --nu-gradient: linear-gradient(135deg, #24466F, #1B2E4A); /* TIER 2 — 푸른 기 도는 차콜. 위 "깊이 4단" 참고 */ --nu-page: #1E2229; --nu-card: #272C34; /* 큰 박스(.panel·위젯 패널) */ --nu-card-2: #303640; /* 그 안의 개별 박스 — 그래프 배경·호기 카드 */ --nu-hover: #3A414C; /* 개별 박스보다 한 단계 위 — 어느 층에서든 hover 가 보인다 */ --nu-row-alt: #2C313A; --nu-surface-2: #343B45; --nu-surface-3: #3E4551; --nu-surface-4: #4E5666; --nu-border: #3A414D; --nu-border-l: #303742; --nu-border-strong: #545D6C; --nu-txt1: #F1F4F8; --nu-txt2: #C6CDD8; --nu-txt3: #A3ADBB; --nu-txt4: #7C8797; --nu-txt-disabled: #626B78; --nu-on-accent: #FFFFFF; /* TIER 3 — 상태색: 채움은 채도를 올리고, tint 는 어둡게, 글자는 밝게. 참조 화면의 '주의' 앰버·'이상' 레드가 이 값이다 */ --nu-success: #35C06A; --nu-success-light: #10281B; --nu-success-text: #6FE3A0; --nu-success-light-2: #143223; --nu-success-soft: #4ADE80; --nu-success-border: #1E5138; --nu-warning: #E8A33D; --nu-warning-light: #2C2210; --nu-warning-text: #F3C169; --nu-warning-light-2: #352911; --nu-warning-light-3: #3D2F14; --nu-warning-border: #5C4718; --nu-warning-border-2: #4A3915; --nu-warning-soft: #F5B301; --nu-warning-text-2: #E0A800; --nu-alert: #F26060; --nu-alert-light: #2C1515; --nu-alert-text: #FB9A9A; --nu-alert-light-2: #351919; --nu-alert-border: #5E2828; --nu-alert-text-2: #FEC9C9; --nu-info: #5AA9FF; --nu-info-light: #12243C; --nu-info-text: #9CC9FE; --nu-info-border: #2A4C7E; /* 라운드 — 관제 화면은 밀집형이라 한 단계 눕힌다. 다만 토글·상태 배지는 참조 화면에서도 알약 모양이므로 pill 은 그대로 둔다(navy 와 다른 점) */ --nu-r-small: 4px; --nu-r-medium: 6px; --nu-r-large: 8px; --nu-r-xl: 10px; --nu-r-xxl: 14px; /* 그림자 대신 면 밝기로 높이를 표현한다 → 떠 있는 것에만 최소한으로 */ --nu-elev-low: none; --nu-elev-medium: 0 4px 12px 0 rgba(0,0,0,0.50); --nu-elev-high: 0 8px 20px 0 rgba(0,0,0,0.60); --nu-elev-highest: 0 16px 32px 0 rgba(0,0,0,0.70); --jv-shadow: 0 0 0 1px rgba(255,255,255,0.05); /* 차트 — 대형 모니터에서 멀리서 읽히도록 채도·명도를 올린 8슬롯. 슬롯 순서는 고정(차종·호기가 슬롯에 묶여 있다). 상태색과 겹치지 않게 골랐다. 전 슬롯이 개별 박스(#303640) 대비 4.6:1 이상 — 마크 하나만 떠 있어도 읽힌다 */ --chart-grid: rgba(255,255,255,0.09); --chart-1: #C084FF; --chart-2: #45E0D2; --chart-3: #FFA040; --chart-4: #6BA8FA; --chart-5: #EDD84A; --chart-6: #FF7FB5; --chart-7: #B4EC5F; --chart-8: #FF8365; --chart-other: #98A2B0; /* 빈 게이지·도넛의 트랙 — 데이터가 0이면 링 전체가 이 색이라 카드에 묻히면 "차트가 없는" 것처럼 보인다. 표면 단계보다 확실히 위(대비 1.43)로 띄운다 */ --chart-track: #454D5C; /* 반투명 채움 — 어두운 면에서는 라이트 톤의 12~20% 가 통째로 사라진다 → 두 배 가까이 키운다. '계획' 유령 막대는 테두리를 거의 불투명하게 줘서 채움이 옅어도 윤곽이 남게 한다 */ --chart-area-alpha: 0.26; --chart-ghost: #C084FF; --chart-ghost-alpha: 0.40; --chart-ghost-line-alpha: 0.85; } /* 사이드바·헤더만 한 단계 더 어둡게 — 본문 카드(#23272E)는 위 블록 값 그대로 */ :root[data-theme="blak"] .sidebar, :root[data-theme="blak"] .topbar { --jv-card: #14161A; /* 사이드바·헤더 면 — 네 면 중 가장 어둡다 */ /* 경계선 겸 **하위 메뉴 세로 가이드선** 색. 가이드선이 읽혀야 해서 단순 경계선보다 밝다 */ --jv-border: #2E3540; --jv-border-l: #2E3540; /* 로고 아래 구분선 */ --jv-hover: #20242B; } /* 활성 메뉴 — 어두운 면에서 tint(#1A2E4B)는 거의 안 보인다 → 채운 파랑 + 흰 글자 */ :root[data-theme="blak"] .sidebar { --nu-primary-tint: #2C6BC4; --nu-brand-text: #FFFFFF; --nu-surface-4: #3A4250; /* 스크롤바 thumb */ } /* 고객사 CI(짙은 색 PNG)는 검은 면에서 묻힌다 → 흰 칩을 깐다(가독성 고정값) */ :root[data-theme="blak"] .brand-ci { background: #FFFFFF; padding: 4px 6px; border-radius: var(--nu-r-medium); } /* 브라우저 기본 위젯(스크롤바·폼 컨트롤)도 어둡게 */ :root[data-theme="blak"] { color-scheme: dark; }