/* 克萊整合行銷 /clay — 固定淺色背景。依 Clay Logo：黃 #F2C230、藍 #1B95D6，缺口圓（C 字）當裝飾，圓潤粗黑體、膠囊按鈕、無陰影 */
:root{
  --yellow:#F2C230;--blue:#1B95D6;--blueInk:#0F6FA6;--navy:#0F3550;--text:#253041;--muted:#5F6B7A;
  --paper:#FFFDF6;--card:#FFFFFF;--line:#E9E3D3;--yellowSoft:#FFF4CC;--blueSoft:#E4F2FB;
  --sans:'Noto Sans TC',system-ui,sans-serif;--mono:'IBM Plex Mono',monospace;
  color-scheme:light only;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:68px}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* 缺口圓：Logo 的 C 字 */
.pac{display:inline-block;border-radius:50%;background:conic-gradient(from 55deg,transparent 0 70deg,var(--yellow) 70deg 360deg)}

/* 頁首 */
.top{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:60px;gap:16px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--navy)}
.brand img{height:30px;width:auto;display:block}
.brand span{font-size:14px;letter-spacing:.12em;color:var(--blueInk);font-weight:900;padding-left:10px;border-left:2px solid var(--line)}
.top nav{display:flex;align-items:center;gap:22px;font-size:15px;font-weight:700}
.top nav a{text-decoration:none;color:var(--text)}
.top nav a:hover{color:var(--blueInk)}
.top nav a.cta{color:var(--navy);background:var(--yellow);border-radius:999px;padding:7px 18px}
.top nav a.cta:hover{color:var(--navy);filter:brightness(1.05)}
@media (max-width:719px){.top nav a:not(.cta){display:none}}

/* 主視覺 */
.hero{position:relative;overflow:hidden;padding:72px 0 60px}
.hero .wrap{position:relative;z-index:1}
.deco{position:absolute;inset:0;pointer-events:none;z-index:0}
.deco .pac{position:absolute;width:min(46vw,440px);height:min(46vw,440px);right:-6vw;top:40px;opacity:.95}
.deco .bar{position:absolute;width:min(7vw,64px);height:min(30vw,280px);border-radius:999px;background:var(--blue);right:calc(min(46vw,440px) - 4vw);top:120px;opacity:.9}
@media (max-width:719px){.deco .pac{width:190px;height:190px;right:-90px;top:150px;opacity:.45}.deco .bar{display:none}}
.eyebrow{display:inline-block;margin:0 0 18px;font-size:12px;font-weight:700;letter-spacing:.25em;color:var(--blueInk);background:var(--blueSoft);border-radius:999px;padding:3px 12px}
.hero h1{margin:0;font-weight:900;color:var(--navy);font-size:clamp(40px,8vw,78px);line-height:1.15;letter-spacing:.02em;max-width:12em}
.hero h1 .hl{background:linear-gradient(transparent 62%,var(--yellow) 62% 92%,transparent 92%)}
.lede{margin:22px 0 0;max-width:520px;font-size:clamp(16px,2.2vw,19px);color:var(--text)}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;font:inherit;font-weight:700;font-size:16px;background:var(--blue);color:#fff;border:2px solid var(--blue);border-radius:999px;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--blueInk);border-color:var(--blueInk)}
.btn.ghost{background:transparent;color:var(--blueInk);border-color:var(--blue)}
.btn.ghost:hover{background:var(--blueSoft)}
.btn:disabled{opacity:.6;cursor:progress}
.reach{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:44px 0 0;max-width:640px}
.reach div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.reach dt{font-size:13px;color:var(--muted)}
.reach dd{margin:0;white-space:nowrap;font-weight:900;font-size:clamp(24px,5vw,36px);color:var(--blueInk);line-height:1.25}
.reach-note{margin:10px 0 0;font-size:12px;color:var(--muted)}

/* 區塊 */
.sec{padding:64px 0}
.sec:nth-of-type(even){background:var(--blueSoft)}
.sec-h{display:grid;gap:6px;margin-bottom:28px}
.sec-h h2{margin:0;font-weight:900;font-size:clamp(26px,4vw,36px);color:var(--navy)}
.sec-h p{margin:0;color:var(--muted)}
.tag{justify-self:start;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:13px;font-weight:900;color:var(--navy);background:conic-gradient(from 55deg,var(--yellowSoft) 0 70deg,var(--yellow) 70deg 360deg)}

/* 方案卡片 */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid article{background:var(--card);border:1px solid var(--line);border-top:5px solid var(--blue);border-radius:16px;padding:22px 20px;display:grid;gap:8px;align-content:start}
#site .grid article{border-top-color:var(--yellow)}
.grid h3{margin:0;font-weight:900;font-size:20px;color:var(--navy)}
.grid p{margin:0;font-size:15px}
.grid .where{font-size:12px;font-weight:700;color:var(--blueInk)}
.grid ul{margin:4px 0 0;padding-left:18px;font-size:14px;color:var(--muted)}
.grid .addon{font-size:13px;font-weight:700;color:var(--navy);background:var(--yellowSoft);border-radius:999px;padding:4px 12px;justify-self:start;margin-top:4px}
.grid .plans{width:100%;border-collapse:collapse;font-size:14px;margin-top:4px}
.grid .plans th,.grid .plans td{border-bottom:1px solid var(--line);padding:7px 4px;text-align:left;font-weight:400}
.grid .plans thead th{font-size:12px;color:var(--muted)}
.grid .plans tbody th{width:2.4em}
.grid .plans tbody th{font-weight:900;color:var(--blueInk)}
.grid .plans td:last-child{text-align:right;white-space:nowrap;font-weight:700;color:var(--navy)}
@media (min-width:900px){#group .grid,#site .grid{grid-template-columns:repeat(3,minmax(0,1fr))}#group .grid article:first-child{grid-row:span 2}}
@media (max-width:719px){.grid{grid-template-columns:minmax(0,1fr)}}

/* 案例 */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cases a,.cases div{display:grid;gap:4px;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:16px;text-decoration:none;color:var(--text);transition:border-color .2s}
.cases small{justify-self:start;font-size:12px;font-weight:700;color:var(--blueInk);background:var(--blueSoft);border-radius:999px;padding:1px 10px}
.cases b{font-weight:900;font-size:18px;color:var(--navy)}
.cases span{font-size:14px;color:var(--muted)}
.cases a b::after{content:" ↗";font-size:14px;color:var(--blueInk)}
.cases a:hover{border-color:var(--blue)}
@media (max-width:899px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:559px){.cases{grid-template-columns:minmax(0,1fr)}}

/* 流程 */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:f}
.flow li{counter-increment:f;display:grid;gap:4px;align-content:start}
.flow li::before{content:counter(f);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin-bottom:6px;font-weight:900;font-size:16px;color:var(--navy);background:conic-gradient(from 55deg,var(--paper) 0 70deg,var(--yellow) 70deg 360deg)}
.sec:nth-of-type(even) .flow li::before{background:conic-gradient(from 55deg,var(--blueSoft) 0 70deg,var(--yellow) 70deg 360deg)}
.flow b{font-weight:900;font-size:18px;color:var(--navy)}
.flow span{font-size:14px;color:var(--muted)}
@media (max-width:719px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 申請表單 */
.two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:start}
@media (max-width:899px){.two{grid-template-columns:minmax(0,1fr);gap:8px}}
.line-box{margin-top:18px;display:grid;gap:6px;font-size:14px;color:var(--muted)}
.line-box a{justify-self:start;font-weight:900;font-size:18px;color:#fff;background:#06C755;border-radius:999px;padding:6px 18px;text-decoration:none}
form{display:grid;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px 20px}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media (max-width:559px){.row2{grid-template-columns:minmax(0,1fr)}}
label,legend{display:grid;gap:6px;font-size:14px;font-weight:700;color:var(--navy)}
label small,legend small{font-weight:400;color:var(--muted);margin-left:6px}
legend{display:block;margin-bottom:8px}
input,select{font:inherit;font-size:16px;color:var(--text);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-height:48px;width:100%;outline:none}
input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blueSoft)}
input[aria-invalid="true"]{border-color:#D9472B}
fieldset{border:0;margin:0;padding:0}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.picks button{font:inherit;font-size:14px;font-weight:700;color:var(--blueInk);background:var(--paper);border:2px solid var(--blueSoft);border-radius:999px;padding:6px 14px;cursor:pointer;min-height:40px}
.picks button[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.err{margin:0;font-size:14px;color:#D9472B;font-weight:700}
.fine{margin:0;font-size:12px;color:var(--muted)}
.done{border-radius:20px;background:var(--yellowSoft);padding:28px 24px;display:grid;gap:10px;justify-items:start}
.done h3{margin:0;font-weight:900;font-size:22px;color:var(--navy)}
.done p{margin:0}

/* 頁尾 */
.foot{padding:40px 0 48px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
.foot .wrap{display:grid;gap:10px}
.foot b{color:var(--navy);font-weight:900;margin-right:12px}
.foot .links{display:flex;gap:18px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--blueInk)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ---------- 公開頁：動態與新區塊 ---------- */
/* 捲動進場 */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* 主視覺：小精靈吃點點（Logo 的 C） */
.home .hero{padding:84px 0 92px}
.home .hero h1{max-width:8.6em}
@media (min-width:720px){.home .hero .lede{max-width:min(520px,52vw)}}
.chomp{position:absolute;right:max(16px,calc(50% - 540px));top:56px;width:min(42vw,420px);height:min(42vw,420px);pointer-events:none;z-index:0}
.pacman{position:absolute;inset:0;animation:float 6s ease-in-out infinite}
.pacman i{position:absolute;left:0;width:100%;height:50%;background:var(--yellow);transform-origin:50% 100%}
.pacman i:first-child{top:0;border-radius:999px 999px 0 0;animation:jawTop .45s ease-in-out infinite alternate}
.pacman i:last-child{top:50%;border-radius:0 0 999px 999px;transform-origin:50% 0;animation:jawBot .45s ease-in-out infinite alternate}
@keyframes jawTop{from{transform:rotate(-32deg)}to{transform:rotate(-2deg)}}
@keyframes jawBot{from{transform:rotate(32deg)}to{transform:rotate(2deg)}}
@keyframes float{50%{transform:translateY(-12px)}}
.dots{position:absolute;left:100%;top:50%;width:60vw;height:0}
.dots b{position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--blue);animation:eat 3s linear infinite}
.dots b:nth-child(2){animation-delay:-.5s}.dots b:nth-child(3){animation-delay:-1s}.dots b:nth-child(4){animation-delay:-1.5s}.dots b:nth-child(5){animation-delay:-2s}.dots b:nth-child(6){animation-delay:-2.5s}
@keyframes eat{from{transform:translateX(42vw)}to{transform:translateX(-40px)}}
.chomp{overflow:visible}
.home .deco .bar{right:auto;left:-28px;top:auto;bottom:40px;width:56px;height:180px;animation:float 7s ease-in-out infinite}
.deco .ring{position:absolute;left:46%;bottom:-60px;width:160px;height:160px;border-radius:50%;border:14px solid var(--yellowSoft);animation:float 8s ease-in-out infinite}
@media (max-width:719px){
  .chomp{width:132px;height:132px;right:20px;top:28px}
  .dots{display:none}
  .home .hero{padding:190px 0 64px}
  .home .deco .bar{display:none}
  .deco .ring{width:110px;height:110px;left:auto;right:-30px;bottom:-30px}
}

/* 關於 */
.two-about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:start}
@media (max-width:899px){.two-about{grid-template-columns:minmax(0,1fr);gap:8px}}
.about{display:grid;gap:12px}
.about h3{margin:0;font-weight:900;font-size:24px;color:var(--navy)}
.about p{margin:0}
.counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 0}
.counts div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;transition:transform .3s}
.counts div:hover{transform:translateY(-4px)}
.counts dd{margin:0;font-weight:900;font-size:clamp(30px,5vw,44px);color:var(--blueInk);line-height:1.1}
.counts dt{font-size:13px;color:var(--muted)}

/* 服務項目 */
.svc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.svc article{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 20px;display:grid;gap:8px;align-content:start;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,opacity .7s ease}
.svc article.in:hover{transform:translateY(-6px);border-color:var(--blue)}
.svc .ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--blueSoft);transition:background .3s,transform .4s}
.svc article:nth-child(even) .ico{background:var(--yellowSoft)}
.svc article:hover .ico{transform:rotate(-8deg) scale(1.08)}
.svc svg{width:26px;height:26px;fill:none;stroke:var(--blueInk);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc h3{margin:0;font-weight:900;font-size:19px;color:var(--navy)}
.svc p{margin:0;font-size:14px;color:var(--muted)}
@media (max-width:899px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.svc{grid-template-columns:minmax(0,1fr)}}

/* 案例：滑過時上浮 */
.cases a.in:hover,.cases div.in:hover{transform:translateY(-4px)}
.cases a,.cases div{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .2s,opacity .7s ease}

/* 評價 */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.quotes figure{position:relative;margin:0;padding:28px 22px 22px;background:var(--card);border:1px solid var(--line);border-radius:18px;display:grid;gap:14px;align-content:space-between}
.quotes figure::before{content:"“";position:absolute;top:-6px;left:18px;font-size:64px;line-height:1;font-weight:900;color:var(--yellow)}
.quotes blockquote{margin:0;font-size:15px}
.quotes figcaption{font-size:13px;color:var(--muted)}
.quotes figcaption b{color:var(--navy);margin-right:6px}
@media (max-width:899px){.quotes{grid-template-columns:minmax(0,1fr)}}

/* 預約：LINE */
.book{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:center}
@media (max-width:899px){.book{grid-template-columns:minmax(0,1fr)}}
.line-card{display:flex;gap:22px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px}
.qr{flex:none;width:148px;height:148px;padding:8px;background:#fff;border-radius:14px;border:2px solid #06C755}
.qr img,.qr canvas{display:block;width:100%!important;height:auto!important}
.line-tx{display:grid;gap:8px;justify-items:start}
.line-tx b{font-weight:900;font-size:19px;color:var(--navy)}
.line-tx span{font-size:14px;color:var(--muted)}
.line-tx small{font-size:13px;color:var(--muted)}
.btn.line{background:#06C755;border-color:#06C755}
.btn.line:hover{background:#05A847;border-color:#05A847}
@media (max-width:559px){.line-card{flex-direction:column;text-align:center}.line-tx{justify-items:center}}
.btn{transition:background .2s,color .2s,transform .2s}
.btn:hover{transform:translateY(-2px)}

/* 隱藏頁（方案＋需求表）主視覺較短 */
.brief-hero{padding:48px 0 40px}
.brief-hero .deco .pac{width:220px;height:220px;right:-40px;top:20px;opacity:.9}
@media (max-width:719px){.brief-hero .deco .pac{width:150px;height:150px;right:-60px;top:110px;opacity:.35}}

@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.pacman,.pacman i,.dots b,.deco .bar,.deco .ring{animation:none!important}}

/* 店家素材上傳 /clay/upload */
.up{display:grid;gap:20px;max-width:760px}
.upbox{gap:12px}
.up-h{display:flex;align-items:baseline;gap:10px}
.up-h h2{margin:0;font-size:20px;font-weight:900;color:var(--navy)}
.up-h small{color:var(--muted);font-size:13px}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.thumbs:empty{display:none}
.thumbs.wide{grid-template-columns:minmax(0,1fr)}
.th{position:relative;margin:0;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.th.wide{aspect-ratio:3}
.th img{width:100%;height:100%;object-fit:cover;display:block}
.th button{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(15,53,80,.8);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.drop{position:relative;display:flex;align-items:center;justify-content:center;min-height:56px;border:2px dashed var(--blue);border-radius:14px;color:var(--blueInk);font-weight:900;cursor:pointer;background:var(--blueSoft)}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.drop.busy{opacity:.7;cursor:progress}
.hours{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.hours label{grid-template-columns:42px minmax(0,1fr);align-items:center;font-weight:700}
textarea{font:inherit;font-size:16px;color:var(--text);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 14px;width:100%;outline:none;resize:vertical}
textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blueSoft)}
input::placeholder,textarea::placeholder{color:#B5AE9F}
/* 首頁橫幅表單 */
.adgrid{display:grid;gap:14px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label,.swatches label{display:block;font-weight:700;cursor:pointer}
.seg input,.swatches input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:2px solid var(--blueSoft);border-radius:999px;font-size:14px;color:var(--blueInk);background:var(--paper)}
.seg input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff}
.seg input:focus-visible+span,.swatches input:focus-visible+span{outline:3px solid var(--yellow);outline-offset:2px}
.seg.sm span{min-height:32px;padding:0 10px;font-size:13px}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatches span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:2px solid var(--line);border-radius:12px;font-size:14px;color:var(--navy)}
.swatches input:checked+span{border-color:var(--blue);box-shadow:0 0 0 3px var(--blueSoft)}
.brandsw input[type=color]{width:32px;height:28px;min-height:0;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
.adphoto{display:grid;gap:10px}
.drop small{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-left:8px}
.adprev{display:grid;gap:8px;padding:14px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.adprev .up-h{justify-content:space-between}
.adprev h3{margin:0;font-size:15px;color:var(--navy)}
#adPreview{width:100%;height:220px;border:0;display:block;margin:0 auto;background:transparent;transition:max-width .25s}
#adPreview.phone{max-width:375px}
/* 方案範例圖：卡片底部一張預覽，點開看大圖 */
.ex-btn{position:relative;display:block;width:100%;margin-top:6px;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;cursor:pointer;text-align:left}
.ex-th{display:block;width:100%;aspect-ratio:16/8;overflow:hidden;background:var(--paper)}
.ex-th img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ex-btn:hover .ex-th img{transform:scale(1.04)}
.ex-lb{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:28px 14px 10px;font-size:14px;font-weight:700;color:#fff;background:linear-gradient(180deg,rgba(15,53,80,0),rgba(15,53,80,.82))}
.ex-lb i{font-style:normal;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--navy)}
.exbox{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px 16px;background:rgba(15,53,80,.72);animation:exIn .2s ease}
.exbox figure{margin:0;max-width:min(980px,100%);max-height:100%;display:grid;gap:10px;overflow:auto}
.exbox img{width:100%;height:auto;border-radius:12px;display:block;background:#fff}
.exbox figcaption{color:#fff;font-size:14px;line-height:1.6;text-align:center}
.exclose{position:fixed;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--navy);font-size:26px;line-height:1;cursor:pointer}
@keyframes exIn{from{opacity:0}}
.exbox figure img{max-height:calc(100vh - 120px);width:auto;max-width:100%;margin:0 auto}
/* 重點方案卡（進階店家網頁）：整列、左文右圖 */
.grid article.feature{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:32px;align-items:start}
.grid article.feature>*{grid-column:1}
.grid article.feature>.ex-btn{grid-column:2;grid-row:1/span 9;margin-top:0}
.grid article.feature .ex-th{aspect-ratio:auto}
.grid article.feature .ex-th img{height:auto}
.demo-link{justify-self:start;display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;color:#fff;background:var(--blue)}
.demo-link:hover{background:var(--blueInk)}
@media (max-width:899px){.grid article.feature{grid-template-columns:minmax(0,1fr)}.grid article.feature>.ex-btn{grid-column:1;grid-row:auto;margin-top:6px}}
/* 方案卡「加入想了解的服務」，與需求表選項同步 */
.pick-add{justify-self:start;display:inline-flex;align-items:center;min-height:38px;padding:0 14px;margin-top:4px;font:inherit;font-size:14px;font-weight:700;color:var(--blueInk);background:var(--paper);border:2px solid var(--blueSoft);border-radius:999px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pick-add:hover{border-color:var(--blue)}
.pick-add .on{display:none}
.pick-add[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.pick-add[aria-pressed="true"] .on{display:inline}.pick-add[aria-pressed="true"] .off{display:none}
.clay-toast{position:fixed;left:50%;bottom:24px;z-index:60;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--navy);color:#fff;font-size:14px;font-weight:700;padding:10px 18px;border-radius:999px;transition:opacity .2s,transform .25s}
.clay-toast.show{opacity:1;transform:translate(-50%,0)}
/* 需求表：補充說明、送出後的提供資料網址 */
#applyForm textarea{font:inherit;font-size:16px;color:var(--text);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 14px;width:100%;outline:none;resize:vertical}
#applyForm textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blueSoft)}
.done-up{display:grid;gap:10px;width:100%;margin-top:8px;padding:18px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.done-up>b{font-size:16px;color:var(--navy)}
.done-up p{margin:0;font-size:14px}
.done-up ul{margin:0;padding-left:20px;display:grid;gap:4px;font-size:14px}
.up-link{display:flex;gap:8px}
.up-link input{flex:1;min-width:0;font-family:var(--mono);font-size:12px;min-height:44px}
.up-link .btn{min-height:44px;padding:0 16px}
.done-up>.btn{justify-self:start}
/* 客人進度條（/clay/upload） */
.prog{display:grid;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.steps li{position:relative;display:grid;justify-items:center;gap:6px;text-align:center;font-size:13px;font-weight:700;color:var(--muted)}
.steps li span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:2px solid var(--line);font-size:14px;z-index:1}
.steps li:not(:last-child)::after{content:"";position:absolute;top:16px;left:calc(50% + 18px);right:calc(-50% + 18px);height:2px;background:var(--line)}
.steps li.done{color:var(--blueInk)}.steps li.done span{background:var(--blue);border-color:var(--blue);color:#fff}
.steps li.done::after{background:var(--blue)}
.steps li.cur{color:var(--navy)}.steps li.cur span{border-color:var(--yellow);background:var(--yellowSoft)}
.paybox{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--yellowSoft)}
.paybox>div{flex:1 1 180px;display:grid}.paybox small{color:var(--muted)}
.paybox .amt{font-size:20px;color:var(--navy)}
/* 成效報告 */
.rp{max-width:760px}.rp h2{font-size:20px;margin:34px 0 12px}
.rp-month{display:flex;align-items:center;gap:10px;font-weight:700}.rp-month select{font:inherit;padding:8px 12px;border:1px solid #d8d3c6;border-radius:8px;background:#fff}
.rp-sum{font-size:18px;font-weight:700;line-height:1.7;margin:18px 0}
.rp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.rp-card{display:grid;gap:2px;padding:16px;border:1px solid #e3ded1;border-radius:10px;background:#fff}.rp-card b{font-size:30px;line-height:1.2}.rp-card span{font-weight:700}.rp-card small{color:#6b6b6b}
.rp-bars{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;height:190px;align-items:end}
.rp-bar{height:100%;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;gap:4px;font-size:13px}.rp-bar i{align-self:end;width:100%;max-width:56px;background:#e8e2d3;border-radius:4px 4px 0 0}.rp-bar.on i{background:#F2C230}.rp-bar small{color:#6b6b6b}
.rp-acts>div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #e3ded1}.rp-acts span small{display:block;color:#6b6b6b}
.rp-done{padding-left:18px;line-height:1.9}.rp-done small{margin-left:8px;color:#6b6b6b}
.rp-month label{white-space:nowrap;display:block}.rp-month select{width:auto}
.rp-facts{margin:0 0 18px;padding:14px 16px 14px 34px;background:var(--yellowSoft);border-radius:10px;line-height:1.9;font-weight:700}
.rp-note{margin:8px 0 0;font-size:13px;color:#6b6b6b}
.rp-days{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;height:150px;align-items:end;border-bottom:1px solid #e3ded1}
.rp-d{position:relative;height:100%;display:flex;align-items:flex-end;outline-offset:1px}.rp-d i{display:block;width:100%;background:var(--blue);border-radius:3px 3px 0 0}.rp-d:hover i,.rp-d:focus i{background:var(--blueInk)}.rp-d.mk i{background:var(--navy)}
.rp-axis{display:flex;justify-content:space-between;font-size:13px;color:#6b6b6b;margin-top:6px}
.rp-src{display:grid;grid-template-columns:110px minmax(0,1fr) 44px;gap:10px;align-items:center;padding:7px 0}.rp-src em{display:block;height:12px;background:#f1ecdf;border-radius:3px;overflow:hidden}.rp-src i{display:block;height:100%;background:var(--blue)}.rp-src b{text-align:right}
.rp-heat{display:grid;grid-template-columns:44px repeat(7,minmax(0,1fr));gap:3px;font-size:13px}.rp-heat b{font-weight:700;text-align:center;color:#6b6b6b}.rp-heat b.y{text-align:left;align-self:center}
.rp-heat .c{position:relative;height:36px;border-radius:4px;background:color-mix(in srgb,var(--blueInk) var(--a),#f4f0e6)}
.rp-acts b small{display:block;font-weight:400;color:#6b6b6b;text-align:right}
[data-tip]:hover::after,[data-tip]:focus::after{content:attr(data-tip);position:absolute;z-index:5;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);padding:5px 9px;border-radius:6px;background:var(--navy);color:#fff;font-size:13px;white-space:nowrap;pointer-events:none}
.rp-d:nth-child(-n+5)::after{left:0;transform:none}.rp-d:nth-last-child(-n+5)::after{left:auto;right:0;transform:none}