/* ============================================================================ * tokens.v1.css — v1 수채화 · 사료(史料) * * 출처 이미지: images/ChatGPT Image 2026년 7월 28일 오후 10_13_04.png (1916×821) * 샘플링: PIL, 원본 픽셀 직접 읽기. 양자화 24색 + 영역별 최빈값 + HSL 분포. * 일자: 2026-07-29 * * 이 파일은 v1 전용이다. 브랜드 레이어(tokens.base.css)를 덮어쓰지 않는다. * ==========================================================================*/ /* ── 샘플링 원본 기록 ──────────────────────────────────────────────────────── * * 양자화 24색 중 상위(비율순): * #484038 6.68% #5B574F 5.49% #252420 5.14% #AC9D8A 4.95% #8E8476 4.73% * #FCF6E8 4.67% #F8F0E1 4.61% #DFD7C9 4.49% #CDC1B0 4.48% #B8AC9C 4.38% * #6E6558 4.19% #E5DED1 4.06% #D2CBBF 4.04% #F1E9D9 3.96% * * 영역별 최빈색 (박스 = 원본 픽셀 좌표): * 하늘/종이(좌상) (38,24)-(670,246) #FBF4E4 H42 S74 L94 * 좌측 여백(중단) (38,287)-(574,509) #FBF6E9 H43 S69 L95 * 석재 광장(좌하) (38,591)-(670,796) #DFD3C0 H37 S33 L81 * 원경 산/나무 (38,509)-(421,615) #F2EAD9 H41 S49 L90 * 기념관 지붕(암부) (996,328)-(1379,410) 평균 #988B7C * 인물 치마(암) (1226,509)-(1360,697) 평균 #3F3A33 * * 깃발 영역의 채도색 — 좌표 지정이 아니라 색상 탐색으로 추출(수채 번짐 때문): * 따뜻한 계열 #B1634B (H14 S41 L49) — 최빈. 인접 #A6553F #944733 * 차가운 계열 #24344D (H217 S36 L22) — 최빈. 인접 #1C3254 #20314C * * ⚠️ 이 값들은 **수채화 이미지의 깃발 영역에서 샘플링한 v1 고유의 색**이다. * **태극기 규정색이 아니다.** 물감으로 흐려진 값이며 국가 상징 규정과 무관하다. * 브랜드 레이어에 국가 상징색을 올리는 안은 이미 기각됐다(관공서 톤 + 세 버전 동질화). * 혼동을 막기 위해 토큰 이름에 "태극"을 쓰지 않는다. * * 극값: 최암 #000000 / 최명 #FFFFF6 / 둘 사이 대비 20.89:1 * * ⚠️ 저채도 함정 진단 — 이미지를 그대로 토큰화하면 안 되는 이유: * 명도 분포: L80–99 구간에 **45.7%** 가 몰려 있고 L<20 은 5.5% 뿐이다. * 채도 분포: S<30 이 59.0%. * → 이미지 색을 그대로 UI에 쓰면 전체가 흐리멍덩해진다. * → 아래처럼 **역할별로 재배치**한다: * · 이미지의 저채도 고명도 색 → 배경 / 서피스 / 보더 (원본 값 유지) * · 텍스트 잉크 → 이미지 최암부(#252420, 인물 치마 #3F3A33)를 기준으로 하되 * **AA 4.5:1 을 넘도록 별도 조정**한 값을 쓴다 (원본 그대로 아님) * · 깃발 영역 따뜻한 색 → 원본 #B1634B 는 텍스트로 쓰면 4.09:1 로 AA 미달. * 텍스트용은 #8F4632 로 darken. 원본 값은 그래픽 액센트 전용. * ------------------------------------------------------------------------- */ :root { /* ══ 배경 — 이미지 저채도 고명도 색을 원본 그대로 ══════════════════════ */ --v1-paper: #FBF6E9; /* 좌측 여백 최빈. 페이지 기본 배경 */ /* ⚠️ 2026-08-19 — 채도를 크게 낮췄다. * 원본 양자화값(surface S46 · sunken S28)은 **면으로 깔면 누렇게 읽힌다.** * 히어로 이미지에서 뽑은 값이라 근거는 있었지만, 이미지 안에서 작은 얼룩으로 * 존재하던 색을 화면 절반짜리 배경으로 쓰면 성질이 달라진다. * → 색상(H)은 유지하고 **채도만** 낮춰 거의 흰 지면으로 만든다. * 따뜻한 기는 남기되 '누런 판'이 되지 않는 선이다. * 이전값: surface #F1E9D9 · sunken #E5DED1 · border #CDC1B0 · soft #DFD7C9 */ --v1-surface: #FAFAF8; /* 카드·패널. H60 S14 L98 */ --v1-sunken: #F4F4F1; /* 함몰 영역·코드블록. H60 S12 L95 */ --v1-border: #DCD9D2; /* 보더·구분선. H43 S13 L84 */ --v1-border-soft: #EAE8E3; /* 약한 구분선 */ /* ══ 잉크 — AA 보장을 위해 이미지 최암부에서 조정 ══════════════════════ * 이미지 최암 #252420 계열을 기준으로 채도/명도를 조정해 대비를 확보했다. * 실측 대비 (paper #FBF6E9 위): * --v1-ink 15.88:1 --v1-ink-2 11.04:1 --v1-ink-3 6.66:1 */ --v1-ink: #1F1B15; /* 본문·헤드라인. 15.88:1 ✅ */ --v1-ink-2: #3D362C; /* 부제·라벨. 11.04:1 ✅ */ --v1-ink-3: #5B574F; /* 보조 텍스트. 6.66:1 ✅ (양자화 팔레트 원본값) */ /* --v1-ink-3 를 --v1-border 위에 쓰면 4.06:1 로 AA 미달 → 보더 위 텍스트 금지 */ /* ══ 액센트 — 이미지에서 유일하게 채도가 높은 지점 ════════════════════ * "차분하다"와 "흐리다"는 다르다. 이 두 색이 v1에서 확실히 진한 자리다. * * ⚠️ 출처는 히어로 이미지의 **깃발 영역 샘플링**이다. 태극기 규정색이 아니다. * 수채 물감으로 흐려진 v1 고유의 색이며 국가 상징 규정과 무관하다. */ --v1-accent: #8F4632; /* 깃발 따뜻한 색 darken. **텍스트용** 6.30:1 ✅ */ --v1-accent-raw: #B1634B; /* 깃발 따뜻한 색 원본. 그래픽 전용(텍스트 금지) */ --v1-deep: #24344D; /* 깃발 차가운 색 원본. 11.63:1 ✅ 텍스트 가능 */ /* 히어로 이미지 위 반전 텍스트용 */ --v1-on-image: #FFFFFF; /* ── 어두운 지면 — 대회 이야기 페이지 전용 ────────────────────────────── * 새 색을 들여오지 않는다. --v1-ink 를 **같은 색상·채도에서 명도만** 내린 것이다. * ink #1F1B15 = H36 S19 L10.2 → deep-ground = H36 S19 L6.0 * 같은 먹을 더 짙게 쓴 것이지 다른 색이 아니다. * * 이 지면 위 대비 실측: * paper 17.61:1 AAA · surface 15.74 AAA · sunken 14.21 AAA · border 10.72 AAA * accent-raw 4.30:1 (AA large / 그래픽 OK) · accent 2.80:1 ❌ * ⚠️ 밝은 지면과 **반대다.** 밝은 곳에서는 accent 가 텍스트용이고 accent-raw 가 * 그래픽 전용인데, 어두운 지면에서는 accent 가 미달이라 뒤집힌다. * 그래서 어두운 지면의 강조 텍스트는 --v1-accent-raw 를 쓴다. */ --v1-ground-deep: #12100C; /* 순국 절 — 가장 깊은 지면. 같은 H36 S19 축에서 명도만 더 내린 값(L2.5). * 순흑을 쓰지 않는다: 이 팔레트는 먹이지 잉크젯 검정이 아니다. */ --v1-ground-abyss: #080705; /* 획 색 — 어두운 지면 위의 밝은 먹. 종이가 아니라 획이므로 paper 보다 살짝 낮춘 * surface 를 쓴다. 지면 대비 15.74:1. */ --v1-stroke-light: #F1E9D9; /* 어두운 지면 위 강조 텍스트. accent-raw(H14 S40 L49)를 같은 색상·채도에서 * 명도만 L58 로 올린 값이다. 원본은 가장 밝은 절 지면에서 4.04:1 로 AA 미달이었다. * 실측: ground-deep 5.75 · abyss 6.09 · today 5.19 · aunae 5.41 — 전부 AA 통과. */ --v1-accent-ondark: #BF7D69; /* 후원사 섹션 전용 중립 지면. * 후원사 원색(NH 파랑/노랑, 삼성 파랑, 충청남도 다색)이 세피아 팔레트와 충돌한다. * 색을 섞지 않고 "다른 지면"으로 분리하기 위한 값. 다른 곳에 쓰지 말 것. */ --v1-neutral-ground: #FFFFFF; /* 화이트 지면 — 내비게이션과 홈 하단(코스·신청·후원사)에 쓴다(2026-08-13 지시). * 세피아 지면(paper)이 화면 전체를 덮으면 누렇게 읽힌다. 히어로의 수채화만 * 세피아로 두고 그 아래는 흰 지면으로 내려 대비를 만든다. */ --v1-white: #FFFFFF; /* 마스크 연산용 불투명 스톱. 색이 아니라 알파 채널 제어값이다. * mask-image 의 gradient stop 은 알파만 쓰이므로 팔레트와 무관하다. */ --v1-mask-opaque: #000000; /* ══ easing — 무거움 = 느린 감속 ═══════════════════════════════════════ * brief §7 완료조건 8: 기본 커브 사용 금지. 아래는 전부 직접 지정한 값이다. * v1 성격: 사료적·무겁다 → 시작이 느리고 끝이 길게 끌리는 감속. */ --v1-ease-settle: cubic-bezier(0.16, 0.62, 0.23, 1); /* 기본 — 늦은 안착 */ --v1-ease-ink: cubic-bezier(0.33, 0, 0.15, 1); /* 번짐 — 느린 시작 */ --v1-ease-lift: cubic-bezier(0.25, 0.46, 0.20, 0.99); /* 호버 — 짧고 묵직 */ --v1-ease-exit: cubic-bezier(0.55, 0, 0.85, 0.35); /* 퇴장 — 가속 */ /* ══ duration — 마이크로와 서사를 분리 ═════════════════════════════════ */ --v1-dur-micro: 180ms; /* 호버·포커스 */ --v1-dur-short: 420ms; /* 상태 전이 */ --v1-dur-long: 900ms; /* 진입 시퀀스 요소 */ --v1-dur-epic: 1400ms; /* 히어로 마스크 리빌 */ --v1-stagger: 140ms; /* 진입 stagger 간격 */ /* ══════════════════════════════════════════════════════════════════════ * 타이포그래피 시스템 * * 폰트는 `--v1-font-display` 하나만 바꾸면 전체가 따라온다. * 비교용 후보는 tokens.type.css 에서 `html[data-font]` 로 교체한다. * 라이선스: docs/FONT-LICENSES.md * ════════════════════════════════════════════════════════════════════ */ /* ── 폰트 스택 ───────────────────────────────────────────────────────── * display 기본값은 마루 부리다. 근거: * · 화면 읽기용으로 설계된 현대 명조 (네이버) * · weight 5단(200·300·400·600·700) — 나눔명조는 3단뿐이었다 * · 붓 느낌의 부드러운 곡선이 v1 수채화 톤과 맞는다 * 폴백 순서: 같은 계열 → 시스템 명조 → generic serif */ --v1-font-display: "Maru Buri", "Gowun Batang", "Nanum Myeongjo", "Apple SD Gothic Neo", serif; --v1-font-body: "Pretendard", "Apple SD Gothic Neo", sans-serif; /* ── 크기 스케일 ─────────────────────────────────────────────────────── * display ↔ body 대비: 4.44rem vs 1.09rem = **4.07배** * brief §6 "3단계 이상 벌릴 것" 충족. 실측 확인은 docs/TYPOGRAPHY.md */ --v1-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem); --v1-text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem); --v1-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.09rem); --v1-text-lg: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem); --v1-text-xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem); --v1-text-2xl: clamp(2rem, 1.7rem + 1.5vw, 3rem); --v1-text-3xl: clamp(2.6rem, 2rem + 3vw, 4.44rem); /* ── letter-spacing — 크기와 1:1로 짝지은다 ──────────────────────────── * ⚠️ 라틴 기준값을 한글에 그대로 쓰면 안 된다. 실측 근거: * 한 글자 폭이 마루 부리 0.970em / 나눔명조 0.950em / 고운바탕 0.930em. * **한글은 글자가 em 박스를 거의 채운다**(라틴은 0.5em 내외). * 그래서 같은 -0.02em 이 한글에서는 라틴보다 시각적으로 더 크게 조인다. * → 라틴 관례(-0.03~-0.05em)보다 **완만하게** 잡았다. * * 원칙: 클수록 더 조인다. 작을수록 풀거나 벌린다. * 큰 글자는 글자 사이가 상대적으로 넓게 보이므로 조여야 덩어리가 된다. * 작은 글자는 조이면 붙어서 판독이 떨어진다. */ --v1-track-3xl: -0.032em; /* 히어로 대회명 — 가장 조인다 */ --v1-track-2xl: -0.026em; /* 섹션 헤드라인 */ --v1-track-xl: -0.018em; /* 소제목 */ --v1-track-lg: -0.010em; /* 리드문·강조 */ --v1-track-base: 0; /* 본문 — 건드리지 않는다 */ --v1-track-sm: 0.002em; /* 작은 본문 — 미세하게 풀어 판독을 살린다 */ --v1-track-xs: 0.010em; /* 캡션 */ --v1-track-label: 0.080em; /* eyebrow·라벨 — 넓게 벌려 다른 층위로 */ /* 하위 호환 별칭 — 기존 코드가 쓰는 이름. 새 코드는 위 스케일을 쓴다 */ --v1-tracking-display: var(--v1-track-3xl); --v1-tracking-tight: var(--v1-track-2xl); --v1-tracking-normal: var(--v1-track-base); --v1-tracking-wide: var(--v1-track-label); /* ── line-height — 크기에 반비례 ─────────────────────────────────────── * ⚠️ 한글 본문은 라틴보다 행간이 넓어야 읽힌다. * 받침이 있어 글자의 세로 점유가 크고, 어센더/디센더 구분이 약해 * 행이 붙으면 줄을 잃는다. **1.7 이상**을 본문 기준으로 잡았다. * * 폰트별 기본 줄높이 실측(100px 기준): 나눔명조 125 / 마루부리 141 / * 고운바탕 145 / 리디바탕 131. 폰트를 바꾸면 같은 값이 다르게 보이므로 * 아래 값은 **명시 지정**해 폰트 교체에 영향받지 않게 한다. */ --v1-lead-3xl: 1.12; /* 히어로 — 두 줄이 한 덩어리로 보이게 */ --v1-lead-2xl: 1.20; --v1-lead-xl: 1.32; --v1-lead-lg: 1.55; /* 리드문 — 본문에 가깝게 */ --v1-lead-base: 1.80; /* 한글 본문 기준 */ --v1-lead-relaxed: 1.95; /* 긴 본문(유의사항 등) */ --v1-lead-tight: 1.40; /* 표·목록 — 밀도가 필요한 곳 */ /* 하위 호환 별칭 */ --v1-leading-display: var(--v1-lead-3xl); --v1-leading-tight: var(--v1-lead-2xl); --v1-leading-body: var(--v1-lead-base); /* ── weight 운용 ─────────────────────────────────────────────────────── * 명조는 굵기 대비가 약하다 — 실측 볼드/레귤러 **폭비 1.000**, * 즉 굵게 해도 자폭이 전혀 늘지 않는다(라틴 볼드는 보통 3~5% 늘어난다). * → **굵기로 위계를 만들지 않는다. 크기로 만든다.** * display 는 400 을 기본으로 쓰고, 700 은 꼭 필요한 곳에만. * (기존 구현은 800 을 썼는데 나눔명조 800 은 획이 뭉쳐 판독이 떨어졌다) */ --v1-weight-display: 400; --v1-weight-display-bold: 700; --v1-weight-body: 400; --v1-weight-body-strong: 600; /* ══ 공간 스케일 ═══════════════════════════════════════════════════════ */ --v1-space-1: 4px; --v1-space-2: 8px; --v1-space-3: 12px; --v1-space-4: 16px; --v1-space-5: 24px; --v1-space-6: 32px; --v1-space-7: 48px; --v1-space-8: 64px; --v1-space-9: 96px; --v1-space-10: 120px; --v1-space-11: 160px; /* ══ 섹션 리듬 — 3단계 위계 ════════════════════════════════════════════ * brief §6: "여백 리듬 없음 = 공간 위계 없음"은 금지 항목이다. * 전 섹션 동일 padding 은 "어느 섹션도 다른 곳보다 중요하지 않다"는 뜻이 된다. * 배경 교대는 유지하되 그것만으로 위계를 대신하지 않는다. * * 강조(lead) — 페이지의 주 행동/주 정보. 공간을 가장 크게 점유한다 * 기본(base) — 일반 정보 섹션 * 압축(tight) — 보조·부가 정보. 밀도를 높여 빠르게 지나가게 한다 * * 배정 근거는 DESIGN.v1.md §6-4 참조. */ --v1-sec-lead: 160px; /* = space-11 */ --v1-sec-base: 96px; /* = space-9 */ --v1-sec-tight: 56px; /* = space-7 보다 좁게 — 압축 리듬 */ /* ══ 컴포넌트 치수 — 실측 근거가 있는 값들 ═════════════════════════════ * 여백 스케일이 아니라 자산/접근성에서 나온 고정 치수다. */ --v1-logo-w: 128px; /* 로고 표시 폭. base 레이어 최소 110px 이상 */ --v1-logo-h: 45px; /* 128 × (62/161 락업 종횡비) = 49.3 → 45 (여백 포함 박스) */ --v1-logo-w-sm: 112px; /* 모바일. 여전히 110px 하한 이상 */ --v1-logo-h-sm: 40px; --v1-tap-min: 44px; /* 터치 타깃 최소 — WCAG 2.5.5 */ --v1-sponsor-h: 38px; /* 후원사 로고 기준 높이 (optical.scale 로 개별 보정) */ --v1-track-h: 44px; /* 거리 막대 행 높이 — 터치 타깃과 무관한 표시 영역 */ /* 표 행 높이 실측값 — JS 주입 표의 CLS 예약에 쓴다. * 데스크탑 319px/6행 ≈ 53, 모바일 437px/6행 ≈ 73 */ --v1-row-h: 53px; --v1-row-h-sm: 73px; --v1-ink-bar: 6px; /* 거리 막대 잉크 두께. 붓 획의 세필(細筆) 굵기에 맞춘 값 */ --v1-ink-nib: 10px; /* 막대 끝 뭉침(붓이 떨어진 자리) 높이 */ --v1-yao-w: 22px; /* 괘선 표식 폭. 푸터 갈래 링크 라벨 x-height 에 맞춘 값 */ /* 코스 카드 — 좌상단 노치 크기와 카드 높이. * 노치 폭은 라벨("하프코스" + "21.0975km")이 들어갈 만큼이다. */ --v1-notch-w: 150px; --v1-notch-w-sm: 124px; --v1-notch-h: 74px; --v1-ccard-h-sm: 268px; /* 1100px 아래 세로로 쌓인 카드 높이. 데스크톱 높이는 종횡비로 정한다(style.css) */ --v1-arrow: 52px; /* 카드 우하단 진입 표식 지름 */ --v1-fac-mark: 20px; /* 배치도 범례 표식. 앵커 최소 크기(20px)에 맞춘 값 */ /* 코스 노선도는 SVG viewBox 안에서 그려지므로 px 토큰이 필요 없다. * 높이 예약은 .croute 의 aspect-ratio 가 맡는다(구 --v1-wp-* 토큰 제거). */ /* 체크박스 컨트롤 크기 — 기본 13px 은 터치·시각 모두 부족하다. * 44px 터치 하한은 라벨을 포함한 히트 영역으로 충족한다. */ --v1-check: 22px; /* JS 주입 블록의 예약 높이 — 실측값. 없으면 뒤 콘텐츠가 밀려 CLS 가 난다 */ --v1-panel-h: 138px; --v1-panel-h-sm: 165px; --v1-lede-h: 35px; /* 한 줄 리드문(#noticeCount 등) */ --v1-lede-h-sm: 60px; /* 모바일은 두 줄로 접힌다 */ /* 푸터는 JS 로 렌더된다. 실측 예약값 — 없으면 첫 페인트 뒤 아래로 밀린다. * 실측(2026-07-31): 1440px→647 · 900px→662 · 390px→849 · 360px→900. * 예약은 각 구간의 **최대값**으로 잡는다. 모자라면 그만큼 밀린다. */ /* 2026-08-13 재측정 — 문의 글씨를 xl→lg 로 낮추고 섹션 간격을 줄인 뒤 값. * 1440px→513 · 900px→536 · 390px→763 · 360px→813 (예약은 구간 최대값) */ /* 2026-08-14 재측정 — 푸터를 가로 배치로 바꾸고 태그라인을 뺀 뒤 값. * 1440px→394 · 900px→393 · 390px→660 · 360px→659 (예약은 구간 최대값) */ /* 2026-08-14 재측정 — 가로 배치 + 태그라인 제거 후. * ≥861px→394 · ≤860px→660 (예약 지점 = .foot__top 이 접히는 지점) */ --v1-foot-h: 394px; --v1-foot-h-sm: 660px; /* 신청 진입점 카드 실측 높이 — JS 주입 전 예약(CLS). 데스크탑 1행 / 모바일 카드당 */ --v1-amenu-h: 177px; --v1-amenu-h-sm: 144px; /* 네비 실측 높이 — shell.js 주입 전 예약해 CLS 를 막는다 */ /* 2026-08-19: 대분류 글씨를 text-sm→text-base 로 키우고 세로 여백을 늘리면서 * 실제 높이가 79 → 88px 이 됐다. 예약값을 안 고쳐서 본문이 9px 밀렸고 * 그게 CLS 로 잡혔다(qna 0.0887 · records 0.0338 · story 0.0111). * **네비 크기를 바꾸면 이 값도 같이 고친다.** 실측: 1440px 에서 88px. */ --v1-nav-h: 88px; --v1-nav-h-sm: 71px; /* ══ 형태 — 수채화·종이. 둥근 모서리를 최소화한다 ══════════════════════ */ --v1-radius-none: 0; --v1-radius-sm: 2px; --v1-radius-md: 3px; /* 조판 요소에는 큰 radius 를 쓰지 않는다 — 종이에 인쇄된 사료라는 결에 맞지 않는다. * 예외: 코스 카드의 노치. 좌상단을 파낸 자리의 안쪽 곡선을 만들기 위한 값이며 * 장식이 아니라 mask 형태를 성립시키는 기하값이다(각지면 칼로 자른 것처럼 보인다). * 이 토큰을 다른 곳에 쓰지 말 것. */ --v1-radius-notch: 22px; /* 그림자 대신 종이 결 — 잉크가 번진 듯한 낮은 확산 */ --v1-shadow-sm: 0 1px 2px color-mix(in srgb, var(--v1-ink) 8%, transparent); --v1-shadow-md: 0 2px 12px color-mix(in srgb, var(--v1-ink) 10%, transparent); /* ══ 로고 잉크 — base 레이어 규칙에 따라 중립색만 ══════════════════════ * --v1-ink 는 H36 S18 L10 으로 극저채도. 브랜드 레이어 조건(S≤10% 권장)에 * 근접하나 약간 높아, 로고 전용으로 채도를 더 낮춘 값을 쓴다. */ --logo-ink: #211E19; /* H38 S9 L12 — 중립. 근거: DESIGN.v1.md */ --logo-ink-inverse: #FBF6E9; /* 반전 배경용 = paper (최명도 중립색) */ } /* prefers-reduced-motion — brief §6 필수 대응 */ @media (prefers-reduced-motion: reduce) { :root { --v1-dur-micro: 1ms; --v1-dur-short: 1ms; --v1-dur-long: 1ms; --v1-dur-epic: 1ms; --v1-stagger: 0ms; } }