*{box-sizing:border-box;} /* 讓所有元素的寬高計算包含 padding/border，排版更好控 */ 
html,body{margin:0;padding:0;} /* 移除瀏覽器預設邊距，避免頁面四周留白 */ 
/* ✅ 永遠預留直向捲軸寬度：避免「短頁／body overflow:hidden」與「會長頁」切換時，
   fixed header 置中容器左右位移（預約、治療項目 logo 會看起來跑掉） */
html{overflow-y:scroll;}
body{background:#f9f9f9;} /* 設定整體背景色為淡灰，符合你截圖風格 */
body{padding-top:110px;} 
/* <<改>>因為改position加的，
把整個頁面內容往下推，80px 改成你 header 實際高度
如果你覺得輪播被蓋住一點：把 80px 調大（例如 90px）
如果覺得空太多：把 80px 調小（例如 70px） */ 
.nav-wrapper{
    width:100%; /* 撐滿寬度 */
    background:#F5F5F5; /* header 底色 */
    padding:14px 0; /* 上下內距 */
    position:fixed; 
    /* <<改>>永遠固定在視窗最上方（不受滾動影響）原本用sticky，往下捲動時 Header還是會跑 */
    top:0; /* 重點：黏在視窗最上方 */
    left:0; /* 固定在左邊界 */
    right:0; /* 固定在右邊界，left\right是改position加的，等於撐滿全寬 */
    z-index:3000; /* 避免被內容蓋住 */
    box-shadow:0 2px 10px rgba(0,0,0,.08); /* 捲動時更像「浮在上面」（可刪） */
  }
.header-container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:16px;} /* 置中、限制最大寬度、左右留白、用 flex 排成一列並垂直置中 */ 

.logo-container{display:flex;align-items:center;flex:0 0 auto;} /* Logo 容器固定尺寸，永遠在左邊 */ 
.logo{width:150px;height:auto;display:block;}

.main-nav{flex:1 1 auto;} /* 導覽列佔滿剩餘空間（桌機/平板用） */ 
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:nowrap;}
.main-nav li{margin:0;padding:0;} /* 清掉 li 的預設間距 */ 

.main-nav a{color:#265581;text-decoration:none;font-size:14px;font-weight:600;letter-spacing:1px;white-space:nowrap;display:inline-block;padding:0 10px;line-height:32px;overflow:hidden;}
/*這邊是導覽列的樣式*/
/* <<改>>用 line-height 撐高度、只留左右 padding：讓 ::after 從剛好底部開始，平常不會露出第二排 */
/* <<改>>display:block + overflow:hidden：把下面那排複製字藏起來；height 確保容器高度固定只顯示一排 */

.main-nav a span{position:relative;display:inline-block;transition:transform .25s ease;} /* 用 span 做 hover 動畫的承載容器 */ 
.main-nav a span::after{content:attr(data-text);position:absolute;left:0;top:100%;width:100%;color:#265581;} /* 複製一份文字放在下面，用來「上升」效果 */ 
.main-nav a:hover span{transform:translateY(-100%);} /* 滑過時把 span 往上推一格，露出下面那份文字 */ 

.menu-toggle{display:none;flex:0 0 auto;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:0;margin-left:auto;} /* 漢堡按鈕：桌機先隱藏；手機顯示；靠右；可點 */ 
.menu-toggle span{display:block;width:24px;height:2px;background:#265581;margin:5px auto;transition:transform .25s ease,opacity .25s ease;} 
/* <<改>>漢堡三條線：尺寸/顏色/間距/動畫過渡 */ 

.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.05);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
  z-index:1500;
  pointer-events:none; /* 關閉時：遮罩完全不吃點擊 */
} 
/* <<改>>漢堡選單滑開之後螢幕會跟著變暗，在這邊調整遮罩的透明度background:rgba(0,0,0,.45);
最後.45改成.05，變成半透明。
遮罩：全螢幕固定；半透明黑；預設看不到；層級在內容之上 */ 

@media (max-width:960px){  /* ← 原本是 767px 為了平板也顯示漢堡選單所以改*/
        .menu-toggle{ /* 漢堡按鈕本體 */ 
          display:flex; /* 用 flex 來排裡面的 3 條線 */ 
          flex-direction:column; /* 關鍵：讓 3 個 span 直向排列（變成三條線） */ 
          align-items:center; /* 水平置中每一條線 */ 
          justify-content:center; /* 垂直置中整組三條線 */ 
          gap:6px; /* 三條線之間的間距（你可改 5~8px） */ 
        } 
        .menu-toggle span{ /* 每一條線 */ 
          margin:0; /* 取消原本 margin: 5px auto，避免 flex 排版時擠壓/怪位移 */ 
        } 
       /*<<改>>原本只顯示一條線，現在修正後才顯示三條線*/
  .main-nav{position:fixed;top:0;right:0;height:100dvh;width:min(86vw,340px);background:#fff;z-index:2000;transform:translateX(100%);transition:transform .25s ease;box-shadow:-10px 0 25px rgba(0,0,0,.12);display:flex;flex-direction:column;} /* 手機導覽列改成右側抽屜：預設在畫面外，打開才滑入 */ 
  .main-nav a span::after{display:none;} /* 手機取消「複製文字」避免垂直選單看起來怪 */ 
  .main-nav a:hover span{transform:none;} /* 手機取消 hover 上升效果（觸控也用不到） */ 
  .main-nav ul{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:68px 0 14px;margin:0;} /* 手機選單改直向排列，上方留空給 close 按鈕 */ 
  .main-nav li{border-bottom:1px solid #eee;} /* 每個選項底下加分隔線 */ 
  .main-nav a{color:#333;padding:14px 18px;font-weight:600;} /* 手機選單字色改深、點擊區變大 */ 
  .close-btn{position:absolute;top:14px;left:14px;width:34px;height:34px;border:1.5px solid #333;cursor:pointer;} 
  /* 關閉按鈕：左上角方框 */ 
  .close-btn::before,.close-btn::after{content:"";position:absolute;top:50%;left:50%;width:20px;height:2px;background:#333;transform-origin:center;} /* 用兩條線畫出 X 的基礎 */ 
  .close-btn::before{transform:translate(-50%,-50%) rotate(45deg);} /* 第一條線旋轉 45 度 */ 
  .close-btn::after{transform:translate(-50%,-50%) rotate(-45deg);} /* 第二條線旋轉 -45 度 */ 
  body.nav-open{overflow:hidden;} /* 選單打開時禁止頁面滾動 */ 
  body.nav-open .nav-overlay{
    opacity:1;
    visibility:visible;
    pointer-events:auto; /* 選單打開時：遮罩可以吃點擊 */
  } /* 選單打開時顯示遮罩 */ 
  .main-nav.is-open{transform:translateX(0);} /* 選單打開時滑進畫面 */ 
  body.nav-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);} /* 打開時：第一條線變成 X 的一半 */ 
  body.nav-open .menu-toggle span:nth-child(2){opacity:0;} /* 打開時：中間那條線消失 */ 
  body.nav-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* 打開時：第三條線變成 X 的另一半 */ 
} /* 手機版樣式結束 */ 


/*照片輪播區塊桌機 + 手機共用*/

.hero{width:100%;} /* 輪播外層：撐滿寬度 */ 
.hero-viewport{position:relative;width:100%;overflow:hidden;} 
/* 視窗：定位箭頭/指示條，並裁切超出內容 */ 
.hero-viewport::before{content:"";display:block;aspect-ratio:16/6;max-height:560px;} 
/* 桌機照片顯示的高度；用比例先撐出高度：桌機像你截圖（可改 16/7 更高） */ 

@media (max-width:1024px){.hero-viewport::before{aspect-ratio:16/8;}} 
/* 平板照片顯示的高度：高度稍微變高一點 */ 
@media (max-width:767px){.hero-viewport::before{aspect-ratio:16/12;}} 
/* 手機照片顯示的高度：高度再高一些，文字比較放得下 */ 

.hero-track{position:absolute;inset:0;} 
/* 軌道鋪滿視窗，裡面放四張 slide */ 
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;pointer-events:none;} 
/* 每張圖疊在一起，預設透明且不能點 */ 
.hero-slide.is-active{opacity:1;pointer-events:auto;} 
/* 目前那張：顯示且可互動 */ 

.hero-img{width:100%;height:100%;object-fit:cover;display:block;} 
/* 圖片全寬全高、裁切填滿、不變形 */ 

.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.15),rgba(0,0,0,0));} 
/* 文字區的漸層黑底：左深右淺 */ 
@media (max-width:767px)
{.hero-overlay
  {background:linear-gradient(180deg,rgba(0,0,0,.40),rgba(0,0,0,.15),rgba(0,0,0,0));}} 
/* 手機改成上下漸層更順眼 */ 

.hero-text
{position:absolute;
  left:clamp(16px,6vw,80px);
  top:50%;transform:translateY(-45%);
  max-width:min(760px,86vw);
  color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35);} 
/* 文字定位：靠左、垂直置中、寬度自適應 */ 
.hero-text h2{margin:0 0 .4em;font-size:clamp(20px,2.6vw,40px);font-weight:700;letter-spacing:.5px;line-height:1.15;} 
/* 標題：RWD 字體大小 */ 
.hero-text p{margin:.25em 0;font-size:clamp(13px,1.25vw,18px);line-height:1.6;} 
/* 內文：RWD 字體大小 */

.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:clamp(34px,3.2vw,48px);height:clamp(34px,3.2vw,48px);border:0;border-radius:999px;background:rgba(0,0,0,.28);color:#fff;font-size:clamp(18px,2.4vw,28px);cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;} 
/* 左右箭頭：大小、圓形、半透明背景 */ 
.hero-arrow:hover{background:rgba(0,0,0,.40);} /* 滑過時變深一點 */ 
.hero-prev{left:clamp(10px,2.4vw,28px);} /* 左箭頭位置（RWD） */ 
.hero-next{right:clamp(10px,2.4vw,28px);} /* 右箭頭位置（RWD） */ 

.hero-dots{position:absolute;left:50%;bottom:clamp(10px,2.2vw,24px);transform:translateX(-50%);display:flex;gap:clamp(8px,1.2vw,14px);z-index:2;} /* 指示條：底部置中 */ 
.hero-dot{width:clamp(26px,3.2vw,42px);height:clamp(3px,.45vw,5px);border:0;background:rgba(255,255,255,.45);cursor:pointer;border-radius:999px;} /* 每一條指示：長條 */ 
.hero-dot.is-active{background:#fff;} /* 目前那條：白色 */ 

/*<<改>>文字往下移（覆蓋第90行的 top/transform）加在這邊（目前是檔案最底部）最保險。
原因是 CSS「後寫的會蓋掉先寫的」，
你把新設定放最後，就一定會覆蓋掉你第 90–92 行原本的 .hero-text / h2 / p。
標題小一級（覆蓋第91行）
內文字大一級（覆蓋第92行） */
.hero-text{top:calc(50% + 110px);transform:translateY(0);} 
/*如果你想「文字一定在左箭頭下方」更精準一點（因為箭頭在 top:50%），你可以這行改成： 
用箭頭位置 50% 往下加 60px，確保落在箭頭下方；60px 可微調 */
.hero-text h2{font-size:clamp(18px,2.1vw,32px);} /* 標題小一級（覆蓋第91行） */
.hero-text p{font-size:clamp(13px,1.5vw,19px);} /* 內文字大一級（覆蓋第92行） */
/*因為手機版文字落到第三行，所以把文字區塊調寬一點，讓文字可以用2行顯示*/

@media (max-width:767px){ /* 手機：讓文字區塊更寬 */
  .hero-text{max-width:98vw;left:12px;
    top:calc(50% + 60px);transform:translateY(0);}
   /* 影響所有張+ 左邊更貼，讓文字更容易回到上一行 
   top:calc(50% + 60px) 上下移動調整後面px數值 */
   .hero-slide-2 .hero-text{
    max-width:75vw;     /* 文字塊的寬度（讓它有空間向右挪） */
    left:auto;          /* 取消左定位 */
    right:-8px;         /* 例如 right:20px; 就會更靠右；改大就會往左移。*/
    top: calc(50% + 40px);   /* ← 手機版只第 2 張往下移；數字越大越下面 */
  transform: translateY(0);
  }
  /* 再補一條：第2張也跟著用同樣的 max-width
  （避免被第 2 張要把文字往右移所設定的 max-width:75vw 蓋回去） */
}

/*<<改>> 因為所有照片在桌機版上面都被切掉一點，把桌機/平板輪播框變高一點，顯示重心往上
如果你覺得「上面保留太多、下面被裁太多」：把 0% 改成 10% 或 15%。
如果你覺得「還是扁、裁切還明顯」：把 16/7 改成 16/8。*/
@media (min-width:768px){ /* 只針對桌機/平板（手機不動，因為你手機目前正常） */
    .hero-viewport::before{aspect-ratio:16/7;} /* 1) 桌機輪播框變「高一點」：減少上下被裁切（你可試 16/7.5 或 16/8 更高） */
    .hero-img{object-position:50% 0%;} /* 2) 顯示重心往上：優先保留上半部（0% = 最上方；你可改 10%/15% 微調） */
  } /* 桌機/平板設定結束 */

/*<<改>> 因為原本的箭頭是文字，
做響應式的時候，桌機版會無法置中在圓形裡，現在改成SVG圖示，讓圖示置中在圓形裡*/
.hero-arrow{display:grid;place-items:center;padding:0;line-height:1;} /* 按鈕用 grid 置中 + 清掉 padding/line-height，避免視覺偏移 */
.hero-arrow-icon{width:clamp(18px,2.2vw,26px);height:clamp(18px,2.2vw,26px);} /* SVG 尺寸：RWD 縮放（你可微調數字） */
.hero-arrow-icon path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;} /* SVG 線條：白色、圓角、看起來更像 UI 圖示 */

/*<<改>> 因為只有第 2 張要把文字往右移，所以加 hero-slide-2 這個 class
原本的文字定位是 left:clamp(16px,6vw,80px);top:50%;transform:translateY(-45%);
現在改成 left:clamp(16px,6vw,80px);top:50%;transform:translateY(-45%);
這樣只有第 2 張的文字會往右移，其他三張的文字位置不會改變*/
@media (min-width:768px){
.hero-slide-2 .hero-text{ /* 只選第2張裡的文字區塊 */
    left:auto; /* 取消全域 .hero-text 的 left 定位（不再靠左） */
    right:clamp(24px,10vw,220px); 
    /* 改用右邊定位：數字越大越往左（你可微調最大 220px） 
    想更右 → 把最後的 220px 調小（例如 140px）
    想更左 → 把 220px 調大（例如 280px）*/
    max-width:min(860px,75vw); 
    /* 限制文字區塊寬度：不然太寬會看起來「沒右移」 
    原本max-width:min(560px,46vw)
    『療。』這個字掉到最下面不好看，所以調整現在這樣*/
  } /* 第2張右移結束 */
}
  /*診所資訊條*/
  :root{--strip-left-min:13px;--strip-left-max:20px;
    --strip-right-min:12px;--strip-right-max:18px;
    --strip-line-color:rgba(0,0,0,.35); /* 線的顏色（獨立） */
    --strip-left-color:rgba(0,0,0,.65); /* 左邊字顏色（獨立） */
    --strip-right-color:rgba(0,0,0,.65); /* 右邊字顏色（獨立） */ 
    /* <<改>>上面三行改成獨立的顏色，讓線與文字都獨立可改顏色 */
    --strip-padY:18px;
    --strip-gutter:clamp(10px,2.4vw,28px);
    --strip-gap:clamp(12px,2vw,28px);
    --strip-row-gap:clamp(2px,0.4vw,4px);
    /* <<改>> 左字到線、線到右字的垂直間距，原本是clamp(10px,1.6vw,18px)*/
    --strip-line-h:1.5px;} /* 這行就是線的粗細 */
    /* 可調參數：左右字級(min/max)、線色、上下內距、左右內距(對齊輪播箭頭)、間距、線粗 */

.clinic-strip{background:#F5F5F5;} /* 灰底 */
.clinic-strip__inner{width:100%;margin:0;padding:var(--strip-padY) var(--strip-gutter);display:grid;grid-template-columns:1fr auto;grid-template-rows:auto var(--strip-line-h) auto;column-gap:var(--strip-gap);row-gap:var(--strip-row-gap);align-items:center;} /* 用 grid：第1列放左字、第2列放線、第3列放右字；左右內距用 --strip-gutter 對齊輪播箭頭 */

.clinic-strip__inner::before
{content:"";grid-column:1/-1;grid-row:2;
  background:var(--strip-line-color); /* 線只吃自己的顏色 */
  height:var(--strip-line-h);} 
  /* 線：放在第2列，跨整行，不會被文字蓋掉也不會消失 */

.clinic-strip__left
{grid-column:1;grid-row:1;align-self:end;
  font-size:clamp(var(--strip-left-min),1.6vw,var(--strip-left-max));
  font-weight:400;
  color:var(--strip-left-color); /* 左邊字用自己的顏色 */
  white-space:nowrap;line-height:1.25;min-width:0;} 
  /* 左字：永遠在第1列（線上面），不換行，字級可用變數調
   左側文字改細一點，原本是font-weight:600 改成 400*/

.clinic-strip__right{
  grid-column:2;grid-row:3;
  justify-self:end;align-self:start;
  font-size:clamp(var(--strip-right-min),1.2vw,var(--strip-right-max));
  color:var(--strip-right-color); /* 右邊字用自己的顏色 */
  white-space:nowrap;text-align:right;line-height:1.25;} 
  /* 右字：永遠在第3列（線下面），右對齊、不換行，字級可用變數調 */

.clinic-strip__name{font-weight:500;} /* 右側第一行加粗 */

/* 如果你希望「小螢幕更早縮小字」，就調這裡的 vw 或 min 值（下面是可選加強） */
@media (max-width:380px){.clinic-strip__left{font-size:clamp(10px,3.2vw,var(--strip-left-max));}.clinic-strip__right{font-size:clamp(10px,2.9vw,var(--strip-right-max));}} 
/* 超小螢幕：再縮一點，避免擠到換行 */

/* 治療師時間表區塊 */
:root{--schedule-gap-top:0px;
  /*<<改>>數字調成0px; 讓時間表緊貼診所資訊條，視覺無縫 */
  --schedule-padY:28px;
  --schedule-bg:#F5F5F5;
  --schedule-text:rgba(0,0,0,.55);} 
/* 可調參數：上方距離/上下內距/背景色/文字色(75%灰) */
.pt-schedule
{background:var(--schedule-bg);
  margin-top:var(--schedule-gap-top);
  padding:var(--schedule-padY) 0;} 
/* 整個時間表區塊：灰底+與診所資訊條距離+上下留白 */
.pt-schedule__inner{max-width:1200px;margin:0 auto;padding:0 20px;} 
/* 內層：限制最大寬度、置中、左右留白 */
.pt-schedule__header{text-align:center;margin-bottom:clamp(16px,2.6vw,28px);} 
/* 標題區：置中，下面留一點空間 */
.pt-schedule__title-zh/* 中文標題樣式 */
 {margin:0;
  color:var(--schedule-text);
  font-size:clamp(20px,2.6vw,30px); 
  /* 中文標題改小（最小/隨螢幕縮放/最大），讓標題更適應不同螢幕大小 */
  font-weight:600;letter-spacing:1px;
  line-height:1.15;} 
/* 中文大標：RWD 字級（可改） */
.pt-schedule__title-en/* 英文標題樣式 */
{margin:.35em 0 0;
  color:var(--schedule-text);
  font-size:clamp(16px,2vw,24px);
  font-weight:700;letter-spacing:.5px;} 
/* 英文小標：RWD 字級（可改） */
.pt-schedule__media{display:flex;justify-content:center;} 
/* 圖片容器：置中顯示 */
.pt-schedule__img{width:100%;height:auto;display:block;max-width:1200px;} 
/* 圖片：自適應寬度、保持比例、不會超過內層最大寬度 */

.pt-schedule__img--wide{display:block;} /* 預設顯示橫式（桌機/平板） */
.pt-schedule__img--tall{display:none;} /* 預設隱藏直式（桌機/平板先不顯示） */

@media (max-width:767px){ /* 手機尺寸：改顯示直式 PNG */
  .pt-schedule__img--wide{display:none;} /* 手機隱藏橫式 */
  .pt-schedule__img--tall{display:block;} /* 手機顯示直式 */
} /* 手機切換結束 */


/* 地圖區塊_桌機、平版*/
.map-section{background:#F5F5F5;padding:80px 0 28px;--map-gap-top:0px;} 
/* 地圖區背景=時間表灰底；下方留白；--map-gap-top=與時間表距離(改這個) */
.map-section{margin-top:-80px;} /* 往上拉 40px（要跟 L278 的 40px 對應） */
/* 與時間表的距離：改 --map-gap-top 數字就好 */
.map-section__inner{max-width:1200px;margin:0 auto;padding:0 20px;}
 /* 內層跟時間表一致：最大寬1200+左右20，確保對齊 */
.map-wrap{position:relative;} 
/* 圖層容器：讓 slogan/按鈕能用 absolute 疊上去 */
.map-a{position:relative;width:75%;margin-left:auto;margin-top:80px;} 
/* 地圖往下 40px（數字越大越往下） */ 
/* A：地圖整體縮成75%並靠右對齊（=對齊時間表右邊界） */
.map-base{width:100%;height:auto;display:block;position:relative;z-index:1;} 
/* A：地圖本體(最底層)；z-index=1 保證在最底 */

/*注意！注意！注意！ 注意！注意！注意！
要把地圖往下移，要改3個地方，假設往下80px
第一：.map-section{background:#F5F5F5;padding:80px 0 28px;--map-gap-top:0px;}
第二：.map-section{margin-top:-80px;} 
第三：.map-a{position:relative;width:75%;margin-left:auto;margin-top:80px;}  */

.map-slogan{position:absolute;left:0;top:0;z-index:2;} 
/* B：slogan 靠左對齊內層（left:0 就是對齊時間表左邊）且在地圖上方 */
.map-slogan{width:clamp(220px,30vw,420px);
  /*  B：slogan 大小可調(改三個數字) */
  height:auto;opacity:0;animation:none; } 
  /* 先隱藏、先不播；等滑到地圖再由 JS/CSS 觸發 */
.map-slogan{transform:translate(-5px,50px);} 
/* slogan 往左 60px、往下 36px（左移就改 -60 這個數字） */
/* B：slogan 往上/往下微調（負值=往上；想往下就改正值） */

@keyframes sloganFade{0%{opacity:0;}75%{opacity:1;}100%{opacity:1;}} 
/* 0~35% 淡入；後面保持顯示 */

.map-section.is-inview .map-slogan{animation:sloganFade 6s ease forwards;}
 /* 滑到地圖區塊才播放淡入→停留 */

.map-cta{position:absolute;right:0;bottom:0;
  z-index:3;display:inline-flex;text-decoration:none;transform:translate(-15px,5px);} 
  /* C：預約按鈕固定在 A 地圖右下角；z-index=3 在最上層 */
.map-cta__img{width:clamp(120px,14vw,180px)
  ;height:auto;display:block;
  opacity:1;transition:opacity .2s ease;} 
  /* C：按鈕大小可調(改三個數字)；hover 變淡用 opacity */
.map-cta:hover .map-cta__img{opacity:.6;} /* C：滑鼠經過只變淡（跟 footer icon 一樣） */

/*注意！注意！注意！注意！注意！注意！ 
這邊的slogan、跟預約按鈕都是用下面的方式移動位置
{transform:translate(25px,50px);}*/

/*頁首地圖區塊＿手機*/
@media (max-width:767px){ /* 手機版：地圖區塊 A/B/C 直向排列 */
  .map-wrap{display:flex;flex-direction:column;align-items:center;gap:0;} /* 手機：讓三個部件依序往下排（A/B/C） */

  .map-slogan{position:static;left:auto;top:auto;} /* 手機：slogan 不用 absolute，改成正常排版（才能排第一個） */
  .map-slogan{transform:translate(0px,20px);} 
  /* 手機：slogan 只讓你調上下（第二個數字）；要下移改成 (0px,20px) */
  .map-slogan{width:clamp(180px,70vw,340px);} /* 手機：slogan 大小（你可改） */

  .map-a{width:100%;margin-left:0;margin-top:0;} /* 手機：地圖容器置中滿寬（排第二個） */
  .map-a{transform:translate(0px,40px);} 
  /* 手機：地圖只讓你調上下（第二個數字） */
  .map-base{width:100%;height:auto;} /* 手機：地圖圖片本體滿寬自適應 */

  .map-cta{position:static;right:auto;bottom:auto;} /* 手機：按鈕不要 absolute，改成排第三個 */
  .map-cta{align-self:flex-end;} /* 手機：按鈕預設靠右（不置中） */
  .map-cta{transform:translate(220px,1px);} /* 手機：按鈕可調左右上下（x,y）；Y 正值=下移（避免被地圖壓住） */
  .map-cta__img{width:clamp(100px,46vw,140px);} /* 手機：按鈕大小（你可改） */
} /* 手機版地圖區塊結束 */


/*頁尾區塊＿桌機、平版*/
:root{--footer-h:78px;--footer-bg:#fff;--footer-text:rgba(0,0,0,.75);--footer-gap:35px;} 
/* 頁尾變數：高度/底色/文字顏色/icon圖示間距 */
body{padding-bottom:var(--footer-h);} 
/* 很重要：頁尾固定後，幫內容預留底部空間，避免被 footer 蓋住 */
.site-footer{position:fixed;left:0;right:0;bottom:0;height:var(--footer-h);background:var(--footer-bg);z-index:900;border-top:1px solid rgba(0,0,0,.1);} 
/* 頁尾固定在底部＋白底＋上邊線 */
.site-footer__inner{max-width:1400px;height:100%;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;} 
/* 內層：置中、左右排、垂直置中 */
.site-footer__left{display:flex;align-items:center;gap:var(--footer-gap);} 
/* 左側：圖示橫排＋間距 */
.site-footer__icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;text-decoration:none;} 
/* 每個圖示連結：固定點擊區域（好按） */
.site-footer__img{width:45px;height:45px;display:block;object-fit:contain;} 
/* 圖示顯示大小；object-fit:contain 讓 PNG 置換後跟 SVG 一樣不變形、不撐爆 */
.site-footer__icon:hover .site-footer__img{opacity:.6;} 
/* 滑鼠移過去：只讓 icon 變淡（數字越小越淡） */
.site-footer__icon--contact .site-footer__img{width:128px;height:128px;object-fit:contain;}
/* <<改>>只放大地址電話圖示 */
.site-footer__icon--contact{width:136px;height:136px;border-radius:0;overflow:visible;} 
/* 地址電話本體放大；取消圓形裁切，避免文字被切 */
.site-footer__icon--contact{cursor:default;}
.site-footer__icon--contact:hover .site-footer__img{opacity:1;}
.site-footer__right{color:var(--footer-text);font-size:clamp(11px,1.1vw,13px);white-space:nowrap;} 
/* 右側版權：字級可自適應，桌機不換行 */

/*頁尾區塊＿手機*/
@media (max-width:767px){ /* 手機版 footer */
  :root{
    --footer-h:120px;           /* ✅ 版權往下推後，footer 也要拉高一點，內容才不會被切 */
    --footer-gap:8px;           /* a. ✅ 4個icon之間的距離（要更擠改 4、要更開改 10） */
  }
  .site-footer__inner{
    flex-direction:column;
    justify-content:center;
    gap:8px;
    padding:0 10px;
  }
  .site-footer__left{
    display:flex;
    flex-direction:row;         /* ✅ 原本排版：地址電話 + 4 icon 同一排 */
    justify-content:center;
    align-items:center;
    margin-top:0;
    flex-wrap:nowrap;
  }
  .site-footer__right{
    text-align:center;
    white-space:normal;
    font-size:9.5px;
    margin-top:14px;            /* c. ✅ 版權下移距離（要更下移改 20、要靠回去改 6） */
  }

  /* a. 4個icon之間（map/line/ig/fb）：靠 --footer-gap 控制，已在上面 :root 設定 */

  /* b. ✅ 4個icon 與 地址電話 之間的距離：只給「地址電話」加右邊空間 */
  .site-footer__icon--contact{
    margin-right:40px;          /* b. ✅ 想拉更開改 24、想靠近改 8 */
  }

  /* 手機版把地址電話和 icon 都縮小，才塞得下 */
  .site-footer__icon--contact,
  .site-footer__icon--contact .site-footer__img{
    width:105px;
    height:105px;
  }
  .site-footer__img{
    width:48px;
    height:48px;
  }
  .site-footer__icon{
    width:48px;
    height:48px;
  }
}/* 手機版結束 */


/* ===== About：Header 下方第一排（2按鈕 + slogan） ===== */
.about-topbar{background:#fff;} /* 第一排區塊底色（需要跟你示意圖一致可改） */

.about-topbar__inner{
  max-width:1200px; /* 跟 header container 同寬 */
  margin:0 auto; /* 置中 */
  padding:22px 20px; /* 左右 20 對齊 header；上下留白 */
  display:flex; /* 一行排版 */
  align-items:center; /* 垂直置中 */
  justify-content:space-between; /* 左右分散：左=兩按鈕，右=slogan */
  gap:24px; /* 左右區塊的距離 */
}

/* 左側兩顆按鈕（橫排） */
.about-topbar__left{
  display:flex; /* 讓兩顆按鈕並排 */
  align-items:center; /* 垂直置中 */
  gap:28px; /* 兩顆按鈕的距離（可改） */
}

/* 每一顆按鈕（你之後想微調就改 transform） */
.about-card{
  display:inline-flex; /* 讓 a 包住圖片 */
  text-decoration:none; /* 去掉底線 */
  transform:translate(0px,0px); /* 位置微調：X=左右、Y=上下（你喜歡的方式） */
}

.about-card__img{
  width:clamp(160px,18vw,240px); /* 按鈕大小 RWD（你可改三個數字） */
  height:auto; /* 保持比例 */
  display:block; /* 去除圖片底部空隙 */
}

/* 右側 slogan（你之後想微調就改 transform） */
.about-slogan{
  width:clamp(260px,34vw,520px); /* slogan 大小 RWD（你可改） */
  height:auto;
  display:block;
  transform:translate(-45px,0px); /* 位置微調：X=左右、Y=上下 */
}

/* =====Ｌ482 起：關於洞見治療師簡介（HTML/CSS 重製；人像保留原圖）===== */

.about-profiles{
  --about-ink: #595757;
  --about-text: #3c3c3c;
  --about-left: #f7f8f8;
  --about-right: #fbe1ba;
  --about-peach: #f6deb8;
  --about-peach-soft: #fae8cc;
  --about-gold: #d7c497;
  --about-cream: #f2f0ea;
  background: #fff;
}

.about-profiles__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.about-profile{
  scroll-margin-top: 130px;
}

.about-profile__card{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 0;
  background:
    linear-gradient(90deg, var(--about-left) 0 52%, var(--about-right) 52% 100%);
  color: var(--about-text);
  box-shadow: 0 8px 28px rgba(89, 87, 87, 0.06);
}

.about-profile__decor{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.about-profile__shape{ position: absolute; display: block; }

/* 桌機：半透明米色橫帶 */
.about-profile__shape--band{
  left: 0;
  top: 11%;
  width: 78%;
  height: 22%;
  background: rgba(251, 225, 186, 0.42);
  border: 0;
}

.about-profile__shape--panel,
.about-profile__shape--accent,
.about-profile__shape--frame,
.about-profile__shape--wedge{
  display: none; /* 手機才用 */
}

.about-profile__head,
.about-profile__body{
  position: relative;
  z-index: 1;
}

.about-profile__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3.2vw, 40px) 8px;
}

.about-profile__name{
  position: relative;
  z-index: 1;
  isolation: isolate;
  margin: 0;
  color: var(--about-ink);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.15;
}

/* 姓名下方長型黃色色塊：在名字之下、底色之上（顏色＝右側大色塊） */
.about-profile__name::after{
  content: "";
  position: absolute;
  left: -2px;                 /* ✅ 左右起點（負＝往左） */
  bottom: 0.08em;             /* ✅ 上下位置（越大越往上、越貼名字） */
  z-index: -1;                /* 壓在名字下面、底色上面 */
  width: 100px;               /* 寬度 */
  height: 0.55em;             /* ✅ 色塊高度 */
  background: var(--about-right); /* 與右側一整大塊同色 #fbe1ba */
  pointer-events: none;
}

.about-profile__role{
  position: relative;
  z-index: 2;                 /* 頭銜在色塊之上，避免被擋 */
  margin: 6px 0 0;
  color: #7a6a55;
  font-size: clamp(14px, 1.35vw, 18px);
  letter-spacing: 0.06em;
}

.about-profile__brand{
  flex: 0 0 auto;
  padding-top: 2px;
}

.about-profile__logo{
  width: clamp(88px, 10vw, 120px);
  height: auto;
  display: block;
  opacity: 0.5;
}

.about-profile__body{
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  gap: clamp(18px, 2.4vw, 34px);
  padding: 8px clamp(22px, 3.2vw, 40px) clamp(28px, 3.5vw, 44px);
  align-items: start;
}

.about-profile__main{
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
  padding-right: clamp(4px, 1vw, 12px);
}

.about-profile__aside{
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
  padding-top: clamp(4px, 1vw, 12px);
}

.about-profile__photo-wrap{
  margin: 0;
  width: min(100%, 360px);
  margin-left: auto;
  margin-right: clamp(8px, 2vw, 28px);
  aspect-ratio: 1 / 1.02;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(89, 87, 87, 0.12);
}

.about-profile__photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.about-profile__heading{
  position: relative;
  display: block;
  width: fit-content;
  isolation: isolate;
  margin: 0 0 0.55em;
  color: var(--about-ink);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.about-profile__heading::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  display: block;
  width: 72px;
  height: 8px;
  margin: 0;
  border-radius: 999px;
  background: var(--about-peach);
}

.about-profile__heading--light::after{
  background: #f9f9f9cd;
  box-shadow: inset 0 0 0 1px rgba(215, 196, 151, 0.35);
}

/* 桌機：治療理念標題隱藏（原設計桌機無此標題字樣，內容直接接在上方） */
.about-profile__heading--idea{
  display: none;
}

.about-profile__lead,
.about-profile__treat{
  font-size: clamp(13px, 1.25vw, 16.5px);
  line-height: 1.7;
  letter-spacing: 0.02em;
  max-width: 48ch;
}

.about-profile__lead p,
.about-profile__treat p{
  margin: 0 0 0.85em;
}

.about-profile__lead p:last-child,
.about-profile__treat p:last-child{
  margin-bottom: 0;
}

.about-profile__list{
  margin: 0;
  padding-left: 1.15em;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.65;
}

.about-profile__list li{
  margin: 0.18em 0;
}

.about-profile__col--career .about-profile__list{
  max-width: 42ch;
}

/* 廖資歷較長：桌機右側欄略緊一點（手機與專長／治療理念同字級） */
.about-profile--liao .about-profile__col--career .about-profile__list{
  font-size: clamp(12px, 1.1vw, 14.5px);
  line-height: 1.55;
}

/* ===== 桌機版：依原設計稿比例定位 ===== */
@media (min-width: 768px){
  .about-profile__card{
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    background:
      linear-gradient(90deg, var(--about-left) 0 50%, var(--about-right) 50% 100%);
  }

  .about-profile__shape--band{
    top: 8.5%;
    width: 88%;
    height: 27%;
  }

  /* 照片與長方形色帶之間的金色透明外框（向右下錯位） */
  .about-profile__shape--accent{
    display: block;
    left: 4.2%;
    top: 10.5%;
    width: 83.8%;
    height: 26.5%;
    border: 1.5px solid rgba(215, 196, 151, 0.82);
    background: rgba(215, 196, 151, 0.06);
  }

  .about-profile__head{
    position: absolute;
    inset: 0;
    padding: 0;
    z-index: 3;
    pointer-events: none;
  }

  .about-profile__identity{
    position: absolute;
    top: 4.8%;
    left: 30%;
    display: flex;
    align-items: baseline;
    gap: clamp(8px, 1vw, 14px);
    white-space: nowrap;
  }

  .about-profile__name{
    font-size: clamp(12px, 2.55vw, 20px);
    letter-spacing: 0.08em;
  }

  .about-profile__role{
    margin: 0;
    font-size: clamp(12px, 1.15vw, 15px);
  }

  .about-profile__brand{
    position: absolute;
    top: 1.8%;
    right: 1.8%;
    padding: 0;
  }

  .about-profile__logo{
    width: clamp(76px, 8vw, 104px);
  }

  .about-profile__body{
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
  }

  .about-profile__main,
  .about-profile__aside{
    display: contents;
  }

  .about-profile__lead,
  .about-profile__col--skill,
  .about-profile__treat,
  .about-profile__photo-wrap,
  .about-profile__col--career{
    position: absolute;
    margin: 0;
  }

  .about-profile__lead{
    left: 10%;
    top: 17.5%;
    width: 37.5%;
    max-width: none;
  }

  .about-profile__col--skill{
    left: 10%;
    top: 41.5%;
    width: 37.5%;
  }

  .about-profile__treat{
    left: 10%;
    top: 72%;
    width: 37.5%;
    max-width: none;
  }

  .about-profile__photo-wrap,
  .about-profile--liao .about-profile__photo-wrap{
    left: 54%;
    top: 9.5%;
    right: auto;
    width: 28.3%;
    aspect-ratio: 360 / 365;
  }

  .about-profile__col--career{
    left: 54%;
    top: 41.5%;
    width: 43%;
    white-space: nowrap;
  }

  .about-profile__heading{
    font-size: clamp(22px, 1.6vw, 28px);
    margin-bottom: 0.5em;
  }

  .about-profile__heading::after{
    left: 10px;
    bottom: 0;
    width: clamp(100px, 5vw, 120px);/* 色塊寬度 */
    height: clamp(10px, 0.65vw, 12px);/* 色塊高度 */
    margin: 0;
    transform: none;
  }

  /* ✅ 治療方式色塊：單獨調整（不影響專長／資歷） */
  .about-profile__treat .about-profile__heading::after{
    left: 10px;                              /* ✅ 左右 */
    bottom: 0;                               /* ✅ 上下 */
    width: clamp(100px, 5vw, 120px);         /* ✅ 寬度 */
    height: clamp(10px, 0.65vw, 12px);       /* ✅ 高度 */
  }

  .about-profile__lead,
  .about-profile__treat{
    font-size: clamp(13px, 1.05vw, 16px);
    line-height: 1.65;
  }

  .about-profile__list{
    font-size: clamp(13px, 1.05vw, 16px);
    line-height: 1.55;
  }

  .about-profile--liao .about-profile__col--career .about-profile__list{
    font-size: clamp(11px, 0.95vw, 12.5px);
    line-height: 1.45;
  }
}

/* ===== 手機版 ===== */
@media (max-width: 767px){
  /* topbar：直排置中 */
  .about-topbar__inner{
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .about-topbar__left{
    justify-content: center;
    gap: 16px;
  }
  .about-card__img{
    width: clamp(140px, 42vw, 200px);
  }
  .about-slogan{
    width: clamp(240px, 86vw, 520px);
    transform: translate(0, 0);
  }

  .about-profiles__inner{
    padding: 12px 14px 36px;
    gap: 28px;
  }

  .about-profile__card{
    position: relative;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: #f7f8f8;
    overflow: hidden;
    width: 100%; /* 寬度維持原本，不往右加寬 */
  }

  .about-profile__shape--band{ display: none; }

  .about-profile__shape--panel{
    display: block;
    left: 0;
    top: 52px;
    width: 78%;
    height: 118px;
    background: var(--about-peach-soft);
    z-index: 0;
  }

  .about-profile__shape--frame{
    display: block;
    left: 10px;
    top: 36px;
    width: calc(100% - 78px);
    height: 156px;
    border: 1.5px solid var(--about-gold);
    background: transparent;
    z-index: 1;
  }

  .about-profile__shape--wedge{
    display: block;
    right: 0;
    bottom: 0;
    top: 36px; /* 尖角延伸到金色框上緣 */
    width: 72%;
    height: auto;
    background: var(--about-peach-soft);
    /* 直角在右下；尖角在右上貼齊金色框 */
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    z-index: 0;
    opacity: 0.95;
  }

  .about-profile__head{
    position: relative;
    z-index: 2;
    display: block;
    padding: 42px 14px 12px 28px;
    min-height: 218px;
  }

  .about-profile__brand{ display: none; }

  .about-profile__identity{
    position: relative;
    z-index: 2;
    padding-top: 48px;
    max-width: 54%;
  }

  .about-profile__name{
    font-size: clamp(12px, 7.2vw, 22px);
    letter-spacing: 0.08em;
  }

  .about-profile__role{
    margin-top: 8px;
    font-size: 14px;
    color: var(--about-ink);
  }

  .about-profile__body{
    position: static; /* 讓人像 absolute 相對卡片定位 */
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 18px 28px;
  }

  /* 照片提到卡片層絕對定位（對齊手機版原設計） */
  .about-profile__aside{
    display: contents;
  }

  .about-profile__photo-wrap,
  .about-profile--yao .about-profile__photo-wrap,
  .about-profile--liao .about-profile__photo-wrap{
    position: absolute;
    top: 28px;
    right: 10px;
    width: min(42vw, 168px); /* 院長／廖治療師同尺寸 */
    margin: 0;
    aspect-ratio: 360 / 365;
    z-index: 3;
    box-shadow: 0 4px 14px rgba(89, 87, 87, 0.14);
  }

  .about-profile__col--career{
    order: 4;
    white-space: nowrap; /* 資歷不換行；內容變多時灰底往下拉長 */
    width: 100%;
    max-width: 100%;
    /* 不用 overflow-x，避免左側黑點被裁半；也不額外 padding，避免視覺明顯右移 */
  }

  /* 專長／資歷：自訂黑點，樣式一致且不被裁切 */
  .about-profile__col--skill .about-profile__list,
  .about-profile__col--career .about-profile__list{
    list-style: none;
    padding-left: 0;
    margin-left: 0;
  }

  .about-profile__col--skill .about-profile__list li,
  .about-profile__col--career .about-profile__list li{
    position: relative;
    padding-left: 1.15em;
  }

  .about-profile__col--skill .about-profile__list li::before,
  .about-profile__col--career .about-profile__list li::before{
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
  }

  .about-profile__main{
    display: contents;
  }

  .about-profile__lead,
  .about-profile__col,
  .about-profile__treat{
    position: relative;
    z-index: 2;
  }

  .about-profile__lead{ order: 1; }
  .about-profile__col--skill{ order: 2; }
  .about-profile__treat{ order: 3; }

  .about-profile__heading--idea{
    display: block;
  }

  .about-profile__heading{
    font-size: 16px;
    letter-spacing: 0.08em;
  }

  .about-profile__heading::after{
    left: 0;
    bottom: 0;
    width: 65px;
    height: 7px;
    margin: 0;
  }

  /* ✅ 手機：治療方式色塊單獨調整 */
  .about-profile__treat .about-profile__heading::after{
    left: 0;
    bottom: 0;
    width: 65px;   /* ✅ 寬度 */
    height: 7px;   /* ✅ 高度 */
  }

  .about-profile__heading--light::after{
    background: var(--about-peach);
    box-shadow: none;
  }

  .about-profile__lead,
  .about-profile__treat,
  .about-profile__list,
  .about-profile__col--career .about-profile__list,
  .about-profile--liao .about-profile__col--career .about-profile__list{
    max-width: none;
    font-size: clamp(11px, 3.5vw, 13.5px); /* 專長／治療理念／資歷同一字級 */
    line-height: 1.55;
  }

  .about-profile__lead p,
  .about-profile__treat p{
    margin: 0 0 0.55em;
  }
}

/* 治療項目中等視窗：icon 導覽列補丁 */
@media (min-width: 768px) and (max-width: 1100px){
  .treat-nav__inner{
    transform: none;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .treat-nav__inner::-webkit-scrollbar{ display: none; }
  .treat-nav__row{ gap: clamp(8px, 1.8vw, 24px); }
  .treat-nav__icon{ width: clamp(42px, 5vw, 60px); height: clamp(42px, 5vw, 60px); }
  .treat-nav__label{ font-size: clamp(11px, 1.1vw, 14px); }
}

/* ===== 治療項目 icon 導覽列 ===== */
.treat-nav{
  position:fixed;            /* ✅桌機固定在 header 下方（不隨整頁捲動） */
  top:110px;                 /* 跟 body padding-top 一致（=header 高度） */
  left:0;
  right:0;
  z-index:800;               /* 在內容之上、header 之下 */
  background:#f9f9f9;          /* ✅給背景色（跟 body 同色，視覺上「看不到」但可擋住下面的內容） */
  border-bottom:none; /* 底部細線目前先拿掉 */
  padding:20px 0 12px;
}

.treat-nav__inner{
  max-width:1200px;          /* 跟 header 同寬 */
  margin:0 auto;
  padding:0 20px;
  transform:none;  /* ✅ 把 clamp(0px,5vw,60px) 改成 none */
}

/* 每一排 */
.treat-nav__row{
  display:flex;
  justify-content:center;   /* 整排置中 */
  gap:clamp(8px,2vw,24px);  /* ✅ 原本固定 24px */
  margin-bottom:8px;
}
.treat-nav__row:last-child{
  margin-bottom:0;
}

/* 每個 icon 按鈕 */
.treat-nav__item{
  display:flex;
  flex-direction:column;     /* icon 上、文字下 */
  align-items:center;
  text-decoration:none;
  padding:6px 6px;          /* 內距（可調） */
  border-radius:8px;
  transition:opacity .2s ease;
  cursor:pointer;
}
.treat-nav__item:hover{
  opacity:.65;               /* 滑鼠經過變淡 */
}

/* 第一排：8 個等寬 */
.treat-nav__row:first-child .treat-nav__item{
  flex:0 0 auto;   /* ✅不要自動撐開，icon 多大就多大 */
}

/* icon 圖片 */
.treat-nav__icon{
  width:clamp(44px,5vw,60px);
  height:clamp(44px,5vw,60px);
  object-fit:contain;
  margin-bottom:4px;
}

/* icon 下方文字 */
.treat-nav__label{
  font-size:clamp(11px,1.2vw,14px);
  font-weight:600;
  text-align:center;
  line-height:0.5;
  color:#555;
  white-space:nowrap;        /* 不換行（短文字用） */
}

/* 第二排影片項目文字較長，允許換行 */
.treat-nav__row:last-child .treat-nav__label{
  white-space:nowrap;        /* normal允許換行nowrap不可換行 */
  max-width:200px;           /* 限制寬度避免太寬（可調） */
}

/* 內容區 */
.treat-section{
  position:relative;           /* ✅讓背景圖可以 absolute 定位在裡面 */
  max-width:1200px;
  margin:0 auto;
  padding:40px 20px 60px;
  scroll-margin-top:350px;   /* 點錨點時不被 header+icon列 擋住（可調） */
  min-height:500px;          /* 讓 sticky 有空間生效 */
}
/* main 要在 header + icon列 下方開始 */
.treat-main{
  padding-top:220px;   /* ✅調整這個數字 = icon 列的高度（可調 180~260px） */
}
/* 文章背景圖：固定在320px位置，不隨頁面捲動，填滿下方可視區域 */
.treat-bg{
  position:fixed;            /* ✅固定，不隨頁面捲動 */
  top:270px;                 /* ✅固定在320px位置（可調） */
  left:0;
  right:0;
  bottom:0;                  /* ✅延伸到視窗底部 */
  width:100%;
  height:calc(100vh - 270px); /* ✅從320px到視窗最下面 */
  object-fit:fill;           /* ✅SVG 撐滿整個區域 */
  z-index:0;
  pointer-events:none;
}

/* 文章內容兩欄排版：左 icon + 右文字，在背景上層 */
.treat-layout{
  display:grid;
  grid-template-columns:220px 1fr; /* ✅左欄寬度 220px（可調）| 右欄佔滿剩餘 */
  gap:0 40px;                      /* ✅左右欄間距（可調） */
  align-items:start;
  position:relative;
  z-index:1;
}

/* 左欄：icon 欄位 */
.treat-icon-col{
  position:fixed;
  top:320px;                         /* 左欄固定高度 */
  left:clamp(20px, 4vw, 60px);       /* 左欄固定水平位置 */
  width:220px;                       /* 固定欄寬，避免亂跳 */
  z-index:20;
}

/* 大 icon：大小和位置都在這裡調 */
.treat-icon{
  width:180px;   /* ✅icon 大小（可調 120px~260px） */
  height:auto;
  display:block;
  transform:translate(40px, 0px); /* ✅位置微調：改 X,Y 數字 */
}
/* ✅ 桌機：只縮「兩支影片頁」左側場記板（不影響五十肩等其他項目） */
#exercise-video .treat-icon,
#visceral-video .treat-icon{
  width:120px; /* ✅桌機影片 icon 大小（可調，例如 120~160） */
}

/* ✅ 桌機專用：兩支影片頁，icon 下方標題往下（min-width 避免影響手機） */
@media (min-width: 768px){
  #exercise-video .treat-icon-label,
  #visceral-video .treat-icon-label{
    margin-top: 20px; /* ✅ 數字越大越往下 */
    transform: translate(20px, 0px); /* ✅ 第二個數字也可再往下 */
  }
}
/* 大icon 下方標題文字 */
.treat-icon-label{
  text-align:center;
  font-size:25px;     /* ✅字級（可調） */
  font-weight:700;
  color:#555;       /* ✅顏色 */
  margin-top:-20px;   /* ✅icon 與文字的距離（可調） */
  letter-spacing:2px;
  transform:translate(20px, 0px); /* ✅位置微調：改 X,Y 數字 */
}

/* 兩行標題：整塊仍置中，行內左對齊 →「讓」與「【」左邊切齊 */
.treat-icon-label--stack{
  text-indent: 0.6em; /* 負數＝第一行往左；正數＝第一行往右 */
  text-align:left;
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
}
/* 右欄：文章內容整體位置 */
.treat-body{
  position:fixed;
  top:320px;                         /* 跟左欄同一水平線 */
  left:300px;   /* ✅ 改回原本的 300px，永遠在 icon 欄右邊（icon 最寬約 280px）*/
  right:30px;
  bottom:70px;                       /* 避開 footer */
  overflow-y:auto;                   /* 只讓右欄捲動 */
  overflow-x:hidden;
  overscroll-behavior:contain;       /* 避免捲動傳遞到整頁 */
  padding:1.5cm 1cm;
  /*如果你只想調「第一行離上邊框」就改第一個數字（0.5cm）。
如果想讓文字不要太靠左/右，就改第二個數字（1cm）。*/
  min-width:0;
  font-size:clamp(12px,1.2vw,16px);  /* ✅ 加這行：字跟視窗一起縮 */
 /* 隱藏捲軸：Firefox / 舊Edge */
 scrollbar-width:none;
 -ms-overflow-style:none;
}
/* 隱藏捲軸：Chrome / Safari / Edge */
.treat-body::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}
.treat-body::-webkit-scrollbar-thumb{
  background:transparent !important;
}
/* 文章內容的文字間距控制 */
.treat-body p{
  margin:0 0 6px 0;    /* ✅段落下方間距（可調 4~10px） */
  line-height:1.3;    /* ✅行高（可調） */
  text-align:justify; /* ✅內文左右兩端對齊；不要對齊改 left */
}
.treat-body h4{
  margin:18px 0 4px 0; /* ✅標題上方 18px、下方 4px（可調） */
  font-size:15px;
  font-weight:700;
}
/* 讓每個項目文章第一行都一樣高 */
.treat-body > :first-child{
  margin-top:0;
}
.treat-body::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}
.treat-body::-webkit-scrollbar-thumb{
  background:transparent !important;
}
 /* 整頁不捲，只捲右欄 */
body.treat-page{
  overflow:hidden;  /* 整頁不捲，只捲右欄 */
}
/* ✅ 桌機治療項目：連 html 也不准捲（避免 icon 列被整頁捲走）；
   仍用 scrollbar-gutter 預留寬度，logo 不因無捲軸而跑位 */
html:has(body.treat-page){
  overflow-y:hidden;
  scrollbar-gutter:stable;
}

/*因為現在所有項目的頁面都重疊在一起; 
做法是：只顯示目前 hash 對應的那一段，避免 fixed 元素重疊 */
body.treat-page .treat-section{
  display:none;
}
body.treat-page .treat-section.is-active{
  display:block;
}

/* ===== 治療項目與治療方式下拉選單（極簡版：保持原貌、無白底、無特效）===== */
.has-submenu{
  position:relative;
  transform:translateY(-2px);
   /* ✅✅✅✅✅✅
      原本治療項目與治療方式選項，會跟旁邊選項有一點點距離，
      這邊調整成跟旁邊選項同一條線，所以往上微調 2px
      往上微調 2px（偏多就改 -1px，不夠就改 -3px） */
}
/* 主項：強制跟 .main-nav a 一樣（避免變黑/變大） */
.main-nav .nav-submenu-toggle{
  background:transparent;
  border:0;
  margin:0;              /* 清除 button 預設 margin */
  padding:0 10px;        /* 跟 .main-nav a 一樣 */
  line-height:32px;      /* 跟 .main-nav a 一樣 */
  font-size:14px; /* ← 改這行，原本是 14px */
  font-weight:600;       /* 跟 .main-nav a 一樣 */
  letter-spacing:1px;    /* 跟 .main-nav a 一樣 */
  color:#265581;         /* 跟 .main-nav a 一樣 */
  font-family:inherit;   /* button 預設字型不繼承，要手動指定 */
  white-space:nowrap;    /* 跟 .main-nav a 一樣不換行 */
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* 保留你原本的「文字上升」效果（跟旁邊選項一致） */
.main-nav .nav-submenu-toggle{overflow:hidden;}
.main-nav .nav-submenu-toggle span{position:relative;display:inline-block;transition:transform .25s ease;}
.main-nav .nav-submenu-toggle span::after{content:attr(data-text);position:absolute;left:0;top:100%;width:100%;color:#265581;}
.has-submenu:hover .nav-submenu-toggle span{transform:translateY(-100%);} /* 桌機滑過 */

/* ✅小實心倒三角 */
.nav-caret{
  width:0;height:0;
  border-left:3px solid transparent;
  border-right:3px solid transparent;
  border-top:5px solid #265581;
  transform:translateY(1px);
}

/* 桌機下拉：無白底、無陰影、無 hover 背景，只做直式列表 */
.main-nav .submenu{
  top:100%; /* ✅沒有空隙：滑鼠從主選單移到下拉不會斷掉 */
  position:absolute;
  left:0;        /* 靠左貼齊父層 li */
  transform:none;/* 取消置中位移 */
  align-items:flex-start; /* 內容靠左 */
  justify-content:flex-start; /* ✅也補上，避免垂直方向被置中 */
  margin:0;
  padding:6px 12px; /* ✅左邊留 12px，視覺上就是靠左且整齊 */
  list-style:none;
  display:flex;
  flex-direction:column;     /* ✅直式 */
  gap:0px;                  /* ✅每個選項距離（想更近就改 6px~8px） */
  background:rgba(245,245,245,.90); /* ✅header 灰 #F5F5F5，透明度 90% */
  border:0;                  /* ✅不要外框 */
  box-shadow:none;           /* ✅不要陰影 */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:2500;
  width:340px; /* ✅每個項目撐滿子選單寬度，視覺一定是靠左，數字越大背景越寬 */
}

.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
/* ===== 子選單：統一乾淨版（不跳動 + 灰底25% + 靠左 + 滑過變綠） ===== */

/* 子項：純文字直式清單（無膠囊、無底色） */
.main-nav .submenu a{
  display:block;              /* 整行可點、自然靠左 */
  padding:2px 0; /* ✅行距更緊（你可用 0~4px 微調） */   
  text-decoration:none;
  color:#265581;
  font-size:14px;             /* 跟導覽列一致 */
  font-weight:600;
  letter-spacing:1px;
  line-height:1.6;
  background:transparent;
  border:0;
  border-radius:0;
  width:100%;
  text-align:left;            /* ✅保險：文字靠左 */
}

/* ✅子選單內：禁用「文字上升」跳動（只留顏色變化） */
.main-nav .submenu a span::after{display:none;}
.main-nav .submenu a:hover span{transform:none;}

/* ✅滑過只變綠色（不變背景） */
.main-nav .submenu a:hover{color:#1D9A99;}

/* 手機：主選單本來就是深色文字，這裡維持你既有手機選單樣式 */
@media (max-width:960px){  /* ← 原本是 767px 為了平板也顯示漢堡選單所以改*/
  .main-nav .nav-submenu-toggle{
    width:100%;
    justify-content:space-between;
    padding:14px 18px;
    line-height:normal;
    color:#333; /* ✅手機選單維持深色（跟你現有 .main-nav a 一樣） */
    font-size:14px;
  }

  .nav-caret{border-top-color:#333;} /* 手機倒三角跟文字同色 */

  .main-nav .nav-submenu-toggle span::after{display:none;} 
  /* 手機不做上升複製字 */
  .has-submenu:hover .nav-submenu-toggle span{transform:none;} 
  /* 手機不做 hover */

  .main-nav .submenu{   /* ✅改：加 .main-nav 讓權重跟桌機一樣 */
    position:static;
    transform:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
    gap:0;
    background:rgba(220,220,220,.35); 
    /* 深一點的灰底（數字越小越深，透明度越大越實） */
    align-items:stretch;  /* ✅每個 li 撐滿寬度，分隔線才會等長 */
  }

  .has-submenu.is-sub-open .submenu{max-height:1200px;}
  
  .main-nav .submenu li{
    border-bottom:1px solid #ccc;  /* ✅需求1：每一欄統一的分隔線（全寬） */
  }
  .main-nav .submenu li:last-child{
    border-bottom:none;            /* ✅最後一個不要底線 */
  }

  .main-nav .submenu a{   /* ✅改：加 .main-nav 讓權重跟桌機一樣 */
    display:block;  /* ✅撐滿整欄（分隔線才會等寬） */
    color:#333;
    padding:12px 10px;
    /* ✅原本 28px → 改10px，左右多出 空間 */
    font-size:13.5px;
    line-height:1.35;
    white-space:normal;
    transition:background .15s ease; /* ✅需求3：點下去背景變色的過渡 */
  }
  .main-nav .submenu a:active{
    background:#fff;               /* ✅需求3：手指按下時背景變白色 */
  }

  .main-nav .submenu a:hover{
    color:#333;                    /* ✅需求4：手機版不要變綠，維持原色 */
    background:#fff;               /* ✅hover 也給白底（手機 hover = 點擊後短暫觸發） */
  }
}
/*治療項目影片區塊*/
.video-wrap{
  width:100%;
  max-width:750px;/*影片佔畫面的寬度*/
  aspect-ratio:16/9;/*影片比例*/
  margin-left:auto;      /* ✅往右靠 */
  margin-right:180px;        /* ✅貼右邊只靠右一點，不要完全貼邊」，改成  margin-right:20px;*/
  margin-top:-20px;        /* ✅往上靠，改成  margin-top:20px;*/
}
.video-wrap iframe,
.video-wrap video{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
/*影片標題不換行*/
.nowrap{
  white-space:nowrap;
}
.treat-back-btn{ display:none; }  /* 手機版的回選單按鈕，在桌機永遠隱藏 */
@media (max-width:767px){

    /* ===== 手機版：治療項目導覽列（垂直清單）===== */

    .treat-nav{
      position:static;
      top:auto;
      z-index:auto;
      background:transparent;
      padding:16px 0 8px;      /* ✅ 上下間距（可調） */
    }
  
    .treat-nav__inner{
      display:flex;
      flex-direction:column;
      gap:10px;                /* ✅ 每個按鈕上下間距（可調） */
      padding:0 16px;          /* ✅ 左右邊距（可調） */
      transform:none;
    }
  
    .treat-nav__row{
      display:contents;
    }
  
    .treat-nav__item{
      display:flex;
      flex-direction:row;
      align-items:center;
      gap:14px;                /* ✅ icon 與文字間距（可調） */
      position:relative;           /* 讓 ::before 可以 absolute 定位 */
    /* background 相關全部拿掉 */
    padding:10px 20px;
    min-height:70px;
    width:100%;
    box-sizing:border-box;
    text-decoration:none;
    border-radius:0;
    }
    .treat-nav__item::before{
      content:'';
      position:absolute;
      top:0;
      left:20px;           /* ✅ 這裡調背景往右的距離 */
      right:0;
      bottom:0;
      background-image:url(images12232025/按鈕背景＿手機版.png);
      background-size:100% 100%;
      background-repeat:no-repeat;
      z-index:0;           /* 背景在最下層 */
      pointer-events:none;
    }
  
    .treat-nav__icon{
      width:65px;              /* ✅ icon 大小（可調） */
      height:65px;
      object-fit:contain;
      flex-shrink:0;
      display:block;
      transform:translate(-30px,0px); /* ✅ icon 位置微調（可調） */
    }
  
    .treat-nav__label{
      display:block !important;
      font-size:18px;          /* ✅ 文字大小（可調） */
      color:#333;
      font-weight:500;
      letter-spacing:1px;
      line-height:1.3;
      transform:translate(-45px,0px); /* ✅ 文字位置微調（可調） */
    }
        /* ✅✅✅修補：「【內臟筋膜鬆動術】」開頭的全形括號自帶左邊留白，
       讓它往左拉一點，跟其他項目視覺對齊 */
       .treat-nav__item[href="#visceral-video"] .treat-nav__label{
        margin-left: -0.55em;   /* ✅ 對齊微調（可調 -0.3em ~ -0.6em） */
      }
    .treat-nav__icon,.treat-nav__label{
    position:relative;
    z-index:1;
  }
    /* 洞見治療方式排第一 */
    .treat-nav__row:last-of-type  .treat-nav__item:nth-child(1){ order:1;  }
    .treat-nav__row:first-of-type .treat-nav__item:nth-child(1){ order:2;  }
    .treat-nav__row:first-of-type .treat-nav__item:nth-child(2){ order:3;  }
    .treat-nav__row:first-of-type .treat-nav__item:nth-child(3){ order:4;  }
    .treat-nav__row:first-of-type .treat-nav__item:nth-child(4){ order:5;  }
    .treat-nav__row:first-of-type .treat-nav__item:nth-child(5){ order:6;  }
    .treat-nav__row:first-of-type .treat-nav__item:nth-child(6){ order:7;  }
    .treat-nav__row:first-of-type .treat-nav__item:nth-child(7){ order:8;  }
    .treat-nav__row:first-of-type .treat-nav__item:nth-child(8){ order:9;  }
    .treat-nav__row:last-of-type  .treat-nav__item:nth-child(2){ order:10; }
    .treat-nav__row:last-of-type  .treat-nav__item:nth-child(3){ order:11; }
  /* ===== 手機版：內容區（icon+文字在上層，背景在下層） ===== */
   
  /* 手機預設：顯示主選單，隱藏內容區 */
    .treat-main{
      display:none;
    }
  
    /* 手機點選項目後：隱藏主選單，顯示內容 */
    body.treat-page.show-section .treat-nav{
      display:none;
    }
    body.treat-page.show-section .treat-main{
      display:block;
    }
  
    /* 回主頁按鈕：固定在畫面底部 */
    .treat-back-btn{
      display:none;               /* 預設隱藏 */
      position:fixed;
      bottom:150px;                /* ✅ 距底部（可調，頁尾高度 + 約 0.5cm）數字越大越高 */
      right:20px;                 /* ✅ 左右位置（可調） */
      z-index:900;
      background:none;
      border:none;
      cursor:pointer;
      padding:0;
      width:63px;                 /* ✅ 按鈕大小（可調） */
      height:63px;
    }
    .treat-back-btn img{
      width:100%;
      height:100%;
      object-fit:contain;
    }
  
    /* 進入內容頁才顯示回主頁按鈕 */
    body.treat-page.show-section .treat-back-btn{
      display:block;
    }

  body.treat-page{
    overflow:auto;               /* ✅整頁恢復可捲動 */
    height:auto;
  }
  /* 手機治療項目恢復可捲（覆蓋上面的 html:has 規則） */
  html:has(body.treat-page){
    overflow-y:auto;
    scrollbar-gutter:auto;
  }

  .treat-main{
    padding-top:8px;             /* ✅內容起始高度（可調） */
  }

  .treat-section{
    position:relative;
    max-width:100%;
    overflow:hidden;         /* ✅ 加這行：整個 section 不超出螢幕寬度 */
    margin:0 auto 12px;
    padding:10px 10px 12px;
    min-height:auto;
    scroll-margin-top:120px;
  }

  .treat-bg{
    position:absolute;
    top:-230px;        /* ✅ 你的起始位置，維持這個數字 */
    left:0;
    right:0;
    bottom:0;          /* ✅ 延伸到 section 的底部 → 背景自動跟內容等長 */
    width:100%;
    /* height 不要寫 → 由 top 和 bottom 決定高度 */
    object-fit:fill;
    z-index:0;
    pointer-events:none;
  }

  .treat-layout{
    position:relative;
    z-index:1;                   /* ✅內容在背景上層 */
    display:block;               /* 手機改單欄 */
  }

  .treat-icon-col{
    position:relative;           /* ✅取消固定定位 */
    top:auto;
    left:auto;
    width:auto;
    z-index:2;                   /* ✅icon 在上層 */
    transform:translate(0px, 0px); /* ✅整組 icon+標題位置（可調） */
    margin-bottom:6px;
  }

  /* 手機內文治療項目icon */
  .treat-icon{
    width:100px;                 /* ✅icon 尺寸（可調） */
    height:auto;
    display:block;
    transform:translate(0px, 0px); /* ✅icon 位置（可調） */
  }
  /* ✅ 手機：只縮「兩支影片頁」左側場記板（維持原本 absolute 位移排版） */
  #exercise-video .treat-icon,
  #visceral-video .treat-icon{
    width:80px; /* ✅手機影片 icon 大小（可調，例如 70~90） */
    transform:translate(0px, 0px); /* ✅ 第二個數字＝上下（正＝下移） */
  }

   /* 手機內文治療項目標題 */
  .treat-icon-label{
    font-size:22px;              /* ✅icon 右側/下方文字尺寸（可調） */
    line-height:1.1;
    margin-top:-8px;
    letter-spacing:0;
    transform:translate(100px, -55px); /* ✅文字位置（可調） */
    text-align:left;
    color:#555;
  }

  /* ✅ 手機專用：兩支影片標題各自獨立調整（不影響桌機、也不互相影響） */
  #exercise-video .treat-icon-label{
    transform: translate(4px, -50px); /* ✅ 運動治療：第一個＝左右，第二個＝上下 */
    font-size: 22px;                    /* ✅ 字級 */
    text-indent:0.5em;                     /* ✅ 第一行微調（正往右、負往左） */
  }

  #visceral-video .treat-icon-label{
    transform: translate(105px, -50px); /* ✅ 內臟筋膜：第一個＝左右，第二個＝上下 */
    font-size: 22px;                    /* ✅ 字級 */
    text-indent: -0.55em;               /* ✅ 全形【 視覺對齊微調 */
  }

  .treat-body{
    position:relative;           /* ✅取消 fixed */
    top:auto;
    left:auto;
    right:auto;
    bottom:auto;
    overflow-x:clip;         /* ✅ 禁止左右溢出；用 clip 避免 overflow-y:visible 被算成 auto */
    overflow-y:visible;      /* ✅ 上下交給整頁捲動 */
    overscroll-behavior:auto; /* ✅ 覆寫桌機 contain，避免手勢被隔離 */
    padding:0 10px 10px;         /* ✅內文區位置（可調） */
    min-width:0;
    max-width:100%;          /* ✅ 加這行：限制寬度不超出螢幕 */
    box-sizing:border-box;   /* ✅ 加這行：padding 包含在寬度內 */
    z-index:2;                   /* ✅內文在背景上層 */
    transform:translate(0px, -30px); /* ✅內文整體位置（可調） */
  }

  .treat-body p{
    margin:0 0 8px 0;
    line-height:1.45;
    font-size:15px;
    color:#000000;           /* ✅ 顏色（可調） */
  }

  .treat-body h3{
    margin:14px 0 6px 0;
    font-size:18px;
    line-height:1.25;
  }

  .treat-body h4{
    margin:10px 0 6px 0;
    font-size:15.5px;
    line-height:1.25;
  }

  .treat-body::-webkit-scrollbar{display:none;}
}

/* =============================================
   治療流程與收費標準 頁面（梳理過：base / 桌機 / 手機 三層）
   ============================================= */

/* -----------------------------------------------
   ❶ 共用 base（桌機 / 手機 都套用）
   ----------------------------------------------- */

/* 背景（桌機 SVG，預設） */
.price-page {
  background-image: url(images12232025/治療流程與收費標準_背景_桌機.svg);
  background-attachment: fixed; /* ✅ 維持原本格子大小／視差，不要改成 scroll */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 整頁主容器 */
.price-main {
  max-width: 860px;          /* ✅ 兩塊方塊的最大總寬（可調） */
  margin: 0 auto;            /* 水平置中 */
  padding: 48px 24px 80px;   /* ✅ 上 / 左右 / 下 留白（可調） */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 48px;                 /* ✅ 兩塊之間距（可調） */
}

/* 每一大區（治療流程 / 收費標準） */
.price-unit {
  width: 100%;
  box-sizing: border-box;
}

/* 標題 */
.price-unit__title {
  font-size: 24px;           /* ✅ 標題字級（base，桌機沿用） */
  font-weight: 700;
  color: #555;               /* ✅ 標題顏色（可調） */
  margin: 0 0 10px;          /* ✅ 標題與灰色方塊的間距（可調） */
}

/* 清單 */
.price-unit__list {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-left: 1.4em;       /* ✅ 數字編號縮排（base） */
  font-size: 16px;           /* ✅ 內文字級（base，桌機沿用） */
  line-height: 1.8;          /* ✅ 行距（可調） */
  color: #555;               /* ✅ 內文顏色（base，桌機沿用） */
}

.price-unit__list li {
  margin-bottom: 12px;       /* ✅ 每條之間的距離（可調） */
}

.price-unit__list li:last-child {
  margin-bottom: 0;
}

/* 影片 + 毛玻璃 + 預約按鈕外層 */
.price-stage {
  position: relative;
  width: 100%;
}

/* 毛玻璃色塊（桌機才顯示；高度可比影片矮，不裁切影片） */
.price-glass {
  display: none;
  pointer-events: none;
}

/* 影片區塊 */
.price-unit--video {
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

.price-video-wrap {
  width: 100%;
  max-width: 320px;          /* ✅ 影片最大寬（可調） */
  aspect-ratio: 9/16;        /* ✅ 影片比例（直式） */
  border-radius: 12px;       /* ✅ 影片圓角，不要圓角改 0 */
  overflow: hidden;
  background: #fdfbfb;
}

.price-video-wrap video,
.price-video-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: cover;         /* 填滿框；不想裁切改 contain */
}

/* YouTube：靜止預覽（點擊後才嵌入，避免一進來就顯示帳號／標題） */
.price-yt {
  position: relative;
}

.price-yt__facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  cursor: pointer;
  background: #111;
  overflow: hidden;
}

.price-yt__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 直式 Shorts（治療流程）：縮圖多為橫式＋黑邊，放大裁切成直式預覽 */
.price-video-wrap.price-yt .price-yt__thumb {
  transform: scale(1.35);
}

.price-yt__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.price-yt__play::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 18px;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
}

.price-yt__facade:hover .price-yt__play,
.price-yt__facade:focus-visible .price-yt__play {
  background: rgba(200, 32, 32, 0.9);
}

.price-yt__facade:focus-visible {
  outline: 2px solid #2f6fed;
  outline-offset: 2px;
}

/* 預約按鈕 */
.price-cta {
  display: block;
  width: fit-content;
}

.price-cta__img {
  width: 150px;              /* ✅ 桌機按鈕大小（可調） */
  display: block;
}

.price-cta:hover .price-cta__img {
  opacity: 0.6;
}


/* -----------------------------------------------
   ❷ 桌機強化（螢幕寬度 ≥ 768px）
   ----------------------------------------------- */
@media (min-width: 768px) {

  /* 桌機：標題往右偏移 */
  .price-unit__title {
    padding-left: 80px;      /* ✅ 桌機標題左偏移（可調） */
  }

  /* 桌機：清單往右偏移（覆蓋 base 的 1.4em） */
  .price-unit__list {
    padding-left: 100px;     /* ✅ 桌機清單左偏移（可調） */
  }

  /* 桌機／平板：毛玻璃比影片矮、置中於影片後方；影片上下可超出；按鈕在玻璃右下
     ※ 頁面背景維持 fixed（格子大小不變） */
  .price-stage {
    --price-glass-w: 640px;    /* ✅ 毛玻璃寬度 */
    --price-glass-h: 360px;    /* ✅ 毛玻璃高度 */
    --price-glass-y: 90px;     /* ✅ 毛玻璃往下（越大越往下） */
    --price-cta-y: 30px;       /* ✅ 按鈕往下（相對玻璃底邊，越大越往下；可負值） */
    position: relative;
    display: block;
    box-sizing: border-box;
    margin-left: 80px;         /* ✅ 整組左右位置 */
    width: var(--price-glass-w)
    max-width: calc(100% - 96px);
  }

  .price-glass {
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(calc(-50% + var(--price-glass-y)));
    width: var(--price-glass-w);
    height: var(--price-glass-h);
    max-width: 100%;
    border-radius: 24px;       /* ✅ 毛玻璃圓角 */
    overflow: hidden;          /* 只裁毛玻璃自己的模糊，不裁影片 */
    z-index: 0;
    pointer-events: none;
  }
  /* 底層：複製頁面格線並模糊 */
  .price-glass::before {
    content: "";
    position: absolute;
    inset: -20px;
    z-index: 0;
    background-image: url(images12232025/治療流程與收費標準_背景_桌機.svg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(8px);        /* ✅ 模糊強度（可調 8~20） */
    pointer-events: none;
  }
  /* 上層：白透明 */
  .price-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.68); /* ✅ 最後數字：0全透～1全白 */
    pointer-events: none;
  }

  .price-unit--video {
    position: relative;
    z-index: 1;
  }

  .price-video-wrap {
    margin: 0 0 0 28px;        /* ✅ 影片相對毛玻璃左側內縮（可調） */
  }

  .price-main {
    position: relative;
  }
  .price-unit--fee .price-unit__list {
    padding-right: 0;
  }

  /* 預約按鈕：黏在毛玻璃底邊，用 --price-cta-y 往下調 */
  .price-cta {
    position: absolute;
    z-index: 2;
    right: 160px;               /* ✅ 距毛玻璃右邊（可調） */
    left: auto;
    bottom: auto;
    top: calc(50% + var(--price-glass-y) + (var(--price-glass-h) / 2) + var(--price-cta-y));
    transform: translateY(-100%);
    margin: 0;
  }
}


/* -----------------------------------------------
   ❸ 手機調整（螢幕寬度 ≤ 767px）
   ----------------------------------------------- */
@media (max-width: 767px) {

  /* 手機：換背景 SVG */
  .price-page {
    background-image: url(images12232025/治療流程與收費標準_背景_手機.svg);
    background-attachment: scroll;
    background-size: 300% auto;  /* ✅ 格子大小：100%=貼齊螢幕寬，越小格子越小 */
    background-repeat: repeat;   /* 縮小後用重複鋪滿整頁 */
    background-position: top center;
  }

  /* 手機：主容器縮小留白 */
  .price-main {
    padding: 28px 16px 60px; /* ✅ 手機上下左右留白（可調） */
    gap: 36px;               /* ✅ 手機兩塊之間距（可調） */
  }

  /* 手機：標題（獨立調，與桌機脫鉤） */
  .price-unit__title {
    font-size: 20px;         /* ✅ 手機標題字級（可調） */
    margin: 0 0 8px;         /* ✅ 手機標題下方距離（可調） */
    padding-left: 0;         /* ✅ 手機標題不偏移（reset 桌機 80px） */
  }

  /* 手機：灰色方塊（如有 .price-unit__plate 才生效） */
  .price-unit__plate {
    padding: 22px 20px;      /* ✅ 手機方塊內距（可調） */
    border-radius: 14px;
  }

  /* 手機：清單（獨立調，與桌機脫鉤） */
  .price-unit__list {
    font-size: 15px;       /* ✅ 手機內文字級（可調） */
    color: #000000;             /* ✅ 手機內文顏色（可調） */
    padding-left: 1.4em;     /* ✅ 手機只保留數字編號縮排（reset 桌機 100px） */
  }

  /* 手機：無毛玻璃，影片置中 */
  .price-stage {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
  }

  .price-glass {
    display: none !important;
  }

  .price-video-wrap {
    width: 80%;              /* ✅ 手機影片寬（可調 70%~92%） */
    max-width: 280px;
    margin: 0 auto;          /* ✅ 手機影片置中 */
    border-radius: 10px;
  }

  /* 手機：預約按鈕在影片下方靠右 */
  .price-cta {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    top: auto;
    transform: none;
    margin-left: auto;
    margin-right: 16px;      /* ✅ 距右邊（可調） */
    margin-top: 8px;         /* ✅ 跟上面距離（可調） */
    display: block;
    width: fit-content;
  }
  .price-cta__img {
    width: 110px;            /* ✅ 手機按鈕大小（可調） */
  }
}

/* =============================================
   預約系統頁面（booking12232025.html）
   架構：base / 桌機 / 手機 三層
   ============================================= */

/* -----------------------------------------------
   ❶ 共用 base
   ----------------------------------------------- */

/* 整頁背景沿用「治療流程與收費標準」的底圖 */
.booking-page {
  background-image: url(images12232025/治療流程與收費標準_背景_桌機.svg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Main 容器 */
.booking-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 74px 24px 80px;       /* ✅ 桌機上方留白（從 36 → 74，往下推約 1 公分） */
  box-sizing: border-box;
  position: relative;            /* 讓右側摘要可以 absolute 定位 */
}

/* 副標 */
.booking-subtitle {
  text-align: center;
  color: #2a6c93;                /* ✅ 副標顏色（可調） */
  font-size: 15px;
  margin: 0 0 28px;
  letter-spacing: 0.5px;
}

/* 桌機隱藏「只在手機顯示」的換行符（手機 @media 會把它打開） */
.br-mobile { display: none; }
.booking-subtitle a {
  color: #1f8f86;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.booking-subtitle a:hover { opacity: 0.75; }

/* ===== 4 步驟列 ===== */
.booking-steps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 36px;
  padding: 0;
}
.booking-step {
  appearance: none;
  border: 0;
  background: #c8c8c8;           /* ✅ 未到的步驟（灰）（可調） */
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 10px 22px;
  border-radius: 8px;
  cursor: default;
  transition: background .2s ease, transform .15s ease;
}
.booking-step.is-done {
  background: #2bb8a8;           /* ✅ 已完成（亮綠青）（可調） */
  cursor: pointer;
}
.booking-step.is-done:hover { transform: translateY(-1px); }
.booking-step.is-active {
  background: #1d3a5f;           /* ✅ 進行中（深藍）（可調） */
  cursor: default;
}

/* ===== 主內容區（單欄置中、摘要桌機 absolute 浮在右側） ===== */
.booking-body {
  display: block;                /* 內容區自然置中，不被右側摘要拉歪 */
}

.booking-content { min-width: 0; }

/* 每個 panel 預設隱藏，只顯示 is-active */
.booking-panel { display: none; }
.booking-panel.is-active { display: block; }

.booking-panel__title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #1d3a5f;
  margin: 0 0 28px;
  letter-spacing: 1px;
}

/* ===== Step 1：治療師卡片 ===== */
.therapist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 760px;
  margin: 12px auto 0;
}
.therapist-card {
  background: #fff;
  border-radius: 16px;
  padding: 30px 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  text-align: center;
}
.therapist-card__name {
  font-size: 18px;
  font-weight: 700;
  color: #1d3a5f;
  margin: 0 0 20px;
  letter-spacing: 1px;
}
.therapist-card__btns {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.duration-btn {
  appearance: none;
  background: #fff;
  border: 1.5px solid #d8d8d8;
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 110px;
  cursor: pointer;
  transition: all .18s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.duration-btn:hover {
  border-color: #2bb8a8;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(43,184,168,.18);
}
.duration-btn.is-selected {
  border-color: #1f8f86;
  background: #e9faf7;
}
.duration-btn__label {
  font-size: 15px;
  font-weight: 700;
  color: #1d3a5f;
}
.duration-btn__price {
  font-size: 13px;
  color: #666;
}

/* ===== Step 2：月曆 ===== */
.calendar {
  max-width: 460px;
  margin: 0 auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  padding: 18px 20px 22px;
}
.calendar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.calendar__title {
  font-size: 16px;
  font-weight: 700;
  color: #1d3a5f;
  letter-spacing: 1px;
}
.calendar__nav {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 22px;
  color: #1d3a5f;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  transition: background .15s ease;
}
.calendar__nav:hover { background: #f0f4f8; }
.calendar__nav:disabled {
  opacity: .28;
  cursor: not-allowed;
}
.calendar__nav:disabled:hover { background: transparent; }

/* ── 非當月預約提示 ── */
.calendar__hint {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: #fff4e0;
  border: 1px solid #f2c879;
  border-radius: 8px;
  color: #a5670a;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
}
.calendar__hint::before {
  content: '📅 ';
}
/* 檢視非當月時，月份標題改用橘色強調，讓病人一眼看出不是當月 */
.calendar--future-month .calendar__title {
  color: #d98a12;
}
.calendar__weekdays,
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar__weekdays {
  margin: 6px 0;
  text-align: center;
  font-size: 13px;
  color: #888;
  font-weight: 600;
}
.cal-cell {
  appearance: none;
  border: 0;
  background: transparent;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ccc;
  border-radius: 50%;
  cursor: default;
}
.cal-cell--empty { visibility: hidden; }
.cal-cell--past { color: #ddd; }
.cal-cell--disabled { color: #d8d8d8; }
.cal-cell--available {
  color: #1d3a5f;
  font-weight: 700;
  cursor: pointer;
}
.cal-cell--available:hover { background: #e9faf7; }
.cal-cell--selected,
.cal-cell--selected:hover {
  background: #2bb8a8 !important;
  color: #fff !important;
}

/* ===== Step 3：時段格 ===== */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);   /* 桌機 7 欄 */
  gap: 10px;
  max-width: 720px;                /* ✅ 縮小整體寬度，避免按鈕被拉太寬變橢圓 */
  margin: 0 auto;
}
.slot-btn {
  appearance: none;
  background: #fff;
  border: 1.5px solid #c5d5e0;
  border-radius: 4px;              /* ✅ 圓角小一點（從 10px → 6px），方形感 */
  padding: 14px 4px;               /* ✅ 加高 padding，按鈕高度增加，更接近方形 */
  font-size: 15px;
  color: #1d3a5f;
  cursor: pointer;
  transition: all .15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.slot-btn:hover {
  border-color: #2bb8a8;
  background: #e9faf7;
}
.slot-btn.is-selected {
  border-color: #1f8f86;
  background: #2bb8a8;
  color: #fff;
}
/* ✅ 不可預約（治療師休息 / 已被預約）→ 灰掉、不能點 */
.slot-btn--disabled {
  background: #f1f3f6;
  border-color: #e2e5ea;
  color: #c4c7cc;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.slot-btn--disabled:hover {
  background: #f1f3f6;
  border-color: #e2e5ea;
}
.slot-empty {
  text-align: center;
  color: #888;
  margin: 28px 0 0;
}

/* ===== Step 2 / Step 3 底部置中：摘要 + 返回上一步 ===== */
.booking-bottom {
  margin: 36px auto 0;             /* ✅ 與上方內容的距離（可調） */
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.booking-bottom__summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: 14px;
  color: #555;
  min-width: 280px;
}
.booking-bottom__summary dt {
  font-weight: 700;
  color: #1d3a5f;
}
.booking-bottom__summary dd { margin: 0; }
.booking-bottom .btn-back {
  min-width: 140px;
}

/* ===== Step 4：表單 ===== */
.booking-summary--inline {
  background: #f4f9f8;
  border-radius: 10px;
  padding: 16px 20px;
  max-width: 460px;
  margin: 0 auto 24px;
  font-size: 14px;
  color: #555;
}
.booking-summary--inline dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 8px;
  margin: 0;
}
.booking-summary--inline dt { font-weight: 700; color: #1d3a5f; }
.booking-summary--inline dd { margin: 0; }
.booking-summary--inline .booking-identity-warn {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid #dceee9;
}

.booking-form {
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.booking-field { display: flex; align-items: center; gap: 14px; }
.booking-field__label {
  width: 110px;
  font-weight: 700;
  color: #1d3a5f;
  font-size: 15px;
  flex-shrink: 0;
}
.booking-field .req { color: #d04545; }
.booking-field .opt { color: #999; font-weight: 400; font-size: 13px; }
.booking-field input {
  flex: 1;
  border: 1.5px solid #d8d8d8;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 15px;
  color: #333;
  font-family: inherit;
  background: #fff;
}
.booking-field input:focus {
  outline: none;
  border-color: #2bb8a8;
  box-shadow: 0 0 0 3px rgba(43,184,168,.15);
}

.booking-error {
  text-align: center;
  color: #d04545;
  background: #fdecec;
  border-radius: 8px;
  padding: 10px;
  margin: 0;
  font-size: 14px;
}

/* Email 欄位下方的提示小字 */
.booking-field-hint {
  margin: -8px 0 0 124px;
  color: #888;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}

/* ===========================================================
   📚 隱私權 / 預約須知 頁面樣式
   =========================================================== */
.legal-page {
  background: #f7faf9;
  min-height: 100vh;
}
.legal-main {
  max-width: 880px;
  margin: 0 auto;
  padding: 120px 24px 60px;     /* 預留 header 高度 */
}
.legal-article {
  background: #fff;
  border-radius: 8px;
  padding: 48px 56px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.legal-title {
  font-size: 32px;
  color: #0f4f5b;
  margin: 0 0 8px;
  letter-spacing: 1px;
}
.legal-updated {
  margin: 0 0 28px;
  color: #888;
  font-size: 13px;
}
.legal-intro {
  color: #333;
  font-size: 16px;
  line-height: 1.9;
  margin: 0 0 32px;
  padding: 18px 22px;
  background: #f4f8f7;
  border-left: 4px solid #0f4f5b;
  border-radius: 4px;
}
.legal-intro p {
  margin: 0 0 12px;
}
.legal-intro p:last-child {
  margin-bottom: 0;
}
.legal-section {
  margin: 28px 0;
  padding: 0;
  color: #333;
  font-size: 15px;
  line-height: 1.9;
}
.legal-section h2 {
  margin: 0 0 12px;
  font-size: 20px;
  color: #0f4f5b;
  padding-bottom: 6px;
  border-bottom: 1px solid #e3eae9;
}
.legal-section ul {
  padding-left: 22px;
  margin: 10px 0;
}
.legal-section li {
  margin: 6px 0;
}
.legal-section a {
  color: #0f4f5b;
  text-decoration: underline;
}
.legal-section a:hover {
  color: #d04545;
}
.legal-contact ul li strong {
  display: inline-block;
  min-width: 64px;
}
.legal-back {
  margin: 40px 0 0;
  text-align: center;
}
.legal-back-link {
  display: inline-block;
  padding: 10px 22px;
  background: #0f4f5b;
  color: #fff !important;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 14px;
  letter-spacing: 1px;
}
.legal-back-link:hover {
  background: #d04545;
}
@media (max-width: 768px) {
  .legal-main { padding: 100px 12px 40px; }
  .legal-article { padding: 28px 20px; border-radius: 0; }
  .legal-title { font-size: 24px; }
  .legal-section h2 { font-size: 17px; }
  .legal-section { font-size: 14px; line-height: 1.85; }
  .legal-intro { font-size: 14px; padding: 14px 16px; }
}

/* ===== 姓名手機識別警語（在預約摘要淺綠底內） ===== */
.booking-identity-warn {
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #c0392b;
  background: none;
  border: none;
}

/* ===== 舊客市話認領 ===== */
.booking-legacy-verify {
  margin: 16px 0 8px;
  padding: 14px 16px;
  background: #fff8e6;
  border: 1px solid #f0d78a;
  border-left: 4px solid #f0b429;
  border-radius: 8px;
}
.booking-legacy-verify__title {
  margin: 0 0 8px;
  font-weight: 700;
  color: #7a5c00;
  font-size: 15px;
}
.booking-legacy-verify__text {
  margin: 0 0 12px;
  color: #6b5a2a;
  font-size: 14px;
  line-height: 1.6;
}
.booking-legacy-verify__masked {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #7a5c00;
}
.booking-legacy-verify__step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}
/* hidden 屬性必須蓋過 display:flex，否則畫面 A/B 會同時露出 */
.booking-legacy-verify__step[hidden],
.booking-legacy-verify__err[hidden],
#legacyChoiceError[hidden],
.btn-legacy[hidden] {
  display: none !important;
}
.booking-legacy-verify__options {
  border: none;
  padding: 0;
  margin: 0 0 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.booking-legacy-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid #e8d48a;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  color: #444;
}
.booking-legacy-option input {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: #0f4f5b;
}
.booking-legacy-option:has(input:checked) {
  border-color: #0f4f5b;
  background: #f0fafb;
}
.booking-field--legacy {
  margin: 0;
}
.booking-field--legacy input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
}
.modal__card--legacy {
  max-width: 520px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.modal--legacy .modal__card--legacy .booking-legacy-verify {
  margin: 0;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.booking-legacy-verify__input-hint {
  margin: 0 0 12px;
  color: #6b5a2a;
  font-size: 14px;
  line-height: 1.6;
}
.booking-legacy-verify__actions,
.booking-legacy-verify__input-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.btn-legacy {
  appearance: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.45;
  text-align: center;
}
.btn-legacy--primary {
  background: #0f4f5b;
  color: #fff;
  border: none;
}
.btn-legacy--primary:hover { background: #0c3f49; }
.btn-legacy--ghost {
  background: #fff;
  color: #555;
  border: 1.5px solid #ccc;
}
.btn-legacy--ghost:hover { background: #f8f8f8; }
.booking-legacy-verify__err {
  margin: 8px 0 0;
  color: #c0392b;
  font-size: 13px;
}

/* ===== 隱私權同意勾選框 ===== */
.booking-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0 124px;
  padding: 12px 14px;
  background: #f7faf9;
  border: 1px solid #d8e0e0;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  cursor: pointer;
}
.booking-consent input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: #0f4f5b;
}
.booking-consent a {
  color: #0f4f5b;
  text-decoration: underline;
  font-weight: 600;
}
.booking-consent a:hover {
  color: #d04545;
}

/* 載入中 / 錯誤訊息 */
.cal-loading,
.slot-loading {
  grid-column: 1 / -1;
  padding: 32px 12px;
  text-align: center;
  color: #888;
  font-size: 14px;
}
.cal-error,
.slot-error {
  grid-column: 1 / -1;
  padding: 24px 12px;
  text-align: center;
  color: #d04545;
  font-size: 14px;
}
.booking-init-error {
  margin: 24px 0;
  background: #fff5f5;
  border: 1px solid #fda5a5;
  border-radius: 8px;
}
@media (max-width: 767px) {
  .booking-field-hint {
    margin: -8px 0 0 0;          /* 手機 label 在上方、無需左偏移 */
  }
  .booking-consent {
    margin: 16px 0 0 0;
  }
}

/* ===== 按鈕 ===== */
.booking-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
}
.booking-actions--center {
  justify-content: center;
  gap: 18px;
}
.btn-back, .btn-confirm {
  appearance: none;
  border: 0;
  border-radius: 8px;
  padding: 11px 26px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
}
.btn-back {
  background: #fff;
  color: #555;
  border: 1.5px solid #ccc;
}
.btn-back:hover { background: #f5f5f5; }
.btn-confirm {
  background: #2bb8a8;
  color: #fff;
}
.btn-confirm:hover { background: #1f8f86; }
.btn-confirm:disabled { opacity: 0.6; cursor: not-allowed; }

/* （舊版右側 absolute 摘要已移除，改用 .booking-bottom 置中於內容下方） */


/* ===== 預約成功頁 ===== */
.booking-success {
  max-width: 520px;
  margin: 40px auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
  padding: 50px 40px;
  text-align: center;
}
.booking-success__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  background: #2bb8a8;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 700;
}
.booking-success__title {
  font-size: 26px;
  color: #1d3a5f;
  margin: 0 0 14px;
  letter-spacing: 2px;
}
.booking-success__subtitle {
  color: #666;
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 28px;
}
.booking-success__subtitle a {
  color: #1f8f86;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.booking-success__detail {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 16px;
  text-align: left;
  background: #f4f9f8;
  border-radius: 10px;
  padding: 20px 24px;
  margin: 0 0 28px;
  font-size: 14px;
  color: #555;
}
.booking-success__detail dt { font-weight: 700; color: #1d3a5f; }
.booking-success__detail dd { margin: 0; }
.booking-success__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
}
.booking-success__actions .btn-back,
.booking-success__actions .btn-confirm {
  text-decoration: none;
  display: inline-block;
  min-width: 180px;            /* ✅ 單顆按鈕至少這麼寬，視覺好看 */
  text-align: center;
}
/* 手機：成功頁按鈕不要拉滿（保持置中、不貼邊） */
@media (max-width: 767px) {
  .booking-success__actions .btn-back,
  .booking-success__actions .btn-confirm {
    width: auto;
    min-width: 200px;
  }
}

/* -----------------------------------------------
   ❷ 手機調整（寬度 ≤ 767px）
   ----------------------------------------------- */
@media (max-width: 767px) {
  .booking-page {
    background-image: url(images12232025/治療流程與收費標準_背景_手機.svg);
    background-attachment: scroll;
  }

  .booking-success {
    margin: 20px 12px;
    padding: 36px 24px;
  }
  .booking-success__title { font-size: 22px; }

  .booking-main {
    padding: 24px 14px 60px;
  }

  .booking-subtitle {
    font-size: 14px;
    font-weight: 700;            /* ✅ 手機版加粗 */
    line-height: 1.7;
    padding: 0 8px;
    margin: 24px 0 26px;          /* ✅ 手機版往下推（上方留白 24px，可調） */
  }

  /* ✅ 手機才換行：把長句拆成 2 行 */
  .br-mobile { display: inline; }

  /* 步驟列：手機改成 2x2 等大網格 */
  .booking-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 兩欄 */
    gap: 12px 16px;
    max-width: 380px;             /* 限制整個區塊寬度，避免過寬 */
    margin: 0 auto 28px;
    padding: 0 8px;
  }
  .booking-step {
    font-size: 14px;
    padding: 12px 8px;
    letter-spacing: 0.5px;
    width: 100%;                  /* ✅ 每格寬度一致 */
    text-align: center;
  }

  /* 主內容區：手機就單欄 */
  .booking-body { display: block; }
  .booking-bottom {
    margin-top: 24px;
    max-width: 100%;
  }
  .booking-bottom__summary {
    background: rgba(255,255,255,.6);
    border-radius: 10px;
    padding: 12px 16px;
    width: 100%;
  }

  /* Step 1：治療師卡片改單欄 */
  .therapist-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .duration-btn { min-width: 100px; padding: 12px 14px; }

  /* Step 2：月曆寬度撐滿 */
  .calendar { padding: 14px 12px 18px; }
  .cal-cell { height: 34px; font-size: 13px; }

  /* Step 3：時段格手機改 4 欄 */
  .slot-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .slot-btn { padding: 10px 4px; font-size: 14px; }

  /* Step 4：表單欄位上下排 */
  .booking-field { flex-direction: column; align-items: stretch; gap: 6px; }
  .booking-field__label { width: auto; }

  .booking-actions { justify-content: center; }
  .booking-actions--center { flex-direction: column; }
  .btn-back, .btn-confirm { width: 100%; }

  .modal--legacy .modal__card--legacy {
    max-width: 100%;
  }
  .booking-legacy-option {
    font-size: 13px;
    line-height: 1.5;
  }
}

/* =============================================
   後台管理頁面（admin-*.html）
   ============================================= */

/* 後台共用 base：不顯示前台 nav 的 padding-top */
.admin-page {
  background: #f4f6f9;
  padding-top: 0;
  font-family: inherit;
  min-height: 100vh;
}

/* ===== 後台 Header ===== */
.admin-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #1d3a5f;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.admin-header__logo { display: flex; align-items: center; }
.admin-header__logo img { height: 38px; filter: brightness(0) invert(1); }
.admin-nav {
  display: flex;
  gap: 8px;
  flex: 1;
}
.admin-nav a {
  color: rgba(255,255,255,.75);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  transition: background .15s ease, color .15s ease;
  letter-spacing: 0.5px;
}
.admin-nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.admin-nav a.is-active {
  background: #2bb8a8;
  color: #fff;
}
.admin-logout {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  background: rgba(255,255,255,.1);
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.2);
  transition: background .15s ease;
}
.admin-logout:hover { background: rgba(255,255,255,.2); }

.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.admin-change-password {
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  background: rgba(255,255,255,.1);
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.2);
  cursor: pointer;
  white-space: nowrap;
}
.admin-change-password:hover { background: rgba(255,255,255,.2); }

.admin-pw-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.admin-pw-modal[hidden] { display: none; }
.admin-pw-modal__card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  color: #333;
  border-radius: 10px;
  padding: 22px 22px 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
}
.admin-pw-modal__title {
  margin: 0 0 16px;
  font-size: 18px;
  color: #1d3a5f;
}
.admin-pw-modal__form .admin-field { display: block; margin-bottom: 12px; }
.admin-pw-modal__form .admin-field > span:not(.admin-field__password) { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.admin-pw-modal__form input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  font-size: 14px;
}
.admin-pw-modal__error {
  color: #b42318;
  font-size: 13px;
  margin: 0 0 10px;
}
.admin-pw-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.admin-pw-modal__cancel {
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  cursor: pointer;
}

/* ── 後台漢堡選單按鈕（手機限定） ── */
.admin-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: rgba(255,255,255,.1);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.admin-menu-toggle span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .22s, opacity .22s;
}

/* ── 後台 nav 抽屜（手機） ── */
.admin-nav__close {
  display: none;
  appearance: none;
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  align-self: flex-end;
  padding: 4px 8px;
  margin-bottom: 8px;
}

/* ── 手機獨立抽屜（直接掛在 body） ── */
.admin-mobile-drawer {
  display: none;
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(82vw, 280px);
  background: #f4f6f8;
  flex-direction: column;
  align-items: stretch;
  z-index: 300;            /* 比任何頁面元素都高 */
  padding: 16px;
  gap: 4px;
  overflow-y: auto;
  box-shadow: -6px 0 24px rgba(0,0,0,.18);
}
.admin-mobile-drawer.is-open {
  display: flex;
  animation: adminDrawerIn .22s ease;
}
@keyframes adminDrawerIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.admin-mobile-drawer__close {
  background: none;
  border: none;
  color: #888;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  align-self: flex-end;
  padding: 2px 8px;
  margin-bottom: 8px;
}
.admin-mobile-drawer__close:hover { color: #333; }
.admin-mobile-drawer__link {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-size: 15px;
  font-weight: 600;
  color: #2c3e50;
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
  font-family: inherit;
}
.admin-mobile-drawer__link:hover { background: rgba(43,184,168,.12); color: #1a8e80; }
.admin-mobile-drawer__link.is-active { background: #2bb8a8; color: #fff; }

/* 遮罩 */
.admin-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.10);
  z-index: 299;   /* 在抽屜(300)下面，在其他頁面內容上面 */
}
.admin-nav-overlay.is-visible { display: block; }

/* ===== 後台主容器 ===== */
.admin-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 26px 24px 60px;
}

/* 工具列 */
.admin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
}
.admin-title {
  margin: 0;
  font-size: 22px;
  color: #1d3a5f;
  letter-spacing: 1px;
}
.admin-toolbar__controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.admin-select {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #555;
}
.admin-select select,
.admin-search {
  border: 1px solid #d0d5dc;
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 14px;
  background: #fff;
  font-family: inherit;
  color: #333;
}
.admin-search { min-width: 200px; }
.admin-select select:focus,
.admin-search:focus {
  outline: none;
  border-color: #2bb8a8;
  box-shadow: 0 0 0 3px rgba(43,184,168,.15);
}
.admin-export-btn { padding: 8px 18px; font-size: 14px; }

.admin-hint {
  background: #eff6f5;
  border-left: 3px solid #2bb8a8;
  color: #555;
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 4px;
  margin: 0 0 18px;
}
.admin-hint .hint-on { color: #1f8f86; font-weight: 700; }
.admin-hint .hint-off { color: #999; font-weight: 700; }

/* ===== 通用表格 ===== */
.admin-table-wrap {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  overflow-x: auto;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 760px;
}
.admin-table th,
.admin-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid #eef0f3;
}
.admin-table th {
  background: #f8fafc;
  color: #1d3a5f;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.admin-table tr:hover { background: #f9fbfd; }
.admin-table small { color: #999; font-size: 12px; }
.admin-table__empty {
  text-align: center !important;
  color: #999;
  padding: 32px !important;
}
.link-btn {
  background: transparent;
  border: 0;
  color: #2bb8a8;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  padding: 4px 8px;
  border-radius: 4px;
}
.link-btn:hover { background: #e9faf7; }

.admin-table tr.row-merge-pending {
  background: #fffaf8;
}
.admin-table tr.row-merge-pending:hover {
  background: #fff5f2;
}

/* 狀態徽章 */
.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.status-pill--wrap {
  max-width: 220px;
  white-space: normal;
  line-height: 1.45;
  text-align: left;
  border-radius: 8px;
}
.status-confirmed { background: #e0f3fe; color: #2563a8; }
.status-completed {
  background: #e6f4f1;
  color: #4a8b8b;
  border: none;
}
.status-cancelled { background: #fdecec; color: #c14545; }
/* 預約紀錄列表：已取消灰底灰字 */
.status-cancelled-grey {
  background: #ececec;
  color: #888;
}
/* 歷程 Modal：已取消紅色 */
.status-history-cancelled {
  background: #fdecec;
  color: #c14545;
}

/* ===== 班表 Toggle ===== */
.schedule-table-wrap {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  overflow-x: auto;
}
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
.schedule-table th,
.schedule-table td {
  padding: 6px 4px;
  border-bottom: 1px solid #eef0f3;
}
.schedule-table th {
  background: #f8fafc;
  color: #1d3a5f;
  font-size: 13px;
  padding: 10px 6px;
  font-weight: 700;
}
.schedule-table th small { color: #888; font-weight: 500; }
.schedule-table__time {
  font-size: 13px;
  color: #555;
  background: #fafbfc;
  font-weight: 700;
}
.schedule-table__time-col { width: 80px; }
.schedule-table__cell { padding: 4px !important; }

.toggle-slot {
  width: 50px;
  height: 26px;
  appearance: none;
  border: 0;
  background: #d8d8d8;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background .2s ease;
  padding: 0;
}
.toggle-slot::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-slot.is-on { background: #2bb8a8; }
.toggle-slot.is-on::after { transform: translateX(24px); }

/* 已有預約的時段：邊框提示 */
.toggle-slot.has-booking { outline: 2px solid rgba(43,184,168,.55); outline-offset: 2px; }
.toggle-slot.has-booking.is-on { background: #1a8e80; }

/* 快速設定按鈕（表頭） */
.schedule-quick-btns {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 6px;
}
.schedule-quick-btn {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid currentColor;
  cursor: pointer;
  background: transparent;
  font-weight: 600;
  line-height: 1.6;
  transition: background .15s, color .15s;
}
.schedule-quick-btn--on  { color: #2bb8a8; }
.schedule-quick-btn--off { color: #999; }
.schedule-quick-btn--on:hover  { background: #2bb8a8; color: #fff; }
.schedule-quick-btn--off:hover { background: #bbb; color: #fff; }

.admin-week-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #d0d5dc;
  font-size: 14px;
}
.admin-week-nav button {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 18px;
  color: #1d3a5f;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 4px;
}
.admin-week-nav button:hover { background: #f0f4f8; }
.admin-week-nav button:disabled { opacity: .35; cursor: not-allowed; }
.admin-week-nav__divider {
  width: 1px;
  height: 20px;
  background: #d0d5dc;
  margin: 0 2px;
  flex-shrink: 0;
}
.admin-week-nav__today {
  font-size: 13px;
  font-weight: 600;
  color: #2bb8a8;
  padding: 0 14px;
  white-space: nowrap;
  /* 高度與日期框對齊 */
  align-self: stretch;
  display: flex;
  align-items: center;
}
.admin-week-nav__today:hover { background: #eaf7f5; }

/* ===== 班表儲存列 ===== */
.schedule-save-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 12px;
  padding: 14px 18px;
  background: #f0f7f6;
  border: 1px solid #c5ddd9;
  border-left: 4px solid #c5ddd9;
  border-radius: 8px;
  transition: background .25s, border-color .25s;
}
/* dirty 狀態：整列變警示底色 + 醒目左邊框 */
.schedule-save-bar.is-dirty {
  background: #fff5f5;
  border-color: #e53935;
  border-left-color: #e53935;
}
.schedule-save-bar__hint {
  margin: 0;
  font-size: 14px;
  color: #0f4f5b;
  line-height: 1.65;
  flex: 1;
  min-width: 200px;
}
/* dirty 時提示文字：紅色粗體放大 */
.schedule-save-bar.is-dirty .schedule-save-bar__hint .dirty-msg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c62828;
  font-weight: 700;
  font-size: 16px;
}

/* 儲存按鈕 dirty 時輕微脈動 */
@keyframes savePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43,184,168,.5); }
  50%       { box-shadow: 0 0 0 7px rgba(43,184,168,0); }
}
.schedule-save-bar__btn:not(:disabled) {
  animation: savePulse 2s ease-in-out infinite;
}
.schedule-warn-note {
  display: block;
  margin-top: 8px;
  padding: 8px 12px;
  background: #fff8e1;
  border-left: 4px solid #f0b429;
  border-radius: 4px;
  color: #7a5c00;
  font-size: 13px;
  line-height: 1.6;
}
.schedule-warn-icon {
  color: #f0b429;
  font-size: 16px;
  font-weight: 700;
  margin-right: 2px;
}
.schedule-save-bar__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.save-week-form { padding: 0 24px 24px; }
.save-week-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
  font-size: 15px;
  line-height: 1.6;
  cursor: pointer;
}
.save-week-option input { margin-top: 4px; flex-shrink: 0; }
.save-week-note {
  margin: 8px 0 16px;
  font-size: 13px;
  color: #888;
}
.save-week-actions,
.modal__card--narrow .save-week-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}
.modal__card--narrow { max-width: 480px; }
.modal__intro {
  padding: 0 24px 8px;
  margin: 0;
  font-size: 14px;
  color: #555;
  line-height: 1.7;
}

/* ===== 預約紀錄：狀態欄與外框按鈕 ===== */
.booking-status-cell {
  min-width: 0;
  width: 1%;                 /* 依內容縮欄，拉近「預約建立時間」 */
  padding-right: 8px;
  vertical-align: middle;
  white-space: nowrap;
}
.booking-status-cell:has(.booking-status-cell__actions) {
  text-align: right;
}
.booking-status-cell > .status-pill {
  display: inline-block;
}
/* 預約建立時間：緊貼狀態欄左側，不換行 */
#bookingsTable th:nth-child(9),
#bookingsTable td:nth-child(9) {
  padding-left: 8px;
  white-space: nowrap;
}
/* 預約紀錄整表：桌機／手機同一套橫向排版（手機左右滑動） */
#bookingsTable {
  min-width: 980px;
  table-layout: auto;
}
#bookingsTable th,
#bookingsTable td {
  white-space: nowrap;
  vertical-align: middle;
}
/* 病患資料整表：同上（手機左右滑動，不直式換行） */
#patientsTable {
  min-width: 980px;
  table-layout: auto;
}
#patientsTable th,
#patientsTable td {
  white-space: nowrap;
  vertical-align: middle;
}
.booking-status-cell__actions {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  vertical-align: middle;
}
.btn-outline {
  appearance: none;
  background: #fff;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1.4;
}
.btn-outline--sm {
  padding: 4px 10px;
  font-size: 12px;
}
.btn-outline--done {
  color: #2d8a5e;
  border: 1.5px solid #2d8a5e;
}
.btn-outline--done:hover { background: #f0faf5; }
.btn-outline--cancel {
  color: #c0392b;
  border: 1.5px solid #e8a8a8;
}
.btn-outline--cancel:hover { background: #fff5f5; }
.btn-cancel-confirm {
  appearance: none;
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  background: #c0392b;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.btn-cancel-confirm:hover { background: #a93226; }

/* 時段／時數合併欄 */
.booking-time-combined {
  white-space: nowrap;
}
.booking-time-combined__start {
  font-weight: 600;
  color: #333;
}
.booking-time-combined__dur {
  display: block;
  font-size: 12px;
  color: #aaa;
  margin-top: 2px;
}
.booking-no {
  font-family: ui-monospace, monospace;
  letter-spacing: 0.5px;
}
.phone-virtual-tag {
  color: #b8860b;
  font-size: 11px;
}

/* ===== 當日班表管理：工具列對齊 ===== */
.admin-toolbar--timeline {
  align-items: center;
  gap: 12px;
}
.timeline-toolbar__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}
/* ── 班表設定 & 個人班表工具列：緊湊一致欄高（32px）── */
.admin-toolbar__controls .admin-select select,
.timeline-toolbar__controls .admin-select select {
  height: 32px;
  box-sizing: border-box;
  padding: 0 8px;
  font-size: 13px;
}
/* week-nav 框縮小 padding，使外框總高也是 32px（3+22+3+2=30... 調整為 3+24+3+2=32）*/
.admin-toolbar__controls .admin-week-nav,
.timeline-toolbar__controls .admin-week-nav {
  padding: 3px 6px;
}
.admin-toolbar__controls .admin-week-nav button,
.timeline-toolbar__controls .admin-week-nav button {
  height: 24px;
  width: 24px;
  font-size: 16px;
}
/* date input 在 nav 框內高度配合 */
.timeline-toolbar__controls .timeline-date-input {
  height: 24px;
}

.timeline-toolbar__select {
  flex-shrink: 0;
  margin: 0;
}
.timeline-date-nav {
  flex-shrink: 0;
  margin-bottom: 0;
}
.timeline-date-input {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3a5f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 16px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #1d3a5f;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  padding: 0 24px 0 2px;
  min-width: 128px;
}
.timeline-date-input::placeholder {
  color: #aaa;
  font-weight: 400;
}
.timeline-quick-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.btn-outline--xs {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

/* ===== 當日班表管理時間軸 ===== */
.timeline-wrap {
  margin-bottom: 12px;
}
.day-timeline {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
/* ===== 當日班表管理：時間軸網格 ===== */
.day-grid {
  display: grid;
  grid-template-columns: 72px 1fr 64px 64px;
  grid-auto-rows: minmax(44px, auto);
}
.day-grid__head {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #4a5158;
  background: #f2f4f6;
  border-bottom: 2px solid #e2e6ea;
}
.day-grid__head--act { justify-content: center; padding-left: 4px; padding-right: 4px; }
.day-grid__head--time { border-right: 1px solid #e2e6ea; }
.day-grid__time {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #666;
  background: #fafbfc;
  border-right: 1px solid #eef0f3;
  border-bottom: 1px solid #eef0f3;
}
.day-grid__data {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid #eef0f3;
  min-width: 0;
}
.day-grid__data--empty { justify-content: flex-end; }
.day-grid__data--booked { background: #e8f7f4; padding: 6px 10px; }
.day-grid__act {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  border-bottom: 1px solid #eef0f3;
}

/* 綠色預約卡 */
.day-timeline__card {
  width: 100%;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: #2bb8a8;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}
.day-timeline__card--btn {
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background .15s, transform .05s;
  -webkit-tap-highlight-color: transparent;
}
.day-timeline__card--btn:hover { background: #26a99a; }
.day-timeline__card--btn:active { transform: scale(.995); }
.day-timeline__line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}
@media (max-width: 767px) {
  .day-timeline__line {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
    line-height: 1.35;
  }
}

/* 預約按鈕（每個空白時段）：小膠囊 + 綠色「+」 */
.tl-book-btn {
  border: 2px solid #2bb8a8;
  background: #fff;
  color: #2bb8a8;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  padding: 2px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.tl-book-btn:hover { background: #2bb8a8; color: #fff; }

/* 取消按鈕：垃圾桶圖示 */
.tl-trash-btn {
  border: 0;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  border-radius: 8px;
  line-height: 0;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.tl-trash-btn:hover { background: #f3f5f7; }
.tl-trash-icon {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

/* 休診切換：未休診=空心圓；休診=灰色膠囊「OFF」 */
.tl-off-toggle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #c2c7cd;
  background: #fff;
  color: transparent;
  font-size: 0;
  padding: 0;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.tl-off-toggle:hover { border-color: #a7acb3; }
.tl-off-toggle.is-on {
  width: auto;
  min-width: 48px;
  height: 22px;
  border-radius: 999px;
  background: #a7adb4;
  border-color: #a7adb4;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 0 12px;
}
.tl-off-toggle.is-on:hover { background: #9aa0a8; border-color: #9aa0a8; }
.tl-hint-small {
  margin: 0 0 4px;
  font-size: 12px;
  color: #8a919a;
  line-height: 1.5;
}
@media (max-width: 560px) {
  .day-grid { grid-template-columns: 52px 1fr 54px 54px; }
  .day-grid__head, .day-grid__time { padding-left: 6px; padding-right: 6px; font-size: 12px; }
  .day-grid__data { padding-left: 6px; padding-right: 6px; }
  .tl-book-btn { padding: 5px 12px; }
  .day-timeline__card { padding: 8px; font-size: 13px; }
}

/* ===== 當日班表管理：日期操作列（含週班表） ===== */
.timeline-date-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
  flex: 1;
  justify-content: flex-end;
}
.timeline-date-controls .admin-week-nav__today {
  flex-shrink: 1;
  min-width: 0;
  padding: 0 10px;
  box-sizing: border-box;
}
.timeline-date-controls .timeline-date-nav {
  flex-shrink: 1;
  min-width: 0;
}
.timeline-wrap[hidden] {
  display: none !important;
}

/* ===== 週班表（唯讀） ===== */
.week-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  margin-bottom: 12px;
  overflow-x: hidden;
}
.week-view[hidden] {
  display: none !important;
}
.week-view__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  justify-content: space-between;
}
.week-view__back {
  flex-shrink: 0;
}
.week-view__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  justify-content: center;
  flex: 1;
}
.week-view__nav .admin-week-nav {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: #1d3a5f;
  padding: 3px 10px;
  cursor: pointer;
  align-self: stretch;
  display: flex;
  align-items: center;
  height: auto;
  width: auto;
}
.week-view__nav .admin-week-nav:hover {
  background: #f0f4f8;
}
.week-view__nav .admin-week-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  color: #999;
  pointer-events: none;
  background: #f5f6f7;
}
.week-view__range {
  font-size: 14px;
  font-weight: 700;
  color: #1d3a5f;
  white-space: nowrap;
  padding: 0 4px;
}
.week-view__scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.week-grid {
  display: grid;
  grid-template-columns: 52px repeat(7, minmax(100px, 1fr));
  grid-auto-rows: 48px;
  min-width: 780px;
  width: 100%;
  position: relative;
}
.week-grid__corner,
.week-grid__dayhead,
.week-grid__time {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #4a5158;
  background: #f2f4f6;
  border-bottom: 1px solid #e2e6ea;
  border-right: 1px solid #e2e6ea;
  padding: 4px 6px;
  text-align: center;
  line-height: 1.25;
  box-sizing: border-box;
}
.week-grid__dayhead {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 2px solid #e2e6ea;
}
.week-grid__corner,
.week-grid__time {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #f2f4f6;
  justify-content: flex-start;
  padding-left: 8px;
  font-variant-numeric: tabular-nums;
}
.week-grid__corner {
  z-index: 4;
  position: sticky;
  left: 0;
  top: 0;
}
.week-grid__time {
  font-weight: 600;
  color: #6a727a;
  background: #fafbfc;
}
.week-grid__cell {
  border-bottom: 1px solid #eef0f3;
  border-right: 1px solid #eef0f3;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  background: #fff;
}
.week-grid__cell--off {
  background: #f4f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.week-grid__off {
  font-size: 10px;
  font-weight: 700;
  color: #9aa0a8;
  letter-spacing: 0.04em;
}
.week-grid__cell--booked {
  background: #e8f7f4;
  padding: 3px 4px;
  z-index: 1;
  display: flex;
  align-items: stretch;
  min-height: 0;
  overflow: visible;
}
.week-grid__book {
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: #2bb8a8;
  color: #fff;
  padding: 3px 6px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.week-grid__book:hover { background: #26a99a; }
.week-grid__book-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  min-width: 0;
  max-width: 100%;
}
.day-grid {
  overflow: visible;
}
.day-grid__data--booked:has(.is-week-focus) {
  position: relative;
  z-index: 30;
  overflow: visible;
}
.day-timeline__card--btn.is-week-focus {
  position: relative;
  z-index: 31;
  outline: none;
  animation: week-focus-pulse 2s ease-in-out 2;
}
@keyframes week-focus-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(43, 184, 168, 0),
      0 0 0 0 rgba(43, 184, 168, 0);
  }
  50% {
    box-shadow:
      0 0 0 14px rgba(120, 220, 205, 0.55),
      0 0 36px 18px rgba(43, 184, 168, 0.4);
  }
}

/* ===== 當日班表管理：編輯 / 時間 / 取消 Modal ===== */
.tl-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tl-modal[hidden] { display: none !important; }
.tl-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 28, 32, 0.42);
}
.tl-modal__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}
.tl-modal__panel--time { max-width: 380px; }
.tl-modal__panel--sm { max-width: 340px; }
.tl-modal__panel--wide { max-width: 560px; }
.tl-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #eef0f3;
}
.tl-modal__title {
  font-size: 17px;
  font-weight: 700;
  color: #2b3138;
  margin: 0;
}
.tl-modal__x {
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #98a0a8;
  cursor: pointer;
  padding: 0 4px;
}
.tl-modal__x:hover { color: #5a6069; }
.tl-modal__body { padding: 16px 18px; }
.tl-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid #eef0f3;
}
.tl-field {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.tl-field__label {
  flex: 0 0 68px;
  font-size: 13px;
  font-weight: 600;
  color: #6b727b;
}
.tl-field__control {
  flex: 1;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #d5dae0;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: #2b3138;
}
.tl-field__static {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #2b3138;
}
.tl-field__timebtn {
  flex: 1;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #2bb8a8;
  border-radius: 8px;
  background: #effcfa;
  color: #1f8b7e;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
}
.tl-field__timebtn:hover { background: #e0f7f3; }
/* 時間欄：日期 + 時段；桌機同一行，手機上下兩行（無分線） */
.tl-when__date,
.tl-when__time {
  display: inline;
}
.tl-when__date::after {
  content: '　';
}
@media (max-width: 767px) {
  .tl-when__date,
  .tl-when__time {
    display: block;
  }
  .tl-when__date::after {
    content: none;
  }
  .tl-field__timebtn,
  #createWhen {
    line-height: 1.45;
  }
  .tl-field:has(.tl-when__date) {
    align-items: flex-start;
  }
  .tl-field:has(.tl-when__date) .tl-field__label {
    padding-top: 2px;
  }
}
.tl-conflict {
  margin: 6px 0 0;
  padding: 10px 12px;
  background: #fdecec;
  border: 1px solid #f0c4c4;
  border-radius: 8px;
  color: #c0392b;
  font-size: 13px;
  line-height: 1.5;
}
/* 按鈕 */
.tl-btn {
  border: 0;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.tl-btn--ghost { background: #eef0f3; color: #5a6069; }
.tl-btn--ghost:hover { background: #e3e6ea; }
.tl-btn--sm {
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.2;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
}
.tl-series-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tl-series-status {
  font-size: 14px;
  font-weight: 600;
  color: #1d3a5f;
}
.tl-series-current {
  line-height: 1.55;
}
.series-preview-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(55vh, 420px);
  overflow-y: auto;
}
.series-preview__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #e2e6ea;
  border-radius: 8px;
  background: #fafbfc;
}
.series-preview__row.is-conflict {
  border-color: #e8b86d;
  background: #fffbf3;
}
.series-preview__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 13px;
  color: #2b3138;
}
.series-preview__ok { color: #1a9e8c; font-weight: 700; }
.series-preview__warn { color: #c47a14; font-weight: 700; }
.week-grid__book-series {
  display: block;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.95;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#seriesDoneText { white-space: pre-line; }
.tl-btn--primary { background: #2bb8a8; color: #fff; }
.tl-btn--primary:hover { background: #26a99a; }
.tl-btn--danger { background: #cf4b4b; color: #fff; }
.tl-btn--danger:hover { background: #bf3f3f; }
.tl-btn:disabled { opacity: .5; cursor: not-allowed; }
/* B.3 時間 Modal 內容 */
.tl-cal {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.tl-cal .flatpickr-calendar.inline {
  box-shadow: none;
  border: 1px solid #e5e8ec;
}
.tl-wheel { cursor: pointer; }
.tl-dur {
  flex: 1;
  display: flex;
  gap: 8px;
}
.tl-dur__btn {
  flex: 1;
  height: 40px;
  border: 1px solid #d5dae0;
  background: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #6b727b;
  cursor: pointer;
  transition: all .15s;
}
.tl-dur__btn.is-active {
  border-color: #2bb8a8;
  background: #2bb8a8;
  color: #fff;
}
.tl-confirm-text {
  font-size: 17px;
  font-weight: 700;
  color: #2b3138;
  margin: 4px 0 10px;
  text-align: center;
}
.tl-confirm-sub {
  font-size: 14px;
  color: #6b727b;
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

/* ===== Modal（病患歷程） ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal[hidden] {
  display: none !important;   /* 覆蓋上面的 display:flex，否則按 X 關不掉 */
}
/* 編輯離開確認／刪除確認：疊在歷程 Modal 之上 */
#historyLeaveModal,
#historyDeleteModal {
  z-index: 1200;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 0;
}
.modal__card {
  position: relative;
  z-index: 1;                 /* 確保卡片（含 X 按鈕）在 backdrop 上方可點擊 */
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
}
.modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 26px;
  color: #999;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  line-height: 1;
}
.modal__close:hover { background: #f0f0f0; color: #333; }
.modal__title {
  margin: 0;
  padding: 22px 24px 12px;
  font-size: 18px;
  color: #1d3a5f;
}
.modal__title-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding-right: 48px; /* 避開右上角 X */
}
.modal__title-row .modal__title {
  flex: 0 1 auto;
  min-width: 0;
  padding-right: 0;
}
.history-delete-btn,
.history-edit-btn {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  padding: 6px;
  margin: 16px 8px 0 0;
  cursor: pointer;
  border-radius: 8px;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
/* 標題正右方空一個字距離放刪除鈕 */
.history-delete-btn {
  margin-left: 1em;
}
.history-delete-btn:hover { background: #fff0f0; }
.history-delete-btn:disabled,
.history-delete-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}
.history-delete-btn:disabled:hover,
.history-delete-btn[aria-disabled="true"]:hover {
  background: transparent;
}
.history-delete-paused {
  flex: 1 1 100%;
  margin: 4px 0 0;
  padding: 0 8px 0 calc(1em + 8px);
  font-size: 12px;
  color: #8a5a5a;
  line-height: 1.4;
}
.history-edit-btn:hover { background: #eef7f5; }
.history-edit-btn__icon {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}
.history-delete-warn {
  color: #5a3030;
  line-height: 1.6;
}
.history-delete-hint {
  margin: 0 24px 10px;
  font-size: 14px;
  color: #555;
}
.history-delete-input {
  margin: 0 24px 12px;
  width: calc(100% - 48px);
  box-sizing: border-box;
}
#historyDeleteModal .history-edit-actions {
  padding: 8px 24px 20px;
}
#historyDeleteModal .btn-cancel-confirm:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.modal__meta {
  padding: 0 24px 16px;
  font-size: 14px;
  color: #555;
  border-bottom: 1px solid #eef0f3;
  display: grid;
  gap: 6px;
}
.modal__meta strong { color: #1d3a5f; }
/* 備註：無框、最多約 6 行，超過捲動 */
.history-notes-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 6px;
  align-items: start;
}
.history-notes-row > strong {
  padding-top: 0;
}
.history-notes {
  margin: 0;
  max-height: calc(1.5em * 6);
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  color: #555;
}
.history-notes--empty {
  color: #999;
  max-height: none;
  overflow: visible;
}
.history-edit-field {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 8px;
  align-items: center;
}
.history-edit-field.history-notes-row {
  align-items: start;
}
.history-edit-input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 4px 8px;
  border: 1px solid #d5dae0;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: #2b3138;
  background: #fff;
  box-sizing: border-box;
}
.history-edit-input:focus {
  outline: none;
  border-color: #2bb8a8;
  box-shadow: 0 0 0 3px rgba(43,184,168,.15);
}
.history-edit-notes {
  width: 100%;
  min-width: 0;
  height: calc(1.5em * 6 + 16px);
  max-height: calc(1.5em * 6 + 16px);
  padding: 6px 8px;
  border: 1px solid #d5dae0;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  color: #2b3138;
  background: #fff;
  resize: none;
  overflow-y: auto;
  box-sizing: border-box;
}
.history-edit-notes:focus {
  outline: none;
  border-color: #2bb8a8;
  box-shadow: 0 0 0 3px rgba(43,184,168,.15);
}
.history-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px 20px;
  border-top: 1px solid #eef0f3;
}
/* 必須蓋過 display:flex，否則 hidden 無效、查看歷程也會看到取消／儲存 */
.history-edit-actions[hidden] {
  display: none !important;
}
/* 歷程編輯的取消／儲存：尺寸縮小 */
#historyEditActions .btn-back,
#historyEditActions .btn-confirm {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  min-width: 0;
  width: auto;
}
.modal__body {
  padding: 16px 24px 24px;
  overflow-y: auto;
}
.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed #eee;
  gap: 12px;
}
.history-item:last-child { border-bottom: 0; }
.history-item__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.history-item__date {
  font-weight: 700;
  color: #1d3a5f;
  font-size: 15px;
}
.history-item__therapist {
  color: #666;
  font-size: 13px;
}
.history-item__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.history-item__side small { color: #999; font-size: 12px; }
.admin-empty {
  text-align: center;
  color: #999;
  padding: 28px;
}

/* ===== 後台登入頁 ===== */
.admin-login-page {
  background: linear-gradient(135deg, #1d3a5f 0%, #2bb8a8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.admin-login {
  width: 100%;
  max-width: 380px;
  padding: 20px;
}
.admin-login__card {
  background: #fff;
  border-radius: 16px;
  padding: 40px 36px;
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  text-align: center;
}
.admin-login__logo img { height: 60px; }
.admin-login__title {
  font-size: 20px;
  color: #1d3a5f;
  margin: 18px 0 6px;
  letter-spacing: 1px;
}
.admin-login__hint {
  color: #888;
  font-size: 12px;
  margin: 0 0 24px;
}
.admin-login__hint code {
  background: #f4f6f9;
  padding: 2px 6px;
  border-radius: 4px;
  color: #1f8f86;
  font-weight: 700;
}
.admin-login__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.admin-field { display: flex; flex-direction: column; gap: 6px; }
.admin-field > span:not(.admin-field__password) { font-size: 13px; color: #555; font-weight: 700; }
.admin-field input {
  border: 1.5px solid #d8d8d8;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 15px;
  font-family: inherit;
}
.admin-field input:focus {
  outline: none;
  border-color: #2bb8a8;
  box-shadow: 0 0 0 3px rgba(43,184,168,.15);
}
/* 密碼顯示／隱藏：僅局部包一層，不改動其他表單版面 */
.admin-field__password {
  position: relative;
  display: block;
}
.admin-field__password input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 44px;
}
.admin-field__toggle-pw {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #888;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.admin-field__toggle-pw:hover,
.admin-field__toggle-pw:focus-visible {
  color: #888;
  outline: none;
}
.admin-field__toggle-pw:focus-visible {
  box-shadow: 0 0 0 3px rgba(136,136,136,.35);
}
.admin-login__error {
  color: #c14545;
  background: #fdecec;
  border-radius: 6px;
  padding: 8px;
  font-size: 13px;
  text-align: center;
  margin: 0;
}
.admin-login__submit {
  margin-top: 8px;
  width: 100%;
}
.admin-login__back {
  display: inline-block;
  margin-top: 18px;
  color: #888;
  font-size: 13px;
  text-decoration: none;
}
.admin-login__back:hover { color: #1f8f86; }

/* ===== 病患合併：操作欄 ===== */
.btn-merge-pending {
  appearance: none;
  border: 2px solid #e03e3e;
  background: transparent;
  color: #c0392b;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .15s ease;
}
.btn-merge-pending:hover {
  background: #fff5f5;
}
.btn-merge-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 600;
  font-size: 14px;
  padding: 4px 6px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.btn-merge-link:hover {
  color: #1f8f86;
}

/* ===== 病患合併 Modal ===== */
.modal__card--merge {
  max-width: 680px;
  padding: 0;
  overflow: hidden;
}
.merge-modal__head {
  padding: 22px 24px 12px;
  border-bottom: 1px solid #eef0f3;
}
.merge-modal__title {
  margin: 0 0 10px;
  font-size: 20px;
  color: #1d3a5f;
  text-align: center;
  letter-spacing: 1px;
}
.merge-modal__warn {
  margin: 0;
  text-align: center;
  color: #c0392b;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}
.merge-modal__body {
  padding: 20px 24px;
  overflow-y: auto;
  max-height: calc(85vh - 200px);
}
.merge-modal__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.merge-panel {
  border: 1px dashed #ccd3dc;
  border-radius: 8px;
  padding: 14px 16px;
  background: #fafbfc;
  min-height: 140px;
}
.merge-panel__label {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: #1d3a5f;
}
.merge-panel__row {
  margin: 0 0 8px;
  font-size: 14px;
  color: #444;
  line-height: 1.5;
}
.merge-panel__row strong {
  color: #1d3a5f;
}
.merge-panel__empty {
  margin: 0;
  color: #999;
  font-size: 13px;
  line-height: 1.6;
}
.merge-search {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 10px;
}
.merge-search-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: #888;
  line-height: 1.5;
}
.merge-confirm {
  border-top: 1px dashed #ddd;
  padding-top: 16px;
}
.merge-confirm__q {
  margin: 0 0 12px;
  font-weight: 700;
  color: #333;
  font-size: 14px;
}
.merge-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.55;
  cursor: pointer;
}
.merge-option input {
  margin-top: 3px;
  flex-shrink: 0;
}
.merge-option small {
  display: block;
  color: #888;
  font-weight: 400;
  margin-top: 4px;
}
.merge-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px 22px;
  border-top: 1px solid #eef0f3;
}
.merge-modal__err {
  margin: 0 0 12px;
  color: #c0392b;
  font-size: 13px;
}
.merge-history-banner {
  background: #f4f8ff;
  border: 1px solid #c8daf5;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.65;
  color: #444;
}
.merge-history-banner strong {
  color: #1d3a5f;
}
.btn-merge-undo {
  appearance: none;
  border: 0;
  background: transparent;
  color: #2563a8;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  margin-left: 4px;
}
.btn-merge-undo:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .merge-modal__columns {
    grid-template-columns: 1fr;
  }
  .merge-modal__actions {
    flex-direction: column-reverse;
  }
  .merge-modal__actions .btn-back,
  .merge-modal__actions .btn-confirm {
    width: 100%;
  }
}

/* 後台平板／手機 */
@media (max-width: 1024px) {
  /* ── Header：Logo 左 / 登出 中 / 漢堡 右 ── */
  .admin-header {
    gap: 0;
    padding: 8px 14px;
    justify-content: space-between;
  }
  .admin-header__logo { flex-shrink: 0; }
  .admin-header__logo img { height: 32px; }

  /* 登出／改密按鈕區撐開中間空間 */
  .admin-header-actions {
    flex: 1;
    margin: 0 10px;
    min-width: 0;
  }
  .admin-logout {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 12px;
    padding: 5px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .admin-change-password {
    font-size: 12px;
    padding: 5px 10px;
  }

  /* 漢堡按鈕顯示 */
  .admin-menu-toggle { display: flex; flex-shrink: 0; }

  /* nav 完全脫離 header 流，變右側抽屜 */
  /* 預設 display:none → 完全移出渲染樹，零 pointer-event 干擾 */
  .admin-nav {
    display: none;
    position: fixed;
    top: 0; right: 0;
    height: 100dvh;
    width: min(82vw, 280px);
    background: #f4f6f8;
    flex-direction: column;
    align-items: stretch;
    z-index: 200;
    padding: 16px;
    gap: 2px;
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow-y: auto;
    box-shadow: -6px 0 24px rgba(0,0,0,.18);
  }
  /* is-ready：display:flex 但仍在畫面外（供 requestAnimationFrame 用） */
  .admin-nav.is-ready { display: flex; }
  /* is-open：滑入 */
  .admin-nav.is-open  { transform: translateX(0); }

  .admin-nav__close {
    display: block;
    color: #666;
  }
  .admin-nav a {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    padding: 12px 14px;
    border-radius: 8px;
    white-space: normal;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(43,184,168,.15);
    display: block;
  }
  .admin-nav a:hover { background: rgba(43,184,168,.12); color: #1a8e80; }
  .admin-nav a.is-active { background: #2bb8a8; color: #fff; }
}

/* 後台手機版 */
@media (max-width: 767px) {
  .admin-main { padding: 18px 12px 40px; }
  .admin-toolbar { flex-direction: column; align-items: stretch; }
  .admin-toolbar__controls { flex-direction: column; align-items: stretch; }
  .timeline-toolbar__controls {
    flex-direction: column;
    align-items: stretch;
  }
  .timeline-date-controls {
    width: 100%;
    justify-content: stretch;
    gap: 4px;
  }
  .timeline-date-controls .timeline-date-nav {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
  }
  .timeline-date-controls .timeline-date-input {
    min-width: 0;
    width: 100%;
    max-width: none;
    font-size: 12px;
    padding-right: 20px;
  }
  .timeline-date-controls .admin-week-nav__today {
    padding: 0 6px;
    font-size: 12px;
    flex: 0 1 auto;
  }
  .timeline-date-nav,
  .timeline-quick-btns {
    justify-content: center;
  }
  .week-view__toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .week-view__nav {
    justify-content: space-between;
    width: 100%;
  }
  .week-view__nav .admin-week-nav {
    min-height: 36px;
    padding: 6px 10px;
  }
  .week-view__back {
    min-height: 36px;
    justify-content: center;
  }
  .week-grid {
    grid-template-columns: 48px repeat(7, minmax(88px, 1fr));
    min-width: 700px;
    grid-auto-rows: 48px;
  }
  .week-grid__book-name { font-size: 11px; }
  .admin-search { min-width: 0; }
  .admin-title { font-size: 18px; }
  .modal__card { max-height: 90vh; }
}

/* =============================================================
   健康專欄：前台文章列表頁
   ============================================================= */
/* 沿用與預約、治療項目完全相同的背景圖 */
.articles-page {
  background-image: url(images12232025/治療流程與收費標準_背景_桌機.svg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.article-detail-page {
  background-image: url(images12232025/治療流程與收費標準_背景_桌機.svg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 頁面標題區（無遮罩，直接顯示背景圖） */
.articles-hero {
  position: relative;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.articles-hero__inner {
  position: relative;
  text-align: center;
  padding: 48px 24px;
  max-width: 680px;
}
.articles-hero__greeting {
  color: #5d5b5b;
  font-size: clamp(14px, 1.8vw, 17px);
  line-height: 2;
  letter-spacing: 0.5px;
  margin: 0;
  font-weight: 600;
}

/* 分類篩選列 */
.articles-filter-bar {
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(200,210,220,.5);
  position: sticky;
  top: 80px;
  z-index: 100;
}
.articles-filter-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.articles-cat-btn {
  padding: 6px 16px;
  border: 1px solid #d0d5dd;
  border-radius: 20px;
  background: #fff;
  color: #555;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.articles-cat-btn:hover { border-color: #265581; color: #265581; }
.articles-cat-btn.is-active { background: #265581; border-color: #265581; color: #fff; }

/* 文章容器 */
.articles-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px 60px;
  position: relative;
}
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) { .articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .articles-grid { grid-template-columns: 1fr; } }

.articles-loading,
.articles-empty {
  grid-column: 1/-1;
  text-align: center;
  color: #999;
  padding: 60px 0;
  font-size: 15px;
}

/* 文章卡片 */
.articles-card {
  background: rgba(255,255,255,.96);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.articles-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.articles-card__cover-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: #eef2f7;
}
.articles-card__cover-wrap--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #ccc;
}
.articles-card__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.articles-card:hover .articles-card__cover { transform: scale(1.04); }
.articles-card__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.articles-card__cat {
  display: inline-block;
  background: #e8f0fb;
  color: #265581;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  align-self: flex-start;
}
.articles-card__title {
  font-size: 16px;
  font-weight: 700;
  color: #1a2a3a;
  line-height: 1.5;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.articles-card__excerpt {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 12px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.articles-card__date {
  font-size: 12px;
  color: #aaa;
  margin-top: auto;
}

/* 置頂 badge */
.articles-card__pin-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #1a8e80;
  padding: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.articles-card__pin-badge img {
  width: 18px;
  height: 18px;
  display: block;
  filter: brightness(0) invert(1);
}

/* 置頂卡片輪廓 */
.articles-card--pinned {
  box-shadow: 0 0 0 2px rgba(43,184,168,.45), 0 4px 16px rgba(0,0,0,.08);
}
.articles-card--pinned:hover {
  box-shadow: 0 0 0 2px rgba(43,184,168,.8), 0 8px 24px rgba(0,0,0,.12);
}


/* 分頁 */
.articles-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.articles-pg-btn {
  padding: 7px 14px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  background: #fff;
  color: #555;
  font-size: 13px;
  cursor: pointer;
}
.articles-pg-btn:hover { border-color: #265581; color: #265581; }
.articles-pg-btn.is-active { background: #265581; border-color: #265581; color: #fff; }

/* 主選單「物理治療文章」active 狀態 */
.main-nav a.is-active-page span { color: #265581; font-weight: 700; }

/* =============================================================
   健康專欄：前台文章詳情頁
   ============================================================= */
.article-detail-main { min-height: calc(100vh - 200px); padding: 40px 0 60px; }

.article-detail-container {
  max-width: 780px;
  margin: 0 auto;
  padding: 36px 28px 60px;
  background: rgba(255,255,255,.97);
  border-radius: 12px;
  box-shadow: 0 4px 32px rgba(0,0,0,.10);
}

/* 麵包屑 */
.article-breadcrumb {
  margin-bottom: 28px;
  font-size: 14px;
}
.article-breadcrumb a {
  color: #265581;
  text-decoration: none;
  font-weight: 600;
}
.article-breadcrumb a:hover { text-decoration: underline; }

/* 文章本體 */
.article-detail__cover-wrap {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 28px;
  max-height: 420px;
}
.article-detail__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-detail__header { margin-bottom: 28px; }
.article-detail__cat {
  display: inline-block;
  background: #e8f0fb;
  color: #265581;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
  letter-spacing: 1px;
}
.article-detail__title {
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 800;
  color: #1a2a3a;
  line-height: 1.4;
  margin: 0 0 12px;
}
.article-detail__date {
  font-size: 13px;
  color: #aaa;
}

/* Quill 對齊 class → 前台正確顯示（不需要載入 Quill CSS） */
.article-detail__body.ql-content .ql-align-center,
.article-detail__body.ql-content [style*="text-align: center"],
.article-detail__body.ql-content [style*="text-align:center"] { text-align: center; }
.article-detail__body.ql-content .ql-align-right,
.article-detail__body.ql-content [style*="text-align: right"],
.article-detail__body.ql-content [style*="text-align:right"]  { text-align: right; }
.article-detail__body.ql-content .ql-align-justify,
.article-detail__body.ql-content [style*="text-align: justify"],
.article-detail__body.ql-content [style*="text-align:justify"] { text-align: justify; }

/* 圖片是 block，text-align 對它無效，改用 margin:auto 做對齊 */
.article-detail__body.ql-content .ql-align-center img,
.article-detail__body.ql-content [style*="text-align: center"] img,
.article-detail__body.ql-content [style*="text-align:center"] img {
  margin-left: auto;
  margin-right: auto;
}
.article-detail__body.ql-content .ql-align-right img,
.article-detail__body.ql-content [style*="text-align: right"] img,
.article-detail__body.ql-content [style*="text-align:right"] img {
  margin-left: auto;
  margin-right: 0;
}

/* 文章內文（Quill 輸出 HTML 的排版） */
.article-detail__body.ql-content {
  font-size: 16px;
  line-height: 1.9;
  color: #333;
  word-break: break-word;
}
.article-detail__body.ql-content h1,
.article-detail__body.ql-content h2,
.article-detail__body.ql-content h3 {
  font-weight: 700;
  color: #1a2a3a;
  margin: 1.6em 0 .6em;
  line-height: 1.4;
}
.article-detail__body.ql-content h1 { font-size: 1.6em; }
.article-detail__body.ql-content h2 { font-size: 1.35em; }
.article-detail__body.ql-content h3 { font-size: 1.15em; }
.article-detail__body.ql-content p { margin: 0 0 1.1em; }
.article-detail__body.ql-content ul,
.article-detail__body.ql-content ol { padding-left: 1.6em; margin: 0 0 1.1em; }
.article-detail__body.ql-content li { margin-bottom: .4em; }
.article-detail__body.ql-content blockquote {
  border-left: 4px solid #265581;
  margin: 1.2em 0;
  padding: .6em 1em;
  background: #f0f4f8;
  color: #555;
  border-radius: 0 6px 6px 0;
}
.article-detail__body.ql-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: .8em 0;
  display: block;
}
.article-detail__body.ql-content a {
  color: #265581;
  text-decoration: underline;
}

/* YouTube 縮圖（文章內文）— 用 href 特徵偵測，不依賴 class */
.article-detail__body.ql-content a[href*="youtube.com"],
.article-detail__body.ql-content a[href*="youtu.be"] {
  display: inline-block;
  position: relative;
  max-width: 100%;
  text-decoration: none;
}
.article-detail__body.ql-content a[href*="youtube.com"] img,
.article-detail__body.ql-content a[href*="youtu.be"] img {
  display: block;
  max-width: 100%;
  border-radius: 10px;
  cursor: pointer;
}
/* 播放按鈕 overlay */
.article-detail__body.ql-content a[href*="youtube.com"]::after,
.article-detail__body.ql-content a[href*="youtu.be"]::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  background: rgba(255,0,0,.90) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='8,4 21,12 8,20' fill='white'/%3E%3C/svg%3E") center/34px no-repeat;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  transition: transform .2s, background-color .2s;
}
/* 標籤文字：影片 */
.article-detail__body.ql-content a[href*="youtube.com"]::before,
.article-detail__body.ql-content a[href*="youtu.be"]::before {
  content: '▶ 點擊觀看影片';
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
  pointer-events: none;
}
.article-detail__body.ql-content a[href*="youtube.com"]:hover::after,
.article-detail__body.ql-content a[href*="youtu.be"]:hover::after {
  background-color: rgba(200,0,0,.98);
  transform: translate(-50%, -50%) scale(1.1);
}

/* 文章底部日期 */
.article-detail__date-footer {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid #e8e8e8;
  font-size: 13px;
  color: #999;
  line-height: 1.8;
}
.article-detail__date-footer p { margin: 0; }
.article-detail__body.ql-content pre,
.article-detail__body.ql-content code {
  background: #f5f5f5;
  border-radius: 4px;
  padding: .2em .4em;
  font-size: .9em;
}

@media (max-width: 600px) {
  /* 手機改用手機版背景圖，格子不會顯得過大 */
  .articles-page,
  .article-detail-page {
    background-image: url(images12232025/治療流程與收費標準_背景_手機.svg);
    background-attachment: scroll;
    background-size: 160%;
    background-position: center top;
  }

  .article-detail-container { padding: 20px 16px 48px; margin: 0 12px; }
  .article-detail-main { padding: 20px 0 40px; }
  .articles-hero { min-height: 140px; }
  .articles-hero__inner { padding: 36px 20px; }
  .articles-hero__greeting {
    font-size: 15px;   /* ✅ 手機版上方文字大小（可調） */
    line-height: 1.85; /* ✅ 行距（可調） */
  }
  .articles-filter-bar { top: 70px; }
  .articles-container { padding: 20px 12px 36px; }
}

/* ─────────────────────────────────────────
   文章管理：操作欄 4 顆按鈕統一樣式
───────────────────────────────────────── */
.btn-article {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1.5;
  vertical-align: middle;
  transition: background .12s ease;
}
.btn-article + .btn-article { margin-left: 4px; }
.btn-article:hover { background: #f5f5f5; }

/* 置頂 / 取消置頂 */
.btn-article--pin {
  border-color: #1a9b99;
  color: #1a9b99;
}
.btn-article--pin:hover { background: #eaf7f5; }
.btn-article--pin .btn-article__pin-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* 刪除 */
.btn-article--delete {
  border-color: #c0392b;
  color: #c0392b;
}
.btn-article--delete:hover { background: #fff5f5; }

/* ─────────────────────────────────────────
   Flatpickr 月曆自訂樣式（當日班表管理）
───────────────────────────────────────── */
.flatpickr-calendar {
  font-family: inherit;
  font-size: 13px;
  border-radius: 10px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.14) !important;
  border: 1px solid #d0e8e6 !important;
  z-index: 9999 !important;   /* 確保在 header / overlay 之上 */
}

/* ── 頂部 header：青綠底白字 ── */
.flatpickr-months {
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.flatpickr-months .flatpickr-month {
  background: #2bb8a8 !important;
  color: #fff !important;
  height: 44px !important;
}

/* ── 月份下拉 ── */
.flatpickr-current-month {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding-top: 10px !important;
}
.flatpickr-current-month .flatpickr-monthDropdownContainer,
.flatpickr-current-month select.flatpickr-monthDropdown-months {
  color: #fff !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* ── 年份：隱藏上下微調箭頭，讓數字又大又清楚 ── */
.flatpickr-current-month .numInputWrapper {
  width: 70px !important;
}
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
  display: none !important;
}
.flatpickr-current-month input.cur-year {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 2px !important;
  pointer-events: none !important; /* 純顯示，不可手動輸入 */
  -moz-appearance: textfield !important;
}
.flatpickr-current-month input.cur-year::-webkit-inner-spin-button,
.flatpickr-current-month input.cur-year::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* ── 前後翻頁箭頭 ── */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: #fff !important;
  fill: #fff !important;
  font-size: 38px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  padding: 4px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: #fff !important;
  width: 26px !important;
  height: 26px !important;
}
/* 移除點擊/hover/focus 時的白色方塊 */
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover,
.flatpickr-months .flatpickr-prev-month:focus,
.flatpickr-months .flatpickr-next-month:focus,
.flatpickr-months .flatpickr-prev-month:active,
.flatpickr-months .flatpickr-next-month:active {
  background: transparent !important;
  outline: none !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #fff !important; }

/* ── 星期列 ── */
.flatpickr-weekdays { background: #eaf7f5 !important; }
span.flatpickr-weekday { color: #1a8e80 !important; font-weight: 700 !important; }

/* ── 日期格 ── */
.flatpickr-day { border-radius: 6px !important; }
.flatpickr-day:hover { background: #eaf7f5 !important; border-color: #eaf7f5 !important; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: #2bb8a8 !important;
  border-color: #2bb8a8 !important;
  color: #fff !important;
}
.flatpickr-day.today { border-color: #2bb8a8 !important; }
.flatpickr-day.today:hover { background: #eaf7f5 !important; }

/* ── 完全隱藏超出 min/max 的日期 ── */
.flatpickr-day.disabled,
.flatpickr-day.notAllowed {
  visibility: hidden !important;
  pointer-events: none !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── 月曆底部「回到今天」按鈕 ── */
.flatpickr-today-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 12px;
  border-top: 1px solid #eef0f3;
}
/* 圖例：● 已有預約 */
.flatpickr-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: #666;
}
/* 有預約日子的小圓點 */
.flatpickr-day { position: relative; }
.fp-booking-dot {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e8833a;
}
/* 選中日（青綠底）上的圓點改白色，才看得到 */
.flatpickr-day.selected .fp-booking-dot { background: #fff; }
/* 圖例裡的圓點：改為 inline，不用絕對定位 */
.flatpickr-legend .fp-booking-dot {
  position: static;
  transform: none;
  display: inline-block;
  width: 8px;
  height: 8px;
}
.flatpickr-today-btn {
  appearance: none;
  background: #fff;
  border: 1.5px solid #2bb8a8;
  color: #2bb8a8;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  padding: 7px 22px;
  border-radius: 20px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.flatpickr-today-btn:hover { background: #2bb8a8; color: #fff; }

/* ── 手機版月曆遮罩（點擊可關閉） ── */
.flatpickr-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 9998;
}
.flatpickr-backdrop.is-visible { display: block; }

/* ── 手機版：月曆固定置底，外觀與桌機 Flatpickr 完全一致 ── */
@media (max-width: 768px) {
  .flatpickr-calendar.open {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,.18) !important;
    padding: 0 0 env(safe-area-inset-bottom, 12px) !important;
  }
  /* 頂部拖曳提示條 */
  .flatpickr-calendar.open::before,
  .flatpickr-calendar.open::after { display: none !important; }

  .flatpickr-months {
    border-radius: 16px 16px 0 0 !important;
  }
  .flatpickr-months .flatpickr-month {
    border-radius: 16px 16px 0 0 !important;
    height: 48px !important;
  }
  .flatpickr-innerContainer,
  .flatpickr-rContainer {
    width: 100% !important;
    display: block !important;
  }
  .flatpickr-days {
    width: 100% !important;
  }
  .dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 0 8px 12px !important;
    box-sizing: border-box !important;
  }
  span.flatpickr-weekday { font-size: 13px !important; }
  .flatpickr-weekdaycontainer { width: 100% !important; }
  .flatpickr-weekdays { padding: 0 8px !important; box-sizing: border-box !important; }
  /* 關鍵：每格固定 1/7 寬，維持 7 欄格線 */
  .flatpickr-day {
    flex: 0 0 14.2857% !important;
    width: 14.2857% !important;
    max-width: 14.2857% !important;
    font-size: 15px !important;
    height: 44px !important;
    line-height: 44px !important;
  }
}

/* ─────────────────────────────────────────
   班表設定：Info ⓘ 使用說明按鈕 + 浮動提示
───────────────────────────────────────── */
.admin-title {
  position: relative;   /* popup 定位基準 */
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.schedule-info-btn {
  appearance: none;
  background: none;
  border: 1.5px solid #2bb8a8;
  border-radius: 20px;
  padding: 1px 9px;
  font-size: 11px;
  font-weight: 700;
  color: #2bb8a8;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1.4;
  letter-spacing: 0.3px;
  transition: background .12s ease, color .12s ease;
  flex-shrink: 0;
}
.schedule-info-btn:hover,
.schedule-info-btn[aria-expanded="true"] {
  background: #2bb8a8;
  color: #fff;
}
.schedule-info-btn__icon {
  font-size: 14px;
}

/* 浮動提示框 */
.schedule-info-popup {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 200;
  background: #fff;
  border: 1px solid #d0e8e6;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  padding: 18px 20px 16px;
  width: min(400px, 90vw);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.75;
  color: #333;
}
.schedule-info-popup.is-open { display: block; }

.schedule-info-popup__title {
  font-size: 14px;
  font-weight: 700;
  color: #1d3a5f;
  margin: 0 0 10px;
}
.schedule-info-popup__list {
  margin: 0;
  padding: 0 0 0 18px;
}
.schedule-info-popup__list li {
  margin-bottom: 6px;
}
.schedule-info-popup__list li:last-child { margin-bottom: 0; }
.schedule-info-popup__list b { color: #1a8e80; font-weight: 700; }