/* 介面精修：暖白紙感、深藍資訊層次、青綠行動色。 */
/* 同樣保留淡入效果，以一般CSS取代快速換頁可能中止的跨文件轉場。 */
@view-transition{navigation:none}
@media(prefers-reduced-motion:no-preference){main{animation:academy-page-in 160ms ease-out}}
:root{--ink:#20343d;--muted:#61716e;--paper:#f7f5ef;--line:#e1e5dd;--navy:#203b45;--blue:#176458;--orange:#a75a37;--teal:#176458;--soft:#edf3ee;--purple:#6b6084;--white:#fffefa;font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif}
body{background:var(--paper);color:var(--ink);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:#c7ded0;color:#203b45}
.wrap{width:min(1180px,calc(100% - 64px))}
.topbar,.top{background:#203b45;color:#e0e9e3;font-size:12px;letter-spacing:.04em;padding:9px 0}
header{background:#fffefa;border-bottom:1px solid var(--line);box-shadow:none}
header .nav,.nav{background:#fffefa;min-height:80px;border-color:var(--line)}
.brand{font-weight:800;letter-spacing:.02em;gap:12px}
.brand small{letter-spacing:.035em;color:#677772;line-height:1.6;font-size:11px;margin-top:3px}
.brand-mark,.mark{background:#203b45!important;color:#fffefa;border:1px solid #203b45;border-radius:12px!important;box-shadow:inset 0 0 0 4px #ffffff12;width:42px;height:42px}
.navlinks,.navright,.nav-right{gap:20px;font-size:13px}
.navlinks a,.navright a,.nav-right>a{color:#425650;font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.navlinks a:hover,.navright a:hover,.nav-right>a:hover{color:var(--blue)}
.navlinks .nav-cta{background:#203b45;color:#fffefa;border-radius:8px;padding:0 17px}
.hero{background:none;padding:52px 0 36px}
.hero-grid{gap:46px}
.hero h1,.lesson-head h1{font-family:"Noto Serif TC","PMingLiU",serif;letter-spacing:.015em;font-weight:700;line-height:1.35;color:#203b45}
.hero h1 em{color:#176458;font-style:normal}
.hero p{line-height:1.9;color:#5b6c66;font-size:16px}
.eyebrow,.kicker{color:#896c48;font-size:11px;font-weight:800;letter-spacing:.15em;line-height:1.7}
.btn,.nav-cta,.cta-link,.tab,.card button,.pager button{transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}
.btn{border-radius:9px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:14px;padding:12px 20px;letter-spacing:.025em}
.btn-primary,.btn:not(.light):not(.btn-light):not(.btn-secondary){background:#176458;color:#fff}
.btn-primary:hover{background:#104b42;box-shadow:0 5px 16px #17645820}
.btn-secondary,.btn-light,.btn.light{background:#fffefa;border:1px solid #cdd8cc;color:#28584e}
.btn-secondary:hover,.btn-light:hover,.btn.light:hover{background:#edf3ee}
.hero-card,.profile{background:#fffefa;border:1px solid #dce3d9;border-radius:18px;box-shadow:0 16px 45px #203b4509}
.hero-card{padding:28px;color:#203b45}.hero-card h2{color:#203b45;font-size:25px;line-height:1.5}.hero-card::after{display:none}
.hero-card .label{font-size:11px;color:#69786b;letter-spacing:.03em}
.hero-card .score b{color:#176458}.progress{height:7px;background:#e8eee7;border-radius:20px;overflow:hidden}.progress i{background:#176458}
.mini-list{font-size:13px;line-height:1.7}.hero-card .mini-list div{color:#526757;font-size:13px}.hero-card .score span{color:#657365;font-size:12px}.hero-card .dot.pending{background:#a4b6a0}.hero-card .cta-link{background:#176458;color:#fffefa;border-radius:9px;font-size:13px;min-height:44px}.hero-card .note{color:#657365;font-size:11px;line-height:1.8}.note{color:#67766b;line-height:1.7;font-size:11px}
.home-hero-art{margin:25px 0 0;border:1px solid #e0e3d8;border-radius:16px;overflow:hidden;background:#eeeade}
.home-hero-art img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}
.home-hero-art figcaption{padding:9px 13px;font-size:11px;color:#51635c;background:#fffefa;border-top:1px solid #e0e3d8;letter-spacing:.035em}
body[data-design-page="index"] .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.75fr);align-items:center}
body[data-design-page="index"] .hero h1{font-size:clamp(38px,4vw,55px);margin:12px 0 18px}
body[data-design-page="index"] section:not(.hero){padding:54px 0}
.section-head{align-items:end;gap:36px;margin-bottom:25px}
.section-head h2,.head h2,.guides h2{font-size:clamp(23px,2.5vw,30px);letter-spacing:.025em;line-height:1.5;color:#203b45;margin-top:7px}
.section-head p{font-size:14px;line-height:1.85;max-width:450px;color:#61716e}
.module{background:#fffefa;border:1px solid #dfe4d9;border-radius:15px;padding:23px;box-shadow:none;transition:transform .18s,border-color .18s,box-shadow .18s;position:relative;overflow:hidden}
.module:hover{transform:translateY(-4px);border-color:#9db5a5;box-shadow:0 12px 28px #203b4509}
.module h3{font-size:18px;letter-spacing:.03em}.module p{font-size:13px;line-height:1.85;color:#65716a}.module .meta{font-size:11px;color:#456b5c;line-height:1.8}
.module .icon{width:100px;height:100px;background-image:url('design-icons-v1.webp');background-size:200% 200%;border-radius:12px;background-color:#f7f5ef;margin-bottom:15px}
.module:nth-child(1) .icon{background-position:0 0}.module:nth-child(2) .icon{background-position:100% 0}.module:nth-child(3) .icon{background-position:0 100%}.module:nth-child(4) .icon{background-position:100% 100%}
.module:nth-child(n) .icon{background-image:url('design-icons-v1.webp');background-color:#f7f5ef;background-size:200% 200%}
.scenario{background:#eaf0e8;border-top:1px solid #dce5d8;border-bottom:1px solid #dce5d8}
.scenario-main{background:#fffefa;border:1px solid #d9e2d5;border-radius:17px;padding:30px;box-shadow:none}
.scenario-side{background:#203b45;color:#eef3eb;border:0;border-radius:17px;padding:30px}
.scenario-side h4{font-size:20px;color:#fffefa}.scenario-side .steps{color:#e0e8df}.scenario-side .steps b{background:#d5e3d5;color:#203b45}.scenario-side .steps span{color:#e0e8df}
.quote{background:#f2f3e9;color:#456151;border-left:3px solid #8ba88a;font-family:"Noto Serif TC","PMingLiU",serif;line-height:1.9;border-radius:0 8px 8px 0}
.resource,.guide-links a{background:#fffefa;border:1px solid #dfe4d9;border-radius:12px;box-shadow:none}
.resource h3{font-size:16px}.resource p{font-size:13px}.resource .arrow{background:#edf2e8;color:#2b6451;border-radius:50%;width:36px;height:36px;display:grid;place-items:center}
.help-section{background:#eeeee4}.help-box{border-color:#d9dfcf;background:#fffefa;border-radius:15px;box-shadow:none}.promise{background:#fffefa;border-color:#d9dfcf;border-radius:15px}
.help-tel{background:#eaf1e5;color:#295f4b;border:1px solid #d9e4d1}.help-rights{background:#f0f3ea;color:#4b6252}
footer{background:#203b45;color:#d0dbd0;line-height:1.85;padding:28px 0}.footer-row{gap:25px}.footer-row>span{font-size:11px}
.hero img,.hero-img{border-radius:17px;box-shadow:0 12px 32px #203b450d;border:1px solid #dee3d8}
.stats{gap:10px}.stat{background:#fffefa;border:1px solid #e0e5d9;border-radius:10px;color:#5c6d60;font-size:12px;padding:9px 13px}.stat b{color:#203b45;font-family:Georgia,serif;font-size:22px}
.content-status{font-size:12px!important;line-height:1.8!important;color:#687565!important}
.quality-overview{gap:12px}.quality-item{border-radius:12px;border-color:#e0e5d9;background:#fffefa;box-shadow:none}.quality-item p{font-size:12px;line-height:1.7;color:#687565}.quality-count{font-family:Georgia,serif;font-size:31px}
.quality-complete .quality-count{color:#176458}.quality-standard .quality-count{color:#476385}.quality-pending .quality-count{color:#a16238}
.guide{background:#fffefa;border-color:#e0e5d9;border-radius:11px;padding:13px 14px}.guide b{font-size:14px}.guide small{font-size:11px;line-height:1.6}.guide:hover,.guide[aria-pressed="true"]{background:#eaf2e8;border-color:#8bab99}
.toolbar{background:#fffefa;border:1px solid #e0e5d9;border-radius:13px;padding:14px;gap:10px;margin-bottom:18px}
input,select{background:#fffefa;color:#203b45;border-color:#d7e0d4!important;border-radius:8px!important;font-size:14px!important;line-height:1.6}
input:focus,select:focus{outline:2px solid #759b86;outline-offset:2px}
.chip{border-radius:8px;background:#fffefa;border-color:#dfe5da;color:#516555;font-size:12px;padding:7px 11px;gap:5px;display:inline-flex;align-items:center}
.chip.active,.chip[aria-pressed="true"]{background:#203b45;color:#fffefa;border-color:#203b45}
.card{border-radius:14px;border:1px solid #dee5d9;background:#fffefa;box-shadow:none;padding:22px;transition:transform .18s,border-color .18s,box-shadow .18s}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #203b450b;border-color:#9db5a5}
.card::before{display:none}
.card h3{font-size:19px;line-height:1.5;letter-spacing:.015em;margin:14px 0 11px}.card .concept-snippet{font-size:13px;line-height:1.85;color:#637363}
.card .tag{border-radius:5px;font-size:11px;background:#edf3e9;color:#40624c}.card .num{font-family:Georgia,serif;color:#51695a;font-size:13px}
.card .visual{height:95px;border-radius:10px;background:#f7f5ef!important;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:15px;isolation:isolate}
.card .visual::after{content:"";position:absolute;right:4px;top:2px;width:90px;height:90px;background-image:url('design-icons-v1.webp');background-size:200% 200%;background-position:100% 0;z-index:-1}
.card[data-design-kind="mind"] .visual::after{background-position:0 0}.card[data-design-kind="globe"] .visual::after,.card[data-design-kind="chat"] .visual::after{background-position:0 100%}.card[data-design-kind="shield"] .visual::after,.card[data-design-kind="team"] .visual::after{background-position:100% 100%}
.card .visual .icon{display:none}.card .visual .number{font-family:Georgia,serif;font-size:25px;color:#657c6c;font-weight:400;align-self:flex-end}
.card button{border-radius:8px;min-height:44px;background:#eff4eb;color:#33614b;border-color:#dce5d4;font-size:12px}
.result-summary{font-size:12px;margin-top:20px}.pager{gap:14px}.pager button{background:#fffefa;border:1px solid #dce3d5;border-radius:8px;min-height:44px;color:#355c48}
.profile{padding:22px}.profile h3{font-size:16px}.profile p{font-size:12px}.tabs{gap:8px;padding:18px 0}.tab{border-radius:8px;background:#fffefa;border-color:#dce3d5;font-size:13px;min-height:44px}.tab.active{background:#203b45;border-color:#203b45}
.visual-card{border-color:#dce3d5;border-radius:15px;background:#fffefa;box-shadow:none;padding:24px}.visual-card:before{background:#edf2e8!important}.visual-card .no{font-family:Georgia,serif;font-size:32px;color:#446d52!important}.visual-card h3{font-size:19px}.visual-card p{line-height:1.85}
.diagram{flex-wrap:wrap}.diagram span{background:#edf3e9}.quiz,.result,.tool,.skill-card{background:#fffefa;border-color:#dce3d5;border-radius:14px;box-shadow:none}
.crumb{font-size:12px;padding:24px 0 8px}.lesson-head{padding:18px 0 32px;gap:35px}.lesson-head h1{font-size:clamp(30px,4vw,46px)}
.pill{font-size:11px;background:#fffefa;border-color:#dce3d5;color:#5b7161;border-radius:6px;padding:6px 10px}.pill strong{color:#176458}
.layout{gap:24px;grid-template-columns:minmax(0,1fr) 280px}.content,.side-card{border-radius:15px;background:#fffefa;border-color:#dce3d5;box-shadow:none}.content{padding:36px 40px}
.content h2{font-size:22px;line-height:1.5;letter-spacing:.035em;margin:32px 0 15px;border-bottom:1px solid #e4e9dd;padding-bottom:11px}.content h3{font-size:17px;margin:25px 0 12px}
.content p{line-height:1.95;color:#455b4d}.content .lead{font-size:17px}.callout{background:#f3f0e5;border-left:3px solid #a88555;color:#685c3e;border-radius:0 10px 10px 0;line-height:1.9}
.key-question{background:#edf3e8;border-color:#d6e1cc;color:#355c45;border-radius:11px;padding:17px 19px}.key-question strong{color:#3c6b4b;font-size:11px;margin-bottom:7px}
.action-box{background:#eaf3ee;border-color:#c9ddce;border-radius:11px;line-height:1.9;padding:17px 19px}.action-box strong{font-size:11px;color:#176458;margin-bottom:7px}
.model{gap:10px}.model div{background:#eff3e9;border:1px solid #e1e7d8;border-radius:10px;padding:17px 13px}.model b{font-size:15px;color:#456649}.model span{line-height:1.8;color:#63715a}
.step{border-color:#e0e7d7;border-radius:10px;padding:16px}.step b{background:#456b54;border-radius:8px;font-size:13px}.step span{line-height:1.85;color:#5c705f}
.dialogue{background:#edf4ec;border-color:#d6e4d0;border-radius:11px;padding:20px}.speaker{color:#2c6549}.reflect{background:#f0edf3;border:1px solid #e4dfe9;border-radius:11px;padding:20px}.reflect strong{color:#6b6084}
.module-kit{background:#f7f8f0;border-color:#dce3d5;border-radius:11px}.module-kit summary{font-size:14px;line-height:1.8;color:#456649;padding:7px 0}.shared-label{font-size:12px}
.lesson-link{border-radius:7px}.lesson-link:hover,.lesson-link.active{background:#eaf2e7;border-color:#d0dfc8;color:#176458}.lesson-link b{color:#176458}.pending-note,.notice-bar{background:#fbf3e7;border:1px solid #ead8be;color:#7b5b31;border-radius:10px;font-size:13px;line-height:1.85}
.design-line-icon{display:inline-block;width:21px;height:21px;vertical-align:-4px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.card .design-line-icon{width:27px;height:27px;color:#456b54}.chip .design-line-icon{width:16px;height:16px}
.section-icon{display:inline-grid;place-items:center;width:34px;height:34px;background:#edf3e8;border:1px solid #dce5d2;border-radius:9px;margin-right:10px;vertical-align:middle;color:#456b54}
@media(max-width:1050px){.navlinks{gap:11px}.navlinks a{font-size:12px}.hero-grid{gap:25px}.modules{gap:12px}.module{padding:18px}.section-head{gap:20px}}
@media(max-width:900px){.wrap{width:calc(100% - 40px)}body[data-design-page="index"] .hero-grid{grid-template-columns:1fr 1fr}.hero-grid{gap:25px}.module .icon{width:85px;height:85px}.section-head p{max-width:360px}.content{padding:28px}.layout{grid-template-columns:1fr}.navlinks a:not(.nav-cta){display:none}}
@media(max-width:650px){.wrap{width:calc(100% - 32px)}.hero{padding:32px 0 25px}body[data-design-page="index"] .hero-grid,.hero-grid{grid-template-columns:1fr}.hero h1{font-size:36px!important}.hero p{font-size:14px}.home-hero-art img{height:auto;aspect-ratio:3/2;object-fit:contain}.hero-card{padding:22px}.hero-card h2{font-size:22px}.section-head{display:block}.section-head p{max-width:none;font-size:13px}.section-head h2{font-size:23px}body[data-design-page="index"] section:not(.hero){padding:35px 0}.module .icon{width:82px;height:82px}.module{padding:19px}.module h3{font-size:17px}.scenario-main,.scenario-side{padding:23px}.brand{gap:8px;font-size:15px}.brand small{font-size:9px}.brand-mark,.mark{width:36px;height:36px}.navlinks .nav-cta{font-size:12px;padding:0 11px}.topbar .wrap span:last-child{display:none}.navright,.nav-right{gap:10px;font-size:12px}.hero img,.hero-img{height:auto;aspect-ratio:3/2;object-fit:contain}.hero-img{max-height:280px}.content{padding:22px 19px}.content h2{font-size:20px}.content .lead{font-size:16px}.model{grid-template-columns:1fr}.lesson-head{gap:19px;padding-bottom:24px}.lesson-head h1{font-size:33px}.toolbar{padding:11px}.grid{gap:12px}.card{padding:20px}.profile-row{flex-wrap:wrap}.profile-row input,.profile-row select{flex:1 1 150px}.tab{padding:10px 12px}.footer-row{display:block}.footer-row>span{display:block;margin-top:10px}.module-kit summary{font-size:13px}.guide b{font-size:13px}.quality-item{padding:13px}.help-lines{gap:12px}.lang button{min-height:36px}.nav .wrap{gap:10px}}
@media(prefers-reduced-motion:reduce){.module:hover,.card:hover{transform:none}}
@media print{body{background:#fff}.home-hero-art,.section-icon{display:none}.content{padding:0;border:0}.content p{color:#000}.content h2{break-after:avoid}.step,.dialogue,.key-question,.action-box{break-inside:avoid}}