@charset "utf-8";
/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 右側固定「選單 Menu」按鈕（#015）<<<--------------------------------------------*/
/* 用在首頁 index.html、地圖頁 home.html：電腦版頁面高於一個螢幕，底部按鈕要往下捲才看得到，                           */
/* 按下後捲到最底部；底部已經看得到時自動隱藏（jump_menu.js）。樣式沿用播放列的深綠底黃字                              */
/* ----------------------------------------------------------------------------------------------------------------*/

.jump-menu {
	position:fixed; z-index:50; top:70%;   /* 畫面偏下 */
	right:max(12px, calc((100vw - min(100vw, 700px)) / 2 + 12px));   /* 貼著 700px 版面的右緣內側 */
	transform:translateY(-50%);
	display:inline-flex; align-items:center; gap:.4em;
	padding:.55em 1em; border-radius:999px;
	background:rgba(20, 108, 46, .72); color:#fef200; text-decoration:none;   /* 半透明，不擋住底下的圖 */
	font:bold 17px/1.2 "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif; letter-spacing:1px;
	box-shadow:0 2px 10px rgba(0,0,0,.35);
	transition:opacity .3s, visibility .3s, background-color .2s;
}
.jump-menu::after { content:"▼"; font-size:.75em; }
.jump-menu:hover,
.jump-menu:focus-visible { background:#0e5523; }
.jump-menu:focus-visible { outline:3px solid #f39800; outline-offset:2px; }
.jump-menu.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }

/* 跳動：每 2 秒輕彈一下，提示可以往下捲；滑鼠移上去時停住，系統設定「減少動態效果」時不跳 */
.jump-menu { animation:jump-menu-bounce 2s ease-in-out infinite; }
.jump-menu:hover,
.jump-menu:focus-visible { animation-play-state:paused; }
@keyframes jump-menu-bounce {
	0%, 20%, 50%, 80%, 100% { transform:translateY(-50%); }
	40% { transform:translateY(calc(-50% - 10px)); }
	60% { transform:translateY(calc(-50% - 5px)); }
}
@media (prefers-reduced-motion: reduce) {
	.jump-menu { animation:none; }
}

/* 手機不顯示（#015）：手機版頁面最多只超出一點，手指一滑就到底；固定按鈕反而容易擋到地圖編號
   ① 寬 600px 以下（手機直拿） ② 觸控裝置且高 500px 以下（手機橫拿，寬度會超過 600） */
@media (max-width:600px), (pointer:coarse) and (max-height:500px) {
	.jump-menu { display:none; }
}

#page-end { height:0; }   /* 頁面最底部的定位點，按鈕連到這裡 */
