:root{--paper:#F5F1EA;--paper-2:#EDE6DA;--card:#FFFDF9;--ink:#1B1713;--muted:#5F574D;--rule:#DDD3C3;
--red:#B4352A;--red-soft:#F7E2DB;--red-ink:#8E271F;--go:#077F3B;--old:#7A7068;
--shadow-1:0 1px 2px rgba(74,48,30,.10);--shadow-2:0 14px 32px -12px rgba(110,66,40,.22);
--sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;--w:760px;--gut:20px}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background-color:var(--paper);color:var(--ink);font:400 18px/1.8 var(--sans);overflow-x:hidden;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E")}
img,video{display:block;max-width:100%}
.num{font-variant-numeric:tabular-nums}
.cover,.sec,.foot{padding-left:max(var(--gut),calc((100% - var(--w))/2));padding-right:max(var(--gut),calc((100% - var(--w))/2))}
/* iPhone 橫放:內容避開瀏海 */
@supports (padding:max(0px,env(safe-area-inset-left))){
 .cover,.sec,.foot{padding-left:max(var(--gut),env(safe-area-inset-left),calc((100% - var(--w))/2));padding-right:max(var(--gut),env(safe-area-inset-right),calc((100% - var(--w))/2))}
}
/* 斷行:標題平均分行、內文不留單字尾巴 */
h1,h2,h3{text-wrap:balance}
p,li,.why,.fine,.vs li,.trk span{text-wrap:pretty}

/* 封面 */
.cover{padding-top:44px;padding-bottom:30px}
.brand{font-weight:900;font-size:16px;letter-spacing:.08em;color:var(--red)}
.cover h1{font-size:clamp(42px,12vw,68px);font-weight:900;line-height:1.18;margin-top:10px;letter-spacing:-.01em}
.cover p{font-size:19px;color:var(--muted);margin-top:14px;line-height:1.7}
.cover p b{color:var(--ink)}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}
.kpi div{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:12px 10px 10px;box-shadow:var(--shadow-1),var(--shadow-2);display:flex;flex-direction:column;align-items:center;text-align:center}
.kpi span{font-size:16px;color:var(--muted);font-weight:700;line-height:1.35}
.kpi b{font-size:clamp(30px,8.4vw,44px);font-weight:900;color:var(--red);line-height:1.1;margin-top:6px;display:flex;flex-direction:column;align-items:center}
.kpi s{font-size:18px;color:var(--old);font-weight:700;text-decoration-thickness:2px}
.kpi small{font-size:16px;color:var(--muted);font-weight:700;margin-top:2px}

/* 區塊 */
.sec{padding-top:40px;padding-bottom:44px;border-top:1px solid var(--rule)}
.sec:nth-of-type(even){background:var(--card)}
.eb{display:flex;align-items:center;gap:10px;font-weight:900;font-size:16px;letter-spacing:.08em;color:var(--red)}
.eb .no{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 6px;border-radius:10px;background:var(--red);color:#fff;font-size:16px;letter-spacing:0}
h2{font-size:clamp(27px,7.2vw,42px);font-weight:900;line-height:1.3;margin-top:10px}
.fine{font-size:16px;color:var(--muted);margin-top:14px;line-height:1.7}

/* 拖曳對照 */
.cmp{--pos:50%;position:relative;width:min(100%,370px);margin:22px auto 0;aspect-ratio:390/700;border:7px solid var(--ink);border-radius:30px;overflow:hidden;
background:#fff;box-shadow:var(--shadow-2);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.cmp .ph{position:absolute;inset:0}
.cmp .ph img{width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}
.cmp-o{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-n{position:absolute;inset:0}
.tag{position:absolute;top:10px;z-index:3;font-size:16px;font-weight:900;padding:2px 12px;border-radius:99px;pointer-events:none;line-height:1.6}
.tag.l{left:10px;background:rgba(27,23,19,.82);color:#fff}
.tag.r{right:10px;background:var(--red);color:#fff}
.handle{position:absolute;z-index:4;top:0;bottom:0;left:var(--pos);width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 0 1px rgba(27,23,19,.25),0 0 10px rgba(0,0,0,.35);outline:none}
.handle i{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff;border:3px solid var(--red);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.handle i::before,.handle i::after{content:"";position:absolute;top:50%;width:0;height:0;border:8px solid transparent;margin-top:-8px}
.handle i::before{left:4px;border-right-color:var(--red)}
.handle i::after{right:4px;border-left-color:var(--red)}
.handle:focus-visible i{outline:3px solid var(--go);outline-offset:3px}
.ph.none{background:repeating-linear-gradient(135deg,#EDE6DA 0 14px,#E6DDCF 14px 28px);display:grid;place-items:center}
.nopage{text-align:center;padding:20px}
.nopage b{display:block;font-size:30px;font-weight:900;line-height:1.3;color:var(--old)}
.nopage span{display:block;font-size:17px;color:var(--muted);margin-top:12px;line-height:1.6}
.duo{display:none}

/* 商品照片:正方拖曳+4 件小對照 */
.cmp.sq{aspect-ratio:1/1;width:min(100%,460px);border-width:5px;border-radius:20px}
.cmp.sq .ph img{object-position:center}
.pg-h{font-size:20px;font-weight:900;text-align:center;margin:30px auto 0}
.pgrid{display:grid;gap:14px;margin:14px auto 0;width:min(100%,560px)}
.pr{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:12px 12px 10px;box-shadow:var(--shadow-1)}
.pr > b{display:block;font-size:18px;font-weight:900;margin-bottom:8px}
.pp{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px}
.pp figure{margin:0}
.pp img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:10px;border:2px solid var(--rule)}
.pp figure.n img{border-color:var(--red)}
.pp figcaption{font-size:16px;font-weight:700;color:var(--muted);text-align:center;margin-top:4px}
.pp figure.n figcaption{color:var(--red)}
.pp .ar{font-size:22px;font-weight:900;color:var(--red)}

/* 一句對照 */
.vs{list-style:none;margin:18px auto 0;width:min(100%,560px);display:grid;gap:8px}
.vs li{display:flex;align-items:flex-start;gap:10px;font-size:18px;line-height:1.6;padding:10px 14px;border-radius:12px;background:var(--paper-2)}
.vs li.n{background:var(--red-soft);font-weight:700}
.vs em{flex:none;font-style:normal;font-size:16px;font-weight:900;color:#fff;background:var(--old);border-radius:6px;padding:0 8px;line-height:1.75;margin-top:1px}
.vs li.n em{background:var(--red)}
.sec:nth-of-type(even) .vs li.o{background:var(--paper)}

/* 速度 */
.sec.dark{background:var(--ink);color:#F5F1EA;border-top:0}
.sec.dark h2{color:#fff}
.sec.dark .eb{color:#F2B8AC}
.sec.dark .fine{color:#CFC6B8}
.race{margin:22px auto 0;width:min(100%,560px);border-radius:16px;overflow:hidden;background:#F5F1EA}
.race{width:min(100%,560px,max(260px,calc((100svh - 60px) * .84)))} /* 影片 1000×1190:整支要塞得進一個螢幕高 */
.race video{width:100%;height:auto}
.clock{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px auto 0;width:min(100%,560px)}
.clock div{border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.08);text-align:center}
.clock div.n{background:var(--red)}
.clock span{display:block;font-size:16px;font-weight:700;color:#E8E0D4}
.clock div.n span{color:#fff}
.clock b{display:block;font-size:clamp(36px,11vw,44px);font-weight:900;line-height:1.15;white-space:nowrap}
.clock small{font-size:18px}
.psi-h{font-size:20px;font-weight:900;text-align:center;margin:30px auto 0;color:#fff}

/* Google */
.serp{display:grid;gap:16px;margin-top:22px}
.sr .who{display:inline-block;font-size:16px;font-weight:900;color:#fff;background:var(--old);border-radius:8px;padding:2px 12px;margin-bottom:8px}
.sr.n .who{background:var(--red)}
.g{background:#fff;border:1px solid #DADCE0;border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-1);font-family:Arial,"Noto Sans TC",sans-serif}
.g small{display:block;font-size:16px;color:#202124;line-height:1.5}
.g b{display:block;font-size:20px;font-weight:400;color:#1a0dab;line-height:1.4;margin-top:4px}
.g p{font-size:16px;color:#4d5156;line-height:1.6;margin-top:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sr.o .g p{color:#8a8f96}
.why{display:block;font-size:17px;font-weight:700;margin-top:8px;padding-left:12px;border-left:4px solid var(--old);color:var(--muted);line-height:1.6}
.sr.n .why{border-left-color:var(--red);color:var(--ink)}

/* LINE */
.chat{display:grid;gap:14px;margin-top:22px}
.cw{background:#8CA6CF;border-radius:18px;padding:14px 14px 16px;display:flex;flex-direction:column;align-items:flex-end}
.cw .who{align-self:flex-start;font-size:16px;font-weight:900;color:#fff;background:rgba(27,23,19,.55);border-radius:8px;padding:2px 12px;margin-bottom:10px}
.cw.n .who{background:var(--red)}
.bub{background:#8DE055;border-radius:16px 4px 16px 16px;padding:8px 12px;max-width:88%;font-size:16px;line-height:1.5;word-break:break-all;color:#1a1a1a}
.bub u{text-decoration:underline;color:#1a1a1a}
.card{margin-top:8px;width:min(88%,300px);background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.card img{width:100%;height:auto;aspect-ratio:1.91/1;object-fit:cover;display:block}
.card b{display:block;font-size:17px;font-weight:700;line-height:1.45;padding:10px 12px 0}
.card small{display:block;font-size:16px;color:#6b6b6b;line-height:1.5;padding:4px 12px 12px}
.card .ci{aspect-ratio:1.91/1;background:#E9E9E9;display:grid;place-items:center}
.card .ci span{font-size:16px;color:#8a8a8a;font-weight:700}

/* 成效 */
.trk{display:grid;gap:14px;margin-top:22px}
.trk > div{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:18px 18px 16px;box-shadow:var(--shadow-1)}
.trk > div.n{border:2px solid var(--red)}
.trk b{display:block;font-size:20px;font-weight:900}
.trk .o b{color:var(--old)}
.trk .n b{color:var(--red)}
.trk .q{font-size:64px;font-weight:900;color:var(--rule);line-height:1.1;margin:6px 0}
.trk span{display:block;font-size:18px;color:var(--muted);line-height:1.6;margin-top:6px}
.trk ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 4px}
.trk li{font-size:17px;font-weight:700;background:var(--red-soft);border-radius:10px;padding:8px 10px;line-height:1.5}
.trk li i{display:block;font-style:normal;font-size:16px;color:var(--red-ink);font-weight:900}

/* 總表 */
.tbl{margin-top:22px;border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:var(--card);box-shadow:var(--shadow-1)}
.tr{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:8px;padding:12px 14px;border-top:1px solid var(--rule);font-size:16px;line-height:1.55;align-items:start}
.tr:first-child{border-top:0}
.tr b{font-weight:900}
.tr .o{color:var(--old)}
.tr .n{color:var(--red-ink);font-weight:700}
.tr.th{background:var(--paper-2)}
.tr.th .o,.tr.th .n{font-weight:900}
.tr.th .n{color:var(--red)}
/* 窄手機:總表改成「項目一行、舊/新並排」 */
@media (max-width:440px){
 .tr{grid-template-columns:1fr 1fr;gap:4px 12px}
 .tr b{grid-column:1/-1}
 .tr.th b{display:none}
}
.go{display:grid;gap:10px;margin-top:24px}
.btn{display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:12px;background:var(--go);color:#fff;font-weight:900;font-size:18px;text-decoration:none;box-shadow:0 10px 22px -10px rgba(7,127,59,.55)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);box-shadow:none}
.foot{padding-top:24px;padding-bottom:48px;font-size:16px;color:var(--muted);line-height:1.75;border-top:1px solid var(--rule)}

/* 平板直放起+桌機:兩支手機並排(手機畫面整支塞進一個螢幕高) */
@media (min-width:720px){
 :root{--w:1000px;--gut:32px}
 .cover{padding-top:72px}
 .kpi{max-width:760px}
 .cmp{display:none}
 .cmp.sq{display:block;width:min(100%,560px,max(360px,calc(100svh - 160px)))}
 .pgrid{grid-template-columns:1fr 1fr;width:min(100%,780px)}
 .duo{display:grid;grid-template-columns:1fr 1fr;gap:36px;width:min(100%,780px,max(560px,calc((100svh - 134px) * 1.114 + 36px)));margin:26px auto 0}
 .duo .ph{position:relative;aspect-ratio:390/700;border:7px solid var(--ink);border-radius:30px;overflow:hidden;background:#fff;box-shadow:var(--shadow-2)}
 .duo .ph img{width:100%;height:100%;object-fit:cover;object-position:top}
 .duo .ph::before{content:"舊網站";position:absolute;top:10px;left:10px;z-index:2;font-size:16px;font-weight:900;padding:2px 12px;border-radius:99px;background:rgba(27,23,19,.82);color:#fff;line-height:1.6}
 .duo .ph.n::before{content:"新網站";background:var(--red)}
 .vs{grid-template-columns:1fr 1fr;width:min(100%,780px);gap:36px}
 .serp,.chat,.trk{grid-template-columns:1fr 1fr}
 .go{grid-template-columns:1fr 1fr;max-width:620px}
 .clock{width:min(100%,640px)}
 .race{width:min(100%,640px,max(320px,calc((100svh - 60px) * .84)))}
}
/* 手機橫放(矮螢幕):手機畫面、影片整支塞進一個螢幕高(放在桌機規則後面才蓋得過) */
@media (orientation:landscape) and (max-height:600px){
 .cmp{width:min(100%,370px,max(200px,calc((100svh - 40px) * .557)))}
 .cmp.sq{width:min(100%,460px,max(260px,calc(100svh - 40px)))}
 .duo{width:min(100%,780px,max(380px,calc((100svh - 40px) * 1.114 + 36px)))}
 .race{width:min(100%,560px,max(240px,calc((100svh - 30px) * .84)))}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}