/* ==========================================================================
 * 【全域變數與五行主題色系陣法】
 * 作者: 五元網站 AI 數位地產-Tiger老師
 * 版本: V0.50 (教科書傳承版)
 * 說明: 採用 CSS Variables (變數) 定義核心視覺。集中管理色碼，確保未來只需修改一處，
 * 即可全站同步變更。同時保留了日韓系高階生產力工具的「空氣感」底色。
 * ========================================================================== */
:root {
   /* 主背景色：微灰白色，減少純白對眼睛的刺眼感，營造科技工具的冷靜感 */
   --bg-main: #f4f7fb; 
   /* 卡片背景色：純白，讓內容區塊(如輸入區、輸出區)如懸浮般凸顯出來 */
   --bg-card: #ffffff; 
   /* 邊框顏色：極細緻的淡灰色，定義邊界但絕不干擾視覺動線 */
   --border-color: #e2e8f0; 
   /* 主文字色：深邃石墨黑。比起純黑(#000)，石墨黑閱讀起來更舒適且具備專業感 */
   --text-main: #1e293b; 
   /* 副文字色：沉穩灰藍色。用於副標題與欄位說明，建立視覺的輕重緩急層次 */
   --text-muted: #64748b; 
   /* 捲軸軌道顏色：極淺灰，低調隱藏於背景中 */
   --scroll-track: #f1f5f9; 
   /* 捲軸拉桿顏色：淡灰藍，為自訂捲軸提供基礎色調 */
   --scroll-thumb: #cbd5e1; 
}

/* ==========================================================================
 * 【五行高階降噪色系動態切換】
 * 說明: 根據 HTML <body> 的 data-theme 屬性，動態切換全站的主題色與科技光暈。
 * 此乃「科技論運武俠風」之精髓，讓使用者能依據個人喜好或當日五行挑選介面。
 * ========================================================================== */
[data-theme="earth-gold"] { 
   --theme-color: #b45309; 
   --neon-glow: rgba(180, 83, 9, 0.15); 
   --neon-glow-strong: rgba(180, 83, 9, 0.4); 
}
[data-theme="water-blue"] { 
   --theme-color: #1e3a8a; 
   --neon-glow: rgba(30, 58, 138, 0.15); 
   --neon-glow-strong: rgba(30, 58, 138, 0.4); 
}
[data-theme="wood-green"] { 
   --theme-color: #0f766e; 
   --neon-glow: rgba(15, 118, 110, 0.15); 
   --neon-glow-strong: rgba(15, 118, 110, 0.4); 
}
[data-theme="ziwei-purple"] { 
   --theme-color: #6b21a8; 
   --neon-glow: rgba(107, 33, 168, 0.15); 
   --neon-glow-strong: rgba(107, 33, 168, 0.4); 
}
[data-theme="fire-red"] { 
   --theme-color: #991b1b; 
   --neon-glow: rgba(153, 27, 27, 0.15); 
   --neon-glow-strong: rgba(153, 27, 27, 0.4); 
}

/* ==========================================================================
 * 【網頁基底與重置設定 (Reset & Base)】
 * 說明: 抹平不同瀏覽器間的預設差異，建立乾淨的排版畫布。
 * ========================================================================== */
body {
   background-color: var(--bg-main);
   color: var(--text-main);
   /* 使用系統原生字體堆疊，確保在 Mac/Windows/iOS/Android 皆能展現最完美的無襯線字體 */
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   margin: 0;
   /* 手機版優先優化：大幅縮小外部間距，在小螢幕上釋放最大操作空間 */
   padding: 4px; 
   line-height: 1.5;
   /* 美學點綴：加入極細微的日韓科技點陣背景，取代死板的單色純白，增加畫面層次感 */
   background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
   background-size: 24px 24px;
}

/* ==========================================================================
 * 【頂部大氣標頭佈局 (Header)】
 * 說明: 建立網站的權威視覺感，負責吸住使用者的第一眼目光。
 * ========================================================================== */
.site-header {
   text-align: center;
   margin: 40px auto 35px auto;
   max-width: 1299px;
   width: 95%;
   display: flex;
   flex-direction: column;
   /* 確保內部的文字與膠囊標籤完美水平置中 */
   align-items: center; 
}

.site-header h1 {
   font-size: 38px; /* 放大字級，增強視覺霸氣，符合「老站神」的氣場 */
   font-weight: 900; /* 極致粗體，字體力道拉到最滿 */
   color: var(--theme-color); /* 字體直接點亮為當前選擇的五行色 */
   margin: 0 0 18px 0;
   letter-spacing: 2px; /* 增加字元間距，提升大標題的呼吸感 */
   /* 雙層羽化陰影：製造字體浮出螢幕的 3D 實體厚度，而非傳統扁平化 */
   text-shadow: 0 12px 24px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* 副標題：從單薄文字升級為「科技膠囊標籤」，增強專業感 */
.site-subtitle {
   display: inline-block;
   font-size: 15px;
   font-weight: 800;
   color: var(--theme-color); 
   background: #ffffff; /* 純白底座，拉開與背景的層次 */
   padding: 8px 20px;
   border-radius: 15px; /* 俐落的膠囊圓角 */
   border: 1px solid var(--theme-color); /* 實線邊框，增強實體邊界感 */
   letter-spacing: 1.5px;
   margin: 0;
   /* 專屬的五行微光懸浮陰影 */
   box-shadow: 0 6px 16px var(--neon-glow);
   /* 所有的互動效果皆設定為 0.4 秒的絲滑轉場 (Bezier 曲線增加物理慣性感) */
   transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 膠囊標籤的互動呼吸感：游標懸停時上浮並加深光暈 */
.site-subtitle:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 20px var(--neon-glow-strong);
   background: var(--bg-main);
}

/* ==========================================================================
 * 【左側：懸浮五行選單 (Theme Switcher)】
 * 說明: 提供全站一鍵換色的功能，並以毛玻璃質感呈現。
 * ========================================================================== */
.theme-switcher {
   position: fixed;
   left: 12px;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   gap: 10px;
   z-index: 100;
   transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
   /* 高級 UI 美學：極柔和的半透明玻璃底座，讓選單不干擾後方背景 */
   background: rgba(255, 255, 255, 0.5);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   padding: 10px;
   border-radius: 12px;
   box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

/* 配合 JavaScript 調用的隱藏類別：慢慢滑出頁面左側以釋放畫面空間 */
.theme-switcher.hidden-left {
   transform: translateY(-50%) translateX(-150%); 
}

/* 五行切換按鈕基底樣式 */
.theme-btn {
   background: var(--bg-card);
   padding: 8px 10px;
   cursor: pointer;
   border-radius: 6px;
   font-size: 12px;
   font-weight: bold;
   transition: all 0.3s ease;
   box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* 五行色系個別的框線與字體展現 */
.theme-btn.gold { border: 1px solid #b45309; color: #b45309; }
.theme-btn.blue { border: 1px solid #1e3a8a; color: #1e3a8a; }
.theme-btn.green { border: 1px solid #0f766e; color: #0f766e; }
.theme-btn.purple { border: 1px solid #6b21a8; color: #6b21a8; }
.theme-btn.red { border: 1px solid #991b1b; color: #991b1b; }

/* 按鈕懸停互動：游標移入時輕輕向右推，給予明確的物理反饋 */
.theme-btn:hover {
   transform: translateX(3px); 
   box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

/* 當前被選用的色系狀態 (Active)：啟用小光暉與微浮動特效 */
.theme-btn.active-theme {
   box-shadow: 0 0 12px var(--neon-glow-strong);
   background: var(--theme-color);
   color: #ffffff !important;
   /* 套用連續呼吸動畫，增加介面生命力 */
   animation: activeFloat 3s ease-in-out infinite;
}

@keyframes activeFloat {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-5px); }
}

/* ==========================================================================
 * 【導航區一：行動裝置專用下拉選單 (Mobile Nav)】
 * 說明: 專為小於 1200px 的手機/平板設計，將龐大的分頁濃縮為下拉選單。
 * ========================================================================== */
.mobile-nav { 
   display: block; 
   margin-bottom: 20px;
   padding: 0px 10px; 
}

/* 手機版專屬引導標籤 (Label) 的視覺設計 */
.mobile-nav-label {
   display: block; /* 讓標籤獨立佔據一行，不與選單擠在一起 */
   font-size: 15px; /* 適宜閱讀的尺寸 */
   font-weight: 800; /* 加粗字體，強調此區塊為操作起點 */
   color: var(--theme-color); 
   margin-bottom: 8px; /* 與下方的下拉選單拉開呼吸空間 */
   letter-spacing: 1px; /* 稍微拉開字距，提升整體排版質感 */
}

/* 引導標籤前綴圖示 (Icon) 的發光設定 */
.mobile-nav-label i {
   margin-right: 4px; 
   /* 加入五行專屬的微發光陰影，提升精緻度 */
   filter: drop-shadow(0 2px 4px var(--neon-glow)); 
}

/* 手機版下拉選單本體美化 */
.mobile-nav select {
   width: 100%; /* 強制滿版寬度，方便手機單手操作觸控 */
   background: var(--bg-card); /* 純白底色 */
   border: 1px solid var(--border-color); 
   color: var(--text-main); 
   padding: 12px; /* 加大內距，確保手指觸控熱區足夠大 */
   border-radius: 8px; /* 溫潤的現代 8px 圓角 */
   font-size: 15px; 
   font-weight: 600; /* 文字加粗提升點擊質感 */
   /* 無重力羽化陰影，讓元件浮出背景 */
   box-shadow: 0 4px 12px rgba(0,0,0,0.03); 
   transition: all 0.3s ease; 
   cursor: pointer; 
}

/* 當使用者點擊(聚焦)下拉選單時的互動特效 */
.mobile-nav select:focus { 
   border-color: var(--theme-color); /* 邊框瞬間亮起五行主色 */
   outline: none; /* 移除瀏覽器預設的藍色醜外框 */
   /* 展開專屬的科技光暈邊界 */
   box-shadow: 0 0 0 3px var(--neon-glow); 
}

/* ==========================================================================
 * 【導航區二：橫向分頁標籤 (電腦版專用 Tabs)】
 * 說明: 螢幕 >= 1200px 啟用。以實體資料夾頁籤的概念，讓使用者快速切換 12 大情境。
 * ========================================================================== */
.tabs-container {
   display: none; /* 預設在手機版隱藏，由 RWD 媒體查詢開啟 */
   gap: 4px;
   margin-bottom: 20px;
   overflow-x: auto;
   border-bottom: 1px solid var(--border-color);
   padding-bottom: 1px;
}

/* 獨立分頁按鈕 */
.tab-item {
   padding: 10px 16px;
   background: #e2e8f0; /* 未選中時為暗灰色，降低視覺權重 */
   border: 1px solid var(--border-color);
   border-bottom: none; /* 底部不畫線，以便與下方內容區融合 */
   border-radius: 6px 6px 0 0; /* 僅左上、右上設定圓角，形成頁籤感 */
   cursor: pointer;
   font-size: 13px;
   font-weight: 500;
   white-space: nowrap; /* 強制文字不換行 */
   color: var(--text-muted);
   transition: all 0.2s ease;
}

/* 頁籤懸停提亮 */
.tab-item:hover { color: var(--text-main); background: #f8fafc; } 

/* 當前作用中的頁籤狀態 */
.tab-item.active {
   background: var(--bg-card); /* 背景轉白，與下方卡片融為一體 */
   color: var(--theme-color); /* 字體轉為五行色 */
   font-weight: 600;
   /* 巧妙地用 2px 實體白線蓋過底部的 border-bottom，產生破口融合的視覺錯覺 */
   border-bottom: 2px solid var(--bg-card);
   position: relative;
   top: 1px;
   /* 頁籤頂部微微發光，引導視覺重心 */
   box-shadow: 0 -4px 10px rgba(0,0,0,0.02);
}

/* ==========================================================================
 * 【工作區容器與白金高階懸浮卡片 (Main Layout)】
 * 說明: 負責承載表單輸入區與 JSON-LD 程式碼輸出區的排版架構。
 * ========================================================================== */
.container {
   width: 100%;
   box-sizing: border-box;
   padding: 2px; 
}
.main-content {
   display: flex;
   flex-direction: column; /* 手機版預設為上下垂直堆疊 */
   gap: 12px; 
}

/* 白金高階懸浮卡片設計 (輸入區與輸出區共用) */
.panel-card {
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   padding: 14px; /* 手機版優化：調小內距讓內容更飽滿 */
   border-radius: 12px; /* 現代感 12px 大圓角 */
   /* 極大擴散半徑、極低透明度的無重力羽化陰影，創造高階工具獨有的空氣感 */
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
   transition: all 0.3s ease;
}

/* 卡片懸停時的 3D 上浮感 */
.panel-card:hover {
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05), 0 4px 12px var(--neon-glow);
}

/* 卡片內部的主標題 (如：Local Business 在地商家) */
.panel-card h2 {
   color: var(--text-main);
   margin-top: 0;
   margin-bottom: 20px;
   font-size: 18px;
   font-weight: 700; 
   /* 左側加入 4px 粗體的五行主題色塊，作為視線的起始錨點 */
   border-left: 4px solid var(--theme-color);
   padding-left: 10px;
}

/* ==========================================================================
 * 【表單核心元件群 (Form Elements)】
 * 說明: 規範文字輸入框、下拉選單、按鈕的視覺與互動狀態。
 * ========================================================================== */

/* TGOS 地址查詢專用輔助按鈕 */
.tgos-link-btn {
   display: inline-block;
   margin-bottom: 8px;
   padding: 5px 10px;
   background: transparent;
   border: 1px solid var(--theme-color);
   color: var(--theme-color);
   text-decoration: none;
   font-size: 12px;
   font-weight: 600;
   border-radius: 6px; 
   transition: all 0.3s ease;
   box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

/* TGOS 按鈕懸停實體化 */
.tgos-link-btn:hover {
   background: var(--theme-color);
   color: #ffffff !important;
   box-shadow: 0 0 10px var(--neon-glow-strong);
   transform: translateY(-1px); 
}

/* 表單群組容器 */
.form-group { margin-bottom: 16px; }

/* 欄位標籤 (Label) */
.form-group label { 
   display: block; 
   margin-bottom: 6px; 
   color: var(--text-main); /* 使用深石墨色利於長久閱讀 */
   font-size: 15px; 
   font-weight: 700; /* 加粗增強資訊層次 */
}

/* 核心輸入元件：Input, Textarea, Select */
input, textarea, select {
   width: 100%;
   box-sizing: border-box;
   background: var(--bg-main); /* 對應背景色的微灰，降低填表壓力 */
   border: 1px solid var(--border-color);
   color: var(--text-main);
   padding: 10px 12px;
   border-radius: 8px; 
   font-size: 14px;
   transition: all 0.3s ease;
}

/* 聚焦狀態 (Focus)：展現乾淨的科技發光，取代沉重邊框 */
input:focus, textarea:focus, select:focus {
   outline: none;
   border-color: var(--theme-color);
   background: #ffffff; /* 聚焦時反白，凸顯當前正在輸入的欄位 */
   box-shadow: 0 0 0 3px var(--neon-glow);
}

/* 針對多行文字框特別設定高度與垂直拉伸 */
textarea { 
   height: 110px; 
   resize: vertical; 
}

/* ==========================================================================
 * 【JSON-LD 程式碼輸出黑板區 (Code Output Area)】
 * 說明: 以深夜藍底色模擬工程師的高階開發環境 (IDE)，突顯專業度。
 * ========================================================================== */
.output-header { 
   display: flex; 
   justify-content: space-between; 
   align-items: center; 
   margin-bottom: 15px; 
}

.output-header h2 { margin: 0; }
.code-wrapper { 
   width: 100%; 
   box-sizing: border-box; 
   overflow: hidden; 
}

/* 程式碼外層容器 */
pre {
   background: #0f172a; /* 深夜藍底色，降低眼睛疲勞 */
   padding: 16px;
   border-radius: 12px; 
   overflow-x: auto; /* 允許橫向捲動，避免代碼破版 */
   margin: 0;
   /* 極輕微的內陰影，展現螢幕凹陷的高級黑板質感 */
   box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);
}

/* 程式碼本體字型 */
code {
   /* 使用蘋果開發者標準字體族群，確保程式碼優雅等寬 */
   font-family: 'SFMono-Regular', "Consolas", "Monaco", "Courier New", monospace; 
   color: #34d399; /* 清新護眼的冰晶綠，對比深夜藍極佳 */
   font-size: 13.5px;
   line-height: 1.5;
}

/* 微細捲軸樣式控制，確保黑板區的捲軸不破壞視覺美感 */
pre::-webkit-scrollbar { height: 6px; width: 6px; }
pre::-webkit-scrollbar-track { background: #0f172a; border-radius: 4px; }
pre::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
pre::-webkit-scrollbar-thumb:hover { background: var(--theme-color); }

/* 一鍵複製按鈕 */
.copy-btn {
   background: var(--text-main); /* 預設深石墨灰，專業內斂 */
   color: #ffffff;
   border: none;
   padding: 8px 16px;
   cursor: pointer;
   font-weight: 600;
   border-radius: 8px; 
   font-size: 13px;
   transition: all 0.3s ease;
   box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.copy-btn:hover { 
   background: var(--theme-color); /* 懸浮時才展現五行色系，給予驚喜感 */
   box-shadow: 0 4px 10px var(--neon-glow-strong);
   transform: translateY(-2px);
}

/* ==========================================================================
 * 【動態增修機制按鈕 (Dynamic Buttons)】
 * 說明: 用於 FAQ、HowTo、Breadcrumb、Menu 等需要無限新增欄位的幽靈按鈕。
 * ========================================================================== */
.add-faq-btn, .add-step-btn, .add-breadcrumb-btn {
   display: block;
   width: auto;
   max-width: fit-content; /* 預設寬度僅包覆文字 */
   margin: 20px auto 0 auto;
   padding: 8px 16px;
   background: #ffffff; 
   border: 1px solid var(--border-color); 
   color: var(--text-muted);
   font-size: 14px;
   font-weight: 600; 
   cursor: pointer;
   text-align: center;
   border-radius: 8px; 
   box-shadow: 0 2px 4px rgba(0,0,0,0.02);
   transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 互動魔法：游標移過去時，按鈕絲滑伸長至近乎滿版，並轉為五行色，產生強烈點擊暗示 */
.add-faq-btn:hover, .add-step-btn:hover, .add-breadcrumb-btn:hover {
   width: 98%;
   max-width: 100%;
   color: var(--theme-color);
   border: 1px dashed var(--theme-color); /* 轉為虛線，暗示此為「新增區塊」 */
   background-color: var(--neon-glow);
   box-shadow: 0 4px 12px var(--neon-glow);
}

/* 動態新增的子區塊外框 (如步驟一、步驟二的獨立容器) */
.step-block-card, .breadcrumb-block-card {
   border: 1px solid var(--border-color);
   padding: 16px; 
   border-radius: 12px; 
   margin-bottom: 12px;
   background: #ffffff; 
   box-shadow: 0 4px 12px rgba(0,0,0,0.02); 
   border-left: 4px solid var(--theme-color); /* 繼承母卡片的五行引導線設計 */
}

/* 子區塊內的編號標籤 (如：步驟 #1) */
.step-number-label, .breadcrumb-number-label {
   font-size: 13px;
   font-weight: 700;
   color: var(--theme-color);
   margin-bottom: 10px;
   display: inline-block;
   background: var(--bg-main); 
   padding: 4px 10px;
   border-radius: 6px;
   border: 1px solid var(--border-color);
}

/* ==========================================================================
 * 【右上方兩段式懸浮選單 (Cyber Dropdown Nav)】
 * 說明: 作為系統的輔助導航，採用絕對定位與 Transform 縮放動畫。
 * ========================================================================== */
.top-right-nav {
   position: fixed;
   top: 15px;
   right: 20px;
   z-index: 1000;
   display: flex;
   flex-direction: column;
   align-items: flex-end; /* 靠右對齊 */
}

/* 觸發按鈕本體 (初始未展開狀態) */
.menu-toggle-btn {
   background: #ffffff; 
   border: 1px solid var(--border-color); 
   color: var(--text-main); 
   padding: 8px 12px;
   border-radius: 8px; 
   cursor: pointer;
   display: flex;
   align-items: center;
   
   /* 鐵律：隱藏超出內容與強制不換行，確保收合時文字不會掉下來 */
   overflow: hidden;
   white-space: nowrap;
   
   /* 初始寬度僅容納圖示 */
   width: 44px;
   height: 40px;
   box-sizing: border-box;
   
   transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
   box-shadow: 0 4px 12px rgba(0,0,0,0.03); 
}

.menu-icon {
   min-width: 20px;
   font-size: 18px;
   font-weight: bold;
   text-align: center;
}

/* 選單文字預設透明隱藏，並取消左邊距 */
.menu-text {
   opacity: 0;
   margin-left: 0;
   font-size: 14px;
   font-weight: 700;
   /* 文字的浮現設定延遲(0.2s)，等按鈕拉長後再出現，避免擠壓重疊 */
   transition: opacity 0.3s ease 0.2s, margin-left 0.3s ease;
}

/* JS 控制的按鈕展開狀態 (.active) */
.menu-toggle-btn.active {
   width: 145px; /* 拉長寬度容納文字 */
   background: var(--theme-color); 
   color: #ffffff;
   border-color: var(--theme-color);
   box-shadow: 0 6px 16px var(--neon-glow-strong);
}

.menu-toggle-btn.active .menu-text {
   opacity: 1;
   margin-left: 10px;
}

/* 下拉選單列表容器 (初始隱藏狀態) */
.dropdown-list {
   position: absolute;
   top: 50px;
   right: 0;
   min-width: 160px;
   margin: 0;
   padding: 6px; 
   
   background: rgba(255, 255, 255, 0.95); /* 高級毛玻璃感 */
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid var(--border-color);
   border-radius: 12px;
   list-style: none;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
   
   /* 以右上角為原點，將 Y 軸縮放至 0 (收合) */
   transform-origin: top right;
   transform: scaleY(0);
   opacity: 0;
   visibility: hidden;
   
   transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease 0.1s;
}

/* JS 控制的選單展開狀態 (.active) */
.dropdown-list.active {
   transform: scaleY(1); /* 向下長出 */
   opacity: 1;
   visibility: visible;
}

/* 下拉選單內部連結樣式 */
.dropdown-list li {
   border-bottom: 1px solid var(--border-color); 
}
.dropdown-list li:last-child {
   border-bottom: none;
}
.dropdown-list li a {
   display: block;
   padding: 10px 14px;
   color: var(--text-main);
   text-decoration: none;
   font-size: 14px;
   font-weight: 600;
   border-radius: 6px;
   transition: all 0.3s ease;
}
/* 懸停時加入向右推移的小動畫 */
.dropdown-list li a:hover {
   background: var(--bg-main); 
   color: var(--theme-color);
   padding-left: 18px; 
}

/* ==========================================================================
 * 【AEO/GEO 核心：FAQ 常見問題網格陣法 (FAQ Section)】
 * 說明: 負責承載 MS-SQL 倒出的資料，支援單層 HTML 前端自動 RWD 折疊排版。
 * ========================================================================== */
.faq-section {
   width: 100%;
   max-width: 1299px; /* 與系統標頭寬度保持一致 */
   margin: 40px auto;
   padding: 0 15px;
   box-sizing: border-box;
   background-color: var(--bg-main); /* 確保背景色與大環境完全融合 */
}

/* FAQ 標題設計：左側加掛五行粗線，穩住視覺重心 */
.faq-header-title {
   margin-bottom: 24px;
   border-left: 4px solid var(--theme-color); 
   padding-left: 12px;
}

.faq-header-title h3 {
   margin: 0;
   font-size: 22px;
   font-weight: 800;
   color: var(--theme-color); /* 標題文字點亮五行色 */
   display: flex;
   align-items: center;
   gap: 8px; 
}

/* 標題圖示的微發光特效 */
.faq-header-title h3 i {
   color: var(--theme-color);
   filter: drop-shadow(0 2px 4px var(--neon-glow));
}

/* 核心 RWD 網格系統：控制 ASP 迴圈吐出的 div */
.faq-grid-container {
   display: grid;
   gap: 16px; 
   /* 手機版：單欄排版堆疊 */
   grid-template-columns: 1fr;
   /* 關鍵解藥：讓每個卡片獨立對齊頂部，防止左右欄高度互相牽扯拉伸 (連動 bug) */
   align-items: start;
}

/* 獨立 FAQ 卡片本體 */
.faq-item {
   background: var(--bg-card); 
   border: 1px solid var(--border-color); 
   border-radius: 12px; 
   overflow: hidden; /* 防止內容溢出破壞圓角 */
   box-shadow: 0 4px 12px rgba(0,0,0,0.02); 
   transition: all 0.3s ease;
}

.faq-item:hover {
   box-shadow: 0 8px 24px rgba(0,0,0,0.05);
   border-color: var(--theme-color); /* 邊框亮起，吸引點擊 */
}

/* 問題按鈕 (可點擊區塊) */
.faq-question-btn {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 20px;
   background: transparent;
   border: none;
   cursor: pointer;
   text-align: left;
   font-size: 16px;
   font-weight: 700;
   color: var(--text-main);
   transition: all 0.3s ease;
}

.faq-q-text {
   line-height: 1.5;
   padding-right: 15px; /* 保留空間給右側箭頭，防止文字覆蓋 */
}

/* 右側下拉箭頭的旋轉準備 */
.faq-arrow-icon {
   font-size: 18px;
   color: var(--text-muted); 
   transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* JS 賦予的展開狀態 (.active) */
.faq-question-btn.active {
   color: var(--theme-color); 
}

.faq-question-btn.active .faq-arrow-icon {
   transform: rotate(180deg); /* 箭頭翻轉 180 度 */
   color: var(--theme-color);
}

/* 答案隱藏區塊：利用 max-height 動畫實現手風琴折疊 */
.faq-answer-panel {
   max-height: 0; /* 初始高度為 0，隱藏內容 */
   overflow: hidden; 
   background-color: var(--bg-main); /* 答案區底色微灰，與白色問題區產生層次感 */
   transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* 答案區塊內層：控制 Padding 避免破壞 CSS 轉場高度計算 */
.faq-answer-inner {
   padding: 0px 20px 20px 20px; 
   font-size: 14.5px;
   line-height: 1.7;
   color: var(--text-muted);
   border-top: 1px dashed transparent; 
   transition: all 0.4s ease;
}

/* 當展開時，浮現答案區頂部的虛線分隔 */
.faq-question-btn.active + .faq-answer-panel .faq-answer-inner {
   border-top-color: var(--border-color);
   padding-top: 15px; 
}

/* ==========================================================================
 * 【廠商贊助與橫幅廣告輪播陣法 (Ad Carousel)】
 * 說明: 為變現能力鋪路，提供文字與圖片的高轉換率展示區塊。
 * ========================================================================== */
.sponsor-ad-section {
   margin: 40px auto 20px auto;
   max-width: 800px; 
}

/* 共用科技風純白面板基底 */
.cyber-box-panel {
   border: 1px solid var(--border-color); 
   border-radius: 12px;
   padding: 24px;
   background: #ffffff;
   box-shadow: 0 10px 30px rgba(0,0,0,0.02); 
   margin-bottom: 24px;
   transition: box-shadow 0.3s ease;
}
.cyber-box-panel:hover {
   box-shadow: 0 15px 40px rgba(0,0,0,0.04);
}

.sponsor-title {
   color: var(--text-main); 
   font-size: 18px;
   font-weight: 700;
   text-align: center;
   margin-top: 0;
   margin-bottom: 24px;
}

/* 廣告第一區：文字連結 RWD 網格系統 (手機單排 -> 平板雙排 -> 電腦三排) */
.sponsor-text-grid {
   display: grid;
   gap: 12px;
   grid-template-columns: 1fr; 
}
@media (min-width: 768px) { .sponsor-text-grid { grid-template-columns: repeat(2, 1fr); } } 
@media (min-width: 1024px) { .sponsor-text-grid { grid-template-columns: repeat(3, 1fr); } } 

.sponsor-link-item {
   display: block;
   padding: 12px 16px;
   background: var(--bg-main); /* 雲母灰底色，低干擾 */
   border: 1px solid transparent; 
   color: var(--text-main);
   text-decoration: none;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 600;
   transition: all 0.3s ease;
   /* 文字過長防護：強制不換行並加上刪節號 (...) */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis; 
}

.sponsor-link-item:hover {
   background: #ffffff;
   border-color: var(--theme-color);
   color: var(--theme-color);
   box-shadow: 0 4px 12px var(--neon-glow);
   transform: translateX(3px); 
}

.link-icon { 
   color: var(--theme-color); 
   margin-right: 6px; 
   font-size: 12px; 
}

/* 廣告第二區：圖片橫幅輪播系統外框 */
.banner-carousel-wrapper {
   position: relative;
   overflow: hidden;
   border-radius: 8px; 
   border: 1px solid var(--border-color);
   /* 固定寬高比 (16:7)，避免圖片載入時畫面跳動 (CLS) */
   aspect-ratio: 16 / 7; 
   background: #f8fafc;
}

/* 輪播滑軌，透過 JS 改變 transform X 軸數值實現切換 */
.banner-track {
   display: flex;
   height: 100%;
   transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* 單張圖片容器 */
.banner-slide {
   flex: 0 0 100%;
   position: relative;
}

.banner-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover; /* 確保圖片填滿容器不變形 */
   display: block; 
}

/* 廣告左上角分類標籤 */
.banner-label {
   position: absolute;
   top: 15px;
   left: 0;
   background: rgba(255, 255, 255, 0.9); 
   border-left: 4px solid var(--theme-color);
   color: var(--text-main);
   padding: 6px 16px;
   font-size: 13px;
   font-weight: 700;
   box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* 輪播左右控制實體箭頭 */
.banner-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(255, 255, 255, 0.8); 
   color: var(--text-main);
   border: none;
   font-size: 18px;
   cursor: pointer;
   padding: 12px 8px;
   transition: all 0.3s;
   border-radius: 6px;
   z-index: 10;
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.banner-arrow:hover {
   background: var(--theme-color);
   color: #ffffff;
}
.prev-arrow { left: 10px; }
.next-arrow { right: 10px; }

/* 底部圓點指示器容器 */
.banner-dots {
   position: absolute;
   bottom: 15px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 8px;
   z-index: 10;
   background: rgba(255,255,255,0.7);
   padding: 6px 10px;
   border-radius: 20px;
   backdrop-filter: blur(4px);
}

/* 單個圓點 */
.ad-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.2);
   cursor: pointer;
   transition: all 0.3s;
}

/* 當前作用中的圓點 */
.ad-dot.active {
   background: var(--theme-color);
   transform: scale(1.3); /* 放大 1.3 倍增加辨識度 */
}

/* ==========================================================================
 * 【E-E-AT 指標：研發中心與作者資訊區 (Author & Footer)】
 * 說明: 向搜尋引擎與使用者證實本系統的專業背景與實體聯絡管道。
 * ========================================================================== */
.author-info-section {
   margin: 40px auto;
   max-width: 650px;
   text-align: center;
}

.author-title {
   color: var(--text-main);
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 16px;
}

/* 聯絡資訊白皮書卡片 */
.author-info-box {
   border: 1px solid var(--border-color); 
   border-radius: 12px;
   padding: 24px 30px;
   text-align: left;
   background: #ffffff;
   box-shadow: 0 10px 30px rgba(0,0,0,0.03); 
   margin-bottom: 24px;
   transition: border-color 0.3s ease;
}

.author-info-box:hover {
   border-color: var(--theme-color);
}

/* 單行資訊排版 */
.info-row {
   margin-bottom: 14px;
   font-size: 16px;
   font-weight: 700;
   color: var(--text-main);
   line-height: 1.6;
}
.info-row:last-child { margin-bottom: 0; }

/* 資訊標題前綴文字 (如：天璣居士：) */
.info-label {
   color: var(--theme-color); 
   font-size: 120%;
   font-weight: 800;
   margin-right: 6px;
}

/* 區塊分隔虛線 */
.info-divider {
   border: none;
   border-top: 1px dashed var(--border-color);
   margin: 16px 0;
}

/* 底部四大分享/連結功能按鈕陣列 */
.author-buttons {
   display: flex;
   justify-content: center;
   flex-wrap: wrap; /* 手機版空間不足時自動換行 */
   gap: 12px;
}

/* 分享按鈕樣式 (白底幽靈按鈕) */
.author-btn {
   display: inline-flex;
   align-items: center;
   padding: 10px 20px;
   background: #ffffff; 
   border: 1px solid var(--border-color);
   color: var(--text-main); 
   text-decoration: none;
   font-size: 14px;
   font-weight: 700;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
   box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.author-btn:hover {
   background: #ffffff;
   border-color: var(--theme-color);
   color: var(--theme-color) !important;
   box-shadow: 0 6px 15px var(--neon-glow);
   transform: translateY(-2px);
}

/* 頁腳 (Footer) 大底座設計 */
.site-footer {
   text-align: center;
   margin-top: 60px;
   padding: 20px 0 0px 0; 
   /* 區隔感核心：使用比主背景再深半階的冷灰底色，穩住網頁底盤 */
   background-color: #eef2f6; 
   border-top: 3px solid var(--border-color);
   /* 頂部極輕微內陰影，產生溫潤的下沉立體空間感 */
   box-shadow: inset 0 6px 15px rgba(0, 0, 0, 0.015);
   color: var(--text-muted);
   font-size: 13px;
}

/* SEO/AEO 核心理念宣告文字區 */
.footer-seo-meta {
   max-width: 800px;
   margin: 8px auto 0 auto;
   opacity: 0.8;
   line-height: 1.6;
}

/* ==========================================================================
 * 【QRCode 高容錯疊影懸浮視窗 (Modal Overlay)】
 * 說明: 手機掃描分享系統的核心模組，採用全畫面遮罩防呆處理。
 * ========================================================================== */
/* 背景毛玻璃遮罩 */
.qr-modal-overlay {
   position: fixed;
   top: 0; left: 0; width: 100%; height: 100%;
   background: rgba(15, 23, 42, 0.5); /* 帶有深夜藍調的輕盈半透明遮罩 */
   backdrop-filter: blur(6px); /* 毛玻璃模糊效果，讓背景資訊退居二線 */
   -webkit-backdrop-filter: blur(6px);
   z-index: 9999; /* 絕對最上層 */
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* JS 控制的顯示狀態 */
.qr-modal-overlay.active {
   opacity: 1;
   visibility: visible;
}

/* QR Code 彈窗白皮卡片本體 */
.qr-modal-box {
   background: #ffffff; 
   border: 1px solid var(--border-color);
   border-radius: 16px;
   padding: 30px;
   text-align: center;
   position: relative;
   box-shadow: 0 20px 50px rgba(0,0,0,0.1);
   /* 初始狀態縮小並稍微往下，展開時會有彈出放大的視覺感 */
   transform: translateY(-20px) scale(0.95);
   transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
   min-width: 260px;
}

.qr-modal-overlay.active .qr-modal-box {
   transform: translateY(0) scale(1);
}

/* 右上角關閉 (X) 按鈕 */
.qr-modal-close {
   position: absolute;
   top: 15px; right: 15px;
   background: #f4f7fb;
   width: 32px; height: 32px;
   border-radius: 50%;
   border: none;
   color: var(--text-muted);
   font-size: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   transition: all 0.3s;
}

.qr-modal-close:hover {
   background: var(--theme-color);
   color: #ffffff;
}

.qr-modal-title {
   color: var(--text-main);
   margin: 0 0 20px 0;
   font-size: 18px;
   font-weight: 800;
   letter-spacing: 1px;
}

/* QR Code 圖片容器 */
.qr-code-container {
   position: relative;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   background: #ffffff;
   padding: 10px;
   border: 1px solid var(--border-color);
   border-radius: 12px;
}

/* QR Code 圖片設定，關閉圖片平滑補點以確保黑白方塊銳利 */
.qr-code-container img {
   width: 100%;
   height: 100%;
   display: block;
   image-rendering: pixelated; 
}

/* QR Code 中央的陣眼文字 (例如：AI) */
.qr-center-text {
   position: absolute;
   top: 50%; left: 50%;
   transform: translate(-50%, -50%);
   background: #ffffff; 
   color: var(--theme-color); /* 依循五行色系 */
   border: 2px solid var(--theme-color);
   font-size: 20px;
   font-weight: 800;
   width: 44px;
   height: 44px;
   border-radius: 8px;
   display: flex;
   justify-content: center;
   align-items: center;
   box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.qr-modal-desc {
   color: var(--text-muted);
   margin: 20px 0 0 0;
   font-size: 13px;
   font-weight: 600;
}

/* ==========================================================================
 * 【電腦版 RWD 核心媒體查詢 (Media Queries)】
 * 說明: 螢幕寬度 >= 1200px 時，系統自動升級為左右雙欄的航母級操作介面。
 * ========================================================================== */
@media (min-width: 1200px) {
   /* 電腦版左側留出空間給五行選單列 */
   body { padding: 20px 20px 20px 60px; }
   
   /* 隱藏手機版專用的下拉選單，並顯示橫向分頁標籤 */
   .mobile-nav { display: none; } 
   .tabs-container { display: flex; } 
   
   /* 系統寬度限制在 1299px 內，保持最佳閱讀視角 */
   .container { width: 95%; max-width: 1299px; margin: 0 auto; padding: 0; }
   
   /* 核心排版：將輸入區與輸出區改為橫向排列 (Row) */
   .main-content { flex-direction: row; gap: 20px; } 
   
   /* 卡片內距與圓角加大 */
   .panel-card { padding: 24px; border-radius: 12px; } 
   
   /* 黃金比例切割：輸入區佔 4 成寬度，輸出區佔 6 成寬度 */
   .panel-input { flex: 4; } 
   /* min-width: 0 防止 pre 標籤內的長代碼撐破 flexbox 佈局 */
   .panel-output { flex: 6; min-width: 0; } 
   
   /* 將五行色系選單鎖死在左側，不因切換而滑出隱藏 */
   .theme-switcher.hidden-left {
      transform: translateY(-50%) translateX(0) !important;
   }
   
   /* FAQ 模組雙欄化 */
   .faq-grid-container {
      grid-template-columns: repeat(2, 1fr); 
      gap: 24px; 
   }
}


/* ==========================================================================
 * 【全域廣告 Modal 視覺外衣】
 * 作者: 五元網站-Tiger老師
 * 說明: 高質感毛玻璃降噪遮罩、無邊框滿版 RWD 設計、與底部語意核彈樣式。
 * ========================================================================== */

/* 廣告背景遮罩 (毛玻璃降噪設計) */
.tiger-adv-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(15, 23, 42, 0.7); /* 深邃科技暗色底 */
   backdrop-filter: blur(8px); /* 旗艦級毛玻璃特效 */
   -webkit-backdrop-filter: blur(8px);
   z-index: 999999; /* 確保絕對在最上層 */
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0; /* 預設全透明，供 JS 控制淡入 */
   visibility: hidden; /* 取代 display: none 以支援轉場動畫 */
   transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 當啟動時的顯示狀態 (由 JS 動態加入 active 類別) */
.tiger-adv-overlay.active {
   opacity: 1;
   visibility: visible;
}

/* 廣告主體容器 (去邊框化、大圓角) */
.tiger-adv-container {
   position: relative;
   background-color: var(--bg-card); /* 吸附主站卡片底色 */
   width: 90%;
   max-width: 600px; /* 電腦版最大寬度限制 */
   border-radius: 16px; /* 現代感大圓角 */
   overflow: hidden; /* 確保內部圖片完美貼合圓角 */
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--border-color);
   transform: translateY(20px) scale(0.95); /* 初始微縮小並下沉 */
   transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
   display: flex;
   flex-direction: column;
}

/* 啟動時的浮現物理動畫 */
.tiger-adv-overlay.active .tiger-adv-container {
   transform: translateY(0) scale(1);
}

/* 隱形降噪 X 關閉按鈕 */
.tiger-adv-close {
   position: absolute;
   top: 12px;
   right: 12px;
   width: 32px;
   height: 32px;
   background: rgba(0, 0, 0, 0.5); /* 預設半透明黑底，不干擾畫面 */
   color: #ffffff;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 22px;
   font-weight: bold;
   cursor: pointer;
   z-index: 10;
   transition: all 0.3s ease;
}

.tiger-adv-close:hover {
   background: var(--theme-color); /* 滑鼠移入瞬間點亮五行主題色 */
   box-shadow: 0 0 12px var(--neon-glow-strong);
   transform: rotate(90deg); /* 增加互動趣味性 */
}

/* RWD 圖檔滿版設定 */
.tiger-adv-body {
   width: 100%;
   line-height: 0; /* 消除圖片下方預設空隙 */
}

.tiger-adv-img {
   width: 100%;
   height: auto;
   display: block;
}

/* 底部互動與權威宣告區 */
.tiger-adv-footer {
   padding: 20px;
   text-align: center;
   background: var(--bg-main); /* 延續主站微灰底色 */
}

/* 主要對外連結按鈕 */
.tiger-adv-btn {
   display: block;
   width: 100%;
   box-sizing: border-box;
   padding: 14px;
   background: var(--theme-color); /* 吸附五行色 */
   color: #ffffff;
   text-decoration: none;
   font-size: 16px;
   font-weight: 800;
   border-radius: 8px;
   letter-spacing: 1px;
   box-shadow: 0 4px 12px var(--neon-glow);
   transition: all 0.3s ease;
}

.tiger-adv-btn:hover {
   background: #ffffff;
   color: var(--theme-color);
   border: 1px solid var(--theme-color);
   box-shadow: 0 6px 20px var(--neon-glow-strong);
   transform: translateY(-2px);
}

/* 滿版分隔線 */
.tiger-adv-hr {
   border: none;
   border-top: 1px dashed var(--border-color);
   margin: 18px 0;
   width: 100%;
}

/* 品牌權威宣告文字 (滑鼠移入時會微微發亮) */
.tiger-adv-brand a {
   color: var(--text-muted);
   text-decoration: none;
   font-size: 13.5px;
   font-weight: 700;
   transition: color 0.3s ease;
}

.tiger-adv-brand a:hover {
   color: var(--theme-color); /* Hover 時點亮權威色 */
}