@charset "UTF-8";
/* =======================================
 * Core Bundle (V8.0 升級版)
 * ======================================= */
/* * [ V8.0 關鍵變更 ]
 * 1) @use 規則
 * 我們不再需要 _l-03-layout-fix.scss
 * 因為 position: sticky 解決了佈局問題。
 */
/* ==================================================
 * [V15.0 策略性合併版] SASS 核心變數 (Tokens)
 *
 * 1. [V15.0] 採用您偏好的完整色票系統 (NAV COLOR SYSTEM)
 * 2. [V15.0] 採用您偏好的 --header-h: 74px
 * 3. [V9.0] 保留架構所需的 @layer tokens
 * 4. [V9.0] 保留架構所需的 z-index 變數
 * ==================================================
 */
@layer tokens {
  /* [0] 🎯 色票與變數（V15.0） */
  :root {
    --color-dark: #353242;
    --color-cta: #d0d7f1;
    --color-primary-accent: #958985;
    --color-gray-bg: #C4C7CE;
    --color-light-bg: #f1edeb;
    --color-text-dark: #242436;
    --color-text-light: #ede6e2;
    --color-white: #fff;
    --color-border: #e2e2e2;
    /* [V15.0] 採用您偏好的 74px */
    --header-h: 74px;
    --color-section-bg: oklch(95% 0.01 var(--brand-hue));
    --color-card-bg: oklch(100% 0 0);
    --color-card-border: oklch(85% 0.02 var(--brand-hue));
    /* [NAV COLOR SYSTEM] (V15.0) */
    --nav-link: #353242;
    --nav-link-hover: #353242;
    --nav-link-active: #353242;
    --nav-link-muted: #bba896;
    --nav-cta-bg: #d0d7f1;
    --nav-cta-text: #353242;
    --nav-cta-bg-hover: #d0d7f1;
    --nav-cta-text-hover: #353242;
    --mega-bg: #fff;
    --mega-border: #e2e2e2;
    --mega-link: #353242;
    --mega-link-hover: #353242;
    --mega-heading: #353242;
    --mega-separator: #e2e2e2;
    --mega-hover-bg: #f7f7f7;
    --focus-ring: rgb(208 215 241 / 60%);
    /* --- [V9.0-V14.0] 關鍵系統變數 (V15.0 合併) --- */
    /* (保留 V9.0-V14.0 系統架構所需的 z-index) */
    --z-index-header: 1000;
    --z-index-header-nav: 1001; /* 行動版選單 (在 Header 之上) */
    --z-index-dropdown: 1002; /* 桌面版選單 (在 Header 之上) */
  }
}
/* [1] 🧱 全站基礎設定（Base） */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  padding: 0;
  padding-top: var(--header-h);
  background-color: var(--color-light-bg);
  color: var(--color-text-dark);
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: var(--color-primary-accent);
}

a:hover {
  color: var(--color-cta);
}

h1, h2, h3, h4 {
  color: var(--color-dark);
  line-height: 1.3;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-md {
  max-width: 900px;
}

.text-align-center {
  text-align: center;
}

/* ---------- 🧱 區塊 Section ---------- */
.module {
  padding: 60px 0;
}

.module + .module {
  margin-top: 56px;
}

.module-gray {
  background-color: var(--color-gray-bg);
}

.module-dark {
  background-color: var(--color-dark);
  color: var(--color-text-light);
}

.module-dark h1,
.module-dark h2,
.module-dark p {
  color: var(--color-text-light);
}

.module-dark a {
  color: var(--color-cta);
}

@layer layout {
  /* [ V9.0 ] 瀏覽器應自動處理 [hidden]，但可加一層保險 */
  /* [V18.0] 保留：功能性覆寫 */
  [hidden] {
    display: none !important;
  }
  /* [ 🚀 V10.0 補強 ] 鎖定滾動 */
  html.nav-open {
    overflow: hidden;
  }
  /* --- 1. Header 基礎結構 (Mobile & Desktop 共通) --- */
  .global-header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-h);
    z-index: var(--z-index-header);
    display: flex;
    align-items: center;
    margin: 0;
  }
  .global-header nav {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 20px;
  }
  .header-navigation-wrapper {
    flex: 1 1 auto;
    min-width: 0;
  }
  .header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .header-logo img {
    height: 40px !important;
    width: 40px !important;
    max-width: 100%;
  }
  /* --- 2. 行動版導航 (Mobile-First Default) --- */
  .mobile-nav-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-dark);
    margin-left: auto;
    flex-shrink: 0;
  }
  .header-cta {
    display: none;
  }
  .header-nav {
    display: none;
  }
  /* --- 3. [ V18.0 ] 全域按鈕重置 --- */
  .global-header .nav-dropdown-trigger {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    font: inherit;
    line-height: inherit;
    color: var(--nav-link, #353242);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    text-align: left;
    display: inline-block;
  }
  .header-nav > li {
    display: flex;
    align-items: center;
  }
  /* 頂層選單的 Hover / Focus 效果 */
  .header-nav > li > a:hover,
  .header-nav > li > a:focus-visible,
  .header-nav > li > a.active,
  .dropdown:hover > .nav-dropdown-trigger,
  .nav-dropdown-trigger:focus-visible,
  .nav-dropdown-trigger[aria-expanded=true],
  .header-cta:hover,
  .header-cta:focus-visible {
    color: var(--nav-link-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  /* 統一的 Focus 樣式 */
  .header-nav a:focus-visible,
  .nav-dropdown-trigger:focus-visible,
  .header-cta:focus-visible,
  .mobile-nav-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
  }
  /* --- 4. 行動版 L1 選單開啟狀態 (Mobile State: .is-open) --- */
  .header-nav.is-open {
    display: block;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    width: 100%;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    z-index: var(--z-index-header-nav);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding-bottom: 20px;
    list-style: none;
    margin: 0;
    padding-left: 0;
  }
  .header-nav.is-open > li > a:hover,
  .header-nav.is-open > li > .nav-dropdown-trigger:hover {
    background-color: #f0f0f0;
  }
  .header-cta-mobile {
    display: list-item !important;
    border-bottom: none !important;
    padding: 0;
  }
  /* --- 5. [ V18.0 ] RWD 響應式樣式重構 --- */
  /* ===== 5.1) 手機版：條目與 CTA 全部左齊 (V18.0) ===== */
  @media (max-width: 992px) {
    .global-header .header-nav {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .global-header .header-nav > li {
      border-bottom: 1px solid var(--color-border, #eee);
      padding: 0;
    }
    .global-header .header-nav a,
    .global-header .nav-dropdown-trigger {
      display: block;
      width: 100%;
      text-align: left;
      padding: 16px 24px;
      text-decoration: none;
      color: var(--nav-link);
    }
    .global-header .header-nav .header-cta-mobile > a {
      display: block;
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 16px 24px;
      background: transparent;
      color: var(--nav-link);
      border: 0;
      border-radius: 0;
      box-shadow: none;
      text-align: left;
      font-weight: 600;
      text-decoration: none;
    }
    .global-header .header-nav .header-cta-mobile {
      border-bottom: 1px solid var(--color-border, #eee);
    }
    .global-header .header-cta-mobile a:hover {
      background: #f0f0f0;
    }
    /* === [ V18.0 ] 行動版 L2 === */
    .global-header .dropdown-menu,
    .global-header .megamenu-container {
      position: static;
      width: 100%;
      margin: 0;
      padding: 0;
      box-shadow: none;
      background: var(--mega-bg, #fff);
      border-top: 1px solid var(--color-border, #eee);
      border-bottom: none;
      padding-left: 0;
    }
    .global-header .dropdown-menu ul,
    .global-header .megamenu-container ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .global-header .dropdown-menu li,
    .global-header .megamenu-container li {
      border-bottom: 1px solid var(--color-border, #eee);
    }
    .global-header .dropdown-menu a,
    .global-header .megamenu-container a {
      display: block;
      padding: 16px 32px;
      text-align: left;
      color: var(--mega-link, inherit);
      text-decoration: none;
      border-bottom: none;
    }
    .global-header .dropdown-menu li:last-child,
    .global-header .megamenu-container li:last-child {
      border-bottom: none;
    }
    .global-header .dropdown-menu,
    .global-header .megamenu-container {
      border-left: none;
      border-right: none;
    }
  }
  /* ===== 5.2) 桌面版：(V18.0 / V22.0 修復) ===== */
  @media (min-width: 993px) {
    .header-navigation-wrapper {
      display: flex;
      align-items: center;
      gap: 25px;
      margin-left: auto;
      margin-right: auto;
      flex: 0 1 auto;
      min-width: auto;
    }
    .mobile-nav-toggle {
      display: none;
    }
    .header-cta {
      display: inline-flex;
      align-items: center;
      color: var(--nav-cta-text);
      background: var(--nav-cta-bg);
    }
    .header-cta-mobile {
      display: none !important;
    }
    .header-nav,
    .header-nav.is-open {
      display: flex !important;
      align-items: center;
      gap: 25px;
      position: static;
      border-top: none;
      box-shadow: none;
      max-height: none;
      overflow: visible;
      background: none;
      width: auto;
      padding-bottom: 0;
    }
    .global-header .header-nav > li {
      border: 0;
      display: flex;
      align-items: center;
    }
    .global-header .header-nav a,
    .global-header .nav-dropdown-trigger {
      display: inline-block;
      padding: 0;
      vertical-align: middle;
      text-decoration: none;
      width: auto;
      border-bottom: none;
      color: var(--nav-link);
    }
    .header-nav > li > a:hover,
    .header-nav > li > .nav-dropdown-trigger:hover {
      background: none;
      color: var(--nav-link-hover);
    }
    .dropdown {
      position: relative;
    }
    /*
     * =========================================
     * [!!] V22.0 變更 (修復懸停隧道)
     * 1. 移除 'display: none'
     * 2. 依賴 'visibility' 和 'opacity'
     * =========================================
     */
    .dropdown-menu {
      /* [V22.0] 移除 display: none; */
      position: absolute;
      top: calc(100% + 8px); /* 製造 8px 空隙 */
      left: 10%;
      z-index: var(--z-index-dropdown);
      width: max-content;
      min-width: 260px;
      padding: 16px 24px;
      background: var(--mega-bg, #fff);
      border: 1px solid var(--mega-border, #eee);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      border-radius: 10px;
      /* [V22.0] 初始狀態：隱藏 */
      opacity: 0;
      visibility: hidden;
      transform: translate(-10%, -10px); /* X居中, Y上移 (準備落下) */
      /* [V22.0] 懸停隧道 (A) - 隱藏時延遲 visibility */
      transition: visibility 0s 0.2s, opacity 0.2s ease, transform 0.2s ease;
    }
    /* [V22.0] 關鍵：
     * 覆蓋 L6 的 [hidden] { display: none !important; }
     * 確保 JS 隱藏的選單在桌面版仍可被 :hover 觸發
     */
    .dropdown-menu[hidden] {
      display: block !important;
      /* 保持隱藏狀態，直到 :hover */
      opacity: 0;
      visibility: hidden;
    }
    /* [V22.0] 統一 Megamenu 內連結樣式 */
    .dropdown-menu li + li {
      margin-top: 12px;
    }
    .dropdown-menu a {
      display: block;
      padding: 0;
      white-space: nowrap;
      color: var(--mega-link);
      border-radius: 0;
      border-bottom: none;
      text-decoration: none;
    }
    .dropdown-menu a:hover {
      color: var(--mega-link-hover);
      background: var(--mega-hover-bg, transparent);
      text-decoration: underline;
    }
    /* [V22.0] :hover 狀態 (移除 display: block) */
    .dropdown:hover > .dropdown-menu {
      /* [V22.0] 移除 display: block !important; */
      opacity: 1;
      visibility: visible;
      transform: translate(-10%, 0); /* X居中, Y歸位 */
      /* [V22.0] 懸停隧道 (B) - 顯示時重設延遲 */
      transition-delay: 0s;
    }
  } /* 結束 @media (min-width: 993px) */
  /* === [ V20.0 恢復 V17.0 策略性覆寫 ] === */
  .global-header .header-nav a,
  .global-header .header-nav .nav-dropdown-trigger,
  .global-header .header-cta,
  .global-header .header-cta-mobile a,
  .global-header .dropdown-menu a,
  .global-header .megamenu-container a {
    color: var(--nav-link, #353242) !important;
  }
  .global-header .header-nav a:hover,
  .global-header .header-nav a:focus-visible,
  .global-header .nav-dropdown-trigger:hover,
  .global-header .nav-dropdown-trigger:focus-visible,
  .global-header .dropdown-menu a:hover,
  .global-header .megamenu-container a:hover {
    color: var(--nav-link-hover, #353242) !important;
    background-color: var(--mega-hover-bg, transparent) !important;
  }
  .global-header {
    /* [V22.0] 修正：僅 L2 連結在 hover 時有 underline */
  }
  .global-header .dropdown-menu a:hover,
  .global-header .megamenu-container a:hover {
    text-decoration: underline;
  }
  .global-header {
    /* active 狀態一併重置 */
  }
  .global-header .header-nav .active > a,
  .global-header .header-nav a.active,
  .global-header .dropdown-menu .active > a,
  .global-header .megamenu-container .active > a {
    color: var(--nav-link-active, #353242) !important;
  }
} /* 結束 @layer layout */
/* ---------- 🦶 頁尾 Footer ---------- */
.global-footer {
  background-color: var(--color-dark);
  color: var(--color-text-light);
  padding: 60px 0 30px;
  margin-top: 60px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

@media (min-width: 992px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.footer-col h4 {
  color: var(--color-white);
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: var(--color-text-light);
}

.footer-links a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

/* * [ 🚀 結構調整 ]：
 * 將 .social-links 移至 .footer-links 旁邊，
 * 修復 no-descending-specificity 錯誤。
 */
.social-links {
  display: flex;
  gap: 20px;
}

.social-links a {
  color: var(--color-white);
  font-size: 1.2rem;
}

.footer-social-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  border-top: 1px solid #3E3E3E;
  padding-top: 30px;
  margin-top: 40px;
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .footer-social-bar {
    flex-direction: row;
    justify-content: space-between;
  }
}
/* [ 🚀 V8.0 ] _l-03-layout-fix 已被移除 */
/* @use '2-layout/_l-03-layout-fix'; */
/* 🔘 按鈕 */
.button {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button-primary {
  background-color: var(--color-cta);
  color: var(--color-dark);
  box-shadow: 0 4px 15px rgba(230, 175, 46, 0.3);
}

.button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(230, 175, 46, 0.4);
}

.button-secondary {
  background-color: var(--color-white);
  color: var(--color-primary-accent);
  border: 2px solid var(--color-primary-accent);
}

.button-secondary:hover {
  background-color: var(--color-primary-accent);
  color: var(--color-white);
}

/* 🧩 通用 Card 元件：.c-card
   - 基本卡片外觀
   - 可透過 modifier / 元素組合在各頁使用
*/
.c-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: flex-start;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

/* 兩欄版型：左右分割的卡片（價目表、妝髮等共用） */
.c-card--split {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .c-card--split {
    grid-template-columns: 45fr 55fr;
    padding: 40px;
  }
}
/* 內容區（文字區） */
.c-card__body {
  /* 預留給未來共用設定，例如 padding / typography */
}

/* 媒體區（圖片網格） */
.c-card__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.c-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* 標題 */
.c-card__title {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 2rem;
  color: var(--color-dark);
}

/* 價格區塊（給所有價格卡共用） */
.c-card__price {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary-accent);
  margin: 0;
}

.c-card__price-unit {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-subtle);
}

/* 額外標籤（例如學生價、限時優惠） */
.c-card__price-tag {
  margin-top: 10px;
  margin-bottom: 20px;
  display: inline-block;
  font-size: 1rem;
  font-weight: 500;
}

.c-card__price-tag--student {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-primary-accent);
  background: #fff9f5;
  padding: 5px 10px;
  border-radius: 5px;
}

/* 🧍‍♂️ 左右分欄（layout-split） */
.layout-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (width >= 768px) {
  .layout-split {
    grid-template-columns: 1fr 1fr;
  }
  .layout-split.image-right .layout-split-image {
    order: 2;
  }
}
.layout-split-image img {
  width: 100%;
  border-radius: 12px;
}

/* 💬 社群證明（Social Proof） */
.social-proof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 30px 0;
}

@media (width >= 768px) {
  .social-proof-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.social-proof-grid img {
  width: 100%;
  border-radius: 8px;
}

@layer components {
  .module {
    padding-block: clamp(2rem, 4vw, 4rem);
  }
  .module-gray {
    background: var(--surface-2);
    border-radius: var(--radius-3);
  }
  .module-dark {
    background: var(--surface-3);
    color: var(--text-on-dark);
  }
  /* Prose：文章節奏 */
  .prose {
    max-inline-size: 70ch;
    margin-inline: auto;
    line-height: 1.7;
    letter-spacing: 0.01em;
  }
  .prose h1, .prose h2, .prose h3 {
    margin-block: clamp(1rem, 2vw, 1.5rem) 0.5em;
    line-height: 1.2;
  }
  .prose p {
    margin-block: 0.75em;
    font-size: clamp(1rem, 0.4vw + 1rem, 1.125rem);
  }
  .prose blockquote {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-2);
    font-style: italic;
  }
  /* Split layout：用容器查詢控制欄數 */
  .split {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
    align-items: center;
  }
  @container (min-width: 50rem) {
    .split {
      grid-template-columns: 1.1fr 0.9fr;
    }
  }
  @container (min-width: 50rem) {
    .split.image-right {
      grid-auto-flow: column;
    }
  }
  .split-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-2);
  }
  /* Portfolio Grid：自適應欄寬、等距縮圖 */
  .portfolio-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }
  .portfolio-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-1);
  }
  /* CTA 區與按鈕群組 */
  .cta {
    text-align: center;
  }
  .btn-row {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
    justify-items: center;
    margin-top: var(--space-4);
  }
  @container (min-width: 34rem) {
    .btn-row {
      grid-template-columns: repeat(2, minmax(12rem, 1fr));
    }
  }
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-3);
    font-weight: 600;
    text-decoration: none;
    outline-offset: 2px;
  }
  .button-primary {
    background: var(--accent);
    color: var(--text-on-accent);
  }
  .button-secondary {
    background: var(--surface-1);
    border: 1px solid var(--border);
    color: var(--text-strong);
  }
  .button:focus-visible {
    outline: 3px solid var(--focus);
  }
}
.team-grid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .team-grid.team-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .team-grid.team-grid-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

.team-card {
  display: block;
  text-decoration: none;
  color: inherit;
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.team-card:hover, .team-card:focus {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.team-card .team-card-image img {
  display: block;
  width: 100%;
  height: auto;
  background-color: #f4f4f4;
}
.team-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0.75rem 0 0.25rem;
}
.team-card .team-title {
  font-size: 0.9rem;
  color: #555;
  margin: 0;
}

.text-center {
  text-align: center;
}

.layout-split-founder {
  grid-template-columns: 30% 1fr;
  align-items: start;
}

@media (min-width: 1024px) {
  .grid-container-3of5 {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
}

@layer pages {
  .page-graduation {
    --hero-pad: clamp(3rem, 6vw, 6rem);
  }
  .page-graduation .page-hero {
    padding-block: var(--hero-pad);
    background: var(--surface-3);
    color: var(--text-on-dark);
  }
  .page-graduation .intro {
    text-align: center;
  }
  .page-graduation .quotes {
    padding: clamp(1.5rem, 3vw, 2.5rem);
  }
}
/*
 * =======================================
 * 🎨 [頁面] 妝髮服務介紹 (p-guide-makeup)
 * * [ 🚀 V13 重構版 - 圖片自適應 & 頁首修正 ]
 * 策略：
 * 1. 圖片：移除 `aspect-ratio` 和 `object-fit`，讓圖片自然呈現直式。
 * - 圖片容器不再強制長寬比，由圖片內容撐開。
 * - Desktop 時圖片靠右對齊，並限制最大寬度。
 * 2. 頁首：調整 `page-hero` 的內距和最大寬度，避免文字在手機上跑版。
 * 3. 100% 複用 V11 的 HTML 結構。
 * =======================================
 */
/* --- 1. 頁面內容基礎 (與 V12 相同) --- */
.page-content h3 {
  margin-top: 40px;
  border-bottom: 2px solid var(--color-cta);
  padding-bottom: 8px;
}

.page-content h4 {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--color-dark);
  font-size: 1.5rem;
}

.page-content p {
  margin-bottom: 16px;
  line-height: 1.7;
}

.page-content hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 40px 0;
}

/* --- 2. 頁首修正 (Image 2 跑版修正) --- */
/*
 * [ 🚀 V13 頁首修正 ]：
 * 調整頁首內距和最大寬度，確保文字在小螢幕上不會擠壓。
 */
.module.page-hero {
  padding: 80px 20px; /* 增加左右內距 */
}

.module.page-hero .container {
  max-width: 800px; /* 限制頁首內容最大寬度 */
}

@media (max-width: 767px) { /* 手機板加強 */
  .module.page-hero {
    padding: 60px 15px; /* 手機版內距可以更小一點 */
  }
  .module.page-hero h1 {
    font-size: 2rem; /* 手機版標題字體縮小 */
  }
  .module.page-hero .subtitle {
    font-size: 1rem; /* 手機版副標題字體縮小 */
  }
}
/* --- 3. 服務方案列表 (與 V12 相同) --- */
.service-package-list {
  display: flex;
  flex-direction: column;
  gap: 30px; /* 卡片間距 */
  margin-top: 30px;
}

/* --- 4. 服務方案 (Mobile-First Stack - 與 V12 相同) --- */
.service-package {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 單欄 */
  border: 1px solid var(--color-border);
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* --- 5. 網格區域 (Mobile) --- */
.package-header {
  padding: 24px 24px 20px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

/* * [ 🚀 V13 圖片更新 ]
 * 1. 圖片容器 `package-image-placeholder` 不再有 `aspect-ratio` 或 `background-color`。
 * 2. 讓圖片本身撐開容器空間。
 * 3. 圖片居中顯示。
 */
.package-image-placeholder {
  /* 移除 Mobile 的 border-top，因為現在圖片自己有邊框 */
  border-top: none;
  text-align: center; /* 讓圖片在容器中居中 */
  padding: 0 24px 24px 24px; /* Mobile 時，上下左右預留空間 */
}

.package-image-placeholder picture,
.package-image-placeholder img {
  /* 圖片不再強制 100% 高度 */
  width: 100%; /* 寬度仍然填滿容器 */
  height: auto; /* 高度自適應，保持原始比例 */
  display: block;
  /* [ 🚀 V13 關鍵 ] 移除 object-fit */
  object-fit: unset; /* 或直接移除這行 */
  border-radius: 8px; /* 圖片本身給予圓角，模擬舊有容器的圓角效果 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 圖片增加輕微陰影 */
}

.package-content-wrapper {
  padding: 24px;
  border-top: 1px solid var(--color-border); /* Mobile 時，內容區上方仍然有分隔線 */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* --- 6. 內部元件 (與 V12 相同) --- */
.package-meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-shrink: 0;
}

.package-meta .price {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary-accent);
}

.package-meta .duration {
  font-size: 1rem;
  color: var(--color-text-dark);
  background: var(--color-light-bg);
  padding: 2px 8px;
  border-radius: 4px;
}

.arrival-note {
  font-size: 0.9rem;
  background: var(--color-light-bg);
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--color-text-dark);
  margin-bottom: 20px; /* 增加與下方文字的間距 */
}

.package-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: auto;
  padding-top: 24px;
}

.package-details ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.package-details li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.package-details li::before {
  position: absolute;
  left: 0;
  top: 4px;
  font-size: 1rem;
  font-weight: 700;
}

.includes li {
  color: var(--color-text-dark);
}

.includes li::before {
  content: "✓";
  color: #28a745;
}

.excludes li {
  color: #888;
  text-decoration: line-through;
}

.excludes li::before {
  content: "✕";
  color: #dc3545;
}

.excludes:empty {
  display: none;
}

/* --- 7. 響應式 (Desktop) --- */
@media (min-width: 992px) {
  .service-package {
    grid-template-columns: 2fr 1fr;
  }
  .package-header {
    grid-column: 1/span 2;
    grid-row: 1;
    border-bottom: 1px solid var(--color-border);
  }
  .package-content-wrapper {
    grid-column: 1;
    grid-row: 2;
    border-top: none;
    height: 100%;
  }
  /* * [ 🚀 V13 圖片更新 - Desktop ]
   * 1. 圖片容器 `package-image-placeholder` 靠右對齊，並給予固定左右內距。
   * 2. 圖片本身限制最大寬度，並移除陰影和圓角（這些是針對 Mobile 用的）。
   */
  .package-image-placeholder {
    grid-column: 2;
    grid-row: 2;
    border-left: 1px solid var(--color-border);
    padding: 24px; /* 重新定義內距 */
    text-align: right; /* 圖片靠右對齊 */
    align-self: start;
  }
  .package-image-placeholder picture,
  .package-image-placeholder img {
    max-width: 300px; /* 桌面模式下，圖片最大寬度限制為 150px */
    border-radius: 0; /* 桌面模式下圖片不需要圓角 */
    box-shadow: none; /* 桌面模式下圖片不需要陰影 */
    margin-left: auto; /* 靠右對齊的關鍵 */
  }
}
@media (max-width: 420px) {
  .package-details {
    grid-template-columns: 1fr;
  }
}
/*
 * =======================================
 * 🎨 [頁面] 內容頁面 (寵物/全家福/醫師袍)
 * =======================================
 */
/* --- 1. 介紹文字區塊 --- */
.content-intro {
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 50px;
  max-width: 750px; /* 限制最大寬度，使其更易閱讀 */
  margin-inline: auto; /* 水平置中 */
  color: var(--color-text-dark);
  line-height: 1.7;
  /* 第一段文字稍微放大，作為引言 */
}
.content-intro p:first-of-type {
  font-size: 1.15rem;
  color: var(--color-dark);
  font-weight: 500;
}
.content-intro {
  /* 強調的文字 */
}
.content-intro strong {
  color: var(--color-primary-accent); /* 使用主題色 */
  font-weight: 600;
}

/* --- 2. 圖文分離 (雙欄) --- */
.layout-split {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 單欄 */
  gap: 30px;
  align-items: center;
  margin-top: 40px;
  /* Desktop: 雙欄 */
}
@media (min-width: 768px) {
  .layout-split {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}
.layout-split {
  /* 圖片在左側的變化 */
}
@media (min-width: 768px) {
  .layout-split.image-left .layout-split-image {
    order: -1; /* 將圖片順序提前 */
  }
}

.layout-split-image {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
.layout-split-image img {
  width: 100%;
  height: auto; /* [修改] 改為 auto，讓高度依比例自動調整 */
  object-fit: unset; /* [修改] 移除 cover 裁切 */
  display: block;
}

.layout-split-text h2 {
  margin-top: 0;
  font-size: 1.8rem;
  color: var(--color-dark);
  margin-bottom: 16px;
}
.layout-split-text p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 16px;
}
.layout-split-text strong {
  color: var(--color-dark);
}

/* --- 3. 內容圖片格線 (3張圖) --- */
.content-image-grid {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 單欄 */
  gap: 15px;
  margin-top: 30px;
  /* Tablet: 雙欄 */
}
@media (min-width: 500px) {
  .content-image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.content-image-grid {
  /* Desktop: 三欄 */
}
@media (min-width: 768px) {
  .content-image-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.content-image-grid .grid-image {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  aspect-ratio: unset; /* [修改] 移除 1:1 的正方形比例限制 */
}
.content-image-grid .grid-image img {
  width: 100%;
  height: auto; /* [修改] 改為 auto，讓高度依比例自動調整 */
  object-fit: unset; /* [修改] 移除 cover 裁切 */
  display: block;
}

/* * 2) @layer 宣告層級順序
 */
@layer reset, tokens, base, layout, components, pages, utilities;