/* 기브온 웹사이트 색·서체 토큰 출처: 로고 픽셀 실측 (00_REF/로고/gibeon-label-5219.png · gibeon-lockup-gold.png, 2026-08-18) 05_DOCS/발표자료/tokens.css 와 03_DEV/tooltokens.css 는 상속하지 않는다 — 이 파일이 이 사이트의 정본. ※ 03_DEV/CLAUDE.md 머리 4줄(히어로 금지·다크 고정)은 **내부 도구** 규범이다. 이 사이트는 대외 표면이므로 해당하지 않는다 — 히어로가 있다. 표면 2종. 기본은 A, 강조 구간은 D. 전환은 . (B 웜다크 · C 라이트 반전은 2026-08-18 후보에서 뺐다 — 색_시스템_v3.html 에 기록만 남음) 근거·비교: 색_시스템_v3.html · 히어로_v1.md §4 */ :root { /* 브랜드 상수 — 표면이 바뀌어도 값 자체는 안 변한다 */ --brand-gold: #EFB22C; /* 워드마크 골드 (실측) */ --brand-gold-band: #F5B42C; /* 밴드 골드 (실측) */ --brand-warm: #332D2B; /* 웜블랙 (실측) */ --brand-rich: #232323; /* 리치블랙 (실측) */ /* 서체 — 로고는 Futura Medium (2026-08-18 대표 확인, 어도비 수급). Medium = weight 500. 브랜드 조판에는 --face-weight 를 같이 쓴다. ⧗ 웹 배포 시 Adobe Fonts 웹 프로젝트로 임베드해야 한다 (데스크톱 활성화는 웹 라이선스 아님). Windows에는 Futura가 없어 그 전까지는 대체 서체로 떨어진다. */ --face-brand: "Futura PT", Futura, Jost, "Century Gothic", "Avenir Next", sans-serif; --face-weight: 500; } /* ── 표면 A · 심부 다크 + 발광 (기본) ───────────────────── */ :root { --bg: #0B0A09; --logo: #EFB22C; /* 대비 10.4 */ --accent: #F6D488; /* 단어·링크 · 대비 13.8 */ --text: #EAE6E1; /* 대비 15.9 */ --muted: #8A7A75; /* 대비 4.8 */ --line: #272221; --btn-bg: var(--accent); --btn-fg: #0B0A09; } /* ── 표면 D · 골드 필드 ────────────────────────────────── */ [data-theme="d"] { --bg: #EFB22C; --logo: #332D2B; /* 대비 7.1 */ --accent: #332D2B; /* 단어·링크 · 대비 7.1 */ --text: #37312F; /* 대비 6.7 */ --muted: #594E4B; /* 대비 4.2 */ --line: #B88C2E; --btn-bg: var(--accent); --btn-fg: #EFB22C; } /* 브랜드 조판(영문 라벨·히어로 단어)은 --face-brand 를 쓴다 */ /* 로고는 mask로 칠한다 — SVG를 인라인으로 여러 벌 박지 않는다. */ .logo { aspect-ratio: 3.89 / 1; background: var(--logo); -webkit-mask: url(brand/gibeon-lockup.svg) no-repeat left center/contain; mask: url(brand/gibeon-lockup.svg) no-repeat left center/contain; } /* 테마 전환이 필요해지면 이 한 줄이면 된다: document.documentElement.dataset.theme = 'd' (기본 A는 속성 없음) */