/* 嘉誼首頁・客戶精簡版修改(2026-10-17,依客戶 10/16 PDF 九點)。排在客戶的 v2.css、slim.css 後面,只寫要改的;HTML 的增刪在 build-simple.py */

/* ② 背景淺色大字:改成慢慢往左跑的跑馬燈(四份接成一排,跑一半剛好接回原位) */
.bgw-mq .bgw-tr { position: absolute; top: 40px; left: 0; display: flex; width: max-content; animation: jj-mq 90s linear infinite; }
.bgw-mq .bgw-tr span { position: static; padding-right: .45em; }
@media (max-width: 767px) { .bgw-mq .bgw-tr { top: 24px; } }
@keyframes jj-mq { to { transform: translateX(-50%); } }

/* ③ 治療方式的 3J:進畫面三個 J 依序升上來,之後一個接一個輕輕踏步(呼應「陪您走下去」),離開畫面收回、再進來重播。
   原本只靠捲動進度把 J 從淡變深,吳醫師要「有動態」 */
.band .band-mark[data-bandmark] g { opacity: 0; transform: translateY(32%); transition: none; transform-box: fill-box; transform-origin: 50% 100%; }
.band .band-mark[data-bandmark].jj-go g { animation: jj-rise .9s cubic-bezier(.2, .7, .2, 1) both, jj-step 3.6s ease-in-out 1.7s infinite; }
.band .band-mark[data-bandmark].jj-go .j2 { animation-delay: .22s, 1.92s; }
.band .band-mark[data-bandmark].jj-go .j3 { animation-delay: .44s, 2.14s; }
@keyframes jj-rise { from { opacity: 0; transform: translateY(32%); } to { opacity: 1; transform: none; } }
@keyframes jj-step { 0%, 28%, 100% { transform: none; } 12% { transform: translateY(-9%); } }

/* ③④⑦ 卡片樣式統一:三組卡片原本圓角 18/14/12 各一種、有的有陰影、有的頂端色條 → 同一套:
   白底、圓角 12、不加陰影(靠底色分開)、內距 24/26、標題 20/500 深綠、內文 16 灰、「看說明」貼齊卡片底 */
.sl-tc { border-radius: 12px; box-shadow: none; }
.sl-tc figure { aspect-ratio: 3 / 2; }
.sl-tc-b { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px 26px; }
.sl-tc-b h3 { font-size: 22px; }
.sl-tc-b .sl-tc-t { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid rgba(80, 81, 80, .14); }
.sl-tc-b .sl-more { margin-top: auto; padding-top: 10px; }
.sl-3j a { border-radius: 12px; }

.sl-kids { counter-reset: kq; }
.sl-kids li { counter-increment: kq; border-top: 0; border-radius: 12px; padding: 24px 26px 26px; gap: 8px; }
.sl-kids li::before { content: counter(kq, decimal-leading-zero); font: 600 14px/1 Inter, sans-serif; letter-spacing: .1em; color: #577A6E; }
.sl-kids b { font-size: 20px; }

.first-photo .steps4 li { background: #fff; border-radius: 12px; overflow: hidden; gap: 0; }
.first-photo .st-img { border-radius: 0; }
.first-photo .steps4 h4 { margin: 0; padding: 20px 22px 6px; }
.first-photo .steps4 p { padding: 0 22px 24px; }
.first-photo .steps4 li::before { box-shadow: none; background: #577A6E; color: #fff; }
@media (max-width: 767px) {   /* 手機是照片在左、字在右,內距收小 */
  .first-photo .steps4 h4 { padding: 16px 16px 4px; }
  .first-photo .steps4 p { padding: 0 16px 16px; }
}

/* ⑤ 醫療團隊:滑到某位醫師(或用鍵盤移到他的連結),左邊合照淡換成那位的照片;離開就換回合照 */
.sl-team .team3-img { position: relative; }
.sl-team .team3-img .t3-alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 30%; border-radius: 18px; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.sl-team .team3-img[data-show="y"] .t3-alt[data-doc="y"],
.sl-team .team3-img[data-show="w"] .t3-alt[data-doc="w"],
.sl-team .team3-img[data-show="h"] .t3-alt[data-doc="h"] { opacity: 1; }
.sl-docs3 li { border-radius: 12px; transition: background-color .3s, border-color .3s; }
.sl-docs3 li.on { background: #F3EFE6; border-left-color: #577A6E; }
/* 手機:上圖下文——合照留在最上面,每位醫師卡片上方放自己的照片(個人照裡人偏右,用方形裁切把人擺回中間) */
.sd-ph { display: none; }
@media (max-width: 767px) {
  .sl-docs3 li .sd-ph { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 90% 50%; margin: 0 0 14px; border-radius: 8px; }
}

/* ⑥ 評論:整段用客戶完整版那區(build-simple.py 搬),樣式在客戶 v2.css,這裡不用補 */

/* ⑧ 門診時間:依日期顯示的公告、逐日班表的代診與當日備註 */
.hh-ann { margin: 0 0 18px; padding: 14px 18px; border-radius: 12px; background: #FBF3E4; color: #5B4A2E; font-size: 16px; line-height: 1.7; }
.hh-ann p { margin: 0; }
.hh-ann p + p { margin-top: 6px; }
.hh-ann b { margin-right: 8px; color: #96503C; }
.td-ann span { color: #96503C; }
.sl .sub-tag { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #E3DDD1; color: #505150; font-size: 13px; line-height: 20px; white-space: nowrap; }
.day-note { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: #96503C; }

/* ⑨ 空間:慢速自動輪播牆(複製一份接在後面,往左跑到一半剛好接上);滑鼠移上去、鍵盤移進來或按暫停就停 */
.s3g.s3g-run { overflow: hidden; scroll-snap-type: none; padding-bottom: 0; }
.s3g-run ul { width: max-content; grid-auto-columns: min(760px, 78vw); animation: jj-s3g 110s linear infinite; }
.s3g-run:hover ul, .s3g-run:focus-within ul, .s3g-run.paused ul { animation-play-state: paused; }
@keyframes jj-s3g { to { transform: translateX(calc(-50% - 8px)); } }   /* 兩份之間的間距 16 的一半 */
.s3g-pause { display: grid; place-items: center; width: 44px; height: 44px; margin: 14px 0 0 auto; border-radius: 50%; border: 1px solid rgba(80, 81, 80, .25); background: #fff; color: #3B5348; cursor: pointer; }
.s3g-pause span { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.s3g-pause[aria-pressed="true"] span { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }

/* 系統開了「減少動態」:跑馬燈、3J、輪播牆都不動,輪播牆改回手動左右滑 */
@media (prefers-reduced-motion: reduce) {
  .bgw-mq .bgw-tr, .s3g-run ul { animation: none; }
  .band .band-mark[data-bandmark] g { opacity: 1; transform: none; animation: none !important; }
  .s3g.s3g-run { overflow-x: auto; }
  .s3g-run li[aria-hidden="true"], .s3g-pause { display: none; }
}