/* ==========================================================================
   MaoKing 集團主站 — 首頁(對標 OTB otb.net/zh,逐段量測復刻;數字以 1440 寬為準)
   OTB 量到的系統:版邊 75(內容 1290)/左欄 420/右欄起 727 或 945/段高 750・545・1244・504・789・389・762
     字:Noto Sans SC 300/400、PP Mori 600(數字、小標)、PP Fragment Serif 300(拉丁巨字)、PP Mono(眉標)
       → Noto Sans TC、Inter Tight 600、Instrument Serif、DM Mono
     字級:巨字 300(拉丁)・270/150(中文)/首屏 75/帶標 45・敘述 45/60/標題 30/38/內文 16/26/註 15/23/消息內文 17/26/小標 13
     色:#000・內文 #404040・註 #767676・灰帶 #F2F2F2・黑帶 #000;巨字灰 #D6D6D6(靜態),中文巨字捲到變黑
     按鈕:黑膠囊 53 高、內距 15/19、13 粗
   字距:OTB 標題/巨字用 -0.02em(對標值,只套拉丁巨字與數字;中文一律 0)
   帳本 ── 字級 13・15・16・17・30・45・48・75・83・150・270・300;間距 8・16・24・34・75;圓角 999
   ========================================================================== */
:root {
  --ink: #000; --text: #404040; --mute: #767676; --bg: #E7E8ED; --gray: #E7E8ED; --giant: #C4C5CB; --red: #AF4725;   /* 10-12 Eric:底色統一 #E7E8ED(Urban Physio 的冷淺灰);灰帶併入同色;巨字灰加深到 #C4C5CB,在淺灰底上才看得到 */
  --zh: "Noto Sans TC", system-ui, sans-serif; --lat: "Inter Tight", var(--zh); --serif: "Instrument Serif", serif; --mono: "DM Mono", monospace;
  --edge: 75px; --col: 420px; --r2: 727px; --r3: 945px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--zh); font-size: 15px; line-height: 23px; font-weight: 400; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
figure, h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- 字 ---------- */
.t30 { font-size: 30px; line-height: 38px; font-weight: 400; }
.t30b { font-size: 30px; line-height: 38px; font-weight: 500; }
.t45 { font-size: 45px; line-height: 60px; font-weight: 400; }
.t45l { font-size: 45px; line-height: 45px; font-weight: 300; }
.p16 { font-size: 16px; line-height: 26px; color: var(--text); }
.p16 p + p { margin-top: 12px; }
.p15 { font-size: 15px; line-height: 23px; color: var(--text); }
.p17m { font-size: 17px; line-height: 26px; color: var(--mute); }
.p14m { font-size: 14px; line-height: 23px; color: var(--mute); }
.mono { font-family: var(--mono); font-size: 13px; line-height: 15px; letter-spacing: .05em; text-transform: uppercase; }
.n48 { font-family: var(--lat); font-size: 48px; line-height: 48px; font-weight: 600; letter-spacing: -.02em; /* 對標 -0.96px */ }
.n48.zh { font-family: var(--zh); font-weight: 500; letter-spacing: 0; }
.n48 small { font-family: var(--zh); font-size: 30px; font-weight: 400; margin-left: 4px; }
.btn { display: inline-flex; align-items: center; height: 53px; padding: 0 19px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; line-height: 1; transition: background .3s, color .3s; }
.btn:hover { background: var(--red); }
.lk { display: inline-block; font-size: 13px; line-height: 19px; font-weight: 500; position: relative; }
.lk::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.lk:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 巨字 ---------- */
.g { white-space: nowrap; font-weight: 300; line-height: 1; margin: 0; pointer-events: none; will-change: transform; }
.g-latin { font-family: var(--serif); font-weight: 400; font-size: 300px; line-height: 300px; text-transform: uppercase; letter-spacing: -.015em; /* 對標 -4.5px/300 */ color: var(--giant); }
.g-zh { font-family: var(--zh); font-weight: 300; font-size: 240px; line-height: 1; color: var(--giant); transition: color 1.2s var(--ease); }
.g-zh.lit, .g-lit.lit { color: var(--ink); }
.g-lit { transition: color 1.2s var(--ease); }
.g-zh.g-300, .g-latin.g-300 { font-size: 300px; line-height: 300px; }
.g-zh.g-150, .g-latin.g-150 { font-size: 150px; line-height: 150px; }
.g-box { position: absolute; top: 75px; height: 600px; }
.g-right { left: var(--r2); width: 637px; }          /* OTB:x727 w637,文字從 x≈1054 起往右溢出 */
.g-right .g { position: absolute; left: 0; top: 0; }   /* OTB 實測:巨字基準就在 x727,進場時 −203 → 從 524 起,字讀得到;原本 327 是量到位移後的位置,錯 */
.g-left { left: var(--edge); width: 637px; }        /* OTB:文字從 x≈-500 起 */
.g-left .g { position: absolute; right: 0; top: 0; }
.g-wide { left: -347px; top: 22px; }                /* 品牌段:橫跨兩側 */

/* ---------- 共用版面 ---------- */
.sec { position: relative; overflow: hidden; background: var(--bg); }
.col-l { position: absolute; left: var(--edge); width: var(--col); }
.col-r { position: absolute; left: var(--r3); width: var(--col); }
.ph-510 { position: absolute; width: 510px; height: 382px; overflow: hidden; }
.ph-l { left: 137px; top: 279px; } .ph-r { left: 789px; top: 280px; }
.ph-510 img, .store-ph img, .hero-s img { width: 100%; height: 100%; object-fit: cover; }
.gray { background: var(--gray); }

/* ---------- 頁首(OTB:89 高、首屏上黑 21% 白字,離開首屏白底黑字) ---------- */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; height: 89px; display: flex; align-items: center; padding: 0 var(--edge); background: rgba(0,0,0,.21); color: #fff; transition: background .4s, color .4s; }
.hd.solid { background: var(--bg); color: var(--ink); }
.hd-logo { width: 86px; margin-right: 15px; } .hd-logo img { width: 86px; } .hd-logo .w { display: none; }
.hd:not(.solid) .hd-logo img { display: none; } .hd:not(.solid) .hd-logo .w { display: block; }
.hd-nav { display: flex; } .hd-nav a { padding: 10px 14px; font-size: 15px; }
.hd-r { margin-left: auto; display: flex; align-items: center; gap: 15px; }
.hd:not(.solid) .btn { background: #fff; color: var(--ink); }
.hd-burger { display: none; width: 44px; height: 44px; position: relative; }
.hd-burger span { position: absolute; left: 12px; right: 12px; height: 1px; background: currentColor; transition: transform .4s var(--ease); }
.hd-burger span:first-child { top: 18px; } .hd-burger span:last-child { top: 25px; }
.drawer { position: fixed; inset: 0; z-index: 40; background: var(--bg); padding: 120px var(--edge); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.drawer nav { display: flex; flex-direction: column; gap: 16px; font-size: 30px; font-weight: 300; }
body.menu-open .drawer { opacity: 1; visibility: visible; }
body.menu-open .hd { background: var(--bg); color: var(--ink); }
body.menu-open .hd-burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
body.menu-open .hd-burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- 首屏(OTB:滿版影片 900,標題 75/75 細體白字置中) ---------- */
.hero { position: relative; height: 100vh; min-height: 760px; background: var(--ink); color: #fff; overflow: hidden; }
.hero-m, .hero-s { position: absolute; inset: 0; }
.hero-s { opacity: 0; transition: opacity 1.6s var(--ease); }
.hero-s img { transform: scale(1.06); transition: transform 8s linear; }
.hero-s.on { opacity: 1; } .hero-s.on img { transform: none; }
.hero-t { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 var(--edge); font-size: 75px; line-height: 75px; font-weight: 300; text-align: center; }
.hero-side { position: absolute; right: var(--edge); top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font-family: var(--mono); font-size: 13px; letter-spacing: .05em; color: rgba(255,255,255,.75); }
.hero-dots { position: absolute; left: var(--edge); bottom: 40px; display: flex; gap: 8px; }
.hero-dots button { width: 34px; height: 20px; position: relative; }
.hero-dots button::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #fff; opacity: .4; transition: opacity .3s; }
.hero-dots button.on::after { opacity: 1; }

/* ---------- 黑帶 最新消息(OTB:h368,標 45 在 +72,三欄各 430 內距 38) ---------- */
.band { background: var(--ink); color: #fff; height: 368px; padding: 72px var(--edge) 0; }
.band-h { display: flex; align-items: center; gap: 15px; padding-left: 38px; font-size: 45px; line-height: 45px; font-weight: 300; }
.pulse { width: 14px; height: 14px; border-radius: 999px; background: var(--red); position: relative; }
.pulse::after { content: ""; position: absolute; inset: -8px; border-radius: 999px; border: 1px solid var(--red); animation: pulse 2s infinite; }
@keyframes pulse { 0% { transform: scale(.4); opacity: 1 } 100% { transform: scale(1.4); opacity: 0 } }
.band-l { display: grid; grid-template-columns: repeat(3, 430px); margin-top: 48px; }
.band-l li { padding-left: 38px; }
.band-t { font-size: 16px; line-height: 26px; font-weight: 400; min-height: 52px; }
.band-l .lk { margin-top: 43px; }

/* ---------- 關於(OTB BUILDING BRANDS:h750,左欄標 30 在 +241,巨字右溢出) ---------- */
.about { height: 750px; }
.about .col-l { top: 241px; }
.about .t30 { margin-bottom: 28px; }
.about .p16 { margin-bottom: 38px; }

/* ---------- 敘述 + 數字(OTB:h545,敘述 45/60 x293 w927 在 +87;數字三欄 299/34,+271) ---------- */
.stmt { min-height: 545px; padding: 87px var(--edge) 0; }
.stmt .t45 { margin-left: 218px; width: 927px; margin-bottom: 55px; text-wrap: balance; }
.stats { display: grid; grid-template-columns: repeat(3, 299px); column-gap: 34px; row-gap: 50px; }
.stats-c { margin-left: 218px; }
.stats .p15 { margin-top: 15px; }
.stats-s { grid-template-columns: repeat(3, 117px); row-gap: 50px; }

.car-nav { position: absolute; right: 139px; top: 308px; display: flex; gap: 24px; font-family: var(--lat); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.car-nav button { opacity: .5; transition: opacity .3s; } .car-nav button:hover { opacity: 1; }
.cards { position: absolute; left: 0; right: 0; top: 376px; display: flex; gap: 136px; padding: 0 var(--edge) 0 600px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 600px; scrollbar-width: none; cursor: grab; }
.cards::-webkit-scrollbar { display: none; }
.cards.drag { cursor: grabbing; scroll-snap-type: none; }

/* ---------- 中文巨字帶(OTB 勇者之路:h504,270 置中) ---------- */
.gband { height: 504px; display: grid; place-items: center; overflow: hidden; }

/* ---------- 特色段:左文右圖(OTB 永續:h789,標 45 在 +249,圖 637×426 在 +288) ---------- */

/* ---------- 加盟(OTB 基金會灰帶:h762,中文巨字 300 左溢出,圖 510×340 x137 +295,右欄 x945) ---------- */
.fnd { height: 762px; }
.fnd .g-box { top: 154px; left: 0; width: 900px; }
.fnd .g { position: absolute; right: 0; top: 0; color: var(--ink); }
.fnd .ph-510 { top: 295px; height: 340px; }
.fnd .col-r { top: 75px; }
.fnd .mono { margin-bottom: 8px; }
.fnd .t30 { margin-bottom: 22px; }
.fnd .p16 { margin-bottom: 36px; }
.fnd .t30b { margin-bottom: 30px; font-size: 30px; font-weight: 500; }
.fnd .stats-s { margin-bottom: 44px; }

/* ---------- 特色段 2(OTB 數字館藏 / M.A.D.E.:h750,眉標 +99,標 30 +243,圖 510×382) ---------- */
.feat2 { height: 750px; }
.feat2 .col-l, .feat2 .col-r { top: 99px; }
.feat2 .mono { margin-bottom: 129px; }
.feat2 .t30 { margin-bottom: 23px; }
.feat2 .p16 { margin-bottom: 28px; }

/* ---------- 門市據點(OTB 新聞:巨字 150 置中,每則 604 高,文 x75 w637,圖 529×352 x836 +213) ---------- */
.stores { padding-bottom: 75px; }
.stores .gband { height: auto; padding: 75px 0 0; }
.store { position: relative; height: 604px; }
.store-t { position: absolute; left: var(--edge); top: 187px; width: 637px; }
.store-tag { display: flex; justify-content: space-between; align-items: baseline; }
.store-tag .mono { color: var(--text); }
.store .p17m { margin-bottom: 75px; }
.store-ph { position: absolute; left: 836px; top: 213px; width: 529px; height: 352px; overflow: hidden; }
.store:nth-child(odd) .store-t { left: var(--r2); } .store:nth-child(odd) .store-ph { left: var(--edge); }
.store-ph img { transition: transform 1.2s var(--ease); } .store:hover .store-ph img { transform: scale(1.04); }

/* ---------- 頁尾(OTB:灰 #F2F2F2 h913,導覽列 +75,標語 83/83 粗 +181,欄 +524 從 x294 起步距 219) ---------- */
.ft { background: var(--gray); padding: 75px var(--edge) 48px; }
.ft-nav { display: flex; align-items: center; height: 53px; }
.ft-nav nav { display: flex; margin-left: 101px; } .ft-nav nav a { padding: 10px 14px; font-size: 13px; font-weight: 500; }
.ft-nav .btn { margin-left: auto; }
.ft-slogan { font-size: 60px; line-height: 72px; font-weight: 300; }   /* 原 83 粗(對標 ONLY THE BRAVE);中文粗大字怪 → 跟首屏標語同一級 60 細 */
.ft-cols { display: grid; grid-template-columns: 196px repeat(4, 196px); column-gap: 23px; margin-top: 200px; }
.ft-logo img { width: 120px; }
.ft-h { font-size: 13px; line-height: 19px; font-weight: 500; margin-bottom: 15px; }
.ft-cols ul li { font-size: 13px; line-height: 19px; font-weight: 500; color: var(--text); margin-bottom: 15px; }
.ft-cols a:hover { color: var(--ink); }
.ft-base { display: flex; justify-content: space-between; margin-top: 75px; font-size: 13px; line-height: 19px; color: var(--mute); }

/* ---------- 進場 ---------- */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } .g { transform: none !important; } .hero-s img { transition: none; transform: none; } }

/* ---------- RWD:1280 以上(10-14 由 1025 改)首屏以外等比縮放(JS 設 --z:1440 以下 = 寬/1440;以上放大三成,接近 OTB 的 rem 微縮放),1024 以下改流式 ---------- */
@media (min-width: 1280px) { main > section:not(.mkhero), .ft { zoom: var(--z, 1); } }
@media (max-width: 1279px) {
  :root { --edge: 32px; }
  .hd { height: 72px; } .hd-nav { display: none; } .hd-burger { display: block; }
  .hero { min-height: 600px; } .hero-t { font-size: 44px; line-height: 54px; } .hero-side { display: none; }
  .band { height: auto; padding: 48px var(--edge) 56px; } .band-h { padding-left: 0; font-size: 34px; line-height: 40px; }
  .band-l { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; } .band-l li { padding-left: 0; } .band-t { min-height: 0; } .band-l .lk { margin-top: 12px; }
  .sec { height: auto !important; min-height: 0 !important; padding: 64px var(--edge); }
  .col-l, .col-r { position: static; width: auto; max-width: 560px; }
  .g-box { position: static; height: auto; margin-bottom: 32px; width: auto; } .g-box .g { position: static; margin: 0; }
  .g-latin { font-size: clamp(72px, 16vw, 160px); line-height: 1; } .g-zh, .g-zh.g-300 { font-size: clamp(64px, 18vw, 160px); } .g-zh.g-150 { font-size: clamp(56px, 14vw, 120px); }
  .ph-510 { position: static; width: 100%; height: auto; aspect-ratio: 3 / 2; margin-top: 40px; }
  .stmt .t45 { margin-left: 0; width: auto; font-size: 30px; line-height: 44px; }
  .stats, .stats-c, .stats-s { margin-left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
  .brands { padding-bottom: 32px; } .car-nav { position: static; margin-bottom: 24px; }
  .cards { position: static; padding: 0; gap: 24px; }
  .gband { height: auto; padding: 48px var(--edge) 0; display: block; }
  .fnd .g { margin-left: 0; }
  .stores { padding-bottom: 0; } .stores .gband { padding-top: 0; }
  .store { height: auto; padding: 40px 0; border-top: 1px solid rgba(0,0,0,.14); }
  .store-t, .store:nth-child(odd) .store-t { position: static; width: auto; }
  .store-ph, .store:nth-child(odd) .store-ph { position: static; width: 100%; height: auto; aspect-ratio: 3 / 2; margin-top: 32px; }
  .ft { padding: 48px var(--edge) 32px; } .ft-nav nav { display: none; } .ft-slogan { margin-top: 40px; font-size: clamp(30px, 6.4vw, 56px); line-height: 1.3; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; margin-top: 64px; } .ft-logo { grid-column: 1 / -1; }
  .ft-base { flex-direction: column; gap: 8px; margin-top: 48px; }
}

/* 頁首:首屏內=透明純白/反色(mk-hero.js);過了首屏=白底實心(OTB),內容捲到底下不會跟選單疊字 */
.hd.solid { background: var(--bg); color: var(--ink); mix-blend-mode: normal; }
.hd.solid .hd-logo img { display: block; } .hd.solid .hd-logo .w { display: none; }
.hd.solid .btn { background: var(--ink); color: #fff; }

/* 頁首 logo 置中放大(Eric 10-12:原 86px 太小)— 三欄格:選單左、logo 中、按鈕右 */
.hd { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.hd-nav { grid-column: 1; grid-row: 1; justify-self: start; margin-left: -14px; }   /* 抵掉連結左內距,字緣貼 75 版邊 */
.hd-logo { grid-column: 2; grid-row: 1; width: 150px; margin: 0; }
.hd-logo img { width: 150px; }
.hd-r { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
@media (max-width: 1279px) { .hd-logo, .hd-logo img { width: 128px; } }
@media (max-width: 768px) { .hd-logo, .hd-logo img { width: 112px; } }
.hd-nav a { font-size: 18px; }   /* Eric 10-12:選單 15 → 18 */

/* 閱讀字地板 16px(Eric 10-12 要求全頁檢查)— 中文字一律 ≥16;拉丁大寫眉標/標籤(DM Mono、Inter Tight 13)屬裝飾字保留 */
body { font-size: 16px; line-height: 26px; }
.btn { font-size: 16px; }
.lk { font-size: 16px; line-height: 24px; }
.p15 { font-size: 16px; line-height: 26px; }
.p14m { font-size: 16px; }
.ft-h, .ft-cols ul li, .ft-base { font-size: 16px; line-height: 26px; }
.ft-cols ul li { margin-bottom: 8px; }
@media (min-width: 1280px) { .ft-cols { grid-template-columns: 196px repeat(4, minmax(0, 1fr)); } }   /* 欄寬撐滿 1290,16px 地址不折行;只管桌機,手機沿用上面兩欄 */

/* ---------- 最新消息輪播(黑帶;沿用品牌輪播元件) ---------- */
.band { height: auto; padding: 96px 0 104px; }
.band-top { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--edge); }
.band-h { padding-left: 0; }
.band-r { display: flex; align-items: center; gap: 34px; }
.car-nav-in { position: static; color: #fff; }
.band .btn { background: #fff; color: var(--ink); } .band .btn:hover { background: var(--red); color: #fff; }
.news-cards { position: static; margin-top: 56px; gap: 34px; padding: 0 var(--edge); scroll-padding-left: var(--edge); }
.nc { flex: none; width: 413px; scroll-snap-align: start; }   /* 3 張 413 + 2×34 = 1307 ≈ 1290,第 4 張在右邊露出 */
.nc figure { aspect-ratio: 3 / 2; overflow: hidden; background: #1a1a1a; margin: 0; }
.nc figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.nc a:hover figure img { transform: scale(1.04); }
.nc-meta { display: flex; gap: 16px; margin-top: 20px; font-size: 16px; color: rgba(255,255,255,.6); }
.nc-date { font-family: var(--lat); font-weight: 600; letter-spacing: .02em; }
.nc-t { margin: 8px 0 0; font-size: 20px; line-height: 30px; font-weight: 400; min-height: 60px; }
.nc .lk { margin-top: 16px; }
@media (max-width: 1279px) {
  .band { padding: 64px 0 72px; } .band-top { flex-direction: column; align-items: flex-start; gap: 24px; }
  .news-cards { margin-top: 32px; gap: 16px; } .nc { width: 78vw; max-width: 360px; }
}
/* 關於曼克的文字欄左緣對齊下方宣言(x293 = 版邊 75 + 218)— Eric 10-12 */
.about .col-l { left: calc(var(--edge) + 218px); }

/* 巨字顏色:黑字 + 捲動透明度(OTB 做法:黑 → 16%),取代固定灰;HOSPITALITY/FRANCHISE 這種 data-lit 的照舊灰轉黑 */
.g-latin[data-drift], .g-latin[data-land]:not(.g-lit) { color: var(--ink); will-change: transform, opacity; }   /* 10-14 落定型(JOIN US)也要黑字+透明度,不然會退回 --giant 淺灰再疊透明 → 比其他大字淺 */
/* 關於段文字欄已移到 293–713,巨字起點要讓開:基準 963 → 進場 760 */
.about .g-right .g { left: 236px; }

/* 關於段(10-12 Eric 第三輪):巨字回到原位(文字右邊、跟標題同高,從 760 起往右滑,經過照片後面);
   照片直式 420×560 在右欄 945,上緣=標題「筆畫」上緣(行框 96 + 筆畫偏移 6.58 → 103,量 Noto Sans TC 30/38 的 actualBoundingBoxAscent);
   照片只做水平移動(右 → 左),跟巨字(左 → 右)交錯,垂直不動所以上緣永遠對齊 */
.about { height: 800px; }
.about .col-l { top: 96px; }
.about .g-box { left: var(--r2); top: 0; width: 637px; height: 600px; }   /* 10-12 Eric:灰字拉高(原 96,跟標題行框同高) */
.about .g-right .g { left: 236px; }   /* 基準 963,進場 −203 → 760(讓開文字欄 713) */
.about .g-latin { font-size: 300px; line-height: 300px; }   /* 回到全站巨字標準 300(字數減少後放得下) */
.about-ph { position: absolute; left: 50%; top: 103px;   /* 10-12 Eric:左緣對齊螢幕中線(原 945 右欄) */
  width: 420px; height: 560px; overflow: hidden; z-index: 1; margin: 0; will-change: transform; }
.about-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 50%; will-change: transform; }
@media (max-width: 1279px) {
  .about { height: auto; }
  .about .g-box { position: static; width: auto; height: auto; margin: 40px 0 0; }
  .about .g-latin { font-size: clamp(72px, 18vw, 160px); line-height: 1; }
  .about-ph { position: static; width: 100%; height: auto; aspect-ratio: 3 / 4; max-width: 420px; margin-top: 32px; }
  .about-ph:not(.en) { transform: none !important; }   /* 10-14:進場動畫時交給 .en 控制 */
  .about-ph img { transform: none !important; }
}

/* 進場動畫(嘉誼案同一套,10-12 套到關於段左欄):上滑 24px 淡入,0.9s expo.out,--d 錯開 */
.en { opacity: 0; transform: translateY(24px); }
.en.in { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.19, 1, .22, 1) var(--d, 0s), transform .9s cubic-bezier(.19, 1, .22, 1) var(--d, 0s); }
@media (prefers-reduced-motion: reduce) { .en { opacity: 1; transform: none; } }
.about-ph { opacity: 0; }   /* JS 依捲動淡入;沒有 JS 或手機時下面還原 */
@media (max-width: 1279px) { .about-ph:not(.en) { opacity: 1 !important; } }   /* 10-14 平板手機改走進場動畫(data-enter-m),.en 時交給進場控制 */
html:not(.js) .about-ph { opacity: 1; }

/* 關於段(10-12 Eric 第四輪):CITIES 拆到按鈕下方往左跑;照片不再壓大字 → 棋盤格
   FOOD & 右上(跟標題同排,往右跑)/ 文字左上;CITIES 左下(往左跑)/ 照片右下。
   CITIES:靜止的起點(位移 +203)筆畫左緣 = 文字欄 293 → 框 left = 293 − 203 − 筆畫左距 12 = 78;
   筆畫上緣 = 按鈕底 357 + 80 = 437(300/300 行框裡筆畫上緣在 32)→ 框 top 405。
   照片:上緣 = CITIES 筆畫上緣 437,靠右版邊;寬 360(CITIES 起點筆畫右緣 962,照片 1005 起,進場中最近也留 76) */
@media (min-width: 1280px) {
  .about { height: 1054px; }   /* 照片底 917 + 原本留的 137 */
  .about .g-box.g-low { left: 78px; top: 405px; width: 700px; height: 300px; }
  .about .g-low .g { left: 0; right: auto; }
  .about-ph { left: auto; right: var(--edge); top: 437px; width: 360px; height: 480px; }
}
@media (max-width: 1279px) { .about .g-box.g-low { margin-top: 0; } }

/* 關於段照片濾鏡(10-12 Eric:用原圖,加濾鏡遮罩):跟首屏同一套做法 —— 淡黑遮罩壓亮度 + 降飽和收掉藍天的艷,
   讓照片跟冷灰底 #E7E8ED 融在一起。要調就改這兩個變數 */
.about-ph { --ph-shade: .14; --ph-sat: .82; }
.about-ph img { filter: saturate(var(--ph-sat)) contrast(1.04); }
.about-ph::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--ph-shade)); pointer-events: none; }
@media (max-width: 1279px) { .about-ph { position: relative; left: auto; } }

/* 關於段(10-12 Eric:照片靠中線,不要靠右)→ 照片左緣回到中線 720、尺寸回 420×560(跟文字欄同寬)。
   照片跟 CITIES 同一排,CITIES 起點要讓開:改成起點筆畫右緣對齊文字欄右緣 713(框 left = 713 − 203 − 663 + 右距 9 = −144),
   往左跑;照片進場位移 160 → 200,全程跟 CITIES 至少留 48 */
@media (min-width: 1280px) {
  .about { height: 1134px; }   /* 照片底 997 + 137 */
  .about .g-box.g-low { left: -148px; }   /* 量筆畫(含字距 −4.5)校正:−144 時起點筆畫右緣是 717,−148 才是 713 */
  .about-ph { left: 50%; right: auto; width: 420px; height: 560px; }
}

/* CITIES 下的「since 2019」(10-12 Eric 試加):Instrument Serif 斜體 60(= 首屏標語級),跟著 CITIES 一起位移、一起變淡;
   右緣對齊 CITIES 筆畫右緣,數字上緣在 CITIES 基線下 32px。絕對定位不撐高巨字框(濃淡用框中心算,高度不能變) */
.g-sub { display: block; font-style: italic; letter-spacing: -.015em; }   /* 字距跟巨字同比例(巨字 −4.5px@300 = −.015em),不然會繼承 −4.5px 擠在一起 */
@media (min-width: 1280px) {
  .about .g-sub { position: absolute; right: 8px; top: 100%; margin-top: -24px; font-size: 90px; line-height: 90px; will-change: transform; }   /* 10-12 Eric:大一點 60 → 90 */   /* right 8 = 像素掃描對齊 CITIES 筆畫右緣(90px 時) */
}
@media (max-width: 1279px) { .about .g-low .g { display: inline-block; } .about .g-sub { font-size: max(30px, .3em); line-height: 1.2; margin-top: 4px; text-align: right; padding-right: 2px; } }

/* 隱藏式頁首(10-12 Eric):首屏之後往下捲收起、往上捲滑下來(maoking.js 切 .hide) */
.hd { transition: background .4s, color .4s, transform .6s cubic-bezier(.19, 1, .22, 1); }
.hd.hide { transform: translateY(-100%); }

/* 數字計數(10-12):JS 把寬度鎖成最終寬,數字靠右長,單位不動(跑完放開寬度) */
.cnt { display: inline-flex; justify-content: flex-end; white-space: nowrap; }   /* flex-end:內容比框寬時往左溢出,不推單位 */

/* ---------- 旗下品牌段落框(各版共用):巨字 OUR BRANDS 往右跑,起點(位移 −203)筆畫左緣 = 版邊 75;跟上一段數字留 120 ---------- */
@media (min-width: 1280px) {
  .brands { height: auto; position: relative; padding: 0 var(--edge) 120px; }
  .brands .g-box.g-brands { position: absolute; left: 266px; top: 88px; width: 1400px; height: 300px; }
}
@media (max-width: 1279px) { .brands { height: auto; padding: 48px var(--edge) 56px; } }

/* ==========================================================================
   旗下品牌(10-13 定稿,源自比較版 D4):左邊品牌名單、右邊大圖釘在畫面中線,捲到哪個品牌換哪張圖
   ── 尺寸(1440 版面;1025–1440 全頁等比縮放、更寬時名單與圖尺寸固定)──
   標題線 293 = 全站文字欄(上一段宣言的左緣)。名單從標題線起:logo 欄 110 + 間 75 + 文字欄。
   名單寬 = clamp(606, 線尾離圖 75 時的可用寬, 665) —— 606 = 110 + 75 + 最長品牌名 373 + 右滑 48(右滑後不超線);
   665 = 110 + 75 + 最長標語 432 + 右滑 48。可用寬、上下墊高、釘住位置由 maoking.js 依實際尺寸算。
   大圖 418 寬 3:4,最高不超過視窗 62%,圖上緣 = 標題筆畫上緣。OUR BRANDS 上下到鄰近文字的距離相等(126,像素量)。
   ── 目前品牌(走到畫面中線那個)──四個品牌永遠全黑;目前品牌:文字整段右滑 48、左邊滑進 24px 箭頭、上方灰線疊一條往右畫出的黑線。
   ── 規則 ── 名單縮到最窄時線尾離圖仍不到 48 → 整段切「上圖下文」(.br-stack);手機/平板直式本來就是上圖下文。
   ========================================================================== */
.brands.br-sec { overflow: clip; }   /* .sec 的 overflow:hidden 會讓 sticky 失效;clip 只裁切 */
.br-list { list-style: none; }
.br-item { position: relative; border-top: 1px solid rgba(0, 0, 0, .14); }
.br-kind { color: var(--mute); }
.br-name { font-size: 45px; line-height: 60px; font-weight: 400; }
.br-meta { font-size: 16px; line-height: 26px; color: var(--mute); }
.br-logo img { width: auto; height: auto; }
.br-arrow { display: none; }
.br-thumb { overflow: hidden; }
.br-thumb img, .br-fig img { width: 100%; height: 100%; object-fit: cover; }
.br-fig { position: relative; aspect-ratio: 3 / 4; overflow: hidden; margin-left: auto; }
.br-fig img { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .6s var(--ease), transform 1.2s var(--ease); }
.br-fig img.on { opacity: 1; transform: none; }

@media (min-width: 1280px) {
  .br-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 418px; column-gap: 18px; align-items: start; padding-top: 462px; }
  .br-left { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 18px; align-content: start; }
  .br-head { grid-column: 2; max-width: 418px; }
  .br-head .t30 { margin-bottom: 28px; }
  .br-list { grid-column: 1 / 3; margin: 64px 0 0 218px; min-width: 606px; max-width: 665px; }
  .br-item { display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: 75px; align-items: start; padding: 32px 0 40px; }
  .br-kind { grid-column: 2; grid-row: 1; margin-bottom: 8px; }
  .br-name { grid-column: 2; grid-row: 2; }
  .br-line { grid-column: 2; grid-row: 3; margin-top: 8px; max-width: min(432px, calc(100% - 48px)); }
  .br-meta { grid-column: 2; grid-row: 4; margin-top: 8px; }
  .br-logo { grid-column: 1; grid-row: 2 / 4; align-self: center; justify-self: center; }   /* 上下置中於品牌名+標語 */
  .br-logo img { max-width: 110px; max-height: 110px; }
  .br-thumb { display: none; }
  .br-stage { grid-column: 2; position: sticky; top: 0; margin-top: 7px; }   /* 圖上緣 = 標題筆畫上緣(30/38 筆畫偏移 6.58) */
  /* 目前品牌 */
  .br-kind, .br-name, .br-line, .br-meta { transition: transform .9s cubic-bezier(.19, 1, .22, 1); }
  .br-item.on .br-kind, .br-item.on .br-name, .br-item.on .br-line, .br-item.on .br-meta { transform: translateX(48px); }
  .br-arrow { display: block; grid-column: 2; grid-row: 2; align-self: start; margin-top: 21px; width: 24px; height: 24px; opacity: 0; transform: translateX(-24px); transition: opacity .5s var(--ease), transform .9s cubic-bezier(.19, 1, .22, 1); pointer-events: none; }   /* 箭頭中心 = 品牌名筆畫中心 */
  .br-arrow svg { display: block; }
  .br-item.on .br-arrow { opacity: 1; transform: none; }
  .br-item::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .9s cubic-bezier(.19, 1, .22, 1); pointer-events: none; }   /* 進場往右畫出、退場往右收(同 .lk 底線) */
  .br-item.on::before { transform: scaleX(1); transform-origin: left; }
  /* 上圖下文(放不下時) */
  .br-stack .br-wrap { grid-template-columns: minmax(0, 1fr); }
  .br-stack .br-stage { display: none; }
  .br-stack .br-item { padding: 40px 0 48px; }
  .br-stack .br-thumb { display: block; grid-column: 2; grid-row: 1; aspect-ratio: 3 / 2; margin-bottom: 24px; }
  .br-stack .br-kind { grid-row: 2; } .br-stack .br-name { grid-row: 3; } .br-stack .br-line { grid-row: 4; } .br-stack .br-meta { grid-row: 5; }
  .br-stack .br-logo { grid-row: 3 / 5; }
  .br-stack .br-arrow, .br-stack .br-item::before { display: none; }
  .br-stack .br-item .br-kind, .br-stack .br-item .br-name, .br-stack .br-item .br-line, .br-stack .br-item .br-meta { transform: none; }
}
@media (max-width: 1279px) {
  .br-head .t30 { margin-bottom: 16px; }
  .br-list { margin-top: 40px; }
  .br-item { display: flex; flex-direction: column; padding: 24px 0; }
  .br-thumb { order: 0; aspect-ratio: 3 / 2; margin-bottom: 16px; }
  .br-kind { order: 1; } .br-logo { order: 2; margin: 16px 0 8px; } .br-name { order: 3; font-size: 30px; line-height: 38px; margin-top: 4px; }
  .br-line { order: 4; margin-top: 8px; } .br-meta { order: 5; margin-top: 8px; }
  .br-logo img { max-width: 120px; max-height: 72px; }
  .br-stage { display: none; }
}

/* ==========================================================================
   創辦人的話(10-13 定稿,源自比較頁 A 版):金句當主角
   ── 版面(1440;1025–1440 全頁等比縮放)── 全段左緣 = 全站文字線 293(版邊 75 + 218);介紹欄 727(293 + 418 + 16)。
   小標「創辦人的話」→ 金句 75/98 細體(左邊懸掛灰引號,筆畫頂 = 金句第一行筆畫頂)→ 署名 | 介紹(金句下 75)。
   巨字:TEAM 在小標上方、往左跑(起點筆畫左緣 293;筆畫頂 = 上一段大圖下緣,大圖底永遠在本段頂上方 120×zoom;筆畫底 → 小標 75);
         WORK 在金句右邊、往右跑(筆畫底 = 金句第二行筆畫底;起點筆畫左緣 = 金句尾 + 75)。left/top 皆像素掃描校正。
   ── 團隊合照舞台 ── 原框 293–1147、16:7(左右對稱、在署名列下 96)→ 框中心到畫面中線時釘住,捲 1.5 個視窗高:
   0–0.35 撐到全螢幕 + 清晰圖淡成預先模糊圖 + 蓋 55% 黑;0.36 標題(45 白)、0.48 起四項信念(2×2 白字)依序浮上。由 maoking.js 依視窗算。
   手機:不釘,照片 16:9 → 標題 → 信念(深色字)
   ========================================================================== */
.fq-label { font-size: 16px; line-height: 26px; color: var(--mute); }
.fq-quote { position: relative; }
.fq-quote p { font-size: 75px; line-height: 98px; font-weight: 300; }
.fq-mark { position: absolute; right: calc(100% + 16px); top: 10px; font-family: var(--serif); font-size: 150px; line-height: 150px; color: var(--giant); pointer-events: none; }
.fq-row { display: grid; grid-template-columns: 418px 418px; column-gap: 16px; align-items: start; }
.fq-sign { display: flex; flex-direction: column; gap: 8px; }
.fq-sign .mono { color: var(--mute); }
.fq-name { font-size: 30px; line-height: 38px; }
.fq-body .lk { margin-top: 16px; font-size: 16px; }
.fq-win img { width: 100%; height: 100%; object-fit: cover; }
.fq-bt { font-size: 45px; line-height: 60px; font-weight: 300; }
.fq-beliefs { list-style: none; display: grid; }
.fq-beliefs li { border-top: 1px solid rgba(0, 0, 0, .14); padding-top: 24px; }
.fq-num { font-family: var(--serif); font-size: 75px; line-height: 75px; }

@media (min-width: 1280px) {
  .fq.sec { overflow: clip visible; }   /* TEAM 伸進上一段底部的空白:垂直不裁切,水平照樣裁 */
  .fq { padding: 169px var(--edge) 120px; }
  .fq > * { margin-left: 218px; }
  .fq-quote { margin-top: 34px; }
  .fq-row { margin-top: 61px; }
  .fq .fq-g { position: absolute; margin: 0; width: 900px; height: 300px; }
  .fq .fq-g .g { left: 0; right: auto; }
  .fq .fq-team { left: 87px; top: -151px; }
  .fq .fq-work { left: 1145px; top: 159px; }
  /* 舞台 */
  .fq > .fq-pin { margin-left: calc(var(--edge) * -1); margin-right: calc(var(--edge) * -1); }   /* 撐滿整個段落寬 */
  .fq-pin { position: relative; margin-top: var(--fq-pin-mt, 96px); height: calc(var(--fq-vh, 900px) + var(--fq-run, 1350px)); }
  .fq-sticky { position: sticky; top: 0; height: var(--fq-vh, 900px); overflow: hidden; pointer-events: none; }
  .fq-win { position: absolute; overflow: hidden; }
  .fq-win img { position: absolute; inset: 0; transform-origin: 50% 50%; }
  .fq-blur { opacity: 0; }
  .fq-dim { position: absolute; inset: 0; background: #000; opacity: 0; }
  .fq-over { position: absolute; left: 50%; top: 50%; width: 900px; transform: translate(-50%, -50%); color: #fff; }
  .fq-bt { margin-bottom: 64px; opacity: 0; }
  .fq-beliefs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; row-gap: 64px; }
  .fq-beliefs li { border-top-color: rgba(255, 255, 255, .3); opacity: 0; }
  .fq-beliefs .fq-num { color: rgba(255, 255, 255, .5); }
  .fq-beliefs .t30 { margin: 16px 0 8px; }
  .fq-beliefs .p16 { color: rgba(255, 255, 255, .82); }
}
@media (max-width: 1279px) {
  .fq { padding: 64px var(--edge); }
  .fq-quote { margin-top: 16px; margin-left: 0; }   /* blockquote 預設左縮 40 */
  .fq-mark { position: static; display: block; font-size: 96px; line-height: 64px; }
  .fq-quote p { font-size: 36px; line-height: 48px; }
  .fq-row { grid-template-columns: minmax(0, 1fr); row-gap: 24px; margin-top: 32px; }
  .fq .fq-g { margin: 24px 0 0; }
  .fq-pin { margin-top: 48px; }
  .fq-win { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
  .fq-blur, .fq-dim { display: none; }
  .fq-bt { font-size: 30px; line-height: 38px; margin: 40px 0 0; }
  .fq-beliefs { grid-template-columns: minmax(0, 1fr); row-gap: 32px; margin-top: 48px; }
  .fq-num { font-size: 45px; line-height: 45px; color: var(--giant); }
  .fq-beliefs .t30 { margin: 12px 0 8px; }
}

/* 10-13 Eric 小修:
   ① 關於段 CITIES + since 2019 整組改「中線對齊圖片中線」(原本 CITIES 筆畫頂 = 圖片上緣):像素量整組中線比圖片中線高 120 → 框 top 405 → 525
   ② 宣言段(「餐飲不只是…」+ 數字)上下距離一樣、以上方為準:上方 = 關於段圖片底 → 宣言筆畫頂 235;下方原本數字 → OUR BRANDS 126 → 改 235;
      OUR BRANDS 上下相等的規則跟著走 → OUR BRANDS 筆畫底 → 品牌標題也 235(巨字 top 88 → 197、品牌區 padding-top 462 → 680) */
@media (min-width: 1280px) {
  .about .g-box.g-low { top: 525px; }
  .brands .g-box.g-brands { top: 197px; }
  .br-wrap { padding-top: 680px; }
}

/* ==========================================================================
   下方區塊修整(10-13 Eric 睡前交辦)
   ========================================================================== */
/* ① 門市卡:文字整塊上下置中於照片(原本文字頂比照片頂高 26、中心差 95)—— 文字框跟照片同高同頂,內容 flex 置中 */
@media (min-width: 1280px) {
  .store-t { top: 213px; height: 352px; display: flex; flex-direction: column; justify-content: center; }
}

/* ② 最新消息改白底(原黑底;要換回黑底:band 加 class="band-dark") */
.band { background: #fff; color: var(--ink); }
.band .car-nav-in { color: var(--ink); }
.band .btn { background: var(--ink); color: #fff; } .band .btn:hover { background: var(--red); color: #fff; }
.band .nc-meta { color: var(--mute); }
.band .nc figure { background: var(--gray); }
.band.band-dark { background: var(--ink); color: #fff; }
.band.band-dark .car-nav-in { color: #fff; }
.band.band-dark .btn { background: #fff; color: var(--ink); }
.band.band-dark .nc-meta { color: rgba(255, 255, 255, .6); }
.band.band-dark .nc figure { background: #1a1a1a; }

/* ③ 加盟 / 人才 / 願景(10-13 修整):原本巨字被照片蓋住(人才、願景兩行巨字整塊疊在照片後面;FRANCHISE 下半被照片壓、左邊還被切掉)
   新結構 =「巨字橫帶 → 文字+照片一排 → (第二行巨字橫帶)」,巨字跟照片完全分開。
   距離照 OUR BRANDS 規則:段頂 → 巨字筆畫頂 126、巨字筆畫底 → 內容 126、內容 → 第二行巨字 126、第二行筆畫底 → 段底 126(巨字 300/300 行框:筆畫頂 32、筆畫底 255)。
   一排:文字左 = 文字線 293(420 寬)+ 照片右緣 = 版邊 1365(510 寬);或照片左 = 版邊 75 + 文字 727(r2)。照片上緣 = 小標筆畫上緣。
   第一行往右跑(起點筆畫左緣 75)、第二行往左跑(起點筆畫右緣 1365),起點用 --x 像素校正 */
@media (min-width: 1280px) {
  .lw { height: auto; padding: 94px var(--edge) 81px; }
  .lw.lw-fr { padding-bottom: 120px; }
  .lw .lw-g { position: relative; top: auto; left: auto; width: auto; height: 300px; }
  .lw .lw-g1 .g { position: absolute; top: 0; left: var(--x1, 197px); right: auto; }
  .lw .lw-g2 .g { position: absolute; top: 0; right: var(--x2, 195px); left: auto; }
  .lw-row { display: grid; align-items: start; margin-top: 78px; }
  .lw-tl { grid-template-columns: 218px 420px minmax(0, 1fr) 510px; }
  .lw-tl .lw-t { grid-column: 2; } .lw-tl .lw-ph { grid-column: 4; }
  .lw-pl { grid-template-columns: 510px 142px 420px minmax(0, 1fr); }   /* 文字永遠在 727(固定欄從左量;寬螢幕不漂) */
  .lw-pl .lw-ph { grid-column: 1; grid-row: 1; } .lw-pl .lw-t { grid-column: 3; grid-row: 1; }
  .lw .lw-ph { margin-top: 4px; }   /* 照片上緣 = 小標(13px mono)筆畫上緣(像素校正) */
  #vision { --x1: 200px; } #careers { --x2: 198px; }   /* 各字起點的字邊空白不同,像素校正 */
  .lw-g2 { margin-top: 94px; }
}
.lw-ph { aspect-ratio: 4 / 3; overflow: hidden; margin: 0; }
.lw-ph.lw-ph32 { aspect-ratio: 3 / 2; }
.lw-ph img { width: 100%; height: 100%; object-fit: cover; }
.lw-t .mono { margin-bottom: 16px; }
.lw-t .t30 { margin-bottom: 23px; }
.lw-t .p16 { margin-bottom: 28px; }
.lw-fr .lw-t .p16 { margin-bottom: 36px; }
.lw-fr .t30b { margin-bottom: 30px; }
.lw-fr .stats-s { margin-bottom: 44px; }
@media (max-width: 1279px) {
  .lw { padding: 64px var(--edge); }
  .lw-row { display: flex; flex-direction: column; margin-top: 24px; }
  .lw-ph { order: -1; margin-bottom: 24px; }   /* 手機:照片在上、文字在下 */
  .lw-g2 { margin-top: 32px; }
  .store { display: flex; flex-direction: column; }
  .store-ph, .store:nth-child(odd) .store-ph { order: -1; margin: 0 0 24px; }
}

/* ④ 頁尾黑底 + MAO KING 大字(10-13 Eric:參考鍶藝/睿見大字頁尾)
   大字 = 首屏同一組重建字形(SVG),寬度撐滿內容(75–1365,跟著頁面縮放),淺灰 #E7E8ED;上方一條半透明白線,頁尾進畫面時七個字母依序從線下滑上來(錯開 0.06,同首屏字母節奏) */
.ft.ft-dark { background: #141414; color: #fff; }
.ft-dark .ft-slogan { color: #fff; }
.ft-dark .ft-h { color: rgba(255, 255, 255, .45); }
.ft-dark .ft-cols ul li { color: rgba(255, 255, 255, .82); }
.ft-dark .ft-cols a:hover { color: #fff; }
.ft-dark .ft-base { color: rgba(255, 255, 255, .45); margin-top: 34px; }
.ft-dark .ft-base a:hover { color: #fff; }
.ft-word { margin-top: 75px; padding-top: 34px; border-top: 1px solid rgba(255, 255, 255, .16); overflow: hidden; }
.ft-word svg { display: block; width: 100%; height: auto; fill: #E7E8ED; overflow: visible; }
.ftl { transform-box: fill-box; transform: translateY(115%); transition: transform .95s cubic-bezier(.2, .85, .3, 1) calc(var(--i) * .06s); }
.ft-word.in .ftl, html:not(.js) .ftl { transform: none; }
@media (prefers-reduced-motion: reduce) { .ftl { transform: none; transition: none; } }
@media (max-width: 1279px) { .ft-word { margin-top: 48px; padding-top: 24px; } .ft-dark .ft-base { margin-top: 24px; } }

/* ⑤ 下方段落節奏統一(10-13):照兩條已定規則 ——「段與段之間 235」(宣言段)+「巨字上下距離相等」(OUR BRANDS 上下 235)
   → 前段內容 → 巨字1 235、巨字1 → 內容 235、內容 → 巨字2 235、巨字2 → 下一段 235;最新消息、門市、頁尾的上方也補到 235。數值由整頁截圖逐列像素量出後校正 */
@media (min-width: 1280px) {
  .lw-row { margin-top: 187px; }
  .lw-g2 { margin-top: 203px; }
  #franchise { padding-top: 83px; }
  #careers { padding-top: 110px; }   /* 10-14 拿掉 BRIGHTER PEOPLE 後:前段 → 標題 235 */
  #vision { padding-top: 96px; }
  .band { padding-top: 109px; }
  .stores .gband { padding-top: 94px; }
  .ft { padding-top: 110px; }
}

/* 10-14 Eric:FRANCHISE → JOIN US(台灣讀者英文不好,用直白的);J 有往下的尾巴、字邊空白也不同 → 重校:起點筆畫左緣 75(--x1 203)、筆畫底(含 J 尾)→ 小標 235(內容排 margin-top 231) */
@media (min-width: 1280px) { #franchise { --x1: 203px; } #franchise .lw-row { margin-top: 231px; } }

/* 10-14 Eric:拿掉 FRANCHISE / CAREERS / VISION 小字標籤(上面段落都沒有)→ 內容第一行改成標題:
   巨字筆畫底 → 標題筆畫頂 235(排 margin-top −4)、照片上緣 = 標題筆畫上緣(30/38 筆畫偏移 → 照片 margin-top 8) */
@media (min-width: 1280px) {
  .lw-row { margin-top: 183px; }
  #franchise .lw-row { margin-top: 227px; }
  .lw .lw-ph { margin-top: 8px; }
}

/* ⑥ 加盟 第二版(10-14 Eric 示意圖,選 C):照片直式在左、右欄 JOIN US 200px + 文字;左右線照上方「創辦人的話」—— 照片左 293、右欄 727。
   照片上緣 = JOIN US 筆畫頂、下緣 = 按鈕底(grid 拉伸 + 上方 margin);JOIN US 筆畫(含 J 尾)→ 標題筆畫頂 126(Eric 示意圖比例);前段 → JOIN US 235。起點 JOIN US 筆畫左緣 = 727(往右跑) */
@media (min-width: 1280px) {
  #franchise { padding-top: 83px; padding-bottom: 119px; }   /* 10-14 JOIN US 改 300:筆畫頂往下 11 → padding 少 11,跟上一段維持 235 */
  .fr-grid { display: grid; grid-template-columns: 218px 359px 75px minmax(0, 1fr); align-items: stretch; }
  .fr-ph { grid-column: 2; aspect-ratio: auto; margin: var(--fr-pt, 23px) 0 0; }
  .lw .fr-ph { margin-top: var(--fr-pt, 23px); }
  .fr-right { grid-column: 4; }
  .lw .fr-g { height: 300px; }   /* 10-14 Eric:改回全站巨字標準 300(原本 200 跟上面的灰字不一樣大) */
  .lw .fr-g .g { font-size: 300px; line-height: 300px; left: var(--fr-x, 17px); }   /* 10-14 落定點:J 的勾(最左墨點)切齊標題墨左(四寬實測 ≤0.5px)→ 17;進場從右邊 +473 滑進來(maoking.js data-land) */
  .fr-right .lw-t { margin-top: var(--fr-tg, 136px); }   /* JOIN US 300:J 尾巴 → 標題筆畫頂維持 126 */
}
@media (max-width: 1279px) {
  .fr-grid { display: flex; flex-direction: column; }
  .fr-ph { order: -1; aspect-ratio: 3 / 2; margin-bottom: 24px; }
}

/* ⑦ 加盟 第三版(10-14 Eric:比例跟畫的差太多;文字區塊照畫的比例不要拉長;只有圖的左邊對齊;圖 3:4 直式)
   照片 3:4、左緣 293(唯一對齊線)、420×560(= 關於段照片尺寸);間距 126(Eric 示意圖);右欄從 839 起,文字欄固定 420(標題兩行、說明三行,大螢幕不再拉長);
   JOIN US 200px 起點筆畫左緣 = 右欄左緣;照片上緣 = JOIN US 筆畫頂,下緣不再硬貼按鈕底 */
@media (min-width: 1280px) {
  .fr-grid { grid-template-columns: 218px minmax(420px, 556px) 126px minmax(519px, 1fr); align-items: start; }   /* 照片寬隨螢幕放大:1440 約 427、大螢幕到 Eric 畫的 556(高 741);右欄最少 519 = JOIN US 寬 */
  .fr-ph { aspect-ratio: 3 / 4; }
  .fr-right .lw-t { max-width: 420px; }
}
@media (max-width: 1279px) { .fr-ph { aspect-ratio: 3 / 4; } }

/* ⑧ 加盟 第四版(10-14 Eric:圖縮小一點;JOIN US 和文字整塊往上拉,讓圖片上緣對齊 JOIN US 文字的中線)
   照片上緣 = JOIN US 大寫字母高度的中線(筆畫頂 + 147/2;J 的尾巴不算);照片下緣 = 按鈕底 → 照片高 = 右欄從 JOIN US 中線到按鈕底 ≈ 703、寬 527(3:4)。
   照片欄 minmax(420, 527):大螢幕到 527(上下都對齊),1440 時空間只夠 427,上緣照樣對中線、下緣比按鈕高 */
@media (min-width: 1280px) {
  .fr-grid { grid-template-columns: 218px minmax(420px, 527px) 126px minmax(519px, 1fr); }
  .lw .fr-ph { margin-top: var(--fr-pt, 144px); }   /* JOIN US 300:大寫中線在格頂下 144 */
}

/* ⑨ 人才(10-14 Eric:拿掉 BRIGHTER PEOPLE;照片左緣對齊上一段加盟「把一間店的經驗…」文字欄左緣)
   跟加盟用同一組欄(218 | 420–527 | 126 | 519 以上)→ 照片第 4 欄起點 = 加盟右欄起點(1440:846),任何寬度都切齊;文字在 293;照片 510×382(4:3)、上緣 = 標題筆畫上緣 */
@media (min-width: 1280px) {
  .ca-grid { display: grid; grid-template-columns: 218px minmax(420px, 527px) 126px minmax(519px, 1fr); align-items: start; }
  .ca-grid .lw-t { grid-column: 2; max-width: 420px; }
  .ca-grid .lw-ph { grid-column: 4; width: auto; justify-self: stretch; }   /* 10-17 Eric:原本寫死 510 → 1440 停在 1356(差頁首右緣 9px);改撐滿欄 = 右緣永遠對齊 1365 */
  .lw.lw-nog { padding-top: var(--ca-pt, 110px); padding-bottom: var(--ca-pb, 126px); }
}
@media (max-width: 1279px) { .ca-grid { display: flex; flex-direction: column; } }

/* ⑩ 理念段加照片(10-14 Eric:右邊空白區塊加一張圖)
   標題照「,」斷三行(keep-all:只在標點後換行,後台改文字也不會從詞中間斷);數字三欄收到跟標題同寬 677;
   照片直式 320 寬貼右版邊,上緣 = 標題筆畫頂、下緣 = 最後一排說明的筆畫底(--st-pt / --st-pb 像素實測);中間空隙 1440 = 75、大螢幕變寬 */
@media (min-width: 1280px) {
  .st-grid { display: grid; grid-template-columns: 218px 677px minmax(75px, 1fr) 320px; align-items: stretch; }
  .st-txt { grid-column: 2; }
  .stmt .st-txt .t45 { margin-left: 0; width: auto; word-break: keep-all; overflow-wrap: anywhere; text-wrap: wrap; }
  .stmt .st-txt .stats-c { margin-left: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-ph { grid-column: 4; margin: var(--st-pt, 11px) 0 var(--st-pb, 5px); overflow: hidden; background: var(--gray); }
  .st-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
}
@media (max-width: 1279px) {
  .st-grid { display: flex; flex-direction: column; }
  .st-ph { order: -1; aspect-ratio: 4 / 5; margin: 0 0 24px; overflow: hidden; }
  .st-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
}

/* ⑪ 灰底紋路(10-14 Eric/Sandy:灰底加淡淡的紋路;素材 = Eric 下載的 bg.jpg)
   bg-tex.webp = 原圖去掉大範圍明暗、做成上下左右無縫的 1200 圖塊、平均色調成冷灰 #E7E8ED(10-14 Eric:太深 → 紋路對比降到原圖 60%,make-bg-tex.py 最後一個參數 0.6)。
   只鋪灰底的地方:白底最新消息(.band)、黑底頁尾不加。要拿掉刪這條就好 */
html, body, .sec, html .mkhero, .hd.solid, .drawer, body.menu-open .hd { background-image: url(../img/bg-tex.webp?v=2); background-size: 860px; }   /* 首屏的 mk-hero.css 比較晚載入、會用 background 簡寫蓋掉 → 加 html 提高優先 */

/* ⑫ 關於段 FOOD &(10-14 Eric:起始位置對齊下方照片「最後位置」的左緣)
   照片是 left 50%(1440 = 720)→ 字框也改成跟 50% 走,大螢幕不會跟照片錯開;起點(−203)時筆畫左緣 = 照片左緣(像素實測校正 197;F 筆畫在字框右 6) */
@media (min-width: 1280px) {
  .about .g-box.g-right { left: 50%; }
  .about .g-right .g { left: 197px; }
}

/* ⑩-b 理念段照片進場(10-14 Eric:跟上面關於段照片一樣 —— 從右邊滑進來 + 淡入,maoking.js [data-par]);初始透明,手機/沒 JS 直接顯示 */
@media (min-width: 1280px) { .st-ph { opacity: 0; } .st-ph img { transform-origin: 50% 50%; will-change: transform; } }
html:not(.js) .st-ph { opacity: 1; }

/* ⑬ 最新消息(10-14 Eric):① 標題與卡片左緣對齊上方段落內容左緣 293(版邊 75 + 218),右邊按鈕仍貼右版邊;
   ② 左右切換改圓形 + 小箭頭:53 = 旁邊「媒體中心」按鈕高(兩者同高),細框、滑過填黑;③ 紅點拿掉(配方已刪) */
@media (min-width: 1280px) {
  .band-top { padding-left: calc(var(--edge) + 218px); }   /* 右緣 = 版邊,頁首改成跟著縮放後自然跟「線上訂位」同一條(⑭) */
  .news-cards { padding-left: calc(var(--edge) + 218px); scroll-padding-left: calc(var(--edge) + 218px); }
}
.car-nav-in { gap: 10px; }
.car-nav-in .car-btn { width: 53px; height: 53px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .2); display: grid; place-items: center; opacity: 1; color: var(--ink); transition: background .3s, border-color .3s, color .3s; }
.car-nav-in .car-btn svg { width: 16px; height: 16px; display: block; }
.car-nav-in .car-btn[data-car="-1"] svg { transform: scaleX(-1); }
.car-nav-in .car-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.band.band-dark .car-nav-in .car-btn { border-color: rgba(255, 255, 255, .3); color: #fff; }
.band.band-dark .car-nav-in .car-btn:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* ⑭ 頁首左右留白跟內容同一套縮放(10-14 Eric:頁首太寬,OTB 剛好)
   原本頁首固定 75、內容段落有縮放 → 只有 1440 兩者重合;1920 時頁首 75、內容 82.5(OTB 80)→ 頁首比內容寬。
   改成 75 × 縮放倍數(同 maoking.js 的 --z 公式,用 vw 寫在 CSS,首屏 MAO KING 載入時就讀得到):1280 = 66.7、1440 = 75、1920 = 82.5;
   首屏貼左右邊的小東西(標語起點、分頁點、往下捲提示、直排小字)也用同一個值 --hd-side(mk-hero.css / mk-hero.js) */
@media (min-width: 1280px) { :root { --hd-side: calc(100vw * 75 / 1440); } .hd { padding: 0 var(--hd-side); } }
@media (min-width: 1441px) { :root { --hd-side: calc(75px + (100vw - 1440px) * .015625); } }

/* ⑮ 加盟照片下緣 = 按鈕下緣(10-14 Eric);上緣維持 = JOIN US 大寫中線(--fr-pt)
   → 照片高度跟著右欄走(格子拉伸),比例不再固定 3:4,圖用 cover 裁;--fr-pb = 右欄底到按鈕底的距離(像素實測) */
@media (min-width: 1280px) {
  .lw .fr-ph { aspect-ratio: auto; align-self: stretch; margin-bottom: var(--fr-pb, 0px); }
}

/* ⑯ 最新消息卡片精修(10-14 Eric:卡片沒啥設計)。改前快照:index-before-newscard.html(CSS 刪掉這一段即回原樣,配方改回「了解更多」)
   ① 照片直式 4:5(全站照片同方向)+ 關於段同款淡濾鏡統一色調,滑過恢復原色;② 日期改大字同款襯線 30、分類靠右同一基線;
   ③ 拿掉「了解更多」(整張卡本來就能點)→ 見 ⑯-b */
.nc figure { aspect-ratio: 4 / 5; position: relative; }
.nc figure img { filter: saturate(.82) contrast(1.04); transition: transform 1.2s var(--ease), filter .6s var(--ease); }
.nc figure::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .1); pointer-events: none; transition: opacity .6s var(--ease); }
.nc a:hover figure img { filter: none; }
.nc a:hover figure::after { opacity: 0; }
.band .nc-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 24px; }
.band .nc-date { font-family: var(--serif); font-size: 30px; line-height: 30px; font-weight: 400; letter-spacing: -.01em; color: var(--ink); }
.band .nc-tag { font-size: 13px; line-height: 19px; color: var(--mute); }
.band .nc-t { margin-top: 14px; }
/* ⑯-b(10-14 Eric:底線不喜歡)→ 底部不放東西;滑過時照片右下浮出白色圓形小箭頭(= 輪播圓鈕同尺寸同箭頭、首屏往下捲提示同款白圓) */
.nc-go { position: absolute; right: 20px; bottom: 20px; z-index: 1; width: 53px; height: 53px; border-radius: 999px; background: #fff; color: var(--ink); display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity .4s var(--ease), transform .6s var(--ease); }
.nc-go svg { width: 16px; height: 16px; display: block; }
.nc a:hover .nc-go { opacity: 1; transform: none; }
.band.band-dark .nc-date { color: #fff; }
@media (min-width: 1280px) { .band { padding-bottom: 89px; } }   /* ⑯-b 卡片收在標題;10-14 願景段刪掉後下一段變門市 → 標題底到 LOCATIONS 筆畫頂 = 235(實測補到 89) */

/* ⑰ 門市段(10-14 Eric:灰字要有動效、卡片太散集中一點、整個區塊沒置中 → 抄 OTB News)
   OTB:新聞列放在最寬 1440 的置中框(2000 寬時 280–1720),寫死的 1440 座標在大螢幕就不會擠到左邊 → .store 最寬 1440 置中(縮放後 2000 寬同樣是 280–1720)。
   集中:文字欄 637 → 420,緊貼照片(間距 123 = OTB);文字欄落在全站內容線 293 / 727,左右交錯成鏡像;店與店之間 252 → 126;店名資訊到「線上訂位」75 → 38(= 關於段)。
   LOCATIONS:data-land 從右邊滑進來停在正中(JOIN US 同一套,不變淡、保留變黑) */
@media (min-width: 1280px) {
  .store { max-width: 1440px; margin: 0 auto; height: 478px; }
  .store:last-of-type { height: 391px; }          /* 最後一家照片底下留 39(同原本),到頁尾維持 235 */
  .stores .gband { padding-bottom: 213px; }       /* 原本第一家照片在列內往下 213,現在列頂就是照片頂 → 補在大字下方,LOCATIONS 到第一家維持 235 */
  .store-t { top: 0; width: 420px; left: calc(var(--edge) + 218px); }
  .store-ph { top: 0; }
  .store:nth-child(odd) .store-t { left: var(--r2); }
  .store .p17m { margin-bottom: 38px; }
}
.g-latin[data-land].g-lit { will-change: transform; }

/* ⑱ 門市資訊第二版(10-14 Eric:LOCATIONS 大小/動效/顏色要跟其他灰字一樣、不要置中放上面;加中文標題;卡片跳脫 OTB)
   ⑰ 的 .store / .gband 規則已無對應標籤(洗的時候清)。數值:--sv-* 像素實測校正 */
@media (min-width: 1280px) {
  .stores { padding: var(--sv-pt, 78px) var(--edge) var(--sv-pb, 114px); }
  .sv-head { position: relative; height: 300px; padding-left: 218px; display: flex; align-items: flex-end; padding-bottom: var(--sv-hb, 41px); box-sizing: border-box; }
  .sv-ht { width: 420px; }
  .sv-ht .t30 { margin-bottom: 16px; }
  /* 起點筆畫左緣 = 第二欄卡片左緣(1440:846),往右跑;欄寬會隨螢幕變,所以用百分比算 */
  .stores .sv-g { position: absolute; left: 0; top: 0; width: 100%; height: 300px; }
  .stores .sv-g .g { position: absolute; top: 0; left: calc(218px + (100% - 252px) / 2 + 34px + 203px - var(--sv-gb, 6px)); white-space: nowrap; }
  .sv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; row-gap: 126px; padding-left: 218px; margin-top: var(--sv-gt, 80px); }
}
.sv-ph { aspect-ratio: 3 / 2; overflow: hidden; margin: 0; background: var(--gray); }
.sv-ph img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.82) contrast(1.04); transition: transform 1.2s var(--ease), filter .6s var(--ease); }
.sv-card:hover .sv-ph img { filter: none; transform: scale(1.04); }
.sv-tag { display: flex; justify-content: space-between; align-items: baseline; margin-top: 24px; }
.sv-tag .mono { color: var(--text); }
.sv-card .t30 { margin-top: 10px; }
.sv-card .p17m { margin-top: 12px; }
.sv-card .btn { margin-top: 32px; }
@media (max-width: 1279px) {
  .stores { padding: 64px var(--edge) 72px; }
  .sv-head { margin-bottom: 40px; }
  .sv-ht .t30 { margin-bottom: 12px; }
  .sv-grid { display: grid; grid-template-columns: 1fr; row-gap: 56px; }
}

/* ⑱-b(10-14 Eric:LOCATIONS 從右邊進來;門市資訊左右 padding 一樣;圖卡變小)
   左右都留 293(版邊 75 + 218)→ 內容寬 854 置中,兩欄各 410;LOCATIONS 改 data-land,停下時筆畫左緣 = 第二欄卡片左緣 */
@media (min-width: 1280px) {
  .stores { padding-left: calc(var(--edge) + 218px); padding-right: calc(var(--edge) + 218px); }
  .sv-head { padding-left: 0; }
  .sv-grid { padding-left: 0; }
  .stores .sv-g .g { left: calc((100% - 34px) / 2 + 34px - var(--sv-gb, 6px)); }
}

/* ⑱-c(10-14 Eric:LOCATIONS 最終位置往左,至少露出 N 的一半)→ 停下時 N 的中線 = 畫面右緣(任何寬度都剛好露半個 N)
   字頭到 N 中線 966(實測);畫面右緣相對標題區左緣 = 100% + 293 → left = 100% + 293 − 966 = 100% − 673。
   1440 時字頭 474,會從說明文字後面經過 → 文字疊在大字上面 */
@media (min-width: 1280px) {
  .stores .sv-g .g { left: calc(100% - 673px); }
  .sv-ht { position: relative; z-index: 1; }
}

/* ⑲ 頁尾 logo 放大(10-14 Eric:有點太小)120 → 150 = 頁首 logo 寬(同一個 logo 同一個大小) */
.ft-logo img { width: 150px; }

/* ⑳ 頁尾導覽(10-14 Eric:加大 logo 跟網站地圖的距離;社群右邊空太大。第一版四欄跟內容同寬 → 「退太多」)
   第二版:網站地圖/旗下品牌/聯絡我們三欄等寬,寬度 = 原本四欄等分時的寬(1440 ≈ 250);最旁邊的社群例外,寬度跟內容;
   最後一欄字尾 = 右版邊,社群省下的空間給 logo 與網站地圖之間(第 2 軌 1fr 當空白),欄距維持 23 */
@media (min-width: 1280px) {
  .ft-cols { grid-template-columns: 196px minmax(0, 1fr) repeat(3, calc((100% - 288px) / 4)) max-content; column-gap: 23px; }
  .ft-cols > :nth-child(2) { grid-column: 3; }
}

/* ㉑ 版權列(10-14 Eric,已入排版憲法:版權/法律字樣一律 14 或 12)→ 12:頁尾導覽是 16,14 只差 1.14× 算差一點點 */
.ft-base { font-size: 12px; line-height: 18px; }

/* ⑳-b(10-14 Eric:頁尾 logo 再大;社群有點壓迫,右邊給點空間;網站地圖位置剛好不要動,只調欄寬)
   logo 150 → 210(展示區 ×1.4 大步),logo 欄 196 → 210(後面 1fr 空白吸收,網站地圖起點不變);
   三欄各讓出 25(1440:250 → 225,仍大於最長一行地址 212)→ 社群右邊留 75(= 版邊值) */
@media (min-width: 1280px) {
  .ft-cols { grid-template-columns: 210px minmax(0, 1fr) repeat(3, calc((100% - 288px) / 4 - 25px)) max-content; }
  .ft-cols > :last-child { padding-right: 75px; }
}
.ft-logo img { width: 210px; }

/* ㉒ 全站按鈕滑過統一 = 磚紅底白字(10-14 Eric:頁首訂位按鈕沒有 hover,檢查全站統一)
   頁首另外設了白底/黑底(.hd:not(.solid) .btn、.hd.solid .btn、mk-hero.css 的 .hd.plain/.blend .btn)把 .btn:hover 蓋掉 → 用更高優先補回;
   圓形上一則/下一則原本滑過變黑 → 改成跟膠囊按鈕同一個磚紅 */
.hd .btn:hover, .hd.solid .btn:hover, .hd:not(.solid) .btn:hover, .hd.plain .btn:hover, .hd.blend .btn:hover { background: var(--red); color: #fff; }
.car-nav-in .car-btn:hover, .band.band-dark .car-nav-in .car-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.band.band-dark .btn:hover { background: var(--red); color: #fff; }

/* ㉓ 平板/手機(10-14 Eric:桌機定案;平板手機把頁首「線上訂位」收進選單,不然會跑版)
   1024 以下頁首只留 logo + 選單鈕;選單裡的線上訂位 = 膠囊按鈕(滑過磚紅,同全站) */
.drawer .dr-btn { margin-top: 40px; }
@media (max-width: 1279px) { .hd-r .btn { display: none; } }

/* ㉔ 平板版(10-14 Eric 同意:1280 以下統一平板版,1280 以上才桌機縮放;768 以下手機不變)
   照片在上、文字在下(憲法 RWD 條),但照片不撐滿:直式 = 關於段照片寬 420、橫式 = 560(高約 420);
   門市卡片兩欄;統計數字三欄;內文一行最長 640(平板寬度下全寬太長難讀) */
@media (min-width: 768px) and (max-width: 1279px) {
  .st-ph, .fr-ph { width: 420px; max-width: 100%; }
  #careers .lw-ph, .br-thumb { width: 560px; max-width: 100%; }
  .sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 56px; }
  .stats-c { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  main .p16, main .p17m { max-width: 640px; }
}

/* ㉕ 平板/手機頁尾(10-14 Eric:logo 和標語統一置中 —— 頁首 logo 是置中的) */
@media (max-width: 1279px) {
  .ft-slogan { text-align: center; }
  .ft-logo { display: flex; justify-content: center; }
  .ft-logo img { display: block; }
}
.ft-slogan { word-break: keep-all; overflow-wrap: anywhere; }   /* ㉕ 標語只在「,」後換行(原本會斷成「一座城/市。」「一群好/客,」) */

/* ㉖ 品牌 logo 大小統一(10-14 Eric:前兩個 logo 看起來比較小;要統一的量測方式)
   原本是「塞進同一個框」→ 瘦高的貓王最吃虧(手機 57×72)、寬的林肯最大(89×72)。
   改成「外框面積相等」:寬 = 基準 × √寬高比,高 = 基準 ÷ √寬高比(--lr 由配方從圖檔量)。
   基準:桌機 98(最寬的林肯剛好 ≤ logo 欄 110)、平板手機 72。深色密度補正試算過不採用(三条最深會被縮,跟觀感相反) */
.br-logo img { width: calc(var(--logo-s, 98px) * sqrt(var(--lr, 1))); height: auto; max-width: none; max-height: none; }
@media (max-width: 1279px) {
  /* 平板手機:logo 上下各留 32(原本 16 / 8,Eric:讓 logo 獨立一點);槽高固定 81(= 最瘦高的貓王高度),四個品牌名起點一致 */
  .br-logo { --logo-s: 100px; height: 113px; display: flex; align-items: center; margin: 32px 0 28px; }   /* 10-14 Eric:還是太小 → 基準 72 → 100(×1.4);槽高 = 100 ÷ √0.791 = 113;下面品牌名自帶 4 → 上下都 32 */
}

/* ㉗ 選單打開時頁首用黑色 logo(10-14 Eric:首屏時頁首是白 logo,打開選單後放在灰底上看不清楚);同時關掉首屏頁首的反色混合 */
body.menu-open .hd .hd-logo img { display: block; }
body.menu-open .hd .hd-logo .w { display: none; }
body.menu-open .hd { mix-blend-mode: normal; }

/* ㉘ 平板/手機 TEAM / WORK(10-14 Eric:要一上一下、不被金句隔開,錯開排列不要直排 → TEAM 靠左、WORK 下一行從 TEAM 結束處接)
   配方已把 WORK 移到 TEAM 後面;WORK 起點 = TEAM 字寬 1.976em,放不下(WORK 2.1em 會超出)就貼右邊 */
@media (max-width: 1279px) {
  .fq .fq-team { margin: 0; }
  .fq .fq-work { margin: 0 0 32px; font-size: clamp(72px, 16vw, 160px); padding-left: min(1.976em, calc(100% - 2.1em)); }
}

/* ㉙ 平板/手機頁尾(10-14 Eric:logo 下方離選單太近;平板選單看起來不平衡,要整體置中)
   logo 下方 40 → 80;平板(768–1279)四組排成一排、整組置中、組距 64(768 寬:四組 483 + 3×64 = 675 ≤ 704),組內文字靠左;版權列也置中 */
@media (max-width: 1279px) {
  .ft-logo { margin-bottom: 40px; }   /* + 原本列距 40 = 80 */
}
@media (min-width: 768px) and (max-width: 1279px) {
  .ft-cols { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 64px; row-gap: 0; }
  .ft-cols > .ft-logo { flex-basis: 100%; margin-bottom: 80px; }
  .ft-cols > div:not(.ft-logo) { flex: none; }
  .ft-base { align-items: center; text-align: center; }
}
/* ㉙-b logo 上下距離相等(10-14 Eric 問):量筆畫 —— 下方 logo 底 → 網站地圖筆畫頂 = 88;上方標語筆畫底 → logo 頂原本 69–73(標語字級隨寬度變,字下空白 ≈ 0.165 × 字級)
   → 上方間距 = 88 − 0.165 × 標語字級,任何寬度筆畫距離都是 88 */
@media (max-width: 1279px) { .ft-cols { margin-top: calc(88px - clamp(30px, 6.4vw, 56px) * .165); } }

/* ㉚ 平板/手機門市資訊(10-14 Eric:LOCATIONS 要放在門市資訊的上方)→ 大字排第一,接標題(桌機並排不變) */
@media (max-width: 1279px) {
  .sv-head { display: flex; flex-direction: column; }
  .stores .sv-g { order: -1; }
}

/* ㉙-c 平板頁尾選單左右對齊下方 MAO KING 大字和灰線(10-14 Eric)→ 四組改左右撐滿(space-between):第一組字頭 = 內容左緣、最後一組字尾 = 內容右緣,組距平均分 */
@media (min-width: 768px) and (max-width: 1279px) {
  .ft-cols { justify-content: space-between; column-gap: 48px; }
}

/* ㉛ 平板/手機最新消息按鈕對齊(10-14 Eric:按鈕跑版)→ 舊規則 .car-nav 下邊距 24(以前文字版上一則/下一則用)讓圓鈕跟媒體中心上下錯開,拿掉 */
@media (max-width: 1279px) { .band-r .car-nav { margin-bottom: 0; } }

/* ㉜ 平板/手機關於段(10-14 Eric:FOOD & / CITIES since 2019 移到文字區塊上方)→ 大字排最前面,接文字、照片(同門市段 LOCATIONS 在標題上方) */
@media (max-width: 1279px) {
  .about { display: flex; flex-direction: column; }
  .about .g-box { order: -1; }
  .about .g-box:not(.g-low) { margin-top: 0; }
}
/* ㉜-b 平板/手機「大字 → 下方標題」統一 56(原本 CITIES 24、JOIN US 32、LOCATIONS / OUR BRANDS 56) */
@media (max-width: 1279px) { .about .g-box.g-low { margin-bottom: 32px; } .lw .fr-g { margin-bottom: 56px; } }

/* ㉝ 旗下品牌名單連到品牌頁(10-18 內頁做好):整列可點(連結撐滿整列),外觀不變;林肯、溫阿嬤有自己的網站,網址還沒給先不連 */
.br-link { color: inherit; }
.br-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ㉞ 首頁最新消息:左右圓鈕 + 媒體中心按鈕的右緣改對齊置中版型右緣(畫面右邊也空 293;10-18 Eric「比照內頁輪播辦理」,原本貼右版邊 1365) */
@media (min-width: 1280px) { .band-top { padding-right: calc(var(--edge) + 218px); } }

/* ㉟ 人才段改置中版型(10-18 Eric):右邊也空 293 —— 文字欄 293–713、照片 846–1147(左緣仍對上一段加盟文字欄);
   照片上下撐滿文字欄:上緣維持對標題筆畫、下緣 = 「查看職缺」按鈕底(同加盟段 ⑮ 的做法)。
   標題只在標點後換行(原本斷在「發揮所/長」詞中間) */
@media (min-width: 1280px) {
  .ca-grid { grid-template-columns: 218px 420px 133px minmax(0, 1fr); margin-right: 218px; align-items: stretch; }
  .ca-grid .lw-ph { aspect-ratio: auto; height: auto; align-self: stretch; }
}
#careers .lw-t .t30 { word-break: keep-all; overflow-wrap: anywhere; }

/* ㊱ 首頁最新消息卡片寬 = 內頁輪播同一規則(10-18 Eric):第三張右緣 = 圓鈕右緣(置中版型右緣,畫面右邊也空 293),第四張露多少都行。
   卡寬 = (置中框寬 − 2 個間距 34) ÷ 3;100% = 卡片列內容寬(左 293、右 75 內距之間)→ 置中框 = 100% − 218 */
@media (min-width: 1280px) { #news .news-cards .nc { width: calc((100% - 218px - 68px) / 3); } }

/* ㊲ 線框按鈕(10-18 Eric:「前往品牌網站」做成黑框線、透明底):尺寸同黑膠囊 .btn(高 53、內距 19);滑過照全站規則 = 磚紅底白字 */
.btn.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn.btn-line:hover { background: var(--red); color: #fff; box-shadow: inset 0 0 0 1px var(--red); }

/* ㊳ 頁尾社群改依品牌列(10-18;需求清單:各品牌社群連結):品牌名 + FB / IG 小圓鈕(32、白細框,滑過填白)。圓鈕不跑遮罩上滑(整欄一起進場) */
.ft-soc { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ft-ics { display: inline-flex; gap: 6px; }
.ft-ic { width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); display: grid; place-items: center; color: #fff; transition: background .3s, border-color .3s, color .3s; }
.ft-ic svg { width: 15px; height: 15px; display: block; }
.ft-ic:hover { background: var(--red); border-color: var(--red); color: #fff; }   /* 10-18 Eric:hover 錯了 → 照 ㉒ 全站按鈕滑過 = 磚紅底白字 */
.ft-cols ul li.ft-soc { margin-bottom: 10px; }
@media (max-width: 1279px) { .ft-soc { flex-direction: column; align-items: inherit; gap: 6px; } .ft-cols ul li.ft-soc { margin-bottom: 16px; } }   /* 平板手機欄窄:品牌名在上、圓鈕在下 */

/* ㊵ 頁首「餐飲品牌」下拉子選單(10-20 客戶第一次回饋之二):滑過或 Tab 到就展開,列四個品牌;面板 = 灰底紙紋、黑字,滑過變磚紅。
   首屏回捲時頁首是反色混合(blend),下拉打開那段時間改回實心頁首,面板才不會被反色 */
.hd-dd { position: relative; display: flex; }
.hd-dd > a { display: flex; align-items: center; gap: 6px; }
.hd-dd > a svg { width: 10px; height: 10px; display: block; transition: transform .3s var(--ease); }
.hd-dd:hover > a svg, .hd-dd:focus-within > a svg { transform: rotate(180deg); }
.hd-sub { position: absolute; top: 100%; left: 0; min-width: 220px; padding: 12px 0; background: var(--bg) url(../img/bg-tex.webp?v=2); background-size: 860px; color: var(--ink);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .08); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s, transform .3s var(--ease), visibility .3s; }
.hd-nav .hd-sub a { display: block; padding: 10px 24px; font-size: 16px; line-height: 26px; white-space: nowrap; color: var(--ink); }
.hd-nav .hd-sub a:hover { color: var(--red); }
.hd-dd:hover .hd-sub, .hd-dd:focus-within .hd-sub { opacity: 1; visibility: visible; transform: none; }
.hd.blend:has(.hd-dd:hover), .hd.blend:has(.hd-dd:focus-within) { mix-blend-mode: normal; color: var(--ink); background: var(--bg) url(../img/bg-tex.webp?v=2); background-size: 860px; }
/* 手機/平板選單:「餐飲品牌」下面直接列四個品牌(小一號、縮排) */
.drawer .dr-sub { display: flex; flex-direction: column; gap: 10px; margin: -4px 0 4px 20px; font-size: 18px; }
.drawer .dr-sub a { color: var(--text); }