/* 2026-10-03 T1003-13 手機選單:延續官方 LINE 選單的寶石色材質(墨綠漆面/焦糖皮革/寶藍絲絨/象牙皮/錘金)+統一左上暖光;
   打開=魔術方塊(原百葉窗版備份 menu.css.bak-blinds-20261003):方塊掉落疊好→翻成整面墨綠→選單落下排好(按鈕集中在拇指好按的下半部)。由 site.js 載入,只在 ≤1100px 啟用 */
:root{
  --mm-gold:#D9B36A; --mm-gold-hi:#F6E2A8; --mm-gold-lo:#8A6424;
  --mm-ivory:#F4E9D0; --mm-emerald:#0E3B2D; --mm-emerald-d:#072319;
  --mm-ease:cubic-bezier(.2,.8,.2,1);
  /* 材質紋理(程式產生,不是圖片檔) */
  --mm-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' seed='7' stitchTiles='stitch'/><feDiffuseLighting lighting-color='%23fff' surfaceScale='1.6'><feDistantLight azimuth='225' elevation='50'/></feDiffuseLighting><feComponentTransfer><feFuncR type='linear' slope='0.7' intercept='-0.039'/><feFuncG type='linear' slope='0.7' intercept='-0.039'/><feFuncB type='linear' slope='0.7' intercept='-0.039'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  --mm-pebble:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.21' numOctaves='2' seed='3' stitchTiles='stitch'/><feDiffuseLighting lighting-color='%23fff' surfaceScale='2.2'><feDistantLight azimuth='225' elevation='50'/></feDiffuseLighting><feComponentTransfer><feFuncR type='linear' slope='0.55' intercept='0.076'/><feFuncG type='linear' slope='0.55' intercept='0.076'/><feFuncB type='linear' slope='0.55' intercept='0.076'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  --mm-pile:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' seed='11' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23f)' opacity='.55'/></svg>");
  --mm-hammer:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.15' numOctaves='2' seed='9' stitchTiles='stitch'/><feDiffuseLighting lighting-color='%23fff' surfaceScale='3.2'><feDistantLight azimuth='225' elevation='44'/></feDiffuseLighting><feComponentTransfer><feFuncR type='linear' slope='0.55' intercept='0.076'/><feFuncG type='linear' slope='0.55' intercept='0.076'/><feFuncB type='linear' slope='0.55' intercept='0.076'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  --mm-gold-bevel:linear-gradient(135deg,#FBE9B6 0%,#D9B36A 22%,#8A6424 48%,#E8C77E 72%,#9C7230 100%);
}

/* ── 頁首的選單鈕:墨綠漆面小盒+三條金線(手機頁首唯一的深色點,和 LINE 選單同一套) ── */
@media (max-width:1100px){
  .burger.mm-btn{display:grid;place-items:center;width:48px;height:42px;padding:0;border:0;border-radius:12px;cursor:pointer;position:relative;
    background:radial-gradient(120% 90% at 25% 15%,rgba(255,255,255,.22),rgba(255,255,255,0) 45%),linear-gradient(160deg,#145240,#0B2E23 60%,#06190F);
    box-shadow:0 0 0 1.5px #C9A35A,0 0 0 2.5px rgba(138,100,36,.5),0 6px 14px rgba(7,35,25,.35),inset 0 1px 0 rgba(255,255,255,.25)}
  .burger.mm-btn .mm-lines{display:grid;gap:4px;width:20px}
  .burger.mm-btn .mm-lines i{display:block;height:2px;border-radius:2px;background:var(--mm-gold-bevel);box-shadow:0 1px 0 rgba(0,0,0,.35)}
  .burger.mm-btn .mm-lines i:nth-child(2){width:72%;justify-self:end}
  .burger.mm-btn:active{transform:scale(.95)}
  .nav{display:none!important}
}

/* ── 全螢幕選單 ── */
.mm{position:fixed;inset:0;z-index:300;visibility:hidden;pointer-events:none}
.mm.on{visibility:visible;pointer-events:auto}
/* 2026-10-03 改版:百葉窗→魔術方塊。打亂顏色的寶石方塊(焦糖/寶藍/象牙/金/墨綠)由上快速掉落、彈一下疊好,
   接著像轉好魔術方塊一樣一格格翻成整面墨綠,最後融成一整片漆面 */
.mm-cubes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols,5),1fr);grid-auto-rows:var(--cell,78px);overflow:hidden;perspective:700px}
.mm-cube{position:relative;transform:translate3d(0,-130vh,0) rotate(var(--r,0deg));will-change:transform;
  background:radial-gradient(120% 120% at 25% 18%,#1B6A52,#0E3B2D 58%,#082A1F);
  box-shadow:inset 0 0 0 1.5px rgba(2,12,8,.85),inset 2px 2px 0 rgba(246,226,168,.28),inset -3px -3px 6px rgba(0,0,0,.4)}
.mm-cube::before{content:"";position:absolute;inset:4px;border-radius:5px;background:var(--c,#145240);
  background-image:radial-gradient(120% 90% at 22% 12%,rgba(255,255,255,.38),rgba(255,255,255,0) 48%);
  box-shadow:inset 0 -3px 5px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.08);
  transition:transform .3s cubic-bezier(.6,0,.4,1) var(--sd,0s),opacity .3s ease var(--sd,0s)}
.mm.open .mm-cube{animation:mmDrop .44s var(--d,0s) both}
@keyframes mmDrop{
  0%{transform:translate3d(0,-130vh,0) rotate(var(--r,0deg));animation-timing-function:cubic-bezier(.55,0,.95,.55)}
  74%{transform:translate3d(0,0,0) rotate(0deg);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  86%{transform:translate3d(0,-6px,0) rotate(0deg);animation-timing-function:cubic-bezier(.6,0,.8,.4)}
  100%{transform:none}}
/* YouTube 圖示貼在方塊上(2026-10-03 改版),排好時跟色塊一起翻掉 */
.mm-cube svg{position:absolute;left:50%;top:50%;width:56%;height:56%;transform:translate(-50%,-50%);color:var(--ic,#fff);
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.35));transition:transform .3s cubic-bezier(.6,0,.4,1) var(--sd,0s),opacity .3s ease var(--sd,0s)}
.mm.solved .mm-cube svg{transform:translate(-50%,-50%) rotateY(90deg) scale(.7);opacity:0}
/* 排好:貼紙一格格翻掉,露出統一的墨綠 */
.mm.solved .mm-cube::before{transform:rotateY(90deg) scale(.7);opacity:0}
.mm-cubes::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .45s ease;background:radial-gradient(140% 90% at 15% 0%,#175A46,#0E3B2D 48%,#082A1F 80%,#061E16)}
.mm.settled .mm-cubes::before{opacity:1}
.mm.closing .mm-cubes::before{opacity:0;transition-duration:.1s}
.mm-cubes::after{z-index:2}
.mm.closing .mm-cube{animation:mmFall .4s var(--d,0s) both}
@keyframes mmFall{0%{transform:none;animation-timing-function:cubic-bezier(.5,0,.95,.5)}100%{transform:translate3d(0,130vh,0) rotate(var(--r,0deg))}}
/* 方塊排好時,一道暖光從左上掃過整面漆 */
.mm-light{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s ease .7s;
  background:radial-gradient(90% 55% at 12% 4%,rgba(255,214,150,.30),rgba(255,214,150,0) 60%),radial-gradient(70% 50% at 100% 100%,rgba(0,0,0,.45),rgba(0,0,0,0) 70%)}
.mm-cubes::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--mm-grain);background-size:240px 240px;mix-blend-mode:soft-light;opacity:0;transition:opacity .8s ease .6s}
.mm.open .mm-cubes::after{opacity:.5}
.mm.open .mm-light{opacity:1}
.mm-sweep{position:absolute;top:-20%;bottom:-20%;left:-60%;width:45%;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,rgba(255,236,190,0),rgba(255,236,190,.16) 50%,rgba(255,236,190,0));transform:skewX(-12deg)}
.mm.open .mm-sweep{animation:mmSweep 1.1s ease .9s 1 forwards}
@keyframes mmSweep{0%{left:-60%;opacity:1}100%{left:130%;opacity:0}}

.mm-in{position:relative;height:100%;display:flex;flex-direction:column;max-width:600px;margin:0 auto;
  padding:0 var(--gut,16px) calc(16px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}
.mm-bar{display:flex;align-items:center;justify-content:space-between;height:60px;flex:0 0 auto}
.mm-logo{font:900 18px/1.2 var(--serif);color:var(--mm-ivory);text-decoration:none;letter-spacing:.02em}
.mm-logo b{background:var(--mm-gold-bevel);-webkit-background-clip:text;background-clip:text;color:transparent}
.mm-x{width:48px;height:42px;border-radius:12px;border:0;cursor:pointer;position:relative;background:rgba(255,255,255,.04);
  box-shadow:0 0 0 1.5px #C9A35A,inset 0 1px 0 rgba(255,255,255,.18)}
.mm-x::before,.mm-x::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:2px;border-radius:2px;background:var(--mm-gold-bevel);transform:translate(-50%,-50%) rotate(45deg)}
.mm-x::after{transform:translate(-50%,-50%) rotate(-45deg)}

.mm-head{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:18px 0 22px;min-height:120px}
.mm-eyebrow{font:700 12px/1 var(--sans);letter-spacing:.42em;color:var(--mm-gold);padding-left:.42em}
.mm-orn{display:flex;align-items:center;gap:10px;margin:14px 0 12px;width:min(260px,70%)}
.mm-orn::before,.mm-orn::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(217,179,106,0),#D9B36A)}
.mm-orn::after{background:linear-gradient(270deg,rgba(217,179,106,0),#D9B36A)}
.mm-orn i{width:7px;height:7px;transform:rotate(45deg);background:var(--mm-gold-bevel);box-shadow:0 0 10px rgba(246,226,168,.5)}
.mm-motto{font:900 clamp(26px,7.4vw,34px)/1.25 var(--serif);color:var(--mm-ivory);letter-spacing:.06em;margin:0;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.mm-motto b{background:linear-gradient(180deg,#FBE9B6,#D9B36A 55%,#A77B33);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── 材質磚 ── */
.mm-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:0 0 auto}
.mm-tile{position:relative;display:flex;text-decoration:none;border-radius:18px;padding:2px;background:var(--mm-gold-bevel);
  box-shadow:0 14px 26px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.35);-webkit-tap-highlight-color:transparent;transition:transform .18s ease}
.mm-tile:active{transform:translateY(1px) scale(.975)}
.mm-face{flex:1 1 auto;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:136px;padding:14px 8px 12px;border-radius:16px;overflow:hidden;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.18),inset 0 -6px 14px rgba(0,0,0,.38),inset 0 0 0 1px rgba(0,0,0,.35)}
/* 每塊皮革都有內縫線 */
.mm-stitch .mm-face::before{content:"";position:absolute;inset:7px;border-radius:11px;border:1.5px dashed rgba(233,198,128,.75);pointer-events:none;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.45))}
/* 光澤反光(統一左上光源) */
.mm-face::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 18% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 52%)}
.mm-face b{position:relative;z-index:1;font:900 clamp(19px,5.3vw,23px)/1.25 var(--serif);color:var(--mm-ivory);letter-spacing:.04em;
  text-shadow:0 2px 0 rgba(0,0,0,.4),0 0 1px rgba(0,0,0,.6)}
.mm-face .mm-rule{position:relative;z-index:1;display:block;width:62%;height:1px;margin:8px auto 7px;background:linear-gradient(90deg,rgba(217,179,106,0),#E8C77E,rgba(217,179,106,0))}
.mm-face small{position:relative;z-index:1;font:500 13.5px/1.35 var(--sans);color:#F2DDB0;letter-spacing:.06em}
.mm-ico{position:relative;z-index:1;width:40px;height:40px;margin-bottom:8px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(246,226,168,.25))}
.mm-ico svg{width:100%;height:100%;display:block}

/* 焦糖皮革 */
.mm-cognac .mm-face{background:var(--mm-grain),radial-gradient(140% 100% at 20% 0%,#C4642C,#9A4519 55%,#6E2E0F);background-blend-mode:soft-light,normal;background-size:240px 240px,auto}
/* 寶藍絲絨:絨毛+邊緣受光 */
.mm-velvet .mm-face{background:var(--mm-pile),radial-gradient(90% 70% at 30% 25%,#24569A,#123566 50%,#08193A 100%);background-blend-mode:soft-light,normal;background-size:200px 200px,auto;
  box-shadow:inset 0 0 22px rgba(120,170,255,.22),inset 0 -8px 18px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.35)}
/* 墨綠漆面:鏡面高光 */
.mm-lacquer .mm-face{background:linear-gradient(162deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.04) 30%,rgba(255,255,255,0) 31%),radial-gradient(130% 100% at 25% 10%,#1B6A52,#0E3B2D 55%,#061C14)}
/* 錘金 */
.mm-hammer .mm-face{background:var(--mm-hammer),linear-gradient(140deg,#F3D78E 0%,#C9A04F 35%,#9E7430 60%,#E2BF72 85%,#B88C3E 100%);background-blend-mode:overlay,normal;background-size:220px 220px,auto}
.mm-hammer .mm-face b{color:#2A1A06;text-shadow:0 1px 0 rgba(255,240,200,.6)}
.mm-hammer .mm-face small{color:#3E2A0E}
.mm-hammer .mm-face .mm-rule{background:linear-gradient(90deg,rgba(60,40,10,0),#5A3E14,rgba(60,40,10,0))}
.mm-hammer .mm-ico{filter:drop-shadow(0 1px 0 rgba(255,240,200,.7)) drop-shadow(0 2px 2px rgba(60,40,10,.35))}
/* 象牙荔枝皮 */
.mm-ivory .mm-face{background:var(--mm-pebble),radial-gradient(140% 100% at 20% 0%,#FFF8E6,#EFE2C2 60%,#D9C79C);background-blend-mode:soft-light,normal;background-size:260px 260px,auto}
.mm-ivory .mm-face b{color:#0E3B2D;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.mm-ivory .mm-face small{color:#4A3A1C}
.mm-ivory.mm-stitch .mm-face::before{border-color:rgba(160,120,50,.7);filter:none}
.mm-tile[aria-current] .mm-face::after{background:radial-gradient(120% 70% at 18% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 52%),linear-gradient(transparent 86%,rgba(246,226,168,.35))}
.mm-tile[aria-current]::after{content:"目前在這頁";position:absolute;top:-9px;right:10px;z-index:2;font:700 11px/1 var(--sans);letter-spacing:.08em;color:#2A1A06;background:var(--mm-gold-bevel);padding:5px 8px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.4)}

/* 會員中心:象牙皮細條 */
.mm-member{display:flex;align-items:center;justify-content:space-between;margin-top:12px;text-decoration:none;border-radius:14px;padding:2px;background:var(--mm-gold-bevel);box-shadow:0 10px 20px rgba(0,0,0,.4)}
.mm-member span{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:12px;padding:12px 16px;
  background:var(--mm-grain),linear-gradient(160deg,#173F33,#0B2A20);background-blend-mode:soft-light,normal;background-size:240px 240px,auto;
  font:700 17px/1.2 var(--sans);color:var(--mm-ivory);letter-spacing:.06em;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.mm-member em{font-style:normal;color:var(--mm-gold);font-size:14px;font-weight:500}

/* 主行動:加 LINE(墨綠漆面大牌+錘金邊+LINE 綠點) */
.mm-cta{display:block;margin-top:12px;text-decoration:none;border-radius:20px;padding:2.5px;background:var(--mm-gold-bevel);
  box-shadow:0 16px 30px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.4);transition:transform .18s ease}
.mm-cta:active{transform:scale(.98)}
.mm-cta .mm-cface{position:relative;display:flex;align-items:center;gap:14px;border-radius:18px;padding:16px 18px;overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 34%,rgba(255,255,255,0) 35%),radial-gradient(130% 120% at 20% 0%,#1F7A5C,#0E4A36 50%,#072A1E);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.2),inset 0 -8px 16px rgba(0,0,0,.4)}
.mm-cta .mm-cface::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;transform:skewX(-14deg);
  background:linear-gradient(90deg,rgba(255,240,200,0),rgba(255,240,200,.28),rgba(255,240,200,0));animation:mmGlint 4.5s ease 1.6s infinite}
@keyframes mmGlint{0%,70%{left:-40%}100%{left:130%}}
.mm-cta .mm-dot{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#06C755;
  box-shadow:0 0 0 2px #E8C77E,inset 0 2px 1px rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,0,.25);font:900 13px/1 var(--sans);color:#fff;letter-spacing:.02em}
.mm-cta b{display:block;font:900 clamp(19px,5.4vw,22px)/1.25 var(--serif);color:var(--mm-ivory);letter-spacing:.04em;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.mm-cta small{display:block;font:500 13.5px/1.4 var(--sans);color:#F2DDB0;margin-top:3px;letter-spacing:.04em}
.mm-cta i{margin-left:auto;font-style:normal;font:900 22px/1 var(--serif);color:var(--mm-gold)}

/* ── 進場:方塊落定的同時,選單也從上方落下、彈一下排好 ── */
.mm-head,.mm-tile,.mm-member,.mm-cta,.mm-bar{opacity:0;transform:translateY(-34px);transition:opacity .25s ease,transform .52s cubic-bezier(.34,1.56,.64,1)}
.mm-bar{transform:none}
.mm.open .mm-bar{opacity:1;transition-delay:.4s}
.mm.open .mm-head{opacity:1;transform:none;transition-delay:.55s}
.mm.open .mm-tile{opacity:1;transform:none}
.mm.open .mm-tile:nth-child(1){transition-delay:.62s}
.mm.open .mm-tile:nth-child(2){transition-delay:.68s}
.mm.open .mm-tile:nth-child(3){transition-delay:.74s}
.mm.open .mm-tile:nth-child(4){transition-delay:.80s}
.mm.open .mm-member{opacity:1;transform:none;transition-delay:.86s}
.mm.open .mm-cta{opacity:1;transform:none;transition-delay:.92s}
.mm.open .mm-tile:active{transform:translateY(1px) scale(.975);transition-delay:0s}
/* 關閉:內容先淡出,方塊再往下掉出畫面 */
.mm.closing .mm-head,.mm.closing .mm-tile,.mm.closing .mm-member,.mm.closing .mm-cta,.mm.closing .mm-bar{opacity:0;transition:opacity .15s ease;transition-delay:0s}

@media (min-width:600px){.mm-face{min-height:156px}}
@media (max-height:640px){.mm-head{min-height:0;padding:6px 0 12px}.mm-orn{margin:8px 0}.mm-face{min-height:112px}.mm-ico{width:32px;height:32px}}
@media (prefers-reduced-motion:reduce){
  .mm-cube{animation:none!important;transform:none!important}
  .mm-cube::before,.mm-cube svg{display:none}
  .mm{opacity:0;transition:opacity .25s ease}
  .mm.open{opacity:1}
  .mm-head,.mm-tile,.mm-member,.mm-cta,.mm-bar{transform:none!important;transition:opacity .25s ease!important}
  .mm-sweep,.mm-cta .mm-cface::after{display:none}
}
/* 2026-10-03 T1003-20 剪輯送活動頁:石榴紅漆面(跟墨綠漆面同一種受光,換寶石色) */
.mm-garnet .mm-face{background:linear-gradient(162deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.04) 30%,rgba(255,255,255,0) 31%),radial-gradient(130% 100% at 25% 10%,#8E2238,#5A1022 55%,#2A0610)}

/* 2026-10-04 T1004-02 影片成效追蹤方塊:黑曜石漆面(配週報的黑底金字) */
.mm-onyx .mm-face{background:linear-gradient(162deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.04) 30%,rgba(255,255,255,0) 31%),radial-gradient(130% 100% at 25% 10%,#3A3D46,#1B1D22 55%,#08090B)}

/* ══ 2026-10-04 T1004-05 改版(老闆:「右上角的字看不清楚」「現在在哪頁也看不清楚」「頁面很多,重新設計比較有質感」「放可愛品牌 logo 在框框上跳格子」「字在手機會不會太小」)
   ①商標/標籤改高對比象牙字 ②頂部「你現在在 ○○」+所在格象牙外框 ③主打兩大格+兩組橫條,7 格不再擠成一大片 ④字級全面放大:最小 13px,說明字 15px ⑤吉祥物「剪剪」 ══ */
.mm-logo{font-size:21px;color:#FFF6E2;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.mm-logo b{background:linear-gradient(180deg,#FFF1C8,#EBC983);-webkit-background-clip:text;background-clip:text}
/* 所在位置條 */
.mm-head{flex:0 0 auto;min-height:0;padding:6px 0 18px}
.mm-where{display:inline-flex;align-items:center;gap:10px;margin:0;padding:10px 18px 10px 14px;border-radius:999px;
  background:linear-gradient(180deg,#FFF8E6,#F1E2BC);color:#3A2A10;font:600 15px/1.2 var(--sans);letter-spacing:.04em;
  box-shadow:0 0 0 1.5px #C9A35A,0 8px 18px rgba(0,0,0,.35)}
.mm-where b{font:900 17px/1.2 var(--serif);color:#0B3527;letter-spacing:.04em}
.mm-pulse{position:relative;width:10px;height:10px;border-radius:50%;background:#E0342E;flex:0 0 auto}
.mm-pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #E0342E;animation:mmPulse 1.8s ease-out infinite}
@keyframes mmPulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.5);opacity:0}}
/* 分組標題 */
.mm-sec{display:flex;align-items:center;gap:12px;margin:22px 2px 10px;font:700 14px/1 var(--sans);letter-spacing:.24em;color:#EBCB86}
.mm-sec::before,.mm-sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(217,179,106,0),rgba(217,179,106,.7))}
.mm-sec::after{background:linear-gradient(270deg,rgba(217,179,106,0),rgba(217,179,106,.7))}
/* 主打大格字放大 */
.mm-grid .mm-face{min-height:150px;padding-top:18px}
.mm-face b{font-size:clamp(20px,5.8vw,24px)}
.mm-face small{font-size:15px;color:#FBE7BE}
/* 橫條 */
.mm-list{display:grid;gap:12px}
.mm-row{border-radius:16px}
.mm-row .mm-face{flex-direction:row;justify-content:flex-start;text-align:left;gap:14px;min-height:74px;padding:12px 16px 12px 14px;border-radius:14px}
.mm-row .mm-ico{margin:0;width:38px;height:38px;flex:0 0 auto}
.mm-rt{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.mm-row .mm-face b{font-size:19px;line-height:1.25}
.mm-row .mm-face small{font-size:14.5px;line-height:1.35}
.mm-chev{position:relative;z-index:1;font:900 26px/1 var(--serif);font-style:normal;color:#EBCB86;flex:0 0 auto}
.mm-ivory .mm-chev,.mm-hammer .mm-chev{color:#5A3E14}
.mm-row.mm-stitch .mm-face::before{inset:5px;border-radius:10px}
/* 所在頁:象牙亮框+高對比標籤(取代原本金底金框的「目前在這頁」) */
.mm-tile[aria-current]::after{content:none}
.mm-tile[aria-current]{background:linear-gradient(135deg,#FFFBEF,#F6E2A8 50%,#FFFBEF);box-shadow:0 0 0 2px #FFF6E0,0 0 24px rgba(255,232,170,.55),0 14px 26px rgba(0,0,0,.45);padding:3px}
.mm-here{position:absolute;top:8px;left:8px;z-index:2;font:800 13px/1 var(--sans);font-style:normal;letter-spacing:.06em;color:#FFF;
  background:#C62828;padding:6px 9px;border-radius:999px;box-shadow:0 0 0 1.5px #FFF3D6,0 3px 8px rgba(0,0,0,.4)}
.mm-row .mm-here{position:relative;top:auto;left:auto;flex:0 0 auto}
/* 會員中心/LINE 字放大 */
.mm-member span{font-size:18px}
.mm-member em{font-size:15px;color:#EBCB86}
.mm-cta small{font-size:15px}
/* 進場:依格子順序落下(數量不限) */
.mm.open .mm-tile{transition-delay:calc(.6s + var(--i,0) * .05s)}
.mm.open .mm-sec{opacity:1}
.mm-sec{opacity:0;transition:opacity .3s ease .7s}
.mm.closing .mm-sec{opacity:0;transition-delay:0s}
/* 吉祥物「剪剪」 */
.mm-in{position:relative}
.mm-mk{position:absolute;left:0;top:0;z-index:5;width:34px;height:38px;pointer-events:none;opacity:0;transform-origin:50% 100%;will-change:transform;transition:opacity .3s ease;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.45))}
.mm-mk.mk-on{opacity:1}
.mm-mk svg{width:100%;height:100%;display:block;overflow:visible}
.mm-mk .mk-lid{transform-box:fill-box;transform-origin:0% 100%}
.mm-mk .mk-eyes{transform-box:fill-box;transform-origin:50% 50%;animation:mkBlink 4.2s infinite}
@keyframes mkBlink{0%,92%,100%{transform:none}95%{transform:scaleY(.1)}}
.mm.closing .mm-mk{opacity:0;transition-duration:.1s}
@media (max-height:640px){.mm-grid .mm-face{min-height:118px}.mm-row .mm-face{min-height:64px}.mm-head{padding:2px 0 12px}}
@media (prefers-reduced-motion:reduce){.mm-mk{display:none}.mm-pulse::after{animation:none}.mm-sec{transition:none}}
.mm-logo b{text-shadow:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.45))}
@media (max-width:360px){.mm-grid{gap:10px}.mm-grid .mm-face{padding:16px 3px 12px}.mm-grid .mm-face b{font-size:clamp(18px,5.6vw,22px);letter-spacing:0}.mm-grid .mm-face small{font-size:13.5px;letter-spacing:0;white-space:nowrap}}
.mm-grid .mm-tile[aria-current] .mm-ico{margin-top:16px}

/* ══ 2026-10-04 T1004-15 老闆:「為什麼漢堡欄旁邊跑出來了?」= 選單內容比視窗高時,電腦瀏覽器的白色捲軸冒在選單欄右邊。
   照樣可以捲,只是把捲軸藏起來(手機本來就看不到捲軸) ══ */
.mm-in{scrollbar-width:none;-ms-overflow-style:none}
.mm-in::-webkit-scrollbar{display:none;width:0;height:0}
/* 吉祥物導覽泡泡:象牙底+金邊,尾巴指向剪剪;字至少 15px */
.mm-tip{position:absolute;left:0;top:0;z-index:6;pointer-events:none;opacity:0;transform:translateY(6px) scale(.92);transform-origin:var(--tail,50%) 100%;
  transition:opacity .2s ease,transform .32s cubic-bezier(.2,1.4,.4,1)}
.mm-tip.dn{transform-origin:var(--tail,50%) 0}
.mm-tip.on{opacity:1;transform:none}
.mm-tip p{margin:0;padding:11px 14px;border-radius:14px;background:linear-gradient(180deg,#FFFBEF,#F3E4BE);color:#2A1A06;
  font:600 15.5px/1.5 var(--sans);letter-spacing:.02em;box-shadow:0 0 0 1.5px #C9A35A,0 10px 22px rgba(0,0,0,.45);min-height:1.5em}
.mm-tip::after{content:"";position:absolute;left:var(--tail,50%);bottom:-7px;width:14px;height:14px;margin-left:-7px;transform:rotate(45deg);
  background:#F3E4BE;box-shadow:1.5px 1.5px 0 #C9A35A}
.mm-tip.dn::after{bottom:auto;top:-7px;background:#FFFBEF;box-shadow:-1.5px -1.5px 0 #C9A35A}
.mm.closing .mm-tip{opacity:0;transition-duration:.1s}
/* T1004-19 老闆:「講解可能太長導致看不見,要能捲動」→ 泡泡最高約 6 行,多的字在泡泡裡捲;泡泡出現時可以摸、可以捲 */
.mm-tip.on{pointer-events:auto}
.mm-tip p{max-height:min(9.4em,34vh);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#C9A35A transparent}
.mm-tip p::-webkit-scrollbar{width:4px}.mm-tip p::-webkit-scrollbar-thumb{background:#C9A35A;border-radius:2px}
@media (prefers-reduced-motion:reduce){.mm-tip{display:none}}
