/* 06-療程總覽 · 功能醫學 — Figma node 7723:16384（1440 × 8978）
   本檔由 functions.php 2b 段依模板檔名（page-functional-medicine.php → functional-medicine.css）
   自動 enqueue，排在 style.css 之後、只在本頁載入。
   共用 token / 共用元件請留在 style.css，不要複製到這裡——本檔只放這頁專屬的東西。

   本頁重用的共用元件（未在此新增對應 CSS，直接沿用既有 class，見 page-functional-medicine.php docblock）：
   - .gaia-page-banner / .gaia-page-banner__title
   - .gaia-sec-head 全家族
   - .gaia-story / .gaia-story-section*（左圖右文＋CTA，用在「什麼是功能醫學」與「一場以科學為
     準則的調理」兩區；本檔只補這兩區各自的圖片長寬比與少量差異覆寫）
   - .gaia-step-num（未用到——本頁 Step 1-5 是「文字 pill」不是圓形編號，見下方 __pill 說明）
   - .gaia-faq__list / __item / __q / __a（FAQ 手風琴外觀）
   - .gaia-cta（CTA 按鈕）
   - .gaia-postlist / .gaia-postcards（透過 include patterns/case-study.php 取得，本檔不重複定義）

   本頁新增（全部加 gaia-fm- 前綴，見 design-system.md「頁面 CSS 命名規則」）：
   1) .gaia-fm-hero*      — 什麼是功能醫學？（八大系統圓圈圖＋文＋CTA，包在 .gaia-story 裡）
   2) .gaia-fm-feature*   — 功能醫學的特色（3 張圓 icon 卡）
   3) .gaia-fm-signs*     — 你有這樣的狀況嗎？＋外顯症狀圖（圖是烤字的整張圖，見下方說明）
   4) .gaia-fm-compare*   — 高階健檢與功能醫學 對照表
   5) .gaia-fm-steps*     — 功能醫學診療流程 Step 1-5（左 pill 列＋右固定詳情框）
   6) .gaia-fm-adjust*    — 八大關鍵，將身體調整到位（2×4 張圓 icon 卡）
   7) .gaia-fm-qa         — FAQ 外殼（手風琴本身沿用 .gaia-faq__item）

   ⚠️ 區塊順序沿革：2026-08-06 使用者兩次指示調成 對照表 → 診療流程 → 八大關鍵
   （與當時設計稿不同）；2026-08-18 Figma 更新為 診療流程 → 對照表 → 八大關鍵，
   2026-08-19 使用者裁定「對調」——**現況＝診療流程 → 對照表 → 八大關鍵，與最新
   Figma 一致**（詳見 page-functional-medicine.php docblock「2026-08-18/19 更新」）。

   📏 **區塊順序不影響底色節奏——這點實測過，不要憑直覺推論**：
   漸層底的三區是 feature／steps／compare，改順序後 compare 與 steps 變成相鄰。
   直覺會擔心「兩個漸層連成一條長帶」，但**這條漸層頭尾都收到 `rgba(...,0)`**，
   所以相鄰兩區之間仍然會收回接近純白。2026-08-06 在 1440 寬、容器外空白欄
   （CSS x=50）實測：單一漸層最深處亮度約 244–245，
   **compare／steps 交界處是 251.7（rgb 254,253,251），與純白 255 差約 1%，肉眼看不出來。**
   → 換句話說，這三區怎麼排都不會出現「深色長帶」，順序可以純粹依內容邏輯決定。
   （初版註解曾聲稱前一種順序「完整交錯比較好」、這一版「會連成長帶」，
   **兩句都是沒量就寫的直覺推論，實測後刪除**。）

   ⚠️ .gaia-fm-feature / .gaia-fm-steps / .gaia-fm-compare 三區共用同一份「滿版米金漸層底」
   （Figma 三處的 linear-gradient 180deg 配方幾乎一致，只有高度不同、四捨五入後看不出差異），
   收在一條群組選擇器裡，不要複製三份。 */

/* ── banner 背景圖覆寫（2026-08-19，Figma 7723:17577）──────────────
   結構／字級全部沿用 style.css 的 .gaia-page-banner，這裡只換底圖：
   本頁是淡黃圓圈紋（fm-page-banner.webp，2880×400＝2x），不是共用的米金曲線。
   雙 class 選擇器保證優先權——做法與理由同 pain.css 的 .gaia-pain-banner。 */
.site-main .gaia-page-banner.gaia-fm-banner{
  background-image:url("../../img/fm-page-banner.webp");
}

/* ============================================================
   共用：三區同款的滿版米金漸層底（功能醫學的特色／診療流程／對照表）
   ============================================================ */
.site-main .gaia-fm-feature,
.site-main .gaia-fm-steps,
.site-main .gaia-fm-compare{
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);   /* 全寬，配 .site-main{overflow-x:clip} */
  background-image:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(230,217,169,.1) 20%,
    rgba(230,217,169,.2) 48%,
    rgba(230,217,169,.198) 60%,
    rgba(230,217,169,.1) 85%,
    rgba(255,255,255,0) 100%);
}
.site-main .gaia-fm-feature > .gaia-wrap,
.site-main .gaia-fm-steps > .gaia-wrap,
.site-main .gaia-fm-compare > .gaia-wrap{padding-block:var(--space-24)}

/* 共用：圓 icon（func-02 描邊 + 白→透明放射漸層），功能醫學的特色／八大關鍵兩區都用同一顆素材。
   2026-08-18 起圈內有 <img> 線稿 icon（fm-feature-icon-* / fm-adjust-icon-*），
   grid 置中；icon 尺寸由 img 的 width/height 屬性決定（各顆不等大，跟 Figma）。 */
.site-main .gaia-fm-icon-circle{
  width:150px;height:150px;border-radius:50%;
  background:url("../../img/fm-icon-ring.svg") center/contain no-repeat;
  flex:0 0 auto;
  display:grid;place-items:center;
}
.site-main .gaia-fm-icon-circle img{display:block}

/* ============================================================
   1) 什麼是功能醫學？（Figma Frame 1196，node 8529:5463）
   左：八大系統圓圈圖（照片 + 8 顆定位圓標籤）；右：標題＋英文副標＋內文＋CTA。
   包在共用 .gaia-story 裡（左圖右文＋CTA 的既有結構），本檔只加：
   - 這頁專屬的圖片長寬比（.gaia-story__img--fm-hero）
   - 8 顆圓標籤的定位（絕對定位在 .gaia-story__media 內，用 % 對齊 517×746 原始比例，
     容器本身鎖 aspect-ratio 所以縮放時仍是正圓）
   - 英文副標（.gaia-fm-hero__tagline，.gaia-story 原本沒有這個子元素）
   - 內文顏色覆寫：這裡設計稿是 --text-black，不是 .gaia-story__body 預設的 --gray-01
   ============================================================ */
.site-main .gaia-fm-hero{padding-block:var(--space-24)}

.site-main .gaia-story__img--fm-hero{aspect-ratio:517 / 746}
.site-main .gaia-fm-hero .gaia-story__media{position:relative}

.site-main .gaia-fm-hero__tagline{
  font-family:"Calligraffitti","Noto Serif TC",serif;font-style:italic;
  font-size:.875rem;color:var(--func-02);letter-spacing:.2em;line-height:2.5;margin:0;
}
.site-main .gaia-fm-hero .gaia-story__body{color:var(--text-black)}

/* ── 段落間距＝一整行（2026-08-25，Figma 8529:5463／8133:4904）──────────
   設計稿的段與段之間是「空一行」（Figma 用 <br> 製造，等於一個 line-height）。
   實作原本沒有任何規則設定 <p> 的 margin，吃的是瀏覽器預設 1em＝16px，
   比設計稿窄了約 13.6px，段落看起來比設計稿密。改成 1.85em 對齊 line-height。
   ⚠️ 只套用在本頁這兩區（使用者 2026-08-25 裁定「只改指定的三處」）——
   共用的 .gaia-story__body 不動，其他頁維持現狀。 */
.site-main .gaia-fm-hero .gaia-story__body p,
.site-main .gaia-fm-story .gaia-story__body p{margin-bottom:1.85em}

/* ── 區塊內的垂直節奏（2026-08-25，逐節點量自 Figma）──────────────────
   .gaia-story__content 是共用的 flex column，預設 gap var(--space-4)=16px，
   但兩區設計稿的值不同，必須各給各的：
     什麼是功能醫學 8529:5463 → gap 24px（標題／英文副標／內文／CTA 之間）
     一場以科學為準則 8133:4904 → gap 60px（標題／內文／CTA 之間）
   內文顏色：兩區設計稿都是 --text-3e #3e3e3e。hero 早先已覆寫過，
   story 區還是共用的 --gray-01（#60535d，偏紫灰），一併對齊。
   ⚠️ gap 管的是「區塊之間」，段落之間是上面那條 p{margin-bottom:1.85em}
   （設計稿用空段落製造空行），兩者職責不同不要混用。 */
.site-main .gaia-fm-hero .gaia-story__content{gap:24px}
.site-main .gaia-fm-story .gaia-story__content{gap:60px}
.site-main .gaia-fm-story .gaia-story__body{color:var(--text-black)}
/* 共用 .gaia-story__cta 自帶 margin-top var(--space-2)=8px，會疊在上面的 gap 上，
   讓 CTA 前的間距變成 24+8／60+8。設計稿那裡就是一個 gap，歸零讓 gap 說了算。 */
.site-main .gaia-fm-hero .gaia-story__cta,
.site-main .gaia-fm-story .gaia-story__cta{margin-top:0}
.site-main .gaia-fm-hero .gaia-story__body p:last-child,
.site-main .gaia-fm-story .gaia-story__body p:last-child{margin-bottom:0}

.site-main .gaia-fm-hero__circle{
  position:absolute;left:var(--fm-circle-left);top:var(--fm-circle-top);
  width:24.56%;aspect-ratio:1;border-radius:50%;
  background:url("../../img/fm-hero-circle.svg") center/contain no-repeat;
  display:flex;align-items:center;justify-content:center;text-align:center;
  /* ⚠️ 不能用 % padding：本元素 position:absolute，% padding 是相對「最近定位祖先」
     （.gaia-story__media，桌機約 565px）算，不是相對自己的 139px，算出來的內距會
     暴增到快 1/3 顆圓的寬度，把文字擠成兩三個字一行硬拆。改用 vw + px 上限，
     跟視窗寬度成比例但不會受這個 containing-block 陷阱影響（實測踩到，見上方）。 */
  padding:clamp(6px,1.6vw,14px);box-sizing:border-box;
}
.site-main .gaia-fm-hero__circle span{
  display:block;width:100%;   /* 撐滿可用寬度，避免 CJK 文字在 <br> 之外又被 flex 的
                                  shrink-to-fit 算成更窄的寬度、造成二度換行（實測踩到） */
  font-family:var(--font-jinxuan);font-weight:700;color:#fff;
  font-size:clamp(.7rem,1.4vw,1.125rem);line-height:1.25;letter-spacing:.1em;
}

/* ============================================================
   2) 功能醫學的特色 · Feature（Figma Group 1196，node 7911:14750）
   滿版米金漸層底（見上方共用區）＋標題＋3 張圓 icon 卡。
   ============================================================ */
.site-main .gaia-fm-feature__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:var(--space-8) var(--space-6);
}
.site-main .gaia-fm-feature-card{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-8);text-align:center;
}
.site-main .gaia-fm-feature-card__title{
  font-family:var(--font-jinxuan);font-weight:700;font-size:1.125rem;
  color:var(--sub-gray-01);letter-spacing:.1em;line-height:1.85;margin:0;
}
.site-main .gaia-fm-feature-card__body{
  font-family:var(--font-sans);font-size:1rem;color:var(--text-black);
  letter-spacing:.1em;line-height:1.85;text-align:center;margin:0;
}

/* ============================================================
   3) 你有這樣的狀況嗎？＋外顯症狀（Figma Group 1209，node 8529:5554）
   左：小標＋12 條症狀清單＋收尾文；右：外顯症狀圖（見下方「刻意略過」說明）。
   ============================================================ */
.site-main .gaia-fm-signs{padding-block:var(--space-24)}
.site-main .gaia-fm-signs__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));
  gap:var(--space-8) clamp(24px,6vw,80px);
  align-items:center;
}
.site-main .gaia-fm-signs__intro{
  font-family:var(--font-sans);font-weight:700;font-size:1.25rem;
  color:var(--pain-main-01);letter-spacing:.1em;margin:0 0 var(--space-6);
}
.site-main .gaia-fm-signs__list{
  list-style:none;margin:0 0 var(--space-6);padding:0;
  display:flex;flex-direction:column;gap:var(--space-2);
}
.site-main .gaia-fm-signs__list li{
  font-family:var(--font-sans);font-size:1rem;color:var(--text-black);
  letter-spacing:.05em;line-height:1.85;padding-left:1.2em;position:relative;
}
.site-main .gaia-fm-signs__list li::before{
  content:"‧";position:absolute;left:0;color:var(--main-01);font-weight:700;
}
.site-main .gaia-fm-signs__note{
  font-family:var(--font-sans);font-size:1rem;color:var(--text-black);
  letter-spacing:.05em;line-height:1.85;margin:0;
}
.site-main .gaia-fm-signs__note strong{color:var(--main-01);font-weight:700}
/* height:auto 的理由同 style.css 的 .gaia-story__img（原生 height 屬性會讓 aspect-ratio 失效）。
   這張沒掛 .gaia-story__img，吃不到那條，要各別寫。 */
.site-main .gaia-fm-signs__img{
  display:block;width:100%;height:auto;aspect-ratio:580 / 611;object-fit:contain;
}

/* ============================================================
   4) 八大關鍵，將身體調整到位 · Adjust Better（Figma Group 1203，node 8212:8935）
   標題＋一行橘色引言＋2×4 圓 icon 卡（同款 icon 素材，沒有內文，只有標題）。
   ============================================================ */
.site-main .gaia-fm-adjust{padding-block:var(--space-24)}
.site-main .gaia-fm-adjust__lead{
  text-align:center;font-family:var(--font-sans);font-size:1rem;color:var(--pain-main-01);
  letter-spacing:.1em;margin:calc(-1 * var(--space-8)) 0 var(--space-16);
}
.site-main .gaia-fm-adjust__grid{
  display:grid;
  /* 下限刻意訂在 240（比 3 張卡那組的 220 高一點）：設計稿是固定 4 欄
     （994 開版 4×270 卡），8 張卡若沿用 220 下限，1200 開版會被 auto-fit
     塞成 5＋3 而不是 4＋4——220 只是「不要小於這個」的下限，沒有連動到
     欄數，要湊出跟設計一致的 4 欄需要單獨調這個值 */
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:var(--space-8) var(--space-4);
}
.site-main .gaia-fm-adjust-card{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-8);text-align:center;
}
.site-main .gaia-fm-adjust-card__title{
  font-family:var(--font-jinxuan);font-weight:700;font-size:1.125rem;
  color:var(--sub-gray-01);letter-spacing:.1em;line-height:1.85;margin:0;
}

/* ============================================================
   5) 功能醫學診療流程 Step 1-5（Figma Group 1138，node 7911:15320）
   2026-08-19 由靜態畫面升級成 tab／手風琴切換（內容到齊前，沒內容的 step 是
   disabled 靜態 pill，視覺同舊版；資料驅動的細節見 page-functional-medicine.php）。
   DOM 是「pill、panel、pill、panel…」交錯的一維序列（手風琴需要 panel 緊跟自己的
   pill），桌機的「左 pill 列＋右詳情框」靠 grid 顯式定位拉出來：
   pill 鎖第 1 欄（自動排進 row 1-5）、panel 全部鎖第 2 欄 row 1-7。
   grid-template-rows 最後補一條 1fr：panel 比 5 顆 pill 高的餘量全部落進第 6 列，
   pill 列距才不會被 span 撐開（沒有這條 1fr，餘量會平分進 row 1-5，pill 間距會散掉）。
   ⚠️ 這裡的 900px 斷點是「版面模式」切換（桌機 tab ↔ 手機手風琴，panel 的
   grid 定位整個不同），不是欄數變化，auto-fit 表達不了——不違反硬規則 5 的本意，
   斷點值取兩欄各 400px 下限＋gap 塞得下的臨界。 */
.site-main .gaia-fm-steps__body{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(5,auto) 1fr;
  column-gap:clamp(24px,6vw,97px);
  row-gap:var(--space-6);
  align-items:start;
}
.site-main .gaia-fm-steps__pill{
  grid-column:1;
  display:flex;align-items:center;justify-content:center;
  width:100%;
  min-height:70px;padding:var(--space-3);border-radius:5px;
  font-family:var(--font-sans);font-weight:700;font-size:1.125rem;
  letter-spacing:.1em;line-height:1.85;text-align:center;
  background:var(--func-01);border:1px solid var(--main-01);color:var(--main-01);
}
/* 可點的 pill（有 aria-controls＝有內容）才有指標與 hover；disabled 維持靜態外觀 */
.site-main .gaia-fm-steps__pill[aria-controls]{
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.site-main .gaia-fm-steps__pill[aria-controls]:not(.gaia-fm-steps__pill--active):hover{
  border-color:var(--main-02);color:var(--main-02);
}
.site-main .gaia-fm-steps__pill--active{
  background:var(--main-02);border-color:var(--main-02);color:#fff;
}
.site-main .gaia-fm-steps__panel{
  grid-column:2;grid-row:1/7;   /* 桌機：疊在右欄同一格（一次只有一片可見） */
  border:1px solid var(--main-02);border-radius:5px;background:rgba(230,217,169,.2);
  padding:clamp(24px,5vw,64px);
  display:flex;flex-direction:column;gap:var(--space-6);
}
/* display:flex 會蓋掉 [hidden] 的 UA display:none，要自己補回 */
.site-main .gaia-fm-steps__panel[hidden]{display:none}

/* ≤900px：手風琴模式——退回一維文流，panel 自然跟在自己的 pill 下面。
   斷點正當性見上方區塊註解（版面模式切換，非欄數變化）。 */
@media (max-width:900px){
  .site-main .gaia-fm-steps__body{display:flex;flex-direction:column;gap:var(--space-6)}
}
.site-main .gaia-fm-steps__panel-title{
  font-family:var(--font-sans);font-weight:700;font-size:1.125rem;
  color:var(--main-02);letter-spacing:.1em;margin:0;
}
.site-main .gaia-fm-steps__panel-block{
  font-family:var(--font-sans);font-size:1rem;letter-spacing:.1em;line-height:1.75;color:var(--text-black);
}
.site-main .gaia-fm-steps__panel-block--accent{color:var(--main-02)}
.site-main .gaia-fm-steps__panel-block p{margin:0 0 var(--space-1);font-weight:500}
.site-main .gaia-fm-steps__panel-block ul,
.site-main .gaia-fm-steps__panel-block ol{margin:0 0 var(--space-2);padding-left:1.4em}
.site-main .gaia-fm-steps__panel-block li{margin-bottom:2px}
.site-main .gaia-fm-steps__panel-block:last-child p{font-weight:400}

/* ============================================================
   6) 高階健檢與功能醫學 對照表（Figma Group 1190，node 8448:8520）
   兩欄各一個金底標題 + 5 列，中間夾一個大大的「與」字。
   ============================================================ */
/* 「與」字判斷為裝飾字（同 anti-aging.css 的 vs 字處理，見該檔 row--vs 註解）。
   第一版用 grid + position:absolute(top/left:50%) 置中在兩欄之間，桌機沒問題，
   但兩欄堆疊（auto-fit 換行觸發點隨容器實際寬度浮動，~400-860px 之間）時，
   絕對定位是相對整個 grid 容器置中，會落在「疊高後的中點」，被兩欄輪流蓋住，
   審查判定違反硬規則 7（不為排版反應開新斷點）。
   改法：__grid 從 grid 換成 flex-wrap，markup 順序改成 [欄1, 與, 欄2]（PHP 同步調整），
   兩欄 flex-basis 用 min(400px,100%)（跟原本 grid 的 400 下限同精神）：
   夠寬時三者一行放得下，「與」自然卡在兩欄中間；容器窄於 400px 時兩欄 basis
   各自變成 100%、強制獨占一行，「與」被夾在中間、自己落單成一行，
   不必算座標、也不必開新斷點——純粹是 flex-wrap 換行順序的自然結果。 */
.site-main .gaia-fm-compare__grid{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--space-8) clamp(24px,6vw,74px);
}
.site-main .gaia-fm-compare-col{
  flex:1 1 min(400px,100%);
  align-self:stretch;
}
.site-main .gaia-fm-compare__and{
  flex:0 0 auto;margin:0;
  font-family:var(--font-sans);font-weight:500;font-size:3rem;color:var(--func-01);
  letter-spacing:.1em;pointer-events:none;
}
.site-main .gaia-fm-compare-col__head{
  background:var(--func-02);color:#fff;border-radius:5px;
  padding:var(--space-4) var(--space-3);text-align:center;
  font-family:var(--font-jinxuan);font-weight:700;font-size:1.5rem;letter-spacing:.1em;
  margin:0 0 var(--space-6);
}
.site-main .gaia-fm-compare-col__rows{list-style:none;margin:0;padding:0}
.site-main .gaia-fm-compare-col__rows li{
  padding-block:var(--space-3);text-align:center;
  font-family:var(--font-sans);font-size:1.125rem;color:var(--text-black);letter-spacing:.1em;
  border-top:1px solid var(--main-01);
}
.site-main .gaia-fm-compare-col__rows li:last-child{border-bottom:1px solid var(--main-01)}

/* ============================================================
   7) FAQ 外殼（Figma Group 1191，node 7911:15444）
   手風琴視覺 100% 沿用 .gaia-faq__list/__item/__q/__a（style.css §16），這裡只加外殼寬度。
   （2026-09-01：客戶文案定稿，20 題含答案上稿於 page-functional-medicine.php，
   取代切版時「答案是排版假字、只上問題殼」的過渡狀態；本頁 CSS 零改動。）
   ============================================================ */
.site-main .gaia-fm-qa{padding-block:var(--space-24)}
.site-main .gaia-fm-qa .gaia-wrap{--container:994px}

/* ============================================================
   8)「一場以科學為準則的調理」院長區 — 完整沿用 .gaia-story-section > .gaia-story，
   零新增結構 CSS，只補這頁專屬的圖片長寬比（比照 about.css 的做法）。
   ============================================================ */
.site-main .gaia-story__img--fm-story{aspect-ratio:481 / 574}