/* ============================================================================ * tokens.base.css — 브랜드 레이어 * * 담는 것: 로고에서 직접 샘플링한 색 + 로고 형태 규칙 + 대회명 표기 규칙. * 담지 않는 것: 나머지 색·폰트·여백·모션 — 전부 버전별 레이어(tokens.v{n}.css). * 연도·일정·코스 등 콘텐츠 데이터 — data/event.json. * * 출처 : images/logo.png (180×64 RGBA PNG) * https://ryugwansun.com/ 헤더 로고와 SHA-256 바이트 동일 * a5a22561da8c2721a3d23456c4dfaf7c491ff82c511688e63ee1da017b6f31da * 샘플링 : PIL 10.4.0, 원본 파일 픽셀 직접 읽기 (화면 캡처 아님) * 일자 : 2026-07-29 * * 이 레이어는 세 버전(v1/v2/v3) 전부에 동일하게 적용된다. * ==========================================================================*/ /* ══════════════════════════════════════════════════════════════════════════ * 1. 색 — 로고에는 브랜드 컬러가 없다 * ═══════════════════════════════════════════════════════════════════════════ * * 불투명(alpha>200) 픽셀의 distinct RGB = **1개**. 전부 #000000. * 로고는 단색(1-color) 자산이며 브랜드 컬러가 존재하지 않는다. * * 영역별 최빈값 (박스 좌표 = 원본 180×64 픽셀 기준): * * 영역 박스(x0,y0)-(x1,y1) 불투명px 최빈색 * 심볼(태극 4괘) (0,0)-(54,64) 1,077 #000000 100% * 연도(2025) (54,0)-(180,17) 216 #000000 100% * 워드마크(대회명) (54,17)-(180,64) 688 #000000 100% * * 검증 좌표: px(20,20)=(0,0,0,255) px(30,40)=(0,0,0,255) * * 알파 분포: a=255 10.43% / a=0 62.53% / 중간(안티에일리어싱) 27.03% * → distinct RGBA 257개는 전부 검정의 알파 계단이다. 색 변형이 아니다. * → PNG는 무손실이므로 압축 아티팩트로 인한 색 흐림이 없다. * (최빈값을 쓰라는 지시를 따랐고, 결과적으로 최빈값 = 유일값이었다) * * 변형(가로형/세로형/단색/반전) 탐색: **존재하지 않음.** * - 원본 사이트 자산 16개를 네트워크 응답에서 수집해 전수 검사 * - 로고 자산은 헤더의 이 파일 하나뿐. favicon 없음, og:image 없음 * - 컬러 로고는 후원사 마크뿐 (NH #005BAC/#FABD00, 삼성 #13289F) * → 제3자 상표이므로 브랜드 레이어에 넣지 않는다 * ------------------------------------------------------------------------- */ :root { /* 로고에서 샘플링한 유일한 색. 원본 그대로 보존한다. */ --brand-ink: #000000; } /* ── 로고 잉크색 규칙 — 버전별 재지정 허용, 단 조건부 ──────────────────────── * * 단색 로고는 배경에 맞춰 잉크색을 바꿔 쓰라고 단색이다. 검정 고정은 부자연스럽다. * 각 버전은 --logo-ink 를 자기 레이어에서 재지정할 수 있다. 단 아래를 지킨다. * * 허용: 그 버전의 **중립 잉크색** — 무채색 또는 극저채도(권장 S ≤ 10%) * 금지: primary / accent 등 **채도 있는 색으로 로고를 칠하는 것.** * 그 순간 로고가 버전의 장식물이 되고 브랜드가 아니게 된다. * 반전: 어두운 배경에서는 흰색 또는 그 버전의 최명도 중립색 * 기록: 각 버전이 쓴 잉크색과 그 근거를 DESIGN.v{n}.md 에 남긴다 * * 대비: 로고 잉크와 배경은 최소 4.5:1 을 만족해야 한다. * ------------------------------------------------------------------------- */ :root { /* 기본값은 샘플링 원본. 버전 레이어에서 중립색으로 재지정 가능. */ --logo-ink: var(--brand-ink); /* 반전 배경용. 버전 레이어에서 그 버전의 최명도 중립색으로 재지정 가능. */ --logo-ink-inverse: #FFFFFF; } /* ══════════════════════════════════════════════════════════════════════════ * 2. 형태 — 브랜드 컬러가 없으므로 형태가 브랜드 레이어다 * ═══════════════════════════════════════════════════════════════════════════ * * 아래 수치는 전부 원본 파일 픽셀 실측이다 (임계 alpha>128). * * 캔버스 180×64 * 전체 잉크 bbox (6,0)-(166,61) → 161×62 * 심볼 bbox (6,0)-(49,43) → **44×44 (비율 1.0000 — 정확한 정사각)** * 워드마크 bbox (55,1)-(166,61) → 112×61 * 심볼–워드마크 간격 → 5px * * 워드마크 3행 분해: * 연도 "2025" y 1–11 (높이 11) x 58–94 * "유관순평화" y 14–34 (높이 21) x 55–166 * "마라톤대회" y 41–61 (높이 21) x 55–162 * 행간격: 연도→1행 2px / 1행→2행 6px * * 원본 내장 여백: 좌 6 / 우 13 / 상 0 / 하 2 (불균일 — clear space로 신뢰 불가) * ------------------------------------------------------------------------- */ :root { /* ── 심볼 기준 단위 ────────────────────────────────────────────────────── * 4괘 블록은 정확한 정사각(44×44)이다. 모든 로고 규칙의 기준 단위로 삼는다. * S = 심볼 한 변. 아래 배수 규칙은 S에 비례하므로 크기와 무관하게 성립한다. */ --logo-symbol-ratio: 1; /* 44:44 — 정사각. 절대 왜곡 금지 */ /* ── clear space — 심볼 높이(S) 기준 배수 ─────────────────────────────── * 원본 내장 여백은 좌6/우13/상0/하2 로 불균일하다. 그대로 쓰면 안 된다. * 로고 주위에 어떤 요소도 침범할 수 없는 영역을 S 배수로 재정의한다. * * 0.5S 근거: 워드마크 행간격 최대값 6px ≈ 0.14S 의 약 3.5배. * 로고 내부 최대 여백보다 확실히 크게 잡아야 외부와 내부가 구분된다. */ --logo-clear-space: 0.5; /* × 심볼 한 변 */ --logo-clear-space-min: 0.25; /* 모바일 헤더 등 공간 제약 시 하한 */ /* ── 최소 크기 — 실측 기반 ────────────────────────────────────────────── * 단계별 축소 렌더링 후 육안 판독. 자산에 따라 값이 다르다. * * logo.png (3행: 연도+2행 워드마크) * 140px 획 분리 유지, 판독 명료 ← 하한 * 120px 판독 가능하나 획 간격이 조이기 시작 * 100px 4괘 사이 간격이 메워지기 시작 / 80px 판독 불가 * * logo-no-year.png (2행) — 행이 줄어 같은 폭에서 글자가 커지므로 하한이 내려간다 * 120px 명료 / 110px 판독 명료 ← 하한 * 100px 저하 시작 / 80px 판독 불가 */ --logo-min-width: 110px; /* 기본 자산(logo-no-year.png, 2행 락업) */ --logo-min-width-dated: 140px; /* 연도 포함 원본(logo.png, 3행 락업) */ /* 심볼 단독은 별도 하한. 44×44 원본을 축소 렌더링해 판독한 결과: * 24px 괘의 막대가 아직 분리되어 보임 ← 하한 * 16px 막대가 서로 붙어 회색 덩어리가 됨 * → 심볼 단독은 24px 이상. */ --logo-symbol-min: 24px; /* ── 심볼–워드마크 상대 위치 (실측 5px / 44px = 0.1136S) ──────────────── * 가로 락업에서 심볼과 워드마크 사이 간격. */ --logo-gap: 0.114; /* × 심볼 한 변 */ } /* ── 정렬 기준선 — 자산에 따라 다르다 ⚠️ ──────────────────────────────────── * * logo.png(3행) logo-no-year.png(2행) * 심볼 상단 vs 워드마크 상단 1px 차 14px 차 * 심볼 하단 vs 워드마크 하단 18px 차 18px 차 * 심볼 높이 vs 워드마크 높이 44 vs 61 44 vs 48 (거의 같음) * * → 원본 3행 락업은 **상단 정렬**이다 (심볼 상단과 워드마크 상단이 1px 차). * 심볼이 위 2행 높이에 걸치고 3행("마라톤대회")이 심볼 아래로 내려오는 구조. * * → 2행 파생은 심볼(44)과 워드마크(48) 높이가 거의 같아져서 * **세로 중앙 정렬**이 자연스럽다. 상단 정렬하면 아래가 14px 비어 보인다. * * 자산을 바꿔 쓸 때 정렬 규칙도 함께 바꿀 것. 상세: images/LOGO-ASSETS.md * ------------------------------------------------------------------------- */ :root { --logo-align: center; /* 기본 자산(2행) — 세로 중앙 정렬 */ --logo-align-dated: flex-start;/* 연도 포함 원본(3행) — 상단 정렬 */ } /* ── 심볼 단독 사용 허용 조건 ──────────────────────────────────────────────── * * 4괘 심볼은 정사각이라 좁은 정사각 슬롯에 적합하다. 아래에서만 단독 사용한다. * * 허용: favicon / 앱 아이콘 / 모바일 헤더(가용 폭 < --logo-min-width) * / 스크롤 후 축소된 고정 헤더 / 푸터 보조 마크 * / 로딩 인디케이터 / 소셜 프로필 이미지 * 금지: 페이지에서 대회를 **처음 식별하는 자리** — 여기엔 전체 락업을 쓴다. * 한 화면에 심볼 단독과 전체 락업을 동시에 노출하는 것. * * 단독 사용 시 대회명은 인접 텍스트로 반드시 병기한다(스크린리더 포함). * ------------------------------------------------------------------------- */ /* ── 4괘 블록 파생 사용 — 조건부 허용 ──────────────────────────────────────── * * 4괘 블록은 우리 자산이다. 그래픽 장치로 파생해 쓸 수 있다. * (구분선 / 섹션 마커 / 그리드 모티프 / 스크롤 인디케이터 등) * * ✅ 참조 가능 — 4괘 블록의 **기하**: * · 정사각 2×2 사분면 구조 (실측 잉크량 좌상344 / 우상330 / 좌하308 / 우하296 * → 네 괘가 거의 균등한 무게로 배치돼 있다) * · 막대(효)의 반복과 끊김이 만드는 리듬 * · 정사각 비율 자체 * * ❌ 금지: * · 태극 문양 자체의 변형·왜곡 * · 4괘의 기하를 비정사각으로 늘리거나 기울이는 것 * · 국가 상징에 대한 장난스럽거나 가벼운 처리 * (튕기는 모션, 캐릭터화, 이모지 병치 등) * * ⚠️ 세 버전이 **같은 방식으로 파생하면 안 된다.** 파생 방식이 서로 달라야 한다. * 쓸지 말지는 각 버전에서 판단한다. **안 써도 된다. 억지로 넣지 말 것.** * 사용했다면 무엇을 어떻게 파생했는지 DESIGN.v{n}.md 에 기록한다. * ------------------------------------------------------------------------- */ /* ══════════════════════════════════════════════════════════════════════════ * 3. 대회명 표기 규칙 * ═══════════════════════════════════════════════════════════════════════════ * * 원본 사이트는 표기가 일관되지 않다 (관측): * "2025 유관순 평화 마라톤 대회" 히어로 * "천안 유관순 평화 마라톤 대회" 본문 섹션 / og:title 후반부 * "유관순평화마라톤대회" og:site_name / 앞부분 * "유관순 마라톤" 본문 축약 * * 로고 자산의 실제 조판은 3행 = "2025" / "유관순평화" / "마라톤대회" * (행 안에서는 띄어쓰기 없음, 행 사이에서만 분절) * * 세 버전이 표기를 통일하도록 아래를 규칙으로 삼는다. * ------------------------------------------------------------------------- * * [정식 명칭] 유관순 평화 마라톤 대회 * [연도 포함] {YYYY} 유관순 평화 마라톤 대회 ← 페이지 타이틀·히어로 * [지역 포함] 천안 유관순 평화 마라톤 대회 ← 대회 개요·공식 안내문 * [축약] 유관순 평화 마라톤 ← 본문 2회차 이후 언급 * [로고 조판] {YYYY} / 유관순평화 / 마라톤대회 ← 로고 이미지 안에서만 * * 금지: * · "유관순마라톤" (평화 누락) — 대회 정체성의 핵심 단어다 * · 로고 조판(붙여쓰기)을 본문에 그대로 쓰는 것 * · 영문 병기 임의 생성 — 원본에 영문 공식 표기가 없다 * * {YYYY} 는 data/event.json 의 year 를 참조한다. 여기에 연도를 두지 않는다. * (연도는 시각 토큰이 아니라 콘텐츠 데이터다) * ------------------------------------------------------------------------- */