* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Malgun Gothic', sans-serif; background-color: #f8fafc; color: #334155; }
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; }
.header-title { font-size: 18px; font-weight: bold; color: #142a59; padding-left: 15px; border-left: 2px solid #ddd;}

.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 #cbd5e1; border-radius: 4px; font-family: inherit; color: #334155;}
.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: 25px; font-size: 13px; font-weight: bold; justify-content: flex-end; color: #475569;}
.legend-item { display: flex; align-items: center; gap: 6px; }
.color-box { width: 24px; height: 16px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }


/* 🌟 대한항공(KAL) 오리지널 파스텔톤 컬러 스케일 복구 (80%대 연한 붉은색) */
.bg-noop { background-color: #f8fafc; color: #cbd5e1; }
.bg-low { background-color: #7ab8e5; color: white; }            /* ~70% : KAL 블루 */
.bg-mid { background-color: #d9edf8; color: #333; }             /* 70~80% : 연한 파스텔 블루 */
.bg-good { background-color: #ffe5e5; color: #333; }            /* 80~90% : 연한 파스텔 핑크 */
.bg-high { background-color: #f05a5a; color: white; }           /* 90~99% : 산뜻한 붉은색 */
.bg-full { background-color: #c82323; color: white; }           /* 100%~ : 진한 붉은색 */

.dest-section { margin-bottom: 50px; }

/* 🌟 이모지 대신 세련된 배지(Badge) 형태의 제목 디자인 */
.dest-title { font-size: 20px; font-weight: 800; margin-bottom: 15px; color: #1e293b; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; display: flex; align-items: center; gap: 10px;}
.dest-badge { background-color: #142a59; color: white; padding: 4px 12px; border-radius: 6px; font-size: 18px; letter-spacing: 1px;}

.direction-title { font-size: 14px; font-weight: bold; margin: 25px 0 10px 0; display: flex; align-items: center; gap: 8px; color: #475569; }
.dir-badge { padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 800; letter-spacing: 0.5px;}
.badge-out { background-color: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.badge-in { background-color: #fce7f3; color: #be185d; border: 1px solid #fbcfe8; }
.hub-text { font-size: 14px; color: #64748b; }

.table-container { 
    overflow-x: auto; 
    background: white; 
    margin-bottom: 10px; 
    border: 1px solid #e2e8f0; 
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px 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 #e2e8f0; border-right: 1px solid #e2e8f0; padding: 10px 6px; font-size: 13px; }
th { background-color: #f8fafc; font-weight: 800; color: #475569; border-top: none; }
td:last-child, th:last-child { border-right: none; }

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

.fw-bold { font-weight: 800; color: #1e293b; }
.route-text { color: #0369a1; font-weight: 800; }

.table-default th:nth-child(1), .table-default td:nth-child(1) { left: 0; min-width: 65px; max-width: 65px; }
.table-default th:nth-child(2), .table-default td:nth-child(2) { left: 65px; min-width: 60px; max-width: 60px; }
.table-default th:nth-child(3), .table-default td:nth-child(3) { left: 125px; min-width: 60px; max-width: 60px; border-right: 2px solid #cbd5e1; }

.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: 65px; max-width: 65px; }
.table-kal th:nth-child(3), .table-kal td:nth-child(3) { left: 145px; min-width: 60px; max-width: 60px; }
.table-kal th:nth-child(4), .table-kal td:nth-child(4) { left: 205px; min-width: 60px; max-width: 60px; border-right: 2px solid #cbd5e1; }

th.date-header, td.cell-lf { min-width: 58px; padding-left: 5px; padding-right: 5px; }
th.date-header { line-height: 1.4; }

.cell-lf { 
    position: relative; 
    font-weight: 800; /* 예약률 숫자 볼드 처리 */
    cursor: crosshair; 
    transition: filter 0.1s; 
}
.cell-lf:hover { filter: brightness(0.9) contrast(1.1); }
.cell-lf[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1e293b;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: normal; /* 툴팁 안의 글씨는 얇게 유지 */
    white-space: pre-wrap;
    z-index: 999;
    pointer-events: none;
    min-width: max-content;
    margin-bottom: 6px;
    text-align: left;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
}

html, body { max-width: 100vw; overflow-x: hidden; }
.legend-box { flex-wrap: wrap; }
.table-container { position: relative; z-index: 1; }

@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; }
}