/* 頁面標題 */
.title {
    color: #fc8b1f;
    text-align: left;
    font-family: "Inter-Bold", sans-serif;
    font-size: 25px;
    font-weight: 700;
    margin: 40px 0 10px 0;
    padding-left: 20px;
}

/* 說明文字 */
.intro {
    color: #33383d;
    text-align: left;
    font-family: "Inter-Regular", sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 30px 0;
    padding-left: 20px;
    max-width: 800px;
}

/* 卡片容器：用 flex 排版 */
.cards-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px; /* 卡片間距 */
    justify-content: flex-start !important;
    padding-left: 20px !important;
}

/* 卡片基本樣式 */
.card {
    box-sizing: border-box !important;
    width: 288px !important;
    height: 124px !important;
    background: rgb(246,246,246) !important;
    backdrop-filter: blur(6px) !important;
    border-radius: 12px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.5s !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    user-select: none !important;
    font-weight: bold !important;
    font-size: 14px !important;
    color: rgb(35,62,131) !important;
    padding: 22px 8px !important;
}


    .card:hover {
        border: 1px solid rgb(233,194,42);
        transform: scale(1.05);
    }

    .card:active {
        transform: scale(0.95) rotateZ(1.7deg);
    }

/* icon 背景方塊 */
.rectangle-4 {
    background: #ebebeb;
    border-radius: 20px;
    flex-shrink: 0;
    width: 79px;
    height: 79px;
    margin-right: 10px; /*這邊是主要調整並影響spacing*/
    display: flex; /* 讓裡面的圖片置中 */
    align-items: center; /*vertically centering*/
    justify-content: center; /*horizontally centering*/
}

    .rectangle-4 img {
        width: 56px;
        height: 56px;
        display: block; /*確認是否固定圖片 不影響spacing?*/
    }
/* 卡片文字 */
.spectrum, .core, .property, .rod, .others {
    color: #233e83;
    text-align: left;
    font-family: "Inter-Bold", sans-serif;
    font-size: 14px;
    font-weight: 700;
    flex: 1; /*確認是否不影響icon只調整文字長度佔比?*/
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* icon 圖片統一樣式 */
.spectrum-icon,
._2-core-loss2,
.property-simulation-icon,
.calculation-icon,
.others-icon {
    width: 56px;
    height: 56px;
    /* margin-right: auto;  先拿掉這一行(在flexbox規則裡margin跳掉) 把空間推到右邊，圖片靠左 */
}