@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@600&display=swap');
/* 全站漢堡選單統一規格（張森 2026-10-01：每一頁打開漢堡選單，排版、位置、字體、內容都要一樣）
 * 以首頁為準；本檔放在每頁最後載入，用 ID 選擇器蓋過各頁舊樣式。
 * 開關沿用 common.js 的 .open 類別；面板加寬到 320px，讓長項目不再折成兩行。 */

html body #mobile-overlay.mobile-overlay {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 480;
  background: rgba(23, 19, 15, .28);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
html body #mobile-overlay.mobile-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

html body nav#mobile-menu.mobile-menu {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 490;
  width: min(320px, 86vw);
  max-width: none;
  height: auto;
  margin: 0;
  padding: 80px 28px 120px;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  background: rgba(251, 250, 247, .98);
  border: 0;
  box-shadow: none;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  transform: translateX(105%);
  visibility: hidden;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .3s;
}
html body nav#mobile-menu.mobile-menu.open {
  transform: none;
  visibility: visible;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}

html body nav#mobile-menu.mobile-menu > a {
  display: block;
  margin: 0;
  padding: 14px 14px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: none;
  color: #17140f;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.9;
  text-align: left;
  text-decoration: none;
  white-space: normal;
}
html body nav#mobile-menu.mobile-menu > a:hover,
html body nav#mobile-menu.mobile-menu > a:focus-visible {
  color: #8a6b35;
}

/* 分隔處加小標題「服務項目」，像精品網站一樣把導覽和產品分開（張森 2026-10-01）。
 * 文字寫在這裡一處，全站 22 頁同步；要改字只改這行 content。 */
html body nav#mobile-menu.mobile-menu > .mobile-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  height: auto;
  margin: 26px 0 4px;
  padding: 0 14px;
  border: 0;
  background: transparent;
}
html body nav#mobile-menu.mobile-menu > .mobile-divider::before {
  content: '服務項目';
  color: #8a6b35;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .32em;
  line-height: 1;
  white-space: nowrap;
}
html body nav#mobile-menu.mobile-menu > .mobile-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(23, 20, 15, .12);
}

html body nav#mobile-menu.mobile-menu > a.mobile-cta {
  margin: 16px 0 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: #17140f;
  color: #fffaf2;
  font-size: 15px;
  letter-spacing: .08em;
  text-align: center;
}
html body nav#mobile-menu.mobile-menu > a.mobile-cta:hover,
html body nav#mobile-menu.mobile-menu > a.mobile-cta:focus-visible {
  background: #2b251c;
  color: #fffaf2;
}

/* 選單打開時頁首（Logo＋關閉鈕）一律浮在面板上方，跟首頁一樣 */
html body #topbar.topbar {
  z-index: 500;
}

/* 選單打開時頁首改成淺色底、深色字，Logo 文字與關閉鈕在每一頁都看得清楚 */
html body:has(#mobile-menu.open) #topbar.topbar {
  background: rgba(251, 250, 247, .98);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(23, 20, 15, .08);
}
html body:has(#mobile-menu.open) #topbar.topbar .brand-name-text {
  color: #17140f;
  text-shadow: none;
}
html body #hamburger.hamburger.open .hamburger-lines span {
  background: #17140f;
}

/* 79800 課程頁的頁首是另一套（.c79-topbar），選單打開時一樣改成淺色頁首、Logo 與名稱照常顯示 */
html body .c79-topbar:has(.hamburger.open) {
  background: rgba(251, 250, 247, .98);
  box-shadow: 0 1px 0 rgba(23, 20, 15, .08);
}
html body .c79-topbar:has(.hamburger.open) .brand {
  opacity: 1;
  visibility: visible;
}
html body .c79-topbar:has(.hamburger.open) .brand-name-text {
  color: #17140f;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .12em;
}