/* ========================================================================= JNC Holdings — THEMES (테마 세트: 라이트[기본] · 다크 · 고대비) ------------------------------------------------------------------------- 감사 G-02 보완. 시스템의 3-tier 약속("리테마 = 토큰 재맵핑, 컴포넌트는 불변")을 실증한다. 컴포넌트는 role만 소비하므로, 이 파일은 의미 별칭(--bg / --fg· / 상태 soft)과 role(상호작용·표면·secondary 등)만 다크/고대비 값으로 재맵핑한다. 마크업/컴포넌트 CSS 변경 0. 적용: · · 또는 컨테이너 단위
. 미지정 시 :root 라이트가 기본. 벤치마킹(검증): · 순수 검정(#000) 회피 → 따뜻한 다크 그레이 기반. 다크에서 elevation은 그림자가 아니라 "더 밝은 표면"으로(라이트의 역). (m2.material.io/design/color/dark-theme, m3.material.io/styles/elevation/applying-elevation, nngroup/refactoringUI 합치) · 브랜드·상태색은 라이트 톤(200–50)으로 탈채도 — 채도색은 다크에서 진동. (m2.material.io/design/color/dark-theme: "lighter tones 200–50, AA 4.5:1 at all elevations") · 오프화이트 텍스트(순수 흰색 회피, halation 방지). (WCAG 1.4.3 / 다수 a11y 가이드) · 색만으로 정보 전달 금지 — 방향(상승 red/하락 blue)은 다크에서도 부호·아이콘 동반. (WCAG 1.4.1, 운영규약 1.7) 인지근거: 야간·저조도 환경의 외재적 인지부하·눈부심(glare) 저감(규칙 1.4). JNC 정체성: 중립 회색이 아닌 "따뜻한 잉크/스톤" 다크 — 라이트의 아이보리 종이 감성을 다크에서도 보존(따뜻한 종이의 밤). ========================================================================= */ /* ========================================================================= 1 · DARK THEME — 따뜻한 잉크 캔버스, 밝은 스톤 카드가 떠오르는 역(逆) recession ========================================================================= */ [data-theme="dark"] { color-scheme: dark; /* ---- 의미 별칭(roles가 의존) : 표면 & 텍스트 --------------------------- 라이트: ivory page → white card(위로 뜸). 다크: ink page → 더 밝은 stone card(위로 뜸). elevation = 더 밝은 표면(그림자 아님). [MD3 dark elevation] */ --bg: var(--stone-950); /* #14100D 따뜻한 near-black 캔버스(순수 검정 아님) */ --bg-raised: #221D19; /* 카드 = 캔버스보다 밝음 → 떠오름 */ --bg-sunken: #1A1613; /* 조용한 well = 캔버스와 카드 사이 */ --bg-inverse: #F2ECE5; /* inverse는 이제 밝은 면(툴팁/토스트) */ --fg1: #F4EEE7; /* 오프화이트(순수 흰색 아님 — halation 저감) */ --fg2: #B8ADA3; /* 보조 — 캔버스 위 ≈6.5:1 */ --fg3: #8C8076; /* 3차/플레이스홀더 — ≈4:1(대형/보조 한정) */ --fg-oninverse: #2E2823; /* 밝은 inverse 면 위 어두운 텍스트 */ --fg-oninverse2: #6A5F56; --border: #322B25; /* 따뜻한 다크 hairline */ --border-strong: #483F38; --border-field: #564C44; /* ---- ROLE 직접 재정의 (필수) ------------------------------------------ semantic-roles.css는 --surface-page:var(--bg) 처럼 role을 :root에서 alias로 해소한다. CSS 변수 치환은 *선언 위치*(:root)에서 일어나므로, 테마 스코프에서 alias(--bg)만 덮으면 role은 :root에서 이미 라이트로 굳은 값을 상속한다. 따라서 컴포넌트가 실제 소비하는 role을 여기서 직접 덮어써야 다크가 적용된다. */ --surface-page: var(--stone-950); /* 캔버스 — 가장 어두움 */ --surface: #221D19; /* 카드 — 캔버스보다 밝음(다크 elevation) */ --surface-sunken: #1A1613; /* well·테이블 헤더 */ --on-surface: #F4EEE7; --on-surface-variant: #B8ADA3; --on-surface-muted: #8C8076; --outline: #322B25; --outline-strong: #483F38; --outline-field: #564C44; --field-border: #564C44; --interactive-hover: #FA7F2E; --interactive-pressed: #FF9D5C; /* container 표면 roles(= var(--*-soft) 간접분) 직접 재정의 */ --brand-container: #3A2415; --positive-container: #2E1411; --negative-container: #121F33; --warning-container: #2C2206; --info-container: #1B2127; --error-container: #2E1411; --success-container: #0F2A1B; /* ---- 브랜드 : fill은 500 유지, 텍스트/링크는 라이트 톤(200–50) ---------- */ --brand-strong: #FA7F2E; /* 다크면 hover는 한 톤 밝게 */ --brand-stronger: #FF9D5C; /* 텍스트-tier 브랜드 = orange-300(다크 AA) */ --brand-soft: #3A2415; /* 다크 warm 틴트 컨테이너 */ --brand-tint: #2A1A0F; /* 가장 어두운 브랜드 wash(행 hover) */ /* ---- 방향성 상태(KRX) : 라이트 톤으로 + 어두운 틴트. 부호·아이콘 항상 동반 --- */ --positive: #FF6258; /* 상승 red — 다크용 라이트닝 */ --positive-soft: #2E1411; --negative: #6BA0F5; /* 하락 blue — 다크용 라이트닝 */ --negative-soft: #121F33; --warning: #E0A52A; /* 주의 gold-amber */ --warning-soft: #2C2206; --info: #93A0AD; /* 안내 slate(비방향) */ --info-soft: #1B2127; /* ---- UI 위험(방향과 분리 유지, 규칙 4.2) ---- */ --error: #FF6258; --error-soft: #2E1411; --error-hover: #FF8077; --error-pressed: #FF9D96; --success: #46B873; --success-soft: #0F2A1B; /* ---- 그림자 : 다크에선 약함 → 미묘하게만, 경계가 주(主). [a11y 가이드] ---- */ --sh-xs: 0 1px 2px rgba(0,0,0,0.40); --sh-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30); --sh-md: 0 4px 16px rgba(0,0,0,0.50), 0 1px 3px rgba(0,0,0,0.35); --sh-lg: 0 12px 32px rgba(0,0,0,0.58), 0 2px 8px rgba(0,0,0,0.4); --sh-xl: 0 24px 56px rgba(0,0,0,0.64), 0 6px 16px rgba(0,0,0,0.45); --sh-focus: 0 0 0 3px rgba(255,157,92,0.45); /* 라이트닝된 오렌지 링 */ --sh-inset: inset 0 1px 2px rgba(0,0,0,0.4); /* ===================================================================== ROLE 재맵핑 (semantic-roles의 토큰 중 라이트 프리미티브 직참분) ===================================================================== */ /* on-color 페어링 — 다크 틴트 위 채도 hue 텍스트 */ --on-warning: #1A1613; /* gold-amber fill 위 어두운 텍스트 */ --on-info: #14100D; /* 방향성·상태 fill의 on-color: 다크에선 fill이 라이트 톤(200–50)이므로 흰색이 아닌 어두운 ink를 얹어야 AA 통과(대비검증 도구 실측: 흰색 2.9:1 FAIL → ink 5.7:1 PASS). [MD3 dark: 라이트닝된 accent + 어두운 on-color] */ --on-positive: #1A1613; --on-negative: #14100D; --on-error: #1A1613; --on-success: #14100D; --on-brand-container: #FFB97A; --on-positive-container: #FF8A80; --on-negative-container: #9CC0F7; --on-warning-container: #F0C75E; --on-info-container: #AEB9C4; --on-error-container: #FF8A80; --on-success-container: #79D69B; --on-neutral-container: #D2C9C0; /* container press 파생(색 연산 유지) */ --brand-container-pressed: #4A3019; --positive-container-pressed: #3E1A16; --negative-container-pressed: #182A45; /* 표면(role) */ --surface-inset: #0E0B09; /* 가장 깊은 홈(입력 grooves) */ --surface-inverse: #F2ECE5; /* inverse = 밝은 면 */ --on-surface-inverse: #2E2823; --on-surface-inverse-variant: #6A5F56; --surface-popover: #221D19; /* 메뉴/팝오버 = 떠오른 다크 카드 */ --on-surface-popover: #F4EEE7; --surface-tooltip: #F2ECE5; /* 툴팁 = 밝은 면(다크면의 inverse 분리) */ --on-surface-tooltip: #2E2823; --surface-toast: #F2ECE5; /* 토스트 = 밝은 면 */ --on-surface-toast: #2E2823; --surface-overlay-panel: #221D19; --on-surface-overlay-panel: #F4EEE7; /* 상호작용 상태 — 다크면에선 hover/press wash가 "더 밝아짐" */ --state-hover-surface: #2A2420; --state-pressed-surface: #352D28; --state-hover-brand: #2A1A0F; --state-selected: #F2ECE5; /* 선택 = 밝은 fill(다크면 대비 반전) */ --on-state-selected: #1A1613; --state-selected-subtle: #2A1A0F; --on-state-selected-subtle: #FF9D5C; --state-disabled-surface: #262019; --state-disabled-content: #5C534B; /* 링크 — 라이트 오렌지(다크 AA ≈7:1) */ --link: #FF9D5C; --link-hover: #FFB97A; --link-visited: #E0A56F; /* 선택/하이라이트 */ --selection-bg: #3A2415; --selection-fg: #F4EEE7; --highlight-bg: #3A2E0A; --highlight-fg: #F4EEE7; /* 오버레이/스크림 — 다크에선 더 깊게 */ --scrim: rgba(0, 0, 0, 0.64); --overlay-surface: #221D19; --overlay-shadow: var(--sh-lg); /* secondary 강조 tier — 다크면에선 "잉크 버튼"이 밝은 fill로 반전 */ --secondary: #F2ECE5; --on-secondary: #1A1613; --secondary-hover: #E6DFD7; --secondary-pressed: #D2C9C0; /* 중립 컨테이너 · 컨트롤 트랙 · 미디어 · 필드 */ --neutral-container: #2A2420; --on-neutral-container: #D2C9C0; --control-track: #463E37; --media-bg: #2A2420; --field-bg: #1A1613; /* named elevation roles — 다크에선 그림자 대신 경계 의존이라 약하게 유지 */ --elevation-raised: var(--sh-sm); --elevation-overlay: var(--sh-md); --elevation-modal: var(--sh-xl); /* 신뢰 계측(O-01) — 확신도는 다크에서 밝은 stone으로(대비 확보), AI 표면은 warm dark 틴트. 의미 분리 유지: 확신도는 비방향 중립(시장 red/blue·--error와 무관). */ --ai-surface: color-mix(in srgb, var(--brand-tint) 58%, var(--surface)); /* @kind color */ --ai-label-fg: #FF9D5C; --confidence-high: #D2C9C0; --confidence-med: #B1A69C; --confidence-low: #8C8076; --confidence-track: #463E37; --provenance-fg: #8C8076; } /* ========================================================================= 2 · HIGH-CONTRAST (라이트) — 저시력·WHCM 대응. 대비를 최대로 끌어올리고 경계를 강제(채움만으로 구분되던 표면에 outline). (WCAG 1.4.11 / Fluent 2 HC) ========================================================================= */ [data-theme="hc"] { color-scheme: light; --fg1: #000000; /* 순수 검정 텍스트(최대 대비) */ --fg2: #2E2823; --fg3: #463E37; /* 보조도 ≥7:1로 끌어올림 */ --border: #1A1613; /* 하이라인이 아닌 진한 경계 */ --border-strong: #000000; --border-field: #1A1613; --link: #8A3408; /* 더 진한 오렌지(AAA 근접) */ --link-hover: #54240C; --brand-stronger: #82340D; --state-disabled-content: #463E37; /* disabled도 식별 가능하게 */ --bw-hairline: 1.5px; /* 경계 두께 상향 */ --sh-focus: 0 0 0 3px rgba(26,22,19,0.65); /* 진한 포커스 링 */ --outline: #1A1613; --outline-strong: #000000; --outline-field: #1A1613; /* on-surface roles 직접 재정의(최대 대비). 표면은 라이트 유지(HC 라이트) */ --on-surface: #000000; --on-surface-variant: #2E2823; --on-surface-muted: #463E37; /* 신뢰 계측(O-01) — 고대비 라이트: 확신도 등급을 최대 대비로 */ --confidence-high: #1A1613; --confidence-med: #2E2823; --confidence-low: #463E37; --provenance-fg: #463E37; --ai-label-fg: #82340D; } /* ========================================================================= 3 · HIGH-CONTRAST (다크) — 다크 기반 + 대비 최대 + 경계 강제 ========================================================================= */ [data-theme="dark-hc"] { color-scheme: dark; /* 다크 베이스 상속을 위해 다크 토큰을 먼저 깔고(아래 셀렉터 병합), 대비만 상향 */ --bg: #000000; /* HC 다크는 순수 검정 허용(시스템 HC 관습) */ --bg-raised: #1A1613; --bg-sunken: #100D0A; --bg-inverse: #FFFFFF; --fg1: #FFFFFF; /* 최대 대비 */ --fg2: #E6DFD7; --fg3: #D2C9C0; --border: #E6DFD7; /* 밝은 강제 경계 */ --border-strong: #FFFFFF; --border-field: #E6DFD7; --brand-stronger: #FFC196; /* orange-200 텍스트 */ --link: #FFC196; --link-hover: #FFE0C7; --positive: #FF8A80; --negative: #9CC0F7; --on-positive: #1A1613; --on-negative: #000000; --on-error: #1A1613; --on-success: #000000; --outline: #E6DFD7; --outline-strong: #FFFFFF; --outline-field: #E6DFD7; --bw-hairline: 1.5px; --sh-focus: 0 0 0 3px rgba(255,193,150,0.75); --state-disabled-content: #B1A69C; --surface-tooltip: #FFFFFF; --on-surface-tooltip: #000000; --surface-toast: #FFFFFF; --on-surface-toast: #000000; --secondary: #FFFFFF; --on-secondary: #000000; --state-selected: #FFFFFF; --on-state-selected: #000000; /* ROLE 직접 재정의(다크 HC) — surface/on-surface/outline/container */ --surface-page: #000000; --surface: #1A1613; --surface-sunken: #100D0A; --on-surface: #FFFFFF; --on-surface-variant: #E6DFD7; --on-surface-muted: #D2C9C0; --outline: #E6DFD7; /* (재확인) role 직접 */ --field-border: #E6DFD7; --brand-container: #3A2415; --on-brand-container: #FFD9B5; --positive-container: #2E1411; --on-positive-container: #FFB3AD; --negative-container: #121F33; --on-negative-container: #BBD4FA; --warning-container: #2C2206; --on-warning-container: #F5D98A; --info-container: #1B2127; --on-info-container: #C8D0D8; --error-container: #2E1411; --on-error-container: #FFB3AD; --success-container: #0F2A1B; --on-success-container: #9CE0B6; --state-hover-surface: #2A2420; --state-hover-brand: #2A1A0F; --link-visited: #FFD9B5; /* 신뢰 계측(O-01) — 고대비 다크: 확신도·AI 라벨 최대 대비 */ --ai-surface: #2A1A0F; --ai-label-fg: #FFC196; --confidence-high: #FFFFFF; --confidence-med: #E6DFD7; --confidence-low: #D2C9C0; --confidence-track: #564C44; --provenance-fg: #D2C9C0; } /* 고대비 테마(라이트/다크) 공통 — 채움만으로 구분되던 표면에 항상 경계 강제. forced-colors 안전망(jnc-components.css)과 동일 원리를 명시 테마에도 적용(규칙 1.7). */ [data-theme="hc"] .jbtn, [data-theme="hc"] .jtag, [data-theme="hc"] .jcard, [data-theme="hc"] .jtile, [data-theme="dark-hc"] .jbtn, [data-theme="dark-hc"] .jtag, [data-theme="dark-hc"] .jcard, [data-theme="dark-hc"] .jtile { border: 1px solid var(--outline-strong); } /* OS 다크 선호 자동 반영 — 명시적 opt-in(Carbon/Fluent 관습: 테마는 명시 적용). 토큰 중복을 피하기 위해 CSS 자동 투영 블록은 두지 않는다. OS 선호에 맞추려면 호스트에서 한 줄로 data-theme를 설정한다(명시 data-theme가 항상 우선): 이렇게 하면 [data-theme="dark"] 단일 정의만 소비되어 토큰이 한 곳에서 유지된다. */