/* 寇特室內設計 官網＋業主專區＋後台共用
 * 設計：照片優先、安靜的暖白底；主色取自 LOGO 的金色（#a89058，文字用加深的金棕 #7a6232，白字對比 6.0）＋ LOGO 深灰；深色模式跟著系統
 * 對比度：主色上的白字 6.0、次要字在底色 5.6；深色主色字 9.2（後台可換配色，見 functions/_lib/content.js THEMES）
 * 圓角：卡片 12px、照片 8px、輸入框 10px、按鈕全圓；中文 Noto Sans TC，英文與數字 Manrope
 * 間距：區塊上下 40px（主人規則：緊湊，不要大片留白）；頁首、選單、按鈕文字一律不換行
 */
:root{
  --bg:#f7f4ef;--surface:#fffdf9;--surface-2:#efe9e0;--text:#2a2826;--muted:#655f57;--line:#e3dcd1;
  --accent:#7a6232;--accent-ink:#fffdf9;--accent-soft:#efe6d3;--accent-d:#5e4b25;--glow:rgba(168,144,88,.20);
  --gold:#a89058;--char:#3b3a38;--char-ink:#f7f4ef;
  --ok:#2f7a4f;--ok-soft:#e2f1e7;--warn:#8a5a00;--warn-soft:#fbefd5;--err:#b3352b;--err-soft:#fbe7e5;--off:#a9a39a;--info:#2c5d8a;--info-soft:#e1ecf6;
  --shadow:0 14px 34px rgba(60,48,30,.10);--r:12px;--r-p:8px;--r-s:10px;--line-green:#06c755;
  --en:"Manrope","Noto Sans TC",sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#161514;--surface:#1f1d1b;--surface-2:#2a2724;--text:#ece8e1;--muted:#b3ab9f;--line:#3a3632;
  --accent:#cdb37a;--accent-ink:#161514;--accent-soft:#352d1e;--accent-d:#e2cf9f;--glow:rgba(205,179,122,.14);
  --gold:#b89c62;--char:#2a2724;--char-ink:#ece8e1;
  --ok:#6fcf97;--ok-soft:#173022;--warn:#efbb5a;--warn-soft:#382c13;--err:#ff8f84;--err-soft:#3a1d1b;--off:#5d5852;--info:#8fbbe6;--info-soft:#1b2a3a;
  --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.35;margin:0;font-weight:700;letter-spacing:.02em}
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}
.logo-l{display:none}
@media (prefers-color-scheme:dark){.logo-d{display:none}.logo-l{display:block}}

/* 按鈕 */
.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);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(--char);color:var(--char-ink)}
.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) 90%,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:14px;height:68px}
.brand{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.brand img{height:44px;width:auto}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{white-space:nowrap;text-decoration:none;color:var(--text);font-weight:500;padding:8px 11px;border-radius:999px}
.nav a:hover{background:var(--surface-2)}
.nav .nav-pt{color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.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:1080px){
  .burger{display:inline-flex}
  .hd-cta{margin-left:auto;padding:8px 16px;min-height:40px}
  .nav{position:fixed;inset:68px 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;max-height:calc(100dvh - 68px);overflow:auto}
  .nav.on{transform:none;opacity:1;visibility:visible}
  .nav a{padding:12px 14px;font-size:1.05rem}
}
@media (max-width:420px){.brand img{height:36px}.hd-cta{padding:8px 13px;font-size:.95rem}}

/* 區塊 */
.sec{padding:40px 0}
.sec h2{font-size:clamp(1.55rem,1.15rem + 1.5vw,2.15rem);font-weight:900;margin-bottom:12px}
.band{background:var(--surface)}
.band .qa{background:var(--bg)}
.sec-h{margin-bottom:20px}
.sub{color:var(--muted);max-width:62ch;margin:-2px 0 0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.95rem;font-weight:700;color:var(--accent);margin:0 0 12px;white-space:nowrap;letter-spacing:.06em}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--gold)}

/* 首屏：左文字＋右照片（大照片＋價格卡＋小照片） */
.hero{position:relative;padding:30px 0 44px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(640px 420px at 85% 15%,var(--glow),transparent 66%),linear-gradient(180deg,var(--bg) 60%,var(--surface-2))}
.hero-in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:48px;align-items:center}
.hero h1{font-size:clamp(2.2rem,1.4rem + 3vw,3.6rem);font-weight:900;letter-spacing:.03em;line-height:1.25;margin-bottom:16px}
.lead{font-size:clamp(1.04rem,.98rem + .3vw,1.18rem);color:var(--muted);max-width:30em;margin-bottom:24px}
.acts{display:flex;gap:12px;flex-wrap:wrap}
.hero-fx{list-style:none;margin:26px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hero-fx li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center}
.hero-fx .ph{width:38px;height:38px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem}
.hero-fx b{display:block;font-size:1.02rem;white-space:nowrap}
.hero-fx small{display:block;color:var(--muted);font-size:.82rem;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-ph{position:relative;padding:0 0 48px 0}
.hph{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{position:relative;aspect-ratio:3/2;overflow:visible;background:transparent;box-shadow:none}
.hph-im{display:block;width:100%;height:100%;border-radius:var(--r-p);overflow:hidden;box-shadow:var(--shadow);background:var(--surface-2)}
.hph-2{position:absolute;left:-36px;bottom:0;width:38%;aspect-ratio:3/2;border:6px solid var(--bg)}
.hero-badge{position:absolute;right:18px;bottom:-26px;background:var(--char);color:var(--char-ink);border-radius:var(--r);padding:12px 20px 12px;box-shadow:var(--shadow);text-align:center;min-width:132px}
.hero-badge small{display:block;font-size:.84rem;opacity:.85;white-space:nowrap}
.hero-badge b{display:block;font:800 2.4rem/1.05 var(--en);color:var(--gold)}
.hero-badge em{font:700 1rem "Noto Sans TC",sans-serif;font-style:normal;margin-left:3px;color:var(--char-ink)}
@media (prefers-reduced-motion:no-preference){
}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
@media (max-width:960px){
  .hero{padding:18px 0 36px}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:26px}
  .hero-ph{padding-bottom:40px;max-width:640px}
  .hph-2{left:auto;right:12px;bottom:0;width:34%}
  .hero-badge{right:auto;left:14px;bottom:-22px}
}
@media (max-width:560px){.hero-fx{gap:8px}.hero-fx li{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:6px}.hero-fx b{font-size:.95rem}.hero-fx small{white-space:normal;font-size:.76rem}.acts .btn-l{min-height:46px;padding:10px 20px;font-size:1rem}.hero-badge{padding:9px 14px;min-width:0}.hero-badge b{font-size:1.9rem}}

/* 服務 */
.svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.svc li{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px 18px}
.band .svc li{background:var(--bg)}
.svc .svc-n{position:absolute;right:16px;top:12px;font:800 1.6rem var(--en);color:var(--line)}
.svc li>.ph{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:1.45rem;margin-bottom:12px}
.svc h3{font-size:1.08rem;margin-bottom:6px;white-space:nowrap}
.svc p{color:var(--muted);font-size:.93rem;margin:0;line-height:1.7}
@media (max-width:980px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.svc{grid-template-columns:minmax(0,1fr);gap:10px}.svc li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:2px 12px;padding:14px 16px;align-items:start}.svc li>.ph{grid-row:1/3;margin:0}.svc .svc-n{display:none}.svc h3{margin:0}.svc p{grid-column:2}}

/* 方案 */
.tiers{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:16px;align-items:stretch}
.tier{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column}
.tier-1{border:2px solid var(--accent);box-shadow:var(--shadow)}
.tier h3{font-size:1.3rem;font-weight:900;display:flex;align-items:center;gap:8px}
.tier h3 i{font-style:normal;font-size:.75rem;font-weight:700;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:1px 10px}
.tier-d{color:var(--muted);margin:4px 0 10px;font-size:.95rem}
.prs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 0;border-block:1px dashed var(--line);margin-bottom:14px}
.prs.one{grid-template-columns:minmax(0,1fr)}
.pr small{display:block;color:var(--muted);font-size:.84rem;white-space:nowrap}
.pr b{display:block;font:800 clamp(2rem,1.6rem + 1.2vw,2.6rem)/1.1 var(--en);color:var(--accent)}
.pr em{font:700 1rem "Noto Sans TC",sans-serif;font-style:normal;margin-left:3px;color:var(--text)}
.tier ul{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:7px}
.tier li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:start;font-size:.94rem;line-height:1.6}
.tier li .ph{color:var(--accent);font-size:1.05rem;margin-top:3px}
.tier .btn{margin-top:auto;align-self:flex-start}
.tiers-note{color:var(--muted);font-size:.9rem;margin:12px 0 0}
.addon{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;overflow:hidden}
.band .addon,.band .tier{background:var(--bg)}
.addon h3{font-size:1.15rem;margin-bottom:12px}
.addon ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.addon li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center}
.addon li>.ph{width:40px;height:40px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem}
.addon b{display:block}
.addon small{display:block;color:var(--muted);font-size:.88rem;line-height:1.5}
.addon-f{margin:0;border-radius:var(--r-p);overflow:hidden;aspect-ratio:3/2}
.addon-f img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.tiers{grid-template-columns:minmax(0,1fr)}.addon{grid-template-columns:minmax(0,1fr)}.addon-f{order:-1}}

/* 施工流程 */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:0;position:relative}
.flow::before{content:"";position:absolute;left:5%;right:5%;top:27px;height:2px;background:linear-gradient(90deg,var(--gold),var(--accent))}
.flow li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0 4px}
.flow b{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;background:var(--surface);border:2px solid var(--gold);display:inline-flex;align-items:center;justify-content:center;font:800 .92rem var(--en);color:var(--accent);white-space:nowrap}
.band .flow b{background:var(--surface)}
.flow span{font-weight:700;font-size:.95rem;white-space:nowrap}
.flow .flow-end b{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-size:1.4rem}
.flow-f{display:flex;gap:10px 22px;align-items:baseline;flex-wrap:wrap;margin-top:22px;padding:16px 20px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--r-s)}
.band .flow-f{background:var(--bg)}
.flow-f strong{font-size:1.25rem;font-weight:900;white-space:nowrap}
.flow-f p{margin:0;color:var(--muted);font-size:.92rem;flex:1;min-width:min(320px,100%)}
@media (max-width:900px){
  .flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 6px}
  .flow::before{display:none}
}
@media (max-width:420px){.flow{grid-template-columns:repeat(3,minmax(0,1fr))}.flow b{width:50px;height:50px;font-size:.85rem}.flow span{font-size:.88rem}}

/* 作品 */
.wks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.wk{display:block;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .2s,transform .3s cubic-bezier(.16,1,.3,1)}
.band .wk{background:var(--bg)}
.wk:hover{border-color:var(--accent)}
.wk-ph{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--surface-2)}
.wk-ph img{width:100%;height:100%;object-fit:cover}
.wk:hover .wk-ph img{--ps:1.18}
/* 作品照片滑過：深色遮罩從下往上滑出「看完整作品」（照原網站） */
.wk-go{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(28,26,24,.55);color:#fff;font-weight:700;letter-spacing:.06em;transform:translateY(101%);transition:transform .55s cubic-bezier(.65,0,.35,1)}
.wk-go .ph{color:var(--gold);transition:transform .4s}
.wk:hover .wk-go,.wk:focus-visible .wk-go{transform:none}
.wk:hover .wk-go .ph{transform:translateX(4px)}
@media (hover:none){.wk-go{display:none}}
.wk-n{position:absolute;left:14px;top:12px;font:800 1rem var(--en);color:#fff;background:rgba(20,18,16,.55);border-radius:999px;padding:2px 10px}
.wk-t{display:block;padding:14px 18px 16px}
.wk-t small{display:block;color:var(--accent);font-weight:700;font-size:.84rem;letter-spacing:.04em}
.wk-t b{display:block;font-size:1.15rem;margin:2px 0 4px}
.wk-t span{display:block;color:var(--muted);font-size:.92rem;line-height:1.6}
@media (max-width:720px){.wks{grid-template-columns:minmax(0,1fr);gap:14px}}
.sec-more{margin-top:18px;display:flex;justify-content:center}

/* 關於：文字左、照片右（主人規則） */
.about-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center}
.about-t p{max-width:36em}
.pts{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pts li{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}
.pts .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}
.pts b{display:block;white-space:nowrap}
.pts small{display:block;color:var(--muted);font-size:.8rem;line-height:1.45}
.about-f{margin:0;position:relative}
.ab-im{display:block;border-radius:var(--r-p);overflow:hidden;background:var(--surface-2)}
.ab-im img{width:100%;height:auto}
.about-f blockquote{position:absolute;left:-24px;bottom:28px;margin:0;background:var(--char);color:var(--char-ink);padding:12px 18px;border-radius:var(--r);font-weight:700;line-height:1.6;box-shadow:var(--shadow);max-width:80%;border-left:4px solid var(--gold)}
@media (max-width:980px){.pts{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){.about-in{grid-template-columns:minmax(0,1fr);gap:22px}.about-f{order:-1}.about-f blockquote{left:12px;bottom:12px;font-size:.95rem}.pts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.pts{grid-template-columns:minmax(0,1fr)}}

/* 常見問題：桌機兩欄 */
.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:14px 48px 14px 18px;font-weight:700;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:18px;top:10px;font:700 1.5rem var(--en);color:var(--accent);transition:transform .2s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa .a{padding:0 18px 14px;color:var(--muted)}
.qa .a p:last-child{margin:0}
@media (max-width:820px){.faq-g{grid-template-columns:minmax(0,1fr)}}

/* 免費諮詢 */
.ct{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:18px;align-items:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.band .card{background:var(--bg)}
.ct-side{display:grid;gap:18px;position:sticky;top:84px}
.ct-rows{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ct-rows li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center}
.ct-rows li>.ph{width:38px;height:38px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem}
.ct-rows small{display:block;color:var(--muted);font-size:.8rem;line-height:1.3}
.ct-rows a,.ct-rows b{font-weight:700;color:var(--text);text-decoration:none;word-break:break-word}
.ct-rows a:hover{color:var(--accent)}
.ct-tips{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px dashed var(--line);display:grid;gap:8px}
.ct-tips li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;color:var(--muted);font-size:.9rem;line-height:1.6}
.ct-tips .ph{color:var(--accent);margin-top:3px}
.map{margin-top:18px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);height:300px;background:var(--surface-2)}
.map iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:900px){.ct{grid-template-columns:minmax(0,1fr)}.ct-side{position:static}.map{height:240px}}

/* 表單 */
.fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.fg .full{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.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{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}
.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:7px 16px;font-weight:700;white-space:nowrap;background:var(--bg);font-size:.95rem}
.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)}
.hpf{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.closing{margin:14px 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}
.hint{color:var(--muted);font-size:.9rem;margin:0}
@media (max-width:560px){.fg{grid-template-columns:minmax(0,1fr)}.card{padding:16px}}

/* 作品介紹頁 */
.crumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.9rem;color:var(--muted);margin:18px 0 14px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb b{color:var(--text);font-weight:500}
.wp-h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;margin-bottom:18px}
.wp-h h1{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.5rem);font-weight:900;margin-bottom:8px}
.wp-h .lead{margin:0}
.wp-meta{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.wp-meta div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:6px 14px;text-align:center}
.wp-meta dt{font-size:.78rem;color:var(--muted)}
.wp-meta dd{margin:0;font-weight:700;white-space:nowrap}
.wp-cover{margin:0 0 20px}
.gl-b{display:block;width:100%;padding:0;border:0;background:var(--surface-2);border-radius:var(--r-p);overflow:hidden;cursor:zoom-in}
.wp-cover .gl-b{aspect-ratio:16/9}
.gl-b img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.gl-b:hover img{transform:scale(1.02)}
.wp-desc{max-width:46em;margin:0 0 22px;font-size:1.04rem}
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gal .gl-b{aspect-ratio:3/2}
.wp-cta{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--char);color:var(--char-ink);border-radius:var(--r);padding:22px 26px;margin:28px 0 0}
.wp-cta h2{font-size:1.3rem;margin:0;color:var(--char-ink)}
.wp-cta p{margin:2px 0 0;opacity:.85}
@media (max-width:820px){.wp-h{grid-template-columns:minmax(0,1fr)}.gal{grid-template-columns:repeat(2,minmax(0,1fr))}.wp-cover .gl-b{aspect-ratio:3/2}}

/* 放大看照片 */
.lb{position:fixed;inset:0;z-index:80;background:rgba(14,12,10,.92);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:#f2f0ec;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:18px;text-align:center;color:#e9e5de;font:700 .95rem var(--en)}
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:26px}}

/* 頁尾（短、聯絡資料兩欄對齊；右側留空給浮動按鈕） */
.ft{border-top:1px solid var(--line);padding:26px 0 22px;font-size:.92rem;background:var(--surface)}
.ft-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,.7fr);gap:24px;align-items:start;padding-right:64px}
.ft-b img{height:40px;width:auto}
.ft-b p{color:var(--muted);margin:8px 0 0}
.ft-c{display:flex;flex-direction:column;gap:5px}
.ft-c h2{font-size:.86rem;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:3px 14px;margin:0}
.ft-kv dt{color:var(--muted);white-space:nowrap}
.ft-kv dd{margin:0;overflow:hidden;text-overflow:ellipsis}
.ft-kv a{color:var(--text);text-decoration:none}
.ft-kv a:hover{color:var(--accent)}
.ft-cr{color:var(--muted);font-size:.82rem;margin-top:14px;padding-right:64px}
@media (max-width:820px){.ft-in{grid-template-columns:minmax(0,1fr);gap:14px}.ft-b{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.ft-b p{margin:0}.ft-c.ft-l{flex-direction:row;flex-wrap:wrap;gap:4px 18px}.ft-c.ft-l h2{display:none}}
@media (max-width:520px){.ft{padding:20px 0 18px}.ft-in{padding-right:56px}.ft-b img{height:34px}}

/* 浮動按鈕：圓形，一直顯示（主人固定樣式：照 BeautyS；LINE 要後台填了 LINE ID 才出現） */
.fab{position:fixed;right:20px;bottom:20px;z-index:45;display:flex;flex-direction:column;gap:12px}
.fab a{position:relative;width:54px;height:54px;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(30,24,16,.25);transition:transform .2s cubic-bezier(.16,1,.3,1)}
.fab a:hover{transform:translateY(-2px)}
.fab em{position:absolute;right:64px;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-line{background:var(--line-green)}
.fab-line b{font:800 .78rem/1 var(--en);color:#fff}
.fab-tel{background:#a8435f}
.fab-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.fab-fb{background:#1877f2}
@media (max-width:520px){.fab{right:14px;bottom:14px}.fab a{width:48px;height:48px;font-size:1.35rem}.fab em{display:none}}

/* LINE 加好友視窗（電腦）：QR＋綠色按鈕＋複製 ID，文字都不換行 */
.lm{position:fixed;inset:0;z-index:100;background:rgba(14,12,10,.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)}
.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:1.15rem;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}
.lm-id{display:flex;gap:10px;justify-content:center;align-items:center;margin:14px 0 0;font-size:.93rem;white-space:nowrap}

.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:120;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:no-preference){
  /* 動畫（照寇特原網站）：捲到時從左／右滑入、往上淡入、放大出現；照片由上往下揭開；施工流程的線從左畫到右
     site.js 依區塊幫元素加 .rv＋方向，進到畫面加 .in，播完把 class 拿掉（hover 等效果回復原樣） */
  .js .rv{opacity:0;transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1),clip-path 1.15s cubic-bezier(.65,0,.35,1);transition-delay:var(--d,0s)}
  .js .rv-left{transform:translateX(-56px)}
  .js .rv-right{transform:translateX(56px)}
  .js .rv-up{transform:translateY(40px)}
  .js .rv-scale{transform:scale(.86)}
  .js .rv-mask{opacity:1;clip-path:inset(0 0 100% 0)}
  .js .rv.in{opacity:1;transform:none}
  .js .rv-mask.in{clip-path:inset(0 0 0 0)}
  .js .flow.rv-line::before{transform:scaleX(0);transform-origin:left center;transition:transform 1.6s cubic-bezier(.65,0,.35,1) .25s}
  .js .flow.rv-line.in::before{transform:none}
  /* 視差：照片比框大一點，捲動時慢慢移動（site.js 更新 --py） */
  .js .px{transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1.14));transition:transform .7s cubic-bezier(.16,1,.3,1);will-change:transform}
}
/* 直線格線（照原網站：淡淡的直線把版面分成四欄）＋區塊旁邊的直排英文 */
.hero,.sec{position:relative}
.hero>.wrap,.sec>.wrap{position:relative;z-index:1}
.hero::after,.sec::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(to right,var(--gl) 1px,transparent 1px);background-size:calc(min(1180px,100% - 32px) / 4) 100%;background-position:calc((100% - min(1180px,100% - 32px)) / 2) 0}
:root{--gl:color-mix(in srgb,var(--line) 75%,transparent)}
@media (max-width:640px){.hero::after,.sec::after{background-size:calc(100% - 32px) 100%;background-position:16px 0}}
.vlabel{position:absolute;left:max(10px,calc((100% - 1180px) / 2 - 46px));top:44px;z-index:1;writing-mode:vertical-rl;font:800 .8rem var(--en);letter-spacing:.34em;color:var(--muted);opacity:.6;white-space:nowrap;pointer-events:none;display:none}
.vlabel::after{content:"";display:inline-block;width:1px;height:46px;background:var(--gold);margin-top:12px}
@media (min-width:1300px){.vlabel{display:block}}

/* 文章頁（隱私權政策）、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}