/* ============================================================
   site-chrome.css —— 全站共用「外框」樣式
   ------------------------------------------------------------
   頂欄（nav）／下拉選單（dd）／漢堡抽屜（drawer）／頁尾（footer）
   四頁共用一份。原本這些規則住在 site.css 裡，而 what_is_erp.html
   （設計系統的語域例外頁）不能載 site.css —— 它會把 .hero / .btn /
   .wrap / .chip / .center 等同名 class 打進來（.center 尤其致命：
   site.css 尾段 diagram 的 .center 是「中央圓」，會令本頁 5 個
   .sec-head.center 塌成 160px 藍色圓形）。
   所以把它們抽出來獨立成檔：四頁都載它，site.css 不再持有這一段。

   本檔由 _chrome_split.py 從切分前的 site.css 產生；此後就是手改的
   權威檔（跟 site.css 一樣），改完用 _chrome_check.py 驗證。
   色值已把 site.css 的舊名別名（--surf / --tx / --blue…）還原成
   ds.css 的語意 token（--surface / --text / --accent…），
   這樣不載 site.css 的頁面也能正確解析。

   載入順序：ds.css → site-chrome.css → site.css。
   必須排在 site.css 之前，讓 site.css 裡剩下的響應式規則（媒體查詢
   內的 .nav / .dd / .drawer）仍然勝出。

   ⚠ 改 site.css 的 nav / 下拉 / drawer / footer 時要同步這裡；
     重跑 _chrome_check.py 檢查。
   ============================================================ */

/* ============================================================
   頂部導航 ＋ 漢堡抽屜 ＋ 頁尾 —— CSS 與主站 index.html 一致
   ------------------------------------------------------------
   以下規則原文取自 assets/css/site.css 的 nav / 下拉 / drawer / footer 區塊。
   為了讓本頁（不載 site.css）也能用，只做了四處調整：
     1. 舊名別名還原成 ds.css 的語意 token（--surf→--surface、--tx→--text、
        --blue→--accent…）。本頁的 :root 已經有 --line / --red / --amber
        這幾個茶餐廳色票，不能再引入 site.css 的同名別名。
     2. 按鈕規則加 .nav / .dd-foot 前綴 —— 本頁自己的 .btn-primary /
        .btn-ghost / .btn-gold 是另一套按鈕，不能被主站的 .btn 蓋到。
     3. .nav-in 的寬度沿用本頁自己的 .wrap（max-width 1080px），
        所以標記要寫 class="nav-in wrap"，與 index.html 的結構一致。
     4. 補回 chrome 從 body 繼承的排版值（主站的 body 與本頁不同，
        見下方「chrome 的繼承值」註解）。
   色值全部來自 ds.css（本頁以 data-theme="dark" 取得深色主題），不寫死色碼。
   ⚠ 改主站 site.css 的 nav / 下拉 / drawer / footer 時，這一整段要同步 ——
     重跑 _pgchrome.py 即可（它是冪等的，會就地換掉這一整段）。
   ============================================================ */

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  height: var(--nav-h);
  z-index: 90;
  background: var(--topbar-bg);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background .4s var(--ease);
}
.nav.scrolled { background: var(--bg); }
.nav-in {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 820;
  letter-spacing: .01em;
  color: var(--text);
  font-size: 1.02rem;
}
.brand .mk {
	width: 26px;
	height: 26px;
	border-style: solid;
	border-color: #be111f;
	border-width: 8px;
	display: grid;
	place-items: center;
	font-size: .72rem;
	font-weight: 900;
	color: var(--on-accent);
	box-shadow: 0 6px 18px -8px var(--accent);
	justify-content: center;
	font-size: 1rem;
	transform: rotate(12deg);
}
.brand small {
  display: block;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--text-3);
  margin-top: -3px;
}
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  position: relative;
  padding: 9px 13px;
  border-radius: 8px;
  font-size: .87rem;
  font-weight: 600;
  color: var(--text-2);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-links a.on { color: var(--text); }
.nav-links a.on::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  animation: navIn .35s var(--ease);
}
@keyframes navIn { from { transform: scaleX(0); opacity: 0 } }
.nav-r { display: flex; align-items: center; gap: 10px; }
/* 這裡原本把 .btn-p 硬改成白底，現在讓它沿用設計系統的主色定義 */

.burger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  padding: 11px 10px;
}
.burger span {
  display: block;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .25s;
}
.burger span + span { margin-top: 5px; }
.burger.x span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.x span:nth-child(2) { opacity: 0; }
.burger.x span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.prog {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px var(--accent);
}

/* ---------- 頂欄／下拉卡片內的按鈕（主站規格）----------
   本頁的 .btn-primary / .btn-ghost / .btn-gold 是茶餐廳語域的另一套按鈕，
   所以這裡全部加 .nav / .dd-foot 前綴，只作用在頂欄與下拉卡片內。 */
.nav .btn,
.dd-foot .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: transparent;
  color: var(--text);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  transition: transform .35s var(--ease), background .3s var(--ease),
    border-color .3s var(--ease), box-shadow .35s var(--ease), color .3s var(--ease);
  will-change: transform;
}
.nav .btn:hover,
.dd-foot .btn:hover { transform: translateY(-3px); }
.nav .btn:active,
.dd-foot .btn:active { transform: translateY(-1px); }
.nav .btn-p,
.dd-foot .btn-p {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.nav .btn-p:hover,
.dd-foot .btn-p:hover { box-shadow: 0 14px 34px -12px var(--accent-line); }
.nav .btn-g,
.dd-foot .btn-g { background: var(--surface); }
.nav .btn-g:hover,
.dd-foot .btn-g:hover { border-color: var(--border-2); background: var(--surface-2); }
.nav .btn-sm,
.dd-foot .btn-sm { min-height: 40px; padding: 8px 16px; font-size: .84rem; }
/* 頂欄那顆 CTA 沒有 .btn-sm，這一條放最後把 50px 收回 40px（與主站同序） */
.nav .btn { min-height: 40px; padding: 8px 18px; font-size: .85rem; }

/* ---------- nav 下拉選單（全部頁面）----------
   取代原本的 mega menu。mega 是「8 頁 × 全部段落 anchor」的全寬五欄面板；
   站上現在只剩 4 頁，所以改成由按鈕拉下來的右對齊卡片 —— 資訊量一樣，
   但視覺上收成一個下拉，不再佔滿第二層導覽。
   面板掛在 .nav 裡面（.nav 是 position:fixed，面板用 top:100% 貼在它下緣），
   這樣它會跟著 header 一起移動，不必另外算高度。
   ≤900px 交給 .burger / .drawer，所以下面在 900px 斷點整組收掉。 */
.dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  color: var(--text-2);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 650;
  letter-spacing: .01em;
  cursor: pointer;
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.dd-btn:hover { color: var(--text); border-color: var(--accent); }
.dd-btn[aria-expanded="true"] {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dd-btn .cv {
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .3s var(--ease);
}
.dd-btn[aria-expanded="true"] .cv { transform: rotate(-135deg) translate(-2px, -2px); }

.dd {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* 外層只負責定位，本身不吃事件 —— 否則這條滿版、透明的帶狀區域會蓋住
     下方頁面，令卡片左邊的空白處點不到東西。卡片自己再開 pointer-events:auto。
     用 visibility 而不是 display:none —— 收合時面板內的連結會自動退出 tab 順序，
     但仍然留在 DOM 裡（搜尋引擎照樣爬得到），而 opacity / transform 的過場也能運作。 */
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s var(--ease);
}
.dd.open { visibility: visible; opacity: 1; transform: translateY(0); }

.dd-panel {
  pointer-events: auto;
  margin: 10px 0 0 auto;
  max-width: 940px;
  padding: 22px 26px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 30px 60px -30px var(--scrim);
  max-height: calc(100vh - var(--nav-h) - 26px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dd-in {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 22px;
  align-items: start;
}
.dd-col > .dd-hd {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* 欄目標題本身是連結，但它是 inline-flex，盒高只等於文字行高（約 23px）。
     靠 WCAG 2.5.8 的「間距例外」是過關的（下方 .dd-sub 拉開了距離），
     不過直接撐到 24px 更穩健 —— 不必倚賴豁免條款。 */
  min-height: 24px;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: -.01em;
  color: var(--text);
}
.dd-col > .dd-hd i { font-style: normal; color: var(--accent); transition: transform .3s var(--ease); }
.dd-col > .dd-hd:hover i { transform: translateX(4px); }
/* 「你正在這一頁」：只標在欄目標題上（一欄一個），不標各段落連結 ——
   同一頁的段落連結會一次亮起好幾條，反而看不出重點。 */
.dd-col > .dd-hd.cur { color: var(--accent); }
.dd-sub {
  margin: 6px 0 9px;
  font-size: .73rem;
  line-height: 1.5;
  color: var(--text-3);
}
.dd-col ul { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.dd-col ul a {
  display: block;
  padding: 6px 9px;
  margin-left: -9px;
  border-radius: 7px;
  font-size: .85rem;
  color: var(--text-2);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.dd-col ul a:hover { color: var(--text); background: var(--surface-2); }

.dd-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 16px 0 20px;
  border-top: 1px solid var(--border);
}
.dd-foot .t {
  margin-right: 6px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* 觸控裝置：面板連結要撐到 --tap（與 .nav-links a 同一條規則同一個數值） */
@media (pointer: coarse) {
  .dd-btn { min-height: var(--tap); }
  .dd-col ul a {
    min-height: var(--tap);
    display: flex;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dd, .dd-btn, .dd-btn .cv, .dd-col > .dd-hd i { transition: none; }
}

.drawer {
  position: fixed;
  inset: var(--nav-h) 0 auto;
  z-index: 89;
  background: var(--surface);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px 26px;
  display: grid;
  gap: 2px;
  transform: translateY(-14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.drawer.open { opacity: 1; transform: none; pointer-events: auto; }
.drawer a {
  padding: 13px 6px;
  font-weight: 650;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.drawer a small { display: block; color: var(--text-3); font-weight: 500; font-size: .76rem; }

/* ---------- footer ---------- */
footer { padding: 4px 0 34px; background: var(--bg); }
/* ⚠ 這裡原本還有一條 `.f-grid { 1.6fr 1fr 1fr 1fr / gap:40px }`。
   它住在 site.css 的 footer 段落，但四頁的 footer 標記都沒有 .f-grid
   （footer 只有 <div class="wrap"><div class="f-btm">），所以對 footer 是死碼；
   它唯一的實際效果是「在 site.css 裡排在表單那條 .f-grid 之後，把它蓋掉」——
   contact.html 的表單 grid 因此意外變成 gap:40px。
   搬進本檔會令載入順序反轉（本檔在 site.css 之前），那條就會落敗，
   contact 表單會少 168px 高。所以它留在 site.css 的原位置，
   見 site.css「form」段落後面的 .f-grid 與其註解。 */
footer h5 { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: 0 0 16px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
footer ul a { color: var(--text-2); font-size: .9rem; transition: color .25s var(--ease), transform .25s var(--ease); display: inline-block; }
footer ul a:hover { color: var(--text); transform: translateX(3px); }
.f-btm {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--text-3);
}

/* ---------- chrome 的繼承值（只補在 .pg-erp 這一頁）----------
   上面那些 chrome 規則與 site.css 逐字相同，都靠「繼承」拿排版值。
   四頁裡只有 what_is_erp.html 不載 site.css，它的 body 是設計系統自己的
   基準，與主站不同：
     主站 index（site.css line 66）body = var(--font) / 16.5px / 1.7 / .01em / color var(--tx)
     what_is_erp（<body class="pg-erp">）body = var(--sans) / 17px / 1.85 / 一般 / color var(--ink)
   （17px、1.85 是茶餐廳內文要的呼吸感，不能動。）
   不補的話該頁 chrome 會與主站有落差，實測：
     ‧ .nav-links a 高 43.75px（主站 41.66px）
     ‧ 下拉面板整體高約多 1px
     ‧ --ink 深棕落在 --topbar-bg（深色）上，對比不足
   所以只在 <body class="pg-erp"> 底下把主站的值還原。

   ⚠ 一定要 scope 在 .pg-erp 內，不可無條件套用。site.css 的響應式段落有
     `@media (max-width:900px){ body{font-size:16px} }`，index/cost/contact
     的 chrome 就是靠繼承拿到 16px；在這裡寫死 16.5px 會蓋掉那個繼承，
     令三頁手機版抽屜每條連結都高 1px（實測 48.19px → 49.05px）。
   footer 是 class="light"，var(--text) 會自動解析成淺色主題的深字，
   與 index 一致。 */
.pg-erp .nav, .pg-erp .dd, .pg-erp .drawer, .pg-erp footer {
  color: var(--text);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.7;
  letter-spacing: .01em;
}

/* 主站 site.css line 80：button, input, select, textarea { font: inherit; color: inherit; }
   what_is_erp 的 button reset 只寫了 font-family:inherit，沒有把 font-size / line-height
   一併繼承，於是 chrome 裡的 <button> 會沿用 UA 的 13.3333px / line-height:normal
   （實測 .dd-btn 40px，主站 41.1094px；.burger 13.33px，主站 16.5px）。
   用 :where() 把選擇器權重壓成 0，令 .dd-btn / .nav .btn 自己宣告的 font-size 仍然勝出。

   ⚠ 這條**刻意不加 .pg-erp 前綴**。加了就變成 (0,1,1)，會反過來蓋掉 .dd-btn
     的 font-size:.85rem（0,1,0）—— 實測「全部頁面」鈕由 100×41.66px 脹成
     112×46px，整個 nav-r 位移。必須維持 (0,0,1) 才贏不過任何有 class 的按鈕。
     對 index/cost/contact 而言這條是多餘的（site.css 的 `button{font:inherit}`
     同權重且載入在後，結果相同），留著只是為了讓 what_is_erp 也能正確。 */
:where(.nav, .dd, .drawer) button { font-size: inherit; line-height: inherit; }

/* 頁尾那句 <p class="mut sm"> 用的是主站的通用工具類（site.css line 148–149：
   .mut{color:var(--mu)} .sm{font-size:.88rem}），what_is_erp 不載 site.css 所以補回。 */
.pg-erp footer .mut { color: var(--text-2); }
.pg-erp footer .sm { font-size: .88rem; }

/* ---------- 響應式（斷點與主站 site.css 一致）---------- */
@media (max-width: 900px) {
  .nav-links, .nav-r .btn, .dd-btn, .dd { display: none; }
  .burger { display: block; }
}
@media (max-width: 640px) {
  footer .f-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 380px) {
  .brand small { display: none; }
}
/* 橫放手機：抽屜可能比視窗高，要能自己捲 */
@media (max-height: 560px) and (orientation: landscape) {
  .drawer { max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
}
/* 觸控裝置：頂欄的控制項要撐到 --tap */
@media (pointer: coarse), (max-width: 900px) {
  .brand { min-height: var(--tap); }
  .nav-links a { min-height: var(--tap); }
  .nav .btn { min-height: var(--tap); }
  .burger { width: var(--tap); height: var(--tap); }
}