@charset "utf-8"; /* ================================================================ 테마 색상 토큰 (한 곳에서 브랜드 색상 관리) ---------------------------------------------------------------- S6 : 화이트 배경 + 퍼플 포인트 (퍼플 3안 제시용) [ 안 바꾸는 법 ] head.sub.php 의 값만 바꾸면 된다. p1 = 인디고 퍼플 (차분한 남보라) ← 현재 기본값 p2 = 바이올렛 (선명한 보라) p3 = 모브 (부드러운 라벤더·플럼) dark = 기존 다크+오렌지 테마로 원복 [ 고객이 고른 뒤 확정하는 법 ] head.sub.php 의 G5_THEME_VARIANT 상수 한 줄만 고르면 끝. ================================================================ */ /* ---------- 중립(화이트) 토큰 : 3안 공통 ---------- */ :root { --bg: #FFFFFF; /* body 바탕 */ --surface: #FFFFFF; /* 카드·패널 면 */ --surface-2: #F6F6F8; /* 한 단계 옅은 면 (썸네일 바닥·입력창) */ --surface-3: #EFEFF2; /* 두 단계 옅은 면 (구분 블록) */ --ink: #17171B; /* 본문 진한 글자 (흰바탕 대비 17.9:1) */ --ink-2: #55555E; /* 보조 글자 (7.4:1) */ --ink-3: #6F6F79; /* 흐린 메타 글자 (4.6:1) */ --on-point: #FFFFFF; /* 포인트색 위 글자 */ --line: #E5E5EA; /* 기본 경계선 */ --line-2: #D5D5DC; /* 진한 경계선 */ --shadow: 0 2px 10px rgba(23,23,27,.06); /* 로고(흰색 단색 SVG)를 흰 배경에서 보이게 하는 필터 */ --logo-filter: brightness(0) saturate(100%); /* 다크에서 "흰 버튼"이던 보조 버튼 (흰 배경에선 옅은 회색이라야 보인다) */ --btn-neutral-bg: #F1F1F4; --btn-neutral-ink: #17171B; } /* ---------- 1안 : 인디고 퍼플 (차분한 남보라) ---------- */ /* 기본값. data-theme 이 없어도 이 값이 적용된다. */ :root, :root[data-theme="p1"] { --point: #4C3FBF; /* 흰바탕 7.58:1 - 글자·버튼 모두 가능 */ --point-hover: #3D3299; --point-soft: #EEECFB; /* 연한 배경 */ --point-ink: #3B2F99; /* 연한 배경 위 글자 (8.78:1) */ --point-line: #C9C3EF; } /* ---------- 2안 : 바이올렛 (선명한 보라) ---------- */ :root[data-theme="p2"] { --point: #7C3AED; /* 흰바탕 5.70:1 */ --point-hover: #6425D0; --point-soft: #F4EBFE; --point-ink: #6425D0; /* 6.68:1 */ --point-line: #DCC6FB; } /* ---------- 3안 : 모브 (부드러운 라벤더·플럼) ---------- */ :root[data-theme="p3"] { --point: #9E4FA6; /* 흰바탕 5.09:1 */ --point-hover: #85408C; --point-soft: #FAEDF9; --point-ink: #8A3B92; /* 5.94:1 */ --point-line: #E7C6E8; } /* ---------- 원복용 : 기존 다크 + 오렌지 ---------- */ /* 로 두면 작업 전 화면으로 돌아간다. (theme-white.css 도 이 값을 보고 스스로 비활성화된다) */ :root[data-theme="dark"] { --bg: #161616; --surface: #1C1B1F; --surface-2: #262626; --surface-3: #2A2A2A; --ink: #FFFFFF; --ink-2: #E0E0E0; --ink-3: #909090; --on-point: #FFFFFF; --line: #323232; --line-2: #545454; --logo-filter: none; --btn-neutral-bg: #FFFFFF; --btn-neutral-ink: #000000; --point: #FF7235; --point-hover: #E85B1F; --point-soft: #FFE9E0; --point-ink: #FF7235; --point-line: #FF7235; } /* ---------- 레거시 별칭 ---------- 기존 CSS 에 var(--main-color) 가 101곳, var(--bg-color) 가 2곳 쓰이고 있다. 별칭으로 연결해 두면 그 101곳을 손대지 않아도 함께 바뀐다. */ :root { --main-color: var(--point); --bg-color: var(--bg); }