/* * GaaP Bridge — 디자인 토큰 정본. * 고객 자료(엑셀 시트 3)의 원칙 5개와 컬러/스페이싱 체계를 상속하고, * 장문 출판물로 성립시키기 위해 필요한 항목만 고도화했다. * 고객 원본값과 달라진 항목은 주석에 [고도화] 로 표시하고 사유를 남긴다. */ :root { /* ── Color ─────────────────────────────────────────────── 고객 지정 7색 유지. 지면(paper)과 본문 먹색(ink)만 추가. */ --gb-navy: #1E3A5F; /* Headings / Labels */ --gb-gold: #C9A34E; /* 고객 확정 2026-09-20. 사용 규칙은 아래 "Gold 사용처" 참조 */ --gb-white: #FFFFFF; /* Card / Surface */ --gb-gray-50: #F8FAFC; /* Section Background */ --gb-gray-200: #E5E7EB; /* Border */ --gb-gray-600: #475569; /* Secondary Text */ --gb-gray-900: #1F2937; /* Main Heading */ /* [신설] 순백 지면은 장문에서 눈부심이 크다. 웜톤으로 낮춘다. [고도화 2026-09-21] #FBFAF8 -> #FAF7F2. 근거: docs/design-reference-research.md. 장문 영문 출판물 실측 지면값이 전부 웜톤이고 순백 사례가 0건이다 (FT #fff1e5 / Works in Progress #fff7f4 / Asterisk #faf8f0). 웜 성분 3단계였던 기존값은 화면에서 흰색과 구분되지 않았다. 지면이 내려가야 고객 지정 #FFFFFF(raised)가 비로소 떠 보인다. */ --gb-paper: #FAF7F2; /* [신설] 본문 먹색. Gray-900은 고객 정의대로 헤딩용으로 남긴다 */ --gb-ink: #14161A; /* ── Spacing ───────────────────────────────────────────── 고객 지정 7단계 전부 유지. 전 값 8px 배수 = 수직 리듬 그리드. */ --gb-space-xs: 8px; /* Small Gap */ --gb-space-s: 16px; /* Heading - Paragraph */ --gb-space-m: 24px; /* Paragraph - Paragraph */ --gb-space-l: 32px; /* Card Padding */ --gb-space-xl: 48px; /* Large Content Group */ --gb-space-2xl:64px; /* Section - Section */ --gb-space-3xl:80px; /* Hero / CTA */ --gb-rhythm: 8px; /* [신설] 모든 간격의 최소 단위 */ /* ── Measure / Layout ──────────────────────────────────── [신설] 고객 자료에 없던 축. 장문 매체는 본문 폭이 정의돼야 성립한다. */ /* [재조정 2026-09-21] 68ch에서 64ch로. 본문이 sans 17px에서 serif 19px로 바뀌면서 같은 ch 수가 더 긴 물리적 행이 됐다. 출판물 권장 상한은 66ch다. */ --gb-measure: 64ch; /* 본문 1행 목표 글자수 */ --gb-content-max: 720px; /* 본문 열 최대 폭 */ --gb-wide-max: 1100px; /* 표·도표 등 본문 폭을 넘는 요소 */ --gb-page-max: 1280px; /* 페이지 컨테이너 */ --gb-gutter: var(--gb-space-m); /* ── Border / Radius / Shadow ──────────────────────────── [고도화] radius 16px -> 4px, shadow 제거. 사유: 둥근 모서리와 그림자는 앱 UI 문법이다. 고객 원칙 1(No unnecessary icons)·2(Minimal use of colors)와 같은 계열의 절제를 형태에도 적용한다. 블록 간 구분은 선(rule)과 배경 톤 차이만으로 처리한다. [근거 확보 2026-09-21] 레퍼런스 6종 실측에서 radius를 구조적으로 쓰는 매체가 없다. Asterisk 0건, Works in Progress 지배값 0, Stripe Press 전 사이트 2회, FT/ifrs/Every 0건. 고객 원본 16px은 어느 레퍼런스에도 없다. [확정 2026-09-21] 4px도 폐기하고 0으로 간다. WIRED DESIGN.md 실측 — rounded.none 0px 이 "every interactive shape: buttons, inputs, cards"이고 "square corners are non-negotiable"이다. 예외는 원형 공유 버튼 하나뿐. 4px은 0도 아니고 둥근 것도 아니라 형태에 의도가 읽히지 않았다. 원형이 필요한 지점(아바타)만 --gb-radius-full 로 따로 연다. */ --gb-radius-m: 0; --gb-radius-full: 9999px; --gb-shadow: none; /* [신설] 선 위계 3단계. 카드 테두리를 걷어낸 자리를 이 3개가 대신한다. hairline = 표 행 구분처럼 거의 안 보여야 하는 선 rule = 블록/섹션 구분 accent = 강조. [2026-09-21] Gold에서 Navy로. Gold는 본문 링크 전용으로 내렸다 */ --gb-stroke-hairline: 1px solid var(--gb-gray-200); --gb-stroke-rule: 1px solid var(--gb-gray-600); --gb-stroke-accent: 2px solid var(--gb-navy); /* 구형 별칭 — base/patterns가 아직 참조한다 */ --gb-border: var(--gb-stroke-hairline); --gb-rule: var(--gb-stroke-hairline); --gb-rule-accent: var(--gb-stroke-accent); /* ── Typography ────────────────────────────────────────── [고도화] 고객 4단계(18/26/32/40) 유지 불가. 사유: 원칙 4 "Typography creates authority"는 크기 대비로만 성립한다. 40/18 = 2.2배는 권위가 서지 않는다. 비율 1.33 모듈러 스케일로 재구성하고 Display / Label / Caption 3단계를 추가해 6단계로 넓혔다. [재조정 2026-09-21] 비율 1.33 균등 스케일을 폐기한다. 사유: 균등 스케일은 앱 UI 문법이다. 단계마다 같은 비율로 커지면 어느 단계도 "표제"로 읽히지 않고 본문이 조금씩 커진 것으로만 보인다. 실측 대조 — FT 기사 표제 72px / Works in Progress 히어로 96px, 두 매체 모두 본문은 우리와 같은 18px 대다. 본문과 표제 사이를 벌리는 것이 출판물 조판의 핵심이고 우리는 최대 64px에서 멈춰 있었다. 교체 원칙: 본문 인접 단계(h3)는 본문에 붙이고, 구획 단계(h2 이상)부터 크게 도약시킨다. 19 / 24 / 38 / 60 / 88 — h3는 1.26배, h2부터 1.58배. */ --gb-font-caption: clamp(13px, 0.3vw + 12px, 14px); /* [시안 대조 2026-09-28] 확정 시안(Figma 99:2) 실측 11px. 13px 상한은 캡션(14px)에 너무 붙어 라벨과 캡션의 위계가 뭉갰다. 자간 0.08em 은 시안과 이미 일치한다. */ --gb-font-label: clamp(10px, 0.1vw + 9.5px, 11px); --gb-font-body: clamp(17px, 0.5vw + 15px, 19px); /* [신설 2026-09-28] 확정 시안 실측값. 기존 토큰으로 표현되지 않아 추가한다 — 부제 22px, 방주 용어 16px, 방주 본문 15px. caption(14)과 body(17) 사이가 비어 있었다. */ --gb-font-standfirst: clamp(18px, 0.28vw + 16px, 22px); --gb-font-aside-term: clamp(15px, 0.07vw + 14px, 16px); --gb-font-aside: clamp(14px, 0.07vw + 13px, 15px); /* [신설 2026-10-06] 패턴 표 글씨 (고객 10-04, 시안 L4 승인). 화면폭과 관계없이 고정 — 머리 칸은 라벨(11)이 너무 작다는 지적, 칸은 본문(19)보다 한 단계 작게 해 표가 덜 빽빽하게 */ --gb-font-table: 17px; --gb-font-table-head: 13px; --gb-font-box-label: 13px; /* [신설 2026-10-07] 패턴 상자 작은 제목(In brief 등). 표 머리 칸과 같은 크기 (고객 10-07, 질문 5-4) */ /* [재조정 2026-09-25] 고객 회신 반영. A/B/C 3안 중 C안 골격 채택에 따라 표제를 C안 크기로 내리고, "본문 소제목이 너무 크다"는 지적을 반영해 h2·h3 를 각각 한 단계 낮춘다. 인용(pull quote)은 h1 상속을 끊고 독립 토큰으로 분리한다 — 본문 흐름 안의 요소라 표제 크기를 쓰면 안 된다. display 88px 은 A안(초대형 표제) 전용이었고 A안이 기각되어 사용하지 않는다. 19 / 21 / 28 / 44 — 본문 대비 h3 1.1배, h2 1.47배, h1 2.3배. */ --gb-font-h3: clamp(19px, 0.5vw + 17px, 21px); --gb-font-h2: clamp(23px, 1.4vw + 18px, 28px); --gb-font-h1: clamp(30px, 3.0vw + 18px, 44px); /* [재조정 2026-09-29] 최대 30px 에서 26px 로. 고객 지적 — 인용이 커 보인다. 1440px 에서 30px 는 h2 28px 를 넘어 절 표제보다 인용이 위에 섰다. */ --gb-font-quote: clamp(21px, 0.8vw + 18px, 26px); --gb-font-display: clamp(42px, 7.2vw + 14px, 88px); /* 미사용 — A안 기각 */ /* [재조정 2026-09-21] 무게 대비 확보. 400/500/700 중 500은 화면에서 400과 구분되지 않아 위계를 한 단계 낭비하고 있었다. 500을 600으로 올리고 라벨 전용 700을 신설한다. 대비는 크기로만 만드는 것이 아니라 초대형 400 serif 표제와 소형 700 대문자 라벨의 양극으로 만든다. */ --gb-fw-body: 400; --gb-fw-med: 600; --gb-fw-head: 700; --gb-fw-label: 700; /* [전환 2026-09-21] 1.75에서 1.6으로. 사이트 실물 점검 결과 글 40건·페이지 22건이 전부 영문이었다. 1.75는 한글 장문 기준값으로, 라틴 문자에서는 행간이 벌어져 단락이 흩어진다. */ --gb-lh-body: 1.6; /* [신설 2026-09-28] 확정 시안 본문 행간 1.75. 1.6 은 방주·캡션처럼 짧은 글 몫으로 남긴다 — 장문 19px 을 1.6 으로 짜면 줄이 붙어 읽는 속도가 떨어진다. */ --gb-lh-prose: 1.75; --gb-lh-head: 1.15; /* [재조정 2026-09-21] 1.2에서. h1 60px에서 1.2는 행간이 뜬다 */ --gb-lh-display: 1.0; /* [재조정 2026-09-21] 88px에서 1.05는 두 줄 표제가 흩어진다 */ /* [전환 2026-09-21] 본문 자간 0. 한글은 좁혀야 하지만 라틴 문자는 서체가 이미 설계된 자간을 갖는다. 건드리면 조판이 망가진다. */ --gb-ls-body: 0; --gb-ls-head: -0.02em; /* [신설 2026-09-21] 60px 이상에서는 -0.02em으로 부족하다. 큰 크기일수록 자간이 벌어져 보이는 착시를 더 강하게 상쇄해야 한다. */ --gb-ls-display: -0.035em; --gb-ls-label: 0.08em; /* 라벨은 대문자 + 넓은 자간 */ /* ── Font Family ───────────────────────────────────────── [고도화] 영문 Source Serif 4 -> Newsreader. 사유: Source Serif는 범용 본문체다. Newsreader는 가변 광학 사이즈를 가진 에디토리얼 전용 설계로, 표제 큰 크기에서 형태가 무너지지 않는다. 한글은 Pretendard 유지(고객 실패 지점이 조판이지 서체가 아니다). */ --gb-font-serif: "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif; --gb-font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; /* [전환 2026-09-21] 본문을 sans에서 serif로 뒤집었다. 사유: 이 사이트는 영문 회계 매체다(글 40건 전부 영문 확인). 영문 장문 출판물의 본문은 serif가 기준이다 — 자소 구분이 명확해 긴 글에서 읽기 속도가 떨어지지 않는다. Pretendard는 삭제하지 않고 한글 혼용 구간의 폴백으로 내린다. */ --gb-font-family-base: var(--gb-font-serif); --gb-font-family-head: var(--gb-font-serif); /* UI 요소(버튼, 라벨, 내비게이션, 폼)는 sans를 유지한다. 본문 serif / UI sans 대비가 읽는 영역과 조작하는 영역을 가른다. */ /* [신설 2026-09-21] 표제 전용 고대비 서체. 본문 serif와 분리한다. 근거: WIRED는 표제 WiredDisplay(고대비 장체)와 본문 BreveText(휴머니스트)로 serif를 둘로 나눈다. Newsreader는 본문용 저대비 serif라 88px로 키워도 형태 특징이 생기지 않았다 — "촌스럽다"의 직접 원인이다. Playfair Display는 WIRED DESIGN.md가 WiredDisplay 대체로 지목한 서체다. 88/60은 Playfair 400, 38/24는 Newsreader 600. */ --gb-font-display-family: "Playfair Display", "Newsreader", Georgia, serif; --gb-font-family-ui: var(--gb-font-sans); /* [신설] 숫자 표 정렬용 — 차변/대변 자릿수 어긋남 방지 */ --gb-font-numeric: var(--gb-font-sans); --gb-numeric-variant: tabular-nums; /* ── Grid / Breakpoint ─────────────────────────────────── [신설] 46화면을 그리려면 열 체계가 정의돼 있어야 한다. 브레이크포인트 4개는 고객이 지목한 실패 지점("모바일/태블릿에서 일괄적으로 맞추지 못함")에 대응하는 최소 개수다. */ --gb-bp-sm: 390px; /* 모바일 기준 */ --gb-bp-md: 782px; /* WP 편집기 기준값과 일치시킨다 */ --gb-bp-lg: 1024px; --gb-bp-xl: 1440px; /* 디자인 기준 폭 */ --gb-grid-columns: 12; --gb-grid-gap: var(--gb-space-m); /* ── 지면 톤 ───────────────────────────────────────────── [신설] 카드 테두리 대신 블록을 나누는 수단. 지면(paper) 위에 sunken / raised 두 톤만 둔다. 3단계 이상은 위계가 흐려진다. */ --gb-surface-sunken: var(--gb-gray-50); --gb-surface-raised: var(--gb-white); /* ── State ─────────────────────────────────────────────── [신설] 상태를 컴포넌트마다 따로 정하지 않는다. 여기서만 정한다. */ --gb-state-hover-tint: color-mix(in srgb, var(--gb-navy) 6%, transparent); --gb-state-active-tint: color-mix(in srgb, var(--gb-navy) 12%, transparent); --gb-state-disabled-opacity: 0.4; /* ── Gold 사용처 ───────────────────────────────────────── [축소 2026-09-21] 용례 5종(hairline, 라벨, 마커, 태그 면, 배지)을 2종으로 줄인다. 사유: WIRED DESIGN.md 실측. 이 매체는 흑백 2색만 쓰고 세 번째 색인 링크 블루 #057dbc 를 "only inside long-form article body copy, never on UI buttons or navigation"으로 못박는다. 강조색은 등장 지점이 늘수록 약해진다. 우리 Gold는 어디에나 있어서 아무것도 강조하지 못하는 상태였다. 허용 2종 — 이 둘 밖에서 Gold가 보이면 잘못 쓴 것이다. 1) 본문(.gb-prose) 안 인라인 링크의 밑줄 2) 각주 참조번호 (.gb-fnref) 금지: 라벨, 불릿 마커, 태그와 배지, 구분선, 버튼, 내비, 드롭캡, 인용부호. 회수된 자리는 Navy 또는 Gray-600 이 받는다. */ --gb-gold-role: "prose-link, footnote-ref"; /* 포커스 링 — 키보드 접근성. 어떤 컴포넌트도 이걸 지우지 않는다. */ --gb-focus-width: 2px; --gb-focus-offset: 2px; --gb-focus-color: var(--gb-navy); /* ── Icon ──────────────────────────────────────────────── [신설] Lucide 문법에 맞춘다. 24 그리드, 스트로크 1.5, round cap. 고객 원칙 1은 "No unnecessary icons"다 — 기능 아이콘은 허용 범위. */ --gb-icon-s: 16px; --gb-icon-m: 20px; --gb-icon-l: 24px; --gb-icon-stroke: 1.5; /* ── 이미지 ────────────────────────────────────────────── [신설] 종횡비를 고정하지 않으면 페이지마다 이미지 높이가 달라진다. */ --gb-ratio-wide: 16 / 9; --gb-ratio-article: 3 / 2; --gb-ratio-square: 1 / 1; --gb-ratio-portrait: 4 / 5; /* ── Motion ────────────────────────────────────────────── [신설] 2종만 둔다. 읽기 매체에서 모션은 거들 뿐이다. */ --gb-motion-fast: 120ms; --gb-motion-base: 200ms; --gb-ease: cubic-bezier(0.2, 0, 0, 1); } /* 한글이 섞인 구간만 한글 조판 규칙으로 되돌린다. 회계 용어 대조표 등에서 국문이 등장한다. */ :lang(ko) { font-family: var(--gb-font-sans); line-height: 1.75; letter-spacing: -0.01em; } /* 모션 축소 요청 존중 — 접근성 필수 */ @media (prefers-reduced-motion: reduce) { :root { --gb-motion-fast: 1ms; --gb-motion-base: 1ms; } } /* 좁은 화면에서 여백만 줄인다. 폰트는 clamp가 이미 처리한다. 고객이 지목한 실패 지점("모바일/태블릿에서 일괄적으로 못 맞춤")에 대한 직접 대응. */ @media (max-width: 782px) { :root { --gb-space-l: 24px; --gb-space-2xl: 40px; --gb-space-3xl: 48px; --gb-gutter: var(--gb-space-s); } }