@layer theme-custom {
/* 最新消息內頁：日期置中，對齊標題 - 2026-10-28 */
body.b_news_detail .news-date { text-align: center !important; }

/* 最新消息列表：清單置中 - 2026-10-28 */
body.b_news_list .news-list { margin-left: auto !important; margin-right: auto !important; }

/* 最新消息列表：行高加高（蓋過自訂CSS片段「原站自訂樣式」的上下 10px）- 2026-10-28 */
body.b_news_list .news-list li a { padding-top: 15px !important; padding-bottom: 15px !important; }

/* ===== 服務據點頁：動畫與層次 - 2026-10-28 ===== */
@keyframes am-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes am-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }

.html-info:has(.aimei-grid) img { display: block !important; margin: 0 !important; }

/* 主視覺：陰影、浮上、慢慢拉近 */
.html-info:has(.aimei-grid) > .container > div:first-child > div {
  box-shadow: 0 20px 50px rgba(207,153,152,.2) !important;
  animation: am-up 1s ease both;
}
.html-info:has(.aimei-grid) > .container > div:first-child img { animation: am-zoom 2.4s ease-out both; }

/* 門市區：滿版米色底，往下延伸接到 Footer */
.html-info:has(.aimei-grid) > .container > div:nth-child(2) {
  background: #F7F2EC !important;
  box-shadow: 0 0 0 100vmax #F7F2EC;
  clip-path: inset(0 -100vmax -300px);
  margin-top: 60px !important;
}
.html-info:has(.aimei-grid) > .container > div:nth-child(2) > div:first-child { animation: am-up .9s .3s ease both; }

/* 門市卡片：依序浮上、滑過時抬起 */
.html-info:has(.aimei-grid) .aimei-grid > div {
  background: #fff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.06) !important;
  transition: transform .4s ease, box-shadow .4s ease;
  animation: am-up .9s .5s ease both;
}
.html-info:has(.aimei-grid) .aimei-grid > div:nth-child(2) { animation-delay: .7s; }
.html-info:has(.aimei-grid) .aimei-grid > div:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(207,153,152,.25) !important;
}
.html-info:has(.aimei-grid) .aimei-grid > div > a:first-child { display: block !important; overflow: hidden !important; }
.html-info:has(.aimei-grid) .aimei-grid > div img { transition: transform .8s ease; }
.html-info:has(.aimei-grid) .aimei-grid > div:hover img { transform: scale(1.06); }

/* 捲到才浮上（支援的瀏覽器） */
@supports (animation-timeline: view()) {
  .html-info:has(.aimei-grid) .aimei-grid > div {
    animation: am-up linear both !important;
    animation-timeline: view() !important;
    animation-range: entry 0% entry 60% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .html-info:has(.aimei-grid) * { animation: none !important; transition: none !important; }
}

/* ===== 門市頁（板橋／桃園）：動畫與層次 - 2026-10-28（2026-10-29 收緊範圍）===== */
/* 範圍：只認「區塊第一層就是三格照片牆」的版型，避免其他區塊剛好有 gap:12px 被誤套 */

/* 照片牆：依序浮上、陰影、滑過放大 */
.html-info:has(> .container > div:first-child > div[style*="gap:12px"]) > .container > div:first-child > div > div {
  box-shadow: 0 14px 34px rgba(207,153,152,.18);
  animation: am-up .9s ease both;
}
.html-info:has(> .container > div:first-child > div[style*="gap:12px"]) > .container > div:first-child > div > div:nth-child(2) { animation-delay: .15s; }
.html-info:has(> .container > div:first-child > div[style*="gap:12px"]) > .container > div:first-child > div > div:nth-child(3) { animation-delay: .3s; }
.html-info:has(> .container > div:first-child > div[style*="gap:12px"]) > .container > div:first-child img {
  display: block !important; margin: 0 !important; transition: transform .8s ease;
}
.html-info:has(> .container > div:first-child > div[style*="gap:12px"]) > .container > div:first-child > div > div:hover img { transform: scale(1.07); }

/* 下方資訊區：滿版米色底，往下延伸接到 Footer */
.html-info:has(> .container > div:first-child > div[style*="gap:12px"]) > .container > div:nth-child(2) {
  background: #F7F2EC !important;
  box-shadow: 0 0 0 100vmax #F7F2EC;
  clip-path: inset(0 -100vmax -300px);
  margin-top: 60px !important;
}
.html-info:has(> .container > div:first-child > div[style*="gap:12px"]) > .container > div:nth-child(2) > div:first-child { animation: am-up .9s .4s ease both; }

/* 地址／營業時間／交通 卡片：白底浮起 */
.html-info:has(> .container > div:first-child > div[style*="gap:12px"]) > .container > div:nth-child(2) > div:nth-child(2) > div {
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
}

/* 資訊卡＋課程卡：滑過抬起 */
.html-info:has(> .container > div:first-child > div[style*="gap:12px"]) > .container > div:nth-child(2) > div:nth-child(2) > div,
.html-info:has(> .container > div:first-child > div[style*="gap:12px"]) > .container > div:nth-child(2) > div:nth-child(4) > div {
  transition: transform .4s ease, box-shadow .4s ease;
}
.html-info:has(> .container > div:first-child > div[style*="gap:12px"]) > .container > div:nth-child(2) > div:nth-child(2) > div:hover,
.html-info:has(> .container > div:first-child > div[style*="gap:12px"]) > .container > div:nth-child(2) > div:nth-child(4) > div:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(207,153,152,.25) !important;
}

/* 課程卡頂部色條：改用品牌粉色漸層 */
.html-info:has(> .container > div:first-child > div[style*="gap:12px"]) > .container > div:nth-child(2) > div:nth-child(4) > div > div:first-child {
  background: linear-gradient(90deg, #E8CFCF, #DAC8A9) !important;
}

/* 立即預約按鈕：滑過浮起 */
.html-info:has(> .container > div:first-child > div[style*="gap:12px"]) > .container > div:nth-child(2) > div:last-child a {
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease !important;
}
.html-info:has(> .container > div:first-child > div[style*="gap:12px"]) > .container > div:nth-child(2) > div:last-child a:hover {
  transform: translateY(-3px);
  background: #CF9998 !important;
  border-color: #CF9998 !important;
  box-shadow: 0 10px 24px rgba(207,153,152,.35);
}

/* 捲到才浮上（支援的瀏覽器） */
@supports (animation-timeline: view()) {
  .html-info:has(> .container > div:first-child > div[style*="gap:12px"]) > .container > div:nth-child(2) > div:nth-child(2) > div,
  .html-info:has(> .container > div:first-child > div[style*="gap:12px"]) > .container > div:nth-child(2) > div:nth-child(3),
  .html-info:has(> .container > div:first-child > div[style*="gap:12px"]) > .container > div:nth-child(2) > div:nth-child(4) > div {
    animation: am-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .html-info:has(> .container > div:first-child > div[style*="gap:12px"]) * { animation: none !important; transition: none !important; }
}

/* ===== Footer：米色→粉色漸層，配合品牌 - 2026-10-28 ===== */
footer {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #F7F2EC 0%, #EFE3D8 45%, #E8CFCF 100%) !important;
  color: #5A4A3E !important;
}
footer .small-title { color: #3A2E28 !important; letter-spacing: 2px; }
footer li, footer a { color: #5A4A3E !important; }
footer a:hover { color: #A97E3D !important; }
footer .social-link a { color: #9D8260 !important; transition: color .3s ease, transform .3s ease; }
footer .social-link a:hover { color: #CF9998 !important; transform: translateY(-2px); }

/* 隱私權／退換貨／防詐騙 連結：不顯示 */
footer .policy-links { display: none !important; }

/* 版權列：透明，用細線分隔，讓漸層一路到底 */
footer .copyright {
  background: transparent !important;
  border-top: 1px solid rgba(157,130,96,.2);
}
footer .copyright, footer .copyright h5, footer .copyright a { color: #7A5E58 !important; }

/* ===== 手機版：美肌知識列表 — 日期一行、標題一行（太長用「…」），全部靠左 - 2026-10-29 ===== */
/* 改用最單純的區塊排版，不用 grid / -webkit-box，避免 iPhone 把短標題置中 */
@media (max-width: 991px) {
  .index-news li a,
  body.b_news_list .news-list li a {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    padding-right: 56px !important;
  }
  .index-news li a span,
  body.b_news_list .news-list li a span { display: block !important; text-align: left !important; }
}

/* ===== 首頁美肌知識：標題改置中放上方、列表放下方，跟其他區塊同寬同風格 - 2026-10-30 ===== */
body.m_home section:has(.index-news) .row { flex-direction: column !important; }
body.m_home section:has(.index-news) .row > div { flex: 0 0 100% !important; max-width: 100% !important; }
body.m_home section:has(.index-news) .page-title { width: auto !important; margin: 0 0 24px !important; text-align: center !important; }
body.m_home section:has(.index-news) .page-title h2.title { display: block !important; margin: 0 !important; text-transform: none !important; font-family: 'Noto Sans TC','Microsoft JhengHei',sans-serif !important; }
body.m_home section:has(.index-news) .page-title h2.title::before { display: none !important; }
body.m_home section:has(.index-news) .page-title h2.title::after { position: static !important; width: 36px !important; height: 2px !important; background: #9D8260 !important; margin: 10px auto 0 !important; }
body.m_home section:has(.index-news) .page-title h2.title span:first-child { display: block !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 4px !important; color: #9D8260 !important; text-transform: uppercase !important; margin: 0 0 6px !important; }
body.m_home section:has(.index-news) .page-title h2.title span:last-child { font-size: 22px !important; font-weight: 400 !important; letter-spacing: 3px !important; color: #3A2E28 !important; }

/* 電腦版：列表縮窄放正中間，左右空白平均（日期與標題仍從同一條線開始）- 2026-10-30 */
@media (min-width: 992px) {
  body.m_home .index-news,
  body.m_home .index-news-btn { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }
}

/* ===== 首頁 Banner：電腦／平板版裁掉上下空白，高度從 1920×800 變 1920×660 - 2026-10-30 ===== */
/* 圖上的字是做在圖裡的，每張依字的位置調裁切點；手機版（另一組圖）不動 */
@media (min-width: 600px) {
  .index-banner-slider .slick-item img { width: 100% !important; height: auto !important; aspect-ratio: 1920 / 660; object-fit: cover; object-position: center 64%; }
  .index-banner-slider .slick-item picture:has(source[srcset*="c6141d8bce"]) img { object-position: center top; }   /* 專業養膚：頭髮在最上面，從底部裁 */
  .index-banner-slider .slick-item picture:has(source[srcset*="f047344b36"]) img { object-position: center 55%; }   /* 不只短暫乾淨：標題靠上，少裁上面 */
}

/* ===== 首頁常見問題：放寬對齊其他區塊、縮短留白、標題風格統一 - 2026-10-30 ===== */
body.m_home .faq-section { max-width: none !important; background: #F7F2EC !important; border-radius: 20px; padding: 40px 24px 44px !important; }
body.m_home .faq-section .faq-header { margin-bottom: 24px !important; }
body.m_home .faq-section .faq-header::before { content: "FAQ"; display: block; font-size: 12px; letter-spacing: 4px; color: #9D8260; margin-bottom: 6px; }
body.m_home .faq-section .faq-header h2 { font-family: 'Noto Sans TC','Microsoft JhengHei',sans-serif !important; font-size: 22px !important; letter-spacing: 3px !important; margin-bottom: 10px !important; }
body.m_home .faq-section .faq-header h2 strong { font-weight: 400 !important; }
body.m_home .faq-section .deco-line { width: 36px !important; height: 2px !important; background: #9D8260 !important; }
body.m_home .faq-section .faq-list,
body.m_home .faq-section .faq-cta { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }
body.m_home .faq-section .faq-cta { margin-top: 28px !important; }

/* ===== 首頁區塊動態 - 2026-10-30（v17 改用 JS 觸發，所有瀏覽器含舊 iPhone 都看得到）===== */
/* 滑過效果（只在有滑鼠的裝置） */
@media (hover: hover) {
  body.m_home .am-home-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(207,153,152,.22) !important; }
  body.m_home .am-home-card img { transition: transform .6s ease; }
  body.m_home .am-home-card:hover img { transform: scale(1.48) !important; }
  body.m_home a[href="/rf-1299"] img { transition: transform .8s ease; }
  body.m_home a[href="/rf-1299"]:hover img { transform: scale(1.04); }
  body.m_home a[href="/rf-1299"]:not(:has(img)) { transition: background .3s ease, transform .3s ease; }
  body.m_home a[href="/rf-1299"]:not(:has(img)):hover { background: #CF9998 !important; transform: translateY(-2px); }
}
/* 捲到才淡入浮上：追蹤碼「首頁區塊進場動態」會幫區塊加 am-rv，進到畫面再加 am-in；JS 沒跑就照常顯示 */
body.m_home .am-rv { opacity: 0; translate: 0 40px; transition: opacity .9s ease, translate .9s cubic-bezier(.2,.7,.2,1), transform .35s ease, box-shadow .35s ease; }
body.m_home .am-rv.am-in { opacity: 1; translate: none; }

@media (prefers-reduced-motion: reduce) {
  body.m_home .am-rv { opacity: 1; translate: none; transition: none; }
}

/* ===== 關於我們：版面優化（標題風格、圖文置中、米色層次、字級）- 2026-10-30 ===== */
/* 區塊順序：1起源標題 2起源圖文 4理念標題 5理念圖文 7培訓標題 8培訓三欄 10細心標題 11細心照片 12細心三段 14按鈕 */
body.b_about_detail .html-info > .container > .row p { font-size: 16px; line-height: 1.95; color: #5A4A3E; }

/* 標題：統一成首頁風格（小英文＋標題＋咖啡色短線） */
body.b_about_detail .html-info > .container > .row h2 { font-size: 22px !important; letter-spacing: 3px !important; color: #3A2E28; margin: 0 0 10px; }
body.b_about_detail .html-info > .container > .row h2 b { font-weight: 400; }
body.b_about_detail .html-info > .container > .row h2::before { display: block; font-size: 12px; letter-spacing: 4px; color: #9D8260; margin-bottom: 6px; }
body.b_about_detail .html-info > .container > .row:nth-child(1) h2::before { content: "OUR STORY"; }
body.b_about_detail .html-info > .container > .row:nth-child(4) h2::before { content: "PHILOSOPHY"; }
body.b_about_detail .html-info > .container > .row:nth-child(7) h2::before { content: "OUR TEAM"; }
body.b_about_detail .html-info > .container > .row:nth-child(10) h2::before { content: "OUR CARE"; }
body.b_about_detail .html-info > .container > .row h2 + p[style*="border-bottom"] { width: 36px !important; border-bottom-width: 2px !important; margin-bottom: 24px !important; }
/* 培訓引言：縮窄，避免最後只剩一兩個字 */
body.b_about_detail .html-info > .container > .row:nth-child(7) h2 ~ p:not([style*="border-bottom"]) { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }

/* 圖文區：文字垂直置中、照片圓角 */
body.b_about_detail .html-info > .container > .row:nth-child(2),
body.b_about_detail .html-info > .container > .row:nth-child(5) { align-items: center; }
body.b_about_detail .html-info > .container > .row:nth-child(2) img,
body.b_about_detail .html-info > .container > .row:nth-child(5) img,
body.b_about_detail .html-info > .container > .row:nth-child(8) img { width: 100%; height: auto; border-radius: 16px; }
body.b_about_detail .html-info > .container > .row:nth-child(2) .col-md-6 + .col-md-6,
body.b_about_detail .html-info > .container > .row:nth-child(5) .col-md-6:first-child { padding: 12px 40px; }
body.b_about_detail .html-info > .container > .row:nth-child(2) .col-md-6 + .col-md-6 *,
body.b_about_detail .html-info > .container > .row:nth-child(5) .col-md-6:first-child * { font-size: 17px !important; line-height: 2 !important; }

/* 米色層次：「核心理念」和「細心」兩段鋪滿版米色底 */
body.b_about_detail .html-info > .container > .row:nth-child(n+4):nth-child(-n+6),
body.b_about_detail .html-info > .container > .row:nth-child(n+10):nth-child(-n+12) {
  background: #F7F2EC; box-shadow: 0 0 0 100vmax #F7F2EC; clip-path: inset(0 -100vmax);
}
body.b_about_detail .html-info > .container > .row:nth-child(4),
body.b_about_detail .html-info > .container > .row:nth-child(10) { padding-top: 48px; }
body.b_about_detail .html-info > .container > .row:nth-child(6),
body.b_about_detail .html-info > .container > .row:nth-child(12) { padding-bottom: 24px; }

/* 培訓三欄：標題與內文 */
body.b_about_detail .html-info > .container > .row:nth-child(8) h3 { margin: 16px 0 8px; letter-spacing: 2px; }
body.b_about_detail .html-info > .container > .row:nth-child(8) h3 b { font-weight: 400; color: #9D8260; }
body.b_about_detail .html-info > .container > .row:nth-child(8) p,
body.b_about_detail .html-info > .container > .row:nth-child(8) p span { font-size: 15px !important; line-height: 1.9 !important; color: #7A6A60 !important; }

/* 捲動淡入：追蹤碼「首頁區塊進場動態」也會幫這頁加 am-rv / am-in；JS 沒跑就照常顯示 */
body.b_about_detail .am-rv { opacity: 0; translate: 0 40px; transition: opacity .9s ease, translate .9s cubic-bezier(.2,.7,.2,1); }
body.b_about_detail .am-rv.am-in { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) { body.b_about_detail .am-rv { opacity: 1; translate: none; transition: none; } }

/* 手機：圖文區改上下排（照片在上），間距縮小 */
@media (max-width: 991px) {
  body.b_about_detail .html-info > .container > .row:nth-child(2) .col-md-6 + .col-md-6,
  body.b_about_detail .html-info > .container > .row:nth-child(5) .col-md-6:first-child { padding: 20px 15px; }
  body.b_about_detail .html-info > .container > .row:nth-child(5) { flex-direction: column-reverse; }
}
}