/* Main page section 4 (Request a Demo) */

.main-demo {
    height: 100vh; /* 화면 꽉 차게 */
    min-height: 900px;
    background: url("../../img/en/v2/main/main_04.png") no-repeat right center / cover;
    background-color: #e8f4f8;
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center;
}

.demo-container {
    display: flex;
    align-items: center; /* 내용물 수직 중앙 */
    justify-content: flex-start;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 5rem;
    position: relative;
    z-index: 2;
    /* [수정 1] 전체 컨텐츠를 위로 올리기 위해 아래쪽에 여백을 줌 */
    padding-bottom: 100px; 
}

.demo-content {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* [수정 1-추가] 더 확실하게 위로 올리고 싶다면 이 값을 조절하세요 (음수) */
    margin-top: -50px; 
}

/* 라벨 (medihub 데모 요청) */
.demo-label {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0066cc;
    margin: 0 0 1.5rem 0; /* 간격 미세 조정 */
    letter-spacing: 0.15rem;
    font-family: 'Pretendard', sans-serif;
}

/* 타이틀 (Request a Demo) */
.demo-title {
    font-size: 6.5rem; /* 영문 타이틀 크기 유지 */
    font-weight: 700;
    color: #003366;
    margin: 0 0 3rem 0;
    line-height: 1.2;
    font-family: "Pretendard", "Apple SD Gothic Neo", sans-serif;
    letter-spacing: -0.06rem;
    white-space: nowrap;
}

/* 설명글 */
.demo-description {
    font-size: 2rem; /* 한글 가독성 위해 약간 조정 (너무 크면 부담) */
    font-weight: 400;
    color: #0066cc;
    letter-spacing: -0.04rem;
    line-height: 1.6;
    /* [수정 2] 버튼과의 간격을 넓힘 (기존 3rem -> 5rem) */
    margin: 0 0 5rem 0; 
    white-space: normal;
    word-break: keep-all;
}

/* 버튼 */
.demo-btn {
    /* [수정 2-추가] 혹시 더 벌리고 싶으면 margin-top 추가 */
    margin-top: 10px; 
}


/* 반응형: 태블릿 */
@media (max-width: 1024px) {
    .demo-container {
        padding: 0 3.75rem;
        padding-bottom: 0; /* 태블릿에서는 중앙 정렬 복귀 */
    }
    .demo-content {
        margin-top: 0;
    }
    .demo-title {
        font-size: 5rem;
    }
    .demo-description {
        font-size: 1.25rem;
    }
}

/* 반응형: 모바일 */
/* 반응형: 모바일 */
@media (max-width: 768px) {
    .main-demo {
        height: auto;
        /* 컨텐츠가 적어도 최소한의 높이는 확보하도록 설정 (필요시 조절) */
        min-height: 600px; 
        width: 100%;
        
        /* [핵심 수정] 100% auto -> cover 로 변경 */
        /* cover: 가로/세로 비율을 유지하면서 빈 공간 없이 꽉 채움 */
        background: url("../../img/en/v2/main/main_04_m.png") no-repeat center center / cover !important;
        
        padding: 3rem 0;
    }

    /* 나머지 코드는 그대로 유지 */
    .demo-container {
        flex-direction: column;
        padding: 0 2rem;
        gap: 2rem;
    }

    .demo-content {
        flex: 0 0 auto;
        width: 100%;
    }

    /* 배경 이미지를 꽉 채웠으므로, 별도의 img 태그가 있다면 숨기는 것이 좋습니다. */
    .demo-image {
        display: none; 
    }

    .demo-title {
        font-size: 4rem;
        white-space: nowrap;
    }

    .demo-description {
        font-size: 1.75rem;
        margin: 0 0 3rem 0;
        line-height: 1.6;
    }

    .demo-btn {
        padding: 1.25rem 2.5rem;
        font-size: 1.5rem;
    }
}