/* =========================================================
   菁英診所｜落地頁共用樣式  lp-standard.css  v1.4
   ---------------------------------------------------------
   使用方式：整頁內容包在一個外框裡，並指定主題
     <div class="lp lp-theme-nutrition"> ... </div>

   主題（A 套・低彩度）
     lp-theme-nutrition  功能營養醫學｜沉穩藏青
     lp-theme-prolo      增生療法　　｜森林墨綠
     lp-theme-beauty     美容醫學　　｜深莓紅
     lp-theme-intimate   私密除毛　　｜深梅紫

   原則
     1. 所有 class 以 lp- 開頭，全部限定在 .lp 之內，不影響佈景其他樣式
     2. 手機優先；斷點 640px（平板／小桌機）、960px（桌機）
     3. LINE 按鈕沿用佈景的 .btn-line + .pc／.app + .track-taipei 等 class，
        桌機／手機切換與 GA4／Meta 追蹤由佈景 index.php 處理
     4. 頁面內不要再寫 <style>，也不要再放 GTM／GA4／Pixel 追蹤碼
     5. LINE 按鈕全頁只放一處：底部固定按鈕 .lp-sticky（手機、桌機都顯示）
========================================================= */


/* ---------- 1. 設計變數 ---------- */
.lp{
  /* 主題色（預設：功能營養醫學） */
  --lp-primary:#1F3864;
  --lp-primary-dark:#142647;
  --lp-soft:#E8ECF3;

  /* 品牌共用 */
  --lp-gold:#9C7A3C;
  --lp-gold-light:#C9A876;
  --lp-gold-soft:#F6EFE3;
  --lp-line-green:#06C755;

  /* 中性色 */
  --lp-bg:#F7F5F1;
  --lp-card:#FFFFFF;
  --lp-text:#2B2B2B;
  --lp-body:#4A4A4A;
  --lp-muted:#6B6B6B;
  --lp-faint:#9A9A9A;
  --lp-line:#E7E2D8;
  --lp-red:#D0503C;

  /* 深色底上的文字 */
  --lp-on-dark:#FFFFFF;
  --lp-on-dark-2:rgba(255,255,255,.82);
  --lp-on-dark-3:rgba(255,255,255,.62);
  --lp-on-dark-line:rgba(255,255,255,.14);

  /* 字體 */
  --lp-serif:"Noto Serif TC","Songti TC",serif;
  --lp-sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;

  /* 形狀與陰影 */
  --lp-radius:14px;
  --lp-radius-sm:10px;
  --lp-shadow:0 2px 14px rgba(30,30,40,.06);
  --lp-shadow-lg:0 10px 30px rgba(30,30,40,.12);

  /* 間距 */
  --lp-gutter:20px;
  --lp-section:44px;
}

/* ---------- 2. 四套主題 ---------- */
.lp-theme-nutrition{--lp-primary:#1F3864;--lp-primary-dark:#142647;--lp-soft:#E8ECF3;}
.lp-theme-prolo    {--lp-primary:#2F5245;--lp-primary-dark:#1F3A30;--lp-soft:#E6EEEA;}
.lp-theme-beauty   {--lp-primary:#7A3E52;--lp-primary-dark:#57293A;--lp-soft:#F5E8EC;}
.lp-theme-intimate {--lp-primary:#54467C;--lp-primary-dark:#3A305A;--lp-soft:#EEEAF5;}


/* ---------- 3. 基礎 ---------- */
.lp{
  font-family:var(--lp-sans);
  font-size:16px;
  line-height:1.75;
  color:var(--lp-text);
  background:var(--lp-bg);
  padding-bottom:0px;               /* 預留底部固定按鈕空間 */
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
.lp *,.lp *::before,.lp *::after{box-sizing:border-box;}
.lp h1,.lp h2,.lp h3,.lp h4,.lp p,.lp ul,.lp ol,.lp figure,.lp blockquote{margin:0;padding:0;}
.lp ul,.lp ol{list-style:none;}
.lp img{display:block;max-width:100%;height:auto;}
.lp a{color:inherit;}
.lp strong{font-weight:700;color:var(--lp-primary);}

.lp-container{max-width:680px;margin:0 auto;padding:0 var(--lp-gutter);}
.lp-container--wide{max-width:960px;}

/* 同一區塊內連續放兩個元件時，自動留出間距（不需要行內樣式） */
.lp :is(.lp-cards,.lp-stats,.lp-rows,.lp-steps,.lp-qa,.lp-cases,.lp-compare,.lp-checklist,.lp-timeline,.lp-doctor,.lp-doctors,.lp-quote,.lp-result,.lp-gallery,.lp-figure,.lp-text,.lp-card)
  + :is(.lp-cards,.lp-stats,.lp-rows,.lp-steps,.lp-qa,.lp-cases,.lp-compare,.lp-checklist,.lp-timeline,.lp-doctor,.lp-doctors,.lp-quote,.lp-gallery,.lp-placeholder){margin-top:20px;}


/* ---------- 4. 文字 ---------- */
.lp-kicker{                           /* 標題上方的小字 */
  display:block;
  font-size:12.5px;
  letter-spacing:3px;
  color:var(--lp-gold);
  margin-bottom:6px;
}
.lp-title{                            /* 區塊大標 h2 */
  font-family:var(--lp-serif);
  font-size:23px;
  font-weight:700;
  line-height:1.5;
  color:var(--lp-primary);
  margin-bottom:18px;
}
.lp-title::after{                     /* 標題下方金色短線 */
  content:"";
  display:block;
  width:36px;height:2px;
  background:var(--lp-gold);
  margin-top:12px;
}
.lp-title--center{text-align:center;}
.lp-title--center::after{margin-left:auto;margin-right:auto;}
.lp-title--plain::after{display:none;}

.lp-subtitle{                         /* 小標 h3 */
  font-size:18px;
  font-weight:700;
  line-height:1.55;
  color:var(--lp-primary);
  margin-bottom:6px;
}
.lp-lead{font-size:16px;color:var(--lp-muted);margin-bottom:20px !important;}
.lp-text{font-size:15.5px;color:var(--lp-body);}
.lp-text + .lp-text{margin-top:12px;}
.lp-em{color:var(--lp-gold);font-weight:700;}
.lp-note{                             /* 免責、資料來源小字 */
  font-size:12px;
  line-height:1.7;
  color:var(--lp-faint);
  margin-top:14px !important;
}
.lp-center{text-align:center;}


/* ---------- 5. 頂部品牌列 ---------- */
.lp-topbar{
  background:var(--lp-primary-dark);
  color:var(--lp-gold-light);
  text-align:center;
  font-size:12.5px;
  letter-spacing:1px;
  padding:8px 12px;
}


/* ---------- 6. 主視覺 Hero（兩種版型） ----------
   A. 一般版  lp-hero
      主題色漸層底，圖片放在標題下方（lp-hero__media）

   B. 滿版    lp-hero lp-hero--full
      一個螢幕高（扣掉底部 LINE 按鈕），手機、桌機各用一張底圖：
      <div class="lp-hero lp-hero--full">
        <picture>
          <source media="(orientation: landscape)" srcset="桌機橫圖.jpg">
          <img class="lp-hero__bg" src="手機直圖.jpg" alt="…">
        </picture>
        <div class="lp-container"> …標題… </div>
        <span class="lp-hero__scroll" aria-hidden="true">SCROLL</span>
      </div>
      螢幕是直的（手機）顯示直圖，螢幕是橫的（桌機、平板橫放）顯示橫圖
      手機直圖 1080×1920（9:16）／桌機橫圖 1920×1080（16:9） */
.lp{--lp-sticky-h:96px;}
.lp-hero{
  background:linear-gradient(165deg,var(--lp-primary) 0%,var(--lp-primary-dark) 100%);
  color:var(--lp-on-dark);
  text-align:center;
  padding:44px 0 40px;
}
.lp-hero--full{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:calc(100vh - var(--lp-sticky-h));
  min-height:calc(100svh - var(--lp-sticky-h));
  padding:56px 0 84px;
  background:var(--lp-primary-dark);
}
.lp-hero--full > .lp-container{position:relative;z-index:2;width:100%;margin:20% auto -20%;}
.lp-hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit: ;
  object-position:;
}
.lp-hero--full::after{                /* 主題色遮罩，確保白字清楚 */
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.50) 0%,rgba(0,0,0,.60) 50%,rgba(0,0,0,.70) 100%);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--lp-primary-dark) 40%,transparent) 0%,
    color-mix(in srgb,var(--lp-primary-dark) 55%,transparent) 60%,
    color-mix(in srgb,var(--lp-primary-dark) 88%,transparent) 100%);
}
.lp-hero__scroll{
  position:absolute;
  left:50%;
  bottom:18px;
  z-index:2;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:11px;
  letter-spacing:3px;
  color:var(--lp-gold-light);
}
.lp-hero__scroll::after{
  content:"";
  width:1px;height:30px;
  background:linear-gradient(180deg,var(--lp-gold-light),rgba(201,168,118,0));
  transform-origin:top;
  animation:lp-scroll 1.8s ease-in-out infinite;
}
@keyframes lp-scroll{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.lp-hero__eyebrow{
  display:inline-block;
  font-size:12.5px;
  letter-spacing:2px;
  color:var(--lp-gold-light);
  border:1px solid rgba(201,168,118,.55);
  border-radius:999px;
  padding:3px 14px;
  margin-bottom:16px;
}
.lp-hero__title{
  font-family:var(--lp-serif);
  font-size:28px;
  font-weight:700;
  line-height:1.42;
  letter-spacing:.5px;
  margin-bottom:12px;
}
.lp-hero--full .lp-hero__title{font-size:34px;margin-bottom:14px;text-shadow:0 2px 18px rgba(0,0,0,.28);}
.lp-hero__sub{font-size:18.5px;color:var(--lp-gold-light);line-height:1.6;margin-bottom:10px; letter-spacing:0.04em;}
.lp-hero__desc{font-size:15px;color:var(--lp-on-dark-2);margin:0 auto 22px;max-width:520px;text-align:left;}
.lp-hero__media{margin:0 auto 24px;max-width:520px;border-radius:var(--lp-radius);overflow:hidden;}
.lp-hero__doctor{font-size:14px;color:var(--lp-on-dark-2);margin-bottom:20px;}
.lp-hero__doctor b{display:block;font-family:var(--lp-serif);font-size:19px;color:var(--lp-on-dark);}

/* 信任數字（年資、人次） */
.lp-cred{
  max-width:340px;
  margin:4px auto 24px;
  border:1px solid rgba(201,168,118,.5);
  border-radius:var(--lp-radius);
  background:rgba(10,10,20,.22);
  padding:12px 14px 14px;
}
.lp-cred__label{font-size:13px;letter-spacing:1.5px;color:var(--lp-gold-light);margin-bottom:6px;}
.lp-cred__nums{display:flex;align-items:center;justify-content:center;gap:16px;}
.lp-cred__nums > div{display:flex;align-items:baseline;gap:4px;}
.lp-cred__nums b{font-family:var(--lp-serif);font-size:32px;line-height:1.1;color:var(--lp-gold-light);}
.lp-cred__nums span{font-size:13px;color:var(--lp-on-dark-2);}
.lp-cred__nums i{width:1px;height:30px;background:rgba(201,168,118,.5);}


/* ---------- 7. 區塊 ---------- */
.lp-section{padding:var(--lp-section) 0 0;}
.lp-section:last-of-type{padding-bottom:var(--lp-section);}
.lp-section--soft{background:var(--lp-soft);padding-bottom:var(--lp-section);margin-top:var(--lp-section);}
.lp-section--dark{
  background:var(--lp-primary-dark);
  color:var(--lp-on-dark);
  padding-bottom:var(--lp-section);
  margin-top:var(--lp-section);
}
.lp-section--dark .lp-title,
.lp-section--dark .lp-subtitle{color:var(--lp-on-dark);}
.lp-section--dark .lp-kicker{color:var(--lp-gold-light);}
.lp-section--dark .lp-lead,
.lp-section--dark .lp-text{color:var(--lp-on-dark-2);}

/* 深色區塊尾端漸層，接到下一個區塊
   lp-section--fade       漸層到頁面底色（下一區塊是一般區塊）
   lp-section--fade-soft  漸層到淺主題色（下一區塊是 lp-section--soft） */
.lp-section--fade{--lp-fade-to:var(--lp-bg);}
.lp-section--fade-soft{--lp-fade-to:var(--lp-soft);}
.lp-section--fade,
.lp-section--fade-soft{
  padding-bottom:calc(var(--lp-section) + 56px);
  background:linear-gradient(180deg,
    var(--lp-primary-dark) 0%,
    var(--lp-primary-dark) calc(100% - 150px),
    var(--lp-fade-to) 100%);
}
.lp-section--fade + .lp-section,
.lp-section--fade-soft + .lp-section{margin-top:0;}
.lp-divider{width:36px;height:2px;background:var(--lp-gold);margin:36px auto;border:0;}


/* ---------- 8. 按鈕 ---------- */
/* LINE 按鈕：class 沿用佈景，桌機用 .pc、手機用 .app，追蹤用 .track-taipei 等 */
.lp .btn-line{
  display:inline-block;
  width:100%;
  max-width:340px;
  background:var(--lp-line-green);
  color:#FFFFFF;
  font-family:var(--lp-sans);
  font-size:17px;
  font-weight:700;
  line-height:1.4;
  text-align:center;
  text-decoration:none;
  padding:14px 24px;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(6,199,85,.28);
  transition:transform .15s ease,box-shadow .15s ease;
}
.lp .btn-line:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(6,199,85,.34);}
.lp .btn-line svg{width:20px;height:20px;fill:currentColor;vertical-align:-4px;margin-right:6px;}

/* 次要按鈕（電話、看更多） */
.lp-btn{
  display:inline-block;
  font-size:15px;
  font-weight:700;
  color:var(--lp-primary);
  text-decoration:none;
  border:1.5px solid var(--lp-primary);
  border-radius:999px;
  padding:10px 22px;
}
.lp-section--dark .lp-btn,.lp-hero .lp-btn{color:var(--lp-on-dark);border-color:var(--lp-on-dark-3);}

.lp-cta-hint{font-size:13px;color:var(--lp-muted);margin-top:10px;}
.lp-hero .lp-cta-hint,.lp-section--dark .lp-cta-hint,.lp-cta .lp-cta-hint{color:var(--lp-on-dark-3);}


/* ---------- 9. 卡片 ---------- */
.lp-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;}
.lp-card{
  background:var(--lp-card);
  border-radius:var(--lp-radius);
  box-shadow:var(--lp-shadow);
  padding:20px;
}
.lp-card--row{display:flex;gap:14px;align-items:flex-start;}
.lp-card--line{box-shadow:none;border:1px solid var(--lp-line);}
.lp-card__icon{
  flex-shrink:0;
  width:46px;height:46px;
  border-radius:12px;
  background:var(--lp-soft);
  color:var(--lp-primary);
  display:flex;align-items:center;justify-content:center;
}
.lp-card__icon svg{width:24px;height:24px;}
.lp-card__num{
  flex-shrink:0;
  font-family:var(--lp-serif);
  font-size:26px;
  font-weight:700;
  line-height:1.1;
  color:var(--lp-gold);
}
.lp-card__title{font-size:17px;font-weight:700;line-height:1.5;color:var(--lp-primary);margin-bottom:4px;}
.lp-card__text{font-size:15px;color:var(--lp-body);}
.lp-section--dark .lp-card{background:rgba(255,255,255,.06);border:1px solid var(--lp-on-dark-line);box-shadow:none;}
.lp-section--dark .lp-card__title{color:var(--lp-on-dark);}
.lp-section--dark .lp-card__text{color:var(--lp-on-dark-2);}


/* ---------- 10. 標籤 ---------- */
.lp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;margin-bottom:10px;}
.lp-tag{
  display:inline-block;
  font-size:12.5px;
  font-weight:400;
  line-height:1.6;
  padding:2px 10px;
  border-radius:999px;
  background:var(--lp-soft);
  color:var(--lp-primary);
}
.lp-tag--gold{background:var(--lp-gold-soft);color:var(--lp-gold);}
.lp-tag--solid{background:var(--lp-gold);color:#FFFFFF;}
.lp-section--dark .lp-tag,.lp-hero .lp-tag{background:rgba(255,255,255,.12);color:var(--lp-on-dark);}
.lp-section--dark .lp-tag--gold,.lp-hero .lp-tag--gold{background:rgba(201,168,118,.2);color:var(--lp-gold-light);}


/* ---------- 11. 勾選清單（適合對象、症狀） ---------- */
.lp-checklist{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;}
.lp-checklist > li,
.lp-checklist > label{
  position:relative;
  display:block;
  background:var(--lp-card);
  border:1px solid var(--lp-line);
  border-radius:var(--lp-radius-sm);
  padding:13px 16px 13px 46px;
  font-size:15.5px;
  line-height:1.65;
  color:var(--lp-text);
}
.lp-checklist > li::before{
  content:"";
  position:absolute;left:16px;top:16px;
  width:20px;height:20px;border-radius:50%;
  background:var(--lp-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* 可勾選版本（自我檢測）：<label><input type="checkbox"><span>文字</span></label> */
.lp-checklist > label{cursor:pointer;transition:border-color .2s ease,background .2s ease;}
.lp-checklist > label input{position:absolute;opacity:0;pointer-events:none;}
.lp-checklist > label span::before{
  content:"";
  position:absolute;left:16px;top:16px;
  width:20px;height:20px;border-radius:6px;
  border:1.5px solid var(--lp-faint);
  background:#FFFFFF center/12px no-repeat;
  transition:all .2s ease;
}
.lp-checklist > label:has(input:checked){border-color:var(--lp-gold);background:var(--lp-gold-soft);}
.lp-checklist > label input:checked + span::before{
  border-color:var(--lp-gold);
  background-color:var(--lp-gold);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}
.lp-checklist > label input:focus-visible + span::before{box-shadow:0 0 0 3px var(--lp-soft);}

/* 檢測結果框 */
.lp-result{
  margin-top:16px;
  text-align:center;
  background:var(--lp-card);
  border-radius:var(--lp-radius);
  box-shadow:var(--lp-shadow);
  padding:20px;
}
.lp-result__label{font-size:13px;color:var(--lp-muted);letter-spacing:1px;}
.lp-result__score{font-family:var(--lp-serif);font-size:40px;font-weight:700;line-height:1.2;color:var(--lp-primary);}
.lp-result__score small{font-size:18px;color:var(--lp-faint);}
.lp-result__text{font-size:15px;color:var(--lp-body);margin-top:4px;}


/* ---------- 12. 數據 ---------- */
.lp-stats{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;}
.lp-stat{
  display:flex;gap:16px;align-items:center;
  background:var(--lp-card);
  border-radius:var(--lp-radius);
  box-shadow:var(--lp-shadow);
  padding:18px 20px;
}
.lp-stat__num{
  flex-shrink:0;
  min-width:96px;
  font-family:var(--lp-serif);
  font-size:30px;
  font-weight:700;
  line-height:1.15;
  color:var(--lp-gold);
  text-align:center;
}
.lp-stat__num small{font-size:16px;margin-left:2px;}
.lp-stat__text{font-size:15px;color:var(--lp-body);}

/* 報告列（項目／說明） */
.lp-rows{background:var(--lp-card);border-radius:var(--lp-radius);box-shadow:var(--lp-shadow);overflow:hidden;}
.lp-row{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-bottom:1px solid var(--lp-line);}
.lp-row:last-child{border-bottom:0;}
.lp-row__key{font-size:15.5px;font-weight:700;color:var(--lp-primary);}
.lp-row__value{font-size:14.5px;color:var(--lp-muted);}


/* ---------- 13. 步驟 ---------- */
.lp-steps{counter-reset:lpstep;display:grid;gap:12px;}
.lp-step{
  counter-increment:lpstep;
  position:relative;
  background:var(--lp-card);
  border-radius:var(--lp-radius);
  box-shadow:var(--lp-shadow);
  padding:18px 20px 18px 72px;
}
.lp-step::before{
  content:counter(lpstep,decimal-leading-zero);
  position:absolute;left:20px;top:16px;
  font-family:var(--lp-serif);
  font-size:26px;
  font-weight:700;
  line-height:1.2;
  color:var(--lp-gold);
}
.lp-step__title{font-size:17px;font-weight:700;line-height:1.5;color:var(--lp-primary);}
.lp-step__text{font-size:15px;color:var(--lp-body);margin-top:2px;}


/* ---------- 14. 時間軸 ---------- */
.lp-timeline{position:relative;padding-left:30px;}
.lp-timeline::before{
  content:"";
  position:absolute;left:9px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--lp-gold-light),rgba(201,168,118,.15));
}
.lp-timeline__item{position:relative;margin-bottom:18px;}
.lp-timeline__item:last-child{margin-bottom:0;}
.lp-timeline__item::before{
  content:"";
  position:absolute;left:-26px;top:9px;
  width:12px;height:12px;border-radius:50%;
  background:var(--lp-gold-light);
  box-shadow:0 0 0 5px rgba(201,168,118,.18);
}
.lp-timeline__time{
  font-family:var(--lp-serif);
  font-size:24px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:1px;
  color:var(--lp-gold);
}
.lp-timeline__body{
  margin-top:6px;
  background:var(--lp-card);
  border-radius:var(--lp-radius);
  box-shadow:var(--lp-shadow);
  padding:14px 16px;
}
.lp-timeline__title{font-size:16.5px;font-weight:700;line-height:1.5;color:var(--lp-text);}
.lp-timeline__text{font-size:14.5px;color:var(--lp-muted);margin-top:4px;}
.lp-section--dark .lp-timeline__time{color:var(--lp-gold-light);}
.lp-section--dark .lp-timeline__body{background:rgba(255,255,255,.06);border:1px solid var(--lp-on-dark-line);box-shadow:none;}
.lp-section--dark .lp-timeline__title{color:var(--lp-on-dark);}
.lp-section--dark .lp-timeline__text{color:var(--lp-on-dark-2);}


/* ---------- 15. 案例 ---------- */
.lp-cases{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;}
.lp-case{
  background:#FBF8F2;
  border:1px solid rgba(156,122,60,.28);
  border-radius:var(--lp-radius);
  padding:18px;
}
.lp-case__tag{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  color:#FFFFFF;
  background:var(--lp-gold);
  border-radius:999px;
  padding:2px 10px;
  margin-bottom:8px;
}
.lp-case__title{font-size:17px;font-weight:700;line-height:1.55;color:var(--lp-primary);margin-bottom:6px;}
.lp-case__text{font-size:15px;color:var(--lp-body);}
.lp-case__media{margin-top:12px;border-radius:var(--lp-radius-sm);overflow:hidden;}


/* ---------- 16. 引言 ---------- */
.lp-quote{
  text-align:center;
  font-family:var(--lp-serif);
  font-size:23px;
  line-height:1.65;
  color:var(--lp-primary);
  border-top:1px solid var(--lp-gold-light);
  border-bottom:1px solid var(--lp-gold-light);
  padding:18px 8px !important;
  margin:0 auto !important;
  max-width:520px;
}
.lp-quote__by{display:block;font-family:var(--lp-sans);font-size:13.5px;color:var(--lp-muted);margin-top:8px;}
.lp-section--dark .lp-quote{color:var(--lp-on-dark);}


/* ---------- 17. Q&A（不需 script，點擊展開） ---------- */
.lp-qa{display:grid;gap:10px;}
.lp-qa details{
  background:var(--lp-card);
  border:1px solid var(--lp-line);
  border-radius:var(--lp-radius-sm);
  overflow:hidden;
}
.lp-qa summary{
  list-style:none;
  cursor:pointer;
  position:relative;
  padding:15px 48px 15px 48px;
  font-size:16px;
  font-weight:700;
  line-height:1.55;
  color:var(--lp-primary);
}
.lp-qa summary::-webkit-details-marker{display:none;}
.lp-qa summary::before{
  content:"Q";
  position:absolute;left:16px;top:14px;
  font-family:var(--lp-serif);
  font-size:20px;
  color:var(--lp-gold);
}
.lp-qa summary::after{
  content:"";
  position:absolute;right:18px;top:22px;
  width:9px;height:9px;
  border-right:2px solid var(--lp-faint);
  border-bottom:2px solid var(--lp-faint);
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.lp-qa details[open] summary::after{transform:rotate(-135deg);top:26px;}
.lp-qa__a{padding:0 18px 16px 48px;font-size:15px;color:var(--lp-body);}


/* ---------- 18. 醫師介紹 ---------- */
.lp-doctor{
  background:var(--lp-card);
  border-radius:var(--lp-radius);
  box-shadow:var(--lp-shadow);
  overflow:hidden;
}
.lp-doctor__photo{background:var(--lp-soft);}
.lp-doctor__photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;}
.lp-doctor__body{padding:20px;}
.lp-doctor__name{font-family:var(--lp-serif);font-size:22px;font-weight:700;line-height:1.4;color:var(--lp-primary);}
.lp-doctor__title{font-size:14px;color:var(--lp-gold);margin:2px 0 12px;}
.lp-doctor__list li{
  position:relative;
  padding-left:16px;
  font-size:14.5px;
  color:var(--lp-body);
  margin-top:6px;
}
.lp-doctor__list li::before{
  content:"";
  position:absolute;left:0;top:10px;
  width:6px;height:6px;border-radius:50%;
  background:var(--lp-gold);
}
.lp-doctor__list b{color:var(--lp-text);}
.lp-doctors{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;}


/* ---------- 19. 對比（適合／不適合、正確／錯誤） ---------- */
.lp-compare{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;}
.lp-compare__item{border-radius:var(--lp-radius);padding:16px 18px;border:1px solid;}
.lp-compare__item--good{background:var(--lp-soft);border-color:rgba(0,0,0,.06);}
.lp-compare__item--bad{background:#F7F2EE;border-color:#EADFD6;}
.lp-compare__label{font-size:16px;font-weight:700;margin-bottom:4px;}
.lp-compare__item--good .lp-compare__label{color:var(--lp-primary);}
.lp-compare__item--bad .lp-compare__label{color:var(--lp-red);}
.lp-compare__item p{font-size:15px;color:var(--lp-body);}


/* ---------- 20. 圖片 ---------- */
.lp-figure{margin:20px 0;}
.lp-figure img{width:100%;border-radius:var(--lp-radius);margin:20px 0;height:auto;}
.lp-figure figcaption{font-size:13px;color:var(--lp-muted);text-align:center;margin-top:8px;}
.lp-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0;}
.lp-gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--lp-radius-sm);}

/* 企劃稿用：尚未有圖片時的預覽色塊（依主題變色，比例同正式圖片）
   預設 16:9；--photo 4:3、--square 1:1、--tall 3:4 */
.lp-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  width:100%;
  aspect-ratio:16/9;
  padding:16px 20px;
  border-radius:var(--lp-radius);
  background:
    radial-gradient(120% 90% at 85% 10%,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 55%),
    linear-gradient(135deg,var(--lp-soft) 0%,var(--lp-gold-soft) 100%);
  color:var(--lp-primary);
  font-size:12.5px;
  line-height:1.6;
  text-align:center;
  overflow:hidden;
}
.lp-placeholder::before{
  content:"";
  flex-shrink:0;
  width:40px;height:40px;
  background:currentColor;
  opacity:.4;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='9.5' r='1.6'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='9.5' r='1.6'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E") center/contain no-repeat;
}
.lp-placeholder--photo{aspect-ratio:4/3;}
.lp-placeholder--square{aspect-ratio:1/1;}
.lp-placeholder--tall{aspect-ratio:3/4;}
.lp-hero .lp-placeholder,
.lp-section--dark .lp-placeholder{
  background:
    radial-gradient(120% 90% at 85% 10%,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 55%),
    linear-gradient(135deg,rgba(255,255,255,.10) 0%,rgba(201,168,118,.24) 100%);
  color:var(--lp-gold-light);
}
.lp-gallery .lp-placeholder{aspect-ratio:1/1;border-radius:var(--lp-radius-sm);}
.lp-hero__bg.lp-placeholder{          /* 主視覺底圖還沒到位時的預覽 */
  aspect-ratio:auto;
  border-radius:0;
  justify-content:flex-start;
  align-items:flex-end;
  padding:16px 18px;
  font-size:12px;
  text-align:right;
  color:var(--lp-gold-light);
  background:
    radial-gradient(80% 55% at 85% 15%,rgba(201,168,118,.38) 0%,rgba(201,168,118,0) 60%),
    radial-gradient(70% 50% at 10% 90%,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 60%),
    linear-gradient(160deg,var(--lp-primary) 0%,var(--lp-primary-dark) 100%);
}
.lp-hero__bg.lp-placeholder::before{width:30px;height:30px;}
/* 底圖預覽色塊：直式只在直螢幕出現、橫式只在橫螢幕出現（正式圖片用 picture，不需要這兩個 class） */
.lp-hero__bg--landscape{display:none;}
@media (orientation:landscape){
  .lp-hero__bg--portrait{display:none;}
  .lp-hero__bg--landscape{display:flex;}
  .lp-hero--full > .lp-container{margin:-10% auto 10%;}
}
.lp-doctor__photo .lp-placeholder{aspect-ratio:4/3;border-radius:0;}


/* ---------- 21. CTA 區塊 ---------- */
.lp-cta{
  margin-top:var(--lp-section);
  background:linear-gradient(165deg,var(--lp-primary) 0%,var(--lp-primary-dark) 100%);
  color:var(--lp-on-dark);
  border-radius:18px;
  padding:30px 20px;
  text-align:center;
}
.lp-cta__title{font-family:var(--lp-serif);font-size:22px;font-weight:700;line-height:1.5;margin-bottom:8px;}
.lp-cta__title em{font-style:normal;color:var(--lp-gold-light);}
.lp-cta__text{font-size:15px;color:var(--lp-on-dark-2);margin-bottom:18px;}
.lp-cta__text:last-child{margin-bottom:0;}
.lp-cta--plain{background:none;color:var(--lp-text);padding:8px 0 0;}
.lp-cta--plain .lp-cta__title{color:var(--lp-primary);}
.lp-cta--plain .lp-cta__text{color:var(--lp-muted);}


/* ---------- 22. 頁尾 ---------- */
.lp-footer{
  margin-top:var(--lp-section);
  background:var(--lp-primary-dark);
  color:var(--lp-on-dark-2);
  font-size:13px ;
  line-height:1.9;
  padding:28px 0 32px;
}
.lp-footer__name{font-family:var(--lp-serif);font-size:16px;font-weight:700;color:var(--lp-on-dark);text-align:center;margin-bottom:12px;}
.lp-footer__branch{margin-bottom:10px;font-size: 13px;}
.lp-footer__branch b{color:var(--lp-gold-light);}
.lp-footer a{color:var(--lp-on-dark-2);}
.lp-footer__disclaimer{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--lp-on-dark-line);
  color:var(--lp-on-dark-3);
  font-size:12px;
}


/* ---------- 23. 底部固定按鈕 ---------- */
.lp-sticky{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:50;
  background:rgba(255,255,255,.96);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 16px rgba(0,0,0,.10);
  text-align:center;
}
.lp-sticky .btn-line{max-width:560px;box-shadow:none;}


/* ---------- 24. 平板／小桌機 640px 以上 ---------- */
@media (min-width:640px){
  .lp{--lp-section:60px;}
  .lp-hero{padding:60px 0 52px;}
  .lp-hero--full{padding:72px 0 96px;}
  .lp-hero__title{font-size:34px;}
  .lp-hero--full .lp-hero__title{font-size:40px;}
  .lp-hero__sub{font-size:20px;}
  .lp-title{font-size:27px;}
  .lp-cards--2,.lp-cards--3,.lp-checklist--2,.lp-cases--2,.lp-doctors{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lp-compare{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lp-stats--2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lp-stats--2 .lp-stat{flex-direction:column;text-align:center;gap:6px;}
  .lp-row{flex-direction:row;justify-content:space-between;align-items:center;gap:16px;}
  .lp-row__value{text-align:right;}
  .lp-gallery--3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .lp-doctor--row{display:grid;grid-template-columns:240px minmax(0,1fr);}
  .lp-doctor--row .lp-doctor__photo img,
  .lp-doctor--row .lp-doctor__photo .lp-placeholder{height:100%;aspect-ratio:auto;min-height:280px;}
  .lp-doctor--row .lp-doctor__body{padding:26px 28px;}
  .lp-cta{padding:44px 32px;}
  .lp-cta__title{font-size:26px;}
}

/* ---------- 25. 桌機 960px 以上 ---------- */
@media (min-width:960px){
  .lp-cards--3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .lp-hero__title{font-size:40px;}
  .lp-hero--full .lp-hero__title{font-size:48px;}
}

/* ---------- 26. 減少動態 ---------- */
@media (prefers-reduced-motion:reduce){
  .lp *{transition:none !important;animation:none !important;}
}

/* =========================================================
   lp-standard.css 新增規則（2026-10-19）
   加在 lp-standard.css 最後面，不影響現有頁面
   ========================================================= */

/* 1. 主視覺後直接接深色區塊時，不留淺色間隙 */
.lp-hero + .lp-section--dark{margin-top:0;}

/* 1. 深色底上的數據卡與小字 */
.lp-section--dark .lp-stat{background:rgba(255,255,255,.1);border:1px solid var(--lp-on-dark-line);box-shadow:none;}
.lp-section--dark .lp-stat__num{color:var(--lp-gold-light);}
.lp-section--dark .lp-stat__text{color:var(--lp-on-dark-2);}
.lp-section--dark .lp-note{color:var(--lp-on-dark-3);}

/* 2. 報告列堆疊版 lp-rows--stack：電腦版也上下排列，適合較長的說明文字 */
.lp-rows--stack .lp-row{padding:16px 20px;gap:6px;}
.lp-rows--stack .lp-row__key{
  font-family:var(--lp-serif);
  font-size:19px;
  line-height:1.4;
  color:var(--lp-gold);
  border-left:3px solid var(--lp-gold);
  padding-left:10px;
}
.lp-rows--stack .lp-row__value{font-size:15px;line-height:1.75;color:var(--lp-body);}
@media (min-width:640px){
  .lp-rows--stack .lp-row{flex-direction:column;align-items:stretch;}
  .lp-rows--stack .lp-row__value{text-align:left;}
}

/* 3. 滿版主視覺換成 <picture> 後圖片看不到（2026-10-20）
   原因：網站的 landingpage.css 有「* { position:relative; }」，
   讓 <picture> 變成 0×0 的定位框，裡面的 img 被撐成 0×0。
   修正：讓 picture 本身鋪滿主視覺 */
.lp-hero--full > picture{position:absolute;inset:0;z-index:0;}