@charset "utf-8";
/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 導覽地圖頁 home.html（RWD，三語共用）<<<--------------------------------------*/
/* 地圖為背景圖 sitemap.jpg（1080×1920），原 image map 的 71 個熱點改為 % 定位的 <a>，                              */
/* 位置由 _tools/convert_map_page.py 從原 coords 換算後寫在各連結的 style 裡                                         */
/* ----------------------------------------------------------------------------------------------------------------*/

:root { --w:min(100vw, 700px); }   /* 同內容頁（#015）：寬 = 螢幕寬，最多 700px；底部按鈕看不到時有右側「Menu」可跳到底 */

html, body { margin:0; padding:0; }
body { background:#74c043; }

/* 地圖：寬度跟著螢幕縮放，最寬 700 置中；比例固定 1080:1920，熱點跟著等比縮放 */
#wrapper_index { position:relative; width:var(--w); aspect-ratio:1080 / 1920; margin:0 auto; background:no-repeat center top / 100% auto; }
.lang-tw #wrapper_index { background-image:url(../../tw/images/sitemap.jpg); }
.lang-en #wrapper_index { background-image:url(../../en/images/sitemap.jpg); }
.lang-jp #wrapper_index { background-image:url(../../jp/images/sitemap.jpg); }

/* 熱點 */
.map-spot { position:absolute; display:block; border-radius:6px; -webkit-tap-highlight-color:rgba(255,255,255,.3); transition:background-color .2s; }
.map-spot:hover { background-color:rgba(255,255,255,.25); }
.map-spot:focus-visible { outline:3px solid #f39800; outline-offset:1px; }

/* 圓形編號：left/top 為圓心；可點範圍至少 24px（手機上圓圈縮到約 16px，放大可點範圍比較好點中） */
.map-spot--circle { aspect-ratio:1; min-width:24px; border-radius:50%; transform:translate(-50%, -50%); }

/* 螢幕閱讀器用文字 */
.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; }