/* Q906：高客單知識頁共用樣式。版型沿用 Q855（page-q855.css），只用名片配色：寶藍 #193e82、橘 #d97827、白。橘色只當邊框與底色，文字一律寶藍或深藍，對比達 AA。 */
:root{--blue:#193e82;--orange:#d97827;--ink:#182b47;--muted:#4a5a72;--line:#d9e2ec;--paper:#fff;--wash:#f3f6fa;--pale:#fff3e8;--radius:18px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;color:var(--ink);background:var(--paper);font:17px/1.8 system-ui,-apple-system,"Noto Sans TC","Microsoft JhengHei",sans-serif}
button,input,select,textarea{font:inherit}
a{color:var(--blue);text-underline-offset:5px}
button,a,select,input{touch-action:manipulation}
button,select,.button{min-height:46px}
button{cursor:pointer;background:#fff;border:2px solid var(--blue);border-radius:9px;color:var(--blue);padding:8px 15px;font-weight:650}
button:hover{background:#edf3fb}
button[aria-pressed=true],button.primary{color:#fff;background:var(--blue);border-color:var(--blue)}
button:disabled{background:#e2e8f0;color:#334155;border-color:#526782;cursor:default}
:is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid var(--blue);outline-offset:4px;box-shadow:0 0 0 3px #fff}
a.button{display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border-radius:9px;text-decoration:none;background:var(--blue);color:#fff;font-weight:750}
h1,h2,h3,p,figure{margin:0}
h1{font-size:clamp(30px,4.1vw,50px);line-height:1.3;letter-spacing:-.03em;color:var(--blue);margin:15px 0 22px}
h2{font-size:clamp(25px,3vw,34px);line-height:1.4;color:var(--blue);margin-bottom:20px}
h3{font-size:21px;line-height:1.5;margin-bottom:10px}
p+p{margin-top:13px}
ul,ol{padding-left:24px}
li+li{margin-top:6px}
.wrap{width:min(1140px,calc(100% - 48px));margin:auto}
.header{border-bottom:1px solid var(--line);background:#fff}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:91px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:22px;font-weight:800}
.brand img{width:55px;height:55px;object-fit:contain}
.header nav a{display:inline-flex;align-items:center;min-height:44px;font-size:15px}
.skip{position:absolute;left:16px;top:-100px;background:#fff;z-index:20;padding:8px 12px}
.skip:focus{top:10px}
.hero{background:linear-gradient(115deg,#f0f5fc 0%,#f8fafc 65%,#fff4e7 100%);padding:46px 0 42px}
.crumb{font-size:14px;margin-bottom:24px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:42px;align-items:center}
.eyebrow{color:var(--blue);font-weight:800;letter-spacing:.1em;font-size:13px}
.eyebrow:before{content:"";display:inline-block;width:23px;height:4px;background:var(--orange);vertical-align:middle;margin-right:10px}
.lead{font-size:19px;line-height:1.9}
.hero .button{margin-top:22px}
.hero-art{background:#fff;border:1px solid #d5dfeb;border-radius:24px;padding:24px 20px 16px;box-shadow:0 18px 46px #193e8210}
.hero-art svg{width:100%;height:auto;display:block}
.hero-art figcaption{font-size:14px;color:var(--muted);padding-top:12px;border-top:1px solid var(--line);margin-top:10px}
.mini-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.mini-tags span{display:inline-block;color:var(--blue);border:1px solid #cfdaeb;background:#f0f5fc;border-radius:30px;font-size:13px;padding:3px 12px}
.kb-safety{margin:20px 0;padding:16px 18px;border:2px solid #a65317;border-radius:12px;background:#fff5ec;color:var(--blue);line-height:1.8}
.kb-safety strong{display:block;font-size:18px}
.section{padding:52px 0;border-bottom:1px solid var(--line)}
.intro{max-width:820px;color:var(--muted);margin-bottom:22px}
.prose{max-width:860px}
.prose h3{margin-top:28px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:#fff}
.panel.tinted{background:var(--wash)}
.note{padding:16px 20px;background:var(--pale);border-left:4px solid var(--orange);margin:20px 0;border-radius:0 10px 10px 0}
.note strong{color:#713b12}
.fine{font-size:14px;color:var(--muted)}
.answer-box{border:2px solid var(--blue);border-radius:16px;padding:22px 24px;background:#f5f8fd;margin:8px 0 22px}
.answer-box p{font-size:18px}
.formula{margin:16px 0;padding:16px 18px;border:1px solid #c5d6ef;border-radius:12px;background:#f7faff;font-size:19px;overflow-x:auto;white-space:nowrap}
.formula var{font-style:italic;font-family:Georgia,"Times New Roman",serif}
.formula .eq{color:var(--blue);font-weight:700}
.tbl-wrap{overflow-x:auto;margin:16px 0}
.kb-table{border-collapse:collapse;width:100%;font-size:16px;min-width:620px}
.kb-table th,.kb-table td{padding:13px 14px;border:1px solid var(--line);text-align:left;vertical-align:top}
.kb-table thead{background:var(--blue);color:#fff}
.kb-table td:first-child{font-weight:700;background:#f4f7fb}
.deflist p{padding-left:0}
.deflist p strong{color:var(--blue)}
.badge{display:inline-block;font-size:13px;font-weight:750;color:var(--blue);background:#fff;border:2px solid var(--blue);border-radius:8px;padding:2px 10px}
/* 判斷流程 */
.kb-tree{border:1px solid #c5d6ef;border-radius:18px;background:#f8fafd;padding:24px}
.kb-tree .tree-step{font-size:14px;color:var(--muted);margin-bottom:6px}
.kb-tree fieldset{border:0;margin:0;padding:0}
.kb-tree legend{font-size:21px;font-weight:750;color:var(--ink);margin-bottom:14px;line-height:1.5}
.kb-tree .opts{display:grid;gap:10px}
.kb-tree .opts button{text-align:left;font-weight:600;padding:12px 16px;min-height:52px}
.kb-tree .tree-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.kb-tree .tree-path{margin-top:16px;font-size:15px;color:var(--muted)}
.kb-tree .tree-path li{margin:2px 0}
.kb-tree .tree-input{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:12px}
.kb-tree .tree-input label{font-weight:650}
.kb-tree .tree-input input{width:9em;min-height:46px;border:2px solid #9baec5;border-radius:8px;padding:8px 10px;margin-top:4px}
.result{background:#eff4fb;border:1px solid #c5d6ef;border-radius:16px;padding:24px;margin-top:4px}
.result[data-tone=urgent]{background:#fff3e8;border:2px solid #a65317}
.result h3{color:var(--blue)}
.result h4{margin:18px 0 6px;font-size:18px;color:var(--blue)}
.result ul{margin:6px 0}
/* 試算器 */
.kb-calc{border:1px solid #c5d6ef;border-radius:18px;padding:24px;background:#fff}
.kb-calc .calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px}
.kb-calc label{display:block;font-weight:650}
.kb-calc .row{display:flex;gap:10px;align-items:center;margin-top:6px}
.kb-calc input[type=range]{flex:1;height:44px;accent-color:var(--blue)}
.kb-calc input[type=number]{width:6.5em;min-height:46px;border:2px solid #9baec5;border-radius:8px;padding:6px 8px}
.kb-calc select{min-height:46px;border:2px solid #9baec5;border-radius:8px;padding:6px 8px;background:#fff;color:var(--ink);margin-top:6px;width:100%}
.kb-calc .seg{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.calc-out{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.calc-out .big{border:1px solid #c5d6ef;border-radius:14px;padding:14px 16px;background:#f5f8fd}
.calc-out .big b{display:block;font-size:30px;line-height:1.3;color:var(--blue)}
.calc-out .big span{font-size:14px;color:var(--muted)}
.calc-steps{margin-top:16px;font-size:16px}
.calc-steps p{margin:6px 0}
.bars{margin-top:16px;display:grid;gap:8px}
.bars .bar{display:grid;grid-template-columns:5.5em 1fr 6.5em;gap:10px;align-items:center;font-size:15px}
.bars .track{height:16px;background:#e6edf6;border-radius:8px;overflow:hidden}
.bars .fill{height:100%;background:var(--blue);border-radius:8px;width:0}
.bars .bar[data-on=true] .fill{background:#a65317}
.bars .bar[data-on=true]{font-weight:750}
/* 逐層圖 */
.kb-layers .diagram-shell{position:relative;border:1px solid var(--line);border-radius:18px;background:#f8fafc;padding:18px}
.kb-layers svg{width:100%;height:auto;display:block}
.kb-layers svg text{font-family:"Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif}
.kb-layers [data-l]{display:none}
.kb-layers [data-layer="1"] [data-l="1"],.kb-layers [data-layer="2"] :is([data-l="1"],[data-l="2"]),.kb-layers [data-layer="3"] :is([data-l="1"],[data-l="2"],[data-l="3"]),.kb-layers [data-layer="4"] [data-l]{display:inline}
.kb-layers [data-only]{display:none}
.kb-layers [data-layer="1"] [data-only="1"],.kb-layers [data-layer="2"] [data-only="2"],.kb-layers [data-layer="3"] [data-only="3"],.kb-layers [data-layer="4"] [data-only="4"]{display:inline}
.kb-layers [data-dim]{transition:opacity .3s}
.kb-layers .diagram-shell:not([data-layer="1"]) [data-dim]{opacity:.35}
.stamp{position:absolute;right:14px;top:12px;font-size:13px;font-weight:750;color:var(--blue);background:#fff;border:2px solid var(--blue);border-radius:8px;padding:2px 9px}
.layer-copy{border-left:4px solid var(--orange);padding-left:19px;margin-top:20px;min-height:120px}
.layer-copy ul{margin:8px 0}
/* 字幕動畫 */
.kb-film .player{border:1px solid #bdcde2;border-radius:20px;overflow:hidden}
.kb-film .stage{padding:22px 26px 6px;background:var(--blue);color:#fff}
.kb-film .stage .stamp{position:static;float:right;margin:2px 0 8px 12px}
.kb-film .stage h3{color:#fff;font-size:24px;margin:0}
.kb-film .stage p{color:#e4efff;font-size:16px;margin-top:4px}
.kb-film svg.scene{width:100%;height:auto;display:block;background:var(--blue)}
.kb-film svg.scene [data-scene]{display:none}
.kb-film svg.scene text{font-family:"Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif}
.kb-film .caption{box-sizing:border-box;min-height:calc(1.6em + 28px);line-height:1.6;font-size:19px;font-weight:650;padding:14px 12px;background:#12305f;color:#fff;text-align:center}
.kb-film .caption.off{visibility:hidden}
.kb-film .progress{height:6px;background:#dbe5f3}
.kb-film .progress span{display:block;height:100%;width:0;background:var(--orange)}
.kb-film .player-bottom{padding:18px}
.kb-film .film-status{font-size:16px;color:var(--blue);background:#fff;padding:10px 0;min-height:2.6em;line-height:1.6}
.kb-film .player-controls{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.kb-film .player-controls select{width:auto;min-height:46px;border:2px solid var(--blue);border-radius:8px;color:var(--blue);background:#fff;padding:6px 8px}
.kb-film .shots{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.kb-film .shots button{min-width:46px}
.kb-film .shots button[aria-current=step]{background:var(--blue);color:#fff}
.kb-film .pulse,.kb-film .flow{animation:none}
.kb-film .player[data-playing=true] .pulse{animation:kbpulse 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.kb-film .player[data-playing=true] .flow{animation:kbflow 1.2s linear infinite}
@keyframes kbpulse{50%{transform:scale(1.12)}}
@keyframes kbflow{to{stroke-dashoffset:-28}}
.transcript li{margin:14px 0}
.transcript p{margin-top:4px}
/* 清單 */
.checklist label{display:flex;align-items:flex-start;gap:12px;min-height:48px;padding:8px 0;font-weight:500}
.checklist input{width:22px;height:22px;flex:0 0 22px;margin-top:5px;accent-color:var(--blue)}
.template{border:2px dashed #9baec5;border-radius:12px;padding:14px 16px;background:#fff;margin-top:12px}
.controls{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.copy-status{font-size:15px;color:var(--blue);min-height:1.6em}
.recall details{background:var(--wash);border-radius:12px;padding:6px 16px;margin:10px 0;border:0}
.cta{margin-top:28px;padding:26px;background:var(--blue);color:#fff;border-radius:18px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.cta h3{color:#fff}
.cta p{color:#e4efff}
.cta .button{background:#fff;color:var(--blue);white-space:nowrap}
.cta .phone{display:inline-flex;min-height:44px;align-items:center;color:#fff;font-weight:700}
.cta-actions{display:flex;flex-direction:column;gap:10px}
.related{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.related a{border:1px solid var(--line);border-radius:10px;padding:12px 16px;display:flex;align-items:center;min-height:52px}
.footer{background:var(--wash);padding:30px 0;font-size:14px}
.footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.footer a{display:inline-flex;min-height:44px;align-items:center}
details{border-bottom:1px solid var(--line);padding:14px 0}
summary{cursor:pointer;min-height:44px;font-weight:650;color:var(--blue);padding:8px 0}
details p{padding:10px 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.js-only{display:none}
.js .js-only{display:block}
.js .no-js-only{display:none}
.print-only{display:none}
.q906-price{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:#edf3f9;border:1px solid #b3c4d8;border-radius:12px;padding:22px}
.q906-price label{display:flex;flex-direction:column;gap:8px;font-weight:700;min-width:0}
.q906-price :is(select,input){min-width:0;width:100%;max-width:100%;min-height:48px;font:inherit;color:#193e82;border:1px solid #6d839d;background:#fff;border-radius:6px;padding:9px}
.q906-price output{grid-column:1/-1;padding:18px;background:#193e82;color:#fff;border-radius:8px;font-weight:700}
#checklist-copy label{display:flex;align-items:center;gap:12px;min-height:48px}
#checklist-copy input{min-width:22px;height:22px;accent-color:#193e82}
@media(max-width:760px){.q906-price{grid-template-columns:1fr;padding:16px}}
@media(max-width:760px){
 .wrap{width:calc(100% - 32px)}
 .hero{padding:26px 0 30px}
 .hero-grid,.two,.kb-calc .calc-grid{grid-template-columns:1fr;gap:20px}
 .calc-out{grid-template-columns:1fr}
 .section{padding:34px 0}
 .header .wrap{min-height:76px}
 .brand{font-size:19px;gap:9px}
 .brand img{width:44px;height:44px}
 .panel,.kb-tree,.kb-calc{padding:18px}
 .kb-layers .diagram-shell{padding:10px}
 .kb-layers svg{min-height:220px}
 .kb-table{font-size:15px}
 .kb-table th,.kb-table td{padding:10px 8px}
 .formula{font-size:17px}
 .related{grid-template-columns:1fr}
 .cta{align-items:stretch;flex-direction:column;padding:22px}
 .kb-film .stage{padding:18px 16px 4px}
 .kb-film .stage h3{font-size:21px}
 .kb-film .player-bottom{padding:14px}
 .layer-copy{min-height:170px}
 .lead{font-size:18px}
 .bars .bar{grid-template-columns:4.5em 1fr 5.8em;font-size:14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{
 .header,.hero,.section:not(.kb-print-target),.footer,.cta,button,.controls,.copy-status{display:none!important}
 .wrap{width:100%}
 .section{border:0;padding:0}
 .two{display:block}
 .panel{break-inside:avoid;margin-bottom:15px}
 .print-only{display:block}
 .checklist input{appearance:none;-webkit-appearance:none;border:1px solid #333;border-radius:3px}
 .checklist input:checked:after{content:"✓"}
 body{font-size:12pt}
}