/* 樓層切換器 */
.floor-plan-container{display:flex;max-width:1200px;margin:0 auto;border-radius:12px;overflow:hidden}

/* --- 左側樓層選單 (Desktop/Tablet) --- */
.floor-menu{display:flex;flex-direction:column;padding:10px;width:80px;flex-shrink:0;gap:20px;align-items: center;}
.floor-btn{background:#e5e5e5;border:none;color:#707070;padding:8px 0px;font-size:18px;font-weight:500;cursor:pointer;text-align:center;border-radius: 55px;transition: background-color 0.6s,transform 0.2s,color 0.6s;position:relative;overflow:hidden;width: 46px;height: 46px;line-height: 130%;}
.floor-btn.active{box-shadow:0 4px 8px rgb(138 138 138 / 32%);transform:scale(1.05);background:#1f72c0;color:#fff;font-size:28px;width: 60px;height: 60px;}
.floor-btn.active::after{width:0}

/* --- 右側樓層圖顯示區 --- */
.floor-map-display{flex-grow:1;position:relative;min-height:820px}
.floor-map{position:absolute;top:10px;left:10px;right:10px;bottom:10px;opacity:0;transform:scale(0.98);transition:opacity 0.5s ease-out,transform 0.5s ease-out;visibility:hidden;overflow:auto;background-color:#f9f9f9;border-radius:8px;padding:20px}
.floor-map.active{opacity:1;transform:scale(1);visibility:visible}
.floor-map img{max-width:100%;height:auto;display:block;border-radius:4px}

/* 確保 SVG 容器的尺寸和顯示 */
.svg-wrap { max-width: 100%; margin: 0; }
.svg-wrap svg { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------- */
/*  SVG 熱區樣式修正與點擊效果  */
/* ---------------------------------------------------- */

/* 針對整個熱區群組 (元素) */
.hotspot-group{outline:none}
.hotspot-group:focus{outline:none !important;-moz-outline-style:none !important}
.hotspot{cursor:pointer;fill:rgba(0,128,255,0);stroke:rgba(0,96,192,0);stroke-width:2;transition:fill .15s,stroke .15s,opacity .15s;outline:none}
.hotspot-group:hover .hotspot,.hotspot-group:focus .hotspot{fill:rgba(0,128,255,.25);stroke:rgba(0,96,192,.9)}
.hotspot-group:active .hotspot{fill:rgba(0,50,150,0.5);stroke:rgba(0,0,0,1);stroke-width:3;transition:none}


/* 定義整個滾動條的寬度/高度 */
.floor-map-display::-webkit-scrollbar{width:10px;height:10px}
.floor-map-display::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}
.floor-map-display::-webkit-scrollbar-thumb{background:#b1b1b1;border-radius:10px}
.floor-map-display::-webkit-scrollbar-thumb:hover{background:#9b9b9b}
.floor-map::-webkit-scrollbar{width:4px;height:4px}
.floor-map::-webkit-scrollbar-track{background:#e0e0e0}
.floor-map::-webkit-scrollbar-thumb{background:#b0b5b9;border-radius:4px}
.floor-map::-webkit-scrollbar-thumb:hover{background:#9b9b9b}

/* 請移動滑鼠 */
.mouse-prompt{display:inline-flex;align-items:center;padding:10px 15px;border:1px solid #eeeeee;border-radius:25px;background-color:#ffffff;box-shadow:0 1px 1px rgba(0,0,0,0.1);color:#333333;font-size:16px;white-space:nowrap;margin-top:20px}
.mouse-icon{width:18px;height:18px;margin-right:6px;stroke:#888888;flex-shrink:0}
.prompt-text{line-height:1.5;font-size:14px}
.mouse-prompt:hover{border-color:#d5d5d5}

@media (max-width: 1280px) {
    .floor-map-display{min-height: 760px;}
}
@media (max-width: 1140px) {
    .floor-map-display{min-height: 650px;}
}
@media (max-width: 768px) {
    .floor-plan-container{flex-direction:column}
	.floor-menu{flex-direction:row-reverse;width:auto;overflow-x:scroll;padding: 20px 30px 10px;white-space:nowrap;border-radius: 0;display:flex;justify-content: space-around;background-color:#f9f9f9;gap: 20px;}
	.floor-btn{padding:4px 0px;width: 40px;height: 40px;line-height: 90%;}
	.floor-btn.active{font-size:22px;width: 50px;height: 50px;}
	.floor-map-display{min-height:310px;position:static;padding:0}
	.floor-map{position:static;opacity:0;height:0;padding:0;transform:none;transition:opacity 0.5s ease-in-out,height 0.5s ease-in-out}
	.floor-map.active{opacity:1;height:auto;padding:20px}
}
@media (max-width: 480px) {
    .floor-menu{gap: 5px;}
}