: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: var(--layer-well, #F1F3F6); /* 대화 영역 바탕 = 층 토큰 «대화 우물»(#4617 1단) — 바탕 묶음의 우물 값 · 꺼짐·흰색 = 종전 #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; /* 카드 본문 · 머리줄 · 옆 목록(화면 바탕 아님 — 대표 #7925 컷 2) */ --surface-sub: #F4F4F5; /* 기본 바탕 — 본문·캔버스·표 머리·칸 면(대표 #7925 · R-371 · 종전 #F6F6F4) */ --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: #667085; /* 메타/캡션 — 대표 #7925 «색만 진하게»(종전 #6B7280 · #F4F4F5 위 4.53:1) */ --text-disabled: #A1A1AA; /* 비활성 (was #BBB → 약간 진하게) */ --text-on-red: #FFFFFF; /* 이름만 red — 브랜드색 위 글자다(값은 그대로 흰색) */ /* Border — v3.1 카드 경계 정의력 ↑ */ --border-default: #E4E4E7; --border-strong: #C8C8CD; --border-focus: var(--explan-brand); /* 검색칸(돋보기 입력칸) 테두리 색 — 공용 토큰 하나(이희성 대표 ㉖ · 기획 #19036 · PM #19039 · 2026-10-30) 쓰는 꼴 = «1.5px solid var(--border-search)» · 포커스 고리 = 이 색 18%(components.css «검색칸» 묶음 · color-mix) ★회사 색(화이트라벨)을 따라가지 않는다(--explan-brand = 제품 기본색 #2563EB) · 다크 짝 = components.css 다크 묶음(이 파일 다크 묶음은 대화창 동결) */ --border-search: 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; /* 캘린더 묶음 5색(기획 calendar_plan_1101 «묶음 5개» · 이름 기획 #25394) — 달력 칸·왼쪽 판 묶음 줄이 이 다섯만 칠한다 */ --cal-grp-mine: #2563EB; /* 내 일정 */ --cal-grp-due: #DC2626; /* 마감 */ --cal-grp-report: #7C3AED; /* 보고 */ --cal-grp-deal: #D97706; /* 계약·인사 */ --cal-grp-ext: #0D9488; /* 외부·AI */ /* 경리 뜻 색 별칭(#7215 · 이희성 대표 승인 · 기획 #15296) — 경리 화면은 hex 대신 이 이름으로 «뜻»을 칠한다. ★값은 기존 토큰 잇기 · 새 값은 bg 넷과 입금 파랑뿐(시안 acct_color_mockup_20261028 «고친 안» :root) · 다크 짝 = components.css 끝 따로 블록(이 파일 다크 묶음은 대화창 동결 · screen-bg-1016 F2). ★행동 단추 색은 여기 없다(화이트라벨 --brand-primary 그대로) · 단계·분류 점도 뜻 밖이라 안 올림. */ --acct-in: #2A5BD7; /* 입금·수입·매출 = 파랑 */ --acct-in-bg: #E8EEFD; --acct-out: var(--text-primary); /* 출금·지출·매입 = 검정 굵게 */ --acct-out-weight: 700; --acct-alert: var(--kpi-alert); /* 미수·실패 = 빨강 */ --acct-alert-bg: #FFF1F2; --acct-warn: var(--kpi-warn); /* 주의 = 주황 */ --acct-warn-bg: #FFFBEB; --acct-good: var(--kpi-good); /* 완료 = 초록 */ --acct-good-bg: #ECFDF5; --acct-wait: var(--text-secondary); /* 대기 = 회색 점선 */ --acct-wait-bg: var(--s-none-bg); --acct-wait-line: var(--border-strong); --acct-strong: var(--text-primary); /* 강조 숫자 = 검정 굵게 */ --acct-strong-weight: 800; /* 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: 21.9px; /* was 24 → 27.6 · 컷 5 = 화면 제목 21.9 */ --fs-h1: 21.9px; /* was 19 */ --fs-h2: 16.1px; /* was 16 → 18.4 · 컷 5 = 구역 제목 16.1 */ --fs-h3: 16.1px; /* was 14 */ --fs-body: 13.8px; /* was 13 → 15 · 컷 5 = 본문 13.8 */ --fs-meta: 13.8px; /* was 12 */ --fs-caption: 13.8px; /* was 12 */ --fs-tiny: 12.7px; /* was 11 → 라벨/배지 최소치 */ --fs-kpi: 27.6px; /* 컷 5 · KPI 큰 숫자 4곳 — 표 밖 · 옛 display 값(기획 #23512) */ /* ↑컷 5(이희성 대표 #7926 · 시안 mock_font_modules_1031.html «공통 크기 표» PC 칸) — 제목 21.9 · 구역 16.1 · 본문 13.8 · 최소 12.7. 표 밖 셋(display 27.6 · h2 18.4 · body 15)을 표 값으로 · 폰 틀은 components.css .m-app-frame · 앱은 app-shell.css :root 가 옛 세 값을 다시 둔다(폰·앱 무변 · 자 web/client/scripts/font-pc-7926.test.mjs T2). */ /* 폰 글자 크기 표 — 이희성 대표 #7926(규율 R-2026-09-04-372) · 시안 docs/design-canon/mock_font_modules_1031.html «공통 크기 표» 폰 칸. 폰 화면(components/mobile · 쉬운 화면 CSS 의 .m-app-frame 덧 규칙)만 읽는다 — PC 는 위 --fs-* 그대로(컷 5 몫). 가장 작은 글자 = 11.5(배지 같은 표시는 시안 9번 «따로») · 18.5 넘는 큰 숫자·아이콘 글자는 표 밖. */ --fs-m-title: 18.5px; /* 화면 제목 — 탭·하위 화면 같은 크기 */ --fs-m-section: 14.5px; /* 구역·카드 제목 */ --fs-m-row: 13.5px; /* 목록 줄 제목 */ --fs-m-body: 12.5px; /* 본문 */ --fs-m-sub: 11.5px; /* 보조 글자 */ --fs-m-min: 11.5px; /* 폰 최소 */ /* 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); /* 뒤 화면(앱 머리 포함)을 흐리게 하는 막 */ /* ── 크기 규칙(CTO 지시 · 기획 #12756 · #4850 F-MISC-240) — 큰 작업 팝업(size 'work') 처음 크기 · 최대화. 숫자는 여기 한 곳 ── CTO 09-29 «사방 48 · 최대 1200» 은 이 규칙이 대체했다 — 그 두 값(--xpop-gap · --xpop-max-w)은 size 'confirm'(종전 크기) 갈래만 쓴다. */ --xpop-w-pct: min(72vw, 1600px); /* 처음 가로 = 창 폭 72% · 상한 1600 */ --xpop-h-pct: 80vh; /* 처음 세로 = 창 높이 80%(내용과 무관 · 본문만 스크롤) */ --xpop-min-w: 720px; /* 최소 가로(창이 더 좁으면 창 가득) */ --xpop-min-h: 480px; /* 최소 세로(창이 더 낮으면 창 가득) */ --xpop-max-gap: 16px; /* 최대화 = 화면 가장자리 → 상자 여백(사방) */ --xpop-full-w-pct: 92vw; /* size 'full'(넓음 · 기획 #12771 · v3 와 맞춤) 처음 가로 = 창 폭 92%(상한 없음) */ --xpop-full-h-pct: 90vh; /* size 'full' 처음 세로 = 창 높이 90% */ --xpop-gap: 48px; /* (size 'confirm' 종전 갈래) 화면 가장자리 → 상자 바깥 여백(사방) */ --xpop-max-w: 1200px; /* (size 'confirm' 종전 갈래) 상자 최대 폭(넓은 화면은 가운데) */ --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; /* 회사 색 다크 짝(#7303 창 분리 단추 · 기획 #16803) — 축이 없는 지금은 걸리지 않는다(화면 무변). ★화이트라벨은 인라인 style(TenantTheme paint)이라 이 시트 값보다 늘 이긴다 — 회사 색을 덮지 않는다. 값 대비(node WCAG 계산) = 흰 글자 4.60:1 · #18181B 바탕 3.85:1 · #27272A 3.24:1 · 옅은 바탕 위 3.19:1. */ --brand-primary: #336DEE; --brand-primary-bg: #172554; } /* ══ 화면 바탕(앱 전체) — 대표 승인 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 기본값 = 기본 바탕(대표 #7925 · 흰색 판과 같은 값) — 스위치와 무관하게 같은 값이 나온다. ★키 white = 표시 «기본(중성 회색)» — 흰색 판은 :root 기본과 같은 값이다(글자는 덮지 않음 · 대표 #7925 R-371 #F4F4F5 · 보조 글자 #667085). ★바뀌는 곳 = «틀(메뉴 줄·탭 띠·본문·캔버스·폰 셸) · 대화 우물 · 표 머리·칸 면 · 테두리»(#7925 컷 2 — 본문까지 바탕을 따른다) — 카드·입력칸·대화상자(--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 공식으로 잰다). ★층 토큰 여섯(#4617 1단 · #4615 흡수 · 기획 airepo/pm-4617/plan.md «세 층 규칙» · 표 «밝은 여섯 — 층별 색») --layer-frame 진한 틀(메뉴 줄·탭 띠) · --layer-canvas 연한 틀(카드 뒤 캔버스·폰 셸) · --layer-face 안쪽 면(목록·머리줄·본문·표·카드·입력 바·서랍) · --layer-raised 겹친 면(팝업·시트·펼침·알림) · --layer-well 대화 우물(말풍선 칸 = 흰 안쪽 면이 둘러쌈) · --layer-line 틀 경계선. ① 고른 바탕 색은 «틀»(진한 틀·연한 틀)과 «대화 우물»에만 — 안쪽 면·겹친 면 = 흰색 고정. ② 자리 토큰(--screen-bg-* 여섯 + 컷 2 호버 -hover = 일곱 · 호버는 견본이 안 써 흰 묶음 재선언 밖)은 이름 그대로 남기고(별칭 · 화면 파일 무변) 바탕 묶음에서 층 토큰을 가리킨다 — 페이지·캔버스·폰 셸 = 연한 틀 · 메뉴 줄·탭 띠 = 진한 틀 · 경계선 = 틀 경계선. 대화 판(--chat-bg)은 :root 에서 대화 우물을 읽는다. ★#7925 컷 2 — 페이지가 안쪽 면(흰색)에서 연한 틀로 옮겼다 · --surface-sub(표 머리·칸 면)=연한 틀 · --border-default(카드 테두리)=틀 경계선. ③ 꺼짐·흰색 = 같은 기본 값(진한 틀 #EDEDEA = --surface-sunken · 연한 틀 #F4F4F5 = --surface-sub · 탭 띠 흰색). ★1단은 값을 «기획 표 그대로» 옮기고 표에서 2단으로 미룬 값(틀 경계선 · 메뉴 줄 글자 · 면 보조)은 지금 값 그대로 둔다. 다크(대화창만 · 위 :root[data-theme="dark"])는 선택자 무게(0,2,0)가 여기(0,1,0)보다 커서 늘 이긴다 — 손대지 않는다. ★[data-screen-bg] 는 밖 요소에도 걸린다 — 설정의 견본 칸이 이 속성을 달아 «그 바탕의 토큰»을 미리 보여 준다(색 값 사본 0). */ :root { --screen-bg-page: var(--surface-sub); /* PC 본문(.main-col)·html/body — 대표 #7925 컷 2(종전 흰색) */ --screen-bg-canvas: var(--surface-sub); /* 화면 캔버스(홈·이슈 목록·시스템관리 셸·머리 검색 단추) */ --screen-bg-shell: var(--surface-sub); /* 폰 셸 바탕·폰 «전체» 탭 — 대표 #7925 · 규율 R-371 */ --screen-bg-nav: var(--surface-sunken); /* 메뉴 줄 — PC 왼쪽 레일(알림 점 테두리) — 종전 */ --screen-bg-tabbar: var(--surface-base); /* 메뉴 줄 — 폰 아래 탭 띠(배지 테두리) — 종전 */ --screen-bg-line: var(--border-default); /* 메뉴 줄 경계선 — 종전 */ --screen-bg-hover: var(--layer-frame); /* 본문 위 호버 면 = 본문보다 한 단 진한 틀(#7925 컷 2 · 다크 = 틀 경계선 층) */ --border-subtle: var(--screen-bg-line); /* 옅은 목록 선 = 바탕 선 — 종전 값 없이 폴백만(쉬운 폰 easy-shell 과 한 뜻) */ --layer-frame: var(--surface-sunken); /* 진한 틀 — 종전 레일 값 */ --layer-canvas: var(--surface-sub); /* 연한 틀 — 종전 화면 캔버스 값 */ --layer-face: var(--surface-base); /* 안쪽 면 — 흰색 */ --layer-raised: var(--surface-base); /* 겹친 면 — 흰색 */ --layer-well: #F1F3F6; /* 대화 우물 — 종전 대화 바탕 */ --layer-line: var(--border-default); /* 틀 경계선 — 종전 */ } [data-screen-bg="gray"] { /* 1 연회색(#4617 · 종전 10-14 = 기본) */ --layer-frame: #E9ECF1; --layer-canvas: #F1F3F6; --layer-face: var(--surface-base); --layer-raised: var(--surface-base); --layer-well: #F1F3F6; --layer-line: #E4E4E7; /* 지금 값 — 기획 표 값은 2단 */ --surface-sub: var(--layer-canvas); --border-default: var(--layer-line); --screen-bg-page: var(--layer-canvas); --screen-bg-canvas: var(--layer-canvas); --screen-bg-shell: var(--layer-canvas); --screen-bg-nav: var(--layer-frame); --screen-bg-tabbar: var(--layer-frame); --screen-bg-line: var(--layer-line); --text-tertiary: #52525B; } [data-screen-bg="white"] { /* 2 기본(저장 키 white · 표시 이름 «기본(중성 회색)» · #7925) — 값은 :root 기본과 같다(덮는 칸 0) ★자리 토큰 여섯을 «다시 선언»한다: 설정 칸 견본(SettingsView «화면 바탕» span[data-screen-bg="white"])은 다른 바탕이 켜진 html 아래에 놓이므로, 비워 두면 부모(gray·beige·green)의 --screen-bg-* 를 물려받아 흰색 견본이 지금 바탕 색으로 그려진다 ([H] cm_mva88fow · [L] cm_mva89n93). 견본은 이 여섯과 카드·경계 토큰만 쓴다(글자는 견본 밖 = 부모 바탕 맥락이 맞다) · 층 토큰 여섯도 같은 까닭으로 다시 선언. ★#7925 컷 2 — 색 바탕이 --surface-sub·--border-default 를 덮으므로 이 둘도 값으로 다시 선언한다(견본이 부모 값을 물려받지 않게). */ --surface-sub: #F4F4F5; --border-default: #E4E4E7; --screen-bg-page: var(--surface-sub); --screen-bg-canvas: var(--surface-sub); --screen-bg-shell: var(--surface-sub); --screen-bg-nav: var(--surface-sunken); --screen-bg-tabbar: var(--surface-base); --screen-bg-line: var(--border-default); --layer-frame: var(--surface-sunken); --layer-canvas: var(--surface-sub); --layer-face: var(--surface-base); --layer-raised: var(--surface-base); --layer-well: #F1F3F6; --layer-line: var(--border-default); } [data-screen-bg="beige"] { /* 3 베이지 */ --layer-frame: #EDE6D8; --layer-canvas: #F5F0E6; --layer-face: var(--surface-base); --layer-raised: var(--surface-base); --layer-well: #F5F0E6; --layer-line: #E7DCC8; /* 지금 값 — 기획 표 값은 2단 */ --surface-sub: var(--layer-canvas); --border-default: var(--layer-line); --screen-bg-page: var(--layer-canvas); --screen-bg-canvas: var(--layer-canvas); --screen-bg-shell: var(--layer-canvas); --screen-bg-nav: var(--layer-frame); --screen-bg-tabbar: var(--layer-frame); --screen-bg-line: var(--layer-line); --text-primary: #27211A; --text-tertiary: #5B5245; } [data-screen-bg="green"] { /* 4 연한 초록 */ --layer-frame: #DDEDE3; --layer-canvas: #E8F3EC; --layer-face: var(--surface-base); --layer-raised: var(--surface-base); --layer-well: #E8F3EC; --layer-line: #D3E6DA; /* 지금 값 — 기획 표 값은 2단 */ --surface-sub: var(--layer-canvas); --border-default: var(--layer-line); --screen-bg-page: var(--layer-canvas); --screen-bg-canvas: var(--layer-canvas); --screen-bg-shell: var(--layer-canvas); --screen-bg-nav: var(--layer-frame); --screen-bg-tabbar: var(--layer-frame); --screen-bg-line: var(--layer-line); --text-primary: #14261B; --text-tertiary: #3F5A48; }