#benefit-container {
    width: 100%;
    /* 전체 배경 색상 적용 */
    background-color: #111; /* 요청하신 #111로 변경 */
    padding: 3em;
    text-align: center;
    overflow: hidden;
    font-family: 'Arial', sans-serif;
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: #e0e0e0;
}

/* Inner container for content width control */
#benefit-container .inner-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* 제목 스타일 (클래스명 #benefit-title로 이미 수정됨) */
#benefit-container #benefit-title h1 {
    font-size: 3em;
    font-weight: bold;
    margin-bottom: 50px;
    color: #ffffff;
    /* 스크롤 애니메이션 관련 속성 제거. 기본 상태는 항상 보이도록 설정 */
    opacity: 1;
    transform: translateY(0);
}

/* 콘텐츠 그리드 (클래스명 #benefit-content로 이미 수정됨) */
#benefit-container #benefit-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    justify-content: center;
}

.info-card {
    /* 카드 배경 색상 및 그림자 적용 */
    background: linear-gradient(180deg, #2d2f30 0%, #111 100%); /* 요청하신 색상 적용 */
    /* backdrop-filter 제거 (linear-gradient와 함께 사용 시 투명도가 적용되지 않음) */
    /* border 제거 (요청하신 box-shadow와 더 어울리도록) */
    border-radius: 15px;
    padding: 30px;
    color: #e0e0e0;
    box-shadow: 0px 20px 24px 0px rgba(20, 22, 23, 0.24); /* 요청하신 그림자 적용 */
    transition: transform 0.3s ease, background 0.3s ease;
    /* 스크롤 애니메이션 관련 속성 제거. 기본 상태는 항상 보이도록 설정 */
    opacity: 1;
    transform: translateY(0);
    line-height: 1.7;
    letter-spacing: 0.02em;
}

.info-card:hover {
    transform: translateY(-10px) scale(1.02);
    /* 호버 시 배경색 약간 변경 (원래 그라데이션에 맞게) */
    background: linear-gradient(180deg, #3a3d3e 0%, #1a1a1a 100%); /* 약간 밝은 그라데이션 */
}

.info-card h3 {
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 20px;
    color: #f0f0f0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
    line-height: 1.3;
}

.info-card ul {
    list-style: none;
    padding: 0;
    text-align: left;
}

.info-card ul li {
    margin-bottom: 12px;
    position: relative;
    padding-left: 28px;
    font-size: 1.1em;
    line-height: 1.8;
    letter-spacing: 0.02em;
}

.info-card ul li::before {
    content: '✨';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #f7dc6f;
    font-size: 1.2em;
}

.info-card strong {
    color: #8be9fd;
}

/* Responsive adjustments (클래스명 #benefit-title로 수정됨) */
@media (max-width: 768px) {
    #benefit-container #benefit-title h1 {
        font-size: 2.5em;
    }
    .info-card {
        padding: 25px;
    }
    .info-card h3 {
        font-size: 1.2em;
    }
}

@media (max-width: 480px) {
    #benefit-container #benefit-title h1 {
        font-size: 2em;
    }
    .info-card {
        padding: 20px;
    }
    .info-card ul li {
        font-size: 1em;
    }

    .info-card h3 {
        font-size: 1em;
    }
}