/* /assets/style.v2.css */
/* ============================================================
銘望顧問所 · v8 · 誠信 / 精品 / 判斷
墨黑 × 香檳金 · Noto Serif TC 標題 · Noto Sans TC 內文
============================================================ */
:root{
--ink:#171410;
--panel:#1F1B15;
--panel2:#26211A;
--gold:#c9a96a;
--gold-soft:rgba(201,169,106,.16);
--line:rgba(201,169,106,.24);
--bone:#ece7db;
--dim:#a09a8d;
--danger:#b46a5a;
--maxw:1080px;
--serif:"Noto Serif TC","Songti TC",serif;
--sans:"Noto Sans TC","PingFang TC",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--ink);
color:var(--bone);
font-family:var(--sans);
font-size:16px;
line-height:1.85;
letter-spacing:.02em;
-webkit-font-smoothing:antialiased;
-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;-moz-user-select:text;user-select:text}
img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
::selection{background:var(--gold);color:var(--ink)}
@media print{
body{display:none !important}
}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
img{max-width:100%}
/* ---------- 導覽 ---------- */
.nav{
position:sticky;top:0;z-index:50;
backdrop-filter:blur(10px);
background:rgba(23,20,16,.86);
border-bottom:1px solid var(--line);
}
.nav-inner{
max-width:var(--maxw);margin:0 auto;padding:14px 20px;
display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.brand{font-family:var(--serif);font-weight:900;font-size:17px;color:var(--bone);letter-spacing:.06em}
.brand small{display:block;font-family:var(--sans);font-weight:400;font-size:9px;letter-spacing:.42em;color:var(--gold);margin-top:2px}
.brand:hover{text-decoration:none}
.nav-links{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto;font-size:13.5px}
.nav-links a{color:var(--dim);letter-spacing:.05em}
.nav-links a:hover{color:var(--gold);text-decoration:none}
.nav-links a.on{color:var(--bone);border-bottom:1px solid var(--gold);padding-bottom:2px}
/* ---------- 版心 / Hero ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.hero{position:relative;padding:96px 0 72px;border-bottom:1px solid var(--line)}
.kicker{
font-size:12px;letter-spacing:.9em;color:var(--gold);
text-transform:uppercase;margin-bottom:26px;font-weight:500;
}
.hero h1{
font-family:var(--serif);font-weight:900;
font-size:clamp(30px,5vw,52px);line-height:1.35;letter-spacing:.03em;
}
.hero .lead{margin-top:28px;max-width:760px;color:var(--dim);font-size:16.5px}
.hero .lead strong{color:var(--bone);font-weight:500}
.badge-line{
display:inline-block;margin-top:34px;padding:10px 18px;
border:1px solid var(--line);color:var(--gold);
font-size:13px;letter-spacing:.22em;background:var(--gold-soft);
}
.corner-mark{
position:absolute;top:34px;right:0;
font-family:var(--serif);font-weight:900;font-size:20px;
letter-spacing:.28em;color:var(--gold);
border:1px solid var(--line);padding:8px 14px;background:rgba(201,169,106,.08);
}
/* ---------- 區塊 ---------- */
.section{padding:72px 0;border-bottom:1px solid var(--line)}
.eyebrow{font-size:11.5px;letter-spacing:.5em;color:var(--gold);margin-bottom:14px}
.section h2{
font-family:var(--serif);font-weight:900;font-size:clamp(22px,3vw,32px);
letter-spacing:.04em;margin-bottom:18px;
}
.section .sub{color:var(--dim);max-width:720px}
.grid{display:grid;gap:22px;margin-top:38px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.grid.c3,.grid.c2{grid-template-columns:1fr}}
.card{
background:var(--panel);border:1px solid var(--line);
padding:32px 28px;position:relative;
transition:transform .25s ease,border-color .25s ease;
}
.card:hover{transform:translateY(-3px);border-color:var(--gold)}
.card .tag{font-size:10.5px;letter-spacing:.3em;color:var(--gold);margin-bottom:16px}
.card h3{font-family:var(--serif);font-weight:700;font-size:20px;margin-bottom:14px;letter-spacing:.04em}
.card p{color:var(--dim);font-size:14.5px}
.card .price{margin-top:20px;font-family:var(--serif);font-size:19px;color:var(--bone);letter-spacing:.05em}
.card .go{display:inline-block;margin-top:18px;font-size:14px}
ul.list{list-style:none;margin-top:22px}
ul.list li{
padding:12px 0 12px 26px;position:relative;
border-bottom:1px dashed rgba(201,169,106,.15);color:var(--dim);font-size:15px;
}
ul.list li::before{content:"◆";position:absolute;left:0;top:12px;color:var(--gold);font-size:10px}
ul.list li strong{color:var(--bone);font-weight:500}
/* ---------- 資訊表 ---------- */
.spec{margin-top:34px;border:1px solid var(--line)}
.spec .row{display:grid;grid-template-columns:150px 1fr;border-bottom:1px solid var(--line)}
.spec .row:last-child{border-bottom:none}
.spec .k{padding:16px 18px;background:var(--gold-soft);color:var(--gold);font-size:13.5px;letter-spacing:.12em;border-right:1px solid var(--line)}
.spec .v{padding:16px 18px;color:var(--dim);font-size:14.5px}
.spec .v strong{color:var(--bone);font-weight:500}
@media(max-width:640px){.spec .row{grid-template-columns:1fr}.spec .k{border-right:none;border-bottom:1px dashed var(--line)}}
/* ---------- CTA ---------- */
.cta{
display:inline-block;margin-top:36px;padding:16px 34px;
border:1px solid var(--gold);color:var(--gold);
font-size:15px;letter-spacing:.14em;
background:linear-gradient(120deg,rgba(201,169,106,.12),transparent);
transition:background .25s,color .25s;
}
.cta:hover{background:var(--gold);color:var(--ink);text-decoration:none}
.note{margin-top:26px;color:var(--dim);font-size:13.5px;line-height:2}
/* ---------- 表單 ---------- */
form.mw{margin-top:36px;max-width:760px}
form.mw fieldset{border:1px solid var(--line);padding:28px 24px;margin-bottom:28px}
form.mw legend{font-family:var(--serif);font-weight:700;color:var(--gold);padding:0 12px;letter-spacing:.14em;font-size:15px}
form.mw label{display:block;margin:18px 0 8px;font-size:14px;color:var(--bone);letter-spacing:.05em}
form.mw label .req{color:var(--gold)}
form.mw small{color:var(--dim);font-size:12.5px;display:block;margin-top:4px}
form.mw input[type=text],form.mw input[type=email],form.mw input[type=url],
form.mw select,form.mw textarea{
width:100%;padding:12px 14px;background:var(--panel2);
border:1px solid var(--line);color:var(--bone);
font-family:var(--sans);font-size:14.5px;
}
form.mw textarea{min-height:110px;resize:vertical}
form.mw input:focus,form.mw select:focus,form.mw textarea:focus{outline:1px solid var(--gold)}
.opt-row{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:8px}
.opt-row label{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;color:var(--dim)}
form.mw input[type=checkbox],form.mw input[type=radio]{accent-color:var(--gold);width:16px;height:16px}
button.cta{cursor:pointer;font-family:var(--sans)}
/* ---------- 頁尾 ---------- */
footer{padding:60px 0 72px;color:var(--dim);font-size:13.5px;line-height:2.1}
footer .f-strong{color:var(--bone)}
footer .f-legal{margin-top:1.6em}
/* ---------- 失焦遮蔽 ---------- */
#blur-shield{
position:fixed;inset:0;z-index:999;display:none;
background:rgba(15,15,19,.97);
align-items:center;justify-content:center;text-align:center;
}
#blur-shield.on{display:flex}
#blur-shield .in{font-family:var(--serif)}
#blur-shield .in b{display:block;font-size:22px;color:var(--gold);letter-spacing:.2em;margin-bottom:14px}
#blur-shield .in span{color:var(--dim);letter-spacing:.15em;font-size:14px}
/* ---------- AI決議廳 嵌入 ---------- */
/* ---------- 職涯引導牌 ---------- */
.deck{display:flex;gap:26px;justify-content:center;margin:46px 0 10px;flex-wrap:wrap}
.tcard{
width:150px;height:230px;perspective:1000px;cursor:pointer;
}
.tcard .inner{
position:relative;width:100%;height:100%;
transition:transform .8s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d;
}
.tcard.flip .inner{transform:rotateY(180deg)}
.tcard .face{
position:absolute;inset:0;backface-visibility:hidden;
border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;
}
.tcard .back{
background:
radial-gradient(circle at 50% 30%,rgba(201,169,106,.25),transparent 60%),
var(--panel2);
font-family:var(--serif);font-weight:900;font-size:44px;color:var(--gold);
}
.tcard .front{
transform:rotateY(180deg);
background:var(--gold);color:var(--ink);
font-family:var(--serif);font-weight:900;font-size:26px;letter-spacing:.2em;
flex-direction:column;gap:8px;text-align:center;padding:14px;
}
.tcard .front small{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.25em}
.tcard.dis{opacity:.28;pointer-events:none;filter:grayscale(1)}
#card-result{
display:none;margin-top:40px;border:1px solid var(--gold);
background:var(--panel);padding:36px 30px;
}
#card-result.on{display:block}
#card-result h3{font-family:var(--serif);font-weight:900;font-size:24px;color:var(--gold);letter-spacing:.14em;margin-bottom:14px}
#card-result .mean{color:var(--bone);margin-bottom:18px}
#card-result .act{border-left:2px solid var(--gold);padding:6px 0 6px 18px;color:var(--dim)}
#card-result .act strong{color:var(--gold);display:block;margin-bottom:6px;letter-spacing:.14em;font-size:13px}
@media(max-width:640px){
.hero{padding:64px 0 52px}
.corner-mark{top:14px}
.nav-links{gap:12px;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{transition:none!important;animation:none!important}
}
.card .go,.ulink{text-decoration:underline;text-underline-offset:5px;text-decoration-color:currentColor}
.brandlogo{display:inline-block;height:28px;width:28px;object-fit:contain;margin-right:10px;vertical-align:-8px;border-radius:4px}
.hall-shell{margin:26px 0 10px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#171410}
.hall-frame{display:block;width:100%;height:calc(100vh - 190px);min-height:680px;border:0;background:#171410}
@media(max-width:760px){.hall-frame{height:calc(100vh - 150px);min-height:560px}}
/* ---------- 社群圖示列（footer） ---------- */
.soc-row{display:flex;gap:20px;align-items:center;margin:0 0 26px}
.soc-row a{display:inline-flex;line-height:0;opacity:.82;transform:translateY(0);
transition:opacity .22s ease,transform .22s ease,filter .22s ease}
.soc-row a:hover,.soc-row a:focus-visible{opacity:1;transform:translateY(-3px);
filter:brightness(1.18) drop-shadow(0 4px 10px rgba(201,169,106,.35))}
.soc-row svg{width:30px;height:30px;display:block}
.soc-row img{height:30px;width:auto;display:block}
/* ---------- 案例頁 ---------- */
.case-note{border-left:3px solid var(--gold);background:var(--panel);
padding:16px 20px;color:var(--dim,#98917E);font-size:14px;line-height:2;margin:0 0 44px}
.map-title{border-bottom:2px solid var(--gold);padding-bottom:14px;margin-bottom:14px}
.map-hint{color:var(--dim,#98917E);font-size:14px;margin:0 0 26px}
.acc{margin:0 0 16px;background:var(--panel);border-left:3px solid var(--gold)}
.acc-head{display:flex;justify-content:space-between;align-items:center;width:100%;
background:none;border:0;cursor:pointer;padding:20px 22px;color:inherit;
font:inherit;font-weight:700;font-size:17px;letter-spacing:.06em;text-align:left}
.acc-head:hover{background:var(--panel2)}
.acc-arrow{color:var(--gold);transition:transform .25s ease}
.acc.open .acc-arrow{transform:rotate(180deg)}
.acc-body{display:none;padding:4px 22px 26px}
.acc.open .acc-body{display:block}
.case{margin:22px 0;padding:22px 22px 12px;background:var(--panel2);
border:1px solid rgba(255,255,255,.06)}
.case h3{margin:0 0 12px;color:var(--gold)}
.case-sum{color:var(--dim,#98917E);line-height:2;margin:0 0 18px}
.metric{margin:0 0 16px}
.metric h4{margin:0 0 6px;color:var(--gold);font-size:15px;letter-spacing:.08em}
.metric p{margin:0;line-height:2}
.case.pending{opacity:.55}
/* ============================================================
知識文（/knowledge/）· 列表頁與文章頁
沿用全站墨黑 × 香檳金，不另外引入任何外部樣式
============================================================ */
/* ---------- 分類篩選 ---------- */
.kb-filter{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 6px}
.kb-chip{
font:inherit;font-size:13px;letter-spacing:.1em;cursor:pointer;
padding:8px 16px;color:var(--dim);background:transparent;
border:1px solid var(--line);transition:color .2s,border-color .2s,background .2s;
}
.kb-chip:hover{color:var(--gold);border-color:var(--gold)}
.kb-chip.on{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.kb-chip:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* ---------- 文章卡片 ---------- */
.kb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:30px}
@media(max-width:860px){.kb-grid{grid-template-columns:1fr}}
.kb-card{
position:relative;background:var(--panel);border:1px solid var(--line);
padding:30px 28px 26px;transition:transform .25s ease,border-color .25s ease;
}
.kb-card:hover{transform:translateY(-3px);border-color:var(--gold)}
.kb-hit{position:absolute;inset:0;z-index:2}
.kb-hit:hover{text-decoration:none}
.kb-hit:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.kb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
font-size:11.5px;letter-spacing:.18em;color:var(--dim);margin-bottom:14px}
.kb-cat{color:var(--gold)}
.kb-dot{opacity:.5}
.kb-title{font-family:var(--serif);font-weight:700;font-size:20px;
line-height:1.65;letter-spacing:.03em;color:var(--bone);margin-bottom:12px}
.kb-card:hover .kb-title{color:var(--gold)}
.kb-sum{color:var(--dim);font-size:14.5px;line-height:1.95}
.kb-go{display:inline-block;margin-top:18px;font-size:14px;color:var(--gold);
text-decoration:underline;text-underline-offset:5px}
.kb-empty{margin-top:34px;border:1px dashed var(--line);background:var(--panel);
padding:44px 28px;text-align:center;color:var(--dim)}
.kb-empty-sub{margin-top:10px;font-size:14px}
/* ---------- 文章頁：標頭 ---------- */
.post-hero{padding-bottom:56px}
.post-h1{font-family:var(--serif);font-weight:900;
font-size:clamp(26px,4.2vw,42px);line-height:1.45;letter-spacing:.03em;max-width:20em}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
margin-top:26px;font-size:12.5px;letter-spacing:.16em;color:var(--dim)}
.post-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.post-tag{font-size:11.5px;letter-spacing:.2em;color:var(--gold);
border:1px solid var(--line);background:var(--gold-soft);padding:6px 14px}
/* ---------- 文章頁：內文 ---------- */
.post-wrap{max-width:760px}
.post-lede{border-left:3px solid var(--gold);background:var(--panel);
padding:18px 22px;color:var(--bone);font-size:15.5px;line-height:2.05;margin-bottom:38px}
.post-body{font-size:16px;line-height:2.15;color:var(--bone)}
.post-body p{margin:0 0 1.5em}
.post-body h2{font-family:var(--serif);font-weight:900;font-size:23px;
letter-spacing:.04em;color:var(--gold);margin:2.4em 0 .9em;
padding-bottom:12px;border-bottom:1px solid var(--line)}
.post-body h3{font-family:var(--serif);font-weight:700;font-size:19px;
letter-spacing:.04em;color:var(--bone);margin:2em 0 .7em;
padding-left:14px;border-left:3px solid var(--gold)}
.post-body h4,.post-body h5,.post-body h6{
font-family:var(--serif);font-weight:700;font-size:16.5px;
color:var(--bone);margin:1.8em 0 .6em;letter-spacing:.04em}
.post-body strong{color:var(--gold);font-weight:700}
.post-body em{color:var(--bone);font-style:normal;
border-bottom:1px dashed rgba(201,169,106,.5);padding-bottom:1px}
.post-body a{text-decoration:underline;text-underline-offset:5px}
.post-ul,.post-ol{margin:0 0 1.6em;padding-left:0;list-style:none;counter-reset:mwol}
.post-ul li,.post-ol li{position:relative;padding:10px 0 10px 30px;
border-bottom:1px dashed rgba(201,169,106,.15);color:var(--bone)}
.post-ul li::before{content:"◆";position:absolute;left:2px;top:13px;
color:var(--gold);font-size:10px}
.post-ol li{counter-increment:mwol}
.post-ol li::before{content:counter(mwol);position:absolute;left:0;top:10px;
color:var(--gold);font-family:var(--serif);font-weight:700;font-size:14px;
letter-spacing:.1em}
.post-quote{margin:2em 0;padding:22px 26px;background:var(--panel2);
border-left:3px solid var(--gold)}
.post-quote p{margin:0 0 .8em;color:var(--dim);font-size:15.5px}
.post-quote p:last-child{margin-bottom:0}
.post-code{margin:1.8em 0;padding:20px 22px;background:var(--panel2);
border:1px solid var(--line);overflow-x:auto}
.post-code code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:13.5px;line-height:1.9;color:var(--bone);white-space:pre}
.post-body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:14px;color:var(--gold);background:var(--gold-soft);padding:2px 7px}
.post-hr{border:0;border-top:1px solid var(--line);margin:2.6em 0}
.post-img{display:block;margin:2em auto;border:1px solid var(--line)}
/* ---------- 文章頁：結尾與導覽 ---------- */
.post-end{margin-top:62px;padding:34px 30px;background:var(--panel);
border:1px solid var(--line)}
.post-end p{color:var(--dim);font-size:15px;line-height:2.05}
.post-end .cta{margin-top:24px}
.post-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px}
@media(max-width:640px){.post-nav{grid-template-columns:1fr}}
.pn-item{display:block;padding:20px 22px;background:var(--panel);
border:1px solid var(--line);transition:border-color .25s ease}
.pn-item:hover{border-color:var(--gold);text-decoration:none}
.pn-item span{display:block;font-size:11.5px;letter-spacing:.28em;
color:var(--gold);margin-bottom:8px}
.pn-item b{display:block;font-family:var(--serif);font-weight:700;font-size:15.5px;
line-height:1.75;color:var(--bone)}
.pn-next{text-align:right}
.post-back{margin-top:32px;font-size:14px}
@media(max-width:640px){
.kb-card{padding:24px 20px 22px}
.kb-title{font-size:18px}
.post-wrap{max-width:100%}
.post-body{font-size:15.5px;line-height:2.05}
.post-body h2{font-size:20px}
.post-body h3{font-size:17.5px}
.post-end{padding:26px 20px}
.post-lede{padding:16px 18px;font-size:15px}
.post-code{padding:16px 14px}
}
/* /assets/mw-ui.v1.css */
/* ==========================================================================
MW顧問所 ， UI 精緻層 v1
純附加樣式表。不改動任何 DOM、文字內容、版面結構、sitemap 與結構化資料。
不引入任何外部字型或外部請求，不隱藏任何文字節點。
設計語彙來源：
SmoothUI ， 浮層深度、圓角控制項、克制的微動態
Magic UI ， 頂部極光底光、標題節奏、膠囊徽章
Unlumen UI ， 單一重點色的克制、進場位移
RetroUI ， 硬邊位移陰影、細格線底紋、可按壓的按鈕
既有品牌色（--gold #c9a96a / --ink #171410）維持不變。
========================================================================== */
:root{
--mw-gold-hi:#e6cd97;
--mw-gold-deep:#8a6f3c;
--mw-hard:6px 6px 0 -1px rgba(201,169,106,.26);
--mw-hard-sm:4px 4px 0 -1px rgba(201,169,106,.22);
--mw-hard-press:1px 1px 0 -1px rgba(201,169,106,.30);
--mw-lift:0 22px 48px -30px rgba(0,0,0,.92);
--mw-ring:0 0 0 2px rgba(201,169,106,.85),0 0 0 6px rgba(201,169,106,.16);
--mw-ease:cubic-bezier(.22,.61,.36,1);
--mw-grid:rgba(201,169,106,.038);
}
/* --------------------------------------------------------------------------
1. 底層氛圍：極光底光（Magic UI）+ 細格線（RetroUI）
固定於背景層，pointer-events:none，不參與版面計算。
-------------------------------------------------------------------------- */
/* 底層氛圍：極光（Magic UI）與細格線（RetroUI）
說明：格線掛在 body 背景、極光掛在 .hero 區塊內，
兩者都不使用 position:fixed，捲動時不觸發全畫面重繪。 */
body{
background-image:
linear-gradient(transparent calc(100% - 1px),var(--mw-grid) calc(100% - 1px)),
linear-gradient(90deg,transparent calc(100% - 1px),var(--mw-grid) calc(100% - 1px));
background-size:38px 38px,38px 38px;
background-repeat:repeat,repeat;
background-position:0 0,0 0;
}
.hero{position:relative;isolation:isolate;overflow:clip}
.hero::before{
content:"";position:absolute;left:-12%;right:-12%;top:-46%;height:150%;
z-index:-1;pointer-events:none;
background:
radial-gradient(58% 58% at 50% 34%,rgba(201,169,106,.13),transparent 70%),
radial-gradient(40% 40% at 88% 10%,rgba(201,169,106,.06),transparent 72%);
}
/* --------------------------------------------------------------------------
2. 全站基礎：捲動節奏、鍵盤焦點環、捲軸
-------------------------------------------------------------------------- */
html{scroll-padding-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
a:focus-visible,button:focus-visible,summary:focus-visible,
[tabindex]:focus-visible,.kb-hit:focus-visible,.kb-chip:focus-visible,
.cta:focus-visible,.acc-head:focus-visible{
outline:none;box-shadow:var(--mw-ring);border-radius:2px
}
form.mw input:focus,form.mw select:focus,form.mw textarea:focus{box-shadow:var(--mw-ring)}
html{scrollbar-color:rgba(201,169,106,.42) transparent}
/* 捲軸不改寬度：scrollbar-width 與 ::-webkit-scrollbar 的 width 會縮窄捲軸，
使內容可用寬度變寬、文字重新斷行，整頁高度最多相差 546px。
品牌配色改由 scrollbar-color 與 thumb 的漸層負責，寬度一律交還系統。 */
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,rgba(201,169,106,.50),rgba(201,169,106,.24));
border:3px solid var(--ink);border-radius:99px
}
::-webkit-scrollbar-thumb:hover{background:rgba(201,169,106,.66)}
/* --------------------------------------------------------------------------
3. 導覽列（SmoothUI 的浮層感）
維持 sticky 與既有間距，只加深度與底部漸層髮絲線。
-------------------------------------------------------------------------- */
.nav{
box-shadow:0 1px 0 rgba(201,169,106,.10),0 16px 34px -30px rgba(0,0,0,.95);
transition:box-shadow .3s var(--mw-ease)
}
.brand{transition:transform .35s var(--mw-ease)}
.brand:hover{transform:translateY(-1px)}
.brandlogo{transition:filter .35s var(--mw-ease),transform .35s var(--mw-ease)}
.brand:hover .brandlogo{filter:drop-shadow(0 3px 12px rgba(201,169,106,.45))}
.nav-links a{position:relative}
.nav-links a::after{
content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
background:linear-gradient(90deg,var(--mw-gold-deep),var(--gold),var(--mw-gold-hi));
transform:scaleX(0);transform-origin:left center;
transition:transform .38s var(--mw-ease)
}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-links a.on{border-bottom-color:transparent}
.nav-links a.on::after{transform:scaleX(1)}
/* --------------------------------------------------------------------------
4. 首屏（Magic UI 的字級節奏）
不動字級與字距，只加極輕的光暈與分隔漸層。
-------------------------------------------------------------------------- */
.hero h1{text-wrap:balance;text-shadow:0 1px 30px rgba(201,169,106,.10)}
.hero .lead{text-wrap:pretty}
.kicker{position:relative}
.badge-line{border-radius:999px}
.section h2,.card h3,.kb-title,.post-h1,.acc-head{text-wrap:balance}
.section .sub,.card p,.kb-sum{text-wrap:pretty}
/* --------------------------------------------------------------------------
5. 卡片（RetroUI 硬邊位移陰影 + SmoothUI 浮起）
預設狀態維持既有外觀，僅在 hover / focus 時加上位移陰影。
-------------------------------------------------------------------------- */
.card,.kb-card,.case,.metric,.pn-item,.spec,.post-end,.post-lede,.case-note,#card-result{
transition:transform .3s var(--mw-ease),border-color .3s var(--mw-ease),
box-shadow .3s var(--mw-ease),background-color .3s var(--mw-ease)
}
.card,.kb-card,.case,.metric,.pn-item{position:relative}
.card::before,.kb-card::before,.case::before,.metric::before,.pn-item::before{
content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(201,169,106,.55),transparent);
opacity:0;transition:opacity .3s var(--mw-ease)
}
.card:hover,.kb-card:hover{transform:translate(-2px,-4px);box-shadow:var(--mw-hard),var(--mw-lift)}
.case:hover,.metric:hover,.pn-item:hover{transform:translate(-1px,-2px);box-shadow:var(--mw-hard-sm)}
.card:hover::before,.kb-card:hover::before,.case:hover::before,
.metric:hover::before,.pn-item:hover::before{opacity:1}
.kb-hit:focus-visible .kb-card,.kb-card:focus-within{
transform:translate(-2px,-4px);box-shadow:var(--mw-hard),var(--mw-lift)
}
.spec:hover,.post-end:hover{box-shadow:var(--mw-hard-sm)}
/* --------------------------------------------------------------------------
6. 按鈕（RetroUI 的可按壓手感）
-------------------------------------------------------------------------- */
.cta,button.cta{
box-shadow:var(--mw-hard-sm);
transition:background .25s var(--mw-ease),color .25s var(--mw-ease),
box-shadow .22s var(--mw-ease),transform .22s var(--mw-ease)
}
.cta:hover,button.cta:hover{transform:translate(-2px,-2px);box-shadow:var(--mw-hard)}
.cta:active,button.cta:active{transform:translate(2px,2px);box-shadow:var(--mw-hard-press)}
/* --------------------------------------------------------------------------
7. 分類籤與標籤（SmoothUI 的膠囊）
-------------------------------------------------------------------------- */
.kb-chip{border-radius:999px;transition:color .22s var(--mw-ease),border-color .22s var(--mw-ease),
background .22s var(--mw-ease),box-shadow .22s var(--mw-ease),transform .22s var(--mw-ease)}
.kb-chip:hover{transform:translateY(-1px);box-shadow:0 6px 16px -12px rgba(201,169,106,.9)}
.kb-chip.on{box-shadow:0 0 0 1px rgba(201,169,106,.35),0 8px 20px -16px rgba(201,169,106,.9)}
.post-tag,.card .tag{border-radius:999px}
/* --------------------------------------------------------------------------
8. 連結底線（Unlumen 的克制）
-------------------------------------------------------------------------- */
.card .go,.ulink,.kb-go,.post-back{
position:relative;background-image:linear-gradient(90deg,var(--gold),var(--gold));
background-repeat:no-repeat;background-size:0% 1px;background-position:0 100%;
transition:background-size .38s var(--mw-ease),color .25s var(--mw-ease)
}
.card:hover .go,.ulink:hover,.kb-go:hover,.post-back:hover{background-size:100% 1px}
.post-body a{transition:color .22s var(--mw-ease),border-color .22s var(--mw-ease)}
.post-body a:hover{color:var(--mw-gold-hi)}
/* --------------------------------------------------------------------------
9. 文章內文精緻化
標題底線由實線改為漸層，佔位完全相同（1px），不造成任何位移。
-------------------------------------------------------------------------- */
.post-body h2{
border-bottom-color:transparent;
background-image:linear-gradient(90deg,var(--gold) 0%,rgba(201,169,106,.42) 38%,rgba(201,169,106,.06) 100%);
background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%
}
.post-body h3{transition:border-color .3s var(--mw-ease)}
.post-lede{border-radius:2px}
.post-quote{box-shadow:inset 0 0 60px -40px rgba(201,169,106,.9)}
.post-body img,.post-img{box-shadow:var(--mw-lift)}
.post-hr{background-image:linear-gradient(90deg,transparent,rgba(201,169,106,.55),transparent)}
/* --------------------------------------------------------------------------
10. 進場位移（Unlumen）
只位移，不改變透明度：任何情況下文字都保持可見與可被檢索。
僅在支援 scroll-driven animation 且使用者未要求減少動態時啟用。
-------------------------------------------------------------------------- */
/* 進場動態刻意不採用捲動時間軸：大型清單容器一旦被提升為合成層，
在部分裝置上會出現局部未繪製的情況。改以 hover 與 focus 的微動態呈現，
任何情況下文字都保持可見、可選取、可被檢索。 */
/* 文章頁閱讀進度條已移除：捲動時間軸搭配 backdrop-filter 導覽列，
在長文章頁面會造成大面積未繪製。閱讀節奏改由標題漸層底線負責。 */
/* --------------------------------------------------------------------------
11. 降級與列印
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.card,.kb-card,.case,.metric,.pn-item,.cta,button.cta,.kb-chip,.brand{
transition:none!important;transform:none!important
}
.nav-links a::after{transition:none}
}
@media print{
body::before{display:none}
.card,.kb-card,.case,.metric,.pn-item,.cta{box-shadow:none!important}
}
@media (max-width:720px){
.card:hover,.kb-card:hover{transform:none;box-shadow:var(--mw-hard-sm)}
}
/* ==========================================================================
MW顧問所 ， UI 精緻層 v2（接續 v1，同檔追加，不新增任何請求）
第二輪的融合來源與取捨：
SmoothUI ， 導覽項目的浮層底、控制項的懸浮回饋、卡片右下收邊刻痕
Magic UI ， 主按鈕的光掠、首屏重點字的髮絲底線、標題節奏刻度
Unlumen UI ， 眼眉標的細髮絲線、數字工整、頁尾連結的克制
RetroUI ， 硬邊位移的按壓手感、標籤的實體感
守則：
不使用 position:fixed 全幅圖層；不使用捲動時間軸；
不使用 opacity:0、display:none、visibility:hidden 隱藏任何文字節點；
裝飾一律走 absolute / transform / box-shadow / background，
因此不改動盒模型、不造成位移、不改動版面、內容、sitemap 與結構化資料；
刻意避開各分頁自有樣式的元件（決議廳的 pxbtn、panel、divider），
以免覆蓋該頁既有的視覺設定。
========================================================================== */
:root{
--mw2-gold-hi:#e6cd97;
--mw2-gold-deep:#8a6f3c;
--mw2-edge:rgba(201,169,106,.34);
--mw2-glass:rgba(236,231,219,.045);
--mw2-hard:5px 5px 0 -1px rgba(201,169,106,.24);
--mw2-press:1px 1px 0 -1px rgba(201,169,106,.30);
--mw2-ease:cubic-bezier(.2,.7,.3,1);
--mw2-out:cubic-bezier(.16,1,.3,1);
--mw2-navh:88px;
}
/* 12. 錨點對位：sticky 導覽列不再蓋住被連結到的標題 */
[id]{scroll-margin-top:var(--mw2-navh)}
.post-body h2,.post-body h3,.section,.hero,.post-hero{scroll-margin-top:var(--mw2-navh)}
/* 13. 數字工整（Unlumen） */
.post-meta,.kb-meta,.spec,.summ{font-variant-numeric:tabular-nums}
/* 14. 排版收尾：標題換行平衡、段落末行不落單 */
.hero h1,.post-h1,.section h2,.card h3,.kb-title,.post-body h2,.post-body h3{text-wrap:balance}
.hero .lead,.section .sub,.kb-sum,.card p,.post-lede,.post-body p,.note,.hint{text-wrap:pretty}
/* 15. 眼眉標的細髮絲線（Unlumen） */
.eyebrow{position:relative}
.eyebrow::after{
content:"";position:absolute;left:0;bottom:-9px;width:44px;height:1px;pointer-events:none;
background:linear-gradient(90deg,var(--gold),rgba(201,169,106,0))
}
/* 16. 標題的品牌刻度（Magic UI 的節奏 + RetroUI 的硬邊）
只在版心兩側留白足夠時出現，避免貼齊視窗邊緣。 */
.section h2,.post-body h2,.post-body h3{position:relative}
@media (min-width:1140px){
.section h2::before{
content:"";position:absolute;left:-18px;top:.34em;width:3px;height:.90em;pointer-events:none;
background:linear-gradient(180deg,var(--mw2-gold-hi),var(--mw2-gold-deep))
}
.post-body h2::before{
content:"";position:absolute;left:-16px;top:.30em;width:3px;height:.86em;pointer-events:none;
background:linear-gradient(180deg,var(--mw2-gold-hi),var(--mw2-gold-deep))
}
}
.post-body h3::after{
content:"";position:absolute;left:0;bottom:-6px;width:26px;height:1px;pointer-events:none;
background:linear-gradient(90deg,var(--gold),rgba(201,169,106,0))
}
/* 17. 導覽項目的浮層底（SmoothUI） */
.nav-links a{position:relative;z-index:0}
.nav-links a::before{
content:"";position:absolute;left:-10px;right:-10px;top:-7px;bottom:-7px;z-index:-1;
border-radius:8px;background:var(--mw2-glass);pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(201,169,106,.10);
opacity:0;transform:scale(.94);
transition:opacity .26s var(--mw2-ease),transform .26s var(--mw2-ease)
}
.nav-links a:hover::before,.nav-links a:focus-visible::before{opacity:1;transform:none}
.nav-links a.on::before{opacity:1;transform:none;background:rgba(201,169,106,.07)}
/* 18. 首屏重點字的髮絲底線（Magic UI） */
.hero .lead strong{
background-image:linear-gradient(90deg,rgba(201,169,106,.55),rgba(201,169,106,0));
background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%
}
/* 19. 卡片右下角的收邊刻痕（SmoothUI 收邊 + RetroUI 硬邊） */
.card,.kb-card,.pn-item,.spec,.note,.post-end,.post-lede{position:relative}
.card::after,.kb-card::after,.pn-item::after{
content:"";position:absolute;right:7px;bottom:7px;width:13px;height:13px;pointer-events:none;
border-right:1px solid var(--mw2-edge);border-bottom:1px solid var(--mw2-edge);
opacity:0;transform:translate(-4px,-4px);
transition:opacity .3s var(--mw2-ease),transform .34s var(--mw2-out)
}
.card:hover::after,.kb-card:hover::after,.pn-item:hover::after,
.kb-hit:hover .kb-card::after,.kb-hit:focus-visible .kb-card::after{opacity:1;transform:none}
/* 20. 主按鈕的光掠（Magic UI）
第一層保留既有的斜向金漸層，第二層才是掠過的高光，因此靜態外觀不變。 */
.cta,button.cta{
background-image:
linear-gradient(115deg,rgba(201,169,106,0) 38%,rgba(201,169,106,.17) 50%,rgba(201,169,106,0) 62%),
linear-gradient(120deg,rgba(201,169,106,.12),transparent);
background-repeat:no-repeat,no-repeat;
background-size:260% 100%,100% 100%;
background-position:132% 0,0 0;
transition:background-position .60s var(--mw2-out),background-color .25s var(--mw2-ease),
color .25s var(--mw2-ease),box-shadow .22s var(--mw2-ease),transform .20s var(--mw2-ease)
}
.cta:hover,button.cta:hover{
background-image:linear-gradient(115deg,rgba(201,169,106,0) 38%,rgba(236,231,219,.20) 50%,rgba(201,169,106,0) 62%);
background-repeat:no-repeat;background-size:260% 100%;background-position:-32% 0
}
.cta:active,button.cta:active{transform:translate(1px,1px);box-shadow:var(--mw2-press)}
/* 21. 標籤的懸浮回饋（RetroUI） */
.post-tag,.card .tag{
transition:color .22s var(--mw2-ease),border-color .22s var(--mw2-ease),
background-color .22s var(--mw2-ease),box-shadow .22s var(--mw2-ease)
}
.post-tag:hover,.card .tag:hover{color:var(--mw2-gold-hi);border-color:var(--mw2-edge)}
/* 22. 表單控制項（SmoothUI 的手感），只作用於聯絡表單 */
form.mw input,form.mw select,form.mw textarea{
transition:border-color .2s var(--mw2-ease),box-shadow .2s var(--mw2-ease),
background-color .2s var(--mw2-ease)
}
form.mw input:hover,form.mw select:hover,form.mw textarea:hover{border-color:var(--mw2-edge)}
/* 23. 頁尾連結（Unlumen 的克制） */
.f-legal a,.soc-row a,.f-strong a{transition:color .22s var(--mw2-ease)}
.f-legal a:hover,.soc-row a:hover,.f-strong a:hover{color:var(--mw2-gold-hi)}
/* 24. 降級：使用者要求減少動態時，裝飾保持靜態且文字完全可見 */
@media (prefers-reduced-motion:reduce){
.nav-links a::before,.card::after,.kb-card::after,.pn-item::after{transition:none!important}
.cta,button.cta{transition:none!important}
.cta:active,button.cta:active{transform:none!important}
}
/* 25. 列印：移除所有裝飾，只留文字 */
@media print{
.eyebrow::after,.post-body h3::after,.section h2::before,.post-body h2::before,
.nav-links a::before,.card::after,.kb-card::after,.pn-item::after{display:none!important}
.cta,button.cta{background-image:none!important;box-shadow:none!important}
.hero .lead strong{background-image:none!important}
}
/* 26. 窄螢幕：收掉懸浮裝飾 */
@media (max-width:720px){
.card:hover::after,.kb-card:hover::after,.pn-item:hover::after{opacity:0}
}
/* ==========================================================================
MW顧問所 ， UI 精緻層 v3（接續 v2，同檔追加，不新增任何請求）
融合來源：
81-web.com ， 篩選列收進一塊安靜的托盤；卡片近乎無裝飾；方角、零陰影
SANKOU! ， 硬挺的外框膠囊；列與列之間一小段置中短線；
外框式圖示按鈕；圖片外圍一圈細框
共同守則（與 v1、v2 相同）：
不使用 position:fixed 全幅圖層、不使用捲動時間軸、
不使用 opacity:0 / display:none / visibility:hidden 隱藏任何文字節點、
不動 padding 與 margin，托盤與框線一律以 box-shadow 與 outline 繪製，
因此不改動盒模型、不造成位移、不改動版面、內容、sitemap 與結構化資料。
不觸碰任何分頁自有樣式的元件（決議廳的 pxbtn、panel、divider）。
========================================================================== */
:root{
--mw3-tray:rgba(236,231,219,.028);
--mw3-tray-line:rgba(201,169,106,.13);
--mw3-ring:rgba(201,169,106,.42);
--mw3-ring-on:rgba(201,169,106,.58);
--mw3-frame:rgba(201,169,106,.18);
--mw3-ease:cubic-bezier(.2,.7,.3,1);
}
/* 27. 篩選列收進一塊安靜的托盤（81-web）
以 box-shadow 的擴散半徑往外畫，不動 padding 與 margin。
上緣留白 30px、下緣留白 36px，10px 的擴散不會壓到相鄰元素。 */
.kb-filter{
border-radius:16px;
box-shadow:0 0 0 10px var(--mw3-tray),0 0 0 11px var(--mw3-tray-line)
}
/* 28. 區塊與區塊之間的置中短線（SANKOU）
落在既有 72px 上內距的留白裡，不與 .section 的底線重疊。 */
.section{position:relative}
.section + .section::before{
content:"";position:absolute;left:50%;top:30px;width:30px;height:1px;
transform:translateX(-15px);pointer-events:none;
background:linear-gradient(90deg,rgba(201,169,106,0),var(--gold),rgba(201,169,106,0))
}
/* 29. 外框式圖示按鈕（SANKOU）
社群圖示本體 30x30，圈線用 box-shadow 往外畫，不佔位。 */
.soc-row a{
border-radius:999px;
transition:box-shadow .24s var(--mw3-ease),transform .24s var(--mw3-ease),
color .22s var(--mw3-ease)
}
.soc-row a:hover,.soc-row a:focus-visible{
transform:translateY(-1px);
box-shadow:0 0 0 1px var(--mw3-ring),0 0 0 7px rgba(201,169,106,.055)
}
/* 30. 硬挺的外框膠囊（SANKOU）
保留 v1 的浮起與柔光，額外補上一圈實線，讓邊界更明確。 */
.kb-chip:hover{
transform:translateY(-1px);
box-shadow:0 0 0 1px var(--mw3-ring),0 6px 16px -12px rgba(201,169,106,.9)
}
.kb-chip.on{
box-shadow:0 0 0 1px var(--mw3-ring-on),0 8px 20px -16px rgba(201,169,106,.9)
}
.kb-chip:active{transform:translateY(1px)}
/* 31. 閱讀引導的位移（兩站共同的圖說行為）
保留 v1 的底線生長，額外補上水平位移與標題提亮。 */
.card .go,.kb-go{
transition:background-size .38s var(--mw3-ease),color .25s var(--mw3-ease),
transform .30s var(--mw3-ease)
}
.card:hover .go,.kb-card:hover .kb-go,.kb-hit:focus-visible ~ .kb-go{
transform:translateX(3px)
}
.kb-card:hover .kb-title,.kb-hit:focus-visible ~ .kb-title{color:var(--mw2-gold-hi)}
.kb-title{transition:color .24s var(--mw3-ease)}
/* 32. 圖片外圍一圈細框（兩站共同）
用 outline 繪製，不進入版面計算。 */
.post-body img,.post-img{outline:1px solid var(--mw3-frame);outline-offset:0}
/* 33. 降級：減少動態時保留框線，只關掉位移 */
@media (prefers-reduced-motion:reduce){
.soc-row a,.kb-chip,.card .go,.kb-go,.kb-title{transition:none!important}
.soc-row a:hover,.kb-chip:hover,.kb-chip:active,
.card:hover .go,.kb-card:hover .kb-go{transform:none!important}
}
/* 34. 列印：移除托盤、短線與圈線 */
@media print{
.kb-filter{box-shadow:none!important}
.section + .section::before{display:none!important}
.soc-row a:hover{box-shadow:none!important}
.post-body img,.post-img{outline:none!important}
}
/* 35. 窄螢幕：托盤縮小，避免貼齊視窗邊緣 */
@media (max-width:720px){
.kb-filter{box-shadow:0 0 0 6px var(--mw3-tray),0 0 0 7px var(--mw3-tray-line)}
}
/* /assets/mw-lux.v1.css */
/* ============================================================
* MW顧問所 · 精緻視覺層 mw-lux.v1.css
* ------------------------------------------------------------
* 這是一個「純外觀」樣式層，載入順序在 style.v2.css 與
* mw-ui.v1.css 之後。本檔案只處理視覺與動態表現：
* ‧ 不新增、不刪除、不改寫任何 HTML 結構或語意標籤
* ‧ 不觸碰 meta / JSON-LD / canonical / hreflang / sitemap
* ‧ 不改變任何文字內容，故 SEO / AEO / GEO / LLMO 收錄結構全數維持原狀
* ‧ 僅使用 class 選擇器與自訂屬性，不使用 !important 覆蓋語意樣式
* ============================================================ */
:root{
--lux-gold:#c9a96a;
--lux-gold-hi:#e8cf9d;
--lux-gold-lo:#8c7440;
--lux-bone:#ece7db;
--lux-ink:#171410;
--lux-hair:rgba(201,169,106,.22);
--lux-hair-hi:rgba(201,169,106,.55);
--lux-glass:rgba(23,20,16,.72);
--lux-e-out:cubic-bezier(.16,1,.3,1);
--lux-e-io:cubic-bezier(.65,0,.35,1);
--lux-dur:.62s;
--lux-maxw:min(1360px,94vw);
}
/* ------------------------------------------------------------
* 1. 環境光層：極輕的極光暈染 + 顆粒紙紋 + 暗角
* 由 mw-motion.v1.js 注入 #mw-amb（aria-hidden），
* 不參與文件大綱，不影響爬蟲讀取。
* ---------------------------------------------------------- */
#mw-amb{
position:fixed; inset:0; z-index:0; pointer-events:none;
contain:strict;
}
#mw-amb .amb-glow{
position:absolute; inset:-20%;
background:
radial-gradient(42vw 34vw at 14% 8%, rgba(201,169,106,.11), transparent 62%),
radial-gradient(38vw 30vw at 88% 18%, rgba(138,116,64,.10), transparent 60%),
radial-gradient(46vw 38vw at 60% 92%, rgba(201,169,106,.07), transparent 64%);
animation:luxDrift 34s var(--lux-e-io) infinite alternate;
will-change:transform;
}
#mw-amb .amb-grain{
position:absolute; inset:0; opacity:.14;
background-image:url("data:image/svg+xml;utf8,");
background-size:160px 160px;
}
#mw-amb .amb-vig{
position:absolute; inset:0;
background:radial-gradient(120% 88% at 50% 42%, transparent 52%, rgba(0,0,0,.42) 100%);
}
@keyframes luxDrift{
0% {transform:translate3d(0,0,0) scale(1)}
50% {transform:translate3d(-2.2%,1.6%,0) scale(1.05)}
100%{transform:translate3d(2%,-1.4%,0) scale(1.02)}
}
/* 只抬升需要蓋過環境光的容器，且不更動 .nav 既有的 sticky 定位 */
body > header,
body > main,
body > section,
body > footer,
body > .wrap{position:relative; z-index:1}
/* ------------------------------------------------------------
* 2. 導覽列：品牌放大、與選單同一行、間距守恆、不吃字
* ---------------------------------------------------------- */
.nav{
background:linear-gradient(180deg,rgba(19,16,13,.94),rgba(23,20,16,.82));
-webkit-backdrop-filter:saturate(150%) blur(14px);
backdrop-filter:saturate(150%) blur(14px);
border-bottom:1px solid var(--lux-hair);
transition:padding .35s var(--lux-e-out), background .35s var(--lux-e-out),
box-shadow .35s var(--lux-e-out);
}
.nav::after{
content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
background:linear-gradient(90deg,transparent,var(--lux-hair-hi) 22%,var(--lux-gold-hi) 50%,var(--lux-hair-hi) 78%,transparent);
opacity:.5; transition:opacity .4s var(--lux-e-out);
}
.nav.is-stuck{box-shadow:0 18px 44px -28px rgba(0,0,0,.9)}
.nav.is-stuck::after{opacity:.95}
.nav-inner{
max-width:var(--lux-maxw);
padding:clamp(10px,1.05vw,16px) clamp(14px,1.9vw,30px);
display:flex;
align-items:center;
flex-wrap:nowrap;
column-gap:clamp(14px,2.1vw,44px);
row-gap:0;
}
.brand{
display:grid;
grid-template-columns:auto auto;
align-items:center;
justify-content:start;
column-gap:clamp(7px,.8vw,13px);
row-gap:0;
width:max-content;
flex:0 0 auto;
white-space:nowrap;
font-size:clamp(19px,1.52vw,25px);
letter-spacing:.07em;
line-height:1.15;
text-shadow:0 1px 0 rgba(0,0,0,.4);
transition:filter .4s var(--lux-e-out);
}
.brand:hover{filter:brightness(1.08)}
.brandlogo{
grid-column:1;
grid-row:1 / span 2;
align-self:center;
width:clamp(34px,2.75vw,46px);
height:clamp(34px,2.75vw,46px);
border-radius:7px;
box-shadow:0 0 0 1px var(--lux-hair), 0 6px 18px -10px rgba(201,169,106,.75);
transition:transform .5s var(--lux-e-out), box-shadow .5s var(--lux-e-out);
}
.brand:hover .brandlogo{
transform:translateY(-1px) rotate(-2deg) scale(1.04);
box-shadow:0 0 0 1px var(--lux-hair-hi), 0 10px 26px -10px rgba(201,169,106,.95);
}
.brand small{
grid-column:2;
grid-row:2;
margin:2px 0 0;
font-size:clamp(7.4px,.6vw,9.6px);
letter-spacing:clamp(.2em,.42vw,.4em);
opacity:.8;
}
.nav-links{
margin-left:auto;
flex:0 1 auto;
display:flex;
align-items:center;
flex-wrap:nowrap;
white-space:nowrap;
column-gap:clamp(11px,1.32vw,23px);
font-size:clamp(12.2px,1.0vw,14.6px);
}
.nav-links a{
position:relative;
padding:6px 2px;
transition:color .32s var(--lux-e-out), transform .32s var(--lux-e-out);
}
.nav-links a:hover{transform:translateY(-1px)}
.nav-links a.on{
color:var(--lux-bone);
border-bottom-color:transparent;
}
@media (max-width:1180px){
.nav-inner{column-gap:clamp(12px,1.6vw,26px)}
.nav-links{column-gap:clamp(10px,1.15vw,16px); font-size:clamp(11.8px,1.02vw,13.4px)}
}
@media (max-width:920px){
.nav-inner{flex-wrap:wrap; row-gap:8px}
.nav-links{margin-left:0; flex-wrap:wrap; white-space:normal; row-gap:6px; width:100%}
}
@media (max-width:560px){
.brand{font-size:18px}
.brand small{letter-spacing:.28em}
}
/* ------------------------------------------------------------
* 3. 字體節奏
* ---------------------------------------------------------- */
body{
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
.hero h1{
letter-spacing:.005em;
line-height:1.22;
text-wrap:balance;
}
.hero .lead,.section .sub,.card p,.kb-sum,.post-lede{
text-wrap:pretty;
}
.kicker,.eyebrow{
font-variant-numeric:tabular-nums;
}
.section h2{
letter-spacing:.01em;
text-wrap:balance;
}
body{counter-reset:luxsec}
.section > .wrap > .eyebrow{position:relative}
.section > .wrap > .eyebrow::before{
counter-increment:luxsec;
content:counter(luxsec,decimal-leading-zero);
margin-right:12px;
font-family:var(--sans);
font-size:.82em;
letter-spacing:.14em;
color:var(--lux-gold-lo);
opacity:.9;
}
/* ------------------------------------------------------------
* 4. 卡片
* ---------------------------------------------------------- */
.card,.kb-card,.case,.metric,.pn-item,.spec,.post-end,.post-lede,.case-note{
--lux-mx:50%;
--lux-my:0%;
transition:
transform .5s var(--lux-e-out),
box-shadow .5s var(--lux-e-out),
border-color .5s var(--lux-e-out),
background-color .5s var(--lux-e-out);
}
.card:hover,.kb-card:hover,.case:hover,.metric:hover,.pn-item:hover,
.kb-hit:hover .kb-card,.kb-hit:focus-visible .kb-card{
transform:translate3d(0,-4px,0);
border-color:var(--lux-hair-hi);
box-shadow:
0 1px 0 0 rgba(232,207,157,.16) inset,
0 26px 54px -34px rgba(0,0,0,.95),
0 0 0 1px rgba(201,169,106,.14),
0 0 46px -22px rgba(201,169,106,.42);
}
.lux-spot{
background-image:radial-gradient(
360px circle at var(--lux-mx) var(--lux-my),
rgba(201,169,106,.10), transparent 62%);
background-repeat:no-repeat;
}
/* ------------------------------------------------------------
* 5. 行動鈕
* ---------------------------------------------------------- */
.cta,button.cta{
position:relative;
overflow:hidden;
isolation:isolate;
transition:transform .45s var(--lux-e-out), box-shadow .45s var(--lux-e-out),
letter-spacing .45s var(--lux-e-out);
will-change:transform;
}
.cta::after{
content:"";
position:absolute; inset:0; z-index:-1;
background:linear-gradient(115deg,transparent 28%,rgba(255,246,224,.34) 48%,transparent 66%);
transform:translateX(-130%);
transition:transform .85s var(--lux-e-out);
}
.cta:hover::after,.cta:focus-visible::after{transform:translateX(130%)}
.cta:hover,.cta:focus-visible{
letter-spacing:.14em;
box-shadow:0 16px 40px -22px rgba(201,169,106,.85), 0 0 0 1px var(--lux-hair-hi);
}
.cta:active{transform:translateY(1px) scale(.995)}
.card .go,.ulink,.kb-go,.post-body a{
background-image:linear-gradient(var(--lux-gold),var(--lux-gold));
background-size:0% 1px;
background-position:0 100%;
background-repeat:no-repeat;
transition:background-size .45s var(--lux-e-out), color .3s var(--lux-e-out);
}
.card:hover .go,.ulink:hover,.kb-hit:hover .kb-go,.post-body a:hover{
background-size:100% 1px;
}
/* ------------------------------------------------------------
* 6. 捲動揭示
* ---------------------------------------------------------- */
.lux-rv{
opacity:0;
transform:translate3d(0,16px,0);
transition:
opacity .7s var(--lux-e-out) var(--lux-d,0ms),
transform .7s var(--lux-e-out) var(--lux-d,0ms);
}
.lux-rv.is-in{opacity:1; transform:none}
.hero .kicker{animation:luxRise .9s var(--lux-e-out) .05s both}
.hero h1{animation:luxRise 1.05s var(--lux-e-out) .16s both}
.hero .mw-kw-h2{animation:luxRise 1.05s var(--lux-e-out) .28s both}
.hero .lead{animation:luxRise 1.05s var(--lux-e-out) .38s both}
.hero ul.list{animation:luxRise 1.05s var(--lux-e-out) .48s both}
.hero .badge-line{animation:luxRise 1.05s var(--lux-e-out) .6s both}
@keyframes luxRise{
from{opacity:0; transform:translate3d(0,26px,0)}
to {opacity:1; transform:none}
}
/* 標題掃光：以獨立裝飾層實作，文字本身永遠是實色 */
.hero h1{position:relative; isolation:isolate}
.hero h1::after{
content:"";
position:absolute; inset:-6% -4%;
z-index:-1;
background:linear-gradient(105deg,transparent 34%,rgba(232,207,157,.13) 50%,transparent 66%);
transform:translateX(-120%);
animation:luxSheen 2.4s var(--lux-e-io) 1.15s 1 both;
pointer-events:none;
}
@keyframes luxSheen{
from{transform:translateX(-120%)}
to {transform:translateX(120%)}
}
/* ------------------------------------------------------------
* 7. 閱讀進度、回到頂端
* ---------------------------------------------------------- */
#mw-prog{
position:fixed; top:0; left:0; height:2px; width:100%;
transform:scaleX(0); transform-origin:0 50%;
background:linear-gradient(90deg,var(--lux-gold-lo),var(--lux-gold-hi),var(--lux-gold));
z-index:60; pointer-events:none;
box-shadow:0 0 14px rgba(201,169,106,.6);
}
#mw-top{
position:fixed; right:clamp(14px,2vw,30px); bottom:clamp(14px,2vw,30px);
width:44px; height:44px; border-radius:50%;
display:grid; place-items:center;
border:1px solid var(--lux-hair);
background:var(--lux-glass);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
color:var(--lux-gold); font-size:15px; line-height:1;
cursor:pointer; z-index:59;
opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
transition:opacity .45s var(--lux-e-out), transform .45s var(--lux-e-out),
border-color .3s var(--lux-e-out);
}
#mw-top.is-on{opacity:1; transform:none; pointer-events:auto}
#mw-top:hover{border-color:var(--lux-hair-hi); color:var(--lux-gold-hi)}
/* ------------------------------------------------------------
* 8. 新知列表
* ---------------------------------------------------------- */
.kb-chip{
transition:background-color .35s var(--lux-e-out), color .35s var(--lux-e-out),
border-color .35s var(--lux-e-out), transform .35s var(--lux-e-out);
}
.kb-chip:hover{transform:translateY(-1px)}
.kb-chip.on{box-shadow:0 6px 20px -12px rgba(201,169,106,.9)}
.kb-title{transition:color .35s var(--lux-e-out), letter-spacing .35s var(--lux-e-out)}
.kb-hit:hover .kb-title{letter-spacing:.012em}
.kb-dot{transition:transform .35s var(--lux-e-out)}
.kb-hit:hover .kb-dot{transform:scale(1.5)}
/* ------------------------------------------------------------
* 9. 內文
* ---------------------------------------------------------- */
.post-body p{text-wrap:pretty}
.post-body h2,.post-body h3{scroll-margin-top:96px}
.post-quote{transition:border-color .5s var(--lux-e-out)}
.post-quote:hover{border-color:var(--lux-hair-hi)}
.post-img{transition:transform .7s var(--lux-e-out), box-shadow .7s var(--lux-e-out)}
.post-img:hover{transform:scale(1.012); box-shadow:0 30px 60px -40px rgba(0,0,0,.95)}
/* ------------------------------------------------------------
* 10. 表單與頁尾
* ---------------------------------------------------------- */
form.mw input,form.mw select,form.mw textarea{
transition:border-color .35s var(--lux-e-out), box-shadow .35s var(--lux-e-out),
background-color .35s var(--lux-e-out);
}
form.mw input:focus,form.mw select:focus,form.mw textarea:focus{
box-shadow:0 0 0 3px rgba(201,169,106,.16);
}
footer .soc-row a{
display:inline-block;
transition:transform .35s var(--lux-e-out), color .35s var(--lux-e-out);
}
footer .soc-row a:hover{transform:translateY(-2px)}
/* ------------------------------------------------------------
* 11. 無障礙與省電
* ---------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
#mw-amb .amb-glow{animation:none}
.lux-rv{opacity:1; transform:none; filter:none; transition:none}
.hero .kicker,.hero h1,.hero .mw-kw-h2,.hero .lead,
.hero ul.list,.hero .badge-line{animation:none}
.hero h1::after{display:none}
.cta::after{display:none}
.card:hover,.kb-card:hover,.case:hover,.metric:hover,.pn-item:hover{transform:none}
#mw-prog{transition:none}
}
@media print{
#mw-amb,#mw-prog,#mw-top{display:none}
.lux-rv{opacity:1; transform:none; filter:none}
}
/* ============================================================
* mw-lux.v2 追加層：連結帶樣式 + 進階視覺語彙
* 仍為純外觀，不新增任何內容、不改寫結構與 schema。
* ============================================================ */
/* A. 站內延伸閱讀 / 外部參考連結帶 */
.mw-linkband{
border-top:1px solid var(--lux-hair);
padding:clamp(38px,4.4vw,72px) 0 clamp(30px,3.4vw,54px);
position:relative; z-index:1;
}
.mw-linkband .lb-grid{
display:grid;
grid-template-columns:1.25fr 1fr;
gap:clamp(24px,3.4vw,64px);
}
@media (max-width:760px){ .mw-linkband .lb-grid{grid-template-columns:1fr; gap:28px} }
.mw-linkband .lb-h{
font-family:var(--sans);
font-size:11px;
letter-spacing:.34em;
text-transform:uppercase;
color:var(--lux-gold-lo);
margin:0 0 14px;
padding-bottom:10px;
border-bottom:1px solid var(--lux-hair);
}
.mw-linkband .lb-list{list-style:none; margin:0; padding:0}
.mw-linkband .lb-list li{
position:relative;
padding:9px 0 9px 22px;
border-bottom:1px dashed rgba(201,169,106,.12);
}
.mw-linkband .lb-list li:last-child{border-bottom:0}
.mw-linkband .lb-list li::before{
content:"";
position:absolute; left:2px; top:50%;
width:6px; height:6px; margin-top:-3px;
transform:rotate(45deg) scale(.7);
background:var(--lux-gold-lo);
transition:transform .4s var(--lux-e-out), background-color .4s var(--lux-e-out);
}
.mw-linkband .lb-list li:hover::before{transform:rotate(45deg) scale(1.15); background:var(--lux-gold-hi)}
.mw-linkband .lb-list a{
color:var(--lux-dim);
font-size:14.5px;
letter-spacing:.02em;
display:inline-block;
transition:color .35s var(--lux-e-out), transform .35s var(--lux-e-out);
}
.mw-linkband .lb-list a:hover{color:var(--lux-gold-hi); transform:translateX(4px); text-decoration:none}
.mw-linkband .lb-col:nth-child(2) .lb-list a::after{
content:"↗"; margin-left:7px; font-size:.82em; opacity:.55;
transition:transform .35s var(--lux-e-out), opacity .35s var(--lux-e-out);
display:inline-block;
}
.mw-linkband .lb-col:nth-child(2) .lb-list a:hover::after{transform:translate(2px,-2px); opacity:1}
/* B. 內文自動內部連結 */
a.mw-inlink{
color:var(--lux-bone);
background-image:linear-gradient(var(--lux-gold),var(--lux-gold));
background-repeat:no-repeat;
background-position:0 100%;
background-size:100% 1px;
transition:background-size .4s var(--lux-e-out), color .3s var(--lux-e-out);
}
a.mw-inlink:hover{color:var(--lux-gold-hi); background-size:100% 2px; text-decoration:none}
/* C. 標題遮罩揭示（JS 進入視窗才觸發，無 JS 一律完整顯示） */
/* 安全反轉：預設完全不隱藏，只有進入視窗時才「播放」揭示動畫。
即使 IntersectionObserver 未觸發、JS 停擺或瀏覽器不支援，標題永遠看得見。 */
.lux-txt.is-in{
animation:luxTxtIn 1.05s var(--lux-e-out) var(--lux-d,0ms) both;
}
@keyframes luxTxtIn{
from{clip-path:inset(0 0 110% 0); transform:translate3d(0,10px,0)}
to {clip-path:inset(0 0 -12% 0); transform:none}
}
/* D. 卡片：金線外框在 hover 時由左上收攏（用 box-shadow 疊層，不佔用偽元素） */
.card,.kb-card,.case,.metric,.pn-item{
box-shadow:0 0 0 0 rgba(201,169,106,0);
}
.card:hover,.kb-card:hover,.case:hover,.metric:hover,.pn-item:hover,
.kb-hit:hover .kb-card{
box-shadow:
0 1px 0 0 rgba(232,207,157,.18) inset,
-1px -1px 0 0 var(--lux-gold-hi) inset,
26px 26px 0 -25px var(--lux-gold-lo),
0 26px 54px -34px rgba(0,0,0,.95),
0 0 46px -22px rgba(201,169,106,.42);
}
/* E. 導覽列動能：字距與金點 */
.nav-links a{position:relative}
.nav-links a:hover{letter-spacing:.075em}
/* F. 視差層（JS 設定 --lux-py） */
.lux-par{will-change:transform; transform:translate3d(0,var(--lux-py,0px),0)}
/* G. 游標金環（僅桌機、非觸控） */
#mw-ring{
position:fixed; left:0; top:0; width:26px; height:26px; margin:-13px 0 0 -13px;
border:1px solid rgba(201,169,106,.55); border-radius:50%;
pointer-events:none; z-index:70; opacity:0;
transition:opacity .3s var(--lux-e-out), width .28s var(--lux-e-out),
height .28s var(--lux-e-out), margin .28s var(--lux-e-out),
border-color .28s var(--lux-e-out);
}
#mw-ring.on{opacity:1}
#mw-ring.big{width:52px; height:52px; margin:-26px 0 0 -26px; border-color:var(--lux-gold-hi)}
/* H. 「閱讀全文 / 前往」箭頭滑移 */
.kb-go,.card .go,.ulink{position:relative}
.kb-hit:hover .kb-go,.card:hover .go,.ulink:hover{letter-spacing:.03em}
@media (prefers-reduced-motion:reduce){
.lux-txt.is-in{animation:none !important}
.lux-par{transform:none !important}
#mw-ring{display:none}
.mw-linkband .lb-list a:hover{transform:none}
}
@media print{
#mw-ring{display:none}
.lux-txt.is-in{animation:none}
}
/* /assets/mw-rwd.v1.css */
/* ============================================================
* 銘望顧問所 · RWD 版面層 mw-rwd.v1.css
* ------------------------------------------------------------
* 目的：把電腦 / 平板 / 手機三種版面的可讀性一次修正。
* 1. 左右兩側留出足夠且隨螢幕縮放的邊距，字不再貼邊。
* 2. 上下留白隨螢幕縮放，段落不再擠在頁首頁尾。
* 3. 中文斷行改用 line-break:strict，避免標點跑到行首。
* 4. 窄螢幕時關閉為寬螢幕手寫的
，消除奇怪的語句換行。
* 5. 導覽列在多分頁時自動收斂字級與間距，不換行擠成兩排。
* 只加樣式，不改任何 HTML 結構、文字、連結、CTA 與結構化資料。
* ============================================================ */
/* ---------- 1. 版心與左右邊距 ---------- */
.wrap{
width:100%;
max-width:var(--maxw,1320px);
margin-inline:auto;
padding-inline:clamp(20px, 5vw, 48px);
}
@media(min-width:1400px){
:root{ --maxw:1440px; }
}
/* 內文區塊本身再收一次，長文不會頂到版心邊界 */
.post-wrap{ max-width:min(100%, 760px); margin-inline:auto; }
/* ---------- 2. 上下留白 ---------- */
.section{ padding-block:clamp(44px, 6vw, 72px); }
.hero{ padding-block:clamp(56px, 8vw, 96px) clamp(40px, 6vw, 72px); }
/* ---------- 3. 中文斷行與可讀性 ---------- */
body{
line-break:strict;
word-break:normal;
overflow-wrap:break-word;
}
h1,h2,h3,.kb-title,.hero h1{
text-wrap:balance;
overflow-wrap:break-word;
}
p,li,.lead,.sub,.kb-sum,.case-sum,.post-lede,.post-body p{
text-wrap:pretty;
overflow-wrap:break-word;
}
/* 英數與網址不再撐破容器 */
code,pre,.post-code{ overflow-wrap:anywhere; }
.post-code{ overflow-x:auto; }
/* 版心不允許橫向捲動 */
html,body{ overflow-x:hidden; }
img,svg,iframe,table{ max-width:100%; }
/* ---------- 4. 窄螢幕關閉硬換行 ---------- */
/* 這些段落的
是為寬螢幕排版寫的，窄螢幕會產生奇怪的斷句。 */
@media(max-width:900px){
.hero .lead br,
.card p br,
.sub br,
.case-sum br,
.kb-sum br,
.f-strong br,
.f-legal br{ display:none; }
.hero h1 br{ display:none; }
}
/* ---------- 5. 導覽列（含新增的常見問題分頁） ---------- */
.nav-links{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:clamp(10px, 1.4vw, 18px);
font-size:clamp(12px, 1.05vw, 13.5px);
row-gap:8px;
margin-left:auto;
justify-content:flex-end;
}
.nav-links a{ white-space:nowrap; padding-block:2px; } @media(min-width:1101px){ .nav-links{ font-size:18px !important; gap:20px !important; } .nav-links a[href="/contact/"]{ background:linear-gradient(135deg, var(--gold,#c9a96a), #e3c88a); color:var(--ink,#171410); font-weight:700; padding:8px 21px; border-radius:999px; box-shadow:0 2px 10px rgba(201,169,106,.35); transition:transform .18s ease, box-shadow .18s ease; } .nav-links a[href="/contact/"]:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(201,169,106,.5); } }
.nav-inner{ gap:clamp(12px, 2vw, 24px); flex-wrap:wrap; }
@media(max-width:1100px){
.nav-links{ font-size:13.5px !important; gap:11px !important; }
}
@media(max-width:640px){
.nav-links{ gap:9px 10px !important; font-size:13px !important; justify-content:flex-start; }
.brand small{ display:none; }
}
/* ---------- 6. 常見問題卡片 ---------- */
.faq-card{ cursor:default; }
.faq-card .kb-title{ line-height:1.7; }
.faq-card .kb-sum{ color:var(--bone,#ece7db); opacity:.92; }
@media(min-width:861px){
.kb-grid:has(.faq-card){ grid-template-columns:repeat(2,1fr); }
}
/* ---------- 7. 表格與卡片在窄螢幕的內距 ---------- */
@media(max-width:640px){
.card{ padding:26px 20px; }
.acc-head{ padding:18px 16px; }
.acc-body{ padding:4px 16px 22px; }
.case{ padding:20px 16px 10px; }
.case-note{ padding:14px 16px; }
}
/* /assets/mw-cine.v1.css */
/* ============================================================
* MW顧問所 · 電影感視覺精修層 mw-cine.v1.css
* ------------------------------------------------------------
* 載入順序最後，只做「視覺與可讀性」的精修：
* ‧ 不新增 / 不刪除 / 不移動任何 HTML 元素
* ‧ 不改變任何圖片、影片、超連結、CTA、導向的存在與位置
* ‧ 不使用 display:none 隱藏內容元素
* ‧ 不觸碰 meta / canonical / JSON-LD / sitemap 結構
* ============================================================ */
:root{
--cine-key:#c9a96a;
--cine-key-hi:#e8cf9d;
--cine-bone:#ece7db;
--cine-text:#d8d2c6;
--cine-mute:#a9a294;
--cine-hair:rgba(201,169,106,.20);
--cine-out:cubic-bezier(.16,1,.3,1);
--cine-gut:clamp(24px,5.2vw,56px);
}
/* 1. 構圖：四邊留白與最大欄寬 */
.wrap{
padding-inline:var(--cine-gut);
padding-inline:max(var(--cine-gut),env(safe-area-inset-left));
}
@media (min-width:1600px){ .wrap{max-width:1240px} }
.hero .lead,.sub,.kb-sum,.case-sum,.post-body p,.note p{max-width:74ch}
/* 2. 斷行：中文詞彙不被硬切、標點不落行首 */
h1,h2,h3,h4,.hero h1,.kb-title,.card h3{
text-wrap:balance;
line-break:strict;
overflow-wrap:normal;
}
@supports (word-break:auto-phrase){
h1,h2,h3,h4,.hero h1,.kb-title,.card h3{word-break:auto-phrase}
}
p,.lead,.sub,.kb-sum,.case-sum,li{
text-wrap:pretty;
line-break:strict;
hanging-punctuation:allow-end;
}
a,code,.f-legal,.spec .v{overflow-wrap:anywhere}
/* 3. 字級節奏（流體字階） */
.hero h1{font-size:clamp(28px,5.4vw,58px);line-height:1.26;letter-spacing:.01em}
.hero .lead{font-size:clamp(15px,1.35vw,17.5px);line-height:1.95}
.section h2{font-size:clamp(21px,2.6vw,34px);line-height:1.4}
.sub{font-size:clamp(14px,1.15vw,15.5px);line-height:1.9}
/* 關鍵字 H2 只留在原始碼供搜尋引擎與 AI 檢索器讀取，不佔版面 */
.mw-kw-h2{
position:absolute!important;width:1px!important;height:1px!important;
padding:0!important;margin:-1px!important;overflow:hidden!important;
clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;
}
/* 4. 對比：把偏灰的次要文字拉回可讀範圍 */
body{color:var(--cine-text)}
.sub,.kb-sum,.case-sum,.kb-meta,.note,.f-legal{color:var(--cine-mute)}
.post-body p,.post-body li{color:var(--cine-text)}
.eyebrow,.kicker{color:var(--cine-key)}
/* 5. 關鍵光：區塊頂端一道極輕的頂光，製造景深層次 */
.section{position:relative}
.section::before{
content:"";position:absolute;inset:0 0 auto;height:180px;pointer-events:none;
background:linear-gradient(180deg,rgba(201,169,106,.055),rgba(201,169,106,0));
opacity:.9;
}
.hero{position:relative;isolation:isolate}
.hero::after{
content:"";position:absolute;inset:auto 0 0;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,var(--cine-hair) 18%,var(--cine-hair) 82%,transparent);
}
/* 6. 卡片：更明確的邊、更柔的陰影 */
.card,.kb-card,.case,.spec,.note,.faq-card{
border-color:rgba(201,169,106,.16);
box-shadow:0 1px 0 rgba(255,255,255,.02) inset,0 18px 40px -32px rgba(0,0,0,.9);
transition:transform .34s var(--cine-out),border-color .34s var(--cine-out),box-shadow .34s var(--cine-out);
}
.card:hover,.kb-card:hover,.case:hover,.faq-card:hover{
transform:translateY(-1px);
border-color:rgba(201,169,106,.34);
box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 26px 54px -34px rgba(0,0,0,.95);
}
/* 7. CTA：只加強視覺回饋，不更動尺寸與位置 */
.cta,.go,a.cta,a.go{transition:color .24s var(--cine-out),border-color .24s var(--cine-out),background-color .24s var(--cine-out)}
.cta:hover,.go:hover{color:var(--cine-key-hi)}
.mw-cta-row{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:20px}
/* 8. 鍵盤可及性：清楚的焦點框 */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
outline:2px solid var(--cine-key-hi);
outline-offset:3px;
border-radius:2px;
}
/* 9. 導覽列：品牌與所有分頁連結一律維持在同一行 */
.nav-inner{
display:flex;align-items:center;flex-wrap:nowrap;
gap:clamp(10px,1.6vw,28px);
min-width:0;
}
.nav-inner > .brand,.nav-inner > a:first-child{flex:0 0 auto}
.nav-links{
display:flex;align-items:center;flex-wrap:nowrap!important;
gap:clamp(2px,.75vw,16px);
min-width:0;flex:0 1 auto;margin-inline-start:auto;
overflow-x:auto;overflow-y:hidden;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;-ms-overflow-style:none;
white-space:nowrap;
justify-content:flex-start;
}
.nav-links::-webkit-scrollbar{width:0;height:0;display:none}
.nav-links a{
flex:0 0 auto;white-space:nowrap;position:relative;
font-size:clamp(10.5px,1.02vw,13.5px);
padding-inline:clamp(3px,.55vw,10px);
letter-spacing:.01em;
}
@media (max-width:1240px){
.brand{font-size:clamp(13px,1.5vw,16px)}
.brand small{letter-spacing:.18em;font-size:7.5px}
.nav-links a{font-size:clamp(10.5px,1.06vw,12.5px);padding-inline:4px}
}
@media (max-width:900px){
.nav-inner{gap:10px}
.nav-links{gap:4px}
.nav-links a{font-size:10.5px;padding-inline:3px}
.brand{font-size:14px}
.brand small{font-size:7px;letter-spacing:.14em}
}
/* 窄螢幕：導覽列維持同一行，右緣淡出提示可橫向滑動 */
@media (max-width:760px){
.nav-links{
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
}
.kicker{font-size:10px;letter-spacing:.26em}
}
/* 10. 手機：卡片內距與圖片安全寬度 */
img,video,iframe,svg{max-width:100%;height:auto}
@media (max-width:560px){
.card,.kb-card,.case,.note,.spec,.faq-card{padding:20px 18px}
.section{padding-block:clamp(40px,9vw,60px)}
}
/* 11. 效能：首屏之外的區塊延後排版計算 */
.section:nth-of-type(n+3){content-visibility:auto;contain-intrinsic-size:auto 640px}
/* 12. 動態克制 */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* 13. 列印 */
@media print{
#mw-amb,.nav,.mw-linkband{display:none!important}
body{background:#fff;color:#000}
.section::before,.hero::after{display:none}
}
/* 14. 斷行：句中單一
已在建置階段改成換行；
這裡把成對
的分段在窄螢幕保留下來。 */
@media (max-width:900px){
.hero .lead br,.card p br,.sub br,.case-sum br,.kb-sum br,
.f-strong br,.f-legal br,.section p br,.note p br{display:inline}
.hero h1 br,h1 br,h2 br{display:none}
}
.hero .lead br + br,.section p br + br,.card p br + br{line-height:2.6}
/* ------------------------------------------------------------
* 15. 品牌識別細節：選取色、捲軸、清單記號、標題髮絲線、表格。
* 全部是純外觀，不影響任何內容與連結。
* ---------------------------------------------------------- */
::selection{background:rgba(201,169,106,.28);color:#fff}
::-moz-selection{background:rgba(201,169,106,.28);color:#fff}
html{scrollbar-width:thin;scrollbar-color:rgba(201,169,106,.45) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,rgba(201,169,106,.55),rgba(140,116,64,.45));
border-radius:8px;border:3px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(232,207,157,.7);background-clip:content-box}
/* 區塊標題下的髮絲線：短、偏左、不搶戲 */
.section > .wrap > h2{position:relative;padding-bottom:14px}
.section > .wrap > h2::after{
content:"";position:absolute;left:0;bottom:0;width:54px;height:1px;
background:linear-gradient(90deg,var(--cine-key),rgba(201,169,106,0));
}
/* 內文清單記號：細長刻度，密度接近印刷品 */
.post-body ul{list-style:none;padding-left:1.15em}
.post-body ul li{position:relative}
.post-body ul li::before{
content:"";position:absolute;left:-1.05em;top:.82em;
width:.55em;height:1px;background:var(--cine-key);opacity:.75;
}
/* 引用段落：左側細線＋略縮排 */
.post-body blockquote{
margin:22px 0;padding:2px 0 2px 18px;
border-left:1px solid rgba(201,169,106,.45);
color:var(--cine-bone);font-style:normal;
}
/* 文章首段稍微放大，建立閱讀入口 */
.post-body > p:first-of-type{font-size:1.06em;line-height:1.95}
/* 表格：細線、留白足，像研究報告而不是後台介面 */
.post-body table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.95em}
.post-body th,.post-body td{
border-bottom:1px solid rgba(201,169,106,.18);
padding:10px 12px;text-align:left;vertical-align:top;
}
.post-body th{color:var(--cine-key);font-weight:600;letter-spacing:.02em}
/* 頁尾：把三段資訊的層級拉開 */
footer .f-strong{letter-spacing:.01em}
footer .f-legal{font-size:12.5px;line-height:2;opacity:.9}
/* /assets/mw-rwd2.v1.css */
/*! MW顧問所 · RWD 收尾層 mw-rwd2.v1.css ， 四邊留白、行長控制、中文換行 */
:root{--pad-x:clamp(22px,5.6vw,72px);--pad-y:clamp(34px,5.2vw,72px)}.wrap,.post-wrap,.nav-inner{padding-inline:var(--pad-x);padding-inline:calc(var(--pad-x) + env(safe-area-inset-left)) calc(var(--pad-x) + env(safe-area-inset-right));box-sizing:border-box}@media(min-width:1200px){.wrap{max-width:1180px;margin-inline:auto}}@media(min-width:1600px){.wrap{max-width:1240px}}.section{padding-block:var(--pad-y)}.hero{padding-block:calc(var(--pad-y) * 1.35) calc(var(--pad-y) * .95)}footer{padding-block:calc(var(--pad-y) * .9) calc(var(--pad-y) * .8 + env(safe-area-inset-bottom))}.section>.wrap>h2{margin-top:0}.section>.wrap>.eyebrow,.section>.wrap>.kicker{margin-bottom:10px}.hero h1{margin-block:.18em .42em}.hero .lead{margin-block:0 1.1em}.card,.kb-card,.case,.faq-card,.note,.spec{margin-block:0}.kb-grid,.grid{gap:clamp(14px,1.8vw,22px)}.hero{scroll-margin-top:88px}.hero .lead{max-width:min(100%,64ch)}.sub,.note p,.f-strong{max-width:min(100%,68ch)}.post-body p,.post-body li{max-width:min(100%,42em)}.card p,.kb-sum,.case-sum{max-width:min(100%,60ch)}body{line-break:strict;overflow-wrap:break-word;word-break:normal;text-spacing-trim:trim-start}h1,h2,h3,h4,h5,.kb-title,.card h3{text-wrap:balance;line-break:strict;overflow-wrap:normal;word-break:keep-all}p,li,.lead,.sub,.kb-sum,.case-sum,dd,dt,figcaption{text-wrap:pretty;line-break:strict}@supports (word-break:auto-phrase){h1,h2,h3,h4,h5,.kb-title,.card h3,p,li,.lead,.sub{word-break:auto-phrase}}a[href^=http],code,kbd,samp,.f-legal,.spec .v{overflow-wrap:anywhere}html,body{overflow-x:hidden;max-width:100%}img,video,iframe,svg,table{max-width:100%}.hero .lead br+br,.section p br+br,.card p br+br,.note p br+br{line-height:2.9}@media(max-width:1024px){.hero h1{font-size:clamp(26px,4.6vw,44px);line-height:1.3}.section h2{font-size:clamp(20px,3.2vw,30px)}.kb-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}@media(max-width:640px){:root{--pad-x:clamp(20px,5.4vw,26px);--pad-y:clamp(30px,7.4vw,44px)}.hero h1{font-size:clamp(23px,6.6vw,30px);line-height:1.36;letter-spacing:0}.hero .lead{font-size:15px;line-height:1.92}.section h2{font-size:clamp(19px,5.4vw,24px);line-height:1.45}.sub{font-size:14px;line-height:1.9}.card,.kb-card,.case,.faq-card,.note,.spec{padding:20px 18px}.kb-grid{grid-template-columns:1fr}h1 br,h2 br,h3 br{display:none}.hero .lead br,.card p br,.sub br,.case-sum br,.kb-sum br,.f-strong br,.f-legal br,.section p br,.note p br{display:inline}}@media(max-width:380px){:root{--pad-x:18px}.hero h1{font-size:22px}}@media(max-height:520px)and (orientation:landscape){.hero{padding-block:34px 26px}.section{padding-block:34px}}
/* 2026-09-15 desktop width and mobile nav safety */
@media (min-width:900px){
.wrap,.post-wrap,.section>.wrap,.hero>.wrap,footer>.wrap{max-width:min(calc(100% - 64px),1180px);margin-inline:auto}
.hero .lead,.sub,.note p,.f-strong,.post-body p,.post-body li,.card p,.kb-sum,.case-sum{max-width:min(100%,90ch)}
.svc-brief,.svc-detail,.svc-outline{max-width:none}
}
@media (max-width:768px){
.nav-links{font-size:clamp(14px,2.2vw,16px)}
.mw-svc-top,.mw-svc-item>a{font-size:1em;font-weight:700}
}
.mw-svc-top,.mw-svc-item>a{position:relative}
.mw-svc-top::after,.mw-svc-item>a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:currentColor;transition:right .22s ease}
.mw-svc-top:hover::after,.mw-svc-top:focus-visible::after,.mw-svc-item>a:hover::after,.mw-svc-item>a:focus-visible::after{right:0}
/* 2026-09-15 desktop content width extension */
@media (min-width:900px){
.wrap,.post-wrap,.nav-inner,.section>.wrap,.hero>.wrap,footer>.wrap{width:100%;max-width:min(calc(100% - 96px),1320px)!important;margin-inline:auto}
.hero .lead,.sub,.note p,.f-strong,.post-body p,.post-body li,.card p,.kb-sum,.case-sum,.faq-a,.list li{max-width:min(100%,96ch)!important}
.section,.hero,footer{padding-inline:0}
.section>.wrap,.hero>.wrap,footer>.wrap{padding-inline:0}
}
@media (min-width:1440px){
.wrap,.post-wrap,.nav-inner,.section>.wrap,.hero>.wrap,footer>.wrap{max-width:min(calc(100% - 128px),1440px)!important}
}
/* /assets/mw-fx.v1.css */
/*! MW顧問所 · 互動層樣式 mw-fx.v1.css */
:root{--fx-key:#c9a96a;--fx-key-hi:#e8cf9d;--fx-out:cubic-bezier(.16,1,.3,1)}.mwfx-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,rgba(201,169,106,.15),var(--fx-key) 40%,var(--fx-key-hi));pointer-events:none;will-change:transform}.mwfx-rise{opacity:0;transform:translate3d(0,14px,0);transition:opacity .7s var(--fx-out) var(--mwfx-d,0ms),transform .7s var(--fx-out) var(--mwfx-d,0ms);will-change:opacity,transform}.mwfx-rise.mwfx-in{opacity:1;transform:none;will-change:auto}html:not(.mwfx-ready) .mwfx-rise{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.mwfx-rise{opacity:1;transform:none;transition:none}}.nav{transition:padding-block .3s var(--fx-out),background-color .3s var(--fx-out),box-shadow .3s var(--fx-out),backdrop-filter .3s var(--fx-out)}.nav.mwfx-nav-solid{background:#120f0cd1;-webkit-backdrop-filter:saturate(150%) blur(12px);backdrop-filter:saturate(150%) blur(12px);box-shadow:0 1px #c9a96a29,0 18px 40px -34px #000000e6}.section.mwfx-active>.wrap>h2:after{width:96px;transition:width .6s var(--fx-out)}.mwfx-mag{transform:translate3d(var(--mx,0),var(--my,0),0);transition:transform .28s var(--fx-out),color .24s var(--fx-out),border-color .24s var(--fx-out),box-shadow .28s var(--fx-out);position:relative}a.cta.mwfx-mag:hover,a.go.mwfx-mag:hover{box-shadow:0 10px 30px -18px #c9a96abf}a.cta,a.go{position:relative;overflow:hidden;isolation:isolate}a.cta:after,a.go:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(232,207,157,.16) 50%,transparent 65%);transform:translate(-120%)}a.cta:hover:after,a.go:hover:after{animation:mwfxSweep .85s var(--fx-out) 1}@keyframes mwfxSweep{to{transform:translate(120%)}}@media(prefers-reduced-motion:reduce){a.cta:hover:after,a.go:hover:after{animation:none}.mwfx-mag{transform:none}}.mwfx-glow{position:relative;isolation:isolate}.mwfx-glow:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s var(--fx-out);background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%),rgba(201,169,106,.1),transparent 62%)}.mwfx-glow:hover:before{opacity:1}.mwfx-top{position:fixed;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#171410b8;color:var(--fx-key);border:1px solid rgba(201,169,106,.34);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;z-index:55;opacity:0;transform:translateY(10px) scale(.94);pointer-events:none;transition:opacity .35s var(--fx-out),transform .35s var(--fx-out),border-color .25s var(--fx-out),color .25s var(--fx-out);font-size:17px;line-height:1}.mwfx-top.mwfx-show{opacity:1;transform:none;pointer-events:auto}.mwfx-top:hover{color:var(--fx-key-hi);border-color:#e8cf9da6}.mwfx-scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(90deg,#171410 20%,#17141000) left/28px 100% no-repeat,linear-gradient(270deg,#171410 20%,#17141000) right/28px 100% no-repeat}.mwfx-img{opacity:0;transition:opacity .5s var(--fx-out)}.mwfx-img.mwfx-img-in{opacity:1}html:not(.mwfx-ready) .mwfx-img{opacity:1}.post-body a:not(.cta):not(.go),.mw-inlink{background-image:linear-gradient(90deg,var(--fx-key),var(--fx-key));background-repeat:no-repeat;background-size:0% 1px;background-position:0 100%;transition:background-size .35s var(--fx-out),color .25s var(--fx-out)}.post-body a:not(.cta):not(.go):hover,.mw-inlink:hover{background-size:100% 1px}@media(prefers-reduced-motion:no-preference){.hero h1{animation:mwfxHero .9s var(--fx-out) both}.hero .kicker,.hero .eyebrow{animation:mwfxHero .8s var(--fx-out) .08s both}.hero .lead{animation:mwfxHero .9s var(--fx-out) .16s both}}@keyframes mwfxHero{0%{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}a.cta:active,a.go:active,.mwfx-top:active{transform:translateY(1px) scale(.99)}.mwnav-toggle{display:none}.nav.mwnav-rel{position:relative}@media(max-width:640px){.nav-inner{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:12px}.mwnav-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;flex:0 0 auto;width:44px;height:44px;margin-inline-start:auto;padding:0;background:#1714108c;border:1px solid rgba(201,169,106,.34);border-radius:11px;cursor:pointer;-webkit-tap-highlight-color:transparent}.mwnav-toggle:focus-visible{outline:2px solid #c9a96a;outline-offset:2px}.mwnav-bar{display:block;width:21px;height:2px;border-radius:2px;background:#c9a96a;transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .18s linear}.nav.mwnav-open .mwnav-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav.mwnav-open .mwnav-bar:nth-child(2){opacity:0}.nav.mwnav-open .mwnav-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.nav-links{position:absolute;left:0;right:0;top:100%;display:block!important;flex-wrap:wrap!important;justify-content:flex-start!important;gap:0!important;margin:0!important;padding:6px clamp(20px,5.4vw,28px) 14px!important;background:#14110e;border-top:1px solid rgba(201,169,106,.2);box-shadow:0 26px 52px -30px #000000f2;max-height:min(78vh,calc(100vh - 72px));overflow-x:hidden!important;overflow-y:auto!important;-webkit-mask-image:none!important;mask-image:none!important;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .26s cubic-bezier(.16,1,.3,1),transform .26s cubic-bezier(.16,1,.3,1),visibility .26s;z-index:70}.nav.mwnav-open .nav-links{opacity:1;visibility:visible;transform:none}.nav-links a{display:block!important;width:100%;padding:13px 2px!important;font-size:16px!important;line-height:1.5;white-space:normal!important;border-bottom:1px solid rgba(201,169,106,.11);transform:none!important}.nav-links a:last-child{border-bottom:0}.nav.mwnav-open{box-shadow:0 1px #c9a96a29}}@media print{.mwfx-progress,.mwfx-top{display:none!important}.mwfx-rise{opacity:1!important;transform:none!important}}
.mwfl{position:fixed;top:12px;right:12px;z-index:99990;font-family:inherit}
.mwfl-t{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:42px;height:42px;background:rgba(23,20,16,.72);border:1px solid rgba(201,169,106,.38);border-radius:11px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mwfl-b{width:20px;height:2px;background:#c9a96a;transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .2s}
.mwfl.mwfl-on .mwfl-b:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mwfl.mwfl-on .mwfl-b:nth-child(2){opacity:0}
.mwfl.mwfl-on .mwfl-b:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mwfl-m{position:absolute;top:50px;right:0;width:min(74vw,248px);max-height:min(72vh,520px);overflow-y:auto;background:#14110e;border:1px solid rgba(201,169,106,.22);border-radius:12px;padding:6px 0;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .24s cubic-bezier(.16,1,.3,1),transform .24s cubic-bezier(.16,1,.3,1),visibility .24s;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.mwfl.mwfl-on .mwfl-m{opacity:1;visibility:visible;transform:none}
.mwfl-m a{display:block;padding:11px 16px;color:#e8e2d6;text-decoration:none;font-size:14.5px;line-height:1.5;border-bottom:1px solid rgba(201,169,106,.1)}
.mwfl-m a:last-child{border-bottom:0}
.mwfl-m a:hover,.mwfl-m a:focus{background:rgba(201,169,106,.12);color:#f3c96a}
@media print{.mwfl{display:none!important}}
/* 12d. 平板（641至1024px）：維持原本一行式選單，但改為自動換行，
不再需要左右滑動，最後兩個項目也不會被切掉 */
@media(min-width:641px) and (max-width:1024px){
.nav-inner{flex-wrap:wrap!important;row-gap:6px;align-items:center}
.nav-links{flex-wrap:wrap!important;white-space:normal!important;overflow-x:visible!important;overflow:visible!important;row-gap:6px;column-gap:clamp(8px,1.7vw,16px);justify-content:flex-end;-webkit-mask-image:none!important;mask-image:none!important;min-width:0}
.nav-links a{font-size:12.5px!important;padding:4px 2px!important;white-space:nowrap}
}
/* 12e. 保險：641px 以上（平板與電腦）一律不出現三條橫槓，維持原本一行式選單 */
@media(min-width:641px){.mwnav-toggle{display:none!important}.nav-links{position:static!important;opacity:1!important;visibility:visible!important;transform:none!important;max-height:none!important;background:transparent!important;border-top:0!important;box-shadow:none!important}}
/* 13. 手機版（640px 以下）防溢版與斷句總則
任何長字串、表格、程式碼、圖片都不再撐破版面；
中文以詞為單位換行，標題平衡斷行，四邊留出安全間距。 */
@media(max-width:640px){
html,body{overflow-x:hidden!important;max-width:100%}
*{min-width:0}
.wrap,.post-wrap,.post-body,section,header,footer,article,.card,.kb-card{max-width:100%!important}
p,li,dd,dt,td,th,figcaption,blockquote,.kb-title,.kb-sum,.post-lede,.faq-q,.faq-a,.sub,.lead{overflow-wrap:anywhere;word-break:break-word;line-break:strict;text-wrap:pretty}
h1,h2,h3,h4{overflow-wrap:anywhere;text-wrap:balance;line-break:strict}
a{overflow-wrap:anywhere}
img,video,iframe,svg,canvas,object{max-width:100%!important;height:auto}
table,pre,code{max-width:100%}
pre,table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.grid,.grid.c3,.kb-grid,.lb-grid{display:grid!important;grid-template-columns:1fr!important;gap:12px}
.mw-cta-row{display:grid!important;gap:10px}
.mw-cta-row a{display:block;width:100%;text-align:center}
.wrap{padding-left:max(20px,env(safe-area-inset-left))!important;padding-right:max(20px,env(safe-area-inset-right))!important}
section,header.hero{padding-top:34px!important;padding-bottom:34px!important}
footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))!important}
.post-meta,.kb-meta{flex-wrap:wrap;row-gap:4px}
}
/* 14. 常見問題頁：問答排版 */
.faq-q{margin:26px 0 6px;font-size:clamp(16px,1.15vw,18px);line-height:1.5;color:#f0cf7d;font-weight:700}
.faq-q:first-of-type{margin-top:10px}
.faq-a{margin:0 0 4px;line-height:1.85;max-width:74ch}
.faq-a+.faq-q{border-top:1px solid rgba(201,169,106,.14);padding-top:22px}
@media(max-width:640px){
.faq-q{margin:20px 0 6px;font-size:16px}
.faq-a{line-height:1.8;max-width:none}
.faq-a+.faq-q{padding-top:18px}
}
/* ============================================================
* 15. 質感層：閱讀節奏、層次與細節
* 只調整排版節奏與顏色層次，不更動任何版位、連結與元件結構
* ============================================================ */
:root{--mw-gold:#c9a96a;--mw-ink:#d8d2c6;--mw-quiet:#a8a294}
/* 15a. 內文閱讀節奏：中文字級放大、行距加寬、段落留白一致 */
.section p,.post-body p,.post-body li,.faq-a,.list li{
font-size:15.5px;line-height:2.05;letter-spacing:.035em;
}
.post-body p+p{margin-top:1.05em}
.post-body ul,.post-body ol{margin:1.15em 0}
.post-body li+li{margin-top:.55em}
.list li+li{margin-top:.5em}
/* 15b. 前導句：略大一級，與正文拉開層次 */
.post-lede{font-size:17px;line-height:2.05;letter-spacing:.03em;color:var(--mw-ink)}
/* 15c. 卡片摘要：維持精簡，不與長文同節奏 */
.kb-sum{font-size:14.5px;line-height:1.9;letter-spacing:.03em}
/* 15d. 標題：字距收斂，下方一道漸隱金線 */
.section h2{letter-spacing:.045em;line-height:1.5}
.section h2::after{
content:"";display:block;width:44px;height:1px;margin-top:14px;
background:linear-gradient(90deg,var(--mw-gold),rgba(201,169,106,0));
}
.post-body h2{letter-spacing:.045em;line-height:1.55;margin-top:2.1em}
.post-body h2::after{
content:"";display:block;width:36px;height:1px;margin-top:12px;
background:linear-gradient(90deg,var(--mw-gold),rgba(201,169,106,0));
}
/* 15e. 常見問題：問題與答案的層次 */
.faq-q{letter-spacing:.03em;line-height:1.75}
.faq-a{color:var(--mw-quiet)}
/* 15f. 連結與選取：底線下移，選取色沿用品牌金 */
a{text-underline-offset:.24em;text-decoration-thickness:.6px}
::selection{background:rgba(201,169,106,.28);color:#fff}
/* 15g. 鍵盤操作的可見焦點（無障礙） */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
outline:1px solid var(--mw-gold);outline-offset:3px;border-radius:2px;
}
/* 15h. 手機版沿用同一套節奏，字級略收，維持四邊留白 */
@media(max-width:640px){
.section p,.post-body p,.post-body li,.faq-a,.list li{font-size:15px;line-height:2}
.post-lede{font-size:16px;line-height:2}
.kb-sum{font-size:14px;line-height:1.85}
.section h2::after,.post-body h2::after{width:34px;margin-top:12px}
}
/* ============================================================
* 16. 手機版與平板版：標題一律完整顯示、依原稿正常斷句
* 修正原因：舊規則 h1 br,h2 br,h3 br{display:none} 會把原稿寫好的
* 硬換行整個拿掉，窄螢幕的標題因此變成一長串；部分瀏覽器（iOS Safari）
* 在 text-wrap:balance + line-break:strict 下不再折行，標題就被切掉。
* ============================================================ */
@media(max-width:1024px){
/* 16a. 標題內的硬換行全部恢復，那是原稿寫好的正確斷句位置 */
h1 br,h2 br,h3 br,h4 br,
.hero h1 br,.post-h1 br,.kb-title br,.card h3 br,.faq-q br{
display:inline!important;
}
/* 16b. 標題必須能折行，任何瀏覽器都不得整行溢出被裁切 */
h1,h2,h3,h4,
.hero h1,.post-h1,.kb-title,.card h3,.faq-q,.eyebrow,.kicker{
white-space:normal!important;
text-wrap:pretty;
overflow-wrap:break-word!important;
word-break:normal!important;
line-break:strict!important;
max-width:100%!important;
hyphens:manual;
}
h1 *:not(.mw-w),h2 *:not(.mw-w),h3 *:not(.mw-w),h4 *:not(.mw-w),.hero h1 *:not(.mw-w),.post-h1 *:not(.mw-w){white-space:normal!important}
/* 16c. 內文同樣不得被裁切 */
p,li,dd,dt,figcaption,blockquote,.lead,.sub,.post-lede,.faq-a,.kb-sum{
white-space:normal!important;
overflow-wrap:break-word;
max-width:100%;
}
/* 16d. 首屏區塊只裁切裝飾光暈，文字區塊本身不設高度上限 */
.hero .wrap,.section .wrap{overflow:visible;max-height:none}
}
/* ============================================================
* 17. 依標點與詞彙斷句：句子與詞不會被切開，也不製造多餘換行
* mw-fx.v1.js 會用 Intl.Segmenter 把中文切成詞，套上 .mw-w；
* 這裡只負責讓詞內不換行，行與行之間仍照標點自然斷句。
* ============================================================ */
.mw-w{white-space:nowrap!important}
.mw-seg{display:inline-block}
.f-strong wbr + .mw-seg::before{content:"·";opacity:.5;margin:0 .45em}
/* 標點不落行首、行末不留孤字；瀏覽器不支援時自動忽略 */
p,li,dd,dt,blockquote,figcaption,
.lead,.sub,.post-lede,.faq-a,.faq-q,.kb-sum,.f-strong,.f-legal{
line-break:strict;
text-wrap:pretty;
}
h1,h2,h3,h4,.hero h1,.post-h1,.kb-title{line-break:strict}
/* ============================================================
* 18. 品牌名與 LOGO 同尺寸
* ============================================================ */
.brand{font-size:clamp(34px,2.75vw,46px);line-height:1.12}
.brand small{font-size:clamp(8px,.62vw,10px)}
@media(max-width:390px){.brand{font-size:30px}}
@media(max-width:340px){.brand{font-size:26px}}
/* ============================================================
* 20. 移除重複的回到頂端按鈕與閱讀進度條
* 網站本來就有一組，互動層再加一組會疊在一起。
* ============================================================ */
.mwfx-top{display:none!important}
.mwfx-progress{display:none!important}
/* ============================================================
* 21. 三種版型的閱讀行寬與字級
* 行寬太窄會製造大量不必要的換行；這裡依裝置給出合宜的行長與字級。
* ============================================================ */
/* 電腦版：一行約 42 個中文字，字級 16px */
@media(min-width:1025px){
.section p,.section li,.post-body p,.post-body li,
.faq-a,.list li,.card p,.note p{
max-width:44em!important;
font-size:16px!important;
line-height:2.05!important;
}
.lead,.sub,.post-lede{max-width:46em!important}
.post-lede{font-size:17.5px!important;line-height:2.05!important}
.faq-q{font-size:17px!important;line-height:1.7!important}
}
/* 平板版：一行約 34 個中文字，字級 15.5px */
@media(min-width:641px) and (max-width:1024px){
.section p,.section li,.post-body p,.post-body li,
.faq-a,.list li,.card p,.note p{
max-width:100%!important;
font-size:15.5px!important;
line-height:2.05!important;
}
.lead,.sub,.post-lede{max-width:100%!important}
.post-lede{font-size:16.5px!important;line-height:2.05!important}
.faq-q{font-size:16.5px!important;line-height:1.7!important}
}
/* 手機版：滿版行寬，字級 15px */
@media(max-width:640px){
.section p,.section li,.post-body p,.post-body li,
.faq-a,.list li,.card p,.note p,
.lead,.sub,.post-lede,.kb-sum{
max-width:100%!important;
}
.faq-q{font-size:16px!important;line-height:1.7!important}
}
/* ============================================================
* 22. 內容一律直接顯示
* 捲動揭示動畫曾造成整區內容看不見（觀察器未觸發，或元素離開視窗
* 之後又被藏起來），這裡一律強制顯示，確保每個分頁、每個區塊
* 在電腦、平板、手機上都看得到。
* ============================================================ */
.mwfx-rise,.lux-rv{opacity:1!important;transform:none!important;visibility:visible!important}
/* 23. 全站字體統一：微軟正黑體（含每個分頁、所有元素） */
:root{--mw-font:"Microsoft JhengHei","微軟正黑體","Microsoft JhengHei UI","PingFang TC","Heiti TC","Noto Sans TC","Noto Sans CJK TC","Helvetica Neue",Arial,sans-serif}
html,body{font-family:var(--mw-font)!important}
body *:not([class*="icon"]):not([class*="fa-"]):not([class*="material"]):not(svg):not(path):not(g):not(use):not(circle):not(rect):not(line):not(polygon){font-family:var(--mw-font)!important}
h1,h2,h3,h4,h5,h6,p,a,span,li,dt,dd,td,th,label,strong,em,b,i,small,blockquote,figcaption,cite,q,time,code,pre,kbd,samp,legend,summary{font-family:var(--mw-font)!important}
button,input,select,textarea,optgroup,option{font-family:var(--mw-font)!important}
::placeholder{font-family:var(--mw-font)!important}
/* 24. 導覽列自動縮放：確保所有連結（含最後的「聯絡」）永遠完整顯示，不被裁切 */
.nav-links.mw-navfit{column-gap:var(--mw-navgap)!important;gap:var(--mw-navgap)!important;flex-wrap:nowrap!important}
.nav-links.mw-navfit>a{font-size:var(--mw-navfs)!important;padding-left:var(--mw-navpad)!important;padding-right:var(--mw-navpad)!important;white-space:nowrap!important}
/* 25. 文字對比強化：所有內文、標籤與說明文字，在深色底上都拉到 WCAG AAA（≥7:1）以上，
最低對比由 4.10 提升到 7.40，主要內文由 6.12 提升到 9.05，標題層級維持不變。 */
:root{
--dim:#c2bcae!important;
--mw-quiet:#c9c3b5!important;
--cine-mute:#c9c3b5!important;
--lux-gold-lo:#c0a066!important;
--mw-gold-deep:#b8975c!important;
--mw2-gold-deep:#b8975c!important;
--cine-text:#e0dbd0!important;
--mw-ink:#e0dbd0!important;
}
/* ===== 26. 頁尾單行呈現 footer-oneline ===== */
footer .f-strong{ max-width:100% !important; }
footer .f-strong .mw-fbr{ display:block; }
@media (min-width:1024px){
footer .f-strong{ letter-spacing:0 !important; }
footer .f-legal{ letter-spacing:0 !important; }
}
@media (min-width:1024px) and (max-width:1279.98px){
footer .wrap{ padding-left:36px !important; padding-right:36px !important; }
footer .f-legal{ font-size:11.9px !important; }
}
/* ===== 27. 服務項目下拉選單 ===== */
@media (min-width:641px){ .nav-links{ overflow:visible !important; align-items:center !important; } }
.mw-svc{ position:relative; display:inline-flex; align-items:center; }
.mw-svc-top{
appearance:none; -webkit-appearance:none; background:transparent; border:0; cursor:pointer;
font:inherit; color:inherit; font-weight:700; letter-spacing:inherit;
padding:2px 3.04px; white-space:nowrap; line-height:inherit;
}
.mw-svc-top::after{ content:"\25BE"; margin-left:.3em; font-size:.8em; opacity:.8; }
.mw-svc-menu{
position:absolute; top:100%; left:50%;
transform:translateX(-50%) translateY(8px);
min-width:288px; padding:10px;
background:rgba(12,10,9,.98); border:2px solid #c9a96a; border-radius:10px;
box-shadow:0 18px 44px rgba(0,0,0,.55);
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .18s ease, transform .18s ease; z-index:140;
}
.mw-svc:hover .mw-svc-menu,
.mw-svc:focus-within .mw-svc-menu,
.mw-svc.mw-svc-open .mw-svc-menu{
opacity:1; visibility:visible; pointer-events:auto;
transform:translateX(-50%) translateY(2px);
}
.nav-links a.mw-svc-item{
display:block; position:relative; overflow:hidden;
padding:10px 12px 15px; margin:0 0 8px;
background:#141210; border:2px solid #c9a96a; border-radius:8px;
text-decoration:none;
}
.nav-links a.mw-svc-item:last-child{ margin-bottom:0; }
.mw-svc-t{ display:block; font-weight:700; font-size:1em; line-height:1.6; white-space:nowrap; }
.mw-svc-list{ display:block; margin-top:5px; }
.mw-svc-li{ display:block; font-size:.84em; line-height:1.8; opacity:.8; white-space:nowrap; }
.mw-svc-li::before{ content:"\30FB"; opacity:.7; }
.nav-links a.mw-svc-item::after{
content:""; position:absolute; left:12px; right:12px; bottom:7px; height:2px;
background:#c9a96a; transform:scaleX(0); transform-origin:left center;
transition:transform .3s ease;
}
.nav-links a.mw-svc-item:hover::after,
.nav-links a.mw-svc-item:focus-visible::after{ transform:scaleX(1); }
@media (max-width:640px){
.mw-svc{ display:block; width:100%; }
.mw-svc-top{ display:block; width:100%; text-align:inherit; }
.mw-svc-menu{ display:none; position:static; transform:none; min-width:0; width:100%; margin:6px 0 4px; box-shadow:none; }
.mw-svc:hover .mw-svc-menu, .mw-svc:focus-within .mw-svc-menu{ display:none; }
.mw-svc.mw-svc-open .mw-svc-menu{ display:block; opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.mw-svc-t, .mw-svc-li{ white-space:normal; }
}
@media (min-width:1280px){
.nav-links{ gap:13px !important; }
.nav-links > a, .mw-svc-top{ font-size:15.4px !important; padding:2px 5px !important; }
.mw-svc-menu{ min-width:320px; }
}
/* ===== 28. 三大服務分頁左右安全間距 ===== */
body.mw-svcpage .wrap{ padding-left:24px !important; padding-right:24px !important; }
@media (min-width:768px){ body.mw-svcpage .wrap{ padding-left:34px !important; padding-right:34px !important; } }
@media (min-width:1280px){ body.mw-svcpage .wrap{ padding-left:48px !important; padding-right:48px !important; } }
/* ===== 29. 頁尾社群 ICON 一律同一列 ===== */
footer .soc-row{
display:flex !important; flex-wrap:nowrap !important;
justify-content:center; align-items:center;
gap:clamp(6px,3vw,22px) !important;
}
footer .soc-row a{ flex:0 0 auto; display:inline-flex; }
footer .soc-row svg{ width:clamp(19px,5.2vw,30px) !important; height:auto !important; }
/* ===== 30. 預約諮詢表單 ===== */
.mw-form{ margin-top:14px; }
.mw-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.mw-form-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:768px){
.mw-form-grid{ grid-template-columns:1fr 1fr; gap:14px 18px; }
.mw-field-full{ grid-column:1 / -1; }
}
.mw-field{ margin:0; display:block; }
.mw-field label{ display:block; font-size:.86em; letter-spacing:.06em; opacity:.85; margin-bottom:6px; }
.mw-field label b{ color:#c9a96a; margin-left:.25em; font-weight:700; }
.mw-field input, .mw-field select, .mw-field textarea{
width:100%; box-sizing:border-box; font:inherit; color:inherit;
background:#141210; border:1.5px solid rgba(201,169,106,.55); border-radius:8px;
padding:11px 12px; line-height:1.6;
transition:border-color .2s ease, box-shadow .2s ease;
}
.mw-field textarea{ resize:vertical; min-height:132px; }
.mw-field input:focus, .mw-field select:focus, .mw-field textarea:focus{
outline:none; border-color:#c9a96a; box-shadow:0 0 0 3px rgba(201,169,106,.18);
}
.mw-form-note{ font-size:.84em; opacity:.8; margin-top:12px; }
.mw-form-act{ margin-top:14px; }
.mw-form-act .cta{ cursor:pointer; }
/* Fix: keep 服務項目 button font-size in sync with auto-fit nav font size */
.nav-links.mw-navfit .mw-svc-top{ font-size:var(--mw-navfs) !important; }
/* Fix: keep 服務項目 button font-size consistent on mobile (<640px) where JS auto-fit does not run */
@media(max-width:640px){
.mw-svc-top{ font-size:16px !important; }
}
/* Scroll progress bar */
#mwScrollProgress{
position:fixed; top:0; left:0; height:3px; width:0%;
background:linear-gradient(90deg, var(--gold,#c9a96a), #e3c88a);
z-index:999999; pointer-events:none;
transition:width .1s linear;
box-shadow:0 0 6px rgba(201,169,106,.5);
}
@media(max-width:640px){ #mwScrollProgress{ height:2.5px; } }
/* ===== 31. 最高級別安全遮罩（內容保護層）：CSS 層級防護，與 site.v3.js 事件層互補
即使訪客關閉 JavaScript，此層仍然生效，全站絡一阻擋選取、長按呼出菜單。
輸入框、選單、可編輯區域、連結與按鈕仍可正常選取與操作。 */
html,body{
-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
-webkit-touch-callout:none;
}
input,textarea,select,option,[contenteditable],[contenteditable="true"]{
-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;
-webkit-touch-callout:default;
}
img,svg{-webkit-user-drag:none;user-drag:none;}
@media print{
html,body{display:none!important;}
}
/* ============================================================
* 29. 手機版導覽修復（2026-09-22）
* 問題：漢堡按鈕由 JavaScript 產生，且舊規則在 JavaScript 就緒前
* 一律把按鈕隱藏，網路慢或腳本失敗時手機版就沒有選單入口，
* 退路又把導覽攤平成橫向捲動，窄螢幕會橫向溢出。
* 修法：按鈕改由 HTML 直接輸出、640px 以下一律顯示；
* 導覽不論 JavaScript 是否就緒都預設收合；
* 腳本還沒接手時，按鈕取得焦點即可純 CSS 展開。
* 選擇器刻意提高一層（.nav ...），才能壓過歷史合併檔裡的舊規則。
* 641px 以上完全不介入，桌機版版面維持原樣。
* ========================================================== */
@media (max-width:640px){
/* 29a. 漢堡按鈕：JavaScript 延遲或失敗時仍然看得到、按得到 */
.nav .nav-inner .mwnav-toggle,
html:not(.mwnav-ready) .nav .mwnav-toggle{
display:flex !important;
flex-direction:column; justify-content:center; align-items:center; gap:5px;
flex:0 0 auto; width:44px; height:44px; min-height:44px;
margin-inline-start:auto; padding:0;
background:rgba(23,20,16,.55); border:1px solid rgba(201,169,106,.34);
border-radius:11px; cursor:pointer; position:relative; z-index:71;
-webkit-tap-highlight-color:transparent;
}
.nav .nav-inner .mwnav-toggle:focus-visible{ outline:2px solid #c9a96a; outline-offset:2px; }
/* 29b. 導覽預設收合：JavaScript 未就緒也是收合的抽屜，不再橫向攤開 */
html:not(.mwnav-ready) .nav .nav-links{
position:absolute; left:0; right:0; top:100%;
display:block !important; flex-wrap:wrap !important; justify-content:flex-start !important;
gap:0 !important; margin:0 !important;
padding:6px clamp(20px,5.4vw,28px) 14px !important;
background:#14110e; border-top:1px solid rgba(201,169,106,.2);
box-shadow:0 26px 52px -30px rgba(0,0,0,.95);
max-height:min(78vh,calc(100vh - 72px));
overflow-x:hidden !important; overflow-y:auto !important;
-webkit-mask-image:none !important; mask-image:none !important;
z-index:70;
}
html:not(.mwnav-ready) .nav .nav-links a{
display:block !important; width:100%;
padding:13px 2px !important; font-size:16px !important; line-height:1.5;
white-space:normal !important; transform:none !important;
}
/* 29c. 收合與展開一律用 !important 宣告：
.nav .nav-links 帶有進場 animation，一般宣告會被動畫的結束值蓋掉。 */
.nav .nav-links{
opacity:0 !important; visibility:hidden !important;
transform:translateY(-10px) !important;
}
.nav.mwnav-open .nav-links,
html:not(.mwnav-ready) .nav:focus-within .nav-links{
opacity:1 !important; visibility:visible !important; transform:none !important;
}
}
/* 29d. 桌機版與平板版：按鈕隱藏、導覽維持原本水平排列，不受上面任何規則影響 */
@media (min-width:641px){
.nav .nav-inner .mwnav-toggle{ display:none !important; }
.nav .nav-links{
opacity:1 !important; visibility:visible !important; transform:none !important;
}
}
/* /assets/mw-mobile-only.v1.css */
/* mw-mobile-only.v1.css — 手機版專用（導覽字級、服務項目箭頭、預約諮詢樣式） */
@media (max-width:860px){
.nav-links a,.nav-links .mw-svc-top{font-size:16px!important;line-height:1.5!important;letter-spacing:.02em!important}
.nav-links .mw-svc{font-size:16px!important}
.nav-links .mw-svc-menu a,.nav-links .mw-svc-item{font-size:14.5px!important;line-height:1.5!important}
.nav-links .mw-navarrow{position:relative!important;display:block!important;padding-right:28px!important}
.nav-links .mw-navarrow::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.85;transition:transform .25s ease,margin-top .25s ease;pointer-events:none}
.nav-links .mw-svc.open .mw-navarrow::after{transform:rotate(225deg);margin-top:-2px}
.nav-links a.mw-navcta{background:none!important;background-image:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;color:#c9a96a!important;-webkit-text-fill-color:#c9a96a!important;text-align:left!important;padding:13px 2px!important;margin:0!important;width:auto!important;display:block!important;font-weight:700!important}
.nav-links a.mw-navcta:hover{color:#e8cf9d!important;-webkit-text-fill-color:#e8cf9d!important}
}
/* MW nav spacing: brand-to-link gap equals link-to-link gap, single row (desktop >=1181px) */
@media (min-width:1181px){html body nav.nav div.nav-inner.mw-navfix{justify-content:flex-start!important;column-gap:0!important}html body nav.nav div.nav-inner.mw-navfix>a.brand{margin-right:0!important}html body nav.nav div.nav-inner.mw-navfix>div.nav-links.mw-navfix.mw-navfit{column-gap:clamp(18px,calc(2.2vw - 9px),46px)!important;gap:clamp(18px,calc(2.2vw - 9px),46px)!important;margin-left:clamp(18px,calc(2.2vw - 9px),46px)!important}}
/* 768/1024 以下：連結帶與頁尾內層 .wrap 在父層已有內距時不再重複加寬，避免橫向溢位 */
@media (max-width:1024px){html body section.mw-linkband>.wrap,html body footer>.wrap{width:auto!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}}
/* 手機選單：移除「服務項目」左側金色菱形 */
@media(max-width:1180px){.nav .nav-links .mw-svc>.mw-svc-top::after,.nav .nav-links .mw-svc-top::after{display:none!important;content:none!important}}
/* UI 精修：眼眉標與分類標籤提高可讀性、鍵盤焦點可見、選取色統一品牌金 */
.eyebrow,.kicker,.tag,.lb-h{font-size:12px!important;opacity:1!important;color:#cfae6c!important}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #d9bb7d!important;outline-offset:3px!important}
::selection{background:rgba(217,187,125,.35);color:#fff}
/* 開場動畫與進度條：改為品牌藍金漸層，並只保留一條閱讀進度條 */
#mw-intro .mw-bd b{background:linear-gradient(90deg,#f6e3b4 0%,#d9bb7d 35%,#8fb0e6 70%,#c9d8f2 100%)!important;background-size:140% 100%!important;animation:mw-grad-flow 2.8s ease-in-out infinite alternate!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
#mw-intro .mw-bd small{background:linear-gradient(90deg,#8fb0e6,#d9bb7d);-webkit-background-clip:text;background-clip:text;color:transparent!important}
#mw-intro .mw-bar{height:3px!important;border-radius:3px;background:rgba(143,176,230,.14)!important}
#mw-intro .mw-bar i{border-radius:3px;background:linear-gradient(90deg,#3d5f9a 0%,#8fb0e6 35%,#d9bb7d 70%,#f6e3b4 100%)!important;box-shadow:0 0 10px rgba(217,187,125,.45)}
#mw-prog{height:3px!important;background:linear-gradient(90deg,#3d5f9a 0%,#8fb0e6 35%,#d9bb7d 70%,#f6e3b4 100%)!important;box-shadow:0 0 8px rgba(217,187,125,.35)}
.mwfx-progress,#mwScrollProgress{display:none!important}
@keyframes mw-grad-flow{0%{background-position:0% 0}100%{background-position:100% 0}}
#mw-intro .mw-rings i:nth-child(1){border-top-color:#8fb0e6!important;border-right-color:#d9bb7d!important}
#mw-intro .mw-rings i:nth-child(2){border-bottom-color:#d9bb7d!important;border-left-color:rgba(143,176,230,.6)!important}
/* 第二條閱讀進度條同步改為藍金漸層 */
html body .mwfx-progress{height:3px!important;background:linear-gradient(90deg,#3d5f9a 0%,#8fb0e6 35%,#d9bb7d 70%,#f6e3b4 100%)!important}
/* 漸層加強版：飽和藍金雙色，進度條加粗並以畫面寬度鋪色，避免只露出單一顏色 */
#mw-intro .mw-bd b{background:linear-gradient(90deg,#ffd166 0%,#f2b84b 35%,#6fa3ff 70%,#3d7bff 100%)!important;background-size:100% 100%!important;animation:none!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
#mw-intro .mw-bd small{background:linear-gradient(90deg,#3d7bff,#ffd166)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;opacity:1!important}
#mw-intro .mw-bar{height:5px!important;width:220px!important;border-radius:5px!important;background:rgba(111,163,255,.18)!important}
#mw-intro .mw-bar i{border-radius:5px!important;background:linear-gradient(90deg,#1e4fd8 0%,#5b9bff 35%,#ffd166 70%,#f5a623 100%)!important;background-size:220px 100%!important;box-shadow:0 0 14px rgba(91,155,255,.55),0 0 18px rgba(255,209,102,.45)!important}
@media (max-width:480px){#mw-intro .mw-bar{width:180px!important}#mw-intro .mw-bar i{background-size:180px 100%!important}}
html body #mw-prog,html body .mwfx-progress{height:4px!important;background:linear-gradient(90deg,#1e4fd8 0%,#5b9bff 35%,#ffd166 70%,#f5a623 100%)!important;background-size:100vw 100%!important;box-shadow:0 0 10px rgba(91,155,255,.5)!important}
#mw-intro .mw-rings i:nth-child(1){border-top-color:#5b9bff!important;border-right-color:#ffd166!important}
#mw-intro .mw-rings i:nth-child(2){border-bottom-color:#ffd166!important;border-left-color:#5b9bff!important}
/* 漸層第三版：高飽和藍青金橙四色、進度條加粗並帶流動光澤 */
@keyframes mw-bar-flow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
#mw-intro .mw-bd b{background:linear-gradient(90deg,#ffcc33 0%,#ff9a3c 33%,#3fa9ff 66%,#2f6bff 100%)!important;background-size:100% 100%!important;animation:none!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;font-size:26px!important}
#mw-intro .mw-bd small{background:linear-gradient(90deg,#2f6bff,#3fa9ff 50%,#ffcc33)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;opacity:1!important;font-weight:700!important}
#mw-intro .mw-bar{height:8px!important;width:240px!important;border-radius:8px!important;background:rgba(255,255,255,.08)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#mw-intro .mw-bar i{border-radius:8px!important;background:linear-gradient(90deg,#2f6bff,#00c2ff,#ffcc33,#ff7a00,#2f6bff)!important;background-size:200% 100%!important;animation:mw-bar-flow 1.6s linear infinite!important;box-shadow:0 0 16px rgba(0,194,255,.7),0 0 22px rgba(255,170,0,.55)!important}
@media (max-width:480px){#mw-intro .mw-bar{width:200px!important}}
html body #mw-prog,html body .mwfx-progress{height:6px!important;background:linear-gradient(90deg,#2f6bff,#00c2ff,#ffcc33,#ff7a00,#2f6bff)!important;background-size:200% 100%!important;animation:mw-bar-flow 2.4s linear infinite!important;box-shadow:0 0 12px rgba(0,194,255,.65),0 0 16px rgba(255,170,0,.5)!important}
#mw-intro .mw-rings i:nth-child(1){border-width:2.5px!important;border-top-color:#00c2ff!important;border-right-color:#ffcc33!important}
#mw-intro .mw-rings i:nth-child(2){border-width:2.5px!important;border-bottom-color:#ff7a00!important;border-left-color:#2f6bff!important}
/* ===== 31. 2026-10-02 依 WORD 檔八項前台 mw-word.v1 ===== */
/* 一 導覽列：毛玻璃、捲動收合、口號、底線 CTA */
html body nav.nav{-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);background:rgba(14,13,12,.72)!important;transition:padding .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s}
html.mww-shrunk body nav.nav{box-shadow:0 10px 30px rgba(0,0,0,.35)}
html.mww-shrunk body nav.nav .nav-inner{padding-top:4px!important;padding-bottom:4px!important}
html.mww-shrunk body nav.nav a.brand img.brandlogo{transform:scale(.84);transform-origin:left center}
html body nav.nav a.brand img.brandlogo{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
html body nav.nav a.brand small{letter-spacing:.06em!important;text-transform:none;white-space:nowrap}
html body nav.nav .nav-links a[href="/contact/"]{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:#f3e3bd!important;font-weight:700;padding-left:2px!important;padding-right:2px!important;text-decoration:none!important;background-image:linear-gradient(#e6c987,#e6c987)!important;background-repeat:no-repeat!important;background-size:100% 1px!important;background-position:0 calc(100% - 3px)!important}
/* 二 Hero：緩慢流動的暗色霧光 */
html body header.hero{position:relative;overflow:hidden;isolation:isolate}
html body header.hero::before{content:"";position:absolute;z-index:-1;inset:-40% -30%;pointer-events:none;background:radial-gradient(38% 46% at 24% 38%,rgba(38,58,112,.42),transparent 70%),radial-gradient(34% 42% at 72% 30%,rgba(74,44,104,.36),transparent 70%),radial-gradient(40% 40% at 55% 78%,rgba(24,40,84,.34),transparent 72%);filter:blur(28px);animation:mww-fog 46s ease-in-out infinite alternate}
@keyframes mww-fog{0%{transform:translate3d(-6%,-3%,0) rotate(0)}50%{transform:translate3d(5%,4%,0) rotate(6deg)}100%{transform:translate3d(-3%,6%,0) rotate(-5deg)}}
html body header.hero h1{font-family:"Noto Serif TC","Songti TC","PMingLiU",serif;font-weight:900}
html body header.hero p.mww-sub{font-size:clamp(18px,2.2vw,26px);line-height:1.6;color:#efe6d2;font-weight:700;letter-spacing:.08em;margin:.2em 0 1.1em;animation:mww-up 1.1s cubic-bezier(.22,.61,.36,1) .35s both}
@keyframes mww-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* 三 三大服務：交錯式階梯 */
@media(min-width:900px){
html body section.section .grid.c3.mww-stair{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px!important;align-items:start}
html body section.section .grid.c3.mww-stair>.card:nth-child(2){margin-top:64px}
html body section.section .grid.c3.mww-stair>.card:nth-child(3){grid-column:1/-1}
}
html body .grid.c3.mww-stair>.card{position:relative;overflow:hidden;transition:opacity .4s ease,background-color .4s ease,filter .4s ease,border-color .4s ease}
html body .grid.c3.mww-stair>.card>*{position:relative;z-index:1}
html body .grid.c3.mww-stair>.card::after{position:absolute;right:.08em;bottom:-.16em;z-index:0;font-family:"Noto Serif TC",serif;font-weight:900;font-size:clamp(72px,11vw,170px);line-height:1;color:rgba(201,169,106,.085);pointer-events:none;white-space:nowrap}
html body .grid.c3.mww-stair>.card:nth-child(1)::after{content:"11年"}
html body .grid.c3.mww-stair>.card:nth-child(2)::after{content:"80+"}
html body .grid.c3.mww-stair>.card:nth-child(3)::after{content:"13年"}
@media(hover:hover){
html body .grid.c3.mww-stair:hover>.card:not(:hover){opacity:.5;filter:saturate(.7)}
html body .grid.c3.mww-stair>.card:hover{background-color:rgba(201,169,106,.09);border-color:rgba(201,169,106,.5)}
}
/* 四 Bento */
html body .mww-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(140px,auto);gap:14px;margin-top:22px}
html body .mww-bento>*{border-radius:12px;background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 26px rgba(0,0,0,.35);border:1px solid rgba(201,169,106,.16);padding:clamp(18px,2.2vw,30px);min-width:0;display:flex;flex-direction:column;justify-content:flex-end;color:#e9e2d2;text-decoration:none}
html body .mww-bento .mww-a{grid-column:span 2;grid-row:span 2}
html body .mww-bento .mww-a b{font-family:"Noto Serif TC",serif;font-size:clamp(40px,6vw,84px);line-height:1;color:#e6c987;font-weight:900}
html body .mww-bento .mww-a span{font-size:clamp(16px,1.6vw,20px);line-height:1.7;margin-top:.5em;color:#e9e2d2}
html body .mww-bento .mww-n b{font-family:"Noto Serif TC",serif;font-size:clamp(34px,4vw,56px);line-height:1;color:#e6c987;font-weight:900}
html body .mww-bento .mww-n span{font-size:13.5px;line-height:1.7;margin-top:.5em;color:#cfc7b6}
html body .mww-bento .mww-c{flex-direction:row;gap:clamp(14px,2vw,30px);align-items:flex-end;justify-content:flex-start}
html body .mww-bento .mww-c>div{min-width:0}
html body .mww-bento .mww-c b,html body .mww-bento .mww-c span{display:block}
html body .mww-bento .mww-d{grid-column:span 2;justify-content:center}
html body .mww-bento .mww-d small{font-size:11px;letter-spacing:.2em;color:#a99a78}
html body .mww-bento .mww-d b{font-size:clamp(17px,1.9vw,24px);line-height:1.7;color:#f3ead6;margin-top:.4em}
@media(max-width:899px){html body .mww-bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){html body .mww-bento{grid-template-columns:1fr}html body .mww-bento .mww-a,html body .mww-bento .mww-d{grid-column:auto;grid-row:auto}}
/* 五 CTA */
html body section.mww-cta{background:#10161f;border-top:1px solid rgba(201,169,106,.18);border-bottom:1px solid rgba(201,169,106,.18);padding:clamp(48px,8vw,110px) 0}
html body section.mww-cta .mww-h{font-family:"Noto Serif TC",serif;font-size:clamp(21px,2.8vw,36px);line-height:1.7;font-weight:800;color:#f3ead6;max-width:25em;margin:0 0 1.3em}
html body section.mww-cta a.mww-btn{display:inline-flex;align-items:center;overflow:hidden;padding:.95em 1.9em;border-radius:6px;background:#1b2b47;color:#f3e3bd!important;font-weight:700;letter-spacing:.12em;text-decoration:none!important;background-image:none!important;border:1px solid rgba(230,201,135,.35);transition:padding .4s ease,background-color .4s ease}
html body section.mww-cta a.mww-btn i{font-style:normal;display:inline-block;max-width:0;opacity:0;transition:max-width .4s ease,opacity .4s ease,margin .4s ease}
html body section.mww-cta a.mww-btn:hover,html body section.mww-cta a.mww-btn:focus-visible{padding-right:2.6em;background:#22375b}
html body section.mww-cta a.mww-btn:hover i,html body section.mww-cta a.mww-btn:focus-visible i{max-width:1.6em;opacity:1;margin-left:.7em}
html body section.mww-cta small{display:block;margin-top:1.5em;font-size:12.5px;line-height:1.9;letter-spacing:.05em;color:#a8a08f}
@media(max-width:560px){html body section.mww-cta a.mww-btn{width:100%;justify-content:center;box-sizing:border-box}}
/* 六 微動效：底線由左至右延伸、由左至右收回 */
html body main a:not(.mww-btn):not(.card):not(.mww-a),html body section.section a.go,html body .mw-linkband a,html body footer p a,html body .mww-404 a{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0 1px;background-position:100% 100%;transition:background-size .4s ease,color .4s ease}
@media(hover:hover){html body main a:not(.mww-btn):not(.card):not(.mww-a):hover,html body section.section a.go:hover,html body .mw-linkband a:hover,html body footer p a:hover,html body .mww-404 a:hover{background-size:100% 1px;background-position:0 100%}}
html.mww-js .mww-rv{opacity:0;transform:translateY(14px)}
html.mww-js .mww-rv.mww-in{opacity:1;transform:none;transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
/* 七 頁尾 */
html body footer{border-top:1px solid rgba(255,255,255,.09)}
html body footer .mww-decl{font-family:"Noto Serif TC",serif;font-size:clamp(17px,1.9vw,23px);line-height:1.7;font-weight:800;color:#f3ead6;margin:0 0 18px;text-align:left}
html body footer .mww-end{font-size:12.5px;letter-spacing:.08em;color:#a99a78;text-align:center;margin:14px 0 0}
@media(prefers-reduced-motion:reduce){html body header.hero::before,html body header.hero p.mww-sub{animation:none}html.mww-js .mww-rv{opacity:1;transform:none}}
/* ===== 32. 2026-10-03 mw-word.v2 紅字與黃字修正 ===== */
/* 導覽列：尺寸與排列一載入就固定，不等 JS */
@media(min-width:1101px){
html body nav.nav .nav-inner{display:flex!important;align-items:center!important;flex-wrap:nowrap!important}
html body nav.nav .nav-links,html:not(.mwnav-ready) body nav.nav .nav-links{position:static!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:clamp(10px,calc(3.2vw - 22px),36px)!important;column-gap:clamp(10px,calc(3.2vw - 22px),36px)!important;margin:0 auto 0 clamp(10px,calc(3.2vw - 22px),36px)!important;width:auto!important;overflow:visible!important;background:none!important;padding:0!important;border:0!important;box-shadow:none!important}
html body nav.nav .nav-links>a,html body nav.nav .nav-links>.mw-svc,html body nav.nav .nav-links .mw-svc>a.mw-svc-top{font-size:clamp(13px,1.1vw,17px)!important;font-weight:700!important;letter-spacing:.02em!important;line-height:1.7!important;margin:0!important;white-space:nowrap!important;flex:0 0 auto!important}
html body nav.nav .nav-links>a,html body nav.nav .nav-links .mw-svc>a.mw-svc-top{padding:1px!important}
html body nav.nav .nav-links>a[href="/contact/"]{order:1}
html body nav.nav .nav-links>a[href="/faq/"],html body nav.nav .nav-links>a[href="/about/"],html body nav.nav .nav-links>a[href="/legal/"]{order:2}
html body nav.nav a.brand{flex:0 0 auto!important;margin-right:0!important}
}
@media(max-width:1100px){html:not(.mwnav-ready) body nav.nav .nav-links{display:none!important}}
html body nav.nav .nav-links a[href="/contact/"]{background:#1b2b47!important;background-image:none!important;padding:1px!important;border:0!important;border-radius:2px!important;box-shadow:none!important;color:#f3e3bd!important;-webkit-text-fill-color:#f3e3bd!important;text-decoration:none!important}
html body nav.nav a.brand small{font-size:clamp(11.5px,.95vw,14px)!important;font-weight:700!important;letter-spacing:.14em!important;text-transform:none!important;white-space:nowrap}
/* 導覽列捲動時固定在最上方 */
html.mww-fix body nav.nav{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:1200!important}
html.mww-fix body{padding-top:var(--mww-navh,98px)!important}
/* 首頁：核心工作原則、世界地圖 */
html body .mww-rulebox{border-radius:12px;background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 26px rgba(0,0,0,.35);border:1px solid rgba(201,169,106,.16);padding:clamp(20px,2.6vw,36px);margin-top:22px}
html body ol.mww-rules{margin:0;padding:0 0 0 1.5em;list-style:decimal;color:#f3ead6;font-size:clamp(16px,1.7vw,21px);line-height:2;font-weight:700}
html body ol.mww-rules li{padding-left:.3em;margin:0}
html body ol.mww-rules li::marker{color:#e6c987}
html body section.mww-map{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(28px,4vw,56px)}
html body section.mww-map img{display:block;width:100%;max-width:980px;height:auto;margin:0 auto;border-radius:12px;border:1px solid rgba(201,169,106,.16)}
/* 常見問題頁：諮詢按鈕移到左下 */
html body p.mw-cta-row2{margin:26px 0 64px!important;text-align:left!important}
/* 頁尾 */
html body footer .mww-decl,html body footer .mww-end,html body footer p.f-strong{display:none!important}
html body footer p.f-legal{text-align:left!important}
html body footer p.f-legal .mww-nl{display:block;margin-top:1em}
html body footer .mww-rows{margin-top:22px;text-align:left}
html body footer .mww-rows p{margin:0 0 8px!important;text-align:left!important;font-size:13.5px;line-height:1.9;white-space:nowrap}
html body footer .mww-rows p a{color:#e6c987}
@media(max-width:900px){html body footer .mww-rows p{white-space:normal}}
@media(min-width:1101px){html body nav.nav{min-height:118px}html.mww-shrunk body nav.nav{min-height:0}html body nav.nav .nav-inner{min-height:98px}html.mww-shrunk body nav.nav .nav-inner{min-height:0}}
@media(max-width:1100px){html body nav.nav{min-height:124px}html.mww-shrunk body nav.nav{min-height:0}html body footer .wrap,html body .mw-linkband .wrap{padding-left:20px!important;padding-right:20px!important;box-sizing:border-box}}
@media(max-width:480px){html body nav.nav{min-height:130px}}
/* ===== 33. 2026-10-03 mw-word.v2b 補強權重 ===== */
html body nav.nav.nav .nav-links.nav-links a[href="/contact/"][href],html body nav.nav.nav .nav-links.nav-links a.mw-navcta[href="/contact/"]{padding:1px!important;background:#1b2b47!important;background-image:none!important;border:0!important;border-radius:2px!important;box-shadow:none!important;color:#f3e3bd!important;-webkit-text-fill-color:#f3e3bd!important;text-decoration:none!important}
html body footer .wrap>p.f-social-links{display:none!important}
@media(max-width:1100px){
html body nav.nav.nav .nav-links.nav-links a,html body nav.nav.nav .nav-links.nav-links .mw-svc-top{font-size:16px!important;font-weight:700!important}
html body section.mw-linkband.mw-linkband>.wrap.wrap,html body footer>.wrap.wrap{padding-left:20px!important;padding-right:20px!important;box-sizing:border-box!important}
}
/* ===== 34. 2026-10-03 mw-word.v2c 頁尾聲明固定兩行 ===== */
html body footer .wrap>p.f-legal{display:none!important}
html body footer .mww-legal p{margin:0 0 .9em!important;text-align:left!important;font-size:12.5px;line-height:1.9;color:#a8a08f}
/* v3a legal notice + nav fixes */
@media(max-width:1100px){html body nav.nav .nav-links a.mw-navcta{padding:13px 2px}}
.mww-disc{box-sizing:border-box;width:100%;max-width:1120px;margin:0 auto;padding:clamp(28px,4vw,48px) clamp(20px,5vw,40px);text-align:left;color:#f1eadc}
.mww-disc .mww-disc-in{box-sizing:border-box;border:1px solid rgba(201,169,106,.24);border-left:4px solid #c9a96a;border-radius:10px;padding:clamp(16px,2.4vw,26px) clamp(16px,3vw,30px);background:rgba(201,169,106,.05)}
.mww-disc h2,.mww-disc h3{margin:0 0 10px;font-size:clamp(16px,1.5vw,19px);line-height:1.5;font-weight:700;letter-spacing:.04em}
.mww-disc p{margin:0 0 8px;font-size:clamp(13.5px,1.1vw,15px);line-height:1.9;overflow-wrap:anywhere;word-break:normal}
.mww-disc p:last-child{margin-bottom:0}
.mww-disc h2{color:#ecd6a6}.mww-disc a{color:#ecd6a6;text-decoration:underline;text-underline-offset:3px}
.mww-disc .mww-warn{font-weight:600}
html body section.mww-disc{display:block;padding:clamp(28px,4vw,48px) clamp(20px,5vw,40px)!important;margin:0 auto!important;position:relative;z-index:1}
/* v3b phone map first */
@media(max-width:767px){html.mww-mapfirst section.mww-map{padding-top:18px!important;margin-top:0!important}html.mww-mapfirst header.hero{padding-top:28px!important;margin-top:0!important;min-height:0!important}}
/* v4a nav: +2px type, wider even gaps, shifted left, CTA box 2px; map beside rules */
@media(min-width:1101px){html:root:root body nav.nav.nav.nav.nav .nav-links{gap:clamp(9px,calc(4.6vw - 36px),44px)!important;margin-left:-10px!important;margin-right:auto!important;flex-wrap:nowrap!important}
html:root:root body nav.nav.nav.nav.nav .nav-links>a,html:root:root body nav.nav.nav.nav.nav .nav-links .mw-svc-top{font-size:clamp(14px,calc(1.1vw + 2px),19px)!important;font-weight:700!important;white-space:nowrap}
html:root:root body nav.nav.nav.nav.nav .nav-links>a.mw-navcta{padding:2px!important}}
@media(min-width:768px){html.mww-side section.mww-map .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,3vw,52px);align-items:center}
html.mww-side section.mww-map img{max-width:100%!important;margin:0!important}
html.mww-side section.mww-data.mww-moved{display:none!important}
html.mww-side .mww-sidecol{min-width:0;text-align:left}
html.mww-side .mww-sidecol h2{margin-top:6px}}
/* v4b list buttons */
html body .kb-more-btn{text-align:left}
@media(min-width:701px){html body .kb-grid.kb-latest-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
html body .kb-grid>.kb-card{display:block!important}
html body .kb-grid.mww-topic{display:none!important}
html.mww-topicon body .kb-grid.mww-topic{display:grid!important}
html.mww-topicon body .kb-grid.kb-latest-grid:not(.mww-topic),html.mww-topicon body .kb-more-btn,html.mww-topicon body .kb-grid.kb-archive-grid{display:none!important}
/* /assets/mw-ux.v2.css */
/*! MW顧問所 · 版面與體驗修正層 mw-ux.v2.css
1 導覽列字級／粗細統一 2 閱讀欄寬與全寬文字修正 3 滾動進度條
4 安全遮罩樣式 5 服務項目分頁樣式
本檔只加規則、不改品牌色，載入順序排在 mw-bundle 之後。 */
:root{
--mwux-col: 100%;
--mwux-shield-bg: #0f0d0b;
}
/* ══ 1. 導覽列：每個項目同字級、同粗體 ══════════════════════
作法：字級一律繼承 .nav-links（保留原本的 RWD 級距），
只統一字重與字距；「預約諮詢」的金色膠囊按鈕維持原樣不動。 */
.nav-links > a,
.nav-links .mw-svc-top,
.nav-links > span > a,
.nav-links > span > button{
font-size:inherit !important;
font-weight:700 !important;
letter-spacing:.01em !important;
line-height:1.6 !important;
font-family:inherit !important;
}
/* 粗體之後字會變寬，補一點呼吸空間避免擠在一起 */
@media (min-width:641px){
.nav-links{ gap:clamp(9px,1.2vw,20px) !important; }
}
@media (min-width:1101px){
.nav-links{ gap:18px !important; }
}
/* 預約諮詢膠囊按鈕：明確保留底色、圓角與內距 */
.nav-links a[href="/contact/"]{
background:linear-gradient(135deg,var(--gold,#c9a96a),#e3c88a) !important;
color:var(--ink,#171410) !important;
font-weight:700 !important;
border-radius:999px !important;
box-shadow:0 2px 10px rgba(201,169,106,.35);
}
@media (min-width:1101px){
.nav-links a[href="/contact/"]{ padding:8px 21px !important; }
}
@media (min-width:641px) and (max-width:1100px){
.nav-links a[href="/contact/"]{ padding:6px 16px !important; }
}
@media (max-width:640px){
.nav-links a[href="/contact/"]{
padding:11px 18px !important;
margin:8px 0 4px !important;
text-align:center; justify-content:center;
border-bottom:0 !important;
}
}
.nav-links a[href="/contact/"]:hover{
transform:translateY(-1px);
box-shadow:0 4px 14px rgba(201,169,106,.5);
}
/* ══ 2. 閱讀欄寬：全站文字對齊同一欄，右側不再留下大片空白 ══
作法：文字類元素維持 45 字以內的行長，超大螢幕改用加大字級而不是加長行長；
同時把標題、清單、卡片格線收斂到同一個右邊界，並整欄置中。 */
@media (min-width:1025px){
.section .wrap > *,
.hero .wrap > *,
.mw-linkband .wrap > *,
.mw-cta-block .wrap > *{
max-width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
}
/* 巢狀在卡片、清單、規格表裡的文字，填滿各自的容器即可 */
.card p,.card .sub,.card h3,.kb-card p,.kb-card h3,
.list li,.lb-list li,.svc-outline li,.svc-detail p,.svc-detail li,
.spec .v,.spec .k,.row .v,.row .k,.kb-sum,.svc-compare td,.svc-compare th{
max-width:100% !important;
}
}
@media (min-width:1025px){ :root{ --mwux-col:760px; } }
@media (min-width:1280px){ :root{ --mwux-col:792px; } body{ font-size:16.6px; } }
@media (min-width:1600px){ :root{ --mwux-col:864px; } body{ font-size:18px; } }
@media (min-width:1920px){ :root{ --mwux-col:920px; } body{ font-size:19px; } }
/* 標題與內文共用同一條左緣、同一條右緣 */
@media (min-width:1025px){
.section h2,.section h3,.section .eyebrow,.hero h1,.hero .kicker{
max-width:100%;
margin-left:0;
margin-right:0;
text-align:left;
}
}
/* ══ 3. 滾動進度條：重新啟用（原設定被 display:none 停用） ══ */
.mwfx-progress{
display:block !important;
position:fixed; inset:0 0 auto 0;
height:3px; z-index:9000;
transform:scaleX(0); transform-origin:0 50%;
background:linear-gradient(90deg,rgba(201,169,106,.28),#c9a96a 46%,#ecd6a6);
box-shadow:0 0 10px rgba(201,169,106,.35);
pointer-events:none; will-change:transform;
}
@media print{ .mwfx-progress{ display:none !important; } }
@media (prefers-reduced-motion:reduce){ .mwfx-progress{ transition:none; } }
/* ══ 4. 安全遮罩 ═══════════════════════════════════════════ */
#mw-shield{
position:fixed; inset:0; z-index:2147483000;
display:none; align-items:center; justify-content:center;
background:var(--mwux-shield-bg);
-webkit-backdrop-filter:blur(22px) saturate(.6);
backdrop-filter:blur(22px) saturate(.6);
text-align:center; padding:24px;
}
html.mw-shielded #mw-shield{ display:flex; }
html.mw-shielded body > *:not(#mw-shield){
filter:blur(16px) brightness(.34);
pointer-events:none !important;
user-select:none !important;
}
#mw-shield .mw-shield-in{ max-width:min(92vw,460px); }
#mw-shield b{
display:block; font-family:var(--serif,"Noto Serif TC",serif);
font-size:clamp(18px,4.4vw,23px); color:#c9a96a;
letter-spacing:.18em; margin-bottom:14px; font-weight:700;
}
#mw-shield span{
display:block; color:#a09a8d; font-size:clamp(12px,3.2vw,14px);
letter-spacing:.1em; line-height:2;
}
#mw-shield .mw-shield-mark{
margin-top:18px; font-size:11px; letter-spacing:.26em; color:#6d675c;
}
/* 全站不可選取／不可拖曳，但輸入欄位與連結不受影響 */
body{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
input,textarea,select,option,[contenteditable="true"],.mw-selectable,
.mw-selectable *{ -webkit-user-select:text !important; user-select:text !important; }
img,svg{ -webkit-user-drag:none; user-drag:none; }
@media print{
html body{ display:none !important; }
}
/* ══ 5. 服務項目分頁 ═══════════════════════════════════════ */
.svc-card{
position:relative; margin:0 0 26px; padding:0;
background:linear-gradient(180deg,rgba(34,29,23,.72),rgba(23,20,16,.72));
border:1px solid rgba(201,169,106,.16);
border-left:3px solid #c9a96a;
}
.svc-head{ padding:26px clamp(18px,3vw,30px) 6px; }
.svc-tag{
display:inline-block; font-size:11px; letter-spacing:.26em;
color:#c9a96a; margin-bottom:10px;
}
.svc-head h3{ margin:0 0 8px; font-size:clamp(1.16rem,2.6vw,1.5rem); line-height:1.5; }
.svc-claim{ color:#c9a96a; font-weight:700; margin:0 0 14px; line-height:1.9; }
.svc-body{ padding:0 clamp(18px,3vw,30px) 8px; }
.svc-outline{ list-style:none; margin:0 0 6px; padding:0; }
.svc-outline li{
position:relative; padding:11px 0 11px 22px; line-height:1.9;
border-bottom:1px dashed rgba(201,169,106,.16);
}
.svc-outline li:last-child{ border-bottom:0; }
.svc-outline li::before{
content:""; position:absolute; left:2px; top:1.05em;
width:7px; height:7px; transform:rotate(45deg);
background:#c9a96a; opacity:.85;
}
.svc-outline li b{ color:#ece7db; }
.svc-more{
margin:8px 0 0; border-top:1px solid rgba(201,169,106,.14);
background:rgba(201,169,106,.03);
}
.svc-more > summary{
cursor:pointer; list-style:none; padding:16px clamp(18px,3vw,30px);
font-weight:700; letter-spacing:.06em; color:#ece7db;
display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.svc-more > summary::-webkit-details-marker{ display:none; }
.svc-more > summary::after{
content:"＋"; color:#c9a96a; font-size:18px; line-height:1;
transition:transform .26s cubic-bezier(.16,1,.3,1);
}
.svc-more[open] > summary::after{ content:"－"; }
.svc-more > summary:hover{ background:rgba(201,169,106,.06); }
.svc-more > summary:focus-visible{ outline:2px solid #c9a96a; outline-offset:-2px; }
.svc-detail{ padding:2px clamp(18px,3vw,30px) 24px; }
.svc-detail h4{
margin:20px 0 8px; font-size:1rem; color:#c9a96a;
letter-spacing:.08em; font-weight:700;
}
.svc-detail h4:first-child{ margin-top:8px; }
.svc-detail ul{ margin:0 0 6px; padding-left:1.15em; }
.svc-detail li{ line-height:1.95; margin-bottom:.5em; }
.svc-detail p{ line-height:1.95; margin:0 0 .9em; }
.svc-price{
display:flex; flex-wrap:wrap; gap:10px 22px; align-items:baseline;
margin:14px 0 0; padding:14px clamp(18px,3vw,30px);
border-top:1px solid rgba(201,169,106,.14);
}
.svc-price .pk{ font-size:11px; letter-spacing:.24em; color:#a09a8d; }
.svc-price .pv{ font-size:clamp(1.05rem,2.4vw,1.28rem); font-weight:700; color:#ecd6a6; }
.svc-foot{
display:flex; flex-wrap:wrap; gap:12px;
align-items:center;
padding:0 clamp(18px,3vw,30px) 26px;
}
.svc-compare{ width:100%; border-collapse:collapse; font-size:.95rem; }
.svc-compare th,.svc-compare td{
padding:12px 14px; text-align:left; vertical-align:top;
border-bottom:1px solid rgba(201,169,106,.14); line-height:1.85;
}
.svc-compare th{ color:#c9a96a; font-weight:700; letter-spacing:.06em; white-space:nowrap; }
.svc-wrapx{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (min-width:761px){
.svc-compare{ font-size:.88rem; table-layout:fixed; }
.svc-compare th,.svc-compare td{ vertical-align:middle; }
.svc-foot{ flex-wrap:nowrap; }
.mw-linkband .lb-list{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.mw-linkband .lb-list li{ border-bottom:0; padding-top:4px; padding-bottom:4px; }
}
@media (max-width:720px){
.svc-outline li{ padding-left:20px; }
.svc-foot .cta,.svc-foot .go{ width:100%; text-align:center; }
}
/* 2026-09-16 redbox review: service actions and footer reading lists */
@media (min-width:761px){
.svc-foot{ flex-wrap:nowrap; align-items:stretch; }
.svc-foot .cta{ flex:0 1 auto; white-space:nowrap; }
.svc-foot .go{ flex:0 0 auto; white-space:nowrap; align-self:center; }
.mw-cta-row{ display:flex; flex-wrap:nowrap; align-items:center; gap:14px; }
.mw-cta-row .go,.mw-cta-row .cta{ white-space:nowrap; flex:0 1 auto; }
}
.mw-linkband .lb-list{ display:block !important; }
.mw-linkband .lb-list li{ display:block; width:100%; }
footer .f-strong{ margin-bottom:8px; }
footer .f-legal{ margin-top:8px; }
/* ══ 6. 詞彙不斷行的保險：單一詞段若超出容器寬度，仍允許緊急換行 ══
mw-fx.v1.js 會用 Intl.Segmenter 把中文切詞並套上 .mw-w（white-space:nowrap），
遇到超長的英數或專有名詞時會突出容器；改用 keep-all + break-word：
詞內一樣不會被拆開，但真的塞不下時不會撐破版面。 */
.mw-w{
white-space:normal !important;
word-break:keep-all !important;
overflow-wrap:break-word !important;
max-width:100%;
}
/* ══ 7. 行動裝置的觸控目標：主要可點元素至少 40px 高 ══ */
@media (max-width:720px){
.nav-links a,.cta,.go,.kb-chip,.kb-hit,.svc-more > summary,
.soc-row a,.mwnav-toggle,.mwfx-top,.post-back a,.mw-cta-row a{
min-height:40px;
display:inline-flex;
align-items:center;
}
.nav-links a,.svc-more > summary{ display:flex; }
}
/* ══ 8. 服務對照表：窄螢幕改成堆疊卡片，不需要左右拖動 ══ */
@media (max-width:640px){
.svc-compare,.svc-compare tbody,.svc-compare tr,.svc-compare td{ display:block; width:100%; }
.svc-compare thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.svc-compare tr{
margin:0 0 14px; padding:14px 16px;
border:1px solid rgba(201,169,106,.18); border-left:3px solid #c9a96a;
background:rgba(34,29,23,.5);
}
.svc-compare td{ border-bottom:0; padding:6px 0; }
.svc-compare td::before{
content:attr(data-th); display:block;
font-size:11px; letter-spacing:.22em; color:#c9a96a; margin-bottom:3px;
}
.svc-wrapx{ overflow-x:visible; }
}
/* ══ 9. 卡片格線不得被欄寬夾死（/cases/ 於 1440 曾溢出容器） ══ */
.kb-grid,.grid,.lb-grid{ min-width:0; }
.kb-card,.card,.faq-card,.svc-card,.lb-col{ min-width:0; max-width:100%; }
@media (min-width:1025px){
.kb-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)) !important; }
}
@media (max-width:760px){
.kb-grid,.grid,.grid.c2,.grid.c3,.lb-grid{ grid-template-columns:1fr !important; }
}
/* ══ 10. 導覽列「服務項目」：伺服器端已改成 ，字體與其他項目一致 ══
作法：連結版與舊按鈕版共用同一組字級／字重規則，避免 繼承到不同的預設樣式。 */
.nav-links .mw-svc > a.mw-svc-top,
.nav-links a.mw-svc-top{
font-size:inherit !important;
font-weight:700 !important;
letter-spacing:.01em !important;
line-height:1.6 !important;
font-family:inherit !important;
text-decoration:none;
color:var(--dim,#a09a8d);
}
.nav-links a.mw-svc-top:hover{ color:var(--gold,#c9a96a); }
.nav-links a.mw-svc-top.on{
color:var(--bone,#ece7db);
border-bottom:0;
padding-bottom:2px;
}
.nav-links a.mw-svc-top:focus-visible{ outline:2px solid var(--gold,#c9a96a); outline-offset:2px; }
/* 下拉只留三個服務名稱，不再顯示子項目清單 */
.mw-svc-list{ display:none !important; }
/* ══ 11. 服務區塊「大綱」卡片：金色左邊框、圓角、項目符號「・」 ══ */
.svc-brief{
margin:0 clamp(18px,3vw,30px) 4px;
padding:14px clamp(14px,2vw,20px);
background:rgba(201,169,106,.05);
border:1px solid rgba(201,169,106,.16);
border-left:4px solid #c9a96a;
border-radius:10px;
min-width:0;
}
.svc-brief-h{
margin:0 0 6px;
font-size:11px; letter-spacing:.24em; font-weight:700;
color:#c9a96a;
}
.svc-brief-list{ list-style:none; margin:0; padding:0; }
.svc-brief-list li{
position:relative;
padding-left:1.25em;
line-height:1.9;
overflow-wrap:break-word;
}
.svc-brief-list li::before{
content:"\30FB";
position:absolute; left:0; top:0;
color:#c9a96a; opacity:.85;
}
@media (max-width:640px){
.svc-brief{ margin-inline:clamp(14px,4vw,18px); padding:12px 14px; }
.svc-brief-list li{ font-size:14px; }
}
/* 2026-09-18：截圖指定的手機版導覽修正，640px 以上完全不介入。 */
@media (max-width:640px){
.nav .nav-links a,.nav .nav-links .mw-svc-top,.nav .nav-links .mw-svc-item{
font-size:17px !important; line-height:1.55 !important; text-align:left !important;
justify-content:flex-start !important; min-height:44px; padding:14px 4px !important;
border-bottom:1px solid rgba(201,169,106,.18) !important; border-radius:0 !important;
box-sizing:border-box;
}
.nav .nav-links .mw-svc{ display:block; width:100%; }
.nav .nav-links .mw-svc > .mw-svc-top{ position:relative; padding-right:42px !important; }
.nav .nav-links .mw-svc > .mw-svc-top::after{
content:""; position:absolute; right:9px; top:50%; width:10px; height:10px; margin-top:-7px;
border-right:2px solid #d9bb7d; border-bottom:2px solid #d9bb7d; transform:rotate(45deg);
transition:transform .2s ease;
}
.nav .nav-links .mw-svc > .mw-svc-top[aria-expanded="true"]::after{ margin-top:-2px; transform:rotate(225deg); }
.nav .nav-links a[href="/contact/"]{
background:none !important; background-image:none !important; color:#d9bb7d !important;
font-weight:700 !important; box-shadow:none !important; border:0 !important;
border-bottom:1px solid rgba(201,169,106,.28) !important; border-radius:0 !important;
text-align:left !important; justify-content:flex-start !important; width:100% !important;
}
}
/* ══ 11. 2026-09 調整：新知格線 / 品牌標語位置 / 首屏進場動畫 ══ */
/* 11-1 新知列表：固定 2 欄（最新 10 篇 → 橫 2 × 直 5） */
@media (min-width:861px){
.kb-grid{ grid-template-columns:repeat(2,1fr) !important; }
}
/* 11-2 品牌區：INTEGRITY PRECISION 移到 LOGO＋MW顧問所 下方（字級不動） */
.nav .brand{ flex-wrap:wrap !important; row-gap:0 !important; }
.nav .brand small{ flex:0 0 100% !important; width:100% !important; display:block !important; margin-top:1px !important; }
/* 11-3 首屏進場動畫：純 CSS，第一幀就播，完全不等 JS */
@keyframes mwIntroRise{ from{ opacity:0; transform:translate3d(0,16px,0); } to{ opacity:1; transform:none; } }
.nav .brand{ animation:mwIntroRise .55s cubic-bezier(.22,.61,.36,1) both; }
.nav .nav-links{ animation:mwIntroRise .55s cubic-bezier(.22,.61,.36,1) .08s both; }
.hero h1{ animation:mwIntroRise .8s cubic-bezier(.22,.61,.36,1) .1s both; }
.hero .lead{ animation:mwIntroRise .8s cubic-bezier(.22,.61,.36,1) .22s both; }
.hero .eyebrow,.hero .kicker,.hero .tag{ animation:mwIntroRise .7s cubic-bezier(.22,.61,.36,1) .04s both; }
/* 把首屏元素排除在 JS 動畫之外，消除「先出現、一秒後重播」 */
.hero h1.mwfx-rise,.hero .lead.mwfx-rise,
.hero .eyebrow.mwfx-rise,.hero .kicker.mwfx-rise,.hero .tag.mwfx-rise,
.nav .brand.mwfx-rise,.nav .nav-links.mwfx-rise{
opacity:1 !important; transform:none !important; transition:none !important;
}
@media (prefers-reduced-motion:reduce){
.nav .brand,.nav .nav-links,.hero h1,.hero .lead,
.hero .eyebrow,.hero .kicker,.hero .tag{ animation:none !important; }
}
/* 11-4 桌機版「預約諮詢」按鈕：只縮小外框，字級維持不變。
選擇器用 [href="/contact/"]，不依賴 JS 後加的 class，避免載入一秒後才縮。 */
@media (min-width:1101px){
.nav .nav-links a[href="/contact/"],
.nav .nav-links a.mw-navcta{
padding:4px 15px !important;
line-height:1.4 !important;
border-radius:999px !important;
}
}
@media (min-width:861px) and (max-width:1100px){
.nav .nav-links a[href="/contact/"],
.nav .nav-links a.mw-navcta{
padding:3px 12px !important;
line-height:1.4 !important;
border-radius:999px !important;
}
}
/* 2026-09-21 final merge: official logo, mobile brand lockup and latest ten */
.brandlogo{ width:64px !important; height:64px !important; object-fit:contain; }
@media (max-width:640px){
.nav-inner{ align-items:center; padding:10px 18px !important; gap:12px; }
.brand{ display:grid !important; grid-template-columns:70px minmax(0,1fr); grid-template-rows:auto auto;
column-gap:10px; align-items:center; min-width:0; }
.brandlogo{ grid-column:1; grid-row:1 / span 2; width:70px !important; height:70px !important; }
.brand small{ display:block !important; grid-column:2; grid-row:2; flex:initial !important; width:auto !important;
font-size:9px !important; letter-spacing:.22em !important; white-space:nowrap; margin-top:2px !important; }
.nav-links a[href="/contact/"]{ background:none !important; color:#d9bb7d !important;
border-radius:0 !important; box-shadow:none !important; padding:15px 6px !important;
margin:8px 0 4px !important; text-align:left !important; justify-content:flex-start !important; }
.nav-links a[href="/contact/"]:hover{ transform:none; box-shadow:none !important; }
}
.kb-latest-heading,.kb-archive-heading{ margin-top:28px; color:#c9a96a; font-weight:700; letter-spacing:.12em; }
.kb-latest-grid,.kb-archive-grid{ margin-top:16px !important; }
@media (min-width:1101px){ .kb-latest-grid,.kb-archive-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:1100px){ .kb-latest-grid,.kb-archive-grid{ grid-template-columns:1fr !important; } }
@media (min-width:1101px){ .nav-links a[href="/contact/"]{ padding:5px 14px !important; font-size:inherit !important; } }
/* ══ 12. 2026-09 全站排版修正（手機／平板／桌機共用） ══ */
/* 12-1 內文換行：中文正常排滿整行，不再因「不可拆的詞塊」提早斷行；
標點（，。、：）不落在行首；段落最後一行不留孤字 */
body :is(p, li, dd, dt, td, th, blockquote, figcaption, label, .lead, .post-lede, .kb-card p) {
word-break: normal !important;
line-break: strict !important;
overflow-wrap: break-word !important;
white-space: normal !important;
text-wrap: pretty !important;
}
body :is(p, li, dd, dt, td, th, blockquote, figcaption, label, .lead, .post-lede, .kb-card p) :is(.mw-w, strong, b, em, a, span) {
word-break: normal !important;
white-space: normal !important;
}
/* 12-2 標題：詞不拆開、各行長度平均，避免「不／安。」這種孤字 */
:is(h1, h2, h3, h4, .post-h1) { text-wrap: balance !important; line-break: strict !important; }
:is(h1, h2, h3, h4, .post-h1) .mw-w { white-space: nowrap !important; word-break: keep-all !important; }
/* 12-3 內文連結底線：貼齊文字、長度等於文字（保留原本的點擊範圍） */
a.mw-inlink, .post-body a:not(.cta):not(.go) {
background-origin: content-box !important;
background-clip: content-box !important;
background-position: 0 100% !important;
}
/* 12-4 連結只保留一條貼字底線：關掉被內距推遠的假元素線與淡邊框 */
a.mw-inlink::before { display: none !important; }
/* 12-5 內文連結一律跟段落同字級、不加左右空白，底線貼齊文字。
不影響：按鈕型 .go / .cta / .btn，以及導覽列、頁尾、延伸閱讀區的連結 */
:is(p, li, td, dd, blockquote):not(nav *):not(footer *):not(.mw-linkband *):not(.nav *) a:not(.go):not(.cta):not(.btn) {
padding: 0 !important;
font-size: inherit !important;
line-height: inherit !important;
border-bottom: 0 !important;
background-image: none !important;
text-decoration: underline !important;
text-decoration-color: rgba(201, 169, 106, .8) !important;
text-decoration-thickness: 1px !important;
text-underline-offset: .28em !important;
}
:is(p, li, td, dd, blockquote):not(nav *):not(footer *):not(.mw-linkband *):not(.nav *) a:not(.go):not(.cta):not(.btn)::before,
:is(p, li, td, dd, blockquote):not(nav *):not(footer *):not(.mw-linkband *):not(.nav *) a:not(.go):not(.cta):not(.btn)::after { display: none !important; }
/* 13. 2026-09-27 案例/新知列表收合 + 平板桌機導航列間距 */ .kbm-t{display:none!important} .kbm-t:not(:checked)+.kb-more-btn+.kb-archive-grid{display:none!important} .kbm-t:checked+.kb-more-btn{display:none!important} .kb-more-btn{display:block;width:max-content;max-width:100%;margin:22px auto 8px;padding:11px 26px;border:1px solid rgba(201,169,106,.7);border-radius:999px;color:#c9a96a;font-size:15px;letter-spacing:.06em;cursor:pointer;text-align:center;background:transparent;transition:background .2s,color .2s} .kb-more-btn:hover,.kb-more-btn:focus-visible{background:#c9a96a;color:#0f1c2e} @media (min-width:861px){.nav .nav-inner{padding-left:clamp(16px,1.8vw,32px)!important;padding-right:clamp(16px,1.8vw,32px)!important;max-width:min(100% - 24px,1480px)!important}.nav .nav-links{flex-wrap:nowrap!important}} @media (min-width:861px) and (max-width:1060px){.nav .nav-links{gap:26px!important;column-gap:26px!important}} @media (min-width:1061px){.nav .nav-links{gap:clamp(12px,1.1vw,18px)!important;column-gap:clamp(12px,1.1vw,18px)!important;margin-left:clamp(24px,2.4vw,44px)!important}}
/* 2026-09-28 v3：平板維持單列品牌列，桌機品牌與各導覽項目採一致間距。 */
@media (min-width:641px) and (max-width:1100px){
.nav{position:relative}
.nav .nav-inner{display:flex;flex-wrap:nowrap;align-items:center;gap:0;min-height:76px;padding:10px clamp(18px,3vw,32px)!important}
.nav .brand{flex:1 1 auto;min-width:0;flex-wrap:nowrap!important;column-gap:10px!important;row-gap:0!important;white-space:nowrap}
.nav .brand small{flex:0 0 auto!important;width:auto!important;display:block!important;margin:0 0 0 4px!important;font-size:9px!important;letter-spacing:.16em!important;white-space:nowrap}
.nav .nav-inner .mwnav-toggle{display:flex!important;flex:0 0 44px;width:44px;height:44px;min-height:44px;margin-inline-start:16px;padding:0;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:rgba(23,20,16,.55);border:1px solid rgba(201,169,106,.34);border-radius:11px;cursor:pointer;position:relative;z-index:71}
.nav .nav-inner .mwnav-toggle span{display:block;width:20px;height:2px;background:#f1eadc;border-radius:2px}
.nav .nav-links{position:absolute;left:0;right:0;top:100%;display:block!important;margin:0!important;padding:8px clamp(22px,5vw,40px) 16px!important;opacity:0!important;visibility:hidden!important;transform:translateY(-10px)!important;pointer-events:none;background:#14110e;border-top:1px solid rgba(201,169,106,.2);box-shadow:0 26px 52px -30px rgba(0,0,0,.95);z-index:70}
.nav.mwnav-open .nav-links{opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto}
.nav .nav-links a{display:block!important;width:100%;padding:13px 2px!important;font-size:16px!important;line-height:1.5;white-space:normal!important;border-bottom:1px solid rgba(201,169,106,.18)}
.nav .nav-links .mw-svc{display:block;width:100%}
.nav .nav-links .mw-svc-top{padding-right:40px!important}
}
@media (min-width:1101px){
.nav .nav-inner{display:flex;flex-wrap:nowrap;align-items:center;gap:0!important;padding-inline:clamp(22px,2.4vw,40px)!important}
.nav .brand{flex:0 0 auto;min-width:0;margin-right:clamp(18px,1.8vw,28px);flex-wrap:wrap!important;white-space:nowrap}
.nav .brand small{flex:0 0 100%!important;width:100%!important;display:block!important;margin-top:1px!important}
.nav .nav-links{flex:0 1 auto;margin-left:0!important;gap:clamp(18px,1.8vw,28px)!important;column-gap:clamp(18px,1.8vw,28px)!important;flex-wrap:nowrap!important;white-space:nowrap}
}
/* 2026-09-28 v3b：覆蓋歷史 641 至 1024px 換行規則，確保平板單列且選單收合。 */
@media (min-width:641px) and (max-width:1100px){
.nav .nav-inner{flex-wrap:nowrap!important;}
.nav .nav-links{position:absolute!important;top:100%!important;left:0!important;right:0!important;width:auto!important;display:block!important;flex:0 0 auto!important;flex-wrap:nowrap!important;}
.nav:not(.mwnav-open) .nav-links{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(-10px)!important;}
.nav.mwnav-open .nav-links{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;}
}
/* 2026-09-28 v5：平板與桌機維持單列，品牌、漢堡與導覽項目採一致且略放大的間隔。 */
@media (min-width:641px) and (max-width:1100px){
.nav .nav-inner{gap:24px!important;}
.nav .nav-inner .mwnav-toggle{margin-inline-start:0!important;}
}
@media (min-width:1101px){
.nav .nav-inner{gap:0!important;}
.nav .brand{margin-right:28px!important;}
.nav .nav-links{gap:28px!important;column-gap:28px!important;}
}
/* 2026-09-30：RWD 最終安全邊界。
環境光是純裝飾，不能參與文件寬度；延伸閱讀帶可能位於巢狀 .wrap，
其內層版心必須以父層內容寬度計算，避免 padding 被重複加總。 */
#mw-amb{overflow:hidden!important;}
.mw-linkband > .wrap{
width:100%!important;
max-width:100%!important;
margin-inline:0!important;
box-sizing:border-box!important;
}