/* 嘉誼首頁 opt2・疼痛問題之後各區的卡片系統(10-19 Eric:「之後的區塊按照目前卡片樣式跟他的角色,再做一次優化」)
   排在 find.css 後面。規則來自疼痛問題區定下的卡片系統(設計系統.md 第 7 節):
     ① 卡片不加框:只用底色分;只有深色底(綠/深綠)上的卡片才加白框(治療方式綠帶三張卡、門診狀態卡裡的膠囊照舊)
     ② 卡片比所在底色跳一階:米色底上 = 白卡;白卡裡面的小卡 = 淡綠 #E8EEEA
     ③ 狀態用填色分:切換鈕/頁籤 = 沒選 #D8D2C6 底+#505150 字、選中 #3B5348 白字;「現在」這種進行中狀態 = 客戶綠 #577A6E 白字
     ④ 提醒卡:比所在底色跳一階 + 磚紅標題前加圖示(緊急就醫才用淺粉紅)
     ⑤ 線只有兩種:淺底 #CECAC1、深底白 20 趴
   盤點(10-19,所有頁籤與收合打開量):有框的卡片 3 種(常見問題、週班表日卡、休診格)、切換鈕 2 組(常見問題分類、醫師篩選)白底綠框、
   白卡裡的小卡用米色(評論卡、班表時段)、公告用米黃 #FBF3E4、深底線白 16 趴、品牌故事線深綠 */

/* ── ③ 切換鈕:常見問題分類、醫師篩選(跟疼痛問題頁籤同一套顏色,形狀維持膠囊)── */
html body .o-center :is(.faq-tabs .tab, .df) { border: 0; background: #D8D2C6; color: #505150; transition: background-color .2s, color .2s; }
html body .o-center :is(.faq-tabs .tab, .df):hover { background: #D8D2C6; color: var(--c-green-dk); }
html body .o-center :is(.faq-tabs .tab.on, .df.on), html body .o-center :is(.faq-tabs .tab.on, .df.on):hover { background: var(--c-green); color: #fff; }   /* 10-24 Eric:「這個頁籤改成品牌綠」深綠 → 客戶綠(醫師篩選同元件一起) */
html body .o-center .faq-tabs .tab small { color: #96503C; }
html body .o-center .faq-tabs .tab.on small { color: #EAE5DA; }
html body .o-center .df.on .d { box-shadow: 0 0 0 2px #fff; }   /* 10-24 Eric:「班表選中的時候,吳的圓圈要有白框,要不然看不到」(選中鈕改客戶綠後,吳醫師的客戶綠圓圈融在一起);每位醫師選中時都加 */

/* ── ① 卡片不加框:常見問題、週班表的日卡 ── */
html body .o-center :is(.faq-i, .faq-i:hover, .faq-i[open], .day) { border-color: transparent; box-shadow: none; }

/* ── ② 白卡裡的小卡改淡綠:評論卡(在白色評論框裡)、班表時段(在白色日卡裡)── */
html body .o-center .rv-c figure { background: #E8EEEA; }
html body .o-center .day .sl:not(.sl-off) { background: #E8EEEA; }
/* 今天那一天:整張日卡淡綠、裡面的時段白(反過來),不加框 */
html body .o-center .day.today { background: #E8EEEA; border-color: transparent; box-shadow: none; }
html body .o-center .day.today .sl:not(.sl-off) { background: #fff; }
/* ③「現在」這一診(進行中):客戶綠、白字;裡面的「看診中」小標反白 */
html body .o-center .sl.now, html body .o-center .day.today .sl.now { background: var(--c-green); box-shadow: none; }
html body .o-center .sl.now :is(.sl-t, .sl-t small, .sl-d, .sl-n, .sl-n small, .sub-tag) { color: #fff; }
html body .o-center .sl.now .now-tag { background: #fff; color: var(--c-green-dk); }
/* 休診、停診的格子:不加虛線框,只留淡字 */
html body .o-center .sl-off { border: 0; background: transparent; }

/* ── ④ 門診公告:米黃 → 白卡(在米色底上跳一階)+ 磚紅「公告」前加廣播圖示
   (Font Awesome Free 6.5.2 solid/bullhorn,CC BY 4.0 by @fontawesome - https://fontawesome.com/license/free)── */
html body .o-center .hh-ann { padding: var(--s-5); border-radius: var(--r-card); background: #fff; color: #505150; font-size: var(--t-body); }
html body .o-center .hh-ann b { display: inline-flex; align-items: center; gap: var(--s-2); margin-right: var(--s-3); font-weight: 500; color: #96503C; }
html body .o-center .hh-ann b::before { content: ""; flex: none; width: 1em; height: 1em; background: currentColor; -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M480 32c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9L381.7 53c-48 48-113.1 75-181 75H192 160 64c-35.3 0-64 28.7-64 64v96c0 35.3 28.7 64 64 64l0 128c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32V352l8.7 0c67.9 0 133 27 181 75l43.6 43.6c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V300.4c18.6-8.8 32-32.5 32-60.4s-13.4-51.6-32-60.4V32zm-64 76.7V240 371.3C357.2 317.8 280.5 288 200.7 288H192V192h8.7c79.8 0 156.5-29.8 215.3-83.3z"/%3E%3C/svg%3E') center / contain no-repeat; mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M480 32c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9L381.7 53c-48 48-113.1 75-181 75H192 160 64c-35.3 0-64 28.7-64 64v96c0 35.3 28.7 64 64 64l0 128c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32V352l8.7 0c67.9 0 133 27 181 75l43.6 43.6c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V300.4c18.6-8.8 32-32.5 32-60.4s-13.4-51.6-32-60.4V32zm-64 76.7V240 371.3C357.2 317.8 280.5 288 200.7 288H192V192h8.7c79.8 0 156.5-29.8 215.3-83.3z"/%3E%3C/svg%3E') center / contain no-repeat; }

/* ── ⑤ 線:交通區(綠底)資訊列的分隔線白 16 → 20 趴;品牌故事右欄頂線深綠 → 淺底細線 ── */
html body .o-center #visit .facts > div { border-top-color: var(--ln-dk); }
html body .o-center .rj-side { border-top-color: var(--ln); }

/* ── 圓形按鈕不加框(10-19 Eric:「圓形按鈕也改成不加框」)——評論左右鈕、空間輪播暫停鈕:
   白底綠框 → 跟切換鈕同一套:#D8D2C6 底、深綠圖示;滑過客戶綠白圖示 */
html body .o-center :is(.rv-prev, .rv-next, .s3g-pause) { border: 0; background: #D8D2C6; color: var(--c-green-dk); box-shadow: none; transition: background-color .2s, color .2s; }
html body .o-center :is(.rv-prev, .rv-next, .s3g-pause):hover:not(:disabled) { background: var(--c-green); color: #fff; }

/* ── 綠色帶「How We Care」三張卡(10-19 Eric:「卡片用深綠色看看」)——原本半透明白框卡 → 客戶深綠 #3B5348 實心卡、不加框;
   進畫面時的亮起效果只留透明度與英文小字變金,底色不再變;滑過稍微提亮(深綠加 8% 白)。左邊 JJJ 標誌上下對齊文字見 opt2-band.js ── */
html body .o-center .sl-3j a, html body .o-center .sl-3j li.lit a { border: 0; background: var(--c-green-dk); }   /* 框寬也拿掉(只設透明會多 1px,字會比頁籤卡偏 1px) */
/* (滑過見檔尾「滑過一律淡綠」) */
/* JJJ 標誌跟右邊文字的間距 40 → 56(10-19 Eric:「logo 跟旁邊的文字 padding 拉開」) */
@media (min-width: 768px) { html body .o-center .band .band-top { column-gap: var(--s-8); } }

/* ── 卡片滑過統一(10-19 Eric:「要不要統一卡片 hover 是那個淺綠色」)──
   淺色底上「可以點、或滑過會有反應」的卡片與列 → 滑過 = 淡綠 #E8EEEA(實色,不半透明):
   疼痛問題三個頁籤的項目列、常見問題每一題、醫療團隊三張醫師卡(滑到會換照片);選中的項目維持客戶綠。
   深色底上的卡片(綠帶三張)滑過 = 深綠提亮(淡綠在深綠上太跳、白字也看不到)。不能點的卡片不做滑過效果 */
html body #find :is(.fw-t, .lf-c):not([aria-expanded="true"]):hover { background: #E8EEEA; }
html body .o-center .faq-i > summary { transition: background-color .2s; border-radius: inherit; }
html body .o-center .faq-i:not([open]):hover { background: #E8EEEA; }
html body .o-center .sl-docs3 li { transition: background-color .2s; }
@media (hover: hover) and (min-width: 768px) { html body .o-center .sl-docs3 li:is(:hover, .on) { background: #E8EEEA; } }

/* ── 六張卡同一套文字樣式(10-19 Eric:「文字樣式是不是可以統一,這六張卡片的文字結構是一樣的」)──
   疼痛問題三張頁籤卡 + 綠帶三張卡,結構都是「英文小標 → 中文標題 → 一句說明」:
   內距 24;英文小標 Inter 12、字重 500、字距 .1em,下面 8;標題 32、行高 1.4、字距 .05em,下面空一行(24);說明 18、行高 1.75。
   顏色只看底色:深色底(選中的頁籤、綠帶卡)= 小標米白 #EAE5DA、標題與說明白;淺色底(沒選中的頁籤)= 都是 #505150。
   綠帶卡原本的英文小標淡綠 #B9CCBF、捲到時變金,改成跟頁籤一樣的米白;右上角編號同小標樣式 */
html body .o-center :is(#find .tabs-f .tab, .sl-3j a) { display: grid; align-content: start; row-gap: 0; padding: var(--s-5); }
html body .o-center :is(#find .tabs-f .tab em, .sl-3j .j-en) { margin: 0 0 var(--s-2); font: 500 12px/1.6 Inter, sans-serif !important; letter-spacing: .1em !important; text-transform: uppercase; }
html body .o-center :is(#find .tabs-f .tab b, .sl-3j .jt-h) { margin: 0 0 var(--s-5); font-size: var(--t-h3) !important; font-weight: 500; line-height: 1.4; letter-spacing: .05em; }   /* 標題與說明之間空一行(4 → 24,10-19 Eric:「卡片不會這麼擠」) */
html body .o-center :is(#find .tabs-f .tab small, .sl-3j .jt-s) { margin: 0; font-size: var(--t-body) !important; font-weight: 400; line-height: 1.75; letter-spacing: .05em; opacity: 1; }
html body .o-center :is(#find .tabs-f .tab.on em, .sl-3j .j-en, .sl-3j li.lit .j-en) { color: #EAE5DA; }
html body .o-center :is(#find .tabs-f .tab.on :is(b, small), .sl-3j :is(.jt-h, .jt-s)) { color: #fff; }
html body .o-center .sl-3j .jt-n { top: var(--s-5); right: var(--s-5); font: 500 12px/1.6 Inter, sans-serif; letter-spacing: .1em; color: #EAE5DA; opacity: 1; }
@media (max-width: 767px) {   /* 手機:綠帶卡一張一排,標題 24;頁籤卡三張一排,維持疼痛問題的小切換鈕(內距 12/8、名稱 18、置中) */
  html body .o-center .sl-3j .jt-h { font-size: var(--t-lead) !important; }
  html body .o-center #find .tabs-f .tab { padding: var(--s-3) var(--s-2); align-content: end; }
  html body .o-center #find .tabs-f .tab b { font-size: var(--t-body) !important; }
}

/* ── 滑過一律淡綠(10-19 Eric:「三張深綠的 hover 怎麼做才能系統化?反灰的頁籤是不是也可以 hover 淺綠?」)──
   全站狀態只有三種,顏色固定:
     預設 = 比所在底色跳一階(米底上白卡、綠底上深綠卡;沒選中的頁籤反灰 #D8D2C6)
     滑過 = 一律淡綠 #E8EEEA(不管原本是白、反灰還是深綠)
     選中 = 深綠 #3B5348(頁籤)/客戶綠 #577A6E(清單項目)、白字
   字色照「看底色」的規則跟著換:淡綠底上標題深綠 #3B5348、英文小標與說明 #505150 */
html body .o-center #find .tabs-f .tab:not(.on):hover { background: #E8EEEA; }
html body .o-center #find .tabs-f .tab:not(.on):hover b { color: var(--c-green-dk); }
html body .o-center .sl-3j a { transition: background-color .2s; }
html body .o-center .sl-3j a :is(.j-en, .jt-h, .jt-s, .jt-n) { transition: color .2s; }
html body .o-center #adult .sl-3j li a:is(:hover, :focus-visible) { background: #E8EEEA; }   /* 加 #adult 與 li:要壓過「捲到時亮起」那條(.sl-3j li.lit a),不然底色不變、字先變深就看不到 */
html body .o-center #adult .sl-3j a:is(:hover, :focus-visible) .jt-h { color: var(--c-green-dk); }   /* 加 #adult:要壓過上面「六張卡同一套」那條含 #find 的顏色規則 */
html body .o-center #adult .sl-3j a:is(:hover, :focus-visible) :is(.j-en, .jt-s, .jt-n) { color: #505150; }
/* 綠帶「嘉誼怎麼治療」三張卡上方的空間加一倍(10-19 Eric):文字到卡片 44 → 88(手機 36 → 72) */
html body .o-center #adult .band .band-top { margin-bottom: 88px; }
html body .o-center #adult .band .sl-3j { margin-top: 0; }
@media (max-width: 767px) { html body .o-center #adult .band .band-top { margin-bottom: 72px; } }

/* ── 治療方式三張卡(超音波導引注射/物理治療與儀器/骨質疏鬆)照「六張卡」的文字邏輯(10-19 Eric:「這邊文字樣式邏輯可以對照卡片試試看」)──
   內距 24;英文小標 Inter 12/500/字距 .1em、下 8(原本磚紅 18);標題 32/行高 1.4、下面空一行 24(原本 24);說明 18/行高 1.75、下 24;
   白卡在淺色底上 = 英文小標客戶指定磚紅 #96503C、標題深綠、說明 #505150。
   卡片多出來的兩段照同一套間距:細線 → 24 → 療程名稱 → 底部「看…說明 →」(三張卡的連結底部切齊) */
html body .o-center .sl-tc .sl-tc-b { display: flex; flex-direction: column; gap: 0; padding: var(--s-5); }
html body .o-center #adult .sl-tc .tx-k { margin: 0 0 var(--s-2); font: 500 12px/1.6 Inter, sans-serif !important; letter-spacing: .1em !important; text-transform: uppercase; color: #96503C; }   /* 白底上的英文小標 = 客戶指定磚紅 #96503C(10-19 Eric) */
html body .o-center .sl-tc h3 { margin: 0 0 var(--s-5); font-size: var(--t-h3) !important; font-weight: 500; line-height: 1.4; letter-spacing: .05em; color: var(--c-green-dk); }
html body .o-center .sl-tc .sl-tc-b > p:not(.tx-k):not(.sl-tc-t) { margin: 0 0 var(--s-5); font-size: var(--t-body) !important; line-height: 1.75; letter-spacing: .05em; color: #505150; }   /* (三張卡的對齊改用下面的共用橫向格線,不再「預留兩行」) */
html body .o-center .sl-tc .sl-tc-t { margin: 0; padding-top: var(--s-5); border-top: 1px solid var(--ln); font-size: var(--t-body) !important; line-height: 1.75; color: var(--c-green-dk); }
html body .o-center .sl-tc .sl-more { margin-top: auto; padding-top: var(--s-5); align-self: flex-start; }

/* ── 兒童早療:第一列借用下方四張卡的欄線(10-19 Eric:「第一列的圖片站兩格、文字也站兩格,跟下方卡片對齊」)──
   原本上列是自己的兩欄(圖 554|間距 56|文字 395),跟下列四欄(239×4、間距 16)兩套線打架;
   改成:圖 = 第 1–2 張卡寬(對齊下列欄線);文字不對齊第 3 張卡(貼太近),跟圖保持 56 的距離、右緣對齊版邊
   (10-19 Eric:「文字那邊不要對齊下方卡片左緣,要不然靠太近;圖對齊、文字可以不用對齊,視覺會幫忙分類,圖是一類、文字一類」)*/
@media (min-width: 1024px) {
  html body .o-center #kids > .wrap { grid-template-columns: calc((100% - 48px) / 2 + 16px) minmax(0, 1fr); column-gap: var(--s-8); }
}
/* 兒童早療插圖高度跟著右邊文字塊(10-19 Eric:「圖片高度做 RWD」):插圖頂 = 文字頂、底 = 按鈕底,
   寬螢幕本來就差不多高(1728:圖 363/文字 377),1440 文字比較高(443)時插圖從中間裁左右。
   高度設 0+最小 100%:插圖不參與撐高格線,只填滿文字撐出來的高度 */
@media (min-width: 1024px) {
  html body .o-center #kids .fig-wide { position: relative; align-self: stretch; height: 0; min-height: 100%; margin: 0; }
  html body .o-center #kids .fig-wide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
}

/* ── 兒童早療三張卡(該不該來?/怎麼開始?/會拿到什麼?)照卡片文字規格(10-19 Eric:「這區域的三張卡片文字照系統設計規格做」)──
   內距 24;編號 01/02/03 當英文小標:Inter 12/500/字距 .1em、白底 = 客戶磚紅 #96503C,下 8;
   標題 32/行高 1.4/字距 .05em 深綠、下面空一行 24;說明 18/行高 1.75 #505150。第一格實景小照不動 */
html body .o-center #kids .sl-kids > li:not(.o-kph) { display: grid; align-content: start; row-gap: 0; padding: var(--s-5); }
html body .o-center #kids .sl-kids > li:not(.o-kph)::before { margin: 0 0 var(--s-2); font: 500 12px/1.6 Inter, sans-serif; letter-spacing: .1em; color: #96503C; }
html body .o-center #kids .sl-kids > li:not(.o-kph) > b { margin: 0 0 var(--s-5); font-size: var(--t-h3) !important; font-weight: 500; line-height: 1.4; letter-spacing: .05em; color: var(--c-green-dk); }
html body .o-center #kids .sl-kids > li:not(.o-kph) > span { font-size: var(--t-body) !important; line-height: 1.75; letter-spacing: .05em; color: #505150; }

/* ── 區塊底色(10-19 Eric:「底色不要用淡綠色,區塊區別改用 Google 評論區的淺米色」)──
   早期 opt.css 把中間各區一律蓋成米色 #EAE5DA,吃掉了客戶原本有區別色的四區(兒童早療淡綠、評論淺米、第一次來與常見問題深一階米)。
   現在規則:一般區塊 = 米色 #EAE5DA;要跟鄰區做區別的區塊 = 客戶評論區那個淺米 #F3EFE6(不用淡綠當區塊底)。
   套在客戶原本有區別色的四區:兒童早療、評論、第一次來、常見問題 */
html body .o-center > :is(#kids, #voices, #first, #faq) { background: #F3EFE6; }
/* 兒童早療三張卡:標題組貼卡片頂、說明貼卡片底(10-19 Eric:「讓內文對齊卡片底、標題對齊卡片頂」)——
   「會拿到什麼?」在窄卡折兩行時,三張的標題頂與說明底仍各自切齊;標題到說明至少空 24 */
html body .o-center #kids .sl-kids > li:not(.o-kph) { display: flex; flex-direction: column; }
html body .o-center #kids .sl-kids > li:not(.o-kph) > span { margin-top: auto; }
/* 兒童早療三張卡:說明行數不一樣時,說明的「開頭」要對齊(10-19 Eric:「內文貼底也可能沒對齊,兩行 vs 三行;auto space 要以三行為主」)——
   電腦版四格一排共用同一組橫向格線(subgrid):編號列 / 標題列(取最高那張)/ 中間 auto space / 說明列(取最長那張);
   每張的說明都從同一高度開始,短的說明下面留空,不是上面。實景小照那格跨四列 */
@media (min-width: 1024px) {
  html body .o-center #kids .sl-kids { grid-template-rows: auto auto 1fr auto; row-gap: 0; }
  html body .o-center #kids .sl-kids > li { grid-row: span 4; }
  html body .o-center #kids .sl-kids > li:not(.o-kph) { display: grid; grid-template-rows: subgrid; row-gap: 0; }
  html body .o-center #kids .sl-kids > li:not(.o-kph)::before { grid-row: 1; }
  html body .o-center #kids .sl-kids > li:not(.o-kph) > b { grid-row: 2; }
  html body .o-center #kids .sl-kids > li:not(.o-kph) > span { grid-row: 4; margin-top: 0; }
}

/* ── 並排卡片逐類對齊(10-19 Eric:「不能出現卡片裡面的文字系統和隔壁的卡片有不對齊」;排版憲法對齊律第 15 條)──
   掃描 1440 找到三排沒對齊,都改成整排共用橫向格線(subgrid),每一類一列、列高取整排最高,行數不一的地方插 auto space(1fr) */
/* ① 醫療團隊三張醫師卡:職稱 / 名字 / 引言(只有院長有,另兩張這列空著)/ 專長 / auto space / 看門診 → */
@media (min-width: 1024px) {
  html body .o-center #team .sl-docs3 { grid-template-rows: auto auto auto auto 1fr auto; row-gap: 0; }
  html body .o-center #team .sl-docs3 > li { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 2px; }
  html body .o-center #team .sl-docs3 > li > .sd-r { grid-row: 1; }
  html body .o-center #team .sl-docs3 > li > .sd-n { grid-row: 2; }
  html body .o-center #team .sl-docs3 > li > .sd-l { grid-row: 3; }
  html body .o-center #team .sl-docs3 > li > .sd-t { grid-row: 4; }
  html body .o-center #team .sl-docs3 > li > .sd-h { grid-row: 6; }
}
/* ② 門診週班表六天:日期列(今天/明天多一行標籤)/ 早診 / 午診 / 晚診 / 當日說明 / auto space——早午晚三列各自跨六天切齊 */
@media (min-width: 1025px) {
  html body .o-center .week { grid-template-rows: auto auto auto auto auto 1fr; row-gap: 0; }
  html body .o-center .week > .day { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; align-content: stretch; }
  html body .o-center .week > .day > .day-h { grid-row: 1; }
  html body .o-center .week > .day > ul { grid-row: 2 / span 3; display: grid; grid-template-rows: subgrid; row-gap: var(--s-2); }
  html body .o-center .week > .day > .day-note { grid-row: 5; }
}
/* ③ 疼痛問題說明面板兩欄(常見的狀況|門診通常會先問、先看):小標列 / 內文列共用格線——原本差 3px(「、」的備用字型行框比較高) */
html body #find .fw-cond li { line-height: 1.75; }
@media (min-width: 768px) {
  html body #find :is(.fw-i, .lf-i) dl > div:not(.fw-ck) { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
}

/* ④ 治療方式三張照片卡:照片 / 英文小標 / 標題 / 說明 / 細線+療程名稱 / auto space / 看…說明 →(原本用「說明至少兩行高」湊,違反通則,改共用格線) */
@media (min-width: 901px) {
  html body .o-center .sl-tcs { grid-template-rows: auto auto auto auto auto 1fr auto; row-gap: 0; }
  html body .o-center .sl-tcs > .sl-tc { grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; }
  html body .o-center .sl-tcs > .sl-tc > figure { grid-row: 1; }
  html body .o-center .sl-tcs > .sl-tc > .sl-tc-b { grid-row: 2 / span 6; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  html body .o-center .sl-tcs .sl-tc .sl-more { grid-row: 6; align-self: end; margin-top: 0; }
}
/* 兒童早療「初診掛顏韻珊醫師的門診…」跟按鈕之間多空一行(10-19 Eric:「離按鈕太近太擠」):原本字到按鈕 16 → 加一個行高(1lh);左邊插圖高度跟著文字塊自動變高 */
html body .o-center #kids .sl-cta > p { margin-bottom: 1lh; }

/* ── 卡片上方的英文小標/編號一律用客戶橘紅(10-19 Eric:「卡片裡上方的英文字或是數字小字,用客戶的橘紅試看看」)──
   淺底(白卡、反灰頁籤、滑過淡綠)= #96503C(客戶標籤磚紅);深綠底(選中頁籤、綠帶三張卡)試過 #B7664F 對比只有 2:1,Eric 定改回米白 #EAE5DA。
   範圍:疼痛問題三張頁籤卡的 BY AREA…、綠帶三張卡的 JUST RIGHT…與 01/02/03(治療方式卡、兒童早療編號本來就是磚紅) */
html body .o-center #find .tabs-f .tab:not(.on) em { color: #96503C; }
html body .o-center #find .tabs-f .tab.on em { color: #EAE5DA; }   /* 深綠底改回米白(10-19 Eric:「深綠卡片改回米白」) */
html body .o-center #adult .sl-3j.sl-3j a :is(.j-en, .jt-n) { color: #EAE5DA; }   /* 深綠卡改回米白(10-19 Eric);滑過淡綠時仍是磚紅 */   /* .sl-3j 寫兩次:要壓過「六張卡同一套」那條含 #find 的顏色規則 */
html body .o-center #adult .sl-3j li a:is(:hover, :focus-visible) :is(.j-en, .jt-n) { color: #96503C; }

/* ── 還原客戶的區塊大字英文(Find Your Way / For Your Child / Our Team)(10-19 Eric:「還原吧」)──
   早期 opt.css 把它藏起來(.sec-en display:none),不是客戶 PDF 要求的,違反「客戶的文字不能刪、不能藏」。
   照客戶原本:標題列兩欄(標題|大字英文,底部切齊)、Inter 500、clamp(44–68)、客戶綠、不折行;1099 以下客戶自己就隱藏,照舊。
   兒童早療的文字只剩右半欄,放不下並排 → 大字英文改放在標題下面一行(左緣跟標題同一條) */
@media (min-width: 1100px) {
  html body .o-center .sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--s-5); }
  html body .o-center .sec-en { display: block; }
}
/* 區塊大字英文(Find Your Way / For Your Child / Our Team)改 Inter Tight(10-19 Eric:「英文大標用 Inter Tight」;字型由 build-opt2.py 加進 Google Fonts;字重後來定 400,見檔尾) */
html body .o-center .sec-en { font-family: "Inter Tight", Inter, sans-serif; }

/* ── 標題系統(試做:疼痛問題第一區)(10-19 Eric:「加標題系統,先試第一區:今天,是為了哪裡不舒服而來? Find Your Way 下方加灰線」)──
   標題列 = 中文大標(左)+ 大字英文(右),兩邊「最後一行的基線」切齊(原本用各自的下邊距 20/30 湊);
   標題列下面空 24 → 灰線 #CECAC1 整排 → 空 24 → 引言 */
html body .o-center .sec-head { margin-bottom: var(--s-5); padding-bottom: var(--s-5); border-bottom: 1px solid var(--ln); }   /* 10-19 推到全部區塊(Eric:「大字英文都有好了,先看看效果」) */
@media (min-width: 1100px) { html body .o-center .sec-head { align-items: last baseline; } }
html body .o-center .sec-head :is(.h2, .sec-en) { margin-bottom: 0; }
html body .o-center #find > .wrap > .lead { margin-top: 0; }   /* 標題列下面已有 24 */
/* 灰線開頭疊一小段綠線(10-19 Eric:「長度跟客戶標題下方的綠線差不多,但不要那麼粗」):客戶原本大標下 48×2 的綠線 → 48 長、1px(跟灰線同粗)、客戶綠,疊在灰線最左邊 */
html body .o-center .sec-head { position: relative; }
html body .o-center .sec-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: calc(2 * var(--t-h2)); height: 2px; background: var(--c-green); }   /* 10-19 Eric:1px 太細 → 2px;長度 = 大標兩個中文字(2×42 = 84);底部跟灰線切齊 */

/* ── 全站只用三種綠(10-19 Eric:「全站收斂到只用三種綠,除非後面 tune 發現有其他需求」)──
   深綠 #3B5348 / 標準綠 #577A6E / 淡綠 #E8EEEA。掃所有樣式規則(含滑過、選中狀態),把其餘不透明的綠對應進來:
   ・接近黑的綠、按鈕滑過的加深綠 → 深綠:首屏底、首屏捲動變暗層、頁尾底、提示浮層、醫師名字、週班表星期、各種按鈕滑過
   ・中間調的綠(#749986 系)→ 標準綠:頁首閱讀進度條、左側欄 J 滑過、大字英文(兒童早療原本另用淺綠 #8FAA9E)
   ・深底上的淡綠字(#C9D6CF、#B9CCBF)→ 淡綠:頁尾小標與英文
   頁首標誌圖另外換成標準綠版(build-opt2.py)。半透明的照片遮罩、陰影不算顏色,沒動 */
html body .hero { background-color: var(--c-green-dk); }
html body .hero .hero-veil { background: var(--c-green-dk); }
html body :is(.ft, .ft.ft2) { background-color: var(--c-green-dk); }
html body .sl-toast { background: var(--c-green); } /* 10-24 Eric 新規則:深綠只在品牌綠底上用 → 客戶綠 */
html body .o-center .sd-n { color: var(--c-green-dk); }
html body .o-center .day-h b { color: var(--c-green-dk); }
html body :is(.hd-cta, .hero .door-go, .map-card .map-btn, .tx-back):is(:hover, :focus-visible) { background: var(--c-green-dk) !important; color: #fff; }
html body .jprog i { background: var(--c-green) !important; }   /* 客戶原本用 !important 指定 #749986 */
html body .h2::after { background: var(--c-green); }   /* 大標下的舊綠線(目前隱藏),顏色也收進標準綠 */
html body .o-center .sec-kids .sec-en { color: var(--c-green); }
@media (min-width: 1200px) { html body .o-body > .rail-l .rl-nav a:hover i { background: var(--c-green) !important; } }
html body .ft :is(.ft-h, .ft-en) { color: #E8EEEA; }

/* ── 標題系統推到各區後的版面調整(10-19)──
   標題列(小標+大標|大字英文)→ 下 24 → 灰線(開頭一段綠)→ 下 24 → 引言或內容。兒童早療欄窄,大字英文放大標下一行(上面已設)。
   ① 評論、門診時間:原本大標在左、說明/公告在右 → 標題列整排,說明/公告改放線下面(左邊,像引言) */
@media (min-width: 1024px) {
  html body .o-center :is(#voices, #hours) > .wrap > .sec-head { grid-column: 1 / -1; grid-row: 1; }
  html body .o-center #voices > .wrap > .sub, html body .o-center #hours > .wrap > .hh-ann { grid-column: 1 / -1; grid-row: 2; align-self: start; margin: 0 0 var(--s-7); max-width: 36em; }
}
/* ② 常見問題:標題原本在左欄 → 拿出來整排;左欄(說明+連結)仍跟著捲動停住,右欄是分類與問答 */
html body .o-center .faq-in > .sec-head { grid-column: 1 / -1; }
@media (min-width: 901px) {
  html body .o-center .faq-in > .sec-head { position: relative; top: auto; align-self: auto; }
  html body .o-center .faq-in > div:nth-child(2) { position: sticky; top: 104px; align-self: start; }
}
/* ③ 預約與交通(綠底):標題列整排;線用深底規則 = 白 20%,開頭那段改米白;大字英文米白 */
html body .o-center .visit > .sec-head { grid-column: 1 / -1; align-self: start; }
html body .o-center #visit .sec-head { border-bottom-color: var(--ln-dk); }
html body .o-center #visit .sec-head::after { background: #EAE5DA; }
html body .o-center #visit .sec-en { color: #EAE5DA; }
/* ④ 空間:標題列在 s3g-h 裡,下面接說明 */
html body .o-center .s3g-h > .sec-head { margin-bottom: var(--s-2); }
/* 線到內容統一 24:常見問題、預約交通的格線原本有 56 的上下間距、空間的 s3g-h 有 6 的間距,疊上標題列下面的 24 變成 80/16 */
html body .o-center :is(.faq-in, .visit) { row-gap: 0; }
html body .o-center .s3g-h { row-gap: 0; }
html body .o-center .s3g-h > .sec-head { margin-bottom: var(--s-5); }

/* ── 兒童早療標題列跟其他區一樣(10-19 Eric:「標題系統改成跟其他區塊一樣,但是灰線下方左邊放圖片、右邊內文和按鈕」)──
   原本標題擠在右半欄、大字英文只能放標題下面;改成標題列拉滿整排(標題|大字英文,線整排),
   線下面:左 = 插圖(寬 = 下方第 1–2 張卡),右 = 引言+按鈕;插圖頂 = 引言頂、底 = 按鈕底(沿用「圖片高度做 RWD」) */
@media (min-width: 1024px) {
  html body .o-center #kids > .wrap > .sec-head { grid-column: 1 / -1; grid-row: 1; }
  html body .o-center #kids > .wrap > .fig-wide { grid-column: 1; grid-row: 2 / span 2; }
  html body .o-center #kids > .wrap > .lead { grid-column: 2; grid-row: 2; margin-top: 0; }
  html body .o-center #kids > .wrap > .sl-cta { grid-column: 2; grid-row: 3; }
  html body .o-center #kids > .wrap > .sl-kids { grid-row: 4; }
}
/* 插圖最低高度 = 寬的 3/4(4:3)(10-19 Eric:「圖片變得很扁,要有一個最低高度,不能無限低」):
   標題搬出去後右邊字變少,插圖跟著縮到 502×292;改成「跟文字一樣高,但不低於 4:3」。
   做法:插圖跨第 2–4 列,第 4 列是空的伸縮列(1fr),插圖比文字高時多出來的高度只進這一列,引言和按鈕不會被撐開;
   插圖用 ::before 的上內距撐出 4:3 的底(內距 % 以寬度計) */
@media (min-width: 1024px) {
  html body .o-center #kids > .wrap { grid-template-rows: auto auto auto 1fr auto; }
  html body .o-center #kids > .wrap > .fig-wide { grid-row: 2 / span 3; height: auto; min-height: 0; }
  html body .o-center #kids > .wrap > .fig-wide::before { content: ""; display: block; padding-top: 75%; }
  html body .o-center #kids > .wrap > .sl-kids { grid-row: 5; }
}
/* 右邊文字塊(引言+按鈕)在插圖高度裡置中(10-19 Eric:比較「貼上緣/貼下緣/置中」三種後選置中):
   文字上下各一條伸縮的空列,平分插圖比文字多出來的高度;文字比插圖高時兩條空列 = 0,上下都切齊 */
@media (min-width: 1024px) {
  html body .o-center #kids > .wrap { grid-template-rows: auto 1fr auto auto 1fr auto; }
  html body .o-center #kids > .wrap > .fig-wide { grid-row: 2 / span 4; }
  html body .o-center #kids > .wrap > .lead { grid-row: 3; }
  html body .o-center #kids > .wrap > .sl-cta { grid-row: 4; }
  html body .o-center #kids > .wrap > .sl-kids { grid-row: 6; }
}

/* 標題列的中文大標一律兩行,在逗號後換行(10-19 Eric:「標題系統裡中文是不是可以都維持兩行,客戶有幾個區塊是兩行」):
   客戶每個大標都已經在逗號後放了換行點(原本只在手機打開),桌機打開後由逗號斷行,
   不再靠欄寬自然折(疼痛問題、醫療團隊原本是被欄寬折在句子中間);「嘉誼的樣子」沒有逗號、沒有換行點,維持一行 */
html body .o-center .sec-head .h2 .br-m { display: inline; }

/* ── 卡片內距三級(10-19 Eric:「好,照三級統一」)──
   盤點時全站卡片內距有 14 種數字(客戶原本各寫各的),統一成三級:
   ・一般卡片 24:頁籤、綠帶卡、治療方式卡、兒童早療卡、公告、提示框(本來就 24)+ 醫師卡(16/20)、評論綠色摘要卡(34/30/28)、
     評論卡(22/22/18)、第一次來步驟卡(20/22)、常見問題每一題(18/22,題號與箭頭離邊 22)
   ・大面板 40(1023 以下 24):疼痛問題白色面板(本來就是)+ 評論區白色大框(10/28/22,裡面再裝評論卡)、本週門診綠卡(32/40)
   ・小格子 16:週班表每一天(16/14)、裡面的時段(10)、空間照片圖說(10/14,離照片邊也從 14 改 16)
   不動:疼痛問題的部位列(清單列,上下 16 左右 24)、手機版三張小頁籤(12/8,一排擠三個) */
html body .o-center #team .sl-docs3 > li { padding: var(--s-5); }
html body .o-center #voices .rv-sum { padding: var(--s-5); }
html body .o-center #voices .rv-c figure { padding: var(--s-5); }
html body .o-center .first-photo .steps4 h4 { padding: var(--s-5) var(--s-5) 6px; }
html body .o-center .first-photo .steps4 p { padding: 0 var(--s-5) var(--s-5); }
html body .o-center .faq-i summary { padding-top: var(--s-5); padding-bottom: var(--s-5); }
html body .o-center .faq-i summary::before { left: var(--s-5); }
html body .o-center .faq-i summary::after { right: var(--s-5); }
html body .o-center .faq-i p { padding-right: var(--s-5); padding-bottom: var(--s-5); }
@media (max-width: 767px) {
  html body .o-center .faq-i summary { padding-left: 60px; }   /* 題號往右 8 後,題目跟著右移,保持題號和題目的距離 */
  html body .o-center .faq-i p { padding-left: var(--s-5); }
}
html body .o-center #voices .rv-main { padding: var(--s-7); }
/* 頁籤上方 34 是客戶留給小綠人站的位置(小綠人 35 高、貼頂 2),不能歸 0——10-19 歸 0 後小綠人疊到「看診時」的字上,Eric 抓到,還原 */
html body .o-center #hours .now-card { padding: var(--s-7); }
@media (max-width: 1023px) {
  html body .o-center #voices .rv-main, html body .o-center #hours .now-card { padding: var(--s-5); }
}
html body .o-center #hours .day { padding: var(--s-4); }
html body .o-center #hours .sl { padding: var(--s-4); }
html body .o-center .s3g figcaption { left: var(--s-4); bottom: var(--s-4); padding: var(--s-4); }

/* 區塊大字英文字距收緊(10-19 Eric:「英文大標題字距減少看看」):原本吃到全站文字字距 .05em(opt2.css 那條 !important,
   本來是給中文的),66 號的 Inter Tight 字縫被撐開;大字標題改 -.01em(這站、這個字體收緊比較好看;Eric:鬆緊要看品牌屬性和字體,不是通則) */
html body .o-center .sec-head .sec-en { letter-spacing: -.01em !important; }
/* 大字英文字重小一級 500 → 400(10-19 Eric:「英文標題字重小一級看看」→「用 400」;build-opt2.py 只載 Inter Tight 400) */
html body .o-center .sec-head .sec-en { font-weight: 400; }

/* 醫師卡:介紹句和專長之間加灰線(10-19 Eric:「卡片資訊看起來太亂了,『嘉誼院長,也是兒童早期療育的初診醫師』下方加灰線隔開,其他卡片也要加」)
   線畫在專長(.sd-t)的頂邊:三張卡的專長在同一列(subgrid 第 4 列),沒有介紹句的兩張也在同一高度出現線。
   線上 24、線下 24,跟治療方式卡的分隔線同一套 */
html body .o-center #team .sl-docs3 > li > .sd-t { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--ln); }

/* 醫師名字 24 → 32(10-19 Eric:「改 32 看一下」),跟其他卡片標題同一級(--t-h3,行高 1.4);
   卡片窄時只在名字和「醫師」之間的空格換行,不把「醫師」拆開(keep-all) */
html body .o-center #team .sl-docs3 .sd-n { font-size: var(--t-h3) !important; line-height: 1.4; word-break: keep-all; }
html body .o-center #team .sl-docs3 .sd-n span { word-break: normal; }

/* 醫師卡介紹句上下等距(10-19 Eric:「嘉誼院長,也是兒童早期療育的初診醫師,上下 padding 值是一樣的嗎」→「改一樣」):
   量字的筆畫邊緣,原本上 16(專科那行字底 → 介紹句字頂)、下 31(介紹句字底 → 灰線);
   上方 4 → 19,補上專科那行與介紹句各自的行高空氣,筆畫邊緣上下都是 31 */
html body .o-center #team .sl-docs3 > li > .sd-l { margin-top: 19px; }

/* ── 評論卡照卡片系統(10-19 Eric:「評論卡片樣式也照卡片系統調整」)──
   原本:「這則提到｜主題」一行磚紅 18、引文行高 1.9、各段間距 10/18/14/10 各寫各的、沒有共用格線。
   改成跟治療方式卡同一套:小標(這則提到,磚紅)下 8 → 標題(主題,1.4 深綠,折行時兩行平均;字級試 24——評論卡窄,32 一行只放 6 字,Eric:「改 24 看一下」)下 24 → 引文 18/1.75 → 下 24 灰線 → 24 → 評論者 → 24 → 原文連結。
   整條輪播的卡共用橫向格線(subgrid):小標/標題/引文/auto space/評論者/連結,每一類同高開始,以最長那張為準 */
html body .o-center #voices .rv-tp { margin: 0 0 var(--s-2); }
html body .o-center #voices .rv-tt { margin: 0 0 var(--s-5); font-size: var(--t-lead) !important; font-weight: 500; line-height: 1.4; color: var(--c-green-dk); text-wrap: balance; }
html body .o-center #voices .rv-q { margin: 0 0 var(--s-5); }
html body .o-center #voices .rv-q p { line-height: 1.75; }
html body .o-center #voices .rv-f { padding-top: var(--s-5); }
html body .o-center #voices .rv-src { margin: var(--s-5) 0 0; }
html body .o-center #voices .rv-track { grid-template-rows: auto auto auto 1fr auto auto; row-gap: 0; }
html body .o-center #voices .rv-c { grid-row: span 6; display: grid; grid-template-rows: subgrid; row-gap: 0; }
html body .o-center #voices .rv-c figure { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; row-gap: 0; }
html body .o-center #voices .rv-c .rv-tp { grid-row: 1; }
html body .o-center #voices .rv-c .rv-tt { grid-row: 2; }
html body .o-center #voices .rv-c .rv-q { grid-row: 3; }
html body .o-center #voices .rv-c .rv-f { grid-row: 5; }
html body .o-center #voices .rv-c .rv-src { grid-row: 6; }

/* 評論左右鈕箭頭(10-19 Eric:「< > 是用文字嗎?所以才沒有對齊圓形中心?改成我們其他網站常用的圓形小箭頭 svg 按鈕樣式」):
   文字「‹」「›」換成 MaoKing 同款細線箭頭 SVG(16×16、線寬 1.4),圖示用格線置中在圓心;上一則水平翻轉。按鈕底色、大小照本站圓形鈕 */
html body .o-center :is(.rv-prev, .rv-next) { display: grid; place-items: center; padding: 0; }
html body .o-center :is(.rv-prev, .rv-next) svg { width: 16px; height: 16px; display: block; }
html body .o-center .rv-prev svg { transform: scaleX(-1); }

/* ── 評論區改上下排:分數卡在上、評論在下一次看 3 張(10-19 Eric:「綠卡改成在上方,下面秀 3 張卡片看看,放在左方和白卡同高不好看」)──
   (之前試過綠卡在左、拉到跟白框等高再逐列對齊,Eric 看過不要)
   分數卡改成客戶縮減版那條深綠橫帶的排法(10-19 Eric:「你應該優化客戶做的這個綠卡的,你現在做的很奇怪,也太空了」
   ——我先前照完整版的兩欄排,左右各一堆字、中間大片空):
   第一列小標「Google 商家頁」;第二列一排:5.0+星星 | 直線 | 35 則公開評論 | 右邊一塊「數據更新至…」+ 看全部鈕 + 寫評論連結。
   內容用完整版的(按鈕、寫評論連結都保留,沒有刪字),排法、深綠底 #3B5348 照縮減版(縮減版右下角的淡 J 浮水印 Eric 說拿掉)。
   內距 40(跟下面白框同級),兩塊間距 24;1024 以下改一欄直排、內距 24 */
@media (min-width: 1025px) {
  html body .o-center #voices .rv { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  html body .o-center #voices .rv-track { grid-auto-columns: calc((100% - 2 * var(--s-5)) / 3); }
  /* 欄 = 5.0(跨兩列置中)| 35 則公開評論/下面一行更新日期(左邊一條直線)| 空 | 看全部鈕/下面一行寫評論連結(靠右)
     (先試過「更新日期+連結」放中間一欄、按鈕靠右:中間欄只剩 172 寬,兩行都被擠成兩行) */
  html body .o-center #voices .rv-sum { align-self: auto; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "k k k k" "score n . btn" "score date . link"; align-items: center; column-gap: var(--s-7); row-gap: 0; padding: var(--s-7); }
  html body .o-center #voices .rv-k { grid-area: k; margin: 0 0 var(--s-2); }
  html body .o-center #voices .rv-score { grid-area: score; margin: 0; }
  html body .o-center #voices :is(.rv-n, .rv-date) { padding-left: var(--s-7); border-left: 1px solid var(--ln-dk); }
  html body .o-center #voices .rv-n { grid-area: n; margin: 0; align-self: end; }
  html body .o-center #voices .rv-date { grid-area: date; margin: 0; padding-top: var(--s-2); align-self: stretch; }   /* 列距 0、上下兩行的距離改用內距給,左邊直線才連成一條 */
  html body .o-center #voices .rv-btns { display: contents; }
  html body .o-center #voices .rv-btns .btn { grid-area: btn; width: 100%; }
  html body .o-center #voices .rv-btns .tlink { grid-area: link; justify-self: start; margin-top: var(--s-2); }
}
@media (max-width: 1024px) {
  html body .o-center #voices .rv-sum { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  html body .o-center #voices .rv-sum > * { margin: 0; }
}
html body .o-center #voices .rv-sum { background: var(--c-green); }   /* 10-24 Sandy:「Google 評論的 bar 改成品牌標準綠」深綠 #3B5348 → 客戶綠 #577A6E */
html body .o-center #voices .rv-k { color: #fff; }   /* 10-24 評分條底色改淺(客戶綠)後,米色字對比只剩 3.8 → 白(4.8) */
html body .o-center #voices .rv-num { font: 500 64px/1 Inter, sans-serif; }
html body .o-center #voices .rv-n { display: flex; align-items: baseline; gap: var(--s-2); }
html body .o-center #voices .rv-n span { font: 500 44px/1 Inter, sans-serif; }
html body .o-center #voices .rv-sum::after { content: none; }   /* 右下角的淡 J 浮水印(縮減版)與完整版的淡色圓暈都拿掉(10-19 Eric:「那個 J 的浮水印拿掉」) */

/* 評論頁籤旁的則數圓圈改正圓(10-19 Eric:「看診時旁邊的圓圈數字不是正圓?」):原本左右內距 6 撐出 22×20 的膠囊,
   改固定 22×22、數字用格線置中(兩位數也放得下) */
html body .o-center #voices .t-n { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; line-height: 1; border-radius: 50%; }

/* ── 評論區小綠人重畫(10-19 Eric 選:①側身剪影 ⑤真的走路 ⑥會轉身 ⑧到了點頭,先試)──
   造型:像紅綠燈的小綠人,側身朝右、身體挺直(10-19 Eric:不要前傾,骨科診所的 icon 前傾像駝背);手腳各一節,從肩/髖擺動;單色客戶綠(原本的 fill)。大小、位置照客戶(22×35、頁籤上方)。
   走路:兩腳前後交替、兩手反向擺,腳張最開時身體往下沉 1.5(兩腳交錯時最高),不再只是左右晃(速度見下方 10-19 第二刀)。
   轉身:往左走 → 整個人水平翻面朝左(.2 秒,看起來像轉身);到了點一下頭(頭往前下 1、2,.4 秒),再轉回朝右(opt2-gm.js)。
   減少動態偏好:客戶原本就不加 walking;這裡也不轉身不點頭 */
html body .o-center #voices .rv-gm .gm-flip { transform-box: view-box; transform-origin: 50% 50%; transition: transform .2s ease; }
html body .o-center #voices .rv-gm.gm-left .gm-flip { transform: scaleX(-1); }
html body .o-center #voices .rv-gm :is(.gm-leg, .gm-arm, .gm-head) { transform-box: fill-box; }
html body .o-center #voices .rv-gm .gm-leg { transform-origin: 50% 3px; }
html body .o-center #voices .rv-gm .gm-arm { transform-origin: 50% 2.5px; }
html body .o-center #voices .rv-gm .gm-head { transform-origin: 50% 50%; }
/* 10-19 Eric:「看不出來有走路,因為切換太快了;讓他側身的時候就可以看到兩條腿」→
   ① 走慢:客戶的 .7 秒改 1.2 秒(只改小綠人,頁籤底下那條線維持 .7 秒),走路的手腳擺動改成「走多久擺多久」(gm-walk,opt2-gm.js 控制),0.4 秒兩步,一格約走 6 步
   ② 站著也看得到兩條腿:停著時前腳往前 12°、後腳往後 12°(手也微微前後),不再疊成一條;
      擺動從 ±30° 來回,動畫往前偏 .07 秒起跑 = 剛好從站姿的角度開始擺,起步不會跳一下 */
@media (prefers-reduced-motion: no-preference) { html body .o-center #voices .rv-gm { transition: left 1.2s cubic-bezier(.35, 0, .65, 1); } }
html body .o-center #voices .rv-gm .gm-lf { transform: rotate(-12deg); }
html body .o-center #voices .rv-gm .gm-lb { transform: rotate(12deg); }
html body .o-center #voices .rv-gm .gm-af { transform: rotate(10deg); }
html body .o-center #voices .rv-gm .gm-ab { transform: rotate(-10deg); }
html body .o-center #voices .rv-gm.gm-walk .gm-fig { animation: gmBob .4s ease-in-out infinite -.07s; }
html body .o-center #voices .rv-gm.gm-walk .gm-lf { animation: gmSwing .4s ease-in-out infinite -.07s; --a: -30deg; }
html body .o-center #voices .rv-gm.gm-walk .gm-lb { animation: gmSwing .4s ease-in-out infinite -.07s; --a: 30deg; }
html body .o-center #voices .rv-gm.gm-walk .gm-af { animation: gmSwing .4s ease-in-out infinite -.07s; --a: 55deg; }   /* 手擺 ±35° → ±55°(10-20 Eric:「手的擺動大一點」) */
html body .o-center #voices .rv-gm.gm-walk .gm-ab { animation: gmSwing .4s ease-in-out infinite -.07s; --a: -55deg; }
html body .o-center #voices .rv-gm.gm-arrive .gm-head { animation: gmNod .4s ease-in-out; }
@keyframes gmSwing { 0%, 100% { transform: rotate(var(--a)); } 50% { transform: rotate(calc(var(--a) * -1)); } }
@keyframes gmBob { 0%, 50%, 100% { transform: translateY(1.5px); } 25%, 75% { transform: translateY(0); } }
@keyframes gmNod { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(1px, 2px); } }
@media (prefers-reduced-motion: reduce) { html body .o-center #voices .rv-gm * { animation: none !important; transition: none !important; } }

/* ── 第一次來四張卡照治療方式卡的樣式(10-19 Eric:「照片的號碼移到文字區塊;卡片樣式對齊三種治療方式卡片;照片下方不是直的、有圓角,不對」)──
   ・照片:下緣改直角(全站卡片圓角那條把照片自己也切了圓角),只留卡片外框的圓角(卡片 overflow hidden 切上面兩角)
   ・號碼:原本白圓圈疊在照片左上 → 移到文字區最上面,當小標:01/02/03/04,Inter 12/500/字距 .1em 磚紅 #96503C(同治療卡英文小標、兒童早療編號)
   ・文字:內距 24;小標下 8 → 標題 32/1.4 深綠、下 24 → 說明 18/1.75 #505150
   ・四張卡共用橫向格線(照片/小標/標題/說明),標題折行時說明也同高開始
   照片比例維持客戶的 4:5(直式人物照),沒有改成治療卡的 3:2 */
html body .o-center .first-photo .steps4 li .st-img { order: -1; margin: 0; border-radius: 0; }   /* 選擇器要比全站卡片圓角那條(含 .first-photo .steps4 li)更重才蓋得過 */
html body .o-center .first-photo .steps4 li::before { position: static; z-index: auto; width: auto; height: auto; display: block; margin: 0 0 var(--s-2); padding: var(--s-5) var(--s-5) 0; border-radius: 0; background: none; box-shadow: none; content: counter(k, decimal-leading-zero); font: 500 12px/1.6 Inter, sans-serif; letter-spacing: .1em; color: #96503C; text-align: left; place-items: initial; }
html body .o-center .first-photo .steps4 h4 { margin: 0 0 var(--s-5); padding: 0 var(--s-5); font-size: var(--t-h3) !important; font-weight: 500; line-height: 1.4; letter-spacing: .05em; color: var(--c-green-dk); }
html body .o-center .first-photo .steps4 p { margin: 0; padding: 0 var(--s-5) var(--s-5); font-size: var(--t-body) !important; line-height: 1.75; letter-spacing: .05em; color: #505150; }
@media (min-width: 561px) {
  html body .o-center .first-photo .steps4 { grid-template-rows: auto auto auto 1fr; row-gap: var(--s-5); }
  html body .o-center .first-photo .steps4 li { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; }
}
@media (max-width: 560px) {
  /* 手機照客戶:照片在左、字在右;號碼放字的最上面 */
  html body .o-center .first-photo .steps4 li { grid-template-areas: "photo num" "photo title" "photo copy"; row-gap: 0; }
  html body .o-center .first-photo .steps4 li::before { grid-area: num; padding: var(--s-4) var(--s-4) 0; }
  html body .o-center .first-photo .steps4 h4 { margin-bottom: var(--s-2); padding: 0 var(--s-4); }
  html body .o-center .first-photo .steps4 p { padding: 0 var(--s-4) var(--s-4); }
}

/* 第一次來、門診時間的下內距回到跟上方一樣(10-20 Eric:「第一次來整個區塊的上下 padding 不一樣,下方太小了」):
   客戶另外把這兩區的下內距寫小(第一次來 56、手機 40;門診時間 64),其他區都是上下同值(--o-pad);各區之間有縫隔開,看得出上下不等 */
html body .o-center :is(#first, #hours) { padding-bottom: var(--o-pad); }

/* ── 各區內容離上下邊緣等距(10-20 Eric:「檢查每個區塊內容離上下邊緣 padding 有沒有一樣」)──
   量法:各區最上面的字/最下面的字或卡片、按鈕外框,到區塊上下邊緣的距離(進場動畫關掉、位移歸零後量)。1440 時大部分是上 124(字頂,內距 120+行高空氣 4)/ 下 120(按鈕或卡片外框),
   不一樣的三處:①第一次來、門診時間下內距被客戶寫小(56/64)→ 上面那條已改回 --o-pad
               ② 嘉誼的樣子(空間):客戶在輪播外面多加了下方 56,內容下面空 176 → 拿掉
               ③ 治療方式(綠色帶下面的米色塊):上內距 96(opt.css 我先前給的)、下 120 → 上方也改 --o-pad */
html body .o-center #space .s3g-w { margin-bottom: 0; }
html body .o-center .care-sec > .care-body { padding-top: var(--o-pad); }

/* ── 標題列那條線:線上、線下看起來一樣遠(10-20 Eric:「標題系統的那條線,上下 padding 值要一樣」)──
   量字的筆畫邊緣(不是字框):線上方 = 大標最後一行字底 → 線 = 32(內距 24 + 大標行高的空氣 8)。
   線下方原本一律留 24,但下面接「字」時會多出字自己的行高空氣(約 10)→ 34;接「照片/卡片外框」時沒有空氣 → 24。
   改成依下面接的東西給:接字 22(22+10≈32)、接外框 31.5(兒童早療插圖、第一次來卡片、門診時間公告框)。
   預約交通左欄的「成人門診」上面客戶另多 8 → 拿掉,讓它也是接字的 32 */
/* 10-20 Eric:「改成分隔線下方 padding 是上方的兩倍看看」→ 線下 = 線上(筆畫量 31.8)× --tl-ratio;要改回一樣就把 --tl-ratio 設 1。
   接字要扣掉字的行高空氣 9.8、接外框扣線本身半格 .5 */
html body .o-center { --tl-gap: 31.8px; --tl-ratio: 2; }
html body .o-center .sec-head,
html body .o-center .s3g-h > .sec-head { margin-bottom: calc(var(--tl-gap) * var(--tl-ratio) - 9.8px); }
html body .o-center :is(#first, #hours) .sec-head { margin-bottom: calc(var(--tl-gap) * var(--tl-ratio) - .5px); }
@media (min-width: 1024px) { html body .o-center #kids .sec-head { margin-bottom: calc(var(--tl-gap) * var(--tl-ratio) - .5px); } }   /* 兒童早療只有並排時線下先接插圖;1023 以下先接引言字 */
html body .o-center #visit .paths { margin-top: 0; }
/* 線下面左邊接字、右邊接外框的兩區:外框往下移到跟左邊字頂同高(都是線下 32),線上下才一樣遠,左右也對齊 */
html body .o-center #team > .wrap > .sec-head { margin-bottom: calc(var(--tl-gap) * var(--tl-ratio) - 9.8px); }   /* opt2.css 用 #team 另寫了 24,要同樣有 id 才蓋得過 */
html body .o-center #team .sl-team { margin-top: 9.5px; }    /* 合照原本線下 24.5 → 32 */
html body .o-center #faq .faq-body { margin-top: 9.5px; }    /* 分類鈕原本線下 22.5 → 32 */
/* 大標字級會隨螢幕縮放(客戶 clamp 30–42),字越小、字底到線的空氣越少(1440 = 32、手機 = 30.2)。
   線上方內距跟著字級補:內距 = 29.85 − 0.1417 × 大標字級(量兩個字級推出來的直線),任何寬度線上都 ≈ 31.8 = 線下接字的距離 */
html body .o-center .sec-head { padding-bottom: calc(29.85px - .1417 * clamp(30px, 3.2vw, 42px)); }

/* 評論頁籤下面的綠色指示線,改成跟標題列那段綠線同一款(10-20 Eric:「頁籤下方的綠色線條是不是沒對齊他下面的灰色線條?」):
   原本 3px 粗、兩端圓角、底部貼齊灰線 → 往上多凸 2px、兩端圓圓的,跟 1px 的灰線看起來對不上。
   改成 2px、直角、底部貼齊灰線(= 標題列灰線開頭那段綠線的做法) */
html body .o-center #voices .rv-tabs::after { height: 2px; border-radius: 0; bottom: -1px; }

/* 常見問題展開時,問題下面加一條灰線隔開問與答(10-20 Eric:「收合容器展開時 Q 下面加一條灰線隔開,讓 Q 和 A 比較有分隔感,比較好閱讀」):
   線畫在答案段落的頂邊;問題下 24 → 線 → 24 → 答案(問答同字級行高,兩邊空氣對稱:1440 量問題字底 → 線 27.8、線 → 答案字頂 27.5) */
html body .o-center #faq details.faq-i[open] > p { padding-top: var(--s-5); background: linear-gradient(var(--ln), var(--ln)) no-repeat 0 calc(-1 * var(--s-5)) / 100% 1px; background-origin: content-box; }
/* 10-20 Eric:「展開後灰線對齊標題左邊,不要對齊數字,數字下方空白」→ 線從答案文字的左緣(= 問題標題左緣 64)畫到右內距,題號底下留白
   (畫在內容框上:左右跟著答案文字走,上下往上移 24 回到段落頂邊)。手機原本答案不縮排(24)、題目從 60 開始 → 答案也縮到 60,標題、線、答案同一條左緣 */
@media (max-width: 767px) { html body .o-center #faq .faq-i p { padding-left: 60px; } }

/* 常見問題的收合箭頭換成 SVG(10-20 Eric:「好,換成 svg」):原本是 10×10 方塊只畫右下兩邊 2px 再轉 45°,
   粗細跟其他 SVG 細線箭頭(1.4)不一致 → 改用同一套細線(16×16、線寬 1.4、往下的 V,幾何中心在 16 框正中),
   用遮罩畫在原本的位置(右 24、上下置中),顏色照舊客戶綠;展開時轉 180° 變成往上 */
html body .o-center #faq .faq-i summary::after { width: 16px; height: 16px; margin-top: -8px; border: 0; background: var(--c-green); transform: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 5.75l4.5 4.5 4.5-4.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 5.75l4.5 4.5 4.5-4.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; }
html body .o-center #faq .faq-i[open] summary::after { transform: rotate(180deg); margin-top: -8px; }

/* 常見問題分類鈕不釘住(10-20 Eric:「頁籤捲動的時候有問題,這邊不用做釘住吧,客戶之前版本的遺毒嗎?」):
   客戶早期把所有分頁列(.tabs)做成「釘在頁首下面 76」+ 毛玻璃底,方便長內容裡隨時切換;後來常見問題的分類改成膠囊鈕、
   拿掉了底色,卻沒拿掉釘住和毛玻璃 → 捲動時鈕浮在題目卡上、後面的字被模糊。我們的頁首也不再釘住,76 的位置本身就不對 */
html body .o-center .faq-tabs { position: static; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* 收合箭頭加小圓圈(10-20 Eric:「上下 icon 加個小圓圈包住」):照本站圓形鈕 — 直徑 32、底 #D8D2C6、箭頭深綠;
   滑過整題時圓變客戶綠、箭頭變白(同評論左右鈕)。箭頭仍是同款細線 SVG(16、線寬 1.4),畫在圓的正中;展開時整顆轉 180°。
   題目右內距 56 → 72(圓 32 + 右 24 + 與題目留 16) */
html body .o-center #faq .faq-i summary { padding-right: 72px; }
html body .o-center #faq .faq-i summary::after { width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; -webkit-mask: none; mask: none; transition: transform .3s, background-color .2s;
  background: #D8D2C6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 5.75l4.5 4.5 4.5-4.5' fill='none' stroke='%233B5348' stroke-width='1.4'/%3E%3C/svg%3E") center / 16px 16px no-repeat; }
html body .o-center #faq .faq-i[open] summary::after { margin-top: -16px; }
@media (hover: hover) { html body .o-center #faq .faq-i summary:hover::after { background-color: var(--c-green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 5.75l4.5 4.5 4.5-4.5' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E"); } }

/* ── 嘉誼的樣子:輪播牆改版(10-20 Eric:「動畫要改,然後把疊在上面的說明文字也移下來;排版樣式還沒想到,先做一版我看看」)──
   ① 控制鈕三顆一組放右下:上一張 | 暫停 | 下一張(本站圓形鈕款 48、#D8D2C6、細線箭頭 SVG;上一張水平翻轉),間距 16 同評論區
   ② 照片說明從疊在照片左下的深色毛玻璃框,移到照片下面:名稱(18/500 深綠)+ 一句說明(18 #505150),照片下 16
   ③ 流動改由 opt2-space.js 控制(CSS 動畫關掉) */
html body .o-center #space .s3g-run ul { animation: none; }
html body .o-center #space .s3g-run { touch-action: pan-y; cursor: grab; }
html body .o-center #space .s3g-run:active { cursor: grabbing; }
html body .o-center #space .s3g figure { overflow: visible; border-radius: 0; }
html body .o-center #space .s3g img { border-radius: var(--r-card); -webkit-user-drag: none; user-select: none; }
html body .o-center #space .s3g figcaption { position: static; display: grid; gap: var(--s-1); padding: var(--s-4) 0 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #505150; font-size: var(--t-body) !important; line-height: 1.6; }
html body .o-center #space .s3g figcaption b { font-size: var(--t-body) !important; font-weight: 500; letter-spacing: .05em; color: var(--c-green-dk); }
html body .o-center #space .s3g-ctl { display: flex; justify-content: flex-end; gap: var(--s-4); margin-top: var(--s-5); }
html body .o-center #space .s3g-ctl .s3g-pause { margin: 0; }
html body .o-center #space :is(.s3g-prev, .s3g-next) { display: grid; place-items: center; width: var(--btn-h); height: var(--btn-h); padding: 0; border: 0; border-radius: 50%; background: #D8D2C6; color: var(--c-green-dk); cursor: pointer; transition: background-color .2s, color .2s; }
html body .o-center #space :is(.s3g-prev, .s3g-next):hover { background: var(--c-green); color: #fff; }
html body .o-center #space :is(.s3g-prev, .s3g-next) svg { width: 16px; height: 16px; display: block; }
html body .o-center #space .s3g-prev svg { transform: scaleX(-1); }

/* 空間照片說明的名稱前加小 J(10-20 Eric:「說明文字的標題加個 J icon,下面那排文字縮排」):同疼痛問題清單的 J(.58em 寬、客戶綠),
   J 跟名稱間距 16;下面那句說明縮排到名稱的字下面(整塊左內距 = J 寬 + 16,J 掛在左邊、跟名稱那一行上下置中) */
html body .o-center #space .s3g figcaption { position: relative; inset: auto; padding-left: calc(.58em + var(--s-4)); }   /* inset auto:舊的疊圖位置(左 16、下 16)在 relative 下會把說明往上推、壓到照片,要清掉 */
html body .o-center #space .s3g figcaption::before { content: ""; position: absolute; left: 0; top: calc(var(--s-4) + (1.6em - .94em) / 2); width: .58em; height: .94em; background: var(--c-green); -webkit-mask: var(--jmark) center / contain no-repeat; mask: var(--jmark) center / contain no-repeat; }

/* 「3D 設計示意,實際以現場為準」移到標題列下那句說明的下面(10-20 Eric:「字比較小,大概 14px,加個 * 號」):
   註腳用 14(中文地板 18 的例外,Eric 指定),前面加 *(用 CSS 加,客戶原文不動),靠左,跟上面那句說明隔 8 */
html body .o-center #space .s3g-h .s3-cap { grid-column: 1 / -1; margin: var(--s-2) 0 0; text-align: left; font-size: 14px !important; line-height: 1.6; color: #5C5D5B; }
html body .o-center #space .s3g-h .s3-cap::before { content: "*"; margin-right: 2px; }
/* 空間輪播控制鈕置中、上方拉開(10-20 Eric:「按鈕置中,上方 padding 增加」):靠右 → 置中;照片說明到按鈕 24 → 40 */
html body .o-center #space .s3g-ctl { justify-content: center; margin-top: var(--s-7); }
/* 「*3D 設計示意…」下方拉開(10-20 Eric:「下方 padding 增加」):原本到照片只有 18 → 48(= 其他區引言到內容的距離) */
html body .o-center #space .s3g-h { margin-bottom: 48px; }

/* 空間照片比例:桌機維持客戶的寬圖(1200×619 ≈ 1.94:1),手機改 4:3(10-20 Eric 同意)
   手機原本 293×151 像一條細帶看不清;4:3 → 293×220,裁掉左右(主體在中間)。原圖只有 1200 寬,桌機再裁會糊,所以桌機不動 */
@media (max-width: 767px) { html body .o-center #space .s3g img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%; } }

/* 10-20 預約交通:三顆預約按鈕併進下面的資訊清單(Eric 從 8 種排法選第 1 種;取代同日「欄距拉開、小標置中」那版)
   ・三條路變成清單列:左 = 誰(成人門診/兒童早療/不確定掛哪裡),右 = 按鈕(三顆同寬、靠右);列的上下內距、灰線、列距都跟下面清單一樣
   ・左邊標籤欄兩份清單統一 120(放得下「不確定掛哪裡」;原本 88,手機 72),下面地址、電話的內容線跟著對齊
   ・三條路和下面的資訊之間多空一列(Eric:「不確定下方多一列空白,分隔功能」)= 列距 12 + 一列單行資訊列的高 58 + 列距 12 */
html body .o-center #visit .paths { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; margin: 0 0 calc(12px + 58px + 12px); }
html body .o-center #visit .path { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 12px 0; border-top: 1px solid var(--ln-dk); }
html body .o-center #visit .path:first-child { border-top: 0; }
html body .o-center #visit .path-k { grid-column: 1; text-align: left; }
html body .o-center #visit .path .btn { grid-column: 3; width: 100%; }
html body .o-center #visit .facts > div { grid-template-columns: 120px minmax(0, 1fr); }

/* 10-20 品牌故事(收尾的 CTA 區)照客戶版型優化(Eric:「不要用標題系統,比較算 CTA 區塊」「應該用客戶的版型優化」;同日套過標題列,撤回)
   版型照客戶:左 = 大字英文、右 = 中文欄(上方一條線)、兩欄底部對齊、左右 1.3 : 1。只把各項換成全站系統的值:
   ・上下內距 72 → --o-pad(1440 = 120、手機 64),跟其他區一樣;欄距 48 → 56(全站大欄距)
   ・大字英文:Inter 500、最大 88 → Inter Tight 400、字距 -.01em(全站英文大標)、最大 72(字級表最大一級)
   ・右欄:線 = 淺底不會動的線 #CECAC1;線到中文句 18 → 24;中文句 24(引言)、下距 16;嘉/誼 原本 24 夾在 18 的句子裡撐開行距 → 同 18、字重 500、深綠
   ・三個連結換全站元件:線上預約 = 主要按鈕、官方 LINE = 次要按鈕、品牌故事 = 文字連結(500、文字底線);按鈕與上面的字距 24 */
html body .o-center #story { padding: var(--o-pad) 0; }
html body .o-center #story .rj-in { column-gap: var(--s-8); row-gap: var(--s-7); align-items: start; }
/* 10-20 Eric:「英文字體放大一點我看」→ 最大 72 回到客戶原本的 88(1440 = 86、1920 = 88) */
html body .o-center #story .rj-en { font-family: "Inter Tight", Inter, sans-serif; font-weight: 400; font-size: clamp(44px, 6vw, 88px); line-height: 1; letter-spacing: -.01em !important; }
/* 10-20 Eric:「上面那條灰線拿掉」→ 右欄頂線與線下內距都拿掉 */
html body .o-center #story .rj-side { border-top: 0; padding-top: 0; }
html body .o-center #story .rj-zh { margin: 0 0 var(--s-4); }
html body .o-center #story .sl-name { margin: 0 0 var(--s-5); line-height: 1.85; }
html body .o-center #story .sl-name b { font-size: var(--t-body) !important; font-weight: 500; color: #3B5348; }
html body .o-center #story .rj-links { align-items: center; gap: var(--s-3) var(--s-3); }
html body .o-center #story .rj-links .btn-ghost:hover { border-color: var(--ln-act); }
/* 10-24 Eric:「品牌故事沒有對齊」→ 左邊 12 是跟前面兩顆按鈕隔開用的,10-22 按鈕拿掉後歸 0,跟上面文字左緣切齊 */
html body .o-center #story .rj-links .tlink { margin-left: 0; border-bottom: 0; padding-bottom: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* 10-20 Eric:「英文標題對齊右文上緣」→ 兩欄改頂部對齊(上面 .rj-in 的 align-items: start),再用筆畫頂端對齊:
   英文字頂在行框下 0.114em(Inter Tight、行高 1),中文句字頂在行框下 16.5px(32 字、行高 59.2)→ 英文往下推 16.5px − 0.114em
   (中文句改字級時這個 16.5 要跟著重量) */
@media (min-width: 768px) { html body .o-center #story .rj-en { margin-top: calc(16.5px - .114em); } }
/* 10-20 Eric:「從疼痛,走回生活的喜悅。改成 32px 看看」→ 24(引言)改 32(小標級) */
html body .o-center #story .rj-zh { font-size: var(--t-h3) !important; }
/* 10-20 Eric:「按鈕上面 padding 空一行」→ 嘉/誼那段到按鈕列 24 → 空一整行 = 那段的行高 1.85em(33.3) */
html body .o-center #story .sl-name { margin-bottom: 1.85em; }

/* 10-20 頁尾「本網站禁止…轉錄」那句(Eric:「不用用卡片,改成上下兩條線,要不然文字沒對齊」):
   原本四邊框 + 圓角 8 + 左右內距 16 → 字比上下其他頁尾字往右縮 17。改成只留上下兩條線(深底白 20%)、左右內距 0、上下內距 12 */
html body .ft .ft-legal .legal-notice { border-width: 1px 0; border-radius: 0; padding: var(--s-3) 0; }
/* 10-20 頁尾兩顆按鈕(線上預約/加入官方 LINE)上方的線拿掉、只留下方那條(Eric)。上方那條是頁尾上半部(.ft-top)的底線 */
html body .ft .ft-top { border-bottom: 0; }

/* 10-20 門診區 5 個系統修正(Eric:「好 一起改」)
   ① 有框按鈕的箭頭:文字「→」換 SVG(標記在 build-opt2.py;全站 5 顆次要按鈕一起換),箭頭 16×16 */
html body .o-center .btn > svg { width: 16px; height: 16px; flex: none; }
/* ② 綠色面板「撥打電話」號碼原本換到第二行(按鈕 56 高)→ 放回同一行,跟「線上預約」一樣 48 */
html body .o-center .now-tel { flex-direction: row; gap: var(--s-2); white-space: nowrap; }
html body .o-center .now-tel span { white-space: nowrap; }
/* ③「休診/已結束」標籤:綠色面板 26、週班表 30 和 20 → 統一高 28、左右內距 12 */
html body .o-center :is(.nr-s, .sl .now-tag) { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--s-3); line-height: 1; box-sizing: border-box; border-radius: 999px; }
/* ④ 門診時間與日期的數字改 Inter(系統:英文與數字用 Inter;電話號碼本來就是),大小照舊 15 */
html body .o-center :is(.nr-t small, .sl-t small, .day-date) { font-family: Inter, sans-serif; }
/* ⑤ 粗體 700 → 500(全站只用 400/500):下一診、復健狀態、今天/明天、看診中標籤 */
html body .o-center .now-next b, html body .o-center .rh-pill, html body .o-center .day-tag, html body .o-center .nr-now .nr-s { font-weight: 500; }
/* 10-20 門診區公告白卡改整排寬(Eric 同意):原本吃到跟評論說明句共用的 max-width 36em(= 648),右緣不對齊任何東西 → 跟下面綠色門診面板左右切齊 */
html body .o-center #hours > .wrap > .hh-ann { max-width: none; }

/* 10-20 綠色門診面板 = 今天的門診+復健,分兩類(Eric:「全部都放進綠卡」→「一張綠卡分兩類」;同上面「今天」條的分類,標記在 build-opt2.py)
   ・左欄:今天・週二 → 小標「門診」→ 下一診、早/午/晚三列、門診說明 → 一條線 → 小標「復健治療」→ 狀態標籤+下一個時段 → 規則三點(白圓點)
   ・兩個小標同樣式:18、字重 500、米白 #EAE5DA(深綠底上的小標用米白);小標到內容 8;兩類之間上下各 24、中間一條白 20% 線
   ・狀態標籤同「休診/已結束」:白框、高 28;手機標籤和句子上下排 */
html body .o-center #hours .now-card { grid-template-areas: "k btns" "cat btns" "next btns" "main btns" "note btns" "rehab btns"; }
@media (max-width: 1024px) { html body .o-center #hours .now-card { grid-template-areas: "k" "cat" "next" "main" "note" "rehab" "btns"; } }
html body .o-center #hours .now-card :is(.now-cat, .rh-k) { margin: 0 0 var(--s-2); font-size: var(--t-body); font-weight: 500; line-height: 1.85; color: #EAE5DA; }
html body .o-center #hours .now-card .now-cat { grid-area: cat; margin-top: var(--s-5); }
html body .o-center #hours .now-card .now-k { margin-bottom: 0; }   /* 原本 6:今天 → 小標「門診」才會跟線 → 小標「復健治療」一樣是 24 */
html body .o-center #hours .now-card .rehab-card { grid-area: rehab; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "k k" "pill main" "note note"; column-gap: var(--s-3); align-items: center; margin: var(--s-5) 0 0; padding: var(--s-5) 0 0; border: 0; border-top: 1px solid var(--ln-dk); border-radius: 0; background: none; color: #fff; }
html body .o-center #hours .now-card .rh-k { grid-area: k; }
html body .o-center #hours .now-card .rh-main { grid-area: main; margin: 0; color: #fff; }
html body .o-center #hours .now-card .rh-pill { grid-area: pill; justify-self: start; display: inline-flex; align-items: center; height: 28px; margin: 0; padding: 0 var(--s-3); border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; line-height: 1; color: #fff; white-space: nowrap; }
html body .o-center #hours .now-card .rh-pill.open { background: #EAE5DA; border-color: #EAE5DA; color: #3B5348; }
html body .o-center #hours .now-card .rh-note { grid-area: note; margin: var(--s-3) 0 0; padding: 0; list-style: none; color: #fff; }
html body .o-center #hours .now-card .rh-note li { position: relative; padding-left: var(--s-4); line-height: 1.85; }
html body .o-center #hours .now-card .rh-note li::before { content: ""; position: absolute; left: 0; top: calc(.925em - 2px); width: 4px; height: 4px; border-radius: 50%; background: #fff; }
@media (max-width: 767px) {
  html body .o-center #hours .now-card .rehab-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "pill" "main" "note"; row-gap: var(--s-2); }
}

/* 10-20 醫師篩選鈕的小圓章跟膠囊端的半圓同心(Eric:「圓圈和膠囊要對到同心圓」,入憲「同心鐵律」):
   膠囊高 48、圓章 32 → 圓章離膠囊上/下/左都 = (48 − 32) ÷ 2 = 8(原本照文字內距 24,圓心偏右 16) */
html body .o-center .df:has(> .d) { padding-left: calc((var(--btn-h) - 32px) / 2); }

/* 10-20 週班表休診格改回虛線框(Eric 看客戶版:「休診有用虛線,我覺得可以用」;取代 10-19「休診格不加虛線框,只留淡字」)
   虛線 1px、淺底不會動的線色 #CECAC1,圓角同時段小卡 8;沒有底色 → 跟有門診的小卡一眼分得出來 */
html body .o-center .day .sl-off { border: 1px dashed var(--ln); border-radius: 8px; background: transparent; }

/* 10-20 綠卡按鈕下那句只在逗號後換行(Eric):前後半句各自不斷行 */
html body .o-center .now-tip .nw { display: inline-block; white-space: nowrap; }

/* 10-20 週班表休診格:「休」改「休診」膠囊(Eric:「休字要不要也改成休診完整的 badge」→ 同意;標記在 build-opt2.py)
   樣式同「已結束」:淡綠底深綠字、高 28;今天欄(淡綠底)改白底。同一格原本另有客戶程式加的「今日休診」,意思重複 → 不顯示,所有日子的休診格長一樣 */
html body .o-center .day .sl-off .off-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--s-3); border-radius: 999px; background: #E8EEEA; color: #3B5348; font-size: var(--t-body); line-height: 1; white-space: nowrap; }
html body .o-center .day .sl-off .now-tag { display: none; }

/* 10-20 週班表做法 A(Eric:「先做 A」):週班表不掛時間狀態標籤(已結束/目前時段/今日有診,客戶程式加的),過去的時段改用變淡表示
   原因:只有今天欄的小卡多一行標籤,整列被撐高,其他五欄底下留白;今天的逐診狀態上面綠卡已經講了
   ・已結束的時段淡到 50%(= 已過去的日子整欄 50%,過去只有一種說法);正在看診的時段靠米白底凸顯 */
html body .o-center .week .sl .now-tag { display: none; }
html body .o-center .week .sl.done { opacity: .5; }

/* 10-20 週班表「今天」改成只有欄頭變綠(Eric:「用 B 只有欄頭變綠;整張綠有點重,綠深底跟其他卡片難看出是同一個系統」;取代同日整欄綠底)
   ・欄頭 = 卡片頂端一條客戶綠色帶:貼齊卡片上、左、右邊,圓角同卡片 12(貼邊、間距 0 → 同心);日期白字、「今天」米白實心膠囊 28
   ・色帶靠負邊距貼邊、內距補回,字的位置跟其他五欄一模一樣,各列照樣對齊
   ・卡片其餘照舊:淡綠底、白色時段小卡 */
/* 各天卡片的透明邊框拿掉(原本一般 1、今天 2,今天的字會多偏 1px,色帶也貼不到卡邊);欄頭到第一張小卡 10 → 24(間距階) */
html body .o-center #hours .day { border-width: 0; }
html body .o-center #hours .day .day-h { margin-bottom: var(--s-5); }
/* 今天的色帶:上/左/右貼卡邊(負邊距 16 = 卡片內距),內距 16 四邊一樣;色帶底到第一張小卡 8(= 小卡之間的距離),字和小卡位置跟其他五欄完全一樣 */
html body .o-center #hours .day.today .day-h { margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) var(--s-2); padding: var(--s-4); border-radius: 12px 12px 0 0; background: var(--c-green); }
html body .o-center #hours .day.today :is(.day-h b, .day-date) { color: #fff; }
html body .o-center #hours .day.today .day-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--s-3); border-radius: 999px; background: #EAE5DA; color: #3B5348; line-height: 1; }
/* 各天卡片的內容欄不准被撐寬:1100–1440 寬卡片只有 152–158,「圓章 32 + 醫師名字」那行放不下,原本把整欄撐寬,時段小卡和今天的色帶都超出卡片右緣 3–9 */
html body .o-center #hours .week > .day { grid-template-columns: minmax(0, 1fr); }

/* 10-20 門診區各塊間距統一並拉開(Eric:「公告卡/綠卡/只看/白卡週表/週日休診說明之間的間距統一並拉開;公告卡現在有點開,其他又有點太擠」)
   原本 1440:公告→綠卡 48、綠卡→篩選 28、篩選→週表 20、週表→說明 16 → 一律 40(間距階);手機一律 28。手機「左右滑動」提示算週表的一部分,跟週表維持 8 */
html body .o-center #hours { --hh-gap: var(--s-7); }
@media (max-width: 767px) { html body .o-center #hours { --hh-gap: var(--s-6); } }
html body .o-center #hours > .wrap > .hh-ann { margin-bottom: var(--hh-gap); }
html body .o-center #hours .now-pair { margin: 0 0 var(--hh-gap); }
html body .o-center #hours .docfilter { margin-bottom: var(--hh-gap); }
html body .o-center #hours > .wrap > .note { margin-top: var(--hh-gap); }
/* 10-20 Eric:「今天不做白底嗎」→ 今天那張卡除了欄頭色帶,其餘跟其他五天一模一樣:白底卡、淡綠時段小卡、休診膠囊淡綠(原本今天卡淡綠底+白小卡,顏色反過來) */
html body .o-center #hours .day.today { background: #fff; }
html body .o-center #hours .day.today .sl:not(.sl-off):not(.now) { background: #E8EEEA; }

/* 10-20 「過去」只有一種淡法(Eric:「兩個都淡出,怎麼底色看起來不一樣?」)
   原本過去的日子整張卡 50%(白卡透出米色底 → 卡和小卡都變灰),今天已結束的只有小卡 50%(疊在白卡上 → 很淺)
   → 一律卡片維持白底,只讓時段小卡(連同裡面的字)和日期字淡到 50%
   (同日 Eric 改:「先把結束的時段改成整張淡成半透明透出米色底」→ 改成檔尾那段,這裡的兩條規則已撤) */

/* 10-20 週班表六欄放不下時改一排左右滑(Eric:「手機不是做成一排左右滑就好嗎,用程式定位到今天為第一格」;定位在 opt2-week.js)
   六欄要放得下,每天的卡至少 162(「圓章 32 + 醫師名字」那行 + 小卡內距 + 卡片內距)→ 整排 6×162 + 5×12 = 1032;
   1025 以上但這區寬度不到 1032(螢幕約 1100–1440)→ 卡片固定 208(放得下「早診 40 + 等寬時間 101.6」+ 兩層內距 64,時間不換行)一排排開、可左右滑、停在卡片開頭;各列照樣對齊。1024 以下照舊(平板三欄兩排、手機一排滑) */
html body .o-center #hours > .wrap { container: hours / inline-size; }
@media (min-width: 1025px) {
  @container hours (max-width: 1079px) {
    html body .o-center #hours .week { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 216px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: var(--s-3); }
    html body .o-center #hours .week > .day { scroll-snap-align: start; }
    html body .o-center #hours .swipe-hint { display: block; margin: 0 0 var(--s-2); }
  }
}
/* 手機週表滑動的停靠點要算進週表左內距 16(原本停在週表外緣,卡片貼到螢幕邊 4,今天定位也被拉回去) */
@media (max-width: 767px) { html body .o-center #hours .week { scroll-padding-inline: 16px; } }

/* 10-20 結束的時段 = 整張淡成半透明、透出米色底(Eric:「先把結束的時段改成整張淡成半透明透出米色底」)
   ・過去的日子:整張卡 50%(客戶原本的做法,白卡透出米色)
   ・今天已結束的時段:小卡疊在白卡上,直接 50% 只會透出白 → 底色直接調成「透出米色」那個色(小卡色與米色各半;休診格 = 白與米色各半),
     裡面的字、圓章、膠囊淡 50%,看起來跟過去日子的時段一樣 */
html body .o-center #hours .week .sl.done { opacity: 1; }
html body .o-center #hours .day:not(.past) .sl.done:not(.sl-off) { background: color-mix(in srgb, #E8EEEA 50%, #EAE5DA); }
html body .o-center #hours .day:not(.past) .sl.done.sl-off { background: color-mix(in srgb, #fff 50%, #EAE5DA); border-color: color-mix(in srgb, #CECAC1 50%, #EAE5DA); }
html body .o-center #hours .day:not(.past) .sl.done > * { opacity: .5; }
/* 10-20 Eric:「為什麼還是看起來不一樣」→ 小卡顏色已一樣,差在周圍:週一整張卡淡成米白、今天的卡是白 → 同色小卡放在不同底上看起來不同
   → 「淡」只發生在時段小卡上:過去的日子也維持白卡,日期字淡 50%,每張小卡用跟今天已結束一樣的「透出米色」淡法 */
html body .o-center #hours .day.past { opacity: 1; }
html body .o-center #hours .day.past .day-h { opacity: .5; }
html body .o-center #hours .day.past .sl:not(.sl-off) { background: color-mix(in srgb, #E8EEEA 50%, #EAE5DA); }
html body .o-center #hours .day.past .sl.sl-off { background: color-mix(in srgb, #fff 50%, #EAE5DA); border-color: color-mix(in srgb, #CECAC1 50%, #EAE5DA); }
html body .o-center #hours .day.past .sl > * { opacity: .5; }

/* 10-20 時段小卡第一行(Eric:「早診和時間沒有置中嗎?時間也沒有和醫生對齊左邊嗎?」→ 查到左右差 3.2、上下差 1.4)
   ・「早診」包成固定寬一格 = 圓章 32 + 圓章到名字的間距 8 → 時間左緣 = 下面醫師名字左緣(放不下時時間整段換到下一行)
   ・「早診」18 與時間 15 照底線對齊時,時間的字心比中文低 1.4 → 時間往上提 .093em(= 1.4),兩者上下置中 */
html body .o-center .week .sl-t { display: flex; flex-wrap: wrap; align-items: baseline; }
html body .o-center .week .slot-k { flex: 0 0 calc(32px + var(--s-4)); margin: 0; }   /* class 原本叫 sl-k,跟區塊小標 .sl-k 撞名、吃到下距 24,時間那行被撐高 → 改名 slot-k */
html body .o-center .week .sl-t small { translate: 0 -.093em; }
/* 時間數字改等寬(每個時段的時間一樣寬):不然 08:30–12:00 和 14:00–17:00 寬度不同,卡片剛好在邊界時同一排有的換行、有的不換 */
html body .o-center .week .sl-t small { font-variant-numeric: tabular-nums; }
/* 10-20 Eric:「午診和 14:00–17:00 中間有 padding,不要連續」→ 圓章到醫師名字 8 → 16,「午診」那格同步 48(= 32 + 16):
   時間仍對齊名字左緣,「午診」到時間空出約 10。滑動版卡寬跟著 208 → 216(48 + 時間 101.6 + 兩層內距 64);六欄門檻跟著變:每天至少 170 → 6×170 + 5×12 = 1080 */
html body .o-center .week .sl-d { gap: var(--s-4); }

/* 10-20 結束的時段改成「原本的顏色 + 透明度」(Eric:「希望是一樣的綠色,調整透明度而已;休診就保持沒有顏色;白色底也有透明度」;取代上面「調成透出米色那個色」的做法)
   ・已結束/過去的時段小卡 = 原本的淡綠 #E8EEEA 透明 50%;休診格沒有底色,虛線也 50%;裡面的字、圓章、膠囊照舊 50%
   ・過去的日子:白卡也透明 50%(米色透出來);今天這天還沒過完,白卡不透明 */
html body .o-center #hours .day.past { background: rgba(255, 255, 255, .5); }
html body .o-center #hours :is(.day.past .sl, .day:not(.past) .sl.done):not(.sl-off) { background: rgba(232, 238, 234, .5); }
html body .o-center #hours :is(.day.past .sl, .day:not(.past) .sl.done).sl-off { background: transparent; border-color: rgba(206, 202, 193, .5); }
/* 10-20 今天的門診都結束了 → 今天的卡也跟過去的日子一樣半透明(Eric:「對使用者來說的今天,是今天的門診時間,不是實際今天要過的時間」)
   條件:今天這張卡裡已經沒有「有醫師、還沒結束」的時段(客戶程式每分鐘更新 .done,這裡自動跟著切);綠色欄頭照舊標今天
   還沒結束的休診格也一起淡(整天門診已結束) */
html body .o-center #hours .day.today:not(:has(.sl:not(.sl-off):not(.done))) { background: rgba(255, 255, 255, .5); }
html body .o-center #hours .day.today:not(:has(.sl:not(.sl-off):not(.done))) .sl:not(.sl-off) { background: rgba(232, 238, 234, .5); }
html body .o-center #hours .day.today:not(:has(.sl:not(.sl-off):not(.done))) .sl.sl-off { background: transparent; border-color: rgba(206, 202, 193, .5); }
html body .o-center #hours .day.today:not(:has(.sl:not(.sl-off):not(.done))) .sl > * { opacity: .5; }

/* 10-20 綠卡順序(Eric:「下一診 明天(週三)這句的文字和大小,讓我以為下方三個時段是週三的;其實是今天週二的」)
   原本:今天・週二 → 門診 → 下一診 明天… → 早/午/晚三列(大字的「下一診」像是三列的標題)
   改成:今天・週二 → 門診 → 早/午/晚三列 → 下一診 明天…(看完今天的狀態,再給下一步)→ 門診說明 → 復健 */
html body .o-center #hours .now-card { grid-template-areas: "k btns" "cat btns" "main btns" "next btns" "note btns" "rehab btns"; }
@media (max-width: 1024px) { html body .o-center #hours .now-card { grid-template-areas: "k" "cat" "main" "next" "note" "rehab" "btns"; } }
html body .o-center #hours .now-card .now-next { margin: var(--s-5) 0 0; }

/* 10-20 綠卡做法 B(Eric:「早診 08:30–12:00 本時段休診也要有透明度,都過了卻還是正常透明度」):
   時間過了的列一律淡,不管有沒有醫師(nr-past 由 build-opt2.py 替換客戶程式加上);只有還能去的列全亮。淡度跟週表一樣 50%(原本已結束列是 62%) */
html body .o-center #hours .now-card :is(.nr-done, .nr-past) { opacity: .5; }
/* 10-20 「今天・週二 10/20」是整張綠卡的標題,原本 18 比下面「下一診」24 還小 → 24、字重 500(Eric:「是不是字體要大一點」) */
html body .o-center #hours .now-card .now-k { font-size: var(--t-lead) !important; font-weight: 500; }
/* 10-20 綠卡「依固定班表計算;臨時休診與代診以官方 LINE 公告為準。」改 14、前面加 *(Eric;同空間輪播「*3D 設計示意」的註腳樣式)
   改成註腳後貼著上面「下一診」:間距 14 → 8(註腳離它說明的句子 8,同 *3D 那條) */
html body .o-center #hours .now-card .now-note { margin-top: var(--s-2); font-size: 14px !important; line-height: 1.6; }
html body .o-center #hours .now-card .now-note::before { content: "*"; margin-right: 2px; }
/* 10-20 Eric:「依固定班表計算… 上方 padding 增加」→ 離「下一診」8 → 16 */
html body .o-center #hours .now-card .now-note { margin-top: var(--s-4); }
/* 10-20 綠卡右欄(Eric:「選醫師、選時段,完成線上預約 上方 padding 增加;跟上面兩個按鈕加起來,對齊置中旁邊的灰線」)
   ・說明句離「撥打電話」12 + 2 → 24
   ・整組(第一顆按鈕頂 → 說明句最後一行字底)在灰線高度內上下置中:說明句行框底下多半個行距(7.5),用負下距扣掉,置中就以字為準 */
@media (min-width: 1025px) {
  html body .o-center #hours .now-btns .now-tip { margin: calc(var(--s-5) - 12px) 0 -7.5px; }
}

/* 10-20 「門診 / 復健 / 公告」這組分類小標一律粗體 700(Eric:「今天儀表板的小標 700 不用改,反而其他有這幾個小標的地方要用粗體」)
   = Banner 下「今天」條的小標(本來就 700);門診綠卡的「門診」「復健治療」;門診區公告卡的「公告」 */
html body .o-center #hours .now-card :is(.now-cat, .rh-k) { font-weight: 700; }
html body .o-center .hh-ann b { font-weight: 700; }

/* 10-20 週表今天已結束的時段:時間換成「已結束」三個字(Eric:「換」),同一行、同位置(對齊醫師名字),不多一行;
   字是中文 → 18(中文地板)、不做數字的上提;跟整格一起淡 50%。休診格沒有時間,照舊 */
html body .o-center #hours .day.today .sl.done:not(.sl-off) .sl-t small { display: none; }
html body .o-center #hours .day.today .sl.done:not(.sl-off) .sl-t::after { content: "已結束"; font-size: var(--t-body); line-height: inherit; }

/* 10-20 頁尾重排(Eric:「頁尾加一下 menu,優化一下排版,現在看起來有點 no design」;結構在 build-opt2.py)
   ・上排四欄(照客戶 v2 原本的骨架):標誌+兩顆按鈕 | 選單 | 診所 | 門診;按鈕不再獨立一排,上排底下保留一條線(= 原本「按鈕下方那條」)
   ・欄位小標(選單/診所/門診)粗體,同「門診/復健/公告」這組分類小標
   ・法律說明:寬螢幕兩欄並排(客戶 v2 原本就是兩欄);轉錄聲明上下線;最後一排左版權、右預覽版標記;線上下各 40 */
@media (min-width: 1025px) { html body .ft .ft-top { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); } }
html body .ft .ft-top { column-gap: var(--s-7); padding-bottom: var(--s-7); border-bottom: 1px solid var(--ln-dk); }
html body .ft .ft-id { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-6); }
html body .ft .ft-id .ft-cta { display: grid; gap: var(--s-3); width: 100%; max-width: 280px; padding: 0; border: 0; }
html body .ft .ft-id .ft-cta .btn { width: 100%; }
html body .ft .ft-h { font-weight: 700; }
html body .ft .ft-nav nav { display: grid; gap: var(--s-2); }
html body .ft .ft-nav nav a { color: #fff; text-decoration: none; font-size: var(--t-body); line-height: 1.6; }
html body .ft .ft-nav nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
html body .ft .ft-legal { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-7); padding-top: var(--s-7); }
html body .ft .ft-legal > ul { grid-column: 1 / -1; grid-row: 1; }
html body .ft .ft-legal > .legal-notice { grid-column: 1 / -1; grid-row: 2; margin-top: var(--s-5); }
html body .ft .ft-legal > .ft-c { grid-column: 1; grid-row: 3; margin-top: var(--s-5); }
html body .ft .ft-legal > .o-pv { grid-column: 2; grid-row: 3; margin-top: var(--s-5); text-align: right; }
@media (min-width: 901px) { html body .ft .ft-legal li.ft-wide { grid-column: auto !important; } }
@media (max-width: 767px) {
  html body .ft .ft-id .ft-cta { max-width: none; }
  html body .ft .ft-nav nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .ft .ft-legal { grid-template-columns: minmax(0, 1fr); }
  html body .ft .ft-legal > .o-pv { grid-column: 1; grid-row: 4; margin-top: var(--s-2); text-align: left; }
}
/* 頁尾選單手機也要顯示:客戶 v2 舊樣式在 767 以下把 .ft-nav 藏起來(Eric 要頁尾加選單 → 手機照樣有,兩欄並排) */
@media (max-width: 767px) { html body .ft .ft-nav { display: block; } }

/* 10-20 漢堡選單最下面加品牌標語「Recover joy, together.」(Eric):英文大字同全站英文標語(Inter Tight 400、-.01em、客戶綠),推到抽屜底部 */
html body .rr-drawer .rr-slogan { margin: auto 0 0; padding-top: var(--s-7); font: 400 32px/1.05 "Inter Tight", Inter, sans-serif; letter-spacing: -.01em !important; color: var(--c-green); }

/* 10-20 資訊多的卡片(醫師、治療方式、評論)內距跟著螢幕寬度放大(Eric:「這三張內距太小,資訊都比較多,看得有點壓迫,但又不想破壞系統」)
   不新增級數:在系統既有的「一般卡 24」和「大面板 40」之間平滑過渡 —— 1100 寬以下 24、1800 寬以上 40(1440 ≈ 32);同排卡片同寬 → 內距一定一樣 */
html body .o-center { --info-pad: clamp(24px, calc((100vw - 1100px) * 16 / 700 + 24px), 40px); }
html body .o-center #adult .sl-tc-b,
html body .o-center #voices .rv-c > figure,
html body .o-center #team .sl-docs3 > li { padding: var(--info-pad); }

/* 10-20 頁尾品牌大字「Recover joy, together.」(Eric:用 MaoKing / TBI 頁尾用過的大字效果;同日試過背景跑馬燈,撤;結構在 build-opt2.py、動畫開關在 opt2-ftword.js)
   ・照 TBI .tbi-ftWord:字撐滿頁尾內容寬(Inter Tight 400、-.02em,字級 = 11.1cqw:字母各包一格後沒有字距微調,這句在 100px 時實寬 900.8 → 100/9.008),淺色實字米白 #EAE5DA
   ・位置:轉錄聲明之後、最底版權列之前;上距 80,到版權列 40(手機 40 / 24)
   ・動畫:字母依序從自己底下的隱形線升上來(115% → 0,0.95 秒、每字慢 0.06 秒,曲線同 TBI);離開畫面收回、再進來重播;減少動態時直接顯示 */
html body .ft .ft-legal > .ft-word { grid-column: 1 / -1; grid-row: 3; margin-top: var(--s-9); container-type: inline-size; overflow: hidden; }
html body .ft .ft-word-in { margin: 0; font: 400 11.1cqw/1.25 "Inter Tight", Inter, sans-serif; letter-spacing: -.02em !important; color: #EAE5DA; white-space: nowrap; }
html body .ft .ft-word .ftl { display: inline-block; letter-spacing: -.02em !important; transform: translateY(115%); transition: transform .95s cubic-bezier(.2, .85, .3, 1) calc(var(--i) * .06s); }
html body .ft .ft-word.is-in .ftl { transform: none; }
@media (prefers-reduced-motion: reduce) { html body .ft .ft-word .ftl { transform: none; transition: none; } }
html body .ft .ft-legal > :is(.ft-c, .o-pv) { grid-row: 4; margin-top: var(--s-7); }
@media (max-width: 767px) {
  html body .ft .ft-legal > .ft-word { margin-top: var(--s-7); }
  html body .ft .ft-legal > .ft-c { margin-top: var(--s-5); }
  html body .ft .ft-legal > .o-pv { grid-row: 5; margin-top: var(--s-2); }
}
/* 10-20 頁尾法律說明「醫療審閱」那條裡的「參考資料」從新的一行開始(Eric:「參考資料沒有斷行」);標籤後面照樣接內容,跟其他條同寫法 */
html body .ft .ft-legal .ft-b2 { display: inline; }   /* 客戶樣式把標籤設成行內小方塊,換行會被包在方塊裡 → 改回一般行內字 */
html body .ft .ft-legal .ft-b2::before { content: "\A"; white-space: pre; }
/* 10-20 頁尾兩顆按鈕的底 = 選單最後一項「交通位置」的字底(Eric)。只在按鈕跟選單並排的寬度(768 以上)
   選單欄:小標 32.4 + 下距 10 + 6 個連結 + 5 個間距 8;「交通位置」字底在最後一個連結行框底往上 (連結高 ÷ 2 − 9.08)
   → 字底離欄頂 = 91.48 + 5.5 × 連結高(1200 以上連結高 28.8 → 249.9;768–1199 客戶設成好點的 44 → 333.5,量過一致)
   標誌那欄做成這個高度,標誌在上、按鈕貼底;不靠「撐滿整排」,因為 1280 寬時「診所」那欄比選單高 */
@media (min-width: 768px) { html body .ft .ft-id { --ftl-h: 44px; height: calc(91.48px + 5.5 * var(--ftl-h)); justify-content: space-between; } }
@media (min-width: 1200px) { html body .ft .ft-id { --ftl-h: 28.8px; } }

/* 10-20 全頁掃描:7 處不在系統內 → 照系統改(Eric:「好 一起改」)
   1. 中文 16 → 18(中文地板):週表「左右滑動」提示、疼痛問題「回到依療程找」 */
html body :is(.o-center .swipe-hint, .tx-back) { font-size: var(--t-body) !important; }   /* 「回到依療程找」不在 .o-center 裡 */
/* 2. 色板外的字色:三段說明(.lead)藍灰 #4E535A → 內文灰 #505150;醫師卡職稱 #6B6C6A → 次要灰 #5C5D5B */
html body .o-center .lead { color: #505150; }
html body .o-center .sd-r { color: #5C5D5B; }
/* 3. 圓角收進 8/12/膠囊:右側欄按鈕與漢堡鈕 4 → 8;地圖的 P 小方塊 6 → 8 */
html body .o-body > .rail .rr-menu { border-radius: 8px; }   /* opt2.css 寫的 4 是 .o-body > .rail-r 起頭,要同樣明確才蓋得過 */
html body .o-center #visit :is(.mp-near, .mp-lg) .mp-p { border-radius: 8px; }   /* map.css 裡 1025/1440 那兩條 6px 也已直接改成 8 */
/* 4. 字距:中文 .05em、全大寫英文 .1em、其他英數 .05em */
html body .rail-l ol a span, html body .rail-r .rr-t { letter-spacing: .05em !important; }
html body .rail-r .rr-t small, html body .rail-l .rl-cur b { letter-spacing: .05em !important; }
html body .rail-r .rr-top-t { letter-spacing: .1em !important; }
html body .o-center #voices .rv-k { letter-spacing: .05em !important; }
/* 5. 字重只用 400/500(分類小標 700 例外):左側欄編號 600 → 500;首屏九格條編號 700 → 500 */
html body .rail-l .rl-cur b, html body .hero .hc-n b { font-weight: 500; }
/* 6. 評論綠卡大數字回字級表:「5.0」64 → 56(特大)、「35」44 → 42(大標) */
html body .o-center #voices .rv-num { font-size: var(--t-xl); }
html body .o-center #voices .rv-n span { font-size: var(--t-h2); }
/* 7. 深底上的線只用兩階(白 20% 不會動的、白 70% 可以按的):首屏九格條外框 14% → 20%;暫停鈕外框 60% → 70% */
html body .hero .hero-nav { border-color: var(--ln-dk); }
html body .hero .hn-pause { border-color: var(--ln-dk-act); }

/* 10-20 深底上的白字透明度收成兩階(Eric:「好 收成兩階」):主要 100%、次要 72%(原本 100/90/88/86/82/72/70 七種)
   主要:首屏「嘉義・友忠路」那行、首屏英文標語、頁尾地址電話門診;次要:綠色帶英文副標、頁尾轉錄聲明、版權(法律說明本來就 72) */
html body .hero :is(.hero-eyebrow, .hero-en), html body .ft .ft-col p { color: #fff; }
html body .o-center #adult .band-pair, html body .ft :is(.legal-notice, .ft-c) { color: rgba(255, 255, 255, .72); }
/* 10-20 綠卡狀態標籤外框白 50% → 20%(Eric:「改 20%」):標籤不能點,用深底「不會動的線」那階;70% 留給可以按的外框 */
html body .o-center #hours .now-card :is(.nr-s, .rh-pill) { border-color: var(--ln-dk); }
html body .o-center #hours .now-card .nr-now .nr-s { border-color: #EAE5DA; }   /* 「看診中」是米白實心標籤,框維持跟底同色 */

/* 10-20 背景大字(疼痛問題 Just Right、兒童早療 Just Joy)統一(Eric:「介於兩個之間,一個太小一個太大;壓到標題沒關係,顏色很淡;Just Right 上面太擠要往下,標題不用動」)
   ・大小:螢幕寬 12.5%(1440 ≈ 180;最小 96、最大 240),原本 103(疼痛問題)/ 274(兒童早療)
   ・位置:都從區塊頂往下 40(手機 24),原本疼痛問題貼頂 0
   ・速度:兩區一樣快(流動時間依一半長度換算,寫在 --mq-t,下一條) */
html body .o-center :is(#find, #kids) .bgw-mq .bgw-tr { top: var(--s-7); }
html body .o-center :is(#find, #kids) .bgw-mq .bgw-tr span { font-size: clamp(77px, 10vw, 192px); }   /* 10-21 Eric:「跑馬燈的字有點太大,縮小一點,維持現在上下 padding」→ 12.5vw(96–240)整組 ×0.8;區塊版面不動,opt2-bgw.js 照舊把字放在區塊頂與灰線正中間 */
@media (max-width: 767px) { html body .o-center :is(#find, #kids) .bgw-mq .bgw-tr { top: var(--s-5); } }
/* 背景大字流動速度兩區一樣:1440 寬時每秒約 30px(= 兒童早療原本的速度)。8 份之後一半的長度(字距 −.02em):Just Right 20.4 × 字級、Just Joy 17.6 × 字級
   → 流一圈的時間 = 一半長度 ÷ 30:Just Right 122 秒、Just Joy 105 秒(字級跟螢幕寬一起變,兩區速度一直一樣) */
html body .o-center #find .bgw-mq .bgw-tr { animation-duration: 98s; }   /* 字縮 0.8 → 整條也短 0.8,時間跟著 ×0.8(122→98)速度才不變 */
html body .o-center #kids .bgw-mq .bgw-tr { animation-duration: 84s; }   /* 105→84 */
/* 10-20 背景大字字距沒縮(Eric:「我知道問題了,大字字距沒縮」):吃到全站內文字距 +.05em → 改回客戶原本 −.02em(大字要比內文緊) */
html body .o-center :is(#find, #kids) .bgw-mq .bgw-tr span { letter-spacing: -.02em !important; }

/* 全站入場動畫「階梯上滑」(10-21 Eric 定案 A;邏輯在 opt2-enter.js)
   每一拍上滑 40 + 淡入,1 秒,一拍間隔 0.12 秒;進場跑完 JS 加 en-done,下面的規則就不再套用,元素回到原本樣子 */
.en-on .mo [data-reveal], .en-on [data-reveal] { opacity: 1 !important; transform: none !important; }   /* 原本 3 處淡入關掉,由這套接手 */
.en-on [data-en]:not(.en-done) { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.33, 1, .68, 1) var(--en-d, 0s), transform 1s cubic-bezier(.33, 1, .68, 1) var(--en-d, 0s); }
.en-on [data-en].en-in:not(.en-done) { opacity: 1; transform: none; }

/* 10-21 手機頁首(Eric:「header 都跑版了,logo 縮小,留三條線的漢堡按鈕就可以」)
   跑版原因:system.css 的按鈕規則把「線上預約」在手機也撐出來,擠得「主選單」折成兩行的橢圓
   → 手機藏掉「線上預約」(底部快捷列已經有「預約」);「主選單」改成跟桌機右欄同一顆漢堡鈕(綠底白線 48×48、圓角 8),平板也一樣 */
@media (max-width: 900px) {
  html body .hd .mnav summary { display: grid; place-items: center; width: var(--btn-h); height: var(--btn-h); min-height: 0; padding: 0; border: 0; border-radius: 8px; background: var(--c-green); transition: background-color .2s; }
  html body .hd .mnav summary:hover, html body .hd .mnav[open] summary { background: var(--c-green-dk); }
  .mnav-bars { display: grid; gap: 4px; }
  .mnav-bars i { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s, opacity .3s; }
  .mnav[open] .mnav-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .mnav[open] .mnav-bars i:nth-child(2) { opacity: 0; }
  .mnav[open] .mnav-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  html body .hd .mnav nav { top: calc(100% + 8px); }
}
@media (max-width: 767px) {
  html body .hd .hd-cta { display: none; }
  html body .hd .hd-logo img { width: auto; height: 32px; }   /* 原本 43 高 → 32 */
}

/* 10-21 手機明顯錯誤(Eric:「不用一區一區調,這是我目前看到比較明顯的錯誤,你調就可以了」) */
@media (max-width: 767px) {
  /* ① 綠色帶三張卡只剩英文:客戶手機樣式把號碼、中文標題、說明藏起來(他手機原本做成分頁鈕),改成卡片後要放回來 */
  html body .o-center .sl-3j :is(.jt-n, .jt-h, .jt-s) { display: block; }
  /* ② 疼痛問題分頁鈕「BY TREATMENT」整串放不下(107 > 95)→ 三顆都一個字一行(BY / AREA…),排法一致、中文標題對齊;內距左右 8 → 4,344 寬也放得下 TREATMENT */
  html body .o-center #find .tabs-f .tab { padding-inline: var(--s-1); }
  html body .o-center #find .tabs-f .tab em { word-spacing: 100vw; }
  /* ③ 評論分頁鈕中文 15 → 18(中文地板) */
  html body .o-center #voices .rv-tab { font-size: var(--t-body); }
  html body .o-center #voices .rv-tab .t-s { font-size: var(--t-body) !important; white-space: nowrap; }   /* 344 寬時格線把字欄算窄,「看診」會折成兩行 */
  /* ⑤ 綠卡中文標題手機 24(原本就這樣設計,但被「六張卡同一套」那條含 #find 的規則以 ID 權重蓋成 32,344 寬會折行)→ 加 #adult 壓回 */
  html body .o-center #adult .sl-3j li a .jt-h { font-size: var(--t-lead) !important; }
}
@media (max-width: 560px) {
  /* ④ 初診流程:客戶手機是左圖右文,字放大後右欄太窄、照片下面空一大塊 → 跟桌機同一張卡:照片在上、字在下;
     照片改正方形、取景偏上 30%(四張人物的頭都在畫面中上段,不會被切) */
  html body .o-center .first-photo .steps4 li { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; column-gap: 0; row-gap: 0; align-items: stretch; }
  html body .o-center .first-photo .steps4 li :is(.st-img, h4, p), html body .o-center .first-photo .steps4 li::before { grid-area: auto; }
  html body .o-center .first-photo .steps4 li::before { padding: var(--s-5) var(--s-5) 0; }
  html body .o-center .first-photo .steps4 h4 { margin-bottom: var(--s-5); padding: 0 var(--s-5); }
  html body .o-center .first-photo .steps4 p { padding: 0 var(--s-5) var(--s-5); font-size: var(--t-body) !important; }
  html body .o-center .first-photo .st-img img { aspect-ratio: 1 / 1; object-position: 50% 30%; }
}

/* 10-21 醫師卡點一下也換照片(邏輯在 build-opt2.py 替換的 jj-edit.js ⑤):桌機與平板滑鼠游標變手指,看得出可以點 */
@media (min-width: 768px) { html body .o-center .sl-docs3 li[data-doc] { cursor: pointer; } }

/* 10-21 右側欄直排字放回(Sandy:「右側選單原本有誼是剛剛好,再麻煩協助加上」;客戶文字,opt2 一開始拿掉了)
   位置照客戶:漢堡鈕下、聯絡按鈕上。中文跟左側欄直排字同一套(18、字距 .28em、深綠);英文用全站英文小字(Inter 12、.1em、客戶綠)
   螢幕太矮放不下:先收英文、再收整組(門檻是量出來的,見下) */
@media (min-width: 1200px) {
  html body .o-body > .rail-r .rr-brand { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); margin: 0 0 var(--s-5); writing-mode: horizontal-tb !important; }
  html body .o-body > .rail-r .rr-brand .rb-zh { writing-mode: vertical-rl; font-size: var(--t-body); line-height: 1; letter-spacing: .28em; color: var(--c-green-dk); }
  html body .o-body > .rail-r .rr-brand .rb-en { writing-mode: vertical-rl; font: 400 var(--t-en-s)/1 Inter, sans-serif; letter-spacing: .1em !important; color: var(--c-green); }
}
/* 門檻量出來的(1440/1920 同):直排字底到聯絡按鈕頂要留 ≥ 24。整組(中 138 + 24 + 英 152)要螢幕高 ≥ 847;只留中文要 ≥ 671(10-21 聯絡鈕間距 2→8 後重量,原本 817/641)。漢堡鈕不准被擠扁 */
@media (min-width: 1200px) {
  html body .o-body > .rail-r :is(.rr-menu, .rr-brand, .rr-list) { flex-shrink: 0; }
}
@media (min-width: 1200px) and (max-height: 846px) { html body .o-body > .rail-r .rr-brand .rb-en { display: none; } }
@media (min-width: 1200px) and (max-height: 670px) { html body .o-body > .rail-r .rr-brand { display: none; } }

/* 10-21 兒童區:實景小照疊回插畫左下(Sandy:「虛擬圖+實景應該要放一起當對照」;Eric:「照片疊照片好了,客戶喜歡比較重要」)
   照客戶縮減版原樣,用客戶 v2.css 的 .inset(寬 34%、左 −24、下 −32、白框 7、影子;手機 44%、左 8、下 −28、框 4)——站規「不疊、不加影子」在這裡讓位給客戶;
   外圓角 8(客戶),內圖圓角照同心鐵律 8 − 7 = 1(客戶原本 3);卡片列拿掉實景那格 → 3 欄。中間的「並排同高」版做過、換進主版後被這版取代 */
html body .o-center #kids.kv-inset .fig-wide { overflow: visible; }
html body .o-center #kids.kv-inset .fig-wide > .inset { z-index: 1; border-radius: 8px; box-shadow: 0 20px 40px -16px rgba(30, 40, 35, .45); }   /* 影子照客戶 v2.css(opt.css 早期把 .inset 影子拿掉了) */
html body .o-center #kids.kv-inset .fig-wide > .inset img { border-radius: 1px; }
@media (min-width: 768px) { html body .o-center #kids.kv-inset .sl-kids { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 10-21 右側欄下方聯絡按鈕改回圓形(Eric:「右側 bar 下方的按鈕都要改回圓形,客戶指定的」):48×48 圓、滑過往左展開成膠囊(客戶原本 999px);
   間距 2 → 客戶原本 8(2 是方塊排成一整條時的縫,圓形黏太近);上方漢堡鈕不在「下方」,維持圓角 8 */
@media (min-width: 1200px) {
  html body .o-body > .rail-r .rr-b { border-radius: 999px; }
  html body .o-body > .rail-r .rr-list { gap: var(--s-2); }
}
/* 10-21 綠卡復健「最後報到 20:00」看不清楚(Eric 截圖):客戶 v2.css .rh-main b 是白卡用的磚紅 #96503C 700,搬進綠卡對比只剩 1.26
   → 深底上的強調時間 = 白字 500 + 數字 Inter(同綠卡其他時間) */
html body .o-center #hours .now-card .rh-main b { color: #fff; font-weight: 500; font-family: Inter, sans-serif; }

/* 10-21 手機版「第一次來」四步、「三位醫師」改左右滑的輪播(Sandy:「手機版的第一次來與三位醫師介紹,可以修改為輪播圖嗎」)
   照站上評論卡/週班表的滑法:一張 85% 寬、露出下一張的邊、滑完一張停好(scroll-snap)、第一張左緣對齊內文(20)、不自動跑;
   卡片同高,卡內各類照整排共用橫向格線(subgrid),滑動時標題、內文不會上下跳 */
@media (max-width: 767px) {
  html body .o-center :is(#first .steps4, #team .sl-docs3) { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(85%, 320px); column-gap: var(--s-4); row-gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; }
  html body .o-center :is(#first .steps4, #team .sl-docs3)::-webkit-scrollbar { display: none; }
  html body .o-center :is(#first .steps4, #team .sl-docs3) > li { scroll-snap-align: start; }
  html body .o-center #first .steps4 { grid-template-rows: auto auto auto 1fr; }
  html body .o-center #first .steps4 > li { grid-row: span 4; display: grid; grid-template-rows: subgrid; }
  html body .o-center #team .sl-docs3 { grid-template-rows: auto auto auto auto auto 1fr auto; }
  html body .o-center #team .sl-docs3 > li { grid-row: span 7; display: grid; grid-template-rows: subgrid; row-gap: 2px; }
  html body .o-center #team .sl-docs3 > li > .sd-ph { grid-row: 1; }
  html body .o-center #team .sl-docs3 > li > .sd-r { grid-row: 2; }
  html body .o-center #team .sl-docs3 > li > .sd-n { grid-row: 3; }
  html body .o-center #team .sl-docs3 > li > .sd-l { grid-row: 4; }
  html body .o-center #team .sl-docs3 > li > .sd-t { grid-row: 5; }
  html body .o-center #team .sl-docs3 > li > .sd-h { grid-row: 7; }
  html body .o-center #first .st-img img { aspect-ratio: 1 / 1; object-position: 50% 30%; }   /* 卡寬上限 320(大手機橫拿時卡片才不會寬到 476、高到 830);步驟照片整個手機範圍都正方形 */
}

/* ══ 10-22 Sandy 第二輪回饋(客戶回饋-20261022;確認單答案在 artifact db responses/jiayi-r2;HTML 改動在 build-opt2.py 同名段)══
   這段只有照改的部分;疼痛問題重提、Just Right 去留、團隊改團體為主、左右選單平衡、小綠人放哪 → 等 Eric */

/* 第 1 條 首屏遮罩淡 20%:客戶左側、底部、上緣那幾層暗(::before)整層 ×0.8;手機底部那層(::after)同樣 ×0.8。
   電腦平板的 ::after 是四個圓角的疊角,不能動;捲動變暗的 .hero-veil 不動 */
html body .hero::before { opacity: .8; }
@media (max-width: 767px) { html body .hero::after { opacity: .8; } }
/* 第 1 條 首屏兩顆按鈕(自費療程治療、健保門診預約):同一個樣子並排,窄到放不下才折行 */
html body .hero .doors { display: flex; flex-wrap: wrap; gap: var(--s-3); }
html body .hero .doors .door-go { grid-column: auto; }
/* 第 1 條 手機首屏盡量整張:手機版首屏圖都是 4:5,首屏高 = 寬 × 1.25 圖就整張露出(內容放不下時才再長高);
   「01 / 09」圖說拿掉後,文字底部只要讓出九段細線(下 16 + 高 56)+ 間距 24 */
@media (max-width: 767px) {
  html body .hero, html body .hero .hero-in { min-height: 125vw; }
  html body .hero .hero-in { padding-bottom: 96px; }
}
/* 平板:圖說拿掉後,文字底部只讓出膠囊(下 24 + 高 72)+ 間距 40 */
@media (min-width: 768px) and (max-width: 1199px) { html body .hero .hero-in { padding-bottom: 136px; } }

/* 第 2 條 頁首「線上預約」拿掉後,平板手機的選單鈕自己推到最右邊 */
html body .hd .mnav { margin-left: auto; }

/* 第 3 條 今天條・門診:狀態膠囊 + 醫師名字大字 + 一行補充(opt2-today.js 排) */
html body .o-center [data-td-clinic] { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
html body .o-center .td-st { display: inline-flex; align-items: center; gap: var(--s-2); height: 28px; padding: 0 var(--s-3); border-radius: var(--r-pill); background: #E8EEEA; color: var(--c-green-dk); font-size: 14px; font-weight: 400; line-height: 1; white-space: nowrap; }   /* 10-24 Eric:「稍後開診怎麼縮排了,是膠囊嗎」→ 原本米底 = 今天條自己的底色,膠囊看不見只剩內距 → 先改反灰,Eric:「改成白色膠囊好了」→ 白底;再改「是不是應該跟休診同形式,淺綠底配深綠字?比較統一」→ 淡綠 #E8EEEA+深綠字 */
html body .o-center .td-st.on { background: var(--c-green); color: #fff; }
html body .o-center .td-st.on::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: td-pulse 1.6s ease-in-out infinite; }
@keyframes td-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { html body .o-center .td-st.on::before { animation: none; } }
html body .o-center .td-doc { display: flex; flex-direction: column; gap: 2px; }
html body .o-center .td-doc b { font-size: var(--t-lead); font-weight: 500; line-height: 1.35; color: var(--c-green-dk); }
html body .o-center .td-doc small, html body .o-center .td-nx { font-size: 16px; color: var(--c-ink); }
/* 第 3 條 今天條・公告:每則一個連結,日期一行粗體;不只一則時疊在同一格輪播(opt2-today.js 加 .td-rot / .on) */
html body .o-center .td-ann > span { display: grid; gap: var(--s-2); }
html body .o-center .td-an { display: block; color: var(--c-ink); text-decoration: none; }
html body .o-center .td-an-d { display: block; color: var(--c-green-dk); font-weight: 500; }
html body .o-center .td-an:is(:hover, :focus-visible) .td-an-t { text-decoration: underline; text-underline-offset: 3px; }
html body .o-center .td-ann > span.td-rot { gap: 0; }
html body .o-center .td-rot > .td-an { grid-area: 1 / 1; transition: opacity .4s, transform .4s; }
html body .o-center .td-rot > .td-an:not(.on) { opacity: 0; transform: translateY(8px); pointer-events: none; }

/* 第 8 條 背景大字不跑馬燈:只留一個字,置中不動(上下位置照舊由 opt2-bgw.js 算) */
html body .o-center .bgw-mq .bgw-tr.bgw-still { left: 50%; animation: none; transform: translateX(-50%); }
html body .o-center .bgw-mq .bgw-tr.bgw-still span { padding-right: 0; }

/* 第 10 條 評論數字從 0 跑上來時寬度不跳(opt2-count.js) */
html body .o-center .rv-sum :is(.rv-num, .rv-n > span, .rv-dist b) { font-variant-numeric: tabular-nums; }
html body .o-center .rv-n > span { display: inline-block; min-width: 2ch; text-align: right; }

/* 第 15 條 環境照片:滑鼠移到照片上,照片蓋一層黑、標題與說明置中出現(能滑過的電腦平板);手機沒有滑過,說明照舊放在照片下面 */
@media (hover: hover) and (min-width: 768px) {
  html body .o-center #space .s3g figure { position: relative; }
  html body .o-center #space .s3g figcaption { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: var(--s-2); padding: var(--s-5); border-radius: 12px;
    background: rgba(0, 0, 0, .55); color: #fff; text-align: center; opacity: 0; transition: opacity .3s; }
  html body .o-center #space .s3g figcaption::before { display: none; }
  html body .o-center #space .s3g figcaption b { font-size: var(--t-lead) !important; color: #fff; }
  html body .o-center #space .s3g figure:hover figcaption { opacity: 1; }
}

/* 第 16 條 預約與交通:綠底換成診所門面插畫 + 一層暗,白字照舊看得清楚;按鈕只剩自費、健保兩顆(底圖 10-23 依追問單改斜角街景) */
html body .o-center #visit.vs-photo { background: linear-gradient(rgba(24, 30, 27, .62), rgba(24, 30, 27, .62)), url("img/street-1600.webp") center 64% / cover no-repeat; }   /* 10-23 追問單第 8 題:改斜角街景(原本用首屏門口那張) */
html body .o-center #visit .paths2 { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* 第 5 條 手機快捷列 → 右下角可收合的浮動按鈕(opt2-fab.js):收起時只有一顆「預約・聯絡」,點開往上展開五個連結;
   頁面底部原本替快捷列留的 56 不用留了 */
.mbar-tg { display: none; }
@media (max-width: 767px) {
  html body { padding-bottom: 0; }
  html body .mbar, html body .mbar.kids-mode { left: auto; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2);
    padding: 0; background: none !important; box-shadow: none; }
  html body .mbar a, html body .mbar.kids-mode a { display: none; }
  html body .mbar.open a { display: inline-flex; align-items: center; justify-content: center; min-width: 112px; height: 48px; padding: 0 var(--s-5); border: 0; border-radius: var(--r-pill);
    background: #fff; color: var(--c-green-dk); font-weight: 500; box-shadow: 0 8px 24px -12px rgba(31, 42, 37, .45); }
  html body .mbar.open a:first-child { background: var(--c-green); color: #fff; }
  html body .mbar-tg { display: inline-flex; align-items: center; gap: var(--s-2); height: 56px; padding: 0 var(--s-5) 0 var(--s-4); border: 0; border-radius: var(--r-pill);
    background: var(--c-green); color: #fff; font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: .05em; box-shadow: 0 10px 28px -12px rgba(31, 42, 37, .6); cursor: pointer; }
  html body .mbar-ic { position: relative; flex: none; width: 16px; height: 16px; }
  html body .mbar-ic i { position: absolute; left: 0; top: 7px; width: 16px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .25s; }
  html body .mbar-ic i + i { transform: rotate(90deg); }
  html body .mbar.open .mbar-ic i { transform: rotate(45deg); }
  html body .mbar.open .mbar-ic i + i { transform: rotate(135deg); }
}

/* ══ 10-23 Sandy 追問單答案(db responses/jiayi-r2b;HTML 改動在 build-opt2.py 同名段)══ */
/* 第 1 題 背景大字(Just Right/Just Joy)換有質感的英文字:Bodoni Moda 斜體 400(比過三款,10-23 Eric 選這款「粗細對比強的時尚款」) */
html body .o-center :is(#find, #kids) .bgw-mq .bgw-tr span { font-family: "Bodoni Moda", Georgia, serif !important; font-style: italic; font-weight: 400; letter-spacing: 0 !important; }
/* 第 6 題 醫療團隊只放團隊:醫師卡拿掉後,合照獨佔一整排 */
html body .o-center #team .sl-team { display: block; }
html body .o-center #team .sl-team .team3-img img { width: 100%; height: auto; aspect-ratio: 3 / 2; }   /* 10-24 換全體團體照(原圖 3:2),原本三醫師合照 16:9 */

/* ══ 10-23 疼痛問題重做:A 生活照入口 + B 小綠人地圖(HTML 在 build-opt2.py 同名段、互動 opt2-pain.js;提案頁 提案/疼痛問題重提-20261023/)══ */
html body #find .pw-box { display: block; }                                  /* 原本電腦版是「清單 | 面板」兩欄,改成一整塊 */
html body #find .pw { display: grid; grid-template-columns: calc(20.188% - 1.62px) minmax(0, 1fr); gap: var(--s-7); align-items: center; margin-top: var(--s-7); }   /* 10-23 Eric 第五刀「第一排卡片中線到第三排卡片中線」→ 第六刀「好像還是有點太大,再縮小一點點」:
   看得到的高 = 0.88 ×(第一排卡中線到第三排卡中線 = 2 ×(卡高 + 卡距 16));卡寬 =(內容寬 − 欄寬 − 72)÷ 3、卡高 = 卡寬 × 0.75
   → 欄寬 = 20.188% − 1.62px(1440 寬時 204 寬、看得到的高約 355,比上一刀小一成);垂直置中 */
/* 左:小綠人地圖,捲動時黏住;身上 6 個點(磚紅小圓+淡圈),選到的變深綠 */
html body #find .pw-gm { position: sticky; top: var(--s-7); }
html body #find .pw-fig { display: block; width: 100%; height: auto; }
html body #find .pw-dot { position: absolute; left: var(--x); top: var(--y); width: 32px; height: 32px; margin: -16px 0 0 -16px; padding: 0; border: 0; border-radius: 50%; background: rgba(150, 80, 60, .16); cursor: pointer; transition: background .2s; }
html body #find .pw-dot::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #96503C; transition: transform .2s, background .2s; }
html body #find .pw-dot:is(:hover, :focus-visible, .hov)::after { transform: scale(1.35); }
html body #find .pw-dot.on { background: rgba(87, 122, 110, .2); } /* 10-24 Eric 新規則:深綠只在品牌綠底上用 → 客戶綠 */
html body #find .pw-dot.on::after { background: var(--c-green); transform: scale(1.35); }
html body #find .pw-dot:focus-visible { outline: 2px solid var(--c-green); outline-offset: 2px; }
/* 右:生活照牆 3×3;照片下緣漸層壓一句生活裡的感覺+部位名 */
html body #find .pw-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
html body #find .pw-card { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; margin: 0; padding: 0; border: 0; border-radius: var(--r-card); overflow: hidden; background: #E8EEEA; font: inherit; text-align: left; cursor: pointer; }
html body #find .pw-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
html body #find .pw-card:hover img { transform: scale(1.04); }
html body #find .pw-t { position: absolute; left: 0; right: 0; bottom: 0; display: grid; padding: var(--s-7) var(--s-5) var(--s-5); background: linear-gradient(rgba(31, 42, 37, 0), rgba(31, 42, 37, .7)); color: #fff; }
/* 10-23 Eric:「卡片的格式太長」→ 卡片改 4:3,平常只有部位名;那句生活描述滑過、鍵盤選到、或已選才浮出(手機沒有滑過,只看部位名,那句在說明面板裡)
   10-24 Eric:「小字解釋下方 padding 增加,現在太擠」→ 小字與部位名之間 0 → 8 */
html body #find .pw-say { margin-bottom: var(--s-2); font-size: 16px !important; line-height: 1.5; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
html body #find .pw-card:is(:hover, :focus-visible, .hov, [aria-expanded="true"]) .pw-say { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html body #find .pw-say { transition: none; } }
html body #find .pw-n { font-size: 20px !important; font-weight: 500; line-height: 1.4; word-break: keep-all; text-wrap: balance; }   /* 放不下才折,只在「・」後面斷(build 在・後加 <wbr>),兩行盡量平均 */
/* 10-24 Eric:「疼痛部位文字 padding 沒有按照系統」→ 照卡片內距三級:一般卡片 24(上方 40 是漸層的高度);手機兩欄卡寬只有約 165,照小格子 16(在下方手機段) */
html body #find .pw-noimg .pw-t { top: 0; align-content: end; background: none; color: var(--c-green-dk); }   /* 沒有照片的兩張(術後、運動傷害):淡綠底深綠字 */
/* 10-24 Eric:「把框框去掉,選中的時候其他的卡片變暗」→ 選中的卡不加框,其他卡壓暗;滑過(或滑過小綠人身上的點)暗卡會亮回一大半,看得出點得到 */
/* 10-24 Eric 第二刀:「變暗的遮罩用綠色的看看,文字要在遮罩上面」→ 壓暗改成一層綠蓋在照片上、部位名浮在遮罩上;
   第三刀:「顏色怎麼跟品牌差這麼多,改成品牌顏色,透明度 -20% 左右」→ 深綠 #3B5348 × .78 改客戶綠 #577A6E × .6;第四刀「綠色太淡了,透明度減少一點」→ .7;第五刀「透明度調成 80%」→ .8;
   沒照片的兩張(淡綠底深綠字)被蓋時字改白 */
html body #find .pw-card.hov img { transform: scale(1.04); }
html body #find .pw-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(87, 122, 110, .8); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
html body #find .pw-t { z-index: 2; transition: color .35s ease; }
html body #find .pw-cards:has(.pw-card[aria-expanded="true"]) .pw-card:not([aria-expanded="true"])::before { opacity: 1; }
/* 10-24 Eric:「選中模式後 hover 綠色遮罩會淡出、看到灰色圖片,改成不要淡出」→ 滑過暗卡遮罩維持(原本退到 .4);滑過只剩照片微放大 */
html body #find .pw-cards:has(.pw-card[aria-expanded="true"]) .pw-noimg:not([aria-expanded="true"]) .pw-t { color: #fff; }
/* 第六刀:Eric 問「綠色怎麼看起來髒髒的」→ 原因 = 部位名底下的深色漸層疊在綠遮罩上面 + 灰暖色照片透上來沖淡綠;
   「變暗的卡片拿掉下方深色漸層,照片轉灰再蓋品牌綠」→ 被蓋的卡:漸層拿掉、照片轉黑白(滑過的暗卡也維持黑白,只是遮罩退到 .4) */
html body #find .pw-card img { transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .35s ease; }
html body #find .pw-t { transition: color .35s ease, background .35s ease; }
html body #find .pw-cards:has(.pw-card[aria-expanded="true"]) .pw-card:not([aria-expanded="true"]) img { filter: grayscale(1); }
html body #find .pw-cards:has(.pw-card[aria-expanded="true"]) .pw-card:not([aria-expanded="true"]) .pw-t { background: none; }
html body #find .pw-card:focus-visible { outline: 3px solid #96503C; outline-offset: 3px; }
/* 說明面板插在那一排後面,整排寬 */
html body #find .pw-cards > .fw-out { grid-column: 1 / -1; margin: var(--s-2) 0; }
/* 下面第二個入口「從生活找」:跟照片牆拉開距離;這區的 J 記號都不放(10-23) */
html body #find .pw-life { margin-top: var(--s-9); }
html body #find .lf-c::before { display: none; }
html body #find .lf-c { grid-template-columns: minmax(0, 1fr); }
html body #find .lf-c-go { grid-template-columns: minmax(0, 1fr) auto; }
html body #find .lf-c-go span { grid-column: 2; }
/* 平板、手機:不放小綠人地圖(點太小),只有照片牆;手機兩欄 */
@media (max-width: 1023px) {
  html body #find .pw { grid-template-columns: 1fr; }
  html body #find .pw-gm { display: none; }
}
@media (max-width: 767px) {
  html body #find .pw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  html body #find .pw-t { padding: var(--s-7) var(--s-4) var(--s-4); }
  html body #find .pw-n { font-size: 16px !important; }   /* 內距 12→16 後,7 個字的部位名(手肘・手腕・手指)20px 放不下一行 → 16(390 寬以上一行;更窄才折,只在「・」後面斷) */
}
/* 10-23 Eric:「小綠人 hover 點的時候,可以出現部位名稱」→ 點的上方浮出白色膠囊標籤;滑過照片卡、或已選的那個點也會顯示 */
html body #find .pw-tip { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 4px); padding: 4px 12px; border-radius: var(--r-pill); background: #fff; color: var(--c-green-dk); font-size: 16px; font-weight: 500; line-height: 1.5; white-space: nowrap; box-shadow: 0 6px 18px -8px rgba(31, 42, 37, .45); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
html body #find .pw-dot:is(:hover, :focus-visible, .hov, .on) .pw-tip { opacity: 1; transform: translate(-50%, 0); }
html body #find .pw-dot:is(:hover, :focus-visible, .hov, .on) { z-index: 2; }
/* 說明面板標題下那句生活描述 */
html body #find .pw-pq { margin: calc(-1 * var(--s-4)) 0 var(--s-5); font-size: var(--t-body) !important; color: #505150; }
/* 10-23 Eric:「有點太長了」→「從生活找」從一條一條的清單(約 1,200 高)收成每組一排膠囊:左邊組名、右邊膠囊;點了說明插在那一組後面 */
html body #find .pw-life .lf { display: block; }
html body #find .pw-life .lf-sub { margin-bottom: var(--s-5); }
html body #find .pw-life .lf-gs { gap: var(--s-4); }
html body #find .pw-life .lf-g { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-4); align-items: center; }
html body #find .pw-life .lf-q { margin: 0; }
html body #find .pw-life .lf-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
html body #find .pw-life .lf-c { display: inline-flex; align-items: center; width: auto; min-height: 44px; margin: 0; padding: 0 var(--s-5); border: 1px solid transparent; border-radius: var(--r-pill); background: #fff; color: var(--c-green-dk); font-size: 16px; line-height: 1.4; }   /* 10-24 Eric:「改成沒有綠框看看」→ 框改透明(留 1px 尺寸不變),只剩白底 */
html body #find .pw-life .lf-c::after { display: none; }
html body #find .pw-life .lf-c:not([aria-expanded="true"]):hover { background: #E8EEEA; }
html body #find .pw-life .lf-c[aria-expanded="true"] { background: var(--c-green); border-color: var(--c-green); border-radius: var(--r-pill); color: #fff; }
html body #find .pw-life .lf-c-go span { margin-left: var(--s-1); color: inherit; }
html body #find .pw-life .lf-gs > .lf-out { margin: 0; }
@media (max-width: 767px) { html body #find .pw-life .lf-g { grid-template-columns: 1fr; gap: var(--s-2); } }


/* ══ 10-23 換客戶新素材(HTML 在 build-opt2.py 同名段)══ */
/* 首屏第一張換院方指定主視覺(開門版):樓在正中間 → 電腦平板把圖靠左對齊,樓往右移,左邊多留給標題(院方:標題不要壓到招牌與亮燈的大門) */
@media (min-width: 768px) { html body .hero .hs:first-child picture img { object-position: 0% 50%; } }
/* ══ 10-23 小綠人導覽員(HTML 在 build-opt2.py 同名段、播放 opt2-gm2.js)══
   每組逐格圖同一畫布(各組畫布尺寸 --cw/--ch 由 JS 帶入,頭都一樣大),疊在一起只顯示 .on 那張;大小 = 畫布 × --gm-s(.32 = 站姿身高約 103) */
html body .gm2 { --gm-s: .32px; position: relative; display: inline-block; flex: none; width: calc(var(--cw, 229) * var(--gm-s)); height: calc(var(--ch, 335) * var(--gm-s)); pointer-events: auto; }
html body .gm2 img { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; opacity: 0; }
html body .gm2 img.on { opacity: 1; }
/* 首屏:兩顆預約按鈕右邊,腳底跟按鈕底對齊 */
html body .hero .doors { align-items: flex-end; }
html body .hero .gm-greet { --gm-s: .36px; margin-left: var(--s-3); }
@media (max-width: 767px) { html body .hero .gm-greet { display: none; } }   /* 手機兩顆按鈕已占滿寬,擠下去會掉到首屏外 */
/* 標題列:站在英文大字左邊 24px(JS 算 --gm-r)、腳踩英文字基線(JS 算 --gm-b;英文大字不顯示時踩灰線) */
html body .o-center .sec-head .gm-sec { position: absolute; right: var(--gm-r, 0px); bottom: var(--gm-b, 0px); }
@media (max-width: 767px) { html body .o-center .sec-head .gm-sec { --gm-s: .24px; right: 0; } }
/* 頁尾:最底那一行,版權在左、小綠人在右 */
html body .ft .ft-legal { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); }
html body .ft .gm-bye { --gm-s: .36px; order: 2; }
/* ══ 10-24 手機首屏避開招牌與大門(院方素材說明:「標題放天空區或左側建築區,不要壓到招牌與亮燈的大門」;Eric:「手機版的倒是全都壓到了」)══
   文字與兩顆按鈕整段移到招牌上方的建築區:從頁首下 16 開始,按鈕緊接引言(間距 16,不再推到底);兩顆按鈕固定一行(360 寬原本會折成兩行)。
   電腦版維持:只壓到招牌板左段素面綠,沒壓到標誌(10-24 Eric:「那個壓的位置還好,沒有壓到 logo」) */
@media (max-width: 767px) {
  html body .hero .hero-in { padding-top: 16px; }
  html body .hero .doors { margin-top: 16px; flex-wrap: nowrap; }
  html body .hero .doors > a { flex: 1 1 0; min-width: 0; white-space: nowrap; }
}
@media (max-width: 389px) { html body .hero .hero-h1 { font-size: clamp(34px, 10.2vw, 40px); } }   /* 窄螢幕首屏跟著變矮(高 = 寬 × 1.25),大標小一號才放得進招牌上方 */
/* ══ 10-24 評論區走路小綠人換立體版(HTML 在 build-opt2.py 同名段)══
   側身站(w0)平常顯示;走路時(opt2-gm.js 加 gm-walk)w1/w2 每 .2 秒交替 = 0.4 秒兩步(同 10-19 的步頻);
   往左走翻面(gm-left)、到了往下點一下(gm-arrive,用 translate 不跟翻面的 transform 打架)。
   大小:頁籤列上方留 34,高 36(人約 34)、寬照畫布 198:342 */
html body .o-center #voices .rv-gm { top: 0; width: 20.84px; height: 36px; left: calc(var(--i, 0) * 33.333% + 16.666% - 10.42px); }
@media (prefers-reduced-motion: no-preference) { html body .o-center #voices .rv-gm { transition: left 1.2s cubic-bezier(.35, 0, .65, 1), transform .2s ease; } }
html body .o-center #voices .rv-gm img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
html body .o-center #voices .rv-gm .w0 { opacity: 1; }
html body .o-center #voices .rv-gm.gm-walk .w0 { opacity: 0; }
html body .o-center #voices .rv-gm.gm-walk .w1 { animation: gmStep .4s linear infinite; }
html body .o-center #voices .rv-gm.gm-walk .w2 { animation: gmStep .4s linear infinite -.2s; }
html body .o-center #voices .rv-gm.gm-left { transform: scaleX(-1); }
html body .o-center #voices .rv-gm.gm-arrive { animation: gmBob2 .4s ease-in-out; }
@keyframes gmStep { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes gmBob2 { 0%, 100% { translate: 0 0; } 45% { translate: 0 2px; } }
/* ══ 10-24 左側欄拿掉那排 7 個 J 的區塊導覽(Eric:「拿掉好了,我也覺得那 7 個 J 很煩」;客戶第 12 條「J 太多」)══
   只是隱藏、不從頁面刪:上面「04 兒童早療」這個目前區塊標示,是客戶 v2.js 靠這排連結在換字的 */
html body .o-body > .rail-l .rl-nav { display: none; }
html body .o-body > .rail-l .rl-cur { margin-bottom: 0; }   /* 原本下面留 18 給那排 J;拿掉後歸 0,底邊跟右側欄最下面的「回到頂端」切齊 */
/* 10-24 Eric:右側欄「聯絡」兩個字拿掉(「我不知道他在聯絡什麼」);下面的按鈕本身已經寫了線上預約、LINE… */
html body .o-body > .rail-r .rr-k { display: none; }
/* ══ 10-24 醫療團隊團體版型(HTML 在 build-opt2.py 同名段)══
   上:左引言+按鈕、右全體合照(3:2);下:四組團體卡一排,沿用治療方式卡(白卡、圓角 12、照片 3:2、內距 24、英文小標磚紅 12),
   卡上只有英文小標+組名(組名 20,同疼痛卡部位名)。內容寬 892 以上四欄、以下兩欄;手機內距 16 */
html body .o-center #team > .wrap > .tm-tcs { grid-column: 1 / -1; grid-row: 6; margin-top: var(--s-7); }
/* 同一排的卡共用格線(照片/英文小標/組名三列):英文小標在窄寬度會折兩行(OCCUPATIONAL THERAPY),共用格線組名才對齊 */
/* 四欄或兩欄看「這一區內容有多寬」(不是看視窗):1200–1319 寬有左右側欄、中間較窄,四欄時「物理治療團隊 →」放不下一行 → 兩欄(10-24 Eric:「依照螢幕寬度換卡片排版位置」) */
html body .o-center #team > .wrap { container-type: inline-size; }
html body .o-center #team .tm-tcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; gap: var(--s-5); }
@container (min-width: 892px) { html body .o-center #team .tm-tcs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html body .o-center #team .tm-tcs > .sl-tc { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
html body .o-center #team .tm-tcs > .sl-tc > figure { grid-row: 1; margin: 0; aspect-ratio: 3 / 2; }
html body .o-center #team .tm-tcs > .sl-tc > .sl-tc-b { grid-row: 2 / span 2; display: grid; grid-template-rows: subgrid; row-gap: 0; }
html body .o-center #team .tm-tcs .tx-k { margin: 0 0 var(--s-2); font: 500 12px/1.6 Inter, sans-serif !important; letter-spacing: .1em !important; text-transform: uppercase; color: #96503C; }
html body .o-center #team .tm-tcs h3 { margin: 0; font-size: 20px !important; }
@media (max-width: 767px) {
  html body .o-center #team .tm-tcs { gap: var(--s-3); margin-top: var(--s-5); }
  html body .o-center #team .tm-tcs > .sl-tc > .sl-tc-b { padding: var(--s-4); }
}
/* 10-24 團體卡:整張卡是連結(連到團隊頁那一組);滑過照片淡入換成同一組的另一張(b 版),滑走換回;手機沒有滑過只看第一張 */
html body .o-center #team .tm-a { color: inherit; text-decoration: none; }
html body .o-center #team .tm-a figure { position: relative; overflow: hidden; }
html body .o-center #team .tm-a .tm-b { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) { html body .o-center #team .tm-a:hover .tm-b { opacity: 1; } }
html body .o-center #team .tm-a:focus-visible { outline: 3px solid #96503C; outline-offset: 3px; }
html body .o-center #team .tm-a h3 span { color: var(--c-green); }
/* ══ 10-24 手機加大點按範圍(Eric:「好」;手指好按 = 44 高),畫面不動:加上下內距、再用負外距抵掉 ══
   頁尾選單兩欄、每排間隔 37(連結 29 + 間距 8),加到 44 會跟上下排重疊 → 只加到 37 剛好填滿;
   頁尾電話、「看本週門診時間 →」是行內連結,上下內距不會撐開行高 → 直接加到 44;評論「來過嘉誼?寫下您的經驗 →」33 → 44 */
@media (max-width: 767px) {   /* 只在手機:平板(768–1023)這些連結原本就有內距、選單間隔 52,不用加 */
  html body .ft .ft-nav a { padding-block: 4px; margin-block: -4px; }
  html body .ft .ft-col:not(.ft-nav) a { padding-block: 9px; }
  html body .o-center #voices .rv-btns .tlink-light { padding-block: 5.5px; margin-block: -5.5px; }
}