/* Tab 顯示控制 */
 .tab-pane {
     display: none;
 }

 .tab-pane.active {
     display: block;
 }

 #tab2.tab-pane.active {
     display: flex;
 }

 /* miniMapExtraLink 切換 tab 時圖片置換為 gis.png */
 #miniMapExtraLink.tab-active img {
     content: url('../image/icons/gis.png');
 }

 /* 整個元件固定在左下角 */
 .floating-footer {
     position: fixed;
     left: 16px;
     bottom: 65px;
     display: flex;
     align-items: center;
     gap: 8px;
     z-index: 20;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
         "Microsoft JhengHei", sans-serif;
 }

 /* 左邊小地圖，可改成 <img> 會更像原站 */
 .mini-map {
     flex-shrink: 0;
     width: 60px;
     height: 60px;
     /* border-radius: 12px; */
     background: url('../image/icons/radar.png') center/cover no-repeat;
     /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); */
     cursor: pointer;
 }

 /* mini-map 左邊額外圖示 */
 .mini-map-extra {
     width: 60px;
     height: 60px;
     object-fit: contain;
     cursor: pointer;
     display: block;
 }

 #miniMapExtraLink {
     flex-shrink: 0;
     display: flex;
     align-items: center;
     height: 60px;
 }


 .footer-menu {
     position: absolute;
     left: 136px;
     bottom: 0;
     display: flex;
     align-items: center;
     gap: 12px;
     opacity: 0;
     pointer-events: none;
     transform: translateY(4px);
     transition: opacity 0.2s ease-out, transform 0.2s ease-out;
     background: #ffffff;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
     border-radius: 10px;
     padding: 8px 16px;
     white-space: nowrap;
 }

 /* ★ 加上 .open class 時才顯示功能列 */
 .floating-footer.open .footer-text {
     opacity: 0;
 }

 .floating-footer.open .footer-menu {
     opacity: 1;
     pointer-events: auto;
     transform: translateY(0);
 }

 /* 功能列每一顆按鈕 */
 .floating-footer .menu-item {
     border: none;
     background: transparent;
     padding: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     font-size: 11px;
     cursor: pointer;
 }

 /* 圓形 icon 外觀（可換成背景圖） */
 .floating-footer .icon-circle {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: #ffffff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
     margin-bottom: 2px;
 }

 .floating-footer .menu-item .label {
     font-size: 14px;
 }

 /* hover 一點點縮放效果 */
 .floating-footer .menu-item:hover .icon-circle {
     transform: scale(1.06);
 }

 /* 按鈕被點擊時的 active 狀態 */
 .floating-footer .menu-item.active .icon-circle {
     background: #0078d4;
     box-shadow: 0 2px 8px rgba(0, 120, 212, 0.4);
     transform: scale(1.12);
 }

 .floating-footer .menu-item.active .label {
     color: #0078d4;
     font-weight: 600;
 }

 /* 簡單 RWD：小螢幕縮小一點 */
 @media (max-width: 768px) {

     .floating-footer .footer-text {
         font-size: 12px;
     }

     .floating-footer .icon-circle {
         width: 28px;
         height: 28px;
         font-size: 16px;
     }

     .floating-footer .menu-item .label {
         font-size: 10px;
     }
 }