/* ═══════════════════════════════════════════════════════════════════════════ 색상 톤 프리셋 (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-border 로 통일) */ --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; } /* ═══════════════════════════════════════════════════════════════════════════ hc — 고대비 (윈도우 고대비 '검정' 계열) ─────────────────────────────────────────────────────────────────────────── Windows 접근성 > 대비 테마의 색 역할을 그대로 옮긴 톤. 저시력·강한 조명 아래 현장 모니터에서 "글자가 안 보인다"를 없애는 것이 목적이다. 예쁘게 만드는 톤이 아니다. ▣ 출처 — Microsoft 문서는 hex 를 주지 않고 **8개 색 역할**로 정의한다 (learn.microsoft.com/windows/apps/design/accessibility/high-contrast-themes). WindowColor(면) · WindowText(글자) · Hotlight(링크) · GrayText(비활성) · Highlight + HighlightText(선택·상호작용) · ButtonFace + ButtonText(조작 가능한 UI) 역할별로 짝을 지어 쓰고, 짝이 아닌 것끼리 섞지 말라는 것이 문서의 핵심 지침이다. ※ 윈도우의 실제 값은 사용자가 편집할 수 있으므로(Desert/Dusk/Night sky/Aquatic + 커스텀) 어느 한 벌을 그대로 베낄 수 없다. 여기 값은 '고대비 검정'을 기준으로 한 고정 근사다. ▣ 이 톤의 규칙 — 다른 톤과 근본적으로 다른 두 가지 ① 면은 **한 색(검정)뿐**이다. 층(페이지 > 큰 박스 > 개별 박스)을 면 밝기로 만들 수 없으니 **흰 테두리**로 나눈다(--nu-border/-l/-strong 전부 흰색, 문서의 Borders 지침). ② 짝이 정반대로 뒤집힌다 — **검은 면 위에는 흰 글자, 밝은 채움 위에는 검은 글자.** 그래서 --nu-on-accent 를 검정으로 둔다. tokens.css 는 이 토큰을 "어떤 테마든 흰색"으로 적어 두었지만, 이 톤은 채움이 전부 밝아서 흰 글자를 얹으면 전부 읽을 수 없게 된다. ★ 이 톤에서 새 색을 넣을 때는 "이 색이 채움인가 면인가"를 먼저 정할 것. 채움이면 반드시 밝게(검은 글자가 얹힌다), 면이면 반드시 어둡게(흰 글자가 얹힌다). ▣ 노랑/앰버가 강조·주의·링크에 겹치는 이유 — 검정 위에서 쓸 수 있는 '밝은 색'의 수가 한정돼 있는데 필요한 색은 강조 1 + 상태 4 + 차트 8 = 13종이다. 고대비에서는 이 요구가 구조적으로 충족되지 않는다. 그래서 **차트 8슬롯은 노랑 계열을 아예 비우고**(강조·주의에 양보) 서로의 색상(hue) 거리를 최대로 벌렸다. 시리즈끼리 구분되는 것이 먼저다. ▣ 대비 실측 (WCAG) — 글자 짝 25종 전부 4.5:1 이상, 최저 5.63:1(::selection) 흰 글자/검정 21.0 · 비활성 8.6 · hover 면 위 12.6 · 홀짝행·개별박스 위 17.4 채운 버튼 검은 글자 19.6 · 선택 행 10.5 · 사용자 칩 10.5 · 사이드바 활성 19.6 상태 채움 위 검은 글자 7.6~13.9 · 상태 글자/연한면 8.5~11.7 차트 8슬롯: 검정 위 9.3~17.0 · 개별 박스 위 7.7~14.1 (3:1 기준 크게 상회) ※ 값을 바꾸면 반드시 다시 재고 이 숫자를 고칠 것. 짐작으로 적지 말 것. ▣ 알려진 한계 — 비활성 버튼(.simr-confirm-btn:disabled)의 검은 글자가 primary-lightest(#6B6B00) 위에서 3.73:1 로 4.5 에 못 미친다. 여기에 --nu-op-disabled 가 겹쳐 더 내려간다. primary-lightest 는 ::selection 배경(흰 글자 5.63:1)도 겸하는데 둘은 서로 반대 방향을 요구한다 — 읽어야 하는 쪽(선택한 글자)을 살리고 비활성 쪽을 포기했다. 비활성 컨트롤은 원래 읽을 필요가 없는 상태이므로 이 맞교환을 택한다. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="hc"] { /* TIER 1 — 강조는 노랑(Hotlight 계열). 채움이므로 위에 검은 글자가 얹힌다 */ --nu-primary: #FFFF00; /* 활성 바·채운 버튼·포커스 링 */ --nu-primary-dark: #E6E600; /* pressed */ --nu-primary-light: #FFFF66; /* 연한 면 위 보조 강조 글자 */ /* ★ lightest 는 '연한 색'이 아니라 **어두운 면**이다 — ::selection 배경으로 쓰이고 그 위에 흰 글자가 얹힌다(styles.css 의 ::selection 규칙). 밝게 두면 글자가 사라진다. */ --nu-primary-lightest: #6B6B00; --nu-primary-darkest: #FFFF66; /* 표 헤더 글자 — 어두운 tint 위라 밝아야 한다 */ --nu-primary-deep: #E6E600; /* 채움(버튼 hover·배너)의 진한 쪽 — 여전히 밝다 */ --nu-brand-text: #FFFF00; /* tint 면 위 글자 + 사이드바 현재그룹 헤더(검정 위) */ --nu-primary-tint: #3D3D00; /* 선택 행·칩 배경 — 면이므로 어둡게 */ --nu-primary-tint-2: #4F4F00; --nu-primary-selection:#6B6B00; /* KRI 총계 배너 — 채움이라 밝게 간다. 검은 글자 19.6:1 */ --nu-gradient: linear-gradient(135deg, #FFFF00, #E6E600); /* TIER 2 — 면은 검정 하나. 층은 흰 테두리가 만든다 */ --nu-page: #000000; --nu-card: #000000; /* 개별 박스만 아주 살짝 든다(1.21). 순수 검정끼리 겹치면 테두리 없는 카드가 통째로 사라지는데, 테두리는 아래 구조 규칙이 붙는 클래스에만 붙기 때문이다 — 이중 안전장치. */ --nu-card-2: #1A1A1A; --nu-hover: #333333; /* hover 는 면이다 → 어둡게(흰 글자 12.6:1). 검정 대비 1.66 */ --nu-row-alt: #1A1A1A; --nu-surface-2: #333333; --nu-surface-3: #4D4D4D; --nu-surface-4: #FFFFFF; /* 스크롤바 thumb — 검은 트랙 위에서 보여야 한다 */ --nu-border: #FFFFFF; --nu-border-l: #FFFFFF; /* 이 톤에선 '약한 선'을 두지 않는다 — 선은 다 보여야 한다 */ --nu-border-strong: #FFFFFF; /* 글자는 4단계 전부 흰색이다. 문서가 "GrayText 를 본문·보조 글자에 쓰지 말고 비활성에만 쓰라"고 명시한다 → 보조/캡션을 회색으로 낮추지 않는다. (크기·굵기로 위계를 만들고 색으로는 만들지 않는다) */ --nu-txt1: #FFFFFF; --nu-txt2: #FFFFFF; --nu-txt3: #FFFFFF; --nu-txt4: #FFFFFF; /* GrayText 자리. 윈도우 고대비 검정의 원값은 밝은 초록(#3FF23F)인데 그걸 쓰면 이 화면에서 '정상' 상태색과 섞인다(CLAUDE.md: 상태색은 상태 전용) → 중성 회색으로 대체 */ --nu-txt-disabled: #A6A6A6; --nu-on-accent: #000000; /* ★ 위 ② 참고 — 이 톤만 검정이다 */ /* TIER 3 — 상태색: 채움은 밝게(검은 글자가 얹힌다), 연한 면은 어둡게(상태 글자가 얹힌다). 테두리는 전부 흰색 — 상태는 채움·글자로 구분하고 선은 '보이는 것'만 담당한다 */ --nu-success: #4AF04A; --nu-success-light: #0A2E0A; --nu-success-text: #7CFF7C; --nu-success-light-2: #0F3A0F; --nu-success-soft: #4AF04A; --nu-success-border: #FFFFFF; --nu-warning: #FFB000; --nu-warning-light: #3A2800; --nu-warning-text: #FFCC66; --nu-warning-light-2: #3D2B00; --nu-warning-light-3: #422F00; --nu-warning-border: #FFFFFF; --nu-warning-border-2: #FFFFFF; --nu-warning-soft: #FFB000; --nu-warning-text-2: #FFC04D; --nu-alert: #FF6B6B; --nu-alert-light: #3A0F0F; --nu-alert-text: #FF9E9E; --nu-alert-light-2: #421212; --nu-alert-border: #FFFFFF; --nu-alert-text-2: #FFBDBD; --nu-info: #66B3FF; --nu-info-light: #0A2540; --nu-info-text: #99CCFF; --nu-info-border: #FFFFFF; /* 라운드 — 윈도우 고대비는 각지다. 테두리로 경계를 읽히게 하는 톤이라 곡률을 죽인다 */ --nu-r-small: 0; --nu-r-medium: 2px; --nu-r-large: 4px; --nu-r-xl: 4px; --nu-r-xxl: 6px; /* 그림자는 검은 면에서 아무것도 전달하지 못한다 → 흰 테두리로 대체. 뜬 표면(팝업·드로어)은 2px — 문서의 "transitory surfaces 는 2px 테두리" 권고 */ --nu-elev-low: none; --nu-elev-medium: 0 0 0 2px #FFFFFF; --nu-elev-high: 0 0 0 2px #FFFFFF; --nu-elev-highest: 0 0 0 2px #FFFFFF; --jv-shadow: 0 0 0 1px #FFFFFF; /* 투명도로 흐리는 것은 고대비의 목적과 정면으로 어긋난다 → 비활성도 형태는 남긴다 */ --nu-op-disabled: 0.6; --nu-op-medium: 0.75; --nu-op-scrim: 0.9; /* 팝업 뒤 배경은 거의 가린다 — 뒤 내용이 겹쳐 읽히지 않게 */ /* 차트 — 위 ▣ 참고. 노랑 계열을 비우고 색상 거리를 최대로 벌린 8슬롯. 슬롯 순서는 고정(차종·호기가 슬롯에 묶여 있다 — 순환·재배치 금지) */ --chart-grid: rgba(255,255,255,0.35); --chart-1: #33E1FF; --chart-2: #A6FF4D; --chart-3: #FF99E6; --chart-4: #FFB870; --chart-5: #99B3FF; --chart-6: #D9A6FF; --chart-7: #FF8A8A; --chart-8: #66FFD9; --chart-other: #B0B0B0; --chart-track: #4D4D4D; /* 데이터 0 일 때 링 전체가 이 색 — 검정 대비 2.48 로 띄운다 */ /* 반투명 채움 — 검은 면에서는 옅은 알파가 통째로 사라진다. 유령 막대는 윤곽선을 거의 불투명하게 줘서 채움이 옅어도 형태가 남게 한다 */ --chart-area-alpha: 0.35; --chart-ghost: #B0B0B0; /* '계획'은 카테고리가 아니다 → 중성 회색 */ --chart-ghost-alpha: 0.45; --chart-ghost-line-alpha: 0.95; } /* 고객사 CI(짙은 색 PNG)는 검은 면에서 묻힌다 → 흰 칩(navy·dark·blak 과 같은 수법) */ :root[data-theme="hc"] .brand-ci { background: #FFFFFF; padding: 4px 6px; border-radius: var(--nu-r-medium); } /* 큰 박스 안의 개별 박스 — 면이 거의 같으므로(1.21) 경계를 테두리로 만든다. 선택자는 styles.css 의 `.panel 안의 카드`(--nu-card-2 를 주는 규칙)와 같은 목록으로 맞춘다. ※ 토큰만으로 안 되는 유일한 부분이다 — '면 밝기로 층을 만든다'는 전제가 이 톤에는 없다. */ :root[data-theme="hc"] .panel .viz-card, :root[data-theme="hc"] .panel .ep-card, :root[data-theme="hc"] .panel .util-card, :root[data-theme="hc"] .panel .inv-card, :root[data-theme="hc"] .panel .sh-card, :root[data-theme="hc"] .panel .home-card { border: 1px solid var(--nu-border); } /* 브라우저 기본 위젯(스크롤바·폼 컨트롤)도 어둡게 */ :root[data-theme="hc"] { color-scheme: dark; } /* ═══════════════════════════════════════════════════════════════════════════ OS 강제 색상 대응 — 톤과 무관하게 항상 도는 층 ─────────────────────────────────────────────────────────────────────────── 윈도우 「대비 테마」가 켜져 있으면 브라우저가 우리 색을 통째로 갈아치운다. 위의 톤 아홉 종이 **전부 같아 보인다.** 그건 정상이고 막을 수도 없다 — 그 설정을 켠 사람은 시스템 색으로 보겠다고 말한 것이다. 문제는 색이 아니라 **없어지는 것들**이다. 실측(Chrome 152, 대비 테마 '사막 #2'): background-image(그라디언트) 제거 10곳 box-shadow 제거 50곳 background-color 시스템 색으로 강제 그래서 '채움으로만 구분하던 것'이 구분되지 않는다. 실제로 상단 바에서 로그아웃(테두리 있음)만 버튼으로 보이고 「스케줄링 요청」·「조회」는 그냥 글자였다. 테두리와 글자는 살아남는다. 그것으로 옮긴다. ★ outline 을 쓰고 offset 을 음수로 준다 — border 로 주면 1px씩 커져서 1920x940 한 화면에 맞춰 둔 높이가 그 순간 깨진다. outline 은 배치를 안 건드린다. ★ 색을 지정하지 않는다. 시스템이 정하게 두는 것이 이 모드의 규약이다. */ @media (forced-colors: active) { /* 버튼임을 테두리로 알린다. 채움은 이미 시스템이 가져갔다. */ button, .primary-btn, [class*="-btn"], .user-chip, .theme-card { outline: 1px solid; outline-offset: -1px; } /* 아이콘만 있는 것은 테두리를 두르면 되레 시끄럽다 — 빼 둔다. */ .menu-btn, .nav-toggle-all { outline: none; } /* 「아직 더 있는 표」의 옅은 그라디언트는 이 모드에서 아예 안 그려진다. 흔적만 남기지 말고 지운다 — 스크롤막대가 그 자리에서 같은 말을 한다. */ #layoutRoot .panel.has-more::after, #layoutRoot .viz-card.has-more::after, #layoutRoot .home-card.has-more::after, #layoutRoot .util-card.has-more::after, #layoutRoot .ep-card.has-more::after, #layoutRoot .inv-card.has-more::after, #layoutRoot .sh-card.has-more::after, #layoutRoot .sched-section.has-more::after { content: none; } /* 접어 둔 유의사항의 ⓘ 알약도 채움으로 서 있었다. */ .data-note > summary { outline: 1px solid; outline-offset: -1px; } }