/* =========================================================================
   依緹美學 EASY BEAUTY — 精緻層（各頁專屬）polish-pages.css（2026-09-23）
   -------------------------------------------------------------------------
   對象：首頁、品牌、醫師團隊、診所環境、最新消息、美學專欄。
   這六頁原本已有共用精緻層，這一批補上每頁自己的版面細節。

   原則同前兩批：只加不改。
   ・以 hover 互動與 ::after 細線為主，不動既有的版面結構與尺寸。
   ・需要進場狀態的部分都掛在 .in 之下，並由 polish.js 的雙保險確保一定會顯示。
   ・所有卡片沿用同一套語彙：底部金線由左展開 ＋ 極輕微上浮 ＋ 箭頭右移，
     讓使用者在不同頁面之間看到的是同一個設計系統，而不是各做各的。
   ========================================================================= */

/* ============================================================
   共用：卡片互動語彙
   把療程卡、文章卡、專欄卡、消息卡統一成同一種回饋。
   ============================================================ */
@media (hover:hover){
  .posts .post,
  .cards .card,
  .featured__card,
  .arts__track .acard,
  .feat__grid .fcard{
    position:relative;
    transition:transform .55s var(--ease),background .45s var(--ease);
  }
  .posts .post::after,
  .cards .card::after,
  .featured__card::after,
  .arts__track .acard::after,
  .feat__grid .fcard::after{
    content:"";
    position:absolute;left:0;right:0;bottom:0;height:2px;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .55s var(--ease);
  }
  .posts .post:hover,
  .cards .card:hover,
  .featured__card:hover,
  .arts__track .acard:hover,
  .feat__grid .fcard:hover{transform:translateY(-3px);}
  .posts .post:hover::after,
  .cards .card:hover::after,
  .featured__card:hover::after,
  .arts__track .acard:hover::after,
  .feat__grid .fcard:hover::after{transform:scaleX(1);}

  /* 卡片裡的圖：滑過時極輕微推近（幅度與療程卡一致） */
  .cards .card__fig img,
  .featured__fig img,
  .feature__fig img,
  .space-photo img,
  .visit__fig img,
  .env__mosaic img,
  .philo__img img,
  .doc-photo__main img{
    transition:transform 1.4s var(--ease);
  }
  .cards .card:hover .card__fig img,
  .featured__card:hover .featured__fig img,
  .feature__in:hover .feature__fig img,
  .space-photo:hover img,
  .visit__fig:hover img,
  .env__mosaic a:hover img,
  .doc-photo__main:hover img{transform:scale(1.04);}

  /* 標題與箭頭 */
  .posts .post:hover h3,
  .cards .card:hover h3,
  .featured__card:hover h3{color:var(--brand);}
  .post__arrow,
  .card__foot .arrow,
  .acard__ft .arrow{display:inline-block;transition:transform .4s var(--ease);}
  .posts .post:hover .post__arrow,
  .cards .card:hover .arrow{transform:translateX(5px);}
}

/* ============================================================
   首頁
   ============================================================ */
/* 八大服務的圖示：滑過時微微浮起，並讓金色更亮一階 */
@media (hover:hover){
  .fcard__ico{transition:transform .55s var(--ease);}
  .feat__grid .fcard:hover .fcard__ico{transform:translateY(-3px);}
}
/* 環境照的鑲嵌區塊：滑過單張時其他張退到背景 */
@media (hover:hover){
  .env__mosaic > *{transition:opacity .5s var(--ease),filter .5s var(--ease);}
  .env__mosaic:hover > *:not(:hover){opacity:.55;filter:saturate(.85);}
}
/* 療程分頁（醫學美容那一區）的膠囊：與全站 chip 同一套底線語彙 */
@media (hover:hover){
  .svc__chips .chip,
  .team__chips .chip{
    background-image:linear-gradient(var(--gold),var(--gold));
    background-repeat:no-repeat;
    background-position:50% calc(100% - 6px);
    background-size:0 1px;
    transition:background-size .5s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
  }
  .svc__chips .chip:hover,
  .team__chips .chip:hover{background-size:60% 1px;color:var(--brand);}
}

/* ============================================================
   品牌頁：五大特點
   ============================================================ */
.vitem{position:relative;}
/* 每一項左側補一條金線，隨進場由上往下畫出來，替清單建立節奏 */
html.p-js .vitem::before{
  content:"";
  position:absolute;
  left:-18px;top:.35em;bottom:.35em;
  width:1px;
  background:var(--gold-lt);
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform .8s var(--ease);
}
html.p-js .vitem.in::before{transform:none;}
@media (max-width:900px){
  html.p-js .vitem::before{display:none;}   /* 手機版左側沒有餘裕，不畫線 */
}
@media (hover:hover){
  .vitem__no{transition:color .45s var(--ease);}
  .vitem:hover .vitem__no{color:var(--brand);}
}

/* ============================================================
   醫師團隊
   ============================================================ */
/* 醫師照下方的小圖：滑過時加一圈金框，點選目標更明確 */
@media (hover:hover){
  .doc-photo__thumbs img{
    transition:box-shadow .4s var(--ease),transform .5s var(--ease);
  }
  .doc-photo__thumbs img:hover{
    box-shadow:0 0 0 2px var(--gold);
    transform:translateY(-2px);
  }
}
/* 專長與學經歷的條列：小圓點隨進場出現 */
html.p-js .doc-spec li::before,
html.p-js .cred li::before{
  transform:scale(0);
  transition:transform .5s var(--ease);
}
html.p-js .in .doc-spec li::before,
html.p-js .in .cred li::before,
html.p-js .doc-spec.in li::before,
html.p-js .cred.in li::before{transform:none;}
/* 醫師英文名：與中文名之間的金線 */
@media (hover:hover){
  .doc-en{transition:color .45s var(--ease),letter-spacing .6s var(--ease);}
  .doc-body:hover .doc-en{color:var(--brand);letter-spacing:.2em;}
}

/* ============================================================
   診所環境
   ============================================================ */
/* 空間照：滑過時浮起一層很淡的暖影 */
@media (hover:hover){
  .space-photo{transition:box-shadow .6s var(--ease),transform .6s var(--ease);}
  .space-photo:hover{
    box-shadow:0 20px 50px -34px rgba(60,24,12,.5);
    transform:translateY(-3px);
  }
}
/* 就診流程：步驟編號隨進場浮出，並在桌機版用一條金線把步驟串起來 */
html.p-js .flow__no{
  opacity:0;
  transform:translateY(8px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
html.p-js .in .flow__no,
html.p-js .flow__item.in .flow__no{opacity:1;transform:none;}
.flow__grid{position:relative;}
@media (min-width:901px){
  html.p-js .flow__grid::before{
    content:"";
    position:absolute;
    left:6%;right:6%;top:26px;
    height:1px;
    background:var(--gold-lt);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform 1.4s .2s var(--ease);
    z-index:0;
  }
  html.p-js .flow__grid.in::before,
  html.p-js .in .flow__grid::before{transform:none;}
  .flow__item{position:relative;z-index:1;}
}

/* ============================================================
   最新消息
   ============================================================ */
/* 主打消息的標籤：加一條金色短線，與全站的 sec-label 同一個語彙 */
.featured__tag{display:inline-flex;align-items:center;gap:10px;}
.featured__tag::before{
  content:"";
  width:18px;height:1px;
  background:var(--gold);
  flex:none;
}
.featured__meta{font-variant-numeric:tabular-nums;}

/* ============================================================
   美學專欄
   ============================================================ */
/* 分類篩選：目前選取的那一個加金色底線 */
.filters .filter{position:relative;}
.filters .filter[aria-current="page"]::after,
.filters .filter.on::after{
  content:"";
  position:absolute;
  left:12%;right:12%;bottom:-6px;
  height:1px;
  background:var(--gold);
}
/* 專欄卡片的分類標籤 */
.card__cat{letter-spacing:.18em;}
.card__foot{font-variant-numeric:tabular-nums;}

/* ============================================================
   關閉動效
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .posts .post,.cards .card,.featured__card,.arts__track .acard,.feat__grid .fcard,
  .fcard__ico,.env__mosaic > *,.space-photo,.doc-photo__thumbs img,.doc-en,
  .svc__chips .chip,.team__chips .chip,.post__arrow{transition:none;}
  .posts .post::after,.cards .card::after,.featured__card::after,
  .arts__track .acard::after,.feat__grid .fcard::after{transition:none;}
  .cards .card__fig img,.featured__fig img,.feature__fig img,.space-photo img,
  .visit__fig img,.env__mosaic img,.philo__img img,.doc-photo__main img{transition:none;}
  html.p-js .vitem::before{transform:none;transition:none;}
  html.p-js .flow__no{opacity:1;transform:none;transition:none;}
  html.p-js .flow__grid::before{transform:none;transition:none;}
  html.p-js .doc-spec li::before,html.p-js .cred li::before{transform:none;transition:none;}
}

/* ──────────────────────────────────────────────────────────────────────
   fcard-no-underline｜2026-10-03 客戶要求
   「品牌六大堅持」的卡片滑過時底部會展開一條金線。
   但這張卡片在 home.css 設了 cursor:default —— 它本來就不能點，
   而底部劃線是「這裡可以點」的視覺暗示，放在不可點的卡片上會誤導。
   因此只拿掉這一區的線。

   其餘卡片（文章 .post、分類 .card、精選 .featured__card、
   文章輪播 .acard）都是可點擊的，線條在那裡是有用的指示，故保留。

   卡片浮起 translateY(-3px)、圖示放大位移與變色等特效一律不動。
   要還原只需刪除本段。
   ────────────────────────────────────────────────────────────────────── */
.feat__grid .fcard::after{ content:none; }

/* ──────────────────────────────────────────────────────────────────────
   svc-chip-contrast｜2026-10-03 客戶回報「按鈕文字不清楚」

   實測現況（面板底 rgb(173,150,128)）：
     療程膠囊文字 1.87、外框 1.14、預約按鈕 2.30
     （WCAG AA：一般文字需 4.5、UI 元件外框需 3.0）
   不清楚的原因是三件事疊加：13px + Light 300 + 最低對比。

   採「方案一」：面板底色、版型、間距一律不動，
   只改文字顏色、字重、字級、外框與陰影。以下數值都是實算結果：
     靜態 #3C180C on rgb(184,165,146) → 6.64 ✓
     外框 rgba(60,24,12,.65)          → 3.39 ✓
     hover #3C180C on #E4D8C2         → 11.22 ✓

   一併修正兩個既有問題：
   1) polish-pages 原本在 hover 把字色覆寫成 --brand(#9D7553)，
      壓在 --gold-lt(#E4D8C2) 上只有 2.92，比沒 hover 還糟。
   2) 「美胸整形」面板自訂的 #674B39 只有 3.19，一併拉齊。

   只限 .svc__panel 內，.chip 與 .btn--line-light 在站上其他深色區塊的
   用法完全不受影響。要還原只需刪除本段。
   ────────────────────────────────────────────────────────────────────── */
.svc__panel .svc__chips .chip--dark,
.svc__panel.is-breast .svc__chips .chip--dark{
  color: var(--ink);
  background-color: rgba(255,255,255,.14);
  border-color: rgba(60,24,12,.65);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .04em;
  box-shadow: 0 1px 2px rgba(60,24,12,.10), 0 6px 14px -8px rgba(60,24,12,.30);
}
.svc__panel .svc__chips .chip--dark:hover,
.svc__panel.is-breast .svc__chips .chip--dark:hover{
  color: var(--ink);
  background-color: var(--gold-lt);
  border-color: var(--gold-lt);
  box-shadow: 0 2px 4px rgba(60,24,12,.14), 0 10px 20px -10px rgba(60,24,12,.38);
}

/* 預約專業諮詢：同一塊面板上，米色字對比只有 2.30，一併拉齊。
   hover 的掃過填色（.btn::after）維持原本設計，只把文字壓深。 */
.svc__panel .svc__more .btn--line-light,
.svc__panel.is-breast .svc__more .btn--line-light{
  color: var(--ink);
  border-color: rgba(60,24,12,.70);
  font-weight: 400;
  box-shadow: 0 1px 2px rgba(60,24,12,.10), 0 6px 14px -8px rgba(60,24,12,.26);
}
.svc__panel .svc__more .btn--line-light:hover,
.svc__panel.is-breast .svc__more .btn--line-light:hover{
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce){
  .svc__panel .svc__chips .chip--dark,
  .svc__panel .svc__more .btn--line-light{ box-shadow: none; }
}

/* ──────────────────────────────────────────────────────────────────────
   modal-fig｜2026-10-03 療程彈窗帶入代表圖片
   客戶指定比例 1.11:1。這正好是現有圖片的原生尺寸 1110x1000，
   所以完全不會裁切，主體不會被切到。
   圖片放在 .modal__bd 內部的最前面，會跟著內文一起捲動，
   不會永久佔住彈窗版面。
   ────────────────────────────────────────────────────────────────────── */
.modal__fig{
  margin: 0 0 26px;
  aspect-ratio: 1110 / 1000;   /* = 1.11:1 */
  overflow: hidden;
  border-radius: 4px;
  background: var(--line);
}
.modal__fig img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* modal__fig 桌機限寬｜2026-10-03 方案 A
   1.11:1 在 880px 寬的彈窗上換算高度約 700px，會把文字整個推出可視區
   （實測佔內文可視區 128%，一行字都看不到）。
   比例與「不裁切」維持不變，改為限制最大寬度置中：460 / 1.11 = 414px 高，
   佔可視區約 76%，文字就能露出。手機版本來就正常（53%），不受影響。 */
@media (min-width: 821px){
  .modal__fig{ max-width: 460px; margin-left: auto; margin-right: auto; }
}

/* ──────────────────────────────────────────────────────────────────────
   values-bg-match-service｜2026-10-03 客戶要求
   /brand 的「依緹堅持的五件事」區塊底色，改成與首頁 SERVICE 區塊
   （div.svc__panel）一致的 #AD9680。

   原本是 #7B5A3E（品牌變數 --brand-deep），首頁並沒有任何區塊使用它，
   所以客戶覺得色系不一致是有根據的。

   只改底色，形狀、圓角、版型、文字一律不動。
   要還原只需刪除本段。

   ⚠ 已知影響：這一區的文字是米色 #F3E7D6，壓在較淺的 #AD9680 上
   對比會由 5.10 降到 2.31（內文 1.96），低於 WCAG AA 的 4.5。
   若要同時維持可讀性，需另外把文字改為深色 #3C180C（對比 5.61），
   但那會改變整區的視覺個性，故不在本次範圍，待客戶確認。
   ────────────────────────────────────────────────────────────────────── */
section.values{ background: #AD9680; }

/* ──────────────────────────────────────────────────────────────────────
   flow-lines-remove｜2026-10-03 客戶要求
   /clinic「從預約到專業諮詢」區塊的橫線，客戶看不出用途要求移除。
   2026-10-03 更正：老闆指示只移除前三條，第四條金線保留。

   實測該處共四條線（1280px 視窗，座標以 .flow__grid 左上為原點）：
     1. flow__item[0] border-top  左 0   寬 355  2px #718078  對比 4.09
     2. flow__item[1] border-top  左 394 寬 355  2px #718078  對比 4.09
     3. flow__item[2] border-top  左 788 寬 355  2px #718078  對比 4.09
     4. flow__grid::before        左 69  寬 1006 1px #E4D8C2  對比 1.39

   前三條來自原始設計 clinic.css，顏色 var(--sage) #718078 是灰綠色，
   而全站僅此一處把灰綠當可見裝飾使用，與棕／金／米的品牌色盤不合，
   這正是客戶認不出它是什麼的原因。

   第四條（flow__grid::before 金色連接線）經老闆指示【保留】，不移除。
   註：它對比僅 1.39，在米白底上幾乎看不見，若日後覺得沒有效果，
   可加回 html.p-js .flow__grid::before{ content: none; } 移除它。

   只移除線條本身；padding、間距、編號、文字一律不動。
   要還原只需刪除本段。
   ────────────────────────────────────────────────────────────────────── */
.flow__item{ border-top: 0; }

/* ──────────────────────────────────────────────────────────────────────
   svc-panel-ivory｜2026-10-07 客戶反映「按鈕的陰影太深、視覺效果很暗沉」
   首頁 SERVICE 區塊（div.svc__panel）裡的療程按鈕與「預約專業諮詢」：

   ・療程按鈕：深棕框＋深棕字＋深棕陰影 → 象牙白細框＋象牙白字，不用陰影
   ・預約專業諮詢：改成象牙白實心＋深棕字，和療程按鈕分出主次
   ・說明文字：82% 透明的米色 → 不透明的象牙白
   整區統一成淺色系，和原本就是白色的標題一致。

   只限 .svc__panel 內；.chip、.btn--line-light 在站上其他區塊的樣子不變。
   底色 #AD9680、版型、圓角、間距、手機兩欄格線都沒有動。
   要還原只需刪除本段（會回到上面 2026-10 的深棕版本）。
   ────────────────────────────────────────────────────────────────────── */
.svc__panel .svc__desc,
.svc__panel.is-breast .svc__desc{
  color: #FFFEF2;
}
.svc__panel .svc__chips .chip--dark,
.svc__panel.is-breast .svc__chips .chip--dark{
  color: #FFFEF2;
  background-color: transparent;
  background-image: none;
  border-color: rgba(255,254,242,.75);
  box-shadow: none;
}
.svc__panel .svc__chips .chip--dark:hover,
.svc__panel.is-breast .svc__chips .chip--dark:hover{
  color: var(--ink);
  background-color: #FFFEF2;
  background-image: none;
  border-color: #FFFEF2;
  box-shadow: none;
}
.svc__panel .svc__more .btn--line-light,
.svc__panel.is-breast .svc__more .btn--line-light{
  color: var(--ink);
  background-color: #FFFEF2;
  border-color: #FFFEF2;
  box-shadow: none;
}
.svc__panel .svc__more .btn--line-light::after,
.svc__panel.is-breast .svc__more .btn--line-light::after{
  background: var(--gold-lt);
}
.svc__panel .svc__more .btn--line-light:hover,
.svc__panel.is-breast .svc__more .btn--line-light:hover{
  color: var(--ink);
  border-color: var(--gold-lt);
}

/* ──────────────────────────────────────────────────────────────────────
   modal-step-figs｜2026-10-08 客戶反映「首頁療程按鈕的預覽沒有跟頁面同步」
   首頁療程彈窗的「療程方式」：步驟有小插圖時，與療程頁一樣以
   「插圖＋編號＋文字」呈現。彈窗比較窄，插圖與間距依彈窗寬度縮小。
   沒有插圖的療程維持原本的圓點清單。只作用在彈窗（.modal）內。
   ────────────────────────────────────────────────────────────────────── */
.modal .mblk--figs ul{counter-reset:ebmstep;}
.modal .mblk--figs li{
  display:grid;
  grid-template-columns:clamp(96px,22%,150px) 30px minmax(0,1fr);
  align-items:center;
  column-gap:clamp(12px,1.8vw,18px);
  padding:12px;
  margin:0 0 10px;
  background:rgba(255,255,255,.62);
  border:1px solid var(--line);
}
.modal .mblk--figs li:last-child{margin-bottom:0;}
.modal .mblk--figs li::before{
  counter-increment:ebmstep;
  content:counter(ebmstep,decimal-leading-zero);
  position:static;
  grid-column:2;grid-row:1;
  width:30px;height:30px;
  border-radius:50%;
  border:1px solid var(--gold);
  background:var(--bg);
  color:var(--brand);
  font-family:var(--ff-en);
  font-size:12px;letter-spacing:.06em;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.modal .mblk--figs .mstep__fig{
  grid-column:1;grid-row:1;
  position:relative;display:block;
  aspect-ratio:4/3;
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
}
.modal .mblk--figs .mstep__fig img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;border-radius:0;object-fit:contain;}
.modal .mblk--figs .mstep__txt{grid-column:3;grid-row:1;}
@media (max-width:640px){
  .modal .mblk--figs li{grid-template-columns:92px minmax(0,1fr);row-gap:6px;align-items:start;padding:10px;}
  .modal .mblk--figs .mstep__fig{grid-row:1 / span 2;}
  .modal .mblk--figs li::before{grid-column:2;grid-row:1;width:26px;height:26px;font-size:11px;}
  .modal .mblk--figs .mstep__txt{grid-column:2;grid-row:2;}
}