/* dashboard_fids.css - 리얼 FIDS 차분한 디자인 개선 */

/* 라이브 깜빡임 효과 */
.live-dot {
    width: 8px;
    height: 8px;
    background-color: #4ade80;
    /* 더 차분한 녹색 */
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}

.fids-board-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    flex: 1;
    min-height: 0;
}

/* 🌟 배경색 톤다운 (메인 대시보드 테마와 통일감 부여) */
.fids-board {
    background-color: #0e1931;
    /* 기존 쨍한 파란색 대신 차분한 남색 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* 테두리 투명도 조절 */
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.board-title {
    background-color: #070d1a;
    /* 더 어두운 헤더 */
    color: #fff;
    padding: 6px 12px; /* 🌟 타이틀 위아래 여백 극한 다이어트 */
    font-size: 15px; /* 약간 줄임 */
    font-weight: 800;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.board-title .en {
    color: #8b9bb4;
    font-size: 12px;
    font-weight: 500;
    margin-left: 5px;
}

/* 🌟 레이아웃 변경 (SPOT 열 추가) */
.board-header,
.fids-board-row {
    display: grid;
    grid-template-columns: 120px 45px 1fr 40px 40px 65px;
    gap: 8px;
    align-items: center;
    padding: 4px 12px; /* 🌟 행 위아래 여백 극한 다이어트 */
}

.board-header {
    background-color: rgba(255, 255, 255, 0.02);
    color: #8b9bb4;
    font-size: 11px;
    font-weight: 800;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.board-content {
    flex: 1;
    overflow-y: auto;
    background-color: transparent;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* 🌟 스크롤 기능은 작동하지만 시각적으로 스크롤바는 숨김 */
.board-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.fids-board-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 12px;
    font-weight: 600;
    color: #e2e8f0;
    transition: background-color 0.2s;
}

.fids-board-row:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.fids-board-row.is-past {
    opacity: 0.35;
}

/* 컬럼 스타일 */
.col-flight {
    display: flex;
    align-items: center;
    gap: 6px;
}

.flight-num {
    font-family: monospace;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #fff;
}

.al-logo-img {
    height: 16px;
    width: 28px;
    object-fit: contain;
    background: white;
    padding: 2px;
    border-radius: 3px;
}

.al-logo {
    background: white;
    color: #0b1a2e;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 900;
}

.col-time {
    font-family: monospace;
    color: #bac5d6;
    font-size: 12px;
}

.col-dest {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 🌟 SPOT 디자인 */
.col-spot {
    font-family: monospace;
    font-size: 13px;
    font-weight: 800;
    color: #fca311;
    text-align: center;
}

.col-newtime {
    font-family: monospace;
    color: #facc15;
    font-weight: 800;
    text-align: center;
    font-size: 12px;
}

.col-status {
    font-size: 11px;
    font-weight: 800;
    text-align: right;
    letter-spacing: -0.5px;
}

/* 🌟 차분해진 상태 컬러 팔레트 */
.col-status.sched {
    color: #8b9bb4;
}

/* 예정: 차분한 회파란색 */
.col-status.arr,
.col-status.dep {
    color: #4ade80;
}

/* 출발/도착: 눈안아픈 연녹색 */
.col-status.cancel {
    color: #f87171;
}

/* 결항: 파스텔톤 빨강 */
.col-status.delay {
    color: #facc15;
}

/* 지연: 부드러운 노랑 */

.loading-msg {
    padding: 40px;
    text-align: center;
    color: #8b9bb4;
    font-size: 12px;
    font-weight: 600;
}

/* 🌟 해상도(FHD 초과) 대응을 위한 반응형 스타일 */
@media (min-width: 1921px) {
    .board-header,
    .fids-board-row {
        /* QHD에서도 편명 영역 130px로 타협하여 전체적으로 슬림하게 */
        grid-template-columns: 130px 50px 1fr 45px 45px 75px;
        gap: 10px;
        padding: 5px 15px; 
        font-size: 15px; 
    }
    
    .board-title {
        font-size: 18px; 
        padding: 6px 15px;
    }
    
    .board-title .en {
        font-size: 14px;
    }

    .board-header {
        font-size: 13px; 
        padding: 5px 15px;
    }

    .flight-num {
        font-size: 16px; 
    }

    .col-dest, .col-spot {
        font-size: 16px;
    }
    
    .col-time, .col-newtime {
        font-size: 14px; 
    }

    .col-status {
        font-size: 13px; 
    }

    .al-logo-img {
        height: 18px; 
        width: 32px;
        border-radius: 4px;
    }
    
    .al-logo {
        font-size: 11px;
        padding: 2px 4px;
    }
}