Add GUI screenshots to documentation

docs/en/gui_guide.rst

@@ -24,6 +24,10 @@ Window Layout
 
 The GUI window consists of:
 
+.. image:: ../images/gui/gui_overview.png
+   :align: center
+   :alt: GUI window overview
+
 1. **File panel (top)**: Icon button groups (described below)
 2. **3D viewport**: Molecular structure display (rotatable, translatable, zoomable) with XYZ axis indicator in bottom-left
 3. **Toolbar**: Translate / Rotate / Zoom buttons
@@ -49,6 +53,10 @@ File Panel (top)
 
 Icon buttons at the top of the window provide quick access to common operations.
 
+.. image:: ../images/gui/gui_file_panel.png
+   :align: center
+   :alt: File panel (Input / Output / Edit / Pipeline)
+
 .. list-table::
    :header-rows: 1
    :widths: 20 80
@@ -69,6 +77,10 @@ Bottom Panel
 
 Icon button groups below the 3D viewport.
 
+.. image:: ../images/gui/gui_bottom_panel.png
+   :align: center
+   :alt: Bottom panel (Molecule Tools / Structure Tools / View Operations)
+
 - **Molecule Tools**: Select / Move / Rotate / Delete / Drag (drag mode)
 - **Structure Tools**: Add Molecule / Substitution / Supercell / Cell Parameters
 
@@ -204,6 +216,10 @@ Processing runs in a background thread so the GUI remains responsive.
 View Settings Menu
 ~~~~~~~~~~~~~~~~~~
 
+.. image:: ../images/gui/view_settings_menu.png
+   :align: center
+   :alt: View Settings menu dropdown
+
 .. list-table::
    :header-rows: 1
    :widths: 40 60
@@ -253,6 +269,10 @@ View Toolbar
 The toolbar below the 3D viewport provides view controls.
 Each button supports press-and-hold for continuous operation.
 
+.. image:: ../images/gui/gui_toolbar.png
+   :align: center
+   :alt: View Operations toolbar (Pan / Orbit / Zoom / BG)
+
 .. list-table::
    :header-rows: 1
    :widths: 20 30 50
@@ -291,11 +311,20 @@ Side Panel
 A side panel is displayed on the right side of the window for quick access to common view settings.
 The panel is scrollable — use the **mouse wheel** to scroll up/down when content overflows.
 
+.. image:: ../images/gui/gui_side_panel.png
+   :align: center
+   :alt: Side panel (View Controls)
+
 - **Focus / Unfocus**: Buttons to enter/exit focus mode
 - **Color Mode**: Switch color mode via radio buttons (By Element / By Molecule / By Tag)
 - **Show Bonds**: Checkbox to toggle bond display (Ctrl+B)
 - **3D Spheres**: Enable/disable 3D shaded sphere rendering
 - **Element Controls** *(collapsible)*: Click the header to expand/collapse. Per-element row with [visibility checkbox][color swatch][size slider]. Global atom size scale slider (0.3–3.0) included
+
+.. image:: ../images/gui/gui_element_controls.png
+   :align: center
+   :alt: Side panel with Element Controls expanded
+
 - **Molecule Controls** *(collapsible)*: Click the header to expand/collapse. Per-molecule-group row with [visibility checkbox][color swatch][select button]. **In focus mode**, checkboxes act as focus add/remove controls
 - **Atom List** *(collapsible, collapsed by default)*: Click the header to expand. Shows a table of all atoms with index (#), element, X/Y/Z coordinates, and molecule group ID. Click a row to select that atom in the 3D view
 - **Status info**: Real-time display of atom count, selection count, element breakdown, group count
@@ -307,6 +336,10 @@ Status Bar
 
 The status bar at the bottom shows context-dependent information:
 
+.. image:: ../images/gui/gui_atom_selected.png
+   :align: center
+   :alt: Status bar when atom is selected
+
 - **No atoms selected**: System overview — atom count, elements, molecule groups, cell size
   (e.g., ``48 atoms | (C, H) | 4 groups | Cell: 5.5x5.4x18.7 Å``)
 - **1 atom selected**: Atom details — index, element name, coordinates, molecule name
@@ -388,6 +421,10 @@ Right-Click Context Menu
 
 Right-clicking in the 3D viewport shows a context menu with quick access to:
 
+.. image:: ../images/gui/gui_context_menu_closeup.png
+   :align: center
+   :alt: Right-click context menu
+
 - **Select Molecule Group**: Select all atoms in the molecule group of the clicked atom
 - **Move...**: Open move dialog
 - **Rotate...**: Open rotate dialog
@@ -400,8 +437,8 @@ Screenshot
 Use **Ctrl+Shift+S** or the camera icon in the file panel to save the current 3D view as a PNG file.
 If Pillow is installed, the screenshot is saved as PNG; otherwise as EPS.
 
-Dialog Details
---------------
+MoleculeTools Menu Details
+--------------------------
 
 Focus Selection Dialog
 ~~~~~~~~~~~~~~~~~~~~~~

docs/ja/gui_guide.rst

@@ -23,6 +23,10 @@ Molecular Modeling GUI は ASE-GUI を拡張したグラフィカルインター
 
 GUI ウィンドウは以下の要素で構成されます:
 
+.. image:: ../images/gui/gui_overview.png
+   :align: center
+   :alt: GUI ウィンドウ全体像
+
 1. **ファイルパネル（上部）**: アイコンボタン群（後述）
 2. **3D ビューポート**: 分子構造の表示（回転・並進・ズーム可能）。左下に XYZ 座標軸インジケータ表示
 3. **ツールバー**: Translate / Rotate / Zoom ボタン
@@ -48,6 +52,10 @@ GUI ウィンドウは以下の要素で構成されます:
 
 ウィンドウ上部のアイコンボタンからよく使う操作にすばやくアクセスできます。
 
+.. image:: ../images/gui/gui_file_panel.png
+   :align: center
+   :alt: ファイルパネル（Input / Output / Edit / Pipeline）
+
 .. list-table::
    :header-rows: 1
    :widths: 20 80
@@ -68,6 +76,10 @@ GUI ウィンドウは以下の要素で構成されます:
 
 3D ビューポートの下側に配置されたアイコンボタン群です。
 
+.. image:: ../images/gui/gui_bottom_panel.png
+   :align: center
+   :alt: ボトムパネル（Molecule Tools / Structure Tools / View Operations）
+
 - **Molecule Tools**: Select（選択）/ Move（移動）/ Rotate（回転）/ Delete（削除）/ Drag（ドラッグモード）
 - **Structure Tools**: Add Molecule / Substitution / Supercell / Cell Parameters
 
@@ -203,6 +215,10 @@ Pipeline メニュー
 View Settings メニュー
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
+.. image:: ../images/gui/view_settings_menu.png
+   :align: center
+   :alt: View Settings メニュードロップダウン
+
 .. list-table::
    :header-rows: 1
    :widths: 40 60
@@ -252,6 +268,10 @@ Help メニュー
 3D ビューポートの下部にあるツールバーで、表示を操作できます。
 各ボタンは押し続けることで連続的に操作できます。
 
+.. image:: ../images/gui/gui_toolbar.png
+   :align: center
+   :alt: View Operations ツールバー（Pan / Orbit / Zoom / BG）
+
 .. list-table::
    :header-rows: 1
    :widths: 20 30 50
@@ -290,11 +310,20 @@ Help メニュー
 ウィンドウ右側にサイドパネルが表示されます。よく使うビュー設定にすばやくアクセスできます。
 パネルは **マウスホイール** で上下スクロールが可能です。内容がウィンドウに収まらない場合もスクロールして操作できます。
 
+.. image:: ../images/gui/gui_side_panel.png
+   :align: center
+   :alt: サイドパネル（View Controls）
+
 - **Focus / Unfocus**: フォーカスモードの開始/終了ボタン
 - **Color Mode**: 色分けモードをラジオボタンで切り替え（元素別 / 分子グループ別 / タグ別）
 - **Show Bonds**: ボンド（結合線）の表示/非表示チェックボックス (Ctrl+B)
 - **3D Spheres**: 3D シェーディング球体レンダリングの有効/無効
 - **Element Controls** *(折りたたみ可能)*: ヘッダーをクリックで展開/折りたたみ。元素ごとに [表示チェック][色スウォッチ][サイズスライダー] を一行で制御。全原子サイズスケールのスライダー（0.3〜3.0）も含む
+
+.. image:: ../images/gui/gui_element_controls.png
+   :align: center
+   :alt: Element Controls 展開時のサイドパネル
+
 - **Molecule Controls** *(折りたたみ可能)*: ヘッダーをクリックで展開/折りたたみ。分子グループごとに [表示チェック][色スウォッチ][選択ボタン] を一行で制御。 **フォーカスモード中** はチェックボックスがフォーカス対象の追加/除去として機能
 - **Atom List** *(折りたたみ可能、デフォルトは折りたたみ)*: ヘッダーをクリックで展開。全原子のインデックス(#)、元素、X/Y/Z座標、分子グループIDを表示するテーブル。行をクリックすると3Dビューでその原子を選択
 - **ステータス情報**: 原子数、選択数、元素内訳、グループ数をリアルタイム表示
@@ -306,6 +335,10 @@ Help メニュー
 
 画面下部のステータスバーには、選択状態に応じた情報が表示されます。
 
+.. image:: ../images/gui/gui_atom_selected.png
+   :align: center
+   :alt: 原子選択時のステータスバー表示
+
 - **原子未選択時**: 全体情報 — 原子数、含有元素、分子グループ数、セルサイズ
   (例: ``48 atoms | (C, H) | 4 groups | Cell: 5.5x5.4x18.7 Å``)
 - **1原子選択時**: 原子詳細 — インデックス、元素名、座標、所属分子名
@@ -387,6 +420,10 @@ ASE-GUI 標準のマウス操作に加え、右クリックコンテキストメ
 
 3D ビューポートで右クリックすると、以下の操作にすばやくアクセスできます:
 
+.. image:: ../images/gui/gui_context_menu_closeup.png
+   :align: center
+   :alt: 右クリックコンテキストメニュー
+
 - **Select Molecule Group**: クリック位置の原子が属する分子グループ全体を選択
 - **Move...**: 移動ダイアログを表示
 - **Rotate...**: 回転ダイアログを表示
@@ -399,7 +436,7 @@ ASE-GUI 標準のマウス操作に加え、右クリックコンテキストメ
 **Ctrl+Shift+S** または ファイルパネルのカメラアイコンで、現在の 3D ビューを PNG ファイルとして保存できます。
 Pillow がインストールされている場合は PNG 形式、未インストールの場合は EPS 形式で保存されます。
 
-ダイアログ詳細
+MoleculeTools メニュー詳細
 --------------
 
 Focus Selection ダイアログ