/* 雅術牙醫 — 全站樣式統一層
   依 Dennis 2026-08-03 驗收要求；疊在 codex.css / inner.css 之後，只放跨頁一致的規則 */
:root{
  --prose-width:700px;   /* 內文行寬：中文每行約 38 字（原本 1080px＝57 字，實測 760px 仍有 43 字） */
  --gallery-gap:5px;
  --section-pad:36px;   /* Dennis：上下不用留那麼多 */
}

/* ① 內文收窄 —— 已停用（2026-08-03）。
   收窄+置中套到區塊式頁面（如 aboutus）會讓內文比標題窄 129px、左邊界對不齊。
   長文閱讀性的收窄之後只在文章頁單獨處理，不做全站規則。 */

/* ② 段落間距：實測原本就有 33.6px（≒1 個行高），是合理的，不動。
      先前誤讀成 0 是因為量到 p 的 margin，實際間距來自 .fg-paragraph 容器。 */

/* ③ H2：字級縮小；上內距做「視覺」補償——中文字在行框內天生偏上，
      padding 設成數值相等，看起來仍會上窄下寬 */
.inner-main h2{font-size:24px;padding-top:12px;padding-bottom:8px}

/* ④ 內容區塊上下留白一致：實測原本一律 36px/64px（上小下大），就是「padding-top 偏小」的來源。
      麵包屑排除（它本來就該緊）。最後一個區塊的 64px 下內距，就是聯絡區上方那塊多餘白色。 */
.inner-main .post-content>.fg-section:not(.codex-breadcrumb-section),
.inner-main .codex-generic-content>.fg-section:not(.codex-breadcrumb-section){
  padding-top:var(--section-pad);padding-bottom:var(--section-pad);
}
/* 只對「區塊」層級，不可打到 .fg-wrapper —— 那是標題的背景包裹層，
   撐大它會讓底下的 .fg-bg-layer 整片露出來（認證頁「植牙專科 王崇丞醫師」變一大片黃色就是這樣） */
.inner-main section.fg-el-has-bg{padding-top:var(--section-pad);padding-bottom:var(--section-pad)}
/* 內容最後一個區塊不要再留下內距，避免和聯絡區之間多一塊白 */
.inner-main .post-content>.fg-section:last-child,
.inner-main .codex-generic-content>.fg-section:last-child{padding-bottom:0}

/* ⑤ 條列統一一款（原本同頁有小圓點與大黑點兩種） */
.inner-main .ff-richtext ul{list-style:none;padding-left:1.5em}
.inner-main .ff-richtext ul>li{position:relative;margin-bottom:.45em}
.inner-main .ff-richtext ul>li::before{
  content:"";position:absolute;left:-1em;top:.62em;
  width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;
}

/* ⑥ 圖片與內文之間留間距 */
.inner-main img{display:block}
.inner-main .fg-col>img,
.inner-main .fg-wrapper>img{margin-bottom:1.3em}

/* ⑦ 圖說：緊貼圖片，與內文區分。
   ⚠️ !important 有理由：全站實測圖說有 5 種現值（fs17 置中 56 個/fs18 靠左 18 個/fs14 三種 28 個），
   來源是 codex 各層互搶；這裡是「圖說另給一套樣式」的最終定義層（Dennis 點名項目） */
.codex-rewrite .inner-main .codex-caption.codex-caption.codex-caption.codex-caption.codex-caption{
  margin-top:.5em!important;font-size:14px!important;line-height:1.7!important;
  color:#8a827a!important;text-align:center!important;
  max-width:var(--prose-width);margin-left:auto;margin-right:auto;
}
.inner-main .fg-col>img:has(+.codex-caption),
.inner-main .fg-wrapper>img:has(+.codex-caption){margin-bottom:0}

/* ⑧ 圖片牆 5px —— 暫停用。
   實測：文章頁的規則有效，但頁面型（如 3D數位植牙到達頁）的欄位間距來源不同，
   照這樣寫不但沒收到 5px，反而把 72px 撐成 77px。要先查清楚頁面型的間距來自哪一層再開。
.inner-main .codex-gallery{margin-left:calc(var(--gallery-gap)/-2);margin-right:calc(var(--gallery-gap)/-2)}
.inner-main .codex-gallery>.fg-col{padding-left:calc(var(--gallery-gap)/2);padding-right:calc(var(--gallery-gap)/2);margin-bottom:var(--gallery-gap)}
.inner-main .codex-gallery img{margin-bottom:0;width:100%}
*/

/* ⑨ 聯絡我們區（全站共用區塊）上下內距對稱。
   實測結構是 section.codex-contact-module > div.codex-contact-area > section.…__form，
   真正上40下0的是最內層的 __form，由它負責對稱，外兩層歸零避免疊加 */
.inner-main .codex-contact-module{padding-top:0;padding-bottom:0}
/* 特異性要對齊 codex 既有的三層寫法，否則蓋不過 */
/* 這裡用 !important 是有理由的：inner.css 對 padding-bottom:0 另有來源（含 media query 的
   padding-block: 48px 0），同特異性覆蓋只吃得下 padding-top，bottom 一直被壓回 0。
   等 inner.css 重寫時這條可以拿掉。 */
.codex-rewrite .codex-contact-area .codex-contact-module__form{padding-top:40px!important;padding-bottom:40px!important}
/* (23)A 語意清理：內層兩個建構器 section 改 div（class 全保留，blocks/contact-inner.html）。
   address 的內距原本來自 tag 綁定通則（.inner-main section.fg-el-has-bg），改 div 會掉——
   按改前 live 實測值 68/68 釘死，視覺零位移 */
.codex-rewrite .codex-contact-area .codex-contact-module__address{padding-top:68px!important;padding-bottom:68px!important}
/* (23)B 驗證碼列微整：送出鈕原本浮在列頂、比輸入框矮——下移對齊輸入框列、同高 40px */
.codex-rewrite .codex-contact-area .quform-element-submit{margin-top:27px}
.codex-rewrite .codex-contact-area .quform-button-submit button{height:37px;min-width:150px;padding:0 28px}
/* 醫師照貼底（Dennis 08-05：「不要騰空，應該貼在底部」，原站也是貼底）：
   騰空來源＝__form 的 40px 底內距＋⑥ 通則的圖片 1.3em 下距，都墊在照片下面。
   底內距移給表單欄保住表單呼吸，照片欄改 flex 置底、下距歸零 */
.codex-rewrite .codex-contact-area .codex-contact-module__form{padding-bottom:0!important}
.codex-rewrite .codex-contact-area .codex-contact-module__form .fg-row > .fg-col:first-child{padding-bottom:16px;align-self:end!important}
/* Dennis 08-05：醫師照再大一點＋表單底距收斂——左右欄 50/50 改 45/55，照片欄放寬；
   表單欄從「400px 列內垂直置中」改靠底，殘餘底距只剩欄的 16px 墊 */
.codex-rewrite .codex-contact-area .codex-contact-module__form .fg-row{grid-template-columns:40fr 60fr;align-items:end!important}
.codex-rewrite .codex-contact-area .codex-contact-portrait img{width:100%;max-width:640px}
.codex-rewrite .codex-contact-area .codex-contact-portrait{display:flex;align-items:flex-end;justify-content:center}
.codex-rewrite .codex-contact-area .codex-contact-portrait img{margin-bottom:0!important}
/* 黃帶 logo 往下一點（Dennis 08-05）：flex 置中其實已對齊，但 logo 圖檔視覺重心偏上，nudge 6px */
.codex-rewrite .codex-contact-area .codex-contact-brand > img{position:relative;top:6px}
/* 首頁浮動選單跟內頁一致（Dennis 08-05）：淺色卡樣式原本只在 inner.css、首頁不載它而落回
   codex.css 深色版。搬到 refine（全站都載、疊序最後）統一，值照抄 inner.css:1049 */
.codex-rewrite .quick-actions{gap:0;padding:4px;border:1px solid rgba(59,54,50,.18);background:#f0f0ee;box-shadow:0 10px 24px rgba(59,54,50,.12)}
.codex-rewrite .quick-actions a{min-width:72px;padding:8px 7px;border-bottom:1px solid rgba(59,54,50,.28);color:#222;background:#e7e7e5;font-size:14px}
.codex-rewrite .quick-actions a:last-child{border-bottom:0}
.codex-rewrite .quick-actions a:hover{background:#d9d9d6}
/* 麵包屑後第一個區塊統一 padding-top:20px（Dennis 08-05 拍板：「有麵包屑的頁面第一個 section
   的 padding-top 都是 20px」）——麵包屑離內容很遠的根因＝首區塊自帶 67~78px 上內距。
   fg-section 疊五層拉高特異性，蓋過 78/78 對稱化與 inner.css 的 !important 內距規則 */
body.codex-rewrite .inner-content :is(.post-content,.codex-generic-content) > section.codex-breadcrumb-section + section.fg-section.fg-section.fg-section.fg-section.fg-section{
  padding-top:20px!important;
}
/* 照片卡列（微笑美學五格/假牙流程四格；Dennis 08-05：間隔 5px＝圖片牆鐵則、上下別那麼空）。
   組裝時標 codex-photo-cards＋把建構器拆成 4+1 的續行併回一排（原站 5 張一排） */
.codex-rewrite .inner-main .fg-row.codex-photo-cards{display:flex!important;gap:5px;margin:0}
.codex-rewrite .inner-main .fg-row.codex-photo-cards > .fg-col{flex:1 1 0;min-width:0;width:auto!important;padding:0!important}
.codex-rewrite .inner-main .fg-row.codex-photo-cards a.fg-link-wrapper-el{margin:0}
.codex-rewrite .inner-main section.fg-section:has(.codex-photo-cards){padding-top:24px!important;padding-bottom:24px!important}

/* 海外貴賓服務卡重設計（Dennis 08-05）：圓角細框卡、兩欄緊湊、去建構器墊塊 */
.codex-rewrite .inner-main .fg-row.codex-svc-cards{display:flex!important;flex-wrap:wrap;gap:16px;margin:6px 0 8px}
.codex-rewrite .inner-main .fg-row.codex-svc-cards > .fg-col{flex:1 1 46%;min-width:260px;padding:0!important;width:auto!important}
.codex-rewrite .inner-main a.codex-svc-card{display:flex;align-items:center;justify-content:center;min-height:64px;padding:14px 20px;border:1px solid rgba(200,154,91,.35);border-radius:10px;background:#fdfcf9;box-shadow:0 2px 8px rgba(59,54,50,.05);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.codex-rewrite .inner-main a.codex-svc-card:hover{border-color:#c89a5b;box-shadow:0 4px 14px rgba(59,54,50,.10)}
.codex-rewrite .inner-main a.codex-svc-card p{margin:0!important;font-size:18px;font-weight:600;color:#3b3632;text-align:center}
.codex-rewrite .inner-main a.codex-svc-card .fg-bg{display:none}
.codex-rewrite .inner-main section.fg-section:has(.codex-svc-cards){padding-top:24px!important;padding-bottom:24px!important}

/* fg-bg 背景層蓋字根治（Dennis 08-05 海外貴賓頁：灰卡/黃帶有字看不見）：
   .fg-bg 是絕對定位層，建構器原有的 z 序規則被拆掉後畫在靜態文字上面。
   帶背景元素自建 stacking context、背景層墊 -1＝內容永遠在背景之上 */
.codex-rewrite .inner-main .fg-el-has-bg{position:relative;z-index:0}
.codex-rewrite .inner-main .fg-el-has-bg .fg-bg{z-index:-1}
.inner-main .fg-section:has(> .codex-contact-module),
.inner-main .fg-section:has(> .fg-container > .codex-contact-module){padding-top:0;padding-bottom:0}

/* ⑩ 口號標題：原本是 <p> 18px/400，跟內文同字級同字重，等於沒有標題。
   讀內容可知它其實是兩層：上行是類別（眉標），下行才是訴求（主標）。
   拆成 __kicker / __title 後分別給份量，並收掉與上一段過大的距離。 */
.codex-rewrite .inner-main .codex-source-heading{
  margin:6px 0 26px;padding-left:16px;border-left:4px solid rgb(200,154,91);
}
.codex-rewrite .inner-main .codex-source-heading__kicker{
  display:block;font-size:14px;font-weight:600;letter-spacing:.08em;
  color:rgb(200,154,91);margin-bottom:7px;
}
.codex-rewrite .inner-main .codex-source-heading__title{
  display:block;font-size:26px;font-weight:700;line-height:1.45;color:rgb(59,54,50);
}
/* 單行版（例：醫師職稱、活動標題）只需要一級份量 */
.codex-rewrite .inner-main .codex-source-heading.is-single{
  font-size:22px;font-weight:700;line-height:1.5;color:rgb(59,54,50);
}
.codex-rewrite .inner-main .codex-source-heading.codex-doctor-role.is-single{font-size:16px;font-weight:600}

/* ⑪ 全寬區塊要真的貼齊兩側（Dennis：「全寬的樣式就不應該有邊界，不然就會像這樣很醜」）
   成因：容器 .inner-content 有 15px 內距，所有子區塊被內縮 15px。
   ⚠️ 只對「內容區的直接子 section」且有底色／底圖的做抵消——
      不可用 .fg-el-has-bg 泛選，那會打到標題的背景包裹層（.fg-wrapper），
      撐大它會讓底下的色塊整片露出（認證頁變一大片黃色就是這樣）。 */
.codex-rewrite .inner-main .post-content > section.fg-el-has-bg,
.codex-rewrite .inner-main .codex-generic-content > section.fg-el-has-bg,
.codex-rewrite .inner-main .post-content > section.codex-about-space-gallery,
.codex-rewrite .inner-main .codex-generic-content > section.codex-about-space-gallery,
.codex-rewrite .inner-main .post-content > section.codex-contact-module,
.codex-rewrite .inner-main .codex-generic-content > section.codex-contact-module,
.codex-rewrite .inner-main .post-content > section.codex-doctor-section,
.codex-rewrite .inner-main .codex-generic-content > section.codex-doctor-section,
.codex-rewrite .inner-main .post-content > section.codex-a-waterlase,
.codex-rewrite .inner-main .codex-generic-content > section.codex-a-waterlase{
  margin-left:-15px;margin-right:-15px;
}

/* ⑫ 內文寬度與標題一致：內文原本有自己的 max-width（821px），比標題（1080px）窄，
   左邊界雖然對齊，右邊差 259px 看起來就是兩種寬度 */
.codex-rewrite .inner-main .ff-richtext p,
.codex-rewrite .inner-main .fg-paragraph{max-width:none}

/* ⑬ 圖片牆間隔一律 5px（Dennis 講過兩次：水平與垂直都要）
   ⚠️ 不能只設 .fg-col 的 padding——有些圖直接掛在 .fg-col 下、有些包了 .fg-wrapper，
      結構不一致會出現「有的 5px 有的 0」。統一改用 gap，由列容器負責。 */
.codex-rewrite .inner-main .codex-gallery{
  display:flex;flex-wrap:wrap;gap:5px;margin-left:0;margin-right:0;
}
.codex-rewrite .inner-main .codex-gallery > .fg-col{
  padding-left:0;padding-right:0;margin-bottom:0;
  flex:1 1 0;min-width:0;
}
.codex-rewrite .inner-main .codex-gallery > .fg-col > *,
.codex-rewrite .inner-main .codex-gallery > .fg-col > * > *{margin-bottom:0}
/* 垂直 5px 改由 img 自帶下距——實測 control 頁的圖全疊在「單一個子層」裡，
   .fg-col 層級的 gap 規則搆不到（v0 就是這樣來的）；水平向由 flex gap 管，互不干擾。
   margin 帶 !important：codex 對 .codex-article-image 另有更高特異性的 margin 規則 */
.codex-rewrite .inner-main .codex-gallery img{display:block;width:100%;height:auto;margin:0 0 5px!important}
.codex-rewrite .inner-main .codex-gallery img:last-child{margin-bottom:0!important}
/* 直排（同一欄上下兩張）也要 5px */
.codex-rewrite .inner-main .codex-gallery > .fg-col > .fg-row{display:flex;flex-direction:column;gap:5px}

/* 輪播區塊也要貼齊兩側（Dennis：「這種照片輪播牆應該要是全寬吧」） */
.codex-rewrite .inner-main .post-content > section.codex-carousel-section,
.codex-rewrite .inner-main .codex-generic-content > section.codex-carousel-section{
  margin-left:-15px;margin-right:-15px;
}
.codex-rewrite .inner-main .codex-carousel-section > .fg-container,
.codex-rewrite .inner-main .codex-carousel-section .fg-container-fluid{
  padding-left:0;padding-right:0;max-width:none;width:100%;
}

/* ⑭ 條列統一一款（原本同頁有小圓點與大黑點兩種、行距也不同） */
.codex-rewrite .inner-main .ff-richtext ul{list-style:none;padding-left:1.5em;margin-bottom:1.1em}
.codex-rewrite .inner-main .ff-richtext ul > li{position:relative;margin-bottom:.45em;padding-left:0}
.codex-rewrite .inner-main .ff-richtext ul > li::before{
  content:"";position:absolute;left:-1em;top:.62em;
  width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;
}
.codex-rewrite .inner-main .ff-richtext ol{padding-left:1.6em;margin-bottom:1.1em}
.codex-rewrite .inner-main .ff-richtext ol > li{margin-bottom:.45em}

/* ⑮ 聯絡區左右欄的空白：醫師照原本靠底對齊，上方空出 399px；表單下方又多 141px */
.codex-rewrite .codex-contact-area .codex-contact-module__form .fg-row{align-items:center}
.codex-rewrite .codex-contact-area .codex-contact-module__form .fg-col > .fg-wrapper{padding-top:0;padding-bottom:0}

/* ═══ 文章統一排版（Dennis 2026-08-03：全站文章樣式要一樣）═══
   原本 h2/h3/h4 共用同一個 codex-content-heading，三級標題長得一樣、階層讀不出來。
   組裝時已分級標記 codex-a-h2 / h3 / h4，這裡給各自的份量與節奏。 */

/* 段落大標：保留 codex 既有的底色＋左直線視覺，只調份量與上下節奏 */
.codex-rewrite .inner-content .codex-generic-content h2.codex-a-h2,
.codex-rewrite .inner-content .post-content h2.codex-a-h2{
  font-size:24px;font-weight:700;line-height:1.5;
  margin-top:2.1em;margin-bottom:.85em;
}
/* 子標：明顯小一級，不帶底色，靠字重與左線區分 */
.codex-rewrite .inner-content .codex-generic-content h3.codex-a-h3,
.codex-rewrite .inner-content .post-content h3.codex-a-h3{
  font-size:19px;font-weight:700;line-height:1.6;
  margin-top:1.7em;margin-bottom:.55em;
  padding-left:12px;border-left:3px solid rgba(200,154,91,.75);
  background:none;
}
/* 第三級：只用字重與字距，不再加裝飾，避免跟 h3 混淆 */
.codex-rewrite .inner-content .codex-generic-content h4.codex-a-h4,
.codex-rewrite .inner-content .post-content h4.codex-a-h4{
  font-size:17px;font-weight:600;line-height:1.6;
  margin-top:1.35em;margin-bottom:.45em;letter-spacing:.01em;
}
/* 標題後緊接的第一段不要再多一層上距 */
.codex-rewrite .inner-content .codex-a-h2 + p,
.codex-rewrite .inner-content .codex-a-h3 + p,
.codex-rewrite .inner-content .codex-a-h4 + p{margin-top:0}

/* 署名（文/沈育群醫師）：原本是普通段落，跟內文分不開 */
.codex-rewrite .inner-content .codex-generic-content .codex-a-byline,
.codex-rewrite .inner-content .post-content .codex-a-byline{
  font-size:14px;color:#8a827a;letter-spacing:.04em;
  margin:.2em 0 1.6em;
}

/* 表格：全站 10 個，原本沒有統一樣式 */
.codex-rewrite .inner-main .codex-a-table{
  width:100%;border-collapse:collapse;margin:1.4em 0;font-size:16px;
}
.codex-rewrite .inner-main .codex-a-table th,
.codex-rewrite .inner-main .codex-a-table td{
  border:1px solid rgba(59,54,50,.14);padding:10px 14px;line-height:1.7;vertical-align:top;
}
.codex-rewrite .inner-main .codex-a-table th{background:rgba(247,242,233,.7);font-weight:600;text-align:left}
.codex-rewrite .inner-main .codex-a-table tr:nth-child(even) td{background:rgba(0,0,0,.015)}

/* ⑯ 標題對齊統一 —— 已撤除（2026-08-03）。
   實測那 102 個「置中」的 codex-a-h2 多數是卡片編號（aboutus 的「01」「02」）
   與區塊標題，不是文章段落標題；強制靠左會破壞版面。
   文章段落標題的 383 個本來就已經是靠左且一致。 */

/* ⑰ 醫師介紹上方留白（Dennis 指定）：桌機 80px、手機 40px
   原本 36px（來自區塊通用值）對這個元件太窄。
   ⚠️ 斷點用 820px —— codex 全站都用這個，用 767px 會出現兩套斷點打架。
   ⚠️ 用 !important：codex 對這個元件的 padding 另有來源（含 clamp 與多層斷點），
      對齊到四層選擇器仍蓋不過，實測值一直停在 36px。 */
.codex-rewrite .inner-content section.codex-doctor-section{padding-top:80px!important}
@media (max-width:820px){
  .codex-rewrite .inner-content section.codex-doctor-section{padding-top:40px!important}
}

/* ⑲ equipment 頁設備卡一排兩個（Dennis 2026-08-04 指認）。
   卡片本來就是 col-md-6＝原設計兩欄；rebuild 只載 codex 四支 CSS、沒有 bootstrap 網格，
   欄類別沒人實作而塌成一欄。inner.css 有補償規則但寫錯層（把每『欄』當成兩欄格，
   實際 DOM 是一卡一欄 → 每卡半寬孤行）。正解：列做成兩欄格、欄回歸格子項。
   :has(≥2欄) 守門——單卡的 showcase（NextDent）維持整寬，不硬拆半。
   特異性墊高＋!important：要贏過 inner.css 的 (0,8,1)+!important 那組 */
body.codex-rewrite.equipment-page.equipment-page .inner-content .codex-equipment-showcase > .fg-container > .fg-row:has(> .fg-col:nth-child(2)){
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;
}
body.codex-rewrite.equipment-page.equipment-page .inner-content .codex-equipment-showcase > .fg-container > .fg-row > .fg-col.col-md-6{
  display:block!important;grid-column:auto!important;width:auto!important;max-width:none!important;
}
@media (max-width:820px){
  body.codex-rewrite.equipment-page.equipment-page .inner-content .codex-equipment-showcase > .fg-container > .fg-row:has(> .fg-col:nth-child(2)){
    grid-template-columns:1fr;gap:16px;
  }
}
/* (28) ⑲ 的單卡補充：inner.css 殘規則把單卡列做成 12 格 grid、col-md-6 只吃 1 格塌成 68px 細條（NextDent）。
   原站實測：列 block、卡半寬(50%)置左 → 照做；行動版 col-xs-12 全寬 */
body.codex-rewrite.equipment-page.equipment-page .inner-content .codex-equipment-showcase > .fg-container > .fg-row:not(:has(> .fg-col:nth-child(2))){
  display:block!important;
}
body.codex-rewrite.equipment-page.equipment-page .inner-content .codex-equipment-showcase > .fg-container > .fg-row:not(:has(> .fg-col:nth-child(2))) > .fg-col.col-md-6{
  display:block!important;width:50%!important;max-width:none!important;
}
@media (max-width:820px){
  body.codex-rewrite.equipment-page.equipment-page .inner-content .codex-equipment-showcase > .fg-container > .fg-row:not(:has(> .fg-col:nth-child(2))) > .fg-col.col-md-6{
    width:100%!important;
  }
}

/* ⑳ 已移除（2026-08-04 深夜）：3d 頁 bootstrap 網格補丁是給舊 codex 版救急的，
   重組版內容用 a3d-*；補丁留著反而強制套到共用頁尾區塊的 col 上把版面擠壞（Dennis 驗收第⑭條）。 */

/* ㉑ 3D 數位植牙到達頁重組版 v3（2026-08-04 深夜，依 Dennis 14 條驗收重做：
   內容逐段判讀後輸出——眉標/主標拆分、FAQ 問答切分、優勢編號卡、流程五步、桌機/手機成對圖互藏） */
body[class~="3d-digital-implantation-page"] .a3d-sec{padding:56px 15px}
body[class~="3d-digital-implantation-page"] .a3d-sec.a3d-has-bg{margin-left:-15px;margin-right:-15px}
body[class~="3d-digital-implantation-page"] .a3d-in{max-width:1140px;margin:0 auto}
body[class~="3d-digital-implantation-page"] .a3d-row.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;align-items:start;margin:18px 0}
body[class~="3d-digital-implantation-page"] .sp-1{grid-column:span 1}
body[class~="3d-digital-implantation-page"] .sp-2{grid-column:span 2}
body[class~="3d-digital-implantation-page"] .sp-3{grid-column:span 3}
body[class~="3d-digital-implantation-page"] .sp-4{grid-column:span 4}
body[class~="3d-digital-implantation-page"] .sp-5{grid-column:span 5}
body[class~="3d-digital-implantation-page"] .sp-6{grid-column:span 6}
body[class~="3d-digital-implantation-page"] .sp-7{grid-column:span 7}
body[class~="3d-digital-implantation-page"] .sp-8{grid-column:span 8}
body[class~="3d-digital-implantation-page"] .sp-9{grid-column:span 9}
body[class~="3d-digital-implantation-page"] .sp-10{grid-column:span 10}
body[class~="3d-digital-implantation-page"] .sp-11{grid-column:span 11}
body[class~="3d-digital-implantation-page"] .sp-12{grid-column:span 12}
body[class~="3d-digital-implantation-page"] .a3d-sec img{max-width:100%;height:auto;display:block;margin:0 auto}
body[class~="3d-digital-implantation-page"] .a3d-cell>p{margin-top:.6em}
/* 標題體系：眉標（金）＋主標（粗黑）；!important 是為了壓過 inner.css 的 clamp 泛用規則 */
body[class~="3d-digital-implantation-page"] .a3d-kicker{font-size:15px;font-weight:600;letter-spacing:.12em;color:rgb(178,132,72);margin:0 0 8px}
body[class~="3d-digital-implantation-page"] .a3d-h2{font-size:27px!important;font-weight:700;color:#2c2825;line-height:1.5;margin:0 0 18px;padding:0!important;background:none!important;border:none!important}
body[class~="3d-digital-implantation-page"] .a3d-h3{font-size:21px!important;font-weight:700;color:#2c2825;margin:1.6em 0 .6em;padding:0!important;background:none!important}
body[class~="3d-digital-implantation-page"] .a3d-center{text-align:center}
/* hero：照原站實測值——H1「DIGITAL IMPLANT」70px 白 uppercase 頂部、中文副標 19px/400 底部、46% 起 */
body[class~="3d-digital-implantation-page"] .a3d-hero{min-height:600px;padding:40px 15px}
body[class~="3d-digital-implantation-page"] .a3d-hero .a3d-in{width:100%;max-width:none;height:520px;display:flex;flex-direction:column;padding-left:46%}
body[class~="3d-digital-implantation-page"] .a3d-hero .a3d-hero-en{white-space:nowrap}
body[class~="3d-digital-implantation-page"] .a3d-hero .a3d-hero-en{font-size:70px!important;font-weight:700;line-height:1!important;color:#fff;text-transform:uppercase;margin:0;padding:0!important;background:none!important;border:none!important}
body[class~="3d-digital-implantation-page"] .a3d-hero .a3d-hero-sub{font-size:19px!important;font-weight:400;letter-spacing:1.2px;color:#333;margin:auto 0 30px}
/* FAQ 問答 */
body[class~="3d-digital-implantation-page"] .a3d-q{font-weight:700;font-size:18px;color:#2c2825;margin:1.5em 0 .35em;padding-left:12px;border-left:3px solid rgba(200,154,91,.75)}
body[class~="3d-digital-implantation-page"] .a3d-a{margin:0 0 1em;color:#3b3632}
/* 優勢編號卡 ×4 */
body[class~="3d-digital-implantation-page"] .a3d-adv-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:26px 0}
body[class~="3d-digital-implantation-page"] .a3d-adv{background:#fff;border-radius:8px;padding:0 0 16px;text-align:center;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.07)}
body[class~="3d-digital-implantation-page"] .a3d-adv img{width:100%;margin:0 0 12px}
body[class~="3d-digital-implantation-page"] .a3d-adv-num{display:block;font-size:26px;font-weight:700;color:rgb(200,154,91);margin:2px 0 4px}
body[class~="3d-digital-implantation-page"] .a3d-adv-t{font-weight:600;padding:0 12px;margin:0}
/* 手術流程五步 */
body[class~="3d-digital-implantation-page"] .a3d-steps{display:flex;gap:26px;justify-content:center;align-items:flex-start;margin:30px 0 6px}
body[class~="3d-digital-implantation-page"] .a3d-step{flex:1;max-width:200px;text-align:center}
body[class~="3d-digital-implantation-page"] .a3d-step img{width:100%;max-width:200px;margin:0 auto 12px}
body[class~="3d-digital-implantation-page"] .a3d-step-label{font-weight:600;font-size:16px;margin:0}
/* 灰色標題條 GIF：原尺寸置中，不撐滿 */
body[class~="3d-digital-implantation-page"] .a3d-strip{margin:30px auto 14px}
/* V.S. 對照條（5/2/5 欄）文字置中壓灰 */
body[class~="3d-digital-implantation-page"] .a3d-row .a3d-cell>p:only-child{text-align:center;color:#6b645d;font-size:15px}
/* 活動花絮／標章牆：等高整齊 */
body[class~="3d-digital-implantation-page"] .a3d-imgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}
body[class~="3d-digital-implantation-page"] .a3d-imgs img{width:100%;height:210px;object-fit:cover}
/* 桌機／手機成對圖互藏 */
body[class~="3d-digital-implantation-page"] .a3d-sec img.a3d-mb{display:none}
/* 滿版帶（全口規劃 01-banner／導引式 02-banner，含名人推薦後那次＝原站本來就重複出現） */
body[class~="3d-digital-implantation-page"] .a3d-s2,
body[class~="3d-digital-implantation-page"] .a3d-s4,
body[class~="3d-digital-implantation-page"] .a3d-s8{padding:0;margin-left:-15px;margin-right:-15px}
body[class~="3d-digital-implantation-page"] .a3d-s2 .a3d-in,
body[class~="3d-digital-implantation-page"] .a3d-s4 .a3d-in,
body[class~="3d-digital-implantation-page"] .a3d-s8 .a3d-in{max-width:none}
body[class~="3d-digital-implantation-page"] .a3d-s2 img,
body[class~="3d-digital-implantation-page"] .a3d-s4 img,
body[class~="3d-digital-implantation-page"] .a3d-s8 img{width:100%}
/* 純底圖展示帶 */
body[class~="3d-digital-implantation-page"] .a3d-s3{min-height:820px;display:flex;align-items:flex-end}
@media (max-width:820px){
  body[class~="3d-digital-implantation-page"] .a3d-row.grid12>[class*="sp-"]{grid-column:span 12}
  body[class~="3d-digital-implantation-page"] .a3d-row.grid12>.sp-1,
  body[class~="3d-digital-implantation-page"] .a3d-row.grid12>.sp-2,
  body[class~="3d-digital-implantation-page"] .a3d-row.grid12>.sp-3,
  body[class~="3d-digital-implantation-page"] .a3d-row.grid12>.sp-4{grid-column:span 6}
  body[class~="3d-digital-implantation-page"] .a3d-sec img.a3d-mb{display:block}
  body[class~="3d-digital-implantation-page"] .a3d-sec img.a3d-dt{display:none}
  body[class~="3d-digital-implantation-page"] .a3d-adv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[class~="3d-digital-implantation-page"] .a3d-steps{flex-wrap:wrap}
  body[class~="3d-digital-implantation-page"] .a3d-step{flex:0 0 40%}
  body[class~="3d-digital-implantation-page"] .a3d-imgs{grid-template-columns:repeat(3,minmax(0,1fr))}
  body[class~="3d-digital-implantation-page"] .a3d-imgs img{height:140px}
  body[class~="3d-digital-implantation-page"] .a3d-hero .a3d-cell>p{font-size:24px}
  body[class~="3d-digital-implantation-page"] .a3d-sec{padding:32px 15px}
}

/* 三輪回饋批（⑯⑰⑱⑲㉑(22)) */
body[class~="3d-digital-implantation-page"] .a3d-kicker{margin:0 0 8px!important}
body[class~="3d-digital-implantation-page"] .a3d-kicker+.a3d-h2{margin-top:0!important}
body[class~="3d-digital-implantation-page"] .a3d-sec .a3d-in{text-align:left}
body[class~="3d-digital-implantation-page"] .a3d-sec .a3d-in p{font-size:18px;line-height:1.8;color:#333}
body[class~="3d-digital-implantation-page"] .a3d-strip{margin:30px 0 14px}
body[class~="3d-digital-implantation-page"] .a3d-s7 .a3d-imgs{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
body[class~="3d-digital-implantation-page"] .a3d-s7 .a3d-imgs img{height:auto}
body[class~="3d-digital-implantation-page"] .a3d-q{border-left:none;background:rgba(200,154,91,.10);border-radius:6px;padding:10px 16px}
body[class~="3d-digital-implantation-page"] .a3d-s12{background:rgb(247,248,250)!important}
body[class~="3d-digital-implantation-page"] .a3d-sub{font-size:17px!important;font-weight:700;color:rgb(178,132,72);margin:1.6em 0 .4em;padding:0!important;background:none!important}
body[class~="3d-digital-implantation-page"] .a3d-h3{font-weight:700!important}
@media (max-width:820px){
  body[class~="3d-digital-implantation-page"] .a3d-hero .a3d-in{padding-left:6%}
  body[class~="3d-digital-implantation-page"] .a3d-hero .a3d-hero-en{font-size:38px!important}
}

/* ㉒-cat 分類列表頁（rebuild 自產，修選單 404） */
/* (31)(32) 一日微創（Dennis 五輪）：董哥標題與患者引言照原站＝深字置中直接壓區塊背景。
   收掉 codex-content-heading 的頁面型盒樣式（米色漸層帶＝h2 自己的 background-image、
   金線 stub＝border-left），原站這兩處都沒有；下方「院長談…」金線標題原站本來就有、不動 */
/* inner.css 的「Final article H2 treatment」是 (0,6,1)+!important，ffb-id 疊五層拉到 (0,7,0) 反超 */
.codex-rewrite .inner-content .ffb-id-7qlcqoh7.ffb-id-7qlcqoh7.ffb-id-7qlcqoh7.ffb-id-7qlcqoh7.ffb-id-7qlcqoh7,
.codex-rewrite .inner-content .ffb-id-7qqkrb76.ffb-id-7qqkrb76.ffb-id-7qqkrb76.ffb-id-7qqkrb76.ffb-id-7qqkrb76{
  background:none!important;border:0!important;padding:0!important;
}
/* (31) 同頁 1.2.3.4. 條列行距對原站（原站 15px、rebuild 通則 28px 太鬆）；組裝時只對本頁上標 */
.codex-rewrite .inner-content p.codex-num-item{margin-bottom:15px!important}

/* (33)(34) 分類頁限寬：catgrid 原本直接躺在無上限的 .container 撐滿視窗（~1900px），
   全部內容包進 a3d-in 收回 1140（比照全站內容寬）。樣板一次修、10 頁全解 */
.codex-rewrite.category-page .a3d-in{max-width:1140px;margin:0 auto}
/* (33)② 子分類選單 chips：樹序、當前分類高亮（金 #c89a5b＝站上既有色票） */
.codex-rewrite.category-page .a3d-catnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.codex-rewrite.category-page .a3d-catchip{display:inline-block;padding:6px 16px;border:1px solid #ddd6c9;border-radius:999px;font-size:14px;line-height:1.6;color:#555;text-decoration:none;transition:border-color .15s,color .15s}
.codex-rewrite.category-page .a3d-catchip:hover{border-color:#c89a5b;color:#c89a5b}
.codex-rewrite.category-page .a3d-catchip.is-current{background:#c89a5b;border-color:#c89a5b;color:#fff}
.codex-rewrite.category-page .a3d-cat-title{font-size:26px;font-weight:700;color:#2c2825;margin:10px 0 26px}
.codex-rewrite.category-page .a3d-catgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0 0 40px}
.codex-rewrite.category-page .a3d-catcard{display:block;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.07);text-decoration:none;color:#2c2825}
.codex-rewrite.category-page .a3d-catcard img{width:100%;height:200px;object-fit:cover;display:block}
.codex-rewrite.category-page .a3d-catcard-ph{display:block;width:100%;height:80px;background:linear-gradient(135deg,rgba(200,154,91,.15),rgba(200,154,91,.05))}
.codex-rewrite.category-page .a3d-catcard h3{font-size:17px;font-weight:600;line-height:1.5;margin:0;padding:14px 16px 16px}
.codex-rewrite.category-page .a3d-catcard:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}
@media (max-width:820px){.codex-rewrite.category-page .a3d-catgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* (29) 認證頁輪播直式獎狀不裁切：格高固定下用 contain 完整顯示（橫式留白可接受） */
/* (35) 認證頁輪播：①「輪播牆全寬」通則對這頁收回（Dennis 五輪回饋），容器限回 1140 置中；
   ②裁切修在容器層——item/wrapper 固定高 300 把直式獎狀裁掉（(29) 只改 img object-fit 沒解），
   高度全放開讓每張圖原比例完整呈現。原站實測標準：輪播內容寬 1200、證書 3 張一排、item 高 563 不裁 */
body[class~="clinic-dental-implant-certification-page"] .inner-main :is(.post-content,.codex-generic-content) > section.codex-carousel-section{
  margin-left:0;margin-right:0;
}
body[class~="clinic-dental-implant-certification-page"] .inner-main .codex-carousel-section > .fg-container,
body[class~="clinic-dental-implant-certification-page"] .inner-main .codex-carousel-section .fg-container-fluid{
  max-width:1140px;width:100%;margin-inline:auto;
}
/* 高度鎖來源＝inner.css「.codex-rewrite .inner-content .codex-carousel-section .ff-one-owl-carousel > .item」
   clamp(220,22vw,300)!important，特異性 (0,5,0)——這裡必須帶上 .codex-carousel-section 反超成 (0,5,1) */
body[class~="clinic-dental-implant-certification-page"] .inner-content .codex-carousel-section .ff-one-owl-carousel{height:auto!important}
body[class~="clinic-dental-implant-certification-page"] .inner-content .codex-carousel-section .ff-one-owl-carousel > .item{
  min-height:0!important;height:auto!important;
}
body[class~="clinic-dental-implant-certification-page"] .inner-content .codex-carousel-section .ff-one-owl-carousel > .item > .fg-wrapper,
body[class~="clinic-dental-implant-certification-page"] .inner-content .codex-carousel-section .ff-one-owl-carousel > .item > .fg-wrapper .fg-bg,
body[class~="clinic-dental-implant-certification-page"] .inner-content .codex-carousel-section .ff-one-owl-carousel > .item > .fg-wrapper .fg-bg-layer{
  min-height:0!important;height:auto!important;
}
body[class~="clinic-dental-implant-certification-page"] .codex-carousel-section img{object-fit:contain;background:#fff;width:100%;height:auto!important}
/* (27) waterlase 共用區塊在 3D 頁（.a3d 結構）也貼齊兩側 */
.codex-rewrite .inner-main .inner-content > section.codex-a-waterlase{margin-left:-15px;margin-right:-15px}

/* ═══ ⑱ 文章頁統一層（body.codex-article 由組裝標記，只有 94 篇文章有）═══
   2026-08-04 全站 1600px 實掃發現：本檔多條規則在桌機根本沒生效——codex 舊層
   用 clamp()＋更高特異性蓋過（h2 實測 27px 非 24px、內距 8/9 非 12/8、底色區塊
   42/76～80/76 非 36/36）。之前在 606px 手機佈局下驗證所以沒發現。
   這一層用 body 類別鎖定文章頁（頁面型不受影響），並以 !important 作最終定義；
   行動版一律在 820px 斷點另給值（codex 全站斷點，不要用 767）。 */

/* 標題階層（Dennis #5 字級縮小＋上下視覺對稱、#10 全站文章同一套）
   ⚠️ codex-article 重複五次不是手滑：inner.css 的「Final article H2 treatment」是
   六個 class 的選擇器（….codex-generic-content .codex-prose-section:not(…) h2.codex-content-heading）
   加 !important，特異性 (0,6,1)。這裡墊到 (0,7,1) 才壓得過；少一層就回到 27px。 */
body.codex-article.codex-article.codex-article.codex-article.codex-article .inner-content h2.codex-a-h2{
  font-size:24px!important;padding-top:12px!important;padding-bottom:8px!important;
}
body.codex-article.codex-article.codex-article.codex-article.codex-article .inner-content h3.codex-a-h3{
  font-size:19px!important;  /* 實測 79 個 h3 是 27px＝跟 h2 同大，階層讀不出來 */
}
body.codex-article.codex-article.codex-article.codex-article.codex-article .inner-content h4.codex-a-h4{font-size:17px!important}

/* ── 逐篇語意標記的樣式（94 篇逐篇讀懂後標的，見 rebuild/article_semantics.json）──
   設計語彙沿用 codex 的金色 rgb(200,154,91)；刻意都很節制，內容才是主角 */
/* 前言導言段：份量略高於內文，收住開場（重複墊特異性＋!important：codex 段落規則會壓過） */
body.codex-article.codex-article.codex-article .inner-content p.codex-a-lead{
  font-size:19px!important;line-height:1.9!important;color:#3b3632;
}
/* 注意事項／警語／術後提醒：淺金底細左線的提示框 */
body.codex-article .inner-content p.codex-a-note,
body.codex-article .inner-content ul.codex-a-note,
body.codex-article .inner-content ol.codex-a-note{
  background:rgba(200,154,91,.08);border-left:3px solid rgba(200,154,91,.6);
  padding:14px 18px 14px 20px;border-radius:0 4px 4px 0;margin:1.2em 0;
}
body.codex-article .inner-content ul.codex-a-note{padding-left:2.4em}
/* 有先後順序的流程：圓點換成序號。
   不綁 .ff-richtext——實測有 steps 清單在它外面，綁了整條規則就掛不上 */
body.codex-article .inner-content ul.codex-a-steps{
  counter-reset:step;list-style:none;padding-left:2em;margin-bottom:1.1em;
}
body.codex-article .inner-content ul.codex-a-steps>li{position:relative;margin-bottom:.55em}
body.codex-article .inner-content ul.codex-a-steps>li::before{
  counter-increment:step;content:counter(step);
  position:absolute;width:1.45em;height:1.45em;border-radius:50%;background:rgba(200,154,91,.16);
  color:rgb(160,116,58);font-size:.78em;font-weight:700;line-height:1.45em;text-align:center;
  left:-1.9em;top:.3em;opacity:1;
}
/* 問答：問句粗體帶金色 Q 感，答句緊跟 */
body.codex-article .inner-content p.codex-a-faq-q{
  font-weight:700;color:#2c2825;margin-top:1.5em;margin-bottom:.3em;
}
body.codex-article .inner-content p.codex-a-faq-a{margin-top:0}
/* 重點結論：字重提起來，不加花 */
body.codex-article .inner-content p.codex-a-highlight{font-weight:600;color:#2c2825}
/* 行動呼籲（文末預約）：置一條淺線上方，跟內文收個尾 */
body.codex-article .inner-content p.codex-a-cta{
  font-weight:600;border-top:1px solid rgba(59,54,50,.12);padding-top:1.1em;margin-top:1.6em;
}
/* 資料來源／參考：小字灰 */
body.codex-article .inner-content p.codex-a-ref{font-size:13px;color:#8a827a}
/* 患者心得／引言 */
body.codex-article .inner-content p.codex-a-quote,
body.codex-article .inner-content blockquote.codex-a-quote{
  padding-left:16px;border-left:3px solid rgba(59,54,50,.18);color:#6b645d;
}

/* 有底色區塊上下對稱（Dennis #4）。實測不對稱的兩族：
   42/76（33 處，文章中段灰底特色區）→ 78/78 對齊「優勢區塊」的現值；
   醫師介紹 80/76 → 80/80（80 是 Dennis 指定的上方留白，下方補齊）。
   排除醫師區塊（它有自己的 80）；優勢區塊本來就 78/78，此規則等值覆蓋無視覺變化 */
body.codex-article .inner-content :is(.post-content,.codex-generic-content) > section.fg-el-has-bg:not(.codex-doctor-section){
  padding-top:78px!important;padding-bottom:78px!important;
}
body.codex-article .inner-content section.codex-doctor-section{padding-bottom:80px!important}
/* 頁面型也有同兩族不對稱（42/76 灰底特色區 18 處、醫師介紹 80/76 共 21 處）。
   排除 team／aboutus／equipment：那三頁的醫師卡是 80/36 堆疊節奏（Dennis #12 還要求 team 減白），
   不能套 80/80。灰底特色區加 .codex-prose-section 限定，避免掃到 aboutus 自己的 36/36 條帶 */
body.codex-rewrite:not(.codex-article):not(.team-page):not(.aboutus-page):not(.equipment-page) .inner-content :is(.post-content,.codex-generic-content) > section.fg-el-has-bg.codex-prose-section:not(.codex-doctor-section){
  padding-top:78px!important;padding-bottom:78px!important;
}
body.codex-rewrite:not(.codex-article):not(.team-page):not(.aboutus-page):not(.equipment-page) .inner-content section.codex-doctor-section{padding-bottom:80px!important}
@media (max-width:820px){
  body.codex-article .inner-content :is(.post-content,.codex-generic-content) > section.fg-el-has-bg:not(.codex-doctor-section){
    padding-top:40px!important;padding-bottom:40px!important;
  }
  body.codex-article .inner-content section.codex-doctor-section{padding-bottom:40px!important}
  body.codex-rewrite:not(.codex-article):not(.team-page):not(.aboutus-page):not(.equipment-page) .inner-content :is(.post-content,.codex-generic-content) > section.fg-el-has-bg.codex-prose-section:not(.codex-doctor-section){
    padding-top:40px!important;padding-bottom:40px!important;
  }
  body.codex-rewrite:not(.codex-article):not(.team-page):not(.aboutus-page):not(.equipment-page) .inner-content section.codex-doctor-section{padding-bottom:40px!important}
}
/* (36) 聯絡區白帶：inner.css:3726 對 .codex-contact-module 加 margin-top:clamp(36px,4vw,56px)!important，
   滿版輪播與聯絡區之間出現白帶（Dennis DevTools 抓的元凶）。蓋回 0；無輪播頁的呼吸空間由前一區塊自身 padding-bottom 提供 */
body.codex-rewrite .inner-content .codex-contact-module{margin-top:0!important}
/* (37) 麵包屑全站統一緊湊：equipment 等頁族被頁內嵌樣式套上下 64px（Dennis DevTools 抓的），
   麵包屑本來就該緊（④ 原則），全站收 8px */
body.codex-rewrite .inner-main .codex-breadcrumb-section{padding-block:8px!important}

/* ============================================================
   ㉒ 08-06 站根驗收批（Dennis 逐張指示）— 3D 頁 #3#4#5
   #3 hero 兩行照原站鎖成一組在左下（原站截圖實證：EN+中文緊貼、
      皆白字帶陰影；先前「EN頂/中文底」拆兩截＝誤讀）
   #4 灰標題條 GIF、#5 Q&A 徽章靠左（margin:0 auto 通則害的；
      標題類小圖 Dennis 拍板一律靠左）
   ============================================================ */
body[class~="3d-digital-implantation-page"] .a3d-hero .a3d-in{justify-content:flex-end}
body[class~="3d-digital-implantation-page"] .a3d-hero .a3d-hero-en{
  margin:0;text-shadow:0 2px 12px rgba(0,0,0,.35);
}
body[class~="3d-digital-implantation-page"] .a3d-hero .a3d-hero-sub{
  margin:8px 0 72px;color:#fff!important;text-shadow:0 1px 8px rgba(0,0,0,.4);
}
body[class~="3d-digital-implantation-page"] .inner-content .a3d-in > img{
  margin-left:0!important;
}

/* ㉓ #9 微創舒眠植牙：fg-row 12格grid但欄無 span 規則→col-md-10 佔1格(24px)一字一行。
   照 bootstrap 語意補 span（本頁實際用到 2/5/6/7/10/12），頁級鎖定不外溢 */
body[class~="%e5%be%ae%e5%89%b5%e8%88%92%e7%9c%a0%e6%a4%8d%e7%89%99-page"] .inner-content .fg-row{
  grid-template-columns:repeat(12,1fr)!important;
}
body[class~="%e5%be%ae%e5%89%b5%e8%88%92%e7%9c%a0%e6%a4%8d%e7%89%99-page"] .inner-content .fg-row > .col-md-2{grid-column:span 2}
body[class~="%e5%be%ae%e5%89%b5%e8%88%92%e7%9c%a0%e6%a4%8d%e7%89%99-page"] .inner-content .fg-row > .col-md-5{grid-column:span 5}
body[class~="%e5%be%ae%e5%89%b5%e8%88%92%e7%9c%a0%e6%a4%8d%e7%89%99-page"] .inner-content .fg-row > .col-md-6{grid-column:span 6}
body[class~="%e5%be%ae%e5%89%b5%e8%88%92%e7%9c%a0%e6%a4%8d%e7%89%99-page"] .inner-content .fg-row > .col-md-7{grid-column:span 7}
body[class~="%e5%be%ae%e5%89%b5%e8%88%92%e7%9c%a0%e6%a4%8d%e7%89%99-page"] .inner-content .fg-row > .col-md-10{grid-column:span 10}
body[class~="%e5%be%ae%e5%89%b5%e8%88%92%e7%9c%a0%e6%a4%8d%e7%89%99-page"] .inner-content .fg-row > .col-md-12{grid-column:span 12}
@media (max-width:820px){
  body[class~="%e5%be%ae%e5%89%b5%e8%88%92%e7%9c%a0%e6%a4%8d%e7%89%99-page"] .inner-content .fg-row{grid-template-columns:1fr!important}
  body[class~="%e5%be%ae%e5%89%b5%e8%88%92%e7%9c%a0%e6%a4%8d%e7%89%99-page"] .inner-content .fg-row > [class*="col-md-"]{grid-column:auto}
}

/* ㉔ #9 續：流程列照原站緊湊化（原站實測：45px 深藍數字章+文字同行置中、列高70）。
   鎖定「md-2 數字欄 + md-10 文字欄」的列型 */
body[class~="%e5%be%ae%e5%89%b5%e8%88%92%e7%9c%a0%e6%a4%8d%e7%89%99-page"] .inner-content .fg-row:has(> .col-md-2 + .col-md-10){
  display:flex!important;align-items:center;gap:14px;margin-bottom:14px;
}
body[class~="%e5%be%ae%e5%89%b5%e8%88%92%e7%9c%a0%e6%a4%8d%e7%89%99-page"] .inner-content .fg-row:has(> .col-md-2 + .col-md-10) > .col-md-2{
  flex:0 0 46px;width:46px;height:46px!important;min-height:0!important;
  display:flex;align-items:center;justify-content:center;padding:0!important;border-radius:8px;
}
body[class~="%e5%be%ae%e5%89%b5%e8%88%92%e7%9c%a0%e6%a4%8d%e7%89%99-page"] .inner-content .fg-row:has(> .col-md-2 + .col-md-10) > .col-md-2 *{
  margin:0!important;padding:0!important;line-height:1!important;
}
body[class~="%e5%be%ae%e5%89%b5%e8%88%92%e7%9c%a0%e6%a4%8d%e7%89%99-page"] .inner-content .fg-row:has(> .col-md-2 + .col-md-10) > .col-md-10{
  flex:1;padding:0!important;height:auto!important;min-height:0!important;
}
body[class~="%e5%be%ae%e5%89%b5%e8%88%92%e7%9c%a0%e6%a4%8d%e7%89%99-page"] .inner-content .fg-row:has(> .col-md-2 + .col-md-10) > .col-md-10 p{
  margin:0!important;
}

/* ㉕ #6#7#8 一日微創植牙（Dennis 驗收批；原站實測值）*/
/* #7 引言區高度復原：原站 578px（清理時墊高被砍→249→cover 只裁到人臉、字壓臉難讀）*/
body[class~="%e4%b8%80%e6%97%a5%e5%be%ae%e5%89%b5%e6%a4%8d%e7%89%99-page"] .inner-content .ffb-id-7qqkph4i{
  min-height:578px;display:flex;flex-direction:column;justify-content:center;
}
/* #8 優勢數字章照原站：40px Georgia 斜體、深色置中、無金豎線（豎線=fg-heading 通用規則漏進來）*/
body[class~="%e4%b8%80%e6%97%a5%e5%be%ae%e5%89%b5%e6%a4%8d%e7%89%99-page"] .inner-content h3.fg-heading.text-center{
  border:0!important;padding-left:0!important;font-size:40px!important;
  font-family:Georgia,serif;font-style:italic;color:rgb(52,52,60)!important;text-align:center!important;
}
/* #6 圖片牆（no-gutter 列）間距一律 5px（Dennis 拍板全站圖牆 5px；原站 0 貼死）*/
body[class~="%e4%b8%80%e6%97%a5%e5%be%ae%e5%89%b5%e6%a4%8d%e7%89%99-page"] .inner-content .fg-row-no-gutter{
  gap:5px!important;margin-bottom:5px;
}
body[class~="%e4%b8%80%e6%97%a5%e5%be%ae%e5%89%b5%e6%a4%8d%e7%89%99-page"] .inner-content .fg-row-no-gutter > [class*="col-"]{padding:0!important}
body[class~="%e4%b8%80%e6%97%a5%e5%be%ae%e5%89%b5%e6%a4%8d%e7%89%99-page"] .inner-content .fg-row-no-gutter img{display:block;width:100%;margin:0!important}
/* ㉕ 補：數字在 span 層有自己的字級，h3 層 40px 蓋不到 */
body[class~="%e4%b8%80%e6%97%a5%e5%be%ae%e5%89%b5%e6%a4%8d%e7%89%99-page"] .inner-content h3.fg-heading.text-center span{
  font-size:40px!important;font-family:Georgia,serif;font-style:italic;color:rgb(52,52,60)!important;
}
/* ㉕ 補2：數字 h3 被 inline-block 縮寬（49px）→ 置中無效；照原站整組置中 */
body[class~="%e4%b8%80%e6%97%a5%e5%be%ae%e5%89%b5%e6%a4%8d%e7%89%99-page"] .inner-content h3.fg-heading.text-center{
  display:block!important;width:auto!important;
}
body[class~="%e4%b8%80%e6%97%a5%e5%be%ae%e5%89%b5%e6%a4%8d%e7%89%99-page"] .inner-content h3.fg-heading.text-center ~ p{
  text-align:center;
}

/* ㉖ #2 Waterlase 共用件統一（Dennis：「沒有真的統一」）：站根 10 個靜態頁的白卡金線版
   就地轉為拍板的平鋪灰帶版（值抄 clean.css codex-a-waterlase：bg 247,248,250、78/78（08-08 隨分級統一從 52 調整）、
   h2 29/1.4/.025 無金線+金色細底線、內文軟色 95,88,81/1.9）。.inner-content 疊寫墊比重 */
.codex-rewrite .inner-content.inner-content .fg-section:has([id^="he_weiWaterlase"]){
  background:rgb(247,248,250)!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;padding:78px 15px!important;margin:0 -15px!important;
}
.codex-rewrite .inner-content.inner-content .fg-section:has([id^="he_weiWaterlase"]) h2.codex-content-heading,
.codex-rewrite .inner-content.inner-content .fg-section:has([id^="he_weiWaterlase"]) .fg-heading{
  border:0!important;border-bottom:1px solid rgba(200,154,91,.28)!important;
  padding:0 0 13px 0!important;margin:0 0 22px!important;
  font-size:29px!important;line-height:1.4!important;letter-spacing:.025em!important;
  background:none!important;width:auto!important;display:block!important;
}
.codex-rewrite .inner-content.inner-content .fg-section:has([id^="he_weiWaterlase"]) p{
  color:rgb(95,88,81)!important;line-height:1.9!important;letter-spacing:.012em!important;
}
.codex-rewrite .inner-content.inner-content .fg-section:has([id^="he_weiWaterlase"]) img{
  border-radius:0!important;box-shadow:none!important;background:none!important;padding:0!important;
}
/* ㉖ 補：白卡樣式掛在內層 fg-* wrapper 不在 section 本體，一併殺平 */
.codex-rewrite .inner-content.inner-content .fg-section:has([id^="he_weiWaterlase"]) [class*="fg-"],
.codex-rewrite .inner-content.inner-content .fg-section:has([id^="he_weiWaterlase"]) [class*="col-"]{
  background:none!important;box-shadow:none!important;border-radius:0!important;border:0!important;
}

/* ============================================================
   ㉗ 70→90 優化批（08-06 修正：標題規則限縮進 .codex-prose-section）
   ⚠️ 第一版打 `.post-content h2/h3/h4` ＝把共用件也改了：優勢區「雅術牙醫優勢」
   從 34px 金色變 27px 深色、4 張卡片標題從白字變深色，深色底圖上整區看不見。
   實測依據：19 頁裡不在 .codex-prose-section 內的標題共 25 個，**100% 都是共用件**；
   真正的內文標題 56 個全在該容器內 → 限縮即可乾淨排除，不必逐個還原。
   ㉗ 70→90 優化批：19 個「內容性質＝衛教長文」頁面型套文章排版規範
   （Dennis 08-06 選 B：界定改用內容性質，不搬家但套同規則）
   限定 body.ac-longform（mark_longform.py 掛的），
   首頁／team／12 個功能頁完全不受影響——Dennis 明確排除
   目標值出處：rebuild/TYPO_AUDIT.md §7，與 clean.css v5 同一套
   ============================================================ */
body.ac-longform.ac-longform.ac-longform.ac-longform.ac-longform .inner-content .post-content .codex-prose-section:not(.fg-el-has-bg) h2{
  font-size:27px!important;font-weight:700!important;line-height:1.45!important;
  color:rgb(59,54,50)!important;letter-spacing:.035em!important;
  margin:52px 0 18px!important;padding:8px 0 9px!important;
  border:0!important;border-bottom:1px solid rgba(200,154,91,.28)!important;
  /* 建構器給頁面型 h2 的米色漸層帶＋左金線＝與文章頁 h2（金色細底線）兩種長相，
     本批統一收掉，只留金色細底線 */
  background:none!important;background-image:none!important;
  text-indent:0!important;
}
/* 共用件（優勢區「雅術牙醫優勢」34px 金字＋01-04 編號、Waterlase 灰帶、聯絡模組）
   維持自己的視覺語彙——全站單一來源，動了會全站分岔。刻意排除，非遺漏。*/
body.ac-longform.ac-longform.ac-longform.ac-longform.ac-longform .inner-content .post-content .codex-prose-section:not(.fg-el-has-bg) h3{
  font-size:21px!important;font-weight:700!important;line-height:1.5!important;
  color:rgb(59,54,50)!important;letter-spacing:.02em!important;
  margin:36px 0 12px!important;padding:0!important;border:0!important;
}
body.ac-longform.ac-longform.ac-longform.ac-longform.ac-longform .inner-content .post-content .codex-prose-section:not(.fg-el-has-bg) h4{
  font-size:18px!important;font-weight:700!important;line-height:1.7!important;
  color:rgb(95,88,81)!important;letter-spacing:.02em!important;
  margin:28px 0 8px!important;padding:0!important;border:0!important;
}
/* 內文段落：行高與段距收攏到站標準（實測這批有 3 種行高 × 4 種顏色 × 6 種段距）*/
/* ⚠️ 顏色只在「無底色的內文區」統一。第一版寫成打全部 p＋用 [class*="fg-bg"] 當保護，
   但優勢區容器實際是 `fg-el-has-bg`（含 has-bg 不含 fg-bg）＝保護沒生效，
   深色底圖上的白字被改成深色，整區看不見。改成正面表列只打 codex-prose-section。*/
/* 字級／行高／段距＝全部內文段落都要統一（限縮到 prose-section 會讓
   不在該容器內的段落失去 28px 段距——實測「❶意見回饋更具體」那組整個黏在一起）*/
body.ac-longform.ac-longform.ac-longform.ac-longform.ac-longform .inner-content .post-content p{
  font-size:18px!important;line-height:1.82!important;margin-bottom:28px!important;
}
/* 顏色只在無底色內文區統一（有底圖的區塊白字不能被改成深色）*/
body.ac-longform.ac-longform.ac-longform.ac-longform.ac-longform .inner-content .post-content .codex-prose-section:not(.fg-el-has-bg) p{
  color:rgb(74,69,64)!important;
}
/* 有底圖／深色底的區塊（優勢區、CTA 帶）一律不碰顏色 */
body.ac-longform.ac-longform.ac-longform.ac-longform.ac-longform .inner-content .post-content .fg-el-has-bg p,
body.ac-longform.ac-longform.ac-longform.ac-longform.ac-longform .inner-content .post-content .fg-text-light p{
  color:unset!important;
}
/* 圖說維持小字灰色，不被上面那條吃掉 */
body.ac-longform.ac-longform.ac-longform.ac-longform.ac-longform .inner-content .post-content p.codex-caption,
body.ac-longform.ac-longform.ac-longform.ac-longform.ac-longform .inner-content .post-content .fg-caption p{
  font-size:14px!important;line-height:1.7!important;color:rgb(138,130,122)!important;
  margin-bottom:18px!important;
}
/* 深色底區塊的白字段落不可被改成深色 */
body.ac-longform.ac-longform.ac-longform.ac-longform.ac-longform .inner-content .post-content .fg-text-light p,
body.ac-longform.ac-longform.ac-longform.ac-longform.ac-longform .inner-content .post-content [class*="fg-bg"] p{
  color:inherit!important;
}
/* 圖文距：與段距同節奏（原本建構器是 0＝圖貼文）*/
body.ac-longform.ac-longform.ac-longform.ac-longform.ac-longform .inner-content .post-content img:not([class*="icon"]){
  margin-top:28px!important;margin-bottom:28px!important;
}


/* ㉘ 08-06 補漏：頁面型的區塊內距統一（Dennis 回報「隨便看一頁就一個大空格」）
   盤點時量到靜態頁 section 內距 24 種（78/78、80/80、42/76、20/76…），
   連續無底色區塊疊起來就是 100~250px 的空白。
   修法與文章同：**相鄰且都無底色 → 內距歸零**，間距只由標題 margin 決定；
   有底色／底圖的區塊（優勢區、CTA）保留自己的呼吸空間，不動。*/
body.ac-longform.ac-longform.ac-longform.ac-longform.ac-longform .inner-content .post-content .codex-prose-section:not(.fg-el-has-bg){
  padding-top:0!important;padding-bottom:0!important;
}
/* 內文區與「有底色區塊」之間仍需要間隔，由後者自己的內距提供；
   另補一段：無底色區塊若是該欄第一個，頂部給 20px 收口 */
body.ac-longform.ac-longform.ac-longform.ac-longform.ac-longform .inner-content .post-content > .codex-prose-section:not(.fg-el-has-bg):first-child{
  padding-top:20px!important;
}
/* ⚠️ 這裡原本有一條「區塊末段 margin-bottom:0」的規則，已移除：
   `.fg-row:last-child p:last-child` 會打中幾乎每一個段落（建構器把每段各包一個 fg-paragraph，
   段落永遠是自己容器的 last-child）→ 全站段距被歸零，整組文字黏成一團。
   末段多吐的 28px 遠比這個副作用輕微，不值得修。*/

/* ㉙ 08-06：欄格塌陷（col-md-6 並排）修復
   症狀：Waterlase 等兩欄區塊塌成 47px 寬＝一字一行（微創舒眠植牙／水雷射微創植牙／信義-大安 共 3 頁 14 欄）
   真因：fg-row 是 12 格 grid，但 col-md-6 沒有對應的 span 規則；
   ⚠️ 既有 ㉓ 有寫 `grid-column:span 6`，實測**沒生效**（欄寬仍 47px），
   有效解是直接把該列改成 2 欄 1fr（實測欄寬 47→553px）。
   只打「所有子欄都是 col-md-6」的列，避免波及混合欄型的版面。
   ⚠️ 並排除 `fg-row-no-gutter`（圖牆）——實測套上去會把原站的 2 欄大圖擠小，
   圖牆有自己的版型規則（㉕ 拍板 gap 5px），不歸本規則管。*/
body.ac-longform.ac-longform.ac-longform.ac-longform.ac-longform .inner-content .fg-row:not([class*='no-gutter']):has(> .fg-col.col-md-6):not(:has(> .fg-col:not(.col-md-6))){
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
body.ac-longform.ac-longform.ac-longform.ac-longform.ac-longform .inner-content .fg-row:not([class*='no-gutter']):has(> .fg-col.col-md-6):not(:has(> .fg-col:not(.col-md-6))) > .fg-col.col-md-6{
  grid-column:auto!important;
}
@media (max-width:820px){
  body.ac-longform.ac-longform.ac-longform.ac-longform.ac-longform .inner-content .fg-row:not([class*='no-gutter']):has(> .fg-col.col-md-6):not(:has(> .fg-col:not(.col-md-6))){
    grid-template-columns:1fr!important;
  }
}

/* ㉚ 08-06：收乾淨 19 頁殘留的大空白（逐頁截圖＋純白帶掃描，19 處逐一看過後歸納）
   類型一（7 處）＝Waterlase 共用件內部：左欄文字底部殘留欄高
     （fg-wrapper 下內距 38 ＋ 段距 28 ＝ 66px 空轉）→ Dennis 第 5 點「收乾淨＝10 頁同時生效」
   類型二（9 處）＝圖片／列表區塊 → 下一個標題：區塊邊界內距疊在標題 margin 上（實測 150~170px，
     應為 80px＝圖距 28＋標題上距 52）
   類型三（3 處）＝醫師介紹後、輪播後的共用件間距 → **刻意不動**（Dennis 排除醫師介紹） */
body.ac-longform.ac-longform.ac-longform.ac-longform.ac-longform .inner-content .post-content .fg-section:has([id^="he_weiWaterlase"]) .fg-wrapper{
  padding-bottom:0!important;
}
/* 無底色的內容區塊：上下內距歸零，間距一律交給標題自身 margin（與文章那半同一套） */
body.ac-longform.ac-longform.ac-longform.ac-longform.ac-longform .inner-content .post-content .fg-section:not(.fg-el-has-bg):not(:has(> .fg-bg)):not(:has([id^="he_weiWaterlase"])){
  padding-top:0!important;padding-bottom:0!important;
}

/* ============================================================
   ㉗ 3d-digital-implantation 手工版逐條校正（2026-08-09 Dennis 選方案 B）
   Dennis 並排原站指出五項。這頁維持手工版（不重做），逐條對齊原站實測值。
   ⚠️ 這頁是全站唯一走 a3d-* 手工實作的頁面，之後全站規則調整**不會**自動套到它。
   ============================================================ */

/* ① hero「Digital implant」要陰影（原站白字壓在照片上仍清楚可讀）
   ⚠️ 原站的 hero 走 RevSlider，量不到 computed 值 → 陰影值是為了可讀性配的，
      不是抄來的。若 Dennis 覺得太重／太輕，直接調這一行。 */
body[class~="3d-digital-implantation-page"] .a3d-hero .a3d-hero-en{
  text-shadow:0 2px 10px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4)!important;
}
body[class~="3d-digital-implantation-page"] .a3d-hero .a3d-hero-sub{
  text-shadow:0 1px 6px rgba(255,255,255,.75)!important;
}

/* ② 內文段落：原站實測 24px/400/行高 35/**靠左**（現行 15px 置中，整頁感覺就不一樣） */
/* ⚠️ 段落字級**不照原站**（Dennis 08-10：「這種介紹頁面的文字不要呼大呼小」）。
   實測原站這一頁自己就有 **五種**段落字級：17/19/21/24/25px（各 2～34 段）。
   我第一版抄了其中一個（導言的 24px）套到全頁，反而把混亂放大——整頁變成大字，
   FAQ 答案又還是小字，對比更強烈。
   → 依「統一規則優先於照原站」統一成**全站標準 18px / 行高 1.8**，
     跟其他 124 篇同一個閱讀尺寸。V.S. 圖說（21px）與優勢卡（19px）是元件文字，保留。 */
body[class~="3d-digital-implantation-page"] .a3d-sec p:not(.a3d-adv-t):not(.a3d-q):not(.a3d-hero-sub):not(.a3d-kicker):not(.a3d-cap),
body[class~="3d-digital-implantation-page"] .a3d-sec .a3d-a,
body[class~="3d-digital-implantation-page"] .a3d-sec li{
  font-size:18px!important;line-height:1.8!important;text-align:left!important;
  color:rgb(52,52,60)!important;
}
/* ③ 區塊標題：原站實測 21px/300（現行 18px/600 太重也太小） */
body[class~="3d-digital-implantation-page"] .a3d-sec .a3d-h3{
  font-size:21px!important;font-weight:300!important;line-height:29px!important;
  color:rgb(52,52,60)!important;
}
/* ④ 四張優勢卡：原站實測 19px/400/置中、卡片 525 寬。
   現行字太小又硬斷行（「100%全數位／化」「傷口近乎無／創」尾字落單）→
   放大字級並用 text-wrap:balance 讓兩行字數平均，不再單字落尾。 */
body[class~="3d-digital-implantation-page"] .a3d-adv .a3d-adv-t{
  font-size:19px!important;line-height:30px!important;text-align:center!important;
  text-wrap:balance;word-break:keep-all;
}
/* ⑤ V.S. 對照圖的兩個圖說要在圖片正下方
   原站實測：圖說 21px/400/**置中**、圖片下緣到圖說 **0px（緊貼）**；
   現行是 14px/靠左、離圖片 258px。 */
body[class~="3d-digital-implantation-page"] .a3d-row.grid12:has(> .a3d-cell.sp-2){
  margin-top:0!important;
}
body[class~="3d-digital-implantation-page"] .a3d-row.grid12:has(> .a3d-cell.sp-2) .a3d-cell > p{
  font-size:21px!important;line-height:34px!important;text-align:center!important;
  color:rgb(52,52,60)!important;margin:0!important;
}
/* 圖說緊貼它說明的那張圖 */
body[class~="3d-digital-implantation-page"] .a3d-sec img + .a3d-row.grid12:has(> .a3d-cell.sp-2){
  margin-top:0!important;
}

/* ⑥ 補回的三支 YouTube（原站尺寸：960×540 一支、800×450 兩支）
   iframe 沒給樣式時會用 300×150 預設值，縮在左邊一小塊。 */
body[class~="3d-digital-implantation-page"] .a3d-video{
  margin:28px auto!important;max-width:960px;
}
body[class~="3d-digital-implantation-page"] .a3d-video iframe{
  display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;
}

/* ⑦ 流程標題膠囊靠左（Dennis：「這種不是要靠左嗎? 然後還有向下的箭頭」）
   原站實測：`1201-WEB-00X.gif`（5 張流程標題，400×122）**靠左**、margin-left 65px；
   `.a3d-sec img{margin:0 auto}` 把它們全推到置中（x 從 165 變成 440）。
   那組 gif 是動畫圖，膠囊下方的黃色向下箭頭就在動畫裡，位置回正後才看得對。
   ⚠️ 只鎖定這組檔名，不動同頁其他圖（如 1209-WEB-A0001.gif 原站本來就是置中）。 */
body[class~="3d-digital-implantation-page"] .a3d-sec img[src*="1201-WEB-00"]{
  margin-left:65px!important;margin-right:auto!important;
}

/* ⑧ 流程標題下的黃色雙 V 向下箭頭（Dennis：「然後還有向下的箭頭」）
   原站是 Font Awesome 的 `icon-angle-down`（`<i class="ffb-scrollto-icon ... icon-angle-down">`），
   包在「捲到下一段」的連結裡、放在左側一個 col-sm-2 的獨立欄位。
   手工版沒有那個左欄結構，且乾淨版不載 Font Awesome
   → **改用 SVG 重畫同樣的視覺**（顏色取原站的黃 #fdd900），純裝飾、不改 DOM。
   ⚠️ 這是重畫不是抄值：形狀與位置是照原站截圖對的，覺得大小或位置要調就改這一段。 */
/* ⚠️ 必須脫離文件流：第一版用 display:block ＋ margin 插在內容流裡，
   箭頭佔掉了垂直空間，把下面整個內容區往下推
   （Dennis：「我這個區塊應該要在上面一點，你現在因為往下箭頭被推下去了」）。
   原站的箭頭在左側獨立欄位，本來就不佔內容的垂直空間 → 改用絕對定位浮在左側。 */
body[class~="3d-digital-implantation-page"] .a3d-cell:has(> img[src*="1201-WEB-00"]),
body[class~="3d-digital-implantation-page"] .a3d-in:has(> img[src*="1201-WEB-00"]){
  position:relative;
}
body[class~="3d-digital-implantation-page"] .a3d-cell:has(> img[src*="1201-WEB-00"])::after,
body[class~="3d-digital-implantation-page"] .a3d-in:has(> img[src*="1201-WEB-00"])::after{
  content:"";position:absolute;left:78px;top:calc(100% + 18px);
  width:54px;height:62px;pointer-events:none;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='62' viewBox='0 0 54 62'%3E%3Cg fill='none' stroke='%23fdd900' stroke-width='10' stroke-linecap='square'%3E%3Cpath d='M5 7 L27 27 L49 7'/%3E%3Cpath d='M5 33 L27 53 L49 33'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
}

/* ⑨ 設備／案例圖的外框（原站實測：外層 col 有 1px solid rgba(128,128,128,.4)、圓角 3px、
   內層 wrapper padding 5px）。手工版把框丟了，三張設備照變成沒有邊界的散圖。 */
body[class~="3d-digital-implantation-page"] .a3d-cell:has(> img[src*="1201-WEB-A"]),
body[class~="3d-digital-implantation-page"] .a3d-cell:has(> img[src*="1201-WEB-B"]),
body[class~="3d-digital-implantation-page"] .a3d-cell:has(> img[src*="1201-WEB-D"]),
body[class~="3d-digital-implantation-page"] .a3d-cell:has(> img[src*="1201-WEB-E"]),
body[class~="3d-digital-implantation-page"] .a3d-cell:has(> img[src*="1201-WEB-Q"]),
body[class~="3d-digital-implantation-page"] .a3d-cell:has(> img[src*="1121-A0"]){
  border:1px solid rgba(128,128,128,.4)!important;border-radius:3px!important;padding:5px!important;
}

/* ⑩ 手機版斷點（Dennis：「然後手機版整個壞掉」）
   ⚠️ ⑦⑧ 的值是**桌機 1280 實測**，直接套到手機會壞：
   `margin-left:65px` 把 330 寬的標題膠囊推到 x=95（95+330=425 > 390 畫面寬）＝右邊被切掉；
   絕對定位的箭頭 left:78px 也跟著偏。
   原站手機實測：標題膠囊 x=15、margin-left **0**、寬度滿版 360。 */
@media (max-width:820px){
  body[class~="3d-digital-implantation-page"] .a3d-sec img[src*="1201-WEB-00"]{
    margin-left:0!important;margin-right:0!important;max-width:100%!important;
  }
  body[class~="3d-digital-implantation-page"] .a3d-cell:has(> img[src*="1201-WEB-00"])::after,
  body[class~="3d-digital-implantation-page"] .a3d-in:has(> img[src*="1201-WEB-00"])::after{
    left:8px;width:42px;height:48px;top:calc(100% + 12px);
  }
}

/* ============================================================
   ㉘ 手機版圖片被裁切（2026-08-10 Dennis：「手機版很多圖片被截掉」）
   全站 127 頁手機 390 掃描，真正被裁的只有兩處（第三處是證照卡輪播，
   橫向超出是輪播本來的設計，誤報）。
   ============================================================ */

/* ① 文章／案例列表縮圖：固定高 259.5px ＋ object-fit:cover
   → 1080×1350 的直圖被裁成 346×260，**裁掉 40%**，人像的臉常被切掉。
   原站實測：**不設 object-fit、高度自適應**，1080×1350 就顯示 358×448，
   每張依原比例、列表呈現高低參差。照原站改。 */
.ff-post-featured-image-link-wrapper img,
.ff-post-featured-image-wrapper img{
  height:auto!important;object-fit:initial!important;aspect-ratio:auto!important;
}

/* ② 3d 頁的照片牆：固定高 140px ＋ cover，
   800×600 的橫圖被壓成 102×140 的直式（1.33→0.73，裁掉 45%）。
   ⚠️ 這組圖橫式直式混用（800×600 與 600×800 都有）——
   施工檔早記過的教訓：**整組圖比例混用就不能釘尺寸**。改成依原比例。 */
@media (max-width:820px){
  body[class~="3d-digital-implantation-page"] .a3d-imgs img{
    height:auto!important;object-fit:initial!important;
  }
}

/* ============================================================
   ㉙ 首頁手機版圖片被裁（2026-08-10 Dennis：「客戶一看到首頁的手機版馬上就覺得不行」）
   三類元件在小螢幕被釘死比例＋object-fit:cover，圖一律被裁：
   ｜feature-card：`codex.css` 在 ≤600px 把比例設成 **1.35/1**，
   　 但設備圖是 **500×500 正方形** → 上下各裁掉 13%（就是「數位口內掃描器」那幾張）
   ｜badge：同一條規則，圖是 1200×1081(1.11)、1451×1088(1.33) → 也被裁
   ｜gallery--3：`home.css` 在 ≤991px 釘 **1/1**，
   　 但圖 450×610(0.74) 與 450×300(1.5) **橫直混用** → 兩種都被裁（26%～33%）
   修法：三類在小螢幕一律依原比例。載入順序 base→home→codex→refine，
   refine 最後載，同權重可蓋過前面。
   ⚠️ 又一次「整組圖比例混用就不能釘尺寸」——今天第四次撞到同一個病。
   ============================================================ */
@media (max-width:991px){
  body.home-page .feature-card img,
  body.home-page .badge img,
  body.home-page .gallery--3 img{
    aspect-ratio:auto!important;height:auto!important;object-fit:initial!important;
  }
}
/* 桌機版的 badge 是同一個病但**不能用同一種解法**：規則釘 333/300(1.11)，
   圖卻是 1451×1088(1.33) 與 800×1068(**0.75 直圖**) 混用 → 直圖被裁掉 37%。
   ⚠️ 第一版改成「依原比例」→ 圖是完整了，但三張並排高度不一、卡片下方留出大片空白，
   比原本更難看（桌機三欄並排時，**釘比例是為了讓卡片整齊**，那個設計是對的）。
   正解＝保留比例讓卡片等高，改用 contain 讓圖完整塞進去（留白在圖框內，不破壞版面）。
   手機是一欄、沒有對齊問題，維持上面的「依原比例」。
   （主視覺 hero 維持滿版裁切，那是 banner 的正常設計，不動。） */
@media (min-width:992px){
  body.home-page .badge img{
    object-fit:contain!important;background:#fff;
  }
}

/* ============================================================
   ㉚ 首頁手機版五項（2026-08-11 Dennis 逐項指出）
   首頁樣式本體在 codex-rewrite 的 base/home/codex 三支，
   這裡用最後載入的 refine.css 覆蓋，全部限縮 body.home-page。
   ============================================================ */

/* ① Banner 高度：原本用 vh 固定高（codex.css `height:64vh/58vh`），
   1920 寬時高度仍是 630 → 1920×999 的圖被上下裁 37%，照片裡的 logo 被卡掉。
   原站是**等比縮放**（1280→711、1920→1067、比例 1600/889≈1.8），完全不裁。
   三張輪播圖比例 1.922／2.017／1.690：容器用 1.8 時，前兩張「圖比容器寬」＝上下完整、
   只裁左右；第三張裁 6%（可接受）。 */
body.home-page .hero{
  aspect-ratio:1600/889!important;height:auto!important;min-height:0!important;
}

/* ② 醫師引言：照片要佔手機全寬（原本 .quote__photo img 釘死 202×282／188×264，
   手機斷點只加了置中沒改寬度 → 照片只佔一半）。手機改成上下排列、照片滿版。 */
@media (max-width:820px){
  body.home-page .quote__inner{display:block!important}
  body.home-page .quote__photo{width:100%!important;margin:0 0 20px!important}
  body.home-page .quote__photo img{
    width:100%!important;height:auto!important;max-width:none!important;object-fit:contain!important;
  }
}

/* ③ 照片牆改一欄全寬（Dennis：「不要都是 1/2」）。
   兩欄配「依原比例」會因為左右高度不一而參差留白；一欄則每張都完整且夠大。 */
@media (max-width:820px){
  body.home-page .gallery--3,
  body.home-page .gallery--4{
    grid-template-columns:1fr!important;grid-template-rows:none!important;
  }
  body.home-page .gallery--3 img,
  body.home-page .gallery--4 img{
    grid-column:auto!important;grid-row:auto!important;
    width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:initial!important;
  }
}

/* ④ photo-wall 手機每組四張（Dennis：「不要五張圖，四張就好」）。
   實測共 10 張、兩欄，x 座標 0,195,0,195,0,**0**,195,… ＝ 每 5 張一組排成 2+2+1，
   每組最後一列都空一格。隱藏每組第 5 張 → 兩組各 2×2，整齊。
   ⚠️ 這是**隱藏不是刪除**，圖仍在 HTML 裡，桌機照舊顯示 10 張。 */
@media (max-width:820px){
  body.home-page .photo-wall img:nth-of-type(5),
  body.home-page .photo-wall img:nth-of-type(10){display:none!important}
}

/* ⑤ 漢堡按鈕與 Header 高度
   按鈕：新版多了白底＋1px 邊框＋10px 圓角 → 看起來被一個框圈住（Dennis：「很怪」）。
        原站是**透明、無邊框**（.navbar-toggle 25×25、bg transparent、border 0）。
   Header：新版 86px，原站約 61px（toggle 上距 18＋高 25＋下距 18）→ 下方白色區域偏多。 */
@media (max-width:820px){
  body.home-page .nav-toggle,
  .codex-rewrite .site-header .nav-toggle{
    background:transparent!important;border:0!important;border-radius:0!important;
  }
  body.home-page .site-header{height:64px!important;min-height:0!important}
  body.home-page .site-header__inner{height:64px!important;min-height:0!important}
}