feat: New Features セクションを新設し脚注／CMYK／ページグループの実践ガイドを追加

.gitignore

@@ -25,3 +25,6 @@ pnpm-debug.log*
 
 # Vivliostyle temporary files
 .vivliostyle/
+
+# Vivliostyle preview (vite) cache
+.vite/

_investigation/footnote-display-inline.md

@@ -0,0 +1,216 @@
+# `footnote-display: inline` が author CSS から効かない件
+
+Vivliostyle.js のドキュメントサイトで脚注ガイド記事のスクリーンショットを
+撮影中に発見した問題のメモ。
+
+## 環境
+
+- `@vivliostyle/cli` **10.5.0**
+- `@vivliostyle/viewer` **2.41.0**
+- `@vivliostyle/core` **2.42.0**（CLI が依存）
+- macOS / Chrome 経由 `vivliostyle preview`
+
+## 期待する挙動（CSS GCPM 3）
+
+```css
+.footnote {
+  footnote-display: inline;
+}
+```
+
+を指定すると、複数の DPUB-ARIA 脚注（`<aside role="doc-footnote">`）が
+**脚注エリア内で 1 行（または最小限の行数）にインラインで流し込まれる**。
+
+参考: [CSS GCPM 3 §2.4 footnote-display](https://www.w3.org/TR/css-gcpm-3/#footnote-display)
+
+## 実際の挙動
+
+`@vivliostyle/cli@10.5.0` 環境で `vivliostyle preview` を実行すると、
+**`footnote-display: inline` を author CSS で指定しても、脚注エリアでは
+各注がブロックレベルで縦積みされる**（block 表示と区別がつかない）。
+
+## 試したパターン（すべて未動作）
+
+### 1. 最小構成
+
+```html
+<style>
+  .footnote { footnote-display: inline; }
+</style>
+<aside class="footnote" role="doc-footnote">注1</aside>
+<aside class="footnote" role="doc-footnote">注2</aside>
+<aside class="footnote" role="doc-footnote">注3</aside>
+```
+
+### 2. テストファイル `dpub-footnote-display.html` と同じセクションラップ
+
+```html
+<style>
+  .footnote-display-inline .footnote { footnote-display: inline; }
+</style>
+<section class="footnote-display-inline">
+  <p>...<a role="doc-noteref" href="#fn1">1</a>...</p>
+  <aside id="fn1" class="footnote" role="doc-footnote">注1</aside>
+</section>
+```
+
+### 3. テストファイル完全一致パターン（footnote-ref class、backlink つき）
+
+```html
+<a id="ref1" href="#fn1" class="footnote-ref" role="doc-noteref"><sup>1</sup></a>
+...
+<aside id="fn1" class="footnote" role="doc-footnote">
+  <a href="#ref1" class="footnote-back" role="doc-backlink"><sup>1</sup></a>
+  注1
+</aside>
+```
+
+### 4. 属性セレクタ
+
+```css
+aside[role="doc-footnote"] { footnote-display: inline; }
+```
+
+### 5. `display: inline` フォールバック
+
+```css
+.footnote { footnote-display: inline; display: inline; }
+```
+
+→ `display: inline` 自体は反映され、aside が **本文中に** インライン表示
+されてしまった（UA の `display: none` を上書き）。脚注エリアの方は依然
+として block 表示のまま。
+
+### 6. ページサイズ拡大
+
+180×110mm でも 148×210mm（A5）でも、結果は同じ。
+
+## 観察
+
+### テストファイル自体の挙動
+
+`submodules/vivliostyle.js/packages/core/test/files/footnotes/dpub-footnote-display.html`
+を `vivliostyle preview` で開くと、「footnote-display: inline」セクション
+の脚注エリアでも 3 件の注が**別々の行**に表示される（block と視覚的に
+区別がつかない）。
+
+つまり**テストが通っている挙動 = 視覚的にインラインに見える**ではない
+可能性がある（テストはピクセル比較かもしれず、内部状態のみ正しければ
+通るのかも）。
+
+### 関連ソース
+
+`packages/core/src/vivliostyle/semantic-footnote.ts` の
+`getFootnoteDisplayOverride`:
+
+```typescript
+const footnoteDisplay = styleAccess.getProp(style, "footnote-display");
+if (footnoteDisplay) {
+  return footnoteDisplay;
+}
+const display = styleAccess.getProp(style, "display");
+if (display?.value === Css.ident.inline) {
+  return styleAccess.createCascadeValue(Css.ident.inline, display.priority);
+}
+return null;
+```
+
+`footnote-display` プロパティは元の脚注要素のスタイルから読まれる
+仕様。読まれているのに視覚効果に出ない、ということは、後続のレイアウト
+処理側で適用が落ちている可能性が高い。
+
+## 切り分けに必要そうな情報
+
+- v2.41.0 で `footnote-display: inline` が視覚的にインライン流し込みする
+  サンプルが存在するか（テスト以外で）
+- もし「内部状態のみ」のサポートだとしたら、それは仕様？それともバグ？
+- `supported-css-features.md` には `footnote-display` の `block` /
+  `inline` / `compact` がサポート済と記載あり
+
+## Issue 草案
+
+タイトル候補:
+> v2.41.0 で `footnote-display: inline` が DPUB-ARIA 脚注の本文を視覚的に
+> 1 行に流し込まない
+
+本文（日本語、起票時に確認・調整）:
+
+```
+### 概要
+
+`<aside role="doc-footnote">`（または `.footnote` クラス）に対して
+`footnote-display: inline` を指定しても、脚注エリアでは各脚注本文が
+それぞれ別の行にブロック積みされ、デフォルトの
+`footnote-display: block` と視覚的に区別がつきません。
+
+同じ現象がリポジトリ内蔵のテストファイル
+`packages/core/test/files/footnotes/dpub-footnote-display.html` でも
+観察され、「footnote-display: inline」セクションは
+「footnote-display: block」セクションと同じ見た目になります。
+
+### 環境
+
+- `@vivliostyle/cli` 10.5.0
+- `@vivliostyle/viewer` 2.41.0
+- `@vivliostyle/core` 2.42.0
+- macOS、`vivliostyle preview` 経由（Chromium 系ブラウザ）
+
+### 再現方法
+
+最小再現の HTML を以下に置いています（参照リンク参照）:
+`docs2.vivliostyle.org/_screenshots/footnotes/{en,ja}/05-footnote-display-inline.html`
+
+簡略な再現コード:
+
+(ja/05 を縮めたインライン HTML を貼る)
+
+### 期待される挙動
+
+CSS GCPM 3 §2.4 footnote-display およびドキュメントサイトの
+[脚注ガイド](https://docs.vivliostyle.org/ja/new-features/footnotes/)
+（対象バージョン Vivliostyle.js v2.41.0+）に従えば、3 件の短い脚注本文は
+脚注エリアで 1 行（または 1 つの inline run として折り返しを含むひとつの
+連続）に流れるはずです。
+
+### 実際の挙動
+
+3 件の脚注が縦積みされ、`footnote-display: block` と区別がつきません。
+スクリーンショット添付。
+
+### 試したパターン
+
+- `.footnote { footnote-display: inline }`
+- `.footnote-display-inline .footnote { footnote-display: inline }`
+  （`dpub-footnote-display.html` テストと同じ書き方）
+- `aside[role="doc-footnote"] { footnote-display: inline }`
+- フォールバックとして `display: inline` を併記
+  → `display: inline` 自体は反映され aside が本文中にもインライン表示
+  されてしまった（UA の `display: none` を上書き）。脚注エリア側は
+  依然として block 表示のまま。
+- ページサイズの拡大（148×210 / 180×110）
+
+### 補足
+
+- `semantic-footnote.ts` の `getFootnoteDisplayOverride` は
+  `footnote-display: inline` をソースから読み取るコードになっており、
+  cascade の段階では正しく拾われています。にもかかわらず最終的な
+  レイアウトに変化が見えないため、後段のレイアウト処理側で適用が
+  落ちている可能性があります。
+- この問題は、Vivliostyle ドキュメントサイト v2.41.0 向け脚注ガイドの
+  スクリーンショット撮影中に発見しました。
+
+### 関連リンク
+
+- docs2.vivliostyle.org Issue #15
+- docs2.vivliostyle.org ブランチ `feat/issue-15-new-features-section`
+- 再現用 HTML: `_screenshots/footnotes/{en,ja}/05-footnote-display-inline.html`
+```
+
+## 次のステップ
+
+1. **本ファイルをコミット**して投稿前のメモとして残す
+2. ユーザの確認のうえ、`gh issue create` で Vivliostyle.js リポジトリに
+   起票（または手動投稿）
+3. 起票後、記事 `content/{en,ja}/new-features/footnotes.md` の §8
+   `footnote-display` 節に「v2.41.0 で視覚的に確認できない（[Issue
+   #XXXX](URL)）」と注記を入れる

_screenshots/footnotes/README.md

@@ -0,0 +1,124 @@
+# 脚注ガイド スクリーンショット撮影環境
+
+`content/{en,ja}/new-features/footnotes.md` に埋め込むスクリーンショットを
+撮影するためのソース HTML を置く作業ディレクトリです。
+
+## 設計方針
+
+- **ページサイズを意図的に小さく設定**（140mm × 90mm 程度の短冊型）して、
+  「本文の参照位置 + 脚注エリア」だけが 1 ページに収まるようにしてある。
+  撮影時は **ページ全体** を撮るだけで OK。トリミング作業が不要になり、
+  ファイルサイズも自然に抑えられる。
+- 各 HTML は完全自己完結（CSS は `<style>` 内にインライン）。Vivliostyle.js
+  v2.41.0+ で開けば、ガイド記事に対応する見え方を確認できる。
+
+## ディレクトリ構成
+
+```
+_screenshots/footnotes/
+├── README.md             ← このファイル
+├── en/                   ← 英語サンプル本文の HTML
+│   ├── 01-html-class-themebase.html
+│   ├── 02-vfm-pandoc-endnotes.html
+│   ├── 03-dpub-aria-default.html
+│   ├── 04-page-footnote-styled.html
+│   ├── 05-footnote-display-inline.html
+│   ├── 06-footnote-display-compact.html
+│   └── 07-footnote-marker-outside.html
+└── ja/                   ← 日本語サンプル本文の HTML
+    └── (same 7 files)
+```
+
+## 撮影手順
+
+### 1. ローカルで開く
+
+#### a) Vivliostyle CLI で個別プレビュー（推奨）
+
+```sh
+# 例: 日本語版の例 1 を開く
+npx vivliostyle preview _screenshots/footnotes/ja/01-html-class-themebase.html
+```
+
+ブラウザが自動で開く。プレビュー画面で「単ページ」表示にする。
+
+#### b) HTTP サーバ + Vivliostyle Viewer
+
+```sh
+npx http-server _screenshots/footnotes -p 8080
+```
+
+そのうえで Vivliostyle Viewer を以下の URL で開く:
+
+```
+https://vivliostyle.org/viewer/?src=http://localhost:8080/ja/01-html-class-themebase.html
+```
+
+### 2. 撮影
+
+- 短冊型のページ全体（本文 + 脚注エリア）を 1 枚に収める
+- 推奨フォーマット: **PNG**
+- 解像度: Retina 相当（DPR 2x）程度
+
+### 3. 保存先
+
+```
+public/new-features/footnotes/
+├── en/
+│   ├── 01-html-class-themebase.png
+│   ├── …
+└── ja/
+    ├── 01-html-class-themebase.png
+    └── …
+```
+
+`public/` 以下に置くことで Astro のデプロイに含まれる。
+
+### 4. 記事への組み込み
+
+`content/{en,ja}/new-features/footnotes.md` の該当セクションに以下のように
+追記:
+
+```markdown
+![Footnote rendered with theme-base CSS](/new-features/footnotes/en/01-html-class-themebase.png)
+```
+
+```markdown
+![theme-base で描画された脚注](/new-features/footnotes/ja/01-html-class-themebase.png)
+```
+
+Markdown への画像挿入作業は別ステップとして依頼してください。
+
+## サンプル一覧
+
+| #  | ファイル | デモする内容 | 対応する記事節 |
+|----|---------|-----------|--------------|
+| 01 | `01-html-class-themebase.html` | `<span class="footnote">` + GCPM クラス方式 | Part 2 §2 |
+| 02 | `02-vfm-pandoc-endnotes.html` | VFM Pandoc 形式の後注 | Part 2 §3 |
+| 03 | `03-dpub-aria-default.html` | DPUB-ARIA `<aside role="doc-footnote">`、テーマ CSS なし | Part 3 §5 |
+| 04 | `04-page-footnote-styled.html` | `@page { @footnote { … } }` と `::before` | Part 3 §7 |
+| 05 | `05-footnote-display-inline.html` | `footnote-display: inline` | Part 3 §8 |
+| 06 | `06-footnote-display-compact.html` | `footnote-display: compact` | Part 3 §8 |
+| 07 | `07-footnote-marker-outside.html` | `::footnote-marker` の `list-style-position: outside` | Part 3 §9 |
+
+## ページ寸法について
+
+各サンプルは以下で統一:
+
+```css
+@page {
+  size: 140mm 90mm;
+  margin: 12mm 14mm;
+}
+```
+
+A5 などより明らかに小さいので、撮影された画像も自然と小さく仕上がる。
+記事内に並べたときに本文を圧迫しないサイズを目指している。
+
+## 注意
+
+- これらの HTML は **記事内の文言と完全一致しません**。短冊サイズに収まる
+  量の本文に絞ってあります。
+- フォントは `Noto Serif JP` 系（日本語）/ `Source Serif Pro` 系（英語）を
+  指定。インストールされていない場合は OS 既定の serif にフォールバック
+  します。

_screenshots/footnotes/en/01-html-class-themebase.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Example 1: HTML class footnote (theme-base style)</title>
+<style>
+  @page { size: 140mm 90mm; margin: 12mm 14mm; }
+  body {
+    font-family: "Source Serif Pro", "Georgia", serif;
+    font-size: 10pt;
+    line-height: 1.55;
+    text-align: justify;
+  }
+  p { margin: 0 0 0.5em; }
+  code { font-size: 0.92em; }
+
+  /* GCPM class style (equivalent to what theme-base provides) */
+  .footnote { float: footnote; }
+  ::footnote-call {
+    content: counter(footnote);
+    font-size: 0.7em;
+    vertical-align: super;
+    line-height: 0;
+  }
+  ::footnote-marker { content: counter(footnote) ".  "; }
+  @page {
+    @footnote {
+      border-top: 0.4pt solid currentColor;
+      padding-top: 4pt;
+      font-size: 8.5pt;
+      line-height: 1.5;
+    }
+  }
+</style>
+</head>
+<body>
+<p>A footnote written directly in HTML as <code>&lt;span class="footnote"&gt;</code><span class="footnote">The footnote body. <code>float: footnote</code> moves it to the page-bottom area at layout time.</span> is moved to the page-bottom footnote area at layout time, thanks to a theme (theme-base / theme-techbook) that defines <code>.footnote { float: footnote }</code>.</p>
+<p>Multiple references in the same paragraph<span class="footnote">A second note. Numbering is automatic.</span> share an auto-incrementing counter, generated by the <code>::footnote-call</code> and <code>::footnote-marker</code> pseudo-elements.</p>
+</body>
+</html>