* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Malgun Gothic', sans-serif; background-color: #f7f9fa; color: #333; }
header { background-color: #ffffff; border-bottom: 2px solid #142a59; padding: 15px 40px; display: flex; justify-content: space-between; align-items: center; }

/* 🌟 에어로케이 로고 스타일 */
.logo-container { display: flex; align-items: center; }
.brand-logo { height: 40px; }

/* 뷰 전환 탭 및 컨트롤러 */
.controls { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; justify-content: flex-end;}
.view-toggle { display: flex; border: 1px solid #142a59; border-radius: 4px; overflow: hidden; }
.view-toggle button { padding: 7px 12px; background: white; color: #142a59; border: none; cursor: pointer; font-weight: bold; transition: 0.2s; font-size: 13px;}
.view-toggle button.active { background: #142a59; color: white; }
.view-toggle button:hover:not(.active) { background: #e3f0fc; }

/* 에어로케이 포인트 컬러(노란색) 적용된 권역버튼 */
#btn-region-all.active, #btn-region-0.active, #btn-region-1.active, #btn-region-2.active, #btn-region-3.active { background-color: #fca311; color: white; border-color: #fca311;}

.date-picker-group { display: flex; align-items: center; gap: 5px; margin-left: 10px;}
.date-picker-group label { font-weight:bold; color:#142a59; font-size: 14px;}
.controls input { padding: 6px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit;}
.btn-search { padding: 7px 15px; background-color: #142a59; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;}
.btn-search:hover { background-color: #0d1d3f; }

main { 
    padding: 30px 20px; 
    margin: 0 auto; 
    /* 🌟 핵심: 전체 영역(파란 선, 범례 포함)을 내용물(표) 너비에 딱 맞게 조여줍니다. */
    width: max-content; 
    max-width: 100vw; 
}

/* 범례 */
.legend-box { display: flex; gap: 15px; margin-bottom: 20px; font-size: 13px; justify-content: flex-end; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.color-box { width: 24px; height: 16px; border-radius: 2px; }

/* 색상표 */
.bg-low { background-color: #7ab8e5; color: white; }
.bg-mid { background-color: #c9e3f4; color: #333; }
.bg-good { background-color: #ffffff; color: #333; }
.bg-high { background-color: #f05a5a; color: white; }
.bg-full { background-color: #c82323; color: white; }
.bg-noop { background-color: #f5f5f5; color: #ccc; }

/* 공통 테이블 컨테이너 */
.dest-section { margin-bottom: 50px; }
.dest-title { font-size: 20px; font-weight: bold; margin-bottom: 15px; color: #142a59; border-bottom: 2px solid #142a59; padding-bottom: 5px;}
.direction-title { font-size: 15px; font-weight: bold; margin: 15px 0 5px 0; color: #444; }

.table-container { 
    overflow-x: auto; 
    background: white; 
    margin-bottom: 10px; 
    border: 1px solid #ddd; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    
    /* 🌟 추가된 부분: 흰색 배경 박스를 표 넓이에 딱 맞추기 */
    width: max-content;
    max-width: 100%;
}

table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: center; white-space: nowrap; }
th, td { border-bottom: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; padding: 8px 5px; font-size: 13px; }
th { background-color: #f8f9fa; font-weight: bold; color: #555; border-top: 1px solid #e0e0e0; }

.sticky-col { position: sticky; background-color: #ffffff; z-index: 2; }
th.sticky-col { background-color: #f8f9fa; z-index: 3; }

/* 1. 기본 뷰 테이블 */
.table-default th:nth-child(1), .table-default td:nth-child(1) { left: 0; width: 60px; }
.table-default th:nth-child(2), .table-default td:nth-child(2) { left: 60px; width: 60px; }
.table-default th:nth-child(3), .table-default td:nth-child(3) { left: 120px; width: 60px; border-right: 2px solid #bbb; }

/* 2. 통합 뷰 테이블 */
.table-kal th:nth-child(1), .table-kal td:nth-child(1) { left: 0; width: 80px; font-weight: bold; color: #142a59; }
.table-kal th:nth-child(2), .table-kal td:nth-child(2) { left: 80px; width: 60px; }
.table-kal th:nth-child(3), .table-kal td:nth-child(3) { left: 140px; width: 60px; }
.table-kal th:nth-child(4), .table-kal td:nth-child(4) { left: 200px; width: 60px; border-right: 2px solid #bbb; }
th.date-header { line-height: 1.3; }

/* 커스텀 툴팁 */
.cell-lf { position: relative; font-weight: bold; cursor: crosshair; }
.cell-lf:hover { filter: brightness(0.9); }
.cell-lf[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(20, 42, 89, 0.9);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: normal;
    white-space: pre-wrap;
    z-index: 999;
    pointer-events: none;
    min-width: max-content;
    margin-bottom: 5px;
    text-align: left;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

/* 🌟 1. 전체 페이지 가로 스크롤 방지 (모바일 레이아웃 깨짐의 핵심 원인 차단) */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* 🌟 2. 범례 박스가 화면 밖으로 나가지 않고 모바일에서 줄바꿈되도록 강제 설정 */
.legend-box {
    flex-wrap: wrap; 
}

/* 🌟 3. 테이블 컨테이너의 z-index(우선순위)가 밖으로 튀어나오지 않게 영역 안에 가두기 */
.table-container {
    position: relative;
    z-index: 1; 
}

/* 🌟 4. 모바일(스마트폰) 전용 반응형 디자인 추가 (화면이 작을 때 여백을 줄이고 깔끔하게 정렬) */
@media (max-width: 768px) {
    header {
        padding: 15px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .controls {
        justify-content: flex-start;
        width: 100%;
    }
    main {
        padding: 20px 15px;
    }
    .legend-box {
        justify-content: flex-start;
    }
}

/* ==========================================================
   🌟 모바일 틀고정 깨짐 방지: 테이블 셀 넓이 절대 고정 
   ========================================================== */

/* 1. 테이블 전체가 화면에 맞춰 찌그러지는 것(압축)을 원천 차단 */
table {
    width: max-content !important; 
}

/* 2. 목적지별 뷰 (기본) 틀고정 열 넓이 절대 고정 */
.table-default th:nth-child(1), .table-default td:nth-child(1) { left: 0; min-width: 60px; max-width: 60px; }
.table-default th:nth-child(2), .table-default td:nth-child(2) { left: 60px; min-width: 60px; max-width: 60px; }
.table-default th:nth-child(3), .table-default td:nth-child(3) { left: 120px; min-width: 60px; max-width: 60px; }

/* 3. 통합 스케줄 뷰 틀고정 열 넓이 절대 고정 */
.table-kal th:nth-child(1), .table-kal td:nth-child(1) { left: 0; min-width: 80px; max-width: 80px; }
.table-kal th:nth-child(2), .table-kal td:nth-child(2) { left: 80px; min-width: 60px; max-width: 60px; }
.table-kal th:nth-child(3), .table-kal td:nth-child(3) { left: 140px; min-width: 60px; max-width: 60px; }
.table-kal th:nth-child(4), .table-kal td:nth-child(4) { left: 200px; min-width: 60px; max-width: 60px; }

/* 4. 날짜(헤더) 및 예약률 데이터 칸 넓이 최소치 고정 (글자 겹침 방지) */
th.date-header, td.cell-lf {
    min-width: 55px;
    padding-left: 5px;
    padding-right: 5px;
}