…
inline 元素包 block 時自己的框會被切成破碎片段，outline／box-shadow
幾乎畫不出東西 —— 模組作者當初就是因此把框畫在子元素上。通則掛在
身上對這種結構無效，只能跟著改掛子元素，順便把模組原本的橘色點虛線
（2px dotted #d26800，對白底僅 3.67:1、對彩色縮圖更低）換成雙色環。 */
.abimgs a:focus > .imgResponsiveShow,
.abimgs a:focus > .imgResponsiveShow_item,
.month-simple a:focus .day {
outline: 2px solid #000000 !important;
outline-offset: 3px !important;
box-shadow: 0 0 0 3px #ffffff !important;
}
/* 焦點環不可被模組的 transition:all 帶著動 —— box-shadow 與 outline-* 都是
可動畫屬性。模組在 .ct-focusslider .imgblock img (all .5s)、.focus-arrow
(all .3s)、.imgResponsiveShow_item (all .15s)，版型自己在 header>a
(all 200ms) 都用了 transition:all，結果焦點環會淡入，失焦後還淡出留下
白色殘影。
※ 必須在「非聚焦」狀態也生效：殘影發生在焦點已經移走之後，那時 :focus
規則早就不套用了，是元素回到自己的 transition:all 把環淡出的。
※ CSS 沒有「all 扣掉某幾個」的寫法，只能用白名單取代 all。清單是掃過
全站 102 個 transition:all 選擇器的 hover/focus 態實際改動屬性後列全的
（border-radius 42、width 26、left 26、padding-right 12… 都要保留，
否則搜尋框展開、滑動那類效果會變成瞬間跳），實際只排除 box-shadow
與 outline-*。清單列太長無害，不可動畫的值會被瀏覽器忽略。
※ 代價：全站有 5 處模組是刻意用 transition:all 去動 box-shadow 的，
那 5 處的陰影動畫會變成瞬間切換。 */
a, button, input, select, textarea, summary,
[tabindex], [role="button"], [role="link"] {
transition-property:
transform, opacity, filter, visibility,
color, background, background-color, background-image,
background-position, background-size,
fill, stroke,
border-color, border-width, border-radius,
width, height, min-width, min-height, max-width, max-height,
top, right, bottom, left,
margin, margin-top, margin-right, margin-bottom, margin-left,
padding, padding-top, padding-right, padding-bottom, padding-left,
font-size, font-weight, letter-spacing, line-height, text-shadow,
flex-basis, gap, z-index !important;
}
/**************************************************
= 輪播：環改畫在容器上（:focus-within）
輪播的投影片本身是一個被圖片填滿的連結：
![]()
CGA001 圖文輪播
BGA001 大橫幅
在它身上畫環兩條路都不通：
外側環 → 被祖先容器的 overflow:hidden 裁掉，只剩一條邊
內側環 → inset box-shadow 畫在背景層、在內容之下，被填滿的 ![]()
蓋住
（outline 不受影響，所以只看得到深紅那圈、白色不見）
換 px 數沒有用，這是繪製層級問題不是尺寸問題。
解法：環改畫在輪播容器自己身上。元素**自己的** overflow:hidden 只裁子孫、
不裁自己的 outline，所以容器上的外側雙色環可以完整顯示，與全站一致。
也不能改用 overflow:visible —— .focus-content 的 overflow:hidden 正是用來
藏住畫面外的投影片，放開會整排噴出來。
代價：框住的是整個輪播而不是單一張投影片（對「整張圖就是一個連結」的
輪播而言視覺上等價），且 Tab 到左右箭頭時也會框整個輪播。要把箭頭分開
需要 :has()（Chrome 105+）。
※ 只用在 BGA001 大橫幅。CGA001 圖文公告不要走這條 —— 它的
.focus-content 是四張卡整排的框，套上去會變成「框住四張卡」，看不出
焦點在哪一張。那裡外側環本來就可行：.imgblock 自己的 overflow:hidden
不裁自己的 outline，.item 又沒有設 overflow，所以交給全站通則即可，
只有最左／最右那張的外側邊會被 .focus-content 的邊界裁到。
********************/
.carousel:focus-within {
outline: 2px solid #000000 !important;
outline-offset: 3px !important;
box-shadow: 0 0 0 3px #ffffff !important;
}
/* 頁籤列一律用內側環：頁籤列都會把 overflow 關起來（橫向捲動用），外側環
四邊會被裁掉。
GA006 .tab-scroll-container SCSS !important +
- inline style 雙重
設 overflow-x/y:hidden，且 display:flex
緊貼頁籤高度
GA002 .nav-tabs
- inline style overflow:hidden，只留
paddingTop:2px，環的上緣會露出一小條、
其餘三邊被裁 —— 比全裁掉更難看
不能改用容器 :focus-within（會變成框住整排頁籤，看不出焦點在哪一個），
只能把環畫在頁籤內側。.nav-link 內距 0.5rem（8px），4px 的環不壓到文字。
直接掛在共用的 .nav-tabs 上，兩個模組與其他頁籤一併涵蓋，也讓全站頁籤
的焦點樣式一致，不必逐個模組補。 */
.nav-tabs :focus,
.tab-scroll-container :focus {
outline: 2px solid #000000 !important;
outline-offset: -2px !important;
box-shadow: inset 0 0 0 4px #ffffff !important;
}
/* 大橫幅的投影片本身不再自己畫環：畫了也是被裁掉或被圖片蓋住，留著只會在
容器環之外多一條殘缺的邊。 */
.carousel-item:focus,
.bgabannerpicimg:focus,
.bgabannerpicimgPhone:focus {
outline: none !important;
box-shadow: none !important;
}