.community-detail-wrapper {
    padding: 20px;
}

.community-title {
    font-size: 1.4rem;     /* 字體再大一些 */
    font-weight: 900;      /* 更粗 */
    margin-bottom: 20px;
}

.community-detail-grid {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.community-info {
    flex: 0 0 35%;
    max-width: 35%;
}

.community-info .info-row {
    display: flex;
    align-items: baseline; /* label 跟 value 水平對齊 */
    margin-bottom: 15px;
    font-size: 15px;
}

.community-info .label {
    width: 120px;          /* 固定寬度，統一對齊 */
    text-align: left;     /* ✅ 靠右對齊 */
    color: #666;
    font-size: 14px;
    font-weight: normal;
    margin-right: 10px;    /* 跟 value 留間距 */
    flex-shrink: 0;
}

.community-info .value {
    flex: 1;               /* 填滿剩餘空間 */
    font-size: 16px;
    color: #111;
    font-weight: 500;
    text-align: left;      /* 數值靠左 */
    word-break: break-word;
}

.community-gallery {
    flex: 0 0 65%;
    max-width: 65%;
}

.community-gallery img {
    width: 100%;
    border-radius: 6px;
}

@media screen and (max-width: 767px) {
    .community-detail-wrapper {
        padding: 0px;
    }

    .community-detail-grid {
        flex-direction: column;   /* 改成上下排列 */
    }

    .community-info .label {
        width: 100px;          /* 固定寬度，統一對齊 */
    }

    .community-gallery {
        order: 1;
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    /* 確保 carousel 在手機版有固定比例高度 */
    .community-gallery .carousel {
        aspect-ratio: 16 / 9;
        width: 100%;
    }

    .community-info {
        order: 2;
        flex: none;
        max-width: 100%;
        margin-top: 0px;
    }
}