/* ---- 清除預設樣式 ---- */
html {
    font-size: 16pt;
}

body {
    /* height: 100%; */
    padding: 0px;
    margin: 0;
    overflow: hidden; /* 徹底防止任何意外的捲軸出現 */
    background-color: #fff;
}

.lBody__container{
    display: flex;
    flex-direction: column; /* 垂直排列 */
    justify-content: stretch;  /* 元素沿主軸排列分布方式 */
    align-items: center;  /* 元素沿交錯軸排列分布方式 */
    height: 100dvh; /* 使用 dynamic viewport height */
    max-height: 100dvh;
    padding: 0px;
    margin: 0px;
}

.image-container {
    width: 100vw;  
    height: 100vh;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    background-color: #fff;  /* 模擬 contain 的黑邊背景 */
}

/* 關鍵定位層：利用 fit-content 完美貼齊內部圖片的實際渲染大小 */
.img-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
}

/* 下層圖片：限制在視窗內，並保持比例 */
.bottom-img {
    display: block;
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain; /* 確保在各種螢幕上都保持比例不被裁切 */
}

/* 上層圖片：此時它的 100% 就會完全等於下層圖片的實際寬度 */
.top-img {
    position: absolute;
    left: 20%;
    width: 60%; /* 完美貼齊下層圖片的實際寬度 */
    top: 10%;    /* 貼齊下層圖片頂部的 25% */
}