/* MOSKA 區段導覽 v1.0.0（moska-section-nav）：右側固定、半透明微型圓點導覽。導覽由 JS 產生，無 JS 時不出現。 */
.msn{--msn-accent:#E8452C;--msn-ink:#1B2238;--msn-right:12px;position:fixed;top:50%;right:var(--msn-right);right:max(var(--msn-right),env(safe-area-inset-right));z-index:990;display:flex;flex-direction:column;align-items:center;gap:2px;margin:0;padding:6px 3px;border-radius:999px;background:rgba(27,34,56,.24);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform:translateY(-50%);opacity:.75;transition:opacity .2s ease}
.msn[hidden]{display:none}
.msn:hover,.msn:focus-within{opacity:1}
.msn__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.msn__item{margin:0;padding:0}
.msn__link,.msn .msn__next{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:24px;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;font-size:0;line-height:1;letter-spacing:0;text-transform:none;text-decoration:none!important;box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* 佈景的 button 樣式（Astra 主題色底、hover 變色）不套到「下一區段」按鈕 */
.msn .msn__next,.msn .msn__next:hover,.msn .msn__next:focus,.msn .msn__next:active{background:transparent!important;color:#fff!important;border:0!important;box-shadow:none}
.msn__dot{display:block;width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(27,34,56,.55);transition:transform .2s ease,height .2s ease,background-color .2s ease}
.msn__link:hover .msn__dot{transform:scale(1.3)}
.msn__link[aria-current] .msn__dot{height:18px;background:var(--msn-accent);box-shadow:0 0 0 1.5px #fff}
.msn__link[aria-current]:hover .msn__dot{transform:none}
/* 區段名稱：一直在 DOM 內（連結的可及名稱），視覺上 hover／聚焦／切換區段時才浮現 */
.msn__label{position:absolute;top:50%;right:calc(100% + 8px);padding:4px 10px;border-radius:999px;background:var(--msn-ink);color:#fff;font:600 13px/1.4 "Noto Sans TC",system-ui,-apple-system,"Microsoft JhengHei",sans-serif;letter-spacing:.02em;white-space:nowrap;box-shadow:0 0 0 1px rgba(255,255,255,.3),0 6px 18px -8px rgba(0,0,0,.55);opacity:0;pointer-events:none;transform:translate(6px,-50%);transition:opacity .18s ease,transform .18s ease}
.msn__link[aria-current] .msn__label{background:var(--msn-accent)}
.msn__link:hover .msn__label,.msn__link:focus-visible .msn__label,.msn.is-announce .msn__link[aria-current] .msn__label{opacity:1;transform:translate(0,-50%)}
.msn__link:focus-visible,.msn .msn__next:focus-visible{outline:2px solid #fff;outline-offset:-1px;box-shadow:0 0 0 4px var(--msn-accent)}
.msn .msn__next{margin-top:2px;opacity:.9}
.msn__next:hover{opacity:1}
.msn__next[hidden]{display:none}
.msn__next svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 1px rgba(27,34,56,.7))}
/* 程式聚焦到區段（鍵盤使用者跳轉）時不畫整塊外框 */
[data-section-nav-label][tabindex="-1"]:focus{outline:none}
/* 矮視窗（橫向手機、小筆電）：縮小間距 */
@media (max-height:520px){.msn{padding:4px 2px}.msn__link,.msn .msn__next{height:20px}.msn__link[aria-current] .msn__dot{height:14px}}
@media (forced-colors:active){.msn{background:Canvas;border:1px solid CanvasText}.msn__dot{background:CanvasText}.msn__link[aria-current] .msn__dot{background:Highlight}}
@media (prefers-reduced-motion:reduce){.msn,.msn *{transition:none!important}}
@media print{.msn{display:none!important}}
