/* 五個療程頁共用字級：依首頁對應元件設定，不改動原有配色、照片與卡片外觀。 */
.treatment-page {
  --treatment-heading-size: 36px;
  --treatment-english-size: calc(16px * 36 / 34);
  --treatment-body-size: 20px; /* 依確認調整主要內文，保留 1.8 倍行距。 */
  --treatment-body-line-height: 1.8;
  --treatment-heading-tracking: .22em;
}

/* 全篇說明內文共用行距，涵蓋 Banner、卡片、流程、條列、FAQ、表格與頁尾。
   主標與中英文段落標題保留各自的標題行高。 */
.treatment-page :is(p, li, td, th, figcaption),
.treatment-page .parts span,
.treatment-page .footer small { line-height: var(--treatment-body-line-height); }

/* Banner 獨立於 36px 段落標題：桌機由 1440px 寬的 48px 平順放大至 1920px 寬的 56px。
   clamp 限定上下限，超寬螢幕不再放大；下方斷點保留平板與手機字級。 */
.treatment-page .hero-copy h1 { font-size: clamp(48px, calc(24px + 1.6666667vw), 56px); line-height: 1.6; }
.treatment-page .hero-copy > small { font-size: 18px; line-height: 1.6; }
.treatment-page .hero-copy p { font-size: var(--treatment-body-size); }

.treatment-page .title h2 {
  font-size: var(--treatment-heading-size);
  line-height: 1.35;
  letter-spacing: var(--treatment-heading-tracking);
  text-wrap: balance;
}
.treatment-page .title small { font-size: var(--treatment-english-size); line-height: 1.4; letter-spacing: .18em; }

/* 主要說明對齊首頁診所介紹；圖文段落小標對齊三項理念標題。 */
.treatment-page .lead,
.treatment-page .copy p,
.treatment-page .visual-copy p,
.treatment-page .points li { font-size: var(--treatment-body-size); }
.treatment-page .copy h3,
.treatment-page .visual-copy h3 { font-size: 23.75px; line-height: 1.6; text-wrap: pretty; }
/* 完整說明與條列使用實際閱讀欄寬自然換行；標題與具名短卡另有自己的規格。 */
.treatment-page .section :is(.copy p, .visual-copy p, .points li, .lead) { text-wrap: wrap; }

/* 植牙三個組成部件採較大的標題與主要內文字級，提升結構說明的可讀性。 */
.treatment-page .parts b { font-size: 23.75px; line-height: 1.5; }
.treatment-page .parts span { font-size: var(--treatment-body-size); }

/* 資訊卡沿用首頁需求卡層次；流程小字由 12px 提高到 14px。 */
.treatment-page .card h3 { font-size: 19px; line-height: 1.5; }
.treatment-page .card p,
.treatment-page .step p,
.treatment-page .life-gallery figcaption { font-size: 14px; }
.treatment-page .step h3 { font-size: 19px; line-height: 1.5; text-wrap: balance; }

/* FAQ 與補充資訊使用首頁問答字級；表格保留足夠可讀大小。 */
.treatment-page .faq h3,
.treatment-page .panel h3,
.treatment-page .notice h3 { font-size: 19px; line-height: 1.6; }
.treatment-page .faq p,
.treatment-page .panel p,
.treatment-page .panel li,
.treatment-page .notice p { font-size: 16px; }
.treatment-page .compare th,
.treatment-page .compare td { font-size: 16px; }
.treatment-page .compare-scroll { max-width: 100%; overflow-x: auto; }

/* 頁尾邀請區對齊首頁聯絡區；不影響共用 Header 字級。 */
/* 五頁預約標題共用同一字級。地區與療程名稱各自保持完整，可在兩者間斷行。 */
.treatment-page .cta .geo-booking-title {
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
  font-size: var(--treatment-heading-size);
  font-weight: 500;
  line-height: 1.6;
}
.treatment-page .geo-booking-title :is(.booking-location, .booking-topic) {
  display: inline-block;
  white-space: nowrap;
}
@media (max-width: 359px) {
  /* 320px 手機的正文欄寬為 208px，六字療程名稱可完整放在同一行。 */
  .treatment-page .cta .geo-booking-title { font-size: 32px; }
}
.treatment-page .cta p { font-size: 16px; }
.treatment-page .cta .btn { font-size: 15px; line-height: 1.5; }
.treatment-page .footer small { font-size: 13px; }

@media (min-width: 768px) and (max-width: 1100px) {
  .treatment-page .hero-copy h1 { font-size: 30px; }
}
@media (max-width: 767px) {
  .treatment-page { --treatment-english-size: 16px; --treatment-heading-tracking: .14em; }
  /* 手機把區塊標題與主文放回同一閱讀層級；頁末預約標語另依原版型處理。 */
  .treatment-page .section .title h2 { font-size: 32px; }
  .treatment-page .section :is(.lead, .copy p, .visual-copy p, .points li) { font-size: 18px; }
  .treatment-page .hero-copy h1 { font-size: 25px; line-height: 1.5; }
  .treatment-page .hero-copy > small { font-size: 15px; }
  .treatment-page .faq h3,
  .treatment-page .step h3 { font-size: 18px; }
  /* 比較表在表格內橫向捲動，避免縮小字體或撐開整個頁面。 */
  .treatment-page .compare { min-width: 640px; }
  .treatment-page .cta .btn { font-size: 14px; }
  .treatment-page .footer small { font-size: 12px; }
}

/* 人工植牙與 All-on-4 預約區依確認改用一般標題／內文字級；不擴及其他療程或頁尾。 */
.treatment-page :is(#implant-booking, #allon4-booking) p { font-size: var(--treatment-body-size); line-height: var(--treatment-body-line-height); }