/* ============================================================ BLOCKFESTA 2026 — 다크 테마 토큰 (사이트 배포판) 단일 테마. 라이트 변형은 없다. 색상(hue)은 발명이 아니라 도출된 것이다: 로고 마크(#7EACDC)와 블록미디어(#337ABD) 모두 약 210도에 위치한다. 이 아주르가 패밀리 컬러다. 모든 대비 수치는 --bf-bg 기준 측정값. 토큰은 이 파일 하나뿐이다. 예전에는 design/tokens.css 사본이 따로 있었으나 지웠다(2026-08-19) — 나란히 고쳐야 했고, 한쪽만 고치면 사이트는 그대로였다. 여기 없는 색은 어디에도 없다. ============================================================ */ :root { /* --- 표면 ------------------------------------------------ */ --bf-bg: #0B0D12; /* 그라파이트 베이스 */ --bf-surface: #12151D; /* 프로그램 행, 연사 카드 */ --bf-surface-hi: #1B2029; /* 호버 / 상승 표면 */ /* 선은 두 단이다(2026-08-19). 예전에는 한 값이 카드 테두리도 섹션 구분선도 겸했는데, 하는 일이 다르면 굵기도 달라야 한다. 표면끼리는 갈라지지 못한다 — surface 와 bg 의 차이가 1.06:1 뿐이라 상자의 경계는 사실상 선 하나가 혼자 진다. 입력칸만은 취향이 아니다 — 칸을 알아보게 하는 경계는 WCAG 1.4.11 이 3:1 을 요구한다. 이 줄의 상대는 bg 가 아니라 칸 자신의 채움(surface)이고 그쪽이 더 어렵다: #525F7A 는 bg 에는 3.03 이지만 surface 에는 2.85 로 모자랐다. 지금 값은 안쪽 3.18, 바깥쪽 3.39 로 양쪽을 다 넘는다. */ --bf-hairline: #2F3747; /* 1.63:1 상자 테두리 — 카드·칩·판 */ --bf-rule: #434F66; /* 2.36:1 구조선 — 섹션·머리말·이음매 */ --bf-field-line: #586686; /* 3.39:1 입력칸 — 위 설명 참고 */ /* --- 아주르 램프, hue 210.5 ------------------------------ */ --bf-100: #B5D1EE; /* 12.33:1 헤드라인 강조 */ --bf-200: #8DB7E2; /* 9.26:1 강조 텍스트, 아이브로우 — AAA */ --bf-300: #629DDA; /* 6.81:1 링크, 활성 내비게이션 — AA+ */ --bf-400: #3886D6; /* 5.14:1 아이콘, 테두리, 포커스 링 — AA */ --bf-500: #2071C5; /* 3.91:1 UI 전용 — 본문 텍스트 금지 */ --bf-600: #135DAA; /* 2.94:1 보조 버튼 채움 (흰 라벨 6.62) */ --bf-700: #0A498A; /* 2.16:1 씬 구조 지오메트리, 스파인 레일 */ --bf-800: #053566; /* 1.58:1 깊은 그림자, 씬 원거리 감쇠 */ /* 로고 블루는 별도 토큰 — 램프 단계가 아니라 마크의 색이다 */ --bf-mark: #7EACDC; /* 브랜드 시안 — 램프 밖의 색이다(2026-09-04, 디자인 파일 '헤더 타이틀 후보.svg'). 히어로 표제의 낱말 하나와 그 아래 화살표에만 쓴다: 한 화면에 한 번 나오는 색이라야 표제가 서고, 두 번째 자리에 쓰는 순간 아주르와 다투기 시작한다. 그라파이트 위에서 13.07:1 — 램프의 가장 밝은 단(--bf-100, 12.33:1)보다도 밝으므로 대비는 문제가 되지 않는다. */ --bf-cyan: #43E7FF; /* 히어로 표제 벡터의 색 둘(2026-09-06, 디자이너 아트보드 그대로 — 사용자 지시 "색은 svg 대로"). 표제 위아래의 선과 결론 한 줄. 램프 밖의 값이지만 토큰으로 들여 규칙을 지킨다. 흰 글과 청록은 아트보드가 --bf-fg(한 단위 차이), --bf-cyan(같음)과 맞아 새 토큰이 필요 없었다. */ --bf-hero-line: #233047; --bf-hero-sub: #D7DEE9; /* --- 발광 (히어로 씬, 가산 블렌딩) ----------------------- */ --bf-glow-core: #7FC4FF; /* 이동하는 발광 신호 */ --bf-glow-halo: #2071C5; /* 블룸 감쇠 */ /* --- 텍스트 ---------------------------------------------- */ --bf-fg: #F2F5FA; --bf-fg-muted: #97A1B4; --bf-fg-faint: #5C6577; /* 라벨·태그 전용 — 숫자·시간 금지 */ /* --- 액션 ------------------------------------------------ 기본 액션은 라이트-온-다크로 남는다 — 페이지에서 가장 밝은 면이 곧 가장 중요한 동작이다. 보조 액션은 채운 아주르다(2026-08-11 변경). 아웃라인은 칩이 쓰므로, 버튼이 같은 옷을 입으면 무엇이 눌리는지 알 수 없다. 채움은 600, 호버는 700 — 밝은 라벨이 각각 6.4:1과 9.6:1이다. 500까지 밝히면 4.3:1로 AA 아래이므로 호버는 어두워진다. */ --bf-cta-bg: #F2F5FA; /* 기본 버튼 채움 */ --bf-cta-fg: #0B0D12; /* 해당 채움 위 라벨 16.4:1 */ --bf-cta-bg-hover: #FFFFFF; /* 파트너 로고를 얹는 판. 새 색이 아니라 위의 흰색과 같은 값이다. 순백이어야 하는 이유는 하나다: 배경이 통째로 박힌 로고 파일이 흔한데, 판이 조금이라도 회색이면 그 흰 사각형이 드러난다. */ --bf-plate: #FFFFFF; /* 로고 판 */ /* 채움은 반투명이고 테두리는 실선이다 — 면은 배경을 비추고 가장자리는 또렷하다. 흐림 효과는 쓰지 않는다. 그라파이트 위에서 55%는 대략 #203B5D로 앉아 밝은 라벨과 10.4:1, 호버의 78%에서도 9:1 언저리다. */ --bf-cta-2-bg: color-mix(in srgb, var(--bf-600) 55%, transparent); --bf-cta-2-bg-hover: color-mix(in srgb, var(--bf-600) 78%, transparent); --bf-cta-2-border: var(--bf-600); --bf-cta-2-fg: var(--bf-fg); /* 문의 단추 — 유일하게 램프 밖의 색이다(2026-09-04, 사용자 지시: "톤앤매너를 파괴하고 비트코인 오렌지"). 아주르만으로는 이 단추가 등록 단추 옆에서 두 번째로 읽혔는데, 스폰서 문의는 두 번째가 아니다. 비트코인 오렌지 #F7931A 를 그대로 쓴다 — 지어낸 색이 아니라 이 바닥이 아는 색이라 튀는 값을 하나 들이는 값을 한다. 글자는 그라파이트다: 오렌지 위의 흰 글자는 2.3:1 로 읽히지 않고, 그라파이트는 8.5:1 이다. 호버는 밝히는 쪽으로 간다 — 라벨이 어두우므로 밝힐수록 대비가 오른다(9.5:1). */ --bf-cta-hot-bg: #F7931A; /* 배경 위 8.5:1 */ --bf-cta-hot-bg-hover: #FF9F2E; /* 그 위 그라파이트 라벨 9.5:1 */ --bf-cta-hot-fg: #0B0D12; /* --- 스폰서 등급 ----------------------------------------- 두 번째 색상 패밀리가 정당화되는 유일한 곳: 등급은 한눈에 구분되어야 하는 계약 정보다. */ --bf-tier-title: #E8D9A8; --bf-tier-platinum: #D3DBE4; --bf-tier-gold: #C9A961; --bf-tier-silver: #8A93A6; /* --- 타이포그래피 ---------------------------------------- 한글과 라틴 모두 Pretendard. BLOCKFESTA는 Pretendard Black 타입으로 조판한다. 워드마크 에셋은 없다. */ /* "Pretendard fallback" 은 폭을 맞춘 시스템 글꼴이다(site.css의 @font-face) — 진짜 글꼴이 오기 전 한 박자를 이것이 메운다. */ --bf-font: "Pretendard Variable", Pretendard, "Pretendard fallback", -apple-system, system-ui, sans-serif; --bf-size-display: 80px; --bf-weight-display: 900; /* 히어로 전용 */ --bf-size-h1: 48px; --bf-weight-h1: 800; --bf-size-h2: 32px; --bf-weight-h2: 700; --bf-size-h3: 22px; --bf-weight-h3: 600; --bf-size-body: 17px; --bf-weight-body: 400; --bf-size-caption: 14px; --bf-weight-caption: 500; /* 데이터, 시간 */ --bf-size-eyebrow: 12px; --bf-weight-eyebrow: 600; /* 라틴 전용 */ /* 한글은 같은 크기의 라틴보다 밀도 높게 읽힌다 — 행간 더 필요 */ --bf-leading-latin: 1.5; --bf-leading-ko: 1.7; /* 음수 자간은 큰 라틴 디스플레이 전용 — 한글에 적용 금지 */ --bf-track-display: -0.025em; --bf-track-body: 0; --bf-track-eyebrow: 0.08em; /* 대문자 라틴 아이브로우 전용 */ /* --- 간격·모서리·모션 (디자인 시스템 확장 토큰) ---------- */ --bf-space-1: 4px; --bf-space-2: 8px; --bf-space-3: 12px; --bf-space-4: 16px; --bf-space-5: 24px; --bf-space-6: 32px; --bf-space-7: 48px; --bf-space-8: 64px; --bf-space-9: 96px; /* 모서리는 조금 부드러워졌다(2026-09-03): 2/4 → 4/8. 그래도 타이트한 편이다 — 기관용이지 컨슈머용이 아니다. 더 키우면 브리프가 금하는 소비자 제품의 말투로 넘어간다. 단은 둘뿐이다. 세 번째(8px)는 로고 판과 등급 칸이 쓰던 것인데, 판을 걷은 뒤 남은 자리가 하나뿐이라 2단으로 합쳤다. */ --bf-radius-1: 4px; --bf-radius-2: 8px; --bf-border: 1px solid var(--bf-hairline); --bf-focus: 0 0 0 2px var(--bf-bg), 0 0 0 4px var(--bf-400); /* 모션 — 페이드와 작은 이동만. 바운스 금지 */ --bf-ease: cubic-bezier(.25, .1, .25, 1); --bf-dur-1: 120ms; --bf-dur-2: 200ms; } /* 한글은 단어 중간 줄바꿈 금지, 대문자 변환 금지 — 한글에 대문자는 없으며 강제하면 버그처럼 보인다. */ :lang(ko) { line-height: var(--bf-leading-ko); word-break: keep-all; letter-spacing: var(--bf-track-body); text-transform: none; }