========================================================================
ドキュメント作成ガイドライン (Style Guide)
========================================================================

1. 基本フォーマット (Basic Format)
------------------------------------------------------------------------
・文字コード: UTF-8
・改行コード: LF (推奨) または CRLF
・インデント: 半角スペース4つ (4 spaces)
    - タブ文字は使用せず，スペースに展開して揃える．
・ファイル命名: `GUIDE_02_ドキュメント命名規則.txt` を参照する．

■ ファイルヘッダー (File Header)
・ファイルの先頭には必ずタイトルブロックを記述する．
・書式: 上下を「=」（イコール）の列（72文字程度）で挟む．
・例:
    ========================================================================
    ドキュメントタイトル (English Title)
    ========================================================================


2. 句読点・約物 (Punctuation)
------------------------------------------------------------------------
・句読点: 「，」（全角カンマ）と「．」（全角ピリオド）を使用する．
    - 「、」「。」は使用しない．
・コロン: 半角コロン＋半角スペース「: 」を使用する．
    - NG: 全角コロン「：」，スペースなし「:」
・括弧: 原則として半角括弧 `( )` を使用するが，強調や補足には全角 `（ ）` や `「 」` も許容する．
・注釈: 文末や段落末の補足には「※」（全角米印）＋半角スペースを使用する．
    - 例: ※ shared は client/server 両方から import して使用する．


3. 階層構造と見出し (Headings & Hierarchy)
------------------------------------------------------------------------

3-1. レベル1：大見出し (Section)
    ・書式: 数字 + ドット + 半角スペース + タイトル + (英語タイトル)
    ・装飾: 下行にハイフン「-」による区切り線を挿入する．
    ・例:
        1. 基本設計 (Basic Design)
        ------------------------------------------------------------------------

3-2. レベル2：中見出し (Subsection)
    ・書式: 数字-数字 + ドット + 半角スペース + タイトル
    ・例:
        1-1. 製品概要

3-3. レベル3：小見出し (Group Heading)
    ・書式: 「■」＋ 半角スペース ＋ タイトル
    ・使い分け:
        - セクション内で独立したトピック（カテゴリ）を列挙する場合は「■」を使用する．
        - 手順やフロー、順序のある項目を示す場合は「1. 」「2. 」を使用する．
    
        A. 並列・カテゴリ列挙（順序不問）
            - 記号: 「■ 」（全角四角＋半角スペース）
            - 例: ■ フィールド仕様

        B. 手順・優先順位・ランキング（順序重要）
            - 記号: 「1. 」「2. 」（半角数字＋ドット＋半角スペース）
            - 例: 1. ユーザ体験の理想

3-4. レベル4：リスト項目 (List Item)
    ・記号: 「・」（全角中黒）
    ・書式: 「・項目名: 内容」または「・項目名」のみ．
    ・使いどころ: セクション内の主要な列挙（親項目）に使用する．
    ・例:
        ・タイトル: Paint War

3-5. レベル5：詳細項目 (Detail Item)
    ・記号: 「- 」（半角ハイフン＋半角スペース）
    ・インデント: 親項目のテキスト開始位置に合わせる（基本はスペース8つ）．
    ・使いどころ: 親が「・」のとき，その補足・条件・内訳を子項目として記述する．
    ・ルール: 親が「・」なら子は必ず「- 」を使う．
    ・例:
        ・接続設定
            - host: localhost
            - port: 3000

3-6. 特殊なナンバリング (Zero Indexing)
    ・目的定義: セクションの冒頭で目的や定義を述べる場合，「X-0. 目的」というナンバリング（ゼロ始まり）を使用してもよい．
        - 例: 1-0. 目的

3-7. 階層の順守
    ・上位レベルから下位レベルへ順に記述し，階層を飛ばさないこと．
        - NG例: レベル1（1. XX）の直下にレベル3（■ XX）を記述する．
        - 対策: 必要に応じてレベル2（1-1. 概要 等）を設ける．


4. 余白・改行ルール (Spacing)
------------------------------------------------------------------------
・大見出しの上: 2行空ける．
・中見出し（X-X）の上: 1行空ける．
・小見出し（■や数字）の上: 1行空ける．
・セクション内のリスト: 原則として行間を詰め，まとまりごとに適宜空行を入れる．
・ミニサンプル:
    1. 基本設計 (Basic Design)
    ------------------------------------------------------------------------


    1-1. 製品概要

    ■ 主要要件
    ・要件A: 説明
    ・要件B: 説明

    ■ 補足
    ・注意点: 説明

・NG例（空行不足）:
    1. 基本設計 (Basic Design)
    ------------------------------------------------------------------------
    1-1. 製品概要
    ■ 主要要件
    ・要件A: 説明


5. 技術記述・コード表記 (Technical & Code)
------------------------------------------------------------------------
・1行の最大文字数: 半角80文字（全角40文字）を目安とする．超える場合は適切な位置で折り返す．

・インラインコード: バッククォート1つで囲む．
    - 例: `MAX_DIST`，`useJoystick`，`.env`

・コマンドライン: 先頭に `$ ` を付与して区別する．
    - 例:

        $ git checkout -b feature/260314_yamada_new_function
        $ npm install

・コードブロック: 親の箇条書きレベルに合わせてインデントし，前後に1行空ける．
    - 例:

        // 入力座標からベクトルを計算し，半径でクランプして正規化出力する
        const handleMove = (e: PointerEvent) => {
            const dx = e.clientX - origin.x;
            const dy = e.clientY - origin.y;
        };

・ディレクトリ構造: ツリー記号（`├──`，`│`，`└──`）を使用し，ルートディレクトリからの階層を示す．
    - 例:

        src/
        ├── components/
        │   └── Joystick.tsx
        └── hooks/
            └── useJoystick.ts