img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */



	img.wp-smiley, img.emoji {
		display: inline !important;
		border: none !important;
		box-shadow: none !important;
		height: 1em !important;
		width: 1em !important;
		margin: 0 0.07em !important;
		vertical-align: -0.1em !important;
		background: none !important;
		padding: 0 !important;
	}
/*# sourceURL=wp-emoji-styles-inline-css */


:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--ast-global-color-0: var(--ast-global-color-0);--wp--preset--color--ast-global-color-1: var(--ast-global-color-1);--wp--preset--color--ast-global-color-2: var(--ast-global-color-2);--wp--preset--color--ast-global-color-3: var(--ast-global-color-3);--wp--preset--color--ast-global-color-4: var(--ast-global-color-4);--wp--preset--color--ast-global-color-5: var(--ast-global-color-5);--wp--preset--color--ast-global-color-6: var(--ast-global-color-6);--wp--preset--color--ast-global-color-7: var(--ast-global-color-7);--wp--preset--color--ast-global-color-8: var(--ast-global-color-8);--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}:root { --wp--style--global--content-size: var(--wp--custom--ast-content-width-size);--wp--style--global--wide-size: var(--wp--custom--ast-wide-width-size); }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 24px; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 24px; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 24px;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 24px;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 24px;}:root :where(.is-layout-grid){gap: 24px;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}a:where(:not(.wp-element-button)){text-decoration: none;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-ast-global-color-0-color{color: var(--wp--preset--color--ast-global-color-0) !important;}.has-ast-global-color-1-color{color: var(--wp--preset--color--ast-global-color-1) !important;}.has-ast-global-color-2-color{color: var(--wp--preset--color--ast-global-color-2) !important;}.has-ast-global-color-3-color{color: var(--wp--preset--color--ast-global-color-3) !important;}.has-ast-global-color-4-color{color: var(--wp--preset--color--ast-global-color-4) !important;}.has-ast-global-color-5-color{color: var(--wp--preset--color--ast-global-color-5) !important;}.has-ast-global-color-6-color{color: var(--wp--preset--color--ast-global-color-6) !important;}.has-ast-global-color-7-color{color: var(--wp--preset--color--ast-global-color-7) !important;}.has-ast-global-color-8-color{color: var(--wp--preset--color--ast-global-color-8) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-ast-global-color-0-background-color{background-color: var(--wp--preset--color--ast-global-color-0) !important;}.has-ast-global-color-1-background-color{background-color: var(--wp--preset--color--ast-global-color-1) !important;}.has-ast-global-color-2-background-color{background-color: var(--wp--preset--color--ast-global-color-2) !important;}.has-ast-global-color-3-background-color{background-color: var(--wp--preset--color--ast-global-color-3) !important;}.has-ast-global-color-4-background-color{background-color: var(--wp--preset--color--ast-global-color-4) !important;}.has-ast-global-color-5-background-color{background-color: var(--wp--preset--color--ast-global-color-5) !important;}.has-ast-global-color-6-background-color{background-color: var(--wp--preset--color--ast-global-color-6) !important;}.has-ast-global-color-7-background-color{background-color: var(--wp--preset--color--ast-global-color-7) !important;}.has-ast-global-color-8-background-color{background-color: var(--wp--preset--color--ast-global-color-8) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-ast-global-color-0-border-color{border-color: var(--wp--preset--color--ast-global-color-0) !important;}.has-ast-global-color-1-border-color{border-color: var(--wp--preset--color--ast-global-color-1) !important;}.has-ast-global-color-2-border-color{border-color: var(--wp--preset--color--ast-global-color-2) !important;}.has-ast-global-color-3-border-color{border-color: var(--wp--preset--color--ast-global-color-3) !important;}.has-ast-global-color-4-border-color{border-color: var(--wp--preset--color--ast-global-color-4) !important;}.has-ast-global-color-5-border-color{border-color: var(--wp--preset--color--ast-global-color-5) !important;}.has-ast-global-color-6-border-color{border-color: var(--wp--preset--color--ast-global-color-6) !important;}.has-ast-global-color-7-border-color{border-color: var(--wp--preset--color--ast-global-color-7) !important;}.has-ast-global-color-8-border-color{border-color: var(--wp--preset--color--ast-global-color-8) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
:root :where(.wp-block-icon svg){width: 24px;}
:root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;}
/*# sourceURL=global-styles-inline-css */


				.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload),
				.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * {
					background-image: none !important;
				}
				@media screen and (max-height: 1024px) {
					.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload),
					.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) * {
						background-image: none !important;
					}
				}
				@media screen and (max-height: 640px) {
					.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload),
					.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) * {
						background-image: none !important;
					}
				}
			
/* /contact/「門診時間／復健時間」兩欄各 --width:50%＋父層 gap 20px、flex-shrink:0 → 總寬 1280 > 容器 1260，右欄超出視窗 10px（頁面可左右微晃）。允許兩欄收縮即可（各縮 10px，肉眼不可辨）。停用本片段即還原。重複 class 是為了贏過 Elementor 的 .e-con 預設。 */
.elementor-element-2b2e630.elementor-element-2b2e630,
.elementor-element-d0c61f3.elementor-element-d0c61f3{flex-shrink:1;--flex-shrink:1}
/* 復健治療時段帶（.jy-rehabband）在 561–940px 會因三欄 min-content 撐出水平溢出（iPad 直立最明顯），改單欄堆疊。停用本片段即還原。
   選擇器重複 class 是刻意的：原始樣式在 body 的行內 <style>，同特異度會輸給它。 */
@media (max-width:940px){
  .jy-hours .jy-rehabband.jy-rehabband{grid-template-columns:1fr}
}
/* ══════════════════════════════════════════════════════════════════
   嘉韻｜桌機首屏對比修正 v2（2026-08-15）
   套用範圍：首頁、≥881px。手機（片段 9527）完全不動。停用即還原。

   ── v2 改了什麼、為什麼 ─────────────────────────────────────────
   院方回饋：「首頁輪播照片像被暗底蓋掉，要恢復原本明亮的畫質。」
   v1 的做法是把整張照片壓 15%（::after 黑 .15）換取淺藍字的對比，
   代價就是整片照片都變濁。v2 把那一層**整個拿掉**，改成只把「文字
   卡片」加厚 8 個百分點（.62 → .70）——遮擋範圍從「整個首屏」縮成
   「左邊 592px 的卡片內」，卡片以外的照片 100% 原亮度。

   ── 逐像素重量的結果（模型 v2）──────────────────────────────────
   9 張輪播圖 × Ken Burns scale 1.0/1.1/1.2/1.3，cover 進 1440×729
   （＝實測 90vh @810 視窗），依序疊：
     照片 → Elementor 收邊漸層 ×2（section::before 與
     slideshow::before，都是 transparent 75% → #005E85 98%）
     → blur(3px)（卡片的 backdrop-filter）→ 卡片 → 三步驟區 .42
     → 第三格 .28，每個元素用它自己的顏色算 WCAG。

     元素                     門檻   v1(壓15%/卡.62)   v2(不壓/卡.70)
     H1 36/700 白             3.0        4.62            5.98  ✓
     品牌名 16/700 白          4.5        5.04            5.99  ✓
     定位句 15.5/400 #DDEAF2   4.5        4.84            5.04  ✓
     主張 17.5/700 白          4.5        6.09            6.34  ✓
     步驟編號 11.5/800         4.5        5.16            5.29  ✓
     三步驟 15/700 白          4.5        6.98            7.10  ✓
     地址列 13.5/400 #DDEAF2   4.5        8.09            8.12  ✓
     嘉義市西區 13/400         4.5        3.63            4.75  ✓（本次連帶修好）

   → 每一項都比 v1 更好，而且照片完全不被壓暗。關鍵在於：卡片變厚
     只影響「卡片底下」的取樣，對比是靠卡片拿回來的，不是靠壓照片。

   ⚠️ 仍未達標、本次刻意沒動：主張裡的強調字
     「診斷永遠放在治療之前」#7FD3F2 17.5/700 → 4.5 門檻、最低 3.85。
     這是 v1 就存在的問題（v1 為 3.70），不是本次造成的。要修的話把
     em 的顏色提亮到 #A9E2F8 即可達 4.59，但那會動到品牌強調色，
     留給院方決定。

   量測腳本：~/Desktop/嘉韻官網_牆專案原始檔/hero_contrast_2026-08-15b.py
   （v2 模型，含收邊漸層與全部淺藍字；同資料夾 hero/ 放著 9 張輪播圖）。
   ⚠️ 換輪播圖、改卡片透明度或改字色都要重跑。

   ── 為什麼卡片要寫在這裡而不是回頭改 9521 ────────────────────────
   9521 是首屏的 markup＋版型主檔，同一時間可能有別的工作階段在改；
   把「對比」這件事集中在本片段，停用本片段＝完整回到 9521 的原樣，
   也不會兩邊互相覆蓋。（2026-08-15 曾發生兩個階段各壓一層、照片被
   壓暗兩次的事故，規則：首屏的對比只准由本片段負責。）
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 881px) {

  /* .jy-hero 是 absolute，v3 把它的內層容器 8044fdc 改成 static 之後，
     定位基準就是這個區段 —— 這行不能刪。 */
  body.home .elementor-element-da8c5d2 {
    position: relative;
  }

  /* 卡片 .62 → .70（唯一的遮擋來源，範圍只在卡片內） */
  body.home .jy-hero .jy-hero-card {
    background: rgba(4, 38, 54, .70) !important;
  }

  /* 淺藍字：定位句與地址列維持 v1 的 #DDEAF2；
     「嘉義市西區」原本 #B6D2E0（實測 3.63、100% 面積不合格）提亮到
     #D6E8F2 → 4.75。仍比純白淡一階，層級保留。 */
  body.home .jy-hero-lead {
    color: #DDEAF2 !important;
  }
  body.home .jy-hero-meta,
  body.home .jy-hero-meta a {
    color: #DDEAF2 !important;
  }
  body.home .jy-hero .jy-brand-loc {
    color: #D6E8F2 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   v3 桌機首屏卡片縮小（2026-08-16）
   院方要求：左邊那張深色卡片縮小，剩約三分之二。
   ≥1025px：592×551 → 420×411（寬 71%、面積 57%）。
   881–1024px：560 → 470，同步收一階，避免平板看起來比桌機還大。
   最小字級守在 12px（地址列、三步驟），長輩看得清楚。
   只動尺寸不動顏色：新卡片區域是舊區域的左下子集合，
   底下照片只會更暗或相同，v2 量到的對比（H1 5.98／定位句 5.04／
   地址列 8.12）都不會變差。手機 ≤880px（片段 9527）完全不受影響。
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  body.home .jy-hero-in {
    padding-bottom: 32px;
  }
  body.home .jy-hero-card {
    max-width: 420px;
    padding: 20px 22px 21px;
    border-radius: 13px;
  }
  body.home .jy-brand {
    margin-bottom: 13px;
    gap: 9px;
  }
  body.home .jy-brand-name {
    font-size: 13.5px;
    letter-spacing: .07em;
  }
  body.home .jy-brand-loc {
    font-size: 12px;
  }
  body.home .jy-brand-loc:before {
    margin-right: 9px;
    height: 10px;
  }
  body.home .jy-brand-mark {
    height: 15px;
  }
  body.home .jy-hero h1 {
    font-size: 25px;
    margin: 0 0 12px;
    letter-spacing: .01em;
  }
  body.home .jy-hero h1 .l2:before {
    top: .66em;
  }
  body.home .jy-hero-lead {
    font-size: 13px;
    line-height: 1.85;
    margin: 0 0 7px;
  }
  body.home .jy-hero-claim {
    font-size: 14.5px;
    margin-bottom: 16px;
  }
  body.home .jy-flow {
    margin-bottom: 17px;
    border-radius: 10px;
  }
  body.home .jy-step {
    padding: 9px 9px 10px;
  }
  body.home .jy-step-n {
    font-size: 10px;
    margin-bottom: 4px;
    letter-spacing: .14em;
  }
  body.home .jy-step-t {
    font-size: 12px;
    letter-spacing: -.01em;
  }
  body.home .jy-hero-cta {
    gap: 9px;
  }
  body.home .jy-hero-cta a {
    min-height: 42px;
    padding: 0 18px;
    font-size: 14px;
    border-radius: 9px;
  }
  body.home .jy-hero-meta {
    margin-top: 13px;
    font-size: 12px;
  }
}
@media (min-width: 881px) and (max-width: 1024px) {
  body.home .jy-hero-card {
    max-width: 470px;
    padding: 19px 20px 20px;
  }
  body.home .jy-hero h1 {
    font-size: 27px;
    margin: 0 0 12px;
  }
  body.home .jy-hero-lead {
    font-size: 13px;
    margin: 0 0 7px;
  }
  body.home .jy-hero-claim {
    font-size: 14.5px;
    margin-bottom: 16px;
  }
  body.home .jy-flow {
    margin-bottom: 16px;
  }
  body.home .jy-step {
    padding: 9px 9px 10px;
  }
  body.home .jy-step-t {
    font-size: 12.5px;
  }
  body.home .jy-hero-cta a {
    min-height: 44px;
    padding: 0 18px;
    font-size: 14.5px;
  }
  body.home .jy-hero-meta {
    margin-top: 13px;
    font-size: 12px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   嘉韻｜螢光筆統一為品牌藍（2026-08-12）
   問題：全站同時存在兩種螢光筆——
     · 舊文：片段 517 第 27 行 `.single-post strong` 的**黃色 #FFE65A**
       （7px、背景位置 80%），所有文章、所有 strong 都畫，含表格與清單。
     · 新文：`.jy-v2 .entry-content strong` 與 postid-5008 的
       **品牌藍 rgba(0,94,133,.16)**（8px、82%），且表格／清單不畫。
   結果是同一個站、同一種語意，隨文章新舊變色；VI 手冊裡也沒有黃色。
   做法：把舊文那條的**顏色與幾何**對齊新文的規格，並同步採用新文
   「表格／清單／標題內的粗體不畫螢光」的規則——那些位置本來就有
   格線或層級在分隔，再加一條線只是噪音（表格會整片變成條紋）。
   只改樣式，不動任何一篇文章的內容。
   ⚠️ 特異度：舊規則是 `.single-post strong` (0,1,1)，這裡用
      `body.single-post strong` (0,1,2) 蓋過；jy-v2 自己的排除規則
      (0,2,2) 仍然贏過本片段，所以新文完全不受影響。
   停用本片段即整站回到黃色螢光筆。
   ══════════════════════════════════════════════════════════════════════ */
body.single-post strong {
  background: linear-gradient(rgba(0, 94, 133, .16) 0%, rgba(0, 94, 133, .16) 100%);
  background-size: 100% 8px;
  background-position: 0 82%;
  background-repeat: no-repeat;
}
body.single-post li strong,
body.single-post td strong,
body.single-post th strong,
body.single-post h1 strong,
body.single-post h2 strong,
body.single-post h3 strong,
body.single-post h4 strong,
body.single-post .uael-table strong {
  background: none;
}

/* ══════════════════════════════════════════════════════════════════════
   嘉韻｜手機版顏色與對齊收斂（2026-08-12）
   目標：手機上「同一個畫面裡只出現一套顏色、所有元素對齊同一條格線」。
   只改手機／平板，桌機完全不動；每一節都可單獨刪除。
   所有選擇器都多帶一層 body／.elementor-529 之類的前綴，特異度高過
   9281／8916／517，因此不依賴 WPCode 片段的輸出順序（實測順序是
   snippet id 由大到小，新片段反而會排在前面）。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. 抽屜選單：招牌膠囊回到與其他列同一條格線 ──────────────────
   原本：膠囊左右內縮 14px、字左緣 36px（其他列 22px）、箭頭中心 327px
   （其他列 341px）、整列佔 71px（其他列 62px）——一個項目同時偏離了
   左線、右線與行高三條基準，所以整份選單看起來歪。
   現在：外距 8px＋內距 14px ⇒ 字左緣 22px、箭頭回到 341px、
   5+51+5 ⇒ 整列 61px，與其他列的 62px 同一個節奏。 */
body #ast-mobile-popup .main-header-menu > li.menu-item-6580 > .menu-link {
  margin: 5px 8px !important;
  padding: 12px 60px 12px 14px !important;
}
body #ast-mobile-popup .main-header-menu > li.menu-item-6580 > .ast-menu-toggle {
  right: 4px !important;
}

/* ── 2. 招牌膠囊：色彩一律等於 logo（2026-08-14 改）─────────────────
   原本這一節在手機抽屜內把淡出終點收在 #2C7799，理由是膠囊上的字是
   白色、51px 高的膠囊下緣會掉到 2.0:1。2026-08-14 起膠囊的字改成
   品牌黑 #231815（見片段 8916），淡出到近白不再有可讀性問題，
   所以這裡改成沿用 8916 的 --jy-logo-pill，手機與桌機、與 logo 三者
   完全同色。只保留一層很淡的陰影讓膠囊在抽屜裡浮得起來。
   展開狀態也不換色——狀態由箭頭旋轉表示。 */
body #ast-mobile-popup .main-header-menu > li.menu-item-6580 > .menu-link,
body #ast-mobile-popup .sub-menu > li.menu-item-6579 > .menu-link,
body #ast-mobile-popup .sub-menu > li.menu-item-6581 > .menu-link,
body #ast-mobile-popup .sub-menu > li.menu-item-6582 > .menu-link {
  background: var(--jy-logo-pill) !important;
  box-shadow: 0 2px 10px -5px rgba(0, 45, 65, .5);
  /* 抽屜裡的連結沒有 .menu-text 這一層（桌機才有），8916 的字色選不到，
     所以品牌黑要在這裡補一次；特異度 (1,4,1) 壓過 9281 的 (1,2,1)。 */
  color: #231815 !important;
}
body #ast-mobile-popup .main-header-menu > li.menu-item-6580.ast-submenu-expanded > .menu-link {
  background: var(--jy-logo-pill) !important;
}

/* 展開／收合鍵的箭頭：膠囊的字改品牌黑之後，白箭頭會落在膠囊中段的
   淡藍上（#9BC0CF）幾乎看不見，一併改成 #231815。 */
body #ast-mobile-popup .main-header-menu > li.menu-item-6580 > .ast-menu-toggle svg path {
  fill: #231815;
}

/* ── 3. 膠囊上下的分隔線對稱 ──────────────────────────────────────
   膠囊自己沒有底線，但它上面那一列有——結果膠囊上面一條線、下面沒有。
   把緊鄰膠囊上方那一列的底線也收掉，膠囊就落在一段乾淨的留白裡。 */
body #ast-mobile-popup .main-header-menu > .menu-item:has(+ li.menu-item-6580) > .menu-link {
  border-bottom-color: transparent !important;
}

/* 底部的 LINE 鍵與招牌膠囊共用同一組左右緣（8px），
   抽屜裡兩顆圓角物件就落在同一條線上。 */
body #ast-mobile-popup .main-header-menu > li.jy-m-cta > .menu-link {
  margin: 18px 8px 4px !important;
}

/* ── 4. 下拉卡片裡的膠囊對齊卡片內文左緣 ──────────────────────────
   卡片內一般子項的字左緣 = 卡片外距 14 + 內距 22 = 36px；
   膠囊原本是 14 + 12 + 18 = 44px，比其他子項多凸出 8px。 */
body #ast-mobile-popup .sub-menu > li.menu-item-6579 > .menu-link,
body #ast-mobile-popup .sub-menu > li.menu-item-6581 > .menu-link,
body #ast-mobile-popup .sub-menu > li.menu-item-6582 > .menu-link {
  margin: 6px 8px !important;
  padding: 10px 14px !important;
}

/* ── 5. 右下角兩顆浮動鈕變成一組 ──────────────────────────────────
   原本：navy 實心「＋」50px（right:10、bottom:70）與 Astra 的回到頂端
   25px（right:30、bottom:30）——大小、顏色、右緣三者都不一樣，
   兩顆疊在一起像各自為政。
   現在：回到頂端改 40px、與「＋」共用同一條中線（x=345）、
   配色降一階（淡藍底＋navy 箭頭），成為「＋」的附屬。
   ⚠️ 不碰 display：Astra 是用 JS 控制它的顯示／隱藏。 */
@media (max-width: 921px) {
  #ast-scroll-top.ast-scroll-top-icon {
    right: 10px !important;
    bottom: 16px !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 !important;
    font-size: 15px !important;
    text-align: center;
    background: #EAF3F7 !important;
    color: #005E85 !important;
    border: 1px solid #CBDFE9;
    border-radius: 50% !important;
    box-shadow: 0 3px 10px rgba(0, 45, 65, .14);
  }
  #ast-scroll-top.ast-scroll-top-icon .ast-arrow-svg {
    width: 15px;
    height: 15px;
    vertical-align: middle;
  }
}

/* ── 6. 頁尾：左緣對齊同一條線、版權列不要頂到螢幕邊 ───────────────
   電話／信箱／地址都從 x=20 起排，社群 icon 卻是置中（Elementor 的
   e-grid-align-mobile-center），版權列又從 x=10 起排且整行剛好貼齊
   容器右緣——同一塊區域出現三條不同的左線。 */
@media (max-width: 767px) {
  /* ⚠️ 這個 .elementor-grid 是 display:inline-block，靠的是 text-align
     不是 justify-content——只寫 justify-content 不會有任何效果。 */
  .elementor-529 .elementor-widget-social-icons .elementor-grid {
    text-align: left !important;
    justify-content: flex-start !important;
  }
  .elementor-529 .elementor-widget-heading .elementor-heading-title {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px !important;
    line-height: 1.9 !important;
  }
}

/* ── 7. 抽屜底部的備援出口（.jy-m-foot）────────────────────────────
   由 PHP 片段「嘉韻｜手機選單底部備援出口」在 LINE 鍵之後補一列。
   兩顆淡色鈕平分寬度、與上面兩顆膠囊共用 8px 左右緣，
   把 LINE 鍵下面原本的 160px 空白變成出口。停用那個 PHP 片段即失效。
   ⚠️ 三個一定要寫的覆寫（實測踩過）：Astra 給每個 li 的是
   `flex-direction:column`（不寫 row 兩顆鈕會上下疊）、li 與抽屜裡的連結
   都是 `width:100%`（li 不寫 auto 整列會從 8px 起算到 383px、右邊溢出；
   連結不寫 auto 會各自撐滿一整行）。 */
#ast-mobile-popup .main-header-menu > li.jy-m-foot {
  display: flex !important;
  flex-direction: row !important;
  width: auto !important;
  gap: 8px;
  margin: 10px 8px 4px;
}
#ast-mobile-popup .main-header-menu > li.jy-m-foot > .jy-m-foot-link {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  display: block;
  padding: 11px 14px;
  border: 1px solid #DCE8EE;
  border-radius: 14px;
  background: #F5FAFC;
  color: #005E85;
  text-align: center;
  text-decoration: none;
  line-height: 1.35;
  transition: background-color .16s ease, transform .16s ease;
}
#ast-mobile-popup .main-header-menu > li.jy-m-foot > .jy-m-foot-link:active {
  background: #E4F0F6;
  transform: scale(.98);
}
#ast-mobile-popup .jy-m-foot .jy-m-foot-t {
  display: block;
  font-size: 15px;
  font-weight: 700;
}
#ast-mobile-popup .jy-m-foot .jy-m-foot-s {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .02em;
  color: #56737F;
}
@media (prefers-reduced-motion: reduce) {
  #ast-mobile-popup .main-header-menu > li.jy-m-foot > .jy-m-foot-link:active {
    transform: none;
  }
}

/* ── 8. 首頁「媒體專訪」分頁鈕：兩欄等寬 ──────────────────────────
   原本六顆鈕寬度 136–153px 不等、靠 flex 置中換行，三排的左右緣
   各自不同（x=44/195、30/193、46/193），是首頁最明顯的一處歪斜。
   改成兩欄等寬，左右緣就固定了；字級 10.9px 太小，一併回到 13px，
   非選取項的純黑字改成品牌 navy。 */
@media (max-width: 767px) {
  .e-n-tabs-heading {
    gap: 8px !important;
  }
  .e-n-tabs-heading > .e-n-tab-title {
    flex: 1 1 calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 13px 6px !important;
    font-size: 13px !important;
    letter-spacing: .06em !important;
  }
  .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"] {
    color: #005E85 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   嘉韻｜案例分享下拉樣式（2026-08-12）
   套用對象：主選單「案例分享」(menu-item 6599，class="jy-mega jy-case")
   搭配 PHP 片段「嘉韻｜案例分享下拉副標」(9361)：PHP 在七個案例子項的
   </a> 前插入 <span class="jy-case-sub">，本片段只負責它長什麼樣子。

   面板骨架完全沿用既有片段，這裡沒有新的視覺語彙：
     ‧ 兩欄 480px、jy-col-break 分欄、諮詢卡 .jy-cta  → 片段 9253
     ‧ 卡片化面板、藥丸列、hover 短棒與箭頭          → 片段 9269
     ‧ 群組標題 12.5px／.128em／#56737F             → 片段 9253 第 4 節
   本片段只做四件事：副標的樣子、兩行列的內距與短棒長度、欄間細線，
   以及把 9253 寫死的諮詢卡副標文案換成本面板該講的話。

   ⚠️ 選擇器一律帶滿 .ast-nav-menu.main-header-menu 前綴：9269 對
      .main-header-menu .sub-menu > li > a.menu-link 的規則是 (0,4,0)，
      少帶一層就會輸給它，滑過去的瞬間被打回原樣（人體圖踩過同一個坑）。

   停用本片段＝副標變成沒有樣式的一行小字（仍可讀），版面回到 9253／9269 原狀。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. 副標本體（桌機與手機共用） ───────────────────────────
   12.5px／#56737F 是站上「安靜階層」的統一值（群組標題、卡片註解都用它），
   白底上約 5.1:1，長輩讀者讀得到，又明顯低於 16px／#231815 的主標。 */
.jy-case-sub {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  color: #56737F;
  transition: color .2s ease;
}

@media (min-width: 922px) {

  /* ── 2. 兩行列的上下內距 ────────────────────────────────
     9253 第 3 節給的 7px 是單行列的值；兩行列用 8px，列高約 52px。 */
  .ast-nav-menu.main-header-menu > .menu-item.jy-case > .sub-menu > li:not(.nav-group):not(.jy-cta) > a.menu-link {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* ── 3. hover：主標由 9269 轉 navy，副標同步深一階 ─────────
     只亮主標而副標不動，整列會看起來只醒了一半。 */
  .ast-nav-menu.main-header-menu > .menu-item.jy-case > .sub-menu > li > a.menu-link:hover .jy-case-sub,
  .ast-nav-menu.main-header-menu > .menu-item.jy-case > .sub-menu > li > a.menu-link:focus .jy-case-sub {
    color: #46707F;
  }

  /* ── 4. 左側短棒：9269 的 22px 是配單行列的，兩行列要 28px ── */
  .ast-nav-menu.main-header-menu > .menu-item.jy-case > .sub-menu > li:not(.nav-group):not(.jy-cta) > a.menu-link:hover::before,
  .ast-nav-menu.main-header-menu > .menu-item.jy-case > .sub-menu > li:not(.nav-group):not(.jy-cta) > a.menu-link:focus::before {
    height: 28px;
  }

  /* ── 5. 諮詢卡的副標文案 ───────────────────────────────
     9253 第 5 節把「加入官方 LINE，先問清楚 →」寫死在 .jy-mega 的
     .jy-cta::after；本面板的卡是連到案例牆，不是 LINE，必須換掉。 */
  .ast-nav-menu.main-header-menu > .menu-item.jy-case > .sub-menu > li.jy-cta > a::after {
    content: "每一則都附療程與追蹤 →";
  }
}

/* ── 6. 欄間細線 ─────────────────────────────────────
   只在真的分成兩欄時才畫（條件與 9253 第 1 節相同）。
   用面板自己的 background 多圖層畫，不要用絕對定位元素——面板在窄視窗
   會變成可捲動，絕對定位的線會跟著溢出（人體圖面板的既有做法）。
   第一層是 9269 的頂部 navy 漸層短線，必須一起重寫，否則會被蓋掉。 */
@media (min-width: 1024px) and (min-height: 580px) {
  .ast-nav-menu.main-header-menu > .menu-item.jy-case > .sub-menu {
    background-image:
      linear-gradient(90deg, #005E85 0%, #4E7F9C 45%, #9AB6C6 100%),
      linear-gradient(#EDF3F6, #EDF3F6) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: 100% 3px, 1px calc(100% - 46px) !important;
    background-position: 0 0, 50% 24px !important;
  }
}

/* ── 7. 手機抽屜 ─────────────────────────────────────
   抽屜連結字級較大（9281），副標維持 12.5px 不動，只多給一點行距。
   這裡不碰 display：子選單的開合是 Astra 寫 inline style 控制的，
   任何 display:...!important 都會讓它永遠展開（9286 踩過）。 */
#ast-mobile-popup .jy-case-sub {
  margin-top: 2px;
  color: #56737F;
}

/* ── 8. 主選單維持單行（≥1440px） ───────────────────────────
   案例分享變成下拉之後多了一個 20px 的箭頭，主選單在 1440px 視窗
   剛好差 3px 而換成兩排（實測：需要 947px，容器只有 944px）——
   換行後展開的下拉會蓋住第二排，「線上預約」會變成點不到。
   9253 第 7 節只處理 1024–1439px（內距收到 6px），≥1440px 維持 16px；
   這裡把 ≥1440px 收到 13px，八個項目共省 48px，回到單行。
   3px 的間距差看不出來，字級完全不動（長輩讀者的可讀性優先）。 */
@media (min-width: 1440px) {
  .ast-nav-menu.main-header-menu > .menu-item > a.menu-link {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }
}

/* ── 9. 面板靠右對齊 ─────────────────────────────────────
   案例分享在主選單的位置比診療項目右得多，Astra 展開時是 left:0
   （相對於 li），480px 面板在 1024px 視窗右緣會落在 1141px——
   超出 117px，被 body 的 overflow-x:hidden 直接切掉右欄。
   改成貼齊 li 的右緣：1024px 時面板落在 291–771，1440px 時 378–858，
   兩邊都在畫面內。只在「展開的狀態」覆寫 left，隱藏時仍靠 Astra 的
   left:-999em 移出畫面——若無條件寫 left:auto，面板會永遠留在版面上。 */
/* 實測：面板左緣固定在 661px，1180px 以上的視窗左對齊也放得下（1160px
   時右緣 1141，還差 19px 才碰到邊），所以只在 ≤1180px 才靠右——
   寬螢幕維持與父項對齊的自然位置，窄螢幕才換邊。 */
@media (min-width: 922px) and (max-width: 1180px) {
  .ast-nav-menu.main-header-menu > .menu-item.jy-case:hover > .sub-menu,
  .ast-nav-menu.main-header-menu > .menu-item.jy-case:focus-within > .sub-menu,
  .ast-nav-menu.main-header-menu > .menu-item.jy-case.focus > .sub-menu,
  .ast-nav-menu.main-header-menu > .menu-item.jy-case > .sub-menu.toggled-on {
    left: auto !important;
    right: 0 !important;
  }
}

/* ── 10. 諮詢卡文案（手機抽屜） ────────────────────────────
   9253 第 5 節的 .jy-mega > .sub-menu > li.jy-cta > a::after 沒有包在
   media query 裡，而手機抽屜用的是同一批 li（class 一樣帶 jy-mega），
   所以上面第 5 節只蓋掉了 ≥922px，手機上仍然顯示「加入官方 LINE，
   先問清楚 →」——那是診療項目那張卡的文案，不是這一張的。 */
#ast-mobile-popup .menu-item.jy-case > .sub-menu > li.jy-cta > a::after {
  content: "每一則都附療程與追蹤 →";
}

/* ══════════════════════════════════════════════════════════════════════
   嘉韻｜疼痛部位人體圖樣式（2026-08-11）
   搭配 PHP 片段「嘉韻｜疼痛部位人體圖」使用：
     PHP 負責在「疼痛部位」(6590) 的下拉最前面插入 li.jy-painmap（內含人體 SVG），
     並替 6590 加上 class jy-pain、替六個子項加上 jy-r-* 部位 class。
   本片段只負責外觀與互動。停用其中任何一個都會回到純文字清單，不會壞版。

   為什麼要做：原本「疼痛部位」是六列純文字。病人心裡想的是「我這裡痛」，
   不是「頸・肩・上背」這種分類名；骨科／復健科的選單用人體部位圖是最貼近
   就診情境的表達方式，也直接呼應診所的專科定位。

   互動是雙向的：滑到清單某一列 → 圖上該部位亮起；滑到圖上某個部位 →
   清單對應那一列亮起。用 :has() 做，沒有任何 JavaScript。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 共用：人體圖本身 ─────────────────────────────────────────── */
.jy-pm-svg .hit { fill: rgba(0, 0, 0, 0); stroke: none; cursor: pointer; }
.jy-pm-svg .glow { fill: rgba(0, 94, 133, .10); opacity: 0; transition: opacity .18s ease; }
/* 第二版的高亮是「用人體剪影當遮罩、讓橢圓透出來」，所以是 fill 不是 stroke */
/* 人體圖底色 2026-08-11 調深一階（#A9C4D2），高亮跟著加深才壓得住 */
.jy-pm-svg .lit { fill: #00456B; opacity: 0; transition: opacity .18s ease; }
.jy-pm-svg .jy-pm-joints { transition: fill .18s ease; }
.jy-pm-svg .jy-pm-base { transition: fill .18s ease; }
.jy-hs:hover .lit,
.jy-hs:hover .glow,
.jy-hs:active .lit,
.jy-hs:active .glow { opacity: 1; }

.jy-pm-title { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: #56737F; }
.jy-pm-hint { font-size: 11px; line-height: 1.5; color: #7C97A3; text-align: center; }

/* ══ 桌機：左圖右清單 ═══════════════════════════════════════════
   只在「寬 ≥1100px 且高 ≥560px」才出現。空間不夠時 li.jy-painmap 直接隱藏，
   下拉退回升級前的 256px 純文字清單——寧可沒有圖，也不要擠到爆版。 */
@media (min-width: 1100px) and (min-height: 560px) {
  /* 特異度要壓過片段 9269 的 .main-header-menu > .menu-item:not(.jy-mega) > .sub-menu
     （同為 4 個 class，靠先後順序決勝負太脆弱），所以多帶一個 .ast-nav-menu。 */
  .ast-nav-menu.main-header-menu > .menu-item.jy-pain > .sub-menu {
    width: 436px !important;
    display: grid !important;
    grid-template-columns: 160px 1fr;
    column-gap: 8px;
    align-items: start;
    padding: 12px !important;
  }
  .jy-pain > .sub-menu > li.jy-painmap {
    grid-column: 1;
    grid-row: 1 / span 7;
    align-self: stretch;
    width: auto !important;
    margin: 0 !important;
  }
  .jy-pain > .sub-menu > li:not(.jy-painmap) { grid-column: 2; }

  .jy-pain .jy-pm {
    height: 100%;
    padding: 10px 8px 8px;
    background: linear-gradient(180deg, #F6FAFC 0%, #FFFFFF 65%);
    border: 1px solid #E9F1F4;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .jy-pain .jy-pm-svg { width: 104px; height: auto; display: block; margin: auto 0; }
  .jy-pain .jy-pm-hint { margin-top: 4px; }

  /* 清單 → 人體圖 */
  .jy-pain > .sub-menu:has(> li.jy-r-upper:hover) .jy-hs-upper .lit,
  .jy-pain > .sub-menu:has(> li.jy-r-upper:hover) .jy-hs-upper .glow,
  .jy-pain > .sub-menu:has(> li.jy-r-hand:hover) .jy-hs-hand  .lit,
  .jy-pain > .sub-menu:has(> li.jy-r-hand:hover) .jy-hs-hand  .glow,
  .jy-pain > .sub-menu:has(> li.jy-r-waist:hover) .jy-hs-waist .lit,
  .jy-pain > .sub-menu:has(> li.jy-r-waist:hover) .jy-hs-waist .glow,
  .jy-pain > .sub-menu:has(> li.jy-r-knee:hover) .jy-hs-knee  .lit,
  .jy-pain > .sub-menu:has(> li.jy-r-knee:hover) .jy-hs-knee  .glow,
  .jy-pain > .sub-menu:has(> li.jy-r-foot:hover) .jy-hs-foot  .lit,
  .jy-pain > .sub-menu:has(> li.jy-r-foot:hover) .jy-hs-foot  .glow { opacity: 1; }
  /* 骨質疏鬆・骨折不是單一部位，滑到它時整個人體加深，表示「全身骨骼」 */
  .jy-pain > .sub-menu:has(> li.jy-r-bone:hover) .jy-pm-base { fill: #6E93A6; }
  .jy-pain > .sub-menu:has(> li.jy-r-bone:hover) .jy-pm-joints { fill: #4F7387; }

  /* 人體圖 → 清單（沿用 9269 的 hover 樣式，讓兩種操作看起來是同一件事） */
  .jy-pain > .sub-menu:has(.jy-hs-upper:hover) > li.jy-r-upper > a.menu-link,
  .jy-pain > .sub-menu:has(.jy-hs-hand:hover)  > li.jy-r-hand  > a.menu-link,
  .jy-pain > .sub-menu:has(.jy-hs-waist:hover) > li.jy-r-waist > a.menu-link,
  .jy-pain > .sub-menu:has(.jy-hs-knee:hover)  > li.jy-r-knee  > a.menu-link,
  .jy-pain > .sub-menu:has(.jy-hs-foot:hover)  > li.jy-r-foot  > a.menu-link {
    color: #005E85 !important;
    background-color: #EDF5F9 !important;
    transform: translateX(2px);
  }
  .jy-pain > .sub-menu:has(.jy-hs-upper:hover) > li.jy-r-upper > a.menu-link::before,
  .jy-pain > .sub-menu:has(.jy-hs-hand:hover)  > li.jy-r-hand  > a.menu-link::before,
  .jy-pain > .sub-menu:has(.jy-hs-waist:hover) > li.jy-r-waist > a.menu-link::before,
  .jy-pain > .sub-menu:has(.jy-hs-knee:hover)  > li.jy-r-knee  > a.menu-link::before,
  .jy-pain > .sub-menu:has(.jy-hs-foot:hover)  > li.jy-r-foot  > a.menu-link::before { height: 22px; }
  .jy-pain > .sub-menu:has(.jy-hs-upper:hover) > li.jy-r-upper > a.menu-link::after,
  .jy-pain > .sub-menu:has(.jy-hs-hand:hover)  > li.jy-r-hand  > a.menu-link::after,
  .jy-pain > .sub-menu:has(.jy-hs-waist:hover) > li.jy-r-waist > a.menu-link::after,
  .jy-pain > .sub-menu:has(.jy-hs-knee:hover)  > li.jy-r-knee  > a.menu-link::after,
  .jy-pain > .sub-menu:has(.jy-hs-foot:hover)  > li.jy-r-foot  > a.menu-link::after { opacity: 1; transform: translate(0, -50%); }
}

/* 桌機空間不足（窄或矮）：不顯示圖，回到單純清單 */
@media (min-width: 922px) and (max-width: 1099px),
       (min-width: 922px) and (max-height: 559px) {
  .main-header-menu > .menu-item.jy-pain > .sub-menu > li.jy-painmap { display: none !important; }
}

/* ══ 手機：圖在上、六個部位排成兩欄 ═══════════════════════════
   手機更適合「用手指點身上的位置」。圖放在卡片頂端，
   下面六項改成兩欄的方塊，才不會因為多一張圖而讓清單變得很長。 */
/* 2026-08-11：手機選單預設收合。Astra 是用 inline style 開合子選單，
   原本這裡的 display:grid !important 會壓過它，害人體圖與六個部位
   在選單一打開就整片攤開。改成「點了疼痛部位才展開」。*/
#ast-mobile-popup .jy-pain > .sub-menu {
  display: none !important;
}
#ast-mobile-popup .jy-pain > .sub-menu[style*="display: block"],
#ast-mobile-popup .jy-pain > .sub-menu[style*="display:block"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px !important;
}
#ast-mobile-popup .jy-pain > .sub-menu > li.jy-painmap { grid-column: 1 / -1; }
#ast-mobile-popup .jy-pain .jy-pm {
  padding: 10px 10px 8px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F9FB 100%);
  border: 1px solid #E4EDF2;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 手機的圖用 112px 寬（viewBox 120x250 → 約 233px 高）。
   128px 會讓卡片長到 537px，一個部位選單佔掉大半個螢幕；
   112px 仍然壓得住高度（卡片約 490px），每個熱區的實際觸控高度也有 44px 以上。 */
#ast-mobile-popup .jy-pain .jy-pm-svg { width: 100px; height: auto; display: block; margin: 2px 0; }
#ast-mobile-popup .jy-pain .jy-pm-hint { margin-top: 2px; }

#ast-mobile-popup .jy-pain > .sub-menu > li:not(.jy-painmap) > .menu-link {
  padding: 13px 12px 13px 16px !important;
  background: #fff;
  border: 1px solid #E4EDF2 !important;
  border-radius: 10px;
  /* 2026-08-12：14.5 → 15.5px，與「診療項目」在手機抽屜裡的列同一級。
     這是兩個面板在手機上唯一還對不齊的地方。 */
  font-size: 15.5px !important;
  line-height: 1.5 !important;
}
#ast-mobile-popup .jy-pain > .sub-menu > li:not(.jy-painmap) > .menu-link::before { left: 7px; }
/* 375px 以下（iPhone SE 這一類）把方塊的左右內距收緊，
   否則 15.5px 的「手肘・手腕・手指」會斷成兩行，跟同列的方塊不等高。 */
@media (max-width: 374px) {
  #ast-mobile-popup .jy-pain > .sub-menu > li:not(.jy-painmap) > .menu-link {
    padding-left: 12px !important;
    padding-right: 8px !important;
  }
  #ast-mobile-popup .jy-pain > .sub-menu > li:not(.jy-painmap) > .menu-link::before { left: 4px; }
}
#ast-mobile-popup .jy-pain > .sub-menu > li:not(.jy-painmap) > .menu-link:active {
  background: #E1EFF5;
  border-color: #BFD9E4 !important;
}
/* 手機用 :active 取代 hover：按住圖上的部位時，對應的方塊也亮起 */
#ast-mobile-popup .jy-pain > .sub-menu:has(.jy-hs-upper:active) > li.jy-r-upper > .menu-link,
#ast-mobile-popup .jy-pain > .sub-menu:has(.jy-hs-hand:active)  > li.jy-r-hand  > .menu-link,
#ast-mobile-popup .jy-pain > .sub-menu:has(.jy-hs-waist:active) > li.jy-r-waist > .menu-link,
#ast-mobile-popup .jy-pain > .sub-menu:has(.jy-hs-knee:active)  > li.jy-r-knee  > .menu-link,
#ast-mobile-popup .jy-pain > .sub-menu:has(.jy-hs-foot:active)  > li.jy-r-foot  > .menu-link {
  background: #E1EFF5;
  border-color: #BFD9E4 !important;
  color: #005E85;
}
#ast-mobile-popup .jy-pain > .sub-menu:has(> li.jy-r-upper > a:active) .jy-hs-upper .lit,
#ast-mobile-popup .jy-pain > .sub-menu:has(> li.jy-r-hand  > a:active) .jy-hs-hand  .lit,
#ast-mobile-popup .jy-pain > .sub-menu:has(> li.jy-r-waist > a:active) .jy-hs-waist .lit,
#ast-mobile-popup .jy-pain > .sub-menu:has(> li.jy-r-knee  > a:active) .jy-hs-knee  .lit,
#ast-mobile-popup .jy-pain > .sub-menu:has(> li.jy-r-foot  > a:active) .jy-hs-foot  .lit { opacity: 1; }

/* ── 減少動態效果 ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .jy-pm-svg .lit,
  .jy-pm-svg .glow,
  .jy-pm-svg .jy-pm-base { transition: none; }
}


/* ══ 常見病症（.jy-cond）══════════════════════════════════════════
   由 PHP 片段接在每個部位項目的連結後面。預設不顯示——手機的抽屜若把
   18 個病症全展開，光是「疼痛部位」這一段就會超過 1100px，反而更難用；
   窄視窗的桌機也塞不下第三欄。只有夠寬夠高的桌機才把它打開。
   手機與窄視窗仍然點得到部位頁，病症在該部位頁上都列得到。 */
.jy-pain .jy-cond { display: none; }

/* ══ 三欄模式：與「診療項目」共用同一套字級／顏色階層 ═══════════════
   2026-08-12 對齊。原本這個面板的層級是反過來的：
     部位名稱  15.5px 深色粗體（看起來像可以點的主要項目）
     病症      13.5px 淡灰＋小圓點（看起來像註解）
   但「診療項目」面板的語言正好相反——注射治療／檢查與復健／儀器治療
   這類分類名是 12.5px 灰色小標，真正點得進去的療程頁才是 16px 深色粗體。
   兩個面板前後打開會覺得是兩個網站，所以這裡改成同一套：
     部位名＝分類小標（規格逐項對齊 li.nav-group）
     病症  ＝主要項目（規格逐項對齊 mega 面板的療程列）
   部位名仍然是連結（點進該部位總覽頁），hover 轉品牌藍＋淡底線表示可按；
   靜止時安靜，才不會跟底下的病症搶。

   ⚠️ 高度門檻由 560px 提高到 620px：病症放大到 16px 之後面板長 494px，
   面板頂端實測落在 y≈75–82，560px 高的視窗會被切掉底部；620px 才留得住
   30px 以上的餘裕（600px 只剩 15px，太貼邊）。不夠高就退回兩欄
   （走上面 1100/560 那一段，不顯示病症），寧可少一層也不要切。
   病症的上下內距用 6px 而不是療程列的 7px，就是為了把面板少長 18px；
   差 1px 看不出來，門檻也才守得住 620px。 */
@media (min-width: 1280px) and (min-height: 620px) {
  /* 三欄：人體圖 ｜ 三個部位區塊 ｜ 三個部位區塊。
     寬度是「1280px 視窗的可用寬度」決定的，不能照抄診療項目的 720px：
     疼痛部位在 1280px 直接載入時左緣 583px（右邊剩 697px），但**從較寬的
     視窗拖窄到 1280px 時**主選單不會照重新載入的方式重排，左緣會跑到
     629px（右邊只剩 651px）。640px 是兩種情況都不溢出的值，
     而最長的「椎間盤突出・坐骨神經痛」在 219px 的欄寬裡仍是一行。 */
  .ast-nav-menu.main-header-menu > .menu-item.jy-pain > .sub-menu {
    width: 640px !important;
    grid-template-columns: 156px 1fr 1fr;
    column-gap: 10px;
    /* 第二層背景＝兩個病症欄之間的細線（與 9269 畫 mega 欄線同一招：
       用面板自己的背景圖層，不用絕對定位元素）。第一層是 9269 的 navy
       漸層頂線——一旦在這裡重寫 background-image 就必須一起帶上。
       63.11% 是算出來的：內容寬 640−2(邊框)−24(內距)＝614，欄寬
       (614−156−20)/2＝219，兩個病症欄之間的空隙中心離面板左緣 403px，
       百分比定位的分母是 padding box 寬減元素寬＝638−1，403−1 除以 637。
       改動面板寬度或欄寬時這個數字要重算，否則細線會偏。 */
    background-image:
      linear-gradient(90deg, #005E85 0%, #4E7F9C 45%, #9AB6C6 100%),
      linear-gradient(#EDF2F5, #EDF2F5) !important;
    background-size: 100% 3px, 1px calc(100% - 34px) !important;
    background-position: 0 0, 63.11% 20px !important;
    background-repeat: no-repeat, no-repeat !important;
  }
  .jy-pain > .sub-menu > li.jy-painmap { grid-column: 1; grid-row: 1 / span 3; }
  .jy-pain > .sub-menu > li.jy-r-upper { grid-column: 2; grid-row: 1; }
  .jy-pain > .sub-menu > li.jy-r-hand  { grid-column: 2; grid-row: 2; }
  .jy-pain > .sub-menu > li.jy-r-waist { grid-column: 2; grid-row: 3; }
  .jy-pain > .sub-menu > li.jy-r-knee  { grid-column: 3; grid-row: 1; }
  .jy-pain > .sub-menu > li.jy-r-foot  { grid-column: 3; grid-row: 2; }
  .jy-pain > .sub-menu > li.jy-r-bone  { grid-column: 3; grid-row: 3; }

  /* 同一欄裡第二、三個部位之間的細線＝9269 給 li.nav-group 的那一條 */
  .jy-pain > .sub-menu > li.jy-r-hand,
  .jy-pain > .sub-menu > li.jy-r-waist,
  .jy-pain > .sub-menu > li.jy-r-foot,
  .jy-pain > .sub-menu > li.jy-r-bone {
    border-top: 1px solid #EBF1F4;
    margin-top: 8px;
  }

  /* ── 部位名稱＝分類小標 ──────────────────────────────────────
     12.5px／700／letter-spacing .128em(＝1.6px)／#56737F／13-12-5-14，
     每一項都與「診療項目」的 li.nav-group 實測值相同。
     藥丸底色、左短棒、右箭頭全部取消——分類名不該長得像可按的列。
     ⚠️ 特異度：9269 的 hover 規則是 (0,6,0)，所以這裡一定要帶滿
     .ast-nav-menu.main-header-menu > .menu-item.jy-pain 這串前綴到 (0,7,0)，
     只寫 .jy-pain > .sub-menu (0,4,0) 會在 hover 的瞬間被打回藥丸。 */
  .ast-nav-menu.main-header-menu > .menu-item.jy-pain > .sub-menu > li[class*="jy-r-"] > a.menu-link {
    margin: 0 2px !important;
    padding: 13px 12px 5px 14px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: .128em !important;
    line-height: 1.4 !important;
    color: #56737F !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    transform: none !important;
  }
  .ast-nav-menu.main-header-menu > .menu-item.jy-pain > .sub-menu > li[class*="jy-r-"] > a.menu-link::before,
  .ast-nav-menu.main-header-menu > .menu-item.jy-pain > .sub-menu > li[class*="jy-r-"] > a.menu-link::after {
    display: none !important;
  }
  .ast-nav-menu.main-header-menu > .menu-item.jy-pain > .sub-menu > li[class*="jy-r-"] > a.menu-link:hover,
  .ast-nav-menu.main-header-menu > .menu-item.jy-pain > .sub-menu > li[class*="jy-r-"] > a.menu-link:focus {
    color: #005E85 !important;
    background-color: transparent !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: #A9C7D6;
    text-underline-offset: 3px;
  }

  /* 目前就在這個部位的彙整頁時，讓部位名常駐品牌藍。
     9269 原本給 li.current-menu-item 的底色＋短棒在這裡被關掉了，
     不補這一條的話「我在哪一區」就完全沒有指示。 */
  .ast-nav-menu.main-header-menu > .menu-item.jy-pain > .sub-menu > li[class*="jy-r-"].current-menu-item > a.menu-link {
    color: #005E85 !important;
  }

  /* ── 病症＝主要項目 ──────────────────────────────────────────
     16px／700／#231815／10px 圓角／左 14 右 12，
     hover 是 9269 給 mega 面板療程列的同一組手感：
     淡藍底＋左側 navy 短棒（left:5px、長 22px）＋整列右移 2px，
     按下去再深一階並微縮。小圓點拿掉——「診療項目」沒有點。 */
  .jy-pain .jy-cond {
    display: block;
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
  }
  /* 每欄最後一個部位不要下外距，否則面板下緣留白 22px、上緣只有 12px。
     「診療項目」的最後一列到面板底就是一個內距的距離，這裡對齊它。 */
  .jy-pain > .sub-menu > li.jy-r-waist .jy-cond,
  .jy-pain > .sub-menu > li.jy-r-bone .jy-cond { margin-bottom: 0; }
  .jy-pain .jy-cond > li > a {
    display: block;
    position: relative;
    margin: 0 2px;
    padding: 6px 12px 6px 14px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: normal;
    color: #231815;
    transition:
      background-color .2s ease,
      color .2s ease,
      transform .22s cubic-bezier(.2, .7, .3, 1);
  }
  .jy-pain .jy-cond > li > a::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 2px;
    background: linear-gradient(180deg, #005E85, #6F97AC);
    transform: translateY(-50%);
    transition: height .22s cubic-bezier(.2, .7, .3, 1);
  }
  .jy-pain .jy-cond > li > a:hover,
  .jy-pain .jy-cond > li > a:focus {
    background: #EDF5F9;
    color: #005E85;
    transform: translateX(2px);
  }
  .jy-pain .jy-cond > li > a:hover::before,
  .jy-pain .jy-cond > li > a:focus::before { height: 22px; }
  .jy-pain .jy-cond > li > a:active {
    background: #DFEDF4;
    transform: translateX(2px) scale(.985);
  }
  .jy-pain .jy-cond > li > a:focus-visible {
    outline: 2px solid #005E85;
    outline-offset: -2px;
  }

  /* ── 人體圖 → 清單：改成整個部位區塊亮起 ─────────────────────
     部位名不再是藥丸，原本「那一列亮起」的回饋沒有東西可以亮了；
     改成整格淡藍底＋部位名轉品牌藍，指向性比單獨亮一列更清楚
     （病症也一起被框進去，正好對應「這個部位有這三種常見問題」）。
     清單 → 人體圖那個方向不用改，上面那段的 :has(> li.jy-r-*:hover)
     本來就涵蓋整個 li，滑到病症上時人體圖一樣會亮。 */
  .ast-nav-menu.main-header-menu > .menu-item.jy-pain > .sub-menu:has(.jy-hs-upper:hover) > li.jy-r-upper,
  .ast-nav-menu.main-header-menu > .menu-item.jy-pain > .sub-menu:has(.jy-hs-hand:hover)  > li.jy-r-hand,
  .ast-nav-menu.main-header-menu > .menu-item.jy-pain > .sub-menu:has(.jy-hs-waist:hover) > li.jy-r-waist,
  .ast-nav-menu.main-header-menu > .menu-item.jy-pain > .sub-menu:has(.jy-hs-knee:hover)  > li.jy-r-knee,
  .ast-nav-menu.main-header-menu > .menu-item.jy-pain > .sub-menu:has(.jy-hs-foot:hover)  > li.jy-r-foot {
    background: #F4F9FB;
    border-radius: 10px;
  }
  .ast-nav-menu.main-header-menu > .menu-item.jy-pain > .sub-menu:has(.jy-hs-upper:hover) > li.jy-r-upper > a.menu-link,
  .ast-nav-menu.main-header-menu > .menu-item.jy-pain > .sub-menu:has(.jy-hs-hand:hover)  > li.jy-r-hand  > a.menu-link,
  .ast-nav-menu.main-header-menu > .menu-item.jy-pain > .sub-menu:has(.jy-hs-waist:hover) > li.jy-r-waist > a.menu-link,
  .ast-nav-menu.main-header-menu > .menu-item.jy-pain > .sub-menu:has(.jy-hs-knee:hover)  > li.jy-r-knee  > a.menu-link,
  .ast-nav-menu.main-header-menu > .menu-item.jy-pain > .sub-menu:has(.jy-hs-foot:hover)  > li.jy-r-foot  > a.menu-link {
    color: #005E85 !important;
  }

  /* 面板變高（438→494px），人體圖跟著放大才不會在卡片裡浮成一小點。
     140px 是這一欄的上限：卡片內寬 156−2(邊框)−16(內距)＝138–140px。 */
  .jy-pain .jy-pm-svg { width: 140px; }
}

/* ── 減少動態效果（病症列）─────────────────────────────────────
   跟 9269 對 .menu-link 的處理一致：拿掉位移類動態（整列右移、短棒長出、
   按下微縮），保留顏色與底色的過場——那才是「按得下去」的主要來源，
   而且不會造成前庭不適。9269 那一段只選得到 a.menu-link，病症是自訂的
   <a>，所以要自己補一份。
   ⚠️ 這一段必須放在三欄那個 @media 之後：`::before { height }` 沒有加
   !important，寫在前面會被三欄段的 `height: 0` 蓋掉，短棒就永遠不出現。 */
@media (prefers-reduced-motion: reduce) {
  .jy-pain .jy-cond > li > a {
    transition: background-color .2s ease, color .2s ease !important;
  }
  .jy-pain .jy-cond > li > a:hover,
  .jy-pain .jy-cond > li > a:focus,
  .jy-pain .jy-cond > li > a:active { transform: none !important; }
  .jy-pain .jy-cond > li > a::before {
    height: 22px !important;
    opacity: 0;
    transition: opacity .2s ease !important;
  }
  .jy-pain .jy-cond > li > a:hover::before,
  .jy-pain .jy-cond > li > a:focus::before { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   嘉韻｜手機版選單質感升級（2026-08-11）
   套用範圍：手機／平板的抽屜選單 #ast-mobile-popup 之內，全部規則都用
             這個 id 起頭——抽屜在桌機本來就不存在，因此不需要 media query，
             也不會因為 Astra 斷點日後被調整而失效或外溢。
   與桌機片段 9269 是同一套語彙（navy 系統、圓角、左側短棒、按下有回饋），
   但手機沒有 hover，所有回饋改掛在 :active 與 tap highlight 上。
   停用本片段即完整回到升級前的外觀。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. 抽屜本體 ─────────────────────────────────────────────────
   原本頂端只有一個 X，開起來像一張沒有標題的清單。
   左上補品牌字樣、關閉鍵做成圓形淡藍鈕，讓抽屜有「頭」。 */
#ast-mobile-popup .ast-mobile-popup-header {
  position: relative;
  padding: 0 14px;
  border-bottom: 1px solid #EDF2F5;
}
#ast-mobile-popup .ast-mobile-popup-header::before {
  content: "嘉韻診所";
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Noto Serif TC", serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #005E85;
}
#ast-mobile-popup .menu-toggle-close {
  border-radius: 999px;
  background: #F1F8FA;
  transition: background-color .18s ease, transform .18s ease;
}
#ast-mobile-popup .menu-toggle-close:active {
  background: #DFEDF4;
  transform: scale(.94);
}

#ast-mobile-popup .ast-mobile-popup-content {
  padding-bottom: 24px;
}

/* 手機沒有 hover，點下去的那一下就是全部的回饋。
   tap highlight 改成品牌淡藍（不設 transparent），
   這樣即使某些 iOS 情境沒觸發 :active，使用者仍看得到反應。 */
#ast-mobile-popup .main-header-menu .menu-link {
  -webkit-tap-highlight-color: rgba(0, 94, 133, .10);
}

/* ── 1.5 先把抽屜選單從 flex 版面拉回一般的區塊清單 ────────────────
   ⚠️ 這一段是整個片段的地基，不能刪。
   Astra 給抽屜的 ul.main-header-menu 是 display:flex; flex-wrap:wrap，
   每個 li 又是 flex-direction:column 的 flex 容器。只要選單的自然高度
   小於容器高度，剩餘空間就會被分配到各個 flex line——實測第一層的連結
   會從 62px 被撐成 220px，而展開的子選單反而被壓到 167px（內容 322px），
   再加上卡片的 overflow:hidden，有一半的子項會「無聲被切掉」。
   （這和片段 9253 註解裡「換個軸繼續無聲截斷」是同一類的坑。）
   改成一般的 block 清單後，高度全部回到內容決定，行為才可預測。 */
#ast-mobile-popup ul.main-header-menu {
  display: block !important;
  height: auto !important;
}
#ast-mobile-popup .main-header-menu .menu-item {
  display: block !important;
  height: auto !important;
  flex: 0 0 auto !important;
}
#ast-mobile-popup .main-header-menu .menu-link,
#ast-mobile-popup .main-header-menu > .menu-item > .sub-menu {
  height: auto !important;
  flex: 0 0 auto !important;
}

/* ── 2. 第一層：做成「章節標題」──────────────────────────────
   原本第一層 15.5px／400、子項也是 15.5px，兩層一模一樣，
   展開後整份選單是一面沒有層次的牆。
   第一層改 17px／700 navy，並把行距從 46.5px（Astra 給的怪數字）
   換成 padding 控制，列高仍維持 60px 以上的觸控面積。 */
#ast-mobile-popup .main-header-menu > .menu-item > .menu-link {
  position: relative;
  padding: 17px 62px 17px 22px !important;
  font-size: 17px !important;
  font-weight: 700;
  line-height: 1.6 !important;
  color: #005E85;
  border-bottom: 1px solid #EDF2F5 !important;
  transition: background-color .18s ease;
}
#ast-mobile-popup .main-header-menu > .menu-item > .menu-link:active {
  background-color: #EDF5F9;
}

/* 展開中的那一段：淡藍底＋左側 navy 短棒，一眼看得出自己打開了哪一段 */
#ast-mobile-popup .main-header-menu > .menu-item.ast-submenu-expanded > .menu-link {
  background: linear-gradient(90deg, #F1F8FA 0%, #F9FCFD 100%);
  border-bottom-color: transparent !important;
}
#ast-mobile-popup .main-header-menu > .menu-item.ast-submenu-expanded > .menu-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #005E85, #6F97AC);
}

/* 展開鍵：加大觸控面積、箭頭轉向時給一點動態 */
#ast-mobile-popup .main-header-menu > .menu-item > .ast-menu-toggle {
  width: 60px !important;
  right: 4px !important;
}
#ast-mobile-popup .main-header-menu .ast-menu-toggle .ast-icon {
  transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}
#ast-mobile-popup .main-header-menu > .menu-item.ast-submenu-expanded > .ast-menu-toggle .ast-icon {
  transform: rotate(180deg);
}

/* ── 3. 第二層：整組收進一張卡片 ──────────────────────────────
   這是這次最重要的一項。原本子項與第一層等寬等高、只多一個小箭頭，
   展開後看不出「這幾項屬於上面那一項」。
   改成內縮 14px 的淡藍圓角卡片，子項在卡片裡縮排、字級與顏色都降一階，
   層級就出來了，也不必再靠那個小箭頭當記號。 */
#ast-mobile-popup .main-header-menu > .menu-item > .sub-menu {
  margin: 6px 14px 14px !important;
  padding: 4px 0 !important;
  background-color: #F7FBFC !important;
  border: 1px solid #E4EDF2 !important;
  border-radius: 14px !important;
  overflow: hidden;
  animation: jyDrawerOpen .24s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes jyDrawerOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

#ast-mobile-popup .sub-menu > .menu-item > .menu-link {
  position: relative;
  padding: 13px 18px 13px 22px !important;
  font-size: 15.5px !important;
  font-weight: 400;
  line-height: 1.65 !important;
  color: #2A3B45;
  border-bottom: 1px solid #E8F0F4 !important;
  transition: background-color .16s ease;
}
#ast-mobile-popup .sub-menu > .menu-item:last-child > .menu-link {
  border-bottom: 0 !important;
}
#ast-mobile-popup .sub-menu > .menu-item > .menu-link:active {
  background-color: #E1EFF5;
  color: #005E85;
}
/* 按住時左側浮出短棒，跟桌機 hover 的語彙一致 */
#ast-mobile-popup .sub-menu > .menu-item > .menu-link::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 2px;
  background: #005E85;
  transform: translateY(-50%);
  transition: height .16s ease;
}
#ast-mobile-popup .sub-menu > .menu-item > .menu-link:active::before {
  height: 18px;
}
/* 目前所在的頁面 */
#ast-mobile-popup .sub-menu > .menu-item.current-menu-item > .menu-link {
  color: #005E85;
  background-color: #ECF5F8;
}
#ast-mobile-popup .sub-menu > .menu-item.current-menu-item > .menu-link::before {
  height: 18px;
}

/* Astra 在手機版每個子項前面塞的小箭頭（>）拿掉——
   縮排與卡片已經表達了層級，那個記號只是噪音。 */
#ast-mobile-popup .sub-menu .menu-link > .ast-icon.icon-arrow {
  display: none !important;
}

/* ── 4. 卡片內的群組標題（PRP／診療項目 才有）────────────────── */
#ast-mobile-popup .sub-menu > li.nav-group {
  background: none !important;
  border-top: 1px solid #E4EDF2 !important;
}
#ast-mobile-popup .sub-menu > li.nav-group:first-child {
  border-top: 0 !important;
}
#ast-mobile-popup .sub-menu > li.nav-group > .menu-link {
  padding: 14px 20px 4px !important;
  border-bottom: 0 !important;
  font-size: 12.5px !important;
  color: #56737F !important;
}
#ast-mobile-popup .sub-menu > li.nav-group > .menu-link::before {
  display: none !important;
}

/* ── 5. 招牌療法膠囊在手機上會被螢幕切掉 ──────────────────────
   膠囊片段給 6580／6579／6581／6582 的 border-radius:999px 在手機上
   是滿版寬度，兩端的圓角直接被螢幕邊緣切掉，看起來像沒做完。
   這裡只補上左右外距讓膠囊真的是一顆膠囊，顏色一律不動
   （漸層底部偏白、白字對比偏低是既有議題，要改請動膠囊片段本身）。 */
#ast-mobile-popup .main-header-menu > li.menu-item-6580 > .menu-link {
  /* Astra 給抽屜的連結是 display:inline-block; width:100%，
     直接加左右外距會溢出 28px；改成 block＋width:auto 才會乖乖內縮。 */
  display: block !important;
  width: auto !important;
  margin: 10px 14px !important;
  padding: 12px 46px 12px 22px !important;
  border-bottom: 0 !important;
}
#ast-mobile-popup .main-header-menu > li.menu-item-6580 > .ast-menu-toggle {
  right: 18px !important;
}
/* 抽屜的展開鍵是連結的兄弟元素，不吃膠囊片段的 svg 顏色設定。
   2026-08-14：膠囊改成 logo 實測漸層＋品牌黑字，箭頭同步改黑。 */
#ast-mobile-popup .main-header-menu > li.menu-item-6580 > .ast-menu-toggle svg path {
  fill: #231815;
}
#ast-mobile-popup .main-header-menu > li.menu-item-6580.ast-submenu-expanded > .menu-link {
  background: var(--jy-logo-pill) !important;
}
#ast-mobile-popup .main-header-menu > li.menu-item-6580.ast-submenu-expanded > .menu-link::before {
  display: none;
}
#ast-mobile-popup .sub-menu > li.menu-item-6579 > .menu-link,
#ast-mobile-popup .sub-menu > li.menu-item-6581 > .menu-link,
#ast-mobile-popup .sub-menu > li.menu-item-6582 > .menu-link {
  /* 卡片裡的膠囊維持膠囊片段的 width:max-content（隨字長收縮），
     只補一個上限避免長標題把膠囊撐到貼齊卡片邊緣。 */
  width: max-content !important;
  max-width: calc(100% - 24px) !important;
  margin: 8px 12px !important;
  padding: 10px 18px !important;
  border-bottom: 0 !important;
}
#ast-mobile-popup .sub-menu > li.menu-item-6579 > .menu-link::before,
#ast-mobile-popup .sub-menu > li.menu-item-6581 > .menu-link::before,
#ast-mobile-popup .sub-menu > li.menu-item-6582 > .menu-link::before {
  display: none !important;
}

/* ── 6. 抽屜底部的預約出口（.jy-m-cta）──────────────────────────
   由 PHP 片段「嘉韻｜手機選單底部預約鍵」(9280) 在 #ast-hf-mobile-menu
   最後補上一列。手機使用者滑到選單底端時原本只有一片空白；
   這裡放與桌機標頭同一顆 LINE 預約（lin.ee/7bhg8Gj）。
   停用那個 PHP 片段，這一段就自然失效。 */
#ast-mobile-popup .main-header-menu > li.jy-m-cta > .menu-link {
  /* 同 6580 膠囊：Astra 的 width:100% 會讓加了外距的按鈕右緣溢出 14px */
  display: block !important;
  width: auto !important;
  margin: 18px 14px 4px !important;
  padding: 15px 22px !important;
  background: linear-gradient(180deg, #005E85 0%, #16698D 100%);
  border: 0 !important;
  border-radius: 999px;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.5 !important;
  text-align: center;
  box-shadow: 0 6px 16px -6px rgba(0, 94, 133, .55);
  transition: transform .18s ease, box-shadow .18s ease;
}
#ast-mobile-popup .main-header-menu > li.jy-m-cta > .menu-link:active {
  transform: scale(.98);
  box-shadow: 0 3px 10px -6px rgba(0, 94, 133, .55);
}
#ast-mobile-popup .main-header-menu > li.jy-m-cta > .menu-link::before {
  display: none !important;
}
#ast-mobile-popup .main-header-menu > li.jy-m-cta > .menu-link .ast-icon {
  display: none !important;
}
#ast-mobile-popup .main-header-menu > li.jy-m-cta .jy-m-cta-sub {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .04em;
  opacity: .82;
}

/* ── 7. 減少動態效果 ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #ast-mobile-popup .main-header-menu > .menu-item > .sub-menu {
    animation: none;
  }
  #ast-mobile-popup .menu-toggle-close:active,
  #ast-mobile-popup .main-header-menu > li.jy-m-cta > .menu-link:active {
    transform: none;
  }
  #ast-mobile-popup .main-header-menu .ast-menu-toggle .ast-icon {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   嘉韻｜下拉選單質感升級 v2（2026-08-11）
   套用範圍：桌機（≥922px）主選單／sticky 選單的所有下拉面板
             ── 含兩個 mega 面板（.jy-mega：PRP 增生療法、診療項目）
                與四個一般下拉（關於嘉韻、疼痛部位、所有文章、最新消息）
   設計語彙沿用站上既有的 navy 系統（品牌主色 #005E85＋tint 階調），
   與首頁門診時間區塊、文章版面 jy-v2 的「圓角＋柔和陰影＋漸層短線」一致。

   ⚠️ 這個片段是「疊在」既有樣式之上：
      基礎的下拉樣式（2026-08-05／08-06）在 WPCode 片段「全站」裡，
      兩欄化與諮詢卡在片段 9253。本片段用較高的選擇器特異度覆蓋，
      停用本片段即完整回到升級前的外觀，不必改動另外兩個片段。
   ══════════════════════════════════════════════════════════════════════ */

@media (min-width: 922px) {

  /* ── 1. 面板本體：卡片化 ──────────────────────────────────────
     原本＝2px 圓角＋3px 硬邊 navy 頂線＋單層陰影，像系統選單。
     改為 14px 圓角＋1px 淡邊框＋三層陰影（近距接觸陰影／中距擴散／
     遠距落地），並把頂線換成 navy→tint 漸層短線（與文章 h2 的
     ::before 同一個語彙），面板才會「浮」起來而不是貼在列上。 */
  .main-header-menu .sub-menu {
    padding: 10px !important;
    border: 1px solid #E3EDF2 !important;
    border-top: 0 !important;
    border-radius: 14px !important;
    background-color: #fff !important;
    background-image: linear-gradient(90deg, #005E85 0%, #4E7F9C 45%, #9AB6C6 100%) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 3px !important;
    background-position: 0 0 !important;
    box-shadow:
      0 1px 2px rgba(0, 50, 72, .06),
      0 14px 30px -10px rgba(0, 50, 72, .20),
      0 34px 60px -34px rgba(0, 50, 72, .30) !important;
  }

  /* 一般下拉（非 mega）給多一點呼吸；mega 面板寬度由片段 9253 控制 */
  .main-header-menu > .menu-item:not(.jy-mega) > .sub-menu {
    width: 256px !important;
  }

  /* ── 2. 開啟動態：淡入＋微微下沉就位 ────────────────────────
     Astra 原本只切 visibility 與 left，開合是「瞬間出現」。
     加上 160–200ms 的 opacity/transform，滑過去才有「被打開」的感覺。 */
  .main-header-menu > .menu-item > .sub-menu {
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity .16s ease, transform .2s cubic-bezier(.2, .7, .3, 1);
  }
  .main-header-menu > .menu-item:hover > .sub-menu,
  .main-header-menu > .menu-item.focus > .sub-menu,
  .main-header-menu > .menu-item:focus-within > .sub-menu,
  .main-header-menu > .menu-item > .sub-menu.toggled-on {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── 3. 每一列：做成可按的「藥丸」──────────────────────────
     原本 hover 只換底色＋左邊 3px 實線，色塊貼齊面板邊緣、沒有形狀。
     改為 10px 圓角的獨立列（左右內縮 4px），hover 時
     ①整列亮起淡藍底 ②左側 navy 短棒由中間長出
     ③整列右移 2px ④右側浮出箭頭，四個訊號一起指向「這是可以按的」。
     另外補了 :active（按下的瞬間底色再深一階並微縮），
     手感的關鍵其實在這裡——只有 hover 的介面按下去是沒有回應的。 */
  .main-header-menu .sub-menu > li > a.menu-link {
    position: relative;
    margin: 0 4px;
    padding: 10px 30px 10px 18px !important;
    border-left: 0 !important;
    border-radius: 10px;
    letter-spacing: .02em;
    transition:
      background-color .2s ease,
      color .2s ease,
      transform .22s cubic-bezier(.2, .7, .3, 1);
  }

  /* 左側短棒（由 0 長到 22px） */
  .main-header-menu .sub-menu > li:not(.nav-group):not(.jy-cta) > a.menu-link::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 2px;
    background: linear-gradient(180deg, #005E85, #6F97AC);
    transform: translateY(-50%);
    transition: height .22s cubic-bezier(.2, .7, .3, 1);
  }

  /* 右側箭頭（hover 才浮出） */
  .main-header-menu .sub-menu > li:not(.nav-group):not(.jy-cta):not(.menu-item-has-children) > a.menu-link::after {
    content: "→";
    position: absolute;
    right: 13px;
    top: 50%;
    font-size: 13px;
    font-weight: 400;
    color: #6F97AC;
    opacity: 0;
    transform: translate(-5px, -50%);
    transition: opacity .2s ease, transform .22s cubic-bezier(.2, .7, .3, 1);
  }

  .main-header-menu .sub-menu > li:not(.nav-group):not(.jy-cta) > a.menu-link:hover,
  .main-header-menu .sub-menu > li:not(.nav-group):not(.jy-cta) > a.menu-link:focus {
    color: #005E85 !important;
    background-color: #EDF5F9 !important;
    transform: translateX(2px);
  }
  .main-header-menu .sub-menu > li:not(.nav-group):not(.jy-cta) > a.menu-link:hover::before,
  .main-header-menu .sub-menu > li:not(.nav-group):not(.jy-cta) > a.menu-link:focus::before {
    height: 22px;
  }
  .main-header-menu .sub-menu > li:not(.nav-group):not(.jy-cta) > a.menu-link:hover::after,
  .main-header-menu .sub-menu > li:not(.nav-group):not(.jy-cta) > a.menu-link:focus::after {
    opacity: 1;
    transform: translate(0, -50%);
  }

  /* 按下去的瞬間要有回饋，不然「可按」只是視覺暗示 */
  .main-header-menu .sub-menu > li:not(.nav-group):not(.jy-cta) > a.menu-link:active {
    background-color: #DFEDF4 !important;
    transform: translateX(2px) scale(.985);
  }

  /* 鍵盤焦點：hover 的效果之外再補一圈可見焦點環 */
  .main-header-menu .sub-menu > li > a.menu-link:focus-visible {
    outline: 2px solid #005E85;
    outline-offset: -2px;
  }

  /* 目前所在的頁面：常駐短棒＋淡底，讓人知道自己在哪 */
  .main-header-menu .sub-menu > li.current-menu-item > a.menu-link {
    color: #005E85 !important;
    background-color: #F4F9FB !important;
  }
  .main-header-menu .sub-menu > li.current-menu-item > a.menu-link::before {
    height: 22px;
  }

  /* ── 4. 群組標題（mega 面板內的 nav-group）────────────────────
     原本是整條 #F4F8FA 灰帶＋上緣實線，在圓角卡片裡看起來像沒切乾淨。
     改為「細線分隔＋安靜的小標」，層級靠留白與字重表達。 */
  .main-header-menu .sub-menu > li.nav-group {
    background: none !important;
    border-top: 1px solid #EBF1F4 !important;
    margin-top: 8px !important;
  }
  .main-header-menu .sub-menu > li.nav-group:first-child,
  .main-header-menu .sub-menu > li.nav-group.jy-col-break,
  .main-header-menu .sub-menu > li.nav-group.jy-col-break-3 {
    border-top: 0 !important;
    margin-top: 0 !important;
  }
  .main-header-menu .sub-menu > li.nav-group > a.menu-link {
    margin: 0 4px;
    padding: 13px 18px 5px !important;
    font-weight: 700 !important;
  }

  /* ── 5. 招牌療法膠囊（6579 PRP／6581 PRP／6582 BMAC）不受上面的規則影響 ──
     這三項由另一個 WPCode 片段「嘉韻招牌療法膠囊系統」渲染成 navy 漸層膠囊
     （LOGO 膠囊的 1:1 延伸），是刻意跟其他列不同的層級。
     本片段的列樣式特異度較高，會把膠囊壓成 10px 圓角方塊，
     所以這裡把膠囊的形狀／內距／外距原樣還原，並取消短棒與箭頭
     （深色底上那兩個灰藍色元素只會變髒）。
     ⚠️ 這裡跟著膠囊片段綁 menu-item ID；日後若重建選單，兩個片段要一起更新。 */
  .main-header-menu .sub-menu > li.menu-item-6579 > a.menu-link,
  .main-header-menu .sub-menu > li.menu-item-6581 > a.menu-link,
  .main-header-menu .sub-menu > li.menu-item-6582 > a.menu-link {
    margin: 6px 14px !important;
    padding: 8px 18px !important;
    border-radius: 999px !important;
  }
  .main-header-menu .sub-menu > li.menu-item-6579 > a.menu-link::before,
  .main-header-menu .sub-menu > li.menu-item-6581 > a.menu-link::before,
  .main-header-menu .sub-menu > li.menu-item-6582 > a.menu-link::before,
  .main-header-menu .sub-menu > li.menu-item-6579 > a.menu-link::after,
  .main-header-menu .sub-menu > li.menu-item-6581 > a.menu-link::after,
  .main-header-menu .sub-menu > li.menu-item-6582 > a.menu-link::after {
    display: none !important;
  }
  /* 膠囊 hover：漸層由膠囊片段負責，這裡只加「浮起來」的位移與陰影 */
  .main-header-menu .sub-menu > li.menu-item-6579 > a.menu-link:hover,
  .main-header-menu .sub-menu > li.menu-item-6581 > a.menu-link:hover,
  .main-header-menu .sub-menu > li.menu-item-6582 > a.menu-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px rgba(0, 94, 133, .45);
  }
  .main-header-menu .sub-menu > li.menu-item-6579 > a.menu-link:active,
  .main-header-menu .sub-menu > li.menu-item-6581 > a.menu-link:active,
  .main-header-menu .sub-menu > li.menu-item-6582 > a.menu-link:active {
    transform: translateY(0) scale(.985);
  }

  /* ── 6. mega 面板的微調 ──────────────────────────────────────
     兩個 mega 面板是兩欄、每欄只有 230px，項目名稱又長（「Prolo 高濃度
     葡萄糖水注射」「PRP 全程超音波導引注射」）。若照一般下拉留 30px 給
     右側箭頭，文字寬度會少 8px、多換一行，整個面板長高十幾 px——
     這種面板本來就在「視窗高度不夠就會被切掉」的邊緣（見片段 9253）。
     所以 mega 面板不放箭頭，只留左側短棒＋整列底色，
     內距回到 14／12，讓文字可用寬度與升級前完全相同（200px）。 */
  .jy-mega > .sub-menu > li:not(.jy-cta) > a.menu-link {
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 14px !important;
    padding-right: 12px !important;
    letter-spacing: normal;
  }
  .jy-mega > .sub-menu > li:not(.jy-cta) > a.menu-link::after {
    display: none !important;
  }
  .jy-mega > .sub-menu > li:not(.nav-group):not(.jy-cta) > a.menu-link::before {
    left: 5px;
  }

  /* 諮詢卡：面板已自帶 10px 內距，外距要跟著收，否則右緣會離邊太遠。 */
  .jy-mega > .sub-menu > li.jy-cta {
    margin: 10px 4px 2px !important;
  }
  .jy-mega > .sub-menu > li.jy-cta > a.menu-link {
    border-radius: 12px;
    transition: background-color .2s ease, border-color .2s ease, transform .22s cubic-bezier(.2, .7, .3, 1);
  }
  .jy-mega > .sub-menu > li.jy-cta > a.menu-link:hover {
    transform: translateY(-1px);
  }

}

/* ── 7. 欄與欄之間的分隔線 ──────────────────────────────────────
   只在「真的分欄」的條件下畫，否則單欄時會憑空多一條線。
   用面板自己的第二／第三層背景畫，不另外用絕對定位元素——
   那會在面板可捲動時溢出面板外。
   欄數由片段 9253 決定：
     ≥1024px 且 ≥580px → 兩欄（480px 寬）
     ≥1280px 且 ≥580px →「診療項目」(.jy-mega-3) 改三欄（720px 寬）
   1280px 寬但高度只有 420–579px 的視窗，9253 只斷 jy-col-break-3 而成兩欄，
   欄的位置不固定，所以那一段刻意不畫線（寧可沒有，也不要畫錯位置）。 */
@media (min-width: 1024px) and (min-height: 580px) {
  .jy-mega > .sub-menu {
    background-image:
      linear-gradient(90deg, #005E85 0%, #4E7F9C 45%, #9AB6C6 100%),
      linear-gradient(#EDF2F5, #EDF2F5) !important;
    background-size: 100% 3px, 1px calc(100% - 34px) !important;
    background-position: 0 0, 50% 20px !important;
    background-repeat: no-repeat, no-repeat !important;
  }
}
@media (min-width: 1280px) and (min-height: 580px) {
  .jy-mega-3 > .sub-menu {
    background-image:
      linear-gradient(90deg, #005E85 0%, #4E7F9C 45%, #9AB6C6 100%),
      linear-gradient(#EDF2F5, #EDF2F5),
      linear-gradient(#EDF2F5, #EDF2F5) !important;
    background-size: 100% 3px, 1px calc(100% - 34px), 1px calc(100% - 34px) !important;
    background-position: 0 0, 33.333% 20px, 66.666% 20px !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
  }
}

/* ── 8. 使用者若在系統開啟「減少動態效果」 ──────────────────────
   拿掉「位移」類的動態（面板下沉、列右移、箭頭滑入、短棒長出），
   顏色與淡入這類非位移的過場保留——它們不會造成前庭不適，
   而且是「按得下去」這個感覺的主要來源。 */
@media (prefers-reduced-motion: reduce) {
  .main-header-menu > .menu-item > .sub-menu {
    transform: none !important;
    transition: opacity .16s ease !important;
  }
  .main-header-menu .sub-menu > li > a.menu-link {
    transition: background-color .2s ease, color .2s ease !important;
  }
  .main-header-menu .sub-menu > li > a.menu-link:hover,
  .main-header-menu .sub-menu > li > a.menu-link:focus,
  .main-header-menu .sub-menu > li > a.menu-link:active {
    transform: none !important;
  }
  .main-header-menu .sub-menu > li > a.menu-link::before,
  .main-header-menu .sub-menu > li > a.menu-link::after {
    transition: opacity .2s ease !important;
  }
  .main-header-menu .sub-menu > li:not(.nav-group):not(.jy-cta) > a.menu-link::before {
    height: 22px;
    opacity: 0;
  }
  .main-header-menu .sub-menu > li:not(.nav-group):not(.jy-cta) > a.menu-link:hover::before,
  .main-header-menu .sub-menu > li:not(.nav-group):not(.jy-cta) > a.menu-link:focus::before,
  .main-header-menu .sub-menu > li.current-menu-item > a.menu-link::before {
    opacity: 1;
  }
  .main-header-menu .sub-menu > li:not(.nav-group):not(.jy-cta):not(.menu-item-has-children) > a.menu-link::after {
    transform: translate(0, -50%);
  }
  .jy-mega > .sub-menu > li.jy-cta > a.menu-link:hover {
    transform: none;
  }
}

/* ── 9. sticky 頁首的下拉列補回品牌黑（2026-08-12）────────────────
   捲動後出現的 sticky 主選單，所有下拉列的文字是 Astra 預設的 #333232，
   不是品牌黑 #231815——一般頁首與 sticky 頁首的下拉長得不一樣。

   成因：Astra 的 `.ast-builder-menu-1 .menu-item > .menu-link`（0,3,0）
   特異度高過「全站」片段的 `.main-header-menu .sub-menu > li > a`（0,2,2），
   全站片段是靠另外配一條 `#ast-hf-menu-1 .sub-menu > li > a`（1,1,2）把顏色
   搶回來的。但 sticky 是另一份 DOM，容器 id 叫 `ast-hf-menu-1-sticky`，
   那條 id 規則選不到，於是只有 sticky 版退回 Astra 預設色。
   （全站片段的 `li.nav-group` 那兩條已經有寫 -sticky 版本，就是漏了這一條。）

   所以這裡只是把同一條規則鏡射到 sticky 的容器 id，特異度、屬性都一樣，
   一般頁首完全不受影響。實測補上後，兩份頁首的下拉列（一般項目、分類小標、
   招牌膠囊、諮詢卡、案例副標、疼痛部位的部位名與病症）逐項顏色相同。

   ⚠️ 疼痛部位的病症與部位名本來就沒有這個問題——片段 9286 是用純 class
   選擇器（特異度已壓過 Astra 的 0,3,0），兩份頁首一直都是對的。也就是說
   在補這條之前，捲動後「疼痛部位」反而是唯一顏色正確的面板。 */
#ast-hf-menu-1-sticky .sub-menu > li > a {
  color: #231815;
}

/* 嘉韻｜桌機下拉選單兩欄化 ＋ 群組標題可讀性（2026-08-11）
   套用對象：主選單中帶 class "jy-mega" 的項目（目前＝「PRP 增生療法」6580、「診療項目」6570）
   欄位分隔：帶 class "jy-col-break" 的項目會另起一欄（目前＝「儀器治療」8693、「PRP 加乘搭配」9254）
   停用此片段即完整還原。 */

/* ── 1. 兩欄：需要「寬 ≥1024px」且「高 ≥580px」才有足夠空間 ──────────────
   實測「診療項目」下拉起點固定在 x=514，480px 寬時右緣落在 994px。
   1024px 視窗還有 30px 餘裕；960px 就會超出右邊界，被 body 的
   overflow-x:hidden 硬切掉右欄。 */
@media (min-width: 1024px) and (min-height: 580px) {
  .jy-mega > .sub-menu {
    width: 480px !important;
    max-width: none !important;
    column-count: 2;
    column-gap: 0;
    column-fill: auto;
    height: auto !important;
  }
  .jy-mega > .sub-menu > li {
    width: 100%;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
  .jy-mega > .sub-menu > li.jy-col-break {
    break-before: column;
    -webkit-column-break-before: always;
    /* 這是新一欄的第一項，不該再帶著群組之間的間距，
       否則第二欄的頂端會比第一欄低 7px。 */
    margin-top: 0 !important;
  }
}

/* ── 2. 空間不足（視窗太窄或太矮）：維持單欄，但改成可捲動 ──────────────
   不可改用「兩欄＋max-height」：column-count 固定為 2 時，裝不下的內容會被
   推進看不見的第三欄而水平方向消失，等於換個軸繼續無聲截斷。 */
@media (min-width: 922px) and (max-width: 1023px),
       (min-width: 922px) and (max-height: 579px) {
  .jy-mega > .sub-menu {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ── 3. 所有桌機情況共用：收緊行距（群組標題不動） ── */
@media (min-width: 922px) {
  .jy-mega > .sub-menu > li:not(.nav-group):not(.jy-cta) > a {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
}

/* ── 4. 群組標題的可讀性與點擊行為（桌機＋手機都套用） ──────────────
   原本 #8FA1A9 在白底上對比僅約 2.7:1，WCAG AA 要求 4.5:1，字級又只有 11.5px。
   診所客群年紀偏大，這是實際看不清楚的問題，不是理論瑕疵。
   改為 #56737F（約 5.1:1）＋12.5px，仍然明顯比項目文字（#231815，約 15:1）安靜。
   pointer-events:none：群組標題是 url="#" 的假連結，點下去只會跳回頁首。
   移出鍵盤 Tab 順序的部分，由 PHP 片段「嘉韻｜下拉群組標題無障礙修正」處理。 */
.nav-group > a {
  color: #56737F !important;
  font-size: 12.5px !important;
  letter-spacing: 1.6px !important;
  pointer-events: none;
}

/* ── 5. 下拉底部的諮詢卡（.jy-cta） ──────────────────────────────
   兩欄版右下角原本空著 213px（診療項目）／175px（PRP），是整個下拉最弱的一塊。
   這裡放「不知道該做哪一項？加入官方 LINE，先問清楚」（2026-08-11 改：院方無「線上諮詢」服務，全站統一改為線上預約／官方 LINE），
   連到同一個官方 LINE（lin.ee/E1hcuF2），把死空間換成一個出口。
   配色沿用品牌：底 #F1F8FA（站上標題淡藍底）、主色 #005E85、hover 邊框 #A2C8D8。 */
.jy-mega > .sub-menu > li.jy-cta {
  margin: 10px 14px 14px;
  /* 上面第 1 節給所有 li 的 width:100% 會讓卡片撐滿整欄，
     左右 margin 因此失效、右緣溢出面板 14px。這裡要改回 auto。 */
  width: auto !important;
}
.jy-mega > .sub-menu > li.jy-cta > a {
  display: block !important;
  padding: 12px 14px !important;
  background: #F1F8FA;
  border: 1px solid #D8E9EF;
  border-radius: 10px;
  color: #005E85 !important;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  transition: background .18s ease, border-color .18s ease;
}
.jy-mega > .sub-menu > li.jy-cta > a::after {
  content: "加入官方 LINE，先問清楚 →";
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  color: #46707F;
}
.jy-mega > .sub-menu > li.jy-cta > a:hover,
.jy-mega > .sub-menu > li.jy-cta > a:focus {
  background: #E4F1F6 !important;
  border-color: #A2C8D8;
}

/* ── 6. 三欄：只給「診療項目」(.jy-mega-3)，需要寬 ≥1280px ──────────────
   併掉「長期管理」後，兩欄版的左欄變成 12 列、面板高 506px，右欄只有 241px，
   落差 257px 且整體太高。13 個項目本來就不適合擠兩欄。
   三欄版：720px 寬、面板高 309px、三欄底部 301／202／240，落差降到 99px。
   起點 x=514＋720＝1234，1280px 視窗仍有 46px 餘裕。
   這裡明確關掉 max-height／overflow：欄數固定時配高度上限會把內容
   推進看不見的第四欄，是第 2 節警告過的同一個坑。 */
@media (min-width: 1280px) and (min-height: 420px) {
  .jy-mega-3 > .sub-menu {
    width: 720px !important;
    column-count: 3 !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
  .jy-mega-3 > .sub-menu > li.jy-col-break-3 {
    break-before: column;
    -webkit-column-break-before: always;
    margin-top: 0 !important;
  }
}

/* ── 7. 主選單單行化（1024–1439px） ──────────────────────────────────
   1280px 時八個主項目需要 927px，可用寬度只有 784px，差 143px 而換行成兩排；
   換行後展開的下拉會蓋住第二排項目，那幾項變成點不到。
   把項目左右內距 16px 收到 6px 可省下 164px，1280px 起就能維持單行，
   而且不必動字級（16px 維持不變，不犧牲長輩讀者的可讀性）。
   ≥1440px 不套用，保留原本較寬鬆的間距。
   1024–1279px 仍會是兩排——要單行得砍主項目數量，那是內容決策。 */
@media (min-width: 1024px) and (max-width: 1439px) {
  .main-header-menu > li > a.menu-link {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}
/* 文章結尾 CTA 區塊修正（2026-08-10）

   一、問號圖示尺寸
   問題：診所共用 CTA 區塊裡的問號 SVG 原始碼沒有給 width/height，
         桌機上會被撐成 720x960（等於一整個螢幕高），手機上也會佔滿版寬。
   影響：48 篇已發布文章（凡是含「您是不是也有這些問題？」CTA 的都會有）。
   做法：只針對「viewBox 是 0 0 384 512 且未宣告尺寸」的 SVG 限制大小，
         不改任何一篇文章的內容，也不影響其他圖示。
   為什麼用 !important：Elementor 會為每篇文章輸出 post-XXXX.css，
         其選擇器特異度遠高於此處，不加會被蓋掉（實測 /trigger-finger/ 的填色被改成 #528FAB）。
   顏色：統一使用品牌主色 #005E85；若要改回各篇原本的顏色，把 fill 那一行刪掉即可。

   二、CTA 置中與標題樣式
   問題：改寫文章時把 _elementor_edit_mode 切成純內容後，Elementor 原本的置中樣式失效，
         那幾篇的 CTA 變成靠左，與其餘 45 篇不一致；
         而且 jy-v2 給 FAQ 標題用的左邊條會套到 CTA 的 h3 上，置中後看起來像多餘的線。
   做法：只針對「.entry-content 直接子層的 p 裡就是那個問號」的情況處理，
         Elementor 版面的文章結構不同、不會被這幾條命中。 */

.entry-content svg[viewBox="0 0 384 512"]:not([width]):not([height]) {
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto 0.6rem !important;
  fill: #005E85 !important;
}

.entry-content > p:has(> svg[viewBox="0 0 384 512"]),
.entry-content > p:has(> svg[viewBox="0 0 384 512"]) ~ h3,
.entry-content > p:has(> svg[viewBox="0 0 384 512"]) ~ h4 {
  text-align: center;
}

.entry-content > p:has(> svg[viewBox="0 0 384 512"]) ~ h3 {
  border-left: 0;
  padding-left: 0;
}

@media (max-width: 768px) {
  .entry-content svg[viewBox="0 0 384 512"]:not([width]):not([height]) {
    width: 44px !important;
    height: 44px !important;
  }
}
/* 嘉韻招牌療法膠囊系統（LOGO 膠囊 1:1 延伸，桌機＋手機共用）
   選單膠囊：6580=PRP 增生療法(主選單)、6582=BMAC(診療項目下拉)、
   6579/6581=PRP 進階增生療法(兩個下拉)
   文章頁徽章：/bmac/(5008)、/what-is-prp/(838)
   色票取樣自 logo-n-241121-01.png。2026-08-14 重新取樣：logo 的膠囊
   不只顏色淡出，連 alpha 也一起淡出（底部只剩 14/255），舊色票只讀了
   RGB 沒有疊白底，所以每一版都比 logo 實際看到的深一階。現在的 11 段
   色票＝三節膠囊逐列取樣、疊白底後平均，與 logo 1:1。
   底部淡到近白，因此膠囊上的字改為品牌黑 #231815（最深處仍有 4.8:1）。 */

:root {
  --jy-logo-pill: linear-gradient(180deg,
    #187090 0%, #2A789A 10%, #488BA7 20%, #659EB5 30%, #7EADC1 40%,
    #9BC0CF 50%, #B7D2DD 60%, #CDDFE7 70%, #E2EDF1 80%, #F5F8FA 90%, #FDFEFE 100%);
}
li.menu-item-6580 > .menu-link,
li.menu-item-6582 > .menu-link,
li.menu-item-6579 > .menu-link,
li.menu-item-6581 > .menu-link {
  background: var(--jy-logo-pill) !important;
  border-radius: 999px;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
li.menu-item-6580 > .menu-link {
  padding: 8px 18px !important;
}
li.menu-item-6582 > .menu-link,
li.menu-item-6579 > .menu-link,
li.menu-item-6581 > .menu-link {
  width: max-content;
  margin: 6px 14px;
  padding: 8px 18px !important;
}
li.menu-item-6580 > .menu-link .menu-text,
li.menu-item-6582 > .menu-link .menu-text,
li.menu-item-6579 > .menu-link .menu-text,
li.menu-item-6581 > .menu-link .menu-text {
  color: #231815 !important;
  font-weight: 700;
}
li.menu-item-6580 > .menu-link svg path,
li.menu-item-6582 > .menu-link svg path,
li.menu-item-6579 > .menu-link svg path,
li.menu-item-6581 > .menu-link svg path {
  fill: #231815;
}
li.menu-item-6580 > .menu-link:hover,
li.menu-item-6580 > .menu-link:focus,
li.menu-item-6582 > .menu-link:hover,
li.menu-item-6582 > .menu-link:focus,
li.menu-item-6579 > .menu-link:hover,
li.menu-item-6579 > .menu-link:focus,
li.menu-item-6581 > .menu-link:hover,
li.menu-item-6581 > .menu-link:focus {
  /* hover 不改顏色——膠囊的色彩任何狀態都等於 logo；回饋改用浮起＋陰影 */
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(0, 94, 133, .45);
}


/* ── 2026-08-14：色票改為 logo 實測值 ─────────────────────────────
   舊值（供還原）：
     一般：linear-gradient(180deg, #0F5F84 0%, #17698D 55%, #3F84A3 78%, #9FC0D2 93%, #E8F1F5 100%)
     hover：linear-gradient(180deg, #0B5A7C 0%, #2A7290 66%, #6FA0B8 90%, #D6E6EE 100%)
   ──────────────────────────────────────────────────────────────── */

/* 文章頁徽章（純 CSS 生成，不碰文章內容與 Elementor 資料） */
body.postid-5008 h1.entry-title::before,
body.postid-838 h1.entry-title::before {
  content: '嘉韻招牌療法';
  display: block;
  width: max-content;
  background: var(--jy-logo-pill);
  color: #231815;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 3px;
  border-radius: 999px;
  padding: 7px 20px;
  margin-bottom: 16px;
}
/*全站*/
.mbshow{ display:none;}
.ast-builder-button-wrap{min-width:180px;text-align: center;}
.table-no-outline table{ border:0}
#ez-toc-container{ margin-top:10px !important}
#menu-item-5466{display:none;}

.broken_link, a.broken_link{ text-decoration:none !important}

/* 預先固定 Swiper 導航箭頭，防止 CLS */
.elementor-image-carousel-wrapper .elementor-swiper-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
}
.elementor-image-carousel-wrapper .elementor-swiper-button-prev {
  left: 0;
}
.elementor-image-carousel-wrapper .elementor-swiper-button-next {
  right: 0;
}

/* 畫重點 */
.single-post strong{background:-webkit-linear-gradient(#ffe65a 0%, #ffe65a 100%); position:relative; background-size:100% 7px; background-position:0 80%; background-repeat:no-repeat}

/*fixedicon*/
.fixedicon{ width:50px; position:fixed; right:10px; bottom:70px;z-index:9999}
	.fixedicon .icongo{ display:inline-block; padding:2px 5px;}
	.fixedicon span{ display:none; width:80px; position:absolute; right:50px; top:5px; border-radius:20px; font-size:13px; background:#fff; padding:5px 8px; text-align:center;}
	.fixedicon >div { position:relative;}
	.fixedicon >div:hover span{display:inline-block}
	.fixedicon span.hide{ display:none!important}
	.fixedicon img{transform:scale(1); cursor:pointer; margin-bottom:5px}
	.fixedicon img:hover{ transform:scale(1.1); transition:all 0.5s}

/*time table*/
table.time{ width: 100%; border-collapse: collapse; border:0;table-layout:fixed;}
.time td,.time th{ padding:10px 5px; border:0; border-bottom: 1px solid #005E85; text-align: center; border-collapse:collapse;font-weight:bold;font-size:1.2em} 
.time th{ background: #005E85; color: #fff;}
.time td{ color: #005E85}
.time .table-w{color:#af2618;}
.widget-title{ border-bottom:1px solid #005e85; padding-bottom:10px}
.ast-separate-container .ast-article-single{ padding:2em}

/*post*/
.post .entry-content h2 {
	border-left: #a2c8d8 7px solid;
    padding: 10px 10px 10px 12px;margin-left:-10px;
    background-color: #f1f8fa;
    border-radius: 4px;font-size:1.7em;}
.post .entry-content h3{font-size:1.5em;color:#0e4c71}
.post .entry-content h4{font-size:1.4em;}
.post .entry-content h5{font-size:1.3em;}

/* TABLE CSS*/
@media only screen and (max-width: 480px) {
	#menu-item-5466{display:block;}
	.sub-menu li br{ display:none}
}
/* Small devices (portrait tablets and large phones, 480px and up) */
@media only screen and (max-width: 480px) {
.mbshow{ display:block;}

/*time table*/
.time td,.time th{ line-height:1.2em; font-size:1em;padding:3px;}

/*post*/
.post .entry-content h2 {
	border-left: #a2c8d8 7px solid;
    padding: 10px 10px 10px 12px;margin-left:-10px;
    background-color: #f1f8fa;
    border-radius: 4px;font-size:1.7em;}
.post .entry-content h3{font-size:1.3em;color:#0e4c71}
.post .entry-content h4{font-size:1.2em;}
.post .entry-content h5{font-size:1.1em;}

/*手機板表格*/
.uael-table-wrapper table {display: block; overflow-x: auto; white-space: nowrap;}
}

.broken_link, 
a.broken_link {
    text-decoration: none !important; 
}

/* ── 下拉選單樣式（2026-08-05）僅桌機 ≥922px；手機維持 Astra 抽屜選單 ── */
@media (min-width:922px){
  .main-header-menu .sub-menu,
  #ast-hf-menu-1 .sub-menu{
    padding:8px 0;
    border-radius:2px;
    border-top:3px solid #005E85;
    box-shadow:0 6px 24px -6px rgba(0,94,133,.18);
  }
  .main-header-menu .sub-menu > li > a,
  #ast-hf-menu-1 .sub-menu > li > a{
    line-height:1.5;
    padding:11px 20px;
    color:#231815;
    border-left:3px solid transparent;
    transition:color .18s ease, background-color .18s ease, border-color .18s ease;
  }
  .main-header-menu .sub-menu > li > a:hover,
  .main-header-menu .sub-menu > li > a:focus,
  #ast-hf-menu-1 .sub-menu > li > a:hover,
  #ast-hf-menu-1 .sub-menu > li > a:focus{
    color:#005E85;
    background-color:#F1F8FA;
    border-left-color:#A2C8D8;
  }
}
@media (prefers-reduced-motion:reduce){
  .main-header-menu .sub-menu > li > a,
  #ast-hf-menu-1 .sub-menu > li > a{transition:none;}
}


/* ── 下拉選單分組標籤（2026-08-06）桌機與手機皆適用 ── */
/* 標籤不可點、不參與 hover，外觀與一般選項明確區隔 */
#ast-hf-menu-1 li.nav-group > a,
#ast-hf-menu-1-sticky li.nav-group > a,
#ast-hf-mobile-menu li.nav-group > a,
.main-header-menu li.nav-group > a{
  pointer-events:none;
  cursor:default;
  font-size:11.5px;
  font-weight:400;
  letter-spacing:.16em;
  line-height:1.4;
  color:#8FA1A9;
  background:none;
  border-left:0;
}
/* 標籤不需要展開箭頭（Astra 會給每個 menu-link 加 icon-arrow）*/
#ast-hf-menu-1 li.nav-group > a .ast-icon,
#ast-hf-menu-1-sticky li.nav-group > a .ast-icon,
#ast-hf-mobile-menu li.nav-group > a .ast-icon,
.main-header-menu li.nav-group > a .ast-icon{
  display:none;
}

/* 桌機：下拉面板內的間距與細線 */
@media (min-width:922px){
  .main-header-menu .sub-menu li.nav-group > a,
  #ast-hf-menu-1 .sub-menu li.nav-group > a{
    padding:15px 20px 5px;
  }
  .main-header-menu .sub-menu li.nav-group,
  #ast-hf-menu-1 .sub-menu li.nav-group{
    margin-top:7px;
    border-top:1px solid #EDF2F4;
  }
  .main-header-menu .sub-menu li.nav-group:first-child,
  #ast-hf-menu-1 .sub-menu li.nav-group:first-child{
    margin-top:0;
    border-top:0;
  }
}

/* 手機：標籤加淡底色與上緣線，一眼看出是分組而非選項 */
@media (max-width:921px){
  #ast-hf-mobile-menu li.nav-group,
  .main-header-menu li.nav-group{
    background:#F4F8FA;
    border-top:1px solid #E4ECF0;
  }
  #ast-hf-mobile-menu li.nav-group > a,
  .main-header-menu li.nav-group > a{
    padding-top:14px;
    padding-bottom:4px;
    border-bottom:0;
  }
}

/* ══════════════════════════════════════════════════════════════
   嘉韻改版文章 閱讀版面 v2（2026-08-08）
   設計語彙沿用首頁門診時間區塊（#time / .jy-hours）：
   navy 四階 ＋ tint 三階 ＋ 柔和陰影 ＋ 12px 圓角 ＋ serif 標題
   新增一篇文章只要把 post id 加進 WPCode 6141 的 $jy_v2_posts
   ══════════════════════════════════════════════════════════════ */
.jy-v2 .entry-content{
  --navy:#005E85; --navy-2:#2f6d8f; --navy-3:#4e7f9c; --navy-4:#6f97ac;
  --tint-1:#9ab6c6; --tint-2:#c3d5df; --tint-3:#e2ebf0;
  --ink:#231815; --ink-soft:#5a534f;
  --ground-soft:#f4f8fa; --card:#ffffff; --line:#d8e4ea;
  --ok:#1f7f72; --ok-bg:#e9f4f1; --ok-line:#bfe0d8;
  --wait:#9a6b0f; --wait-bg:#fbf3e2; --wait-line:#ecd9ab;
  --alert:#b3261e; --alert-bg:#fdf0ee; --alert-line:#e4c3be;
  --shadow:0 4px 18px rgba(0,50,72,.05);
  --shadow-lift:0 8px 28px rgba(0,50,72,.08);
  max-width:720px; margin-left:auto; margin-right:auto;
}

/* ── 標題：用左側標記條取代整片色塊，較有設計感也較好掃讀 ── */
.jy-v2 .entry-content h2{
  position:relative;
  font-size:clamp(23px,2.7vw,29px); line-height:1.4;
  color:var(--navy); font-weight:700; letter-spacing:.02em;
  background:none; border:0;
  margin:68px 0 24px; padding:0 0 16px 0;
  border-bottom:1px solid var(--line);
  scroll-margin-top:112px;
}
.jy-v2 .entry-content h2::before{
  content:""; position:absolute; left:0; bottom:-1px;
  width:72px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--navy),var(--tint-1));
}
.jy-v2 .entry-content h2:first-of-type{ margin-top:34px }

.jy-v2 .entry-content h3{
  font-size:1.14em; line-height:1.55; color:var(--navy-2); font-weight:700;
  margin:38px 0 12px; padding-left:14px;
  border-left:3px solid var(--tint-2);
  scroll-margin-top:112px;
}

/* ── 內文 ── */
.jy-v2 .entry-content p{ margin-bottom:1.6em; color:#4a4a4a }
.jy-v2 .entry-content p>a,
.jy-v2 .entry-content li>a{
  color:var(--navy); text-decoration:underline;
  text-decoration-color:var(--tint-1); text-decoration-thickness:1px;
  text-underline-offset:3px; transition:.15s;
}
.jy-v2 .entry-content p>a:hover,
.jy-v2 .entry-content li>a:hover{ text-decoration-color:var(--navy); background:var(--tint-3) }

/* ── 清單：品牌色圓點／編號 ──
   ⚠️ 一定要排除文章目錄（ez-toc）：它的 li 沒有 padding，
      加了 ::before 圓點會直接蓋住標題的第一個字（2026-08-08 踩過）── */
.jy-v2 .entry-content ul:not([class*="ez-toc"]){ list-style:none; padding-left:0 }
.jy-v2 .entry-content ul:not([class*="ez-toc"])>li{
  position:relative; padding-left:22px; margin-bottom:.6em;
}
.jy-v2 .entry-content ul:not([class*="ez-toc"])>li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:7px; height:7px; border-radius:50%;
  background:var(--tint-1); box-shadow:0 0 0 3px var(--tint-3);
}
.jy-v2 .entry-content ol:not([class*="ez-toc"]){ counter-reset:jy; list-style:none; padding-left:0 }
.jy-v2 .entry-content ol:not([class*="ez-toc"])>li{
  position:relative; padding-left:30px; margin-bottom:.6em; counter-increment:jy;
}
.jy-v2 .entry-content ol:not([class*="ez-toc"])>li::before{
  content:counter(jy); position:absolute; left:0; top:.15em;
  width:21px; height:21px; border-radius:50%;
  background:var(--tint-3); color:var(--navy);
  font-size:12px; font-weight:800; line-height:21px; text-align:center;
  font-family:'Noto Serif TC', serif;
}
/* 目錄完全交還給外掛自己的樣式 */
.jy-v2 .entry-content [class*="ez-toc"] li::before,
.jy-v2 .entry-content [class*="ez-toc"] li::marker{ content:none; display:none }
.jy-v2 .entry-content [class*="ez-toc"] li{ padding-left:0; position:static }

/* ── 表格：卡片化，圓角＋柔和陰影＋首欄強調 ── */
.jy-v2 .entry-content table{
  width:100%; border-collapse:separate; border-spacing:0;
  margin:30px 0; line-height:1.65; font-size:.95em;
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; box-shadow:var(--shadow);
}
/* 寬表拆成兩張時，用 caption 標「① 原理與適應症／② 優缺點」，讀者才知道兩張是一組 */
.jy-v2 .entry-content table caption{
  caption-side:top; text-align:left;
  font-family:'Noto Serif TC', serif;
  font-size:15px; font-weight:700; color:var(--navy);
  letter-spacing:.02em; line-height:1.5;
  padding:0 2px 10px; margin:0;
}
/* 一組表的第二張往上收，兩張在視覺上是一個區塊 */
.jy-v2 .entry-content table+table{ margin-top:18px }

/* 欄位多的比較表：桌機也允許橫捲，不要硬擠成一團 */
.jy-v2 .entry-content .jy-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:30px 0; border-radius:12px;
}
.jy-v2 .entry-content .jy-scroll>table{ margin:0; min-width:880px }
/* 欄位多時每欄要有合理寬度，中文才不會被壓成一行兩三個字 */
.jy-v2 .entry-content .jy-scroll td,
.jy-v2 .entry-content .jy-scroll th{ min-width:132px }
.jy-v2 .entry-content .jy-scroll td:first-child,
.jy-v2 .entry-content .jy-scroll th:first-child{ min-width:168px }
/* 橫捲提示：右側漸層，讓讀者知道還有內容 */
.jy-v2 .entry-content .jy-scroll{
  background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)),
             linear-gradient(90deg,rgba(255,255,255,0),#fff 70%) 100% 0,
             radial-gradient(farthest-side at 0 50%,rgba(0,50,72,.10),transparent),
             radial-gradient(farthest-side at 100% 50%,rgba(0,50,72,.10),transparent) 100% 0;
  background-repeat:no-repeat; background-size:40px 100%,40px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll;
}
.jy-v2 .entry-content thead th{
  background:linear-gradient(180deg,var(--navy),#004d6d);
  color:#fff; font-weight:700; letter-spacing:.05em;
  padding:12px 14px; text-align:left; border:0; vertical-align:middle;
  font-family:'Noto Serif TC', serif; font-size:.92em; line-height:1.45;
}
.jy-v2 .entry-content tbody td{
  padding:12px 14px; vertical-align:top;
  border-bottom:1px solid #eef3f6; color:#4a4a4a;
}
/* ⚠️ 舊文的儲存格裡常包著 <p>，會被上面的 p{color} 蓋掉表頭白字（2026-08-08 踩過：
   深灰字壓在深藍表頭上幾乎看不見）。儲存格內的段落一律繼承儲存格顏色、去掉多餘間距。 */
.jy-v2 .entry-content th>p,
.jy-v2 .entry-content td>p{
  color:inherit; font-size:inherit; margin:0; line-height:inherit;
}
.jy-v2 .entry-content th>p+p,
.jy-v2 .entry-content td>p+p{ margin-top:.45em }
.jy-v2 .entry-content td{ word-break:normal; overflow-wrap:break-word }
.jy-v2 .entry-content thead th,
.jy-v2 .entry-content thead th *{ color:#fff }
.jy-v2 .entry-content tbody tr:last-child td{ border-bottom:0 }
.jy-v2 .entry-content tbody tr:nth-child(even) td{ background:#fafcfd }
.jy-v2 .entry-content tbody td:first-child{
  color:var(--navy); font-weight:600; background:var(--ground-soft);
  border-right:1px solid #eef3f6; line-height:1.5;
  /* 2026-08-16：首欄若放的是長句（例 /bmac/ 的「已確定的事／還在研究中」兩欄表），
     nowrap 會把首欄撐到滿寬、把第二欄壓成一個字寬。改用 keep-all：
     中文詞句不硬斷，但允許在標點處換行 */
  white-space:normal; word-break:keep-all;
}
.jy-v2 .entry-content tbody tr:nth-child(even) td:first-child{ background:#eef5f8 }
.jy-v2 .entry-content td strong,
.jy-v2 .entry-content th strong{ background:none; color:var(--navy) }

/* ── 圖：圓角＋柔和陰影＋圖說 ── */
.jy-v2 .entry-content figure{ margin:36px auto }
.jy-v2 .entry-content figure img,
.jy-v2 .entry-content figure svg{
  width:100%; height:auto; display:block;
  border-radius:12px; box-shadow:var(--shadow);
}
.jy-v2 .entry-content figcaption{
  font-size:.86em; color:#7d8f99; text-align:center;
  margin-top:12px; line-height:1.75;
  font-family:'Noto Serif TC', serif;
}

/* ── 院方臨床觀察：卡片＋標籤 chip ── */
.jy-v2 .entry-content .jy-note{
  position:relative; background:var(--ground-soft);
  border:1px solid var(--line); border-left:4px solid var(--navy);
  border-radius:0 12px 12px 0; padding:20px 24px 16px;
  margin:34px 0; box-shadow:var(--shadow);
}
.jy-v2 .entry-content .jy-note p{ margin-bottom:.8em }
.jy-v2 .entry-content .jy-note p:last-child{ margin-bottom:0 }
.jy-v2 .entry-content .jy-note-t{
  display:inline-block; margin:0 0 12px;
  background:var(--navy); color:#fff;
  font-size:12.5px; font-weight:700; letter-spacing:.1em;
  padding:5px 14px; border-radius:999px;
  font-family:'Noto Serif TC', serif;
}
.jy-v2 .entry-content .jy-note-t strong{ background:none; color:inherit }

/* ── 段首標籤型粗體：不畫螢光，改用品牌色 ── */
.jy-v2 .entry-content strong.jy-label{ background:none; color:var(--navy) }

/* ── 螢光筆（品牌藍） ── */
.jy-v2 .entry-content strong{
  background:linear-gradient(rgba(0,94,133,.16) 0%,rgba(0,94,133,.16) 100%);
  background-size:100% 8px; background-position:0 82%; background-repeat:no-repeat;
}
.jy-v2 .entry-content li strong,
.jy-v2 .entry-content td strong,
.jy-v2 .entry-content th strong{ background:none }

/* ── 免責聲明／註記 ── */
.jy-v2 .entry-content p>em:only-child{
  display:block; background:#fbfcfd; border:1px dashed var(--line);
  border-radius:10px; padding:14px 18px; color:#7d8f99;
  font-size:.9em; font-style:normal; line-height:1.8;
}

/* ── 參考文獻：緊湊、次要層級 ── */
.jy-v2 .entry-content h2#ref-anchor{ }
.jy-v2 .entry-content ol.jy-ref>li{ font-size:.9em; color:#6b7c85; margin-bottom:.5em }

/* ── 特色圖與標題對齊閱讀欄 ── */
.jy-v2 .entry-header .post-thumb-img-content{ max-width:720px; margin-left:auto; margin-right:auto }
.jy-v2 .entry-header .post-thumb-img-content img{ border-radius:12px; box-shadow:var(--shadow) }
.jy-v2 .entry-header .entry-title,
.jy-v2 .entry-header .entry-meta{ max-width:720px; margin-left:auto; margin-right:auto }
.jy-v2 .entry-header .entry-title{ letter-spacing:.01em; line-height:1.4 }

/* ── 手機 ── */
@media (max-width:781px){
  .jy-v2 .entry-content p,
  .jy-v2 .entry-content li{ font-size:16px }
  .jy-v2 .entry-content h2{ margin-top:46px; padding-bottom:12px }
  .jy-v2 .entry-content h3{ margin-top:30px }
  .jy-v2 .entry-content figure{ margin:28px auto }
  .jy-v2 .entry-content table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch }
  /* table 變 display:block 後 caption 會跟著橫捲走掉，黏在左緣才看得到 */
  .jy-v2 .entry-content table caption{ position:sticky; left:0; font-size:14.5px }
  .jy-v2 .entry-content thead th{ white-space:nowrap }
  .jy-v2 .entry-content tbody td{ min-width:150px }
  .jy-v2 .entry-content tbody td:first-child{ min-width:112px }
  .jy-v2 .entry-content .jy-note{ padding:18px 18px 14px }
}

/* ── 導言段：文章開場給更大的字級，建立閱讀節奏 ── */
.jy-v2 .entry-content>p:first-of-type{
  font-size:1.12em; line-height:1.85; color:#3e4e56; margin-bottom:1.9em;
}
/* ── 章節之間的呼吸：H2 前留白由 margin 控制，這裡處理相鄰情形 ── */
.jy-v2 .entry-content figure+h2,
.jy-v2 .entry-content table+h2{ margin-top:56px }
/* ── 「延伸閱讀」類的行內小清單，弱化為次要層級 ── */
.jy-v2 .entry-content ul>li>a:only-child{ font-weight:600 }

/* ══════════════════════════════════════════════════════════════
   CTA 元件（2026-08-09）
   兩種強度：.jy-cta-inline 讀到一半的輕量提示｜.jy-cta 文末的完整轉換面板
   設計語彙同門診表：navy 漸層＋12px 圓角＋999px 藥丸鈕＋柔和陰影
   ══════════════════════════════════════════════════════════════ */

/* ── 行內 CTA：淺底＋左側 navy 標記，不打斷閱讀節奏 ── */
.jy-v2 .entry-content .jy-cta-inline{
  background:linear-gradient(180deg,#f4f9fb,#eaf2f6);
  border:1px solid var(--line); border-left:4px solid var(--navy);
  border-radius:12px; box-shadow:var(--shadow);
  margin:34px 0; padding:20px 22px 18px;
  font-size:1em; line-height:1.8; color:var(--ink-soft);
}
.jy-v2 .entry-content .jy-cta-inline strong{
  display:block; margin-bottom:4px;
  color:var(--navy); font-size:1.06em; background:none;
}
.jy-v2 .entry-content .jy-cta-inline .jy-acts{ margin:14px 0 0 }

/* ── 完整 CTA：深色面板，文末最後一眼 ── */
.jy-v2 .entry-content .jy-cta{
  background:linear-gradient(155deg,#00648e 0%,#005E85 45%,#004b6b 100%);
  border-radius:16px; box-shadow:0 10px 34px rgba(0,50,72,.18);
  margin:52px 0 34px; padding:34px 32px 30px; color:#fff;
  position:relative; overflow:hidden;
}
/* 右上角的淡色圓弧，呼應門診表的層次感 */
.jy-v2 .entry-content .jy-cta::after{
  content:""; position:absolute; right:-70px; top:-70px;
  width:210px; height:210px; border-radius:50%;
  background:rgba(255,255,255,.06); pointer-events:none;
}
.jy-v2 .entry-content .jy-cta .jy-eyebrow{
  font-size:13px; letter-spacing:.16em; text-transform:none;
  color:var(--tint-1); margin:0 0 10px; font-weight:600;
}
.jy-v2 .entry-content .jy-cta .jy-cta-t{
  font-size:clamp(20px,2.4vw,25px); line-height:1.45; font-weight:700;
  color:#fff; margin:0 0 10px; letter-spacing:.02em;
}
.jy-v2 .entry-content .jy-cta p{
  color:rgba(255,255,255,.9); font-size:15.5px; line-height:1.8; margin:0 0 6px;
}
.jy-v2 .entry-content .jy-cta strong{ color:#fff; background:none }
.jy-v2 .entry-content .jy-cta .jy-meta{
  margin:18px 0 0; padding-top:15px;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:13.5px; line-height:1.75; color:rgba(255,255,255,.72);
}
.jy-v2 .entry-content .jy-cta .jy-meta a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.4) }

/* ── 按鈕列 ── */
.jy-v2 .entry-content .jy-acts{
  display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 0;
}
.jy-v2 .entry-content .jy-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 22px; border-radius:999px;
  font-size:15px; font-weight:700; letter-spacing:.03em;
  text-decoration:none; border:1.5px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  font-family:'Noto Serif TC', serif;
}
.jy-v2 .entry-content .jy-btn:hover{ transform:translateY(-1px) }
/* 深色面板上：主鈕白底藍字，次鈕描邊 */
.jy-v2 .entry-content .jy-cta .jy-btn{ background:#fff; color:var(--navy); box-shadow:0 3px 12px rgba(0,0,0,.14) }
.jy-v2 .entry-content .jy-cta .jy-btn:hover{ box-shadow:0 6px 18px rgba(0,0,0,.2) }
.jy-v2 .entry-content .jy-cta .jy-btn-2{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); box-shadow:none }
.jy-v2 .entry-content .jy-cta .jy-btn-2:hover{ background:rgba(255,255,255,.12) }
/* 淺底行內：主鈕實心 navy，次鈕描邊 */
.jy-v2 .entry-content .jy-cta-inline .jy-btn{
  background:var(--navy); color:#fff; padding:9px 19px; font-size:14.5px;
  box-shadow:0 3px 10px rgba(0,94,133,.22);
}
.jy-v2 .entry-content .jy-cta-inline .jy-btn:hover{ background:#00506f }
.jy-v2 .entry-content .jy-cta-inline .jy-btn-2{
  background:#fff; color:var(--navy); border-color:var(--tint-1); box-shadow:none;
}
.jy-v2 .entry-content .jy-cta-inline .jy-btn-2:hover{ background:#f0f6f9 }
/* CTA 內的連結不吃全站底線樣式 */
.jy-v2 .entry-content .jy-btn,
.jy-v2 .entry-content .jy-btn:visited{ border-bottom:1.5px solid transparent }
.jy-v2 .entry-content .jy-cta .jy-btn-2,
.jy-v2 .entry-content .jy-cta-inline .jy-btn-2{ border-bottom-style:solid }

@media (max-width:781px){
  .jy-v2 .entry-content .jy-cta{ padding:26px 20px 24px; border-radius:14px }
  .jy-v2 .entry-content .jy-cta-inline{ padding:17px 17px 16px }
  .jy-v2 .entry-content .jy-acts{ gap:9px }
  /* 手機一律整排寬鈕，拇指才好按 */
  .jy-v2 .entry-content .jy-btn{ width:100%; padding:13px 18px }
}

/* ══════════════════════════════════════════════════════════════
   Google 評價橫向卡片（2026-08-09）
   取代原本 8 張看不清楚的評論截圖：改成真文字，可讀、可搜尋、有溫度
   橫向 scroll-snap，手機用滑的、桌機可拖曳
   ══════════════════════════════════════════════════════════════ */
.jy-v2 .entry-content .jy-reviews{ margin:44px 0 38px }
.jy-v2 .entry-content .jy-reviews .jy-rv-head{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; margin:0 0 4px;
}
.jy-v2 .entry-content .jy-reviews .jy-rv-t{
  font-family:'Noto Serif TC', serif;
  font-size:19px; font-weight:700; color:var(--navy); margin:0; letter-spacing:.02em;
}
.jy-v2 .entry-content .jy-reviews .jy-rv-sub{
  font-size:14px; color:#667983; margin:0 0 16px; line-height:1.7;
}
.jy-v2 .entry-content .jy-reviews .jy-rv-sub a{ color:var(--navy) }
/* 軌道：橫向捲動＋吸附 */
.jy-v2 .entry-content .jy-rv-track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding:4px 2px 18px; margin:0;
  scrollbar-width:thin; scrollbar-color:var(--tint-1) transparent;
}
.jy-v2 .entry-content .jy-rv-track::-webkit-scrollbar{ height:8px }
.jy-v2 .entry-content .jy-rv-track::-webkit-scrollbar-thumb{
  background:var(--tint-1); border-radius:99px;
}
.jy-v2 .entry-content .jy-rv-track::-webkit-scrollbar-track{ background:transparent }
/* 單張卡片 */
.jy-v2 .entry-content .jy-rv{
  flex:0 0 306px; scroll-snap-align:start;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:20px 20px 18px; box-shadow:var(--shadow); margin:0;
  display:flex; flex-direction:column;
}
.jy-v2 .entry-content .jy-rv .jy-rv-who{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.jy-v2 .entry-content .jy-rv .jy-rv-av{
  width:38px; height:38px; border-radius:50%; flex:0 0 38px;
  background:linear-gradient(150deg,var(--navy),#4e7f9c);
  color:#fff; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Noto Serif TC', serif;
}
.jy-v2 .entry-content .jy-rv .jy-rv-name{
  font-family:'Noto Serif TC', serif;
  font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.35;
}
.jy-v2 .entry-content .jy-rv .jy-rv-meta{ font-size:12.5px; color:#667882; line-height:1.4 }
.jy-v2 .entry-content .jy-rv .jy-rv-stars{
  color:#a78501; font-size:14px; letter-spacing:2px; margin:0 0 8px;
}
.jy-v2 .entry-content .jy-rv .jy-rv-body{
  font-size:14.8px; line-height:1.85; color:#4a4a4a; margin:0;
}
.jy-v2 .entry-content .jy-rv .jy-rv-body strong{ background:none; color:var(--navy) }
/* 右側漸層提示：讓讀者知道還能往右滑 */
.jy-v2 .entry-content .jy-reviews{ position:relative }
.jy-v2 .entry-content .jy-reviews::after{
  content:""; position:absolute; right:0; top:64px; bottom:26px; width:44px;
  background:linear-gradient(90deg,rgba(255,255,255,0),#f9fbfc 78%);
  pointer-events:none;
}
@media (max-width:781px){
  .jy-v2 .entry-content .jy-rv{ flex-basis:270px; padding:17px 17px 15px }
  .jy-v2 .entry-content .jy-reviews .jy-rv-t{ font-size:17.5px }
  .jy-v2 .entry-content .jy-reviews::after{ width:26px }
}

/* 軟轉收尾：不用按鈕，用一句話邀請，讀者自己決定要不要往下走 */
.jy-v2 .entry-content .jy-reviews .jy-rv-soft{
  margin:6px 0 0; padding:16px 18px;
  background:linear-gradient(180deg,#f4f9fb,#eaf2f6);
  border:1px solid var(--line); border-left:4px solid var(--tint-1);
  border-radius:12px; font-size:15.5px; line-height:1.9; color:var(--ink-soft);
}
.jy-v2 .entry-content .jy-reviews .jy-rv-soft strong{ background:none; color:var(--navy) }
.jy-v2 .entry-content .jy-reviews .jy-rv-soft a{
  color:var(--navy); font-weight:700; border-bottom:1px solid var(--tint-1);
}
/* 評價本文再放大一點，長輩也讀得舒服 */
.jy-v2 .entry-content .jy-rv .jy-rv-body{ font-size:15.2px; line-height:1.95 }
.jy-v2 .entry-content .jy-rv{ flex-basis:318px }
@media (max-width:781px){
  .jy-v2 .entry-content .jy-rv{ flex-basis:282px }
  .jy-v2 .entry-content .jy-reviews .jy-rv-soft{ font-size:15px; padding:15px 16px }
}

/* ===== 評論輪播 品牌化（共用版型 1908 內 f40504e，全站文章尾生效）2026-08-09 ===== */
.elementor-element-f40504e .swiper-slide-inner{ border-radius:12px; overflow:hidden; border:1px solid #d8e4ea; background:#fff; box-shadow:0 4px 18px rgba(0,50,72,.08) }
.elementor-element-f40504e .swiper-slide{ padding:8px 2px }
.elementor-element-f40504e .swiper-slide-image{ border-radius:12px }
.elementor-element-f40504e .elementor-swiper-button{ color:#005E85; background:#F1F8FA; border:1px solid #A2C8D8; border-radius:999px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,50,72,.12); transition:all .2s }
.elementor-element-f40504e .elementor-swiper-button:hover{ background:#005E85; color:#fff; border-color:#005E85 }
.elementor-element-f40504e .elementor-swiper-button svg{ fill:currentColor; width:14px; height:14px }
.elementor-element-f40504e .swiper-pagination-bullet{ background:#A2C8D8; opacity:.6 }
.elementor-element-f40504e .swiper-pagination-bullet-active{ background:#005E85; opacity:1 }


/* ===== BMAC 5008 品牌藍螢光＋閱讀優化（只搬螢光,不搬 jy-v2 整套版面）2026-08-09 ===== */
.postid-5008 .entry-content strong{
  background:linear-gradient(rgba(0,94,133,.16) 0%, rgba(0,94,133,.16) 100%);
  background-size:100% 8px; background-position:0 82%; background-repeat:no-repeat;
}
.postid-5008 .entry-content li strong,
.postid-5008 .entry-content td strong,
.postid-5008 .entry-content th strong,
.postid-5008 .entry-content h1 strong,
.postid-5008 .entry-content h2 strong,
.postid-5008 .entry-content h3 strong,
.postid-5008 .entry-content .uael-table strong{ background:none }
.postid-5008 .entry-content > * p{ line-height:2.0 }
.postid-5008 .entry-content p{ line-height:2.0 }

/* ===== jy-v2 頁面:共用 CTA/Elementor icon 清單不畫 jy 圓點(修全站雙圓點)2026-08-09 ===== */
.jy-v2 .entry-content .elementor-icon-list-items li::before,
.jy-v2 .elementor-icon-list-items li::before{ content:none !important; display:none !important }
.jy-v2 .elementor-icon-list-items li{ padding-left:0 }

/* ═════════════════════════
   2026-08-11 文章內頁字體統一
   目的：文章（故事／案例／舉例）內的所有文字，一律沿用
   全站標準字 Noto Serif TC，不再出現黑體。
   說明：上方 .jy-v2 元件（圖說、表頭、標籤、CTA 按鈕、
   評論卡）原本刻意用蘋方黑體，已改回標準字；
   下面這段負責文章內的 Elementor／區塊／Astra 按鈕，
   它們預設吃全站按鈕設定的 Montserrat（無中文字，
   中文會掉到系統黑體）。只限文章內文區，頁首／頁尾
   與首頁的按鈕維持原樣。
   ═════════════════════════ */
.archive .ast-button,
.archive .ast-taxonomy-container a,
.archive button,
.archive .elementor-button,
.single-post .entry-content .elementor-button,
.single-post .entry-content .elementor-button-text,
.single-post .entry-content .wp-block-button__link,
.single-post .entry-content .ast-button,
.single-post .entry-content .ast-custom-button,
.single-post .entry-content button{
  font-family:'Noto Serif TC', serif;
}


/* ═════════════════════════
   2026-08-11 手機：右側浮動聯絡列收成一顆
   桌機（≥922px）維持六顆直排、完全不變。手機預設只留
   一顆主鈕，點了才往上展開六個入口——原本 50×294px 的
   直排會壓在文章標題、CTA 按鈕與卡片標籤上。
   純 CSS（checkbox＋label），不依賴 JS，避免 WP Rocket
   延後 JS 造成第一次點擊失效。
   還原：刪掉這一段，並移除片段 2318 的 .jy-dock-cb 與 .jy-dock-btn。
   ═════════════════════════ */
.jy-dock-cb{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.jy-dock-btn{ display:none; }
@media (max-width:921px){
  .fixedicon{ bottom:80px; }
  .fixedicon > div{
    opacity:0; visibility:hidden; height:0; margin:0; overflow:hidden;
    transform:translateY(8px) scale(.9); transform-origin:100% 100%;
    transition:opacity .18s ease, transform .18s ease;
  }
  .fixedicon > div:hover span{ display:none; }
  .jy-dock-cb:checked ~ .fixedicon > div{
    opacity:1; visibility:visible; height:auto; overflow:visible; transform:none;
  }
  .jy-dock-btn{
    display:flex; align-items:center; justify-content:center;
    width:50px; height:50px; border-radius:50%; margin:0 0 0 5px;
    background:#005E85; box-shadow:0 4px 14px rgba(0,45,65,.3);
    cursor:pointer; position:relative;
    transition:transform .2s ease, background .2s ease;
  }
  .jy-dock-btn i{
    position:relative; display:block; width:20px; height:2.5px;
    background:#fff; border-radius:2px;
  }
  .jy-dock-btn i::before{
    content:''; position:absolute; left:8.75px; top:-8.75px;
    width:2.5px; height:20px; background:#fff; border-radius:2px;
  }
  .jy-dock-cb:checked ~ .fixedicon .jy-dock-btn{
    background:#231815; transform:rotate(45deg);
  }
  .jy-dock-cb:focus-visible ~ .fixedicon .jy-dock-btn{
    outline:3px solid #A2C8D8; outline-offset:2px;
  }
}


/* ═════════════════════════
   2026-08-11 Elementor 標題膠囊的上下留白修正
   症狀：深藍/淺藍膠囊裡的字明顯偏上（上 8px、下 33.6px）。
   原因：上面「內文」那條 .jy-v2 .entry-content p{margin-bottom:1.6em}
   優先權 (0,2,1) 壓過 Elementor 自己的
   .elementor-widget-heading .elementor-heading-title{margin:0} (0,2,0)，
   所以「標題小工具選 p 標籤」時，那 1.6em 會長在膠囊「裡面」。
   （選 h1–h6 的就沒事，所以同一篇裡 h4 膠囊是正的、p 膠囊是歪的。）
   修法：把 Elementor 標題排除在內文 p 的邊距之外，回到 Elementor 原意。
   ═════════════════════════ */
.jy-v2 .entry-content .elementor-widget-heading p.elementor-heading-title,
.single-post .entry-content .elementor-widget-heading p.elementor-heading-title,
.page .entry-content .elementor-widget-heading p.elementor-heading-title{
  margin-top:0;
  margin-bottom:0;
}

/* 同一類問題：FAQ 卡片最後一段的 margin 長在卡片「裡面」，
   造成上留白 14px、下留白 31.6px。.jy-note 早就寫過 p:last-child，
   .jy-faq 漏掉了；補上並提高特異度以壓過佈景的段落邊距。 */
.jy-v2 .entry-content .jy-faq > :last-child,
.single-post .entry-content .jy-faq > :last-child,
.page .entry-content .jy-faq > :last-child{
  margin-bottom:0;
}


/* ══ 韻友指南落地頁 /guide/ ══ 2026-08-13
   設計語彙沿用 jy-v2：navy 四階、tint 三階、12px 圓角、柔和陰影 */
.jy-guide{
  --g-navy:#005E85; --g-navy2:#2f6d8f; --g-navy3:#4e7f9c;
  --g-tint1:#9ab6c6; --g-tint2:#c3d5df; --g-tint3:#e2ebf0;
  --g-ground:#f4f8fa; --g-line:#d8e4ea; --g-ink:#3e4e56;
  --g-shadow:0 4px 18px rgba(0,50,72,.05);
  font-family:"Noto Serif TC",serif; color:var(--g-ink); line-height:1.9;
}
.jy-guide p{ margin:0 0 1.1em; font-size:16px }
.jy-guide strong{
  background:linear-gradient(rgba(0,94,133,.16) 0%,rgba(0,94,133,.16) 100%);
  background-size:100% 8px; background-position:0 82%; background-repeat:no-repeat;
}
.jy-guide a{ color:var(--g-navy); text-underline-offset:3px }

/* ── hero ── */
.jy-guide .jyg-hero{ padding:8px 0 34px; border-bottom:1px solid var(--g-line); margin-bottom:44px }
.jy-guide .jyg-eyebrow{
  font-family:-apple-system,"PingFang TC",sans-serif; font-size:12.5px; letter-spacing:.22em;
  color:var(--g-tint1); margin:0 0 14px; text-transform:none;
}
.jy-guide .jyg-h1{
  font-size:clamp(26px,3.6vw,38px); line-height:1.35; font-weight:700;
  color:var(--g-navy); margin:0 0 18px; letter-spacing:.01em;
}
.jy-guide .jyg-lead{ font-size:1.1em; color:#4a5a62; margin:0; max-width:34em }

/* ── 節奏引言 ── */
.jy-guide .jyg-rhythm{
  background:var(--g-ground); border-left:4px solid var(--g-navy); border-radius:0 12px 12px 0;
  padding:26px 28px 18px; margin:0 0 54px; box-shadow:var(--g-shadow);
}
.jy-guide .jyg-rhythm p:last-child{ margin-bottom:0 }

/* ── 區塊標題 ── */
.jy-guide .jyg-sec{
  font-size:clamp(21px,2.6vw,27px); font-weight:700; color:var(--g-navy);
  margin:0 0 6px; padding-bottom:12px; position:relative; border-bottom:1px solid var(--g-line);
}
.jy-guide .jyg-sec::after{
  content:""; position:absolute; left:0; bottom:-1px; width:72px; height:3px;
  background:linear-gradient(90deg,var(--g-navy),var(--g-tint1));
}
.jy-guide .jyg-secsub{
  font-family:-apple-system,"PingFang TC",sans-serif; font-size:14.5px;
  color:var(--g-tint1); margin:14px 0 34px;
}

/* ── 五個階段 ── */
.jy-guide .jyg-steps{ margin:0 0 60px }
.jy-guide .jyg-step{
  position:relative; padding:0 0 34px 0; margin:0 0 34px;
  border-bottom:1px dashed var(--g-line);
}
.jy-guide .jyg-step:last-child{ border-bottom:none; margin-bottom:0 }
.jy-guide .jyg-num{
  display:inline-block; font-family:-apple-system,"PingFang TC",sans-serif;
  font-size:12.5px; font-weight:700; letter-spacing:.16em; color:#fff;
  background:var(--g-navy); border-radius:999px; padding:4px 13px; margin-bottom:12px;
}
.jy-guide .jyg-step h3{
  font-size:1.26em; font-weight:700; color:var(--g-navy2);
  margin:0 0 16px; line-height:1.5;
}
.jy-guide .jyg-voice{
  margin:0 0 16px; padding:14px 18px; background:var(--g-tint3);
  border-radius:12px; border:none; color:var(--g-navy2);
  font-size:1.02em; line-height:1.85; font-style:normal;
}
.jy-guide .jyg-voice::before{ content:none }
.jy-guide .jyg-we{ margin:0 0 14px }
.jy-guide .jyg-go{ margin:0 }
.jy-guide .jyg-go a{
  font-family:-apple-system,"PingFang TC",sans-serif; font-size:15px; font-weight:700;
  text-decoration:none; border-bottom:2px solid var(--g-tint2); padding-bottom:2px;
  transition:border-color .2s;
}
.jy-guide .jyg-go a:hover{ border-bottom-color:var(--g-navy) }

/* ── 三個承諾 ── */
.jy-guide .jyg-promise{ margin:0 0 56px }
.jy-guide .jyg-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px }
.jy-guide .jyg-card{
  background:#fff; border:1px solid var(--g-line); border-radius:12px;
  padding:22px 20px; box-shadow:var(--g-shadow);
}
.jy-guide .jyg-card h3{
  font-size:1.06em; font-weight:700; color:var(--g-navy); margin:0 0 10px; line-height:1.5;
}
.jy-guide .jyg-card p{ font-size:15px; margin:0; line-height:1.85 }

/* ── CTA ── */
.jy-guide .jyg-cta{
  background:var(--g-ground); border:1px solid var(--g-line); border-radius:12px;
  padding:32px 30px; text-align:center; box-shadow:var(--g-shadow);
}
.jy-guide .jyg-ctat{ font-size:1.24em; font-weight:700; color:var(--g-navy); margin:0 0 10px }
.jy-guide .jyg-cta>p{ max-width:34em; margin-left:auto; margin-right:auto }
.jy-guide .jyg-acts{ display:flex; flex-wrap:wrap; gap:11px; justify-content:center; margin:22px 0 18px }
.jy-guide .jyg-btn{
  display:inline-block; font-family:-apple-system,"PingFang TC",sans-serif;
  font-size:15px; font-weight:700; text-decoration:none; border-radius:999px;
  padding:13px 26px; min-height:44px; line-height:1.4; box-sizing:border-box;
  background:var(--g-navy); color:#fff; border:2px solid var(--g-navy); transition:.2s;
}
.jy-guide .jyg-btn:hover{ background:var(--g-navy2); border-color:var(--g-navy2); color:#fff }
.jy-guide .jyg-btn2{ background:#fff; color:var(--g-navy) }
.jy-guide .jyg-btn2:hover{ background:var(--g-tint3); color:var(--g-navy) }
.jy-guide .jyg-meta{
  font-family:-apple-system,"PingFang TC",sans-serif; font-size:14px;
  color:var(--g-tint1); margin:0 0 16px;
}
.jy-guide .jyg-meta a{ color:var(--g-navy3) }
.jy-guide .jyg-slogan{
  font-size:1.04em; font-weight:700; color:var(--g-navy); margin:0;
  padding-top:16px; border-top:1px solid var(--g-line);
}

/* ── 手機 ── */
@media (max-width:880px){
  .jy-guide .jyg-cards{ grid-template-columns:1fr }
}
@media (max-width:781px){
  .jy-guide .jyg-hero{ padding-bottom:26px; margin-bottom:34px }
  .jy-guide .jyg-rhythm{ padding:20px 20px 12px; margin-bottom:40px }
  .jy-guide .jyg-cta{ padding:26px 18px }
  .jy-guide .jyg-acts{ flex-direction:column }
  .jy-guide .jyg-btn{ width:100% }
}

/* ── 韻友指南：實用速查 + 不好意思問 ── 2026-08-13 追加 */
.jy-guide .jyg-facts{ margin:0 0 56px }
.jy-guide .jyg-fact{
  margin:26px 0 0; display:grid; grid-template-columns:7.5em 1fr;
  border-top:1px solid var(--g-line);
}
.jy-guide .jyg-fact dt{
  font-family:-apple-system,"PingFang TC",sans-serif; font-size:15px; font-weight:700;
  color:var(--g-navy); padding:16px 14px 16px 0; border-bottom:1px solid var(--g-line);
  background:transparent;
}
.jy-guide .jyg-fact dd{
  margin:0; padding:16px 0; border-bottom:1px solid var(--g-line);
  font-size:15.5px; line-height:1.85;
}
.jy-guide .jyg-shy{ margin:0 0 56px }
.jy-guide .jyg-shyq{
  background:#fff; border:1px solid var(--g-line); border-radius:12px;
  padding:20px 22px 6px; margin:0 0 14px; box-shadow:var(--g-shadow);
}
.jy-guide .jyg-shyq:last-child{ margin-bottom:0 }
.jy-guide .jyg-q{
  font-size:1.08em; font-weight:700; color:var(--g-navy2);
  margin:0 0 10px; line-height:1.6;
}
.jy-guide .jyg-a{ font-size:15.5px; margin:0 0 14px }
@media (max-width:640px){
  .jy-guide .jyg-fact{ grid-template-columns:1fr }
  .jy-guide .jyg-fact dt{ padding:16px 0 4px; border-bottom:none }
  .jy-guide .jyg-fact dd{ padding:0 0 16px }
  .jy-guide .jyg-shyq{ padding:18px 18px 4px }
}


/* ══ 韻友指南 v2：旅程軸線・時間標記・急問三答 ══ 2026-08-14
   附加在原 .jy-guide 樣式之後，靠後載順序覆寫，不改動上面既有規則 */

/* ── 首屏之後的「最急三問」──
   讀者最想知道的三件事，不必滑到速查列才看到 */
.jy-guide .jyg-quick{ margin:0 0 46px }
.jy-guide .jyg-q3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.jy-guide .jyg-q3i{
  background:var(--g-ground); border:1px solid var(--g-line); border-radius:12px;
  padding:18px 18px 15px; box-shadow:var(--g-shadow);
}
.jy-guide .jyg-q3q{
  display:block; font-size:15.5px; font-weight:700; color:var(--g-navy);
  margin-bottom:9px; line-height:1.5;
}
.jy-guide .jyg-q3i p{ font-size:14.5px; margin:0; line-height:1.85 }

/* ── 旅程地圖：讓人直接跳到自己那一段 ── */
.jy-guide .jyg-map{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 36px }
.jy-guide .jyg-map a{
  display:inline-flex; align-items:center; gap:7px;
  font-family:-apple-system,"PingFang TC",sans-serif; font-size:14px; font-weight:700;
  text-decoration:none; color:var(--g-navy2); background:#fff;
  border:1px solid var(--g-line); border-radius:999px; padding:8px 15px; min-height:38px;
  transition:border-color .18s ease, background .18s ease;
}
.jy-guide .jyg-map a:hover{ border-color:var(--g-navy); background:var(--g-tint3) }
.jy-guide .jyg-map b{ font-size:11.5px; letter-spacing:.1em; color:var(--g-tint1); font-weight:700 }
.jy-guide .jyg-map a:hover b{ color:var(--g-navy2) }

/* ── 旅程軸線 ──
   線段由每一段自己往下畫到下一個節點，段落高度怎麼變都不會與節點錯開，
   最後一段不畫線＝旅程有終點 */
.jy-guide .jyg-track{ position:relative; padding-left:52px }
.jy-guide .jyg-track .jyg-step{
  border-bottom:none; padding:0 0 30px; margin:0 0 30px; scroll-margin-top:120px;
}
.jy-guide .jyg-track .jyg-step:last-child{ padding-bottom:0; margin-bottom:0 }
.jy-guide .jyg-track .jyg-step::before{
  content:""; position:absolute; left:-36px; top:41px; bottom:-30px; width:2px;
  background:var(--g-tint2); border-radius:2px;
}
.jy-guide .jyg-track .jyg-step:last-child::before{ display:none }

.jy-guide .jyg-track .jyg-num{
  position:absolute; left:-52px; top:1px; width:34px; height:34px; padding:0;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; letter-spacing:.04em; margin:0; box-shadow:0 0 0 5px #fff; z-index:1;
}
/* 分支＝虛線圈，明確表示「不一定會走到這一段」 */
.jy-guide .jyg-track .jyg-branch .jyg-num{
  background:#fff; color:var(--g-navy2); border:2px dashed var(--g-tint1);
}
.jy-guide .jyg-track .jyg-branch::before{
  background:repeating-linear-gradient(180deg,var(--g-tint2) 0 5px,transparent 5px 10px);
}
/* 終點＝加一圈外環，走到這裡是抵達，不是斷掉 */
.jy-guide .jyg-track .jyg-last .jyg-num{ box-shadow:0 0 0 5px #fff, 0 0 0 8px var(--g-tint2) }

/* ── 時間標記：旅程感有一半來自時間 ── */
.jy-guide .jyg-when{
  display:inline-block; font-family:-apple-system,"PingFang TC",sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--g-navy2);
  background:var(--g-tint3); border-radius:999px; padding:4px 12px; margin:0 0 11px;
}
.jy-guide .jyg-when2{
  background:transparent; color:var(--g-navy3);
  border:1px dashed var(--g-tint2); padding:3px 11px;
}
.jy-guide .jyg-track .jyg-step h3{ margin-top:0 }

/* ── 平板 ── */
@media (max-width:880px){
  .jy-guide .jyg-q3{ grid-template-columns:1fr }
}
/* ── 手機 ── */
@media (max-width:781px){
  .jy-guide .jyg-quick{ margin-bottom:36px }
  .jy-guide .jyg-map{ gap:7px; margin-bottom:28px }
  .jy-guide .jyg-map a{ font-size:13.5px; padding:7px 13px }
  .jy-guide .jyg-track{ padding-left:40px }
  .jy-guide .jyg-track .jyg-num{ left:-40px; width:28px; height:28px; font-size:12px; box-shadow:0 0 0 4px #fff }
  .jy-guide .jyg-track .jyg-last .jyg-num{ box-shadow:0 0 0 4px #fff, 0 0 0 7px var(--g-tint2) }
  .jy-guide .jyg-track .jyg-step::before{ left:-27px; top:34px }
}


/* ══ 韻友指南 v3：先做一件事・節奏收束・帶得走的準備單 ══ 2026-08-14 */

/* ── 每一段的「您可以先做的一件事」──
   讓旅程變成讀者在走，不是我們在講 */
.jy-guide .jyg-do{
  margin:0 0 16px; padding:13px 17px; background:#fff;
  border:1px solid var(--g-line); border-left:3px solid var(--g-navy3);
  border-radius:0 10px 10px 0; font-size:14.5px; line-height:1.8;
}
.jy-guide .jyg-do b{
  display:block; font-family:-apple-system,"PingFang TC",sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--g-navy2);
  margin-bottom:6px;
}

/* ── 節奏收束句：每一段的最後一拍 ── */
.jy-guide .jyg-beat{
  margin:16px 0 0; padding-top:13px; border-top:1px solid var(--g-line);
  font-size:15px; color:var(--g-navy2); letter-spacing:.02em; line-height:1.75;
}
.jy-guide .jyg-beat::before{
  content:""; display:inline-block; width:14px; height:2px; border-radius:2px;
  background:var(--g-tint1); vertical-align:middle; margin-right:9px;
}

/* ── 帶得走的看診前準備單 ── */
.jy-guide .jyg-kit{ margin:0 0 56px; scroll-margin-top:110px }
.jy-guide .jyg-kitbox{
  background:var(--g-ground); border:1px solid var(--g-line); border-radius:12px;
  padding:26px 26px 20px; box-shadow:var(--g-shadow);
}
.jy-guide .jyg-kitsec{ margin:0 0 26px }
.jy-guide .jyg-kitsec:last-child{ margin-bottom:0 }
.jy-guide .jyg-kitsec h3{
  font-size:1.1em; font-weight:700; color:var(--g-navy); margin:0 0 14px;
  display:flex; align-items:center; gap:10px; line-height:1.5;
}
.jy-guide .jyg-kitn{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; flex:0 0 26px; border-radius:50%;
  background:var(--g-navy); color:#fff; font-size:14px; font-weight:700;
}
.jy-guide .jyg-kitnote{
  margin:12px 0 0; font-size:13.5px; color:var(--g-ink); opacity:.85; line-height:1.85;
}

/* 勾選清單：整列都能點，手指好按 */
.jy-guide .jyg-check{ list-style:none; margin:0; padding:0 }
.jy-guide .jyg-check li{ margin:0 0 9px }
.jy-guide .jyg-check label{
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  background:#fff; border:1px solid var(--g-line); border-radius:10px;
  padding:12px 15px; font-size:15px; line-height:1.7; min-height:46px;
  transition:border-color .18s ease;
}
.jy-guide .jyg-check label:hover{ border-color:var(--g-tint1) }
.jy-guide .jyg-check input[type=checkbox]{
  width:20px; height:20px; flex:0 0 20px; margin:3px 0 0;
  accent-color:var(--g-navy); cursor:pointer;
}
.jy-guide .jyg-check input[type=checkbox]:checked + span{ color:var(--g-navy2) }

/* 六題填空 */
.jy-guide .jyg-fill{ margin:0; display:grid; grid-template-columns:1fr; gap:13px }
.jy-guide .jyg-fill dt{
  font-size:15px; font-weight:700; color:var(--g-navy); margin:0 0 6px; line-height:1.55;
}
.jy-guide .jyg-fill dt em{
  display:block; font-family:-apple-system,"PingFang TC",sans-serif;
  font-size:12.5px; font-weight:400; font-style:normal;
  color:var(--g-navy3); margin-top:3px; letter-spacing:.01em;
}
.jy-guide .jyg-fill dd{ margin:0 0 4px }
.jy-guide .jyg-fill input[type=text],
.jy-guide .jyg-lines input[type=text]{
  width:100%; box-sizing:border-box; font-family:inherit; font-size:15px; color:var(--g-ink);
  background:#fff; border:1px solid var(--g-line); border-radius:9px;
  padding:11px 14px; min-height:46px; line-height:1.6;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.jy-guide .jyg-fill input[type=text]::placeholder,
.jy-guide .jyg-lines input[type=text]::placeholder{ color:var(--g-tint1) }
.jy-guide .jyg-fill input[type=text]:focus,
.jy-guide .jyg-lines input[type=text]:focus{
  outline:none; border-color:var(--g-navy2); box-shadow:0 0 0 3px rgba(0,94,133,.12);
}
.jy-guide .jyg-lines{ list-style:none; margin:0; padding:0 }
.jy-guide .jyg-lines li{ margin:0 0 10px }
.jy-guide .jyg-kitfoot{
  margin:16px 0 0; font-size:14.5px; color:var(--g-ink); line-height:1.85;
}

/* ── 手機 ── */
@media (max-width:781px){
  .jy-guide .jyg-do{ padding:12px 14px; font-size:14px }
  .jy-guide .jyg-beat{ font-size:14.5px }
  .jy-guide .jyg-kitbox{ padding:20px 16px 16px }
  .jy-guide .jyg-kitsec{ margin-bottom:22px }
  .jy-guide .jyg-check label{ font-size:14.5px; padding:11px 13px }
  .jy-guide .jyg-fill dt{ font-size:14.5px }
}

/* ── 列印：只印準備單，印出來就是一張乾淨的表 ── */
@media print{
  #wpadminbar, .site-header, #masthead, .site-footer, #colophon,
  .ast-above-header-wrap, .ast-below-header-wrap, .elementor-location-header,
  .elementor-location-footer, .jy-float, .jy-fab{ display:none !important }
  .jy-guide .jyg-hero, .jy-guide .jyg-quick, .jy-guide .jyg-rhythm,
  .jy-guide .jyg-steps, .jy-guide .jyg-promise, .jy-guide .jyg-facts,
  .jy-guide .jyg-shy, .jy-guide .jyg-cta{ display:none !important }
  .jy-guide{ background:none; padding:0 }
  .jy-guide .jyg-kit{ margin:0 }
  .jy-guide .jyg-kitbox{ background:#fff; box-shadow:none; border:1px solid #999; padding:14px }
  .jy-guide .jyg-sec{ font-size:20px; border-bottom:1px solid #999 }
  .jy-guide .jyg-sec::after{ display:none }
  .jy-guide .jyg-kitn{ background:#fff; color:#000; border:1px solid #000 }
  .jy-guide .jyg-check label, .jy-guide .jyg-fill input[type=text],
  .jy-guide .jyg-lines input[type=text]{ border-color:#999 }
  .jy-guide .jyg-fill input[type=text], .jy-guide .jyg-lines input[type=text]{ min-height:38px }
  .jy-guide .jyg-kitsec{ break-inside:avoid; page-break-inside:avoid }
  .jy-guide .jyg-kitfoot{ display:none }
}


/* ══ 韻友指南 v4：旅程圖像 ══ 2026-08-14
   三張圖共用同一條「節奏線」母題：亂 → 走進來 → 回到節奏 */

/* 節奏線橫幅：接在「痛，是節奏亂掉了」之後，寬幅、無邊框，像一段呼吸 */
.jy-guide .jyg-band{ margin:0 0 8px; padding:0 }
.jy-guide .jyg-band img{
  display:block; width:100%; height:auto; border-radius:12px;
}

/* 段落內的情境圖 */
.jy-guide .jyg-shot{ margin:0 0 18px; padding:0 }
.jy-guide .jyg-shot img{
  display:block; width:100%; height:auto; border-radius:12px;
  border:1px solid var(--g-line);
}
.jy-guide .jyg-shot figcaption{
  margin:10px 2px 0; font-family:-apple-system,"PingFang TC",sans-serif;
  font-size:13.5px; color:var(--g-navy3); line-height:1.75;
}

/* 原創示意圖（疼痛與功能的時間差） */
.jy-guide .jyg-fig{ margin:0 0 18px; padding:0 }
.jy-guide .jyg-fig svg{
  display:block; width:100%; height:auto; max-width:620px;
  border:1px solid var(--g-line); border-radius:12px; background:#fff;
}
.jy-guide .jyg-fig figcaption{
  margin:10px 2px 0; max-width:620px;
  font-family:-apple-system,"PingFang TC",sans-serif;
  font-size:13.5px; color:var(--g-navy3); line-height:1.8;
}
.jy-guide .jyg-fig figcaption a{ color:var(--g-navy2) }

@media (max-width:781px){
  .jy-guide .jyg-band{ margin-bottom:4px }
  .jy-guide .jyg-shot figcaption,
  .jy-guide .jyg-fig figcaption{ font-size:13px }
}
/* 列印時圖片不必印出來，準備單才是要帶走的東西 */
@media print{
  .jy-guide .jyg-band, .jy-guide .jyg-shot, .jy-guide .jyg-fig{ display:none !important }
}



/* 段落內的情境圖收窄成「圖說寬度」，讓文字保持主體、圖是輔佐
   （全寬只留給 .jyg-band 那種轉場橫幅） */
.jy-guide .jyg-shot img{ max-width:560px }
.jy-guide .jyg-shot figcaption{ max-width:560px }
.jy-guide .jyg-band{ margin:34px 0 6px }
@media (max-width:781px){
  .jy-guide .jyg-shot img, .jy-guide .jyg-shot figcaption{ max-width:100% }
  .jy-guide .jyg-band{ margin:24px 0 4px }
}


/* ══ 韻友指南 v5：「韻友」這兩個字 ══ 2026-08-14
   全頁的收尾。刻意做得比其他區塊更安靜、更寬鬆，像放慢語速講最後一段話 */
.jy-guide .jyg-name{ margin:0 0 52px }
.jy-guide .jyg-nlead{
  font-size:1.06em; color:var(--g-navy2); margin:0 0 22px; max-width:34em;
}
.jy-guide .jyg-nbody{
  position:relative; background:var(--g-ground); border-radius:12px;
  padding:30px 32px 26px; box-shadow:var(--g-shadow); overflow:hidden;
}
/* 頂端一道由淡轉深的細線＝這一頁的節奏線收在這裡 */
.jy-guide .jyg-nbody::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--g-tint2),var(--g-navy) 60%,var(--g-navy));
}
.jy-guide .jyg-nbody p{ font-size:1.02em; line-height:2; max-width:40em }
.jy-guide .jyg-nbody p:last-child{ margin-bottom:0 }
.jy-guide .jyg-nend{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--g-line);
  font-size:1.12em; font-weight:700; color:var(--g-navy);
}
.jy-guide .jyg-upd{
  display:inline-block; margin-top:6px;
  font-size:13px; color:var(--g-tint1); letter-spacing:.02em;
}
@media (max-width:781px){
  .jy-guide .jyg-name{ margin-bottom:40px }
  .jy-guide .jyg-nbody{ padding:22px 18px 20px }
  .jy-guide .jyg-nbody p{ line-height:1.95 }
  .jy-guide .jyg-nend{ font-size:1.06em }
}
@media print{
  .jy-guide .jyg-name{ display:none !important }
}


/* ══ 韻友指南 v6：轉診立場與醫師態度 ══ 2026-08-14 */
.jy-guide .jyg-refer{ margin:0 0 54px }

/* 結論框：先講結論，語氣要篤定 */
.jy-guide .jyg-rbox{
  background:var(--g-ground); border-left:4px solid var(--g-navy);
  border-radius:0 12px 12px 0; padding:24px 26px 18px; margin:0 0 32px;
  box-shadow:var(--g-shadow);
}
.jy-guide .jyg-rlead{
  font-size:1.2em; font-weight:700; color:var(--g-navy); margin:0 0 14px; line-height:1.6;
}
.jy-guide .jyg-rbox p:last-child{ margin-bottom:0 }

.jy-guide .jyg-refer h3{
  font-size:1.14em; font-weight:700; color:var(--g-navy2);
  margin:0 0 16px; line-height:1.5;
}

/* 紅旗警訊：用品牌藍的深階，不用紅色（醫療頁面上的紅色會製造恐慌） */
.jy-guide .jyg-red{ list-style:none; margin:0 0 14px; padding:0 }
.jy-guide .jyg-red li{
  position:relative; background:#fff; border:1px solid var(--g-line);
  border-radius:10px; padding:14px 16px 14px 44px; margin:0 0 10px;
  font-size:15px; line-height:1.85;
}
.jy-guide .jyg-red li::before{
  content:""; position:absolute; left:17px; top:20px;
  width:10px; height:10px; border-radius:2px; transform:rotate(45deg);
  background:var(--g-navy); opacity:.85;
}
.jy-guide .jyg-rnote{
  margin:0 0 34px; padding:14px 18px; background:var(--g-tint3); border-radius:10px;
  font-size:13.8px; line-height:1.9; color:var(--g-ink);
}
.jy-guide .jyg-rnote a{ color:var(--g-navy) }

/* 兩位醫師的態度 */
.jy-guide .jyg-docs{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:0 0 16px }
.jy-guide .jyg-doc{
  background:#fff; border:1px solid var(--g-line); border-radius:12px;
  padding:22px 22px 18px; box-shadow:var(--g-shadow);
}
.jy-guide .jyg-docname{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:0 0 12px; padding-bottom:12px; border-bottom:1px solid var(--g-line);
}
.jy-guide .jyg-docname a{
  font-size:1.08em; font-weight:700; color:var(--g-navy); text-decoration:none;
  border-bottom:2px solid var(--g-tint2); padding-bottom:1px;
}
.jy-guide .jyg-docname a:hover{ border-bottom-color:var(--g-navy) }
.jy-guide .jyg-docname span{
  font-family:-apple-system,"PingFang TC",sans-serif; font-size:12px;
  letter-spacing:.14em; color:var(--g-navy3);
}
.jy-guide .jyg-doc p:last-child{ margin-bottom:0; font-size:15px; line-height:1.9 }
.jy-guide .jyg-rnote2{
  margin:0; font-family:-apple-system,"PingFang TC",sans-serif;
  font-size:13.8px; color:var(--g-navy3); line-height:1.85;
}
.jy-guide .jyg-rnote2 a{ color:var(--g-navy); font-weight:700 }

@media (max-width:880px){
  .jy-guide .jyg-docs{ grid-template-columns:1fr }
}
@media (max-width:781px){
  .jy-guide .jyg-refer{ margin-bottom:42px }
  .jy-guide .jyg-rbox{ padding:20px 18px 14px }
  .jy-guide .jyg-rlead{ font-size:1.12em }
  .jy-guide .jyg-red li{ font-size:14.5px; padding:12px 14px 12px 40px }
  .jy-guide .jyg-doc{ padding:18px 16px 16px }
}
@media print{
  .jy-guide .jyg-refer{ display:none !important }
}


/* ══ 韻友指南 v7：路線圖化 ══ 2026-08-14
   長頁不怕，怕的是不知道自己在哪。這一段做兩件事：
   ① 旅程標籤在捲動時跟著（純 CSS sticky，不用 JS，不受 WP Rocket 延後 JS 影響）
   ② 軸線變成一條有起點站與終點站的路線，起點放嘉韻的識別標記 */

/* ── ① 旅程標籤跟著捲動 ── */
.jy-guide .jyg-map{
  position:sticky; top:100px; z-index:6;
  margin:0 -6px 34px; padding:10px 6px;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(150%) blur(8px);
  -webkit-backdrop-filter:saturate(150%) blur(8px);
  border-radius:12px;
}
/* 點了哪一站，那一站就亮起來（純 CSS :target） */
.jy-guide .jyg-step:target .jyg-num{ box-shadow:0 0 0 5px #fff, 0 0 0 9px var(--g-tint1) }
.jy-guide .jyg-step:target .jyg-t,
.jy-guide .jyg-step:target h3{ color:var(--g-navy) }

/* ── ② 起點站：嘉韻的識別標記 ── */
.jy-guide .jyg-start{
  position:relative; padding:0 0 30px; margin:0;
}
.jy-guide .jyg-start::after{
  content:""; position:absolute; left:-36px; top:46px; bottom:-30px; width:2px;
  background:var(--g-tint2); border-radius:2px;
}
.jy-guide .jyg-startmark{
  position:absolute; left:-52px; top:0; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:2px solid var(--g-navy); border-radius:50%;
  box-shadow:0 0 0 5px #fff; z-index:1; box-sizing:border-box;
}
.jy-guide .jyg-startmark img{
  width:auto; height:19px; display:block; border:none; border-radius:0;
}
.jy-guide .jyg-start p{
  margin:0; font-size:14.5px; line-height:1.85; color:var(--g-ink);
  background:var(--g-ground); border-radius:12px; padding:14px 18px;
}
.jy-guide .jyg-start b,
.jy-guide .jyg-end b{
  display:block; font-family:-apple-system,"PingFang TC",sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.18em; color:var(--g-navy2);
  margin-bottom:6px;
}

/* ── ② 終點站 ── */
.jy-guide .jyg-end{ position:relative; padding:30px 0 0; margin:0 }
.jy-guide .jyg-endmark{
  position:absolute; left:-52px; top:30px; width:34px; height:34px;
  border-radius:50%; background:#fff; border:3px solid var(--g-navy);
  box-shadow:0 0 0 5px #fff, 0 0 0 9px var(--g-tint2); z-index:1; box-sizing:border-box;
}
.jy-guide .jyg-endmark::after{
  content:""; position:absolute; left:50%; top:50%; width:12px; height:12px;
  margin:-6px 0 0 -6px; border-radius:50%; background:var(--g-navy);
}
.jy-guide .jyg-end p{
  margin:0; font-size:14.5px; line-height:1.9; color:var(--g-ink);
  background:var(--g-ground); border-radius:12px; padding:16px 18px;
}
/* 終點站接手了「抵達」的角色，第 06 站回復成一般節點 */
.jy-guide .jyg-track .jyg-last .jyg-num{ box-shadow:0 0 0 5px #fff }

/* ── 手機 ── */
@media (max-width:781px){
  .jy-guide .jyg-map{ top:78px; margin:0 -4px 26px; padding:8px 4px }
  .jy-guide .jyg-start::after{ left:-27px; top:38px }
  .jy-guide .jyg-startmark{ left:-40px; width:28px; height:28px; box-shadow:0 0 0 4px #fff }
  .jy-guide .jyg-startmark img{ height:15px }
  .jy-guide .jyg-endmark{
    left:-40px; width:28px; height:28px; border-width:2.5px;
    box-shadow:0 0 0 4px #fff, 0 0 0 7px var(--g-tint2);
  }
  .jy-guide .jyg-endmark::after{ width:10px; height:10px; margin:-5px 0 0 -5px }
  .jy-guide .jyg-track .jyg-last .jyg-num{ box-shadow:0 0 0 4px #fff }
  .jy-guide .jyg-start p, .jy-guide .jyg-end p{ font-size:14px; padding:13px 15px }
}
@media print{
  .jy-guide .jyg-map{ position:static }
}


/* ══ 韻友指南 v8：捲到哪一站，標籤就亮哪一站 ══ 2026-08-14
   高亮由 IntersectionObserver 加上 .on；腳本沒跑的話就退回 v7 的樣子，不會壞 */
.jy-guide .jyg-map a.on{
  background:var(--g-navy); border-color:var(--g-navy); color:#fff;
}
.jy-guide .jyg-map a.on b{ color:var(--g-tint2) }
.jy-guide .jyg-map a.on:hover{ background:var(--g-navy2); border-color:var(--g-navy2); color:#fff }

/* 手機：六個標籤改成單行橫捲，不要吃掉兩三行畫面 */
@media (max-width:781px){
  .jy-guide .jyg-map{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; -ms-overflow-style:none;
    scroll-padding-inline:14px; -webkit-overflow-scrolling:touch;
  }
  .jy-guide .jyg-map::-webkit-scrollbar{ display:none }
  .jy-guide .jyg-map a{ flex:0 0 auto }
}
@media (prefers-reduced-motion:reduce){
  .jy-guide .jyg-map{ scroll-behavior:auto }
}


/* ══ 韻友指南 v9：嘉韻修復三部曲 ══ 2026-08-14
   六站是「您會經歷什麼」，三部曲是「我們在做什麼」。
   三張圖是同一條節奏線的三個時刻，接上整站的品牌母題。 */
.jy-guide .jyg-trilogy{ margin:0 0 56px }

.jy-guide .jyg-tphil{
  margin:0 0 30px; padding:18px 22px;
  background:linear-gradient(105deg,#005E85,#2f6d8f 60%,#6f97ac);
  border-radius:12px; color:#fff; font-size:1.02em; line-height:1.9; max-width:none;
}
.jy-guide .jyg-tphil strong{ background:none; color:#fff; font-weight:700 }

.jy-guide .jyg-tri{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  counter-reset:none;
}
.jy-guide .jyg-tri > li{
  position:relative; background:#fff; border:1px solid var(--g-line);
  border-radius:12px; overflow:hidden; box-shadow:var(--g-shadow);
  display:flex; flex-direction:column;
}
.jy-guide .jyg-tri figure{ margin:0; padding:0; background:var(--g-ground) }
.jy-guide .jyg-tri img{
  display:block; width:100%; height:auto; border:none; border-radius:0;
}
.jy-guide .jyg-tnum{
  margin:18px 20px 8px; font-family:-apple-system,"PingFang TC",sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.2em; color:var(--g-navy2);
}
.jy-guide .jyg-tri h3{
  margin:0 20px 6px; font-size:1.38em; font-weight:800; color:var(--g-navy);
  line-height:1.4; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.jy-guide .jyg-tri h3 span{
  font-family:-apple-system,"PingFang TC",sans-serif; font-size:12px;
  font-weight:700; letter-spacing:.16em; color:var(--g-tint1); text-transform:uppercase;
}
.jy-guide .jyg-tsub{
  margin:0 20px 12px; padding-bottom:12px; border-bottom:1px solid var(--g-line);
  font-family:-apple-system,"PingFang TC",sans-serif; font-size:13px;
  letter-spacing:.03em; color:var(--g-navy3);
}
.jy-guide .jyg-tri > li > p:not(.jyg-tnum):not(.jyg-tsub):not(.jyg-tmap){
  margin:0 20px 14px; font-size:14.8px; line-height:1.9; flex:1 1 auto;
}
.jy-guide .jyg-tmap{
  margin:0 20px 18px; padding-top:12px; border-top:1px solid var(--g-line);
  font-family:-apple-system,"PingFang TC",sans-serif; font-size:13px; color:var(--g-navy3);
}
.jy-guide .jyg-tmap a{
  color:var(--g-navy); font-weight:700; text-decoration:none;
  border-bottom:2px solid var(--g-tint2); padding-bottom:1px;
}
.jy-guide .jyg-tmap a:hover{ border-bottom-color:var(--g-navy) }

/* 三張卡上緣一道由淺到深的線，代表三步是有順序的 */
.jy-guide .jyg-t1{ border-top:3px solid var(--g-tint1) }
.jy-guide .jyg-t2{ border-top:3px solid var(--g-navy3) }
.jy-guide .jyg-t3{ border-top:3px solid var(--g-navy) }

@media (max-width:880px){
  .jy-guide .jyg-tri{ grid-template-columns:1fr; gap:16px }
}
@media (max-width:781px){
  .jy-guide .jyg-trilogy{ margin-bottom:42px }
  .jy-guide .jyg-tphil{ padding:15px 16px; font-size:.98em; margin-bottom:24px }
  .jy-guide .jyg-tri h3{ font-size:1.28em }
}
@media print{
  .jy-guide .jyg-trilogy{ display:none !important }
}


/* 三部曲卡上緣的漸進色被 `.jyg-tri > li` 的 border 蓋掉了，補足選擇器權重 */
.jy-guide .jyg-tri > li.jyg-t1{ border-top:3px solid var(--g-tint1) }
.jy-guide .jyg-tri > li.jyg-t2{ border-top:3px solid var(--g-navy3) }
.jy-guide .jyg-tri > li.jyg-t3{ border-top:3px solid var(--g-navy) }


/* ══ 韻友指南下拉選單：嘉韻脊椎 ══ 2026-08-14
   選單左側整條＝一副加長的嘉韻 logo。三節延長成五節，比例與節距完全照原檔：
   單節 94×51（寬高比 1.84）、上緣 6% 淺凹、下緣平、節距為節高的 24%。
   反推得：項高 44（觸控下限）→ 節 65×35、節距 9，五節嚴絲合縫成一副脊椎。
   椎體用 SVG 遮罩＋漸層，形狀永遠銳利、顏色可隨狀態換，不必加圖檔。
   只作用於桌機（.ast-desktop），手機摺疊選單另外處理。 */
.ast-desktop .menu-item-9439 .sub-menu{
  --jy-vert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 94 51'%3E%3Cpath d='M0,20 C0,8 7,0 21,0 C31,0 40,3 47,3 C54,3 63,0 73,0 C87,0 94,8 94,20 L94,38 C94,46 88,51 79,51 L15,51 C6,51 0,46 0,38 Z' fill='%23000'/%3E%3C/svg%3E");
  --jy-cap-top:#0D6489; --jy-cap-bot:#C0D9E1;
  width:384px !important; min-width:384px !important;
  border-radius:14px; padding:12px 0 4px;
}
.ast-desktop .menu-item-9439 .sub-menu > li > .menu-link{
  display:flex !important; flex-direction:column; justify-content:center;
  min-height:44px; padding:5px 22px 5px 104px !important; position:relative;
}
/* 每一項左邊一節椎體 */
.ast-desktop .menu-item-9439 .sub-menu > li > .menu-link::before{
  content:""; position:absolute; left:22px; top:4.5px; width:65px; height:35px;
  -webkit-mask-image:var(--jy-vert); mask-image:var(--jy-vert);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  background:linear-gradient(180deg,var(--jy-cap-top),var(--jy-cap-bot));
  transition:transform .2s ease, filter .2s ease;
}
/* 站號（無襯線加寬字距，與指南頁的 STEP 標籤同一組語言） */
.ast-desktop .menu-item-9439 .sub-menu > li > .menu-link .menu-text::before{
  display:block; font-family:-apple-system,"PingFang TC","Noto Sans TC",sans-serif;
  font-size:10.5px; font-weight:700; letter-spacing:.22em; color:#9ab6c6;
  margin-bottom:1px; line-height:1.4;
}
.ast-desktop .menu-item-9449 .menu-text::before{ content:"01" }
.ast-desktop .menu-item-9440 .menu-text::before{ content:"02" }
.ast-desktop .menu-item-9441 .menu-text::before{ content:"03" }
.ast-desktop .menu-item-9442 .menu-text::before{ content:"04" }
.ast-desktop .menu-item-9450 .menu-text::before{ content:"05" }
/* 標題 */
.ast-desktop .menu-item-9439 .sub-menu > li > .menu-link .menu-text{
  font-family:"Noto Serif TC","Songti TC",serif;
  font-size:16.5px; font-weight:700; line-height:1.45;
}
/* 第 05 站是分支：那一節淡化（與指南頁第 05 站一致） */
.ast-desktop .menu-item-9450 > .menu-link::before{ opacity:.45 }
/* hover：微微脹起＋顏色加深。脊椎是解剖構造，不該彈跳 */
.ast-desktop .menu-item-9439 .sub-menu > li > .menu-link:hover::before{
  transform:scale(1.06); filter:saturate(1.25) brightness(.96);
}
.ast-desktop .menu-item-9439 .sub-menu > li > .menu-link:hover .menu-text::before{ color:#2f6d8f }

/* 底部出口：看完整的韻友指南（沒有椎體，路到這裡交給整份指南） */
.ast-desktop .menu-item-9439 .sub-menu > li.jyg-nav-all{
  margin:8px 14px 4px; padding-top:4px; border-top:1px solid #d8e4ea;
}
.ast-desktop .menu-item-9439 .sub-menu > li.jyg-nav-all > .menu-link{
  min-height:auto; padding:10px 8px 8px !important;
}
.ast-desktop .menu-item-9439 .sub-menu > li.jyg-nav-all > .menu-link::before{ display:none }
.ast-desktop .menu-item-9439 .sub-menu > li.jyg-nav-all .menu-text{ font-size:14.8px }
.ast-desktop .menu-item-9439 .sub-menu > li.jyg-nav-all .menu-text::after{ content:" →" }

/* 舊瀏覽器不支援遮罩時就不畫椎體，版面自動收回，不會出現黑塊 */
@supports not ((-webkit-mask-image:url('')) or (mask-image:url(''))){
  .ast-desktop .menu-item-9439 .sub-menu > li > .menu-link::before{ display:none }
  .ast-desktop .menu-item-9439 .sub-menu > li > .menu-link{ padding-left:24px !important }
  .ast-desktop .menu-item-9439 .sub-menu{ width:326px !important; min-width:326px !important }
}


/* ══ 韻友指南脊椎：壓過既有的左側短棒 ══ 2026-08-14
   既有規則 .main-header-menu .sub-menu > li:not(.nav-group):not(.jy-cta) > a.menu-link::before
   權重 (0,5,2)，且 hover 時會把 height 改成 22px。以下一律用 (0,6,2)／(0,7,2) 覆蓋。
   另外把項高鎖成 44px，節 35＋節距 9 才會嚴絲合縫成一副脊椎。 */
.ast-desktop .main-header-menu .menu-item-9439 .sub-menu > li.menu-item > a.menu-link{
  height:44px !important; min-height:44px !important;
  padding:3px 22px 3px 104px !important;
  justify-content:center;
}
.ast-desktop .main-header-menu .menu-item-9439 .sub-menu > li.menu-item > a.menu-link .menu-text{
  line-height:1.38;
}
.ast-desktop .main-header-menu .menu-item-9439 .sub-menu > li.menu-item > a.menu-link .menu-text::before{
  line-height:1.2; margin-bottom:0;
}
/* 椎體：取代原本的短棒 */
.ast-desktop .main-header-menu .menu-item-9439 .sub-menu > li.menu-item > a.menu-link::before{
  left:22px; top:4.5px; width:65px; height:35px;
  transform:none; border-radius:0;
  -webkit-mask-image:var(--jy-vert); mask-image:var(--jy-vert);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  background:linear-gradient(180deg,var(--jy-cap-top),var(--jy-cap-bot));
  transition:transform .2s ease, filter .2s ease;
}
/* hover：既有規則會把 height 拉成 22px，這裡擋掉，改成微微脹起 */
.ast-desktop .main-header-menu .menu-item-9439 .sub-menu > li.menu-item > a.menu-link:hover::before,
.ast-desktop .main-header-menu .menu-item-9439 .sub-menu > li.menu-item > a.menu-link:focus::before{
  height:35px; transform:scale(1.06); filter:saturate(1.25) brightness(.96);
}
/* 既有 hover 會把整列 translateX(2px)，脊椎必須固定不動 */
.ast-desktop .main-header-menu .menu-item-9439 .sub-menu > li.menu-item > a.menu-link:hover,
.ast-desktop .main-header-menu .menu-item-9439 .sub-menu > li.menu-item > a.menu-link:focus{
  transform:none;
}
/* 第 05 站是分支：那一節淡化 */
.ast-desktop .main-header-menu .menu-item-9439 .sub-menu > li.menu-item-9450 > a.menu-link::before{
  opacity:.45;
}
/* 底部出口：沒有椎體，也不要站號，箭頭只留我自己那一個 */
.ast-desktop .main-header-menu .menu-item-9439 .sub-menu > li.jyg-nav-all > a.menu-link{
  height:auto !important; min-height:0 !important; padding:10px 8px 8px !important;
}
.ast-desktop .main-header-menu .menu-item-9439 .sub-menu > li.jyg-nav-all > a.menu-link::before,
.ast-desktop .main-header-menu .menu-item-9439 .sub-menu > li.jyg-nav-all > a.menu-link::after{
  display:none !important;
}


/* ══ 手機彈出選單維持原樣 ══ 2026-08-14
   .ast-desktop 是掛在 body 上的，所以 #ast-mobile-popup 裡的那一份選單也會吃到上面的桌機規則。
   實測外溢四項：遮罩、display:flex、min-width:384、站號。其中遮罩會在按住時
   把 3×22 的短棒套上 94×51 的椎體形，變成畸形碎片。這裡全部還原。
   手機版的脊椎另外做、另外驗。 */
#ast-mobile-popup .menu-item-9439 .sub-menu{ min-width:0 !important }
#ast-mobile-popup .menu-item-9439 .sub-menu > li > .menu-link{
  display:block !important; min-height:0 !important; height:auto !important;
}
#ast-mobile-popup .menu-item-9439 .sub-menu > li > .menu-link::before{
  -webkit-mask-image:none !important; mask-image:none !important;
}
#ast-mobile-popup .menu-item-9439 .sub-menu .menu-text::before{ content:none !important }
#ast-mobile-popup .menu-item-9439 .sub-menu .menu-text{
  font-family:inherit; font-size:inherit; line-height:inherit;
}
#ast-mobile-popup .menu-item-9439 .sub-menu > li.jyg-nav-all .menu-text::after{ content:" →" }


/* ══════════════════════════════════════════════════════════════
   韻友指南 · 旅程文章頁設計系統 v1（2026-08-15）
   套用對象：10 篇旅程層文章（body 由 WPCode PHP 片段加上 .jy-journey
   與 .jy-js-01…06 站別 class；純樣式與注入，不改文章內容）
   設計語彙沿用 jy-v2：navy 四階 / tint 三階 / 12px 圓角 / 柔和陰影
   目的：讓從 /guide/ 點進來的人，一眼知道「我還在同一條路上」
   ══════════════════════════════════════════════════════════════ */
body.jy-journey{
  --j-navy:#005E85; --j-navy2:#2f6d8f; --j-navy3:#4e7f9c; --j-navy4:#00445F;
  --j-tint1:#9ab6c6; --j-tint2:#c3d5df; --j-tint3:#e2ebf0;
  --j-ground:#f4f8fa; --j-line:#d8e4ea; --j-ink:#3e4e56;
  --j-shadow:0 4px 18px rgba(0,50,72,.05);
  --j-lift:0 10px 34px rgba(0,50,72,.10);
  --j-sans:-apple-system,"PingFang TC","Noto Sans TC",sans-serif;
}

/* ── 閱讀進度：頂端一條品牌藍，寬度由 JS 更新（沒跑就是 0，不會壞版） ── */
.jy-journey .jyj-bar{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--j-tint1),var(--j-navy));
  z-index:9999; pointer-events:none;
  transition:width .12s linear;
}

/* ══ ① 特色圖：比閱讀欄再寬一階的橫幅 ══════════════════════════
   ⚠️ 刻意不做滿版（100vw）。特色圖是實拍的院內照，放到滿版時
   牆上的宣傳立牌會跟著放大到看得清楚；寬度收在 1000px 是安全線。 */
.jy-journey .entry-header .post-thumb-img-content{
  max-width:1000px; margin-left:auto; margin-right:auto;
  position:relative; overflow:hidden; line-height:0; border-radius:16px;
}
.jy-journey .entry-header .post-thumb-img-content img{
  width:100%; height:clamp(200px,26vw,320px); object-fit:cover; object-position:center 40%;
  border-radius:16px; box-shadow:var(--j-shadow); display:block;
}
/* 標題往上收，貼著照片，形成一個整體 */
.jy-journey .entry-header .entry-title{
  margin-top:26px; font-size:clamp(26px,3.4vw,38px); line-height:1.42;
}
.jy-journey .entry-header .entry-meta{ margin-top:10px }

/* ══ ② 站點牌：您在這條路的第幾站 ══════════════════════════════ */
.jy-journey .jyj-plate{
  max-width:720px; margin:6px auto 34px; padding:20px 24px 18px;
  background:linear-gradient(180deg,#fff,var(--j-ground));
  border:1px solid var(--j-line); border-radius:14px;
  box-shadow:var(--j-shadow); font-family:var(--j-sans);
}
.jy-journey .jyj-plate-top{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:0 0 16px; padding:0;
}
.jy-journey .jyj-plate-top .jyj-home{
  font-size:12.5px; font-weight:700; letter-spacing:.14em;
  color:var(--j-navy); text-decoration:none;
  border-bottom:2px solid var(--j-tint2); padding-bottom:2px;
}
.jy-journey .jyj-plate-top .jyj-home:hover{ border-bottom-color:var(--j-navy) }
.jy-journey .jyj-plate-top .jyj-here{
  font-size:12.5px; color:var(--j-navy3); letter-spacing:.06em;
}
.jy-journey .jyj-plate-top .jyj-here b{ color:var(--j-navy); font-weight:700 }

/* 六站進度：圓點串成一條線，目前這一站放大並顯示站名 */
.jy-journey .jyj-plate ol.jyj-dots,
.jy-journey .entry-content ol.jyj-dots{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(6,1fr); gap:0;
  counter-reset:none;
}
.jy-journey .jyj-plate ol.jyj-dots > li,
.jy-journey .entry-content ol.jyj-dots > li{
  position:relative; margin:0; padding:0; text-align:center;
}
.jy-journey .jyj-plate ol.jyj-dots > li::before,
.jy-journey .entry-content ol.jyj-dots > li::before{ content:none }
/* 站與站之間的軌道 */
.jy-journey .jyj-dots > li + li::after{
  content:""; position:absolute; right:50%; top:9px; width:100%; height:2px;
  background:var(--j-tint3); z-index:0;
}
.jy-journey .jyj-dots > li a{
  position:relative; z-index:1; display:block; text-decoration:none;
  padding:0 2px; color:var(--j-navy3);
}
.jy-journey .jyj-dots i{
  display:block; width:20px; height:20px; margin:0 auto 8px;
  border-radius:50%; background:#fff;
  border:2px solid var(--j-tint2); box-shadow:0 0 0 4px #fff;
  transition:transform .18s, border-color .18s, background .18s;
}
.jy-journey .jyj-dots span{
  display:block; font-size:11.5px; line-height:1.5; letter-spacing:.02em;
  color:var(--j-navy3); opacity:.75; white-space:nowrap;
}
/* 站號的寫法與 /guide/ 的旅程標籤列一致（同樣是淡色、加寬字距的 01–06） */
.jy-journey .jyj-dots span b{
  font-size:10.5px; letter-spacing:.1em; color:var(--j-tint1); font-weight:700;
  margin-right:3px;
}
.jy-journey .jyj-dots li.jyj-now span b{ color:var(--j-navy2) }
.jy-journey .jyj-dots a:hover i{ border-color:var(--j-navy); transform:scale(1.1) }
.jy-journey .jyj-dots a:hover span{ opacity:1; color:var(--j-navy) }
/* 已經走過的站：實心淡色 */
.jy-journey .jyj-dots li.jyj-done i{ background:var(--j-tint2); border-color:var(--j-tint2) }
/* 目前這一站 */
.jy-journey .jyj-dots li.jyj-now i{
  background:var(--j-navy); border-color:var(--j-navy);
  transform:scale(1.28); box-shadow:0 0 0 4px #fff,0 0 0 7px var(--j-tint3);
}
.jy-journey .jyj-dots li.jyj-now span{ color:var(--j-navy); font-weight:700; opacity:1 }
/* 第 05 站是分支，虛線圈（與 /guide/ 一致） */
.jy-journey .jyj-dots li.jyj-branch i{ border-style:dashed; background:#fff }

/* ══ ③ 文章目錄：從外掛預設的連結牆，改成「這一站會講到」 ══════ */
.jy-journey .entry-content #ez-toc-container{
  max-width:720px; margin:0 auto 38px !important; padding:26px 28px 22px;
  background:#fff; border:1px solid var(--j-line); border-left:3px solid var(--j-navy);
  border-radius:0 14px 14px 0; box-shadow:var(--j-shadow);
  float:none; width:auto; font-family:var(--j-sans);
}
/* 外掛自己的標題列：換成我們的說法，並藏掉切換鈕的預設外觀 */
.jy-journey #ez-toc-container .ez-toc-title-container{
  display:flex; align-items:center; justify-content:space-between;
  margin:0 0 16px; padding:0 0 14px; border-bottom:1px solid var(--j-line);
}
.jy-journey #ez-toc-container .ez-toc-title{
  font-size:0 !important; margin:0; padding:0; color:transparent;
}
.jy-journey #ez-toc-container .ez-toc-title::before{
  content:"這一站會講到"; font-size:14px; font-weight:700; letter-spacing:.1em;
  color:var(--j-navy); font-family:var(--j-sans);
}
.jy-journey #ez-toc-container .ez-toc-title-toggle svg{ fill:var(--j-tint1) !important; color:var(--j-tint1) !important }
.jy-journey #ez-toc-container .ez-toc-btn{ background:none; border:0; box-shadow:none }

/* 清單本體：桌機兩欄、編號、去底線 */
.jy-journey #ez-toc-container ul.ez-toc-list{
  margin:0; padding:0; list-style:none; counter-reset:jyjtoc;
  columns:2; column-gap:34px;
}
.jy-journey #ez-toc-container ul.ez-toc-list > li{
  break-inside:avoid; margin:0 0 11px; padding:0; counter-increment:jyjtoc;
}
.jy-journey #ez-toc-container ul.ez-toc-list > li > a{
  display:block; position:relative; padding-left:30px;
  font-size:14.5px; line-height:1.7; color:var(--j-ink);
  text-decoration:none; border:0; transition:color .15s;
}
.jy-journey #ez-toc-container ul.ez-toc-list > li > a::before{
  content:counter(jyjtoc,decimal-leading-zero);
  position:absolute; left:0; top:.15em;
  font-size:11.5px; font-weight:700; letter-spacing:.06em;
  color:var(--j-tint1);
}
.jy-journey #ez-toc-container ul.ez-toc-list > li > a:hover{ color:var(--j-navy) }
.jy-journey #ez-toc-container ul.ez-toc-list > li > a:hover::before{ color:var(--j-navy) }
/* 第三層（多半是常見問題）：縮成次要層級，不跟主章節搶注意力 */
.jy-journey #ez-toc-container ul.ez-toc-list-level-3{
  columns:1; margin:8px 0 0; padding:0 0 0 30px;
}
.jy-journey #ez-toc-container ul.ez-toc-list-level-3 > li{ margin:0 0 6px; counter-increment:none }
.jy-journey #ez-toc-container ul.ez-toc-list-level-3 > li > a{
  padding-left:14px; font-size:13.5px; color:var(--j-navy3);
}
.jy-journey #ez-toc-container ul.ez-toc-list-level-3 > li > a::before{
  content:""; top:.72em; width:6px; height:1px; background:var(--j-tint2);
}
.jy-journey #ez-toc-container ul.ez-toc-list-level-3 > li > a:hover::before{ background:var(--j-navy) }

/* ══ ④ 章節：加上編號，長文才有段落感 ══════════════════════════ */
.jy-journey .entry-content{ counter-reset:jyjh2 }
.jy-journey .entry-content h2{
  counter-increment:jyjh2; padding-top:6px;
}
.jy-journey .entry-content h2::after{
  content:counter(jyjh2,decimal-leading-zero);
  position:absolute; right:0; bottom:14px;
  font-family:var(--j-sans); font-size:12px; font-weight:700;
  letter-spacing:.12em; color:var(--j-tint2);
}

/* ══ ⑤ 常見問題：問句做成卡片，答句留在卡片裡 ══════════════════ */
.jy-journey .entry-content h3{
  background:var(--j-ground); border-left:3px solid var(--j-tint1);
  border-radius:0 10px 10px 0; padding:13px 18px; margin:34px 0 14px;
  font-size:1.08em; line-height:1.6;
}

/* ══ ⑥ 圖：放大一點，並與文字拉開距離 ══════════════════════════ */
.jy-journey .entry-content figure{ margin:44px auto !important }

/* ══ ⑦ 螢光：只在旅程文調淡一階 ════════════════════════════════
   旅程文是決策型體裁，一段裡常有兩三處長句被整條劃掉，
   讀起來會一直被打斷。色相不變（仍是品牌藍），只把濃度 .16→.11、
   色帶 8px→7px。其餘 100 多篇維持原本的濃度，不動全站標準。 */
.jy-journey .entry-content strong{
  background:linear-gradient(rgba(0,94,133,.11) 0%,rgba(0,94,133,.11) 100%);
  background-size:100% 7px; background-position:0 84%; background-repeat:no-repeat;
}
.jy-journey .entry-content li strong,
.jy-journey .entry-content td strong,
.jy-journey .entry-content th strong,
.jy-journey .entry-content strong.jy-label{ background:none }

/* ══ ⑦ 文末：同一條軌道，往前走一格 ══════════════════════════════
   刻意不再放第二張地圖。頂端回答「我在哪」，文末只回答「接下來去哪」，
   用的是同一組圓點，差別在於亮起來的那一顆已經往前挪了一站。 */

/* 佈景主題自己的「上一篇／下一篇文章」是依發佈時間排的，跟旅程順序無關，
   放在旅程導覽旁邊只會讓人混淆——旅程文上關掉，交給下面這一組。 */
.jy-journey .post-navigation{ display:none }

.jy-journey .entry-content .jyj-onward{
  max-width:720px; margin:60px auto 0; padding:30px 30px 24px;
  background:linear-gradient(180deg,var(--j-ground),#fff);
  border:1px solid var(--j-line); border-radius:16px; font-family:var(--j-sans);
}
/* 迷你軌道：與頂端同語言，尺寸砍半、不帶站名 */
.jy-journey .entry-content ol.jyj-dots.jyj-mini{ margin:0 0 18px; max-width:330px }
.jy-journey .jyj-mini i{
  width:12px; height:12px; margin-bottom:0; border-width:2px; box-shadow:0 0 0 3px #fff;
}
.jy-journey .jyj-mini > li + li::after{ top:5px; height:2px }
.jy-journey .jyj-mini span{ display:none }
.jy-journey .jyj-mini li.jyj-now i{
  transform:scale(1.34); box-shadow:0 0 0 3px #fff,0 0 0 6px var(--j-tint3);
}
.jy-journey .entry-content .jyj-onward-lead{
  margin:0 0 14px; font-size:13px; font-weight:700; letter-spacing:.12em;
  color:var(--j-navy3);
}
.jy-journey .entry-content .jyj-card{
  display:flex; align-items:center; gap:18px;
  background:#fff; border:1px solid var(--j-line); border-radius:12px;
  padding:18px 20px; text-decoration:none; box-shadow:var(--j-shadow);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.jy-journey .entry-content .jyj-card:hover{
  transform:translateY(-2px); box-shadow:var(--j-lift); border-color:var(--j-tint2);
}
.jy-journey .entry-content .jyj-card .jyj-cardtext{ flex:1 1 auto; min-width:0 }
.jy-journey .entry-content .jyj-card em{
  display:block; font-style:normal; font-size:11.5px; font-weight:700;
  letter-spacing:.14em; color:var(--j-tint1); margin-bottom:7px;
}
.jy-journey .entry-content .jyj-card b{
  display:block; font-size:16px; font-weight:700; line-height:1.6; color:var(--j-navy);
}
/* 右側箭頭：與 /guide/ 門卡上的「→」同一個樣子，不做成圓片，兩邊才像同一款卡 */
.jy-journey .entry-content .jyj-card .jyj-arrow{
  flex:0 0 auto; font-size:18px; line-height:1; color:var(--j-tint1);
  transition:color .18s, transform .18s;
}
.jy-journey .entry-content .jyj-card:hover .jyj-arrow{
  color:var(--j-navy); transform:translateX(3px);
}
/* 門卡的左緣標記也跟 /guide/ 一致 */
.jy-journey .entry-content .jyj-card{
  border-left:3px solid var(--j-tint2); border-radius:0 12px 12px 0;
}
.jy-journey .entry-content .jyj-card:hover{ border-left-color:var(--j-navy) }
/* 收尾那一行：左邊回頭、右邊回地圖，兩個都是安靜的文字連結 */
.jy-journey .entry-content .jyj-foot{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  margin:20px 0 0; padding-top:16px; border-top:1px solid var(--j-line);
  font-size:13px; line-height:1.7;
}
.jy-journey .entry-content .jyj-foot a{
  color:var(--j-navy2); text-decoration:none;
  border-bottom:1px solid var(--j-tint2); padding-bottom:2px;
}
.jy-journey .entry-content .jyj-foot a:hover{ color:var(--j-navy); border-bottom-color:var(--j-navy) }
.jy-journey .entry-content .jyj-foot .jyj-back{ color:var(--j-navy3) }
/* 走完六站：沒有下一篇，收在一句話上 */
.jy-journey .entry-content .jyj-onward.jyj-end .jyj-card{ background:var(--j-ground) }

/* ══ 平板 ══════════════════════════════════════════════════════ */
@media (max-width:900px){
  .jy-journey #ez-toc-container ul.ez-toc-list{ columns:1 }
}

/* ══ 手機 ══════════════════════════════════════════════════════ */
@media (max-width:781px){
  .jy-journey .entry-header .post-thumb-img-content img{ height:180px }
  .jy-journey .jyj-plate{ padding:16px 14px 14px; border-radius:12px }
  /* 六站進度在手機上只留圓點與目前這一站的名字，不要擠成六行 */
  .jy-journey .jyj-dots span{ font-size:0 }
  .jy-journey .jyj-dots li.jyj-now span{ font-size:11.5px }
  .jy-journey .entry-content #ez-toc-container{ padding:20px 16px 16px }
  .jy-journey .entry-content h2::after{ display:none }
  .jy-journey .entry-content .jyj-onward{ padding:24px 18px 20px }
  .jy-journey .entry-content .jyj-card{ gap:14px; padding:16px }
  .jy-journey .entry-content .jyj-foot{ flex-direction:column; gap:10px }
}

/* ══ 列印：站點牌與導覽不必印出來 ══════════════════════════════ */
@media print{
  .jy-journey .jyj-plate,
  .jy-journey .jyj-onward,
  .jy-journey .jyj-bar{ display:none !important }
}

/* ══ 尊重「減少動態」設定 ══════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .jy-journey .jyj-bar{ transition:none }
  .jy-journey .entry-content .jyj-card:hover{ transform:none }
  .jy-journey .jyj-dots a:hover i{ transform:none }
}

/* ══ 韻友指南 v10：把通往子頁的門做成門卡 ══ 2026-08-15
   為什麼只改這一項：六站裡真正的動作只有「點進去看那一站的完整說明」，
   但它一直是一條純底線文字，比旁邊任何一個說明框都不顯眼。
   門卡的長相與子頁文末的「下一站」卡刻意做成同一款——
   在指南上點的那張卡，進到子頁、看完之後，會以同樣的樣子再出現一次。 */
.jy-guide .jyg-go{ margin:0 0 10px }
.jy-guide .jyg-go a{
  display:block; position:relative;
  padding:15px 20px 15px 22px;
  background:#fff; border:1px solid var(--g-line); border-left:3px solid var(--g-navy);
  border-radius:0 12px 12px 0; box-shadow:var(--g-shadow);
  font-family:-apple-system,"PingFang TC",sans-serif;
  font-size:16px; font-weight:700; line-height:1.6; color:var(--g-navy);
  text-decoration:none; border-bottom:1px solid var(--g-line);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* hover 只做上浮與加深陰影；不要動 border-color 簡寫，
   否則左緣那道 navy 標記會被一起改掉 */
.jy-guide .jyg-go a:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 34px rgba(0,50,72,.10);
}
/* 最後一段的箭頭是文字的一部分（「… →」），用字距把它推開一點，
   hover 時整張卡上浮就夠了，不另外做動畫 */
.jy-guide .jyg-go a{ letter-spacing:.01em }
/* 同一站有兩篇時，第二張卡緊接著第一張，讀起來是一組 */
.jy-guide .jyg-go + .jyg-go{ margin-top:-2px }
.jy-guide .jyg-go:last-of-type{ margin-bottom:16px }

@media (max-width:781px){
  .jy-guide .jyg-go a{ padding:13px 16px 13px 18px; font-size:15px }
}
@media print{
  .jy-guide .jyg-go a{ box-shadow:none; border:1px solid var(--g-line) }
}



/* ── 韻友指南 · 旅程頁：無障礙修正 ── 2026-08-15（同日稍晚）
   ① 文末迷你軌道原本用 display:none 藏站名，等於那六個連結對讀螢幕軟體
      完全沒有名字（實測 innerText 為空字串）。改成視覺隱藏、仍留在無障礙樹裡。
   ② 小字一律改回本站標準的 navy-2 #2f6d8f（對白底 5.67:1）。
      原本用的 tint-1 #9ab6c6 只有 2.13:1、navy-3 #4e7f9c 只有 4.34:1，
      都低於 AA 的 4.5。病人年齡偏長，這條不能省。 */
.jy-journey .jyj-mini span{
  display:block; position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden; white-space:nowrap; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
}
.jy-journey .jyj-dots span{ color:#2f6d8f; opacity:1 }
.jy-journey .jyj-dots span b{ color:#2f6d8f }
.jy-journey .jyj-dots li.jyj-now span,
.jy-journey .jyj-dots li.jyj-now span b{ color:#005E85 }
.jy-journey .jyj-plate-top .jyj-here{ color:#2f6d8f }
.jy-journey .entry-content .jyj-onward-lead{ color:#2f6d8f }
.jy-journey .entry-content .jyj-card em{ color:#2f6d8f }
.jy-journey .entry-content .jyj-foot .jyj-back{ color:#2f6d8f }
.jy-journey #ez-toc-container ul.ez-toc-list > li > a::before{ color:#2f6d8f }
.jy-journey .entry-content h2::after{ color:#2f6d8f }

/* ── 旅程文：關掉共用範本的「延伸閱讀」 ── 2026-08-15
   那是 Elementor 共用範本裡的「最新文章」元件（4547fad），不是相關文章。
   旅程文剛好都是最新的，所以它列出來的六篇實測 100% 就是上面六站索引那幾篇，
   等於同一批連結在同一頁出現兩次。其餘 120 多篇文章不受影響。 */
.jy-journey .elementor-element-4547fad{ display:none }

/* ── 韻友指南：臨床理念（轉診立場的落款）── 2026-08-15
   「在開刀之前，我們想為您的關節再拼一次。」是站上兩位醫師掛名的臨床理念，
   放在「我們不在診所執行手術、所以該說的時候沒有理由不說」之後，
   讓那一段從立場收在承諾上。前綴「在開刀之前」不可省略。 */
.jy-guide .jyg-creed{
  margin:18px 0 0; padding-top:16px; border-top:1px solid var(--g-line);
  font-family:"Noto Serif TC",serif; font-size:17px; line-height:1.9;
  color:var(--g-navy); font-weight:700; text-wrap:pretty;
}
.jy-guide .jyg-creed em{
  display:block; font-style:normal; font-family:-apple-system,"PingFang TC",sans-serif;
  font-size:11.5px; font-weight:700; letter-spacing:.14em; color:var(--g-navy2); margin-bottom:7px;
}
@media (max-width:781px){ .jy-guide .jyg-creed{ font-size:16px } }

/* ══ 韻友指南下拉 v2 ══ 2026-08-15  三個實測出來的問題
   ① 站號 01–05 寫在 .menu-text::before，但這個選單的 DOM 根本沒有 .menu-text 這一層
      → 從 8/14 上線起就沒顯示過。改用 a::after（原本是「→」；mega 面板本來就不該留箭頭空間）。
   ② 椎體實測 63×36.5＝比例 1.73，遮罩路徑本身是 1.84，等於被縱向拉伸 7%，
      所以看起來像圓塊而不像椎體。重算成 72×39（1.846）。
   ③ 旅程已經六站，選單只有五節＝脊椎不完整。已補上第 06 站（選單項 9723）。
   幾何：列高 52 ＝ 節高 39 ＋ 節距 13，六節仍然嚴絲合縫成一副脊椎。 */
.ast-desktop .ast-nav-menu .menu-item-9439 .sub-menu > li:not(.jyg-nav-all) > a.menu-link{
  min-height:52px !important;
  padding:21px 20px 7px 80px !important;
  justify-content:flex-start !important; line-height:1.4;
}
/* 椎體縮小（院方 2026-08-15 回饋：圓豆太大、質感不夠）。
   ⚠️ 壓著尺寸的那條規則是 (0,6,2)＋!important，且用的是 viewBox 221×128 的新路徑
   （比例 1.727，實測 63×36.5 完全吻合＝形狀本來就沒有被拉伸，只是大）。
   同特異度靠順序贏不了，所以把 .ast-nav-menu 重複一次墊到 (0,7,2)。 */
.ast-desktop .ast-nav-menu.ast-nav-menu .menu-item-9439 .sub-menu > li:not(.jyg-nav-all) > a.menu-link::before{ left:24px !important; top:13px !important; width:45px !important; height:26px !important; }
.ast-desktop .ast-nav-menu.ast-nav-menu .menu-item-9439 .sub-menu > li:not(.jyg-nav-all) > a.menu-link:hover::before{ width:45px !important; height:26px !important; }
/* 站號＋站名：與 /guide/ 標籤列、子頁圓點同一套寫法 */
.ast-desktop .ast-nav-menu .menu-item-9439 .sub-menu > li:not(.jyg-nav-all) > a.menu-link::after{
  position:absolute; left:80px; top:8px; right:auto; bottom:auto;
  /* ⚠️ 原本的「→」是 hover 才淡入（opacity:0; visibility:hidden），
     直接換 content 會得到一個看不見的站名——這兩行不能省。 */
  opacity:1 !important; visibility:visible !important;
  transform:none; width:auto; height:auto; background:none; border:0;
  font-family:-apple-system,"PingFang TC","Noto Sans TC",sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.14em; color:#2f6d8f;
}
.ast-desktop .ast-nav-menu .menu-item-9439 .sub-menu > li.menu-item-9449 > a.menu-link::after{ content:"01\3000 來之前" }
.ast-desktop .ast-nav-menu .menu-item-9439 .sub-menu > li.menu-item-9440 > a.menu-link::after{ content:"02\3000 療程中" }
.ast-desktop .ast-nav-menu .menu-item-9439 .sub-menu > li.menu-item-9441 > a.menu-link::after{ content:"03\3000 選治療" }
.ast-desktop .ast-nav-menu .menu-item-9439 .sub-menu > li.menu-item-9442 > a.menu-link::after{ content:"04\3000 走到注射" }
.ast-desktop .ast-nav-menu .menu-item-9439 .sub-menu > li.menu-item-9450 > a.menu-link::after{ content:"05\3000 車禍職災" }
.ast-desktop .ast-nav-menu .menu-item-9439 .sub-menu > li.menu-item-9723 > a.menu-link::after{ content:"06\3000 結束之後" }
/* 手機抽屜還原：v2 新增的內距與站名標籤同樣會外溢 */
#ast-mobile-popup .menu-item-9439 .sub-menu > li > .menu-link{
  min-height:0 !important; padding:9px 20px !important;
}
#ast-mobile-popup .menu-item-9439 .sub-menu > li > .menu-link::after{ content:none !important }

/* ── 手機抽屜補站號 ── 2026-08-15
   桌機下拉已經是「01 來之前」，手機卻只有標題，六站語言在手機不成立。
   脊椎維持不畫（抽屜是 flex 版面、子選單靠 Astra 寫 inline display 開合，很脆弱），
   只把已經被還原成無遮罩的 ::before 借來當站號，不動任何 display。 */
#ast-mobile-popup .menu-item-9439 .sub-menu > li > .menu-link{ position:relative }
#ast-mobile-popup .menu-item-9439 .sub-menu > li > .menu-link::before{
  position:static !important; display:inline-block !important;
  width:auto !important; height:auto !important; background:none !important;
  margin-right:9px; vertical-align:1px;
  font-family:-apple-system,"PingFang TC","Noto Sans TC",sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.12em; color:#2f6d8f;
}
#ast-mobile-popup .menu-item-9449 > .menu-link::before{ content:"01" !important }
#ast-mobile-popup .menu-item-9440 > .menu-link::before{ content:"02" !important }
#ast-mobile-popup .menu-item-9441 > .menu-link::before{ content:"03" !important }
#ast-mobile-popup .menu-item-9442 > .menu-link::before{ content:"04" !important }
#ast-mobile-popup .menu-item-9450 > .menu-link::before{ content:"05" !important }
#ast-mobile-popup .menu-item-9723 > .menu-link::before{ content:"06" !important }
#ast-mobile-popup .menu-item-9439 .sub-menu > li.jyg-nav-all > .menu-link::before{ content:none !important }

/* ── 站號對比補正 ── 2026-08-15
   /guide/ 旅程標籤列與三部曲副標的站號用 tint-1 #9ab6c6，對白底只有 2.13:1，
   遠低於 AA 的 4.5，也違反本站自己訂的「小標籤一律 navy-2」。
   統一改 #2f6d8f（5.67:1），用字重而不是用淡色做層次。 */
.jy-guide .jyg-map b{ color:#2f6d8f; font-weight:600 }
.jy-guide .jyg-map a:hover b{ color:#005E85 }


/* ── 影片區塊：同一頁混合直式與橫式時，改用等高清單版型 ──────────
   問題：直式卡 232x491、橫式卡 360x281，混排時列高差 210px，
   版面碎裂、標題基線對不齊。純 CSS 修正，不動 PHP（片段 9754 由另一線維護）。
   只有「同時存在 --h 與 --v」的區塊才會觸發，單一比例的頁面完全不受影響。 */
.jy-vids-g:has(.jy-vid--h):has(.jy-vid--v){
  display:flex; flex-direction:column; gap:14px; max-width:760px;
}
.jy-vids-g:has(.jy-vid--h):has(.jy-vid--v) .jy-vid{
  width:100%; margin:0; display:grid; grid-template-columns:168px 1fr;
  gap:18px; align-items:center; background:#F5FAFC; border:1px solid #E1EBF0;
  border-radius:12px; padding:14px; box-shadow:none;
}
.jy-vids-g:has(.jy-vid--h):has(.jy-vid--v) .jy-vid-p{
  width:168px; height:112px; border-radius:8px; overflow:hidden; position:relative;
}
.jy-vids-g:has(.jy-vid--h):has(.jy-vid--v) .jy-vid-p img{
  width:100%; height:100%; object-fit:cover; object-position:center 28%;
}
.jy-vids-g:has(.jy-vid--h):has(.jy-vid--v) .jy-vid-b{
  width:44px; height:44px;
}
.jy-vids-g:has(.jy-vid--h):has(.jy-vid--v) .jy-vid-d{
  right:6px; bottom:6px; font-size:11.5px;
}
.jy-vids-g:has(.jy-vid--h):has(.jy-vid--v) .jy-vid figcaption{
  margin-top:0; align-self:center;
}
@media (max-width:600px){
  .jy-vids-g:has(.jy-vid--h):has(.jy-vid--v) .jy-vid{ grid-template-columns:116px 1fr; gap:14px; padding:12px }
  .jy-vids-g:has(.jy-vid--h):has(.jy-vid--v) .jy-vid-p{ width:116px; height:78px }
  .jy-vids-g:has(.jy-vid--h):has(.jy-vid--v) .jy-vid-b{ width:34px; height:34px }
}


/* ── 影片卡片收斂（2026-08-16）─────────────────────────────
   ① 區塊裡只有一張直式卡片時（全站 30 頁）：圖說靠左、卡片與內文欄同寬。
      原本圖說是 text-align:center，標題會浮在右側空白的正中央；
      佈景的 figure 左右 60px 邊距也讓卡片比內文縮排 49px。
   ② inline 主卡片在手機上只有 168px 寬，影片上燒的字看不清，放大到 240px。 */
.jy-vids-g > .jy-vid--v:only-child{ width:100%; max-width:none; margin-left:0; margin-right:0; }
.jy-vids-g > .jy-vid--v:only-child figcaption{ flex:1 1 auto; text-align:left; }
@media (max-width:782px){
  figure.jy-vid--inline.jy-vid--v{ width:240px; max-width:100%; }
  figure.jy-vid--inline.jy-vid--v .jy-vid-p{ width:100%; }
}


/* 首頁「媒體專訪」頁籤改用全站主字體（2026-08-16）
   那 6 個頁籤是全站唯一把 Noto Sans TC 當主要字體的地方，跟同一區塊的標題、
   下方影片標題（都是 Noto Serif TC）不一致。純一致性調整。
   註：Noto Sans TC 這支字型不能拿掉——首頁另有 223 個元素的字族堆疊是
   "PingFang TC","Noto Sans TC","Microsoft JhengHei"，Windows 使用者靠它。 */
.e-n-tabs .e-n-tab-title,
.e-n-tabs .e-n-tab-title-text{ font-family:"Noto Serif TC","Songti TC","PMingLiU",serif; }

.jy-vid-ns{display:inline-block;margin-top:8px;font-size:14px;color:#005E85;text-decoration:underline;text-underline-offset:3px}.jy-vid-ns:hover{color:#00354B}
.jy-xlink{margin:28px 0 8px;padding:14px 18px 16px;background:#F5FAFC;border:1px solid #E1EBF0;border-radius:12px;font-size:15px;line-height:1.75;color:#3D4B54}.jy-xlink::before{content:"另一條路徑";display:block;font-size:12px;letter-spacing:.12em;color:#5A6F7A;margin-bottom:6px}.jy-xlink a{color:#005E85;font-weight:600}
@media (min-width:1400px) and (max-width:1580px){.ast-nav-menu.ast-flex.main-header-menu > .menu-item > a.menu-link{padding-left:8px !important;padding-right:8px !important;}}.jy-pm-hint{font-size:13px !important;color:#4A6B7A !important;}.uael-post__date{font-size:12.5px !important;color:#6B6B6B !important;}@media (max-width:880px){.jy-case-sub{font-size:14px !important;}}

/* 韻友指南椎體：形狀＋尺寸＋漸層全部對齊 LOGO 原檔（2026-08-14）
   路徑由 LOGO 輪廓擬合，IoU 0.993、平均邊緣誤差 0.30px。
   放這裡而不是 WPCode，是因為原片段有一條 (0,6,2) 的選擇器壓過一般覆寫。 */
.ast-desktop .menu-item-9439 .sub-menu,
.ast-desktop .main-header-menu .menu-item-9439 .sub-menu{
  --jy-vert:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20221%20128%27%3E%3Cpath%20d=%27M0%2057.5C0%2035.3%206.6%200%2044.9%200C55.5%200%2099.5%206%20110.5%206C121.5%206%20165.5%200%20176.1%200C214.4%200%20221%2035.3%20221%2057.5C221%2086.7%20206.9%20128%20110.5%20128C14.1%20128%200%2086.7%200%2057.5Z%27%20fill=%27%23000%27/%3E%3C/svg%3E") !important;
}
.ast-desktop .menu-item-9439 .sub-menu > li > a.menu-link::before,
.ast-desktop .main-header-menu .menu-item-9439 .sub-menu > li.menu-item > a.menu-link::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20221%20128%27%3E%3Cpath%20d=%27M0%2057.5C0%2035.3%206.6%200%2044.9%200C55.5%200%2099.5%206%20110.5%206C121.5%206%20165.5%200%20176.1%200C214.4%200%20221%2035.3%20221%2057.5C221%2086.7%20206.9%20128%20110.5%20128C14.1%20128%200%2086.7%200%2057.5Z%27%20fill=%27%23000%27/%3E%3C/svg%3E") !important; mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20221%20128%27%3E%3Cpath%20d=%27M0%2057.5C0%2035.3%206.6%200%2044.9%200C55.5%200%2099.5%206%20110.5%206C121.5%206%20165.5%200%20176.1%200C214.4%200%20221%2035.3%20221%2057.5C221%2086.7%20206.9%20128%20110.5%20128C14.1%20128%200%2086.7%200%2057.5Z%27%20fill=%27%23000%27/%3E%3C/svg%3E") !important;
  -webkit-mask-size:100% 100% !important; mask-size:100% 100% !important;
  -webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important;
  width:63px !important; height:36.5px !important; top:3.75px !important; left:22px !important;
  border-radius:0 !important;
  background:linear-gradient(180deg,#005E85 0%,rgba(0,94,133,.84) 25%,rgba(0,94,133,.64) 50%,rgba(0,94,133,.38) 75%,rgba(0,94,133,.10) 100%) !important;
}


/* ══════════════════════════════════════════════════════
   嘉韻 全站收斂 2026-08-14
   ══════════════════════════════════════════════════════ */

/* 浮動列保留 FB／IG（院方偏好，2026-08-14 還原） */

/* ── 2. 字體兜底：純拉丁字體一律補上中文後備
      Rufina／Montserrat 沒有中文字符，中文會掉到系統預設字體 ── */
.jy-case-sub,
.jy-case-sub * { font-family: "Rufina", "Noto Serif TC", "Songti TC", serif !important; }
.ast-custom-button,
.elementor-button-text { font-family: "Montserrat", "Noto Serif TC", "Songti TC", sans-serif !important; }

/* ── 3. 六級型階（base 16px、比例 1.2）
      13 / 14 / 16 / 19 / 23 / 28
      最重要的修正：h3 原本 16.63px、內文 16px，兩者幾乎同大小，
      層級形同不存在。拉到 19px 才和 h2 的 23px 形成階梯。 ── */
:root {
  --jy-fs-1: 13px;   /* 表頭、表格標題 */
  --jy-fs-2: 14px;   /* 圖說、表格內文、註記 */
  --jy-fs-3: 16px;   /* 內文（不變） */
  --jy-fs-4: 19px;   /* h3、導言段 */
  --jy-fs-5: 23px;   /* h2（不變） */
  --jy-fs-6: 28px;   /* h1 */
}
.single-post .entry-content h3 { font-size: var(--jy-fs-4) !important; line-height: 1.55; }
.jy-v2 .entry-content > p:first-of-type { font-size: var(--jy-fs-4) !important; }
.jy-v2 .entry-content td,
.jy-v2 .entry-content td * { font-size: var(--jy-fs-2) !important; }
.jy-v2 .entry-content thead th,
.jy-v2 .entry-content thead th * { font-size: var(--jy-fs-1) !important; }
.jy-v2 .entry-content table caption { font-size: var(--jy-fs-1) !important; }
.jy-v2 .entry-content figcaption { font-size: var(--jy-fs-2) !important; }


/* ── 4. 手機首頁瘦身（2026-08-14）
      手機上案例清單會把 18 篇全部堆成直排（實測 9,605px），
      最新消息 5 則再堆 2,648px，兩者合計佔手機首頁一半以上。
      桌機版面不動，只在手機收斂顯示數量。 ── */
@media (max-width: 880px) {
  /* 案例分享：18 篇 → 4 篇（區塊下方本來就有「更多案例」按鈕） */
  .elementor-element-47d9419 .uael-post-grid__inner > .uael-post-wrapper:nth-child(n+5) { display: none !important; }
  /* 最新消息：5 則 → 2 則 */
  .elementor-element-72b6be6 .uael-post-grid__inner > .uael-post-wrapper:nth-child(n+3) { display: none !important; }
}




	.fixedicon{ width:50px; position:fixed; right:10px; bottom:70px;z-index:9999}
	.fixedicon .icongo{ display:inline-block; padding:2px 5px;}
	.fixedicon span{ display:none; width:80px; position:absolute; right:50px; top:5px; border-radius:20px; font-size:13px; background:#fff; padding:5px 8px; text-align:center;}
	.fixedicon >div { position:relative;}
	.fixedicon >div:hover span{display:inline-block}
	.fixedicon span.hide{ display:none!important}
	.fixedicon img{transform:scale(1); cursor:pointer; margin-bottom:5px}
	.fixedicon img:hover{ transform:scale(1.1); transition:all 0.5s}