/* 嘉誼首頁 opt2・「疼痛問題」區——三個頁籤同一個骨架(10-19 Eric:「最棘手的是三個頁籤內容沒有統一的結構」;依療程找也改成就地展開)
   試改 B(左清單右說明)/C(Apple 選購頁式)/D(三頁籤同一骨架)後選 D,10-19 併回主版。排在 system.css 後面;互動 find.js(三個頁籤同一套)。
   ── 骨架(三個頁籤都一樣)──
     ① 引言:24 綠標題 + 18 灰說明,上下灰線(依部位找原本沒有引言,10-19 照另外兩句的語氣補:build-opt2.py)
     ② 分組:組名 18 磚紅(依部位找只有一組,不顯示組名)
     ③ 項目:一列一項;J + 名稱 18 + 下面一行小字(部位 = 英文 12,療程 = 一句說明 18 灰,生活情境沒有),小字對齊名稱
     ④ 說明面板:標題 24 → 內容(小標 18 磚紅 + 內容 18)→ 提醒卡 → 預約按鈕列(線上預約 + 次要連結)→ 註腳 18 灰
   ── 層級(由重到輕)──
     頁籤(選中深綠滿版)> 引言標題 24 > 組名(磚紅)> 項目(無底色,選中 = 客戶綠卡片,比頁籤淺一階)
   電腦版:左欄 = 第一張分頁卡寬(分組+項目)、右欄 = 後兩張(說明面板,跟著捲動停住);手機:直排收合 */

/* ── 區塊開頭 ── */
html body #find .bgw-mq .bgw-tr { top: 0; }
html body #find .bgw-mq .bgw-tr span { font-size: calc(var(--o-pad, 120px) * .86); }
html body #find .lead { max-width: 36em; }

/* ── 頁籤(最重的一層)──(10-19 Eric:「依部位找文字放大;原版卡片沒有框線;沒選中通常反灰」)
   照初版 j-ortho 的卡片:不加框線,只用底色分狀態。
   選中 = 客戶深綠底 #3B5348、白字(最重);沒選中 = 往後退一階:#D8D2C6(客戶原本左側欄 J 漸層裡的色;10-19 Eric:#E3DDD1 跟區塊底太接近、#CECAC1 又太深,取中間)、字 #505150(灰米底上 #5C5D5B 對比不夠);
   滑過時名稱轉回深綠,告訴人「可以按」(只是退後,不是不能用)。名稱 18 → 24 → 32(Eric) */
html body #find .tabs-f { margin-bottom: var(--s-7); }
html body #find .tabs-f .tab { padding: var(--s-5); border: 0; background: #D8D2C6; box-shadow: none; transition: background-color .2s; }
html body #find .tabs-f .tab b { font-size: var(--t-h3); color: #505150; transition: color .2s; }   /* 10-19 Eric:名稱 32 看看 */
html body #find .tabs-f .tab :is(em, small) { color: #505150; }
html body #find .tabs-f .tab:hover { background: #D8D2C6; }
html body #find .tabs-f .tab:hover b { color: var(--c-green-dk); }
html body #find .tabs-f .tab.on, html body #find .tabs-f .tab.on:hover { background: var(--c-green-dk); }
html body #find .tabs-f .tab.on :is(b, small) { color: #fff; }
html body #find .tabs-f .tab.on em { color: #EAE5DA; }
html body #find .tabs-f .tab::after { content: none !important; }

/* ── ① 引言 ── */
html body #find :is(.lf, .tx) { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
html body #find .lf-h { margin: 0; padding-top: var(--s-5); border-top: 1px solid var(--ln); font-size: var(--t-lead) !important; font-weight: 500; color: var(--c-green); letter-spacing: .05em; }
html body #find .lf-sub { max-width: none; margin: 0 0 var(--s-7); padding: var(--s-2) 0 var(--s-5); border-bottom: 1px solid var(--ln); font-size: var(--t-body) !important; color: #5C5D5B; }   /* 10-19 Eric:引言上下用灰線隔開(線與字 24) */

/* ── ② 分組 ── */
html body #find .lf-gs { display: grid; grid-template-columns: 1fr; gap: var(--s-7); }
html body #find .lf-q { margin: 0 0 var(--s-2); padding: 0; border: 0; font-size: var(--t-body); font-weight: 500; letter-spacing: .05em; color: #96503C; }

/* ── ③ 項目(部位、生活情境、療程同一種列)──
   10-19 Eric:「每個都要有 J(客戶很喜歡那個小 J);下方英文縮排對齊中文;J+文字整塊跟卡片的內距不要太擠;
   選中的卡片用標準綠(頁籤選中深綠淺一階 = 客戶綠 #577A6E);變成卡片時上下的灰線要消失,不然卡片上下會疊兩條灰線」
   每列 = [J][名稱 / 下一行小字],J 離框 24、J 和字之間 12,小字跟名稱左緣同一條 */
html body #find :is(.fw-grid, .lf-chips) { display: grid; grid-template-columns: 1fr; gap: 0; }
html body #find :is(.fw-t, .lf-c) { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); row-gap: var(--s-1); align-items: start; width: 100%; min-height: 0; margin: 0; padding: var(--s-4) var(--s-5); border: 0; border-bottom: 1px solid var(--ln); border-radius: 0; background: transparent; box-shadow: none; transform: none; text-align: left; font: inherit; font-size: var(--t-body) !important; font-weight: 500; line-height: 1.6; color: var(--c-green-dk); text-decoration: none; cursor: pointer; transition: background-color .2s; }
html body #find :is(.fw-t, .lf-c)::before { content: ""; grid-column: 1; grid-row: 1; width: .58em; height: .94em; margin-top: .33em; background: var(--c-green); -webkit-mask: var(--jmark) center / contain no-repeat; mask: var(--jmark) center / contain no-repeat; }
html body #find :is(.fw-n, .tf-n) { grid-column: 2; grid-row: 1; display: block; font-size: var(--t-body) !important; color: var(--c-green-dk); }
html body #find :is(.fw-en, .tf-s) { grid-column: 2; grid-row: 2; }
html body #find .fw-n::before { content: none; }
html body #find .fw-en { color: #5C5D5B; }
html body #find .tf-s { font-weight: 400; color: #5C5D5B; }
html body #find .fw-a { display: none; }
html body #find :is(.fw-t, .lf-c):hover { background: rgba(232, 238, 234, .5); }
/* 選中 = 客戶綠卡片、白字白 J;自己和上一列的灰線都拿掉 */
html body #find :is(.fw-t, .lf-c)[aria-expanded="true"] { background: var(--c-green); border-bottom-color: transparent; border-radius: var(--r-card); color: #fff; }
html body #find :is(.fw-t, .lf-c)[aria-expanded="true"]::before { background: #fff; }
html body #find :is(.fw-t, .lf-c)[aria-expanded="true"] :is(.fw-n, .tf-n) { color: #fff; }
html body #find :is(.fw-t, .lf-c)[aria-expanded="true"] :is(.fw-en, .tf-s) { color: #EAE5DA; }
html body #find :is(.fw-t, .lf-c):has(+ [aria-expanded="true"]) { border-bottom-color: transparent; }
/* 連結列(孩子動作發展中 →):J、名稱、右邊箭頭 */
html body #find .lf-c-go { grid-template-columns: auto minmax(0, 1fr) auto; }
html body #find .lf-c-go span { grid-column: 3; grid-row: 1; color: var(--c-green); }

/* ── ④ 說明面板 ── */
html body #find .lf-out { margin: 0; padding: var(--s-7); border-radius: var(--r-card); background: #fff; }   /* 10-19 Eric:面板改白底 */
html body #find .lf-it { margin: 0 0 var(--s-5); font-size: var(--t-lead) !important; font-weight: 500; color: var(--c-green-dk); }
html body #find :is(.fw-i, .lf-i) dl { gap: var(--s-5) var(--s-7); }
html body #find :is(.fw-i, .lf-i) dt { margin: 0 0 var(--s-2); font-size: var(--t-body) !important; font-weight: 500; letter-spacing: .05em; color: #96503C; }
html body #find :is(.fw-i, .lf-i) dd { font-size: var(--t-body) !important; line-height: 1.75; color: #505150; }
html body #find .fw-cond { gap: var(--s-1); }
html body #find .fw-cond li::before { width: 5px; height: 5px; margin-right: var(--s-3); border-radius: 50%; background: var(--c-green); -webkit-mask: none; mask: none; vertical-align: middle; }
/* 依療程找的面板開頭:英文小字+名稱+那一行說明,右邊是所屬那組的照片 */
html body #find .tf-head { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s-5); align-items: start; margin-bottom: var(--s-5); }   /* 10-19 Eric:照片太小,放大(160×120 → 280×210) */
html body #find .tf-head .lf-it { margin-bottom: var(--s-2); }
html body #find .tf-head img { width: 280px; height: 210px; object-fit: cover; border-radius: var(--r-card); }
html body #find .tf-head .tx-k { margin: 0 0 var(--s-1); color: #96503C; }   /* 白底面板上的英文小標 = 客戶指定磚紅(10-19 Eric) */
html body #find .tf-lead { margin: 0; font-size: var(--t-body); line-height: 1.75; color: #505150; }
html body #find .tf-i dl { grid-template-columns: 1fr; }
/* 提醒卡、緊急提醒(10-19 Eric:「面板改白底,裡面的提醒框改淡綠;先別等門診改用警示圖示,不要紅框;
   設計系統裡卡片不加框,只有深色底上的卡片才加白框」)
   兩種提醒都不加框:一般提醒淡綠卡(客戶 #E8EEEA);緊急就醫那張淺粉紅底 #F3EAE6(客戶磚紅 #96503C 加白淡到約 12%,不是新色)(10-19 Eric:「改淺粉紅底看看」),標題前面多一個磚紅警示三角(Font Awesome Free 6.5.2 solid/triangle-exclamation,
   CC BY 4.0 by @fontawesome - https://fontawesome.com/license/free) */
html body #find .fw-i dl .fw-ck { padding: var(--s-5); border: 0; border-radius: var(--r-card); background: #E8EEEA; }
html body #find .lf-warn { margin: var(--s-5) 0 0; padding: var(--s-5); border: 0; border-radius: var(--r-card); background: #F3EAE6; font-size: var(--t-body) !important; line-height: 1.75; color: #505150; }
html body #find .lf-warn b { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-weight: 500; color: #96503C; }
html body #find .lf-warn 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="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/%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="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/%3E%3C/svg%3E') center / contain no-repeat; }
/* 預約按鈕列(線上預約 + 次要連結)在註腳前面 */
html body #find .fw-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-5); }
html body #find .lf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-5); padding-top: 0; border-top: 0; }
html body #find .lf-foot p { order: 2; flex: 1 1 100%; margin: 0; font-size: var(--t-body) !important; line-height: 1.75; color: #5C5D5B; }

/* ── 電腦版:左欄分組+項目、右欄說明面板(三個頁籤共用)── */
@media (min-width: 1024px) {
  html body #find :is(.fw, .lf) { display: grid; grid-template-columns: calc((100% - 48px) / 3) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  html body #find :is(.fw, .lf) > :is(.lf-h, .lf-sub) { grid-column: 1 / -1; }
  html body #find :is(.fw, .lf) > .lf-out { position: sticky; top: var(--s-5); }
}
/* ── 手機平板:直排收合;項目右邊 ＋ / − ── */
@media (max-width: 1023px) {
  html body #find :is(.fw-t, .lf-c) { padding-top: var(--s-3); padding-bottom: var(--s-3); }
  html body #find :is(.fw-t, .lf-c:not(.lf-c-go)) { padding-right: 56px; }
  html body #find :is(.fw-t, .lf-c:not(.lf-c-go))::after { content: "＋"; position: absolute; right: var(--s-5); top: 50%; transform: translateY(-50%); font-weight: 400; color: var(--c-green); }
  html body #find :is(.fw-t, .lf-c)[aria-expanded="true"]::after { content: "−"; color: #fff; }
  html body #find :is(.fw-grid, .lf-chips) > .lf-out { margin: var(--s-2) 0 var(--s-4); padding: var(--s-5); }
}
@media (max-width: 767px) {
  html body #find .tabs-f .tab { padding: var(--s-3) var(--s-2); justify-items: center; align-content: end; text-align: center; }
  html body #find .tabs-f .tab b { font-size: var(--t-body); }   /* 手機三張一排放不下 24,名稱回到 18 */
  html body #find :is(.fw-i dl .fw-ck, .lf-warn) { padding: var(--s-4); }
  html body #find .tf-head { grid-template-columns: 1fr; gap: var(--s-4); }   /* 手機:照片整排放在最上面 */
  html body #find .tf-head img { order: -1; width: 100%; height: auto; aspect-ratio: 4 / 3; }
}

/* ── 頁籤引言前加引號(10-19 Eric:「引言前面加個引號,讓文字對齊上方卡片的文字開頭;下面那句要縮排」)──
   引號放在左邊 24 的空位裡(= 卡片內距),引言兩行的字都從 24 開始,跟上面三張分頁卡裡的字同一條線;上下灰線維持整排 */
html body #find .lf-h { position: relative; padding-left: var(--s-5); }
html body #find .lf-h::before { content: "“"; position: absolute; left: -.62em; color: var(--c-green); font-weight: 500; }   /* 中文字型的“是全形、墨跡在字框右半(量到 14.8–23.2px);往左移 .62em → 引號左緣對齊卡片左緣,跟字之間留約 16 */
html body #find .lf-sub { padding-left: var(--s-5); }