/* =========================================================
   TNUA ANI - WCAG AA 統整版 CSS
   建議放在 main.css/layout.css 最後
========================================================= *//* ===== 1. 全站變數 ===== */
:root {
  --focus-color:#ffd400;--focus-ring-bg:#b00020;--focus-radius:0.375rem;--focus-outline-width:0.1875rem;/* 3px */
  --focus-ring-outer-width:0.125rem;/* 2px */
  --skip-bg:#000000;--skip-color:#ffffff;--menu-focus-bg:rgba(50,50,50,0.4);--submenu-focus-bg:rgba(0,0,0,0.12);--field-focus-bg:#fffef2;
}
/* ===== 2. 基本文字與字級 ===== */
html { font-size: 100%; }
body { font-size: 1rem; line-height: 1.6; }
p,span,li,dt,dd,a,label,input,textarea,select,button,th,td,blockquote { font-size: inherit; }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }
.fa,.fas,.far,.fab,.svg-inline--fa { font-size: 1em; }
.textEditor,.editor,.editorContent { font-size: 1rem; line-height: 1.7; }
.textEditor *,.table_brand *,[class*="articleInfo"] h1,[class*="articleInfo"] h2,[class*="articleInfo"] h3,[class*="articleInfo"] h4,[class*="articleInfo"] h5,[class*="articleInfo"] h6,[class*="articleInfo"] p,[class*="articleInfo"] li,#jumpDiv,#jumpIframe { font-size: inherit; }
/* ===== 3. Skip Link ===== */
.skip-link {position: absolute;left: 1rem;top: -3.5rem;z-index: 9999;padding: 0.75rem 1rem;color: var(--skip-color);text-decoration: none;border-radius: 0.25rem;}
.skip-link:focus,.skip-link:focus-visible,.header-skip-link:focus,.header-skip-link:focus-visible { top: 1rem; outline: var(--focus-outline-width) solid var(--focus-color); outline-offset: 0.1875rem; box-shadow: 0 0 0 var(--focus-ring-outer-width) var(--focus-ring-bg); }
/* ===== 4. 全站可操作元件焦點 ===== */
a,button,input,select,textarea,summary,[role="button"],[role="link"],[role="tab"],[tabindex]:not([tabindex="-1"]),.slick-arrow,.slick-dots button { overflow: visible; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[role="button"]:focus-visible,[role="link"]:focus-visible,[role="tab"]:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible,.slick-arrow:focus-visible,.slick-dots button:focus-visible { outline: var(--focus-outline-width) solid var(--focus-color) !important; outline-offset: 0.1875rem; border-radius: var(--focus-radius); box-shadow: 0 0 0 var(--focus-ring-outer-width) var(--focus-ring-bg) !important; text-decoration: none; position: relative; z-index: 2; }
a:focus:not(:focus-visible),button:focus:not(:focus-visible),input:focus:not(:focus-visible),select:focus:not(:focus-visible),textarea:focus:not(:focus-visible),summary:focus:not(:focus-visible),[role="button"]:focus:not(:focus-visible),[role="link"]:focus:not(:focus-visible),[role="tab"]:focus:not(:focus-visible),[tabindex]:not([tabindex="-1"]):focus:not(:focus-visible),.slick-arrow:focus:not(:focus-visible),.slick-dots button:focus:not(:focus-visible) { outline: none; box-shadow: none; }
/* 舊瀏覽器保底 */
@supports not selector(:focus-visible) {
  a:focus,button:focus,input:focus,select:focus,textarea:focus,summary:focus,[role="button"]:focus,[role="link"]:focus,[role="tab"]:focus,[tabindex]:not([tabindex="-1"]):focus,.slick-arrow:focus,.slick-dots button:focus { outline: var(--focus-outline-width) solid var(--focus-color) !important; outline-offset: 0.1875rem; border-radius: var(--focus-radius); box-shadow: 0 0 0 var(--focus-ring-outer-width) var(--focus-ring-bg) !important; }
}
/* ===== 5. 避免固定 header 蓋住焦點 ===== */
#content_wrap a,#content_wrap button,#content_wrap input,#content_wrap select,#content_wrap textarea,#content_wrap [tabindex]:not([tabindex="-1"]),#menuBox a,#menuBox button,#menuBox [tabindex]:not([tabindex="-1"]),footer a,#gotop a,#gotop button { scroll-margin-top: 6.875rem; }
/* ===== 6. sr-only ===== */
.sr-only { position: absolute !important; width: 0.0625rem !important; height: 0.0625rem !important; padding: 0 !important; margin: -0.0625rem !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
/* ===== 7. aria-hidden 元件避免誤操作 ===== */
[aria-hidden="true"] a,[aria-hidden="true"] button,[aria-hidden="true"] input,[aria-hidden="true"] select,[aria-hidden="true"] textarea { pointer-events: none; }
/* ===== 8. Header/桌機主選單 ===== */
header,header .barBox,header .wrap,#webmenu,.menu_box,.menu_box ul,.menu_box li { position: relative; }
.menu_box li .menu_body { display: none; opacity: 0; visibility: hidden; pointer-events: none; z-index: 9999; }
.menu_box li:hover .menu_body,.menu_box li:focus-within .menu_body { display: block; opacity: 1; visibility: visible; pointer-events: auto; }
.menu_box li:hover .wire-cube,.menu_box li:focus-within .wire-cube { display: flex; }
.menu_box a { position: relative; text-decoration: none; }
.menu_box a:focus-visible,.menu_box li:focus-within > p > a,.menu_box li:focus-within > a { color: inherit !important; background: var(--menu-focus-bg) !important; text-shadow: none !important; -webkit-text-fill-color: currentColor !important; opacity: 1 !important; visibility: visible !important; }
.menu_box .menu_body a:focus-visible { background: var(--submenu-focus-bg) !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; }
.menu_box a.txt_white_5:focus-visible,.menu_box li:focus-within > p > a.txt_white_5 { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.menu_box li:focus-within { z-index: 10000; }
/* ===== 9. 語系切換 ===== */
.language { position: relative; text-decoration: none; }
/* ===== 10. 行動版選單 ===== */
#menuBox .box { overflow-y: auto; -webkit-overflow-scrolling: touch; }
#menuBox li:focus-within > .menu_body { display: block; opacity: 1; visibility: visible; }
#menuBox[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
#menuBox[aria-hidden="false"] { visibility: visible; pointer-events: auto; }
#menu_lineBox:focus-visible,#menubg:focus-visible,#menuBox a:focus-visible,#menuBox button:focus-visible,#menuBox [tabindex]:not([tabindex="-1"]):focus-visible { color: inherit !important; background: var(--menu-focus-bg) !important; text-shadow: none !important; -webkit-text-fill-color: currentColor !important; }
/* ===== 11. Breadcrumb ===== */
.waylink a:focus-visible,.waylink [aria-current="page"]:focus-visible { border-radius: 0.25rem; }
/* ===== 12. 卡片/列表/區塊焦點群組 ===== */
.imgList:focus-within,.textfeature:focus-within,.item:focus-within,.teamItem:focus-within,.processBox li:focus-within,.newsList li:focus-within,#article_list li:focus-within,.summerBoxRow .content:focus-within,.pdf-viewer:focus-within { box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-color),0 0 0 calc(var(--focus-outline-width) + var(--focus-ring-outer-width)) var(--focus-ring-bg); border-radius: 0.5rem; }
/* ===== 13. Fancybox/PDF/相關連結 ===== */
[data-fancybox]:focus-visible,.pdf-link a:focus-visible { border-radius: 0.5rem; }
/* ===== 14. 表單焦點 ===== */
input:focus-visible,select:focus-visible,textarea:focus-visible { background: var(--field-focus-bg); border-color: var(--focus-color) !important; }
/* ===== 15. Footer/Social/Logo ===== */
footer a,#cis a,.flogo a,.social a,#gotop a,#gotop button { position: relative; }
footer a:focus-visible,#cis a:focus-visible,.flogo a:focus-visible { border-radius: 0.5rem; }
.social a:focus-visible { border-radius: 50%; }
/* ===== 16. Go Top ===== */
#gotop a,#gotop button { width: 2.5rem; height: 2.5rem; background-color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
#gotop button { cursor: pointer; }
/* ===== 17. Tabs/Accordion/自訂按鈕 ===== */
[aria-expanded="true"]:focus-visible,[aria-controls]:focus-visible { border-radius: 0.375rem; }
/* ===== 18. 避免舊 CSS 把焦點清掉 ===== */
a:focus,button:focus,input:focus,select:focus,textarea:focus { /* 刻意保留，交由: focus-visible 或 fallback 控制 */ }
/* ===== 19. 響應式避免桌機/手機選單同時可 Tab ===== */
@media (min-width:75rem) {
  #menuBox { display: none; }
}
@media (max-width:74.9375rem) {
  #webmenu { display: none; }
}
/* ===== 20. prefers-reduced-motion ===== */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}