/* ============================================================
   依緹美學 — home 頁面樣式（由原網站 home.html 內嵌樣式抽出，內容未變更）
   ============================================================ */
/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;color:#fff;}
.hero__bg{position:absolute;inset:-6%;will-change:transform;}
.hero__scene{position:absolute;inset:0;overflow:hidden;background:#3B2415;}
.hero__scene img{
  width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  /* the reception shot is already warm travertine — only a light grade needed */
  filter:sepia(.12) saturate(1.06) contrast(1.03);
}
.hero__tint{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;
  background:radial-gradient(130% 100% at 58% 38%,rgba(255,244,228,1),rgba(226,190,152,.86) 62%,rgba(168,116,72,.8));
}
.hero__sweep{
  position:absolute;top:0;left:-40%;width:38%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-14deg);animation:sweep 7.5s var(--ease-io) 1.6s infinite;
}
@keyframes sweep{0%{left:-45%}55%,100%{left:135%}}
.hero__veil{
  position:absolute;inset:0;
  /* readability scrim: enough behind the headline on the left, clearing quickly
     to the right so the architecture stays visible */
  background:linear-gradient(90deg,rgba(24,11,7,.62) 0%,rgba(24,11,7,.34) 34%,rgba(24,11,7,.08) 66%,rgba(24,11,7,0) 100%),
             linear-gradient(0deg,rgba(24,11,7,.34),transparent 34%),
             linear-gradient(180deg,rgba(24,11,7,.34),transparent 20%);
}
.hero__inner{
  position:relative;z-index:3;height:100%;display:flex;flex-direction:column;
  justify-content:center;padding:0 var(--pad);
}
.hero__title{
  font-family:var(--ff-en);font-weight:300;text-transform:uppercase;
  font-size:clamp(23px,5.9vw,100px);line-height:1.14;letter-spacing:.05em;
  margin:0 0 26px;text-shadow:0 8px 40px rgba(0,0,0,.35);
}
.hero__title .ln{display:block;overflow:hidden;}
/* only hidden once JS has split the line — without JS the H1 renders normally */
.hero__title.split .ch{display:inline-block;transform:translateY(115%);opacity:0;}
.hero__title.split.play .ch{animation:chUp .95s var(--ease) both;} /* @keyframes chUp 在 site.css */
.hero__sub{
  display:inline-flex;align-items:center;gap:16px;
  font-size:clamp(15px,1.7vw,22px);letter-spacing:.42em;
  padding:10px 0;opacity:0;transform:translateY(16px);
  animation:fadeUp 1s 1.5s var(--ease) forwards;
}
.hero__sub::before{content:"";width:44px;height:1px;background:var(--gold-lt);}
.hero__meta{
  position:absolute;right:var(--pad);bottom:52px;z-index:3;text-align:right;
  font-family:var(--ff-sans);font-size:var(--fs-xs);letter-spacing:.26em;color:rgba(255,255,255,.75);
  opacity:0;animation:fadeUp 1s 1.9s var(--ease) forwards;line-height:var(--lh-loose);
}
.scroll-cue{
  position:absolute;left:var(--pad);bottom:44px;z-index:3;display:flex;align-items:center;gap:14px;
  font-family:var(--ff-en);font-size:var(--fs-2xs);letter-spacing:.42em;color:rgba(255,255,255,.8);
  opacity:0;animation:fadeUp 1s 2.05s var(--ease) forwards;
}
.scroll-cue i{display:block;width:64px;height:1px;background:rgba(255,255,255,.35);position:relative;overflow:hidden;}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-100%);
  animation:cue 2.2s var(--ease-io) infinite;}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
/* ============================================================
   SECTION 02 — 品牌理念 PHILOSOPHY
   ============================================================ */
.philo{position:relative;padding:var(--sec-y) var(--pad);overflow:hidden;}
.philo::before{
  content:"";position:absolute;left:0;top:0;width:52%;height:74%;
  background:var(--white);border-radius:0 0 240px 0;z-index:0;
}
.philo__grid{
  position:relative;z-index:2;max-width:var(--w-page);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(30px,5vw,90px);align-items:center;
}
.philo__figure{position:relative;}
.philo__img{
  position:relative;aspect-ratio:4/4.5;border-radius:0 0 0 200px;overflow:hidden;
  background:
    radial-gradient(80% 60% at 30% 22%,#fdf6ef 0%,#f0e2d6 40%,#d9c2b3 72%,#b99b8c 100%);
  box-shadow:0 40px 90px -50px rgba(60,30,20,.55);
}
.philo__img img{
  width:100%;height:100%;object-fit:cover;object-position:52% 22%;
  filter:sepia(.12) saturate(.96) contrast(1.02);
}
.philo__body{max-width:640px;}
.philo__en{
  font-size:clamp(34px,4.6vw,66px);color:var(--ink);margin:0 0 30px;
}
.philo__lead{
  font-size:clamp(17px,1.6vw,21px);font-weight:400;letter-spacing:.16em;
  line-height:var(--lh-loose);color:var(--ink);margin:0 0 26px;padding-left:20px;
  border-left:2px solid var(--gold);
}
.philo__p{font-size:var(--fs-md);line-height:var(--lh-loose);color:var(--ink-2);margin:0 0 18px;letter-spacing:.09em;}
.philo__cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px;}

/* ============================================================
   SECTION 03 — 品牌特點 FEATURES
   ============================================================ */
.feat{position:relative;padding:var(--sec-y) var(--pad);overflow:hidden;}
/* 5 cards (per 首頁文案.docx) on a 6-col track so the trailing row of two
   sits centred instead of hanging left */
.feat__grid{
  position:relative;z-index:2;max-width:var(--w-page);margin:0 auto;
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(34px,4.4vw,76px) clamp(24px,4vw,64px);
}
.fcard{grid-column:span 2;}
.fcard:nth-child(4){grid-column:2/4;}
.fcard:nth-child(5){grid-column:4/6;}
.fcard{text-align:center;cursor:default;}
.fcard__ico{
  width:104px;height:104px;margin:0 auto 26px;border-radius:50%;
  background:var(--white);display:grid;place-items:center;
  box-shadow:0 16px 40px -26px rgba(60,40,30,.5);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),background .6s var(--ease);
}
.fcard__ico svg{width:42px;height:42px;stroke:var(--ink);fill:none;stroke-width:1.15;
  transition:stroke .5s var(--ease),transform .6s var(--ease);}
.fcard:hover .fcard__ico{transform:translateY(-10px) scale(1.06);
  box-shadow:0 26px 50px -24px rgba(157,117,83,.42);background:var(--brand);}
.fcard:hover .fcard__ico svg{stroke:var(--gold-lt);transform:rotate(-6deg);}
.fcard h3{
  font-size:var(--fs-lg);font-weight:500;letter-spacing:.2em;margin:0 0 14px;
  transition:color .5s var(--ease);
}
.fcard:hover h3{color:var(--brand);}
.fcard h3 em{font-style:normal;color:var(--gold);padding:0 2px;}
.fcard p{font-size:var(--fs-base);line-height:var(--lh-loose);color:var(--ink-3);margin:0;letter-spacing:.06em;}

/* ============================================================
   SECTION 03B — 診所環境 THE SPACE
   ============================================================ */
.env{position:relative;padding:var(--sec-y) var(--pad);background:var(--white);overflow:hidden;}
.env__wrap{max-width:var(--w-page);margin:0 auto;}
.env__head{
  display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,1fr);
  gap:clamp(28px,6vw,100px);align-items:end;margin-bottom:clamp(38px,5vw,72px);
}
.env__kicker{
  display:block;font-family:var(--ff-en);font-size:var(--fs-sm);font-weight:500;
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}
.env__head h2{
  margin:0;font-size:clamp(27px,3vw,44px);font-weight:400;line-height:var(--lh-body);
  letter-spacing:.16em;color:var(--ink);
}
.env__head p{
  margin:0;max-width:var(--w-text);font-size:var(--fs-md);line-height:var(--lh-loose);
  letter-spacing:.08em;color:var(--ink-3);
}
.env__mosaic{
  display:grid;grid-template-columns:minmax(0,1.42fr) minmax(260px,.58fr);
  grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;
}
.env__feature{grid-row:1/3;aspect-ratio:1.48/1;}
.env__side{min-height:0;}
.env__strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;}
.env__strip .env__photo{aspect-ratio:1.5/1;}
.env__photo{
  position:relative;margin:0;overflow:hidden;background:var(--sand);
  border-radius:var(--r-sm);box-shadow:0 28px 60px -42px rgba(55,32,21,.5);
}
.env__photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:sepia(.08) saturate(.96) contrast(1.02);
  transition:transform 1.2s var(--ease),filter 1.2s var(--ease);
}
.env__photo:hover img{transform:scale(1.035);filter:sepia(.02) saturate(1.02) contrast(1.03);}
.env__photo figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:42px 20px 16px;
  background:linear-gradient(transparent,rgba(35,20,14,.7));color:#fff;
  font-size:var(--fs-xs);letter-spacing:.18em;line-height:var(--lh-body);
}

/* ============================================================
   SECTION 04 — 療程專區 SERVICE
   ============================================================ */
.svc{position:relative;padding:0 0 clamp(90px,11vw,160px);}
.svc__panel{
  position:relative;background:var(--brand-surface);color:#F3E7D6;
  border-radius:0 clamp(120px,16vw,300px) clamp(120px,16vw,300px) 0;
  margin-right:clamp(0px,6vw,120px);
  padding:var(--sec-y) var(--pad);
  overflow:hidden;
}
.svc__panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 80% 10%,rgba(255,220,180,.10),transparent 60%);
}
.svc__ghost{
  top:clamp(30px,4vw,70px);left:50%;transform:translateX(-50%);
  font-size:clamp(80px,15vw,230px);color:rgba(255,255,255,.055);
}
.svc__head{position:relative;z-index:3;text-align:center;margin-bottom:clamp(40px,5vw,68px);}
.svc__head h2{
  font-size:clamp(19px,2.1vw,27px);font-weight:400;letter-spacing:.2em;
  line-height:var(--lh-body);margin:0;
}
.svc__head .en{
  display:block;font-family:var(--ff-en);font-size:clamp(15px,1.5vw,19px);
  letter-spacing:.44em;color:var(--gold-lt);margin-bottom:14px;text-transform:uppercase;
}
.svc__body{
  position:relative;z-index:3;max-width:var(--w-page);margin:0 auto;
  display:grid;grid-template-columns:210px minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(20px,3vw,54px);align-items:start;
}
/* tabs */
.svc__tabs{
  background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 32px 70px -34px rgba(0,0,0,.5);
}
.svc__tab{
  display:block;width:100%;text-align:center;border:0;background:#fff;
  padding:19px 10px;font-size:var(--fs-md);letter-spacing:.14em;color:var(--ink-3);
  border-bottom:1px solid var(--sand);cursor:pointer;position:relative;
  transition:background .45s var(--ease),color .45s var(--ease),letter-spacing .45s var(--ease);
}
.svc__tab:last-child{border-bottom:0;}
.svc__tab::after{
  content:"→";position:absolute;right:16px;top:50%;transform:translate(6px,-50%);
  opacity:0;transition:.45s var(--ease);
}
.svc__tab:hover{background:var(--sand);color:var(--ink);}
.svc__tab.on{background:var(--brand-deep);color:#fff;letter-spacing:.2em;}
.svc__tab.on::after{opacity:1;transform:translate(0,-50%);}
/* visual */
.svc__vis{
  position:relative;aspect-ratio:1/1.16;border-radius:10px;overflow:hidden;
  background:linear-gradient(160deg,#fdfaf7,#efe3da 55%,#d9c6bb);
  box-shadow:0 34px 80px -40px rgba(0,0,0,.65);
}
.svc__vis img{
  width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  filter:sepia(.10) saturate(.98) contrast(1.03);
  transition:transform 1.6s var(--ease);
}
.svc__vis:hover img{transform:scale(1.05);}
.svc__vis .tag{
  position:absolute;left:0;top:0;z-index:2;padding:10px 20px;
  background:rgba(157,117,83,.86);color:#F3E7D6;font-size:var(--fs-xs);letter-spacing:.3em;
}
/* detail */
.svc__detail{padding-top:8px;}
.svc__detail .bar-title{color:#fff;margin:0 0 24px;}
.svc__detail .bar-title::before{background:var(--gold-lt);}
.svc__desc{
  font-size:var(--fs-base);line-height:var(--lh-loose);letter-spacing:.08em;color:rgba(243,231,214,.82);
  margin:0 0 34px;max-width:var(--w-text);
}
.svc__chips{display:flex;flex-wrap:wrap;gap:12px;max-width:640px;}
.svc__fade{animation:svcIn .7s var(--ease);}
@keyframes svcIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.svc__more{margin-top:38px;}
/* 淡棕背景上的美胸內容：提高閱讀對比，保留標題的柔和米白層次 */
.svc__panel.is-breast .svc__desc{color:#543D30;}
.svc__panel.is-breast .svc__chips .chip--dark{
  color:#674B39;border-color:rgba(103,75,57,.52);background:rgba(255,255,255,.10);
}
.svc__panel.is-breast .svc__chips .chip--dark:hover{
  color:#F3E7D6;border-color:#674B39;background:#674B39;
}
.svc__panel.is-breast .svc__more .btn--line-light{
  color:#5A3C2C;border-color:rgba(90,60,44,.58);
}
.svc__panel.is-breast .svc__more .btn--line-light::after{background:#5A3C2C;}
.svc__panel.is-breast .svc__more .btn--line-light:hover{color:#F3E7D6;}

/* ============================================================
   SECTION 05 — 美學專欄 ARTICLES
   ============================================================ */
.arts{position:relative;padding:var(--sec-y) 0;overflow:hidden;}
.arts__ghost{
  top:clamp(60px,7vw,120px);left:var(--pad);
  font-size:clamp(60px,11vw,168px);color:rgba(157,117,83,.06);
}
.arts__head{
  position:relative;z-index:2;max-width:var(--w-page);margin:0 auto clamp(34px,4vw,56px);
  padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.arts__controls{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex:none;}
.arts__nav{display:flex;gap:12px;}
.arrow{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:transparent;
  display:grid;place-items:center;cursor:pointer;transition:.5s var(--ease);
}
.arrow svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.2;transition:stroke .4s;}
.arrow:hover{background:var(--brand);border-color:var(--brand);transform:scale(1.07);}
.arrow:hover svg{stroke:#fff;}
.arrow:disabled{opacity:.32;cursor:not-allowed;transform:none;background:transparent;border-color:var(--line);}
.arrow:disabled svg{stroke:var(--ink);}
.arts__track{
  display:flex;gap:clamp(18px,2.2vw,34px);padding:10px var(--pad) 30px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;
}
.arts__track::-webkit-scrollbar{display:none;}
.arts__track.drag{cursor:grabbing;scroll-snap-type:none;}
.acard{
  flex:0 0 clamp(272px,26vw,376px);scroll-snap-align:start;
  background:#fff;padding:clamp(26px,2.6vw,40px);border-radius:4px;
  border:1px solid var(--line);display:flex;flex-direction:column;
  min-height:330px;transition:.6s var(--ease);
}
.acard:hover{transform:translateY(-12px);box-shadow:0 34px 70px -40px rgba(60,30,20,.55);border-color:var(--gold);}
.acard__cat{font-family:var(--ff-sans);font-size:var(--fs-2xs);letter-spacing:.3em;color:var(--gold);margin-bottom:16px;}
.acard h3{font-size:var(--fs-lg);font-weight:500;line-height:var(--lh-body);letter-spacing:.09em;margin:0 0 16px;
  transition:color .5s var(--ease);}
.acard:hover h3{color:var(--brand);}
.acard p{font-size:var(--fs-sm);line-height:var(--lh-loose);color:var(--ink-3);margin:0 0 auto;letter-spacing:.05em;}
.acard__ft{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--ff-en);font-size:var(--fs-sm);letter-spacing:.14em;color:var(--ink-3);
}
.acard__ft .go{transition:transform .45s var(--ease);}
.acard:hover .acard__ft .go{transform:translateX(7px);color:var(--brand);}
.acard--hero{
  position:relative;background:linear-gradient(150deg,#f6ece4,#e2cabc 60%,#c9a394);
  border:0;justify-content:flex-end;overflow:hidden;color:#fff;
  flex:0 0 clamp(300px,30vw,440px);
}
.acard__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  filter:sepia(.14) saturate(.98);
  transition:transform 1.6s var(--ease);
}
.acard--hero:hover .acard__bg{transform:scale(1.06);}
.acard--hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(52,22,18,.86),rgba(52,22,18,.30) 52%,rgba(52,22,18,.10));
}
.acard--hero .in-hero{position:relative;z-index:2;}
.acard--hero h3{font-size:clamp(20px,2vw,27px);color:#fff;margin-bottom:8px;}
.acard--hero p{color:rgba(255,255,255,.85);}
.arts__badge{
  position:relative;z-index:3;flex:none;width:96px;height:96px;
  border-radius:50%;border:1px solid var(--gold);
  display:grid;place-items:center;text-align:center;font-size:var(--fs-xs);letter-spacing:.2em;
  color:var(--ink-2);background:var(--bg);line-height:var(--lh-body);transition:.55s var(--ease);
}
.arts__badge:hover{background:var(--brand);color:#F3E7D6;border-color:var(--brand);transform:rotate(8deg) scale(1.05);}
/* ============================================================
   SECTION 06 — 醫師團隊 TEAM
   ============================================================ */
.team{position:relative;padding:var(--sec-y) var(--pad);overflow:hidden;
  background:linear-gradient(180deg,var(--bg) 0%,#FCF7EC 40%,#F5EDE0 100%);}
.team::before{
  content:"";position:absolute;left:-14%;top:-10%;width:56%;height:70%;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),transparent 66%);
}
.team__grid{
  position:relative;z-index:2;max-width:var(--w-page);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(26px,4vw,70px);align-items:center;
}
.team__en{font-size:clamp(40px,5.4vw,80px);color:var(--brand);margin:0 0 26px;}
.team__p{font-size:var(--fs-base);line-height:var(--lh-loose);color:var(--ink-2);margin:18px 0 0;letter-spacing:.08em;}
.team__chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}
.team__stage{position:relative;display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(6px,1.4vw,22px);min-height:clamp(360px,44vw,560px);}
/* [TEAMORDER-20261021] 桌機、手機都照後台排序由左到右。[TEAMEQUAL-20261021] 客戶要求不特別突顯，首頁不再輸出 .doc--lead（以下 .doc--lead 樣式保留未用） */
/* [TEAMEQUAL-20261021] 四位同樣大小、照片頂端對齊：桌機改為「照片列＋說明列」兩列格線，每位醫師以 subgrid 共用列高，
   專長文字 1～3 行都不會讓照片一高一低；整排仍靠下，位置與原本相同。手機（≤560）維持橫向滑動，不套用 */
@media(min-width:561px){
  .team__stage{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,250px);grid-template-rows:auto auto;
    justify-content:center;align-content:end;align-items:stretch;column-gap:clamp(6px,1.4vw,22px);}
  .team__stage .doc{grid-row:span 2;display:grid;grid-template-rows:subgrid;max-width:none;}
}
/* [TEAMEQUAL-20261021] 手機橫向滑動時照片也頂端對齊（專長行數不同不會一高一低） */
@media(max-width:560px){.team__stage{align-items:flex-start;}}
/* [TEAMEQUAL-20261021] 客戶要求不要有放大效果：滑過照片只輕微上浮，不放大（照片濾鏡變化保留） */
.team__stage .doc:hover{transform:translateY(-8px);}
.team__stage .doc:hover img{transform:scale(var(--z));}
@media(max-width:560px){.team__stage .doc:hover{transform:none;}}
.doc{
  position:relative;flex:1 1 0;max-width:250px;margin:0;cursor:pointer;
  transition:transform .8s var(--ease),z-index 0s;
}
/* arch-framed portraits echo the hero colonnade and blend the studio backdrop
   (a cooler grey than the warm page) into the section background */
.doc__frame{
  display:block;position:relative;overflow:hidden;
  border-radius:999px 999px 6px 6px;
  -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 99%);
          mask-image:linear-gradient(180deg,#000 74%,transparent 99%);
}
.doc__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(244,243,241,0) 52%,rgba(244,243,241,.5) 86%,rgba(244,243,241,1) 100%);
}
/* the three portraits were shot at different distances and subject offsets, so
   object-position and --z (zoom) are tuned per doctor inline to bring every head
   to a matching size inside the arch */
.doc img{
  --z:1;
  width:100%;aspect-ratio:.72/1;object-fit:cover;display:block;
  transform:scale(var(--z));transform-origin:50% 0;
  filter:sepia(.10) saturate(.92) contrast(1.03);
  transition:filter .8s var(--ease),transform 1s var(--ease);
}
.doc--lead{transform:scale(1.12) translateY(-6px);z-index:3;}
.doc:hover{transform:translateY(-12px) scale(1.04);z-index:4;}
.doc--lead:hover{transform:scale(1.17) translateY(-16px);}
.doc:hover img{filter:sepia(0) saturate(1.03) contrast(1.05);transform:scale(calc(var(--z) * 1.05));}
.doc__cap{text-align:center;margin-top:-6px;}
.doc__cap b{
  display:block;font-size:var(--fs-lg);font-weight:500;letter-spacing:.14em;color:var(--ink);
  transition:color .5s var(--ease);
}
.doc__cap b i{font-style:normal;font-size:var(--fs-xs);color:var(--ink-3);margin-left:7px;letter-spacing:.1em;}
.doc__cap em{
  display:block;margin-top:7px;font-style:normal;
  font-size:var(--fs-xs);letter-spacing:.08em;color:var(--gold);line-height:var(--lh-snug);
}
.doc:hover .doc__cap b{color:var(--brand);}
.team__badge{
  position:absolute;right:2%;top:8%;width:96px;height:96px;border-radius:50%;
  border:1px solid var(--gold);display:grid;place-items:center;text-align:center;
  font-size:var(--fs-xs);letter-spacing:.18em;color:var(--ink-2);line-height:var(--lh-body);
  background:rgba(255,255,255,.7);animation:spinSlow 22s linear infinite;
}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.team__badge span{animation:spinSlow 22s linear infinite reverse;display:block;}
/* 分頁圓點：桌機三位醫師同時可見，不需要；僅手機橫向滑動時顯示 */
.team__dots{display:none;}

/* ============================================================
   SECTION 07 — 預約諮詢 CONTACT
   ============================================================ */
.contact{position:relative;padding:var(--sec-y) var(--pad);
  background:#F5EDE0;overflow:hidden;}
.contact__ghost{
  top:clamp(40px,5vw,80px);left:50%;transform:translateX(-50%);
  font-size:clamp(56px,11vw,168px);color:rgba(255,255,255,.72);
}
.contact__grid{
  position:relative;z-index:2;max-width:var(--w-page);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(26px,3.4vw,60px);align-items:start;
}
.form h2{font-size:clamp(20px,2.2vw,28px);font-weight:400;letter-spacing:.16em;line-height:var(--lh-body);margin:0 0 8px;}
.form__note{font-size:var(--fs-sm);color:var(--ink-3);margin:0 0 30px;letter-spacing:.08em;}
.field{position:relative;margin-bottom:22px;}
.field label{
  display:block;font-size:var(--fs-sm);letter-spacing:.2em;color:var(--ink-2);margin-bottom:9px;
}
.field label em{font-style:normal;color:var(--sage-deep);margin-left:4px;}
.field input,.field select,.field textarea{
  width:100%;padding:13px 2px;border:0;border-bottom:1px solid var(--line);
  background:transparent;font-size:var(--fs-base);letter-spacing:.08em;
  transition:border-color .45s var(--ease);
}
.field textarea{resize:vertical;min-height:86px;}
.field select{cursor:pointer;appearance:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238C8480'/></svg>") no-repeat right 4px center;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sage);}
.field i.bar{position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--sage);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);}
.field:focus-within i.bar{transform:scaleX(1);}
.field.err input,.field.err select,.field.err textarea{border-color:#B4342F;}
.field .msg{position:absolute;right:0;top:0;font-size:var(--fs-2xs);color:#B4342F;letter-spacing:.1em;opacity:0;transition:.3s;}
.field.err .msg{opacity:1;}
.agree{display:flex;gap:12px;align-items:flex-start;margin:6px 0 26px;cursor:pointer;
  font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink-2);letter-spacing:.05em;}
.agree input{position:absolute;opacity:0;}
.agree .box{
  flex:none;width:17px;height:17px;margin-top:6px;border:1px solid var(--ink-3);
  display:grid;place-items:center;transition:.4s var(--ease);
}
.agree .box svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2;
  opacity:0;transform:scale(.4);transition:.4s var(--ease);}
.agree input:checked+.box{background:var(--sage-deep);border-color:var(--sage-deep);}
.agree input:checked+.box svg{opacity:1;transform:none;}
.form__btns{display:flex;flex-wrap:wrap;gap:14px;}
.btn--line{background:#06C755;border-color:#06C755;color:#fff;}
.btn--line::after{background:#05A648;}
.btn--line:hover{color:#fff;}

.info__card{background:#fff;padding:0;border-radius:4px;overflow:hidden;
  border-top:3px solid var(--sage);
  box-shadow:0 30px 70px -46px rgba(60,30,20,.5);}
.info__fig{aspect-ratio:16/9;overflow:hidden;background:#e9e3dd;}
.info__fig img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:sepia(.12) saturate(1.02);}
.info__body{padding:clamp(26px,2.6vw,40px);}
.info__card h3{font-size:var(--fs-xl);font-weight:500;letter-spacing:.18em;margin:0 0 6px;}
.info__addr{font-size:var(--fs-sm);color:var(--sage-deep);letter-spacing:.1em;margin:0 0 24px;}
.info__row{display:grid;grid-template-columns:82px 1fr;gap:10px;padding:11px 0;
  border-top:1px solid var(--line);font-size:var(--fs-sm);letter-spacing:.08em;color:var(--ink-2);}
.info__row b{font-weight:400;color:var(--sage-deep);position:relative;}
.info__row b::after{content:"｜";position:absolute;right:-8px;color:var(--line);}
.info__soc{display:flex;flex-wrap:wrap;gap:16px 22px;margin-top:26px;}
/* nowrap：否則窄螢幕會把「LINE 諮詢」斷成「LINE 諮 / 詢」 */
.info__soc a{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);letter-spacing:.12em;
  color:var(--ink-2);white-space:nowrap;}
.info__soc span.ic{
  width:42px;height:42px;border-radius:50%;background:var(--sage);display:grid;place-items:center;
  transition:.5s var(--ease);
}
.info__soc a:hover span.ic{background:var(--brand-deep);transform:translateY(-4px);}
.info__soc svg{width:19px;height:19px;fill:#fff;}
.shop{
  position:relative;aspect-ratio:.86/1;border-radius:6px;overflow:hidden;
  background:#e9e3dd;box-shadow:0 36px 80px -46px rgba(0,0,0,.55);
}
.shop img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:sepia(.16) saturate(1.04);
}
.shop::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(46,22,14,.78),rgba(46,22,14,.22) 34%,transparent 58%);
}
.shop b{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);z-index:2;
  font-family:var(--ff-en);font-size:var(--fs-md);letter-spacing:.42em;color:#fff;
  text-shadow:0 2px 14px rgba(30,14,8,.8);}

/* ============================================================
   TREATMENT MODAL
   ============================================================ */
.modal{
  position:fixed;inset:0;z-index:9990;display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,4vh,52px) clamp(12px,4vw,40px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
.modal.on{opacity:1;visibility:visible;}
.modal__veil{position:absolute;inset:0;background:rgba(30,16,14,.62);backdrop-filter:blur(6px);}
.modal__box{
  position:relative;width:min(880px,100%);max-height:100%;
  background:var(--bg);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 60px 120px -50px rgba(0,0,0,.7);
  transform:translateY(26px) scale(.98);transition:transform .6s var(--ease);
}
.modal.on .modal__box{transform:none;}
.modal__hd{
  position:relative;flex:none;padding:clamp(24px,3.2vw,40px) clamp(24px,3.4vw,48px) 22px;
  background:var(--brand-deep);color:#F3E7D6;
}
.modal__cat{font-family:var(--ff-sans);font-size:var(--fs-2xs);letter-spacing:.34em;color:var(--gold-lt);}
.modal__hd h3{margin:12px 0 0;font-size:clamp(19px,2.3vw,27px);font-weight:400;letter-spacing:.1em;line-height:var(--lh-snug);}
.modal__x{
  position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(243,231,214,.4);background:transparent;color:#F3E7D6;
  display:grid;place-items:center;cursor:pointer;transition:.45s var(--ease);
}
.modal__x:hover{background:#F3E7D6;color:var(--brand);transform:rotate(90deg);}
.modal__x svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;}
.modal__bd{
  overflow-y:auto;padding:clamp(24px,3.2vw,40px) clamp(24px,3.4vw,48px) clamp(28px,3.4vw,46px);
  -webkit-overflow-scrolling:touch;
}
.mblk{margin-bottom:32px;}
.mblk:last-child{margin-bottom:0;}
.mblk h4{
  display:flex;align-items:center;gap:12px;margin:0 0 15px;
  font-size:var(--fs-base);font-weight:500;letter-spacing:.24em;color:var(--brand);
}
.mblk h4::before{content:"";width:18px;height:1px;background:var(--gold);flex:none;}
.mblk p{margin:0 0 12px;font-size:var(--fs-base);line-height:var(--lh-loose);color:var(--ink-2);letter-spacing:.05em;}
.mblk ul{margin:0;padding:0;list-style:none;}
.mblk li{
  position:relative;padding-left:20px;margin-bottom:9px;
  font-size:var(--fs-base);line-height:var(--lh-loose);color:var(--ink-2);letter-spacing:.05em;
}
.mblk li::before{
  content:"";position:absolute;left:2px;top:.92em;width:5px;height:5px;
  border-radius:50%;background:var(--beige);
}
.mblk--grid ul{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;}
.mblk img,.mblk video{display:block;max-width:100%;height:auto;margin:14px 0;border-radius:6px;}
.mblk video{width:100%;background:#000;}
.mblk iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;margin:14px 0;border-radius:6px;}
/* QA accordion */
.qa{border-top:1px solid var(--line);}
.qa:last-child{border-bottom:1px solid var(--line);}
.qa__q{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  display:flex;align-items:flex-start;gap:14px;padding:15px 0;
  font-size:var(--fs-base);line-height:var(--lh-body);letter-spacing:.05em;color:var(--ink);
  transition:color .4s var(--ease);
}
.qa__q:hover{color:var(--brand);}
.qa__q i{
  flex:none;margin-top:.5em;width:11px;height:11px;position:relative;
}
.qa__q i::before,.qa__q i::after{
  content:"";position:absolute;background:var(--gold);transition:transform .45s var(--ease);
}
.qa__q i::before{left:0;top:5px;width:11px;height:1px;}
.qa__q i::after{left:5px;top:0;width:1px;height:11px;}
.qa.open .qa__q i::after{transform:scaleY(0);}
.qa__a{
  overflow:hidden;max-height:0;transition:max-height .55s var(--ease);
}
.qa__a p{
  margin:0;padding:0 0 17px 25px;font-size:var(--fs-sm);line-height:var(--lh-loose);
  color:var(--ink-3);letter-spacing:.04em;
}
.modal__ft{
  flex:none;padding:18px clamp(24px,3.4vw,48px);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  background:var(--bg-2);
}
.modal__note{font-size:var(--fs-xs);letter-spacing:.05em;color:var(--ink-3);line-height:var(--lh-body);}
@media(max-width:640px){
  .mblk--grid ul{grid-template-columns:1fr;}
  .modal{padding:0;}
  .modal__box{border-radius:0;height:100%;width:100%;max-height:none;}
}


/* ============================================================
   RESPONSIVE — 首頁專屬（必須放在本頁 <style> 最後面，
   才能勝過上方的桌機版基礎規則）
   ============================================================ */
@media(max-width:1180px){
  .svc__body{grid-template-columns:180px minmax(0,1fr);}
  .svc__detail{grid-column:1/-1;}
  .contact__grid{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);}
}
@media(max-width:900px){
  .philo__grid{grid-template-columns:1fr;}
  .philo::before{width:78%;height:44%;}
  .feat__grid{grid-template-columns:repeat(2,1fr);}
  .fcard,.fcard:nth-child(4),.fcard:nth-child(5){grid-column:auto;}
  .env__head{grid-template-columns:1fr;}
  .env__mosaic{grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);}
  .arts__controls{gap:14px;}
  .arts__badge{width:88px;height:88px;}
  .arrow{width:48px;height:48px;}
  .svc__panel{border-radius:0 0 clamp(60px,14vw,120px) 0;margin-right:0;}
  .svc__body{grid-template-columns:1fr;}
  /* 療程分類：以 4＋3 置中的分段導覽取代傳統表格。
     8 欄格線讓每個按鈕固定跨 2 欄，第二排從第 2 欄開始，
     三個項目保持等寬並自然置中。 */
  .svc__tabs{
    display:grid;grid-template-columns:repeat(8,1fr);gap:6px;
    padding:8px;background:rgba(255,254,242,.96);
    border:1px solid rgba(228,216,194,.78);
    overflow:visible;border-radius:14px;
    box-shadow:0 22px 52px -34px rgba(35,18,10,.56);
  }
  .svc__tab{
    grid-column:span 2;width:auto;min-height:58px;border:0;border-radius:8px;
    padding:12px 8px;background:transparent;
    font-size:var(--fs-sm);letter-spacing:.08em;white-space:nowrap;
  }
  .svc__tab:nth-child(5){grid-column:2/4;}
  .svc__tab:nth-child(6){grid-column:4/6;}
  .svc__tab:nth-child(7){grid-column:6/8;}
  .svc__tab::after{display:none;}
  .svc__tab:hover{background:rgba(192,166,127,.18);color:var(--ink);}
  .svc__tab.on{
    background:var(--brand-deep);color:#fff;letter-spacing:.12em;
    box-shadow:0 10px 24px -16px rgba(60,24,12,.68);
  }
  .svc__vis{max-width:420px;margin:0 auto;}
  .team__grid{grid-template-columns:1fr;}
  .team__badge{display:none;}
  .contact__grid{grid-template-columns:1fr;}
  .hero__meta{display:none;}
}
@media(max-width:560px){
  .feat__grid{grid-template-columns:1fr;}
  .env__mosaic{grid-template-columns:1fr;grid-template-rows:auto;}
  .env__feature{grid-row:auto;aspect-ratio:4/3;}
  .env__side{aspect-ratio:16/10;}
  .env__strip{grid-template-columns:1fr 1fr;}
  .env__strip .env__photo{aspect-ratio:4/3;}
  .env__strip .env__photo:last-child{grid-column:1/-1;aspect-ratio:16/9;}
  .arts__head{align-items:flex-end;gap:18px;}
  .arts__controls{gap:0;}
  .arts__badge{display:none;}
  .svc__tabs{grid-template-columns:repeat(2,1fr);gap:5px;padding:6px;}
  .svc__tab,
  .svc__tab:nth-child(5),
  .svc__tab:nth-child(6){grid-column:auto;min-height:54px;padding:10px 6px;}
  .svc__tab:nth-child(7){grid-column:1/-1;}
  /* 療程按鈕：含儀器品牌名的項目（如 HYCOOX海庫斯智能水光儀 220px）在 341px
     寬的容器裡兩個並排放不下，flex 換行後變成一行一個，版面顯得空。
     改為固定兩欄格線，過長名稱折行，並統一高度讓每列對齊。 */
  .svc__chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .svc__chips .chip{
    display:flex;align-items:center;justify-content:center;
    padding:10px 12px;min-height:46px;
    font-size:var(--fs-xs);letter-spacing:.02em;line-height:1.45;
    text-align:center;white-space:normal;overflow-wrap:anywhere;
  }
  /* 診所資訊卡：窄螢幕縮短標籤欄，讓營業時間有足夠寬度 */
  .info__card{padding:24px 20px;}
  .info__card h3{font-size:var(--fs-lg);letter-spacing:.12em;}
  .info__row{grid-template-columns:66px 1fr;gap:8px;font-size:var(--fs-sm);}
  .info__soc{gap:14px 18px;}
  /* 三張拱形照在手機排不下 —— 取消主打醫師的放大並改為橫向捲動 */
  .team__stage{
    justify-content:flex-start;gap:14px;min-height:0;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:8px;scrollbar-width:none;margin:0 calc(var(--pad) * -1);
    padding-left:var(--pad);padding-right:var(--pad);
  }
  .team__stage::-webkit-scrollbar{display:none;}
  /* 卡片寬度用百分比：一屏顯示 2 張＋第 3 張露出約 40px，
     讓使用者一眼看出右邊還有內容（原本 190px 固定寬會讓第 3 位完全在畫面外）。 */
  .doc{flex:0 0 44%;scroll-snap-align:center;}
  .doc--lead{transform:none;}
  .doc--lead:hover,.doc:hover{transform:none;}
  .doc__cap b{font-size:var(--fs-md);}
  .doc__cap em{font-size:var(--fs-2xs);}

  /* 分頁圓點：明確告知共 3 位、目前在第幾位，可點擊切換 */
  /* 靠左對齊：置中的話會落在右下角「回到頂端」浮動鈕下方被擋住 */
  .team__dots{
    display:flex;justify-content:flex-start;align-items:center;gap:var(--sp-2);
    margin-top:var(--sp-4);padding-left:calc(var(--pad) - 12px);
  }
  .team__dots button{
    width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
    display:grid;place-items:center;
  }
  .team__dots button::before{
    content:"";width:7px;height:7px;border-radius:var(--r-circle);
    background:var(--beige);transition:.4s var(--ease);
  }
  .team__dots button[aria-selected="true"]::before{
    width:26px;border-radius:var(--r-pill);background:var(--brand);
  }
}