.rnd-section-container {
    padding: 100px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.rnd-area {
    /* max-width: 900px; */
    margin: 0 auto 60px;
}

.rnd-area h3 {
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    margin-bottom: 25px;
    font-size: 1.8em;
    color: var(--primary-color);
}

.rnd-area p {
    font-size: 1.1em;
    line-height: 1.8;
    color: var(--text-color);
    margin-bottom: 20px;
}

.rnd-area ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 20px;
}

.rnd-area li {
    font-size: 1.1em;
    line-height: 1.8;
    color: var(--text-color);
    margin-bottom: 10px;
}

.final-vision {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.final-statement {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--primary-color);
    margin-top: 50px;
}



/* 메인 비주얼 */
.main-visual {
	transition: background-color 0.3s;
	
    /* 👇 이미지 슬라이드쇼를 위한 핵심 CSS 추가 및 수정 (6개 이미지 기준) */
    background-color: var(--section-bg); /* 배경색 유지 */
    
    /* 6개의 이미지를 넣습니다. (오버레이 포함 총 7개 레이어) */
    /* 순서: Overly, b1, b2, b3, b4, b6, b5 */
    background-image: 
        /* linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.4)), */ /* 라이트 모드 오버레이 (1) */
        linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.8)), /* 다크 모드 오버레이 (1) */
        url('../../assets/images/labs/1_HkfFaFrK_qNgt1KUF32Tuw.webp'), /* (2) */
        url('../../assets/images/labs/labs_20251023_221747088_02.jpg'), /* (3) */
        url('../../assets/images/labs/1_RUIkBf5RubKkIXJj69wgoQ.webp'), /* (4) */
        url('../../assets/images/labs/labs_20251023_221747088_06.jpg'), /* (5) */
        url('../../assets/images/labs/labs_20251023_221747088_09.jpg'); /* (6) - 5번째 이미지 */
    
    background-size: cover; /* 영역 전체를 덮도록 설정 */
    background-position: center;
    background-repeat: no-repeat;
    
    /* 애니메이션 적용: 5초 간격으로 6개 이미지를 30초 동안 무한 반복 */
    animation: background-fade 30s infinite;
}


body.dark-mode .main-visual {
    /* 👇 다크 모드 오버레이만 변경 (이미지 순서는 라이트 모드와 동일하게 유지) */
    /* 순서: Overly, b1, b2, b3, b4, b6, b5 */
	background-image: 
        linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.8)), /* 다크 모드 오버레이 (1) */
        url('../../assets/images/labs/1_HkfFaFrK_qNgt1KUF32Tuw.webp'), /* (2) */
        url('../../assets/images/labs/labs_20251023_221747088_02.jpg'), /* (3) */
        url('../../assets/images/labs/1_RUIkBf5RubKkIXJj69wgoQ.webp'), /* (4) */
        url('../../assets/images/labs/labs_20251023_221747088_06.jpg'), /* (5) */
        url('../../assets/images/labs/labs_20251023_221747088_09.jpg'); /* (6) - 5번째 이미지 */
}



/* 5개의 이미지가 6초씩 교대되도록 (1/5 = 20%) 비율을 정의하는 Keyframes */
@keyframes background-fade {
    /* b1 (0% ~ 20%) */
    0%, 20% {
        background-position:
            center, /* 오버레이 */
            center, /* b1 */
            -9999px, /* b2 (숨김) */
            -9999px, /* b3 (숨김) */
            -9999px, /* b4 (숨김) */
            -9999px; /* b5 (숨김) */
    }

    /* b2 (20.01% ~ 40%) */
    20.01%, 40% {
        background-position:
            center, /* 오버레이 */
            -9999px, /* b1 */
            center, /* b2 */
            -9999px, /* b3 */
            -9999px, /* b4 */
            -9999px; /* b5 */
    }

    /* b3 (40.01% ~ 60%) */
    40.01%, 60% {
        background-position:
            center, /* 오버레이 */
            -9999px, /* b1 */
            -9999px, /* b2 */
            center, /* b3 */
            -9999px, /* b4 */
            -9999px; /* b5 */
    }

    /* b4 (60.01% ~ 80%) */
    60.01%, 80% {
        background-position:
            center, /* 오버레이 */
            -9999px, /* b1 */
            -9999px, /* b2 */
            -9999px, /* b3 */
            center, /* b4 */
            -9999px; /* b5 */
    }

    /* b5 (80.01% ~ 100%) */
    80.01%, 100% {
        background-position:
            center, /* 오버레이 */
            -9999px, /* b1 */
            -9999px, /* b2 */
            -9999px, /* b3 */
            -9999px, /* b4 */
            center; /* b5 */
    }
}


/* 👇 [수정] 이미지와 텍스트를 좌우로 배치하는 레이아웃 */

/* 컨텐츠 랩퍼: 이미지와 텍스트를 좌우로 배치 */
.rnd-content-wrap {
    display: flex;
    gap: 40px; /* 이미지와 텍스트 사이 간격 */
    align-items: flex-start; /* 상단 정렬 */
    margin: 0 auto;
    max-width: 1200px; /* 선택 사항: 너무 넓어지는 것을 방지 */
}

/* 이미지 컨테이너: 3분의 1 (33.33%) 크기 */
.rnd-image {
    flex: 0 0 33.33%; /* 이미지 영역에 33.33% 너비 할당 */
    max-width: 33.33%; 
}

/* 이미지 스타일: 비율 유지 및 잘림 방지 (다크모드 공통) */
.rnd-image img {
    width: 100%;
    height: auto;
    display: block;
    /* 핵심 수정: 이미지 비율을 유지하면서 잘리지 않도록 contain 적용 */
    object-fit: contain; 
    border-radius: 8px; 
}

/* 텍스트 컨테이너 */
.battery-text-area,
.robot-text-area,
.dance-text-area { /* dance-text-area 추가 */
    flex: 1; /* 남은 공간을 모두 차지 (약 66.67% - gap) */
    margin: 0; /* 기존 .rnd-area의 중앙 정렬 마진을 덮어씀 */
}

/* 모바일 반응형: 수직으로 쌓기 */
@media (max-width: 768px) {
    .rnd-content-wrap {
        flex-direction: column; /* 세로 정렬 */
        gap: 30px;
    }
    .rnd-image {
        flex: 0 0 100%; /* 이미지 영역에 100% 너비 할당 */
        max-width: 100%;
        order: -1; /* 이미지를 텍스트보다 위로 이동 */
    }
}