body {
    margin: 0;
    background: #D6EFFF;
    font-family: Arial;
}

/* 標題列樣式 */
.title-bar {
    width: 100%;
    padding: 40px 20px 0 20px; /* 上、左、下、右的留白 */
    text-align: center;
    box-sizing: border-box;
}

.title-bar h1 {
    margin: 0;
    color: #333;             /* 標題顏色，可依喜好調整 */
    font-size: 2.5rem;       /* 桌面版字體大小 */
    letter-spacing: 2px;     /* 字距增加質感 */
    font-weight: bold;
}


/* 主區域 */
main {
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;       /* 關鍵：允許換行 */
    justify-content: center; /* 水平置中 */
    align-items: center;     /* 垂直置中 */
    align-content: center;   /* 多列時的整體垂直置中 */
    
    gap: 30px;             /* 圖示之間的距離，可依喜好調整 */
    padding: 40px;
    box-sizing: border-box;
}

/* 每個區塊 */
.scheme {
    /* 桌面版一列三張：(100% / 3) - 些微間距 */
    width: 28%;            
    min-width: 250px;      /* 確保在縮小視窗時圖示不會變太小 */
    
    /* 移除 aspect-ratio: 1/1，讓它隨圖案形狀自動調整 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 圖片 */
.scheme img {
    width: 100%;           /* 寬度撐滿 scheme 容器 */
    height: auto;          /* 高度自動，保持長條圖比例 */
    object-fit: contain;
    transition: 0.3s;
}

/* 滑鼠移過去微放大 */
.scheme img:hover {
    transform: scale(1.05);
}

 

/* 手機版 RWD */
@media (max-width:768px){
    main {
        flex-direction: column;
        /* 將 gap 設為 0 或更小，縮短區塊間距 */
        gap: 0px; 
        
        /* 若要讓圖片往頂部靠，可改用 flex-start */
        justify-content: center; 
        padding: 10px;
    }

    .scheme {
        /* 移除或調整比例，避免正方形容器產生的多餘空間 */
        width: 70vw;
        aspect-ratio: auto; /* 讓容器高度隨圖片自動調整 */
        max-width: 300px;
        min-width: 180px;
    }

    .scheme img {
        width: 100%;
        height: auto;
        display: block; /* 移除圖片下方的微小間隙 */
    }

/* 標題列樣式 */
.title-bar {
    width: 100%;
    padding: 40px 20px 0 20px; /* 上、左、下、右的留白 */
    text-align: center;
    box-sizing: border-box;
}

.title-bar h1 {
    margin: 0;
    color: #333;             /* 標題顏色，可依喜好調整 */
    font-size: 1.5rem;       /* 桌面版字體大小 */
    letter-spacing: 5px;     /* 字距增加質感 */
    font-weight: bold;
}
}