/* ═══════════════════════════════════════════════════════════════════════════
   頂端選單（index2）── 照設計稿：左上淺底商標方塊、置中六個選單、右上薄荷 LANGUAGE ＋ 深灰信封，
   底下一條細白線。行為在 js/site-nav.js，狀態由它切 class：
     .is-top     頁首：透明、白字、細白線（設計稿的樣子）
     .is-solid   離開頁首：霧面淺底＋深字（底下是淺色段，例如 SOLUTIONS 右欄，也讀得到）
                 ※ 選單常駐，不再往下捲就收起來（原本的 .is-hidden 已移除）
     .is-on-dark 選單底下是深色段（區塊標 data-nav-theme="dark"：KV、地球）：霧面深底＋白字
     .is-ready   載入後的進場（商標、選單、右側方塊依序滑進來）
   ≤ 1080px：六個選單收進右上的漢堡 → 全螢幕選單（.sn-drawer）。
   ═══════════════════════════════════════════════════════════════════════════ */
.sn {
    --sn-h: 76px;
    --sn-logo-w: 80px;
    --sn-lang-w: 221px;
    --sn-mail-w: 77px;
    --sn-gap: 48px;
    --sn-mint: #76c5af;
    --sn-mint-deep: #63b89f;
    --sn-ink: #3e3e3e;
    --sn-tile: #f1f7fc;
    --sn-text: #fff;
    --sn-line: rgba(255, 255, 255, .42);
    --sn-ease: cubic-bezier(.19, 1, .22, 1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
    height: var(--sn-h);
    display: flex;
    align-items: stretch;
    font-family: 'Jost', 'Noto Sans TC', sans-serif;
    -webkit-font-smoothing: antialiased;
    /* transform 留著給手機抽屜用；選單本身不再往上收（使用者：head 要常駐）。
       box-shadow 與 backdrop-filter 都已移除，過場名單只剩底色與字色。 */
    transition: transform .75s var(--sn-ease), background-color .45s ease, color .45s ease;
}
/* 按鈕歸零用 :where()（權重 0）：不然 .sn button 會蓋掉 .sn-lang-btn／.sn-burger 自己的底色與字色 */
:where(.sn) :where(a, button) { -webkit-tap-highlight-color: transparent; }
:where(.sn) :where(button) { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
/* 細線：從商標方塊右緣拉到最右邊，貼在選單列底下 */
.sn::after {
    content: '';
    position: absolute;
    left: var(--sn-logo-w);
    right: 0;
    top: 100%;
    height: 1px;
    background: var(--sn-line);
    transform-origin: 0 50%;
    transition: background-color .45s ease, transform 1.2s var(--sn-ease) .15s;
    pointer-events: none;
}
/* .sn.is-hidden 已移除：選單改成常駐，js/site-nav.js 不再掛這個 class（使用者要求）。 */
/* 底色只剩 .1、完全不做模糊（使用者要求）。
   ⚠ 這樣一來底色幾乎不提供對比了 —— 字能不能讀，全靠 .is-on-dark 這組主題切換
     （深色段白字／淺色段深字）。對比實測見本檔最後的註解。
   backdrop-filter 整個拿掉，順帶省掉捲動時每幀的背景取樣。 */
.sn.is-solid {
    --sn-text: #33413f;
    --sn-line: rgba(51, 65, 63, .1);
    background: rgba(241, 247, 252, .1);
}

.sn.is-solid.is-on-dark {
    --sn-text: #fff;
    --sn-line: rgba(255, 255, 255, .14);
    background: rgba(18, 28, 32, .1);
}

/* ── 左：商標方塊 ─────────────────────────────────────────── */
.sn-logo {
    position: relative;
    z-index: 2;
    flex: none;
    display: grid;
    place-items: center;
    width: var(--sn-logo-w);
    height: var(--sn-h);
    background: var(--sn-tile);
}
.sn-logo svg { width: 62%; height: auto; display: block; transition: transform .6s var(--sn-ease); }
.sn-logo:hover svg { transform: scale(1.07); }
.sn-logo:focus-visible { outline: 2px solid var(--sn-mint); outline-offset: -4px; }

/* ── 中：六個選單（置中對齊整個視窗，跟設計稿一樣）──────────────
   滑過：文字往上捲，下面那份薄荷色的接上來 */
.sn-menu {
    position: absolute;
    left: 50%;
    top: 0;
    height: var(--sn-h);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}
.sn-links { display: flex; align-items: center; gap: var(--sn-gap); margin: 0; padding: 0; list-style: none; }
/* 文字陰影／描邊：使用者要求不要，對比完全交給 .is-on-dark 的主題換色。 */
.sn-link {
    position: relative;
    display: block;
    padding: 8px 0;
    color: var(--sn-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .12em;
    white-space: nowrap;
    text-decoration: none;
    transition: color .45s ease;
}
.sn-roll { display: block; height: 1.4em; overflow: hidden; }
.sn-roll > span { display: block; transition: transform .7s var(--sn-ease); }
.sn-roll > span + span { color: var(--sn-mint); }
.sn-link:hover .sn-roll > span, .sn-link:focus-visible .sn-roll > span { transform: translateY(-100%); }
.sn-link:focus-visible { outline: none; }
.sn-link:focus-visible::after { content: ''; position: absolute; left: -6px; right: -6px; top: 2px; bottom: 2px; border: 1px solid var(--sn-mint); border-radius: 4px; }

/* ── 右：LANGUAGE（薄荷）＋ 信封（深灰）─────────────────────── */
.sn-right { position: relative; z-index: 2; display: flex; margin-left: auto; }
.sn-lang { position: relative; width: var(--sn-lang-w); }
.sn-lang-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    width: 100%;
    height: var(--sn-h);
    padding: 0 26px 0 20px;
    background: var(--sn-mint);
    color: #fff;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .02em;
    transition: background-color .35s ease;
}
.sn-lang-btn:hover, .sn-lang.is-open .sn-lang-btn { background: var(--sn-mint-deep); }
.sn-lang-btn:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.sn-dots { width: 20px; height: 13px; overflow: visible; }
.sn-dots circle { fill: currentColor; transition: transform .5s var(--sn-ease); }
/* 滑過：點陣往下點一下（像下拉箭頭） */
.sn-lang-btn:hover .sn-dots circle:nth-child(-n+3) { transform: translateY(1.5px); }
.sn-lang-btn:hover .sn-dots circle:nth-child(n+4):nth-child(-n+5) { transform: translateY(2.5px); }
.sn-lang-btn:hover .sn-dots circle:nth-child(6) { transform: translateY(3.5px); }
.sn-lang.is-open .sn-dots { transform: rotate(180deg); }
.sn-dots { transition: transform .5s var(--sn-ease); }
.sn-lang-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    padding: 8px 0 12px;
    list-style: none;
    background: var(--sn-mint-deep);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .55s var(--sn-ease), visibility 0s linear .55s;
}
.sn-lang.is-open .sn-lang-list { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .55s var(--sn-ease), visibility 0s; }
.sn-lang-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 26px 11px 20px;
    color: rgba(255, 255, 255, .86);
    font-size: 14px;
    letter-spacing: .08em;
    text-decoration: none;
    transition: color .3s ease, background-color .3s ease;
}
.sn-lang-list a:hover, .sn-lang-list a:focus-visible { color: #fff; background: rgba(255, 255, 255, .1); outline: none; }
.sn-lang-list a[aria-current="true"]::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.sn-mail {
    display: grid;
    place-items: center;
    width: var(--sn-mail-w);
    height: var(--sn-h);
    background: var(--sn-ink);
    color: #fff;
    transition: background-color .35s ease;
}
.sn-mail svg { width: 20px; height: 16px; overflow: visible; transition: transform .6s var(--sn-ease); }
.sn-mail:hover { background: #2c2c2c; }
.sn-mail:hover svg { transform: translateY(-2px); }
.sn-mail:focus-visible { outline: 2px solid var(--sn-mint); outline-offset: -6px; }
.sn-burger { display: none; }

/* ── 進場：載入後依序滑進來（.is-ready 由 js 加） ─────────────── */
.sn:not(.is-ready) .sn-logo { transform: translateY(-100%); }
.sn:not(.is-ready) .sn-right { transform: translateY(-100%); }
.sn:not(.is-ready) .sn-link { opacity: 0; transform: translateY(-14px); }
.sn:not(.is-ready)::after { transform: scaleX(0); }
.sn-logo, .sn-right { transition: transform 1s var(--sn-ease); }
.sn.is-ready .sn-right { transition-delay: .12s; }
.sn .sn-links li .sn-link { transition: color .45s ease, opacity .9s ease, transform 1s var(--sn-ease); }
.sn.is-ready .sn-links li:nth-child(1) .sn-link { transition-delay: 0s, .2s, .2s; }
.sn.is-ready .sn-links li:nth-child(2) .sn-link { transition-delay: 0s, .26s, .26s; }
.sn.is-ready .sn-links li:nth-child(3) .sn-link { transition-delay: 0s, .32s, .32s; }
.sn.is-ready .sn-links li:nth-child(4) .sn-link { transition-delay: 0s, .38s, .38s; }
.sn.is-ready .sn-links li:nth-child(5) .sn-link { transition-delay: 0s, .44s, .44s; }
.sn.is-ready .sn-links li:nth-child(6) .sn-link { transition-delay: 0s, .5s, .5s; }

/* ── 寬度縮小：先收間距、LANGUAGE 方塊變窄 ───────────────────── */
@media (max-width: 1440px) { .sn { --sn-gap: 40px; } }
@media (max-width: 1280px) { .sn { --sn-gap: 30px; --sn-lang-w: 180px; } .sn-link { font-size: 15px; } }

/* ── ≤ 1080px：漢堡＋全螢幕選單 ─────────────────────────────── */
@media (max-width: 1080px) {
    .sn { --sn-h: 64px; --sn-logo-w: 64px; --sn-lang-w: 64px; --sn-mail-w: 64px; }
    .sn-menu, .sn-mail { display: none; }
    .sn-lang-btn { justify-content: center; padding: 0; }
    .sn-lang-btn .sn-lang-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .sn-lang-list { left: auto; right: calc(-1 * var(--sn-mail-w)); width: 180px; }
    .sn-burger {
        display: grid;
        place-items: center;
        width: var(--sn-mail-w);
        height: var(--sn-h);
        background: var(--sn-ink);
        color: #fff;
    }
    .sn-burger:focus-visible { outline: 2px solid var(--sn-mint); outline-offset: -6px; }
    .sn-burger i { grid-area: 1 / 1; display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .6s var(--sn-ease); }
    .sn-burger i:first-child { transform: translateY(-4px); }
    .sn-burger i:last-child { transform: translateY(4px); }
    .sn.is-menu .sn-burger i:first-child { transform: rotate(45deg); }
    .sn.is-menu .sn-burger i:last-child { transform: rotate(-45deg); }
    /* 選單打開時：列本身透明，底下是全螢幕選單 */
    .sn.is-menu { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; }
    .sn.is-menu::after { background: rgba(255, 255, 255, .14); }
}

/* ── 全螢幕選單（≤ 1080px）───────────────────────────────── */
.sn-drawer {
    position: fixed;
    inset: 0;
    z-index: 79;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: calc(64px + 7svh) 8vw 6svh;
    background:
        radial-gradient(120% 70% at 100% 0%, rgba(118, 197, 175, .22), transparent 60%),
        radial-gradient(90% 60% at 0% 100%, rgba(118, 197, 175, .12), transparent 60%),
        #182427;
    color: #fff;
    font-family: 'Jost', 'Noto Sans TC', sans-serif;
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .8s var(--sn-ease, cubic-bezier(.19, 1, .22, 1)), visibility 0s linear .8s;
    overscroll-behavior: contain;
}
.sn-drawer.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .8s cubic-bezier(.19, 1, .22, 1), visibility 0s; }
.sn-drawer-links { margin: 0; padding: 0; list-style: none; counter-reset: sn; }
.sn-drawer-links li { overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.sn-drawer-links a {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 2.1svh 0;
    color: #fff;
    font-size: clamp(22px, 6.4vw, 34px);
    font-weight: 500;
    letter-spacing: .12em;
    text-decoration: none;
    transform: translateY(105%);
    transition: transform .9s cubic-bezier(.19, 1, .22, 1), color .3s ease;
}
.sn-drawer-links a small { font-size: 12px; letter-spacing: .08em; color: #76c5af; font-weight: 500; min-width: 1.8em; }
.sn-drawer-links a:hover, .sn-drawer-links a:focus-visible { color: #b8e6d8; outline: none; }
.sn-drawer.is-open .sn-drawer-links a { transform: none; }
.sn-drawer.is-open .sn-drawer-links li:nth-child(1) a { transition-delay: .18s, 0s; }
.sn-drawer.is-open .sn-drawer-links li:nth-child(2) a { transition-delay: .24s, 0s; }
.sn-drawer.is-open .sn-drawer-links li:nth-child(3) a { transition-delay: .3s, 0s; }
.sn-drawer.is-open .sn-drawer-links li:nth-child(4) a { transition-delay: .36s, 0s; }
.sn-drawer.is-open .sn-drawer-links li:nth-child(5) a { transition-delay: .42s, 0s; }
.sn-drawer.is-open .sn-drawer-links li:nth-child(6) a { transition-delay: .48s, 0s; }
.sn-drawer-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .9s cubic-bezier(.19, 1, .22, 1); }
.sn-drawer.is-open .sn-drawer-foot { opacity: 1; transform: none; transition-delay: .55s; }
.sn-drawer-lang { display: flex; gap: 18px; }
.sn-drawer-lang a { color: rgba(255, 255, 255, .6); font-size: 13px; letter-spacing: .1em; text-decoration: none; }
.sn-drawer-lang a[aria-current="true"] { color: #fff; }
.sn-drawer-mail { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; background: #76c5af; color: #fff; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-decoration: none; }
.sn-drawer-mail svg { width: 18px; height: 14px; }
html.sn-lock, html.sn-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .sn, .sn *, .sn::after, .sn-drawer, .sn-drawer * { transition-duration: .01s !important; transition-delay: 0s !important; }
}
@media print { .sn, .sn-drawer { display: none; } }


/* ── 選單文字對比實測（2026-09-26，1440×900，8 個捲動位置，量畫面上筆畫 vs 底）──
   底色 .1、不模糊的前提下，試過 mix-blend-mode：
     只有主題換色            1 / 8 通過 AA 4.5
     加 difference           2 / 8（白底段 1.33→6.56 變好，但照片段 5.22→2.04 變差）
   difference 在中灰底上會把白字混成中灰 ＝ 看不見，而這個站的圖多半落在中灰帶，
   所以混合沒有淨效益，沒有採用。
   ⚠ 另外實測到：讓子層的 mix-blend-mode 穿透到頁面，被 .sn 的 z-index: 80 擋住
     （不是 position: fixed 擋的）。要做得把連結層搬出 .sn —— 但那樣 --sn-* 變數
     全部繼承不到（gap 歸零、選單擠成一團），代價遠大於效益，已還原。
   目前對比的主力是「.is-on-dark 主題換色 ＋ 上面那圈文字描邊」。
   還是不夠的話，最有效的兩個調整：① 修 EPC 段的 data-nav-theme（白底卻標成 dark，
   那裡是白字壓白底，只有 1.33）② 把 .sn.is-solid 的底色從 .1 加回 .35 左右。 */