/* ========================================================================== 셈톡 타이포그래피 토큰 v1 (2026-10-02 기획안 → 타이포그래피 C2 도입, D-891) 서체: SemTalk Sans Round(셈톡 산스 라운드) — 나눔스퀘어 네오(OFL 1.1)를 셈톡용으로 고정·개명·둥글린 파생 서체(D-890, C1) 원본: docs/requests/2026-10-02-typography/tokens/typography.css (요청서 §3-3 타입 스케일 · §3-4 규칙) ────────────────────────────────────────────────────────────────────────── 불러오는 순서 (layout.html · 자립형 error.html도 같다) tokens.css(@font-face·색·간격) → app.css(공통 컴포넌트) → 이 파일(typography.css) → shell.css → 지면 CSS · app.css **뒤**: 옛 .t-*·body 리터럴을 같은 특이성에서 «나중 규칙»으로 덮는다(이행 1단계, 아래). · shell.css·지면 CSS **앞**: 그쪽이 일부러 적은 크기·굵기는 그대로 이긴다 — 지면의 숫자를 토큰으로 옮기는 일은 C3(묶음별). 원칙 · 크기는 토큰 12개 안에서만 고른다. 소수점 크기(11.5·12.5·13.5·14.5px …) 금지. · 굵기는 400 / 500 / 600 세 벌만. 700 이상은 쓰지 않는다 (서체 파일이 550~1000을 SemiBold 한 벌로 받으므로 옛 700·800이 남아도 SemiBold로 그려진다). · 자간은 크기에서 따라온다(--ls-*). 칸마다 손으로 적지 않는다. 곡선은 +0.03em(12px) → 0(30px 이상), 음수 없음 (2026-10-02 사용자 결정으로 전체 +0.01em — 아래 :root 주석). · 행간은 토큰의 px 값을 쓴다(4px 리듬, 본문만 예외로 넉넉하게). ========================================================================== */ :root { /* ── 서체 스택 — 🔴 본문 스택의 진실은 이 한 줄이다 ─────────────────────── app.css body·error.html 인라인 body는 리터럴을 적지 않고 var(--font-sans)를 상속·참조한다(두 벌 금지 — TypographyTokensContractTest). 'Pretendard Fallback'은 Pretendard 파일에 size-adjust 109%를 붙인 별칭이라 라운드가 오기 전(swap)과 라운드에 없는 글리프에서 줄 길이가 라운드와 같다. 'Pretendard'(원본)는 전환 기간에만 남긴다(C5에서 제거). @font-face는 tokens.css. */ --font-sans: 'SemTalk Sans Round', 'Pretendard Fallback', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; /* 읽는 글 세리프는 기존 결정(D-735, Q-316)을 그대로 둔다 — 범위는 Q&A 답변 본문·세무시선 본문뿐 */ --font-serif-read: var(--serif-read, 'Nanum Myeongjo', 'Apple SD Gothic Neo', serif); /* ── 굵기 (세 벌) ─────────────────────────────────────────────────────── */ /* 굵기 사다리 A안(2026-10-03, 타이포 점검 F1): 400·600의 원본 wght를 올려 600÷400 획 비 1.38 → 1.54배(제목·이름이 본문과 갈림). 획 굵기는 UPM 1000 세로 단면 실측. 한글 글자 폭은 wght와 무관해 줄바꿈은 그대로다. 빌드 설정 scripts/common.py WEIGHTS. */ --fw-regular: 400; /* SemTalk Sans Regular = 나눔스퀘어 네오 wght 330(처음 300) · 획 76.5 */ --fw-medium: 500; /* SemTalk Sans Medium = wght 400 · 획 87.5 */ --fw-semibold: 600; /* SemTalk Sans SemiBold = wght 620(처음 500) · 획 117.5 — 옛 Pretendard 700(획 145)보다 약 19% 가늘다(처음 사다리는 31%) */ /* ── 자간: 크기별 광학 보정 (작을수록 살짝 벌리고, 클수록 아주 조금 조인다) ── */ /* 2026-10-02 사용자 결정(Phase B 멈춤): 곡선 전체를 +0.01em 올림(«글자 사이 간격을 살짝 더 넓게»). 옛 곡선 +0.02 → −0.01em 이 +0.03 → 0 이 됐다 — 음수 자간은 이제 없고, 12px이 상한 +0.03em에 닿는다. ⚠ 요청서 본문 표의 «+0.01em»은 이 보정 전 숫자다 — 값은 이 파일이 진실이다. */ --ls-12: 0.03em; /* 12px */ --ls-13: 0.025em; /* 13px */ --ls-14: 0.02em; /* 14 ~ 16px */ --ls-18: 0.01em; /* 17 ~ 20px */ --ls-22: 0.005em; /* 22 ~ 28px */ --ls-36: 0; /* 30px 이상 */ /* ── 타입 스케일 — 모바일(기본) ───────────────────────────────────────── 이름 크기 / 행간 굵기 쓰임 */ --fs-display: 28px; --lh-display: 38px; /* 600 히어로·후기 밴드·세무시선 글 제목 */ --fs-title1: 24px; --lh-title1: 32px; /* 600 화면 제목 h1 */ --fs-title2: 20px; --lh-title2: 28px; /* 600 섹션 제목 h2 · 로그인 헤드라인 · 대화상자 제목 */ --fs-title3: 18px; --lh-title3: 26px; /* 600 카드 제목 · 하위 섹션 */ --fs-heading: 16px; --lh-heading: 24px; /* 600 목록 항목 제목 · 사람 이름 · 강조 행 */ --fs-body1: 16px; --lh-body1: 28px; /* 400 읽는 글(질문 본문·안내 문단) */ --fs-body2: 14px; --lh-body2: 22px; /* 400 기본 UI 문장 · 카드 설명 — body 기본값 */ --fs-label1: 16px; --lh-label1: 22px; /* 600 큰 버튼(48~56px) · 탭 */ --fs-label2: 14px; --lh-label2: 20px; /* 500 작은 버튼 · 칩 · 필터 · 내비 */ --fs-caption1: 13px; --lh-caption1: 20px; /* 400 메타(날짜·사무소·개수) */ --fs-caption2: 12px; --lh-caption2: 18px; /* 500 배지 · AD · 법적 고지 — 최소 크기 */ --fs-num-lg: 24px; --lh-num-lg: 32px; /* 600 금액 강조(고정폭 숫자) */ } /* 데스크톱(768px 이상): 제목 계열만 한 단계 키우고 본문은 15px로 */ @media (min-width: 768px) { :root { --fs-display: 36px; --lh-display: 46px; --fs-title1: 28px; --lh-title1: 38px; --fs-title2: 22px; --lh-title2: 30px; --fs-body2: 15px; --lh-body2: 24px; --fs-num-lg: 28px; --lh-num-lg: 36px; } } /* ── 기본값 — body의 **글자** 기본값은 여기 한 곳이다 ────────────────────── app.css body에는 색·바탕·줄바꿈(D-880 keep-all)만 남고 글자 선언(서체·크기·행간·자간)은 없다 — 두 파일에 같은 속성이 있으면 «어느 쪽이 진실인가»가 링크 순서에 매달린다. 옛 app.css 값: 16px(UA) / 1.5 / −0.2px / font-synthesis 기본(합성 허용). */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--fs-body2); /* 14px, ≥768 15px */ line-height: var(--lh-body2); /* 22px, ≥768 24px */ font-weight: var(--fw-regular); letter-spacing: var(--ls-14); /* 옛 -0.2px를 대신한다 — 크기 곡선(+0.02em) */ font-synthesis: none; /* 가짜 굵게·가짜 기울임 금지(D-271·D-363) — 없는 굵기는 가장 가까운 파일로 */ font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 폼 요소는 body의 글자를 통째로 따른다(D-363의 뜻 + 크기·행간·자간까지). UA 기본은 input Arial 13.33px · textarea monospace. app.css의 `font-family: inherit`(서체만)보다 넓다 — 둘 다 두되 여기가 뒤에 서서 이긴다. */ input, textarea, select, button, optgroup { font: inherit; letter-spacing: inherit; } /* ·은 600(§3-4) — UA 기본 bold(700)는 라운드에선 SemiBold로 그려지지만 computed 700이 남아 «700+ 굵기» 집계와 Pretendard 대체 구간(Bold 파일, 획이 더 굵다)에서 라운드와 달라진다. 값을 토큰으로 못 박아 어느 서체에서도 같은 굵기다. */ strong, b { font-weight: var(--fw-semibold); } /* ── 토큰 유틸리티 ──────────────────────────────────────────────────────── */ .st-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-semibold); letter-spacing: var(--ls-36); } .st-title1 { font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-22); } .st-title2 { font-size: var(--fs-title2); line-height: var(--lh-title2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-18); } .st-title3 { font-size: var(--fs-title3); line-height: var(--lh-title3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-18); } .st-heading { font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-semibold); letter-spacing: var(--ls-14); } .st-body1 { font-size: var(--fs-body1); line-height: var(--lh-body1); font-weight: var(--fw-regular); letter-spacing: var(--ls-14); } .st-body2 { font-size: var(--fs-body2); line-height: var(--lh-body2); font-weight: var(--fw-regular); letter-spacing: var(--ls-14); } .st-label1 { font-size: var(--fs-label1); line-height: var(--lh-label1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-14); } .st-label2 { font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-medium); letter-spacing: var(--ls-14); } .st-caption1 { font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); } .st-caption2 { font-size: var(--fs-caption2); line-height: var(--lh-caption2); font-weight: var(--fw-medium); letter-spacing: var(--ls-12); } .st-num-lg { font-size: var(--fs-num-lg); line-height: var(--lh-num-lg); font-weight: var(--fw-semibold); letter-spacing: 0; font-variant-numeric: tabular-nums; } /* 굵기·숫자 보조 — 크기 토큰과 함께 쓴다 */ .st-regular { font-weight: var(--fw-regular); } .st-medium { font-weight: var(--fw-medium); } .st-semibold { font-weight: var(--fw-semibold); } .st-num { font-variant-numeric: tabular-nums; } /* 금액·날짜·표 — SemTalk Sans에 tnum을 더해 두었다 */ .st-trim { text-box: trim-both cap alphabetic; } /* 지원 브라우저에서 버튼·칩 글자 상하 여백 균일화(점진적 향상) */ /* ── 이행 1단계: 옛 클래스(.t-*)를 새 토큰에 붙인다 — 마크업을 고치기 전에도 화면이 새 규칙을 따른다 ── 옛 정의는 app.css에 그대로 있다(같은 특이성, 이 파일이 뒤에 서서 덮는다). .t-caption1·.t-caption2의 색은 app.css 값이 남는다. 옛 → 새: .t-h2·.t-title1 → title2(20/28·22/30) · .t-title2·.t-title3 → title3(18/26) · .t-body2 15/1.6 → body2(14/22·15/24). 지우는 것은 C5. */ .t-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-semibold); letter-spacing: var(--ls-36); } .t-h1 { font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-22); } .t-h2, .t-title1 { font-size: var(--fs-title2); line-height: var(--lh-title2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-18); } .t-title2, .t-title3 { font-size: var(--fs-title3); line-height: var(--lh-title3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-18); } .t-body1 { font-size: var(--fs-body1); line-height: var(--lh-body1); font-weight: var(--fw-regular); letter-spacing: var(--ls-14); } .t-body2 { font-size: var(--fs-body2); line-height: var(--lh-body2); font-weight: var(--fw-regular); letter-spacing: var(--ls-14); } .t-label1 { font-size: var(--fs-label1); line-height: var(--lh-label1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-14); } .t-label2 { font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-medium); letter-spacing: var(--ls-14); } .t-caption1 { font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); } .t-caption2 { font-size: var(--fs-caption2); line-height: var(--lh-caption2); letter-spacing: var(--ls-12); } /* ── 옛 자간 토큰 재정의 — tokens.css의 --ls-* 를 쓰던 곳이 새 곡선을 따르게 한다(이행 1단계, 같은 :root라 뒤 선언이 이긴다) ── */ :root { --ls-2xl: var(--ls-22); /* 옛 -.5px (24px 이상) */ --ls-xl: var(--ls-18); /* 옛 -.4px (19~23px) */ --ls-lg: var(--ls-14); /* 옛 -.3px (16~18px) */ --ls-md: var(--ls-14); /* 옛 -.2px (13~15px) */ --ls-sm: var(--ls-12); /* 옛 -.1px (12px 이하) */ } /* ── 기호 글리프: 서체에 없는 ▾ 같은 기호는 글자 대신 SVG/CSS 도형으로 그린다 ── */ .st-caret { display: inline-block; width: .5em; height: .5em; border-right: .12em solid currentColor; border-bottom: .12em solid currentColor; transform: translateY(-.15em) rotate(45deg); margin-left: .35em; }