/* =========================================================================
   1. Global & Layout (AeroK Modern Theme)
   ========================================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Malgun Gothic', sans-serif; background-color: #f7f9fa; color: #333; overflow-x: hidden; }

header { background-color: #ffffff; border-bottom: 2px solid #142a59; padding: 15px 40px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;}
.logo-container { display: flex; align-items: center; gap: 15px; }
.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; }
.view-toggle { display: flex; border: 1px solid #142a59; border-radius: 4px; overflow: hidden; }
.view-toggle button { padding: 8px 15px; background: white; color: #142a59; border: none; border-right: 1px solid #ccc; cursor: pointer; font-weight: bold; transition: 0.2s; font-size: 14px;}
.view-toggle button:last-child { border-right: none; }
.view-toggle button.active { background: #142a59; color: white; }
.view-toggle button:hover:not(.active) { background: #e3f0fc; }

main { padding: 30px 40px; max-width: 1600px; margin: 0 auto; position: relative;} 

.content-box { background: #fff; border-radius: 8px; padding: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: 1px solid #ddd; margin-bottom: 20px;}
.border-orange { border-top: 3px solid #fca311; }
.section-title { font-size: 18px; color: #142a59; margin-bottom: 15px; font-weight: bold; }
.color-orange { color: #fca311 !important; }
.panel-header { display: flex; justify-content: space-between; align-items: center; }
.panel-content { margin-top: 15px; transition: all 0.3s ease; }

.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mr-10 { margin-right: 10px; }
.flex-wrap { flex-wrap: wrap; }
.gap-10 { gap: 10px; }
.no-margin { margin: 0 !important; }
.no-border { border: none !important; }
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.flex-align-center { display: flex; align-items: center; }
.right-align { margin-left: auto; }
.bold { font-weight: bold; }
.color-purple { color: #8540f5; }
.color-navy { color: #142a59; }
.color-danger { color: #dc3545; }

button { font-family: inherit; }
.btn-primary { padding: 8px 15px; background-color: #fca311; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 14px; transition: 0.2s;}
.btn-primary:hover { background-color: #e08c0a; }
.btn-search { padding: 8px 15px; background-color: #142a59; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 14px; transition: 0.2s;}
.btn-search:hover { background-color: #0d1d3f; }
.btn-danger { padding: 8px 15px; background-color: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 14px;}
.btn-cancel { padding: 8px 15px; background-color: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 14px;}
.btn-sm { padding: 5px 10px; font-size: 12px; }
.bg-orange { background-color: #fca311 !important; }

/* =========================================================================
   2. Form & Settings Layout
   ========================================================================= */
.settings-container { padding-top: 10px; }
.settings-row { display: flex; align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed #e2e8f0; }
.settings-label { width: 140px; font-weight: bold; color: #142a59; flex-shrink: 0; padding-top: 2px; font-size: 14px;}
.settings-inputs { display: flex; flex-wrap: wrap; gap: 15px; }

.custom-label { display: inline-flex; align-items: center; cursor: pointer; color: #333; font-size: 14px; }
.custom-label input[type="checkbox"], .custom-label input[type="radio"] { margin-right: 6px; accent-color: #142a59; width: 16px; height: 16px; cursor: pointer; }

.modern-input, .modern-select, .modern-date-input { padding: 6px 10px; font-size: 14px; border: 1px solid #ced4da; border-radius: 4px; font-family: inherit; color: #333; }
.modern-input:focus, .modern-select:focus, .modern-date-input:focus { outline: none; border-color: #fca311; box-shadow: 0 0 0 2px rgba(252, 163, 17, 0.2); }
.modern-input-sm { width: 50px; padding: 4px 6px; font-size: 13px; border: 1px solid #ced4da; border-radius: 4px; text-align: center; }
.outline-navy { border-color: #142a59; }
.outline-purple { border-color: #8540f5; }

.upload-container { background: #f8f9fa; padding: 20px; border-radius: 6px; border: 1px solid #e2e8f0; }
.upload-group { margin-bottom: 15px; }
.upload-label { display: block; font-weight: bold; color: #142a59; margin-bottom: 8px; font-size: 14px;}
.modern-file-input { display: block; width: 100%; padding: 8px; font-size: 13px; background: white; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; }
.modern-textarea { width: 100%; height: 160px; padding: 12px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace; font-size: 13px; resize: vertical; line-height: 1.5; }
.action-row { display: flex; gap: 10px; align-items: center; }
.status-msg { font-weight: bold; margin-top: 15px; color: #198754; font-size: 14px; }

.toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.date-filter-box { display: flex; align-items: center; gap: 5px; background: white; padding: 4px 10px; border-radius: 4px; border: 1px solid #ced4da; }
.filter-label { font-weight: bold; font-size: 13px; color: #142a59; }
.filter-sep { color: #6c757d; font-weight: bold; }
.btn-clear { background: none; border: none; color: #dc3545; font-size: 16px; cursor: pointer; padding: 0 5px; line-height: 1;}
.modern-date-input { border: none; outline: none; font-weight: bold; color: #142a59; padding: 0; cursor: pointer; background: transparent;}


/* =========================================================================
   🌟 LIVE 변경 패널 (여정표 스타일 - 밸런스 완벽 정렬)
   ========================================================================= */
.live-card-wrapper { display: flex; justify-content: center; margin-bottom: 25px; }
.live-info-card { background: #f8fafc; border-top: 4px solid #142a59; padding: 25px 40px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); width: 100%; max-width: 800px; }
.live-pair-grid { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.pair-item { flex: 1; display: flex; flex-direction: column; }
.pair-item.align-left { text-align: left; align-items: flex-start; }
.pair-item.align-right { text-align: right; align-items: flex-end; }
.pair-item.align-center { text-align: center; align-items: center; }

.pair-type { font-size: 13px; font-weight: bold; margin-bottom: 8px; color: #64748b; }
.pair-main { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.align-right .pair-main { flex-direction: row-reverse; } /* 우측은 뱃지와 글씨 순서 반전 */

.pair-stand { color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 16px; font-weight: bold; }
.pair-flight { font-size: 22px; font-weight: 900; color: #0f172a; }
.pair-time { font-size: 15px; color: #475569; font-weight: bold; }

.pair-divider { flex: 0 0 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.divider-line { position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: transparent; border-top: 2px dashed #94a3b8; z-index: 1; transform: translateY(-50%); }
.tat-badge { background: #fff; color: #0369a1; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 900; border: 2px solid #bae6fd; z-index: 2; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

/* 🌟 원본(초기 배정) 데이터 박스 - 친절한 뱃지 스타일 */
.original-info-box { margin-top: 20px; padding-top: 15px; border-top: 1px dashed #cbd5e1; }
.mod-header { font-size: 12px; font-weight: bold; color: #dc3545; margin-bottom: 10px; display: flex; align-items: center; gap: 5px;}
.mod-body { display: flex; flex-wrap: wrap; gap: 10px; }
.mod-badge { background: #fff; border: 1px solid #e2e8f0; padding: 8px 15px; border-radius: 6px; display: flex; align-items: center; gap: 10px; }
.mod-badge span { color: #64748b; font-size: 12px; font-weight: bold;}
.mod-badge strong { color: #1e293b; font-size: 15px; font-weight: 900;}
.mod-badge.mod-time { border-color: #fca311; }
.mod-badge.mod-stand { border-color: #8540f5; }


/* 에디터 하단 폼 영역 */
.edit-info-box { display: flex; align-items: center; gap: 15px; margin-bottom: 12px; padding-bottom: 12px; }
.edit-badge-inactive { background: #e9ecef; color: #495057; padding: 6px 12px; border-radius: 4px; font-weight: bold; font-size: 15px; border: 1px solid #dee2e6;}
.info-desc { font-size: 13px; color: #6c757d; }

.edit-controls-wrapper { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; background: #fff; padding: 15px; border-radius: 6px; border: 1px solid #e2e8f0; }
.control-group { display: flex; align-items: center; gap: 8px; }
.control-label { font-size: 13px; color: #475569; font-weight: bold; }
.time-sep { font-weight: bold; color: #64748b; }
.tow-offset-text { color: #8540f5; font-size: 13px; }
.action-buttons { display: flex; gap: 8px; }


/* =========================================================================
   3. Tables (스케줄 & 배정표) 
   ========================================================================= */
.table-wrapper { overflow-x: auto; border: 1px solid #dee2e6; border-radius: 4px; background: white; max-height: 650px;}
.schedule-table, .export-table { width: 100%; border-collapse: collapse; text-align: center; }
.schedule-table th, .export-table th { background-color: #fafafa; color: #555; padding: 10px; font-size: 13px; font-weight: bold; position: sticky; top: 0; z-index: 2; border: 1px solid #e0e0e0; border-top: none; border-bottom: 2px solid #ccc;}
.schedule-table td, .export-table td { border: 1px solid #e0e0e0; padding: 6px; font-size: 13px; vertical-align: middle; }

.schedule-table input, .schedule-table select { width: 100%; box-sizing: border-box; padding: 4px; font-size: 13px; border: 1px solid #ced4da; border-radius: 3px; text-align: center; font-family: inherit;}
.schedule-table input:focus, .schedule-table select:focus { outline: 2px solid #fca311; border-color: transparent; }
.schedule-table .btn-delete-row { background-color: #dc3545; color: white; border: none; padding: 4px 8px; font-size: 12px; border-radius: 3px; cursor: pointer;}
.schedule-table tr:nth-child(even) td { background-color: #f8f9fa; } 
.schedule-table tr.group-color-a td { background-color: #ffffff !important; }
.schedule-table tr.group-color-b td { background-color: #f0f4f8 !important; } 
.schedule-table tr.group-start td { border-top: 2px solid #142a59 !important; } 
.schedule-table tr:hover td { background-color: #fff3cd !important; } 

.type-arr { background-color: #e0f2fe; }
.type-dep { background-color: #fce7f3; }

.export-table tr:nth-child(even) td { background-color: #f8f9fa; }
.export-table td.highlight-mod { background-color: #d9e1f2 !important; font-weight: bold; color: #000; } 
.total-count { padding: 10px; font-weight: bold; font-size: 13px; color: #495057; background: #fafafa; border-top: 1px solid #e0e0e0;}

/* 기번 상세 카드 */
.detail-panel { border-top: 3px solid #142a59; padding: 25px; margin-bottom: 15px; }
.detail-header { font-size: 18px; font-weight: bold; margin-bottom: 20px; color: #142a59; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; }
.detail-cards { display: flex; gap: 30px; align-items: center; }
.detail-card { flex: 1; background: #f8fafc; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);}
.card-arr { border-left: 5px solid #142a59; }
.card-dep { border-left: 5px solid #fca311; }
.card-title { color: #64748b; font-size: 13px; font-weight: bold; margin-bottom: 10px; }
.card-main { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.flight-text { font-size: 24px; font-weight: 900; color: #1e293b; }
.card-sub { font-size: 15px; color: #475569; }
.time-text { color: #d63384; font-weight: 900; font-size: 16px; }
.detail-arrow { color: #94a3b8; font-size: 28px; font-weight: bold; }
.stand-badge { padding: 4px 8px; border-radius: 4px; font-weight: 900; font-size: 18px; color: #fff; }
.bg-navy { background-color: #142a59; }

/* =========================================================================
   4. Tab Display Logic
   ========================================================================= */
.tab-content { display: block !important; position: absolute !important; top: -9999px !important; left: -9999px !important; visibility: hidden !important; }
.tab-content.active { position: static !important; top: auto !important; left: auto !important; visibility: visible !important; }

/* =========================================================================
   5. vis-timeline CHART CSS (절대 수정 금지)
   ========================================================================= */
.chart-container { width: 100%; height: auto; min-height: 300px; border: 1px solid #ccc; background-color: #fafafa; margin-top: 10px; border-radius: 4px;}

.vis-panel.vis-left { background-color: #f8f9fa; border-right: 1px solid #dee2e6; }
.vis-labelset .vis-label { border-bottom: 1px solid #e9ecef !important; display: flex; align-items: center; }
.vis-labelset .vis-label .vis-inner { padding: 8px 15px !important; font-size: 14px; font-weight: bold; color: #495057; }
.vis-time-axis .vis-text { font-size: 13px; padding: 5px; color: #495057; }

.vis-item.vis-range.connection-line { height: 4px !important; top: calc(50% - 2px) !important; border: none !important; opacity: 0.8; z-index: 1 !important; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.vis-item.vis-range.towing-line { background-color: #8540f5 !important; border-top: 2px dashed rgba(255,255,255,0.6) !important; height: 6px !important; opacity: 0.9; }
.vis-item.vis-point.towing-marker .vis-item-content { background-color: white !important; color: #8540f5 !important; border: 2px solid #8540f5; font-size: 11px; padding: 2px 6px !important; border-radius: 10px; margin-left: 0; }
.vis-item.vis-point.towing-marker .vis-dot { display: none; }
.vis-item.vis-range.towing-line-other { background-color: #adb5bd !important; border-top: 2px dashed rgba(255,255,255,0.6) !important; height: 6px !important; opacity: 0.6; }
.vis-item.vis-point.towing-marker-other .vis-item-content { background-color: white !important; color: #adb5bd !important; border: 2px solid #adb5bd; font-size: 11px; padding: 2px 6px !important; border-radius: 10px; margin-left: 0; }
.vis-item.vis-point.towing-marker-other .vis-dot { display: none; }

.vis-item.vis-point { background-color: transparent !important; border: none !important; z-index: 10 !important; }
.vis-item.vis-point .vis-item-content { background-color: var(--item-color, #6c757d) !important; color: white !important; padding: 3px 8px !important; border-radius: 4px; font-weight: bold; font-size: 12px; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.3); margin-left: 10px; transition: transform 0.2s; border: 2px solid transparent; }
.vis-item.vis-point:hover .vis-item-content { transform: scale(1.1); }
.vis-item.vis-point .vis-dot { border-color: var(--item-color, #6c757d) !important; border-width: 5px !important; background-color: white !important; border-radius: 50% !important; box-shadow: 0 0 3px rgba(0,0,0,0.4); }
.vis-item.vis-point .vis-item-content:empty { display: none !important; }

.vis-item.vis-point.is-modified .vis-item-content { border: 2px solid #fca311 !important; box-shadow: 0 2px 6px rgba(252, 163, 17, 0.4) !important; }
.vis-item.vis-point.is-highlighted .vis-item-content { background-color: #fca311 !important; color: #000 !important; border: 2px solid #e08c0a !important; box-shadow: 0 0 15px rgba(252, 163, 17, 0.9) !important; transform: scale(1.05); z-index: 999 !important; }
.vis-item.vis-point.is-pair-highlighted .vis-item-content { border: 2px dashed #ffeb3b !important; box-shadow: 0 0 15px rgba(255, 235, 59, 0.8), 0 0 5px rgba(252, 163, 17, 1) inset !important; transform: scale(1.15); z-index: 999 !important; }

.vis-item.vis-point.is-inactive .vis-item-content { background-color: #343a40 !important; color: white !important; border: 1px dashed #adb5bd !important; opacity: 0.8; }
.vis-item.vis-point.is-inactive .vis-dot { border-color: #343a40 !important; }

.vis-item.reg-bar-empty { background-color: #fee2e2 !important; border: 1px solid #fca5a5 !important; border-radius: 6px; height: 32px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.1); cursor: pointer; }
.vis-item.reg-bar-empty.vis-selected { border: 2px solid #dc2626 !important; box-shadow: 0 0 10px rgba(220, 38, 38, 0.5) !important; z-index: 10; }
.vis-item.reg-bar-empty.reg-normal { background-color: #e0f2fe !important; border-color: #7dd3fc !important; }
.vis-item.reg-bar-empty.reg-normal.vis-selected { border-color: #0284c7 !important; box-shadow: 0 0 10px rgba(2, 132, 199, 0.5) !important; }
.vis-item.reg-bar-empty.reg-single-arr { background: linear-gradient(to right, #e0f2fe 30%, rgba(224, 242, 254, 0)) !important; border-right: none !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.vis-item.reg-bar-empty.reg-single-dep { background: linear-gradient(to left, #e0f2fe 30%, rgba(224, 242, 254, 0)) !important; border-left: none !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

.vis-item.vis-point.reg-label-point { background-color: transparent !important; border: none !important; z-index: 5 !important; cursor: pointer; height: 32px !important; }
.vis-item.vis-point.reg-label-point .vis-dot { display: none !important; }
.vis-item.vis-point.reg-label-point .vis-item-content { background-color: transparent !important; box-shadow: none !important; padding: 0 !important; border: none !important; color: #000 !important; position: absolute !important; top: 0 !important; height: 100% !important; display: flex; flex-direction: column; justify-content: center; white-space: nowrap !important; }

.vis-item.vis-point.arr-label .vis-item-content { right: 5px !important; left: auto !important; align-items: flex-end; text-align: right; }
.vis-item.vis-point.dep-label .vis-item-content { left: 5px !important; right: auto !important; align-items: flex-start; text-align: left; }

.reg-tag-wrap { display: flex; flex-direction: column; line-height: 1.1; justify-content: center; min-width: max-content; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0px 0px 4px #fff; }
.tag-flight { font-size: 11px; font-weight: 900; font-style: italic; color: #334155 !important; margin-bottom: 1px; }
.tag-stand { font-size: 14px; font-weight: 900; color: #0f172a !important; letter-spacing: -0.5px; }

/* =========================================================================
   6. 배정표 / 메시지 탭 상호작용 스타일 추가
   ========================================================================= */
/* 배정표 행 전체 선택 시 연한 회색 배경 (클릭했는지 알 수 있게만 처리) */
.export-table tr { cursor: pointer; transition: background-color 0.1s; }
.export-table tr.is-selected td { background-color: #f1f5f9 !important; }

/* 🌟 주기장(타겟) 셀 지정 및 선택 시 보라색 테두리 (오직 주기장 칸에만!) */
.export-table tr.is-selected td.target-stand-cell { box-shadow: inset 0 0 0 2px #8540f5 !important; }

/* 🌟 물귀신 파란색 배경 (완료되어도 지워지지 않음!) */
.export-table td.mod-stand-cell { background-color: #d9e1f2 !important; }

/* 🌟 실제 변경된 셀 굵게 (색상 변경 없음) */
.export-table td.actual-mod-cell { font-weight: 900 !important; font-size: 14px; color: #142a59; }

/* 🌟 신청 완료 건 황금 테두리 (오직 주기장 셀에만!) */
.export-table tr.is-completed td.target-stand-cell { box-shadow: inset 0 0 0 3px #fca311 !important; }

/* 선택 + 완료 중복 시 이중 테두리로 확실하게 표기 */
.export-table tr.is-selected.is-completed td.target-stand-cell { box-shadow: inset 0 0 0 2px #8540f5, inset 0 0 0 5px #fca311 !important; }

/* 신청 메시지 탭 완료 건 음영 처리 */
.msg-completed-row { opacity: 0.4; background-color: #f8f9fa; }
.msg-completed-row td.strike { text-decoration: line-through; }
.msg-completed-row .btn-cancel { pointer-events: auto; opacity: 1; }