/* 優惠 App（樣品）：Apple TV App 的骨架 —— 上面大輪播、下面一排排橫滑、底部浮動分頁列。
   深色底讓官方餐點圖跳出來；每張卡吃自己品牌的 --bc／--bi。 */
:root{ --bg:#0E0C0B; --card:#1C1917; --line:rgba(255,255,255,.08); --tx:#F5F1EC; --sub:#A8A29E;
  --ease:cubic-bezier(.2,.8,.2,1); --pop:cubic-bezier(.34,1.56,.64,1); --gut:16px; }
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scrollbar-width:none; }
html::-webkit-scrollbar{ display:none; }
body.ap{ margin:0; background:var(--bg); color:var(--tx); font-family:"Noto Sans TC",system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  padding-bottom:96px; overflow-x:hidden; scrollbar-width:none; }
body.ap::-webkit-scrollbar{ display:none; }
body.ap.lock{ overflow:hidden; }
a{ color:inherit; text-decoration:none; }
img{ display:block; }

/* ---------- 頂列 ---------- */
.ap-top{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:12px; padding:10px var(--gut);
  background:linear-gradient(var(--bg) 60%, transparent); }
.ap-logo{ flex:none; background:#fff; border-radius:10px; padding:4px 7px; }
.ap-logo img{ height:24px; width:auto; }
.ap-top h1{ margin:0; font-size:19px; font-weight:900; line-height:1.15; }
.ap-top h1 small{ display:block; font-size:12px; font-weight:700; color:var(--sub); }

/* ---------- 大輪播：今天最強 ---------- */
.ap-hero{ position:relative; margin:0 0 6px; }
.ap-slides{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.ap-slides::-webkit-scrollbar{ display:none; }
.ap-slide{ position:relative; flex:0 0 100%; scroll-snap-align:center; height:min(68vh, 560px); overflow:hidden; isolation:isolate;
  background:radial-gradient(120% 80% at 50% 25%, color-mix(in srgb, var(--bc) 85%, #fff) 0%, var(--bc) 45%, color-mix(in srgb, var(--bc) 45%, #000) 100%); }
.ap-slide::after{ content:""; position:absolute; inset:auto 0 0; height:55%; z-index:0; background:linear-gradient(transparent, rgba(14,12,11,.55) 45%, var(--bg)); }
.ap-slidepic{ position:absolute; inset:4% 4% 34%; display:flex; align-items:center; justify-content:center; z-index:0; }
.ap-slidepic img{ max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 24px 30px rgba(0,0,0,.45)); }
.ap-slidepic .ap-nopic{ font-size:22vw; }
.ap-slidetext{ position:absolute; inset:auto 0 30px; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 var(--gut); gap:4px; color:#fff; }
.ap-slidetext small{ font-size:14px; font-weight:800; opacity:.85; letter-spacing:.04em; }
.ap-slidetext b{ font-size:clamp(52px, 15vw, 104px); font-weight:900; line-height:.95; letter-spacing:-.03em; text-shadow:0 4px 18px rgba(0,0,0,.5); }
.ap-slidename{ font-size:clamp(17px, 4.6vw, 24px); font-weight:800; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.ap-slidecta{ margin-top:10px; display:inline-flex; align-items:center; gap:10px; padding:10px 22px; border-radius:999px; background:#fff; color:#1C1410;
  font-weight:800; font-size:16px; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.ap-slidecta strong{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:24px; letter-spacing:.05em; }
.ap-slidecta i{ font-style:normal; font-size:12px; color:#78716C; }
.ap-dots{ position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:7px; z-index:2; }
.ap-dots i{ width:7px; height:7px; border-radius:4px; background:rgba(255,255,255,.35); transition:width .3s var(--ease), background .3s; }
.ap-dots i.on{ width:22px; background:#fff; }

/* ---------- 品牌捷徑 ---------- */
.ap-chips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:6px var(--gut) 4px; }
.ap-chips::-webkit-scrollbar{ display:none; }
.ap-chips a{ flex:none; padding:7px 14px; border-radius:999px; font-weight:900; font-size:14px; background:var(--bc); color:var(--bi); }
.ap-chips small{ margin-left:5px; font-size:11px; opacity:.7; }

/* ---------- 一排排橫滑 ---------- */
.ap-row{ margin-top:22px; scroll-margin-top:70px; }
.ap-row h2{ margin:0 0 10px; padding:0 var(--gut); display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; font-size:21px; font-weight:900; }
.ap-row h2 span{ white-space:nowrap; }
.ap-row h2 small{ order:3; flex-basis:100%; font-size:12px; font-weight:700; color:var(--sub); }
.ap-arrows{ display:none; gap:6px; flex:none; }
.ap-arrows button{ width:32px; height:32px; border-radius:50%; border:0; cursor:pointer; background:#292524; color:#fff; font-size:16px; font-weight:900; }
.ap-arrows button:hover{ background:#44403C; }
@media (hover:hover) and (pointer:fine){ .ap-arrows{ display:flex; } }
.ap-row h2 b{ margin-left:auto; flex:none; font-size:13px; color:var(--sub); }
.ap-row h2 b::after{ content:" ›"; }
.ap-rail{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--gut); padding:0 var(--gut) 6px; scrollbar-width:none; }
.ap-rail::-webkit-scrollbar{ display:none; }

/* ---------- 優惠卡＝復古速食海報（作者 2026-11-01 參考圖 002） ----------
   奶油紙底、上面大字、中間去背餐點＋背景花樣、底下品牌色斜角條放代碼。
   --bt＝標題字色（淺色品牌用深字）、--bs＝標題錯位陰影色。三種背景 .ap-v0/1/2 輪流。 */
.ap-card{ --paper:#FBF3E4; flex:0 0 min(64vw, 250px); scroll-snap-align:start; position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:6px; background:var(--paper); color:#2A1A10; box-shadow:0 10px 24px rgba(0,0,0,.35); transition:transform .25s var(--ease); }
.ap-card:active{ transform:scale(.97); }
.ap-tagline{ display:flex; justify-content:space-between; padding:10px 12px 2px; font-size:10.5px; font-weight:900; letter-spacing:.18em; color:var(--bt, var(--bc)); opacity:.85; }
.ap-tagline::after{ content:"★"; letter-spacing:0; }
.ap-hook{ padding:0 12px; font-size:42px; font-weight:900; line-height:1; letter-spacing:-.03em; color:var(--bt, var(--bc));
  text-shadow:3px 3px 0 var(--bs, #F6C744); overflow-wrap:anywhere; }
.ap-long .ap-hook{ font-size:30px; }
.ap-pic{ position:relative; isolation:isolate; margin-top:6px; aspect-ratio:5/4; display:flex; align-items:center; justify-content:center; }
.ap-pic::before{ content:""; position:absolute; z-index:-1; }
/* 圖一律鎖在框內：絕對定位＋contain，細高（星巴克杯）或扁寬的圖都只會縮，不會撐高卡片。不靠 flex 子項的百分比高度（各瀏覽器算法不一） */
.ap-pic img{ position:absolute; left:7%; top:7%; width:86%; height:86%; object-fit:contain; filter:drop-shadow(0 10px 10px rgba(60,30,10,.35)); }
.ap-pic::after{ position:absolute; left:10px; bottom:4px; z-index:1; font:400 20px/1 "Shrikhand", "Noto Sans TC", cursive; color:var(--bt, var(--bc));
  transform:rotate(-8deg); text-shadow:2px 2px 0 var(--paper), -1px -1px 0 var(--paper); }
/* 背景一：格紋帶 */
.ap-v0 .ap-pic::before{ left:0; right:0; top:32%; bottom:32%; background:repeating-conic-gradient(var(--bc) 0 25%, transparent 0 50%) 0 0/18px 18px; opacity:.9; }
.ap-v0 .ap-pic::after{ content:"Hot Deal!"; }
/* 背景二：放射光芒 */
.ap-v1 .ap-pic::before{ inset:-30%; background:repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--bc) 55%, var(--paper)) 0 7deg, transparent 7deg 18deg);
  -webkit-mask:radial-gradient(closest-side, #000 30%, transparent 75%); mask:radial-gradient(closest-side, #000 30%, transparent 75%); }
.ap-v1 .ap-pic::after{ content:"Yummy!"; }
/* 背景三：方格紙＋品牌色大圓 */
.ap-v2 .ap-pic::before{ inset:0; background:radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--bc) 80%, var(--paper)) 0 36%, transparent 36.5%),
  linear-gradient(color-mix(in srgb, var(--bc) 22%, transparent) 1px, transparent 1px) 0 0/16px 16px,
  linear-gradient(90deg, color-mix(in srgb, var(--bc) 22%, transparent) 1px, transparent 1px) 0 0/16px 16px; }
.ap-v2 .ap-pic::after{ content:"Tasty!"; }
.ap-nopic{ font-size:34px; font-weight:900; color:var(--bt, var(--bc)); }
.ap-sticker{ position:absolute; right:6px; top:-4px; z-index:2; width:66px; aspect-ratio:1; display:flex; align-items:center; justify-content:center; text-align:center;
  font-style:normal; font-weight:900; font-size:13px; line-height:1.05; padding:8px; background:#F6C744; color:#2A1A10; transform:rotate(10deg);
  clip-path:polygon(50% 0,61% 13%,77% 6%,79% 22%,95% 24%,88% 39%,100% 50%,88% 61%,95% 76%,79% 78%,77% 94%,61% 87%,50% 100%,39% 87%,23% 94%,21% 78%,5% 76%,12% 61%,0 50%,12% 39%,5% 24%,21% 22%,23% 6%,39% 13%); }
.ap-body{ display:flex; flex-direction:column; gap:2px; padding:6px 12px 10px; flex:1; }
.ap-name{ font-size:14.5px; font-weight:900; color:#2A1A10; line-height:1.3; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
/* 優惠內容一句話（作者 2026-10-27：卡片要說清楚優惠是什麼）*/
.ap-offer{ font-size:12.5px; color:#5C4A3D; line-height:1.35; margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ap-foot{ display:flex; align-items:center; gap:8px; padding:16px 12px 11px; margin-top:-4px; background:var(--bc); color:var(--bi);
  clip-path:polygon(0 9px, 100% 0, 100% 100%, 0 100%); }
.ap-foot em{ font-style:normal; font-size:12px; font-weight:700; opacity:.85; margin-left:auto; white-space:nowrap; }
.ap-code{ font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:800; font-size:20px; letter-spacing:.05em; padding:1px 9px; border-radius:6px; background:var(--paper); color:#2A1A10; }
.ap-use{ font-size:12px; font-weight:800; padding:3px 9px; border-radius:6px; background:#44403C; color:#fff; }
.ap-use-app{ background:#2563EB; } .ap-use-online{ background:#7C3AED; } .ap-use-store{ background:#15803D; } .ap-use-delivery{ background:#DB2777; }
.ap-note{ margin:30px var(--gut) 0; font-size:12px; color:var(--sub); text-align:center; }

/* ---------- 輪播的海報裝飾（光芒、網點、店名鏤空大字、膠帶、爆炸貼） ---------- */
.ap-deco{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.ap-deco i{ position:absolute; font-style:normal; }
.ap-rays{ left:50%; top:34%; width:220vmax; height:220vmax; margin:-110vmax 0 0 -110vmax; opacity:.22;
  background:repeating-conic-gradient(from 0deg, #fff 0 6deg, transparent 6deg 18deg); animation:spin 60s linear infinite;
  -webkit-mask:radial-gradient(closest-side, #000 8%, transparent 60%); mask:radial-gradient(closest-side, #000 8%, transparent 60%); }
.ap-dots2{ inset:0; opacity:.18; background:radial-gradient(rgba(0,0,0,.9) 1.4px, transparent 1.6px) 0 0/12px 12px;
  -webkit-mask:linear-gradient(160deg, #000, transparent 55%); mask:linear-gradient(160deg, #000, transparent 55%); }
.ap-wm{ left:-4%; top:6%; white-space:nowrap; font-size:clamp(90px, 26vw, 260px); font-weight:900; line-height:1; letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.22); transform:rotate(-8deg); }
.ap-tape{ left:-40px; top:22px; padding:6px 60px; transform:rotate(-12deg); background:#FDE047; color:#1C1410; font-size:12px; font-weight:900; letter-spacing:.08em;
  box-shadow:0 4px 0 rgba(0,0,0,.25); white-space:nowrap; }
.ap-slidepic{ position:absolute; }
.ap-burst{ position:absolute; right:6%; top:4%; width:clamp(78px, 20vw, 130px); aspect-ratio:1; display:flex; align-items:center; justify-content:center; text-align:center;
  font-style:normal; font-size:clamp(17px, 4.4vw, 28px); font-weight:900; line-height:1; color:#1C1410; background:#FDE047;
  clip-path:polygon(50% 0,61% 13%,77% 6%,79% 22%,95% 24%,88% 39%,100% 50%,88% 61%,95% 76%,79% 78%,77% 94%,61% 87%,50% 100%,39% 87%,23% 94%,21% 78%,5% 76%,12% 61%,0 50%,12% 39%,5% 24%,21% 22%,23% 6%,39% 13%);
  transform:rotate(10deg); animation:wob 2.4s ease-in-out infinite; filter:drop-shadow(0 6px 0 rgba(0,0,0,.25)); }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes wob{ 50%{ transform:rotate(-4deg) scale(1.06); } }

/* ---------- 一家一個色塊 ---------- */
.ap-brand{ margin:22px var(--gut) 0; padding:18px 0 16px; border-radius:24px; overflow:hidden; position:relative; isolation:isolate;
  background:linear-gradient(160deg, color-mix(in srgb, var(--bc) 70%, #000) 0%, color-mix(in srgb, var(--bc) 30%, #0E0C0B) 70%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bc) 60%, transparent); }
.ap-brand::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.12; background:radial-gradient(#fff 1.2px, transparent 1.5px) 0 0/14px 14px;
  -webkit-mask:linear-gradient(200deg, #000, transparent 45%); mask:linear-gradient(200deg, #000, transparent 45%); }
.ap-brand h2{ padding:0 18px; }
.ap-brand h2 > span:first-child{ display:inline-block; padding:4px 14px; border-radius:12px; background:var(--bc); color:var(--bi); font-size:24px; box-shadow:0 4px 0 rgba(0,0,0,.3); }
.ap-brand h2 small{ color:color-mix(in srgb, #fff 75%, var(--bc)); margin-top:6px; }
.ap-brand h2 b{ color:#fff; opacity:.8; }
.ap-brand .ap-rail{ padding:0 18px 4px; scroll-padding:0 18px; }

/* ---------- 開場（作者 2026-11-01 參考圖 001）：黃底大字＋一堆手機裡裝著餐點，約 3 秒自己退場 ----------
   退場純 CSS（JS 壞了也會消失）；點一下可略過；同一次瀏覽只演一次（inline script 判斷）。
   網頁內容一直都在底下的 HTML 裡，開場只是蓋在上面的表演，不影響搜尋引擎。 */
.ap-splash{ --sy:#F2B33D; position:fixed; inset:0; z-index:100; overflow:hidden; background:var(--sy); color:#1C1410; cursor:pointer;
  animation:spOut .45s var(--ease) 2.6s forwards; }
.ap-splash.gone{ animation:spOut .3s var(--ease) forwards; }
@keyframes spOut{ to{ opacity:0; visibility:hidden; transform:translateY(-3%); } }
.sp-text{ position:absolute; left:var(--gut); right:var(--gut); top:calc(env(safe-area-inset-top) + 7vh); }
.sp-text b, .sp-text strong{ display:block; font-weight:900; line-height:1.02; letter-spacing:-.02em; font-size:clamp(40px, 12.5vw, 104px); animation:spTx .55s var(--ease) both; }
.sp-text strong{ color:#A3262A; animation-delay:.15s; }
.sp-text p{ margin:18px 0 0; display:flex; align-items:center; gap:10px; font-size:clamp(14px, 4vw, 22px); font-weight:900; letter-spacing:.22em; animation:spTx .55s var(--ease) .3s both; }
.sp-text p img{ height:1.9em; width:auto; }
.sp-text p span{ padding:3px 10px; border-radius:8px; background:#A3262A; color:#FBF3E4; letter-spacing:.06em; }
@keyframes spTx{ from{ opacity:0; transform:translateY(24px); } }
.sp-phones{ position:absolute; left:0; right:0; bottom:0; height:56%; }
.sp-ph{ position:absolute; left:var(--x); top:var(--y); width:var(--w); aspect-ratio:9/17; border-radius:14%/7.5%; background:#fff;
  animation:spIn .6s var(--pop) var(--d) both; }
.sp-ph::before{ content:""; position:absolute; left:38%; right:38%; top:5.5%; height:2.2%; border-radius:9px; background:#E7DCC8; }
.sp-ph::after{ content:""; position:absolute; left:50%; bottom:5%; width:9%; aspect-ratio:1; margin-left:-4.5%; border-radius:50%; background:#E7DCC8; }
.sp-ph svg{ position:absolute; left:7%; right:7%; top:12%; bottom:15%; width:86%; height:73%; background:var(--sy); }
@keyframes spIn{ from{ opacity:0; transform:translateY(60px) rotate(-6deg) scale(.7); } }
@media (min-width:900px), (min-aspect-ratio:5/4){
  .sp-text{ right:auto; width:44%; top:50%; transform:translateY(-50%); }
  .sp-text b, .sp-text strong{ font-size:min(6.4vw, 104px); }
  .sp-phones{ left:48%; top:0; height:auto; }
}

/* ---------- 代碼本 ---------- */
.ap-viewtitle{ margin:6px var(--gut) 14px; font-size:30px; font-weight:900; }
.ap-viewtitle small{ display:block; font-size:13px; font-weight:700; color:var(--sub); }
.ap-bookbrand{ margin:0 var(--gut) 22px; }
.ap-bookbrand h3{ margin:0 0 8px; display:flex; align-items:baseline; gap:8px; font-size:18px; font-weight:900; }
.ap-bookbrand h3::before{ content:""; width:10px; height:10px; border-radius:3px; background:var(--bc); align-self:center; }
.ap-bookbrand h3 small{ font-size:12px; color:var(--sub); font-weight:700; }
.ap-bookbrand ol{ list-style:none; margin:0; padding:0; border-radius:14px; overflow:hidden; background:var(--card); border:1px solid var(--line); }
.ap-bookbrand li + li{ border-top:1px solid var(--line); }
.ap-bookbrand li a{ display:flex; align-items:center; gap:12px; padding:8px 12px; }
.ap-bookpic{ flex:none; width:52px; height:52px; border-radius:10px; background:var(--bc); display:flex; align-items:center; justify-content:center; }
.ap-bookpic img{ max-width:100%; max-height:100%; width:88%; height:88%; object-fit:contain; }
.ap-booktext{ min-width:0; flex:1; display:flex; flex-direction:column; }
.ap-booktext b{ font-size:15px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-booktext small{ font-size:12px; color:var(--sub); }
.ap-bookbrand strong{ flex:none; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:26px; font-weight:800; letter-spacing:.05em; }

/* ---------- 搜尋 ---------- */
#ap-q{ display:block; width:calc(100% - var(--gut) * 2); margin:0 var(--gut) 16px; padding:14px 18px; border-radius:14px; border:0; outline:0;
  background:var(--card); color:var(--tx); font:inherit; font-size:17px; box-shadow:inset 0 0 0 1px var(--line); }
#ap-q:focus{ box-shadow:inset 0 0 0 2px #F5F1EC; }
.ap-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; padding:0 var(--gut); }
.ap-grid .ap-card{ flex:none; }
.ap-empty{ grid-column:1/-1; text-align:center; color:var(--sub); padding:40px 0; }

/* ---------- 底部浮動分頁列 ---------- */
.ap-tabs{ position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:60; display:flex; gap:4px; padding:5px;
  border-radius:999px; background:rgba(41,37,36,.72); -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); }
.ap-tabs button{ display:flex; flex-direction:column; align-items:center; gap:1px; min-width:76px; padding:6px 14px; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:#D6D3D1; font:inherit; font-size:11px; font-weight:800; }
.ap-tabs button span{ font-size:20px; line-height:1.1; }
.ap-tabs button.on{ background:rgba(255,255,255,.14); color:#fff; }

/* ---------- 兌換卡（底部彈出） ---------- */
.ap-sheet{ position:fixed; inset:0; z-index:80; display:flex; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:fade .25s both; }
.ap-sheet[hidden]{ display:none; }
.ap-sheetbox{ position:relative; width:min(100%, 520px); max-height:92dvh; overflow:auto; scrollbar-width:none; border-radius:24px 24px 0 0; background:var(--card);
  padding-bottom:calc(20px + env(safe-area-inset-bottom)); animation:up .4s var(--ease) both; }
.ap-sheetbox::-webkit-scrollbar{ display:none; }
.ap-shpic{ position:relative; height:min(36vh, 300px); display:flex; align-items:center; justify-content:center;
  background:radial-gradient(110% 90% at 50% 30%, color-mix(in srgb, var(--bc) 80%, #fff), var(--bc) 55%, color-mix(in srgb, var(--bc) 55%, #000)); }
.ap-shpic img{ max-width:100%; max-height:100%; width:86%; height:90%; object-fit:contain; filter:drop-shadow(0 16px 20px rgba(0,0,0,.4)); animation:pop .5s var(--pop) .1s both; }
.ap-shpic::before{ content:""; position:absolute; top:8px; left:50%; width:40px; height:5px; margin-left:-20px; border-radius:3px; background:rgba(255,255,255,.6); }
.ap-x{ position:absolute; right:12px; top:12px; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer; background:rgba(0,0,0,.4); color:#fff; font-size:18px; z-index:2; }
.ap-shbody{ padding:16px 20px 0; display:flex; flex-direction:column; gap:6px; }
.ap-shbrand{ font-size:13px; font-weight:800; color:var(--sub); }
.ap-shhook{ font-size:44px; font-weight:900; line-height:1; letter-spacing:-.02em; }
.ap-shtitle{ margin:0; font-size:20px; font-weight:800; }
.ap-shprice{ font-size:14px; color:var(--sub); display:flex; gap:10px; flex-wrap:wrap; }
.ap-shprice b{ color:var(--tx); font-size:18px; } .ap-shprice s{ opacity:.8; }
.ap-ticket{ margin-top:10px; border-radius:18px; overflow:hidden; background:#fff; color:#1C1410; text-align:center; }
.ap-ticket h4{ margin:0; padding:9px 14px; font-size:15px; font-weight:900; color:#fff; background:#1C1410; }
.ap-ticket.how-app h4{ background:#2563EB; } .ap-ticket.how-online h4{ background:#7C3AED; } .ap-ticket.how-store h4{ background:#15803D; } .ap-ticket.how-delivery h4{ background:#DB2777; }
.ap-ticket strong{ display:block; padding:10px 0 4px; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:clamp(56px, 17vw, 84px); font-weight:800; letter-spacing:.06em; line-height:1.05; }
.ap-ticket p{ margin:0; padding:4px 16px 14px; font-size:13px; color:#57534E; }
.ap-btns{ display:flex; gap:10px; margin-top:12px; }
.ap-btns .main{ flex:1.6; white-space:nowrap; }
.ap-btns > *{ flex:1; white-space:nowrap; padding:13px; border-radius:14px; border:0; cursor:pointer; font:inherit; font-size:15px; font-weight:800; text-align:center;
  background:#292524; color:var(--tx); }
.ap-btns .main{ background:var(--bc); color:var(--bi); }

/* ---------- 全螢幕給店員看 ---------- */
.ap-full{ position:fixed; inset:0; z-index:90; background:#fff; color:#1C1410; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:24px; text-align:center; cursor:pointer; animation:fade .2s both; }
.ap-full[hidden]{ display:none; }
.ap-full small{ font-size:18px; font-weight:800; color:#57534E; }
.ap-full b{ font-size:26px; font-weight:900; }
.ap-full strong{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:min(26vw, 30vh); font-weight:800; letter-spacing:.04em; line-height:1; }
.ap-full i{ font-style:normal; font-size:14px; color:#78716C; }

@keyframes fade{ from{ opacity:0; } }
@keyframes up{ from{ transform:translateY(100%); } }
@keyframes pop{ from{ opacity:0; transform:scale(.7) rotate(-6deg); } }

/* ---------- 電腦：輪播改左字右圖、卡片多露幾張 ---------- */
@media (min-width:900px){
  :root{ --gut:max(32px, calc((100vw - 1280px) / 2)); }
  .ap-top h1{ font-size:22px; }
  .ap-slide{ height:min(72vh, 600px); }
  .ap-slide::after{ inset:0 auto 0 0; width:60%; height:auto; background:linear-gradient(90deg, rgba(14,12,11,.7), transparent); }
  .ap-slidepic{ inset:6% var(--gut) 6% 44%; }
  .ap-slidetext{ inset:0 auto 0 0; width:52%; justify-content:center; align-items:flex-start; text-align:left; padding-left:var(--gut); }
  .ap-slidetext b{ font-size:clamp(80px, 9vw, 150px); }
  .ap-slidename{ font-size:28px; }
  .ap-card{ flex-basis:250px; }
  .ap-rays{ left:72%; top:50%; }
  .ap-wm{ top:auto; bottom:-4%; left:-2%; font-size:clamp(160px, 17vw, 300px); }
  .ap-tape{ left:-30px; top:30px; font-size:14px; }
  .ap-burst{ right:4%; top:6%; }
  .ap-brand{ padding:24px 0 20px; }
  .ap-brand h2, .ap-brand .ap-rail{ padding-left:24px; padding-right:24px; }
  .ap-brand .ap-rail{ scroll-padding:0 24px; }
  .ap-card:hover{ transform:translateY(-4px); }
  .ap-sheet{ align-items:center; }
  .ap-sheetbox{ border-radius:24px; }
}
/* 手機的長斜影（參考圖 001 那種往右下拖長的影子） */
.sp-ph{ box-shadow:2px 2px 0 #D9962C,4px 4px 0 #D9962C,6px 6px 0 #D9962C,8px 8px 0 #D9962C,10px 10px 0 #D9962C,12px 12px 0 #D9962C,14px 14px 0 #D9962C,16px 16px 0 #D9962C,18px 18px 0 #D9962C,20px 20px 0 #D9962C,22px 22px 0 #D9962C,24px 24px 0 #D9962C,26px 26px 0 #D9962C,28px 28px 0 #D9962C,30px 30px 0 #D9962C,32px 32px 0 #D9962C,34px 34px 0 #D9962C,36px 36px 0 #D9962C,38px 38px 0 #D9962C,40px 40px 0 #D9962C,42px 42px 0 #D9962C,44px 44px 0 #D9962C,46px 46px 0 #D9962C,48px 48px 0 #D9962C,50px 50px 0 #D9962C,52px 52px 0 #D9962C,54px 54px 0 #D9962C,56px 56px 0 #D9962C,58px 58px 0 #D9962C,60px 60px 0 #D9962C; }