/* MaoKing 內頁(10-17 首頁過關後開工)—— 沿用首頁設計系統:
   對齊線 = 文字線 293(版邊 75 + 218)、右欄 846、畫面中線;段距 235(段落上下內距 118 + 117);
   字級 = 首頁帳本(60 頁標 / 45 大字句 / 30 標題 / 16 內文 / 15 小標);灰色大字 300、往右跑的從版邊 75 出發、往左跑的停在 1365;
   1280 以上桌機(整段縮放);以下平板/手機上下堆疊、照片限寬 420。進場 = 遮罩上滑(data-enter)。 */

.pg-sec { padding: 94px var(--edge); }   /* 10-17 Eric:留白太多 → 段落上下 118/117 收到 94 */
.pg-sec.pg-white { background: #fff; background-image: none; }   /* 10-17 Eric:底色灰白交錯,約兩三段換一次白(品牌理念、經營理念) */
.pg-label { margin: 0 0 16px; font-size: 15px; line-height: 23px; color: var(--mute); }
.pg-h1 { margin: 0; font-size: 60px; line-height: 72px; font-weight: 300; }
.pg-num { margin: 0; font-family: var(--serif); font-size: 45px; line-height: 45px; color: var(--giant); }
.pg-big { margin: 0; }
.pg-keep { word-break: keep-all; overflow-wrap: anywhere; }
.pg-paras { display: grid; gap: 14px; margin-top: 28px; }
.pg-paras .p16 { margin: 0; }
.pg-ph32 { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--gray); }
.pg-ph45 { margin: 0 0 24px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--gray); }
.pg-ph45 img, .pg-ph32 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-ph32 img, .pg-hero-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-grid2, .pg-grid3, .pg-grid4, .pg-stores { list-style: none; margin: 0; padding: 0; }

/* 編號清單(創辦人四信念、四大核心價值):襯線灰色編號 / 標題 / 說明,上方細線 */
.pg-numbered li { border-top: 1px solid rgba(0, 0, 0, .14); padding-top: 24px; }
.pg-numbered .t30 { margin: 16px 0 12px; }
.pg-numbered .p16 { margin: 0; }
.pg-numbered.pg-has-ph li { border-top: 0; padding-top: 0; }   /* 有照片的(核心價值):照片在最上,不用頂線 */
.pg-has-ph .pg-ph32 { margin-bottom: 24px; }

/* 基本資料表 */
.pg-facts { margin: 0; }
.pg-fact { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 24px; padding: 20px 0; border-top: 1px solid rgba(0, 0, 0, .14); }
.pg-fact:last-child { border-bottom: 1px solid rgba(0, 0, 0, .14); }
.pg-fact dt { font-size: 15px; line-height: 26px; color: var(--mute); }
.pg-fact dd { margin: 0; font-size: 16px; line-height: 26px; color: var(--ink); }

/* 引言(創辦人的話):左側掛一個襯線引號,字對齊到引號後面 */
.pg-quote { position: relative; margin: 0; }
.pg-quote p { margin: 0; font-size: 45px; line-height: 60px; font-weight: 300; }
.pg-mark { position: absolute; right: calc(100% + 16px); top: 6px; font-family: var(--serif); font-size: 96px; line-height: 96px; color: var(--giant); }
.pg-quote + .p16 { margin-top: 38px; }

/* 門市清單(連到品牌頁):品牌英文小字 + 門市名 / 品牌・風格 / 箭頭 */
.pg-stores { margin-top: 40px; }
.pg-store { display: grid; grid-template-columns: 420px 133px minmax(0, 1fr) 24px; align-items: center; padding: 28px 0; border-top: 1px solid rgba(0, 0, 0, .14); }
.pg-stores li:last-child .pg-store { border-bottom: 1px solid rgba(0, 0, 0, .14); }
.pg-store .mono { grid-column: 1; grid-row: 1; color: var(--text); }
.pg-store-n { grid-column: 1; grid-row: 2; margin-top: 6px; }
.pg-store-b { grid-column: 3; grid-row: 1 / 3; margin: 0; }
.pg-store-go { grid-column: 4; grid-row: 1 / 3; width: 24px; height: 24px; transition: transform .5s var(--ease); }
.pg-store:hover .pg-store-go { transform: translateX(8px); }
.pg-store:hover .pg-store-n { color: var(--red); }
.pg-store-n { transition: color .3s; }

/* 重要發展歷程(10-17 第三版):直接用首頁「最新消息」的卡片輪播(.band / .news-cards / .nc,樣式在 maoking.css),卡片一路往右超出畫面 */
.pg-ph169 { margin: 64px 0 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--gray); }
.pg-ph169 img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 灰色大字(內頁):在文件流裡占一條 300 高的帶,字本身絕對定位;起點位置像素實測校正(1440:TAIWAN TO 左緣 75、THE WORLD 右緣 1365) */
.pg-sec .g-box.pg-vg { position: relative; top: auto; left: auto; width: auto; height: 300px; }

@media (min-width: 1280px) {
  .pg-label, .pg-big, .pg-grid3, .pg-grid4, .pg-row2, .pg-stores, .pg-fd, .pg-now-h, .pg-vision-t { margin-left: 218px; }
  /* 10-17 第三版,Eric:照首頁的左右邏輯 —— 左邊一律 293,右邊三種輪流:
     置中(.pg-mid,左右各空 293,同首頁門市段 ⑱-b;10-17 Eric 抓到:原本寫死寬 854 只有 1440 剛好置中,寬螢幕右邊整片空):品牌理念三欄、創辦人的話、門市清單
     右緣對齊頁首右緣 1365:開場、集團簡介、經營理念四欄、總部(照片左文字右)
     右邊超出畫面:重要發展歷程(同首頁最新消息) */
  .pg-mid { margin-right: 218px; }
  .pg-c420 { max-width: 420px; }
  .pg-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; row-gap: 48px; margin-top: 64px; }
  .pg-big { max-width: 677px; }
  .pg-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 34px; margin-top: 64px; }
  .pg-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 34px; margin-top: 64px; }
  .pg-row2 { display: grid; grid-template-columns: 420px 133px minmax(0, 1fr); align-items: start; }
  .pg-c1 { grid-column: 1; } .pg-c2 { grid-column: 3; }
  .pg-c2.pg-facts, .pg-c2.pg-ph32 { margin-top: 7px; }   /* 右欄上緣 = 左欄標題筆畫頂(30/38 筆畫低 6.6) */
  /* 10-18 Eric:集團總部 = 左圖右文 + 置中版型 + 維持原圖 3:2(4:5 會切掉左邊的貓王立牌);試過跟灰底交錯(往左延伸到 75 / 往下錯一階對第二段)
     → 最後選「照片上緣對標題筆畫頂、不交錯」。
     10-18 Eric:照片右緣對齊下方輪播,跟「重要發展歷程」卡片同一套欄(卡寬 w = (置中框 − 2×34) ÷ 3)。
     先試「照片佔兩張卡寬、上下裁一點」→ Eric 改「不裁切、照片縮小、文字往左延伸」:照片 = 第一張卡的欄(293–555,3:2 原比例),
     文字 = 第二、三張卡的欄(589–1147);照片上緣 = 標題筆畫頂 */
  .pg-row2.pg-hq { grid-template-columns: calc((100% - 68px) / 3) 133px minmax(0, 1fr); align-items: start; }   /* 10-18 Eric:文字左緣不用對輪播,拉開 → 間距用全站左右欄的標準 133 */
  .pg-hq .pg-hq-ph { grid-column: 1; margin-top: 7px; }
  .pg-hq .pg-c2 { grid-column: 3; }

  /* 開場(10-17 第二版,Eric:ABOUT US 要全部入鏡、參考 JOIN US):ABOUT US 一整條在最上面,從右邊滑進來(data-land="load"),
     落定在筆畫左緣 = 標題左緣 293(字寬 1031 → 右緣 1324,整個字在畫面內);下面一排 = 左文字(293)、右照片(846 起,3:2),照片上緣 = 頁標筆畫頂。
     上下距離:頁首底 → 大字筆畫頂 = 大字筆畫底 → 頁標筆畫頂(灰色大字上下距離相等) */
  .pg-hero { padding-top: calc(89px / var(--z, 1) + 62px); }   /* 頁首 89 不跟著縮放 → 除回去;+62 = 94 − 大字盒頂到筆畫頂 32 → 頁首底到筆畫頂 = 94(各寬度都一樣) */
  .pg-sec .g-box.pg-hero-g { position: relative; top: auto; left: auto; width: auto; height: 300px; }
  .pg-hero-g .g { position: absolute; top: 0; left: var(--pg-hg-x, 226px); }   /* 筆畫左緣 = 頁標「集團介紹」筆畫左緣 296(同 JOIN US 對標題墨線,像素實測) */
  .pg-hero-row { display: grid; grid-template-columns: 218px 420px 133px minmax(0, 1fr); align-items: start; margin-top: var(--pg-hr, 36px); }   /* 大字筆畫底 → 頁標筆畫頂 = 94 */
  .pg-hero-t { grid-column: 2; }
  .pg-hero-t .t30, .pg-hero-t .p16 { margin: 24px 0 0; }
  .pg-hero-ph { grid-column: 4; margin: 12px 0 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--gray); }   /* 上緣 = 頁標筆畫頂(60/72 筆畫低 12,實測) */
  /* 10-17 Eric:灰底跟照片交錯 —— 照片往下跨進下一段白底;第二版(灰底縮太多 → 往下):下一段小標「品牌理念」筆畫頂 = 照片下緣,
     所以照片只跨進白底 94(白底段的上內距)。照片下外距 = −(94 段落下內距 + 94 白底上內距 + 小標框頂到筆畫頂),段落高度由照片決定;
     段落蓋在下一段上面(z-index)才不會被白底蓋住;水平照樣裁切(大字滑進來的那 473 不能撐出橫向捲軸) */
  .pg-hero { z-index: 2; overflow: clip visible; }
  .pg-hero-ph { aspect-ratio: auto; height: var(--pg-hph, 503px); margin-bottom: calc(-188px - var(--pg-lb, 5px)); }
  /* 第三版(10-17 Eric:還是太近 → 品牌理念跟照片之間再拉開;照片右緣對齊下方三張照片的右緣 = 置中框右緣,左右各空 293) */
  .pg-hero-ph { margin-right: 218px; }
  .pg-hero-ph { margin-top: var(--pg-hpt, 103px); }   /* 第四版(10-17 Eric):照片上緣 = 標語「多元餐飲，一席成就。」筆畫頂(實測 590,原本對頁標 499 → 下移 91);灰底跟著下移同樣距離(段落高度由照片決定,自動跟) */
  .pg-hero:not(.pg-hero-np) + .pg-sec { padding-top: 188px; }   /* 小標筆畫頂 = 照片下緣 + 94(各內頁開場共用) */

  /* 第五版(10-17 Eric:用層次律檢查其他區塊)——
     ① 品牌理念三張照片錯階(10-18 Eric 退回:平行就好)
     ② 集團簡介:資料表頂線對第二個元素(第一段內文筆畫頂),不對標題 —— 錯一階
     ③ 灰轉白的交界一律用照片縫起來:創辦人的話(灰)最後放春酒合照,跨進經營理念(白)94;經營理念小標筆畫頂 = 照片下緣 + 94(同開場) */
  /* ①(10-18 Eric:三張卡片不要階梯,平行就好)→ 拿掉錯階 */
  .pg-intro .pg-c2.pg-facts { margin-top: var(--pg-ft, 73px); }
  .pg-founder { z-index: 2; overflow: clip visible; }
  .pg-founder .pg-ph169 { margin-bottom: calc(-188px - var(--pg-lb, 5px)); }
  .pg-founder + .pg-values { padding-top: 188px; }
  /* 創辦人的話最上面一條 MAO KING 跑馬燈帶(10-18 Eric:先試 WE / TOGETHER 大字 → 改鍶藝式跑馬燈 → 拿掉上下細線、移到創辦人的話上面),撐滿整個畫面寬;
     集團簡介跟創辦人的話都是灰底,帶子剛好當兩段的分界:上一段最後一筆 → 帶子 = 帶子 → 小標 = 94 */
  .pg-founder.pg-has-mq { padding-top: 0; }
  .pg-founder > .pg-mq { margin: 0 calc(-1 * var(--edge)) 88px; }   /* 88 + 小標框頂到筆畫 6 = 94 */

  /* 願景收尾:TAIWAN TO 往右跑(起點筆畫左緣 = 版邊)、THE WORLD 往左跑(起點筆畫右緣 = 右版邊),中間夾一句 */
  .pg-vision { margin-top: 94px; }
  .pg-vg1 .g { left: var(--pg-v1, 199px); }
  .pg-vg2 .g { left: auto; right: var(--pg-v2, 195px); }
  .pg-vision-t { margin-top: 24px; margin-bottom: 24px; max-width: 677px; }
  .pg-vision-t .p16 { margin: 24px 0 0; }

  .pg-now-h { margin-top: 0; }
  .pg-hq { margin-top: 64px; }
  .band.pg-hist { padding: 94px 0; }   /* 內頁段落上下 94(首頁的 109/89 是配 235 段距) */
}

@media (max-width: 1279px) {
  .pg-hero { padding-top: 120px; }
  .pg-hero-t .t30, .pg-hero-t .p16 { margin: 16px 0 0; }
  .pg-hero-ph { margin: 32px 0 0; width: 100%; max-width: 560px; aspect-ratio: 3 / 2; overflow: hidden; }
  .pg-h1 { font-size: 45px; line-height: 56px; }
  .pg-big { font-size: 30px; line-height: 44px; }
  .pg-grid3, .pg-grid4 { display: grid; gap: 40px; margin-top: 48px; }
  .pg-row2 { display: flex; flex-direction: column; }
  .pg-row2 .pg-ph32 { order: -1; margin-bottom: 32px; width: 100%; max-width: 560px; }
  .pg-facts { margin-top: 40px; }
  .pg-quote p { font-size: 30px; line-height: 44px; }
  .pg-mark { position: static; display: block; font-size: 72px; line-height: 56px; }
  .pg-store { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 6px; }
  .pg-store .mono, .pg-store-n, .pg-store-b { grid-column: 1; grid-row: auto; }
  .pg-store-go { grid-column: 2; grid-row: 1 / 4; }
  .pg-grid2 { display: grid; gap: 40px; margin-top: 48px; }
  .pg-ph169 { margin-top: 48px; max-width: 560px; }
  .pg-hq { margin-top: 64px; }
  .pg-vision { margin-top: 64px; }
  .pg-vision-t { margin: 24px 0; }
  .pg-sec .g-box.pg-vg { height: auto; }
  .pg-ph45 { max-width: 420px; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .pg-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-grid4, .pg-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-sec .p16 { max-width: 640px; }
}

/* ==========================================================================
   第二批內頁(10-18:創業加盟 / 兩個品牌頁 / 媒體中心 + 單則新聞 / 人才招募 / 聯絡我們)—— 照「設計系統.md」
   ========================================================================== */
.pg-sub { margin-top: 24px; }
.pg-ph34 { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--gray); }
.pg-ph34 img, .pg-ph45 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-hero .pg-hero-info { margin: 0; }
.pg-hero .pg-hero-info dd a:hover, .pg-facts dd a:hover { color: var(--red); }   /* 10-18 Eric:全站 mail / 電話連結下方不要灰線(跟表格分隔線打架),只留滑過變紅 */

/* 段落開頭的灰色大字(從右邊滑進來、落在標題左緣;設計系統 7) */
.pg-sec .g-box.pg-gh { position: relative; top: auto; left: auto; width: auto; height: 300px; }
.pg-gh .g { position: absolute; top: 0; left: var(--gx, 215px); }

/* 小圖示(Google 商家 / IG / FB / LINE):40 圓、細框,滑過填黑 */
.pg-ics { display: inline-flex; gap: 8px; }
.pg-ic { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .2); display: grid; place-items: center; color: var(--ink); transition: background .3s, border-color .3s, color .3s; }
.pg-ic svg { width: 18px; height: 18px; display: block; }
.pg-ic:hover { background: var(--red); border-color: var(--red); color: #fff; }   /* 照全站按鈕規則 ㉒:滑過磚紅底白字 */
.pg-st-act { display: flex; align-items: center; gap: 24px; margin-top: 32px; flex-wrap: wrap; }

/* 加盟流程七步 */
.pg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; margin-top: 64px; }
.pg-steps li { border-top: 1px solid rgba(0, 0, 0, .14); padding-top: 24px; }
.pg-steps .t30 { margin-top: 16px; white-space: nowrap; }
.pg-vline { margin-top: 64px; }

/* 加盟品牌 / 門市資訊:照片 + 文字棋盤格(一列照片在左、下一列在右;兩邊照片同尺寸 420) */
.pg-brs, .pg-sts { display: grid; row-gap: 94px; margin-top: 64px; }
.pg-br-t, .pg-st-t { align-self: center; }
.pg-br-logo { margin: 0 0 32px; }
.pg-br-logo img { display: block; width: calc(var(--logo-s, 160px) * sqrt(var(--lr, 1))); height: auto; }   /* 10-18 Eric:logo 放大、去白底 → 透明底版;兩個 logo 外框面積相等(同首頁 ㉖),基準 160 */
.pg-br-t .mono, .pg-st-t .mono { color: var(--mute); }
.pg-br-t .t45, .pg-st-n { margin: 12px 0 0; }
.pg-br-t .p16 { margin-top: 16px; }
.pg-br-a { display: flex; align-items: center; gap: 12px; margin-top: 40px; }   /* 兩顆按鈕並排,間距 12 */
.pg-st-a { margin-top: 12px; }
.pg-st-f { margin-top: 32px; }
.pg-st-f .pg-fact { padding: 14px 0; }

/* 品牌特色(照片 + 編號 + 標題 + 說明 + 門市小條) */
.pg-feats .t30 { margin: 16px 0 12px; }
.pg-ft-sub { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.pg-ft-sub li { border-top: 1px solid rgba(0, 0, 0, .14); padding-top: 16px; display: grid; gap: 6px; }
.pg-ft-st { font-size: 16px; line-height: 26px; font-weight: 500; }

/* 招牌料理(用首頁最新消息卡片;沒有日期,只留分類) */
.pg-food .nc-meta { justify-content: flex-start; }
.pg-food .nc-tag { font-size: 13px; }
.pg-food .cards { cursor: grab; }

/* 菜單封面 + 燈箱 */
.pg-menus { list-style: none; margin-top: 64px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; }
.pg-menu { display: block; width: 100%; text-align: left; }
.pg-menu-cv { margin: 0; aspect-ratio: 5 / 7; overflow: hidden; background: var(--gray); }
.pg-menu-cv img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.pg-menu:hover .pg-menu-cv img { transform: scale(1.03); }
.pg-menu-t { display: flex; align-items: baseline; justify-content: space-between; margin-top: 24px; }
.pg-menu-t .mono { color: var(--mute); }
.pg-menu:hover .t30 { color: var(--red); }
.pg-lb { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .92); display: grid; place-items: center; }
.pg-lb[hidden] { display: none; }
.pg-lb-in { display: flex; align-items: center; gap: 32px; }
.pg-lb-pages { display: flex; cursor: pointer; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
.pg-lb-pages img { display: block; width: auto; height: auto; max-height: 84vh; max-width: min(82vw, 900px); }
.pg-lb-pages.two img { max-width: min(40vw, 640px); }   /* 兩頁攤開 */
.pg-lb-b { position: relative; flex: none; width: 53px; height: 53px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); color: #fff; display: grid; place-items: center; transition: background .3s, color .3s; }
.pg-lb-b:hover { background: var(--red); border-color: var(--red); color: #fff; }
.pg-lb-b svg { width: 16px; height: 16px; display: block; }
.pg-lb-p svg { transform: scaleX(-1); }
.pg-lb-x { position: absolute; right: 24px; top: 24px; font-size: 22px; line-height: 1; }
.pg-lb-c { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); color: rgba(255, 255, 255, .7); }

/* 常見問題(原生 details,不靠 JS 也能開合) */
.pg-faq { margin-top: 64px; }
.pg-q { border-top: 1px solid rgba(0, 0, 0, .14); }
.pg-q:last-child { border-bottom: 1px solid rgba(0, 0, 0, .14); }
.pg-q summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; cursor: pointer; font-size: 20px; line-height: 30px; }
.pg-q summary::-webkit-details-marker { display: none; }
.pg-q summary:hover span { color: var(--red); }
.pg-q summary i { position: relative; flex: none; width: 16px; height: 16px; }
.pg-q summary i::before, .pg-q summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.4px; margin-top: -.7px; background: currentColor; transition: transform .4s var(--ease); }
.pg-q summary i::after { transform: rotate(90deg); }
.pg-q[open] summary i::after { transform: rotate(0); }
.pg-q .p16 { margin: -8px 0 0; padding: 0 40px 28px 0; max-width: 677px; }

/* 表單(靜態示意,上線換 Fluent Forms) */
.pg-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; row-gap: 28px; }
.pg-field { display: grid; gap: 8px; }
.pg-full { grid-column: 1 / -1; }
.pg-fl { font-size: 15px; line-height: 23px; color: var(--mute); }
.pg-req { color: var(--red); margin-left: 4px; }
.pg-form input:not([type=radio]):not([type=file]), .pg-form select, .pg-form textarea { width: 100%; font: inherit; font-size: 16px; line-height: 26px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid rgba(0, 0, 0, .3); border-radius: 0; padding: 8px 0; outline: 0; transition: border-color .3s; -webkit-appearance: none; appearance: none; }
.pg-form select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%); background-position: right 6px center, right 1px center; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 24px; }
.pg-form textarea { resize: vertical; min-height: 104px; }
.pg-form input:focus, .pg-form select:focus, .pg-form textarea:focus { border-color: var(--ink); }
.pg-form input[type=file] { font-size: 15px; padding: 8px 0; }
.pg-radios { display: flex; gap: 24px; padding: 8px 0; font-size: 16px; line-height: 26px; }
.pg-radios input { accent-color: var(--ink); margin: 0 6px 0 0; }
.pg-form-end { display: flex; align-items: center; gap: 24px; margin-top: 12px; }
.pg-form-ok { font-size: 15px; color: var(--mute); }
.pg-apply-f { margin-top: 40px; }

/* 媒體中心:分類頁籤 / 新聞卡片格 / 媒體報導列表 / 獲獎牆 */
.pg-tabs { display: flex; gap: 40px; margin-top: 8px; border-bottom: 1px solid rgba(0, 0, 0, .14); }
.pg-tab { position: relative; padding: 0 0 16px; font-size: 20px; line-height: 30px; color: var(--mute); transition: color .3s; }
.pg-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.pg-tab:hover { color: var(--ink); }
.pg-tab.on { color: var(--ink); } .pg-tab.on::after { transform: none; }
[data-panel] { margin-top: 64px; }
.pg-news-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 34px; row-gap: 64px; }
.pg-news-grid .nc { width: auto; }
.pg-sec .pg-news-grid .nc-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 24px; color: var(--mute); }
.pg-sec .pg-news-grid .nc-date, .pg-art-meta .nc-date { font-family: var(--serif); font-size: 30px; line-height: 30px; color: var(--ink); }
.pg-sec .pg-news-grid .nc-tag, .pg-art-meta .nc-tag { font-size: 13px; line-height: 19px; color: var(--mute); }
.pg-sec .pg-news-grid .nc-t { margin-top: 14px; }
.pg-sec .pg-news-grid .nc figure { background: var(--gray); }
.pg-mlist { list-style: none; margin: 0; padding: 0; }
.pg-mrow { display: grid; grid-template-columns: 420px 133px minmax(0, 1fr) 120px 24px; align-items: center; padding: 28px 0; border-top: 1px solid rgba(0, 0, 0, .14); }
.pg-mlist li:last-child .pg-mrow { border-bottom: 1px solid rgba(0, 0, 0, .14); }
.pg-mrow .mono { grid-column: 1; color: var(--mute); }
.pg-mrow-t { grid-column: 3; font-size: 20px; line-height: 30px; transition: color .3s; }
.pg-mrow-d { grid-column: 4; font-family: var(--serif); font-size: 30px; line-height: 30px; text-align: right; padding-right: 24px; }
.pg-mrow .pg-store-go { grid-column: 5; }
.pg-mrow:hover .pg-mrow-t { color: var(--red); } .pg-mrow:hover .pg-store-go { transform: translateX(8px); }
.pg-awards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 34px; row-gap: 48px; }
.pg-aw-logo { margin: 0 0 24px; aspect-ratio: 3 / 2; background: var(--gray); display: grid; place-items: center; }
.pg-aw-logo .mono { color: var(--mute); }
.pg-awards .p16 { margin-top: 8px; }
.pg-note { margin-top: 40px; color: var(--mute); }

/* 單則新聞 */
.pg-back { display: inline-block; color: var(--mute); transition: color .3s; }
.pg-back:hover { color: var(--red); }
.pg-art-meta { display: flex; align-items: baseline; gap: 24px; margin-top: 40px; }
.pg-art-h { margin-top: 16px; }
.pg-art-ph { margin-top: 64px; }
.pg-art-txt { max-width: 640px; display: grid; gap: 16px; }
.pg-art-txt .p16 { margin: 0; font-size: 17px; line-height: 30px; }
.pg-art-ph2 { margin: 64px 0; }

/* 人才:企業文化照片拼貼(兩欄錯一階:右欄往下 94)/ 福利 / 職缺 */
.pg-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.pg-col-a, .pg-col-b { display: grid; row-gap: 24px; }
.pg-col-ph { margin: 0; overflow: hidden; background: var(--gray); }
.pg-col-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-col-1, .pg-col-4 { aspect-ratio: 4 / 5; } .pg-col-2, .pg-col-3 { aspect-ratio: 1 / 1; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.pg-chip { height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .2); font-size: 15px; transition: background .3s, border-color .3s, color .3s; }
.pg-chip:hover { border-color: var(--ink); }
.pg-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pg-jobs { list-style: none; margin: 40px 0 0; padding: 0; }
.pg-job { display: grid; grid-template-columns: 420px 133px minmax(0, 1fr) 24px; align-items: center; padding: 28px 0; border-top: 1px solid rgba(0, 0, 0, .14); }
.pg-jobs li:last-of-type .pg-job { border-bottom: 1px solid rgba(0, 0, 0, .14); }
.pg-jobs li[hidden] { display: none; }
.pg-job-n { grid-column: 1; grid-row: 1; transition: color .3s; }
.pg-job .mono { grid-column: 1; grid-row: 2; margin-top: 8px; color: var(--mute); }
.pg-job-d { grid-column: 3; grid-row: 1 / 3; display: grid; gap: 4px; }
.pg-job-k { font-size: 15px; line-height: 23px; color: var(--mute); }
.pg-job .pg-store-go { grid-column: 4; grid-row: 1 / 3; }
.pg-job:hover .pg-job-n { color: var(--red); } .pg-job:hover .pg-store-go { transform: translateX(8px); }

/* 聯絡我們:地圖 + 門市卡 */
.pg-map { margin-top: 24px; aspect-ratio: 16 / 7; overflow: hidden; background: var(--gray); }
.pg-map iframe { width: 100%; height: 100%; border: 0; display: block; }   /* 10-18 Eric:地圖用彩色(拿掉黑白濾鏡) */
.pg-scs { list-style: none; margin-top: 64px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; row-gap: 80px; }
.pg-sc .mono { margin-top: 24px; color: var(--mute); }
.pg-sc .t30 { margin-top: 10px; }
.pg-sc .p16 { margin-top: 12px; }
.pg-sc .pg-st-act { margin-top: 24px; }

@media (min-width: 1280px) {
  .pg-hero-t .pg-h1 { white-space: nowrap; }
  .pg-hero .pg-hero-info { grid-column: 4; margin: var(--pg-hpt, 103px) 0 0; }   /* 右緣 = 下一段地圖右緣 1365 */
  .pg-hero.pg-hero-np { padding-bottom: 94px; }
  .pg-hero-np + .pg-sec { padding-top: 94px; }
  .pg-sec.pg-has-gh { padding-top: 62px; }   /* 段落交界 → 大字筆畫頂 = 94(盒頂到筆畫頂 32) */
  .pg-gh + .t45 { margin-top: var(--gh-b, 37px); }   /* 大字筆畫底 → 標題筆畫頂 = 94(J、Q 有尾巴 → 98) */
  .pg-gh + .t45, .pg-sub, .pg-chips, .pg-tabs, .pg-faq, .pg-steps, .pg-brs, .pg-sts, .pg-vline, .pg-news-grid, .pg-mlist, .pg-awards, .pg-note, .pg-jobs, .pg-map, .pg-art-in { margin-left: 218px; }
  .pg-row2 .pg-sub, .pg-c1 .pg-sub, .pg-c1 > .pg-label, .pg-art-in .pg-sub { margin-left: 0; }
  .pg-brs, .pg-sts { margin-left: 218px; }
  .pg-br, .pg-st { margin-left: 0; }
  .pg-br > .pg-br-ph, .pg-st > .pg-st-ph { grid-column: 1; grid-row: 1; }
  .pg-br > .pg-br-t, .pg-st > .pg-st-t { grid-column: 3; grid-row: 1; }
  .pg-flip > .pg-br-t, .pg-flip > .pg-st-t { grid-column: 1; grid-row: 1; }
  .pg-flip > .pg-br-ph, .pg-flip > .pg-st-ph { grid-column: 3; grid-row: 1; width: 420px; }
  .pg-br-ph, .pg-st-ph { margin: 0; }
  .pg-bi .pg-c1 { margin-top: 0; }   /* 10-18 品牌介紹右欄最上加了「英文小字 + logo」那排 → 照片上緣 = 英文小字筆畫頂 */
  .pg-sec .pg-c2.pg-aud { margin-top: var(--pg-t45, 11px); }
  .pg-sec .pg-c2.pg-mc { margin-top: 5px; }   /* = 左邊小標筆畫頂 */
  .pg-cul .pg-c2 { margin-top: var(--pg-t45, 11px); }
  .band.pg-band { padding: 94px 0; }
  .pg-col-b { margin-top: 94px; }   /* 右欄錯一階 */
  .pg-scs, .pg-menus, .pg-sec > .pg-grid2 { margin-left: 218px; }
  .pg-feats.pg-grid2 { row-gap: 64px; }
  .pg-art-in { margin-right: 218px; }
  .pg-art-hd { padding-top: 183px; }
}
@media (max-width: 1279px) {
  .pg-sec .g-box.pg-gh { height: auto; margin-bottom: 32px; }
  .pg-gh .g { position: static; }
  .pg-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; }
  .pg-br, .pg-st { display: flex; flex-direction: column; }
  .pg-br-ph, .pg-st-ph { order: -1; width: 100%; max-width: 420px; margin: 0 0 32px; }
  .pg-brs, .pg-sts { row-gap: 64px; margin-top: 48px; }
  .pg-menus { margin-top: 48px; }
  .pg-faq { margin-top: 40px; }
  .pg-form { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .pg-row2 .pg-c2.pg-facts { margin-top: 40px; }
  .pg-hero .pg-hero-info { margin-top: 32px; }
  .pg-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 48px; }
  .pg-mrow { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 6px; }
  .pg-mrow .mono, .pg-mrow-t, .pg-mrow-d { grid-column: 1; text-align: left; padding: 0; }
  .pg-mrow .pg-store-go { grid-column: 2; grid-row: 1 / 4; }
  .pg-awards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-job { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 6px; }
  .pg-job-n, .pg-job .mono, .pg-job-d { grid-column: 1; grid-row: auto; }
  .pg-job .pg-store-go { grid-column: 2; grid-row: 1 / 4; }
  .pg-collage { margin-top: 40px; }
  .pg-scs { row-gap: 56px; margin-top: 48px; }
  .pg-art-hd { padding-top: 120px; }
  .pg-map { aspect-ratio: 4 / 3; }
  .pg-ph34 { max-width: 420px; }   /* 平板手機照片限寬:直式 420、橫式 560(設計系統 1) */
  .pg-art-ph2, .pg-sc .pg-ph32 { max-width: 560px; }
}
@media (max-width: 767px) {
  .pg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-news-grid, .pg-awards, .pg-scs, .pg-menus { grid-template-columns: minmax(0, 1fr); }
  .pg-menus { row-gap: 48px; }
  .pg-tabs { gap: 24px; } .pg-tab { font-size: 17px; }
  .pg-q summary { font-size: 17px; line-height: 26px; }
  .pg-lb-in { gap: 8px; } .pg-lb-b.pg-lb-p, .pg-lb-b.pg-lb-n { width: 40px; height: 40px; }
}

/* 隱私權政策(10-18 示意頁):標題區灰底;條文每條一列 —— 編號+標題在文字線 293、內文在右欄 846(一條主對齊線) */
.pg-legal-up { margin-top: 24px; color: var(--mute); }
.pg-legal-in { margin-top: 24px; max-width: 640px; }
.pg-legal { list-style: none; margin: 0; padding: 0; }
.pg-lg { border-top: 1px solid rgba(0, 0, 0, .14); padding: 40px 0; }
.pg-lg:last-child { border-bottom: 1px solid rgba(0, 0, 0, .14); }
.pg-lg-h { margin: 0; display: flex; align-items: baseline; gap: 24px; font-weight: 400; }
.pg-lg-h .pg-num { flex: none; width: 56px; }
.pg-lg-b { display: grid; gap: 12px; margin-top: 20px; }
.pg-lg-b .p16 { margin: 0; }
.pg-lg-b a:hover { color: var(--red); }
@media (min-width: 1280px) {
  .pg-legal-hd { padding-bottom: 94px; }
  .pg-legal-h1, .pg-legal-up, .pg-legal-in, .pg-legal { margin-left: 218px; }
  .pg-lg { display: grid; grid-template-columns: 420px 133px minmax(0, 1fr); }
  .pg-lg-h { grid-column: 1; }
  .pg-lg-b { grid-column: 3; margin-top: 0; padding-top: 6px; max-width: 640px; }   /* 內文首行筆畫頂 = 標題 30 筆畫頂(像素實測) */
}


/* MAO KING 跑馬燈帶(參考鍶藝:字標 + 細線星星循環;10-18 Eric 拿掉上下細線) */
.pg-mq { overflow: hidden; }
.pg-mq-track { display: flex; width: max-content; animation: pg-mq var(--mq-t, 48s) linear infinite; }
.pg-mq-g { display: flex; align-items: center; }
.pg-mq-logo { display: block; height: var(--mq-h, 82px); width: calc(var(--mq-h, 82px) * 8.3306); fill: var(--giant); }
.pg-mq-star { display: block; flex: none; width: var(--mq-s, 52px); height: var(--mq-s, 52px); margin: 0 var(--mq-g, 64px); color: var(--giant); }   /* 10-18 Eric:改灰色版(= 灰色大字的灰 #C4C5CB) */
@keyframes pg-mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pg-mq-track { animation: none; } }
@media (max-width: 1279px) {
  .pg-mq { --mq-h: 48px; --mq-s: 32px; --mq-g: 36px; }
  .pg-founder > .pg-mq { margin: 0 calc(-1 * var(--edge)) 64px; }
  .pg-founder.pg-has-mq { padding-top: 0; }
}

/* 集團經營理念四張卡片 → 跟「重要發展歷程」同一套輪播(10-18 Eric:第四張切一半)
   卡寬 = (看得到的寬 − 3 個間距) ÷ 3.5:左邊從 293 起,畫面右緣剛好切在第四張的中間(任何寬度都是);照片維持 3:2 */
.pg-vhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.pg-vhead .car-nav-in { flex: none; }
.pg-sec .pg-vals { margin: 64px calc(-1 * var(--edge)) 0; }
.pg-vals .nc figure { aspect-ratio: 3 / 2; margin: 0 0 24px; }
.pg-vals .pg-num { margin: 0; }
.pg-vals .t30 { margin: 16px 0 12px; }
.pg-vals .p16 { margin: 0; }
@media (min-width: 1280px) {
  /* 10-18 Eric 改:第三張右緣 = 輪播圓鈕右緣(置中版型右緣,畫面右邊也空 293),第四張露多少都行。
     卡寬 = (置中框寬 − 2 個間距) ÷ 3;100% = 卡片列內容寬(左 293、右 75 內距之間)→ 置中框 = 100% − 218。重要發展歷程同一套 */
  .pg-vals .nc, .pg-hist .news-cards .nc { width: calc((100% - 218px - 68px) / 3); }
}
@media (max-width: 1279px) {
  .pg-vhead { flex-direction: column; align-items: flex-start; gap: 24px; }
  .pg-sec .pg-vals { margin-top: 40px; }
}

/* 發展現況四家直營門市:維持條列,列尾加門市縮圖 160×107(3:2,同之前時間軸版);10-18 Eric。
   列寬回到右版邊 1365(縮圖放進來,中間品牌欄才不會被擠成兩行);下面集團總部內文右緣跟著對齊 1365 */
.pg-store.pg-store-ph { grid-template-columns: 420px 133px minmax(0, 1fr) 160px 24px; column-gap: 0; padding: 20px 0; }
.pg-store-ph .pg-store-b { padding-right: 24px; }
.pg-store-im { grid-column: 4; grid-row: 1 / 3; margin: 0 24px 0 0; width: 160px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--gray); box-sizing: content-box; }
.pg-store-im img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.pg-store-ph:hover .pg-store-im img { transform: scale(1.06); }
.pg-store-ph .pg-store-go { grid-column: 5; }
@media (min-width: 1280px) {
  /* 10-18 Eric:門市表格改置中(293–1147,右緣 = 下面集團總部內文右緣)→ 欄寬不夠放中間品牌欄,改成英文小字/門市名/品牌・風格三行疊在左邊,縮圖 + 箭頭在右 */
  .pg-store.pg-store-ph { grid-template-columns: minmax(0, 1fr) 184px 24px; row-gap: 6px; }
  .pg-store-ph .mono, .pg-store-ph .pg-store-n, .pg-store-ph .pg-store-b { grid-column: 1; grid-row: auto; padding: 0; }
  .pg-store-ph .pg-store-n { margin-top: 0; }
  .pg-store-im { grid-column: 2; grid-row: 1 / 4; }
  .pg-store-ph .pg-store-go { grid-column: 3; grid-row: 1 / 4; }
}
@media (max-width: 1279px) {
  .pg-store.pg-store-ph { grid-template-columns: minmax(0, 1fr) 120px 24px; column-gap: 16px; }
  .pg-store-ph .mono, .pg-store-ph .pg-store-n, .pg-store-ph .pg-store-b { grid-column: 1; grid-row: auto; }
  .pg-store-im { grid-column: 2; grid-row: 1 / 4; width: 120px; margin: 0; }
  .pg-store-ph .pg-store-go { grid-column: 3; grid-row: 1 / 4; }
}

/* 內頁輪播的左右圓鈕(經營理念、重要發展歷程、品牌頁招牌料理):右緣對齊置中版型的右緣(畫面右邊也空 293);10-18 Eric。首頁不載這支,首頁最新消息不受影響 */
@media (min-width: 1280px) {
  .pg-vhead { margin-right: 218px; }
  .pg-inner .band-top { padding-right: calc(var(--edge) + 218px); }
}

/* 創辦人的話:四項信念改放金句右邊、條列式(10-18 Eric)—— 左欄金句 + 說明(下方留白),右欄 846–1147 一列一項:灰色襯線編號 | 標題 + 說明,上下細線;
   第一條頂線 = 金句第一行筆畫頂 */
.pg-blist { list-style: none; margin: 0; padding: 0; }
.pg-blist li { display: grid; grid-template-columns: 48px minmax(0, 1fr); border-top: 1px solid rgba(0, 0, 0, .14); padding: 24px 0; }
.pg-blist li:last-child { border-bottom: 1px solid rgba(0, 0, 0, .14); }
.pg-blist .pg-num { font-size: 30px; line-height: 38px; }
.pg-blist .t30 { margin: 0; }
.pg-blist .p16 { margin: 8px 0 0; }
@media (min-width: 1280px) {
  .pg-fd .pg-row2 { margin-left: 0; }
  .pg-fd .pg-blist { margin-top: var(--pg-bl, 11px); }
}
@media (max-width: 1279px) { .pg-fd .pg-blist { margin-top: 40px; } }

/* 10-18 Eric:集團簡介資料表、四項信念條列 —— 最上、最下兩條線拿掉(中間分隔線保留);沒有頂線後,改成第一列的字對齊左欄筆畫 */
.pg-intro .pg-fact:first-child, .pg-blist li:first-child { border-top: 0; padding-top: 0; }
.pg-intro .pg-fact:last-child, .pg-blist li:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 1280px) {
  .pg-intro .pg-c2.pg-facts { margin-top: var(--pg-ft2, 66px); }   /* 第一列字筆畫頂 = 左欄第一段內文筆畫頂 */
  .pg-fd .pg-blist { margin-top: var(--pg-bl2, 4px); }             /* 第一項標題筆畫頂 = 金句第一行筆畫頂 */
}

/* ==========================================================================
   10-18 第二輪(Eric:「照目前學到的,把其他頁面也再改一輪」)—— 照設計系統 10-18 新增條目:
   ① 內頁主調 = 置中(右緣 W−293)② 輪播卡寬 = (置中框 − 68) ÷ 3 ③ 表格/條列不畫最上最下線,第一列字對旁邊欄筆畫
   ④ 同一排不錯階 ⑤ 照片裡的品牌元素不能裁掉(取景點)
   ========================================================================== */
/* ⑤ 取景點:直式框裁橫式照時,把招牌/布條留在畫面裡 */
img[src$="mk-hero.webp"], img[src$="mk-jx-ext.webp"] { object-position: 0% 50%; }   /* 「MAO KING」招牌在左上 */
img[src$="news-hall.webp"] { object-position: 25% 50%; }                            /* 春酒布條「MAO KING 貓王餐飲集團」 */

/* ③ 表格/條列:最上、最下線拿掉(中間分隔線保留) */
.pg-facts .pg-fact:first-child, .pg-mlist li:first-child .pg-mrow, .pg-jobs li:first-child .pg-job, .pg-legal .pg-lg:first-child, .pg-q:first-child { border-top: 0; }
.pg-facts .pg-fact:first-child, .pg-mlist li:first-child .pg-mrow, .pg-jobs li:first-child .pg-job, .pg-legal .pg-lg:first-child, .pg-q:first-child summary { padding-top: 0; }
.pg-facts .pg-fact:last-child, .pg-mlist li:last-child .pg-mrow, .pg-jobs li:last-of-type .pg-job, .pg-legal .pg-lg:last-child, .pg-q:last-child { border-bottom: 0; }
.pg-facts .pg-fact:last-child, .pg-mlist li:last-child .pg-mrow, .pg-jobs li:last-of-type .pg-job, .pg-legal .pg-lg:last-child { padding-bottom: 0; }

.pg-step-t { margin: 16px 0 0; font-size: 20px; line-height: 30px; white-space: nowrap; }
.pg-c640 { max-width: 640px; }
.pg-cul4 { list-style: none; padding: 0; margin-top: 64px; }

@media (min-width: 1280px) {
  /* ① 置中:各區塊右緣 = W−293 */
  .pg-sec > .pg-grid2.pg-mid, .pg-sec > .pg-grid3.pg-mid, .pg-sec > .pg-grid4.pg-mid { margin-right: 218px; }
  .pg-steps.pg-mid, .pg-news-grid.pg-mid, .pg-jobs.pg-mid, .pg-legal.pg-mid, .pg-mlist.pg-mid, .pg-awards.pg-mid { margin-right: 218px; }   /* 這幾個的基本規則寫了 margin 簡寫,會蓋掉 .pg-mid */
  .pg-brs.pg-mid .pg-flip, .pg-sts.pg-mid .pg-flip { grid-template-columns: minmax(0, 1fr) 133px 420px; }   /* 反過來那列:文字 293 起、照片 727–1147 */
  .pg-mid .pg-flip > .pg-br-ph, .pg-mid .pg-flip > .pg-st-ph { width: auto; }
  .pg-mid .pg-form { grid-template-columns: minmax(0, 1fr); }   /* 右欄只剩 301 → 表單一欄 */
  .pg-mrow { grid-template-columns: minmax(0, 1fr) 120px 24px; row-gap: 6px; }
  .pg-mrow .mono, .pg-mrow-t { grid-column: 1; }
  .pg-mrow .mono { grid-row: 1; } .pg-mrow-t { grid-row: 2; }
  .pg-mrow-d { grid-column: 2; grid-row: 1 / 3; }
  .pg-mrow .pg-store-go { grid-column: 3; grid-row: 1 / 3; }
  /* 隱私權條文(10-18 Eric:改兩欄,左標題右內文)—— 置中框裡:標題欄 = 一張輪播卡寬(293–555)、間距 133、內文 688–1147(同集團總部那排);
     內文首行筆畫頂 = 標題筆畫頂 */
  .pg-lg { display: grid; grid-template-columns: calc((100% - 68px) / 3) 133px minmax(0, 1fr); }
  .pg-lg-h { grid-column: 1; }
  .pg-lg-b { grid-column: 3; margin-top: 0; padding-top: var(--pg-lgb, 6px); max-width: none; }
  .pg-cul4 { margin-left: 218px; }
  /* ③ 第一列字對旁邊欄筆畫 */
  .pg-hero .pg-hero-info { margin-right: 218px; margin-top: var(--pg-hi, 98px); }   /* 第一列筆畫頂 = 標語筆畫頂 */
  .pg-sec .pg-c2.pg-aud { margin-top: var(--pg-aud, 6px); }                       /* = 左欄 45 大字句筆畫頂 */
  .pg-sec .pg-c2.pg-mc { margin-top: var(--pg-mc, 45px); }                        /* 10-18 Eric:= 左欄大字句「採訪與合作邀約，」筆畫頂 */
  /* ② 輪播卡寬:第三張右緣 = 圓鈕右緣 */
  .pg-food .news-cards .nc { width: calc((100% - 218px - 68px) / 3); }
}

/* 10-18 Eric(franchise 經營理念 2×2):中間間距太擠 → 純文字的兩欄編號清單(加盟優勢、經營理念),欄距改全站標準 133(兩欄等寬) */
@media (min-width: 1280px) { .pg-sec > .pg-grid2.pg-mid.pg-numbered:not(.pg-has-ph) { column-gap: 133px; } }

/* 段落開頭「大字在右上」(ghead_r;10-18 Eric:FAQ 放在加盟常見問題右上方、從右滑進來,填右邊空白):
   一排 300 高;標題貼底在 293,大字絕對定位、筆畫右緣 = 置中框右緣(FAQ 的 Q 尾巴往右凸 4 → 右距 218 + 4),字底(Q 尾巴不算)= 標題字底 */
.pg-sec .g-box.pg-gh2-g { position: absolute; top: 0; left: auto; right: 0; width: 100%; height: 300px; }
.pg-gh2-g .g { position: absolute; top: 0; right: var(--gh2-r, 222px); }
@media (min-width: 1280px) {
  .pg-gh2 { position: relative; height: 300px; display: flex; align-items: flex-end; padding-bottom: var(--gh2-b, 37px); box-sizing: border-box; }
  .pg-gh2 .t45 { margin: 0 0 0 218px; position: relative; z-index: 1; }
}
@media (max-width: 1279px) {
  .pg-gh2 { display: flex; flex-direction: column; }
  .pg-sec .g-box.pg-gh2-g { position: static; height: auto; order: -1; margin-bottom: 32px; }
  .pg-gh2-g .g { position: static; }
}

/* 10-18 Eric:加盟品牌兩列之間用灰線隔開(線上下各 64 = 段內區塊間距;線寬 = 置中框 293–1147) */
.pg-brs { row-gap: 0; }
.pg-brs > .pg-br + .pg-br { border-top: 1px solid rgba(0, 0, 0, .14); margin-top: 64px; padding-top: 64px; }

/* 10-18 Eric:加盟品牌右邊太空、文字 logo 像隨便擺 → 右欄撐滿照片高度、分上中下三層(上下都有主人):
   上 = logo(頂 = 照片頂)/ 中 = 英文名、品牌名、一句話 / 下 = 品牌小資料(類型、發表、加盟狀態)+ 按鈕(按鈕底 = 照片底) */
.pg-br-m .t45 { margin: 8px 0 0; }
.pg-br-m .p16 { margin: 16px 0 0; }
.pg-br-f .pg-fact { padding: 12px 0; }
.pg-br-f dt, .pg-br-f dd { font-size: 15px; line-height: 23px; }
.pg-br-a { margin-top: 32px; }
@media (min-width: 1280px) {
  .pg-br .pg-br-t { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
  .pg-br-logo { margin: 0; --logo-s: 140px; align-self: flex-end; }   /* 10-18 Eric:logo 改靠右(右緣 = 置中框右緣 1147) */
}
@media (max-width: 1279px) { .pg-br-m, .pg-br-b { margin-top: 32px; } }

/* 10-18 加盟品牌兩列之間的灰線(試過每個品牌上方加英文大字 LINKEN / WEN A-MA → Eric 拿掉):線上下各 64 */
.pg-brs > .pg-br + .pg-br { border-top: 0; margin-top: 0; padding-top: 0; }
.pg-br-hr { border: 0; border-top: 1px solid rgba(0, 0, 0, .14); margin: 64px 0; }
@media (max-width: 1279px) { .pg-br-hr { margin: 56px 0; } }

/* 10-18 Eric:諮詢/應徵表單上緣對齊左邊大字句「填寫簡易表單…」:表單第一個欄位名稱筆畫頂 = 45 大字句筆畫頂 */
@media (min-width: 1280px) { #apply .pg-row2 > .pg-c2 { margin-top: var(--pg-fm, 45px); } }
/* 10-18 Eric:加盟諮詢左邊的聯絡資料(加盟專線/電子信箱)不要分隔線 —— 會跟右邊表單的底線混在一起 */
.pg-apply-f .pg-fact { border: 0; padding: 6px 0; }

/* 10-18 Eric:LINKEN BURGER 英文小字對齊照片上緣 → 跟 logo 同一排:小字在左(筆畫頂 = 照片頂)、logo 在右 */
.pg-br-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.pg-br-top .mono { margin: var(--pg-brm, -3px) 0 0; }
.pg-br-m .t45 { margin-top: 0; }
@media (max-width: 1279px) { .pg-br-top { flex-direction: column-reverse; } }

/* 10-18 Eric:品牌名 + 一句話也往上 → 緊接在小字/logo 那排下面(間距 32),資料表 + 按鈕仍貼底(按鈕底 = 照片底) */
@media (min-width: 1280px) {
  .pg-br .pg-br-t { justify-content: flex-start; }
  .pg-br-m { margin-top: 16px; }
  .pg-br-b { margin-top: auto; }
}

/* 加盟流程七步「一步一步達成」(10-18 Eric):看到這排時,每一步上方的細線依序被一條黑線畫過去(左 → 右),
   畫到的那一步編號由灰轉黑;一步 0.3 秒,七步約 2.5 秒。離開畫面就歸零,捲回來重播(捲過都重播) */
.pg-steps li { position: relative; }
.pg-steps li::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ink);   /* 10-18 Eric:太粗 → 1px,跟灰線同粗 */ transform: scaleX(0); transform-origin: left center;
  transition: transform .4s cubic-bezier(.65, 0, .35, 1) calc(var(--i, 0) * .3s); }
.pg-steps .pg-num { transition: color .35s ease calc(var(--i, 0) * .3s + .3s); }
.pg-steps.go li::after { transform: scaleX(1); }
.pg-steps.go .pg-num { color: var(--ink); }
.pg-steps.reset li::after, .pg-steps.reset .pg-num { transition: none; }
@media (prefers-reduced-motion: reduce) { .pg-steps li::after { transform: scaleX(1); transition: none; } .pg-steps .pg-num { color: var(--ink); transition: none; } }

/* 大字在右上、但字太長(BENEFITS,10-18 Eric 放右上角):從右邊滑進來後出框,畫面右緣切在 F 的正中間(任何寬度都是);字頭離標題 100 左右 */
.pg-gh2-cut .pg-gh2-g .g { left: var(--gh2-l); right: auto; }

/* 內頁開場頁標不換行、可能比 420 欄寬(MaoKing 貓王經典、三条河原町居酒屋)→ 遮罩那一行跟著字的實際寬度,不被欄寬切掉(10-18 Eric:「典」被切) */
.pg-hero-t .pg-h1 .rv-l { width: max-content; }

/* 品牌特色(10-18 Eric:資訊 no design、沒對齊):標題固定兩行(逗號後換行)→ 說明同一高度起跑;
   「兩家門市」小條拉出來,卡片下方一排兩欄:上方灰線、門市名 30 + 風格小字 + 說明(兩欄等寬、欄距 133 同純文字兩欄清單) */
.pg-ft-h { word-break: keep-all; }
.pg-ft-stores { list-style: none; padding: 0; margin-top: 64px; padding-top: 40px; border-top: 1px solid rgba(0, 0, 0, .14); display: grid; gap: 40px; }
.pg-ft-k { margin: 8px 0 0; font-size: 15px; line-height: 23px; color: var(--mute); }
.pg-ft-stores .p16 { margin: 16px 0 0; }
@media (min-width: 1280px) {
  .pg-ft-stores { margin-left: 218px; margin-right: 218px; column-gap: 34px; }   /* 欄跟上排卡片同一套(間距 34),下排每欄左右緣接在上排卡片正下方 */
  .pg-ft-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-ft-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1279px) { .pg-ft-stores { margin-top: 48px; } }

/* 品牌頁門市資訊(10-18 Eric:照片下緣沒對齊)→ 照片上下撐滿文字塊:上緣 = 英文小字筆畫頂、下緣 = 線上訂位按鈕底(同首頁加盟段做法);文字塊從頂端排、不再上下置中 */
@media (min-width: 1280px) {
  .pg-st { align-items: stretch; }
  .pg-st .pg-st-t { align-self: start; }
  .pg-st .pg-st-ph { aspect-ratio: auto; align-self: stretch; margin-top: var(--pg-stm, 2px); }
}

/* 品牌頁品牌介紹:右欄最上一排 = 英文小字(左)+ 品牌 logo(右,外框面積相等基準 140,同創業加盟品牌列),下面接 45 大字句 */
.pg-bi .pg-br-logo { margin: 0; --logo-s: 140px; }
.pg-bi-big { margin-top: 40px; }
.pg-br-top .pg-br-logo { align-self: flex-start; flex: none; }   /* logo 永遠頂對齊那一排(英文小字太長折行時,不能被推到下面) */
.pg-ic svg.ic-line { width: 22px; height: 22px; }   /* 10-18 Eric:LINE 再大一點(對話框本身比其他圖示扁,框放到 22) */

/* ==========================================================================
   10-20 客戶第一次回饋(Sandy)+ Eric 滑手機記下的兩條
   ========================================================================== */
/* ② 人才頁「掉字」:應徵標題一行 10 字(450 寬)比左欄 420 寬 → 逗號/句點被擠到下一行。標題本來就照標點手動分行 → 桌機不再自動換行(右邊表單從 846 起,放得下) */
@media (min-width: 1280px) { #apply .pg-c1 .t45 { white-space: nowrap; } }
@media (max-width: 1279px) {
  /* ③ 手機/平板標題太大:內頁 45 大字句一律縮到 30(同首頁手機);④ 創業加盟/門市文字塊在手機被左右置中(桌機的「對照片上下置中」變成左右)→ 撐滿整欄 */
  .pg-sec .t45, .band .t45 { font-size: 30px; line-height: 44px; }
  .pg-br .pg-br-t, .pg-st .pg-st-t { align-self: stretch; }
  /* ⑤ 品牌介紹:手機照片排到最前面,這張是 3:4(只有 3:2 那種有下距)→ 補 32,logo 不再黏著照片 */
  .pg-row2 .pg-ph34 { order: -1; margin-bottom: 32px; }
}
@media (max-width: 767px) {
  .pg-h1 { font-size: 36px; line-height: 48px; }
  /* ⑥ 菜單燈箱:手機箭頭不放頁面兩側(會超出螢幕)→ 菜單頁在上、左右箭頭在下一排置中;頁碼在最下面 */
  .pg-lb-in { display: grid; grid-template-columns: auto auto; justify-content: center; column-gap: 16px; row-gap: 20px; }
  .pg-lb-pages { grid-column: 1 / -1; grid-row: 1; }
  .pg-lb-pages img { max-width: 92vw; max-height: 72vh; }
  .pg-lb-b.pg-lb-p { grid-column: 1; grid-row: 2; width: 53px; height: 53px; justify-self: end; }
  .pg-lb-b.pg-lb-n { grid-column: 2; grid-row: 2; width: 53px; height: 53px; justify-self: start; }   /* 兩顆靠在一起、置中 */
}