/* ====== 分隔線 ====== */

.full-width-line {
  border: none;                  /* 消除瀏覽器預設的立體邊框 */
  height: 1px;                   /* 線條粗細 */
  background-color: #ccc;        /* 線條顏色（淺灰色） */
  margin: 40px 0;                /* 上下留白 40px，左右 0 */
  
  /* 核心：強行突破父層寬度限制，達成真正滿版 */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}


/* ====== 全台照護區塊 / Nationwide Care (nc) ====== */
:root{
  --nc-primary:#e3724a;
  --nc-primary-dark:#c85733;
  --nc-primary-soft:#fdeee7;
  --nc-card:#ffffff;
  --nc-border:#ece2dc;
  --nc-heading:#1f1916;
  --nc-text-muted:#776a62;
  --nc-font:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif;
}

.nc-section{
  background:transparent;
  padding:104px 20px;
}
.nc-container{ max-width:1180px; margin:0 auto; }

/* ---- 標題 ---- */
.nc-head{ text-align:center; margin-bottom:64px; }
.nc-title{
  margin:0;
  font-size:2.5rem;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--nc-heading);
  line-height:1.3;
}
.nc-title span{
  display:block;
  width:100%; height:4px;
  margin:20px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--nc-primary),#f4ab85);
}

/* ---- 卡片網格 ---- */
.nc-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  counter-reset:nc;
}

/* ---- 單張卡片 ---- */
.nc-card{
  counter-increment:nc;
  position:relative;
  overflow:hidden;
  background:var(--nc-card);
  border:1px solid var(--nc-border);
  border-radius:20px;
  padding:36px 28px 32px;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s ease, border-color .35s ease;
}
.nc-card::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--nc-primary),#f3a884);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s ease;
}
.nc-card::after{
  content:counter(nc,decimal-leading-zero);
  position:absolute; top:-12px; right:10px;
  font-size:6rem; font-weight:800; font-style:italic; line-height:1;
  color:var(--nc-primary); opacity:.07; pointer-events:none;
}
.nc-card:hover{
  transform:translateY(-8px);
  border-color:transparent;
  box-shadow:0 22px 48px -20px rgba(227,114,74,.45);
}
.nc-card:hover::before{ transform:scaleX(1); }

/* ---- 圖示 ---- */
.nc-card-icon{
  position:relative; z-index:1;
  width:74px; height:74px;
  border-radius:20px;
  background:var(--nc-primary-soft);
  display:grid; place-items:center;
  margin-bottom:22px;
  transition:transform .35s ease, box-shadow .35s ease;
}
.nc-card:hover .nc-card-icon{
  transform:scale(1.06);
  box-shadow:0 10px 22px -10px rgba(227,114,74,.5);
}
.nc-card-icon img{ width:38px; height:38px; display:block; }

/* ---- 文字 ---- */
.nc-card-title{
  position:relative; z-index:1;
  margin:0 0 12px;
  font-size:1.18rem; font-weight:700; line-height:1.5;
  letter-spacing:.01em; color:var(--nc-heading);
}
.nc-card-desc{
  position:relative; z-index:1;
  margin:0;
  font-size:.95rem; line-height:1.85;
  color:var(--nc-text-muted); letter-spacing:.01em;
}

/* ---- 響應式 ---- */
@media (max-width:960px){
  .nc-section{ padding:80px 20px; }
  .nc-head{ margin-bottom:52px; }
  .nc-title{ font-size:2.1rem; }
  .nc-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .nc-section{ padding:56px 18px; }
  .nc-head{ margin-bottom:40px; }
  .nc-title{ font-size:1.75rem; }
  .nc-grid{ grid-template-columns:1fr; gap:18px; }
  .nc-card{ padding:30px 24px 28px; }
  .nc-card::after{ font-size:5rem; }
}

/* ---- 動態偏好 ---- */
@media (prefers-reduced-motion:reduce){
  .nc-card,.nc-card-icon,.nc-card::before{ transition:none; }
  .nc-card:hover{ transform:none; }
}

/* ====== 專業醫師團隊區塊 / Doctor Team (dt) ====== */
/* 色彩變數沿用「全台照護」區塊的 :root（--nc-*），若同頁不需重複定義 */

.dt-section{ background:transparent; padding:104px 20px; }
.dt-container{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:60px; align-items:center;
}

/* ---- 左：文字 ---- */
.dt-title{
  margin:0; font-size:2.5rem; font-weight:800;
  letter-spacing:.04em; line-height:1.35; color:var(--nc-heading);
}
.dt-title span{
  display:block; width:100%; height:4px; margin:22px 0 0;
  border-radius:999px; background:linear-gradient(90deg,var(--nc-primary),#f4ab85);
}
.dt-desc{
  margin:30px 0 0; font-size:1rem; line-height:1.95;
  color:var(--nc-text); letter-spacing:.01em; text-align:justify;
}
.dt-btn{
  display:inline-flex; align-items:center; gap:9px; margin-top:32px;
  padding:14px 30px; border-radius:999px;
  background:var(--nc-primary); color:#fff;
  font-size:1rem; font-weight:700; text-decoration:none; letter-spacing:.02em;
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.dt-btn::after{ content: "\2192"; /* 使用反斜線加上 Unicode 編碼 */ font-size:1.05em; transition:transform .3s ease; }
.dt-btn:hover{
  background:var(--nc-primary-dark); transform:translateY(-2px);
  box-shadow:0 14px 28px -12px rgba(227,114,74,.65);
}
.dt-btn:hover::after{ transform:translateX(4px); }

/* ---- 右：醫師卡 ---- */
.dt-cards{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.dt-card{ text-align:center; }
.dt-photo{
  display:block; position:relative; overflow:hidden;
  aspect-ratio:1/1; border-radius:20px;
  border:1px solid var(--nc-border); background:var(--nc-primary-soft);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s ease, border-color .35s ease;
}
.dt-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.dt-card:hover .dt-photo{
  transform:translateY(-6px); border-color:transparent;
  box-shadow:0 22px 44px -20px rgba(227,114,74,.5);
}
.dt-card:hover .dt-photo img{ transform:scale(1.06); }
.dt-name{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:18px; font-size:1.12rem; font-weight:700;
  color:var(--nc-heading); text-decoration:none; letter-spacing:.02em;
  transition:color .3s ease;
}
.dt-name::before{
  content:""; width:18px; height:2px; border-radius:2px;
  background:var(--nc-primary); transition:width .3s ease;
}
.dt-card:hover .dt-name{ color:var(--nc-primary); }
.dt-card:hover .dt-name::before{ width:28px; }

/* ---- 響應式 ---- */
@media (max-width:960px){
  .dt-section{ padding:80px 20px; }
  .dt-container{ grid-template-columns:1fr; gap:48px; }
  .dt-title{ font-size:2.1rem; }
}
@media (max-width:560px){
  .dt-section{ padding:56px 18px; }
  .dt-container{ gap:40px; }
  .dt-title{ font-size:1.75rem; }
  .dt-cards{ gap:16px; }
  .dt-name{ font-size:1.02rem; }
}
@media (prefers-reduced-motion:reduce){
  .dt-photo,.dt-photo img,.dt-btn,.dt-name{ transition:none; }
  .dt-card:hover .dt-photo,.dt-btn:hover{ transform:none; }
}


/* ====== 植髮診所特色 / Features (ft) ====== */
/* 色彩變數沿用前面區塊的 :root（--nc-*），同頁不需重複定義 */

.ft-section{ background:transparent; padding:104px 20px; }
.ft-head{ text-align:center; margin-bottom:60px; }
.ft-title{
  margin:0; font-size:2.5rem; font-weight:800;
  letter-spacing:.04em; line-height:1.3; color:var(--nc-heading);
}
.ft-title span{
  display:block; width:100%; height:4px; margin:20px auto 0;
  border-radius:999px; background:linear-gradient(90deg,var(--nc-primary),#f4ab85);
}

.ft-layout{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;
}

/* ---- 左：診所照 ---- */
.ft-photo{
  position:relative; overflow:hidden;
  border-radius:24px; border:1px solid var(--nc-border);
  aspect-ratio:4/3; background:var(--nc-primary-soft);
  box-shadow:0 24px 50px -28px rgba(227,114,74,.4);
}
.ft-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease;
}
.ft-photo:hover img{ transform:scale(1.04); }

/* ---- 右：4 項特色 ---- */
.ft-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:30px 26px;
}
.ft-item{ display:flex; flex-direction:column; gap:14px; }
.ft-item-icon{
  width:100px; height:100px; border-radius:18px;
  background:var(--nc-primary-soft);
  display:grid; place-items:center;
  transition:transform .35s ease, box-shadow .35s ease;
}
.ft-item:hover .ft-item-icon{
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 12px 24px -12px rgba(227,114,74,.5);
}
.ft-item-icon img{ width:60px; height:60px; display:block; }
.ft-item-text{ color:var(--nc-text); font-size:1.02rem; line-height:1.7; }
.ft-item-text :first-child{ margin-top:0; }
.ft-item-text h3,.ft-item-text h4,.ft-item-text strong,.ft-item-text b{
  display:block; margin:0 0 6px;
  font-size:1.12rem; font-weight:700; color:var(--nc-heading); letter-spacing:.01em;
}
.ft-item-text p{ margin:0; font-size:.94rem; line-height:1.75; color:var(--nc-text-muted); }

/* ---- 按鈕 ---- */
.ft-btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:fit-content; margin:56px auto 0;
  padding:14px 34px; border-radius:999px;
  background:var(--nc-primary); color:#fff;
  font-size:1rem; font-weight:700; text-decoration:none; letter-spacing:.02em;
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.ft-btn::after{ content: "\2192"; /* 使用反斜線加上 Unicode 編碼 */; transition:transform .3s ease; }
.ft-btn:hover{
  background:var(--nc-primary-dark); transform:translateY(-2px);
  box-shadow:0 14px 28px -12px rgba(227,114,74,.65);
}
.ft-btn:hover::after{ transform:translateX(4px); }

/* ---- 響應式 ---- */
@media (max-width:960px){
  .ft-section{ padding:80px 20px; }
  .ft-head{ margin-bottom:48px; }
  .ft-title{ font-size:2.1rem; }
  .ft-layout{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:560px){
  .ft-section{ padding:56px 18px; }
  .ft-head{ margin-bottom:40px; }
  .ft-title{ font-size:1.75rem; }
  .ft-grid{ gap:26px 18px; }
  .ft-item-icon{ width:80px; height:80px; }
  .ft-btn{ margin-top:44px; }
  .ft-item-icon img{ width:45px; height:45px; display:block; }
}
@media (prefers-reduced-motion:reduce){
  .ft-photo img,.ft-item-icon,.ft-btn{ transition:none; }
  .ft-photo:hover img,.ft-item:hover .ft-item-icon,.ft-btn:hover{ transform:none; }
}

/* ====== 高雄植髮服務 / Service (sv) ====== */
/* 色彩變數沿用前面區塊的 :root（--nc-*），同頁不需重複定義 */

.sv-section{ background:transparent; padding:104px 20px; }

/* ---- 標題 ---- */
.sv-head{ text-align:center; margin-bottom:60px; }

.sv-title{
  margin:0; font-size:2.5rem; font-weight:800;
  letter-spacing:.04em; line-height:1.3; color:var(--nc-heading);
}
.sv-title span{
  display:block; width:100%; height:4px; margin:20px auto 0;
  border-radius:999px; background:linear-gradient(90deg,var(--nc-primary),#f4ab85);
}

.sv-title a{
  font-size:2.5rem; font-weight:800; letter-spacing:.04em;
  color:var(--nc-heading); text-decoration:none; transition:color .3s ease;
}

.sv-title a:hover{ color:var(--nc-primary); }

/* ---- 網格 ---- */
.sv-container{ max-width:1180px; margin:0 auto; }
.sv-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:28px;
}
.sv-item{ display:flex; }

/* ---- 卡片 ---- */
.sv-card{
  display:flex; flex-direction:column; width:100%;
  background:var(--nc-card); border:1px solid var(--nc-border);
  border-radius:20px; overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s ease, border-color .35s ease;
}
.sv-card:hover{
  transform:translateY(-8px); border-color:transparent;
  box-shadow:0 24px 50px -24px rgba(227,114,74,.45);
}
/* 圖片：維持原始比例、不裁切 */
/* 圖片：維持原始比例、不裁切；hover 微放大 + 漸層 */
.sv-photo{ display:block; position:relative; overflow:hidden; line-height:0; background:var(--nc-primary-soft); }
.sv-photo img{ width:100%; height:auto; display:block; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.sv-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity .4s ease;
}
.sv-card:hover .sv-photo img{ transform:scale(1.06); }
.sv-card:hover .sv-photo::after{ opacity:1; }

.sv-body{ display:flex; flex-direction:column; gap:12px; padding:26px 26px 28px; flex:1; }
.sv-card-title a{
  font-size:1.18rem; font-weight:700; line-height:1.5;
  color:var(--nc-heading); text-decoration:none; letter-spacing:.01em;
  transition:color .3s ease;
}
.sv-card:hover .sv-card-title a{ color:var(--nc-primary); }
.sv-desc{ font-size:.95rem; line-height:1.8; color:var(--nc-text-muted); flex:1; }
.sv-desc p{ margin:0; }
.sv-link{ margin-top:4px; }
.sv-link a{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.95rem; font-weight:700; letter-spacing:.02em;
  color:var(--nc-primary); text-decoration:none;
}
.sv-link a::after{ content: "\2192"; /* 使用反斜線加上 Unicode 編碼 */; transition:transform .3s ease; }
.sv-card:hover .sv-link a::after{ transform:translateX(5px); }

/* ---- 響應式 ---- */
@media (max-width:960px){
  .sv-section{ padding:80px 20px; }
  .sv-head{ margin-bottom:48px; }
  .sv-head-h2 a{ font-size:2.1rem; }
  .sv-grid{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px; }
}
@media (max-width:560px){
  .sv-section{ padding:56px 18px; }
  .sv-head{ margin-bottom:40px; }
  .sv-head-h2 a{ font-size:1.75rem; }
  .sv-grid{ grid-template-columns:1fr; gap:20px; }
  .sv-title a{font-size:1.75rem}
}
@media (prefers-reduced-motion:reduce){
  .sv-card,.sv-link a::after,.sv-photo img,.sv-photo::after{ transition:none; }
  .sv-card:hover{ transform:none; }
  .sv-card:hover .sv-photo img{ transform:none; }
}

/* ============================================================
   植髮見證 / Sharing 區塊（sh-）
   - 沿用既有 #e3724a 設計系統與 :root 變數
   - 圖片維持原比例、不裁切（width:100% / height:auto）
   - 手機版左右輪播，所有樣式皆 scope 在 .sh-section 內，不影響其他 swiper
   - 輪播箭頭落在圖卡左右外側留白區，不壓在圖卡上
   ============================================================ */

/* 色票：若前面區塊的 :root 已定義過，這段可省略不重複 */
:root{
  --nc-primary:#e3724a;
  --nc-primary-dark:#c85733;
  --nc-primary-soft:#fdeee7;
  --nc-card:#ffffff;
  --nc-border:#ece2dc;
  --nc-heading:#1f1916;
  --nc-text:#3a322c;
  --nc-text-muted:#776a62;
  --nc-text-faint:#9a8f87;
  --nc-font:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif;
}

.sh-section{ background:transparent; padding:104px 20px; }

/* ---- 標題 ---- */
.sh-section .sh-head{ text-align:center; margin-bottom:60px; }
.sh-title{
  margin:0; font-size:2.5rem; font-weight:800;
  letter-spacing:.04em; line-height:1.3; color:var(--nc-heading);
}
.sh-title span{
  display:block; width:100%; height:4px; margin:20px auto 0;
  border-radius:999px; background:linear-gradient(90deg,var(--nc-primary),#f4ab85);
}

.sh-title a{
  font-size:2.5rem; font-weight:800; letter-spacing:.04em;
  color:var(--nc-heading); text-decoration:none; transition:color .3s ease;
}

.sh-title a:hover{ color:var(--nc-primary); }

/* ---- 卡片外框 ---- */
.sh-section .sh-card{
  display:flex; flex-direction:column; width:100%; height:100%;
  background:var(--nc-card); border:1px solid var(--nc-border);
  border-radius:20px; overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.sh-section .sh-card:hover{
  transform:translateY(-8px); border-color:transparent;
  box-shadow:0 24px 50px -24px rgba(227,114,74,.45);
}

/* ---- 圖片：維持原比例、不裁切 ---- */
.sh-section .sh-thumb{ display:block; position:relative; overflow:hidden; line-height:0; background:var(--nc-primary-soft); }
.sh-section .sh-thumb img{
  width:100%; height:auto; max-width:none; display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.sh-section .sh-thumb::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity .4s ease;
}
.sh-section .sh-card:hover .sh-thumb img{ transform:scale(1.06); }
.sh-section .sh-card:hover .sh-thumb::after{ opacity:1; }

/* ---- 內文 ---- */
.sh-section .sh-body{ display:flex; flex-direction:column; gap:10px; padding:22px 24px 24px; flex:1; }
.sh-section .sh-body > a{ color:inherit; text-decoration:none; }
.sh-section .sh-title{
  margin:0; font-size:1.18rem; font-weight:700; line-height:1.5;
  letter-spacing:.01em; color:var(--nc-heading); transition:color .3s ease;
}
.sh-section .sh-card:hover .sh-title{ color:var(--nc-primary); }
.sh-section .sh-desc{
  font-size:.95rem; line-height:1.8; color:var(--nc-text); flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* 免責說明 */
.sh-section .sh-disclaimer{ margin:2px 0 0; font-size:.78rem; line-height:1.6; color:var(--nc-text-faint); }

/* 分類 / 瀏覽 / 分享 */
.sh-section .sh-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-top:4px; font-size:.78rem; }
.sh-section .sh-meta i{ font-size:.85em; }
.sh-section .sh-tag{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  font-size:.78rem;
  background:var(--nc-primary-soft); color:var(--nc-primary-dark);
  text-decoration:none; font-weight:600; transition:background .3s ease,color .3s ease;
}
.sh-section .sh-tag:hover{ background:var(--nc-primary); color:#fff; }
.sh-section .sh-views,
.sh-section .sh-shares{ display:inline-flex; align-items:center; gap:5px; font-size:.78rem; color:var(--nc-text-faint); }

/* 閱讀更多連結（加上 .sh-body 提高權重，蓋過 .sh-body > a 的 inherit） */
.sh-section .sh-body .sh-readmore{
  display:inline-flex; align-items:center; gap:7px; margin-top:6px;
  font-size:.92rem; font-weight:700; letter-spacing:.02em;
  color:var(--nc-primary); text-decoration:none;
}
.sh-section .sh-body .sh-readmore::after{ content:"\2192"; transition:transform .3s ease; }
.sh-section .sh-card:hover .sh-body .sh-readmore::after{ transform:translateX(5px); }

/* ---- 電腦版格狀（高權重，蓋過舊 ul/li 樣式） ---- */
.sh-section .index-works-pc .sh-grid{
  list-style:none; margin:0 auto; padding:0; max-width:1180px; width:auto;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:28px; justify-content:initial;
}
.sh-section .index-works-pc .sh-grid > li{
  display:flex; float:none; width:auto; max-width:none; margin:0; min-width:0;
}

/* ---- 底部按鈕 ---- */
.sh-section .sh-btn{
  display:flex; align-items:center; justify-content:center; gap:9px; width:fit-content; margin:56px auto 0;
  padding:14px 34px; border-radius:999px; background:var(--nc-primary); color:#fff;
  font-size:1rem; font-weight:700; text-decoration:none; letter-spacing:.02em;
  transition:background .3s ease,transform .3s ease,box-shadow .3s ease;
}
.sh-section .sh-btn::after{ content:"\2192"; transition:transform .3s ease; }
.sh-section .sh-btn:hover{ background:var(--nc-primary-dark); transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(227,114,74,.65); }
.sh-section .sh-btn:hover::after{ transform:translateX(4px); }

/* ---- 裝置切換：預設顯示 PC，隱藏手機輪播 ---- */
.sh-section .index-works-phone{ display:none; }

/* ============================================================
   手機 Swiper：箭頭移到圖卡外側
   做法：
   1. 外層 .index-works-swiper1 設 position:relative + 左右 padding（48px）做為「箭頭車道」
   2. .swiper-container overflow:hidden 只負責裁切卡片輪播，箭頭不放在裡面
   3. 箭頭以 .index-works-swiper1 為定位基準，落在 padding 車道內，永遠在卡片外側
   4. 全程 box-sizing:border-box，避免卡片寬度被算到超出可視區
   ============================================================ */
.sh-section .index-works-phone *{ box-sizing:border-box; }

/* 外層 wrapper：左右留出箭頭車道 */
.sh-section .index-works-phone .index-works-swiper1{
  position:relative;
  padding:0 48px;
}

/* 輪播本體：限制寬度、裁切溢出 */
.sh-section .index-works-phone .swiper-container{
  position:relative;
  width:100%;
  overflow:hidden;
  padding-bottom:36px; /* 預留分頁點空間 */
}
.sh-section .index-works-phone .swiper-wrapper{ align-items:stretch; }
.sh-section .index-works-phone .swiper-slide{ height:auto; box-sizing:border-box; }
.sh-section .index-works-phone .swiper-block{ display:flex; width:100%; height:100%; margin:0; }
.sh-section .index-works-phone .sh-card{ width:100%; max-width:100%; }

/* 分頁點 */
.sh-section .index-works-phone .swiper-pagination{ bottom:4px; }
.sh-section .index-works-phone .swiper-pagination-bullet{ background:#d9c8c0; opacity:1; }
.sh-section .index-works-phone .swiper-pagination-bullet-active{ background:var(--nc-primary); }

/* 箭頭：以外層 wrapper 為基準，落在左右 48px 車道內（不壓卡片、不被裁切） */
.sh-section .index-works-phone .swiper-button-next,
.sh-section .index-works-phone .swiper-button-prev{
  position:absolute; top:50%; transform:translateY(-50%); margin-top:0;
  width:36px; height:36px; z-index:5; color:var(--nc-primary);
  display:flex; align-items:center; justify-content:center;
}
.sh-section .index-works-phone .swiper-button-prev{ left:4px; right:auto; }
.sh-section .index-works-phone .swiper-button-next{ right:4px; left:auto; }
/* 關閉 Swiper 預設箭頭，改用自帶 fa icon */
.sh-section .index-works-phone .swiper-button-next::after,
.sh-section .index-works-phone .swiper-button-prev::after{ display:none; }
.sh-section .index-works-phone .swiper-button-next i,
.sh-section .index-works-phone .swiper-button-prev i{ font-size:30px; line-height:1; }

/* ---- 響應式 ---- */
@media (max-width:960px){
  .sh-section{ padding:80px 20px; }
  .sh-section .sh-head{ margin-bottom:48px; }
  .sh-section .sh-head-h2 a{ font-size:2.1rem; }
  .sh-section .index-works-pc .sh-grid{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; }
}
@media (max-width:767px){
  .sh-section .index-works-pc{ display:none; }
  .sh-section .index-works-phone{ display:block; }
}
@media (max-width:560px){
  .sh-section{ padding:56px 18px; }
  .sh-section .sh-head{ margin-bottom:36px; }
  .sh-section .sh-head-h2 a{ font-size:1.75rem; }
  .sh-section .sh-btn{ margin-top:40px; }
  .sh-title a{font-size:1.75rem}
  /* 小螢幕縮窄箭頭車道 */
  .sh-section .index-works-phone .index-works-swiper1{ padding:0 40px; }
  .sh-section .index-works-phone .swiper-button-next,
  .sh-section .index-works-phone .swiper-button-prev{ width:32px; height:32px; }
  .sh-section .index-works-phone .swiper-button-next i,
  .sh-section .index-works-phone .swiper-button-prev i{ font-size:26px; }
}
@media (prefers-reduced-motion:reduce){
  .sh-section .sh-card,
  .sh-section .sh-thumb img,
  .sh-section .sh-thumb::after,
  .sh-section .sh-readmore::after,
  .sh-section .sh-btn{ transition:none; }
  .sh-section .sh-card:hover{ transform:none; }
  .sh-section .sh-card:hover .sh-thumb img{ transform:none; }
}

/* ============================================================
   植髮案例 / Gallery 區塊（gl-）
   - 沿用既有 #e3724a 設計系統與 :root 變數，字體沿用原站（不覆寫 font-family）
   - 圖片維持原比例、不裁切（width:100% / height:auto）
   - 手機版左右輪播，樣式皆 scope 在 .gl-section 內，不影響其他 swiper
   - 輪播箭頭放在 swiper-container 外、落在外層 wrapper 的 padding 車道，不壓圖卡
   ============================================================ */

/* 色票：若前面區塊的 :root 已定義過，這段可省略不重複 */
:root{
  --nc-primary:#e3724a;
  --nc-primary-dark:#c85733;
  --nc-primary-soft:#fdeee7;
  --nc-card:#ffffff;
  --nc-border:#ece2dc;
  --nc-heading:#1f1916;
  --nc-text:#3a322c;
  --nc-text-muted:#776a62;
  --nc-text-faint:#9a8f87;
}

.gl-section{ background:transparent; padding:104px 20px; }

/* ---- 標題 ---- */
.gl-section .gl-head{ text-align:center; margin-bottom:60px; }
.gl-section  .gl-title-h2{
  margin:0; font-size:2.5rem; font-weight:800;
  letter-spacing:.04em; line-height:1.3; color:var(--nc-heading);
}
.gl-section .gl-title-h2 span{
  display:block; width:100%; height:4px; margin:20px auto 0;
  border-radius:999px; background:linear-gradient(90deg,var(--nc-primary),#f4ab85);
}

.gl-section .gl-title-h2 a{
  font-size:2.5rem; font-weight:800; letter-spacing:.04em;
  color:var(--nc-heading); text-decoration:none; transition:color .3s ease;
}

.gl-section .gl-title-h2 a:hover{ color:var(--nc-primary); }




/* ---- 卡片外框 ---- */
.gl-section .gl-card{
  display:flex; flex-direction:column; width:100%; height:100%;
  background:var(--nc-card); border:1px solid var(--nc-border);
  border-radius:20px; overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.gl-section .gl-card:hover{
  transform:translateY(-8px); border-color:transparent;
  box-shadow:0 24px 50px -24px rgba(227,114,74,.45);
}

/* ---- 圖片：維持原比例、不裁切 ---- */
.gl-section .gl-thumb{ display:block; position:relative; overflow:hidden; line-height:0; background:var(--nc-primary-soft); }
.gl-section .gl-thumb img{
  width:100%; height:auto; max-width:100%; display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.gl-section .gl-thumb::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity .4s ease;
}
.gl-section .gl-card:hover .gl-thumb img{ transform:scale(1.06); }
.gl-section .gl-card:hover .gl-thumb::after{ opacity:1; }

/* ---- 內文 ---- */
.gl-section .gl-body{ display:flex; flex-direction:column; gap:10px; padding:22px 24px 24px; flex:1; }
.gl-section .gl-title{ margin:0; font-size:1.18rem; font-weight:700; line-height:1.5; letter-spacing:.01em; }
.gl-section .gl-title a{ color:var(--nc-heading); text-decoration:none; transition:color .3s ease; margin:0; font-size:1.18rem; font-weight:700; line-height:1.5; letter-spacing:.01em;}
.gl-section .gl-card:hover .gl-title a{ color:var(--nc-primary); }
.gl-section .gl-text{
  font-size:.95rem; line-height:1.8; color:var(--nc-text); flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* 免責說明 */
.gl-section .gl-disclaimer{ margin:2px 0 0; font-size:.78rem; line-height:1.6; color:var(--nc-text-faint); }

/* 分類 / 瀏覽 / 分享 / 案例編號（皆 .78rem） */
.gl-section .gl-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-top:4px; font-size:.78rem; }
.gl-section .gl-meta i{ font-size:.85em; }
.gl-section .gl-tag{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  font-size:.78rem;
  background:var(--nc-primary-soft); color:var(--nc-primary-dark);
  text-decoration:none; font-weight:600; transition:background .3s ease,color .3s ease;
}
.gl-section .gl-tag:hover{ background:var(--nc-primary); color:#fff; }
.gl-section .gl-views,
.gl-section .gl-shares,
.gl-section .gl-caseno{ display:inline-flex; align-items:center; gap:5px; font-size:.78rem; color:var(--nc-text-faint); }

/* 查看案例連結（加上 .gl-body 提高權重，固定主題橘色） */
.gl-section .gl-body .gl-readmore{
  display:inline-flex; align-items:center; gap:7px; margin-top:6px;
  font-size:.92rem; font-weight:700; letter-spacing:.02em;
  color:var(--nc-primary); text-decoration:none;
}
.gl-section .gl-body .gl-readmore::after{ content:"\2192"; transition:transform .3s ease; }
.gl-section .gl-card:hover .gl-body .gl-readmore::after{ transform:translateX(5px); }

/* ---- 電腦版格狀（高權重，蓋過舊 ul/li 樣式） ---- */
.gl-section .index-works-pc .gl-grid{
  list-style:none; margin:0 auto; padding:0; max-width:1180px; width:auto;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:28px; justify-content:initial;
}
.gl-section .index-works-pc .gl-grid > li{
  display:flex; float:none; width:auto; max-width:none; margin:0; min-width:0;
}

/* ---- 底部按鈕 ---- */
.gl-section .gl-btn{
  display:flex; align-items:center; justify-content:center; gap:9px; width:fit-content; margin:56px auto 0;
  padding:14px 34px; border-radius:999px; background:var(--nc-primary); color:#fff;
  font-size:1rem; font-weight:700; text-decoration:none; letter-spacing:.02em;
  transition:background .3s ease,transform .3s ease,box-shadow .3s ease;
}
.gl-section .gl-btn::after{ content:"\2192"; transition:transform .3s ease; }
.gl-section .gl-btn:hover{ background:var(--nc-primary-dark); transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(227,114,74,.65); }
.gl-section .gl-btn:hover::after{ transform:translateX(4px); }

/* ---- 裝置切換：預設顯示 PC，隱藏手機輪播 ---- */
.gl-section .index-works-phone{ display:none; }

/* ============================================================
   手機 Swiper：箭頭移到圖卡外側（與植髮見證相同做法）
   1. 外層 .index-works-swiper4 設 position:relative + 左右 padding（48px）做箭頭車道
   2. .swiper-container overflow:hidden 只負責裁切卡片輪播，箭頭不放在裡面
   3. 箭頭以 .index-works-swiper4 為定位基準，落在 padding 車道內，永遠在卡片外側
   4. 全程 box-sizing:border-box，避免卡片寬度被算到超出可視區
   ============================================================ */
.gl-section .index-works-phone *{ box-sizing:border-box; }

/* 外層 wrapper：左右留出箭頭車道 */
.gl-section .index-works-phone .index-works-swiper4{
  position:relative;
  padding:0 48px;
}

/* 輪播本體：限制寬度、裁切溢出 */
.gl-section .index-works-phone .swiper-container{
  position:relative;
  width:100%;
  overflow:hidden;
  padding-bottom:36px; /* 預留分頁點空間 */
}
.gl-section .index-works-phone .swiper-wrapper{ align-items:stretch; }
.gl-section .index-works-phone .swiper-slide{ height:auto; box-sizing:border-box; }
.gl-section .index-works-phone .swiper-block{ display:flex; width:100%; height:100%; margin:0; }
.gl-section .index-works-phone .gl-card{ width:100%; max-width:100%; }

/* 分頁點 */
.gl-section .index-works-phone .swiper-pagination{ bottom:4px; }
.gl-section .index-works-phone .swiper-pagination-bullet{ background:#d9c8c0; opacity:1; }
.gl-section .index-works-phone .swiper-pagination-bullet-active{ background:var(--nc-primary); }

/* 箭頭：以外層 wrapper 為基準，落在左右 48px 車道內（不壓卡片、不被裁切） */
.gl-section .index-works-phone .swiper-button-next,
.gl-section .index-works-phone .swiper-button-prev{
  position:absolute; top:50%; transform:translateY(-50%); margin-top:0;
  width:36px; height:36px; z-index:5; color:var(--nc-primary);
  display:flex; align-items:center; justify-content:center;
}
.gl-section .index-works-phone .swiper-button-prev{ left:4px; right:auto; }
.gl-section .index-works-phone .swiper-button-next{ right:4px; left:auto; }
/* 關閉 Swiper 預設箭頭，改用自帶 fa icon */
.gl-section .index-works-phone .swiper-button-next::after,
.gl-section .index-works-phone .swiper-button-prev::after{ display:none; }
.gl-section .index-works-phone .swiper-button-next i,
.gl-section .index-works-phone .swiper-button-prev i{ font-size:30px; line-height:1; }

/* ---- 響應式 ---- */
@media (max-width:960px){
  .gl-section{ padding:80px 20px; }
  .gl-section .gl-head{ margin-bottom:48px; }
  .gl-section .gl-head-h2 a{ font-size:2.1rem; }
  .gl-section .index-works-pc .gl-grid{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; }
}
@media (max-width:767px){
  .gl-section .index-works-pc{ display:none; }
  .gl-section .index-works-phone{ display:block; }
}
@media (max-width:560px){
  .gl-section{ padding:56px 18px; }
  .gl-section .gl-head{ margin-bottom:36px; }
  .gl-section .gl-head-h2 a{ font-size:1.75rem; }
  .gl-section .gl-btn{ margin-top:40px; }
  .gl-section .gl-title-h2 a{font-size:1.75rem}
  /* 小螢幕縮窄箭頭車道 */
  .gl-section .index-works-phone .index-works-swiper4{ padding:0 40px; }
  .gl-section .index-works-phone .swiper-button-next,
  .gl-section .index-works-phone .swiper-button-prev{ width:32px; height:32px; }
  .gl-section .index-works-phone .swiper-button-next i,
  .gl-section .index-works-phone .swiper-button-prev i{ font-size:26px; }
}
@media (prefers-reduced-motion:reduce){
  .gl-section .gl-card,
  .gl-section .gl-thumb img,
  .gl-section .gl-thumb::after,
  .gl-section .gl-body .gl-readmore::after,
  .gl-section .gl-btn{ transition:none; }
  .gl-section .gl-card:hover{ transform:none; }
  .gl-section .gl-card:hover .gl-thumb img{ transform:none; }
}

/* ============================================================
   植髮消息 / News 區塊（nw-）
   - 沿用既有 #e3724a 設計系統與 :root 變數，字體沿用原站（不覆寫 font-family）
   - 圖片維持原比例、不裁切（width:100% / height:auto）
   - 手機版左右輪播，樣式皆 scope 在 .nw-section 內，不影響其他 swiper
   - 輪播箭頭放在 swiper-container 外、落在外層 wrapper 的 padding 車道，不壓圖卡
   ============================================================ */

/* 色票：若前面區塊的 :root 已定義過，這段可省略不重複 */
:root{
  --nc-primary:#e3724a;
  --nc-primary-dark:#c85733;
  --nc-primary-soft:#fdeee7;
  --nc-card:#ffffff;
  --nc-border:#ece2dc;
  --nc-heading:#1f1916;
  --nc-text:#3a322c;
  --nc-text-muted:#776a62;
  --nc-text-faint:#9a8f87;
}

.nw-section{ background:transparent; padding:104px 20px; }

/* ---- 標題 ---- */
.nw-section .nw-head{ text-align:center; margin-bottom:60px; }
.nw-title-h2{
  margin:0; font-size:2.5rem; font-weight:800;
  letter-spacing:.04em; line-height:1.3; color:var(--nc-heading);
}
.nw-title-h2 span{
  display:block; width:100%; height:4px; margin:20px auto 0;
  border-radius:999px; background:linear-gradient(90deg,var(--nc-primary),#f4ab85);
}

.nw-title-h2 a{
  font-size:2.5rem; font-weight:800; letter-spacing:.04em;
  color:var(--nc-heading); text-decoration:none; transition:color .3s ease;
}

.nw-title-h2 a:hover{ color:var(--nc-primary); }

/* ---- 卡片外框 ---- */
.nw-section .nw-card{
  display:flex; flex-direction:column; width:100%; height:100%;
  background:var(--nc-card); border:1px solid var(--nc-border);
  border-radius:20px; overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.nw-section .nw-card:hover{
  transform:translateY(-8px); border-color:transparent;
  box-shadow:0 24px 50px -24px rgba(227,114,74,.45);
}

/* ---- 圖片：維持原比例、不裁切 ---- */
.nw-section .nw-thumb{ display:block; position:relative; overflow:hidden; line-height:0; background:var(--nc-primary-soft); }
.nw-section .nw-thumb img{
  width:100%; height:auto; max-width:100%; display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.nw-section .nw-thumb::after{
  content:""; position:absolute; inset:0; pointer-events:none;

  opacity:0; transition:opacity .4s ease;
}
.nw-section .nw-card:hover .nw-thumb img{ transform:scale(1.06); }
.nw-section .nw-card:hover .nw-thumb::after{ opacity:1; }

/* ---- 內文 ---- */
.nw-section .nw-body{ display:flex; flex-direction:column; gap:10px; padding:22px 24px 24px; flex:1; }

/* 日期 */
.nw-section .nw-date{ font-size:.82rem; font-weight:600; letter-spacing:.02em; color:var(--nc-primary-dark); }
.nw-section .nw-date span{ color:var(--nc-text-faint); }

/* 標題 */
.nw-section .nw-title{ margin:0; font-size:1.18rem; font-weight:700; line-height:1.5; letter-spacing:.01em; }
.nw-section .nw-title a{ color:var(--nc-heading); text-decoration:none; transition:color .3s ease; margin:0; font-size:1.18rem; font-weight:700; line-height:1.5; letter-spacing:.01em; }
.nw-section .nw-card:hover .nw-title a{ color:var(--nc-primary); }

/* 內文摘要 */
.nw-section .nw-text{
  font-size:.95rem; line-height:1.8; color:var(--nc-text); flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* 分類 / 瀏覽 / 分享（皆 .78rem） */
.nw-section .nw-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-top:4px; font-size:.78rem; }
.nw-section .nw-meta i{ font-size:.85em; }
.nw-section .nw-tag{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  font-size:.78rem;
  background:var(--nc-primary-soft); color:var(--nc-primary-dark);
  text-decoration:none; font-weight:600; transition:background .3s ease,color .3s ease;
}
.nw-section .nw-tag:hover{ background:var(--nc-primary); color:#fff; }
.nw-section .nw-views,
.nw-section .nw-shares{ display:inline-flex; align-items:center; gap:5px; font-size:.78rem; color:var(--nc-text-faint); }

/* 查看消息連結（加上 .nw-body 提高權重，固定主題橘色） */
.nw-section .nw-body .nw-readmore{
  display:inline-flex; align-items:center; gap:7px; margin-top:6px;
  font-size:.92rem; font-weight:700; letter-spacing:.02em;
  color:var(--nc-primary); text-decoration:none;
}
.nw-section .nw-body .nw-readmore::after{ content:"\2192"; transition:transform .3s ease; }
.nw-section .nw-card:hover .nw-body .nw-readmore::after{ transform:translateX(5px); }

/* ---- 電腦版格狀（高權重，蓋過舊 ul/li 樣式） ---- */
.nw-section .index-works-pc .nw-grid{
  list-style:none; margin:0 auto; padding:0; max-width:1180px; width:auto;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:28px; justify-content:initial;
}
.nw-section .index-works-pc .nw-grid > li{
  display:flex; float:none; width:auto; max-width:none; margin:0; min-width:0;
}

/* ---- 底部按鈕 ---- */
.nw-section .nw-btn{
  display:flex; align-items:center; justify-content:center; gap:9px; width:fit-content; margin:56px auto 0;
  padding:14px 34px; border-radius:999px; background:var(--nc-primary); color:#fff;
  font-size:1rem; font-weight:700; text-decoration:none; letter-spacing:.02em;
  transition:background .3s ease,transform .3s ease,box-shadow .3s ease;
}
.nw-section .nw-btn::after{ content:"\2192"; transition:transform .3s ease; }
.nw-section .nw-btn:hover{ background:var(--nc-primary-dark); transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(227,114,74,.65); }
.nw-section .nw-btn:hover::after{ transform:translateX(4px); }

/* ---- 裝置切換：預設顯示 PC，隱藏手機輪播 ---- */
.nw-section .index-works-phone{ display:none; }

/* ============================================================
   手機 Swiper：箭頭移到圖卡外側（與植髮見證/案例相同做法）
   1. 外層 .index-works-swiper5 設 position:relative + 左右 padding（48px）做箭頭車道
   2. .swiper-container overflow:hidden 只負責裁切卡片輪播，箭頭不放在裡面
   3. 箭頭以 .index-works-swiper5 為定位基準，落在 padding 車道內，永遠在卡片外側
   4. 全程 box-sizing:border-box，避免卡片寬度被算到超出可視區
   ============================================================ */
.nw-section .index-works-phone *{ box-sizing:border-box; }

/* 外層 wrapper：左右留出箭頭車道 */
.nw-section .index-works-phone .index-works-swiper5{
  position:relative;
  padding:0 48px;
}

/* 輪播本體：限制寬度、裁切溢出 */
.nw-section .index-works-phone .swiper-container{
  position:relative;
  width:100%;
  overflow:hidden;
  padding-bottom:36px; /* 預留分頁點空間 */
}
.nw-section .index-works-phone .swiper-wrapper{ align-items:stretch; }
.nw-section .index-works-phone .swiper-slide{ height:auto; box-sizing:border-box; }
.nw-section .index-works-phone .swiper-block{ display:flex; width:100%; height:100%; margin:0; }
.nw-section .index-works-phone .nw-card{ width:100%; max-width:100%; }

/* 分頁點 */
.nw-section .index-works-phone .swiper-pagination{ bottom:4px; }
.nw-section .index-works-phone .swiper-pagination-bullet{ background:#d9c8c0; opacity:1; }
.nw-section .index-works-phone .swiper-pagination-bullet-active{ background:var(--nc-primary); }

/* 箭頭：以外層 wrapper 為基準，落在左右 48px 車道內（不壓卡片、不被裁切） */
.nw-section .index-works-phone .swiper-button-next,
.nw-section .index-works-phone .swiper-button-prev{
  position:absolute; top:50%; transform:translateY(-50%); margin-top:0;
  width:36px; height:36px; z-index:5; color:var(--nc-primary);
  display:flex; align-items:center; justify-content:center;
}
.nw-section .index-works-phone .swiper-button-prev{ left:4px; right:auto; }
.nw-section .index-works-phone .swiper-button-next{ right:4px; left:auto; }
/* 關閉 Swiper 預設箭頭，改用自帶 fa icon */
.nw-section .index-works-phone .swiper-button-next::after,
.nw-section .index-works-phone .swiper-button-prev::after{ display:none; }
.nw-section .index-works-phone .swiper-button-next i,
.nw-section .index-works-phone .swiper-button-prev i{ font-size:30px; line-height:1; }

/* ---- 響應式 ---- */
@media (max-width:960px){
  .nw-section{ padding:80px 20px; }
  .nw-section .nw-head{ margin-bottom:48px; }
  .nw-section .nw-head-h2 a{ font-size:2.1rem; }
  .nw-section .index-works-pc .nw-grid{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; }
}
@media (max-width:767px){
  .nw-section .index-works-pc{ display:none; }
  .nw-section .index-works-phone{ display:block; }
}
@media (max-width:560px){
  .nw-section{ padding:56px 18px; }
  .nw-section .nw-head{ margin-bottom:36px; }
  .nw-section .nw-head-h2 a{ font-size:1.75rem; }
  .nw-section .nw-btn{ margin-top:40px; }
  .nw-title-h2 a{font-size:1.75rem} 
  /* 小螢幕縮窄箭頭車道 */
  .nw-section .index-works-phone .index-works-swiper5{ padding:0 40px; }
  .nw-section .index-works-phone .swiper-button-next,
  .nw-section .index-works-phone .swiper-button-prev{ width:32px; height:32px; }
  .nw-section .index-works-phone .swiper-button-next i,
  .nw-section .index-works-phone .swiper-button-prev i{ font-size:26px; }
}
@media (prefers-reduced-motion:reduce){
  .nw-section .nw-card,
  .nw-section .nw-thumb img,
  .nw-section .nw-thumb::after,
  .nw-section .nw-body .nw-readmore::after,
  .nw-section .nw-btn{ transition:none; }
  .nw-section .nw-card:hover{ transform:none; }
  .nw-section .nw-card:hover .nw-thumb img{ transform:none; }
}

/* ============================================================
   植髮影片分享 / Video 區塊（vd-）
   - 沿用既有 #e3724a 設計系統與 :root 變數，字體沿用原站（不覆寫 font-family）
   - 影片以 16:9 容器呈現、不裁切；保留 .youtube-player 與 data-id 供 JS 初始化
   - 手機版左右輪播，樣式皆 scope 在 .vd-section 內，不影響其他 swiper
   - 輪播箭頭放在 swiper-container 外、落在外層 wrapper 的 padding 車道，不壓卡片
   ============================================================ */

/* 色票：若前面區塊的 :root 已定義過，這段可省略不重複 */
:root{
  --nc-primary:#e3724a;
  --nc-primary-dark:#c85733;
  --nc-primary-soft:#fdeee7;
  --nc-card:#ffffff;
  --nc-border:#ece2dc;
  --nc-heading:#1f1916;
  --nc-text:#3a322c;
  --nc-text-muted:#776a62;
  --nc-text-faint:#9a8f87;
}

.vd-section{ background:transparent; padding:104px 20px; }

/* ---- 標題 ---- */
.vd-section .vd-head{ text-align:center; margin-bottom:60px; }
.vd-title-h2{
  margin:0; font-size:2.5rem; font-weight:800;
  letter-spacing:.04em; line-height:1.3; color:var(--nc-heading);
}
.vd-title-h2 span{
  display:block; width:100%; height:4px; margin:20px auto 0;
  border-radius:999px; background:linear-gradient(90deg,var(--nc-primary),#f4ab85);
}

.vd-title-h2 a{
  font-size:2.5rem; font-weight:800; letter-spacing:.04em;
  color:var(--nc-heading); text-decoration:none; transition:color .3s ease;
}

.vd-title-h2 a:hover{ color:var(--nc-primary); }
/* ---- 卡片外框 ---- */
.vd-section .vd-card{
  display:flex; flex-direction:column; width:100%; height:100%;
  background:var(--nc-card); border:1px solid var(--nc-border);
  border-radius:20px; overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.vd-section .vd-card:hover{
  transform:translateY(-8px); border-color:transparent;
  box-shadow:0 24px 50px -24px rgba(227,114,74,.45);
}

/* ---- 影片：固定 16:9，不裁切 ---- */
.vd-section .vd-media{
  position:relative; width:100%; aspect-ratio:16/9;
  overflow:hidden; line-height:0; background:#000;
}
/* youtube-player 本體與 JS 生成的 iframe/縮圖都填滿 16:9 容器 */
.vd-section .vd-media .youtube-player{ position:absolute; inset:0; width:100%; height:100%; }
.vd-section .vd-media .youtube-player iframe,
.vd-section .vd-media .youtube-player img,
.vd-section .vd-media > iframe,
.vd-section .vd-media > img{
  position:absolute; inset:0; width:100%; height:100%; display:block; border:0; object-fit:cover;
}

/* ---- 內文 ---- */
.vd-section .vd-body{ display:flex; flex-direction:column; gap:10px; padding:22px 24px 24px; flex:1; }

/* 標題 */
.vd-section .vd-title{ margin:0; font-size:1.18rem; font-weight:700; line-height:1.5; letter-spacing:.01em; }
.vd-section .vd-title a{ color:var(--nc-heading); text-decoration:none; transition:color .3s ease; margin:0; font-size:1.18rem; font-weight:700; line-height:1.5; letter-spacing:.01em;}
.vd-section .vd-card:hover .vd-title a{ color:var(--nc-primary); }

/* 內文摘要 */
.vd-section .vd-text{
  margin:0; font-size:.95rem; line-height:1.8; color:var(--nc-text); flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* 分類標籤（.78rem） */
.vd-section .vd-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-top:4px; font-size:.78rem; }
.vd-section .vd-meta i{ font-size:.85em; }
.vd-section .vd-tag{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  font-size:.78rem;
  background:var(--nc-primary-soft); color:var(--nc-primary-dark);
  text-decoration:none; font-weight:600; transition:background .3s ease,color .3s ease;
}
.vd-section .vd-tag:hover{ background:var(--nc-primary); color:#fff; }

/* ---- 電腦版格狀（高權重，蓋過舊樣式） ---- */
.vd-section .index-works-pc .vd-grid{
  list-style:none; margin:0 auto; padding:0; max-width:1180px; width:auto;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:28px; justify-content:initial;
}
.vd-section .index-works-pc .vd-grid > li{
  display:flex; float:none; width:auto; max-width:none; margin:0; min-width:0;
}

/* ---- 底部按鈕 ---- */
.vd-section ~ .vd-btn,
.vd-btn{
  display:flex; align-items:center; justify-content:center; gap:9px; width:fit-content; margin:56px auto 0;
  padding:14px 34px; border-radius:999px; background:var(--nc-primary); color:#fff;
  font-size:1rem; font-weight:700; text-decoration:none; letter-spacing:.02em;
  transition:background .3s ease,transform .3s ease,box-shadow .3s ease;
}
.vd-btn::after{ content:"\2192"; transition:transform .3s ease; }
.vd-btn:hover{ background:var(--nc-primary-dark); transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(227,114,74,.65); }
.vd-btn:hover::after{ transform:translateX(4px); }

/* ---- 裝置切換：預設顯示 PC，隱藏手機輪播 ---- */
.vd-section .index-works-phone{ display:none; }

/* ============================================================
   手機 Swiper：箭頭移到圖卡外側（與前面各區相同做法）
   1. 外層 .index-works-swiper6 設 position:relative + 左右 padding（48px）做箭頭車道
   2. .swiper-container overflow:hidden 只負責裁切卡片輪播，箭頭不放在裡面
   3. 箭頭以 .index-works-swiper6 為定位基準，落在 padding 車道內，永遠在卡片外側
   4. 全程 box-sizing:border-box，避免卡片寬度被算到超出可視區
   ============================================================ */
.vd-section .index-works-phone *{ box-sizing:border-box; }

/* 外層 wrapper：左右留出箭頭車道 */
.vd-section .index-works-phone .index-works-swiper6{
  position:relative;
  padding:0 48px;
}

/* 輪播本體：限制寬度、裁切溢出 */
.vd-section .index-works-phone .swiper-container{
  position:relative;
  width:100%;
  overflow:hidden;
  padding-bottom:36px; /* 預留分頁點空間 */
}
.vd-section .index-works-phone .swiper-wrapper{ align-items:stretch; }
.vd-section .index-works-phone .swiper-slide{ height:auto; box-sizing:border-box; }
.vd-section .index-works-phone .swiper-block{ display:flex; width:100%; height:100%; margin:0; }
.vd-section .index-works-phone .vd-card{ width:100%; max-width:100%; }

/* 分頁點 */
.vd-section .index-works-phone .swiper-pagination{ bottom:4px; }
.vd-section .index-works-phone .swiper-pagination-bullet{ background:#d9c8c0; opacity:1; }
.vd-section .index-works-phone .swiper-pagination-bullet-active{ background:var(--nc-primary); }

/* 箭頭：以外層 wrapper 為基準，落在左右 48px 車道內（不壓卡片、不被裁切） */
.vd-section .index-works-phone .swiper-button-next,
.vd-section .index-works-phone .swiper-button-prev{
  position:absolute; top:50%; transform:translateY(-50%); margin-top:0;
  width:36px; height:36px; z-index:5; color:var(--nc-primary);
  display:flex; align-items:center; justify-content:center;
}
.vd-section .index-works-phone .swiper-button-prev{ left:4px; right:auto; }
.vd-section .index-works-phone .swiper-button-next{ right:4px; left:auto; }
/* 關閉 Swiper 預設箭頭，改用自帶 fa icon */
.vd-section .index-works-phone .swiper-button-next::after,
.vd-section .index-works-phone .swiper-button-prev::after{ display:none; }
.vd-section .index-works-phone .swiper-button-next i,
.vd-section .index-works-phone .swiper-button-prev i{ font-size:30px; line-height:1; }

/* ---- 響應式 ---- */
@media (max-width:960px){
  .vd-section{ padding:80px 20px; }
  .vd-section .vd-head{ margin-bottom:48px; }
  .vd-section .vd-head-h2 a{ font-size:2.1rem; }
  .vd-section .index-works-pc .vd-grid{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; }
}
@media (max-width:767px){
  .vd-section .index-works-pc{ display:none; }
  .vd-section .index-works-phone{ display:block; }
}
@media (max-width:560px){
  .vd-section{ padding:56px 18px; }
  .vd-section .vd-head{ margin-bottom:36px; }
  .vd-section .vd-head-h2 a{ font-size:1.75rem; }
  .vd-btn{ margin-top:40px; }
  .vd-title-h2 a{font-size:1.75rem} 
  /* 小螢幕縮窄箭頭車道 */
  .vd-section .index-works-phone .index-works-swiper6{ padding:0 40px; }
  .vd-section .index-works-phone .swiper-button-next,
  .vd-section .index-works-phone .swiper-button-prev{ width:32px; height:32px; }
  .vd-section .index-works-phone .swiper-button-next i,
  .vd-section .index-works-phone .swiper-button-prev i{ font-size:26px; }
}
@media (prefers-reduced-motion:reduce){
  .vd-section .vd-card,
  .vd-btn{ transition:none; }
  .vd-section .vd-card:hover{ transform:none; }
}


/* ============================================================
   M型禿植髮區塊（mp-）左圖右按鈕
   - 沿用既有 #e3724a 設計系統與 :root 變數，字體沿用原站
   - 左圖 800x600（4:3），width:100%/height:auto 完整顯示不裁切
   - 右側 6 顆導引按鈕，桌機平均撐滿圖片高度，手機自動堆疊
   ============================================================ */

/* 色票：若前面區塊的 :root 已定義過，這段可省略不重複 */
:root{
  --nc-primary:#e3724a;
  --nc-primary-dark:#c85733;
  --nc-primary-soft:#fdeee7;
  --nc-card:#ffffff;
  --nc-border:#ece2dc;
  --nc-heading:#1f1916;
  --nc-text:#3a322c;
  --nc-text-muted:#776a62;
  --nc-text-faint:#9a8f87;
}

.mp-section{ background:transparent; padding:20px 20px 104px 20px; }

/* ---- 標題 ---- */
.mp-head{ text-align:center; margin-bottom:60px; }
.mp-title{
  margin:0; font-size:2.5rem; font-weight:800;
  letter-spacing:.04em; line-height:1.3; color:var(--nc-heading);
}
.mp-title span{
  display:block; width:100%; height:4px; margin:20px auto 0;
  border-radius:999px; background:linear-gradient(90deg,var(--nc-primary),#f4ab85);
}



/* ---- 左圖右按鈕版面 ---- */
.mp-section .mp-layout{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:stretch; gap:40px;
}
.mp-section .mp-photo{ flex:1 1 60%; min-width:0; }
.mp-section .mp-list{ flex:1 1 40%; min-width:0; display:flex; }

/* ---- 左圖：以 4:3 為基準（貼近 800x600），填滿與按鈕同高的列；object-fit:cover 置中填滿 ---- */
.mp-section .mp-photo{
  border-radius:20px; overflow:hidden; line-height:0;
  background:var(--nc-primary-soft);
  box-shadow:0 24px 50px -28px rgba(227,114,74,.45);
  aspect-ratio:4 / 3;
}
.mp-section .mp-photo img{
  width:100%; height:100%; max-width:100%; display:block; object-fit:cover;
}
/* === 圖片 hover 效果（追加即可，沿用各區圖片的縮放+橘色漸層） === */
.mp-section .mp-photo{ position:relative; transition:box-shadow .4s ease; }
.mp-section .mp-photo img{ transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.mp-section .mp-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity .4s ease;
}
.mp-section .mp-photo:hover{ box-shadow:0 30px 60px -26px rgba(227,114,74,.55); }
.mp-section .mp-photo:hover img{ transform:scale(1.06); }
.mp-section .mp-photo:hover::after{ opacity:1; }

/* ---- 右側按鈕群 ---- */
.mp-section .mp-nav{
  flex:1; width:100%;
  display:flex; flex-direction:column; gap:14px;
}
.mp-section .mp-link{
  flex:1 1 0; min-height:0;
  display:flex; align-items:center; gap:15px; padding:14px 20px;
  background:var(--nc-card); border:1px solid var(--nc-border); border-radius:16px;
  text-decoration:none; color:var(--nc-heading);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.mp-section .mp-link:hover{
  transform:translateX(6px); border-color:var(--nc-primary); background:var(--nc-primary-soft);
  box-shadow:0 18px 38px -20px rgba(227,114,74,.5);
}

/* 左側圖示圓 */
.mp-section .mp-link-icon{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--nc-primary-soft); color:var(--nc-primary-dark);
  font-size:1.05rem; transition:background .3s ease, color .3s ease, transform .3s ease;
}
.mp-section .mp-link:hover .mp-link-icon{ background:var(--nc-primary); color:#fff; transform:scale(1.06); }

/* 文字 */
.mp-section .mp-link-label{
  flex:1; font-size:1.12rem; font-weight:700; letter-spacing:.01em; line-height:1.4;
  transition:color .3s ease;
}
.mp-section .mp-link:hover .mp-link-label{ color:var(--nc-primary); }

/* 右側箭頭 */
.mp-section .mp-link-arrow{
  flex:0 0 auto; color:var(--nc-text-faint); font-size:1.4rem; line-height:1;
  transition:color .3s ease, transform .3s ease;
}
.mp-section .mp-link:hover .mp-link-arrow{ color:var(--nc-primary); transform:translateX(4px); }

/* ---- 響應式 ---- */
@media (max-width:1100px){
  /* 側欄變窄時圖片高度不足，提早改為上下堆疊：圖在上、按鈕在下 */
  .mp-section .mp-layout{ flex-direction:column; align-items:stretch; gap:28px; }
  .mp-section .mp-photo{ flex:none; width:100%; }
  .mp-section .mp-list{ flex:none; }
  .mp-section .mp-link{ flex:0 0 auto; min-height:0; padding:16px 22px; }
}
@media (max-width:960px){
  .mp-section{ padding:80px 20px; }
  .mp-section .mp-head{ margin-bottom:48px; }
  .mp-section .mp-title{ font-size:2.1rem; }
}
@media (max-width:560px){
  .mp-section{ padding:56px 18px; }
  .mp-section .mp-head{ margin-bottom:36px; }
  .mp-section .mp-title{ font-size:1.75rem; }
  .mp-section .mp-nav{ gap:12px; }
  .mp-section .mp-link{ padding:14px 16px; gap:13px; }
  .mp-section .mp-link-icon{ width:42px; height:42px; font-size:1.05rem; }
  .mp-section .mp-link-label{ font-size:1rem; }
}
@media (prefers-reduced-motion:reduce){
  .mp-section .mp-link,
  .mp-section .mp-link-icon,
  .mp-section .mp-link-arrow{ transition:none; }
  .mp-section .mp-link:hover{ transform:none; }
  .mp-section .mp-link:hover .mp-link-icon{ transform:none; }
  .mp-section .mp-link:hover .mp-link-arrow{ transform:none; }
}