/* 後場剪輯 — 手機優先。主題=「後場」:石灰岩底、胡桃木、孔雀墨綠絲絨、梅子絲絨、拉絲香檳銅;統一一盞左上暖光+香檳銅斜邊。
   材質貼圖=assets/img/m/*.webp(tools/make_tex.py 生成,零花費);字一律 HTML。 */
:root{
  --stone:#EFEBE4; --stone-2:#E4DED4; --card:#FBF9F5; --ink:#1E1A16; --ink-2:#3B342D; --muted:#5E554C; --rule:#D8D0C3;
  --teal:#0F4A4B; --teal-ink:#0B3A3B; --plum:#5A1F45; --walnut:#3A2416; --brass:#A9874F; --brass-ink:#7A5C2A; --champ:#E9D6AE;
  --line:#06C755;
  --tx-teal:url(img/m/velvet-teal.webp); --tx-plum:url(img/m/velvet-plum.webp); --tx-walnut:url(img/m/walnut.webp);
  --tx-brass:url(img/m/brass.webp); --tx-stone:url(img/m/stone.webp);
  --light:linear-gradient(135deg,rgba(255,236,200,.26) 0%,rgba(255,236,200,.06) 34%,rgba(0,0,0,0) 55%,rgba(0,0,0,.18) 100%);
  --edge:linear-gradient(135deg,#F4E4BE,#B08B4E 30%,#6E5128 55%,#D9BC86 80%,#8C6B37);
  --serif:"Noto Serif TC","Songti TC",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --latin:"Playfair Display","Noto Serif TC",serif; font-variant-numeric:lining-nums;
  --gut:16px; --max:1060px; --r:16px;
  --sh:0 2px 3px rgba(40,26,14,.10),0 22px 40px -22px rgba(40,26,14,.45);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:400 18px/1.78 var(--sans);overflow-x:hidden;padding-bottom:80px;
  background:var(--stone) var(--tx-stone) repeat;background-size:720px}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{margin:0 0 .5em;line-height:1.32;font-family:var(--serif);font-weight:900;letter-spacing:.01em}
h1{font-size:clamp(34px,9.2vw,60px)}
h2{font-size:clamp(27px,6.6vw,42px)}
h3{font-size:21px;font-weight:700;margin-bottom:.3em}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sec{padding:64px 0;position:relative}
.sec.alt{background:rgba(251,249,245,.72);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.kick{display:flex;align-items:center;gap:10px;font:700 16px/1.4 var(--sans);letter-spacing:.12em;color:var(--brass-ink);margin-bottom:12px}
.kick::before{content:"";width:28px;height:2px;background:var(--edge)}
.lead{font-size:19px;color:var(--muted);max-width:660px}
.num{font-family:var(--latin);font-weight:700}

/* 材質共用:暖光 → 貼圖 → 底色;外框香檳銅斜邊 2px */
.mat{position:relative;border-radius:var(--r);background:var(--light),var(--tex) center/cover,var(--base);
  box-shadow:inset 0 1px 0 rgba(255,240,210,.35),inset 0 -2px 6px rgba(0,0,0,.25),var(--sh)}
.mat::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.t-teal,.u-teal .use-h,.quote{--tex:var(--tx-teal);--base:#0F4A4B}
.t-plum,.u-plum .use-h,.final{--tex:var(--tx-plum);--base:#4E1A3C}
.t-walnut,.u-walnut .use-h,.band-walnut{--tex:var(--tx-walnut);--base:#3A2416}
.t-brass{--tex:var(--tx-brass);--base:#CBB083}

/* 頁首 */
.top{position:sticky;top:0;z-index:40;background:rgba(243,240,234,.94);backdrop-filter:blur(8px)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--edge);opacity:.8}
.top .bar{display:flex;align-items:center;justify-content:space-between;height:62px;gap:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap}
.medal{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:900 19px/1 var(--serif);color:#F6E7C6;
  background:radial-gradient(circle at 32% 28%,rgba(255,240,210,.35),transparent 55%),var(--tx-teal) center/cover,#0F4A4B;
  box-shadow:0 0 0 2px #C9A867,0 0 0 3px #6E5128,0 4px 10px -4px rgba(0,0,0,.5)}
.lt{display:flex;flex-direction:column;line-height:1.15}
.lt b{font:900 19px var(--serif);letter-spacing:.14em}
.lt small{font:600 14px var(--latin);letter-spacing:.16em;color:var(--brass-ink)}
.top nav{display:none;gap:2px}
.top nav a{text-decoration:none;font-size:16px;padding:8px 11px;border-radius:8px;color:var(--ink-2)}
.top nav a:hover{background:var(--stone-2)}
.top .btn{min-height:44px;padding:8px 16px;font-size:16px;display:none}
@media (min-width:960px){.top nav{display:flex}.top .btn{display:inline-flex}}

/* 按鈕:拉絲香檳銅+深字 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:12px 24px;border-radius:14px;
  font:800 18px/1.3 var(--sans);text-decoration:none;border:0;cursor:pointer;transition:transform .15s,box-shadow .15s;position:relative}
.btn-main{color:#2A1E10;background:var(--light),var(--tx-brass) center/cover,#CBB083;
  box-shadow:inset 0 1px 0 rgba(255,250,235,.8),inset 0 -2px 0 rgba(90,64,26,.45),0 0 0 1px #8C6B37,0 14px 26px -12px rgba(60,40,15,.6)}
.btn-main:hover{transform:translateY(-1px)}
.btn-main:active{transform:translateY(1px)}
.lineico{width:28px;height:28px;border-radius:50%;background:var(--line);display:inline-grid;place-items:center;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.lineico svg{width:17px;height:17px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 10px}
.cta-note{font-size:16px;color:var(--muted);margin:0}

/* 首屏 */
.hero{padding:36px 0 54px}
.hero h1 em{font-style:normal;color:var(--teal);background:linear-gradient(transparent 68%,rgba(201,168,103,.35) 68%)}
.board{margin-top:34px;padding:16px;border-radius:20px;--tex:var(--tx-walnut);--base:#3A2416;position:relative;
  background:var(--light),var(--tx-walnut) center/cover,#3A2416;box-shadow:inset 0 1px 0 rgba(255,236,200,.25),0 2px 4px rgba(0,0,0,.15),0 30px 50px -26px rgba(40,22,10,.7)}
.board::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.board-h{display:flex;align-items:baseline;justify-content:space-between;color:#F1DDB4;padding:2px 4px 12px}
.board-h span{font:italic 600 18px var(--latin);letter-spacing:.06em;color:#D8BC86}
.board-h b{font:700 17px var(--serif);letter-spacing:.12em}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{position:relative;border-radius:12px;padding:16px 14px 14px;color:#F7EBD2;min-height:118px;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--light),var(--tex) center/cover,var(--base);box-shadow:inset 0 1px 0 rgba(255,240,210,.3),inset 0 -2px 6px rgba(0,0,0,.3),0 6px 14px -8px rgba(0,0,0,.6)}
.tile::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.tile .v{font:700 clamp(27px,7.4vw,44px)/1 var(--latin);white-space:nowrap;letter-spacing:.01em;color:#F3DDAC;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.tile .v small{font:700 16px var(--sans);margin-left:4px;color:#F7EBD2}
.tile .v sup{font-size:.55em}
.tile .k{font-size:15px;font-weight:700;margin-top:6px;line-height:1.4}
@media (min-width:420px){.tile .k{font-size:16px}}
.t-brass{color:#2A1E10}.t-brass .v{color:#3A2A12;text-shadow:0 1px 0 rgba(255,250,235,.6)}.t-brass .v small{color:#2A1E10}
.t-walnut{border:0}
.board-f{margin:12px 2px 0;text-align:center;font-size:16px;color:#E7D3AE;letter-spacing:.12em}
@media (min-width:900px){
  .hero{padding:76px 0 84px}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
  .board{margin-top:0;transform:rotate(-1deg)}
}

/* 三條不碰:胡桃木帶狀區+淺色卡 */
.band-walnut{background:var(--light),var(--tx-walnut) center/cover no-repeat,#3A2416;color:#F4E8D2}
.band-walnut h2{color:#FBF2DF}
.band-walnut .lead{color:#E2D2B6}
.band-walnut .kick{color:#E2C68E}
.vows{display:grid;gap:14px;margin-top:28px}
.vow{background:linear-gradient(160deg,#FDFBF7,#F1EBE0);color:var(--ink);border-radius:var(--r);padding:22px 20px;position:relative;
  box-shadow:0 0 0 1px #C9A867,0 18px 30px -18px rgba(0,0,0,.6)}
.vow .no{font:700 26px/1 var(--latin);color:var(--brass-ink)}
.vow h3{margin-top:8px}
.vow p{margin:0;color:var(--muted)}
.nda{margin-top:18px;display:flex;gap:14px;align-items:center;padding:16px 20px;border-radius:var(--r);
  background:rgba(20,12,6,.35);box-shadow:inset 0 0 0 1px rgba(201,168,103,.6);color:#F1E3C8}
.nda .num{font-size:26px;color:#E2C68E}
.nda p{margin:0}
@media (min-width:900px){.vows{grid-template-columns:repeat(3,1fr)}}

/* 三種合作方式:每張一種材質抬頭 */
.uses{display:grid;gap:18px;margin-top:28px}
.use{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--rule),var(--sh)}
.use-h{position:relative;padding:20px 20px 16px;color:#F7EBD2;background:var(--light),var(--tex) center/cover,var(--base);
  box-shadow:inset 0 -2px 0 #B08B4E}
.use-h h3{margin:8px 0 0;color:#FBF1DC;font-size:24px}
.use .tag{display:inline-block;font:italic 600 15px var(--latin);letter-spacing:.12em;color:#E8CF9C}
.use p{margin:16px 20px 0;color:var(--muted)}
.use ul{margin:10px 20px 20px;padding-left:1.1em;color:var(--ink-2)}
@media (min-width:900px){.uses{grid-template-columns:repeat(3,1fr)}}

/* 風格對齊流程:香檳銅章 */
.steps{counter-reset:s;display:grid;gap:0;margin-top:28px;border-left:2px solid #D2BE98;padding-left:26px;margin-left:20px}
.step{position:relative;padding:0 0 26px}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:-48px;top:-2px;width:42px;height:42px;border-radius:50%;
  font:700 22px/42px var(--latin);text-align:center;color:#2A1E10;
  background:radial-gradient(circle at 30% 25%,rgba(255,250,235,.7),transparent 55%),var(--tx-brass) center/cover,#CBB083;
  box-shadow:0 0 0 1px #8C6B37,0 6px 12px -6px rgba(60,40,15,.7)}
.step p{margin:0;color:var(--muted)}
.step:last-child{padding-bottom:0}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(4,1fr);border-left:0;border-top:2px solid #D2BE98;padding:36px 0 0;gap:24px;margin-left:0}
  .step::before{left:0;top:-58px}
}

/* 交付規格表 */
.sheet{margin-top:26px;border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:0 0 0 1px #CDB78C,var(--sh)}
.row{display:grid;grid-template-columns:1fr;padding:16px 20px;border-bottom:1px solid var(--rule)}
.row:last-child{border-bottom:0}
.row dt{font:700 16px var(--sans);letter-spacing:.1em;color:var(--teal)}
.row dd{margin:2px 0 0;font-weight:700}
.row dd span{display:block;font-weight:400;color:var(--muted);font-size:16px}
@media (min-width:700px){.row{grid-template-columns:180px 1fr;gap:18px;align-items:baseline}.row dd{margin:0}}

/* 作品 */
.works{display:grid;gap:22px;margin-top:28px}
.work{background:var(--card);border-radius:var(--r);padding:14px;box-shadow:0 0 0 1px #CDB78C,var(--sh)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pair figure{margin:0}
.pair img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.pair figcaption{font-size:15px;font-weight:700;margin-top:8px;color:var(--ink-2)}
.pair figcaption b{font:italic 700 18px var(--latin);color:var(--brass-ink);margin-right:4px}
.work h3{margin:14px 2px 4px;font-size:19px}
.work p{margin:0 2px;color:var(--muted);font-size:16px}
.slot{margin-top:22px;border:2px dashed #CDB78C;border-radius:var(--r);padding:22px 18px;text-align:center;color:var(--muted);background:rgba(251,249,245,.6)}
.slot b{display:block;color:var(--ink);font:700 20px var(--serif);margin-bottom:4px}
@media (min-width:900px){.works{grid-template-columns:repeat(3,1fr)}}

/* 價格 */
.price{display:grid;gap:18px;margin-top:24px}
.quote{padding:28px 22px;color:#F3E7CF}
.quote h3{font-size:25px;color:#FBF1DC}
.quote p{color:#E1D3B8;margin:0}
.factors{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.factor{background:var(--card);border-radius:12px;padding:16px;box-shadow:0 0 0 1px #CDB78C,0 10px 20px -16px rgba(40,26,14,.5)}
.factor b{display:block;font:700 19px var(--serif);color:var(--teal)}
.factor span{font-size:15px;color:var(--muted)}
@media (min-width:900px){.price{grid-template-columns:1fr 1fr;align-items:stretch}.factors{grid-auto-rows:1fr}}

/* FAQ */
.faq{margin-top:22px;border-top:1px solid #CDB78C;max-width:780px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font-weight:800;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:10px;font:600 30px var(--latin);color:var(--brass-ink)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 18px;color:var(--muted)}

/* 最後 CTA:梅子絲絨 */
.final{background:var(--light),var(--tx-plum) center/cover,#4E1A3C;color:#F3E7CF;padding:68px 0;border-top:2px solid #B08B4E}
.final h2{color:#FBF1DC}
.final .lead{color:#E6D3C4}
.final .kick{color:#E8CF9C}
.final .cta-note{color:#D9C3B6}
.foot{padding:26px 0 30px;font-size:15px;color:var(--muted)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}

/* 手機底部浮動鈕 */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background:rgba(243,240,234,.97);transition:transform .25s}
.dock::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--edge)}
.dock .btn{width:100%;min-height:54px}
.dock.away{transform:translateY(115%)}
@media (min-width:900px){.dock{display:none}body{padding-bottom:0}}

.preview-tag{background:#FFF4D6;color:#5B4310;font-size:14px;text-align:center;padding:6px 12px;border-bottom:1px solid #E8D29A}

.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
.board.rv.in{transform:none}
@media (min-width:900px){.board.rv.in{transform:rotate(-1deg)}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* 數字一律等高(放檔尾:font 簡寫會把它重設) */
.tile .v,.vow .no,.step::before,.nda .num,.pair figcaption b{font-variant-numeric:lining-nums!important;font-feature-settings:"lnum" 1}