/* Li可拍｜Lizzy 人像攝影 官網
 * 設計：照片優先、安靜的底片感；淺色是帶一點綠的米白底＋深松綠單一強調色（呼應她常用的 🌿 和海邊照片），深色模式跟著系統
 * 對比度：主色上的白字 7.4、次要字在底色 5.8；深色主色字 9.7（後台可換配色，見 functions/_lib/content.js THEMES）
 * 圓角規則：卡片 14px、照片 10px、輸入框 10px、按鈕全圓；中文 Noto Sans TC，英文與數字 Manrope
 * 間距：區塊上下 40px（主人規則：緊湊，不要大片留白）；頁首、選單、按鈕文字一律不換行
 */
:root{
  --bg:#f4f6f2;--surface:#fcfdfb;--surface-2:#e9ede7;--text:#1f2421;--muted:#59615b;--line:#dfe4dc;
  --accent:#2e5e4e;--accent-ink:#fcfdfb;--accent-soft:#dfeee7;--accent-d:#224739;--warm:#c96f4a;--glow:rgba(46,94,78,.16);
  --ok:#1d7a4c;--ok-soft:#e1f2e8;--warn:#8a5a00;--warn-soft:#fbefd5;--err:#b3352b;--err-soft:#fbe7e5;--off:#a7afa9;
  --shadow:0 14px 34px color-mix(in srgb,var(--accent) 14%,transparent);--r:14px;--r-p:10px;--r-s:10px;--line-green:#06c755;
  --en:"Manrope","Noto Sans TC",sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#121614;--surface:#1a1f1c;--surface-2:#222925;--text:#e8ece9;--muted:#a9b3ac;--line:#2f3833;
  --accent:#8cc9b2;--accent-ink:#121614;--accent-soft:#1f3a30;--accent-d:#b5e0cf;--warm:#e59a78;--glow:rgba(140,201,178,.14);
  --ok:#62cf98;--ok-soft:#163025;--warn:#efbb5a;--warn-soft:#382c13;--err:#ff8f84;--err-soft:#3a1d1b;--off:#56605a;
  --shadow:0 14px 34px rgba(0,0,0,.4);
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:76px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.75 "Noto Sans TC","Microsoft JhengHei",sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent)}
h1,h2,h3{line-height:1.3;margin:0;font-weight:700;letter-spacing:.01em}
p{margin:0 0 .8em}
.wrap{width:min(1180px,100% - 32px);margin:0 auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:999px;z-index:100}
.skip:focus{left:12px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sec[hidden],.nav a[hidden],.fab a[hidden]{display:none}
#works:has(#wks:empty),#faq:has(.faq-g:empty),#steps:has(.steps:empty){display:none}

/* 按鈕 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 22px;border-radius:999px;border:1.5px solid transparent;font:inherit;font-weight:700;white-space:nowrap;text-decoration:none;cursor:pointer;transition:transform .2s cubic-bezier(.16,1,.3,1),background .2s,border-color .2s,color .2s}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-p{background:var(--accent);color:var(--accent-ink)}
.btn-p:hover{background:var(--accent-d)}
@media (prefers-color-scheme:dark){.btn-p:hover{background:var(--accent-d);color:var(--accent-ink)}}
.btn-g{background:transparent;border-color:var(--line);color:var(--text)}
.btn-g:hover{border-color:var(--accent);color:var(--accent)}
.btn-ink{background:var(--text);color:var(--bg)}
.btn-ink:hover{background:var(--accent);color:var(--accent-ink)}
.btn-l{min-height:50px;padding:12px 28px;font-size:1.05rem}
.btn[disabled]{opacity:.55;cursor:wait}

/* 頁首 */
.hd{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.hd.sc{border-bottom-color:var(--line)}
.hd-in{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);white-space:nowrap;flex:none}
.brand b{font-size:1.3rem;font-weight:900;letter-spacing:.04em}
.brand-en{font-family:var(--en);font-weight:700;color:var(--accent);font-size:.92rem}
.brand-av img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--surface);box-shadow:0 0 0 1.5px var(--accent)}
.brand-av:empty{display:none}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{white-space:nowrap;text-decoration:none;color:var(--text);font-weight:500;padding:8px 12px;border-radius:999px}
.nav a:hover{background:var(--surface-2)}
.nav .nav-login{display:none}
.hd-lock{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%;color:var(--muted);text-decoration:none;font-size:1.15rem;flex:none}
.hd-lock:hover{background:var(--surface-2);color:var(--text)}
.hd-cta{flex:none}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:1.35rem;align-items:center;justify-content:center;cursor:pointer;flex:none}
@media (max-width:900px){
  .burger{display:inline-flex}
  .hd-lock{display:none}
  .hd-cta{margin-left:auto;padding:8px 16px;min-height:40px}
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;gap:2px;background:var(--surface);border-bottom:1px solid var(--line);padding:10px 16px 16px;box-shadow:var(--shadow);transform:translateY(-8px);opacity:0;visibility:hidden;transition:.2s}
  .nav.on{transform:none;opacity:1;visibility:visible}
  .nav a{padding:12px 14px;font-size:1.05rem}
  .nav .nav-login{display:block;color:var(--muted)}
}
@media (max-width:400px){.brand-en{display:none}}

/* 區塊 */
.sec{padding:40px 0}
.sec h2{font-size:clamp(1.6rem,1.15rem + 1.6vw,2.2rem);font-weight:900;margin-bottom:14px}
.band{background:var(--surface)}
.band .qa,.band .steps li{background:var(--bg)}
.sub{color:var(--muted);max-width:60ch;margin:-4px 0 20px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:700;color:var(--accent);margin:0 0 10px;white-space:nowrap}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--accent)}

/* 首屏：左文字（放滿：重點小卡）＋右照片三張 */
.hero{position:relative;padding:28px 0 44px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(620px 420px at 88% 18%,var(--glow),transparent 66%),linear-gradient(180deg,var(--bg) 55%,var(--surface-2))}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:52px;align-items:center}
.hero h1{font-size:clamp(3.1rem,1.9rem + 4.4vw,5.4rem);font-weight:900;letter-spacing:.03em;line-height:1.05;margin-bottom:16px}
.hero h1 span{display:block;font-size:.34em;font-weight:700;letter-spacing:.12em;color:var(--accent);margin-top:12px}
.lead{font-size:clamp(1.08rem,1rem + .4vw,1.28rem);color:var(--muted);max-width:23em;margin-bottom:24px}
.acts{display:flex;gap:12px;flex-wrap:wrap}
/* 按鈕下方的重點：一行小字（主人 2026-10-03 要前台簡潔） */
.hero-fx{list-style:none;margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 22px;max-width:540px}
.hero-fx li{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.95rem;white-space:nowrap}
.hero-fx .ph{color:var(--accent);font-size:1.15rem}
.hero-ph{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:14px}
.hph{position:relative;margin:0;border-radius:var(--r-p);overflow:hidden;background:var(--surface-2);box-shadow:var(--shadow)}
.hph img{width:100%;height:100%;object-fit:cover}
.hph-1{grid-row:1/3;aspect-ratio:4/5}
/* 大照片（4:5）決定整組高度，右邊兩張平分（照片絕對定位，不撐高格子） */
.hph-2,.hph-3{min-height:0}
.hph-2 img,.hph-3 img{position:absolute;inset:0}
.hph-2 img{object-position:40% 30%}
.hph-3 img{object-position:50% 70%}
@media (prefers-reduced-motion:no-preference){
  .hero-t>*{animation:up .8s cubic-bezier(.16,1,.3,1) both}
  .hero-t>*:nth-child(2){animation-delay:.06s}.hero-t>*:nth-child(3){animation-delay:.12s}.hero-t>*:nth-child(4){animation-delay:.18s}.hero-t>*:nth-child(5){animation-delay:.24s}
  .hph{animation:fade 1s cubic-bezier(.16,1,.3,1) both}.hph-2{animation-delay:.15s}.hph-3{animation-delay:.3s}
}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .hero{padding:18px 0 36px}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:28px}
  .hero-ph{max-width:560px}
}
@media (max-width:480px){.hero-fx{gap:6px 16px}.hero-fx li{font-size:.88rem}.acts .btn-l{min-height:46px;padding:10px 20px;font-size:1rem}}

/* 跑馬燈（全頁只有這一條） */
.cred{border-block:1px solid var(--line);background:var(--surface);overflow:hidden;padding:14px 0;cursor:pointer}
.cred-track{display:flex;width:max-content}
.cred ul{display:flex;gap:34px;list-style:none;margin:0;padding:0 17px}
.cred li{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-weight:700;font-size:1.02rem}
.cred .ph{color:var(--warm);font-size:.8rem}
@media (prefers-reduced-motion:no-preference){.cred-track{animation:marq 40s linear infinite}.cred:hover .cred-track,.cred:focus-within .cred-track,.cred.paused .cred-track{animation-play-state:paused}}
@media (prefers-reduced-motion:reduce){.cred{overflow-x:auto}.cred ul[aria-hidden]{display:none}}
@keyframes marq{to{transform:translateX(-50%)}}

/* 作品：整齊的方格（主人 2026-10-03「作品的排版可以簡潔些嗎」→ 同比例 3:4、4 欄；標題不顯示在格子下，放大時才看到） */
.sec-h .sub{margin-bottom:18px}
.wks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.wk{margin:0;position:relative}
.wk-b{display:block;width:100%;aspect-ratio:3/4;padding:0;border:0;background:var(--surface-2);border-radius:var(--r-p);overflow:hidden;cursor:zoom-in}
.wk-b img{width:100%;height:100%;object-fit:cover;object-position:50% var(--py,50%);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.wk-b:hover img{transform:scale(1.03)}
.wk figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:700px){.wks{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}

/* 放大看照片 */
.lb{position:fixed;inset:0;z-index:80;background:rgba(10,12,11,.9);display:flex;align-items:center;justify-content:center;padding:56px 64px 72px}
.lb img{max-width:100%;max-height:calc(100dvh - 140px);width:auto;height:auto;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-x,.lb-p,.lb-n{position:absolute;border:0;background:rgba(255,255,255,.12);color:#f2f4f2;width:46px;height:46px;border-radius:50%;font-size:1.3rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.lb-x:hover,.lb-p:hover,.lb-n:hover{background:rgba(255,255,255,.24)}
.lb-x{top:12px;right:12px}
.lb-p{left:12px;top:50%;transform:translateY(-50%)}
.lb-n{right:12px;top:50%;transform:translateY(-50%)}
.lb-c{position:absolute;left:16px;right:16px;bottom:16px;display:flex;justify-content:center;align-items:center;gap:14px;color:#e8ece9;white-space:nowrap;font-size:.95rem}
.lb-c a{color:#bfe3d4;font-weight:700}
.lb-c span{opacity:.75}
html.lb-open{overflow:hidden}
@media (max-width:620px){.lb{padding:56px 8px 80px}.lb-p,.lb-n{top:auto;bottom:14px;transform:none}.lb-c{bottom:68px;flex-wrap:wrap;gap:4px 12px;white-space:normal}}

/* 關於：文字左、照片右（主人規則；照片完整不硬裁） */
.about-in{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);gap:48px;align-items:center}
.about-t p{max-width:36em}
.facts{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.fact{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;color:var(--text);text-decoration:none;height:100%}
a.fact:hover{border-color:var(--accent)}
.fact .ph{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem}
.fact b{display:block;font-family:var(--en),"Noto Sans TC";font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fact small{display:block;color:var(--muted);font-size:.8rem;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.about-f{margin:0;position:relative}
.about-f img{width:100%;height:auto;border-radius:var(--r-p)}
.about-q{position:absolute;left:-28px;bottom:44px;margin:0;background:var(--accent);color:var(--accent-ink);padding:12px 18px;border-radius:var(--r);font-weight:700;font-size:1.02rem;line-height:1.55;box-shadow:var(--shadow);max-width:86%}
.about-f figcaption{color:var(--muted);font-size:.82rem;margin-top:8px;text-align:right}
@media (max-width:820px){.about-in{grid-template-columns:minmax(0,1fr);gap:22px}.about-f{max-width:420px;order:-1}.about-q{left:12px;bottom:40px;font-size:.96rem}}

/* 30+ 人像計畫：主色色塊 */
.pj{background:var(--accent);color:var(--accent-ink);position:relative;overflow:hidden;isolation:isolate}
.pj::after{content:"30+";position:absolute;right:-10px;bottom:-60px;font:800 clamp(10rem,6rem + 14vw,20rem)/1 var(--en);color:color-mix(in srgb,var(--accent-ink) 8%,transparent);z-index:-1;pointer-events:none}
.pj-in{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:44px;align-items:center}
.pj-f{margin:0;border-radius:var(--r-p);overflow:hidden;aspect-ratio:4/5;background:var(--accent-d)}
.pj-f img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.pj h2{color:var(--accent-ink)}
.pj-lead{font-size:clamp(1.25rem,1.05rem + .9vw,1.7rem);font-weight:700;line-height:1.5;margin-bottom:12px}
.pj-t p{opacity:.92;max-width:42em}
.pj-pts{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pj-pts li{display:inline-flex;align-items:center;gap:8px;border:1px solid color-mix(in srgb,var(--accent-ink) 35%,transparent);border-radius:999px;padding:7px 14px;font-weight:700;white-space:nowrap}
.pj-pts .ph{font-size:1.05rem}
@media (max-width:820px){.pj-in{grid-template-columns:minmax(0,1fr);gap:22px}.pj-f{max-width:300px;aspect-ratio:4/5}}

/* 合作方式：兩張方案卡 */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column}
.plan-paid{border:2px solid var(--accent);box-shadow:var(--shadow)}
.plan h3{font-size:1.3rem;font-weight:900}
.price{display:flex;align-items:baseline;gap:6px;margin:8px 0 6px}
.price small{font:700 1rem var(--en);color:var(--muted)}
.price b{font:800 clamp(2.4rem,1.9rem + 1.6vw,3.2rem)/1 var(--en);color:var(--accent)}
.price b.tag{font:900 clamp(1.7rem,1.4rem + 1vw,2.2rem)/1.2 "Noto Sans TC",sans-serif}
.plan-d{color:var(--muted)}
.plan ul{list-style:none;padding:0;margin:4px 0 18px;display:grid;gap:8px}
.plan li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start}
.plan li .ph{color:var(--accent);font-size:1.1rem;margin-top:4px}
.plan .btn{margin-top:auto;align-self:flex-start}
@media (max-width:760px){.plans{grid-template-columns:minmax(0,1fr)}.plan{padding:20px}}

/* 預約流程 */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:st}
.steps li{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;counter-increment:st}
.steps li>.ph{width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;font-size:1.3rem}
.steps h3{font-size:1.06rem;white-space:nowrap;margin-bottom:4px}
.steps h3::before{content:counter(st) ". ";font-family:var(--en);color:var(--accent)}
.steps p{color:var(--muted);font-size:.92rem;margin:0;line-height:1.6}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}

/* 預約 */
.book{background:radial-gradient(760px 420px at 100% 0,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%)}
.notice{background:var(--warn-soft);color:var(--text);border-left:4px solid var(--warn);border-radius:var(--r-s);padding:10px 14px;margin:0 0 16px;font-weight:500}
.bk{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:18px;align-items:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-h b{font-size:1.1rem;font-family:var(--en),"Noto Sans TC";white-space:nowrap}
.cal-h button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;font-size:1.1rem;display:inline-flex;align-items:center;justify-content:center}
.cal-h button:disabled{opacity:.35;cursor:default}
.cal-w,.cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.cal-w{font-size:.82rem;color:var(--muted);margin-bottom:4px}
.cal-g button{position:relative;aspect-ratio:1/1;min-height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:700 1rem var(--en);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0}
.cal-g button i{display:flex;gap:2px;height:5px}
.cal-g button i s{width:5px;height:5px;border-radius:50%;background:var(--ok)}
.cal-g button i s.b{background:var(--off)}
.cal-g button:hover:not(:disabled){border-color:var(--accent)}
.cal-g button.sel{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.cal-g button.sel i s{background:var(--accent-ink)}
.cal-g button.sel i s.b{opacity:.4}
.cal-g button:disabled{background:transparent;border-color:transparent;color:var(--off);cursor:default}
.cal-g button.full:disabled{background:var(--surface-2);border-color:var(--line);color:var(--muted);text-decoration:line-through}
.cal-g button i s.x{background:transparent;border:1.5px solid var(--off);width:6px;height:6px}
.cal-g button.today::after{content:"";position:absolute;bottom:3px;width:14px;height:2px;border-radius:2px;background:var(--accent)}
.cal-g .pad{visibility:hidden}
.cal-lg{display:flex;gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--muted);margin:12px 0 0}
.cal-lg span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cal-lg s{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.cal-lg s.b{background:var(--off)}
.cal-lg s.x{background:transparent;border:1.5px solid var(--off)}
.slots{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px}
.slots h3{font-size:1rem;margin-bottom:10px;white-space:nowrap}
.slot-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.slot-g button{border:1.5px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;padding:10px 12px;font:700 1rem var(--en);text-align:center;cursor:pointer;white-space:nowrap}
.slot-g button span{display:block;font:500 .78rem "Noto Sans TC",sans-serif;color:var(--muted)}
.slot-g button:hover:not(:disabled){border-color:var(--accent)}
.slot-g button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.slot-g button:disabled{opacity:.5;cursor:not-allowed;text-decoration:line-through}
.hint{color:var(--muted);font-size:.92rem;margin:0}
.sk{background:linear-gradient(90deg,var(--surface-2),var(--bg),var(--surface-2));background-size:200% 100%;animation:sk 1.2s infinite linear;border-radius:12px;border-color:transparent!important}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}
.bk-side{display:grid;gap:18px;position:sticky;top:80px}
.bk-tips h3{font-size:1.05rem;margin-bottom:10px}
.bk-tips ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.bk-tips li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;color:var(--muted);font-size:.93rem;line-height:1.6}
.bk-tips li .ph{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center}
.bk-tips .btn{min-height:40px;padding:8px 16px;font-size:.95rem}
@media (max-width:900px){.bk{grid-template-columns:minmax(0,1fr)}.bk-side{position:static}.bk-tips{display:none}}

/* 表單 */
.picked{display:flex;align-items:center;gap:10px;background:var(--accent-soft);color:var(--accent);border-radius:12px;padding:10px 14px;margin:14px 0 6px;font-weight:700}
.picked .ph{font-size:1.25rem}
.picked #pickedT{flex:1;min-width:0}
.picked.none{background:var(--surface-2);color:var(--muted);font-weight:500}
.picked-x{border:0;background:transparent;color:inherit;width:32px;height:32px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
.picked-x:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.kind-hint{margin:0 0 14px;font-size:.88rem}
.fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.fg .full{grid-column:1/-1}
.fg>.hint{margin-top:-6px;font-size:.85rem}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label,.fld legend{font-weight:700;font-size:.93rem}
.fld label em,.fld legend em{color:var(--err);font-style:normal;margin-left:2px}
.fld small,.q-sub{color:var(--muted);font-size:.84rem;margin-top:-4px}
input,select,textarea{font:inherit;color:var(--text);background:var(--bg);border:1.5px solid var(--line);border-radius:var(--r-s);padding:10px 12px;min-height:46px;width:100%}
textarea{min-height:104px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.85}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:var(--err)}
fieldset{border:0;padding:0;margin:0;min-width:0}
fieldset.bad .pills span{border-color:var(--err)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills label{position:relative;cursor:pointer}
.pills input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.pills span{display:inline-block;border:1.5px solid var(--line);border-radius:999px;padding:8px 18px;font-weight:700;white-space:nowrap;background:var(--bg)}
.pills input:checked+span{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.pills input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.agree input{width:20px;height:20px;min-height:0;margin-top:4px;flex:none;accent-color:var(--accent)}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.closing{margin:16px 0 0;color:var(--accent);font-weight:700}
.form-err{color:var(--err);font-weight:700;margin:10px 0 0}
.submit{margin-top:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.done{text-align:center;padding:24px 8px}
.done .ph-check-circle{font-size:3rem;color:var(--ok)}
.done h3{font-size:1.4rem;margin:8px 0}
.done .code{font-family:var(--en);font-size:1.5rem;font-weight:800;color:var(--accent);letter-spacing:.06em}
.done .acts{justify-content:center;margin-top:16px}
@media (max-width:520px){.fg{grid-template-columns:minmax(0,1fr)}.card{padding:16px}}

/* 常見問題：桌機兩欄（各欄獨立往下長） */
.faq-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.faq-col{display:grid;gap:12px;align-content:start}
.qa{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0}
.qa summary{list-style:none;cursor:pointer;padding:15px 48px 15px 18px;font-weight:700;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:18px;top:11px;font:700 1.5rem var(--en);color:var(--accent);transition:transform .2s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa .a{padding:0 18px 15px;color:var(--muted)}
.qa .a p:last-child{margin:0}
@media (max-width:820px){.faq-g{grid-template-columns:minmax(0,1fr)}}

/* 頁尾（短、聯絡資料兩欄對齊） */
.ft{border-top:1px solid var(--line);padding:26px 0 24px;font-size:.93rem}
.ft-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.3fr) minmax(0,.8fr);gap:24px;align-items:start;padding-right:64px}
.ft-b p{color:var(--muted);margin:6px 0 0}
.ft-c{display:flex;flex-direction:column;gap:5px}
.ft-c h2{font-size:.88rem;color:var(--muted);font-weight:700;margin:0 0 2px}
.ft-c a{color:var(--text);text-decoration:none;white-space:nowrap}
.ft-c a:hover{color:var(--accent)}
.ft-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:0}
.ft-kv dt{color:var(--muted);white-space:nowrap}
.ft-kv dd{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-kv a{font-family:var(--en),"Noto Sans TC"}
.ft-cr{color:var(--muted);font-size:.84rem;margin-top:18px;padding-right:64px}
@media (max-width:820px){.ft-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ft-b{grid-column:1/-1}}
@media (max-width:480px){.ft-in{grid-template-columns:minmax(0,1fr);gap:16px}}

/* 浮動按鈕：圓形，一直顯示（主人固定樣式；LINE 要後台填了 LINE ID 才出現） */
.fab{position:fixed;right:16px;bottom:16px;z-index:45;display:flex;flex-direction:column;gap:12px}
.fab a{position:relative;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;text-decoration:none;box-shadow:0 6px 18px rgba(20,40,30,.24);transition:transform .2s cubic-bezier(.16,1,.3,1)}
.fab a:hover{transform:translateY(-2px)}
.fab em{position:absolute;right:62px;top:50%;transform:translateY(-50%);background:var(--text);color:var(--bg);font-style:normal;font-size:.85rem;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
.fab a:hover em,.fab a:focus-visible em{opacity:1}
.fab-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.fab-th{background:#1d1f1e}
@media (prefers-color-scheme:dark){.fab-th{background:#3a403c}}
.fab-cal{background:var(--accent);color:var(--accent-ink)!important}
.fab-line{background:var(--line-green)}
.fab-line b{font:800 .78rem/1 var(--en);letter-spacing:.02em;color:#fff}
@media (max-width:520px){.fab a{width:48px;height:48px;font-size:1.35rem}.fab em{display:none}.fab-line b{font-size:.72rem}}

/* LINE 加好友視窗（電腦）：QR＋綠色按鈕＋複製 ID，文字都不換行（主人固定規則） */
.lm{position:fixed;inset:0;z-index:100;background:rgba(12,16,14,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.lm-box{position:relative;background:var(--surface);color:var(--text);border-radius:18px;padding:26px 22px 22px;width:min(440px,100%);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:calc(100vh - 32px);overflow:auto}
.lm-x{position:absolute;right:10px;top:10px;width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:1.2rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.lm-x:hover{background:var(--surface-2);color:var(--text)}
.lm-box h3{white-space:nowrap;font-size:clamp(1rem,.85rem + .8vw,1.2rem);margin:0 0 6px}
.lm-desc{white-space:nowrap;font-size:clamp(.68rem,.5rem + .6vw,.86rem);color:var(--muted);margin:0 0 14px}
.lm-qr{display:block;width:200px;height:200px;margin:0 auto 14px;border:6px solid var(--line-green);border-radius:12px;padding:4px;background:#fff}
.lm-qr img{width:100%;height:100%}
.line-add{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;padding:0 20px;border-radius:999px;background:var(--line-green);color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
.line-add:hover{background:#05b04c}
.lm-id{display:flex;gap:10px;justify-content:center;align-items:center;margin:14px 0 0;font-size:.93rem;white-space:nowrap}
.lm-id b{font-family:var(--en)}
.lm-copy{min-height:36px;padding:6px 14px;font-size:.88rem}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--text);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;z-index:90;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* 捲動出現（只有淡入＋上移，讓區塊依序出現；減少動態時不動） */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .js .reveal.in{opacity:1;transform:none}
}

/* 文章頁（隱私權政策）、404 */
.doc{max-width:760px}
.doc h1{font-size:2rem;font-weight:900;margin:6px 0 14px}
.doc h2{font-size:1.2rem;margin:22px 0 8px}
.doc li{margin-bottom:4px}
.nf{text-align:center;padding:72px 0}
.nf h1{font-size:2.2rem;margin-bottom:10px}

/* 深色模式：30+ 色塊改深綠（整頁維持深色，不在中間跳出一塊亮色） */
@media (prefers-color-scheme:dark){
  .pj{background:var(--accent-soft);color:var(--text)}
  .pj h2{color:var(--text)}
  .pj-lead{color:var(--accent-d)}
  .pj::after{color:color-mix(in srgb,var(--accent) 10%,transparent)}
  .pj-pts li{border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent-d)}
}