/* ========================================================================== tokens.css — 디자인 토큰 (02_designer_design-system.md v2.0 §1~§4 이식) 값 수정 없이 그대로 배치. 색·폰트·간격은 이 파일에서만 리터럴을 갖는다. 브랜드 자산 확정 시 교체 지점: ① --color-brand / --color-primary 계열 ② --font-family-base [확인 필요: 로고 원본 파일·OG 이미지 실자산, 캐릭터 일러스트 사용 가능 여부·저작권 (R5)] ========================================================================== */ :root { /* ── 브랜드 / Primary ───────────────────────────── --color-brand 는 **비텍스트 면 전용**이다. 흰 배경 대비 3.87:1 이라 이 면 위에는 24px+ 또는 18.66px+bold 만 얹을 수 있다(디자인 시스템 §1-3 22행). 작은 텍스트가 얹히는 면은 반드시 --color-primary(5.24:1). */ --color-brand: #2F80ED; /* 탭 활성 상단 바 · 단계 뱃지 · 포커스 링 */ --color-primary: #1668D8; /* 링크 · 버튼 배경 · 활성 세그먼트 · 순위 뱃지 */ --color-primary-dark: #1155B8; /* hover / active, 틴트 배경 위 텍스트 */ --color-primary-tint: #E8F0FE; /* 1~3위 강조 행 배경 */ --color-primary-tint-2: #D3E1FA; /* 틴트 위 경계선 */ --color-on-primary: #FFFFFF; /* primary/brand 배경 위 텍스트 — 이 용도로만 사용 */ /* ── 액센트 (바이백·긍정 강조) — 다크 배경 전용 ─── 흰 배경 대비 2.07:1 이므로 밝은 배경에는 절대 쓰지 않는다. 밝은 배경의 긍정 표시는 --color-success. ※ v2.3 현재 **사용처 0건** — 이 토큰을 쓰던 설명 섹션 4개가 노션으로 이관됐다. 토큰 정의는 designer 소관이라 임의로 지우지 않고 남겨 둔다(03_builder_notes §7). */ --color-accent: #2FCC8B; /* ── 히어로 라디얼 워시 (v2.8 신설 — 디자인 시스템 §1-2 · §5-16 ⓐ) ── ★ 이 값은 "면"이 아니라 "안개"다 — 이 위에 얹히는 텍스트의 대비는 워시 피크 기준으로 검증했고(§1-3 (d) 37·38행) 전부 PASS 여유가 크다. ★ 새 hue 를 들이지 않았다: 47,128,237 = --color-brand 의 RGB 그대로다. ⚠ 알파 0.08 이 **상한**이다. 올리려면 §1-3 (d) 37·38행을 다시 계산해야 하고, §6-1 ⓑ 의 "오브제 위치의 워시 기여 ≈ 0"(사각 크롭 성립 근거)도 무효가 된다. */ --color-brand-wash: rgba(47, 128, 237, 0.08); /* ── 텍스트 ─────────────────────────────────────── */ --color-text: #16202E; /* 본문·숫자 기본 (순수 검정 대신 네이비 그레이) */ --color-text-muted: #5B6980; /* 라벨·캡션·보조 설명 */ --color-text-on-dark: #FFFFFF; /* 네이비 밴드 위 제목·본문 */ --color-text-muted-on-dark: #A9B6C9; /* 네이비 밴드 위 보조 텍스트 */ /* ── 배경 / 경계 ────────────────────────────────── */ --color-bg: #FFFFFF; --color-bg-alt: #F5F7FA; /* 섹션 교차 배경 · 비활성 탭 */ --color-bg-deep: #0F1B2D; /* 히어로 밴드 · 규칙/구조 밴드 · 푸터 */ --color-bg-deep-2: #17253B; /* 네이비 밴드 위 카드 */ --color-border: #DDE3EC; /* 기본 경계·표 구분선 */ --color-border-strong: #C3CDDC; /* 구조 구분선(thead 하단 등) — 비인터랙티브 전용 */ --color-border-control: #7C8CA6; /* 컨트롤·상태 표시 테두리 (WCAG 1.4.11 3:1 대상) */ --color-border-on-dark: #2A3B55; --color-surface-on-dark: rgba(255, 255, 255, 0.10); /* 네이비 밴드 위 칩/배지 배경 */ --color-surface-on-dark-hover: rgba(255, 255, 255, 0.16); /* ── ★★ v2.36 신설 2종 (사용자 직접 지시 2026-08-13 저녁 · 시안 39827) ★★ ── ① --color-stat-highlight — 지시 원문: *"누적 바이백 수량은 색을 입혀 강조되게 (#0059FF)"*. 값은 지시가 직접 지정했고 시안 39827 파랑 타일 실측 (0,89,255)과 **일치**한다. 사용처: index ③-a 강조 타일(`.stat--highlight`) 배경 **전용**. ── 대비 검산 (§1-3 방식 · 전경은 전부 --color-on-primary #FFFFFF) ── 흰 텍스트 / #0059FF = **5.42:1** → 라벨 16px/700 ✓ · 값 20~30px/800 ✓ · 캡션 13px/400 ✓ (일반 텍스트 4.5:1 기준 — Large Text 예외 불사용 원칙 유지). ⚠ --color-primary(#1668D8)와 **값이 달라 토큰이 맞다**(메달색 주석의 토큰화 조건 그대로). primary 로 대체하지 말 것 — 지시가 값을 못박았다. ② --color-hero-band — index 히어로 밴드(시안 39827 밴드 실측 #ECF0F6 = (236,240,246)). 배경 영상(banner-video.mp4)의 자체 배경 실측 #EBEEF5 와 동계열이라 **영상 상자 경계가 밴드에 녹는다** — 이 값이 --color-bg-alt(#F5F7FA)와 다른 이유이자 재사용 하지 않은 이유다(시안·영상과 어긋나면 영상 둘레에 사각 이음새가 선다). ── 대비 검산 ── --color-text / #ECF0F6 = **14.3:1** ✓ · --color-primary / #ECF0F6 = **4.58:1** ✓ (4.5 일반 기준도 통과). ⚠ [designer 검토 대기 · notes §7 D-30] 두 값 모두 시안·지시 실측이라 builder 가 선등록했다 — 팔레트 정식 등재(§1-3 행 추가)는 designer 소관. */ --color-stat-highlight: #0059FF; /* ③-a 강조 타일 배경 — 위에 흰 텍스트 5.42:1 */ --color-hero-band: #ECF0F6; /* index 히어로 밴드 = 시안·영상 배경 실측 동계열 */ /* ── ★★ v2.39 신설 2종 — 히어로 워드마크 그라디언트 (사용자 회신 2026-08-14) ★★ ── 회신 원문: *"배너에서 '상품 판매 시 OnTact Auto BuyBack 으로' 의 문구에 그라데이션 넣어놨는데 왜 적용이 안됐는지"* — v2.36 이 리더 명세("파랑" 단색)를 따르며 상신했던 D-29(시안 실측은 초록→파랑 그라디언트)의 회신이다. **그라디언트가 의도였음이 확정** → D-29 종결(notes §7). · 값 근거 — 시안 문구 자산(구 `상품 판매가 OnTact Auto BuyBack 으로.png` → `_workspace/00_input/hero-phrase-gradient.png` · 2388×427) PIL 전수 샘플 실측: 불투명(α=255)·고채도 코어 화소만 집계, 워드마크 최좌단 코어 = **#26AB11**(초록 · 'OnTact' 쪽) / 최우단 코어 = **#0666DA**(파랑 · 'BuyBack' 쪽). v2.36 상신 때의 근사(#20A036 → #0769D2 "계열")를 끝단 화소 기준으로 정밀화한 값이다. 사용처: `css/style.css .hero__title-brand` 텍스트 그라디언트 **전용**. ── 대비 검산 (§1-3 방식 · h1 브랜드부 = 36px/800 → Large Text 3:1 기준) ── #0666DA(끝) / --color-hero-band #ECF0F6 = **4.68:1** ✓ #26AB11(시작) / --color-hero-band = **2.66:1** ✗ — **3:1 미달.** ⚠⚠ **초록 끝단은 밝은 밴드 위에서 Large Text AA 를 못 넘는다** — 시안 자체가 그런 색이다(시안 실측값 그대로이며 builder 가 지어낸 값이 아니다). 사용자 회신이 그라디언트를 확정했으므로 **값을 어둡게 임의 보정하지 않고** 그대로 반영하되, 미달 사실을 숨기지 않고 designer 판정으로 상신한다(notes §7 D-33 — 시작색 하향 후보 제시). 미지원 브라우저 폴백은 --color-primary 단색(4.58:1 ✓, style.css 그 자리 주석). ⚠ [designer 검토 대기 · notes §7 D-33] 두 값 모두 시안 실측이라 builder 가 선등록했다 — 팔레트 정식 등재(§1-3 행 추가)는 designer 소관(--color-stat-highlight 선등록과 같은 절차). */ --color-hero-grad-start: #26AB11; /* 워드마크 그라디언트 시작(초록 · 'OnTact' 쪽) */ --color-hero-grad-end: #0666DA; /* 워드마크 그라디언트 끝(파랑 · 'BuyBack' 쪽) */ /* ── ★★ v2.45 신설 — 현황 1b 재구축 (사용자 지시 2026-09-29 · 전면 수정안) ★★ ── 사양 정본: `_workspace/00_input/handoff-v245-바이백-전면-수정안.md` 디자인 토큰 절 · §1 공통 카드 스타일 · §2 모바일 1b-m. 값 전부 사양 확정치(High-fidelity 선언 — *"색·타이포·간격·라운드 값은 최종값"*)라 builder 가 선등록했다 — 팔레트·스케일 정식 등재는 designer 소관(--color-stat-highlight 선등록과 같은 절차 · notes §7 D-36). · 색 1종만 신규다: #EEF4FF (1b-m 수량 그룹 속 서브 박스 — 사양이 '신규 색'으로 명시). 나머지 사양 색 전부가 기존 토큰과 값 일치(#1668D8 primary · #0059FF stat-highlight · #DDE3EC border · #F5F7FA bg-alt · #FDF1E3/#9D4A07 pending 계열 · #0F1B2D bg-deep · #5B6980 text-muted · #16202E text)라 재사용한다 — 값이 같은 토큰을 더 만들지 않는다(메달색 주석의 토큰화 조건 그대로). ── 대비 검산 (§1-3 방식) ── #EEF4FF 위 --color-text = **13.4:1** ✓ · --color-text-muted = **5.1:1** ✓ (13px/12px 일반 텍스트 4.5:1 기준). · radius 14 는 기존 10/16 사이의 신규 값 — 1b 카드 전용 토큰. · 타이포 4종 — 1b 카드 계열 전용(기존 계단 3종 --font-size-stat* 은 휴면 화면의 스케일이라 재정의하지 않고 새 이름을 판다). 값 크기는 <768 에서 22px 로 오른다 (사양 §2 — 아래 미디어 블록). ⚠⚠ 설명 2종(12.5px·12px)은 이 파일의 캡션 하한 선언(13px — 위 --font-size-caption 주석)을 **밑돈다.** 사양이 High-fidelity 최종값으로 못박은 수치라 그대로 싣되, 하한 규정과의 충돌은 숨기지 않고 designer 판정으로 상신한다(notes §7 D-36 병기 — 임의로 13px 로 올리면 시안 재현이 깨지고, 하한을 조용히 고치면 규정 소유권 침범). · 간격 2종(6px·14px)은 사양 디자인 토큰 절의 '텍스트 간격' 값 그대로 — 4px 배수 규칙 밖의 값이라 리터럴 산포 대신 토큰으로 묶는다(카드 18px 세로 패딩도 동일). */ --color-stat-inner: #EEF4FF; /* 1b-m 수량 그룹 속 서브 박스 배경 */ --radius-stat-card: 14px; /* 1b 카드 라운드 (서브 박스는 --radius 10 재사용) */ /* ── ★★ v2.45-B 신설 — KOR/EN 토글 + Coming Soon (사용자 지시 2026-09-29) ★★ ── 사양 정본 §3(토글)·§4(Coming Soon) 확정 수치라 builder 가 선등록했다 — 정식 등재는 designer 소관(D-36 선등록과 같은 절차 · notes §7 D-37). · 색은 **전부 기존 토큰 값과 일치해 재사용** — 신규 색 0: 토글 pill 테두리 #DDE3EC (--color-border) · 배경 #F5F7FA(--color-bg-alt) · 선택 #1668D8(--color-primary) · 비선택 글자 #5B6980(--color-text-muted) · 탭 밑줄 #2F80ED(--color-brand — 토큰 정의가 이 용도를 지목) · Coming Soon 배경 #ECF0F6(--color-hero-band 값 일치 — v2.36 실측 등재분 재사용) · 칩 글자 #1668D8 · 제목 #16202E(--color-text) · 본문 #5B6980 · 버튼 #1668D8/#FFFFFF. · 타이포 4종만 신규 값이다(스케일 밖 수치 — 사양이 못박은 최종값): ⚠⚠ --font-size-lang 의 모바일 값 12px 는 캡션 하한 13px 선언을 **밑돈다** — 1b desc(12.5px)와 같은 충돌이며 같은 처분이다: 사양 값 그대로 싣고 하한 규정과의 충돌은 designer 판정으로 상신(D-36 병기 — 임의 상향은 시안 재현 훼손). · 대비 검산(§1-3 방식) — 선택 흰 글자/#1668D8 = 5.24:1 ✓(14px/700) · 비선택 muted/#F5F7FA = 4.51:1 ✓ · Coming Soon 본문 muted/#ECF0F6 = 4.44:1 — **17px/400 일반 텍스트 4.5:1 에 0.06 미달** ⚠(사양 색 그대로 실음 · D-37 병기 · 모바일 14px 도 동일 조합) · 제목 text/#ECF0F6 = 14.3:1 ✓ · 버튼 흰/#1668D8 ✓ · 칩 primary/흰 = 5.24:1 ✓. · 치수(pill 높이 32/28 · 칩 30 · 버튼 48/44 · min-height 720/520)는 컴포넌트 리터럴로 둔다 — 기존 관례(.site-nav__sep 16px · .btn 높이 계열)와 같은 층위다. */ --font-size-lang: 0.875rem; /* 14px — KOR/EN pill 버튼 (<768 은 12px ⚠하한 충돌) */ --font-size-coming-title: 2.5rem; /* 40px — Coming Soon 제목 800 (<768 은 26px) */ --font-size-coming-body: 1.0625rem; /* 17px — Coming Soon 본문 (<768 은 14px) */ --font-size-coming-cta: 0.9375rem; /* 15px — Coming Soon 버튼 라벨 700 */ --font-size-stat1b-label: 0.9375rem; /* 15px — 1b 카드 라벨 (700 · primary) */ --font-size-stat1b-value: 1.125rem; /* 18px — 1b 카드 값 (800 · <768 은 22px) */ --font-size-stat1b-desc: 0.78125rem; /* 12.5px — 1b 카드 설명 (하한 충돌 상신 D-36) */ --font-size-stat1b-xs: 0.75rem; /* 12px — 뱃지·서브 박스 설명 (〃) */ --space-stat1b-text: 6px; /* 라벨→값·값→설명 간격 */ --space-stat1b-text-lg: 14px; /* 락업·소각 카드의 같은 간격 (카드 높이 보정) */ --space-stat1b-pad: 18px; /* 카드 세로 패딩 (가로 20px = --space-5 재사용) */ /* ── 순위 메달 3색 — ★★ v2.26 신설 (사용자 직접 지시 2026-08-12 · 지시 ③) ★★ ── 지시 원문: *"1~3위 포디움(시상대) 스타일 + 금(1위)·은(2위)·동(3위) 색을 랭크 뱃지·강조에 적용."* ⚠⚠ **이것은 v2.0 폐기 판정을 사용자가 뒤집은 것이다 — 숨기지 않고 적는다.** ⚠⚠ ~~(v2.0 삭제) 순위 전용 3색 토큰 4개 — 페이지 성격이 "성취 과시"에서 "정산 대상 공개"로 바뀌어 시상 메타포가 문서 의도와 어긋나므로 전부 삭제했다. 1~3위 강조는 --color-primary-tint 행 배경 + --color-primary 순위 뱃지로 대체.~~ 그 판정은 이후 **세 번 재확인**됐다(디자인 시스템 §1-1·§5-6, 레이아웃 v2.2 §4 ③, v2.7 코인 더미 기각). 전부 **designer 판정**이고, 이번 것은 **2026-08-12 사용자 직접 지시**다 — 나중 것이, 그리고 더 높은 권한이 이긴다. 되돌릴 권한도 같은 자리에 있다. **designer 상신 완료**(notes v2.26 §7 D-8 · 판정 무효 통지). ★ 함께 무효가 된 규칙: *"1·2·3위를 서로 다른 3색으로 칠하면 그것이 곧 메달 은유다"*(§5-6) — 이번 지시가 요구하는 것이 **바로 그 메달 은유**다. ★ 무효가 **되지 않은** 것: writer §6 #19 **축하·시상 어휘 금지**. 지시는 **색과 형태**를 바꾸라는 것이지 문구를 바꾸라는 것이 아니다. 화면 문자열에는 `수상`·`축하`·`메달`·`시상대`가 **한 글자도 들어가지 않는다**(sr-only 포함). 색은 메달인데 말은 사실 서술 그대로 — 이 분리가 이번 구현의 규율이다. ── 대비 실측 (§1-3 검증표 신규 행 3개 · designer 등재 요망) ────────────── 전경은 셋 다 **--color-text #16202E** 다. `--color-on-medal` 같은 전용 전경 토큰을 만들지 않았다 — 값이 --color-text 와 동일해 간접 참조만 늘고 값의 소유자가 흐려진다(§1 토큰화 조건: 사용처가 아니라 **값이 달라야** 토큰이다). | 전경 / 배경 | 대비 | 판정 | | --color-text / --color-medal-gold #F0B429 | 8.80 | PASS | | --color-text / --color-medal-silver #C9CED6 | 10.38 | PASS | | --color-text / --color-medal-bronze #CD7F32 | 5.22 | PASS | ★ 셋 다 **4.5:1 일반 텍스트 기준**을 넘는다 — Large Text 예외(≥18.66px+bold)에 기대지 않는다. 순위 뱃지 숫자가 20px/800 이라 예외를 쓸 수는 있었지만, 이 사이트는 그 예외에 기대는 조합을 뱃지에 쓰지 않기로 이미 정해 뒀다 (§1-3 22행 · --color-brand 를 뱃지 면에서 배제한 것과 같은 이유). ⚠ **비텍스트 3:1(WCAG 1.4.11)은 대상이 아니다.** 세 면은 전부 **자기 위에 순위 숫자를 얹은 채로만** 등장한다(뱃지·포디움 단). 색이 정보를 단독으로 지는 자리가 없으므로 면 자체의 대비 요건이 발생하지 않는다. 흰 배경 대비는 금 1.86 · 은 1.38(틴트 위) 로 낮고, **그것이 정상**이다 — 기존 `.rank-badge` 기본 면(--color-bg-alt)이 흰 배경에서 1.05 인 것과 같은 성격이다. ⚠ **색맹 대비(WCAG 1.4.1).** 금(노랑)과 동(주황갈색)은 2형 색각에서 가까워질 수 있다. 그래서 **세 면 모두에 순위 숫자가 인쇄돼 있고**, 표에는 `순위` 열과 행별 sr-only(`상위 3위 이내`)가 그대로 남아 있다 — 색은 **보조 신호**이고 단독 전달자가 아니다. 상대 휘도도 은(0.614) > 금(0.513) > 동(0.284) 로 **단조 감소**라 흑백 인쇄·저채도 화면에서도 셋이 갈린다. ── 값 선정 근거 ────────────────────────────────────────────────────── 금 #F0B429 — 레몬(#FFD700)은 흰 배경에서 뜨고 채도가 브랜드 네이비와 다툰다. 한 단계 앰버 쪽으로 내려 `금`으로 읽히게 했다. 은 #C9CED6 — 무채색 회색 대신 **청색 언더톤**을 넣어 팔레트(네이비 계열)에 붙였다. --color-border-strong(#C3CDDC)과 값이 가깝지만 **재사용하지 않았다** — 그쪽은 "비인터랙티브 경계선 전용"이라 용도가 다르고, 한 토큰이 두 뜻을 지면 다음 개정에서 한쪽만 고칠 수 없게 된다. 동 #CD7F32 — 표준 bronze. 셋 중 가장 어두워 4.5 경계에 가장 가깝다(5.22) — **이 값을 더 어둡게 내리면 4.5 를 깬다.** 조정 시 재실측할 것. */ --color-medal-gold: #F0B429; /* 1위 — 뱃지 면·포디움 1단. 위에 --color-text 8.80 */ --color-medal-silver: #C9CED6; /* 2위 — 위에 --color-text 10.38 */ --color-medal-bronze: #CD7F32; /* 3위 — 위에 --color-text 5.22 (하한 근접) */ /* ── 시맨틱 (안내·상태) ─────────────────────────── */ /* 전경색은 흰 배경이 아니라 "각자의 tint 배경 위" 기준으로 정한 값이다 */ --color-success: #147036; /* 밝은 배경의 긍정 표시 (tint 위 5.49 / 흰 배경 6.18) */ --color-success-bg: #E7F5EC; --color-pending: #9D4A07; /* 주의·대기 표시 (tint 위 5.52 / 흰 배경 6.15) */ --color-pending-bg: #FDF1E3; --color-info: #1155B8; /* = primary-dark. 틴트 배경 위 대비 확보용 */ --color-info-bg: #E8F0FE; /* ── 차트 (③-b 추이 그래프) ───────────────────── 그리드·축은 dataviz 규칙대로 "surface 한 단계 위"의 recessive 크롬이다. 3:1로 올리면 크롬이 데이터보다 시끄러워지므로 1.4.11 대상이 아니다. */ --color-chart-series: #2F80ED; /* = --color-brand. 라인·끝점 */ --color-chart-area: rgba(47, 128, 237, 0.10); /* 영역 필 — 10% 워시 */ --color-chart-grid: #DDE3EC; /* = --color-border. 헤어라인 그리드 */ --color-chart-axis: #C3CDDC; /* = --color-border-strong. x축 baseline */ --color-chart-crosshair: #7C8CA6; /* = --color-border-control */ /* ── 포커스 (라이트/다크 배경 공용) ─────────────── */ --color-focus: #2F80ED; /* = --color-brand */ /* ── 폰트 (브랜드 교체 지점 ②) ──────────────────── */ --font-family-base: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; /* 이더스캔 주소 등 고정폭이 의미를 갖는 값 전용 */ --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* ── 타이포 스케일 ──────────────────────────────── */ /* 지표 타일 값 전용 3단 — **유효 자수**에 따라 스트립 단위로 한 단계씩 내려간다. 축약(만/억)·절삭은 금지이므로 "숫자를 줄이지 말고 글자를 줄인다"(§2-5). ★ v2.13(D111) — 판정 입력이 *값 문자열 길이* 에서 **유효 자수 = 값 자수 + 단위 환산 자수**(` USDT` +2.0 · ` OnTact` +2.7) 로 바뀌었다. 단위 span 은 `--font-size-small` 고정이라 **계단을 내려도 폭이 줄지 않아** 값 자수만으로는 넘침을 예측할 수 없다. 아래 **경계 자수는 불변**이고, 계산 지점은 `js/buyback.js applyStatScale()` 1곳이다(환산 상수의 실측 근거도 그 주석에 있다). */ --font-size-stat: 1.875rem; /* 30px — 기본 (유효 ≤11자) */ --font-size-stat-2: 1.5rem; /* 24px — 유효 12~14자 */ --font-size-stat-3: 1.25rem; /* 20px — 유효 15자 이상 */ --font-size-hero: 2.5rem; /* 40px */ --font-size-h2: 1.875rem; /* 30px */ --font-size-h3: 1.25rem; /* 20px */ /* 진한 면 위 숫자 전용 (v2.2) — 미디어 쿼리에서 재정의하지 않는다. Large Text 예외(≥18.66px + bold)를 어떤 뷰포트에서도 유지해야 하므로 이 토큰은 1.1667rem 미만으로 내려갈 수 없다. 디자인 시스템 §1-3 22행 참조. v2.3 현재 사용처는 Top 20 1~3위 순위 뱃지 숫자(.rank-badge--top) 하나다. */ --font-size-step: 1.25rem; /* 20px */ --font-size-body-lg: 1.125rem; /* 18px — 히어로 서브카피, 표 금액 */ --font-size-body: 1rem; /* 16px */ --font-size-small: 0.875rem; /* 14px */ --font-size-caption: 0.8125rem; /* 13px — 하한. 이보다 작은 글자 금지 */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 800; /* 순위 숫자·대표 수치에만 */ --line-height-tight: 1.25; /* 제목 */ --line-height-snug: 1.4; /* 서브카피·카드 제목 */ --line-height-body: 1.65; /* 본문 (한글 밀도 보정) */ --line-height-num: 1.15; /* 숫자 블록 */ --letter-spacing-heading: -0.02em; /* 한글 제목 밀도 개선 */ --letter-spacing-num: -0.01em; --letter-spacing-label: 0.02em; /* 대문자/소형 라벨 */ /* ── 스페이싱 · 레이아웃 (4px 배수만 사용) ───────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --container-max: 1200px; /* 기본 콘텐츠 폭 · 누적 결과 타일 · 건별 6열 표 */ --container-data: 960px; /* Top 20 표(3열, v2.15 이전 4열) · 다크 밴드 카드 */ --container-narrow: 800px; /* 본문 단락·고지 */ --container-pad: var(--space-6); /* 좌우 패딩 (데스크톱 24px) */ --section-py: var(--space-24); /* 섹션 상하 여백 (데스크톱 96px) */ --grid-gutter: var(--space-6); /* 24px */ /* ★ v2.8 — 헤더가 1행이 되면서 --header-h 의 **뜻이 바뀌었다**. 구: "스티키 탭 바 높이 48px" (브랜드 바는 별도 밴드라 앵커 보정에서 제외됐다) 신: "스티키 헤더 전체 높이" — 헤더가 하나뿐이므로 이 값이 곧 상시 점유 높이이고, [id]{scroll-margin-top} 앵커 보정도 **이 값 하나로 정확**해진다. ⚠ 값이 48 → 124 로 커진다. 앵커 보정은 이 토큰을 참조하므로 **자동으로 따라온다** — builder 가 별도 보정을 더하지 말 것(이중 보정이 되어 과하게 내려간다. 레이아웃 §1). */ --header-h: 124px; /* v2.8: 시안 실측 124.0px (≥1024). 아래 미디어 쿼리에서 계단 */ /* v2.8 신설 — 헤더 로고 아이콘. ★ v2.26-1: 뜻이 **"정사각 변" → "아이콘 높이"** 로 바뀌었다(원본이 167×180 비정방). 값·계단(32/28)은 불변이고 가로는 비율로 따라온다. `css/style.css .brand__mark` 참조. designer 상신 §7 D-12. */ --brandmark-size: 32px; /* 헤더 로고 아이콘 **높이** (모바일 28px) */ /* ~~--brandbar-h~~ **v2.8 폐기** — 브랜드 바가 별도 밴드가 아니게 되어 가리킬 대상이 없다. 참조 CSS(.brand-bar / .brand-bar__inner / .tabs-bar / .tab)도 함께 삭제했다(style.css §3-1). */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06); --shadow-md: 0 4px 12px rgba(15, 27, 45, 0.08); --shadow-lg: 0 12px 32px rgba(15, 27, 45, 0.12); --transition-fast: 150ms ease; --transition: 200ms ease; --z-header: 100; --z-toast: 200; } /* 브레이크포인트는 커스텀 프로퍼티로 쓸 수 없으므로 리터럴 px 사용 (디자인 시스템 §4: 768 / 1024 / 1280 외 임의 값 금지) */ @media (max-width: 1023px) { :root { --section-py: var(--space-20); /* 80px */ --header-h: 88px; /* v2.8 (디자인 시스템 §5-3 반응형 계단) */ } } @media (max-width: 767px) { :root { --font-size-stat: 1.5rem; /* 24px */ --font-size-stat-2: 1.25rem; /* 20px */ --font-size-stat-3: 1.125rem; /* 18px */ --font-size-hero: 1.75rem; /* 28px */ /* ★ --font-size-step 은 여기에 넣지 않는다 (v2.2 / QA F-01). brand 면 위 Large Text 임계(18.66px)를 전 뷰포트에서 유지해야 한다. */ --font-size-h2: 1.5rem; /* 24px */ --font-size-h3: 1.125rem; /* 18px */ --font-size-body-lg: 1rem; /* 16px */ --section-py: var(--space-14); /* 56px */ --container-pad: var(--space-4); /* 16px */ --grid-gutter: var(--space-4); --header-h: 64px; /* v2.8 — 1행 헤더. 구 2단(44+48=92px)보다 28px 얕다 */ --brandmark-size: 28px; /* v2.8 */ /* v2.45 — 1b-m 카드 값 22px/800 (사양 §2 첫 줄) · 카드 세로 패딩 16(--space-4 값과 같지만 토큰 참조로 묶지 않는 이유: 사양이 §1(18)·§2(16)를 따로 확정한 독립 수치라 한쪽 개정이 다른 쪽을 끌고 가면 안 된다 — D88 상수 분리와 같은 판단). */ --font-size-stat1b-value: 1.375rem; /* 22px */ --space-stat1b-pad: 16px; /* v2.45-B — 토글·Coming Soon 모바일 계단 (사양 §3·§4 모바일 확정치 — 위 본문 블록 주석 1벌 참조 · 12px 하한 충돌 상신 포함). */ --font-size-lang: 0.75rem; /* 12px ⚠ 캡션 하한 13px 미달 — D-36/D-37 상신 */ --font-size-coming-title: 1.625rem; /* 26px */ --font-size-coming-body: 0.875rem; /* 14px */ } }