@charset "UTF-8";

/**
 * CS1140101E 鍵盤焦點可見樣式（全站共用，請於主要 CSS 之後載入）
 */
:root {
	--a11y-focus-ring: #ffbf47;
	--a11y-focus-shadow: #005a9c;
}

/* 連結、按鈕、表單控制項 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.125rem;
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem var(--a11y-focus-shadow) !important;
}

input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.125rem;
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem var(--a11y-focus-shadow) !important;
}

/* 導盲磚：維持內嵌框線，避免被外層 overflow 裁切 */
a.accesskey-guide:focus-visible,
a.accesskey-guide-top:focus-visible,
.header-misc-nav li a.accesskey-guide-top:focus-visible {
	outline: none !important;
	box-shadow: inset 0 0 0 0.125rem var(--a11y-focus-shadow) !important;
}

a.skip-link:focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.125rem;
	box-shadow: none !important;
}

/* 首頁 KV／典藏輪播 bxSlider
 * 外層 overflow:hidden 會裁切外框 outline，改用內嵌底色＋內框表現焦點 */
.index-kv .bx-viewport .index-kv-slider > a,
.index-kv-slider > a {
	position: relative;
}
.index-kv .bx-viewport .index-kv-slider > a:focus,
.index-kv .bx-viewport .index-kv-slider > a:focus-visible,
.index-kv-slider > a:focus,
.index-kv-slider > a:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
	/* 內嵌雙層框＋半透明底色，不受 overflow 裁切 */
	box-shadow: inset 0 0 0 0.375rem var(--a11y-focus-ring), inset 0 0 0 0.625rem var(--a11y-focus-shadow) !important;
	background-color: rgba(255, 191, 71, 0.4) !important;
	z-index: 2;
}
.index-kv .bx-viewport .index-kv-slider > a:focus::after,
.index-kv .bx-viewport .index-kv-slider > a:focus-visible::after,
.index-kv-slider > a:focus::after,
.index-kv-slider > a:focus-visible::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 90, 156, 0.22);
	pointer-events: none;
	z-index: 1;
}
.index-kv .bx-viewport .index-kv-slider > a:focus img,
.index-kv .bx-viewport .index-kv-slider > a:focus-visible img,
.index-kv-slider > a:focus img,
.index-kv-slider > a:focus-visible img {
	opacity: 0.88;
}

/* 左右箭頭：底色變換＋外框（覆寫 outline:0） */
.bx-wrapper .bx-controls-direction a:focus,
.bx-wrapper .bx-controls-direction a:focus-visible,
.index-kv .bx-wrapper .bx-controls-direction a:focus,
.index-kv .bx-wrapper .bx-controls-direction a:focus-visible,
.index-collection-slider-list .bx-wrapper .bx-controls-direction a:focus,
.index-collection-slider-list .bx-wrapper .bx-controls-direction a:focus-visible {
	outline: 0.25rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.1875rem !important;
	background-color: #ffbf47 !important;
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.375rem var(--a11y-focus-shadow) !important;
}

/* 分頁圓點：放大＋底色變換，焦點較易察覺 */
.bx-wrapper .bx-pager.bx-default-pager a:focus,
.bx-wrapper .bx-pager.bx-default-pager a:focus-visible,
.index-kv .bx-wrapper .bx-pager.bx-default-pager a:focus,
.index-kv .bx-wrapper .bx-pager.bx-default-pager a:focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-shadow) !important;
	outline-offset: 0.1875rem !important;
	background: #ffbf47 !important;
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem var(--a11y-focus-shadow) !important;
	transform: scale(1.45);
}

/* 暫停／播放鈕 */
.index-kv-autoplay-btn:focus,
.index-kv-autoplay-btn:focus-visible,
.index-collection-autoplay-btn:focus,
.index-collection-autoplay-btn:focus-visible,
.museum-slick-autoplay-btn:focus-visible {
	outline: 0.25rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.1875rem !important;
	background-color: #ffbf47 !important;
	border-color: var(--a11y-focus-shadow) !important;
	color: #003366 !important;
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.375rem var(--a11y-focus-shadow) !important;
}

/* 典藏精選輪播圖連結（同頁） */
.index-collection .bx-viewport a:focus,
.index-collection .bx-viewport a:focus-visible,
.index-collection-slider a:focus,
.index-collection-slider a:focus-visible {
	outline: none !important;
	box-shadow: inset 0 0 0 0.25rem var(--a11y-focus-ring), inset 0 0 0 0.4375rem var(--a11y-focus-shadow) !important;
	background-color: rgba(255, 191, 71, 0.4) !important;
}

/* 典藏研究縮圖 button：內嵌焦點框，避免 slick-list overflow 裁切 outline */
.photo-list.collection-slick-wrap button.slick-slider-thumb:focus-visible {
	outline: none !important;
	box-shadow: inset 0 0 0 0.1875rem var(--a11y-focus-ring), 0 0 0 0.125rem #fff, 0 0 0 0.3125rem var(--a11y-focus-shadow) !important;
}

/* slick 輪播 */
.slick-prev:focus-visible,
.slick-next:focus-visible,
.slick-dots li button:focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.125rem;
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem var(--a11y-focus-shadow) !important;
}

/* owl carousel */
.owl-carousel button:focus-visible,
.owl-carousel .owl-dot:focus-visible,
.owl-carousel .owl-dot button:focus-visible,
.owl-prev:focus-visible,
.owl-next:focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.125rem;
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem var(--a11y-focus-shadow) !important;
}

/* fotorama 圖集 */
.fotorama__arr:focus-visible,
.fotorama__fullscreen-icon:focus-visible,
.fotorama__thumb:focus-visible,
.fotorama__dot:focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.125rem;
}

/* 首頁快速連結、主選單 */
.fast-link a:focus-visible,
.main-nav a:focus-visible,
.header-misc-nav a:focus-visible,
.side-nav a:focus-visible,
.rwd-nav a:focus-visible,
.rwd-nav-btn:focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.125rem;
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem var(--a11y-focus-shadow) !important;
}

/* 圖片 LOGO 連結：僅外框 outline，避免 box-shadow 藍環在圖面產生橫線 */
h1.header-logo > a:focus-visible,
.header-misc-nav a:has(> img):focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.125rem;
	box-shadow: none !important;
}

h1.header-logo > a:focus-visible img,
.header-misc-nav a:focus-visible img {
	outline: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* Google 站內搜尋 */
#topcr .gsc-search-button-v2:focus-visible,
#rwd-topcr .gsc-search-button-v2:focus-visible,
#search_result .gsc-search-button-v2:focus-visible {
	outline: 0.1875rem solid var(--a11y-focus-ring) !important;
	outline-offset: 0.125rem;
}

/* 兒童專區 LOGO：用內嵌框（四邊都在連結內），避免上／左被 header-misc、overflow-x 裁掉 */
header h1.header-logo > a:focus,
header h1.header-logo > a:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
	/* 內嵌雙層黃／藍框＋底色，不依賴會被裁切的 outline */
	box-shadow: inset 0 0 0 0.25rem var(--a11y-focus-ring), inset 0 0 0 0.5rem var(--a11y-focus-shadow) !important;
	background-color: rgba(255, 191, 71, 0.45) !important;
	z-index: 30;
}
header h1.header-logo > a:focus img,
header h1.header-logo > a:focus-visible img {
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
	border: 0 !important;
	opacity: 0.92;
}

/* 兒童專區：到處逛逛（鴿子圖熱點） */
a.dove:focus,
a.dove:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: inset 0 0 0 0.375rem var(--a11y-focus-ring), inset 0 0 0 0.625rem var(--a11y-focus-shadow) !important;
	background-color: rgba(255, 191, 71, 0.25) !important;
	z-index: 5;
}

/* 不支援 :focus-visible 的舊版瀏覽器 */
@supports not selector(:focus-visible) {
	a:focus,
	button:focus,
	input:focus,
	select:focus,
	textarea:focus,
	[tabindex]:focus {
		outline: 0.1875rem solid var(--a11y-focus-ring) !important;
		outline-offset: 0.125rem;
	}

	h1.header-logo > a:focus,
	.header-misc-nav a:focus {
		box-shadow: none !important;
	}

	/* 首頁輪播：舊瀏覽器同樣用內嵌底色／內框 */
	.index-kv .bx-viewport .index-kv-slider > a:focus,
	.index-kv-slider > a:focus {
		outline: none !important;
		box-shadow: inset 0 0 0 0.375rem var(--a11y-focus-ring), inset 0 0 0 0.625rem var(--a11y-focus-shadow) !important;
		background-color: rgba(255, 191, 71, 0.4) !important;
	}
	.index-kv .bx-wrapper .bx-controls-direction a:focus,
	.index-kv .bx-wrapper .bx-pager.bx-default-pager a:focus,
	.index-kv-autoplay-btn:focus {
		outline: 0.25rem solid var(--a11y-focus-ring) !important;
		background-color: #ffbf47 !important;
		box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.375rem var(--a11y-focus-shadow) !important;
	}
}