@font-face{font-family:"GenSen Rounded TW";font-weight:400;font-display:swap;src:url(/assets/gensen-400-974c4f88.woff2) format("woff2")}
@font-face{font-family:"GenSen Rounded TW";font-weight:500;font-display:swap;src:url(/assets/gensen-500-e4eacb81.woff2) format("woff2")}
@font-face{font-family:"GenSen Rounded TW";font-weight:700;font-display:swap;src:url(/assets/gensen-700-20c17602.woff2) format("woff2")}
@font-face{font-family:"jf open huninn";font-weight:400;font-display:swap;src:url(/assets/huninn-400-abe9fbdd.woff2) format("woff2")}

:root{
  --paper:#FBF9F3; --card:#FFFFFF; --ink:#6C5B47; --ink2:#A2947F; --line:#EEE8DB; --head:#5C4B38;
  --accent:#C05A50; --accent-deep:#A84A41; --accent-soft:#F6E5E1;
  --orange:#E0764B; --orange-soft:#F9EBE0; --salmon:#EF8B84; --salmon-soft:#FCECE8;
  --brown:#6B4F3A; --brown-ink:#F5EBDC;
  --matcha:#7E9C58; --matcha-deep:#55703A; --matcha-soft:#EAF0DF;
  --straw:#C25A6E; --straw-soft:#F6E6E9; --mustard:#D9A441; --mustard-soft:#F7EDD8;
  --blueb:#5E6FA8; --blueb-soft:#E7EAF4; --cream:#EAE0C6;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'GenSen Rounded TW','Noto Sans TC','PingFang TC',sans-serif;line-height:1.85;font-size:16px}
body.tm{
  --paper:#F3F3E3; --card:#FCFCF2; --ink:#4A462F; --ink2:#8B8767; --line:#E2E1C7; --head:#3A3726;
  --accent:#7E9C58; --accent-deep:#55703A; --accent-soft:#E7EDD8;
  font-family:'jf open huninn','Noto Sans TC',sans-serif
}
.wrap{max-width:1020px;margin:0 auto;padding:0 22px}
a{color:var(--accent-deep)}

header.site{position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--line);z-index:50}
.nav{display:flex;align-items:center;gap:18px;padding:10px 22px;max-width:1020px;margin:0 auto;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:16.5px;font-weight:500;color:var(--head);letter-spacing:.03em}
.brand .logopng{width:40px;height:40px;display:block;border-radius:50%}
.nav-links{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.nav-links a{font-family:inherit;font-size:13.5px;color:var(--ink);background:none;border:none;padding:7px 11px;border-radius:999px;cursor:pointer;font-weight:500}
.nav-links a:hover{background:var(--accent-soft)}
.nav-links a.on{background:var(--accent);color:#FFFDF6}
.nav-links a.soon{color:var(--ink2);cursor:default;font-weight:400}
.nav-links a.soon:hover{background:none}
.nav-links a.soon small{font-size:10px;margin-left:2px}

.hero{text-align:center;padding:72px 0 30px}
.hero h1{font-size:clamp(26px,4.6vw,38px);font-weight:500;margin:0 0 18px;letter-spacing:.05em;color:var(--head)}
.hero .sub{font-size:clamp(16px,2.4vw,19px);font-weight:500;margin:0 0 14px;color:var(--accent)}
.hero p{color:var(--ink2);max-width:34em;margin:0 auto 6px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-block;font-family:inherit;font-size:15.5px;font-weight:500;padding:12px 26px;border-radius:999px;border:1.5px solid var(--head);background:var(--card);color:var(--head);cursor:pointer;position:relative;overflow:hidden;text-decoration:none}
.btn span{position:relative;z-index:1}
.btn::after{content:"";position:absolute;left:-4%;right:-4%;bottom:-100%;height:100%;background:var(--accent-soft);border-radius:40% 45% 0 0;transition:bottom .28s ease}
.btn:hover::after{bottom:-45%}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#FFFDF6}
.btn.primary::after{background:var(--accent-deep)}

section.blk{padding:46px 0 12px}
.eyebrow{font-size:12.5px;letter-spacing:.2em;color:var(--accent-deep);font-weight:700}
h2.t{font-size:clamp(21px,3.2vw,26px);font-weight:500;margin:6px 0 6px;display:inline-block;position:relative;color:var(--head)}
h2.t .dipline{position:absolute;left:0;right:-6px;bottom:-2px;height:8px;z-index:-1;border-radius:4px}
.blk-note{color:var(--ink2);font-size:14.5px;margin:0 0 22px}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 26px 22px;position:relative}
.card h3{font-size:18px;font-weight:500;margin:0 0 8px;color:var(--head)}
.card p{color:var(--ink2);font-size:14.5px;margin:0}
.card .go{display:inline-block;margin-top:14px;font-weight:500;font-size:14.5px}
.dipcorner{position:absolute;right:0;bottom:0;width:52px;height:52px;border-radius:0 0 14px 0;overflow:hidden;pointer-events:none}
.need .tag{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:2px 12px;margin-bottom:10px}
.need.m .tag{background:var(--accent-soft);color:var(--accent-deep)}
.need.s .tag{background:var(--orange-soft);color:var(--orange)}
.need.b .tag{background:var(--salmon-soft);color:#C96860}
body.tm .need.m .tag{background:var(--matcha-soft);color:var(--matcha-deep)}
body.tm .need.s .tag{background:var(--straw-soft);color:var(--straw)}
body.tm .need.b .tag{background:var(--blueb-soft);color:var(--blueb)}

.ph-card .ph{height:130px;border-radius:10px;background:repeating-linear-gradient(45deg,#F4EEE1,#F4EEE1 10px,#FBF9F3 10px,#FBF9F3 20px);margin-bottom:14px;display:flex;align-items:center;justify-content:center;color:var(--ink2);font-size:12.5px}

.quote{background:var(--accent-soft);border-radius:16px;padding:26px 30px;margin:8px 0 10px}
.quote p{margin:0;font-size:15.5px;color:var(--head)}
.quote .who{margin-top:10px;color:var(--accent-deep);font-size:13px;font-weight:700}

.lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.lists ul{margin:8px 0 0;padding-left:22px;color:var(--ink2);font-size:14.5px}
.lists li{margin-bottom:6px}
.lists .yes h3{color:var(--matcha-deep)}
.lists .no h3{color:var(--brown)}

.price{border-top:5px solid var(--matcha)}
.price.p2{border-top-color:var(--mustard)}
.price.p3{border-top-color:var(--blueb)}
.price .amt{font-size:26px;font-weight:700;margin:2px 0 2px;color:var(--head)}
.price .amt small{font-size:13px;font-weight:400;color:var(--ink2)}
.price ul{margin:12px 0 0;padding-left:20px;color:var(--ink2);font-size:13.8px}
.price li{margin-bottom:5px}
.pill{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 10px;background:var(--cream);color:#8A5C3C}

.case{max-width:640px;margin:0 auto}
.case .photo{height:200px;border-radius:12px;background:linear-gradient(160deg,#F4EEE1 0%,#E9EFDC 100%);display:flex;align-items:center;justify-content:center;color:var(--ink2);font-size:13px;margin-bottom:18px}
.badge{display:inline-block;font-size:11.5px;font-weight:700;background:var(--cream);color:#8A5C3C;border-radius:999px;padding:3px 12px;margin-bottom:10px}
.case dl{margin:0}
.case dt{font-size:12.5px;font-weight:700;color:var(--matcha-deep);letter-spacing:.08em;margin-top:14px}
.case dd{margin:2px 0 0;font-size:14.5px;color:var(--ink2)}
.sealimg{position:absolute;right:16px;bottom:14px;width:52px;height:52px}
.spec{background:var(--card);border:1px dashed var(--line);border-radius:14px;padding:18px 24px;margin-top:18px;font-size:13.5px;color:var(--ink2)}
.spec b{color:var(--ink)}

.line-cta{background:var(--accent);border-radius:20px;text-align:center;padding:42px 26px;margin:40px 0 10px;color:#FFFDF6}
.line-cta h2{font-size:22px;font-weight:500;margin:0 0 8px}
.line-cta p{margin:0 0 4px;font-size:14.5px;opacity:.92}
.line-cta .btn{margin-top:20px;background:#FFFDF6;border-color:#FFFDF6;color:var(--accent-deep)}
.line-cta .btn::after{background:var(--cream)}
.hours{font-size:13px;margin-top:14px}

footer.site{background:#6B4F3A;color:#F5EBDC;margin-top:64px;font-family:'GenSen Rounded TW','Noto Sans TC',sans-serif}
.f-main{max-width:1020px;margin:0 auto;padding:44px 22px 30px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.f-brand .lockup{margin-bottom:6px}
.f-brand .enlogo{height:32px;display:block}
.f-brand .mascots{display:flex;gap:8px;margin:10px 0 10px}
.f-brand .mascots img{width:38px;height:38px}
.f-brand p{font-size:13px;line-height:1.9;opacity:.75;margin:0;max-width:24em}
.f-col h4{font-size:13px;font-weight:700;letter-spacing:.12em;opacity:.6;margin:4px 0 12px}
.f-col a{display:block;color:#F5EBDC;text-decoration:none;font-size:13.5px;margin-bottom:9px;opacity:.9}
.f-col a:hover{opacity:1;text-decoration:underline}
.f-col a small{font-size:10.5px;opacity:.6;margin-left:4px}
.f-legal{border-top:1px solid #FFFFFF22;padding:16px 22px;max-width:1020px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;font-size:12px;opacity:.7}
.f-legal .links a{color:#F5EBDC;text-decoration:none;margin-left:18px}
.f-legal .links a:first-child{margin-left:0}
.f-legal .links a:hover{text-decoration:underline}
@media (max-width:760px){ .f-main{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .nav{gap:8px} .nav-links{margin-left:0} }

.m-hero{text-align:center;padding:56px 0 26px}
.m-hero .mj-lockup{width:min(420px,86%);margin:0 auto 24px;display:block}
.m-hero p{color:var(--ink2);max-width:33em;margin:0 auto 6px}
.m-hero .saucenote{color:var(--ink);font-weight:500;margin-bottom:16px}
.m-crumb{font-size:12.5px;color:var(--ink2);margin-bottom:26px}
.m-crumb b{color:var(--matcha-deep)}
.mj-signoff{text-align:center;padding:46px 0 4px}
.mj-signoff img{width:150px;height:150px;margin:0 auto 12px;display:block}
.mj-signoff p{font-size:13px;color:var(--ink2);margin:0}
.proto{background:var(--cream);color:#8A5C3C;font-size:12px;text-align:center;padding:6px;letter-spacing:.1em}
.hero-eyebrow{font-size:14px;letter-spacing:.18em;color:var(--ink2);margin-bottom:14px}
.hero .cat{color:var(--head);font-weight:500;font-size:15px;margin:0 auto 10px}
.hero .pain{color:var(--ink2);font-size:14.5px;max-width:36em;margin:0 auto}
.jp-live{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--accent-soft);border:1px solid #EBD2CC;border-radius:12px;padding:10px 18px;font-size:13.5px;color:var(--accent-deep);margin:26px 0 0}
.jp-live .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.jp-live .demo-tag{margin-left:auto;font-size:11px;opacity:.6}
.sublinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sublinks a{font-size:13px;font-weight:500;color:var(--head);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:5px 14px;background:var(--paper)}
.sublinks a:hover{border-color:var(--accent);color:var(--accent-deep)}
.sublinks a small{font-size:10px;color:var(--ink2);margin-left:3px}
.svc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 22px;margin:0 0 18px}
.svc-row b{color:var(--head);font-weight:500;margin-right:6px}
.svc-row span{color:var(--ink2);font-size:13.5px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{font-family:inherit;font-size:13px;font-weight:500;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:5px 15px;cursor:pointer}
.chip.on{background:var(--head);border-color:var(--head);color:var(--paper)}
.feed-card .ftag{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 11px;margin-bottom:10px}
.feed-card .ftext{color:var(--ink);font-size:14px;min-height:66px}
.feed-card .fmeta2{color:var(--ink2);font-size:12.5px;margin-top:12px}
a.tpost{display:block;text-decoration:none;cursor:pointer}
.tpost .ph{height:150px;border-radius:10px;background:repeating-linear-gradient(45deg,#F4EEE1,#F4EEE1 10px,#FBF9F3 10px,#FBF9F3 20px);margin-bottom:14px;display:flex;align-items:center;justify-content:center;color:var(--ink2);font-size:12.5px}
.tpost h3{font-size:15.5px;margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.tpost .tbody{color:var(--ink2);font-size:13.5px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tpost .tmeta{color:var(--ink2);font-size:12px;margin-top:10px}
.tpost:hover .tmeta{color:var(--accent-deep)}
.ptags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ptags span{font-size:11.5px;font-weight:500;color:var(--accent-deep);background:var(--accent-soft);border-radius:999px;padding:2px 10px}
.hidden{display:none}

/* ===== 搭醬 MATCHAN 視覺稿 v1｜白紙沾色 ===== */
body.tm{
  --paper:#FBFAF5; --card:#FFFFFF; --ink:#5B5843; --ink2:#8B8767; --line:#E6E4D3; --head:#485021;
  --accent:#7E9C58; --accent-deep:#66863A; --accent-soft:#EAF0DF;
  --cream:#FBF6E6; --wave:#66863A;
  --straw:#C25A6E; --straw-soft:#F6E6E9; --mustard:#D9A441; --mustard-soft:#F7EDD8;
  --blueb:#5E6FA8; --blueb-soft:#E7EAF4; --soy:#8A5C3C; --sesame:#6F6A5E;
  font-family:'jf open huninn','Noto Sans TC',sans-serif;
  background:var(--paper);
}
body.tm::before{content:"";position:fixed;inset:0;background:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.9%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.35%200%200%200%200%200.33%200%200%200%200%200.2%200%200%200%20.55%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E") repeat;opacity:.16;pointer-events:none;z-index:0;mix-blend-mode:multiply}
body.tm header.site{background:rgba(251,250,245,.92);backdrop-filter:blur(6px)}
body.tm .nav-links a.on{background:var(--accent-deep);color:var(--cream)}
body.tm .nav-links a:hover{background:var(--accent-soft)}
body.tm .btn{border-color:var(--head);color:var(--head)}
body.tm .btn::after{background:var(--accent-soft)}
body.tm .btn.primary{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--cream)}
body.tm .btn.primary::after{background:var(--head)}
body.tm .btn.cream{background:var(--cream);border-color:var(--cream);color:var(--accent-deep)}
body.tm .btn.cream::after{background:#EFE6CC}
#view-matchan{position:relative;z-index:1}
#view-matchan .wrap{max-width:1060px}

/* 標題統一色（原本的撞色字效果已移除，維持單一顏色） */
#view-matchan .dip{display:inline-block;color:var(--head);padding-bottom:.04em}

/* 區塊標題 */
#view-matchan .sec{padding:64px 0 8px}
#view-matchan .sec-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
#view-matchan .sec-h h2{font-size:clamp(24px,3.4vw,32px);font-weight:400;margin:0;letter-spacing:.04em;line-height:1.4;text-wrap:balance}
#view-matchan .sec-h .lat{font-size:12px;letter-spacing:.24em;color:var(--ink2);text-transform:uppercase}
#view-matchan .sec-note{color:var(--ink2);font-size:15px;margin:0 0 26px;max-width:40em}

/* 醬水滴 bullet */
#view-matchan .drop{display:inline-block;width:10px;height:10px;border-radius:0 55% 55% 55%;transform:rotate(45deg);background:var(--accent);flex:none}
#view-matchan .drop.hollow{background:transparent;border:1.6px solid var(--soy)}

/* ===== HERO ===== */
#view-matchan .mh{position:relative;overflow:hidden;padding-top:26px}
#view-matchan .mh-crumb{font-size:12.5px;color:var(--ink2);letter-spacing:.06em}
#view-matchan .mh-crumb b{color:var(--accent-deep);font-weight:400}
#view-matchan .mh-grid{display:grid;grid-template-columns:auto 1fr minmax(260px,400px);gap:36px;align-items:start;padding:34px 0 0}
#view-matchan .mh-vert{writing-mode:vertical-rl;text-orientation:mixed;font-size:19px;letter-spacing:.26em;line-height:2;color:var(--ink);padding-top:6px;height:250px;border-right:1px solid var(--line);padding-right:18px;margin-right:2px}
#view-matchan .mh-copy{padding-top:6px}
#view-matchan .mh-copy h1{font-size:clamp(36px,5.6vw,58px);font-weight:400;line-height:1.32;margin:0 0 22px;letter-spacing:.05em;text-wrap:balance}
#view-matchan .mh-copy h1 .dip{display:block;width:max-content}
#view-matchan .mh-pun{font-size:13.5px;color:var(--ink2);margin:-6px 0 16px;letter-spacing:.05em}
#view-matchan .mh-copy p{max-width:32em;color:var(--ink2);margin:0 0 8px}
#view-matchan .mh-copy .cta-row{justify-content:flex-start;margin-top:26px}
#view-matchan .mh-ball{position:relative;align-self:end;justify-self:center;width:min(100%,360px);margin-bottom:-92px;z-index:1}
#view-matchan .mh-ball img{width:100%;display:block;animation:dipin 1.3s cubic-bezier(.34,1.4,.5,1) both}
#view-matchan .mh-ball .ripple{position:absolute;left:50%;bottom:52px;width:180px;height:26px;transform:translateX(-50%);border-radius:50%;border:2px solid var(--cream);opacity:0;animation:ripple 1.6s .9s ease-out both}
#view-matchan .mh-wave{display:block;width:100%;height:130px;margin-top:20px}
#view-matchan .mh-wave svg{width:100%;height:100%;display:block}
@keyframes dipin{from{transform:translateY(-110px)}to{transform:translateY(0)}}
@keyframes ripple{0%{opacity:0;transform:translateX(-50%) scale(.4)}30%{opacity:.9}100%{opacity:0;transform:translateX(-50%) scale(1.5)}}


/* ===== 就醬搭 案例帶（膠囊列） ===== */
#view-matchan .caseband{margin-top:70px;background:var(--wave);color:var(--cream);position:relative;padding:0 0 46px}
#view-matchan .caseband .topwave{display:block;width:100%;height:70px;margin-top:-1px;transform:translateY(-69px);margin-bottom:-69px}
#view-matchan .caseband .topwave svg{width:100%;height:100%;display:block}
#view-matchan .caseband .dip{color:var(--cream)}
#view-matchan .caseband .sec-note{color:var(--cream);opacity:.88}
#view-matchan .caseband .lat{color:var(--cream);opacity:.7}
#view-matchan .caseband .ccard{box-shadow:0 10px 26px rgba(0,0,0,.16)}
#view-matchan .caseband .cap{color:var(--cream)}
#view-matchan .caseband .cap .t small{color:var(--cream);opacity:.7}
#view-matchan .capsules{display:flex;gap:18px;overflow-x:auto;padding:10px 4px 18px;scroll-snap-type:x mandatory;scrollbar-width:thin}
#view-matchan .cap{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:var(--ink);width:130px;text-align:center}
#view-matchan .cap .ph{width:96px;height:96px;border-radius:50%;background:var(--cs,var(--accent-soft));display:grid;place-items:center;position:relative;flex:none;box-shadow:0 6px 14px rgba(72,80,33,.10)}
#view-matchan .cap .ph i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--head);top:44%}
#view-matchan .cap .ph i.l{left:36%} #view-matchan .cap .ph i.r{right:36%}
#view-matchan .cap .ph b{position:absolute;top:56%;left:50%;width:14px;height:7px;border:1.8px solid var(--head);border-top:0;border-radius:0 0 10px 10px;transform:translateX(-50%)}
#view-matchan .cap .ph .seal{position:absolute;right:-6px;bottom:-6px;width:28px;height:28px}
#view-matchan .cap .t{font-size:13.5px;line-height:1.55}
#view-matchan .cap .t small{display:block;font-size:11px;color:var(--ink2);letter-spacing:.1em;margin-top:2px}
#view-matchan .cap.s .ph{--cs:var(--straw-soft)} #view-matchan .cap.b .ph{--cs:var(--mustard-soft)} #view-matchan .cap.u .ph{--cs:var(--blueb-soft)}

/* ===== 案例卡 ===== */
#view-matchan .ccard{position:relative;background:var(--card);border-radius:6px;box-shadow:0 8px 22px rgba(72,80,33,.08);padding:30px 32px;display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:start}
#view-matchan .ccard .photo{width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F6F3E4,#E6ECD6 70%);display:grid;place-items:center;color:var(--ink2);font-size:12.5px;text-align:center;padding:20px;line-height:1.6;position:relative}
#view-matchan .ccard .photo i{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--head);top:42%}
#view-matchan .ccard .photo i.pl{left:37%}
#view-matchan .ccard .photo i.pr{right:37%}
#view-matchan .ccard .photo b{position:absolute;top:54%;left:50%;width:30px;height:15px;border:3px solid var(--head);border-top:0;border-radius:0 0 18px 18px;transform:translateX(-50%)}
#view-matchan .ccard .photo::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(to top,var(--accent-soft) 0 22%,transparent 22%)}
#view-matchan .ccard .badge{display:inline-block;font-size:11.5px;background:var(--cream);color:var(--soy);border-radius:999px;padding:3px 12px;margin-bottom:10px;letter-spacing:.06em}
#view-matchan .ccard h3{font-size:20px;font-weight:400;margin:0 0 6px;color:var(--head);letter-spacing:.03em}
#view-matchan .ccard dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
#view-matchan .ccard dt{font-size:12px;letter-spacing:.12em;color:var(--accent-deep)}
#view-matchan .ccard dd{margin:2px 0 0;font-size:14px;color:var(--ink2)}
#view-matchan .ccard .sealimg{position:absolute;right:22px;bottom:18px;width:56px;height:56px;transform:rotate(-10deg)}
#view-matchan .spec{border-radius:0;border:none;border-top:1px dashed var(--line);background:none;margin-top:22px;padding:16px 2px 0;font-size:13.5px}

/* ===== 可以一起想的：小卡清單 ===== */
#view-matchan .scope{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
#view-matchan .catrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:18px;margin:24px 0 36px;text-align:center}
#view-matchan .cat{display:flex;flex-direction:column;align-items:center;gap:8px}
#view-matchan .cat svg{width:50px;height:50px}
#view-matchan .cat svg path,#view-matchan .cat svg rect,#view-matchan .cat svg circle,#view-matchan .cat svg ellipse{fill:currentColor}
#view-matchan .cat span{font-size:13px;color:var(--ink);letter-spacing:.02em}
#view-matchan .cat.c1{color:var(--matcha)}
#view-matchan .cat.c2{color:var(--straw)}
#view-matchan .cat.c3{color:var(--mustard)}
#view-matchan .cat.c4{color:var(--blueb)}
#view-matchan .scope-no{margin-top:20px;font-size:12.5px;line-height:1.75;color:var(--ink2)}
#view-matchan .scope-no b{color:var(--soy);font-weight:500}
@media (max-width:640px){#view-matchan .catrow{grid-template-columns:repeat(2,1fr)}}
#view-matchan .scope h3{font-size:17.5px;font-weight:400;margin:0 0 14px;color:var(--head);letter-spacing:.04em;display:flex;align-items:center;gap:10px}
#view-matchan .scope .yes h3::before{content:"";width:12px;height:12px;border-radius:0 55% 55% 55%;transform:rotate(45deg);background:var(--mustard)}
#view-matchan .scope .chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
#view-matchan .scope .chips .chip{background:rgba(217,164,65,.13);border:1.4px solid var(--mustard);color:var(--head);border-radius:999px;padding:9px 18px;font-size:14px;letter-spacing:.02em;line-height:1.3}
#view-matchan .scope .no h3{color:var(--soy)}
#view-matchan .scope .no h3::before{content:"";width:12px;height:12px;border-radius:0 55% 55% 55%;transform:rotate(45deg);border:1.6px solid var(--soy);box-sizing:border-box}
#view-matchan .scope ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#view-matchan .scope li{padding:12px 2px;border-bottom:1px solid var(--line);color:var(--ink);font-size:14.5px;line-height:1.8}
#view-matchan .scope .no li{color:var(--ink2)}
#view-matchan .scope li .drop{margin-top:9px}
#view-matchan .drop.m{background:var(--mustard)}

/* ===== 限量｜公開案例合作促銷（跨主題借燒賣打包首頁紅色系，跟主色系拉開，讀起來像另一件事） ===== */
#view-matchan .promo{background:#C05A50;color:#FBF6E6;border-radius:14px;padding:24px 30px;margin:20px 0 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
#view-matchan .promo-copy b{display:block;font-size:15px;letter-spacing:.06em;margin-bottom:6px}
#view-matchan .promo-copy p{margin:0;font-size:14px;line-height:1.75;color:#FBF6E6;opacity:.92;max-width:46em}
#view-matchan .promo-copy a{color:#FBF6E6;text-decoration:underline}
#view-matchan .promo .btn{flex:none;background:#FBF6E6;border-color:#FBF6E6;color:#A84A41}
#view-matchan .promo .btn::after{background:#F3E3DE}

/* ===== 方案：要沾多深 ===== */
#view-matchan .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
#view-matchan .plan{position:relative;overflow:hidden;background:var(--card);border-radius:6px;box-shadow:0 8px 22px rgba(72,80,33,.08);padding:28px 26px 30px;min-height:380px;display:flex;flex-direction:column;--d:20%;--c:var(--accent);--cs:var(--accent-soft)}
#view-matchan .plan.p2{--d:38%;--c:var(--mustard);--cs:var(--mustard-soft)}
#view-matchan .plan.p3{--d:58%;--c:var(--blueb);--cs:var(--blueb-soft)}
#view-matchan .plan .sauce{position:absolute;left:-6%;right:-6%;bottom:0;height:var(--d);background:var(--cs);border-radius:50% 50% 0 0 / 22px 22px 0 0;transition:height .5s cubic-bezier(.3,1.1,.4,1)}
#view-matchan .plan:hover .sauce{height:calc(var(--d) + 8%)}
#view-matchan .plan > *:not(.sauce){position:relative;z-index:1}
#view-matchan .plan .depth{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;color:var(--c)}
#view-matchan .plan .depth .drop{background:var(--c)}
#view-matchan .plan .pill{font-size:11.5px;background:var(--cream);color:var(--soy);border-radius:999px;padding:2px 10px;margin-left:8px;letter-spacing:.04em}
#view-matchan .plan h3{font-size:22px;font-weight:400;margin:10px 0 2px;color:var(--head);letter-spacing:.04em}
#view-matchan .plan .amt{font-size:28px;color:var(--head);margin:0 0 6px;font-variant-numeric:tabular-nums}
#view-matchan .plan .amt small{display:block;font-size:13px;color:var(--ink2);margin-top:2px}
#view-matchan .plan ul{margin:8px 0 0;padding-left:18px;color:var(--ink2);font-size:13.8px}
#view-matchan .plan .sauce::before{content:"";position:absolute;left:0;right:0;top:-10px;height:12px;background:inherit;border-radius:50%;opacity:.6}
#view-matchan .plan li{margin-bottom:6px}
#view-matchan .plan .fine{margin-top:auto;padding-top:16px;font-size:12.5px;color:var(--ink2)}
#view-matchan .plan .cta{display:inline-block;margin-top:14px;padding:10px 22px;border-radius:999px;background:var(--c);color:#fff;font-size:14px;font-weight:600;text-decoration:none;text-align:center}
#view-matchan .plan .cta.off{background:transparent;color:var(--c);box-shadow:inset 0 0 0 1.5px var(--c);cursor:default;user-select:none}
#view-matchan .plan .aside{margin-top:6px;font-size:12px;color:var(--ink2)}

#view-matchan .rounds{margin-top:38px}
#view-matchan .rounds h3{font-size:18px;font-weight:500;margin:0 0 12px;color:var(--accent-deep);letter-spacing:.06em}
#view-matchan .rounds .rnote{margin:0 0 18px;font-size:14px;color:var(--ink2);line-height:1.5}
#view-matchan .rounds .rflow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 18px}
#view-matchan .rounds .rflow span{background:var(--accent-soft);color:var(--accent-deep);border-radius:999px;padding:11px 22px;font-size:15px;font-weight:600}
#view-matchan .rounds .rflow i{color:var(--accent-deep);font-style:normal;font-size:16px}
#view-matchan .rounds ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
#view-matchan .rounds li{font-size:13.5px;color:var(--ink2);line-height:1.5}

/* ===== 收尾：來沾一下 ===== */
#view-matchan .dipcta{margin-top:90px;position:relative;background:var(--wave);color:var(--cream);text-align:center;padding:0 22px 54px}
#view-matchan .dipcta .topwave{display:block;width:calc(100% + 44px);margin-left:-22px;margin-right:-22px;height:120px;transform:translateY(-119px);margin-bottom:-119px}
#view-matchan .dipcta .topwave svg{width:100%;height:100%;display:block}
#view-matchan .dipcta .ball{width:170px;margin:-150px auto 0;position:relative;z-index:2}
#view-matchan .dipcta .ball img{width:100%;display:block}
#view-matchan .dipcta h2{font-size:clamp(26px,3.6vw,34px);font-weight:400;margin:6px 0 10px;letter-spacing:.06em}
#view-matchan .dipcta p{margin:0 auto 4px;max-width:30em;font-size:15.5px;opacity:.92}
#view-matchan .dipcta .btn{margin-top:22px}
#view-matchan .dipcta .hours{font-size:12.5px;opacity:.75;margin-top:16px}
#view-matchan .dipcta .lockup{width:min(300px,70%);margin:70px auto 14px;display:block}
#view-matchan .dipcta .taste{font-size:14px;letter-spacing:.2em;opacity:.9;margin:0 auto}
body.tm footer.site{margin-top:0}

@media (prefers-reduced-motion:reduce){
  #view-matchan .mh-ball img,#view-matchan .mh-ball .ripple,#view-matchan .blob i{animation:none}
  #view-matchan .mh-ball .ripple{display:none}
}
@media (max-width:860px){
  #view-matchan .mh-grid{grid-template-columns:auto 1fr;gap:22px}
  #view-matchan .mh-ball{grid-column:1 / -1;width:min(70%,300px);margin-bottom:-96px}
  #view-matchan .ccard{grid-template-columns:1fr}
  #view-matchan .ccard .photo{margin:0 auto}
  #view-matchan .ccard dl{grid-template-columns:1fr}
}
@media (max-width:600px){
  #view-matchan .mh-grid{grid-template-columns:1fr}
  #view-matchan .mh-vert{writing-mode:horizontal-tb;height:auto;border-right:0;border-left:3px solid var(--accent);padding:0 0 0 14px;margin:0;font-size:16px;letter-spacing:.12em;line-height:1.8}
  #view-matchan .mh-copy h1 .dip{width:auto;display:inline}
}

/* ===== 怎麼開始 ===== */
#view-matchan .steps{display:flex;align-items:flex-start;gap:32px}
#view-matchan .step{flex:1;min-width:0;text-align:left;padding-left:2px}
#view-matchan .step .sn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;font-size:19px;font-weight:500;margin-bottom:12px;font-variant-numeric:tabular-nums}
#view-matchan .step h3{font-size:18.5px;font-weight:400;margin:0 0 6px;color:var(--head);letter-spacing:.04em}
#view-matchan .step p{margin:0;font-size:14px;color:var(--ink2);line-height:1.65}
@media (max-width:640px){
  #view-matchan .steps{flex-direction:column;align-items:stretch;gap:28px}
}

/* ===== 為什麼叫搭醬 ===== */
#view-matchan .story{text-align:center;padding:72px 0 24px;max-width:34em;margin:0 auto}
#view-matchan .story img{width:76px;height:76px;transform:rotate(-8deg);margin-bottom:14px}
#view-matchan .story h2{font-size:clamp(21px,2.8vw,26px);font-weight:400;margin:0 0 6px;color:var(--head);letter-spacing:.05em}
#view-matchan .story .pun{font-size:13.5px;color:var(--ink2);margin:0 0 22px;letter-spacing:.05em}
#view-matchan .story p{margin:0 0 16px;font-size:16px;color:var(--ink);line-height:2}


/* ===== 燒賣打包 首頁視覺稿 v1｜蒸籠攤位 ===== */
body:not(.tm){
  --paper:#F8F2E4; --card:#FFFDF8; --ink:#6C5B47; --ink2:#A08F79; --line:#EBDFC9; --head:#5C4B38;
  --red:#C05A50; --red-deep:#A84A41; --red-soft:#F6E5E1; --navy:#4A5680; --navy-deep:#3B4568; --navy-soft:#E6E8F0;
  --matcha:#7E9C58; --matcha-deep:#66863A; --matcha-soft:#EAF0DF; --brown:#6B4F3A; --gold:#D9A441; --gold-soft:#F7EDD8;
  --bamboo:#C9A46B; --bamboo-dark:#A8834E; --bamboo-light:#EBD9B2; --kraft:#E6D2A8; --cream:#FBF6E6;
}
body:not(.tm)::before{content:"";position:fixed;inset:0;background:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.9%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.35%200%200%200%200%200.33%200%200%200%200%200.2%200%200%200%20.55%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E") repeat;opacity:.14;pointer-events:none;z-index:0;mix-blend-mode:multiply}
body:not(.tm) header.site{background:rgba(248,242,228,.92);backdrop-filter:blur(6px)}
#view-home{position:relative;z-index:1}
#view-home .wrap{max-width:1060px}

/* 竹籤吊牌標題 */
:is(#view-home,.sv) .tagh{display:flex;align-items:center;gap:16px;margin:0 0 8px}
:is(#view-home,.sv) .tagh .tag{position:relative;display:inline-flex;align-items:center;gap:12px;background:var(--kraft);color:var(--head);padding:10px 24px 10px 30px;border-radius:8px 18px 18px 8px;font-size:clamp(20px,2.8vw,25px);font-weight:700;letter-spacing:.06em;box-shadow:0 3px 0 #D2BC8E}
:is(#view-home,.sv) .tagh .tag::before{content:"";position:absolute;left:11px;top:50%;width:8px;height:8px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px #C9B282;transform:translateY(-50%)}
:is(#view-home,.sv) .tagh .tag::after{content:"";position:absolute;left:14px;top:-26px;width:2px;height:26px;background:#B79B6A;transform:rotate(18deg);transform-origin:bottom}
:is(#view-home,.sv) .tagh .lat{font-size:12px;letter-spacing:.24em;color:var(--ink2);text-transform:uppercase}
:is(#view-home,.sv) .tagh.cream .tag{background:var(--cream);box-shadow:0 3px 0 #E5D8B8}
:is(#view-home,.sv) .tagh.cream .lat{color:rgba(255,253,246,.8)}

/* ── 區塊招牌物件（一區一款輪替）── */
/* 暖簾 */
:is(#view-home,.sv) .tagh.noren{padding-top:7px}
:is(#view-home,.sv) .tagh.noren .tag{background:var(--c,var(--red));color:var(--cream);border-radius:0;padding:13px 30px 15px;box-shadow:none}
:is(#view-home,.sv) .tagh.noren .tag::before{content:"";left:-14px;right:-14px;top:-7px;width:auto;height:7px;border-radius:4px;background:#8C7355;box-shadow:none;transform:none}
:is(#view-home,.sv) .tagh.noren .tag::after{content:"";left:50%;top:auto;bottom:0;width:0;height:0;background:none;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:9px solid var(--paper);transform:translateX(-50%)}
/* 便當紙帶 */
:is(#view-home,.sv) .tagh.band .tag{background:var(--cream);border-top:3px solid var(--c,var(--red));border-bottom:3px solid var(--c,var(--red));border-radius:0;box-shadow:none;padding:9px 28px;letter-spacing:.12em}
:is(#view-home,.sv) .tagh.band .tag::before{display:none}
:is(#view-home,.sv) .tagh.band .tag::after{display:none}
/* 打包繩吊牌 */
:is(#view-home,.sv) .tagh.rope{padding-left:56px}
:is(#view-home,.sv) .tagh.rope .tag{border-radius:4px;transform:rotate(-1.5deg)}
:is(#view-home,.sv) .tagh.rope .tag::after{content:"";position:absolute;right:100%;top:50%;left:auto;width:64px;height:2px;background:#B79B6A;transform:none;margin-right:2px}
/* 蒸籠蓋 */
:is(#view-home,.sv) .tagh.lid{padding-top:16px}
:is(#view-home,.sv) .tagh.lid .tag{background:#EFE0BE;border:2px solid #A8834E;border-radius:5px;box-shadow:none;padding:9px 30px}
:is(#view-home,.sv) .tagh.lid .tag::before{content:"";left:-2px;right:-2px;top:-14px;width:auto;height:14px;background:#E4CE9F;border:2px solid #A8834E;border-bottom:none;border-radius:100px 100px 0 0;box-shadow:none;transform:none}
:is(#view-home,.sv) .tagh.lid .tag::after{content:"";left:50%;top:-21px;width:9px;height:9px;border-radius:50%;background:#8C6B3E;transform:translateX(-50%);height:9px}
/* 燒賣紙杯 */
:is(#view-home,.sv) .tagh.cup .tag{background:#FBF6E6 repeating-linear-gradient(90deg,rgba(168,131,78,.16) 0 2px,transparent 2px 15px);clip-path:polygon(0 0,100% 0,91% 100%,9% 100%);border-radius:0;box-shadow:none;padding:11px 38px}
:is(#view-home,.sv) .tagh.cup .tag::before{display:none}
:is(#view-home,.sv) .tagh.cup .tag::after{display:none}
/* 醬油瓶標題（搭醬跨頁區塊用） */
:is(#view-home,.sv) .tagh.soy{gap:10px}
:is(#view-home,.sv) .tagh.soy .tag{background:none;box-shadow:none;padding:0;font-size:19px;font-weight:700}
:is(#view-home,.sv) .tagh.soy .tag::before{display:none}
:is(#view-home,.sv) .tagh.soy .tag::after{display:none}
/* 次要標題：小方塊＋純文字 */
:is(#view-home,.sv) .tagh.min .tag{background:none;box-shadow:none;padding:0 0 0 20px;font-size:17.5px;font-weight:700}
:is(#view-home,.sv) .tagh.min .tag::before{left:0;top:50%;width:9px;height:9px;border-radius:2px;background:var(--c,var(--red));box-shadow:none;transform:translateY(-50%)}
:is(#view-home,.sv) .tagh.min .tag::after{display:none}
#view-home .sec-note{color:var(--ink2);font-size:15px;margin:0 0 24px;max-width:42em}

/* ===== HERO：蒸籠攤位 ===== */
#view-home .scene{position:relative;overflow:hidden;background:linear-gradient(#FBF7EE 0,#F8F2E4 60%,#F1E7D1 100%);padding:34px 0 0}
#view-home .scene-in{position:relative;max-width:1060px;margin:0 auto;padding:0 22px;min-height:560px}
#view-home .sign{position:relative;width:min(300px,64vw);margin:0 auto;z-index:3;padding-top:16px}
#view-home .sign .logo{width:100%;display:block;border-radius:50%;filter:drop-shadow(0 12px 20px rgba(92,75,56,.20))}
#view-home .sign .title{position:absolute;left:50%;bottom:-14px;width:88%;transform:translateX(-50%) rotate(-4deg);z-index:2;filter:drop-shadow(0 4px 0 rgba(0,0,0,.08))}
#view-home .floaty{position:absolute;z-index:2;animation:bob 4.4s ease-in-out infinite;filter:drop-shadow(0 6px 8px rgba(92,75,56,.14))}
#view-home .floaty.chop{width:104px;left:calc(50% - 330px);top:130px;animation-delay:.6s}
#view-home .floaty.soy{width:78px;right:calc(50% - 318px);top:252px;animation-delay:1.6s}
#view-home .cloud{position:absolute;right:max(22px,calc(50% - 470px));top:44px;z-index:4;width:168px;height:168px;display:grid;place-items:center;text-align:center;color:var(--cream);background:var(--red);border-radius:50%;box-shadow:0 0 0 6px var(--paper),0 0 0 8px var(--red);padding:18px;animation:bob 4s ease-in-out infinite}
#view-home .cloud::before,#view-home .cloud::after{content:"";position:absolute;width:64px;height:64px;border-radius:50%;background:var(--red);z-index:-1}
#view-home .cloud::before{left:-14px;top:30px} #view-home .cloud::after{right:-10px;bottom:22px}
#view-home .cloud b{display:block;font-size:12px;letter-spacing:.2em;opacity:.85;margin-bottom:4px}
#view-home .cloud .big{font-size:17px;font-weight:700;line-height:1.35}
#view-home .cloud small{display:block;font-size:11.5px;opacity:.85;margin-top:4px}
#view-home .cloud .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cream);margin-right:5px;animation:blink 1.6s infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
#view-home .counter{position:absolute;left:0;right:0;bottom:0;height:250px;pointer-events:none}
#view-home .counter svg{position:absolute;left:50%;bottom:0;width:max(1180px,100%);transform:translateX(-50%);height:100%}
#view-home .mascot{position:absolute;bottom:64px;width:96px;z-index:2;animation:bob 5s ease-in-out infinite}
#view-home .mascot.a{left:calc(50% - 270px);animation-delay:.3s}
#view-home .mascot.b{left:calc(50% - 52px);bottom:58px;width:104px;animation-delay:1.1s}
#view-home .mascot.c{left:calc(50% + 160px);animation-delay:2s}
#view-home .steam{opacity:.75;animation:steam 3.6s ease-in-out infinite}
#view-home .steam.s2{animation-delay:1.2s} #view-home .steam.s3{animation-delay:2.4s}
@keyframes steam{0%{transform:translateY(0);opacity:0}25%{opacity:.7}100%{transform:translateY(-46px);opacity:0}}
#view-home .plank{background:var(--brown);height:22px;position:relative;z-index:2}
#view-home .plank::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 180px,rgba(0,0,0,.12) 180px 183px)}

/* ===== 一句話與 CTA ===== */
#view-home .intro{text-align:center;padding:52px 22px 20px}
#view-home .intro h1{font-size:clamp(24px,3.8vw,34px);font-weight:500;margin:0 0 14px;letter-spacing:.06em;color:var(--head);line-height:1.6;text-wrap:balance}
#view-home .intro .cat{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 14px}
#view-home .intro .cat span{font-size:13px;color:var(--head);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 14px}
#view-home .intro .pain{color:var(--ink2);font-size:15px;max-width:38em;margin:0 auto}
#view-home .intro .cta-row{margin-top:24px}

/* ===== 三大分類色塊 ===== */
#view-home .picks{padding:46px 22px 10px}
#view-home .blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:22px}
#view-home .blk-c{position:relative;overflow:hidden;min-height:250px;border-radius:4px;padding:26px 26px 22px;color:var(--cream);display:flex;flex-direction:column;text-decoration:none;cursor:pointer;transition:transform .35s cubic-bezier(.3,1.2,.4,1),box-shadow .35s;box-shadow:0 8px 22px rgba(92,75,56,.14);border:none;font-family:inherit;text-align:left;line-height:1.85;font-size:16px}
#view-home .blk-c:hover{transform:translateY(-6px);box-shadow:0 16px 30px rgba(92,75,56,.2)}
#view-home .blk-c::before{content:"";position:absolute;inset:0;opacity:.14;background-image:radial-gradient(#fff 1.6px,transparent 1.8px);background-size:16px 16px}
#view-home .blk-c.r{background:var(--red)} #view-home .blk-c.n{background:var(--navy)} #view-home .blk-c.g{background:var(--matcha)}
#view-home .blk-c .ribbon{position:relative;align-self:center;background:var(--cream);color:var(--head);font-size:11.5px;letter-spacing:.2em;padding:4px 18px;border-radius:999px;font-weight:700;margin-bottom:22px}
#view-home .blk-c .ribbon::before,#view-home .blk-c .ribbon::after{content:"";position:absolute;top:50%;width:26px;height:2px;background:var(--cream);opacity:.7}
#view-home .blk-c .ribbon::before{right:100%;margin-right:6px} #view-home .blk-c .ribbon::after{left:100%;margin-left:6px}
#view-home .blk-c h3{position:relative;font-size:clamp(24px,3vw,30px);font-weight:700;margin:0;line-height:1.35;letter-spacing:.08em;text-align:center;text-shadow:0 2px 0 rgba(0,0,0,.08)}
#view-home .blk-c p{position:relative;margin:12px 0 0;font-size:13.5px;opacity:.9;text-align:center;max-width:22em;align-self:center}
#view-home .blk-c .go-hint{position:relative;align-self:center;margin-top:18px;background:var(--cream);color:var(--head);font-size:12.5px;letter-spacing:.08em;padding:5px 18px;border-radius:999px;font-weight:700}
#view-home .blk-c .pic{position:absolute;right:-6px;bottom:-14px;width:110px;transform:rotate(-8deg);filter:drop-shadow(0 4px 6px rgba(0,0,0,.18));transition:transform .4s}
#view-home .blk-c:hover .pic{transform:rotate(-2deg) translateY(-6px)}
#view-home .blk-c .soon{position:absolute;left:16px;top:14px;font-size:11px;letter-spacing:.14em;opacity:.8}

/* ===== 紅底特輯：近期推薦／開團 ===== */
#view-home .feat{position:relative;margin-top:60px;background:var(--red);color:var(--cream);padding:56px 0 60px;overflow:hidden}
#view-home .feat .checker{position:absolute;width:260px;height:260px;background:repeating-conic-gradient(rgba(0,0,0,.12) 0 25%,transparent 0 50%);background-size:44px 44px;pointer-events:none}
#view-home .feat .checker.tr{right:-40px;top:-40px;-webkit-mask:radial-gradient(circle at 100% 0,#000 20%,transparent 75%);mask:radial-gradient(circle at 100% 0,#000 20%,transparent 75%)}
#view-home .feat .checker.bl{left:-40px;bottom:-40px;-webkit-mask:radial-gradient(circle at 0 100%,#000 20%,transparent 75%);mask:radial-gradient(circle at 0 100%,#000 20%,transparent 75%)}
#view-home .feat .wrap{position:relative}
#view-home .feat .sec-note{color:rgba(255,253,246,.82)}
#view-home .feat .svc-row b{color:var(--cream)} #view-home .feat .svc-row span{color:rgba(255,253,246,.8)}
#view-home .feat .chip{background:transparent;border-color:rgba(255,253,246,.5);color:var(--cream)}
#view-home .feat .chip.on{background:var(--cream);border-color:var(--cream);color:var(--red-deep)}
#view-home .feat .tpost{background:var(--card);border:none;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.12);position:relative;flex:0 0 300px;scroll-snap-align:start}
#view-home .feat .tpost .ph{background:repeating-linear-gradient(45deg,#F4EAD8,#F4EAD8 10px,#FBF6EC 10px,#FBF6EC 20px)}
#view-home .feat .tpost h3{color:var(--head)}
#view-home .feat .tpost .ptags span{background:var(--red-soft);color:var(--red-deep)}
#view-home .feat .tpost .no{position:absolute;left:-8px;top:-10px;width:36px;height:36px;border-radius:50%;background:var(--cream);display:grid;place-items:center;font-size:17px;box-shadow:0 2px 0 #D9C08C;line-height:1}
#view-home .feat .tpost:hover .tmeta{color:var(--red-deep)}

/* 貼文帶：橫向滑動 */
#view-home .feedwrap{position:relative}
#view-home .feedrow{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 16px;scrollbar-width:thin}
#view-home .fbtn{position:absolute;top:42%;z-index:5;width:44px;height:44px;border-radius:50%;border:none;background:var(--cream);color:var(--red-deep);font-size:18px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.22);display:grid;place-items:center;transition:transform .2s}
#view-home .fbtn:hover{transform:scale(1.08)}
#view-home .fbtn.prev{left:-14px} #view-home .fbtn.next{right:-14px}

/* ===== 關於燒賣小段 ===== */
#view-home .about-mini{padding:64px 22px 10px}
#view-home .about-mini{text-align:center}
#view-home .about-mini .tagh{justify-content:center}
#view-home .am-mascots{margin-top:26px}
#view-home .am-mascots{display:flex;justify-content:center;gap:22px;margin-bottom:18px}
#view-home .am-mascots img{width:72px;height:72px;animation:bob 4.6s ease-in-out infinite}
#view-home .am-mascots img:nth-child(2){animation-delay:.8s}
#view-home .am-mascots img:nth-child(3){animation-delay:1.6s}
#view-home .am-line{margin:0 0 8px;font-size:16.5px;color:var(--head);letter-spacing:.04em}
#view-home .am-sub{margin:0;font-size:13.5px;color:var(--ink2)}
#view-home .am-go{display:inline-block;margin-top:16px;font-size:14px;color:var(--head);text-decoration:none;font-weight:500}
#view-home .am-go small{color:var(--ink2);font-size:11px;margin-left:6px;font-weight:400}

/* ===== 官方 LINE CTA（蒸籠） ===== */
/* ===== 官方 LINE CTA（整籠：CSS 籠身＋固定尺寸蓋子） ===== */
:is(#view-home,.sv) .steamcta{position:relative;margin:112px 0 10px;background:repeating-linear-gradient(180deg,#EFE1C0 0%,#E8D5AA 50%,#EFE1C0 100%);background-size:100% 150px;border:6px solid #A8834E;border-radius:20px;padding:50px 30px 40px;text-align:center;color:#5C4B38;box-shadow:0 12px 24px rgba(92,75,56,.16)}
:is(#view-home,.sv) .steamcta::before{content:"";position:absolute;left:0;right:0;top:0;height:24px;background:linear-gradient(180deg,#C9A46B 0%,#A8834E 65%,#8A5C3C 100%);border-radius:18px 18px 0 0;z-index:2}
:is(#view-home,.sv) .steamcta::after{content:"";position:absolute;left:0;right:0;top:24px;height:6px;background:#C9A46B;z-index:2}
:is(#view-home,.sv) .steamcta .ctalid{position:absolute;left:0;right:0;bottom:100%;width:100%;height:72px;margin-bottom:-14px;z-index:1;display:block;filter:drop-shadow(0 3px 4px rgba(92,75,56,.16))}
:is(#view-home,.sv) .steamcta .ctaknob{position:absolute;left:50%;top:-52px;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#C9A46B 0%,#8A5C3C 78%);z-index:1;box-shadow:0 2px 3px rgba(92,75,56,.25)}
:is(#view-home,.sv) .steamcta .cwall{position:absolute;left:12px;right:12px;top:30px;bottom:12px;border:4px solid #96754A;border-top:none;border-radius:0 0 8px 8px;pointer-events:none;z-index:1;opacity:.55}
:is(#view-home,.sv) .steamcta .cwall2{position:absolute;left:19px;right:19px;top:30px;bottom:19px;border:2px solid rgba(255,247,224,.6);border-top:none;border-radius:0 0 4px 4px;pointer-events:none;z-index:1}
:is(#view-home,.sv) .steamcta h2{position:relative;z-index:3;font-size:clamp(19px,2.8vw,23px);font-weight:500;margin:0 0 8px;letter-spacing:.05em;color:#5C4B38}
:is(#view-home,.sv) .steamcta p{position:relative;z-index:3;margin:0 auto 4px;font-size:14.5px;color:#7A6248;max-width:32em}
:is(#view-home,.sv) .steamcta .btn{position:relative;z-index:3;margin-top:20px;background:var(--sc,var(--red));border-color:var(--sc,var(--red));color:#FFFDF6}
:is(#view-home,.sv) .steamcta .btn::after{background:var(--scd,var(--red-deep))}
.sv{--sc:var(--c);--scd:var(--cd)}
@media (max-width:640px){
  :is(#view-home,.sv) .steamcta{margin-top:88px;padding:44px 22px 34px}
  :is(#view-home,.sv) .steamcta .ctalid{height:56px;margin-bottom:-10px}
  :is(#view-home,.sv) .steamcta .ctaknob{top:-41px;width:16px;height:16px}
}
.sv{--sc:var(--c);--scd:var(--cd)}

@media (prefers-reduced-motion:reduce){#view-home .cloud,#view-home .mascot,#view-home .steam,#view-home .am-mascots img{animation:none}}
@media (max-width:820px){
  #view-home .floaty{display:none}
  #view-home .cloud{position:relative;right:auto;top:auto;margin:0 auto 22px;width:150px;height:150px}
  #view-home .scene-in{min-height:0;padding-bottom:230px}
  #view-home .mascot{width:72px;bottom:40px} #view-home .mascot.a{left:calc(50% - 175px);bottom:92px} #view-home .mascot.b{left:calc(50% - 40px);width:80px;bottom:40px} #view-home .mascot.c{left:calc(50% + 110px)}
  #view-home .counter{height:210px}
  #view-home .feat .checker{width:160px;height:160px}
}

/* ===== 內頁共用（代購・演唱會・關於）：和菓子邏輯——直角容器、排版優先、圓只給小元素 ===== */
.sv{--c:var(--red);--cs:var(--red-soft);--cd:var(--red-deep);position:relative;z-index:1}
.sv.navy{--c:var(--navy);--cs:var(--navy-soft);--cd:var(--navy-deep)}
.sv.gold{--c:var(--gold);--cs:var(--gold-soft);--cd:#B8892F}
.sv .wrap{max-width:1020px}
.sv .crumb{font-size:12.5px;color:var(--ink2);padding-top:26px;letter-spacing:.06em}
.sv .crumb b{color:var(--cd);font-weight:400}
.sv-hero{text-align:center;padding:44px 0 8px}
.sv-hero h1{font-size:clamp(26px,4vw,36px);font-weight:700;letter-spacing:.06em;color:var(--head);margin:0 0 14px}
.sv-hero h1 em{font-style:normal;color:var(--cd)}
.sv-hero p{color:var(--ink2);max-width:34em;margin:0 auto 6px}
.sv-hero .cta-row{margin-top:22px}
.sv .btn.primary{background:var(--c);border-color:var(--c)}
.sv .btn.primary::after{background:var(--cd)}
.sv section.pblk{padding:46px 0 6px}
:is(#view-daigou,#view-concert,#view-about) .tagh{margin-bottom:36px}
.sv .pnote{color:var(--ink2);font-size:14.5px;margin:-8px 0 24px;max-width:42em}
.sv .card{border-radius:4px}

/* 清單：懸掛粗體＋細線分項，不裝盒 */
.sv .plist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px 44px}
.sv .plist li{display:block;font-size:13.8px;color:var(--ink2);line-height:1.8}
.sv .plist li b{display:block;color:var(--head);font-weight:500;font-size:15px;margin-bottom:2px}
.sv .plist.mut{display:block;max-width:44em}
.sv .plist.mut li{font-size:12.8px;color:var(--ink2);padding:2px 0;line-height:1.65}
.sv .plist.mut li::before{content:"- ";color:#B8A88F}

/* 三欄表格式：上緣粗線，無盒 */
.sv .ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
.sv .way{padding:0 2px}
.sv .way h3{display:inline-block;font-size:15.5px;font-weight:700;margin:0 0 12px;color:var(--head);border:2px solid var(--head);padding:4px 16px;letter-spacing:.06em}
.sv .way .fit{font-size:13px;color:var(--ink2);margin:0 0 8px}
.sv .way p{margin:0;font-size:13.8px;color:var(--ink2)}

/* 流程：大字級數字＋細線，無盒 */
.sv .flow{list-style:none;margin:0;padding:0;counter-reset:fs}
.sv .flow li{display:flex;gap:20px;align-items:flex-start;padding:14px 2px;font-size:14.5px;color:var(--ink);line-height:1.85;border-bottom:1px solid var(--line);counter-increment:fs}
.sv .flow li::before{content:counter(fs,decimal-leading-zero);flex:none;font-size:26px;color:var(--c);letter-spacing:.04em;line-height:1.4;min-width:44px;font-variant-numeric:tabular-nums}
.sv .flow li b{color:var(--head);font-weight:500;margin-right:4px}

/* FAQ：細線手風琴，無盒 */
.sv details{border-bottom:1px solid var(--line)}
.sv details summary{cursor:pointer;list-style:none;padding:15px 2px;font-size:14.5px;color:var(--head);font-weight:500;display:flex;gap:12px;align-items:baseline}
.sv details summary::before{content:"Q";color:var(--cd);font-size:15px;font-weight:700}
.sv details .a{padding:0 2px 16px 27px;font-size:14px;color:var(--ink2)}

/* 衛星色帶：滿版感的方形帶 */
.sv .strip{width:fit-content;max-width:100%;background:#6B4F3A;border-radius:4px;padding:16px 26px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13.5px;color:#F5EBDC}
.sv .strip b{color:#F6DE8D;font-weight:500}
.sv .strip .tags{display:flex;gap:6px;flex-wrap:wrap}
.sv .strip .tags span{background:#8C7355;color:#F5EBDC;border-radius:999px;padding:3px 12px;font-size:12px}
.sv .strip a{color:#F6DE8D;font-weight:500}

/* 關於頁：排版展示，不裝卡 */
.sv .origin{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px 44px}
.sv .origin .half{padding:10px 2px 0}
.sv .origin .half h3{font-size:clamp(30px,4vw,40px);font-weight:700;margin:0 0 6px;letter-spacing:.14em}
.sv .origin .half h3{color:var(--head)}
.sv .origin .half p{margin:0;font-size:14.5px;color:var(--ink2)}
.sv .origin-close{margin:26px 0 0;text-align:center;font-size:14.5px;color:var(--ink)}
.sv .duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.sv .duo .card{border:none;border-radius:0;padding:0 2px;background:none}
.sv .duo .card h3{font-size:17.5px}
.sv .mascotrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;text-align:center}
.sv .mascotrow .mc{padding:10px 8px}
.sv .mascotrow img{width:92px;height:92px;margin-bottom:10px}
.sv .mascotrow b{display:block;color:var(--head);font-weight:500;margin-bottom:4px}
.sv .mascotrow p{margin:0;font-size:13px;color:var(--ink2)}
.sv .mjband{padding:6px 2px;display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center}
.sv .mjband img{width:110px}
.sv .mjband p{margin:0 0 8px;font-size:14.5px;color:var(--ink)}
.sv .mjband a{color:var(--matcha-deep);font-weight:500}
@media (max-width:640px){ .sv .mjband{grid-template-columns:1fr} .sv .mjband img{margin:0 auto} }

/* ===== 內頁插畫頁首 ===== */
.sv-banner{position:relative;overflow:hidden;height:260px;margin:0 0 -2px}
.sv-banner svg{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (max-width:760px){ .sv-banner{height:210px} }
@media (max-width:520px){ .sv-banner{height:180px} }

.sv .feedrow{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13.5px;color:var(--ink2);padding:2px 0}
.sv .feedrow .tags{display:flex;gap:6px;flex-wrap:wrap}
.sv .feedrow .tags span{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px 12px;font-size:12px;color:var(--ink)}
.sv .feedrow a{color:var(--cd);font-weight:500}


/* ===== 2026-10-27 搭醬頁合併（交接_搭醬頁官網修改_2026-10-27.md＋就醬搭案例牆改版） ===== */
/* ── 方案卡醬料：波浪水面（參考動效庫 195 液體填充、138 多層波浪）── */
#view-matchan .plan .sauce{left:0;right:0;border-radius:0;transition:height 1.1s cubic-bezier(.3,1,.4,1)}
#view-matchan .plan .sauce::before,#view-matchan .plan .sauce::after{content:"";position:absolute;left:0;right:0;top:auto;bottom:calc(100% - 1px);border-radius:0;background:var(--cs);
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-position:0 100%;mask-position:0 100%}
#view-matchan .plan .sauce::after{height:20px;opacity:1;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20140%2020%22%3E%3Cpath%20d%3D%22M0%2010%20Q35%20-8%2070%2010%20T140%2010%20V20%20H0%20Z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20140%2020%22%3E%3Cpath%20d%3D%22M0%2010%20Q35%20-8%2070%2010%20T140%2010%20V20%20H0%20Z%22/%3E%3C/svg%3E");-webkit-mask-size:140px 20px;mask-size:140px 20px}
#view-matchan .plan .sauce::before{height:24px;opacity:.45;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%2024%22%3E%3Cpath%20d%3D%22M0%2012%20Q50%20-10%20100%2012%20T200%2012%20V24%20H0%20Z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%2024%22%3E%3Cpath%20d%3D%22M0%2012%20Q50%20-10%20100%2012%20T200%2012%20V24%20H0%20Z%22/%3E%3C/svg%3E");-webkit-mask-size:200px 24px;mask-size:200px 24px}
@media (prefers-reduced-motion:no-preference){
  @keyframes jj-drift-f{from{-webkit-mask-position:0 100%;mask-position:0 100%}to{-webkit-mask-position:140px 100%;mask-position:140px 100%}}
  @keyframes jj-drift-b{from{-webkit-mask-position:0 100%;mask-position:0 100%}to{-webkit-mask-position:-200px 100%;mask-position:-200px 100%}}
  .js-motion #view-matchan .plan.seen .sauce::after{animation:jj-drift-f 1.6s cubic-bezier(.3,1,.4,1) var(--dly,0s) 1 both}
  .js-motion #view-matchan .plan.seen .sauce::before{animation:jj-drift-b 2s cubic-bezier(.3,1,.4,1) var(--dly,0s) 1 both}
}
/* ── 大片綠色區塊的上緣：波浪液面（靜止），跟方案卡醬料同一套 ── */
#view-matchan .mh-wave svg,#view-matchan .caseband .topwave svg,#view-matchan .dipcta .topwave svg{visibility:hidden}
#view-matchan .mh-wave,#view-matchan .caseband .topwave,#view-matchan .dipcta .topwave{position:relative}
#view-matchan .mh-wave::before,#view-matchan .mh-wave::after,
#view-matchan .caseband .topwave::before,#view-matchan .caseband .topwave::after,
#view-matchan .dipcta .topwave::before,#view-matchan .dipcta .topwave::after{content:"";position:absolute;left:0;right:0;bottom:0;background:var(--wave)}
#view-matchan .mh-wave::after,#view-matchan .caseband .topwave::after,#view-matchan .dipcta .topwave::after{
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20320%2036%22%3E%3Cpath%20d%3D%22M0%2018%20Q80%20-10%20160%2018%20T320%2018%20V36%20H0%20Z%22/%3E%3C/svg%3E") repeat-x 0 0/320px 36px,linear-gradient(#000,#000) no-repeat 0 35px/100% calc(100% - 35px);
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20320%2036%22%3E%3Cpath%20d%3D%22M0%2018%20Q80%20-10%20160%2018%20T320%2018%20V36%20H0%20Z%22/%3E%3C/svg%3E") repeat-x 0 0/320px 36px,linear-gradient(#000,#000) no-repeat 0 35px/100% calc(100% - 35px)}
#view-matchan .mh-wave::before,#view-matchan .caseband .topwave::before,#view-matchan .dipcta .topwave::before{opacity:.35;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20440%2044%22%3E%3Cpath%20d%3D%22M0%2022%20Q110%20-12%20220%2022%20T440%2022%20V44%20H0%20Z%22/%3E%3C/svg%3E") repeat-x -120px 0/440px 44px,linear-gradient(#000,#000) no-repeat 0 43px/100% calc(100% - 43px);
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20440%2044%22%3E%3Cpath%20d%3D%22M0%2022%20Q110%20-12%20220%2022%20T440%2022%20V44%20H0%20Z%22/%3E%3C/svg%3E") repeat-x -120px 0/440px 44px,linear-gradient(#000,#000) no-repeat 0 43px/100% calc(100% - 43px)}
#view-matchan .mh-wave::after{top:46px;bottom:20px} #view-matchan .mh-wave::before{top:34px;bottom:20px}
#view-matchan .caseband .topwave::after{top:30px} #view-matchan .caseband .topwave::before{top:18px}
#view-matchan .dipcta .topwave::after{top:60px} #view-matchan .dipcta .topwave::before{top:46px}
/* ── 頁面其他區塊（動效建議 #4、#5）── */
body.tm :focus-visible{outline:3px solid var(--wave);outline-offset:3px}
@media (max-width:760px){header.site{transition:translate .25s ease}header.site.hide{translate:0 -100%}}
#view-matchan mark.hl{background:linear-gradient(transparent 58%,var(--accent-soft) 58%) no-repeat 0 0/100% 100%;color:inherit;padding:0 2px}
#view-matchan .dipcta .ball .ripple2{position:absolute;left:50%;bottom:8px;width:200px;height:28px;translate:-50% 0;border-radius:50%;border:2px solid var(--cream);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .js-motion #view-matchan .plan:not(.seen) .sauce{height:0}
  .js-motion #view-matchan .plan .sauce{transition-delay:var(--dly,0s)}
  .js-motion #view-matchan .dipcta .ball:not(.seen) img{opacity:0}
  .js-motion #view-matchan .dipcta .ball.seen img{animation:dipin 1.3s cubic-bezier(.34,1.4,.5,1) both}
  .js-motion #view-matchan .dipcta .ball.seen .ripple2{animation:jj-ripple 1.6s .9s ease-out both}
  @keyframes jj-ripple{0%{opacity:0;scale:.4}30%{opacity:.9}100%{opacity:0;scale:1.5}}
  .js-motion #view-matchan mark.hl{background-size:0% 100%;transition:background-size 1s .2s ease-out}
  .js-motion #view-matchan mark.hl.seen{background-size:100% 100%}
}
/* 「減少動態效果」全域保險：動畫直接停在結束狀態 */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* 常見問題（搭醬主色）、日常穿搭小字、5 折注意事項 */
#view-matchan .faq{padding-bottom:130px}
#view-matchan .faq details{border-bottom:1px solid var(--line);max-width:760px}
#view-matchan .faq details summary{cursor:pointer;list-style:none;padding:15px 2px;font-size:15px;color:var(--head);font-weight:500;display:flex;gap:12px;align-items:baseline}
#view-matchan .faq details summary::-webkit-details-marker{display:none}
#view-matchan .faq details summary::marker{content:""}
#view-matchan .faq details summary::before{content:"Q";color:var(--accent-deep);font-size:15px;font-weight:700;flex:none}
#view-matchan .faq details .a{padding:0 2px 18px 27px;font-size:14px;color:var(--ink2);line-height:1.8}
#view-matchan .cat span small{display:block;font-size:12px;font-weight:400;color:var(--ink2);letter-spacing:0;margin-top:4px;line-height:1.5}
#view-matchan .promo .fine{font-size:12.5px;opacity:.82;margin-top:6px;line-height:1.7}
#view-matchan .promo .fine a{color:inherit}

/* ===== Threads 貼文卡（threads_feed.py） ===== */
.tpost .ph{overflow:hidden;padding:0}
.tpost .ph img{width:100%;height:100%;object-fit:cover;display:block}
.tpost[hidden]{display:none!important}
#view-home .feedmore{margin:6px 0 0;text-align:center}
#view-home .feedmore a{color:var(--cream);font-size:14px;font-weight:500;text-decoration:none;border-bottom:1px solid rgba(255,253,246,.5);padding-bottom:2px}
.sv .svfeed{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.sv .svfeed .tpost{background:var(--card);border-radius:12px;padding:18px 18px 16px;box-shadow:0 4px 12px rgba(0,0,0,.08)}

#view-matchan .caseband img{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
#view-matchan .caseband :focus-visible{outline:3px solid var(--cream);outline-offset:3px}
#view-matchan dialog :focus-visible{outline:3px solid var(--wave);outline-offset:2px}
/* 分類按鈕：圓形只出現在這裡，當小圖示 */
#view-matchan .caseband .chips{display:flex;gap:8px;margin:4px 0 20px;overflow-x:auto;scrollbar-width:none;padding:4px 2px}
#view-matchan .caseband .chip{flex:none;font:inherit;font-size:14px;cursor:pointer;border:1.5px solid rgba(255,255,255,.45);background:transparent;color:var(--cream);border-radius:999px;padding:3px 14px 3px 4px;display:inline-flex;gap:8px;align-items:center}
#view-matchan .caseband .chip small{font-size:11.5px;opacity:.75}
#view-matchan .caseband .chip .dot{width:30px;height:30px;border-radius:50%;overflow:hidden;background:var(--cream);flex:none;display:grid;place-items:center}
#view-matchan .caseband .chip .dot img{width:100%;height:100%;object-fit:cover}
#view-matchan .caseband .chip .dot.all img{width:70%;height:70%;object-fit:contain}
#view-matchan .caseband .chip[aria-pressed=true]{background:var(--cream);color:var(--head);border-color:var(--cream)}
#view-matchan .caseband .chip[hidden]{display:none}
/* 卡片牆 */
#view-matchan .cwall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1000px) and (min-width:761px){#view-matchan .cwall[data-layout=list]{grid-template-columns:repeat(3,minmax(0,1fr))}}
#view-matchan .wcard{position:relative;background:var(--card);border-radius:16px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.16);display:flex;flex-direction:column;min-width:0}
#view-matchan .wcard[hidden]{display:none}
#view-matchan .wmedia{position:relative;aspect-ratio:4/5;background:#E6ECD6;overflow:hidden}
#view-matchan .wmedia .cover{width:100%;height:100%;object-fit:cover;display:block}
#view-matchan .wmedia .tag{position:absolute;left:10px;top:10px;background:rgba(255,253,245,.92);color:var(--head);font-size:12px;border-radius:999px;padding:2px 10px;z-index:3}
#view-matchan .wmedia .cnt{position:absolute;right:10px;top:10px;background:rgba(30,30,20,.55);color:#fff;font-size:12px;border-radius:999px;padding:2px 9px;z-index:3}
#view-matchan .wopen{font:inherit;text-align:left;background:none;border:0;padding:14px 16px 16px;cursor:pointer;color:var(--ink);display:flex;flex-direction:column;gap:4px;flex:1}
#view-matchan .wopen .wt{font-size:16px;color:var(--head);line-height:1.45;text-wrap:balance}
#view-matchan .wopen .ws{font-size:13.5px;color:var(--ink2);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#view-matchan .wopen .wgo{margin-top:auto;padding-top:6px;font-size:13px;color:var(--accent-deep)}
#view-matchan .wcard{cursor:pointer}
#view-matchan .promo-card .wopen .wgo{color:#A84A41}
#view-matchan .promo-card .pc-face{position:absolute;inset:0;background:#C05A50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#FBF6E6;text-align:center;padding:12px}
#view-matchan .promo-card .pc-pill{font-size:12px;background:#FBF6E6;color:#A84A41;border-radius:999px;padding:1px 12px;letter-spacing:.1em}
#view-matchan .promo-card .pc-big{font-family:'jf open huninn','GenSen Rounded TW',sans-serif;font-size:72px;line-height:1;color:#FBF6E6}
#view-matchan .promo-card .pc-big small{font-size:28px;margin-left:2px}
#view-matchan .promo-card .pc-name{font-size:16px;letter-spacing:.08em;color:#FBF6E6}
#view-matchan .promo .fine{font-size:12.5px;opacity:.82;margin-top:6px;line-height:1.7}
#view-matchan .promo .fine a{color:inherit}
#view-matchan .promo.flash{animation:jj-flash 1.6s ease-out}
@keyframes jj-flash{0%,30%{box-shadow:0 0 0 5px #F3C9C2}100%{box-shadow:0 0 0 0 transparent}}
@media (hover:hover){#view-matchan .wcard:hover .cover{scale:1.03}#view-matchan .wmedia .cover{transition:scale .4s ease}}
/* 前後對比滑桿（動效庫 116） */
#view-matchan .ba{position:absolute;inset:0;--pos:50%}
#view-matchan .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#view-matchan .ba .ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
#view-matchan .ba .ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.35);z-index:2;pointer-events:none}
#view-matchan .ba .ba-knob{position:absolute;top:50%;left:var(--pos);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;color:var(--head);display:grid;place-items:center;font-size:15px;letter-spacing:-1px;box-shadow:0 2px 10px rgba(0,0,0,.3);z-index:3;cursor:ew-resize;touch-action:none}
#view-matchan .ba .ba-l,#view-matchan .ba .ba-r{position:absolute;bottom:12px;font-size:12px;color:#fff;background:rgba(30,30,20,.55);border-radius:999px;padding:2px 9px;z-index:2;pointer-events:none}
#view-matchan .ba .ba-l{left:10px} #view-matchan .ba .ba-r{right:10px}
#view-matchan .ba .ba-range{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#view-matchan .ba:has(.ba-range:focus-visible) .ba-knob{outline:3px solid var(--wave);outline-offset:2px}
#view-matchan .ba.big{position:relative;aspect-ratio:4/5;max-height:70vh;border-radius:14px;overflow:hidden;margin:0 auto 18px;width:100%;max-width:520px}
#view-matchan .wmedia .ba .ba-l,#view-matchan .wmedia .ba .ba-r{bottom:auto;top:44px}
/* 看更多 */
#view-matchan .morewrap{display:flex;justify-content:center;margin-top:22px}
#view-matchan .morebtn{font:inherit;font-size:14px;cursor:pointer;background:var(--cream);color:var(--head);border:0;border-radius:999px;padding:8px 22px}
#view-matchan .morebtn[hidden]{display:none}
/* 排法 2：橫向滑卡 */
#view-matchan .cwall[data-layout=swipe]{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:4px 2px 14px;scrollbar-width:thin}
#view-matchan .cwall[data-layout=swipe] .wcard{flex:0 0 240px;scroll-snap-align:start}
/* 排法 3：捲動堆疊（動效庫 154） */
#view-matchan .cwall[data-layout=stack]{display:flex;flex-direction:column;gap:22px;max-width:460px;margin:0 auto}
#view-matchan .cwall[data-layout=stack] .wcard{position:sticky;top:calc(var(--hdr,80px) + 12px + var(--k,0) * 10px)}
/* 完整內容視窗 */
#view-matchan dialog.case-detail{border:0;padding:0;border-radius:16px;width:min(720px,calc(100% - 32px));max-height:90vh;background:var(--card);color:var(--ink);box-shadow:0 20px 50px rgba(0,0,0,.3);overscroll-behavior:contain}
#view-matchan dialog.case-detail::backdrop{background:rgba(40,45,20,.6)}
html:has(dialog.case-detail[open]){overflow:hidden}
#view-matchan dialog.case-detail .in{padding:0 28px 0}
#view-matchan dialog.case-detail .sh{position:sticky;top:0;height:0;display:flex;justify-content:flex-end;z-index:6}
#view-matchan dialog.case-detail .x{width:40px;height:40px;margin:14px -12px 0 0;border-radius:50%;border:0;background:rgba(255,253,245,.94);box-shadow:0 2px 10px rgba(60,60,30,.18);cursor:pointer;position:relative;flex:none;transition:rotate .3s cubic-bezier(.34,1.4,.5,1),background .2s}
#view-matchan dialog.case-detail .x span::before,#view-matchan dialog.case-detail .x span::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;border-radius:2px;background:var(--head);rotate:45deg}
#view-matchan dialog.case-detail .x span::after{rotate:-45deg}
@media (hover:hover){#view-matchan dialog.case-detail .x:hover{rotate:90deg;background:var(--cream)}}
#view-matchan dialog.case-detail .dhead{padding:30px 48px 0 0;margin-bottom:20px}
#view-matchan dialog.case-detail .badge{display:inline-block;font-size:11.5px;background:var(--cream);color:var(--soy);border-radius:999px;padding:3px 12px;letter-spacing:.04em}
#view-matchan dialog.case-detail h3{font-size:24px;font-weight:400;color:var(--head);margin:0 0 6px;text-wrap:balance}
#view-matchan dialog.case-detail .dnote{margin:22px 0 0;font-size:11.5px;color:var(--ink2);opacity:.85;text-align:center}
#view-matchan dialog.case-detail .lead{margin:0;font-size:15px;color:var(--accent-deep)}
#view-matchan dialog.case-detail dl{margin:0 0 20px;display:grid;grid-template-columns:1fr;gap:4px}
#view-matchan dialog.case-detail dt{font-size:12.5px;letter-spacing:.1em;color:var(--accent-deep);margin-top:8px}
#view-matchan dialog.case-detail dd{margin:0;font-size:14.5px;color:var(--ink2);line-height:1.8}
#view-matchan dialog.case-detail h4{font-size:15px;font-weight:400;color:var(--head);margin:8px 0 12px;display:flex;gap:8px;align-items:baseline}
#view-matchan dialog.case-detail h4 small{font-size:12px;color:var(--ink2)}
#view-matchan dialog.case-detail .shots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:18px 14px;align-items:start}
#view-matchan dialog.case-detail .shots img{width:100%;border-radius:10px;display:block;background:#E6ECD6}
#view-matchan dialog.case-detail .shots p{margin:8px 0 0;font-size:13.5px;line-height:1.7;color:var(--ink2)}
#view-matchan dialog.case-detail .shots p b{display:inline-block;font-weight:400;font-size:12px;letter-spacing:.08em;background:var(--accent-soft);color:var(--accent-deep);border-radius:999px;padding:0 10px;margin-right:8px}
#view-matchan dialog.case-detail .dfoot{position:sticky;bottom:0;background:linear-gradient(to top,var(--card) 74%,rgba(255,255,255,0));padding:56px 8px max(36px,env(safe-area-inset-bottom,0px));margin:0 -8px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
#view-matchan dialog.case-detail .asknote{margin:0;font-size:13px;color:var(--ink2);line-height:1.7;max-width:26em}
#view-matchan dialog.case-detail .ask{margin:0;display:inline-flex;align-items:center;gap:10px;padding:13px 30px;font-size:16px}
#view-matchan dialog.case-detail .ask .arr{position:relative;z-index:1;width:16px;height:16px;overflow:hidden;display:inline-block}
#view-matchan dialog.case-detail .ask .arr i{position:absolute;inset:0;display:block;transition:translate .35s cubic-bezier(.34,1.3,.5,1)}
#view-matchan dialog.case-detail .ask .arr i:last-child{translate:-150% 0}
#view-matchan dialog.case-detail .ask .arr svg{width:16px;height:16px;display:block}
@media (hover:hover){#view-matchan dialog.case-detail .ask:hover .arr i:first-child{translate:150% 0}#view-matchan dialog.case-detail .ask:hover .arr i:last-child{translate:0 0}}
@media (max-width:760px){
  /* 手機：兩欄，一個畫面約 4 張卡 */
  #view-matchan .cwall[data-layout=list]{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  #view-matchan .wcard{border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.14)}
  #view-matchan .wopen{padding:8px 10px 10px;gap:2px}
  #view-matchan .wopen .wt{font-size:14px;line-height:1.4}
  #view-matchan .wopen .ws{font-size:11.5px;-webkit-line-clamp:1;line-height:1.5}
  #view-matchan .wopen .wgo{display:none}
  #view-matchan .promo-card .pc-big{font-size:48px} #view-matchan .promo-card .pc-big small{font-size:20px}
  #view-matchan .promo-card .pc-name{font-size:13px}
  #view-matchan .wmedia .tag,#view-matchan .wmedia .cnt{font-size:10.5px;padding:1px 7px;top:7px}
  #view-matchan .wmedia .tag{left:7px} #view-matchan .wmedia .cnt{right:7px}
  #view-matchan .wmedia .ba .ba-knob{width:30px;height:30px;margin:-15px 0 0 -15px;font-size:11px}
  #view-matchan .wmedia .ba .ba-l,#view-matchan .wmedia .ba .ba-r{font-size:10px;padding:1px 6px;top:auto;bottom:7px}
  #view-matchan .wmedia .ba .ba-l{left:6px} #view-matchan .wmedia .ba .ba-r{right:6px}
  #view-matchan .cwall[data-layout=swipe] .wcard{flex-basis:44vw}
  #view-matchan .caseband .chips{margin-bottom:14px}
  #view-matchan .cwall[data-layout=stack]{--hdr:130px}
  #view-matchan dialog.case-detail{width:100%;max-width:100%;margin:auto 0 0;border-radius:18px 18px 0 0;max-height:92vh}
  #view-matchan dialog.case-detail .in{padding:0 18px}
  #view-matchan dialog.case-detail .x{margin-right:-6px}
  #view-matchan dialog.case-detail h3{font-size:21px}
  #view-matchan dialog.case-detail .shots{grid-template-columns:1fr}
}
/* 動效：只在使用者沒開「減少動態效果」時播放 */
@media (prefers-reduced-motion:no-preference){
  @keyframes jj-rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
  @keyframes jj-pop{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
  @keyframes jj-sheet{from{translate:0 100%}to{translate:0 0}}
  @keyframes jj-fade{from{opacity:0}to{opacity:1}}
  #view-matchan .wcard.enter{animation:jj-rise .4s ease-out both;animation-delay:calc(var(--n,0) * 50ms)}
  @keyframes jj-open{from{opacity:0;translate:0 40px;scale:.92}to{opacity:1;translate:0 0;scale:1}}
  @keyframes jj-close{to{opacity:0;translate:0 24px;scale:.95}}
  @keyframes jj-sheet-in{from{translate:0 100%}to{translate:0 0}}
  @keyframes jj-sheet-out{to{translate:0 100%}}
  @keyframes jj-fade-out{to{opacity:0}}
  #view-matchan dialog.case-detail[open]{animation:jj-open .46s cubic-bezier(.34,1.25,.5,1)}
  #view-matchan dialog.case-detail[open]::backdrop{animation:jj-fade .35s ease-out}
  #view-matchan dialog.case-detail.closing{animation:jj-close .24s ease-in forwards}
  #view-matchan dialog.case-detail.closing::backdrop{animation:jj-fade-out .24s ease-in forwards}
  #view-matchan dialog.case-detail[open] .dhead,#view-matchan dialog.case-detail[open] .ba.big,#view-matchan dialog.case-detail[open] dl,
  #view-matchan dialog.case-detail[open] h4,#view-matchan dialog.case-detail[open] .shots li{animation:jj-rise .5s cubic-bezier(.2,.8,.3,1) both}
  #view-matchan dialog.case-detail[open] .dhead{animation-delay:.08s}
  #view-matchan dialog.case-detail[open] .ba.big,#view-matchan dialog.case-detail[open] dl{animation-delay:.16s}
  #view-matchan dialog.case-detail[open] h4{animation-delay:.22s}
  #view-matchan dialog.case-detail[open] .shots li:nth-child(1){animation-delay:.26s}
  #view-matchan dialog.case-detail[open] .shots li:nth-child(2){animation-delay:.32s}
  #view-matchan dialog.case-detail[open] .shots li:nth-child(3){animation-delay:.38s}
  #view-matchan dialog.case-detail[open] .shots li:nth-child(n+4){animation-delay:.44s}
  @media (max-width:760px){
    #view-matchan dialog.case-detail[open]{animation:jj-sheet-in .45s cubic-bezier(.22,1,.36,1)}
    #view-matchan dialog.case-detail.closing{animation:jj-sheet-out .26s cubic-bezier(.4,0,1,1) forwards}
  }
  /* 堆疊排法：上一張被蓋住時微微縮小變暗（支援捲動時間軸的瀏覽器才有） */
  @supports (animation-timeline: view()){
    @keyframes jj-under{to{scale:.94;filter:brightness(.85)}}
    #view-matchan .cwall[data-layout=stack] .wcard{animation:jj-under linear both;animation-timeline:view();animation-range:exit-crossing 0% exit-crossing 100%}
  }
}

/* ===== 匯出成多頁站後補的規則（build.py） ===== */
[hidden]{display:none!important}
img{max-width:100%}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
a.brand{text-decoration:none}
.nav-links a{display:inline-block;text-decoration:none;line-height:normal}
.crumb a,.mh-crumb a{color:inherit;text-decoration:none}
.crumb a:hover,.mh-crumb a:hover{text-decoration:underline}
a.btn{text-decoration:none}
.sv .duo a.card{display:block;text-decoration:none;color:inherit}
.f-col span.nolink{display:block;color:#F5EBDC;font-size:13.5px;margin-bottom:9px;opacity:.6}
.f-col span.nolink small{font-size:10.5px;opacity:.8;margin-left:4px}
/* 首頁卡牆替代：Threads 自動化（C 線）完成前，只放一張連到 Threads 帳號的卡 */
#view-home .threads-card{display:flex;align-items:center;gap:18px;max-width:640px;background:var(--card);color:var(--head);border-radius:14px;padding:22px 26px;text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,.12);transition:transform .25s}
#view-home .threads-card:hover{transform:translateY(-3px)}
#view-home .threads-card img{width:64px;height:64px;flex:none}
#view-home .threads-card h3{font-size:17px;font-weight:500;margin:0 0 4px;line-height:1.5}
#view-home .threads-card p{margin:0;color:var(--ink2);font-size:14px}
#view-home .threads-card .go{display:inline-block;margin-top:8px;color:var(--red-deep);font-weight:500;font-size:14px}
/* 法務頁：只有頁面標題用標題字級，條款標題跟內文同字級加粗；單欄 720px */
.legal{max-width:720px;margin:0 auto;padding:40px 22px 20px}
.legal h1{font-size:clamp(24px,3.4vw,30px);font-weight:500;color:var(--head);margin:0 0 26px;letter-spacing:.04em;line-height:1.4}
.legal .body{font-family:-apple-system,BlinkMacSystemFont,'PingFang TC','Noto Sans TC',sans-serif;font-size:14px;line-height:1.7;color:var(--ink)}
.legal .body h2{font-size:inherit;font-weight:700;color:var(--head);margin:26px 0 6px;line-height:1.7}
.legal .body p{margin:0 0 10px}
.legal .body ol,.legal .body ul{margin:0 0 10px;padding-left:1.6em}
.legal .body li{margin-bottom:4px}
.legal .body a{color:var(--accent-deep);word-break:break-all}
.legal .body .updated{margin-top:28px;color:var(--ink2)}
/* 404 */
.nf{text-align:center;padding:64px 22px 80px}
.nf img{width:120px;height:120px;display:block;margin:0 auto 22px}
.nf h1{font-size:clamp(22px,3.2vw,28px);font-weight:500;color:var(--head);margin:0 0 12px}
.nf p{color:var(--ink2);margin:0 auto 26px;max-width:26em}