@layer theme-custom {
/* 桌機：導航列固定在頂端，滿版底色；內容維持原本 1140px 置中 */
@media (min-width: 992px) {
  nav.navbar {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 30px max(15px, calc(50% - 570px)) 26px !important;
    background: #f5f2f2 !important;
    box-shadow: 0 2px 12px rgba(79, 58, 52, .06);
  }
  body { padding-top: 102px !important }
}

/* 手機版：鎖住橫向捲動。主題只設在 body，iPhone 不認，html 也要設才有效 */
@media (max-width: 991px) {
  html, body { overflow-x: hidden !important }
}

/* 首頁 banner：圖片外層原本是 inline 排版，iPhone 會在圖片上方多出一行的高度（約 19px 底色）；改成 block 就貼齊 */
.index-banner-for .slick-item,
.index-banner-for .slick-item a,
.index-banner-for .slick-item picture { display: block !important }
.index-banner-for .slick-item img { width: 100% !important }

/* 首頁 banner：輪播點移到圖片上，去掉下方灰帶 */
.index-banner-for { margin-bottom: 0 !important }
.index-banner-for .slick-dots { bottom: 14px !important }

/* 滿版自由編輯區塊：外層格線左右多出 15px，畫面會可橫向滑動 */
section.index-editor > .html-info > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
section.index-editor > .html-info > .row > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 頁尾：深色版。外層與平台自帶的版權列跟著配色，字縮小置中 */
footer { background: #4f3a34 !important; color: #bfaea5 !important }
footer a { color: inherit }
footer > :not(.tz-footer) {
  font-size: 11px !important;
  letter-spacing: .04em;
  line-height: 1.8;
  text-align: center;
  padding: 0 24px 14px !important;
}

/* 手機版：區塊上下間距縮小 */
@media (max-width: 991px) {
  section.index-editor { padding-top: 16px !important; padding-bottom: 16px !important }
}

/* 手機版：電腦版導航列不顯示（手機有自己的頁首） */
@media (max-width: 991px) {
  nav.navbar { display: none !important }
}

/* 手機選單開啟時：漢堡維持原位，不移到右邊、不變成 X */
@media (max-width: 991px) {
  .hamburger.is-active {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 6px 16px 0 !important;
  }
  .hamburger.is-active .line { transform: none !important; opacity: 1 !important }
}

/* 手機選單開啟時：遮罩加深，蓋住整個畫面 */
@media (max-width: 991px) {
  .overlayer { top: 0 !important; background: rgba(40, 28, 26, .88) !important }
}

/* 手機版：社群列固定底部，沿用原本的灰底圓角 */
@media (max-width: 991px) {
  .fixed-bottom-contant {
    display: flex !important;
    position: fixed !important;
    inset: auto 12px calc(12px + env(safe-area-inset-bottom)) 12px !important;
    width: auto !important;
    height: auto !important;
    flex-direction: row !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    transform: none !important;
    margin: 0 !important;
    padding: 8px 6px !important;
    background: rgba(238, 233, 230, .94) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 16px rgba(79, 58, 52, .12) !important;
    z-index: 9000 !important;
  }
  /* 讓清單裡的三顆圖示直接參與分配，不被當成一格 */
  .fixed-bottom-contant .social-link { display: contents !important }
  .fixed-bottom-contant .social-link li { margin: 0 !important }
  /* Top 鈕原本有下外距，橫排時會被推高 */
  .fixed-bottom-contant #gotop { margin: 0 !important }
  footer { padding-bottom: 86px !important }
}

/* 美學專欄（列表頁＋文章內頁）：配色字體比照療程頁、醫師頁（標題宋體、內文黑體）。引言區、日期格式由追蹤碼 #10 處理 */
/* 標題前面藏著一段「column」文字，會被排成一格、讓左邊的線離字比較遠；改用字的左右留白，兩側距離才會一樣 */
body.b_blog_list .pagging-title { gap: 0 !important; letter-spacing: 0 !important }
body.b_blog_list .pagging-title span { margin: 0 16px !important; font-family: 'Noto Serif TC', serif !important; font-weight: 700 !important; letter-spacing: .12em; color: #3f3a36 !important }
body.b_blog_list .pagging-title::before, body.b_blog_list .pagging-title::after { background: #c9803f !important }
body.b_blog_list .breadcrumb-item, body.b_blog_list .breadcrumb-item a { color: #a1837b !important }
body.b_blog_list .breadcrumb-item + .breadcrumb-item::before { color: #c5b3ad !important }
/* 引言 */
body.b_blog_list .zyb-hero { display: block; grid-column: 1 / -1; order: 1; position: relative; overflow: hidden; padding: 48px 40px 44px; background: #f6f1ee; text-align: center }
/* 兩個圓弧：尺寸位置公式同醫師團隊頁，手機、桌機都一致 */
.zyb-hero::before, .zyb-hero::after { content: ""; position: absolute; aspect-ratio: 1; border: 1px solid rgba(177, 128, 130, .15); border-radius: 50%; pointer-events: none }
.zyb-hero::before { width: min(720px, 78vw); left: -28%; top: -70% }
.zyb-hero::after { width: min(520px, 58vw); right: -20%; bottom: -88% }
.zyb-eb { margin: 0 !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .32em; color: #b18082 !important }
.zyb-ln { display: block; width: 56px; height: 1px; margin: 18px auto 16px; background: #b18082 }
.zyb-intro { margin: 0 !important; font-size: 15px !important; line-height: 1.95 !important; letter-spacing: .04em; color: #79635c !important }
/* 分類膠囊 */
body.b_blog_list .catbar-chip, body.b_blog_detail .catbar-chip { padding: 6px 16px !important; border: 1px solid #e3d1d0 !important; background: #fff !important; color: #76585b !important; font-size: 13px !important; letter-spacing: .06em }
body.b_blog_list .catbar-chip.is-active, body.b_blog_detail .catbar-chip.is-active { background: #684d50 !important; border-color: #684d50 !important; color: #fff !important }
/* 文章卡片 */
body.b_blog_list .blog-row { position: relative; margin: 0 0 20px !important; padding: 0 !important; border: 1px solid #e8dcd7 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff }
body.b_blog_list .blog-row > .row { margin: 0 !important; padding: 0 !important }
body.b_blog_list .blog-row > .row > [class*="col-"] { padding: 0 !important }
body.b_blog_list .blog-row .col-md-4 { position: relative }
body.b_blog_list .blog-row .col-md-4 a, body.b_blog_list .blog-row picture { display: block !important }
body.b_blog_list .blog-row .col-md-4 img { display: block; width: 100% !important; aspect-ratio: 2 / 1; height: auto !important; object-fit: cover; margin: 0 !important; border-radius: 0 !important }
body.b_blog_list .blog-row .col-md-4::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, #d8b7ad, transparent) }
body.b_blog_list .blog-row > .row > .col-md-8 { display: flex !important; flex-direction: column; align-items: flex-start; padding: 20px 20px 22px !important }
body.b_blog_list .blog-row .col-md-8 > a:first-child::after { content: ""; position: absolute; inset: 0; z-index: 1 }
body.b_blog_list .blog-row .middle-title { margin: 0 0 8px !important; font-family: 'Noto Serif TC', serif; font-size: 19px !important; font-weight: 700; line-height: 1.55 !important; letter-spacing: .04em; color: #5a4038 !important }
body.b_blog_list .blog-row .article-classify { order: -1; display: flex; margin: 0 0 6px !important; font-size: 11px !important; font-weight: 600; letter-spacing: .2em; color: #b18082 !important }
body.b_blog_list .blog-row .article-classify a { order: -1 !important; position: relative; z-index: 2; padding: 0 !important; background: none !important; border-radius: 0 !important; color: #b18082 !important }
body.b_blog_list .blog-row .article-date { padding: 0 !important; border: 0 !important; color: #b18082 !important }
body.b_blog_list .blog-row .article-date::before { content: "・" }
body.b_blog_list .blog-row .col-md-8 > p { margin: 0 !important; font-size: 13.5px !important; line-height: 1.8 !important; color: #6e5a53 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
body.b_blog_list .blog-row .read-more { display: inline-flex !important; align-items: center; gap: 10px; margin-top: auto; padding-top: 16px; font-size: 0 !important; color: #b18082 !important }
body.b_blog_list .blog-row .read-more i { display: none }
body.b_blog_list .blog-row .read-more::before { content: "READ MORE"; font-size: 12px; font-weight: 600; letter-spacing: .14em }
body.b_blog_list .blog-row .read-more::after { content: ""; width: 34px; height: 1px; background: currentColor }
/* 文章內頁：副標、標題、日期分類 */
body.b_blog_detail .blog-title-row .subTitle { margin: 0 0 10px !important; font-size: 13px !important; font-weight: 500; line-height: 1.8 !important; letter-spacing: .06em; color: #b18082 !important }
body.b_blog_detail .blog-title-row h1.title { margin-bottom: 20px !important; padding: 0 !important; text-wrap: balance }
body.b_blog_detail .blog-title-row h1.title span { font-family: 'Noto Serif TC', serif !important; font-size: 24px !important; font-weight: 700 !important; line-height: 1.55 !important; letter-spacing: .04em; color: #3f3a36 !important }
body.b_blog_detail .blog-info > .article-classify { text-align: center; color: #b18082 !important }
body.b_blog_detail .blog-info > .article-classify .article-date { color: #b18082 !important; border-color: #e3d1d0 !important; letter-spacing: .12em }
body.b_blog_detail .blog-info > .article-classify a, body.b_blog_detail .blog-info > .article-classify a::before { color: #b18082 !important }
@media (min-width: 992px) { body.b_blog_detail .blog-title-row h1.title span { font-size: 32px !important } }
/* 分類與搜尋區（桌機才有搜尋） */
body.b_blog_list .catbar, body.b_blog_list #tab-side aside { border-radius: 0 !important }
body.b_blog_list #tab-side input { border-color: #e3d1d0 !important }
body.b_blog_list #tab-side .btn { color: #684d50 !important; border-color: #e3d1d0 !important }
body.b_blog_list #tab-side .btn:hover { color: #fff !important; background: #684d50 !important; border-color: #684d50 !important }
/* 分頁 */
body.b_blog_list .pagination .page-link { color: #684d50 !important; border-color: #e3d1d0 !important; background: #fff !important }
body.b_blog_list .pagination .page-item.active .page-link { color: #fff !important; background: #684d50 !important; border-color: #684d50 !important }
/* 手機版排版：滿版色塊、不顯示麵包屑、分類置中、列表卡片左右留 18px */
@media (max-width: 991px) {
  body.b_blog_list main.menu { background: #fff }
  body.b_blog_list main.menu > .container > .row { padding: 0 !important }
  body.b_blog_list #tab-home { padding: 0 3px !important }
  body.b_blog_list #tab-home section { padding: 0 0 28px !important }
  .zyb-head { margin: 0 calc(50% - 50vw); background: #fff }
  .zyb-head nav { display: none !important }
  /* 標題、引言色帶：字級、線長、間距比照醫師團隊頁手機版 */
  .zyb-head .pagging-title { display: flex; align-items: flex-start; justify-content: center; margin: 0 !important; padding: 32px 20px 48px !important; font-size: 0 !important }
  .zyb-head .pagging-title::before, .zyb-head .pagging-title::after { content: ""; flex: 0 0 80px; height: 2px; margin-top: 27px }
  .zyb-head .pagging-title span { padding: 0 !important; font-size: 24px !important; line-height: 1.6 !important }
  body.b_blog_list .zyb-hero { margin: 0 calc(50% - 50vw); padding: 72px 20px 62px }
  .zyb-eb { font-size: 14.4px !important; line-height: 1.8 !important }
  .zyb-ln { width: 64px; margin: 24px auto 20px }
  .zyb-intro { font-size: 14.4px !important; line-height: 1.8 !important }
  body.b_blog_list .catbar { margin: 0 calc(50% - 50vw) !important; padding: 22px 0 !important; border: 0 !important; background: #fff !important }
  body.b_blog_detail .catbar { margin: 0 calc(50% - 50vw) !important; padding: 14px 0 !important; border: 0 !important }
  body.b_blog_list .catbar-chip:first-child, body.b_blog_detail .catbar-chip:first-child { margin-left: auto }
  body.b_blog_list .catbar-chip:last-child, body.b_blog_detail .catbar-chip:last-child { margin-right: auto }
}
/* 平台頁面標題（醫師團隊、聯絡我們、首頁聯絡我們區塊）：宋體＋咖啡金線，同美學專欄 */
.page-title .title > span:last-child { font-family: 'Noto Serif TC', serif !important; font-weight: 700 !important; letter-spacing: .12em; color: #3f3a36 !important }
.page-title .title::before, .page-title .title::after { background: #c9803f !important }
/* 文章內頁：相關文章，卡片同列表頁 */
body.b_blog_detail h3.middle-title.mt-5 { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 48px 0 16px !important; font-family: 'Noto Serif TC', serif; font-size: 22px !important; font-weight: 700 !important; letter-spacing: .12em; color: #3f3a36 !important }
body.b_blog_detail h3.middle-title.mt-5::before, body.b_blog_detail h3.middle-title.mt-5::after { content: ""; flex: 0 0 40px; height: 2px; background: #c9803f }
body.b_blog_detail .recommended-container .blog-grid { border: 1px solid #e8dcd7; background: #fff }
body.b_blog_detail .recommended-container .img-box img { display: block; width: 100%; aspect-ratio: 2 / 1; height: auto !important; object-fit: cover }
body.b_blog_detail .recommended-container .text-box { padding: 16px 18px 18px }
body.b_blog_detail .recommended-container .middle-title { margin: 0 0 6px !important; text-align: left !important; font-family: 'Noto Serif TC', serif; font-size: 16px !important; font-weight: 700 !important; line-height: 1.55 !important; color: #5a4038 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
body.b_blog_detail .recommended-container .text-box p { margin: 0 0 10px !important; font-size: 13px !important; line-height: 1.75 !important; color: #6e5a53 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
body.b_blog_detail .recommended-container .article-info li { font-size: 11px !important; letter-spacing: .12em; color: #b18082 !important }
body.b_blog_detail .recommended-container .slick-dots li button::before { background: #b18082 !important }

/* 美學專欄列表（桌機）：標題改成 H1 後，平台自訂 CSS 只認 h2，這裡補上同樣的排版 */
@media (min-width: 993px) {
  body.b_blog_list .zyb-head { grid-column: 1 / -1; order: 1; width: 100%; max-width: none; margin: 0; padding-top: 32px }
  body.b_blog_list h1.pagging-title { display: flex !important; align-items: flex-start; justify-content: center; width: 100%; margin: 0 0 8px !important; padding: 0 !important; font-size: 0 !important }
  body.b_blog_list h1.pagging-title::before, body.b_blog_list h1.pagging-title::after { content: ""; display: block; width: 80px; height: 2px; margin-top: 27px }
  body.b_blog_list h1.pagging-title span { padding: 0 !important; font-size: 24px !important; line-height: 1.6 !important }
  body.b_blog_list h1.pagging-title + nav { display: none !important }
}

/* 美學專欄列表（桌機）：版面比照醫師團隊頁——白底標題、滿版引言色帶、左右兩個圓弧 */
@media (min-width: 993px) {
  body.b_blog_list { overflow-x: hidden }
  body.b_blog_list main.menu { background: #fff }
  body.b_blog_list .zyb-hero { margin: 0 calc(50% - 50vw) 16px; padding: 64px 24px 56px }
  body.b_blog_list .zyb-eb { font-size: 14.4px !important; line-height: 1.8 !important; margin: 0 0 12px !important }
  body.b_blog_list .zyb-ln { width: 64px; margin: 24px auto 20px }
  body.b_blog_list .zyb-intro { font-size: 14.4px !important; line-height: 1.8 !important }
  body.b_blog_list .zyb-intro br.zyb-m { display: none }
}

/* 醫師團隊頁（桌機）：引言色帶高度與美學專欄一致 */
@media (min-width: 993px) {
  .td-hero { padding: 64px 24px 56px !important }
}

/* 桌機窄視窗（992–1199px）：選單間距縮小，避免擠成兩行蓋住標題 */
@media (min-width: 992px) and (max-width: 1199px) {
  nav.navbar .naviMain ul { gap: 20px !important }
}
}