*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 "WD Sans","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif}
a{color:var(--acc)}
img{max-width:100%;height:auto}
.bar{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--bg);border-bottom:1px solid var(--line)}
.brand{font-weight:700;color:var(--fg);text-decoration:none}
.bar nav{display:flex;gap:18px;flex-wrap:wrap}
.bar nav a{color:var(--mut);text-decoration:none}
.bar nav a[aria-current]{color:var(--fg);border-bottom:2px solid var(--acc)}
@media (max-width:640px){.bar{justify-content:center;text-align:center}.bar nav{justify-content:center}}
.hero{padding:96px 20px 72px;max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.hero:has(.hero-img){grid-template-columns:1.1fr .9fr}
.hero h1{font-size:clamp(32px,6vw,56px);line-height:1.25;margin:0 0 16px}
.eyebrow{margin:0 0 12px;color:var(--acc);font-weight:700;letter-spacing:.12em;font-size:.9rem}
.lead{color:var(--mut);font-size:1.15rem;max-width:36em}
.hero-img img{display:block;width:100%;height:auto;border-radius:20px}
@media (max-width:760px){.hero,.hero:has(.hero-img){grid-template-columns:1fr;padding:64px 20px 48px}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;padding-top:0;padding-bottom:16px}
.stat{padding:20px;border-radius:16px;background:var(--card);border:1px solid var(--line);text-align:center}
.stat b{font-size:clamp(28px,5vw,44px);line-height:1.1;color:var(--acc)}
.stat .unit{margin-left:4px;color:var(--acc);font-weight:700}
.stat small{display:block;margin-top:6px;color:var(--mut)}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:700}
.faq details p{margin:10px 0 0;color:var(--mut)}
.cta-band{margin:24px auto 0;max-width:1000px;padding:48px 20px;text-align:center}
.cta-band h2{margin:0 0 12px}
/* 互動特效（site.js 依 特效.互動 啟動） */
.fx-spot{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle 260px at var(--x,50%) var(--y,40%),color-mix(in srgb,var(--acc) 18%,transparent),transparent 70%)}
.fx-tilt,.fx-magnet{transition:transform .18s ease-out;will-change:transform}
.bg .aurora-container{width:100%;height:100%}
/* 畫布類背景（Vanta／React 島）上面蓋一層底色薄紗，不管背景多亮，文字對比都夠 */
.bg:not(.bg-gradient)::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 42%,transparent);pointer-events:none}
.bg-gradient{overflow:hidden}
.bg-gradient i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.45;animation:drift 22s ease-in-out infinite alternate}
.bg-gradient i:nth-child(1){background:var(--acc);top:-20vmax;left:-15vmax}
.bg-gradient i:nth-child(2){background:color-mix(in srgb,var(--acc) 55%,#fff);bottom:-25vmax;right:-15vmax;animation-delay:-8s}
.bg-gradient i:nth-child(3){background:color-mix(in srgb,var(--acc) 30%,var(--bg));top:20vh;left:35vw;animation-delay:-14s}
@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.bg-gradient i{animation:none}}
.wrap{max-width:1000px;margin:0 auto;padding:48px 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px}
.card h2,.card h3{margin:0 0 8px;font-size:1.1rem}
.card p{margin:0;color:var(--mut)}
.btn{display:inline-block;padding:12px 24px;border-radius:999px;background:var(--acc);color:var(--bg);text-decoration:none;font-weight:700;margin:6px 8px 6px 0}
.btn.line{background:#06c755;color:#fff}
.contact{list-style:none;padding:0}
.contact li{padding:6px 0;border-bottom:1px solid var(--line)}
.line-box{margin-top:24px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.qr{border-radius:8px;background:#fff;padding:6px}
.bg{position:fixed;inset:0;z-index:-1}
.foot{padding:32px 20px;text-align:center;color:var(--mut);border-top:1px solid var(--line)}
/* 進場動畫：site.js 啟動後才加 .ready，JS 沒跑或失敗時內容照常顯示 */
.ready .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.ready .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ready .reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ── minimal：日式極簡（規則取自 company\hunglun2026-內部資料\BRAND.md）──
   細線分隔取代卡片陰影、扁平直角、標題靠左、細字重（內文 400、標題 500，不用 700 以上）、
   實心直角主按鈕＋底線次要連結、只有一個強調色（--acc）、大量留白。 */
.tpl-minimal{font-size:16px;line-height:1.85;letter-spacing:.02em;font-weight:400;-webkit-font-smoothing:antialiased}
.tpl-minimal h1,.tpl-minimal h2,.tpl-minimal h3,.tpl-minimal b,.tpl-minimal summary{font-weight:500}
.tpl-minimal a{color:var(--fg)}
.tpl-minimal .wrap{max-width:1080px;padding:56px 24px}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;z-index:20;background:var(--bg);padding:8px 12px;border:1px solid var(--fg)}

/* 圖示：Tabler 線條，跟著文字顏色，線寬調細 */
.ico{display:inline-flex;vertical-align:-.15em}
.ico svg{width:1.15em;height:1.15em;stroke-width:1.5}

/* 頁首：LOGO＋店名靠左，選單靠右；手機選單改成可左右滑的一列（不需要 JS） */
.tpl-minimal .bar{padding:14px 24px;gap:10px 32px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:saturate(1.2) blur(6px)}
.tpl-minimal .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--fg);font-weight:500;min-width:0}
.tpl-minimal .brand img{width:44px;height:44px;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.3}
.brand-text b{font-size:1.05rem;letter-spacing:.08em}
.brand-text small{font-size:.66rem;letter-spacing:.24em;color:var(--mut)}
.tpl-minimal .bar nav{gap:28px}
.tpl-minimal .bar nav a{color:var(--mut);font-size:.95rem;padding:4px 0;border-bottom:1px solid transparent}
.tpl-minimal .bar nav a:hover{color:var(--fg)}
.tpl-minimal .bar nav a[aria-current]{color:var(--fg);border-bottom:1px solid var(--acc)}
@media (max-width:860px){
  .tpl-minimal .bar{padding:10px 16px}
  .tpl-minimal .bar nav{width:100%;flex-wrap:nowrap;overflow-x:auto;gap:22px;padding-bottom:2px;scrollbar-width:none}
  .tpl-minimal .bar nav::-webkit-scrollbar{display:none}
  .tpl-minimal .bar nav a{white-space:nowrap}
  .brand-text small{display:none}
}

/* 首頁標語：靠左、留白、細字重的大字 */
.tpl-minimal .hero{display:grid;grid-template-columns:1fr;gap:48px;padding-top:112px;padding-bottom:88px;text-align:left;max-width:1080px}
.tpl-minimal .hero:has(.hero-img){grid-template-columns:1.1fr .9fr;align-items:end}
.tpl-minimal .hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1.36;letter-spacing:.04em;margin:0 0 24px}
.tpl-minimal .eyebrow{color:var(--acc);font-weight:500;font-size:.8rem;letter-spacing:.28em;margin:0 0 20px}
.tpl-minimal .lead{color:var(--mut);font-size:1.08rem;max-width:34em;margin:0}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin:40px 0 0}
.hero-img{margin:0}
.hero-img img{border-radius:0;display:block;width:100%}
figcaption{font-size:.75rem;color:var(--mut);margin-top:6px;letter-spacing:.1em}
@media (max-width:760px){.tpl-minimal .hero,.tpl-minimal .hero:has(.hero-img){grid-template-columns:1fr;padding-top:64px;padding-bottom:48px}}

/* 按鈕：實心直角主按鈕、外框次要按鈕、底線文字連結 */
.tpl-minimal .btn{border-radius:0;padding:14px 30px;font-weight:500;letter-spacing:.12em;background:var(--acc);color:#fff;margin:0;display:inline-flex;align-items:center;gap:10px;transition:background .2s}
.tpl-minimal .btn:hover{background:color-mix(in srgb,var(--acc) 82%,#000)}
.tpl-minimal .btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--fg)}
.text-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border-bottom:1px solid var(--fg);padding-bottom:2px;font-size:.95rem}
.text-link:hover{color:var(--acc);border-color:var(--acc)}

/* 區塊標題：左標題右連結，下方一條細線 */
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--fg);padding-bottom:16px;margin-bottom:8px}
.sec-head h2{margin:0;font-size:clamp(22px,2.6vw,28px);letter-spacing:.08em}
.page-head{padding-bottom:24px}
.page-head h1{font-size:clamp(30px,4.4vw,46px);line-height:1.36;letter-spacing:.06em;margin:0 0 16px}

/* 首頁：依客群看服務（兩欄細線列表） */
.groups{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));column-gap:48px}
.groups li{border-bottom:1px solid var(--line)}
.groups a{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:22px 0;text-decoration:none}
.groups .ico{grid-row:span 2;color:var(--acc);font-size:1.3rem;padding-top:2px}
.groups span{color:var(--mut);font-size:.92rem}
.groups a:hover b{color:var(--acc)}

/* 流程：大號數字＋細線 */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 40px}
.steps li{border-top:1px solid var(--line);padding:24px 0 8px}
.steps .num{display:block;font-size:2.2rem;line-height:1;color:var(--acc);font-weight:400;letter-spacing:.04em;margin-bottom:14px;font-variant-numeric:tabular-nums}
.steps b{display:block;font-size:1.1rem;margin-bottom:6px}
.steps p{margin:0;color:var(--mut);font-size:.95rem}
.steps-full{grid-template-columns:1fr}
.steps-full li{display:grid;grid-template-columns:96px 1fr;column-gap:24px}
.steps-full .num{grid-row:span 2;margin:0}
@media (max-width:560px){.steps-full li{grid-template-columns:56px 1fr}.steps-full .num{font-size:1.6rem}}

/* 文章列表 */
.post-list{list-style:none;margin:0;padding:0}
.post-list li{border-bottom:1px solid var(--line)}
.post-list a{display:grid;grid-template-columns:120px 1fr;gap:4px 24px;padding:22px 0;text-decoration:none}
.post-list time{grid-row:span 2;color:var(--mut);font-size:.85rem;font-variant-numeric:tabular-nums;padding-top:3px}
.post-list span{color:var(--mut);font-size:.92rem}
.post-list a:hover b{color:var(--acc)}
.post-list.compact a{grid-template-columns:1fr;padding:14px 0}
@media (max-width:560px){.post-list a{grid-template-columns:1fr}.post-list time{grid-row:auto}}

/* 服務頁：依客群分段，細線列表 */
.group h2{display:flex;align-items:center;gap:12px;font-size:1.4rem;letter-spacing:.08em;margin:0 0 8px;padding-bottom:14px;border-bottom:1px solid var(--fg)}
.group h2 .ico{color:var(--acc)}
.group{padding-top:24px;padding-bottom:24px}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;grid-template-columns:1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.rows li:has(figure){grid-template-columns:220px 1fr}
.rows figure{margin:0}
.rows img{display:block;width:100%;height:auto}
.rows h3{margin:0 0 6px;font-size:1.1rem}
.rows p{margin:0;color:var(--mut)}
@media (max-width:560px){.rows li:has(figure){grid-template-columns:1fr}}

/* 常見問題：無底色、細線、＋號 */
.tpl-minimal .faq details{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:20px 0;margin:0}
.tpl-minimal .faq summary{list-style:none;display:flex;justify-content:space-between;gap:16px;cursor:pointer;font-size:1.05rem}
.tpl-minimal .faq summary::-webkit-details-marker{display:none}
.tpl-minimal .faq summary::after{content:"+";color:var(--acc);font-weight:400;font-size:1.4rem;line-height:1}
.tpl-minimal .faq details[open] summary::after{content:"−"}
.tpl-minimal .faq details p{color:var(--mut);margin:12px 0 0;max-width:44em}

/* 文章內頁：窄欄好讀 */
.post{max-width:760px}
.crumbs{font-size:.85rem;color:var(--mut);display:flex;gap:10px;margin-bottom:28px}
.crumbs a{color:var(--mut)}
.post h1{font-size:clamp(28px,4vw,40px);line-height:1.4;letter-spacing:.04em;margin:0 0 12px}
.post .meta{color:var(--mut);font-size:.85rem;margin:0 0 24px}
.post .lead{font-size:1.05rem;border-left:2px solid var(--acc);padding-left:18px;margin-bottom:32px}
.post-img{margin:0 0 32px}
.post-img img{display:block;width:100%}
.post-body h2{font-size:1.35rem;letter-spacing:.06em;margin:48px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.post-body p,.post-body li{color:color-mix(in srgb,var(--fg) 88%,var(--bg))}
.post-body ul{padding-left:1.2em}
.post-body li{margin:6px 0}
.post-body .note{background:var(--card);border-left:2px solid var(--acc);padding:14px 18px;font-size:.95rem}
.post-cta{margin:56px 0 0;padding:28px 0;border-top:1px solid var(--fg);border-bottom:1px solid var(--fg);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.post-cta p{margin:0}
.related{margin-top:48px}
.related h2{font-size:1.1rem;letter-spacing:.1em}

/* 關於：窄欄 */
.prose{max-width:760px;padding-top:0}
.prose p{color:color-mix(in srgb,var(--fg) 88%,var(--bg))}

/* 聯絡 */
.tpl-minimal .contact{list-style:none;padding:0;margin:0;max-width:720px}
.tpl-minimal .contact li{display:grid;grid-template-columns:auto 6em 1fr;gap:14px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.tpl-minimal .contact .ico{color:var(--acc)}
.tpl-minimal .contact span{color:var(--mut);font-size:.9rem}
.tpl-minimal .contact em{font-style:normal}
@media (max-width:560px){.tpl-minimal .contact li{grid-template-columns:auto 1fr}.tpl-minimal .contact li>a,.tpl-minimal .contact li>em{grid-column:2}}
.map iframe{display:block;width:100%;height:380px;border:0;filter:grayscale(.35)}
.tpl-minimal .qr{border-radius:0}

/* 結尾行動區：靠左，細線框住 */
.tpl-minimal .cta-band{text-align:left;margin-top:40px}
/* 線畫在標題上，才會跟內容同寬（畫在 .wrap 上會多出左右內距） */
.tpl-minimal .cta-band h2{font-size:clamp(22px,3vw,32px);letter-spacing:.06em;margin:0 0 24px;padding-top:40px;border-top:1px solid var(--fg)}
.cta-contact{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin:0}
.about-teaser p{max-width:40em;color:var(--mut)}

/* 頁尾 */
.tpl-minimal .foot{text-align:left;padding:48px 24px 40px;font-size:.88rem}
.foot-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px 48px}
.foot-grid p{margin:4px 0}
.foot-name{color:var(--fg);font-weight:500;letter-spacing:.1em}
.foot-grid a{color:var(--mut);text-decoration:none}
.foot-grid a:hover{color:var(--fg)}
.foot-grid nav{display:flex;flex-wrap:wrap;gap:8px 20px;align-content:start}

/* 關於：設備清單（兩欄細線） */
.equip h2{font-size:1.2rem;letter-spacing:.08em;border-bottom:1px solid var(--fg);padding-bottom:12px;margin:0}
.equip-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));column-gap:32px}
.equip-list li{padding:12px 0;border-bottom:1px solid var(--line)}
.foot-ver{max-width:1080px;margin:28px auto 0;padding-top:16px;border-top:1px solid var(--line);color:var(--mut);font-size:.8rem;letter-spacing:.04em}
.notfound-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:28px 0}
.notfound-links a:not(.btn){display:inline-flex;align-items:center;min-height:44px;color:var(--fg)}
/* 觸控裝置：連結點擊範圍至少 44px（商用交付標準；2026-10-10 量到頁尾、麵包屑只有 20～25px）。滑鼠裝置版面不變 */
@media (pointer:coarse){
  .foot-grid a,.crumbs a,.meta .tag,main a[href^="tel:"],main a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:44px}
}

/* 服務頁的 LINE 官方帳號搜尋標示 */
.line-id{margin:14px 0 0}
.line-id a{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--fg);text-decoration:none;font-size:.95rem}
.line-id a:hover{border-color:#06c755}
.line-id b{font-weight:700;letter-spacing:.04em}
.line-id-ico{width:30px;height:30px;border-radius:50%;background:#06c755;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem}

/* ── print：數位印刷風（疊在 minimal 上面）第四版 ──
   照鴻綸官網的視覺系統（2026-10-10 Steve：「和鴻綸科技比起來很沒質感」）：
   白底、大量留白、細字主標、圓角照片卡＋柔和陰影、只有一個主色（新美 LOGO 的藍）。
   印刷感只留在細節：標題下的四色細線、樣本冊翻頁書。數值多數直接取自鴻綸的 style.css／landing.css */
.tpl-print{
  --bg:#fdfdfc;--bg-soft:#f6f7f9;--card:#fff;--line:rgba(0,0,0,.09);
  --text:#1a1a1a;--muted:#5c5c5c;--accent:#1d4b8f;--accent-deep:#16226b;--glow:rgba(29,75,143,.14);
  --p-navy:#16226b;--p-blue:#1e56a0;--p-violet:#4a1fa8;--p-teal:#2a8c8c;
  --p-c:#00a0e9;--p-m:#e4007f;--p-y:#ffe100;--p-k:#1a1a1a;--p-paper:#fbfaf6;--p-tint:#f6f7f9;
  --p-grad:radial-gradient(60% 90% at 0% 10%,color-mix(in srgb,var(--p-teal) 85%,transparent),transparent 60%),
           radial-gradient(55% 80% at 100% 0%,color-mix(in srgb,var(--p-teal) 70%,transparent),transparent 60%),
           radial-gradient(70% 90% at 55% 30%,color-mix(in srgb,var(--p-violet) 90%,transparent),transparent 65%),
           linear-gradient(115deg,var(--p-blue),var(--p-navy) 45%,var(--p-blue));
  --p-dots:radial-gradient(rgba(255,255,255,.16) 1.1px,transparent 1.5px);
  --p-cmyk:linear-gradient(90deg,var(--p-c) 0 25%,var(--p-m) 25% 50%,var(--p-y) 50% 75%,var(--p-k) 75%);
  background:var(--bg);color:var(--text);font-size:16px;line-height:1.75;text-wrap:pretty
}
.tpl-print :is(h1,h2,h3,summary,.l-hero-sub,.l-hint){text-wrap:balance}
.tpl-print h2,.tpl-print h3{font-weight:700;letter-spacing:.02em}
.tpl-print a{color:inherit}
.tpl-print .btn{display:inline-block;padding:14px 30px;border-radius:999px;font-weight:400;font-size:.92rem;letter-spacing:.05em;background:var(--accent);color:#fff;text-decoration:none}
.tpl-print .btn:hover{background:var(--accent-deep)}
.tpl-print :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nowrap{white-space:nowrap}
.img-note{margin:14px 0 0;font-size:.78rem;color:var(--muted);text-align:center}

/* 印刷細節：四色細線（標題、主視覺下方） */
.inkline{display:inline-flex;gap:0;margin:22px auto 0}
.inkline i{width:22px;height:3px}
.inkline i:nth-child(1){background:var(--p-c)}.inkline i:nth-child(2){background:var(--p-m)}.inkline i:nth-child(3){background:var(--p-y)}.inkline i:nth-child(4){background:var(--p-k)}

/* 圓角規則（品味指導：一頁只用一套）：卡片與容器 16px、卡片裡的照片 10px、按鈕與標籤膠囊形；書頁是紙，直角 */

/* ── 頁首（照鴻綸：白底半透明、細字選單、聯絡我們實心鈕；LOGO 大）── */
.tpl-print .bar{padding:14px 28px;gap:12px 24px;background:rgba(253,253,252,.92);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2) blur(8px);transition:padding .25s}
.tpl-print .brand{gap:14px}
.tpl-print .brand img{width:76px;height:76px;transition:width .25s,height .25s}
.tpl-print .brand-text b{font-size:1.6rem;font-weight:700;letter-spacing:.1em;color:var(--accent-deep)}
.tpl-print .brand-text small{font-size:.75rem;letter-spacing:.32em;margin-top:2px;color:var(--muted)}
.tpl-print .bar nav{gap:4px;align-items:center}
.tpl-print .bar nav a{color:var(--muted);padding:8px 10px;font-size:.95rem;font-weight:400;letter-spacing:.02em;border-bottom:0}
.tpl-print .bar nav a:hover,.tpl-print .bar nav a[aria-current]{color:var(--text)}
.tpl-print .bar nav a[aria-current]{font-weight:500}
.tpl-print .bar nav .nav-cta{margin-left:12px;padding:9px 22px;font-weight:400;color:#fff;background:var(--accent);border-radius:999px}
.tpl-print .bar nav .nav-cta:hover{color:#fff;background:var(--accent-deep)}
.is-scrolled .tpl-print .bar{padding-top:6px;padding-bottom:6px}
.is-scrolled .tpl-print .brand img{width:54px;height:54px}
@media (max-width:1600px) and (min-width:1101px){.tpl-print .brand img{width:64px;height:64px}}
.nav-toggle{display:none}
/* 手機與平板：漢堡鈕＋置中選單（Steve 規則）；js-nav 由 theme.js 加在 html 上，沒有 JS 時選單直接攤開 */
@media (max-width:1100px){
  .tpl-print .bar{padding:10px 16px;flex-wrap:nowrap}
  .tpl-print .brand img{width:54px;height:54px}
  .tpl-print .brand-text b{font-size:1.25rem}
  .tpl-print .brand-text small{display:block;font-size:.75rem}
  .js-nav .tpl-print .nav-toggle{display:grid;place-content:center;gap:6px;flex:none;width:46px;height:46px;margin-left:auto;border:1px solid var(--line);background:var(--card);border-radius:999px;cursor:pointer}
  .js-nav .tpl-print .nav-toggle span{display:block;width:20px;height:1.5px;background:var(--text);transition:transform .2s,opacity .2s}
  .js-nav .tpl-print .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .js-nav .tpl-print .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .js-nav .tpl-print .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .js-nav .tpl-print .bar nav{position:absolute;left:0;right:0;top:100%;width:auto;flex-direction:column;align-items:center;gap:0;padding:8px 16px 18px;
    background:var(--bg);border-bottom:1px solid var(--line);display:none;overflow:visible}
  .js-nav .tpl-print .bar nav.open{display:flex}
  .js-nav .tpl-print .bar nav a{font-size:1.05rem;padding:12px 0;text-align:center}
  .js-nav .tpl-print .bar nav .nav-cta{margin:10px 0 0;padding:11px 40px}
  html:not(.js-nav) .tpl-print .bar{flex-wrap:wrap;justify-content:center}
  html:not(.js-nav) .tpl-print .bar nav{flex-wrap:wrap;justify-content:center}
}

/* ── 主視覺（照鴻綸 l-hero--tour：置中標語、細字、向下滑動提示）── */
.l-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 24px 28px}
.l-eyebrow{letter-spacing:.3em;font-size:1.05rem;color:var(--muted);margin:0 0 22px}
.l-hero h1{font-size:clamp(1.9rem,4.6vw,3.2rem);font-weight:400;line-height:1.5;color:var(--text);margin:0;letter-spacing:.04em}
.l-hero-sub{margin:22px auto 0;color:var(--muted);font-size:clamp(1rem,2vw,1.12rem);max-width:640px;line-height:1.8}
.l-scroll-hint{margin:28px 0 0;color:var(--text);font-size:1.05rem;font-weight:600}
@media (prefers-reduced-motion:no-preference){.l-scroll-hint{animation:l-bob 1.8s ease-in-out infinite}}
@keyframes l-bob{50%{transform:translateY(6px)}}

/* ── 翻書巡覽（首頁第一屏）：對標 Stripe Press，書本身就是主視覺 ──
   深藍近黑的工作檯＋上方一圈柔光，書頁有紙紋與厚度，看起來像桌上真的一本書。
   書的寬度同時受畫面寬與高限制：跨頁寬＝頁高×2÷1.414，整本一定塞得進一個畫面 */
.flip-tour{position:relative;padding:32px 0 40px;color:#e8ecf6;
  background:radial-gradient(70% 60% at 50% 38%,#2a3570 0%,#141a3d 55%,#0b0f26 100%)}
.flip-tour::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.2px);background-size:6px 6px}
.flip-tour .ft-wrap{position:relative;width:min(1080px,92vw);max-width:none;margin:0 auto}  /* 蓋過樣本冊 .book-wrap 的 600px 上限 */
.flip-tour.ft-on{height:calc((var(--n,6) + 1) * 72vh);padding:0}
.ft-on .ft-sticky{position:sticky;top:var(--bar,0px);height:calc(100svh - var(--bar,0px));display:flex;align-items:center;justify-content:center;overflow:hidden}
.flip-tour.ft-on .ft-wrap{width:min(1080px,92vw,calc((100svh - var(--bar,90px) - 110px) * 1.414))}
@media (max-width:700px){.flip-tour.ft-on .ft-wrap{width:min(92vw,calc((100svh - var(--bar,70px) - 110px) / 1.414))}}
/* 書：大陰影落在檯面上 */
.ft-wrap .book.is-on{filter:drop-shadow(0 40px 50px rgba(0,0,0,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.ft-wrap .book-ui{color:#e8ecf6;margin-top:22px}
.ft-wrap .book-btn{border-color:rgba(255,255,255,.35);color:#fff;background:transparent}
.ft-wrap .book-btn:hover{background:rgba(255,255,255,.1)}
.ft-wrap .book-count{min-width:8em;font-weight:500;letter-spacing:.1em}
.ft-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.ft-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);transition:background .3s,transform .3s}
.ft-dot.active{background:#fff;transform:scale(1.3)}
.book-wrap:not(.is-on) .ft-dots{display:none}
/* 紙紋：極淡的纖維雜點，蓋在每一頁的文字頁上 */
.flip-tour .bp{background-color:#fbfaf5;
  background-image:radial-gradient(rgba(60,50,30,.035) 1px,transparent 1px),radial-gradient(rgba(60,50,30,.025) 1px,transparent 1px);
  background-size:3px 3px,5px 5px;background-position:0 0,1px 2px}
.flip-tour .bp-l{box-shadow:inset -18px 0 24px -14px rgba(0,0,0,.28)}
.flip-tour .bp-r{box-shadow:inset 18px 0 24px -14px rgba(0,0,0,.28)}
/* 第一頁：店名與標語 */
.ft-intro .bp-in{justify-content:center;padding:11cqw 10cqw;color:var(--text)}
.ft-eyebrow{margin:0;font-size:3.4cqw;letter-spacing:.3em;color:var(--muted)}
.ft-intro h1{margin:5cqw 0 0;font-size:7cqw;font-weight:400;line-height:1.45;letter-spacing:.03em;color:var(--accent-deep)}
.ft-intro .inkline{margin:6cqw 0 0}
.ft-intro .inkline i{width:6cqw;height:.7cqw}
.ft-sub{margin:6cqw 0 0;font-size:4cqw;line-height:1.8;color:#4a5068}
.ft-cta{margin:7cqw 0 0}
.ft-cta .btn{font-size:3.8cqw;padding:3.2cqw 6cqw}
.ft-hint{margin:auto 0 0;padding-top:6cqw;font-size:max(12px,3.2cqw);color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.ft-hint{animation:l-bob 1.8s ease-in-out infinite}}
/* 照片頁：整頁照片，靠書背那側加陰影 */
.ft-photo .bp-in{padding:0}
.ft-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ft-photo .bp-in::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(0,0,0,.3),rgba(0,0,0,0) 9%);pointer-events:none}
.ft-photo-r .bp-in::after{background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(0,0,0,0) 9%)}
.ft-photo .ai-note{position:absolute;left:4cqw;bottom:3cqw;z-index:2;font-size:2.8cqw;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
/* 主題頁 */
.ft-text .bp-in{justify-content:center;padding:12cqw 11cqw}
.ft-text h2{font-size:10cqw;margin:4cqw 0 0;color:var(--accent-deep)}
.ft-text .inkline{margin:5cqw 0 0}
.ft-text .inkline i{width:6cqw;height:.7cqw}
.ft-text p{margin:6cqw 0 0;font-size:4.6cqw;line-height:1.8;color:#4a5068}
.ft-text .bp-link{margin-top:8cqw;font-size:4.2cqw}
@media (prefers-reduced-motion:reduce){.flip-tour.ft-on{height:auto}.ft-on .ft-sticky{position:static;height:auto}}

/* ── 區塊共用（照鴻綸 l-services：置中標題、最寬 1200）── */
.l-section{padding:56px 6vw 8px;max-width:1200px;margin:0 auto}
.l-title{text-align:center;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.35;margin:0}
.l-title::after{content:"";display:block;width:88px;height:3px;margin:16px auto 0;background:var(--p-cmyk);clip-path:inset(0 calc((1 - var(--ink,1)) * 100%) 0 0)}  /* --ink：四色套印動畫露出多少（theme.js，GSAP），預設全露 */
.l-title.left{text-align:left}
.l-title.left::after{margin-left:0}
.l-hint{color:var(--muted);font-size:.95rem;margin:14px auto 0;text-align:center;max-width:40em}
.l-hint.left{text-align:left;margin-left:0}
.l-more{text-align:center;margin:28px 0 0}
.l-more.left{text-align:left}
.l-more a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.l-more a::after{content:" →"}
@media (max-width:640px){.l-section{padding:44px 20px 8px}.l-hero{padding:44px 20px 20px}}

/* ── 承諾（五個圖示，安靜的一排）── */
.l-trust{padding:40px 6vw 0;max-width:1200px;margin:0 auto}
.trust-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.trust-list li{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.trust-ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--accent);font-size:1.5rem;margin-bottom:6px;background:var(--card)}
.trust-list b{font-size:1.02rem;font-weight:500}
.trust-list li>span:last-child{font-size:.86rem;color:var(--muted)}
@media (max-width:900px){.trust-list{grid-template-columns:repeat(2,1fr);row-gap:28px}}

/* ── 服務：依客群分類展開（照鴻綸 l-svc-cats／l-service-card）── */
.l-svc-cats{margin-top:28px;display:grid;gap:14px;text-align:left}
.l-svc-cat{background:var(--card);border:1px solid var(--line);border-radius:16px;transition:border-color .3s,box-shadow .3s}
.l-svc-cat[open]{border-color:var(--accent);box-shadow:0 20px 40px -28px var(--glow)}
.l-svc-cat>summary{cursor:pointer;padding:20px 24px;list-style:none;display:grid;grid-template-columns:auto 1fr auto auto;gap:2px 16px;align-items:center}
.l-svc-cat>summary::-webkit-details-marker{display:none}
.l-cat-ico{grid-row:1/span 2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bg-soft);color:var(--accent);font-size:1.25rem}
.l-cat-t{grid-column:2;grid-row:1;font-size:1.15rem;font-weight:500;transition:color .3s}
.l-cat-d{grid-column:2;grid-row:2;color:var(--muted);font-size:.88rem}
.l-cat-n{grid-column:3;grid-row:1/span 2;justify-self:end;font-size:.75rem;color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:4px 11px;white-space:nowrap}
.l-svc-cat>summary::after{content:"▾";grid-column:4;grid-row:1/span 2;color:var(--muted);font-size:.9rem;transition:transform .3s,color .3s}
.l-svc-cat[open]>summary::after{transform:rotate(180deg);color:var(--accent)}
.l-svc-cat>summary:hover .l-cat-t,.l-svc-cat[open]>summary .l-cat-t{color:var(--accent)}
.l-services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;padding:4px 24px 26px}
.l-service-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 16px 22px;text-decoration:none;color:inherit;transition:transform .3s,box-shadow .3s,border-color .3s}
.l-service-card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 20px 40px -18px var(--glow)}
.svc-photo{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;margin-bottom:6px}
.l-service-card h3{font-size:1.15rem;margin:12px 8px 6px}
.l-service-card:hover h3{color:var(--accent)}
.l-service-card p{margin:0 8px;color:var(--muted);font-size:.92rem;line-height:1.7}
@media (max-width:640px){
  .l-svc-cat>summary{padding:16px;gap:2px 12px}
  .l-cat-d{display:none}
  .l-services-grid{grid-template-columns:1fr 1fr;gap:12px;padding:0 12px 16px}
  .l-service-card{padding:10px 10px 14px;border-radius:16px}
  .svc-photo{border-radius:8px}
  .l-service-card h3{font-size:.98rem;margin:8px 4px 4px}
  .l-service-card p{font-size:.8rem;line-height:1.55;margin:0 4px}
}

/* ── 樣本冊區：淺灰底、書置中 ── */
.l-book{max-width:none;background:var(--bg-soft);margin-top:48px;padding-bottom:56px}
.l-book .book-wrap{max-width:820px;margin:36px auto 0;justify-self:auto}
.l-book .book.is-on{filter:drop-shadow(0 30px 40px rgba(20,30,60,.22))}
.l-book .book-ui{color:var(--text)}
.l-book .book-btn{border-color:var(--line);color:var(--text);background:var(--card)}
.l-book .book-btn:hover{background:var(--bg-soft)}

/* ── 我們努力做到的事：左邊標題＋一句小字引用，右邊三件事用細線分隔（不用三張一樣的卡片） ── */
.l-voice{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.voice-q{margin:24px 0 0;padding-left:16px;border-left:2px solid var(--line)}
.voice-q p{margin:0;font-size:1.05rem;color:var(--text)}
.voice-q p::before{content:"「"}.voice-q p::after{content:"」"}
.voice-q cite{display:block;margin-top:4px;font-style:normal;color:var(--muted);font-size:.86rem}
.why-list{list-style:none;margin:0;padding:0}
.why-list li{padding:20px 0;border-top:1px solid var(--line)}
.why-list li:last-child{border-bottom:1px solid var(--line)}
.why-list b{display:block;font-size:1.12rem;font-weight:500;margin-bottom:4px;color:var(--accent-deep)}
.why-list p{margin:0;color:var(--muted);font-size:.95rem}
@media (max-width:820px){.l-voice{grid-template-columns:1fr;gap:20px}}

/* ── 設備：左照片、右清單 ── */
.equip-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.equip-photo{position:relative;margin:0;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.35)}
.equip-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.equip-photo figcaption{position:absolute;left:14px;bottom:10px;margin:0;color:#fff;font-size:12px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.equip-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.equip-list li{padding:8px 16px;border:1px solid var(--line);border-radius:999px;font-size:.92rem;background:var(--card)}
@media (max-width:860px){.equip-grid{grid-template-columns:1fr;gap:28px}}

/* ── 下單流程：時間軸（真的是先後順序，才用數字）── */
.flow{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.flow li{position:relative;padding-top:64px}
.flow li::before{content:"";position:absolute;left:58px;right:-22px;top:24px;height:1px;background:var(--line)}
.flow li:last-child::before{display:none}
.flow .num{position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:1.2rem;font-weight:500;color:var(--accent);border:1px solid var(--accent);background:var(--card)}
.flow b{display:block;font-size:1.1rem;font-weight:500;margin-bottom:6px}
.flow p{margin:0;color:var(--muted);font-size:.92rem}
@media (max-width:860px){.flow{grid-template-columns:1fr 1fr}.flow li::before{display:none}}
@media (max-width:520px){.flow{grid-template-columns:1fr}}

/* ── 知識文章：兩欄清單（分類標籤＋標題＋摘要），跟服務的照片卡做出區隔 ── */
.kb-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
.kb-list a{display:grid;gap:6px;padding:20px 0;border-top:1px solid var(--line);text-decoration:none}
.kb-list a:hover b{color:var(--accent)}
.kb-list b{font-size:1.04rem;font-weight:500;line-height:1.55}
.kb-list a>span:last-child{color:var(--muted);font-size:.88rem}
.tag{display:inline-block;justify-self:start;align-self:flex-start;font-size:.75rem;letter-spacing:.08em;padding:2px 11px;border:1px solid var(--line);border-radius:999px;color:var(--accent);text-decoration:none}
@media (max-width:700px){.kb-list{grid-template-columns:1fr}}

/* ── 常見問題＋到店 ── */
.l-faq-visit{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.l-faq-visit .faq details{padding:18px 0}
.visit .map{margin:24px 0 12px;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.visit .map iframe{display:block;width:100%;height:280px;border:0}
.tpl-print .visit .contact li{grid-template-columns:auto 5.5em 1fr;padding:12px 0}
.visit-note{color:var(--muted);margin:14px 0 0;font-size:.92rem}
.l-faq-visit .faq{margin-top:0}
.l-faq-visit .faq h2{margin-bottom:16px}
@media (max-width:900px){.l-faq-visit{grid-template-columns:1fr}}

/* ── 了解更多（照鴻綸 l-cta）── */
.l-cta{text-align:center;padding:64px 6vw 48px}
.l-cta h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;line-height:1.3;margin:0 0 22px}
.l-cta p{margin:0}
.l-cta-links{margin-top:22px!important;color:var(--muted);font-size:.92rem}
.l-cta-links a{color:var(--accent);text-decoration:none;margin:0 6px}

/* ── 右下角浮動聯絡鈕（照鴻綸 contact-fab）── */
.contact-fab{position:fixed;right:20px;bottom:24px;z-index:60;display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:30px;padding:8px 12px;box-shadow:0 12px 30px -10px rgba(0,0,0,.25)}
.contact-fab a{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;transition:transform .2s,opacity .2s;font-size:1.15rem}
.contact-fab a:hover{transform:scale(1.08);opacity:.88}
.contact-fab a.fab-line{background:#06c755}
.contact-fab a.fab-light{background:#fff;color:var(--accent);border:1px solid var(--line)}
@media (max-width:640px){.contact-fab{right:12px;bottom:14px;padding:6px 10px;gap:8px}.contact-fab a{width:36px;height:36px}}

/* 頁尾（照鴻綸：細線、淡字） */
.tpl-print .foot{border-top:1px solid var(--line);background:var(--bg);color:var(--muted);padding:48px 24px 96px}

/* 進場：照鴻綸 l-reveal（淡入＋往上 48px，依序延遲）；沿用共用的 .reveal／.in，不另寫一套 */
.ready .tpl-print .reveal{opacity:0;transform:translateY(48px);transition:opacity .7s ease,transform .7s ease;transition-delay:calc(var(--delay,0) * 90ms)}
.ready .tpl-print .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ready .tpl-print .reveal{opacity:1;transform:none;transition:none}}

/* ── 印刷樣本冊（StPageFlip）──
   頁面比例照 A 系列紙 1:1.414；頁內字級用 cqw（頁寬的百分比），書放大縮小字跟著縮放。
   沒有 JS：一排可以左右滑的頁面 */
.book-wrap{position:relative;width:100%;max-width:600px;justify-self:end}
.book{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.bp{position:relative;flex:none;width:260px;aspect-ratio:1/1.414;scroll-snap-align:start;container-type:size;background:var(--p-paper);color:#1e2440;overflow:hidden}
.book.is-on{display:block;overflow:visible;padding:0;filter:drop-shadow(0 30px 34px rgba(8,12,50,.45))}
.book.is-on .bp{width:auto;aspect-ratio:auto}
.bp-in{position:absolute;inset:0;padding:9cqw 9cqw 8cqw;display:flex;flex-direction:column;font-size:4.4cqw;line-height:1.6}
/* 紙張：靠書背那邊暗一點，像真的書頁 */
.bp-l{background:linear-gradient(270deg,rgba(0,0,0,.12),rgba(0,0,0,0) 7%),var(--p-paper)}
.bp-r{background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,0) 7%),var(--p-paper)}
.bp-cover,.bp-back{background:var(--p-grad);color:#fff}
.bp-cover .bp-in{align-items:center;justify-content:center;text-align:center;gap:3cqw;
  background-image:var(--p-dots);background-size:3.4cqw 3.4cqw}
.bp-cover img{width:42cqw;height:auto;border-radius:50%;box-shadow:0 2cqw 5cqw rgba(0,0,0,.3)}
.cover-t{margin:4cqw 0 0;font-size:10.5cqw;font-weight:700;letter-spacing:.12em;line-height:1.2}
.cover-s{margin:0;font-size:5cqw;letter-spacing:.2em}
.cover-hint{position:absolute;bottom:6cqw;right:7cqw;margin:0;font-size:3.6cqw;opacity:.8}
.bp-back .bp-in{justify-content:flex-end;gap:1cqw;font-size:4.4cqw}
.bp-back p{margin:0}
.bp-back .cover-s{font-size:6cqw;font-weight:700;margin-bottom:3cqw}
.back-addr{opacity:.85}
.bp h2{font-size:8cqw;line-height:1.3;margin:0 0 4cqw;letter-spacing:.04em;color:var(--p-navy)}
.bp-toc ol{list-style:none;margin:2cqw 0 0;padding:0;display:grid;gap:3.4cqw}
.bp-toc li{display:flex;align-items:baseline;gap:2cqw}
.bp-toc li i{flex:1;border-bottom:.35cqw dotted color-mix(in srgb,#1e2440 45%,transparent)}
.bp-toc em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--p-blue)}
.bp-foot{margin-top:auto;font-size:3.4cqw;color:#6a7088}
.intro-num{margin:auto 0 0;font-size:34cqw;line-height:1;font-weight:700;color:transparent;-webkit-text-stroke:.5cqw var(--p-navy);
  text-shadow:-1.2cqw 0 color-mix(in srgb,var(--p-c) 55%,transparent),1.2cqw .6cqw color-mix(in srgb,var(--p-m) 45%,transparent)}
.intro-num small{font-size:9cqw;-webkit-text-stroke:0;color:var(--p-navy);margin-left:2cqw;text-shadow:none}
.bp-intro h2{margin-top:4cqw}
.bp-intro p:last-child{margin:0;color:#4a5068}
.bp-kicker{margin:0 0 3cqw;font-size:3.6cqw;letter-spacing:.2em;color:var(--p-m)}
.bp-desc p{margin:0;color:#4a5068}
.bp-spec{margin:auto 0 0;display:grid;gap:1.6cqw;border-top:.35cqw solid var(--p-navy);padding-top:3.4cqw;font-size:3.8cqw}
.bp-spec div{display:grid;grid-template-columns:16cqw 1fr;gap:2cqw}
.bp-spec dt{color:#6a7088}
.bp-spec dd{margin:0}
.bp-link{margin-top:4cqw;align-self:flex-start;color:var(--p-blue);font-size:4cqw;border-bottom:.35cqw solid currentColor;text-decoration:none}
.book-ui{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px;color:#fff;font-size:.9rem;letter-spacing:.08em}
.book-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center}
.book-btn:hover{background:rgba(255,255,255,.12)}
.book-btn[data-book="prev"] .ico{transform:scaleX(-1)}
.book-btn:disabled{opacity:.35;cursor:default}
.book-count{min-width:7em;text-align:center;font-variant-numeric:tabular-nums}
.book-wrap:not(.is-on) .book-ui{display:none}

/* 縮小印刷品（右頁）：下方一行說明 */
.bp-mock .bp-in{justify-content:center;align-items:center;padding:8cqw}
.mk{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5cqw}
.mk-cap{margin:0;font-size:3.6cqw;color:#6a7088;text-align:center}
/* 獎狀 */
.cert{position:relative;width:86cqw;aspect-ratio:1/1.3;background:#fffdf5;padding:9cqw 8cqw;text-align:center;
  border:1.6cqw solid #b8913a;outline:.5cqw solid #b8913a;outline-offset:-3.6cqw;box-shadow:0 2cqw 5cqw rgba(30,30,60,.18);
  display:flex;flex-direction:column;justify-content:center;gap:1.6cqw;font-size:3.6cqw;color:#3a3020}
.cert p{margin:0}
.cert-t{font-size:10cqw;font-weight:700;letter-spacing:.3em;color:#8a2a1e;margin-bottom:3cqw!important}
.cert-name{font-size:6cqw;font-weight:700;border-bottom:.3cqw solid #b8913a;align-self:center;padding:0 4cqw}
.cert-rank{font-size:7cqw;font-weight:700;color:#8a2a1e}
.cert-date{margin-top:4cqw!important;font-size:3.2cqw}
.cert-seal{position:absolute;right:11cqw;bottom:9cqw;width:13cqw;height:13cqw;border:.8cqw solid #c0392b;background:repeating-linear-gradient(0deg,rgba(192,57,43,.35) 0 .8cqw,transparent .8cqw 1.6cqw);transform:rotate(-6deg)}
/* 名片 */
.mk-card{gap:4cqw}
.card{width:78cqw;aspect-ratio:9/5.4;padding:5cqw 6cqw;box-shadow:0 1.6cqw 4cqw rgba(30,30,60,.22);display:flex;flex-direction:column;justify-content:center;font-size:3.2cqw;position:relative}
.card-b{background:var(--p-grad);color:#fff;align-items:center;text-align:center;transform:rotate(-4deg) translateX(-4cqw)}
.card-b b{font-size:5.6cqw;letter-spacing:.12em}
.card-b small{letter-spacing:.24em;opacity:.8}
.card-logo{width:11cqw;height:11cqw;border:.6cqw solid #fff;border-radius:50%;margin-bottom:2cqw}
.card-f{background:#fff;color:#1e2440;transform:rotate(3deg) translateX(4cqw);margin-top:-6cqw}
.card-f b{font-size:6cqw}
.card-f small{color:#6a7088;margin-bottom:2cqw}
.card-f i{position:absolute;left:0;top:0;bottom:0;width:2cqw;background:linear-gradient(var(--p-c) 0 25%,var(--p-m) 25% 50%,var(--p-y) 50% 75%,var(--p-k) 75%)}
/* 考卷 */
.exam{width:86cqw;aspect-ratio:1/1.3;background:#fff;padding:6cqw;box-shadow:0 2cqw 5cqw rgba(30,30,60,.18);font-size:3cqw;color:#222;display:flex;flex-direction:column;gap:2.2cqw}
.exam p{margin:0}
.exam-h{display:flex;flex-direction:column;align-items:center;gap:1cqw;border-bottom:.4cqw solid #222;padding-bottom:2.4cqw}
.exam-h b{font-size:4.6cqw}
.exam-q{font-weight:700;margin-top:1.4cqw!important}
.exam-row{display:flex;align-items:center;gap:1.6cqw}
.exam-row i{flex:1;height:.5cqw;background:#9aa0ad}
.exam-row i.s{flex:.5}
.exam-row u{flex:.6;border-bottom:.3cqw solid #222;height:2.6cqw}
.opts{white-space:nowrap;color:#555}
/* 請帖 */
.invite{position:relative;width:86cqw;aspect-ratio:1/1.05}
.inv-env{position:absolute;left:0;bottom:0;width:80cqw;height:54cqw;background:#f3e3c3;box-shadow:0 2cqw 5cqw rgba(30,30,60,.2);
  clip-path:polygon(0 0,50% 46%,100% 0,100% 100%,0 100%)}
.inv-card{position:absolute;right:0;top:0;width:58cqw;aspect-ratio:1/1.35;background:#b3262b;color:#f6e3b0;padding:7cqw 5cqw;text-align:center;
  border:.6cqw solid #e2c06e;outline:.3cqw solid #e2c06e;outline-offset:-2.6cqw;box-shadow:0 2cqw 5cqw rgba(60,10,10,.3);transform:rotate(5deg);
  display:flex;flex-direction:column;justify-content:center;gap:3cqw;font-size:3.4cqw}
.inv-card p{margin:0}
.inv-t{font-size:7cqw;font-weight:700;letter-spacing:.2em}
/* 海報尺寸：每小一號是上一號的 70.7% */
.poster{width:84cqw;aspect-ratio:1/1.414}
.pa{position:relative;width:100%;height:100%;border:.5cqw solid var(--p-navy);box-sizing:border-box}
.pa>span{position:absolute;left:2cqw;top:1.4cqw;font-size:4cqw;font-weight:700;color:var(--p-navy)}
.pa>.pa{position:absolute;right:0;bottom:0;width:70.7%;height:70.7%;border-width:.5cqw 0 0 .5cqw}
.a0{background:color-mix(in srgb,var(--p-c) 14%,#fff)}.a1{background:color-mix(in srgb,var(--p-m) 12%,#fff)}
.a2{background:color-mix(in srgb,var(--p-y) 28%,#fff)}.a3{background:color-mix(in srgb,var(--p-blue) 14%,#fff)}.a4{background:#fff}
/* 裝訂 */
.booklet{display:grid;gap:6cqw;width:80cqw}
.bk{display:flex;align-items:center;gap:5cqw}
.bk span{flex:none;width:36cqw;aspect-ratio:1.414/1;background:#fff;box-shadow:0 1.4cqw 3cqw rgba(30,30,60,.2);position:relative}
.bk b{font-size:4.8cqw;color:var(--p-navy)}
.bk-saddle span{background:linear-gradient(90deg,#fff 49%,#e4e4e4 50%,#fff 51%)}
.bk-saddle span::after{content:"";position:absolute;left:50%;top:22%;bottom:22%;border-left:.5cqw dashed #888}
.bk-perfect span{border-left:3.4cqw solid var(--p-navy)}
.bk-coil span{background-image:radial-gradient(circle at 2.4cqw 50%,#555 0 1cqw,transparent 1.1cqw);background-size:100% 4cqw;background-color:#fff}
/* 樣張 */
.proof{display:grid;grid-template-columns:repeat(4,1fr);width:70cqw;height:20cqw}
.proof .c{background:var(--p-c)}.proof .m{background:var(--p-m)}.proof .y{background:var(--p-y)}.proof .k{background:var(--p-k)}


/* ── 內頁 ── */
.tpl-print .page-head h1::after{content:"";display:block;width:120px;height:5px;margin-top:18px;background:var(--p-cmyk)}
.tpl-print .page-head+.wrap,.tpl-print .page-head+.topic-nav{padding-top:8px}
.tpl-print .group+.cta-band{padding-top:12px}
.tpl-print .cta-band{margin-top:0}
.tpl-print .cta-band h2{padding-top:32px}
.tpl-print .groups .ico,.tpl-print .group h2 .ico{color:var(--p-blue)}
.topic-nav{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:8px}
.topic-nav a{padding:6px 14px;border:1px solid var(--line);text-decoration:none;font-size:.92rem}
.topic-nav a span{color:var(--mut);margin-left:4px;font-variant-numeric:tabular-nums}
.topic-nav a:hover{border-color:var(--p-blue);color:var(--p-blue)}
.tpl-print .topic{padding-top:32px;padding-bottom:16px;scroll-margin-top:110px}
.post-faq{margin-top:48px}
.post-faq h2{font-size:1.35rem;margin:0 0 4px}
.fact-card{margin:48px 0 0;padding:24px 26px;background:var(--bg-soft);border-left:3px solid var(--accent);border-radius:0 14px 14px 0}
.fact-name{font-weight:700;margin:0 0 10px;letter-spacing:.08em}
.fact-card dl{margin:0;display:grid;gap:6px}
.fact-card dl div{display:grid;grid-template-columns:5.5em 1fr;gap:8px}
.fact-card dt{color:var(--mut);font-size:.9rem}
.fact-card dd{margin:0}
.meta .tag{margin-right:4px}


/* 觸控裝置：點擊範圍至少 44px。底線連結用上方內距撐高，底線才不會離字太遠 */
@media (pointer:coarse){
  .l-more a{display:inline-block;padding-top:17px}
  .l-cta-links a{display:inline-flex;align-items:center;min-height:44px}
  .contact-fab a{width:44px;height:44px}
}
/* 2026-10-10 與 GeminiA 討論五輪定案（記錄在 mybus\xmprintbase\討論紀錄\2026-10-10\）：
   ① 書頭帶：固定頁首最上緣 2px 靜態招牌漸層（主色藍→紫→青綠，取自招牌），像精裝書的書頭帶，不動
   ② 標題四色線改成印刷控制條：四段各 20.5px、中間留 2px 白縫，黃色 #FFE100 對白底只有 1.2:1，
      靠白縫讓眼睛補出「這裡有一格黃」，不改色（改成金色就不是 CMYK 了）；steps(4) 每格剛好露出一色＋白縫 */
.tpl-print .bar::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--p-blue),var(--p-violet) 55%,var(--p-teal))}
.l-title::after{background:linear-gradient(90deg,
  var(--p-c) 0 20.5px,transparent 20.5px 22.5px,var(--p-m) 22.5px 43px,transparent 43px 45px,
  var(--p-y) 45px 65.5px,transparent 65.5px 67.5px,var(--p-k) 67.5px 88px)}

/* CIS 第 13 節統一（0.11.0）：長文內文用墨黑，不再跟底色混出藍灰；頁尾店名與 404 連結用品牌深藍 */
.tpl-print :is(.post-body p,.post-body li,.prose p){color:var(--text)}
.tpl-print .foot-name,.tpl-print .notfound-links a:not(.btn){color:var(--accent-deep)}

@font-face{font-family:"WD Sans";src:url("../fonts/site-sans.woff2?v=e44d7c34") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}