/* 無障礙（A 級標章）專用樣式 */
/* 隱藏文字：外觀不變，螢幕報讀軟體與檢測工具讀得到 */
.a11y-sr {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* 跳到主要內容、導盲磚 U／C／Z：平常移出畫面，取得焦點時顯示
（transition:none 避免站台 a{transition:all} 讓它從畫面外飛進來；
導盲磚聚焦時不可改 position:fixed，否則瀏覽器不會捲動到該處 —— FIX_CATALOG 第三階段） */
.a11y-skip, .a11y-acc {
transition: none !important;
position: absolute !important;
left: -10000px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
/* 跳到定位點時上方留出黏頂導覽列的高度＋20px：高度由 template/js/a11y.js 實際量測（--a11y-sticky-h），不寫死；未執行腳本時預設 70px */
.a11y-acc { scroll-margin-top: calc(var(--a11y-sticky-h, 70px) + 20px); }
.a11y-acc:focus {
left: auto !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
z-index: 100000 !important;
padding: 2px 8px !important;
background: #000 !important;
color: #fff !important;
font-size: 16px !important;
line-height: 1.5 !important;
text-decoration: none !important;
outline: 3px solid #ffbe3b !important;
}
.a11y-skip:focus {
position: fixed !important;
left: 8px !important;
top: 8px !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
z-index: 100000 !important;
padding: 8px 16px !important;
background: #000 !important;
color: #fff !important;
font-size: 16px !important;
line-height: 1.5 !important;
text-decoration: none !important;
outline: 3px solid #ffbe3b !important;
}
/* 鍵盤操作時的焦點外框（只在鍵盤操作時出現，不影響滑鼠點擊外觀） */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline: 3px solid #ffbe3b !important;
outline-offset: 2px !important;
}
/* 主選單子選單：原本只有滑鼠 hover（plugins.js 以 fadeIn 顯示），鍵盤聚焦時也要展開，否則 Tab 進不去 */
.nav-menu .nav-toggle:focus-within > .dropdown-menu { display: block !important; }
/* 3.2.2 輸入：會立即重新載入的下拉選單，事先以文字說明 */
.a11y-note { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: #555; }
/* 1.3.1 標題層級：改標籤不改外觀（a11y-hN 維持原本 hN 的樣式；皆以 Chrome 計算樣式比對為零差異）
隱藏的 h1（站名）用 .a11y-sr；會員版型沿用 dashlite 的 .h3／.h5 字級 class */
.news h2.a11y-h3 { font-size: 18px; line-height: 19.8px; color: rgb(53, 53, 53); margin-top: 25px; }
h3.a11y-h5 { font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: 1px; }
.article-content h3.a11y-h4 { font-size: 18px; line-height: 19.8px; margin-top: 10px; padding-top: 0; }
/* 2.2.2 暫停、停止和隱藏：首頁「請向下滾動滑鼠」箭頭原本無限彈跳（style.css .jump：2s infinite）
→ 只跳 2 次（共 4 秒，低於 5 秒）後停止；使用者系統設定「減少動態效果」時不播放 */
.jump { -webkit-animation-iteration-count: 2 !important; animation-iteration-count: 2 !important; }
@media (prefers-reduced-motion: reduce) {
.jump { -webkit-animation: none !important; animation: none !important; }
}
/* 網站導覽頁（/tw/sitemap）：網站架構清單（reset.css 把清單符號與縮排清掉，這裡還原） */
.a11y-sitemap ul { list-style: disc; margin: 0 0 20px; padding-left: 1.5em; }
.a11y-sitemap ul ul { list-style: circle; margin: 4px 0 8px; }
.a11y-sitemap li { line-height: 1.9; }
.a11y-sitemap h3 { margin: 30px 0 12px; padding: 0; }
.a11y-sitemap h3:first-child { margin-top: 0; }
.a11y-sitemap a { text-decoration: underline; }
/* 鍵盤焦點外框補強（使用者實測回報 2026-10-02） */
/* 首頁最新消息卡片圖片：(1) 是行內元素卻包著區塊（div.image），本身沒有面積，外框畫不出來 → 改為區塊
(2) 外層輪播容器 overflow:hidden 會把畫在外側的外框裁掉 → 改畫在內側（兩者都要，實測只做 (2) 仍看不到外框） */
.news .inner-slider a { display: block; }
.news .owl-wrapper-outer a:focus-visible, .inner-slider a:focus-visible { outline-offset: -3px !important; }
/* 首頁「參展報名／報名資訊／常見問題」： 是行內元素卻包著區塊內容，外框畫不完整 → 改為區塊 */
#about a.dark { display: block; }
/* 「回到頁面上方」未顯示時（頁面在頂端，僅 opacity:0）不可取得焦點；捲動後加上 is-visible 才可聚焦 */
.btsp4 .back-to-top:not(.is-visible) { visibility: hidden; }
/* 1.4.1 色彩使用：內文中的連結原本和內文同色、沒有底線（或只靠顏色），看不出是連結 → 加底線。
範圍：內容區（section.container .inner）的段落、清單、表格、附件下載連結；按鈕型連結（.btn）、分頁、常見問題收合標題不加。
樣板輸出的列表表格（最新消息、藝術家列表；沒有 style／role 屬性）整欄都是連結，不屬於「內文中的連結」，維持原樣 */
section.container .inner p a:not(.btn),
section.container .inner li a:not(.btn),
section.container .inner td a:not(.btn),
section.container .inner dd a:not(.btn),
section.container .inner div > a.file,
section.container .inner div[dir] a:not(.btn) { text-decoration: underline; }
section.container .inner .pagination li a,
section.container .inner .panel li a,
section.container .inner .panel a,
section.container .inner table[cellspacing="0"][border="0"]:not([style]):not([role]) td a { text-decoration: none; }
/* 會員版型頁尾的聯絡信箱 */
.nk-footer-copyright a { text-decoration: underline; }
/* 1.3.1 標題層級（第 13 批）：首頁加隱藏 h1 後，三個入口標題 h4 → h2、「最新消息」「關於」h1 → h2、消息標題改回 h3；
訂單查詢頁的 h1 → h2。以下 class 維持改標籤前的外觀（Chrome 計算樣式比對） */
#about h2.a11y-h4 { font-size: 18px; line-height: 19.8px; margin-top: 10px; }
/* 訂單查詢頁標題：h2 沿用版型的 .h1-style（字級與 h1 相同），只還原 h1 在 .page-title 內的下邊距 */
.page-title h2.a11y-h1 { margin-bottom: 0 !important; }
/* 首頁報名期間區塊的「參展報名」：h1 → h2，維持 h1 的字級 */
.header h2.a11y-h1 { font-size: 36px; line-height: 39.6px; padding-top: 0; }
/* 資料庫內文裡的 h1（最新消息 20/20，SQL 第 4 輪改為 h2）：維持 h1 的字級 */
.article-content h2.a11y-h1c { font-size: 36px; line-height: 39.6px; }
/* 1.2.2 作品內頁的藝術家影片：不內嵌播放，改為連到 YouTube 的連結（縮圖＋播放圖示＋文字，第 14 批）
縮圖 hqdefault.jpg 是 4:3、上下有黑邊 → 以 object-fit: cover 裁成 16:9（外框沿用 style.css 的 .video_wrapper） */
.a11y-video-link { display: block; text-decoration: none; }
.a11y-video-link .video_wrapper { display: block; overflow: hidden; background: #000; }
.a11y-video-link .video_wrapper img { object-fit: cover; }
.a11y-video-play {
position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px;
background: rgba(33, 33, 33, 0.8); border-radius: 12px;
}
.a11y-video-play::after {
content: ""; position: absolute; top: 14px; left: 27px;
border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff;
}
.a11y-video-link:hover .a11y-video-play, .a11y-video-link:focus .a11y-video-play { background: #f00; }
.a11y-video-text { display: block; margin-top: 8px; text-decoration: underline; }
/* 1.2.3 內嵌影片（主辦方頻道）下方的一句影片內容簡述，作為文字替代內容（第 16 批）
兩欄並排時保留兩行高度，避免各欄高度不同造成浮動錯位；黑底區塊用淺色字 */
.a11y-video-desc { margin: 6px 0 0; font-size: 14px; line-height: 1.5; text-align: left; }
.a11y-video-desc-light { color: #fff; }
@media (min-width: 992px) {
.col-md-6 > .a11y-video-desc, .video_wrapper + .a11y-video-desc { min-height: 3em; }
}
/* plugins21.js 會把 YouTube iframe 再包一層 .embed-responsive（16:9）；放在已是 16:9 的 .video_wrapper 內時高度變兩倍，
影片下方多出一段空白、簡述離影片很遠（獲獎紀錄頁）→ 內層改為填滿外框（第 17 批） */
.video_wrapper > .embed-responsive { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-bottom: 0; }
/* 內文的 iframe 若寫了行內高度（例：height: 550px），不會填滿 .embed-responsive 的 16:9 外框，影片下方留下空白（2019 藏海頁 90px）→ 一律填滿外框（第 18 批） */
.embed-responsive > iframe { height: 100% !important; }
/* 會員版型：作品管理頁「參展注意事項」h6 → h2（頁面標題改為 h1 後的下一層），維持原本 h6 的外觀（第 19 批，登入後量測） */
h2.a11y-h6m { font-family: Roboto, "Noto Sans TC", sans-serif; font-size: 16.8px; line-height: 18.48px; letter-spacing: -0.168px; font-weight: 700; margin-bottom: 8px; }
/* 會員版型列表頁的頁面標題 h3 → h1：字級由 .page-title 決定，只有字距不同（h1 為 -0.04em）→ 還原成原本 h3 的 -0.03em */
h1.nk-block-title.page-title { letter-spacing: -0.03em; }
/* 2.5.1 作品放大檢視：a11y.js 在手機全螢幕補上的放大／縮小按鈕（外框沿用元件的 .ndd-uberzoom-zoomin／zoomout 樣式，這裡只排版文字） */
.a11y-uz-btn { color: #fff; font-size: 28px; line-height: 44px; text-align: center; font-family: Arial, sans-serif; -webkit-user-select: none; user-select: none; }
/* 全螢幕檢視的操作按鈕（關閉全螢幕、放大、縮小）維持顯示：元件閒置幾秒後會把整層介面淡出（opacity:0），
鍵盤聚焦或手機使用者會看不到按鈕 */
.ndd-uberzoom-container-fullscreen .ndd-uberzoom-interface { opacity: 1 !important; }
/* 頁面上（非全螢幕）的「全螢幕顯示」按鈕平常是透明的（滑鼠移上圖片才出現）：鍵盤聚焦到按鈕時顯示出來 */
.ndd-uberzoom-interface:focus-within { opacity: 1 !important; }
/* 1.1.1 CS1110113E 裝飾圖以 CSS 置入（2026-10-14 複核 N4）：首頁三個圖示原為 ![]()
，
enlivenem 動畫腳本會把它換成行內 svg（沒有 aria-hidden，且帶「Created with Snap」說明）→ 改為背景圖，外觀與原本 100×100 相同（不再有滑過動畫） */
.a11y-home-icon { display: inline-block; width: 100px; height: 100px; background: no-repeat center / contain; }
.a11y-home-icon-clipboard { background-image: url("../images/enlivenem-icons/clipboard.svg"); }
.a11y-home-icon-bell2 { background-image: url("../images/enlivenem-icons/2/bell2.svg"); }
.a11y-home-icon-light-bulb2 { background-image: url("../images/enlivenem-icons/2/light-bulb2.svg"); }
/* 交通資訊（/tw/about/3，資料庫內文）的交通方式圖示，同上改為背景圖（SQL a11y_r7） */
.a11y-traffic-icon { display: inline-block; width: 100px; height: 100px; background: no-repeat center / contain; vertical-align: middle; }
.a11y-traffic-1 { background-image: url("/upload/images/traffic_1.svg"); }
.a11y-traffic-2 { background-image: url("/upload/images/traffic_2.svg"); }
.a11y-traffic-3 { background-image: url("../images/a11y/traffic_3.svg"); }
.a11y-traffic-4 { background-image: url("/upload/images/traffic_4.svg"); }
.a11y-traffic-5 { background-image: url("/upload/images/traffic_5.svg"); }