/* 直接把 CSS 寫在這裡測試，排除外部檔案問題 */
.direct-zoom {
    cursor: zoom-in !important;
    transition: transform 0.4s ease;
    position: relative;
    z-index: 1;
    display: inline-block;
}
.direct-zoom.is-zoomed {
    cursor: zoom-out !important;
    transform: scale(5);
    z-index: 9999;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}





.display-zoom {
    cursor: zoom-in !important;
    transition: transform 0.4s ease;
    position: relative;
    z-index: 1;
    display: inline-block;
}

.display-zoom.is-zoomed {
    cursor: zoom-out !important;
    z-index: 9999;
    box-shadow: 0 0 0 1000px rgba(0,0,0,0.7); /* 加上深色背景遮罩感 */
    
    /* 強制定義放大後的視窗位置與大小 */
    position: fixed !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1) !important; /* 居中且不使用原位縮放 */
    
    width: 80vw;  /* 定義視窗寬度為螢幕的 80% */
    height: 80vh; /* 定義視窗高度為螢幕的 80% */
    object-fit: contain; /* 確保圖片在 80% 的視窗內保持比例不變形 */
}