/* =========================================
       [섹션 8] 하단 그리드 스타일
       ========================================= */
    .main-bottom-grid {
        width: 100%;
        max-width: 1280px;
        margin: 50px auto; /* 위아래 여백 */
        padding: 0 20px;    /* 모바일 좌우 여백 */
		
    }

    .bottom-grid-container {
        display: flex;
        flex-direction: column;
        gap: 20px; /* 박스 사이 간격 */
    }

    /* 상단 행 (2개 배치) */
    .grid-row.top-row {
        display: flex;
        gap: 20px;
        height: 360px; /* 높이 설정 */
    }

    /* 하단 행 (1개 배치) */
    .grid-row.bottom-row {
        height: 360px; /* 높이 설정 */
    }

    /* 공통 박스 스타일 */
    .grid-box {
        position: relative;
        border-radius: 10px; /* 모서리 둥글게 */
        overflow: hidden;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* 배경색(이미지 없을때 대비) */
        background-color: #ffffff; 
		display: flex;
    }

    /* --- [중요] 배경 이미지 경로 넣는 곳 --- */
    .grid-box.box-1 {
        flex: 1; /* 반반 차지 */
        background-image: url('../../img/main/main_08_01.png');
        /* background-color: #a3c2d8;  */
    }
    .grid-box.box-2 {
        flex: 1; /* 반반 차지 */
        background-image: url('../../img/main/main_08_02.png');

    }
    .grid-box.box-3 {
        width: 100%;
		height: 100%;
        background-image: url('../../img/main/main_08_03.png');
    }
    /* ------------------------------------ */

    /* 텍스트 컨텐츠 영역 */
    .box-content {
        padding: 40px;
        height: 100%;
        color: #fff;
        position: relative;
    }

    .box-title {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .box-desc {
        font-size: 18px;
        font-weight: 400;
        opacity: 0.9;
        line-height: 1.5;
    }

    /* 하단 박스 (고객센터) 텍스트 스타일 */
    .contact-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .time-info {
        font-size: 16px;
        opacity: 0.8;
        margin-bottom: 20px;
    }
    .contact-numbers {
        margin-bottom: 20px;
    }
    .contact-item {
        display: block;
        margin-bottom: 10px;
        font-size: 20px;
    }
    .contact-item .label {
        font-size: 24px;
        font-weight: 500;
        margin-right: 20px;
    }
    .contact-item .number {
        font-size: 48px;
        font-weight: 700;
        letter-spacing: -1px;
    }

    /* 버튼 스타일 (이미지 내부에 위치) */
    .view-more-btn {
        position: absolute;
        bottom: 40px;
        left: 40px;
        background: transparent;
        border: none;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        padding-bottom: 5px;
        /* border-bottom: 1px solid rgba(255,255,255,0.5) */
        cursor: pointer;
        display: flex;
        align-items: center;
		transition: all 0.3s ease-in-out;
    }
	.view-more-btn:hover {
			animation: none;             
			transform: scale(1.1);       
			filter: brightness(1.2);
		}

@media (max-width: 768px) {
    
    /* 1. 전체 컨테이너 설정 */
    .main-bottom-grid {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    .bottom-grid-container {
        gap: 5px !important;
        width: 100% !important;
    }

    .grid-row {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        gap: 5px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* 3. 개별 박스 공통 설정 */
    .grid-box {
        width: 100% !important;
        height: 240px !important; /* 높이는 고정 */
        flex: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        
        /* [수정 1] 공통적으로 110% 100%를 적용 (Box 1, Box 2용)
           - 가로를 110%로 늘려서 좌우 여백 없이 꽉 차게 보이도록 함
        */
        background-size: 110% 100% !important; 
        background-repeat: no-repeat !important;
        background-position: center center !important; 
    }

    /* 박스별 개별 위치 설정 */
    .grid-box.box-1, 
    .grid-box.box-2, 
    .grid-box.box-3 {
        background-position: center center !important;
    }
    
    /* [수정 2] Box 3번만 예외 처리 (100%로 딱 맞춤) */
    .grid-box.box-3 {
        background-image: url('../../img/main/main_08_03_m.png');
        
        /* ★ 여기서 100% 100%로 덮어씌워야 합니다 ★ */
        background-size: 105% 100% !important; 
    }

    /* 버튼 스타일 */
    .view-more-btn {
        width: 120px; 
        bottom: 30px;
        left: 20px;
    }
}