/* 元艾美品牌四色：以變數統一，後續微調不需逐頁修改。
   青綠與粉紅適合裝飾；小字採深綠，維持白底／淺綠底的閱讀對比。 */
:root {
  --brand-light: #BCDDAE;
  --brand-teal: #5DAA96;
  --brand-pink: #F9C2DB;
  --brand-deep: #284F45;
  --surface-soft: #F3F8EF;
  --ink: #3C514B;
}
body { color: var(--ink); font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif; }
.nav { border-bottom: 1px solid var(--brand-light); }
.navlinks, .nav > div { color: var(--brand-deep); }
.book, .nav .btn { background: var(--brand-light); color: var(--brand-deep); border-color: var(--brand-teal); }
.section-title h2, .title h2 { color: var(--brand-deep); line-height: 1.35; }
/* 首頁區塊中文統一 36px；英文依原桌機 34:16 比例放大，避開知識區內文規則。 */
.section-title h2 { font-size: 36px; }
.section-title p, .knowledge .section-title p { font-size: calc(16px * 36 / 34); }
/* 中英文標題採緊湊上下排列，以間距區分層級，移除中間裝飾線。 */
.section-title p, .title small { display: block; margin: 6px 0 0; line-height: 1.4; }
.treatments, .knowledge, .mint { background: var(--surface-soft); }
.treat-list { background: transparent; border: 0; padding: 0; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 移除外層白底，照片獨立圓角，卡片直接放在區塊淺綠底上。 */
.treat-flow { background: transparent; gap: 24px; border-radius: 0; overflow: visible; }
.treat-flow .photo-block { border-radius: 10px; overflow: hidden; }
/* 整張卡片都是連結；淺底與箭頭提供常態提示，滑過及鍵盤焦點另有清楚回饋。 */
.treat, .treat:nth-child(odd) { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 24px 16px 22px; border: 0; border-radius: 28px; background: #FFFFFF; box-shadow: 0 6px 18px rgba(40, 79, 69, .09); color: var(--brand-deep); text-align: center; text-decoration: none; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
/* 診療卡片文字樣式統一由 home-reading-comfort.css 管理。 */
.treat b { margin: 0; }
.treat b::after { display: none; }
.treat .treat-icon { position: relative; display: block; flex: 0 0 90px; width: 96px; height: 90px; overflow: hidden; margin: 0 auto 18px; }
.treat-icon img { position: absolute; display: block; height: auto; max-width: none; }
/* 標題保持真正置中；箭頭獨立靠右，避免把標題推向左側。 */
.treat .treat-heading { position: relative; display: block; width: 100%; padding: 0 18px; box-sizing: border-box; margin-bottom: 9px; }
.treat .treat-arrow { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #C86C94; font-family: Arial, sans-serif; font-size: 26px; line-height: 1; transition: color .18s ease, transform .18s ease; }
/* 桌機小字調整：只提高首頁閱讀用說明，手機／平板沿用原字級。
   評論選擇器包含卡片層，確保優先於首頁既有的內嵌評論樣式。 */
@media (min-width: 1101px) {
  .treatment-groups .need-copy p,
  .reviews-preview .google-review-card .review-body { font-size: 16px; }
  .reviews-preview .google-review-card .review-date { font-size: 13px; }
}
@media (hover: hover) {
  /* 內側 2px 深綠框不占版面空間，滑過時卡片與文字不位移。 */
  .treat:hover { background: #EFF6E9; box-shadow: inset 0 0 0 2px var(--brand-deep), 0 8px 22px rgba(40, 79, 69, .13); }
  .treat:hover .treat-arrow { color: var(--brand-deep); transform: translate(3px, -50%); }
}
.treat:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 2px; background: #EFF6E9; }
@media (prefers-reduced-motion: reduce) { .treat, .treat .treat-arrow { transition: none; } }
.intro p { color: var(--brand-deep); }
@media (min-width: 1101px) {
  .intro p { font-size: 24px; }
}
/* 三項標題維持放大 25%；說明文字在 13 × 1.25 的基礎上再加 2px。 */
.care-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 34px 10vw;
  background: #fff;
  color: #284f45;
  text-align: center;
}
.care-values > div { padding: 18px; }
.care-values > div + div { border-inline-start: 1px solid #d7e6ce; }
.care-values b { color: var(--brand-deep); font-size: 23.75px; letter-spacing: .15em; }
.care-values p { color: #52665e; }
/* 三段診所介紹與三項理念說明共用字級，避免不同裝置出現落差。 */
.care-values p, .seo-copy > p { font-size: 18.25px; }
/* 共用圖框與間距，保持三款圖示、標題在同一水平線。 */
.care-value-icon { display: block; position: relative; overflow: hidden; width: 64px; height: 64px; margin: 0 auto 22px; }
/* 直接顯示已確認生成圖的三個圖示區域，保留原始像素與造型，不重新繪製。 */
.care-value-icon img { position: absolute; width: 404.583333%; max-width: none; height: auto; top: -23.125%; left: var(--icon-x); }
.care-icon-listening { --icon-x: -21.875%; }
.care-icon-explanation { --icon-x: -152.291667%; }
.care-icon-aftercare { --icon-x: -284.166667%; }
.quote, .card { border-top-color: var(--brand-pink); }
/* 人工植牙的兩組說明卡沿用首頁療程卡外觀；資訊卡維持左對齊。 */
.treatment-info-cards > .card { background: #FFFFFF; border: 0; border-radius: 28px; box-shadow: 0 6px 18px rgba(40, 79, 69, .09); }
/* 首頁 FAQ 直接顯示答案；兩欄閱讀，移除原本頂部粉紅線。 */
.faq-block .section-title h2 { font-size: 36px; margin: 0; line-height: 1.35; letter-spacing: .22em; }
.faq-block .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.faq-block article { padding: 28px 30px; background: var(--surface-soft); border: 0; border-radius: 16px; }
.faq-question { display: flex; align-items: baseline; gap: 14px; }
.faq-q { flex: 0 0 24px; color: var(--brand-deep); font-family: Georgia, serif; font-size: 22px; font-weight: 600; }
/* Q&A 問題依確認使用一般字重，保留原本桌機與手機字級。 */
.faq-block h3 { margin: 0; font-size: 19px; line-height: 1.6; font-weight: 400; }
.faq-block article p { margin: 13px 0 0 38px; font-size: 16px; line-height: 1.9; color: #52665e; }
/* 三項需求採品牌淡粉底，與上方白色療程卡片區分；保留圓角與淡陰影。 */
.treatment-groups { max-width: 1020px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.treatment-groups > div { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 25px; background: #FEF8FA; border: 0; border-radius: 10px; box-shadow: 0 4px 16px rgba(40, 79, 69, .07); }
.need-icon { display: block; position: relative; flex: 0 0 84px; width: 84px; height: 72px; overflow: hidden; mix-blend-mode: normal; }
.need-icon img { position: absolute; display: block; height: auto; max-width: none; }
.need-copy { min-width: 0; flex: 1 1 120px; }
.need-copy b { color: var(--brand-deep); font-size: 19px; line-height: 1.5; }
.need-copy p { font-size: 14px; line-height: 1.8; margin: 10px 0 0; }
.knowledge article { border-radius: 16px; }
.knowledge small { display: inline-block; padding: 3px 12px; border-radius: 999px; background: #FCE9F1; color: var(--brand-deep); }
/* 聯絡區以可選取的文字呈現資訊；地圖保留 Google 原始標示並連至實際位置。 */
.contact.contact-details { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 54px; align-items: start; }
.contact-copy { min-width: 0; }
.contact-logo { display: block; width: 160px; max-width: 100%; height: auto; margin: 0 0 24px; }
.contact-copy h2 { margin: 12px 0 14px; }
.contact-copy .contact-intro { margin: 0; font-size: 16px; }
.clinic-hours { margin-top: 24px; }
.contact-details h3 { margin: 0 0 14px; color: var(--brand-deep); font-size: 21px; font-weight: 600; letter-spacing: .06em; }
.hours-table { width: 100%; border-collapse: collapse; table-layout: fixed; color: var(--brand-deep); font-size: 14px; text-align: center; }
.hours-table th, .hours-table td { padding: 10px 0; line-height: 1.5; border-bottom: 1px solid #E4EDDF; }
.hours-table thead th { background: var(--surface-soft); font-weight: 500; }
.hours-table thead th:first-child { border-radius: 8px 0 0 0; }
.hours-table thead th:last-child { border-radius: 0 8px 0 0; }
.hours-table th:first-child { width: 110px; font-weight: 400; white-space: nowrap; }
.hours-table td > span { font-size: 13px; }
.hours-table .hours-closed { color: #9CAB9F; }
.hours-table .hours-special { font-size: 17px; font-weight: 600; }
.hours-notes { margin-top: 13px; }
.contact-details .hours-notes p { margin: 5px 0 0; color: #52665E; font-size: 13px; line-height: 1.8; }
.hours-notes strong { font-weight: 500; color: var(--brand-deep); }
.contact-details .hours-notes .hours-sunday { margin-top: 7px; }
.clinic-contact-links { margin-top: 20px; }
.clinic-contact-link { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--brand-deep); text-decoration: none; font-size: 16px; line-height: 1.6; }
.clinic-contact-link > span:nth-child(2) { min-width: 0; }
.contact-sr-only, .clinic-contact-link small { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.clinic-contact-link.clinic-phone { color: var(--brand-teal); font-size: 24px; font-weight: 500; letter-spacing: .03em; }
.contact-icon { flex: 0 0 25px; width: 25px; color: var(--brand-teal); text-align: center; }
.contact-icon svg { display: block; width: 22px; height: 22px; }
.contact-icon.contact-facebook { font: 700 29px/1 Arial, sans-serif; }
/* 參考版：右上三欄網站導覽，右下橫式地圖；地圖以完整的新截圖呈現。 */
.contact-side { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; gap: 38px; min-width: 0; }
.contact-site-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 12px; }
.contact-details .contact-site-nav h3 { margin: 0; color: #397C69; font-size: 18px; line-height: 1.6; letter-spacing: .04em; }
/* 清單左側細線只涵蓋項目區，標題維持獨立層級。 */
.contact-site-nav ul { margin: 18px 0 0; padding: 0 0 0 16px; border-left: 1px solid #CCD8CF; list-style: none; }
.contact-site-nav li + li { margin-top: 11px; }
.contact-site-nav a { display: inline-flex; align-items: center; min-height: 28px; color: #52665E; text-decoration: none; font-size: 15px; line-height: 1.7; }
/* 參考頁尾連結：底線由左向右展開，移出時向右收回，不推動文字。 */
.contact-nav-label { background-image: linear-gradient(var(--brand-teal), var(--brand-teal)); background-repeat: no-repeat; background-position: right bottom; background-size: 0 1px; transition: background-size .3s ease; }
.contact-site-nav a:focus-visible .contact-nav-label { background-size: 100% 1px; background-position: left bottom; }
@media (hover: hover) { .contact-site-nav a:hover .contact-nav-label { background-size: 100% 1px; background-position: left bottom; } }
@media (prefers-reduced-motion: reduce) { .contact-nav-label { transition: none; } }
.clinic-map { min-width: 0; margin: 0; }
.clinic-map-image { display: block; aspect-ratio: 2 / 1; border-radius: 16px; overflow: hidden; background: var(--surface-soft); }
.clinic-map picture, .clinic-map img { display: block; width: 100%; height: auto; }
.clinic-map figcaption { margin-top: 14px; text-align: right; font-size: 14px; }
.clinic-map figcaption a { color: var(--brand-deep); text-decoration: none; }
/* 移除深綠橫條，頁末保留使用者提供的完整版權與使用聲明。 */
.clinic-legal-footer { padding: 24px 8vw 30px; background: #FFFFFF; color: #52665E; text-align: center; font-size: 13px; line-height: 1.9; }
/* 分隔線依參考圖加長至畫面寬度 88%，左右各留 6%，不改動版權文字寬度。 */
.clinic-legal-footer::before { content: ""; display: block; position: relative; left: 50%; transform: translateX(-50%); width: 88vw; height: 1px; margin: 0 0 24px; background: #D7E6CE; }
.clinic-legal-footer p { max-width: 1120px; margin: 0 auto; }
.clinic-legal-footer .clinic-copyright { margin-bottom: 8px; font-size: 14px; }
.clinic-contact-link:focus-visible, .clinic-map a:focus-visible, .contact-site-nav a:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 4px; }
@media (hover: hover) { .clinic-contact-link:hover > span:nth-child(2) > span, .clinic-map figcaption a:hover { text-decoration: underline; text-underline-offset: 4px; } }
@media (min-width: 768px) and (max-width: 1100px) {
  .contact.contact-details { gap: 30px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .contact-site-nav { gap: 12px; }
  .contact-details .contact-site-nav h3 { font-size: 16px; }
  .contact-site-nav a { font-size: 14px; }
}
@media (max-width: 767px) {
  .contact.contact-details { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hours-table { font-size: 13px; }
  .hours-table th:first-child { width: 101px; }
  .clinic-contact-link { font-size: 15px; }
  .contact-side { gap: 30px; }
  .contact-side .clinic-map { order: -1; }
  .contact-site-nav { gap: 12px; padding-top: 0; }
  .contact-details .contact-site-nav h3 { font-size: 16px; }
  .contact-site-nav ul { padding-left: 10px; }
  .contact-site-nav a { min-height: 44px; padding: 4px 0; font-size: 14px; }
  .contact-site-nav li + li { margin-top: 0; }
  .clinic-map figcaption { text-align: left; font-size: 13px; }
  .contact-logo { width: 140px; }
  .clinic-legal-footer { padding: 16px 24px 28px; text-align: left; font-size: 12px; }
  .clinic-legal-footer .clinic-copyright { font-size: 13px; }
}
.rating div { color: var(--brand-deep); }
.steps .step { border-top: 3px solid var(--brand-light); }
.step b { color: var(--brand-deep); }
.cta, body:has(.intro) .footer { background: var(--brand-deep); }
.cta .btn { background: var(--brand-light); color: var(--brand-deep); border-color: var(--brand-light); }
.hero-copy { margin: 0; }
/* 診所資訊獨立直排在主標左側，避免接在主標下方。 */
body:has(.intro) .hero-copy { height: max-content; --hero-trailing-space: 6.48px; }
body:has(.intro) .hero-copy .hero-location {
  position: absolute; top: 0; right: calc(100% + 18px);
  writing-mode: vertical-rl; width: max-content; height: calc(100% - var(--hero-trailing-space)); margin: 0;
  padding: 0; border: 0; background: transparent; color: #fff;
  font-size: 18px; line-height: 1.6; letter-spacing: 0;
  /* 以主標實際字列高度均分字距，扣掉主標末字後的空隙，讓首末字對齊。 */
  text-align: justify; text-align-last: justify; text-justify: inter-character;
  font-weight: 600; white-space: nowrap;
  /* 小字以貼近字緣的深色陰影增加對比，外層柔影銜接照片背景。 */
  text-shadow: 0 1px 2px rgba(12, 37, 30, .95), 0 0 5px rgba(12, 37, 30, .9), 0 2px 9px rgba(12, 37, 30, .7);
}
.leaf { pointer-events: none; }
/* 固定在右下角的快捷功能；保留手機安全邊界，整個圓形皆可操作。 */
.floating-contact-actions { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 50; display: flex; flex-direction: column; gap: 10px; }
.floating-contact-action { display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: var(--brand-teal); color: #FFFFFF; box-shadow: 0 4px 14px rgba(40, 79, 69, .12); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .18s ease, box-shadow .18s ease; }
.floating-contact-action svg { display: block; width: 32px; height: 32px; pointer-events: none; }
.floating-contact-action:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 4px; }
@media (hover: hover) { .floating-contact-action:hover { background: var(--brand-deep); box-shadow: 0 6px 18px rgba(40, 79, 69, .18); } }
@media (prefers-reduced-motion: reduce) { .floating-contact-action { transition: none; } }
@media (max-width: 767px) {
  .floating-contact-actions { right: max(12px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); gap: 8px; }
  .floating-contact-action { width: 52px; height: 52px; }
  .floating-contact-action svg { width: 28px; height: 28px; }
  /* 最末文字可捲離按鈕範圍，讓版權聲明保持可閱讀。 */
  body:has(.floating-contact-actions) .clinic-legal-footer { padding-bottom: calc(204px + env(safe-area-inset-bottom)); }
}
/* 原始稿只有桌面固定欄數；依實際可用寬度換欄，維持原區塊順序。 */
@media (max-width: 1100px) {
  .nav { padding-inline: 4vw; }
  .navlinks, .nav > div { gap: 18px; font-size: 13px; letter-spacing: .04em; }
  .treat-flow, .treatment-groups { width: calc(100% - 64px); }
  .seo-copy { padding-inline: 6vw; }
  .section { padding-inline: 6vw; }
  .contact { gap: 35px; padding-inline: 6vw; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-copy { font-size: 30px; }
  body:has(.intro) .hero-copy { --hero-trailing-space: 5.4px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .treat-flow { grid-template-columns: .8fr 1.2fr; }
  .treat-list { padding: 0; gap: 10px; }
  /* 平板三欄保留放大後的字級，縮減側邊留白以避免標題孤字換行。 */
  .care-values { padding-inline: 4vw; }
  .care-values > div { padding-inline: 8px; }
}
@media (max-width: 767px) {
  .nav { height: auto; min-height: 88px; padding: 14px 20px; flex-wrap: wrap; gap: 14px; }
  .nav img { width: 112px; }
  .navlinks, .nav > div { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; line-height: 1.8; }
  .navlinks > span, .nav > div > span { padding-block: 8px; }
  .navlinks .book, .nav > div .btn { padding: 8px 15px; }
  .hero { height: 370px; }
  body:has(.intro) .hero { background-position: 12% center; }
  body:has(.intro) .hero-copy { left: auto !important; right: 5%; top: 9%; --hero-trailing-space: 2.5px; font-size: 25px; letter-spacing: .1em; line-height: 1.5; }
  body:has(.intro) .hero-copy .hero-location { right: calc(100% + 12px); font-size: 15px; }
  .hero-copy small { font-size: 12px; margin-left: 8px; }
  .intro { padding: 48px 27px; }
  .intro p { font-size: 16px; line-height: 2.1; letter-spacing: .03em; position: relative; z-index: 1; }
  .leaf { width: 80px; opacity: .3; }
  .care-values { padding: 12px 25px 35px; grid-template-columns: minmax(0, 1fr); }
  .care-values > div { padding: 20px 0; }
  .care-values > div + div { border-inline-start: 0; border-top: 1px solid var(--brand-light); }
  .care-value-icon { width: 56px; height: 56px; margin: 0 auto 18px; }
  .section-title { padding-top: 44px; }
  .section-title h2, .title h2 { letter-spacing: .14em; }
  .title h2 { font-size: 27px; }
  .title small { font-size: 12px; }
  /* 手機標題從 27px 放大至 36px，英文同步由 12px 放大至 16px。 */
  .section-title p, .knowledge .section-title p { font-size: 16px; }
  .treatments { padding-bottom: 44px; }
  .treat-flow { width: calc(100% - 40px); grid-template-columns: 1fr; margin-top: 28px; }
  .photo-block { min-height: 0; aspect-ratio: 5 / 4; }
  .treat-list { padding: 0; gap: 10px; }
  .treat, .treat:nth-child(odd) { padding: 20px 10px 18px; border-radius: 22px; }
  .treat .treat-heading { padding-inline: 10px; }
  .treat .treat-arrow { right: -3px; font-size: 23px; }
  .treatment-groups { width: calc(100% - 40px); margin-top: 20px !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  .treatment-groups > div { padding: 22px; }
  .treatment-groups p { margin-bottom: 0; }
  .seo-copy { padding: 45px 24px; }
  .seo-copy h2 { font-size: 24px; line-height: 1.65; letter-spacing: .06em; }
  .seo-copy > p { text-align: left; line-height: 1.9; }
  .faq { grid-template-columns: 1fr; margin-top: 26px; gap: 12px; }
  .faq p { font-size: 15px; }
  .faq-block .section-title h2 { letter-spacing: .14em; }
  .faq-block .faq { grid-template-columns: 1fr; gap: 14px; }
  .faq-block article { padding: 23px 21px; }
  .faq-question { gap: 10px; }
  .faq-block h3 { font-size: 18px; }
  .faq-block article p { margin-left: 0; }
  .reviews { padding: 0 24px 45px; }
  .review-wrap { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
  .rating { border-right: 0; border-bottom: 1px solid var(--brand-light); padding: 0 0 20px; }
  .quotes { grid-template-columns: 1fr; gap: 12px; }
  .quote { min-height: 105px; padding: 14px 20px; }
  .knowledge { padding: 0 24px 44px; }
  .knowledge-grid { grid-template-columns: 1fr; margin-top: 28px; gap: 14px; }
  .knowledge article { padding: 24px; min-height: 0; }
  .knowledge p { font-size: 15px; }
  .contact { padding: 44px 24px; grid-template-columns: 1fr; gap: 26px; }
  .contact h2 { font-size: 27px; }
  .contact p, .info { font-size: 15px; }
  .map { height: 220px; }
  .footer { min-height: 110px; height: auto; padding: 26px 24px; gap: 20px; flex-wrap: wrap; }
  .footer img { width: 112px; }
  .footer span, .footer small { font-size: 12px; line-height: 1.8; }
  .note { font-size: 11px; line-height: 1.8; padding-inline: 24px; }
  /* 植牙頁圖文成單欄；比較表保留完整內容，在表格內左右捲動。 */
  body:not(:has(.intro)) .hero { height: 430px; background-position: 62% center; }
  body:not(:has(.intro)) .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #F3F8EFF5, #F3F8EFC9 55%, #F3F8EF33); }
  body:not(:has(.intro)) .hero-copy { left: 24px; right: 24px; top: 14%; }
  .hero-copy h1 { font-size: 32px; letter-spacing: .03em; line-height: 1.5; }
  .hero-copy p { font-size: 16px; max-width: 290px; }
  .section { padding: 44px 24px; }
  .title { margin-bottom: 26px; }
  .lead { text-align: left; font-size: 16px; line-height: 1.9; }
  .grid3, .split, .visual-pair, .visual-pair.reverse, .anatomy { grid-template-columns: 1fr; gap: 18px; margin-top: 26px; }
  .card, .panel { padding: 24px; }
  /* 依首頁已確認的手機卡片規格保留 22px 圓角。 */
  .treatment-info-cards > .card { border-radius: 22px; }
  .card p, .panel p, .panel li, .parts span, .visual-copy p { font-size: 15px; }
  .visual-pair img, .anatomy img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  .visual-copy { padding: 8px 0; }
  .visual-copy h3 { font-size: 22px; }
  .steps { grid-template-columns: 1fr; gap: 12px; margin-top: 26px; }
  .step { min-height: 0; padding: 20px 24px; }
  .step h3 { font-size: 18px; }
  .step p { font-size: 15px; margin-bottom: 0; }
  .compare-scroll { overflow-x: auto; margin-block: 26px; }
  .compare { min-width: 600px; margin: 0; }
  .compare td { font-size: 14px; }
  .compare-scroll:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 4px; }
  .cta { padding: 44px 24px; }
  .cta h2 { font-size: 27px; line-height: 1.6; }
  .cta .btn { display: block; margin: 12px 0 0; padding: 12px; }
}

/* 真實評論串接前的互動版型：示意標記常駐，避免把預覽資料誤認為患者評論。 */
.review-preview-notice { width: fit-content; margin: 18px auto 0; padding: 6px 13px; border-radius: 99px; background: #F3F6F1; color: #66736B; font-size: 12px; line-height: 1.5; text-align: center; }
.google-reviews-layout { max-width: 1120px; margin: 34px auto 0; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 34px; align-items: center; }
.google-review-summary { text-align: center; padding: 18px 0; }
/* 依確認版以文字評語、完整五星及評論總數呈現，不另顯示數字評分。 */
.summary-label { margin: 0 0 11px; color: #161616; font: 700 24px/1.25 Arial, sans-serif; }
.review-summary-stars { width: max-content; margin: 0 auto; font: 36px/1.1 Arial, sans-serif; letter-spacing: 0; color: #FBBC04; white-space: nowrap; }
.review-total { margin: 6px 0 12px; font: 15px/1.5 Arial, sans-serif; color: #161616; }
.review-google-logo { display: block; width: 130px; height: auto; margin: 0 auto; }
.google-review-carousel { min-width: 0; }
.review-carousel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 4px 16px; color: var(--brand-deep); font-size: 14px; }
.review-navigation { display: flex; gap: 8px; }
.review-navigation button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #DCE6D6; border-radius: 50%; background: white; color: var(--brand-deep); font: 26px/1 Arial, sans-serif; cursor: pointer; }
.review-navigation button:disabled { color: #B8C1B7; border-color: #E9EEE5; cursor: default; }
.google-review-track { display: flex; gap: 16px; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #C7D9BC transparent; padding-bottom: 10px; }
.google-review-card { flex: 0 0 calc((100% - 32px) / 3); min-width: 0; scroll-snap-align: start; background: #F5F7F3; border: 0; border-radius: 16px; padding: 20px 18px; }
.review-person { display: flex; align-items: center; gap: 9px; }
.review-person > div { min-width: 0; }
.review-avatar { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; color: var(--brand-deep); background: #DCEAD4; font-size: 14px; font-weight: 600; }
.avatar-1 { background: #F7DDE8; }.avatar-2 { background: #D5E9E2; }.avatar-3 { background: #E8E5D9; }
.review-person h3 { margin: 0; color: var(--brand-deep); font-size: 13px; font-weight: 600; line-height: 1.5; }
.review-date { margin: 3px 0 0; color: #68756F; font-size: 11px; line-height: 1.4; }
.review-demo-tag { margin-left: auto; color: #68756F; font-size: 10px; white-space: nowrap; }
.review-five-stars { color: #B87A00; font-size: 19px; line-height: 1; letter-spacing: 2px; margin: 18px 0 12px; }
.review-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin: 0; color: var(--ink); font-size: 14px; line-height: 1.85; }
.google-review-card.is-expanded .review-body { display: block; }
.review-expand { display: block; margin: 12px 0 0; padding: 4px 0; border: 0; background: transparent; color: var(--brand-deep); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.review-selection-note { margin: 10px 4px 0; font-size: 12px; color: #68756F; line-height: 1.7; }
.review-navigation button:focus-visible, .review-expand:focus-visible, .google-review-track:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; }
@media (hover: hover) { .review-navigation button:not(:disabled):hover { background: var(--surface-soft); border-color: var(--brand-deep); } }
@media (min-width: 768px) and (max-width: 1100px) {
  .google-reviews-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 24px; }
  .google-review-card { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 767px) {
  .google-reviews-layout { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .google-review-summary { max-width: 260px; width: 100%; margin: auto; padding: 0; }
  .google-review-card { flex-basis: 88%; padding: 22px 20px; }
  .review-person h3 { font-size: 14px; }
  .review-date { font-size: 12px; }
  .review-body { font-size: 15px; }
}