feat: 實作三個錦囊 AI 功能

- 新增 AI 錦囊 CSS 樣式到 components.css
- 創建 js/ai-bags.js 模組，包含：
  * 5個模組各3個錦囊的預設 prompt 模板
  * executeAIBag() - 執行 AI 生成並填充表單
  * editBagPrompt() - 編輯自定義 prompt
  * LocalStorage 管理自定義 prompt
- 更新 index.html：
  * 替換 5 處 AI 按鈕為三個錦囊（崗位基礎、招聘要求、職務、部門職責、崗位描述）
  * 新增 Prompt 編輯模態框
- 更新 main.js 引入 ai-bags.js 並初始化
- 新增設計文檔：三個錦囊設計.md
- 新增欄位對照文檔：表單欄位清單.md、更新欄位名稱.md、ID重命名對照表.md

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

styles/components.css

@@ -265,7 +265,87 @@ select {
     fill: currentColor;
 }
 
-/* ==================== AI Button ==================== */
+/* ==================== AI Bags (Three Fortune Bags) ==================== */
+.ai-bags-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+    margin-bottom: 24px;
+}
+
+.ai-bag {
+    position: relative;
+    padding: 20px;
+    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
+    text-align: center;
+}
+
+.ai-bag:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 6px 20px rgba(155, 89, 182, 0.5);
+}
+
+.ai-bag:active {
+    transform: translateY(-2px);
+}
+
+.ai-bag .bag-icon {
+    font-size: 2rem;
+    margin-bottom: 8px;
+}
+
+.ai-bag .bag-title {
+    color: white;
+    font-weight: 600;
+    font-size: 0.95rem;
+    margin-bottom: 4px;
+}
+
+.ai-bag .bag-subtitle {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 0.75rem;
+    margin-top: 4px;
+}
+
+.ai-bag .bag-edit-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    border-radius: 4px;
+    padding: 4px 8px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+    line-height: 1;
+}
+
+.ai-bag .bag-edit-btn:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: scale(1.1);
+}
+
+.ai-bag.loading {
+    pointer-events: none;
+    opacity: 0.7;
+}
+
+.ai-bag .spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin: 8px auto;
+}
+
+/* ==================== Old AI Button (Deprecated) ==================== */
 .ai-generate-btn {
     display: flex;
     align-items: center;