/* Layout - 레이아웃 구조 */

/* 헤더 - booking_map.css에서 관리하므로 여기서는 제거 */
/* .map-header, .header-left, .header-right는 booking_map.css에서 정의됨 */

/* 세로 라인 - 제거됨 */
.vertical-line {
    display: none;
}

/* 메인 컨테이너 */
.main-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px;
    padding-top: 90px; /* 헤더 높이(70px) + 여백(20px) */
    position: relative;
}

/* 섹션 */
.left-section {
    width: 830px;
    background: #fff;
    padding: 20px;
}

.right-section {
    width: 390px;
    max-width: 390px;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
}

/* 반응형 - 레이아웃 */
@media (min-width: 1280px) {
    .header-right {
        display: none;
    }
    
    .main-container {
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }
    
    .left-section {
        width: 830px;
        max-width: 830px;
        margin-right: 0;
        flex-shrink: 0;
    }
    
    .right-section {
        width: 390px;
        max-width: 390px;
        flex-shrink: 0;
    }
}

@media (min-width: 769px) and (max-width: 1279px) {
    .header-left {
        display: none;
    }
    
    .header-right {
        display: flex;
        left: 150px;
        right: auto;
        gap: 10px;
    }
}

@media (max-width: 1280px) {
    .left-section {
        width: 100%;
    }
}

/* 태블릿 반응형 */
@media (min-width: 769px) and (max-width: 1279px) {
    .main-container {
        padding-top: 90px; /* 헤더 높이(70px) + 여백(20px) */
    }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .main-container {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
        padding-top: 60px !important; /* 헤더 높이만큼 여백 조정 */
    }
    
    .main-container {
        flex-direction: column;
    }
    
    .left-section {
        width: 100%;
        padding: 0;
    }
    
    .right-section {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    
    /* 헤더 스타일은 booking_map.css에서 관리 */
}