/* ===== 공통 색 토큰 (theme.css) — index/app 및 향후 solution/contact 공유 ===== 라이트=활성. 다크 토글은 아래 :root[data-theme="dark"] 주석 해제. */ :root{ /* ============================================================ 색 토큰(의미 기반). 라이트 테마 = 현재 활성값. 모든 컴포넌트가 이 변수를 참조 → 값만 바꾸면 테마 통째 전환. ============================================================ */ /* 배경 (밝은 → 떠 보이는 순) */ --bg-base:#f7f9fc; /* 페이지 최하단 (옅은 블루그레이, 눈부심 방지) */ --bg-section:#eef2f8; /* 섹션 교차 배경 */ --bg-card:#ffffff; /* 카드 (그림자로 부양) */ --bg-input:#f3f6fb; /* 입력필드 */ --border:#dfe4ee; /* 테두리 (연한 회색) */ /* 텍스트 */ --text-primary:#1a2138; /* 제목/본문 (차콜 네이비, 순검정 아님) */ --text-secondary:#5a6478; /* 보조 텍스트 (중간 회색) */ --text-muted:#8b93a7; /* 더 옅은 보조 */ /* 포인트색 (흰 배경 대비 위해 진하게 조정) */ --accent:#2563eb; /* 블루 (기본 포인트) */ --accent-strong:#1d4ed8; /* 블루 진하게 (그라디언트/hover) */ --accent-2:#0e9f6e; /* 그린 (보조 포인트) */ --violet:#7c3aed; /* 보라 (core 레이어) */ --warning:#d97706; /* 경고/주의 (노랑→주황, 흰 배경 가독 확보) */ --success:#0e9f6e; /* 정상/OK */ --danger:#dc2626; /* 위험/critical */ --on-accent:#ffffff; /* 포인트색(버튼 등) 위에 올라가는 텍스트 */ /* 도면 SVG (흰 배경 → 어두운 선. 다크 땐 밝은 선으로 반전) */ --dwg-line:#1a2138; /* 외형선 */ --dwg-fill:rgba(90,100,120,.06); /* 옅은 채움 */ --dwg-center:#dc2626; /* 중심선(빨강) */ --dwg-dim:#0e9f6e; /* 치수선(초록) */ --dwg-dash:#2563eb; /* 내경 점선(파랑) */ --dwg-muted:#5a6478; /* 보조선/라벨 */ /* 그림자 (라이트 테마는 그림자로 입체감) */ --shadow-card:0 1px 2px rgba(16,24,40,.06), 0 6px 20px -8px rgba(16,24,40,.12); --radius:14px; /* ── legacy alias: 기존 컴포넌트가 쓰던 옛 변수명 → 새 토큰 매핑 (컴포넌트 CSS는 그대로, 값만 라이트로 전환) ── */ --bg:var(--bg-base); --section:var(--bg-section); --panel:var(--bg-card); --panel-2:var(--bg-input); --panel2:var(--bg-input); --line:var(--border); --text:var(--text-primary); --muted:var(--text-secondary); --brand:var(--accent); --brand-2:var(--accent-strong); --ok:var(--success); --warn:var(--warning); } /* ============================================================ 다크 테마 뼈대 (지금 비활성). 나중에 토글 얹을 때: 1) 에 data-theme="dark" 부여 (JS 토글) 2) 아래 블록 주석만 해제 값 = 직전 다크 테마(커밋 c6be5dd) 그대로. 라이트/다크 모두 같은 토큰명을 쓰므로 값만 스왑되면 전체가 전환됨. ============================================================ */ /* :root[data-theme="dark"]{ --bg-base:#141b2e; --bg-section:#1e2740; --bg-card:#26314c; --bg-input:#303c5b; --border:#3f4d6d; --text-primary:#eef2f9; --text-secondary:#aab6cd; --text-muted:#94a3b8; --accent:#38bdf8; --accent-strong:#0ea5e9; --accent-2:#34d399; --violet:#a78bfa; --warning:#fbbf24; --success:#34d399; --danger:#f87171; --on-accent:#04202f; --dwg-line:#e2e8f0; --dwg-fill:rgba(148,163,184,.10); --dwg-center:#f87171; --dwg-dim:#34d399; --dwg-dash:#7dd3fc; --dwg-muted:#94a3b8; --shadow-card:0 2px 14px -6px rgba(0,0,0,.45); } */