/* 人工植牙手機整頁確認稿。
   只由 implant.html 啟用；桌機及其他療程沿用原版。五類元件在此共用閱讀規格。 */
.implant-compare-label { display: none; }

@media (max-width: 767px) {
  body.implant-mobile-layout {
    --implant-gutter: 24px;
    --implant-section-space: 40px;
    --implant-title-size: 28px;
    --implant-body-size: 18px;
  }

  /* 手機恢復原 Header LINE；右側只留回頂端與電話。桌機沿用三個快捷鈕。 */
  body.implant-mobile-layout .treatment-floating-action--line { display: none; }

  /* 舊共用閱讀層以 !important 設定 56px；只在這個具名入口改成正常版心。
     其他元件不再各自加負 margin，也不把同份安全距離疊到內層。 */
  body.treatment-page.implant-mobile-layout #main-content > :is(.section, .cta, .ux-section) {
    padding-block: var(--implant-section-space);
    padding-inline: var(--implant-gutter) !important;
  }
  body.implant-mobile-layout #main-content #implant-journey .journey {
    padding: var(--implant-section-space) var(--implant-gutter);
  }
  body.implant-mobile-layout #main-content :is(#implant-evaluation-cards, .implant-care-details, .implant-faq-list, #implant-structure > .image-notice-wrap) {
    margin-inline: 0;
  }
  body.treatment-page.implant-mobile-layout #implant-hero .hero-copy p {
    padding-inline: var(--implant-gutter);
    font-size: var(--implant-body-size);
    line-height: 1.8;
  }

  /* H1 與已確認字型保留；章節標題另有一致的手機層級。 */
  body.implant-mobile-layout #main-content :is(.title h2, .implant-needs-heading, .journey-title h2) {
    margin: 0;
    font-size: var(--implant-title-size);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: .06em;
    text-wrap: balance;
  }
  body.implant-mobile-layout #main-content :is(.title, .journey-title) { margin-bottom: 28px; }
  body.implant-mobile-layout #main-content :is(.title small, .journey-title .english) {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: .12em;
    color: #596e65;
  }
  body.implant-mobile-layout .implant-title-phrase {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    vertical-align: top;
  }
  body.implant-mobile-layout #main-content :is(.lead, .visual-copy p, .part-card p, .implant-care-risk p, .implant-faq-intro) {
    font-size: var(--implant-body-size);
    line-height: 1.8;
    text-align: left;
    text-wrap: pretty;
  }

  /* 1. 圖文：照片、圖說、小標與完整正文使用同一左緣。 */
  body.implant-mobile-layout #main-content .visual-pair {
    grid-template-columns: minmax(0, 1fr);
    margin: 0 auto;
    gap: 24px;
  }
  body.implant-mobile-layout #main-content .visual-pair > .image-notice-figure {
    order: 0;
    width: 100%;
    min-width: 0;
    margin: 0;
  }
  body.implant-mobile-layout #main-content .visual-pair > .visual-copy { order: 1; padding: 0; }
  body.implant-mobile-layout #main-content .visual-pair .image-notice-figure > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  body.implant-mobile-layout #main-content .image-notice {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
  }
  body.implant-mobile-layout #main-content .visual-copy h3 {
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: .02em;
    text-wrap: pretty;
  }
  body.implant-mobile-layout #main-content .visual-copy p { margin: 0; }
  body.implant-mobile-layout #main-content .visual-copy p + p { margin-top: 16px; }

  /* 2. 資訊卡：結構、評估、照護各有用途；正文不再受二次限寬。 */
  body.implant-mobile-layout #main-content .anatomy { margin-top: 28px; gap: 20px; }
  body.implant-mobile-layout #main-content .parts { gap: 14px; }
  body.implant-mobile-layout #main-content .parts .part-card { padding: 20px; }
  body.implant-mobile-layout #main-content .part-card h3 {
    margin-bottom: 8px;
    font-size: 22px;
    line-height: 1.5;
    text-wrap: pretty;
  }
  body.implant-mobile-layout #main-content .implant-needs { margin-top: 40px; }
  body.implant-mobile-layout #main-content .implant-needs-heading { margin-bottom: 24px; }
  body.implant-mobile-layout #main-content .implant-need { padding: 20px 0; }
  body.implant-mobile-layout #main-content .implant-need-icon { margin-bottom: 12px; }
  body.implant-mobile-layout #main-content .implant-need h3 { margin-bottom: 10px; font-size: 20px; line-height: 1.5; }
  body.implant-mobile-layout #main-content .implant-need p { font-size: 18px; line-height: 1.8; text-align: left; text-wrap: pretty; }
  body.implant-mobile-layout #main-content #implant-evaluation-cards {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 28px;
    gap: 16px;
  }
  body.implant-mobile-layout #main-content #implant-evaluation-cards .card {
    padding: 20px;
    box-shadow: 0 4px 14px rgba(40, 79, 69, .06);
  }
  body.implant-mobile-layout #main-content #implant-evaluation-cards :is(h3, p) {
    inline-size: auto;
    max-width: none;
    margin-inline: 0;
    text-align: left;
    text-wrap: pretty;
  }
  body.implant-mobile-layout #main-content #implant-evaluation-cards h3 { margin-block: 0 10px; font-size: 20px; line-height: 1.5; }
  body.implant-mobile-layout #main-content #implant-evaluation-cards p { margin-block: 0; font-size: 18px; line-height: 1.8; }
  body.implant-mobile-layout #main-content #implant-care .implant-care-details { margin-top: 28px; }
  /* 四張短卡的跨裝置排版統一由 implant-care-cards.css 管理。 */
  body.implant-mobile-layout #main-content #implant-care .implant-care-risk { margin-top: 24px; padding: 20px; }
  body.implant-mobile-layout #main-content #implant-care .implant-care-risk-heading { margin-bottom: 16px; gap: 12px; }
  body.implant-mobile-layout #main-content #implant-care .implant-care-risk h3 { font-size: 22px; line-height: 1.5; text-wrap: pretty; }
  body.implant-mobile-layout #main-content #implant-care .implant-care-risk p + p { margin-top: 16px; }

  /* 3. 比較表：同一份表格資料在手機逐項排列，表頭保留給輔助科技。
     role/header 關聯在 HTML 明示，避免 display 改變後失去表格語意。 */
  body.implant-mobile-layout #main-content #implant-options .compare-scroll {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
  }
  body.implant-mobile-layout #main-content #implant-options .compare {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    background: transparent;
  }
  body.implant-mobile-layout #main-content #implant-options thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  body.implant-mobile-layout #main-content #implant-options tbody { display: grid; gap: 16px; }
  body.implant-mobile-layout #main-content #implant-options tbody tr {
    display: block;
    overflow: hidden;
    border: 1px solid #afc5b7;
    border-radius: 16px;
    background: #fff;
  }
  body.implant-mobile-layout #main-content #implant-options tbody td {
    display: block;
    width: 100%;
    padding: 16px 20px;
    border: 0;
    border-bottom: 1px solid #cadacf;
    font-size: 18px;
    line-height: 1.8;
    text-align: left;
    white-space: normal;
  }
  body.implant-mobile-layout #main-content #implant-options tbody td:first-child { padding-block: 16px; font-size: 20px; line-height: 1.5; background: #eef4ea; }
  body.implant-mobile-layout #main-content #implant-options tbody td:last-child { border-bottom: 0; }
  body.implant-mobile-layout #main-content #implant-options .implant-compare-label {
    display: block;
    margin-bottom: 6px;
    color: #52665e;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
  }
  body.implant-mobile-layout #main-content #implant-options .ux-table-hint { margin: 0 0 20px; font-size: 15px; line-height: 1.8; }
  body.implant-mobile-layout #main-content #implant-options > .lead { margin-top: 24px; text-align: center; text-wrap: balance; }

  /* 4. 流程：五張原插圖與裁切座標不變；減少步驟間空隙、放寬短說明。 */
  body.implant-mobile-layout #main-content #implant-journey .lead { margin-bottom: 28px; }
  body.implant-mobile-layout #main-content #implant-journey .journey-list { gap: 36px; }
  body.implant-mobile-layout #main-content #implant-journey .journey-step { text-align: center; }
  body.implant-mobile-layout #main-content #implant-journey .journey-art { margin-bottom: 12px; }
  body.implant-mobile-layout #main-content #implant-journey h3 { margin-bottom: 8px; font-size: 20px; line-height: 1.5; }
  body.implant-mobile-layout #main-content #implant-journey .journey-step p { width: 100%; max-width: none; font-size: 17px; line-height: 1.8; text-align: left; text-wrap: pretty; }
  body.implant-mobile-layout #main-content #implant-journey .journey-step:not(:last-child)::after { bottom: -29px; }

  /* 5. FAQ：問題維持 Q／問題／加減號；答案的 A 只占首行，不再扣整欄。 */
  body.implant-mobile-layout #main-content #implant-faq .implant-faq-intro { margin-bottom: 24px; }
  body.implant-mobile-layout #main-content #implant-faq summary { grid-template-columns: minmax(20px, max-content) minmax(0, 1fr) 24px; gap: 10px; padding: 18px 20px; align-items: start; }
  body.implant-mobile-layout #main-content #implant-faq summary h3 { font-size: 20px; line-height: 1.5; text-wrap: pretty; }
  body.implant-mobile-layout #main-content #implant-faq .implant-faq-phrase { max-width: 100%; white-space: normal; }
  body.implant-mobile-layout #main-content #implant-faq .implant-faq-q { font-size: 20px; line-height: 1.5; }
  body.implant-mobile-layout #main-content #implant-faq .implant-faq-toggle { margin-top: 0; }
  body.implant-mobile-layout #main-content #implant-faq .implant-faq-answer { display: block; padding: 20px; font-size: 18px; line-height: 1.8; }
  body.implant-mobile-layout #main-content #implant-faq .implant-faq-a { display: inline; margin-right: 8px; font-size: 18px; line-height: 1.8; }
  body.implant-mobile-layout #main-content #implant-faq .implant-faq-answer p { font-size: 18px; line-height: 1.8; text-align: left; text-wrap: pretty; }
  body.implant-mobile-layout #main-content #implant-faq .implant-faq-a + p { display: inline; }

  /* 頁末邀請沿用原按鈕與地區資訊；長說明靠左、主標置中。頁尾不加高。 */
  body.implant-mobile-layout #main-content #implant-booking .geo-booking-title { margin: 0 0 24px; font-size: 28px; line-height: 1.5; letter-spacing: .02em; }
  body.implant-mobile-layout #main-content #implant-booking :is(.booking-location, .booking-topic) { display: block; white-space: normal; }
  /* 兩個 block 已自然換行；原桌機 wbr 在手機會多產生一個匿名行盒。 */
  body.implant-mobile-layout #main-content #implant-booking wbr { display: none; }
  body.implant-mobile-layout #main-content #implant-booking > p { margin: 0; font-size: 18px; line-height: 1.8; text-align: left; text-wrap: pretty; }
  body.implant-mobile-layout #main-content #implant-booking .ux-actions { margin-top: 24px; gap: 12px; }
  body.implant-mobile-layout #main-content #implant-booking .ux-button { min-height: 48px; padding: 10px 18px; font-size: 16px; }
}

@media (max-width: 359px) {
  body.implant-mobile-layout { --implant-gutter: 20px; }
  body.implant-mobile-layout #main-content #implant-faq summary { padding-inline: 16px; }
  body.implant-mobile-layout #main-content #implant-faq .implant-faq-answer { padding-inline: 16px; }
}