html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* 防止頁面滾動 */
}

#mywork .content {
    display: flex;
    height: auto; /* 自動調整高度以避免超出視窗範圍 */
    padding-top: 1.8vw; /* 減少頂部間距 */
    justify-content: space-between;
}

#mywork .thumbnails {
    width: auto; /* 縮略圖區域寬度為視窗寬度的20% */
    padding: 0vw; /* 使用 vw 單位 */
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 18vw); /* 保持縮放一致 */
    align-self: center; /* 讓縮略圖區域置中 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 讓縮略圖置中 */
}

#mywork .thumbnail {
    width: 10vw;
    height: 10vw; /* 縮略圖的高度調整為視窗寬度的10% */
    cursor: pointer;
    border-radius: 1vw; 
    transition: transform 0.3s ease;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 1.2vw; /* 增加縮略圖之間的間距 */
}

#mywork .thumbnail:hover {
    transform: scale(1.2);
}

#mywork .main-image {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 18vw); /* 確保主圖片部分不超出視窗高度 */
    margin-left: 0.3vw; /* 使用 vw 單位 */
    padding: 2vw; /* 使用 vw 單位 */
    position: relative; /* 為了讓子元素可以絕對定位 */
}

#mywork .main-image img {
    width: 80vw;
    height: 80vh;
    object-fit: contain;
    border-radius: 1vw; /* 使用 vw 單位 */
    box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.1); /* 使用 vw 單位 */
}

.controls {
    position: absolute;
    bottom: 1vw; /* 距離底部2vw */
    right: 2vw; /* 距離右側2vw */
    text-align: center;
}

.controls button {
    padding: 0.6vw 1vw; /* 使用 vw 單位 */
    font-size: 0.5vw; /* 使用 vw 單位 */
    cursor: pointer;
    background-color: deeppink; /* 背景色設為深粉紅色 */
    color: white; /* 文字顏色設為白色 */
    border: none; /* 移除邊框 */
    border-radius: 0.4vw; /* 圓角邊框 */
    box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.1); /* 添加陰影 */
    transition: background-color 0.3s ease, transform 0.3s ease; /* 添加過渡效果 */
}

.controls button:hover {
    background-color: hotpink; /* 懸停時背景色變為亮粉紅色 */
    transform: scale(1.1); /* 懸停時放大 */
}

.controls button.stop {
    background-color: gray; /* 停止狀態時背景色為灰色 */
}

/* 平板尺寸 (768px - 1024px) */
@media (max-width: 1024px) {
    main {
        padding-top: 3vw; /* 減少頂部內距 */
    }

    #mywork .content {
        flex-direction: column;
        padding-top: 10vw; /* 使用 vw 單位 */
        justify-content: center; /* 置中縮略圖 */
    }

    #mywork .thumbnails {
        width: 100%; /* 使縮略圖佔滿可用寬度 */
        height: auto;
        display: flex;
        flex-direction: row; /* 橫向排列 */
        overflow-x: auto; /* 啟用橫向滾動 */
        padding: 1.6vw 0; /* 使用 vw 單位 */
        justify-content: center; /* 置中縮略圖 */
    }

    #mywork .thumbnail {
        width: 8vw; /* 縮略圖的寬度調整為視窗寬度的8% */
        height: 8vw; /* 縮略圖的高度調整為視窗寬度的8% */
        margin-right: 2vw; /* 縮略圖之間的間距調整為視窗寬度的2% */
        flex-shrink: 0; /* 確保縮略圖不會縮小 */
    }
}

/* 手機尺寸 (小於 768px) */
@media (max-width: 767px) {
    main {
        padding-top: 0; /* 減少頂部內距 */
    }

    #mywork .content {
        flex-direction: column;
        padding-top: 7vw; /* 使用 vw 單位 */
        justify-content: flex-start; /* 讓內容靠上 */
        align-items: center; /* 置中內容 */
    }

    #mywork .thumbnails {
        width: 100%; /* 縮略圖區域佔滿可用寬度 */
        height: auto;
        display: flex;
        flex-direction: row; /* 橫向排列 */
        overflow-x: auto; /* 啟用橫向滾動 */
        padding: 3vw 0; /* 使用 vw 單位 */
        scrollbar-width: thin; /* 調整滾動條寬度（可選） */
        justify-content: center; /* 置中縮略圖 */
    }

    #mywork .thumbnail {
        width: 10vw; /* 縮略圖的寬度調整為視窗寬度的10% */
        height: 10vw; /* 縮略圖的高度調整為視窗寬度的10% */
        margin-right: 2vw; /* 縮略圖之間的間距調整為視窗寬度的2% */
        flex-shrink: 0; /* 確保縮略圖不會縮小 */
    }

    #mywork .main-image {
        margin-left: 0;
        margin-top: 1vw; /* 調整主圖片的頂部間距 */
        width: 100%; /* 確保主圖片不會超過螢幕寬度 */
        height: 50vh; /* 固定高度以避免圖片過於靠下 */
        padding: 1vw; /* 使用 vw 單位 */
        display: flex;
        justify-content: center; /* 置中主圖片 */
        align-items: flex-start; /* 讓主圖片靠上 */
    }

    #mywork .main-image img {
        width: 80vw; /* 使主圖片寬度為視窗寬度的80% */
        height: auto; /* 避免圖片變形，確保比例正確 */
        object-fit: contain; /* 顯示完整圖片，避免裁切 */
    }
}