/* ============================================================================ * nx-typography.css — 언어별 타이포그래피 * * 값은 여기에 없다. 서버가 로 내려주고, * 이 파일은 그 변수를 **어디에 적용할지**만 정한다. * 값의 출처: core/i18n/locales.yaml → core/nx/locales.py → 셸 템플릿 * * 왜 필요한가 * ---------- * 같은 16px 에서 라틴·한글·가나는 서로 다른 크기로 보인다. 언어마다 * font-size·line-height 를 따로 두지 않으면 매뉴얼 산출물의 줄간격이 * 언어별로 어긋나 지저분해진다. * * ★ 아이콘 폰트를 덮지 않는다 * Zynix 의 아이콘(remixicon·tabler·bootstrap-icons·feather·line-awesome)은 * 자기 자신에게 `font-family: 'remixicon' !important` 를 걸고 있다. * 여기서는 `html, body` 와 텍스트 요소만 지정하고 `*` 를 쓰지 않으므로 * 아이콘 규칙이 그대로 이긴다. **`* { font-family }` 로 바꾸지 말 것.** * * ★ Zynix styles.css 쪽은 이미 처리되어 있다 * 원본의 `font-family: Quicksand, sans-serif` 를 전부 * `var(--nx-font, ui-sans-serif)` 로 치환해 두었다(apexcharts·quill 포함). * 그래서 이 파일이 없어도 폰트는 맞고, 이 파일은 크기·줄간격·줄바꿈을 맡는다. * ========================================================================= */ html, body { font-family: var(--nx-font, ui-sans-serif, system-ui, sans-serif); font-size: var(--nx-font-size, 16px); line-height: var(--nx-line-height, 1.6); letter-spacing: var(--nx-letter-spacing, 0); } /* 폼 요소는 브라우저 기본 폰트를 쓰므로 명시적으로 상속시킨다. (input·select·textarea·button 은 font: inherit 가 없으면 OS 폰트로 나온다) */ input, select, textarea, button, optgroup { font-family: inherit; font-size: inherit; letter-spacing: inherit; } /* --------------------------------------------------------------------------- * 줄바꿈 — 한국어는 keep-all, 일본어·중국어는 normal * * keep-all 이 없으면 한국어에서 브라우저가 **어절 중간을 끊는다** * ("안녕하세" / "요"). 한글 웹 타이포의 1번 실수다. * 반대로 일본어에 keep-all 을 걸면 줄 끝이 크게 비어 보인다. * * overflow-wrap: anywhere 를 함께 두는 이유 — keep-all 만 쓰면 공백 없는 * 긴 문자열(URL·해시)이 컨테이너를 뚫고 나간다. * ------------------------------------------------------------------------ */ body, p, li, dt, dd, td, th, h1, h2, h3, h4, h5, h6, blockquote, figcaption, label, .prose, .nx-prose { word-break: var(--nx-word-break, normal); overflow-wrap: anywhere; /* 독일어 합성어 대비(locales.yaml 의 hyphens). 기본 manual = 무해 — ­ 를 넣은 자리에서만 끊는다. de 만 auto 다. */ hyphens: var(--nx-hyphens, manual); -webkit-hyphens: var(--nx-hyphens, manual); } /* 코드·URL·표의 숫자는 줄바꿈 규칙에서 제외한다(가독성). */ code, pre, kbd, samp, .font-mono, [class*="tabular"] { word-break: normal; overflow-wrap: normal; } /* 숫자는 폭이 고정돼야 표가 흔들리지 않는다. Pretendard 는 tabular-nums 를 지원한다. */ table, .nx-num, [data-nx-num] { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------------- * 웹폰트가 도착하기 전 깜빡임(FOUT) 줄이기 * font-display: swap 은 생성된 폰트 CSS(build.mjs)에 들어간다. * 여기서는 폴백 폰트로 그려질 때의 크기 차이만 완화한다. * ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference) { html { text-rendering: optimizeLegibility; } }