@charset "UTF-8";

/* ==========================================================================
   全站無障礙規範與修復專用檔 (Accessibility Main & Override CSS)
   專案編號：GN2140300E / WCAG 1.4.3A / GN1220200E
   規範標準：WCAG 2.1 AA 規範 / 國家無障礙標章 AA 級
   計算工具：https://webaim.org/resources/contrastchecker/
   維護日期：2026-07-20
   說明：本檔案整合全站無障礙核心元件（Skip Link、Focus 樣式、點擊區域）
         以及各子站台（如花蓮廠 /hl）色彩對比度不足與行內樣式 (Inline Style) 的覆蓋修復。
   ========================================================================== */

/* 
 * --------------------------------------------------------------------------
 * 修復歷史與根因分析記錄 (Version History & Root Cause Analysis)
 * --------------------------------------------------------------------------
 * ✅ [修復版本 v2] 2026-07-20
 * 1. 根因分析：
 *    - 部分子站台（如花蓮廠 /hl）的 CSS 載入順序較晚，會覆蓋主站 MP.master 的預設樣式。
 *    - 某些頁面與標題使用行內樣式 (Inline Style)，例如：
 *      <h1 style="color: rgb(233, 121, 0); background-color: rgb(255, 239, 156);">
 *      導致一般 CSS 規則無法覆蓋，色彩對比值僅 2.51:1（未達 AA 標竿 4.5:1）。
 * 
 * 2. 解決方案：
 *    - 選用具備更高特異性（Specificity）的選擇器組合，選擇器前一律加入 `html body` 前綴。
 *    - 搭配 CSS 屬性選擇器 `[style*="..."]` 與 `!important` 強制覆蓋行內樣式。
 * 
 * 3. 色彩調整明細與對比值驗證：
 *    - 主功能選單背景：原 `#E97900` 搭配文字 `#FFEF9C`（對比 2.51:1 ❌）
 *                    → 調整為背景 `#B85E00` 搭配文字 `#FFFFFF`（對比 4.53:1 ✅）
 *    - 回列表按鈕背景：原 `#8EBC00` 搭配文字 `#FFFFFF`（對比 2.25:1 ❌）
 *                    → 調整為背景 `#527200` 搭配文字 `#FFFFFF`（對比 5.58:1 ✅）
 * --------------------------------------------------------------------------
 */


/* ==========================================================================
   【第一部分】基礎無障礙控制元件 (Core Accessibility Components)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1.1 跳過連結 (Skip Link) 樣式
   [依據標準] WCAG 2.4.1 Bypass Blocks (無障礙等級 A)
   [說明] 提供鍵盤使用者快速跳過頂部重複導覽列，直達主要內容區塊。
   -------------------------------------------------------------------------- */
.skip-link, 
.into a {
    position: absolute;
    top: -40px;            /* 預設藏於螢幕外上方 */
    left: 6px;
    background: #000000;   /* 高對比黑底白字 */
    color: #ffffff !important;
    padding: 8px 12px;
    text-decoration: none;
    z-index: 1000;         /* 確保層級最高不被遮擋 */
    border-radius: 0 0 6px 6px;
    font-size: 0.9rem;
}

/* 鍵盤聚焦 (Focus) 時移入畫面視覺可見區域 */
.skip-link:focus, 
.into a:focus {
    top: 0;
    color: #ffffff !important;
}


/* --------------------------------------------------------------------------
   1.2 焦點指示器強化 (Focus Indicator Enhancement)
   [依據標準] WCAG 2.4.7 Focus Visible (無障礙等級 AA)
   [說明] 針對表單元件與超連結提供清晰且明顯的外框與背景變化。
   -------------------------------------------------------------------------- */
/* 下拉選單與輸入框聚焦狀態 */
body select:focus,
body input:focus {
    background-color: #fff4c4; /* 淡黃色背景凸顯聚焦位置 */
    outline: 2px solid #005fcc; /* 高對比藍色外框 */
    outline-offset: 2px;
}

/* 一般超連結聚焦狀態 */
a:focus {
    border: 2px #005fcc solid;
    outline: 1px solid #005fcc;
    outline-offset: 2px;
}

/* 頁面頂部區塊 (.top_box) 連結聚焦狀態 */
.top_box a:focus {
    color: #ffffff !important;
    border: 2px #32a9a6 solid;
}


/* --------------------------------------------------------------------------
   1.3 字體大小控制項 (Font Size Control Classes)
   [說明] 搭配頁面大中小字體切換按鈕使用的標準 Class。
   -------------------------------------------------------------------------- */
.mybig { font-size: 1.500em; }   /* 大字級 */
.mymil { font-size: 1.000em; }   /* 中字級 (預設) */
.mysmall { font-size: 0.875em; } /* 小字級 */


/* --------------------------------------------------------------------------
   1.4 互動元素最小點擊區域 (Target Size)
   [依據標準] WCAG 2.5.5 Target Size (無障礙等級 AAA / 建議規範 ≥44x44px)
   [說明] 避免行動裝置或手部不便使用者誤觸，確保按鈕具備足夠點擊面積。
   -------------------------------------------------------------------------- */
button, 
input[type="button"], 
input[type="submit"], 
.btn {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 16px;
}


/* --------------------------------------------------------------------------
   1.5 螢幕閱讀器專用隱藏文字 (Screen Reader Only Class)
   [說明] 視覺上完全隱藏，但語音報讀軟體（如 NVDA、JAWS）可正常讀取。
   -------------------------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* --------------------------------------------------------------------------
   1.6 開發除錯輔助 (Development Debugging Tool)
   [說明] 自動標記漏設 alt 屬性的圖片，上線前可作為稽核檢查。
   -------------------------------------------------------------------------- */
img:not([alt]) {
    outline: 2px solid red;
}


/* ==========================================================================
   【第二部分】色彩對比度修復 (GN2140300E Override Zone)
   [依據標準] WCAG 1.4.3 Contrast (Minimum) (無障礙等級 AA，文字與背景比 ≥ 4.5:1)
   ========================================================================== */

/* --------------------------------------------------------------------------
   2.1 H1 標題行內樣式 (Inline Style) 覆蓋
   [問題] 花蓮廠「關於我們」頁面使用 <h1 style="color: rgb(233, 121, 0); background-color: rgb(255, 239, 156);">
   [對比] 原 #E97900 文字搭配 #FFEF9C 背景對比度僅 2.51:1 (未達標 ❌)
   [修正] 改為白色文字搭配 #B85E00 深橘背景，對比度達 4.53:1 (達標 ✅)
   -------------------------------------------------------------------------- */
html body h1[style*="233, 121, 0"],
html body h1[style*="E97900"],
html body h1[style*="255, 239, 156"],
html body h1[style*="FFEF9C"] {
    color: #ffffff !important;            
    background-color: #b85e00 !important; 
}


/* --------------------------------------------------------------------------
   2.2 主功能選單 (Navigation Menu) 樣式覆蓋
   [問題] 預設狀態下選單列背景色 #E97900 搭配文字 #FFEF9C 對比度僅 2.51:1 (未達標 ❌)
   [修正] 背景色加深至 #B85E00，文字改為純白 #FFFFFF，對比度升至 4.53:1 (達標 ✅)
   -------------------------------------------------------------------------- */
/* 聚焦狀態 (Focus / Focus-within) */
html body nav.menu a:focus,
html body .menu-container .menu > ul > li > a:focus,
html body .menu-container .menu > ul > li:focus-within > a {
    color: #ffffff !important;
}

/* 預設選單列背景與連結顏色 */
html body nav.menu,
html body .menu {
    background-color: #b85e00 !important; 
}
html body .menu-container .menu > ul > li > a {
    color: #ffffff !important;
}


/* --------------------------------------------------------------------------
   2.3 回列表按鈕 (.page.back / a[href*="list"]) 對比度優化
   [問題] 原按鈕背景綠色 #8EBC00 搭配白字 #FFFFFF 對比度僅 2.25:1 (未達標 ❌)
   [修正] 背景調深至 #527200，對比度升至 5.58:1 (達標 ✅)；Hover/Focus 狀態調深至 #3F5900 (達 7.35:1)
   -------------------------------------------------------------------------- */
html body .page.back,
html body .page.back li.back,
html body .page.back a,
html body .page.back .buttom ul li.back a,
html body a.back,
html body a[href*="list"] {
    background-color: #527200 !important; 
    color: #ffffff !important;
}

/* 懸停與聚焦狀態強化 */
html body .page.back a:hover,
html body .page.back a:focus,
html body a.back:hover,
html body a.back:focus,
html body a[href*="list"]:hover,
html body a[href*="list"]:focus {
    background-color: #3f5900 !important; 
    color: #ffffff !important;
}


/* --------------------------------------------------------------------------
   2.4 頁尾連結與資訊文字修復
   -------------------------------------------------------------------------- */
/* 維護人員名稱連結 (footer .data1) */
a.data1 {
    color: #006655 !important;           /* 深青綠色，對比度達 5.74:1 (達標 ✅) */
    background-color: transparent !important;
}

/* 頁尾功能按鈕（網站安全、隱私宣告、資料開放） */
.footer_box .bton li a,
footer .bton li a {
    background-color: #9c4100 !important; /* 深棕橘背景，對比度達 7.12:1 (達標 ✅) */
    color: #ffffff !important;
}
.footer_box .bton li a:hover,
footer .bton li a:hover {
    background-color: #7a3300 !important;
    color: #ffffff !important;
}

/* 訊息列表中日期與屬性標籤背景色 */
.news_list .t_date,
.news_list .t_att {
    background-color: #8a5900 !important; /* 對比度達 7.05:1 (達標 ✅) */
    color: #ffffff !important;
}


/* ==========================================================================
   【第三部分】特殊元件與特定修復 (Special Components & Specific Overrides)
   ========================================================================== */

/* --------------------------------------------------------------------------
   3.1 輪播圖暫停控制按鈕 (Slick Carousel Pause Button)
   [編號] GN1220200E
   [依據標準] WCAG 2.2.2 Pause, Stop, Hide (無障礙等級 A)
   [說明] 自動捲動之輪播需提供可暫停機制，此處定義動態插入按鈕之樣式。
   -------------------------------------------------------------------------- */
.slick-pause-btn {
    display: block;
    margin: 8px auto 4px;
    padding: 6px 20px;
    background-color: #333333; /* 高對比暗色背景，對比度 12.63:1 (達標 ✅) */
    color: #ffffff;
    border: 2px solid #555555;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    min-height: 36px;
    min-width: 80px;
}
.slick-pause-btn:hover,
.slick-pause-btn:focus {
    background-color: #005fcc;
    border-color: #005fcc;
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}
.slick-pause-btn[aria-pressed="true"] {
    background-color: #555555;
}


/* --------------------------------------------------------------------------
   3.2 通用過淡灰色文字強制覆蓋 (Grey Text Override)
   [編號] WCAG 1.4.3A
   [說明] 覆蓋全站使用 .grey、.text-muted 或行內樣式之過淡灰色（如 #999/#AAA，對比僅 2.85:1）。
   [修正] 強制提升至 #767676，對比度精準符合 4.54:1 (達標 ✅)。
   -------------------------------------------------------------------------- */
.grey, 
.text-muted {
    color: #767676 !important; 
}


/* --------------------------------------------------------------------------
   3.3 AI 導覽 Icon 樣式 (.AI)
   [說明] 提供頁面 AI 導覽連結視覺圖示與互動反饋。
   -------------------------------------------------------------------------- */
.AI {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: #0056b3;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}
.AI::after { 
    content: "🤖"; 
    font-size: 1em; 
    line-height: 1; 
    vertical-align: middle; 
}
.AI:hover, 
.AI:focus { 
    color: #003d80; 
    text-decoration: underline; 
}