/* tokens.css — 색·타이포 토큰 유일 정의처 (UI-DESIGN-SYSTEM.md §2·§3). 컴포넌트 CSS 는 여기 변수만 쓴다(hex 직접 사용 금지). 라이트/다크 3중 분기. 방향: 크고 깔끔한 중립(Notion 어휘) 바탕 + 테라코타 pinpoint 액센트. */ :root { color-scheme: light; /* 네이티브 컨트롤(스크롤바·셀렉트·자동완성)이 활성 테마를 따르도록 */ /* 라이트 — 중립(클린 화이트/그레이) */ --bg: #fbfbfa; --surface: #ffffff; --surface-alt: #f5f5f6; --text: #1a1a19; --muted: #6b6b70; --border: #e7e7e9; --hairline: rgba(0,0,0,.07); --link: #b0512f; --accent: #c96442; --accent-hover: #ae5630; --accent-soft: rgba(201,100,66,.10); --success: #1f7a34; --success-bg: #e8f5ec; --warning: #8a6d13; --warning-bg: #f8f1dc; --danger: #c0392b; --danger-bg: #fbeae7; --info-bg: rgba(201,100,66,.08); --chip-bg: #f0f0f1; --nav-bg: rgba(251,251,250,.85); --shadow-card: 0 1px 2px rgba(20,20,20,.04), 0 6px 20px rgba(20,20,20,.06); /* 테마 불변(의도적): on-accent 는 두 팔레트 모두 흰색. QR 배경은 스캔 신뢰 위해 항상 흰색. */ --on-accent: #ffffff; --qr-bg: #ffffff; /* 타이포 (UI §3) — Pretendard 우선 */ --font-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, sans-serif; --radius-card: 16px; --radius-input: 11px; --radius-pill: 980px; } /* 수동 다크 — 중립 그레이 */ :root[data-theme='dark'] { color-scheme: dark; --bg: #191919; --surface: #232323; --surface-alt: #2b2b2c; --text: #f4f4f3; --muted: #a4a4ab; --border: #343436; --hairline: rgba(255,255,255,.09); --link: #e5906f; --accent: #d97757; --accent-hover: #e08b6f; --accent-soft: rgba(217,119,87,.16); --success: #6fc47f; --success-bg: rgba(111,196,127,.13); --warning: #d9ad63; --warning-bg: rgba(217,173,99,.12); --danger: #e8756b; --danger-bg: rgba(232,117,107,.13); --info-bg: rgba(217,119,87,.15); --chip-bg: #313133; --nav-bg: rgba(25,25,25,.85); --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 6px 22px rgba(0,0,0,.34); } /* OS 자동 다크 (라이트 강제 시 제외) */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --bg: #191919; --surface: #232323; --surface-alt: #2b2b2c; --text: #f4f4f3; --muted: #a4a4ab; --border: #343436; --hairline: rgba(255,255,255,.09); --link: #e5906f; --accent: #d97757; --accent-hover: #e08b6f; --accent-soft: rgba(217,119,87,.16); --success: #6fc47f; --success-bg: rgba(111,196,127,.13); --warning: #d9ad63; --warning-bg: rgba(217,173,99,.12); --danger: #e8756b; --danger-bg: rgba(232,117,107,.13); --info-bg: rgba(217,119,87,.15); --chip-bg: #313133; --nav-bg: rgba(25,25,25,.85); --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 6px 22px rgba(0,0,0,.34); } } /* ── 스킨: warm v2 (관리자가 site.theme='warm' 선택 시 ) ── 현재 '중립+테라코타'를 격상: 웜 뉴트럴 바이어스·정제된 테라코타 램프·레이어드 웜틴트 elevation·부드러운 라운드. 컴포넌트는 var() 만 쓰므로 스킨 전환 시 전체 리테마. specificity: [data-skin] 블록이 :root 를 이기고, [data-skin][data-theme=dark] 가 최상위. */ :root[data-skin='warm'] { --bg: #faf7f2; --surface: #ffffff; --surface-alt: #f4efe7; --text: #1d1a16; --muted: #736a5e; --border: #e9e2d7; --hairline: rgba(40,30,18,.08); --link: #a94a2a; --accent: #c15a37; --accent-hover: #a94a2a; --accent-soft: rgba(193,90,55,.10); --success: #2f7d47; --success-bg: #e7f2ea; --warning: #9a6a12; --warning-bg: #f8efd8; --danger: #bd392a; --danger-bg: #fbe9e6; --info-bg: rgba(193,90,55,.07); --chip-bg: #f1ece3; --nav-bg: rgba(250,247,242,.72); --shadow-card: 0 1px 2px rgba(60,40,20,.05), 0 6px 16px rgba(60,40,20,.07), 0 14px 34px rgba(60,40,20,.06); --radius-card: 18px; --radius-input: 12px; } :root[data-skin='warm'][data-theme='dark'] { --bg: #191712; --surface: #232019; --surface-alt: #2b2720; --text: #f3efe7; --muted: #a49b8b; --border: #38332a; --hairline: rgba(255,250,240,.09); --link: #e89a7e; --accent: #cc6a45; --accent-hover: #dd8163; --accent-soft: rgba(221,129,99,.16); --success: #6fc487; --success-bg: rgba(111,196,135,.14); --warning: #dcb265; --warning-bg: rgba(220,178,101,.13); --danger: #e8776b; --danger-bg: rgba(232,119,107,.14); --info-bg: rgba(221,129,99,.12); --chip-bg: #322d24; --nav-bg: rgba(25,23,18,.72); --shadow-card: 0 1px 2px rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.4); } @media (prefers-color-scheme: dark) { :root[data-skin='warm']:not([data-theme='light']) { --bg: #191712; --surface: #232019; --surface-alt: #2b2720; --text: #f3efe7; --muted: #a49b8b; --border: #38332a; --hairline: rgba(255,250,240,.09); --link: #e89a7e; --accent: #cc6a45; --accent-hover: #dd8163; --accent-soft: rgba(221,129,99,.16); --success: #6fc487; --success-bg: rgba(111,196,135,.14); --warning: #dcb265; --warning-bg: rgba(220,178,101,.13); --danger: #e8776b; --danger-bg: rgba(232,119,107,.14); --info-bg: rgba(221,129,99,.12); --chip-bg: #322d24; --nav-bg: rgba(25,23,18,.72); --shadow-card: 0 1px 2px rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.4); } } /* ── 추가 스킨 (ocean·forest·violet·rose) — 뉴트럴+액센트만 재정의, 의미색(성공/경고/위험)은 classic 상속. 각 라이트/다크. site.theme='random' 이면 진입마다 서버가 무작위 선택. ── */ :root[data-skin='ocean'] { /* 크리스프·플랫·테크 — 각진 모양, 얕은 그림자 */ --bg:#f5f8fc; --surface:#fff; --surface-alt:#eaf0f8; --text:#152230; --muted:#5c6b7d; --border:#d9e3ef; --hairline:rgba(20,40,70,.08); --link:#255a92; --accent:#2f6db0; --accent-hover:#255a92; --accent-soft:rgba(47,109,176,.10); --chip-bg:#eaf0f8; --nav-bg:rgba(245,248,252,.74); --radius-card:9px; --radius-input:8px; --radius-pill:9px; --shadow-card:0 1px 2px rgba(20,40,70,.07), 0 3px 8px rgba(20,40,70,.05); } :root[data-skin='ocean'][data-theme='dark'] { --bg:#0f151d; --surface:#172230; --surface-alt:#1f2c3c; --text:#e9f0f8; --muted:#8fa1b5; --border:#2a3846; --hairline:rgba(200,220,255,.09); --link:#7fb2e0; --accent:#4a86c4; --accent-hover:#66a0da; --accent-soft:rgba(74,134,196,.18); --chip-bg:#1f2c3c; --nav-bg:rgba(15,21,29,.74); } :root[data-skin='forest'] { /* 오가닉·라운드·소프트 — 큰 곡률, 부드럽고 넓은 그림자 */ --bg:#f5f8f3; --surface:#fff; --surface-alt:#eaf1e7; --text:#182018; --muted:#5c6a58; --border:#dde6d7; --hairline:rgba(20,40,20,.08); --link:#336635; --accent:#3f7d43; --accent-hover:#336635; --accent-soft:rgba(63,125,67,.10); --chip-bg:#eaf1e7; --nav-bg:rgba(245,248,243,.74); --radius-card:24px; --radius-input:16px; --radius-pill:999px; --shadow-card:0 3px 10px rgba(30,55,25,.09), 0 16px 36px rgba(30,55,25,.08); } :root[data-skin='forest'][data-theme='dark'] { --bg:#0f140e; --surface:#191f18; --surface-alt:#212a20; --text:#eaf1e7; --muted:#95a48f; --border:#2b3529; --hairline:rgba(210,255,210,.08); --link:#7cc182; --accent:#52a05b; --accent-hover:#6bb571; --accent-soft:rgba(82,160,91,.18); --chip-bg:#212a20; --nav-bg:rgba(15,20,14,.74); } :root[data-skin='violet'] { /* 볼드·바이브런트 — 깊고 컬러 글로우 도는 그림자 */ --bg:#f8f6fc; --surface:#fff; --surface-alt:#f0ecf8; --text:#1b1824; --muted:#645d75; --border:#e5def1; --hairline:rgba(40,20,70,.08); --link:#5a39a4; --accent:#6d47c2; --accent-hover:#5a39a4; --accent-soft:rgba(109,71,194,.10); --chip-bg:#f0ecf8; --nav-bg:rgba(248,246,252,.74); --radius-card:16px; --radius-input:12px; --shadow-card:0 4px 12px rgba(60,30,120,.13), 0 18px 44px rgba(109,71,194,.16); } :root[data-skin='violet'][data-theme='dark'] { --bg:#14111d; --surface:#1e1a29; --surface-alt:#272134; --text:#efeaf7; --muted:#a59bb8; --border:#332c44; --hairline:rgba(220,200,255,.09); --link:#ac97f2; --accent:#8a70d6; --accent-hover:#a186e2; --accent-soft:rgba(138,112,214,.18); --chip-bg:#272134; --nav-bg:rgba(20,17,29,.74); } :root[data-skin='rose'] { /* 에디토리얼·샤프·미니멀 — 각진 모서리, 헤어라인 느낌의 얕은 그림자 */ --bg:#fcf6f8; --surface:#fff; --surface-alt:#f8edf1; --text:#211820; --muted:#74606a; --border:#f0dee6; --hairline:rgba(70,20,40,.08); --link:#a4395f; --accent:#c04674; --accent-hover:#a4395f; --accent-soft:rgba(192,70,116,.10); --chip-bg:#f8edf1; --nav-bg:rgba(252,246,248,.74); --radius-card:5px; --radius-input:5px; --radius-pill:6px; --shadow-card:0 1px 1px rgba(70,20,40,.05); } :root[data-skin='rose'][data-theme='dark'] { --bg:#1a1116; --surface:#241a20; --surface-alt:#2e222a; --text:#f6eaf0; --muted:#b79ba8; --border:#3d2c36; --hairline:rgba(255,210,230,.09); --link:#e89ab6; --accent:#d0668e; --accent-hover:#dc82a4; --accent-soft:rgba(208,102,142,.18); --chip-bg:#2e222a; --nav-bg:rgba(26,17,22,.74); } @media (prefers-color-scheme: dark) { :root[data-skin='ocean']:not([data-theme='light']) { --bg:#0f151d; --surface:#172230; --surface-alt:#1f2c3c; --text:#e9f0f8; --muted:#8fa1b5; --border:#2a3846; --hairline:rgba(200,220,255,.09); --link:#7fb2e0; --accent:#4a86c4; --accent-hover:#66a0da; --accent-soft:rgba(74,134,196,.18); --chip-bg:#1f2c3c; --nav-bg:rgba(15,21,29,.74); --shadow-card:0 1px 2px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.4); } :root[data-skin='forest']:not([data-theme='light']) { --bg:#0f140e; --surface:#191f18; --surface-alt:#212a20; --text:#eaf1e7; --muted:#95a48f; --border:#2b3529; --hairline:rgba(210,255,210,.08); --link:#7cc182; --accent:#52a05b; --accent-hover:#6bb571; --accent-soft:rgba(82,160,91,.18); --chip-bg:#212a20; --nav-bg:rgba(15,20,14,.74); --shadow-card:0 4px 12px rgba(0,0,0,.48), 0 18px 40px rgba(0,0,0,.4); } :root[data-skin='violet']:not([data-theme='light']) { --bg:#14111d; --surface:#1e1a29; --surface-alt:#272134; --text:#efeaf7; --muted:#a59bb8; --border:#332c44; --hairline:rgba(220,200,255,.09); --link:#ac97f2; --accent:#8a70d6; --accent-hover:#a186e2; --accent-soft:rgba(138,112,214,.18); --chip-bg:#272134; --nav-bg:rgba(20,17,29,.74); --shadow-card:0 4px 14px rgba(0,0,0,.5), 0 20px 46px rgba(138,112,214,.24); } :root[data-skin='rose']:not([data-theme='light']) { --bg:#1a1116; --surface:#241a20; --surface-alt:#2e222a; --text:#f6eaf0; --muted:#b79ba8; --border:#3d2c36; --hairline:rgba(255,210,230,.09); --link:#e89ab6; --accent:#d0668e; --accent-hover:#dc82a4; --accent-soft:rgba(208,102,142,.18); --chip-bg:#2e222a; --nav-bg:rgba(26,17,22,.74); --shadow-card:0 1px 2px rgba(0,0,0,.5); } } /* ── 버튼 배경 전용 액센트 (a11y — 흰 글씨 WCAG AA 4.5:1) ───────────────────────── --accent 는 '텍스트·링크·테두리·브랜드'용 색이라 배경 대비 기준으로 정해진다(다크에선 밝게). 그런데 **채운 버튼(흰 글씨)** 에 그대로 쓰면 흰 글씨 대비가 3.1~3.9 로 AA(4.5) 미달이었다 — 버튼 라벨은 15px·weight 600 이라 large-text 3:1 예외에 해당 안 됨(QA-20260724 §11.5). 그래서 **버튼/배지 배경만** 별도 토큰으로 분리: 흰 글씨 4.5:1 을 만족하는 값(hue 유지). 브랜드 색(--accent·로고·파비콘)은 그대로 둔다. test_theme_contrast 가 12개 변형 전부 잠근다. */ :root { --accent-btn: #bd5836; } /* classic-L (brand #c96442=3.90→버튼만 어둡게) */ :root[data-skin='warm'] { --accent-btn: #bc5836; } :root[data-skin='ocean'] { --accent-btn: #2f6db0; } /* 이미 5.34 — accent 그대로 */ :root[data-skin='forest'] { --accent-btn: #3f7d43; } :root[data-skin='violet'] { --accent-btn: #6d47c2; } :root[data-skin='rose'] { --accent-btn: #c04674; } :root[data-theme='dark'] { --accent-btn: #c4522c; } :root[data-skin='warm'][data-theme='dark'] { --accent-btn: #bd5934; } :root[data-skin='ocean'][data-theme='dark'] { --accent-btn: #3c79b8; } :root[data-skin='forest'][data-theme='dark'] { --accent-btn: #43844b; } :root[data-skin='violet'][data-theme='dark'] { --accent-btn: #8063d2; } :root[data-skin='rose'][data-theme='dark'] { --accent-btn: #c74878; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --accent-btn: #c4522c; } :root[data-skin='warm']:not([data-theme='light']) { --accent-btn: #bd5934; } :root[data-skin='ocean']:not([data-theme='light']) { --accent-btn: #3c79b8; } :root[data-skin='forest']:not([data-theme='light']) { --accent-btn: #43844b; } :root[data-skin='violet']:not([data-theme='light']) { --accent-btn: #8063d2; } :root[data-skin='rose']:not([data-theme='light']) { --accent-btn: #c74878; } } /* ── accent 텍스트 전용 (a11y — accent 를 '읽는 텍스트'로 쓸 때 배경 대비 AA 4.5) ────────── 라이트 classic/warm 은 브랜드색을 텍스트로 쓰면 밝은 배경 대비 3.77/4.11 로 AA 미달이다. 그래서 **읽는 텍스트에만** 접근성 변형(hue 유지·약간 어둡게). 로고·파비콘·테두리·브랜드 마크의 --accent(#c96442)는 불변(로고는 WCAG 대비 예외). 나머지 테마는 --accent 그대로. */ :root { --accent-ink: #b95635; } /* classic-L (brand #c96442=text 3.77) */ :root[data-skin='warm'] { --accent-ink: #b65534; } :root[data-skin='ocean'], :root[data-skin='forest'], :root[data-skin='violet'], :root[data-skin='rose'] { --accent-ink: var(--accent); } :root[data-theme='dark'], :root[data-skin][data-theme='dark'] { --accent-ink: var(--accent); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']), :root[data-skin]:not([data-theme='light']) { --accent-ink: var(--accent); } } /* 인쇄 — 앱 UI(내비·푸터·플래시·FAB) 숨겨 문서만 출력. .no-print = 화면 전용(버튼 등). */ @media print { /* 인쇄는 항상 라이트 팔레트 — 다크 모드(수동·OS 자동)로 인쇄해도 흰 배경에 검은 글씨(가독). 기존엔 배경만 흰색이라 다크 화면에서 인쇄 시 밝은 글씨가 사라졌다. 다크 선택자를 모두 override. */ :root, :root[data-skin], :root[data-theme='light'], :root[data-theme='dark'], :root:not([data-theme='light']), :root[data-skin][data-theme='dark'] { color-scheme: light; --bg: #ffffff; --surface: #ffffff; --surface-alt: #f5f5f6; --text: #1a1a19; --muted: #555559; --border: #d5d5d8; --hairline: rgba(0,0,0,.14); --link: #b0512f; --accent: #b0512f; --accent-hover: #ae5630; --accent-soft: rgba(201,100,66,.10); --success: #1f7a34; --success-bg: #e8f5ec; --warning: #7a6010; --warning-bg: #f8f1dc; --danger: #b5271a; --danger-bg: #fbeae7; --info-bg: rgba(201,100,66,.08); --chip-bg: #eeeeef; --on-accent: #ffffff; --shadow-card: none; } .nav, .footer, .flashes, .support-fab, .skip-link, .no-print, .lc-progress { display: none !important; } body { background: #fff; color: var(--text); } }