:root { /* ── Brand — BI v1.1 (2026-08-13) ───────────────────────────────────── 제품 주색 = 심볼 «플랫폼선»의 Platform Blue. 구 브랜드 레드(#C5252F)에서 전환했다. ★레드는 이제 «의미색»으로만 남는다 — 오류·경고·위험(--kpi-alert 등). 브랜드로 쓰지 말 것. ★변수명 --explan-red* 는 1,198곳이 참조하므로 이름을 유지한 채 별칭으로 남긴다. 새로 쓰는 코드는 --explan-brand* 를 쓸 것. ★★둘의 차이 = «화이트라벨이 덮느냐» 다. 이름만 다른 같은 값이 아니다. --explan-red* … applyTenantTheme() 이 런타임에 덮어쓴다. 테넌트가 고른 색을 따라간다. (실측: co:SA 는 청록 #0891B2 → 이 계열을 쓰는 화면은 전부 청록으로 뜬다) --explan-brand* … 제품 기본색. 테넌트가 덮지 않는다. 그래서 «테넌트 색을 따라가야 하는 것»은 --explan-red(또는 --brand-primary)를, «회사와 무관하게 EXPLAN 색이어야 하는 것»은 --explan-brand 를 쓴다. 아래 --border-focus·--color-domain-approval 이 후자다(전환 전에도 상수였다 — 동작 유지). */ --explan-brand: #2563EB; /* Platform Blue — 흰 글자 대비 5.2:1 (AA) */ --explan-brand-dark: #1D4ED8; --explan-brand-light: #EFF6FF; --explan-brand-sky: #38BDF8; /* 성장선 Sky — 포인트로만 아껴 쓴다 */ --explan-red: var(--explan-brand); /* deprecated 별칭 — 값은 더 이상 빨강이 아니다 */ --explan-red-dark: var(--explan-brand-dark); /* deprecated 별칭 */ --explan-red-light: var(--explan-brand-light); /* deprecated 별칭 */ /* 채팅 말풍선(내 메시지) — 원색 배경은 장시간 응시에 피로 → 도메인색 룰 그대로: 도메인(브랜드) pastel bg 틴트 + 어두운 글자 (2026-08-04). ★2026-10-15 대표 승인 — 회사 브랜드색(화이트라벨)의 연한 틴트를 따른다(명도 고정·글자 대비 ≥4.5 · TenantTheme chatBubbleTint). 브랜드색이 없거나 기본 블루면 시안 값 #DBEAFE/#BFDBFE. */ --chat-bubble-mine: var(--chat-brand-tint, #DBEAFE); /* 대화창 ⓐ(10-14) · 회사 브랜드색 틴트(10-15) — 틴트는 TenantTheme paint 가 칠한다 · 없으면 시안 값 */ --chat-bubble-mine-fg: var(--chat-bubble-fg); /* ── 대화창 색·가독성 ⓐ + 멘션 ⓜ3 (대표 승인 2026-10-14 · ceo_docs/대화창_색_가독성_기획_1014.html) ── 대화(DM)·이슈 채팅·AI 비서 대화 · PC·모바일 말풍선이 «이 토큰만» 읽는다. ★전역 토큰(--surface-sunken·--brand-primary-bg)은 다른 화면이 쓰므로 건드리지 않는다 — 대화 전용 값을 따로 둔다. ★흰 바탕에 회색 말풍선(종전) → 회색 바탕에 흰 말풍선(테두리·옅은 그림자)으로 뒤집어 남/내 구분을 키운다. */ --chat-bg: #F1F3F6; /* 대화 영역 바탕 */ --chat-bubble-other: #FFFFFF; /* 상대 말풍선 */ --chat-bubble-other-border: #E4E4E7; --chat-bubble-other-shadow: 0 1px 1px rgba(0,0,0,.04); --chat-bubble-mine-border: var(--chat-brand-tint-border, #BFDBFE); --chat-bubble-fg: #18181B; /* 말풍선 글자(남·나 공통) */ --chat-bubble-weight: 500; --chat-meta: #52525B; /* 시각·읽음 — 종전 --text-tertiary(#6B7280)보다 진하게 */ /* 발신자 이름(10-15 대표 지시 «폰도 PC 처럼») — PC·모바일 대화·이슈 채팅이 «이 토큰만» 읽는다. 종전 PC = 본문 글자색 상속(#18181B)·600 · 폰 = --text-tertiary 회색·보통 굵기 → 폰 이름이 흐렸다. */ --chat-name-fg: #18181B; --chat-name-weight: 600; /* 멘션 칩 ⓜ3 — 이니셜 원 + 이름 · «@»는 원이 대신한다(복사는 여전히 «@이름») */ --chat-mention-bg: #FFFFFF; --chat-mention-border: #DBEAFE; --chat-mention-fg: #1E3A8A; --chat-mention-ini-bg: #2563EB; --chat-mention-ini-fg: #FFFFFF; /* 대화방 공지 카드(대표 승인 2026-10-14 · ceo_docs/대화방_공지_디자인_기획_1014.html) — 노란 띠 → 흰 카드 + 왼쪽 주황 선 */ --chat-notice-accent: #F59E0B; /* 카드 왼쪽 4px 선 · «최신» 꼬리표 */ --chat-notice-ink: #B45309; /* 머리말 «공지» · 확성기 선 */ --chat-notice-pill-bg: #FEF3C7; /* «공지 N건» 알약 · 번호 동그라미 */ --chat-notice-pill-fg: #92400E; --chat-notice-tile-bg: #F4F4F5; /* 아이콘 칸(회색 칸 + 선 아이콘 표준) */ --chat-notice-divider: #F1F1F1; /* 펼친 목록 줄 사이 */ --chat-notice-shadow: 0 1px 3px rgba(0,0,0,.06); /* 화이트라벨 — 테넌트가 덮어쓰는 브랜드 primary (기본 = BI Platform Blue). applyTenantTheme()이 런타임 주입 */ --brand-primary: var(--explan-red); --brand-primary-dark: var(--explan-red-dark); --brand-primary-bg: var(--explan-red-light); --brand-on: #FFFFFF; /* ── 역할 액센트 (공용 UI 커널, 2026-08-06) ───────────────────── 기본 = 브랜드 primary(=화이트라벨). ★2026-08-13 이후 «역할별 고정색은 두지 않는다» — SV 는 브랜드사와 연결되는 역할 구분 화면이라 회사 색을 그대로 따라간다(구 딥블루 고정색 폐기). ★surface·text·border·글자 크기는 역할로 갈리지 않는다 — 이 3개 밖의 토큰을 덮어쓰지 말 것. */ --app-accent: var(--brand-primary); --app-accent-dark: var(--brand-primary-dark); --app-accent-bg: var(--brand-primary-bg); /* ── Domain Tokens (보완 #7 정비) ──────────────────────────── */ /* 영업·계약 — teal (보완 #9 신설) */ --color-domain-sales-contract: #0D9488; --color-domain-sales-contract-dark: #0F766E; --color-domain-sales-contract-bg: #F0FDFA; --color-domain-sales-contract-border: #99F6E4; /* 자문 / 보고 — violet 계열 */ --color-domain-advisory: #7C3AED; --color-domain-advisory-dark: #6D28D9; --color-domain-advisory-bg: #F5F3FF; --color-domain-advisory-border: #DDD6FE; --color-domain-report: #7C3AED; --color-domain-report-bg: #F5F3FF; /* 결재함 — 브랜드색과 동일(전환 전에도 브랜드 레드였다. 그 «같음»을 그대로 유지한다) */ --color-domain-approval: var(--explan-brand); --color-domain-approval-bg: var(--explan-brand-light); /* 인사·급여 — 청록 (운영자 결정 — 사무·관리 계열은 violet, HR은 별도 청록) */ --color-domain-hr: #0891B2; --color-domain-hr-dark: #0E7490; --color-domain-hr-bg: #ECFEFF; /* 퍼포먼스 (가맹·물류) — green */ --color-domain-performance: #059669; --color-domain-performance-bg: #F0FDF4; /* 성과관리 (모듈⑤ 5-A) — indigo */ --color-domain-perf-mgmt: #4F46E5; --color-domain-perf-mgmt-dark: #3730A3; --color-domain-perf-mgmt-bg: #EEF2FF; /* 밸류체인 — 다크 청록 (인사·급여와 분리) */ --color-domain-valuechain: #0E7490; --color-domain-valuechain-bg: #E6F7F8; /* v3.1: 다른 도메인 pastel과 명도 통일, HR cyan과 미세 구분 */ /* AI 인사이트 — orange */ --color-domain-ai: #EA580C; --color-domain-ai-bg: #FFF7ED; /* 운영 관리·System 관리 — slate */ --color-domain-ops: #475569; --color-domain-ops-bg: #F8FAFC; --color-domain-system: #64748B; --color-domain-system-bg: #F8FAFC; /* Surface — v3.1 통일된 따뜻한 뉴트럴 (모든 페이지 톤 정렬) */ --surface-base: #FFFFFF; /* 페이지 캔버스 / 카드 본문 */ --surface-sub: #F6F6F4; /* 사이드 레일, 테이블 헤더, nav 영역 */ --surface-sunken: #EDEDEA; /* 더 깊은 fill (모달 백드롭 안, divider 영역) */ --surface-card: #FFFFFF; --surface-hover: #F0F0EE; /* 신규: row/nav hover 전용 */ /* Text — v3.1 대비 강화 (WCAG AA on white) */ --text-primary: #18181B; /* 본문/제목 */ --text-secondary: #3F3F46; /* 보조 본문 (was #555 → 더 진하게) */ --text-tertiary: #6B7280; /* 메타/캡션 (was #888 → AA 충족) */ --text-disabled: #A1A1AA; /* 비활성 (was #BBB → 약간 진하게) */ --text-on-red: #FFFFFF; /* 이름만 red — 브랜드색 위 글자다(값은 그대로 흰색) */ /* Border — v3.1 카드 경계 정의력 ↑ */ --border-default: #E4E4E7; --border-strong: #C8C8CD; --border-focus: var(--explan-brand); /* Status */ --s-reg-bg: #FEF3C7; --s-reg-fg: #92400E; --s-proc-bg: #DBEAFE; --s-proc-fg: #1E40AF; --s-done-bg: #D1FAE5; --s-done-fg: #065F46; --s-none-bg: #F3F4F6; --s-none-fg: #6B7280; /* Importance */ --i-high-bg: #FEE2E2; --i-high-fg: #991B1B; --i-mid-bg: #FEF3C7; --i-mid-fg: #92400E; --i-low-bg: #F3F4F6; --i-low-fg: #6B7280; /* KPI */ /* 상태색 — BI v1.1 계열(에메랄드·앰버·로즈)로 정렬(2026-08-13). ★두 단계로 나눈다: «마크»(배경·바·아이콘)는 BI 값 그대로, «텍스트»는 같은 계열의 진한 단계. BI 값을 글자에 그대로 쓰면 흰 배경 대비가 무너진다 — 실측: #F43F5E 3.7:1(미달) vs #BE123C 5.9:1. ★--kpi-good/warn/alert 는 «글자»로 쓰이는 곳이 압도적이라(실측 텍스트 1,207 : 마크 294) 진한 단계를 값으로 둔다. 마크에는 아래 --status-*-mark 를 쓸 것. */ --status-success-mark: #10B981; --status-warning-mark: #F59E0B; --status-error-mark: #F43F5E; /* 자문 «더미(추정값) 빨간 글자» — 출처 표식 src='dummy' 칸(#4191 컷 2 · lib/advisory-data-adapter.js advSrcStyle 한 곳이 칠한다). 글자용 진한 단계(흰 배경 대비 5.74:1 · node 계산 · --kpi-alert 와 같은 계열) · 다크 짝은 파일 끝 :root[data-theme="dark"] 한 줄(#4191 컷 4) */ --adv-dummy: #C81E1E; --kpi-good: #047857; --kpi-warn: #B45309; --kpi-alert: #BE123C; --kpi-info: #2563EB; /* Radius — v3.2 라운드 강화 (더 둥글게) */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 9999px; /* Shadows — v3.1 카드 경계 명확화 */ --sh-card: 0 1px 2px rgba(24,24,27,0.04), 0 0 0 1px rgba(24,24,27,0.05); --sh-card-hover: 0 4px 12px rgba(24,24,27,0.06), 0 0 0 1px rgba(24,24,27,0.08); --sh-modal: 0 12px 40px rgba(24,24,27,0.16), 0 0 0 1px rgba(24,24,27,0.06); --sh-panel: -4px 0 28px rgba(24,24,27,0.10); --sh-drop: 0 4px 16px rgba(24,24,27,0.12); /* Type scale — v3.1 한글 가독성 1px 보강 → 2026-08-01 전 화면 글자 15% 상향(지시 — 8%→10%→15% 재조정). zoom 방식은 레이아웃까지 키워 세로 스크롤을 만들어 철회 — 글자 토큰만 올린다(박스·여백 불변). 값 = 구 토큰 × 1.15 (소수 px 은 브라우저가 정상 렌더). 하드코딩 px 텍스트는 이 상향을 받지 않는다 — 발견되는 대로 토큰으로 바꾸는 것이 원칙. */ --fs-display: 27.6px; /* was 24 */ --fs-h1: 21.9px; /* was 19 */ --fs-h2: 18.4px; /* was 16 */ --fs-h3: 16.1px; /* was 14 */ --fs-body: 15px; /* was 13 */ --fs-meta: 13.8px; /* was 12 */ --fs-caption: 13.8px; /* was 12 */ --fs-tiny: 12.7px; /* was 11 → 라벨/배지 최소치 */ /* Timing */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-std: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-std: 200ms; --dur-slow: 300ms; /* ── Responsive breakpoints (v8) ── */ --bp-mobile: 768px; --bp-tablet: 992px; --bp-desktop: 1200px; --bp-wide: 1440px; --due-soon-bg: #FEF3C7; --due-soon-fg: #92400E; --due-today-bg: #FEE2E2; --due-today-fg: #991B1B; --due-overdue-bg: #F43F5E; /* 배경 = 마크 단계(BI 로즈) */ --due-overdue-fg: #FFFFFF; /* ── KPI Option B-2 (Ink + Tomato) — v3.1.4 ────────────── */ --kpi-ink: #1A1817; /* 따뜻한 잉크 = 다크 hero 배경 */ --kpi-ink-soft: #2A2622; /* 라이트 카드의 본문 텍스트 */ --kpi-cream: #FFFCF8; /* 라이트 카드 배경 */ --kpi-cream-fg: #F8F2E8; /* 다크 hero 위 텍스트 */ --kpi-canvas: #F5F2EE; /* 대시보드 본문 캔버스 */ --kpi-divider: #ECE6DC; --kpi-tomato: #E0533B; /* alert 강조 */ --kpi-tomato-bg: rgba(224,83,59,0.18); --kpi-tack: #8B7355; /* 따뜻한 회갈색 — warn / sub */ --kpi-tack-bg: #ECE4D3; --kpi-moss: #5E7553; /* good */ --kpi-moss-bg: #E2E8DA; --kpi-num-font: 'Manrope', 'Pretendard', sans-serif; /* ══ 공통 전체 팝업 틀(xpop · #4092 · 체크리스트 12 · CTO 확정 2026-09-29) — 값은 여기 한 곳 ══ 정본 = 시안 v3 ②-2(가지 plan/mypage docs/기획/시안/시안_마이페이지_통합_v3_20260929.html) · 부품 = components/common/FullPopup.jsx 막·그림자·모서리 = 메모 전체화면 모드 값 · 여백·최대 폭 = CTO 09-29 지시. 폰 전환 폭 640 = components.css 의 @media 조건(변수는 조건식에 못 씀). 다크 모드 — 제품에 테마 축(prefers-color-scheme·data-theme)이 아직 없다 → 외곽선은 --border-default 를 따라가게만 둔다. */ --xpop-scrim: rgba(15,23,42,.35); /* 뒤 화면(앱 머리 포함)을 흐리게 하는 막 */ --xpop-gap: 48px; /* 화면 가장자리 → 상자 바깥 여백(사방) */ --xpop-max-w: 1200px; /* 상자 최대 폭(넓은 화면은 가운데) */ --xpop-radius: 14px; /* 모서리 */ --xpop-line: 1px solid var(--border-default); /* 외곽선 */ --xpop-shadow: 0 24px 60px -12px rgba(15,23,42,.45); /* 그림자 */ --xpop-head-h: 48px; /* 머리줄 높이 */ --xpop-px: 24px; /* 머리·머리 아래 칸·본문·아래 줄 «한 값» 좌우 안쪽 여백 */ --xpop-foot-h: 56px; /* 아래 버튼 줄(선택) 높이 */ --xpop-px-phone: 14px; /* 폰(≤640) 좌우 안쪽 여백 */ --xpop-head-py: 8px; /* 여러 줄 제목(titleWrap) 머리의 위·아래 안쪽 여백(높이는 --xpop-head-h 가 최소) */ } /* 자문 «더미(추정값) 빨간 글자» 다크 짝 (#4191 컷 4) — 제품에 테마 축이 서면(data-theme="dark") 바로 이 값을 쓴다. 어두운 바탕 글자용 밝은 단계(#F87171 = #18181B 바탕 대비 6.40:1 · node 계산). 축이 없는 지금은 이 줄이 걸리지 않아 화면 무변. ★prefers-color-scheme 로 걸지 않는다 — 바탕은 밝은 채 글자만 밝아져 대비가 무너진다(흰 바탕 2.8:1). */ :root[data-theme="dark"] { --adv-dummy: #F87171; /* 대화창 ⓐ·ⓜ3 다크 짝 — 축이 없는 지금은 걸리지 않는다(화면 무변) */ --chat-bg: #18181B; --chat-bubble-other: #27272A; --chat-bubble-other-border: #3F3F46; --chat-bubble-other-shadow: none; --chat-bubble-mine: var(--chat-brand-tint-dark, #1E3A8A); --chat-bubble-mine-border: var(--chat-brand-tint-dark-border, #1D4ED8); --chat-bubble-fg: #F4F4F5; --chat-meta: #A1A1AA; --chat-name-fg: #F4F4F5; --chat-mention-bg: #27272A; --chat-mention-border: #1E40AF; --chat-mention-fg: #BFDBFE; --chat-mention-ini-bg: #3B82F6; --chat-notice-accent: #F59E0B; --chat-notice-ink: #FBBF24; --chat-notice-pill-bg: #451A03; --chat-notice-pill-fg: #FDE68A; --chat-notice-tile-bg: #3F3F46; --chat-notice-divider: #3F3F46; --chat-notice-shadow: none; } /* ══ 화면 바탕(앱 전체) — 대표 승인 2026-10-14 «화면 바탕 2단계» · 민원 #1668 ══════════════════════════ 시안(그림 승인 · 색 값 정본) = ceo_docs/화면바탕_앱전체_시안_1014.html(.app 의 --pg · --rail · --line · --ink · --sub) ★스위치(PM 판단 cm_mva4s9v5) — 서버 SCREEN_BG_ENABLED='1' 일 때만 lib/screen-bg.js 가 를 단다. 꺼짐(기본) = 속성 없음 = 아래 :root 기본값 = «종전 토큰 그대로»(var 참조) → 지금 화면과 같은 값이다(자가 aws-dev 값과 대조). ★«2 흰색 = 지금»(PM 판단) — 흰색 판은 덮는 칸이 0 이다(= :root 기본 = 종전 값 · 메타 글자 #6B7280 · 대화 바탕·말풍선도 종전). ★바뀌는 곳 = «메뉴 줄(레일·폰 아래 탭 띠) · 페이지 바탕»뿐이다 — 카드·표·입력칸·대화상자(--surface-base·--surface-card)와 의미 색(--kpi-* · --status-* · --s-* · --i-* · 브랜드)은 여기서 덮지 않는다. 시안의 베이지 «아이보리 카드»(#FFFDF8)는 대표 확정 문면(«카드·표·입력칸은 흰색 유지»)을 따라 싣지 않았다. ★자리 토큰 여섯 — 종전에 자리마다 바탕 토큰이 달랐다(본문 흰색 · 화면 캔버스 --surface-sub · 레일·폰 셸 --surface-sunken · 폰 탭 띠 흰색). 그래서 자리별 토큰을 두고 기본값을 «그 자리의 종전 토큰»으로 잇는다 — 꺼짐·흰색에서 한 픽셀도 안 바뀐다. ★글자 — 연한 바탕·메뉴 줄 위에서 종전 --text-tertiary(#6B7280)는 4.5:1 에 모자란다(연회색 바탕 4.35 · 메뉴 줄 4.08 · node 계산). 그래서 연회색·베이지·연한 초록은 시안의 --sub 값으로 진하게 덮는다(흰 카드 위에서도 더 진해질 뿐 대비는 오른다). 베이지·연한 초록은 시안대로 본문 글자(--text-primary)도 그 바탕 계열 잉크로 바꾼다. --text-secondary(#3F3F46)는 그대로. 대비 실측 자 = web/client/scripts/screen-bg-1016.test.mjs(이 파일 값을 읽어 WCAG 공식으로 잰다). ★대화창 바탕(--chat-bg)은 베이지·연한 초록에서 페이지 바탕을 따른다(시안 «대화» 화면 · 연회색·흰색 = 종전 값 그대로). 다크(대화창만 · 위 :root[data-theme="dark"])는 선택자 무게(0,2,0)가 여기(0,1,0)보다 커서 늘 이긴다 — 손대지 않는다. ★[data-screen-bg] 는 밖 요소에도 걸린다 — 설정의 견본 칸이 이 속성을 달아 «그 바탕의 토큰»을 미리 보여 준다(색 값 사본 0). */ :root { --screen-bg-page: var(--surface-base); /* PC 본문(.main-col)·html/body — 종전 흰색 */ --screen-bg-canvas: var(--surface-sub); /* 화면 캔버스(홈·이슈 목록·시스템관리 셸·머리 검색 단추) — 종전 */ --screen-bg-shell: var(--surface-sunken); /* 폰 셸 바탕·폰 «전체» 탭 — 종전 */ --screen-bg-nav: var(--surface-sunken); /* 메뉴 줄 — PC 왼쪽 레일(알림 점 테두리) — 종전 */ --screen-bg-tabbar: var(--surface-base); /* 메뉴 줄 — 폰 아래 탭 띠(배지 테두리) — 종전 */ --screen-bg-line: var(--border-default); /* 메뉴 줄 경계선 — 종전 */ } [data-screen-bg="gray"] { /* 1 기본(연회색) — 켬일 때 모두의 기본값 */ --screen-bg-page: #F1F3F6; --screen-bg-canvas: #F1F3F6; --screen-bg-shell: #F1F3F6; --screen-bg-nav: #E9ECF1; --screen-bg-tabbar: #E9ECF1; --screen-bg-line: #E4E4E7; --text-tertiary: #52525B; } [data-screen-bg="white"] { /* 2 흰색 = 지금 — 값은 :root 기본(종전 토큰)과 같다 ★자리 토큰 여섯을 «다시 선언»한다: 설정 칸 견본(SettingsView «화면 바탕» span[data-screen-bg="white"])은 다른 바탕이 켜진 html 아래에 놓이므로, 비워 두면 부모(gray·beige·green)의 --screen-bg-* 를 물려받아 흰색 견본이 지금 바탕 색으로 그려진다 ([H] cm_mva88fow · [L] cm_mva89n93). 견본은 이 여섯과 카드·경계 토큰만 쓴다(글자는 견본 밖 = 부모 바탕 맥락이 맞다). */ --screen-bg-page: var(--surface-base); --screen-bg-canvas: var(--surface-sub); --screen-bg-shell: var(--surface-sunken); --screen-bg-nav: var(--surface-sunken); --screen-bg-tabbar: var(--surface-base); --screen-bg-line: var(--border-default); } [data-screen-bg="beige"] { /* 3 베이지 */ --screen-bg-page: #F5F0E6; --screen-bg-canvas: #F5F0E6; --screen-bg-shell: #F5F0E6; --screen-bg-nav: #EDE6D8; --screen-bg-tabbar: #EDE6D8; --screen-bg-line: #E7DCC8; --text-primary: #27211A; --text-tertiary: #5B5245; --chat-bg: #F5F0E6; } [data-screen-bg="green"] { /* 4 연한 초록 */ --screen-bg-page: #E8F3EC; --screen-bg-canvas: #E8F3EC; --screen-bg-shell: #E8F3EC; --screen-bg-nav: #DDEDE3; --screen-bg-tabbar: #DDEDE3; --screen-bg-line: #D3E6DA; --text-primary: #14261B; --text-tertiary: #3F5A48; --chat-bg: #E8F3EC; }