.container {
    display: flex;
    flex-wrap: wrap; /* 允許空間不足時換行 */
    gap: 20px; /* 欄位間距 */
}

.left-container {    
    flex: 0 0 540px;
    background-color: #f0f4f8;
    padding: 20px;
    border-radius: 8px;
}

.right-container {
    /* 
    flex-grow: 1 (佔滿剩餘空間)
    flex-shrink: 1 (允許縮小)
    flex-basis: 300px (右欄的最小期望寬度，低於此值或總寬度不足時自動換行)
  */
    flex: 1 1 200px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.img-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 欄等寬 */
    column-gap: 0px; /* 左右無間隔 */
    row-gap: 8px; /* 上下保留 16px 間距 */
    width: 100%;
    box-sizing: border-box;
}

.img-grid-2col img {
    width: 100%; /* 填滿欄位 */
    height: auto; /* 保持原圖比例 */
    display: block; /* 消除圖片底部預設的微小縫隙 */
}

.img-grid-1col {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 8px;
    width: 100%;
    box-sizing: border-box;    
}

.img-grid-1col img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-grid-1col img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 響應式：手機螢幕（小於 600px）時自動切換為 1 欄 */
@media (max-width: 600px) {
    .img-grid-2col {
        grid-template-columns: 1fr;
    }
}

.feature-list {
    list-style: none; /* 移除預設點點 */
    padding: 0;
    margin: 0;
}

.feature-list li {
    display: grid;
    grid-template-columns: auto 1fr; /* 左欄依圖示大小，右欄自動填滿剩餘空間 */
    gap: 8px; /* 圖示與文字之間的間距 */
    margin-bottom: 12px;
}

.feature-list .icon {
    line-height: 1.5; /* 讓圖示垂直對齊文字第一行的高度 */
}

.feature-list .text {
    line-height: 1.5;
}

/* 白底科技感卡片樣式（完全靜止版） */
.tech-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-top: 2px solid #FF8C00;
    border-radius: 6px;
    padding: 20px;
    color: #334155;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    /* 修正 1：指定只對顏色做過渡，避開 Layout 重算 */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 卡片懸停效果（顏色與光暈增強，但 0 位移） */
.tech-card:hover {
    border-color: #CBD5E1;
    border-top-color: #FF5500;
    /* 修正 2：保持 Y 軸偏移量 (4px) 與擴散度相同，僅改變光暈顏色 */
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.25);
    /* 修正 3：徹底移除向上位移 */
    transform: none;
}