for-humanity 0.6.0 → 0.7.1

package/src/component/widget/prose/wg-prose.css

@@ -130,15 +130,15 @@
         margin: 4px 0 0;
     }
 
-    /* JetBrains Mono 합자 비활성 · >=, != 원문 구분 */
     & code {
         padding: 1px 3px;
         border-radius: var(--app-radius-inline);
         background: var(--app-color-code);
         color: var(--app-color-text-strong);
-        font-family: var(--app-font-mono);
+
+        /* UA monospace 대신 부모 글꼴 · 문단은 본문 정책, 코드 블록은 pre의 고정폭·자간 0 */
+        font-family: inherit;
         font-size: 1em;
-        font-variant-ligatures: none;
     }
 
     /* 코드 블록 · Shiki의 --app-code-* 참조 */
@@ -151,8 +151,8 @@
         background: var(--app-color-code);
         font-family: var(--app-font-mono);
         font-size: var(--app-font-size-detail);
-        font-variant-ligatures: none;
         line-height: var(--app-line-height-code);
+        letter-spacing: 0;
     }
 
     & pre code {
@@ -323,6 +323,9 @@
     margin: var(--app-space-block) 0;
     padding: var(--app-space-block) 0;
 
+    /* 라벨 위치는 자간 0의 격자로 계산 */
+    letter-spacing: 0;
+
     /* stylelint-disable-next-line selector-disallowed-list -- 외부 렌더러 생성 SVG */
     & svg {
         display: block;

package/src/component/widget/shell/wg-shell.css

@@ -1,20 +1,18 @@
 /*
- * 넓은 화면은 같은 폭의 양쪽 탐색 · 좁은 화면은 문서 탐색만 표시
+ * 넓은 화면은 같은 폭의 양쪽 탐색 사이를 본문이 채움 · 좁은 화면은 문서 탐색만 표시
  */
 .wg_shell__root {
     display: grid;
     max-width: var(--app-size-page);
     margin: 0 auto;
     padding: 0 var(--app-space-gutter);
-    grid-template: "nav main outline" 1fr / calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap)) minmax(0, var(--app-size-main)) calc(
-            var(--app-size-sidebar) +
-            var(--app-space-sidebar-gap)
-        );
+    grid-template: "nav main outline" 1fr / calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap)) minmax(0, 1fr) calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap));
     background: var(--app-color-ground);
     color: var(--app-color-text);
-    font-family: var(--app-font-sans);
+    font-family: var(--app-font-body);
     font-size: var(--app-font-size-body);
     line-height: var(--app-line-height-body);
+    letter-spacing: var(--app-letter-spacing-body);
 
     /* 한국어 낱말 단위 줄바꿈 · 긴 식별자만 예외 */
     word-break: keep-all;
@@ -35,7 +33,6 @@
 .wg_shell__main {
     grid-area: main;
     min-width: 0;
-    max-width: var(--app-size-main);
     border-inline: 1px solid var(--app-color-border-layout);
 
     /* 문서 목록의 시작선 · 마지막 절도 읽는 선까지 이동 가능한 끝 여백 */
@@ -43,17 +40,16 @@
     padding-inline: var(--app-space-column);
 }
 
-/* 오른쪽 목차를 숨기는 화면에서 본문과 문서 목록의 간격 유지 */
-@media (width < 1536px) {
+/* 본문 최소 약 800px을 남기도록 목차 숨김 · 본문이 오른쪽 여백까지 채움 */
+@media (width < 1360px) {
     .wg_shell__root {
-        grid-template: "nav main ." 1fr / calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap)) minmax(0, var(--app-size-main)) minmax(0, 1fr);
+        grid-template: "nav main" 1fr / calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap)) minmax(0, 1fr);
     }
 }
 
 /* 모바일의 브랜드·본문은 한 열 배치 */
 @media (width < 1024px) {
     .wg_shell__root {
-        max-width: calc(var(--app-size-main) + var(--app-space-gutter) * 2);
         grid-template:
             "nav" auto
             "main" 1fr / minmax(0, 1fr);

package/src/constant/copy.ts

@@ -47,11 +47,6 @@ export const copy_error_home_clash = "홈 README가 겹친다";
  */
 export const copy_error_prefix = "for-humanity";
 
-/**
- * 내장 본문 글꼴의 공통 조각이 누락된 패키지 오류
- */
-export const copy_error_font_preload = "Missing bundled font for preload";
-
 /**
  * 미지원 명령 오류
  */

package/src/constant/font.ts

@@ -4,25 +4,20 @@
  */
 
 /**
- * 본문 글꼴 CSS · 패키지 기준 경로 · dynamic subset 92개
+ * 본문 영문·코드·흐름도 글꼴 CSS · 패키지 기준 경로 · Regular·SemiBold 두 파일
  */
-export const font_sans_css = "src/asset/font/pretendard/pretendardvariable-dynamic-subset.css";
+export const font_mono_css = "src/asset/font/monoplex-kr/monoplex-kr.css";
 
 /**
- * 코드 글꼴 CSS · 라틴 subset · 한글은 본문 글꼴
+ * 본문 한글 글꼴 CSS · IBM Plex Sans KR Regular·SemiBold · 한글 unicode-range
  */
-export const font_mono_css = "src/asset/font/jetbrains-mono/jetbrains-mono.css";
+export const font_body_css = "src/asset/font/ibm-plex-sans-kr/ibm-plex-sans-kr.css";
 
 /**
  * 사이트 이름 글꼴 CSS · Architects Daughter Regular · 라틴 subset
  */
 export const font_brand_css = "src/asset/font/architects-daughter/architects-daughter.css";
 
-/**
- * 탐색·라틴 문자에 필요한 본문 조각 · 92개 전체 선요청 방지
- */
-export const font_sans_preload_file = "PretendardVariable.subset.91.woff2";
-
 /**
  * 늦게 받은 글꼴로 이미 보이는 대체 글꼴을 교체하지 않는 표시 정책
  */

package/src/entry/browser/browser.tsx

@@ -13,7 +13,7 @@ if (root !== null && payload !== null) {
     try {
         const value: unknown = JSON.parse(payload.textContent);
         const data = navigationDataSchema.parse(value);
-        const stores = createNavigationStores({local: () => localStorage, session: () => sessionStorage});
+        const stores = createNavigationStores({session: () => sessionStorage});
         createRoot(root).render(<WgShellControls data={data} stores={stores} reload={root.hasAttribute("data-shell-reload")} />);
     } catch (error) {
         // 초기화 오류에서도 서버의 링크·본문과 네이티브 스크롤 유지

package/src/entry/cli/cli.test.ts

@@ -314,12 +314,11 @@ test("nested groups follow metadata paths and keep sibling branches and document
     const html = toNavigationHtml({site, docs, current: "authoring"});
 
     assert.match(html, /href="\/authoring\/"[^>]*aria-current="page"/);
-    assert.match(html, /Atlas<\/span><button\b[^>]*aria-expanded="true"[^>]*>−<\/button><ul\b/);
-    assert.match(html, /Research<\/span><button\b[^>]*aria-expanded="true"[^>]*>−<\/button><ul\b/);
+    assert.match(html, /Atlas<\/span><ul\b/);
+    assert.match(html, /Research<\/span><ul\b/);
     assert.equal([...html.matchAll(/href="\/authoring\/"/g)].length, 1);
     assert.equal([...html.matchAll(/>Research<\/span>/g)].length, 2);
-    assert.equal([...html.matchAll(/wg_navigationNavList__item--current/g)].length, 3);
-    assert.doesNotMatch(toNavigationHtml({site, docs}), /aria-current="page"|wg_navigationNavList__item--current/);
+    assert.doesNotMatch(toNavigationHtml({site, docs}), /aria-current="page"/);
     assert.ok(html.indexOf('href="/parts/"') < html.indexOf('href="/authoring/"'));
     assert.doesNotMatch(html, /<details\b/);
 });
@@ -370,17 +369,16 @@ test("parent documents contain ordered descendants with independent URLs and one
     assert.deepEqual(toDocGroups({docs: docs.toReversed(), navigation: site.navigation}), groups);
 
     const html = toNavigationHtml({site, docs, current: "details"});
-    assert.match(html, /href="\/settings\/"[^>]*>Settings<\/a><button\b[^>]*aria-label="Collapse Settings"[^>]*>−<\/button><ul\b[^>]*aria-label="Settings"/);
-    assert.match(html, /href="\/guide\/site\/"[^>]*>Site<\/a><button\b[^>]*aria-label="Collapse Site"[^>]*>−<\/button><ul\b[^>]*aria-label="Site"/);
+    assert.match(html, /href="\/settings\/"[^>]*>Settings<\/a><ul\b[^>]*aria-label="Settings"/);
+    assert.match(html, /href="\/guide\/site\/"[^>]*>Site<\/a><ul\b[^>]*aria-label="Site"/);
     assert.match(html, /href="\/details\/"[^>]*aria-current="page"/);
     assert.equal([...html.matchAll(/aria-current="page"/g)].length, 1);
     assert.equal([...html.matchAll(/wg_navigationNavList__link--active/g)].length, 1);
-    assert.equal([...html.matchAll(/wg_navigationNavList__item--current/g)].length, 5);
     for (const doc of docs) {
         assert.equal(html.split(`href="/${doc.id}/"`).length - 1, 1);
     }
     assert.ok(html.indexOf('href="/themes/"') < html.indexOf('href="/guide/site/"'));
-    assert.doesNotMatch(toNavigationHtml({site, docs}), /aria-current="page"|wg_navigationNavList__item--current/);
+    assert.doesNotMatch(toNavigationHtml({site, docs}), /aria-current="page"/);
 
     const app = createApp({
         site,

package/src/entry/cli/cli.ts

@@ -7,7 +7,7 @@
 import {EventEmitter} from "node:events";
 import {existsSync, readFileSync, watch} from "node:fs";
 import {copyFile, mkdir, rm, writeFile} from "node:fs/promises";
-import {basename, dirname, extname, join, relative, resolve, sep} from "node:path";
+import {dirname, extname, join, relative, resolve, sep} from "node:path";
 import {fileURLToPath, pathToFileURL} from "node:url";
 import {serve} from "@hono/node-server";
 import {serveStatic} from "@hono/node-server/serve-static";
@@ -15,8 +15,8 @@ import {debounce} from "es-toolkit";
 import {Hono} from "hono";
 import {toSSG} from "hono/ssg";
 import {asset_favicon_path, asset_font_dir, asset_media_extensions, asset_style_path} from "@/constant/asset";
-import {copy_error_config, copy_error_font_preload, copy_error_prefix, copy_error_unknown_command} from "@/constant/copy";
-import {font_brand_css, font_cache_control, font_mono_css, font_sans_css, font_sans_preload_file} from "@/constant/font";
+import {copy_error_config, copy_error_prefix, copy_error_unknown_command} from "@/constant/copy";
+import {font_body_css, font_brand_css, font_cache_control, font_mono_css} from "@/constant/font";
 import {site_config_absent} from "@/constant/site";
 import {cli_config_file_name, cli_default_command, cli_default_docs_dir, cli_dev_port, cli_reload_delay_ms} from "@/entry/cli/_constant/cli";
 import {crawling_reserved_roots} from "@/entry/cli/_constant/crawling";
@@ -77,23 +77,18 @@ const main = async () => {
 
     const siteConfig = parsedConfig.data;
     // 내장 @font-face와 파일 수집 · font-family는 token.css 소유
-    const sans = toFontCss({css: join(kitRoot, font_sans_css), fontDir: asset_font_dir});
     const mono = toFontCss({css: join(kitRoot, font_mono_css), fontDir: asset_font_dir});
+    const body = toFontCss({css: join(kitRoot, font_body_css), fontDir: asset_font_dir});
     const brand = toFontCss({css: join(kitRoot, font_brand_css), fontDir: asset_font_dir});
-    const sansPreload = [...sans.files].find((entry) => basename(entry[1]) === font_sans_preload_file);
 
-    if (sansPreload === undefined) {
-        throw new Error(`${copy_error_font_preload}: ${font_sans_preload_file}`);
-    }
-
-    const fontCss = [sans.css, mono.css, brand.css].join("\n");
+    const fontCss = [mono.css, body.css, brand.css].join("\n");
     const stylePath = toAssetPath({path: asset_style_path, file: join(kitRoot, "dist/cli.css")});
     const browserScript = readFileSync(join(kitRoot, "dist/browser.js"), "utf8");
     const kitFiles = new Map([
         [stylePath, join(kitRoot, "dist/cli.css")],
         [asset_favicon_path, join(kitRoot, "src/asset/favicon.svg")],
-        ...sans.files,
         ...mono.files,
+        ...body.files,
         ...brand.files,
     ]);
     const files = new Map(kitFiles);
@@ -107,7 +102,7 @@ const main = async () => {
     const app = createApp({
         site: siteConfig,
         store,
-        assets: {stylePath, browserScript, fontCss, preload: [...brand.files.keys(), sansPreload[0], ...mono.files.keys()], reload: command === "dev"},
+        assets: {stylePath, browserScript, fontCss, preload: [...brand.files.keys(), ...mono.files.keys(), ...body.files.keys()], reload: command === "dev"},
     });
 
     if (command === "build") {

package/src/store/navigation/create-navigation-stores.test.ts

@@ -1,35 +1,25 @@
 import assert from "node:assert/strict";
 import {test} from "node:test";
 import {createNavigationStores} from "@/store/navigation/create-navigation-stores";
-import {navigation_scroll_storage_key, navigation_tree_storage_key} from "@/store/navigation/navigation-storage";
+import {navigation_scroll_storage_key} from "@/store/navigation/navigation-storage";
 
 const fixture = () => {
-    const local = new Map<string, string>();
     const session = new Map<string, string>();
-    const storage = (values: Map<string, string>) => ({
+    const storage = {
         getItem: (key: string) => {
-            const value = values.get(key);
+            const value = session.get(key);
             return value === undefined ? null : value;
         },
         setItem: (key: string, value: string) => {
-            values.set(key, value);
+            session.set(key, value);
         },
         removeItem: (key: string) => {
-            values.delete(key);
+            session.delete(key);
         },
-    });
-    return {local, session, options: {local: () => storage(local), session: () => storage(session)}};
+    };
+    return {session, options: {session: () => storage}};
 };
 
-test("starts with every branch expanded and persists explicit choices across pages", () => {
-    const setup = fixture();
-    const stores = createNavigationStores(setup.options);
-    assert.deepEqual(stores.tree.getState(), {collapsed: {}});
-    stores.tree.setState({collapsed: {'group:["Projects"]': true, "outline:one:heading:setup": false}});
-    assert.deepEqual(createNavigationStores(setup.options).tree.getState(), stores.tree.getState());
-    assert.equal(setup.session.has(navigation_tree_storage_key), false);
-});
-
 test("retains independent wide, desktop and drawer scroll positions within a tab", () => {
     const setup = fixture();
     const stores = createNavigationStores(setup.options);
@@ -41,23 +31,19 @@ test("retains independent wide, desktop and drawer scroll positions within a tab
         },
     });
     assert.deepEqual(createNavigationStores(setup.options).scroll.getState(), stores.scroll.getState());
-    assert.equal(setup.local.has(navigation_scroll_storage_key), false);
 });
 
 test("rejects malformed and unknown-version persistence without losing defaults", () => {
-    for (const value of ["{", "null", '{"state":null,"version":1}', '{"state":{"collapsed":{"group:a":true}},"version":999}']) {
+    for (const value of ["{", "null", '{"state":null,"version":1}', '{"state":{"positions":{}},"version":999}']) {
         const setup = fixture();
-        setup.local.set(navigation_tree_storage_key, value);
         setup.session.set(navigation_scroll_storage_key, value);
         const stores = createNavigationStores(setup.options);
-        assert.deepEqual(stores.tree.getState(), {collapsed: {}});
         assert.deepEqual(stores.scroll.getState(), {positions: {}});
     }
 });
 
-test("narrows persisted branch flags and rejects invalid scroll coordinates", () => {
+test("rejects invalid scroll coordinates", () => {
     const setup = fixture();
-    setup.local.set(navigation_tree_storage_key, JSON.stringify({version: 1, state: {collapsed: {good: true, bad: "true"}, unexpected: true}}));
     setup.session.set(
         navigation_scroll_storage_key,
         JSON.stringify({
@@ -72,7 +58,6 @@ test("narrows persisted branch flags and rejects invalid scroll coordinates", ()
         }),
     );
     const stores = createNavigationStores(setup.options);
-    assert.deepEqual(stores.tree.getState(), {collapsed: {good: true}});
     assert.deepEqual(stores.scroll.getState().positions.wide, {navigation: "docs", pathname: "/one/", documents: 100, outline: 20});
     assert.equal(stores.scroll.getState().positions.desktop, undefined);
     assert.equal(stores.scroll.getState().positions.drawer, undefined);
@@ -82,10 +67,7 @@ test("keeps in-memory interaction working when storage reads and writes are bloc
     const blocked = () => {
         throw new Error("Storage blocked");
     };
-    const stores = createNavigationStores({local: blocked, session: blocked});
-    stores.tree.setState({collapsed: {"document:one": true}});
-    stores.tree.persist.rehydrate();
-    assert.equal(stores.tree.getState().collapsed["document:one"], true);
+    const stores = createNavigationStores({session: blocked});
     stores.scroll.setState({positions: {desktop: {navigation: "docs", pathname: "/", documents: 100, outline: 200}}});
     stores.scroll.persist.rehydrate();
     assert.equal(stores.scroll.getState().positions.desktop?.documents, 100);

package/src/store/navigation/create-navigation-stores.ts

@@ -1,18 +1,13 @@
 import {createJSONStorage, persist, type StateStorage} from "zustand/middleware";
 import {createStore} from "zustand/vanilla";
-import type {NavigationScrollState, NavigationTreeState} from "@/store/navigation/navigation-state";
-import {navigation_scroll_storage_key, navigation_storage_version, navigation_tree_storage_key} from "@/store/navigation/navigation-storage";
+import type {NavigationScrollState} from "@/store/navigation/navigation-state";
+import {navigation_scroll_storage_key, navigation_storage_version} from "@/store/navigation/navigation-storage";
 import {toNavigationScrollState} from "@/store/navigation/to-navigation-scroll-state";
-import {toNavigationTreeState} from "@/store/navigation/to-navigation-tree-state";
 
 /**
  * 브라우저 저장소를 늦게 읽는 경계 · 차단 환경과 테스트의 메모리 저장소 지원
  */
 interface NavigationStorage {
-    /**
-     * 브라우저 재실행 후에도 유지할 접힘 선택
-     */
-    local: () => StateStorage;
     /**
      * 같은 탭 안에서만 복원할 스크롤 위치
      */
@@ -25,9 +20,9 @@ interface NavigationStorage {
  */
 export const createNavigationStores = (options: NavigationStorage) => {
     /**
-     * 저장소 접근이 막혀도 persist 갱신이 버튼·스크롤 동작을 중단하지 않도록 격리
+     * 저장소 접근이 막혀도 persist 갱신이 스크롤 동작을 중단하지 않도록 격리
      */
-    const toSafeStorage = (getStorage: NavigationStorage["local"]): StateStorage => {
+    const toSafeStorage = (getStorage: NavigationStorage["session"]): StateStorage => {
         return {
             getItem: (key) => {
                 // persist의 읽기 오류 경로로 보내 기존 메모리 상태를 유지 · null은 실제 저장소 초기화에만 사용
@@ -51,15 +46,6 @@ export const createNavigationStores = (options: NavigationStorage) => {
     };
 
     return {
-        tree: createStore<NavigationTreeState>()(
-            persist(() => ({collapsed: {}}), {
-                name: navigation_tree_storage_key,
-                version: navigation_storage_version,
-                storage: createJSONStorage(() => toSafeStorage(options.local)),
-                merge: (persisted) => toNavigationTreeState(persisted),
-                migrate: () => ({collapsed: {}}),
-            }),
-        ),
         scroll: createStore<NavigationScrollState>()(
             persist(() => ({positions: {}}), {
                 name: navigation_scroll_storage_key,

package/src/store/navigation/navigation-state.ts

@@ -3,16 +3,6 @@
  */
 export type NavigationLayout = "wide" | "desktop" | "drawer";
 
-/**
- * 사용자가 명시적으로 바꾼 가지 선택 · 없는 키는 펼침
- */
-export interface NavigationTreeState {
-    /**
-     * 문서 ID·그룹 전체 경로·페이지별 heading으로 구분한 접힘 상태
-     */
-    collapsed: Record<string, boolean>;
-}
-
 /**
  * 한 화면 배치의 마지막 탐색 위치 · 목록 변경과 다른 페이지의 목차는 재사용하지 않음
  */

package/src/store/navigation/navigation-storage.ts

@@ -1,8 +1,3 @@
-/**
- * 문서·현재 페이지 목차의 접힘 선택 · 기본은 전체 펼침
- */
-export const navigation_tree_storage_key = "for-humanity:navigation-tree";
-
 /**
  * 저장 형태가 바뀌면 기존 자료를 기본 상태로 돌리는 persist 버전
  */

package/src/style/token.css

@@ -1,7 +1,7 @@
 /*
  * 공통 토큰의 단일 출처 · --app-종류-쓰임
  * 사용 기준: templates/document/design.md · 테마 분기는 color-scheme에 한정
- * 폭 기준 1536px·1024px·640px · 양쪽 탐색과 본문 배치
+ * 폭 기준 1360px·1024px·640px · 양쪽 탐색과 본문 배치
  */
 
 :root {
@@ -48,16 +48,16 @@
 
     /*
      * 내장 글꼴 · CLI는 @font-face와 자원 URL 생성
-     * 본문·라벨 Pretendard · 코드·흐름도 JetBrains Mono · 사이트 이름 Architects Daughter
-     * 영문 폭 0.6em = 흐름도 12px 격자의 7.2px
+     * 본문·라벨·인라인 코드 한글 IBM Plex Sans KR·영문 Monoplex KR · 코드 블록·흐름도 Monoplex KR · 사이트 이름 Architects Daughter
+     * 영문 폭 0.528em = 흐름도 12px 격자의 6.336px · 코드 블록·흐름도의 한글은 정확히 2칸
+     * 본문 맨 앞의 IBM Plex Sans KR은 한글 unicode-range만 담당 · 영문·숫자·기호는 다음 순서의 Monoplex KR
      */
-    --app-font-sans: "Pretendard Variable", system-ui, "Apple SD Gothic Neo", sans-serif;
-    --app-font-mono: "JetBrains Mono Variable", var(--app-font-sans);
-    --app-font-brand: "Architects Daughter", var(--app-font-sans);
+    --app-font-mono: "Monoplex KR", ui-monospace, monospace;
+    --app-font-body: "IBM Plex Sans KR", var(--app-font-mono);
+    --app-font-brand: "Architects Daughter", var(--app-font-body);
 
     /* 글자 크기 · 11px 비상호작용 묶음 · 12px 기본과 역할별 제목 크기 */
     --app-font-size-group: 11px;
-    --app-font-size-label: 12px;
     --app-font-size-detail: 12px;
     --app-font-size-dense: 12px;
     --app-font-size-body: 12px;
@@ -72,18 +72,18 @@
     --app-font-weight-strong: 600;
     --app-font-weight-title: 600;
 
-    /* 행간 · 작은 제목·탐색은 1.5, 본문은 한글 획 사이 여유 확보 */
+    /* 행간 · 작은 제목·탐색은 1.4, 본문은 한글 획 사이 여유 확보 */
     --app-line-height-title: 1.5;
     --app-line-height-heading: 1.5;
-    --app-line-height-tight: 1.5;
+    --app-line-height-tight: 1.4;
     --app-line-height-code: 1.65;
     --app-line-height-body: 1.7;
 
-    /* 자간 · 12px 본문·라벨은 기본 폭, 제목만 미세하게 조임 */
-    --app-letter-spacing-label: 0;
+    /* 자간 · 본문·라벨·인라인 코드를 조이고 제목은 그보다 조금 더 · 사이트 이름은 기본 폭 · 코드 블록·흐름도는 격자를 위해 0 */
+    --app-letter-spacing-body: -0.03em;
     --app-letter-spacing-brand: 0;
-    --app-letter-spacing-heading: -0.01em;
-    --app-letter-spacing-title: -0.015em;
+    --app-letter-spacing-heading: -0.04em;
+    --app-letter-spacing-title: -0.045em;
 
     /* 공통 간격 · margin·padding·gap의 리듬 · 단독 보정은 지역 값 */
     --app-space-inline: 6px;
@@ -92,9 +92,10 @@
     --app-space-group: 20px;
     --app-space-section: 32px;
 
-    /* 탐색 트리 · 항목 위아래 여백·묶음 안쪽 여백·가지와 중첩 들여쓰기 */
-    --app-space-tree-row: 2px;
-    --app-space-tree-inset: 4px;
+    /* 탐색 트리 · 항목 위아래 여백·묶음 사이·묶음 라벨 아래·중첩 들여쓰기 */
+    --app-space-tree-row: 0px;
+    --app-space-tree-group: 16px;
+    --app-space-tree-label: 2px;
     --app-space-tree-indent: 12px;
 
     /* 페이지 틀 · 좁은 화면 값은 아래 @media */
@@ -102,15 +103,15 @@
     --app-space-gutter: 28px;
     --app-space-column: 32px;
     --app-space-sidebar-gap: 32px;
-    --app-size-sidebar: 240px;
-    --app-size-main: 900px;
-    --app-size-page: calc(var(--app-size-main) + (var(--app-size-sidebar) + var(--app-space-sidebar-gap) + var(--app-space-gutter)) * 2);
+    --app-size-sidebar: 200px;
+
+    /* 페이지 최대 폭 · 본문은 사이드바·간격을 뺀 나머지 전체 */
+    --app-size-page: 1920px;
     --app-size-brand: calc(var(--app-font-size-title) * var(--app-line-height-title) + var(--app-space-page-top) + var(--app-space-group));
     --app-size-mobile-header: 56px;
     --app-size-menu-button: 44px;
     --app-size-drawer: 320px;
     --app-size-navigation-fade: 28px;
-    --app-size-tree-toggle: 24px;
 
     /* 화면 위쪽 제목 여백 · hash 도착점과 목차 읽는 선의 공통 기준 */
     --app-space-anchor: 80px;

package/src/util/font/to-font-css.test.ts

@@ -4,11 +4,11 @@ import {tmpdir} from "node:os";
 import {join} from "node:path";
 import {test} from "node:test";
 import {asset_font_dir} from "@/constant/asset";
-import {font_brand_css, font_mono_css, font_sans_css} from "@/constant/font";
+import {font_body_css, font_brand_css, font_mono_css} from "@/constant/font";
 import {toFontCss} from "@/util/font/to-font-css";
 
 test("bundled fonts prevent a late swap after fallback text is visible", () => {
-    for (const css of [font_sans_css, font_mono_css, font_brand_css]) {
+    for (const css of [font_mono_css, font_body_css, font_brand_css]) {
         const result = toFontCss({css: join(process.cwd(), css), fontDir: asset_font_dir});
 
         assert.match(result.css, /font-display:\s*optional;/);

package/src/util/mermaid/render-flow.js

@@ -82,7 +82,7 @@ function widenLabelGaps(rows) {
 }
 
 function gridToSvg(ascii) {
-    const cw = 7.2, ch = 17, fs = 12;
+    const cw = 6.336, ch = 17, fs = 12;
     const rows = widenLabelGaps(ascii.replace(/\s+$/, "").split("\n"));
     const cols = Math.max.apply(null, rows.map((r) => r.length));
     const f = (n) => n.toFixed(1);
@@ -90,7 +90,7 @@ function gridToSvg(ascii) {
 
     const isText = (chr) => chr !== undefined && chr !== " " && chr !== ZW && LINES[chr] === undefined && ARROWS[chr] === undefined && chr !== "◇";
     const center = (c) => c * cw + cw / 2;
-    const textWidth = (chars) => chars.reduce((w, chr) => w + (WIDE.test(chr) ? fs : cw), 0);
+    const textWidth = (chars) => chars.reduce((w, chr) => w + (WIDE.test(chr) ? cw * 2 : cw), 0);
 
     rows.forEach((row, r) => {
         const cy = r * ch + ch / 2, y0 = r * ch, y1 = y0 + ch;

package/src/asset/font/jetbrains-mono/jetbrains-mono.css

@@ -1,11 +0,0 @@
-/* JetBrains Mono Variable, Fontsource 5.3.0 의 latin 조각. 라이선스는 옆의 LICENSE (OFL) */
-/* jetbrains-mono-latin-wght-normal */
-@font-face {
-    font-family: "JetBrains Mono Variable";
-    font-style: normal;
-    font-display: swap;
-    font-weight: 100 800;
-    src: url(./jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations");
-    unicode-range:
-        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}