/* 主頁沿用獨立 3D 場景，僅設定外層導覽與後續內容。 */
html{scroll-behavior:smooth}
body{background:#edf2f3;color:#203646}
a{color:inherit;text-decoration:none}
.site-header{height:72px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;background:#edf2f3;font-size:12px;letter-spacing:.1em}
.site-header nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,28px)}
.site-header nav a{white-space:nowrap;transition:color .2s ease}
.site-header nav a:hover,.site-header nav a:focus-visible{color:#557f8e}
.site-header>a{font-weight:700}
.site-social{display:inline-flex;align-items:center;gap:12px;margin-left:-14px}
.site-social a{display:inline-flex;align-items:center;justify-content:center;width:20px;height:24px;color:#58707b}
.site-social a:hover,.site-social a:focus-visible{color:#203646}
.site-social svg{display:block;width:18px;height:18px;fill:currentColor}
/* 場景對應各自的內容區塊，沿用霧藍與綠色識別。 */
.node-detail{padding:88px 9vw;background:#284c63;color:#f2f7f8;scroll-margin-top:24px}
.node-detail:nth-child(even){background:#d4e3e9;color:#17384b}
.node-label{display:flex;gap:26px;align-items:center;font:12px monospace;letter-spacing:.08em}
.node-label>span:first-child{padding:12px 16px;border-left:3px solid #8adf42;background:rgba(174,202,215,.16)}
.node-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,64px);align-items:center;margin-top:32px}
.node-content>div{min-width:0}
.node-detail h2{font-size:clamp(38px,5vw,72px);line-height:1.2;letter-spacing:-.04em;margin:0 0 26px}
.node-detail em{font-style:normal;color:#caff66}
.node-detail:nth-child(even) em{color:#365e68}
.node-intro{max-width:530px;font-size:17px;line-height:1.9}
.node-link{display:inline-block;padding:17px 24px;margin-top:20px;background:#caff66;color:#203646}
.site-footer{display:flex;justify-content:space-between;padding:28px 4vw;font-size:12px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:1000px){.site-header{height:auto;min-height:64px;flex-wrap:wrap;gap:12px;padding:16px 4vw}.site-header nav{flex-wrap:wrap;row-gap:12px}.site-social{margin-left:0}}
@media(max-width:700px){.site-header{padding:16px 4vw}.site-header nav{gap:10px;font-size:10px}.site-social{gap:10px}.site-social a{width:18px}.site-social svg{width:16px;height:16px}.node-detail{padding:60px 24px}.node-content{grid-template-columns:1fr;gap:24px}.node-label{gap:12px;font-size:10px}.site-footer{gap:20px;flex-wrap:wrap}}
/* 圖文共用相同欄位規則；偶數區塊交換左右，避免圖片落入下一列。 */
.node-detail:nth-child(even) .node-content>div{grid-column:2;grid-row:1}
.node-detail:nth-child(even) .node-illustration{grid-column:1;grid-row:1}
.node-illustration{width:100%;max-width:560px;min-width:0;margin:0 auto;overflow:hidden;border:0;border-radius:2px}
.node-illustration img{display:block;width:100%;height:auto}
/* 平板與手機統一先讀文字、再看圖片，不沿用桌面的欄位位置。 */
@media(max-width:900px){
 .node-content{grid-template-columns:minmax(0,1fr);gap:32px}
 .node-detail:nth-child(even) .node-content>div,.node-detail:nth-child(even) .node-illustration{grid-column:auto;grid-row:auto}
 .node-illustration{max-width:560px}
}

/* 案例入口共用排版，空間不足時自然換行。 */
.node-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.node-actions .node-link{margin-top:0;padding:16px 20px;font-size:15px;line-height:1.5;text-align:center}
.node-actions .node-link:focus-visible{outline:2px solid currentColor;outline-offset:4px}
/* 六張主頁生活情境圖使用相同比例與輕微四角柔化。 */
.node-details .node-illustration{max-width:520px;background:transparent}.node-details .node-illustration img{mask-image:radial-gradient(ellipse 70% 70% at center,#000 90%,transparent 115%);mix-blend-mode:normal}

/* 主選單各項目共用分隔線，線條隨項目換行。 */
.site-header nav{--nav-gap:clamp(14px,2.2vw,28px);gap:var(--nav-gap)}
.site-header nav>a,.site-header .site-social,.site-header .site-social a{position:relative}
.site-header nav>a+a::before,.site-header .site-social::before{content:"";position:absolute;left:calc(var(--nav-gap) / -2);top:50%;transform:translateY(-50%);width:1px;height:24px;background:#9aafb8;opacity:.35;pointer-events:none}
.site-header .site-social{margin-left:0;gap:var(--nav-gap)}
@media(max-width:700px){.site-header nav{--nav-gap:10px}.site-header nav>a+a::before,.site-header .site-social::before{height:18px}}

/* 社群圖示視覺中心與連結容器一致，兩圖示之間不放分隔線。 */
.site-header .site-social{align-items:center;gap:12px;line-height:0}.site-header .site-social a{display:flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}.site-header .site-social svg{display:block;flex-shrink:0}

/* 主頁 3D 稍微收高，容器與畫布同步，避免下方殘留空白。 */
.scene-scroll.scene-compact,.scene-scroll.scene-compact .scene-fixed{height:52vh!important;min-height:420px}
@media(max-width:700px){.scene-scroll.scene-compact,.scene-scroll.scene-compact .scene-fixed{height:52svh!important;min-height:360px}}