/* ============================================================ 테마 변수 (Theme Tokens) ------------------------------------------------------------ 사이트의 브랜드 색·기본 톤을 한 곳에서 정의합니다. 다른 테마(다른 업종 사이트)로 바꿀 때는 이 파일의 값만 교체하면 전체 UI(콘텐츠·카드·설정 모달·메세지 시스템)에 일괄 반영됩니다. - 반드시 다른 모든 CSS보다 먼저 로드할 것 (index.html에서 첫 번째 link) - 컴포넌트 CSS에는 색상 hex를 직접 쓰지 말고 var(--토큰)을 사용할 것 ============================================================ */ :root { /* --- 타이포그래피 --- */ /* Pretendard GOV Variable은 index.html에서 셀프호스팅 로드(asset/vendor/fonts) — 폴백 스택은 공식 README 권장값 */ --font: 'Pretendard GOV Variable', 'Pretendard GOV', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; /* --- 브랜드 (NCLAW — IT/AI·보안 솔루션, 차콜·블랙 톤) --- */ --brand: #33363d; /* 주 브랜드 색 (버튼·제목 밑줄·번호 노드·활성 탭) */ --brand-dark: #17181c; /* 브랜드 hover/강조 진한 톤 (블랙에 가까운 차콜) */ --brand-tint: #f1f1f2; /* 브랜드 옅은 배경 (CTA 배너·선택 상태) */ --brand-tint-strong: #e2e3e5; /* 브랜드 틴트 진한 톤 (재생 중 펄스) */ --brand-line: #c9cbce; /* 브랜드 톤 라인 (연결 카드 커넥터) */ --brand-shadow: rgba(30, 32, 36, 0.16); /* 브랜드 톤 그림자 */ --brand-shadow-strong: rgba(30, 32, 36, 0.32); /* 브랜드 톤 그림자 (진함) */ /* --- 텍스트 · 면 --- */ --paper: #ffffff; /* 흰 면 (말풍선·카드·모달 배경) */ --ink: #1c1e22; /* 제목/강조 텍스트 */ --ink-muted: #6b6d72; /* 보조/설명 텍스트 (기존 컴포넌트의 하드코딩 #666과 동일 톤 — 신규/개편 컴포넌트는 이 변수를 사용) */ --surface: #f7f7f8; /* 카드·표 헤더 등 옅은 면 */ --line: #e1e2e5; /* 옅은 테두리 */ --page-bg: #f0f0f2; /* 페이지 배경 */ /* --- 메세지 앵커 (본문 구절 — 브랜드색 점선 밑줄 + 💬 힌트) --- */ --anchor-text: #55585f; /* 앵커 텍스트 (본문 잉크보다 밝은 중간 차콜 — 점선 밑줄과 함께 대비 확보) */ /* --- 셸 푸터 (블랙에 가까운 면 — 대상 레이아웃의 어두운 푸터) --- */ --footer-bg: #121316; /* 푸터 배경 (브랜드 계열 블랙 차콜) */ --scrim: rgba(18, 19, 22, 0.55); /* 오버레이 딤 배경 (모바일 GnB 열림 등) */ /* --- 성공/완료 (게시판 답변 요약 등 녹색 계열) --- */ --ok: #27a15f; /* 완료/성공 주 색 */ --ok-dark: #1d8a4e; /* 완료 진한 톤 (텍스트/hover) */ --ok-tint: #e9f8f0; /* 완료 옅은 배경 */ /* --- 재생 중 / 경고 강조 --- */ --alert: #ff0000; --alert-soft: #ff6b6b; --alert-tint: #fff5f5; } /* ============================================================ 다크 모드 (예정된 기능 — 토글 UI는 아직 없음) ------------------------------------------------------------ 향후 다크모드 토글이 를 지정하면 아래 값으로 전체 UI가 자동 전환된다. 지금은 어디서도 이 속성을 설정하지 않으므로 실제 화면에는 영향이 없다 (docs/PATTERN_CATALOG.html의 라이트/다크 미리보기 토글에서만 시험적으로 사용). 컴포넌트 CSS는 반드시 위 라이트 토큰(var(--token))만 참조해야 이 전환이 그대로 적용된다 — 컴포넌트 안에 색상을 직접 하드코딩하면 다크모드에서 깨진다. ============================================================ */ :root[data-theme="dark"] { --brand: #b6b8bd; --brand-dark: #d9dadd; --brand-tint: #232428; --brand-tint-strong: #2c2d32; --brand-line: #3a3b40; --brand-shadow: rgba(182, 184, 189, 0.2); --brand-shadow-strong: rgba(182, 184, 189, 0.38); --paper: #17181c; --ink: #eceef0; --ink-muted: #9a9ca2; --surface: #1f2024; --line: #34353a; --page-bg: #101113; --anchor-text: #b6b8bd; --footer-bg: #0a0a0c; --scrim: rgba(0, 0, 0, 0.6); --ok: #34b871; --ok-dark: #2c9c5f; --ok-tint: #113322; --alert: #ff5c5c; --alert-soft: #ff8080; --alert-tint: #2a1414; }