/* 療程頁少數補充樣式（批次 A：iontophoresis／incontinence／prplt／hyaluronan）。 * * 2026-09-06 整個改版：原本這支檔案要負責重現整頁版面（因為 markup 用的是自己發明的 * class），審核發現這樣視覺跟原站差太多。現在 treatment.njk／treatment-blocks.njk * 改成沿用原頁的 elementor-element- class、直接載入該頁專屬的 * post-.css（wp-content/uploads/elementor/css/），版面本身已經由那些 * CSS 負責，這支檔案只補兩種情況： * 1. 手風琴展開/收合的圖示——實測（見 static/wp-content/plugins/elementor/assets/css/ * widget-nested-accordion.min.css）Elementor 這裡用的是原生

的 * CSS attribute selector（.e-n-accordion-item[open] .e-opened{display:flex} * 這類規則），不是靠前端 JS 切 class，所以其實不需要任何補充 CSS，模板只要照抄 * 原頁的

/SVG 圖示 markup 就會動——這裡列出來是紀錄，不是 * 因為真的需要加規則。 * 2. `.t-treatment`：整頁最外層的保險絲——如果資料檔或原站樣式表有缺漏、某個 * elementor-element- 沒套到任何寬度/字體規則，至少不會整頁跑版。 * 3. `.t-block-divider`：分隔線區塊（原頁的 divider widget 目前四頁都沒實際用到， * 沒有原頁 ID 可抄，用一條陽春的

頂著）。 */ .t-treatment { max-width: 1200px; margin: 0 auto; padding: 0 20px; color: #3e3a39; font-family: "Noto Sans TC", "Noto Serif TC", sans-serif; line-height: 1.8; } .t-block-divider { border: none; border-top: 1px solid #e7e1de; margin: 20px 0; } @media (max-width: 600px) { .t-treatment { padding: 0 16px; } } /* 4. jet-table 的「手機版改成橫向捲動、儲存格文字不換行」——原本這個效果靠 * Elementor 前端 JS 動態幫掛 data-elementor-device-mode="mobile"， * jet-table.css 裡的規則（.jet-table-responsive-mobile 那組）是用這個屬性選擇器 * 才生效的屬性選擇器規則，這裡沒載那支 JS（紅線 2），這個 class 永遠踩不到樣式。 * 沒了它，jet-table 的 table-layout:fixed 會把儲存格硬壓進容器寬度，文字被迫 * 換行、每列高度暴增（2026-09-07 實測 prplt 手機版「常見疑問解答」那節的表格 * 因此多墊了 400px 以上，是手機版總高度超出原站 5% 的主因）。767px 是這個站 * kit 本身的手機斷點（跟 post-27562.css 的 media query 一致），用真的 CSS * media query 直接命中同一批 class，效果跟原站的 JS 版一樣，不需要載 JS。 * 照抄 jet-table.css 裡 `[data-elementor-device-mode="mobile"] .jet-table- * responsive-mobile` 那組規則，只是選擇器換成 media query。 */ @media (max-width: 767px) { .jet-table-responsive-mobile { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .jet-table-responsive-mobile .jet-table { display: block; width: auto; max-width: none; white-space: nowrap; -webkit-overflow-scrolling: touch !important; } }