@charset "utf-8";

/*스크롤바 스타일*/
::-webkit-scrollbar{width: 1rem;}
::-webkit-scrollbar-track {background-color: transparent;}
::-webkit-scrollbar-thumb {border-radius: 1rem;background-color: #EEE;}
::-webkit-scrollbar-button {width: 0;height: 0;}

/*색상값*/
:root {
    /* 배경 색상 */
    --bg: #F5F5F5;
    /* 메뉴 활성화 시 배경색 */
    --menu-active: #F2F4FD;
    /* 메뉴 활성화 시 글자색 */
    --menu-active-font: #4761DE;
    /* 선택 시 배경색 */
    --selected: #f5f5f5;
    /* 흰색 */
    --white: #FFFFFF;
    /* 검정색 */
    --black: #222;
    /* 회색 */
    --gray: #707378;
    /* 회색 */
    --gray2: #999;
    /* 날짜 색상 */
    --date: #BCBEC0;
    /* 테두리 색상 */
    --border: #E2E5EC;
    /* 여객선 운향 예보 레이어 테두리 색상 */
    --forecast-border: #DEE2EB;
    /* 여객선 운향 예보 레이어 배경 색상 */
    --forecast-bg: #F6F7FB;
    /* 여객선 운향 예보 레이어 버튼 색상 */
    --forecast-button: #202B3D;
    /* 여객선 운향 예보 레이어 타이블 배경*/
    --forecast-header-bg: #4761DE;
    /* 연한 테두리 색상 */
    --border-light: #ddd;
    /* 아이콘 색상 */
    --icon: #8E8E90;
    /* 흰색 투명도 */
    --white-opacity: rgba(255, 255, 255, 0.20);
    --white-opacity-05: rgba(255, 255, 255, 0.50);
    /* 심각 */
    --serious:#DB5A48;
    /* 위험 */
    --dangers:#F49746;
    /* 보통 */
    --usual:#FCC41B;
    /* 안전 */
    --safe:#58AC52;
    --table-th-color:#66696D;
    --table-th-bg:rgba(245, 246, 249, 0.50);
    --table-td-color:#818384;
    --pagination-active:#4761DE;
    --up:#4761DE;            /* 상승 아이콘/텍스트 */
    --down:#DB5A48;          /* 하락 아이콘/텍스트 */
    --graph-filter-bg:#F6F7FB;
    --graph-filter-active:#4761DE;
}

/*공통영역*/
* {
    /* Pretendard 폰트 적용 */
    font-family: Pretendard, sans-serif;
}

/* HTML 기본 폰트 사이즈 설정 (반응형) */
html {font-size: 0.5208333333333333vw;}

/* Body 영역 기본 설정 */
body {min-width: 1024px;background-color: var(--bg);height: 100vh;overflow: hidden;}

/* 앱 컨테이너 */
.app {width: 100%;height: 100%;display: flex;}

/* 사이드바 영역 */
.sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    box-sizing: border-box;
    width: 32rem;
    position: relative;
    background-color: var(--white);
    padding: 2rem 3.6rem;
    padding-bottom: 20px;
}

/* 로고 영역 */
.sidebar .logo {width: 18rem;height: 9.6rem;margin: 0 auto;}

/* 로고 이미지 */
.sidebar .logo > img {width: 100%;height: 100%;display: block;}

/* 메뉴 리스트 */
.sidebar .menu-list {margin-top: 5.2rem;display: flex;flex-direction: column;}

/* 메뉴 아이템 */
.sidebar .menu-list .menu-item {display: flex;align-items: center;width: 100%;height: 5.8rem;flex-shrink: 0;border-radius: .5rem;padding: 2rem;}

/* 메뉴 아이콘 */
.sidebar .menu-list .menu-item .icon {width: 1.9rem;height: auto;margin-right: 1.9rem;display: block;}

/* 메뉴 텍스트 */
.sidebar .menu-list .menu-item > span {color: var(--black);font-family: Pretendard, sans-serif;font-size: 1.8rem;font-style: normal;font-weight: 500;line-height: normal;}

/* 활성화된 메뉴 아이템 */
.sidebar .menu-list .menu-item.active {background: var(--menu-active);}

/* 활성화된 메뉴 아이콘 SVG 요소들 */
.sidebar .menu-list .menu-item.active .icon svg rect[stroke] {stroke: var(--menu-active-font);}
.sidebar .menu-list .menu-item.active .icon svg rect[fill] {fill: var(--menu-active-font);}
.sidebar .menu-list .menu-item.active .icon svg circle[stroke] {stroke: var(--menu-active-font);}

/* 활성화된 메뉴 텍스트 */
.sidebar .menu-list .menu-item.active > span {font-weight: 700;color: var(--menu-active-font);}

/* 커스텀 셀렉트 박스 */
.custom-select {position: relative;width: 100%;height: 5.2rem;flex-shrink: 0;cursor: pointer;border-radius: .3rem;border: 1px solid var(--border);background: var(--white-opacity);margin-top: 6rem;}

/* 셀렉트 박스 현재 값 */
.custom-select .select-value {display: flex;align-items: center;width: 100%;height: 100%;padding: 0 1.6rem;color: var(--black);font-family: Pretendard, sans-serif;font-size: 1.8rem;font-style: normal;font-weight: 400;line-height: normal;position: relative;}

/* 셀렉트 박스 화살표 아이콘 */
.custom-select .select-value::after {content: '';position: absolute;right: 2rem;top: 50%;transform: translateY(-50%);width: 1.2rem;height: .8rem;background-image: url("../images/icons/icon-arrow.svg");background-size: cover;background-repeat: no-repeat;transition-duration: 0.3s;}

/* 옵션 리스트 */
.custom-select .options {display: none;position: absolute;top: 100%; max-height: 250px; overflow-y: auto; left: 0;right: 0;background: var(--white);border: 1px solid var(--border-light);border-radius: .4rem;margin-top: .5rem;z-index: 1000;opacity: 0;transform: translateY(-1rem);transition: opacity 0.3s ease, transform 0.3s ease;}

/* 옵션 아이템 */
.custom-select .options li {display: flex;align-items: center;width: 100%;height: 5.2rem;padding: 0 1.6rem;color: var(--black);font-family: Pretendard, sans-serif;font-size: 1.8rem;font-style: normal;font-weight: 400;line-height: normal;transition: background 0.2s;}

/* 선택된 옵션 */
.custom-select .options li.selected {background: var(--selected);}

/* 옵션 호버 효과 */
.custom-select .options li:hover {background: var(--selected);}

/* 셀렉트 박스 열린 상태 */
.custom-select.show .options {display: block;opacity: 1;transform: translateY(0);}

/* 셀렉트 박스 열린 상태의 화살표 */
.custom-select.show .select-value::after {transform: translateY(-50%) rotate(180deg);}

/* Main 영역 */
.main {padding: 2.5rem 4rem;width: calc(100% - 32rem);height: 100%;overflow: hidden;

    display: flex;flex-direction: column;
}

/* 페이지 제목 */
.page-title{display: flex;flex-direction: column;row-gap: 0.8rem;position: relative;}
.page-title .title{color: var(--black);font-family: Pretendard, sans-serif;font-size: 3.2rem;font-style: normal;font-weight: 700;line-height: normal;}
.page-title .summary{color: var(--gray2);font-family: Pretendard, sans-serif;font-size: 1.6rem;font-style: normal;font-weight: 400;line-height: normal;}


/* Status cards */ /* 상태 카드 행 */
.status-row {width: 100%;display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;gap: 1.6rem;margin-top: 2rem;}

/* 상태 카드 기본 스타일 */
.status-card {display: flex;align-items: center;padding: 0 4rem;width: 100%;height: 9rem;border-radius: .5rem;flex-shrink: 0;}

/* 심각 상태 카드 */
.status-card.serious {background: var(--serious);}

/* 위험 상태 카드 */
.status-card.dangers {background: var(--dangers);}

/* 보통 상태 카드 */
.status-card.usual {background: var(--usual);}

/* 안전 상태 카드 */
.status-card.safe {background: var(--safe);}

/* 상태 카드 아이콘 */
.status-card .icon {margin-right: 1rem;}

/* 상태 카드 아이콘 이미지 */
.status-card .icon > img {display: block;width: 100%;height: 100%;}

/* 심각 상태 카드 아이콘 크기 */
.status-card.serious .icon {width: 4.7rem;height: 4.6rem}

/* 위험 상태 카드 아이콘 크기 */
.status-card.dangers .icon {width: 4.4rem;height: 4rem}

/* 보통 상태 카드 아이콘 크기 */
.status-card.usual .icon {width: 4.7rem;height: 4.6rem}

/* 안전 상태 카드 아이콘 크기 */
.status-card.safe .icon {width: 5.7rem;height: 4.4rem}

/* 상태 카드 라벨 */
.status-card .label {color: var(--white);font-family: Pretendard, sans-serif;font-size: 2.5rem;font-style: normal;font-weight: 700;line-height: normal;display: flex;align-items: center;gap: 1rem;}

/* 상태 카드 서브 라벨 */
.status-card .label .sub {color: var(--white-opacity-05);font-family: Pretendard, sans-serif;font-size: 2.5rem;font-style: normal;font-weight: 400;line-height: normal;}

/* 상태 카드 하위 텍스트 */
.status-card .sub {font-weight: 500;color: #ffffff;}

/* 상태 카드 카운트 */
.status-card .count {margin-left: auto;color: var(--white);text-align: right;font-family: Pretendard, sans-serif;font-size: 3rem;font-style: normal;font-weight: 700;line-height: normal;}

.status-header{flex: none;}

/* 지도 영역 */
.map-panel{width: 100%;height: 100%;overflow: hidden;position: relative;margin-top: 2rem;}
.map-panel .map-frame{height: 100%;}
.map-panel .map-frame img{width: 100%;height: 100%;display: block;object-fit: cover;}

/* 상태 요약 패널 활성화 스타일 */
.status-summary article.active {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 2px solid #007bff;
}

.status-summary article:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

/* 필터링 상태 표시 */
.filter-status {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1000;
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.filter-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-close-btn {
    background: rgba(255, 255, 255, 0.3);
    border: none;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.filter-close-btn:hover {
    background: rgba(255, 255, 255, 0.5);
}
.forecast-section{position: absolute;top: 0;right: 0;width: 49.6rem;height: 100%;flex-shrink: 0;border: 1px solid var(--forecast-border);background: var(--forecast-bg);transform: translateX(100%);transition-duration: 0.3s;transition-property: transform;z-index: 1000;}
.forecast-section .open-button{position: absolute;top:50%;left: 0;display: flex;justify-content: center;align-items: center;column-gap: 0.5rem;width: 10rem;height: 3.4rem;flex-shrink: 0;border-radius: .7rem .7rem 0 0;background: #202B3D;transform-origin: center bottom;transform: translate(-50%,-100%) rotate(-90deg);}
.forecast-section .open-button::before{content:'OPEN';color: var(--white);font-family: Pretendard, sans-serif;font-size: 1.4rem;font-style: normal;font-weight: 600;line-height: normal;}
.forecast-section .open-button::after{content:'';background-image: url("../images/icons/icon-open-arrow.svg");background-size: cover;background-repeat: no-repeat;width: 0.9rem;height: 1.3rem;display: inline-block;transform: rotate(90deg);}
.forecast-section.open{transform: translateX(0);}
.forecast-section.open .open-button::before{content:'CLOSE';}
.forecast-section.open .open-button::after{transform: rotate(-90deg);}
.forecast-section .forecast-header{width: 100%;height: 5rem;padding: 0 2rem;display: flex;align-items: center;flex-shrink: 0;background: var(--forecast-header-bg);position: sticky;top: 0;z-index: 10;}
.forecast-section .forecast-content{height: calc(100% - 5rem);overflow: hidden;}
.forecast-section .forecast-item{display: flex;flex-direction: column;height: 100%;}
.forecast-section .forecast-title {color: var(--white);font-size: 2rem;font-style: normal;font-weight: 700;line-height: normal;}
.forecast-section .forecast-zone{height:14.5rem;background-color: var(--white);padding:1rem 1rem 1rem 4.6rem;}
.forecast-section .forecast-zone .title{color: var(--black);font-family: Pretendard, sans-serif;font-size: 2.2rem;font-style: normal;font-weight: 700;line-height: normal;position: relative;}
.forecast-section .forecast-zone .title::before{content:'';width: 1.6rem;height: 1.6rem;border-radius: 50%;position: absolute;top: 50%;left: -1rem;transform: translate(-100%, -50%);}
.forecast-section .forecast-zone.serious .title::before{background-color: var(--serious);}
.forecast-section .forecast-zone.dangers .title::before{background-color: var(--dangers);}
.forecast-section .forecast-zone.usual .title::before{background-color: var(--usual);}
.forecast-section .forecast-zone.safe .title::before{background-color: var(--safe);}
.forecast-section .forecast-zone .date{display: block;color: var(--date);font-family: Pretendard, sans-serif;font-size: 1.4rem;font-style: normal;font-weight: 400;line-height: normal;margin-top: 0.6rem;}
.forecast-section .vessel-info{display: flex;margin-top: 1.2rem;}
.forecast-section .vessel-info > dt{width: 6rem;height: 2.8rem;display: flex;justify-content: center;align-items: center;flex-shrink: 0;color:var(--gray);font-family: Pretendard, sans-serif;font-size: 1.4rem;font-style: normal;font-weight: 400;line-height: normal;border-radius: 5rem;background: #E8EFFF;margin-right: 0.6rem;margin-left: 0.6rem;}
.forecast-section .vessel-info > dt:first-child{margin-left: 0;}
.forecast-section .vessel-info > dd{display: flex;align-items: center;color: var(--black);font-family: Pretendard, sans-serif;font-size: 1.4rem;font-style: normal;font-weight: 600;line-height: normal;margin-right: 0.5rem;}
.forecast-section .vessel-info > dd:last-child{margin-right: 0;}
.forecast-section .forecast-status{color: var(--forecast-header-bg);font-family: Pretendard, sans-serif;font-size: 1.6rem;font-style: normal;font-weight: 400;line-height: normal;margin-top: 1rem;}

.waypoint-section{padding:1rem;height: calc(100% - 14.5rem);flex: 1;}
.waypoint-section .waypoint-wrapper{display: flex;height: 100%;flex-direction: column;background-color: var(--white);padding:1rem 1rem 2rem 2rem;}
.waypoint-section .waypoint-header{color: var(--black);font-family: Pretendard, sans-serif;font-size: 1.8rem;font-style: normal;font-weight: 400;line-height: normal;padding: 0.5rem 0;}
.waypoint-section .waypoint-list-wrapper{overflow-y: auto;height: 100%;    padding-right: 1rem;padding-left: 1rem;}
.waypoint-section .waypoint-list{display: flex;flex-direction: column;row-gap: 1rem;}
.waypoint-section .waypoint-item .waypoint-name{padding-left: 2rem;position: relative;display: flex;flex-direction: column;row-gap: 0.5rem;}
.waypoint-section .waypoint-item .location-name{color: var(--forecast-header-bg);font-family: Pretendard, sans-serif;font-size: 1.8rem;font-style: normal;font-weight: 600;line-height: normal;position: relative;}
.waypoint-section .waypoint-item .coordinates{color: var(--date);font-family: Pretendard, sans-serif;font-size: 1.4rem;font-style: normal;font-weight: 400;line-height: normal;margin-bottom: 0.4rem;}
.waypoint-section .waypoint-item .waypoint-info{border-radius: 0.5rem;background: #F6F9FC;padding:2rem;margin-top: 0.2rem;}
.waypoint-section .waypoint-item .waypoint-info-list{display: flex;flex-direction: column;row-gap: 1rem;}
.waypoint-section .waypoint-item .waypoint-info-item{display: flex;justify-content: space-between;align-items: center;}
.waypoint-section .waypoint-item .waypoint-info-item .t-box{color: var(--gray);font-family: Pretendard, sans-serif;font-size: 1.5rem;font-style: normal;font-weight: 400;line-height: normal;}
.waypoint-section .waypoint-item .waypoint-info-item .v-box{color: var(--black);text-align: right;font-family: Pretendard, sans-serif;font-size: 1.5rem;font-style: normal;font-weight: 600;line-height: normal;}
.waypoint-section .waypoint-item .location-name::before{content:'';width: 1.2rem;height: 1.2rem;border-radius: 50%;position: absolute;top: 50%;left: -0.8rem;transform: translate(-100%, -50%);}
.waypoint-section .waypoint-item.serious .location-name::before{background-color: var(--serious);}
.waypoint-section .waypoint-item.dangers .location-name::before{background-color: var(--dangers);}
.waypoint-section .waypoint-item.usual .location-name::before{background-color: var(--usual);}
.waypoint-section .waypoint-item.safe .location-name::before{background-color: var(--safe);}


.filters{display: flex;justify-content: space-between;align-items: center;margin-top: 2rem;}
.filters .left-filter{display: flex;align-items: center;column-gap: 0.8rem;}
.filters .right-filter {
    display: flex;
    flex-direction: column; /* [변경] 수직 정렬 */
    align-items: flex-end;    /* [변경] 우측 정렬 */
    justify-content: center;
    gap: 1rem;              /* 텍스트와 버튼 사이의 간격 */
}
.filters select {border-radius: .5rem;border: 1px solid var(--border);background: var(--white);min-width: 15rem;height: 5.2rem;flex-shrink: 0;background-image: url("../images/icons/icon-arrow.svg");background-repeat: no-repeat;background-position: right 2rem center;background-size: auto 0.8rem;color: var(--black);padding: 0 2rem;font-family: Pretendard, sans-serif;font-size: 1.8rem;font-style: normal;font-weight: 400;line-height: normal;appearance: none;}
.filters .update-date{color: #818384;font-family: Pretendard, sans-serif;font-size: 1.8rem;font-style: normal;font-weight: 400;line-height: normal;}
.update-date{color: #818384;font-family: Pretendard, sans-serif;font-size: 1.8rem;font-style: normal;font-weight: 400;line-height: normal;}
.filters .button-box{display: flex;align-items: center;column-gap: .8rem;}
.filters .button-box .button{width: 5.2rem;height: 5.2rem;flex-shrink: 0;border-radius: .5rem;border: 1px solid var(--pagination-active);background: var(--white);}
.filters .button-box .button.refresh-button{background-image: url("../images/icons/icon-refresh.svg");background-repeat: no-repeat;background-position: center;background-size: auto 2rem;}
.filters .button-box .button.tip-button{background-image: url("../images/icons/icon-tip.svg");background-repeat: no-repeat;background-position: center;background-size: auto 2.1rem;}

.table-wrapper{border-radius: .5rem;overflow: hidden;border: 1px solid var(--border);margin-top: 2rem;}
.table-wrapper table {width: 100%;border-collapse: collapse;background: var(--white);font-size: 1.8rem;font-family: Pretendard, sans-serif;font-style: normal;font-weight: 400;line-height: normal;}
.table-wrapper table :is(th,td) {text-align: center;vertical-align: middle}
.table-wrapper table th {height: 6rem;color: var(--table-th-color);font-size: 1.6rem;font-style: normal;font-weight: 600;line-height: normal;background: var(--table-th-bg);}
.table-wrapper table td {height: 6.8rem;color: var(--table-td-color);font-size: 1.8rem;font-style: normal;font-weight: 400;line-height: normal;}
.table-wrapper table .status{width: 9rem;height: 4rem;flex-shrink: 0;border-radius: .5rem;display: flex;justify-content: center;align-items: center;margin: 0 auto;color: var(--white);font-family: Pretendard, sans-serif;font-size: 1.8rem;font-style: normal;font-weight: 700;line-height: normal;}
.table-wrapper table .status.serious {background-color: var(--serious);}
.table-wrapper table .status.dangers {background-color: var(--dangers);}
.table-wrapper table .status.usual {background-color: var(--usual);}
.table-wrapper table .status.safe {background-color: var(--safe);}

.pagination{display: flex;align-items: center;justify-content: center;margin-top: 3.2rem;}
.pagination .num{width: 3.2rem;height: 3.2rem;display: flex;justify-content: center;align-items: center;border-radius: 50%;color: var(--gray);font-family: Pretendard, sans-serif;font-size: 1.8rem;font-style: normal;font-weight: 400;line-height: normal;cursor: pointer;margin: 0 0.4rem;}
.pagination .start{width: 3.2rem;height: 3.2rem;background-image: url("../images/icons/icon-start.svg");background-size: auto 1.3rem;background-repeat: no-repeat;background-position: center;cursor: pointer;}
.pagination .prev{width: 3.2rem;height: 3.2rem;background-image: url("../images/icons/icon-prev.svg");background-size: auto 1.3rem;background-repeat: no-repeat;background-position: center;cursor: pointer;margin-right: 1rem;}
.pagination .end{width: 3.2rem;height: 3.2rem;background-image: url("../images/icons/icon-end.svg");background-size: auto 1.3rem;background-repeat: no-repeat;background-position: center;cursor: pointer;}
.pagination .next{width: 3.2rem;height: 3.2rem;background-image: url("../images/icons/icon-next.svg");background-size: auto 1.3rem;background-repeat: no-repeat;background-position: center;cursor: pointer;margin-left: 1rem;}
.pagination .num.active{color: var(--white);background-color: var(--pagination-active);font-weight: 700;}
.bottom-box{position: relative}
.page-box{position: absolute;right: 0;bottom:0;color: #707378;font-family: Pretendard, sans-serif;font-size: 1.8rem;font-style: normal;font-weight: 400;line-height: normal;}
.page-box label{color: #707378;font-family: Pretendard, sans-serif;font-size: 1.8rem;font-style: normal;font-weight: 400;line-height: normal;margin-right: 0.8rem;}
.page-box input {font-size: 1.8rem;width: 3.6rem;height: 2.8rem;flex-shrink: 0;border-radius: .5rem;border: 1px solid var(--border);background: var(--white);text-align: center;}

.dashboard{display:grid;grid-template-columns: repeat(3, 1fr);gap: 2.7rem;margin-top: 2rem;background: var(--bg);position: relative;}
.dashboard .tip{position: absolute;right: 0;top: -5.6rem;width: 3.6rem;height: 3.6rem;flex-shrink: 0;border-radius: 50%;background: var(--border);background-image: url("../images/icons/icon-tip2.svg");background-size: 4px auto;background-repeat: no-repeat;background-position: center;cursor: pointer;}
.dashboard-item{background: var(--white);border: 1px solid var(--border);border-radius: 0.5rem;padding: 1.6rem 4rem;display:flex;font-family: Pretendard, sans-serif;flex-direction: column;justify-content: center;min-height: 8.2rem;}
.dashboard-item .label{font-size: 1.6rem;color: var(--gray2);margin-bottom: 1.2rem;}
.dashboard-item .value{font-size: 3.2rem;font-weight: 800;color: var(--menu-active-font);letter-spacing: -0.02em;margin-bottom: 1.2rem;}
.wow-change{display:flex;align-items:center;gap:1rem;color: var(--black);font-size: 1.6rem;font-style: normal;font-weight: 400;line-height: normal;}
.wow-change::before{content:"";display:inline-block;width: 0;height: 0;border-left: 0.6rem solid transparent;border-right: 0.6rem solid transparent;transform: translateY(-0.1rem);}
.wow-change.up::before{border-bottom: 1rem solid var(--up);   /* ▲ */}
.wow-change.down::before{border-top: 1rem solid var(--down);    /* ▼ */}

/* ===== Graph Filter ===== */

.graph-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 2rem;
    background: var(--white);
    padding: 3.2rem 4rem;
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.graph-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 자식 요소가 여러 줄이 되므로 상단 정렬로 변경 */
}

.graph-title {
    color: var(--black);
    font-family: Pretendard, sans-serif;
    font-size: 2.8rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* 부모 컨테이너: flex 방향을 세로로 변경하고 오른쪽 정렬 */
.graph-filter {
    display: flex;
    flex-direction: row;
    align-items: flex-end; /* 그룹 전체를 오른쪽에 붙이는 것은 유지 */
    gap: 1.6rem;
}

/* 모달 배경 (어두운 오버레이) */
/* 모달 배경 (어두운 오버레이) */
.modal-backdrop {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6); /* 배경 더 어둡게 하여 콘텐츠 집중 */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* JavaScript로 이 클래스를 추가하면 모달이 보입니다. */
.modal-backdrop.is-visible {
    display: flex;
}

/* 실제 모달 창 콘텐츠 */
.modal-content {
    background: var(--white); /* 흰색 배경 */
    padding: 3.2rem 4rem; /* 패딩을 여유롭게 조절 */
    border-radius: .8rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25); /* 그림자 더 선명하게 */
    width: 100%; /* 너비는 유동적으로 */
    max-width: 60rem; /* 최대 너비 설정으로 너무 넓어지지 않게 */
    box-sizing: border-box; /* 패딩이 너비에 포함되도록 */
}

/* 모달 헤더 */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-bottom: 2rem; /* 헤더 아래 여백 */
    border-bottom: 1px solid #e9ecef; /* 구분선 */
    margin-bottom: 2.4rem; /* 헤더와 본문 사이 여백 */
}

.modal-title {
    flex-grow: 1;
    text-align: left;
    color: var(--black);
    font-family: Pretendard, sans-serif;
    font-size: 2.4rem; /* 제목 크기 키움 */
    font-weight: 700;
    line-height: normal;
}

/* 모달 본문 (날짜 입력 부분) */
.modal-body {
    display: flex;
    align-items: flex-end; /* 입력 필드와 ~ 기호 하단 정렬 */
    justify-content: center; /* 전체적으로 중앙 정렬 */
    gap: 1.6rem; /* 입력 그룹 사이 간격 */
    margin-bottom: 3.2rem; /* 본문과 푸터 사이 여백 */
}

/* 날짜 입력 그룹 (레이블 + 입력 필드) */
.modal-body .date-input-group {
    display: flex;
    flex-direction: column; /* 레이블과 입력 필드를 세로로 쌓음 */
    gap: 0.8rem; /* 레이블과 입력 필드 사이 간격 */
}


/* 모달 푸터 (취소/적용 버튼) */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1.2rem;
    padding-top: 2rem; /* 푸터 위 여백 */
    border-top: 1px solid #e9ecef; /* 구분선 */
}

/* 모달 내부 버튼 공통 스타일 */
.modal-footer button {
    height: 4.4rem; /* 버튼 높이 통일 */
    padding: 0 2.4rem; /* 좌우 패딩 조절 */
    border-radius: .5rem;
    font-family: Pretendard, sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 취소 버튼 */
.modal-footer .btn-cancel {
    background-color: var(--white);
    color: var(--gray);
    border: 1px solid var(--border);
}
.modal-footer .btn-cancel:hover {
    background-color: #f8f9fa;
}

/* 적용 버튼 */
.modal-footer .btn-apply {
    background-color: #4761DE; /* 이미지와 동일한 파란색 */
    color: var(--white);
    border: 1px solid #4761DE;
}
.modal-footer .btn-apply:hover {
    background-color: #364bb2;
    border-color: #364bb2;
}

/* 라디오 숨김 */
.graph-filter input[type="radio"] {
    display: none;
}

/* 기본 라벨 스타일 */
.graph-filter input[type="radio"]+label {
    display: inline-flex;
    width: 12rem;
    height: 4.4rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    background: var(--graph-filter-bg);
    color: var(--gray);
    text-align: center;
    font-family: Pretendard, sans-serif;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

/* 선택된 라디오 → label 강조 */
.graph-filter input[type="radio"]:checked+label {
    background: var(--graph-filter-active);
    color: var(--white);
    font-weight: 700;
}

.graph-filter .input-date label {
    color: var(--black);
    font-family: Pretendard, sans-serif;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-right: 1.2rem;
}

.graph-filter .input-date input[type='text'] {
    width: 14rem;
    height: 5.2rem;
    flex-shrink: 0;
    border-radius: .5rem;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--black);
    font-family: Pretendard, sans-serif;
    font-size: 1.8rem;
    padding: 0 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.graph-filter .input-date .dash {
    color: var(--black);
    font-family: Pretendard, sans-serif;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 1.2rem;
}

.graph-filter .input-date .send-button {
    width: 10rem;
    height: 5.2rem;
    flex-shrink: 0;
    border-radius: .5rem;
    border: 1px solid var(--pagination-active);
    background: var(--white);
    color: #4761DE;
    text-align: center;
    font-family: Pretendard, sans-serif;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-left: 1.2rem;
    cursor: pointer;
}

.input-date .send-button {
    width: 10rem;
    height: 5.2rem;
    flex-shrink: 0;
    border-radius: .5rem;
    border: 1px solid var(--pagination-active);
    background: var(--white);
    color: #4761DE;
    text-align: center;
    font-family: Pretendard, sans-serif;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-left: 1.2rem;
    cursor: pointer;
}

/*캘린더 스타일*/
.litepicker .container__months .month-item-header div> :is(.month-item-name,.month-item-year){border:0;}
.litepicker .container__days .day-item{font-size: 1.4rem}

/* 다운로드 버튼 그룹 스타일 */
.right-filter .btn-group {
    display: flex;
    align-items: center;
    gap: 0.8rem;      /* 버튼 사이 간격 */
    margin-left: 1.5rem; /* 날짜 텍스트와의 간격 */
}

.btn-download {
    display: flex;
    align-items: center;      /* 수직 중앙 정렬 */
    justify-content: flex-start; /* [요청사항 2] 수평 왼쪽 정렬 (내부 콘텐츠) */
    height: 4rem;             /* 필터(5.2rem)보다 위계상 작게 설정 */
    padding: 0 1.8rem;        /* 좌우 여백 */
    background-color: #3b80c0; /* [요청사항 1] 둥근 파란색 바탕 */
    border: 1px solid #3b80c0;
    border-radius: 0.5rem;    /* 디자인 시스템의 '둥근' 모서리 값 적용 */
    color: var(--white);      /* [요청사항 2.2] 흰색 텍스트 */
    font-family: Pretendard, sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

/* 호버 효과: 파란색을 조금 더 어둡게 */
.btn-download:hover {
    background-color: var(--pagination-active);
    border-color: var(--pagination-active);
}

/* [요청사항 2.1] 흰색 아이콘 스타일 */
.btn-download svg {
    width: 1.6rem;
    height: 1.6rem;
    fill: var(--white);       /* 아이콘 색상 흰색 */
    margin-right: 0.8rem;     /* 텍스트와의 간격 */
    flex-shrink: 0;
}

/* ===== 모달 공통 ===== */
.modal {position: fixed;inset: 0;display: none;align-items: center;justify-content: center;z-index: 9999;font-family: system-ui, sans-serif;}

/* 오버레이 배경 */
.modal-backdrop {position: absolute;inset: 0;background: rgba(0,0,0,0.7);backdrop-filter: blur(2px);}

/* 모달 박스 */
.modal-dialog {position: relative;background: var(--white);border-radius: 3rem;max-width: 48rem;width: 90%;z-index: 1;display: flex;flex-direction: column;padding: 3rem 3rem;animation: modal-pop 0.25s ease;}

/* 헤더 */
.modal-header {display: flex;align-items: center;justify-content: flex-end;margin-bottom: 2rem;}

/* 닫기 버튼 (X) */
.modal-close {background-image: url("../images/icons/icon-close.svg");width: 3rem;height: 3rem;appearance: none;border: none;line-height: 1;cursor: pointer;color: #374151;transition: color 0.15s;}

/* 본문 */
.modal-body {color: var(--black);font-family: Pretendard, sans-serif;font-size: 1.8rem;font-style: normal;font-weight: 400;line-height: 1.38;min-height: 15rem;margin-bottom: 3rem;letter-spacing: -0.02em;}

/* 푸터 */
.modal-footer {display: flex;justify-content: center;}
.button {width: 12rem;height: 5.2rem;flex-shrink: 0;border-radius: .5rem;background: #4761DE;color: var(--white);text-align: center;font-family: Pretendard,sans-serif;font-size: 1.8rem;font-style: normal;font-weight: 700;line-height: normal;}

/* 팝업 애니메이션 */
@keyframes modal-pop {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* 모달 보이기 상태 */
.modal.show {display: flex;}


.graph-frame{width:100%;height:100%;overflow: hidden;}
.graph-frame img{width: 100%;height: 100%;object-fit: contain;}

/* 반응형 */
@media screen and (max-width: 1344px) {
    html {
        font-size: 7px;
    }
}

/* 변침점 강조 스타일 - 등급별 색상 */
.waypoint-item.highlighted {
    position: relative;
    z-index: 10;
    transform: scale(1.02);
    transition: transform 0.3s ease;
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin: -0.5rem;
}

/* 심각 등급 강조 */
.waypoint-item.highlighted.serious {
    border: 2px solid #db5a48;
    box-shadow: 0 0 10px rgba(219, 90, 72, 0.3);
}

/* 위험 등급 강조 */
.waypoint-item.highlighted.dangers {
    border: 2px solid #f49746;
    box-shadow: 0 0 10px rgba(244, 151, 70, 0.3);
}

/* 보통 등급 강조 */
.waypoint-item.highlighted.usual {
    border: 2px solid #fcc41b;
    box-shadow: 0 0 10px rgba(252, 196, 27, 0.3);
}

/* 안전 등급 강조 */
.waypoint-item.highlighted.safe {
    border: 2px solid #58ac52;
    box-shadow: 0 0 10px rgba(88, 172, 82, 0.3);
}

/* 반응형 */
@media screen and (min-aspect-ratio: 17/9) {
    .table-wrapper table th {height: 6rem;}
    .table-wrapper table td {height: 5.6rem;}
}

/* 파일 업로드 모달 */
.schedule-modal {position: fixed;inset: 0;display: none;align-items: center;justify-content: center;z-index: 9999;font-family: system-ui, sans-serif;}
.schedule-modal.show {display: flex;}

/* 오버레이 배경 */
.schedule-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(2px);
    display: block; /* 이 부분이 핵심입니다. */
    z-index: 0;     /* 모달창보다 뒤에 위치 */
}

/* 모달 박스 */
.schedule-modal-dialog {
    position: relative;
    background: var(--white);
    border-radius: 3rem;
    max-width: 48rem;
    width: 90%;
    z-index: 10;    /* 배경보다 앞에 위치 */
    display: flex;
    flex-direction: column;
    padding: 3rem 3rem;
    animation: modal-pop 0.25s ease;
}

/* 헤더 */
.schedule-modal-header {display: flex;align-items: center;justify-content: flex-end;margin-bottom: 2rem;}
.schedule-modal-title {
    flex-grow: 1;
    text-align: left;
    color: var(--black);
    font-family: Pretendard, sans-serif;
    font-size: 2.4rem; /* 제목 크기 키움 */
    font-weight: 700;
    line-height: normal;
}

/* 닫기 버튼 (X) */
.schedule-modal-close {background-image: url("../images/icons/icon-close.svg");width: 3rem;height: 3rem;appearance: none;border: none;line-height: 1;cursor: pointer;color: #374151;transition: color 0.15s;}

.schedule-modal-body {
    color: var(--black);
    font-family: Pretendard, sans-serif;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.38;
    min-height: 15rem;
    margin-bottom: 3rem;
    letter-spacing: -0.02em;
    text-align: left; /* 텍스트 중앙 정렬 */
}

.schedule-modal-body .file-upload-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    border: 1px dashed var(--border); /* 점선 테두리 */
    border-radius: 0.5rem;
    background-color: #fafafa;
    text-align: center;
}

.schedule-modal-body .file-upload-group label {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 0.5rem;
}

.schedule-modal-body .file-upload-group input[type="file"] {
    font-size: 1.4rem;
    padding: 0.5rem;
    margin: 0;
}

.schedule-modal-body .description {
    font-size: 1.4rem;
    color: var(--gray);
    line-height: 1.5;
}

.schedule-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1.2rem;
    padding-top: 2rem; /* 푸터 위 여백 */
    border-top: 1px solid #e9ecef; /* 구분선 */
}

/* 모달 내부 버튼 공통 스타일 */
.schedule-modal-footer button {
    height: 4.4rem; /* 버튼 높이 통일 */
    padding: 0 2.4rem; /* 좌우 패딩 조절 */
    border-radius: .5rem;
    font-family: Pretendard, sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 취소 버튼 */
.schedule-modal-footer .btn-cancel {
    background-color: var(--white);
    color: var(--gray);
    border: 1px solid var(--border);
}
.schedule-modal-footer .btn-cancel:hover {
    background-color: #f8f9fa;
}

/* 적용 버튼 */
.schedule-modal-footer .btn-apply {
    background-color: #4761DE; /* 이미지와 동일한 파란색 */
    color: var(--white);
    border: 1px solid #4761DE;
}
.schedule-modal-footer .btn-apply:hover {
    background-color: #364bb2;
    border-color: #364bb2;
}

/* 다운로드 버튼 비활성화 스타일 (딜레이 중일 때) */
.schedule-modal-footer .button:disabled {
    background-color: var(--gray);
    cursor: not-allowed;
    opacity: 0.7;
}

.login-wrapper {
    width: 44rem; /* 카드 너비 */
    background: var(--white);
    border-radius: 0.6rem;
    padding: 5rem 4rem 6rem; /* 상, 좌우, 하 여백 조정 */
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.05); /* 은은한 그림자 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 타이틀 영역 */
.login-title-group {
    text-align: center;
    margin-bottom: 2rem;
}
.login-title-group h1 {
    color: var(--black);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.login-title-group p {
    color: var(--gray);
    font-size: 1.6rem;
    font-weight: 400;
}

/* 입력 폼 영역 */
.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 1.2rem;
}

/* 인풋 박스 스타일 */
.login-input-group {
    position: relative;
    width: 100%;
    height: 5.2rem;
}

.login-input-group input {
    width: 100%;
    height: 100%;
    border: 1px solid var(--border); /* #E2E5EC */
    border-radius: 0.4rem;
    padding: 0 1.6rem 0 4.8rem; /* 아이콘 공간 확보 */
    font-size: 1.6rem;
    color: var(--black);
    font-family: Pretendard, sans-serif;
    outline: none;
    transition: border-color 0.2s;
}

.login-input-group input:focus {
    border-color: var(--menu-active-font); /* 포커스 시 파란색 */
}

.login-input-group input::placeholder {
    color: var(--gray2);
}

/* 인풋 아이콘 */
.login-input-icon {
    position: absolute;
    top: 50%;
    left: 1.6rem;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-input-icon svg {
    width: 100%;
    height: 100%;
    stroke: #8E8E90; /* 아이콘 색상 (회색) */
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 인풋 포커스 시 아이콘 색상 변경 (선택사항) */
.login-input-group input:focus + .input-icon svg {
    stroke: var(--menu-active-font);
}

/* 로그인 버튼 */
.btn-login {
    margin-top: 0.8rem;
    width: 100%;
    height: 5.2rem;
    background-color: #2F56A8; /* 이미지의 진한 파란색 (ui.css의 active보다 약간 진해 보임, 조정 가능) */
    background-color: var(--menu-active-font); /* ui.css의 파란색 사용 시 */
    color: var(--white);
    font-size: 1.8rem;
    font-weight: 700;
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
    font-family: Pretendard, sans-serif;
    transition: background-color 0.2s;
}
.btn-login:hover {
    opacity: 0.9;
}

/* 하단 링크 (찾기 / 회원가입) */
.login-links {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    column-gap: 1rem;
}
.login-links a {
    color: var(--gray); /* #707378 */
    font-size: 1.5rem;
    text-decoration: none;
    font-weight: 400;
}
.login-links .divider {
    width: 1px;
    height: 1.2rem;
    background-color: var(--border-light);
    display: inline-block;
}

.logout-wrap {
    margin-top: auto;
    padding: 0 1.5rem 1.5rem 1.5rem;
}