:root{--blue:#193e82;--navy:#122d57;--orange:#d97827;--ink:#172b45;--muted:#4c5f76;--line:#cbd6e3;--paper:#f3f6fa;--warm:#fff4e8;--radius:20px;color-scheme:light;font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:17px;line-height:1.85}
*{box-sizing:border-box}body{margin:0}a{color:var(--blue);text-underline-offset:.2em}a:hover{text-decoration-thickness:2px}button,input,select,textarea{font:inherit}button,select,input{max-width:100%}button,select{min-height:48px}button{cursor:pointer;border:1px solid #94a9c2;background:#fff;color:var(--blue);border-radius:10px;padding:8px 15px;font-weight:700;line-height:1.5}button:hover{background:#e9f0f9}button:disabled{opacity:.45;cursor:default}button[aria-pressed=true]{color:#fff;background:var(--blue);border-color:var(--blue)}:focus-visible{outline:3px solid #a34816;outline-offset:4px}[hidden]{display:none!important}.primary,button.primary{display:inline-flex;justify-content:center;align-items:center;gap:20px;border:2px solid var(--blue);background:var(--blue);color:#fff;padding:12px 22px;border-radius:10px;font-weight:700;text-decoration:none;min-height:50px}.primary:hover{background:#102c61}.skip{position:fixed;z-index:20;top:-100px;left:20px;background:#fff;padding:12px}.skip:focus{top:10px}.site-header{background:white;border-bottom:1px solid var(--line)}.header-inner{max-width:1200px;margin:auto;padding:18px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:23px;font-weight:900;line-height:1.4}.brand img{width:48px;height:48px;object-fit:contain}.brand small{display:block;font-size:10px;letter-spacing:.16em}.site-header nav{display:flex;gap:24px;font-size:15px;font-weight:700}.site-header nav a{text-decoration:none}
main{max-width:1120px;margin:auto;padding:24px 36px 60px}.breadcrumbs{font-size:13px;color:var(--muted);margin-bottom:24px}.hero{padding:36px 0 30px;position:relative}.eyebrow{color:var(--blue);font-size:13px;letter-spacing:.09em;font-weight:800;margin:0 0 10px}.hero .eyebrow:before{content:"";display:inline-block;width:28px;height:3px;margin:0 9px 4px 0;background:var(--orange)}h1{font-size:42px;line-height:1.45;letter-spacing:-.025em;color:var(--navy);margin:0 0 24px;font-weight:900}h2{font-size:28px;line-height:1.5;color:var(--navy);margin:46px 0 20px;scroll-margin-top:20px}h3{font-size:21px;line-height:1.55;margin:30px 0 12px;color:var(--blue)}p{margin:14px 0}strong{font-weight:800}.direct-answer{font-size:20px;line-height:1.9;max-width:840px}.three-lenses{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0}.three-lenses>div{position:relative;border:1px solid var(--line);border-top:3px solid var(--orange);padding:17px 22px;background:white;border-radius:0 0 12px 12px}.three-lenses strong{display:block;font-size:22px;color:var(--blue)}.three-lenses small{font-size:14px;color:var(--muted)}.three-lenses span{position:absolute;right:16px;top:9px;color:#667d9b;font-size:13px}.meta,.small{font-size:14px;color:var(--muted)}.safety{border-left:5px solid var(--orange);padding:12px 22px;background:var(--warm);border-radius:0 12px 12px 0;font-size:16px}.safety p{margin:5px 0}.toc{display:flex;flex-wrap:wrap;gap:8px 22px;padding:18px 0 26px;margin-bottom:8px;border-bottom:1px solid var(--line)}.toc a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:700}.feature{margin:38px 0;padding:30px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 6px 24px #193e8206}.feature>h2{margin-top:6px}.feature .eyebrow{color:var(--muted)}section{scroll-margin-top:20px}section:not(.feature)>h2{padding-top:12px;border-top:2px solid var(--line)}.note{padding:16px 22px;background:#fff;border:1px solid var(--line);border-radius:12px}.ref{font-size:.75em;white-space:nowrap;margin-left:2px}li{margin:7px 0}ul,ol{padding-left:1.6em}.table-wrap{margin:22px 0;width:100%}table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.75;background:white}th,td{border:1px solid var(--line);padding:13px 15px;vertical-align:top;text-align:left}th{background:var(--blue);color:white}td:first-child{font-weight:700;min-width:135px}tbody tr:nth-child(even){background:#f5f8fc}details{border:1px solid var(--line);border-radius:12px;background:#fff;margin:12px 0;padding:0 20px}summary{min-height:50px;padding:12px 0;cursor:pointer;font-weight:700;color:var(--blue);line-height:1.7}details[open]>summary{border-bottom:1px solid var(--line)}details details{background:#f8fafd}.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0}.controls label{display:flex;gap:8px;align-items:center;font-size:14px}.controls select{min-height:48px;padding:8px}.answers{display:grid;gap:10px;margin:18px 0}.answers label{display:flex;align-items:center;gap:12px;min-height:52px;border:1px solid var(--line);border-radius:10px;padding:12px;cursor:pointer}.answers label:has(input:checked){background:#eaf1fd;border-color:var(--blue)}input[type=radio]{width:22px;height:22px;flex-shrink:0;accent-color:var(--blue)}fieldset{border:0;padding:0;margin:0;min-width:0}legend{font-size:21px;font-weight:800;color:var(--navy);line-height:1.6;width:100%}#decision-error:empty{display:none}#decision-error,.invalid{color:#943b12}#decision-result{background:#eef4fc;padding:16px 22px;border-radius:12px;border-left:4px solid var(--blue)}#decision-result h3{margin-top:0}.calculator-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.calc{padding:20px;background:#f4f7fc;border:1px solid var(--line);border-radius:12px;min-width:0}.calc h3{margin-top:0}.calc label{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:10px;align-items:center;margin:12px 0;font-size:15px}input[type=number],select,textarea{border:1px solid #889eb7;border-radius:8px;background:#fff;color:var(--ink);padding:9px 10px;min-height:46px;width:100%;min-width:0}output{display:block;margin-top:22px;padding:15px;background:#fff;border-radius:10px;border-left:4px solid var(--orange);font-size:18px;font-weight:700;color:var(--blue);min-height:124px;overflow-wrap:anywhere}.badge{display:inline-block;background:#edf3fb;color:var(--blue);padding:4px 12px;border-radius:6px;font-size:14px;font-weight:700}.source-choice{display:flex;align-items:center;gap:16px;font-size:15px;margin:16px 0}.source-choice select{width:auto;min-width:160px}#layer-diagram svg,#movie-art svg{width:100%;height:auto;display:block}#layer-diagram{border:1px solid var(--line);border-radius:16px;overflow:hidden}.diagram-explain{padding:15px;background:#eff4fa;border-radius:10px}.legend{font-size:15px}.field-photo{display:grid;grid-template-columns:180px 1fr;gap:22px;align-items:center;margin:22px 0 0;padding-top:22px;border-top:1px solid var(--line)}.field-photo img{width:100%;height:220px;object-fit:cover;border-radius:12px}.field-photo figcaption{font-size:14px;color:var(--muted)}.parts,.structure,.leak-paths,.structure-labels{transition:opacity .25s}.drain-parts,.waterproof-parts,.source-drain,.source-waterproof{display:none}#layer-diagram[data-source=drain] .supply-parts,#layer-diagram[data-source=drain] .source-supply,#layer-diagram[data-source=waterproof] .supply-parts,#layer-diagram[data-source=waterproof] .source-supply{display:none}#layer-diagram[data-source=drain] .drain-parts,#layer-diagram[data-source=drain] .source-drain,#layer-diagram[data-source=waterproof] .waterproof-parts,#layer-diagram[data-source=waterproof] .source-waterproof{display:initial}#layer-diagram[data-layer="1"] .parts,#layer-diagram[data-layer="1"] .structure,#layer-diagram[data-layer="1"] .structure-labels,#layer-diagram[data-layer="1"] .leak-paths,#layer-diagram[data-layer="2"] .parts,#layer-diagram[data-layer="2"] .leak-paths,#layer-diagram[data-layer="3"] .leak-paths{opacity:0}
.voice-status{padding:12px 15px;background:var(--warm);border-radius:10px;font-size:15px}#movie{background:var(--navy);color:white;border-radius:16px;overflow:hidden}.movie-top{display:flex;justify-content:space-between;gap:10px;padding:13px 18px;font-size:12px;color:#e2ecff}.movie-stage{position:relative;overflow:hidden;height:365px;background:#eaf1f8}#movie-art{position:absolute;inset:0;transition:transform .7s,filter .7s}#movie-art svg{height:100%}.instrument{position:absolute;top:25px;left:24px;min-width:225px;padding:16px 20px;border:4px solid #465e74;border-radius:12px;background:linear-gradient(145deg,#263c50,#14293b);box-shadow:0 8px 16px #11263b30;overflow:hidden;transition:transform .5s}#instrument-label{display:block;font-size:15px;color:#d4e8ff}#instrument-value{display:block;margin-top:8px;font-size:25px;line-height:1.5;color:#fff}.scan-line{height:3px;background:#d97827;margin-top:12px;width:100%;transform:scaleX(.6);transform-origin:left}.travel-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:#207bb5;left:50%;top:50%;opacity:0}#scene-title{font-size:18px;font-weight:700;margin:14px 18px 4px}#caption{min-height:54px;margin:8px 18px 14px;padding:10px 14px;background:#071a30;color:#fff;border-radius:8px;text-align:center;font-size:19px;line-height:1.6}#movie[data-scene="2"] #movie-art{filter:sepia(.5) hue-rotate(160deg)}#movie[data-scene="3"] .instrument{transform:translateX(110px)}#movie[data-scene="4"] .instrument{border-color:#d97827}#movie[data-scene="5"] .instrument{border-color:#759bc6}.timeline-label{font-size:14px;display:block}input[type=range]{width:100%;height:44px;accent-color:var(--blue)}.scene-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0}.scene-buttons button{font-size:14px;padding:8px}#copy-fallback{min-height:240px;font-size:16px}.closing{margin-top:44px;background:#e6eef9;border-top:4px solid var(--orange);padding:28px;border-radius:0 0 16px 16px}.closing h2{margin-top:0}#sources{font-size:14px;color:var(--muted)}#sources li{margin:12px 0;overflow-wrap:anywhere}footer{padding:30px 24px;text-align:center;border-top:1px solid var(--line);background:#fff;font-size:14px}code{font-family:inherit;background:#eaf0f8;padding:2px 4px;overflow-wrap:anywhere}
@media(max-width:760px){:root{font-size:16px}main{padding:18px 18px 36px}.header-inner{padding:13px 18px}.brand{font-size:20px}.brand img{width:42px;height:42px}.site-header nav{font-size:13px;gap:10px}.site-header nav a:first-child{display:none}.breadcrumbs{font-size:12px;margin-bottom:14px}.hero{padding:20px 0}h1{font-size:30px;line-height:1.5;margin-bottom:18px}.desktop-break{display:none}.eyebrow{font-size:11px;letter-spacing:.045em}.direct-answer{font-size:18px;line-height:1.85}.three-lenses{grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:22px 0}.three-lenses>div{border:0;border-radius:0;padding:12px 16px;border-left:3px solid var(--orange)}.three-lenses>div+div{border-top:1px solid var(--line)}.three-lenses strong{font-size:19px;display:inline-block;margin-right:8px}.three-lenses small{display:block;font-size:13px}.three-lenses span{top:12px}.meta{font-size:13px}.cta{width:100%}.safety{padding:12px 15px;font-size:15px}.toc{gap:4px 15px}.toc a{font-size:14px}.feature{padding:21px 16px;margin:26px -2px;border-radius:15px}h2{font-size:23px;margin-top:34px}h3,legend{font-size:19px}.calculator-grid{grid-template-columns:1fr;gap:14px}.calc{padding:17px}.calc label{grid-template-columns:1fr 112px;font-size:14px}output{min-height:0;font-size:17px}.controls{gap:8px}.controls button{flex:1 1 auto;font-size:14px}.controls .primary{flex-basis:100%}.layer-controls button{flex:1 1 40%}.source-choice{display:block}.source-choice select{width:100%;margin-top:8px}.table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block}.table-wrap thead{display:none}.table-wrap tr{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:12px 0;background:#fff}.table-wrap td{border:0;border-top:1px solid #e0e6ee;padding:11px 14px;min-width:0}.table-wrap td:before{content:attr(data-label);display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:3px}.table-wrap td:first-child{border:0;background:#edf3fb;color:var(--blue);font-size:17px}.table-wrap td:first-child:before{color:#4d6586}.field-photo{grid-template-columns:105px 1fr;gap:14px}.field-photo img{height:150px}.field-photo figcaption{font-size:12px;line-height:1.7}.legend{font-size:14px}.diagram-explain{font-size:15px}details{padding:0 15px}summary{font-size:16px}.movie-stage{height:265px}#movie-art{top:45px;bottom:0}#movie-art svg{height:100%}.movie-top{font-size:10px;padding:11px 12px}.instrument{top:10px;left:12px;min-width:0;width:190px;padding:8px 12px;border-width:3px}#instrument-label{font-size:12px}#instrument-value{font-size:19px;margin-top:3px}.scan-line{margin-top:5px}#movie[data-scene="3"] .instrument{transform:translateX(75px)}#scene-title{font-size:16px;margin:12px 12px 4px}#caption{font-size:16px;margin:8px 10px 12px;padding:10px 7px;min-height:47px;letter-spacing:-.025em}.scene-buttons{grid-template-columns:repeat(2,1fr)}.scene-buttons button{font-size:13px}.closing{padding:22px 18px}ul,ol{padding-left:1.4em}footer{font-size:12px}.voice-status{font-size:14px}.note{padding:12px 16px}}
#movie-concepts{position:absolute;inset:0}#movie-concepts svg{width:100%;height:100%;display:block}.concept{display:none}#movie:not([data-scene="1"]):not([data-scene="4"]) #movie-art{display:none}#movie[data-scene="0"] .safety-scene,#movie[data-scene="2"] .thermal-scene,#movie[data-scene="3"] .moisture-scene,#movie[data-scene="5"] .meter-scene,#movie[data-scene="6"] .paths-scene,#movie[data-scene="7"] .report-scene{display:initial}#movie[data-scene="3"] .instrument{transform:none}#movie[data-scene="4"] #instrument-label::after{content:"・教學假設"}#movie[data-scene="4"] #instrument-value::after{content:"（10 分鐘壓縮示意）";display:block;font-size:13px}.instrument{min-width:215px}h1{text-wrap:balance}.three-lenses span{color:#526b8c}.svg-labels{fill:#102f60}
@media(max-width:760px){h1{font-size:28px}.instrument{min-width:0}.movie-stage{height:305px}#movie-concepts svg{padding-top:30px}.instrument{width:auto;max-width:calc(100% - 24px)}#movie[data-scene="3"] .instrument{transform:none}#movie[data-scene="4"] #instrument-value::after{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{body{background:#fff}.site-header,.hero,.toc,.breadcrumbs,.safety,main>section,main>aside,footer,.controls,.skip{display:none!important}main{padding:0;max-width:none}main>#checklist{display:block!important}#checklist details{display:block}#checklist textarea,#copy-status{display:none!important}h2{font-size:22pt}body{font-size:12pt;color:#000}.note{border:1px solid #999}a{color:#000;text-decoration:none}}

/* Q856 專頁元件：實測色對見 AA對比值表。 */
main button:disabled,main select:disabled,main input:disabled{opacity:1;color:#193e82;background:#eaf0f8;border-color:#193e82;border-style:dashed;cursor:not-allowed}
main button:not(:disabled){border-color:#193e82}main :focus-visible{outline:3px solid #193e82;outline-offset:3px;box-shadow:0 0 0 3px #fff}
main button[aria-pressed=true]{color:#fff;background:#193e82;border-color:#193e82}
#animation #caption{white-space:normal;overflow-wrap:anywhere;min-height:5em;height:auto;line-height:1.65;font-size:16px;padding:12px 10px;background:#102a54;color:#fff!important;box-sizing:border-box}
#animation #q856-voice-status{color:#193e82;background:#fff;padding:12px;border:1px solid #193e82;border-radius:8px;font-size:16px}#animation #q856-voice-status[data-error=true]{border-left:5px solid #d97827}
#animation #movie-play:not(:disabled){background:#d97827;color:#0f172a;border:2px solid #0f172a}
#animation button,#animation select{min-height:46px;min-width:44px;font-size:16px}#animation input[type=range]{min-height:44px}
main .q856-diagram-viewport{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;touch-action:pan-x pan-y;border-radius:10px;background:#fff}main .q856-diagram-viewport.is-enlarged>svg{min-width:var(--q856-diagram-width);max-width:none;height:auto;max-height:none}
main .q856-zoom-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:12px 0;color:#193e82;background:#fff;font-size:14px;line-height:1.6}main .q856-zoom-controls button{min-height:46px;font-size:16px}
@media(prefers-reduced-motion:reduce){#animation *,#animation *::before,#animation *::after{animation:none!important;transition:none!important}}
#q856-zoom-film.is-enlarged{max-height:460px;overflow:auto}#q856-zoom-film.is-enlarged>.movie-stage{width:800px;min-width:800px;height:560px}#movie>.q856-zoom-controls{margin:0;padding:8px 12px}#movie .movie-top{font-size:14px}#instrument-label{font-size:14px}