対応表モード 実装サマリー

新規ファイル
ファイル	内容
LinkModal.tsx	共通コンポーネントとして切り出し（圃場詳細・対応表の両方で使用）
変更ファイル
ファイル	変更内容
fields/page.tsx	[通常] / [対応表] トグルボタンを追加。対応表モードでは圃場名・面積・共済漢字地名・中山間所在地を横並び表示。各行で直接+追加/x解除が可能
fields/[id]/page.tsx	LinkModalのインポートを共通コンポーネントに変更
04_画面設計書.md	画面4に対応表モードのレイアウト・機能要件を追記
06_差異レポート.md	E-2の実装状況を更新
対応表モードの機能
一覧表示: 圃場名 / 面積(反) / 共済（耕地-分筆 + 漢字地名） / 中山間（ID + 所在地）
直接編集: 各セルの[+追加]ボタンで検索モーダルを開いて紐づけ追加
紐づけ解除: 各レコードにホバーで表示される[x]ボタン（確認ダイアログ付き）
複数紐づけ: 同一セル内に改行で表示
圃場名クリック: 詳細画面(/fields/[id])に遷移
http://localhost:3000/fields で「対応表」ボタンを押して確認できます。

frontend/src/components/LinkModal.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { X, Search } from 'lucide-react';
+
+interface LinkModalProps<T extends { id: number }> {
+  title: string;
+  items: T[];
+  alreadyLinkedIds: Set<number>;
+  renderItem: (item: T) => React.ReactNode;
+  searchFilter: (item: T, query: string) => boolean;
+  onAdd: (ids: number[]) => void;
+  onClose: () => void;
+}
+
+export default function LinkModal<T extends { id: number }>({
+  title,
+  items,
+  alreadyLinkedIds,
+  renderItem,
+  searchFilter,
+  onAdd,
+  onClose,
+}: LinkModalProps<T>) {
+  const [search, setSearch] = useState('');
+  const [selected, setSelected] = useState<Set<number>>(new Set());
+
+  const filtered = useMemo(() => {
+    if (!search.trim()) return items;
+    return items.filter((item) => searchFilter(item, search.trim().toLowerCase()));
+  }, [items, search, searchFilter]);
+
+  const toggle = (id: number) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-lg shadow-xl w-full max-w-lg max-h-[80vh] flex flex-col">
+        <div className="flex items-center justify-between p-4 border-b">
+          <h3 className="text-lg font-bold text-gray-900">{title}</h3>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <div className="p-4 border-b">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="検索..."
+              className="w-full pl-9 pr-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
+              autoFocus
+            />
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-2">
+          {filtered.length === 0 ? (
+            <p className="text-gray-500 text-sm text-center py-4">該当する区画がありません</p>
+          ) : (
+            filtered.map((item) => {
+              const isLinked = alreadyLinkedIds.has(item.id);
+              const isSelected = selected.has(item.id);
+              return (
+                <label
+                  key={item.id}
+                  className={`flex items-start gap-3 p-2 rounded cursor-pointer hover:bg-gray-50 ${
+                    isLinked ? 'opacity-50' : ''
+                  }`}
+                >
+                  <input
+                    type="checkbox"
+                    checked={isSelected}
+                    disabled={isLinked}
+                    onChange={() => toggle(item.id)}
+                    className="mt-1 rounded border-gray-300 text-green-600 focus:ring-green-500"
+                  />
+                  <div className="flex-1 text-sm">{renderItem(item)}</div>
+                </label>
+              );
+            })
+          )}
+        </div>
+
+        <div className="p-4 border-t flex justify-end">
+          <button
+            onClick={() => {
+              onAdd(Array.from(selected));
+              onClose();
+            }}
+            disabled={selected.size === 0}
+            className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+          >
+            選択した区画を追加 ({selected.size}件)
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}