@font-face {
    font-family: "Pretendard";
    src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff")
        format("woff");
    font-weight: 200;
}
@font-face {
    font-family: "Pretendard";
    src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff")
        format("woff");
    font-weight: 300;
}
@font-face {
    font-family: "Pretendard";
    src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
        format("woff");
    font-weight: 400;
}
@font-face {
    font-family: "Pretendard";
    src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff")
        format("woff");
    font-weight: 500;
}
@font-face {
    font-family: "Pretendard";
    src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff")
        format("woff");
    font-weight: 600;
}
@font-face {
    font-family: "Pretendard";
    src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff")
        format("woff");
    font-weight: 700;
}

html, body {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* 사이즈 */
.w100 {
    width: 100%;
}

/* 폰트 사이즈 */
.fsize12 {
    font-size: 12px !important;
}
.fsize14 {
    font-size: 14px !important;
}
.fsize16 {
    font-size: 16px !important;
}

/* 한줄내 위로 붙이기 아래로 붙이기 정렬 */
.fl-bottom-box {
    display: flex;
    justify-content: space-between;
    align-items: end;

    width: 100%;
}

.fl-top-box {
    display: flex;
    justify-content: space-between;
    align-items: start;

    width: 100%;
}

/* flex 요소 사이 간격 */
.gap-8 {
    gap: 8px;
}

/* 스크롤 커스텀 */
.scrollbox {
    overflow-y: auto;
    -ms-overflow-style: scrollbar;
    padding-right: 3px;
}

.scrollbox::-webkit-scrollbar {
    width: 3px;
}

.scrollbox::-webkit-scrollbar-track {
    background-color: transparent;
}

.scrollbox::-webkit-scrollbar-thumb {
    background-color: #0089ce;
    cursor: pointer;
}

/* css reset */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Pretendard";
    color: #000;
    
    transition: all ease-in-out 500ms;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
}

ul,
li {
    list-style: none;
}

svg,
img {
    width: 10px;
}

a {
    display: inline-block;
    text-decoration: none;
    color: #000;
}

a:link,
a:visited,
a:hover,
a:active,
a:focus {
    text-decoration: none;
    color: #0a1615;
}

img {
    max-width: 100%;
}

img.objectfit {
    object-fit: cover;
}

button {
    background-color: #fff;
    outline: none;
    border: none;
    color: #000;
}

input {
    border: none;
    outline: none;
    background-color: #fff;
    transition: all 100ms ease;
}

input:-webkit-autofill {
    background-color: #fff !important;
}

/* 버튼요소 스타일링 :: S */
/* 버튼요소 공통 */
.btn {
    flex-shrink: 0;
    cursor: pointer;
}

/* 상단 홈 버튼 */
.topbtn button.btn--icon img {
    width: 20px;
    height: 27px;
}

/* 텍스트버튼 */
.btn--primary {
    display: inline-block;
    background-color: #43b8a2;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    border-radius: 8px;

    padding: 0 20px;
    height: 46px;

    cursor: pointer;
}

/* 드롭다운 버튼 */
.btn--select {
    appearance: none;
    outline: none;

    background-image: url(../../images/2025/icons/select_arrow.svg);
    background-repeat: no-repeat;
    background-position: right 7px top 11px;
    background-size: 18px 10px;
    background-color: #fff;
    border: 1px solid #999999;
    border-radius: 10px;

    font-size: 14px;
    font-weight: 400;

    padding-right: 30px;
    padding-left: 8px;

    width: 100%;
    height: 33px;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-shrink: 1;
}

/* 보더없는 버튼 공통 */
.btn_common {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 10px 9.5px;
    background-color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #000;
    white-space: nowrap;
}

.btn--icon {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;

    padding: 10px 9.5px;
    background-color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #000;
    white-space: nowrap;

    cursor: pointer;
}

/* 침수단계 위험/경계 시 danger */
.btn--icon.btn--icon--danger {
    display: none;
    background-color: red;
    color: #fff;
}

.btn--icon.btn--icon--danger.on {
    display: flex;
}

.btn--icon img {
    width: 13px;
}

.btn--icon--bordered {
    border: 1px solid #eeeeee;
    width: 36px;
    height: 36px;
}

.btn--icon--bordered img {
    width: 16px;
    height: 24px;
}

.btn--icon--borered-scale {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;

    border: 1px solid #eeeeee;
    border-radius: 10px;

    width: 36px;
    height: 72px;
    overflow: hidden;
}

.btn--icon--borered-scale button {
    flex: 1;
    width: 100%;
    background-color: #fff;
}

.btn--icon--borered-scale hr {
    border-top: 1px solid #eeeeee;
    border-bottom: none;
}

.btn--zoom-in,
.btn--zoom-out {
    position: relative;
    width: 100%;
    height: 50%;
    cursor: pointer;
}

.btn--zoom-in::before,
.btn--zoom-in::after,
.btn--zoom-out::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 13px;
    height: 2px;
    border-radius: 8px;
    background-color: #999999;
}

.btn--zoom-in::after {
    width: 2px;
    height: 13px;
}

/* 보더있는 버튼 */
.btn_common_b {
    padding: 10px;
    background-color: #fff;
    border: 1px solid #eeeeee;
    border-radius: 10px;
}

/* 버튼요소 스타일링 :: E */



/* 토글 스위치 디자인 :: S */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    background-color: #f2f3f5;
    color: #000;
    font-size: 14px;
    padding: 8px 10px;
    border-radius: 10px;

    position: relative;
    cursor: pointer;
    user-select: none;
    gap: 8px;
    height: 33px;
}

.toggle-switch input {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 32px;
    height: 21px;
    background-color: #6d7882;
    border-radius: 10px;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    padding: 2px;
    box-sizing: border-box;
}

.toggle-slider .circle {
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: white;
    border-radius: 50%;
    font-size: 12px;
    color: #808b9a;

    width: 15px;
    height: 15px;

    transition: all 0.3s;
}

.toggle-slider .circle .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 98%;
    height: 98%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #0089ce;
}

.toggle-switch input:checked + .toggle-slider .circle {
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
}

.toggle-switch input:not(:checked) + .toggle-slider .icon-x {
    opacity: 1;
}

.toggle-switch input:checked + .toggle-slider .icon-check {
    opacity: 1;
}
/* 토글 스위치 디자인 :: E */



/* 체크박스 스타일링 :: S */
.checkinput-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-weight: 400;
}

.checkinput-box label {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 14px;

    width: 100%;
    height: 100%;

    cursor: pointer;
}

.checkinput-box input[type="checkbox"] {
    /* 기본 체크박스 숨기기 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    position: relative;
    display: block;

    width: 18px;
    height: 18px;
    border: 1px solid #58616a;
    border-radius: 5px;

    cursor: pointer;
    background-color: #fff;
    outline: none;
}

.checkinput-box label > p {
    flex: 1;
    text-align: end;
}

/* 체크되었을 때 디자인 */
.checkinput-box input[type="checkbox"]:checked {
    background-color: #256ef4;
    border-color: #256ef4;
}

/* 체크 표시 */
.checkinput-box input[type="checkbox"]:checked::after {
    content: "";
    background-image: url(../../images/2025/icons/check_on.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    width: 75%;
    height: 70%;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* 체크박스 스타일링 :: S */


/* 레이아웃 */
.global-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.main-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.main-wrapper > * {
    pointer-events: auto;
}

#cesiumContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* 지도는 가장 아래 */
}

/* 검색창 */
.info_list {
    position: absolute;
    top: 16px;
    left: 0;
    z-index: 1;

    display: flex;
    flex-direction: column;
    gap: 16px;

    width: 100%;
    pointer-events: none;
}

.info_list .info_list_wrap,
.info_list .rainfall_wrap,
.info_list .mapinfo_list > * {
    pointer-events: auto !important;
}

.search_wrap {
    position: relative;
    padding: 0 16px;
}

.search_box {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid #b4b8c1;
    margin-left: 0;
    width: 100%;
    height: 48px;
    overflow: hidden;
}

.search_box button {
    flex-shrink: 0;
    height: 100%;
    padding: 0 12px;
}

.search_box button > img {
    width: 18px;
    height: 18px;
}

.search_box button.logo > img {
    width: 18px;
    height: 20px;
}

.search_content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    height: 100%;
}

.search_box input {
    flex: 1;
    font-size: 13px;
    color: #000;
    background-color: #fff !important;
    height: 100%;
}

/* 검색어 리스트 출력 :: S */
.search_list {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;

    display: none;

    padding: 5px;
    margin-top: 10px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid rgba(153, 153, 153, 0.205);
    overflow: auto;
    box-sizing: border-box;

    width: calc(100% - 32px);
    max-height: 350px;
}
.search_list::-webkit-scrollbar {
    background-color: #333;
    width: 3px;
}
.search_list::-webkit-scrollbar-thumb {
    background-color: rgb(170, 170, 170);
}
.search_list div {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #999;
    padding-top: 10px;
    padding-bottom: 10px;
}

.search_list div p {
    color: #5e5e5e;
    margin-left: 10px;
}

.search_list div p:first-child {
    flex-shrink: 0;
}

.search_list div > p:last-child {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

.searchlistcontent {
    cursor: pointer;
}

.searchListClose {
    width: 5%;
    /* margin-right: 0; */
    text-align: center;
}

.searchListClose_btn {
    width: 16px;
    fill: #999999;
    cursor: pointer;
    margin-top: 10px;
}

.listColor {
    color: #4557ff !important;
    background-color: #f1f3ff;
    font-weight: bold;
}
/* 기능 검색어 출력  :: E */

/* 검색창 밑부분 상단 버튼요소들 */
#button_wrap {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 8px;

    padding: 0 16px;
    margin-top: 16px;
    overflow: auto;

    width: 100%;
}

#button_wrap::-webkit-scrollbar {
    display: none;
}


/* 중앙 강수량 셀렉트박스 :: S */
.rainfall_wrap {
    display: flex;
    align-items: center;
    margin: 0 auto;

    background-color: #fff;
    border-radius: 10px;
    font-size: 10px;
    text-align: center;

    width: 60%;
    height: 36px;

    overflow: hidden;
}

.rainfall_wrap p {
    font-size: 14px;
    width: 50%;
}

.rainfall_wrap select {
    border: none;
    color: #fff;
    font-size: 14px;
    text-align: center;
    outline: none;
    background: url(../../images/2025/icons/select_arrow_white.svg) no-repeat 90% 55%;
    background-size: 11px;
    background-color: #0089CE;
    appearance: none;
    -webkit-appearance: none;
    width: 50%;
    height: 100%;
    padding-left: 12px;
    padding-right: 20px;
}
/* 중앙 강수량 셀렉트박스 :: E */



/* 침수예상/침수흔적/예측정보 :: S*/
.mapinfo_list {
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
}

/* 침수예상/흔적 컬러 */
.btn--icon--legendList {
    display: flex;
    flex-direction: column;
    gap: 8px;
    

    width: fit-content;
    height: fit-content;
    max-width: 41px;
}


.btn--icon--legendItem {
    display: flex;
    flex-direction: column;
    gap: 0;

    background-color: #fff;
    border-radius: 4px;
    padding: 2px;

    flex-shrink: 0;
    max-width: 41px;
}

.btn--icon--legendItem > div {
    flex: 1;
    width: 100%;
}

.btn--icon--legendItem > p {
    font-weight: 800;
}

.btn--icon--legendItem p {
    text-align: center;
    font-size: 9px;
    white-space: nowrap;
}

.LegendListcolor {
    width: 100%;
    margin-top: 5px;
}

.LegendListcolor div {
    width: 100%;
}

.LegendListcolor div p {
    font-size: 7px;
    margin-left: 0;
    color: #000;
    font-weight: 600;
    line-height: 16px;
    width: 100%;
    /* 범례 늘어났을 때 스크롤 */
    /* margin-right: 10px; */
}
.LegendListcolor {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 2px;
}

#LegendColor_3 p {
    color: #000;
}

/* 침수흔적 컬러 */
.LegendListcolor .map_box1 {
    background-color: rgb(255, 255, 127);
    text-align: start;
}

.LegendListcolor .map_box2 {
    background-color: rgb(201, 237, 95);
}

.LegendListcolor .map_box3 {
    background-color: rgb(127, 255, 191);
}

.LegendListcolor .map_box4 {
    background-color: rgb(127, 200, 200);
}

.LegendListcolor .map_box5 {
    background-color: rgb(127, 200, 255);
}

.LegendListcolor .map_box6 {
    background-color: rgb(127, 127, 255);
}

/* 침수예상 컬러 */
.LegendListcolor .senario_box1 {
    background-color: #FFFF7F;
    text-align: start;
}

.LegendListcolor .senario_box2 {
    background-color: #BFFF00;
}

.LegendListcolor .senario_box3 {
    background-color: #00FFFF;
}

.LegendListcolor .senario_box4 {
    background-color: #BF7FFF;
}

.LegendListcolor .senario_box5 {
    background-color: #FF007F;
}

.LegendListcolor .senario_box6 {
    background-color: #342121;
}

.forecast-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    padding: 4px 6px;

    font-size: 10px;
    border: none;
    border-radius: 10px;
    background-color: #fff;


    width: 100px;
    height: 60px;
}

.forecast-info .range-list {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    
    width: 100%;
    height: 16px;
}

.range-list > .range-item {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.2;

    width: calc(100% / 4);
}

.range-list > .range-item > p {
    display: none;
    color: #fff;
    font-size: 10px;
}

.range-item.active {
    opacity: 1;
}

.range-list > .range-item.active > p {
    display: block;
}

.range-item.danger {
    background: #f14c51;
}

.range-item.caution {
    background: #fdbe47;
}

.range-item.watch {
    background: #4c75c4;
}

.range-item.safe {
    background: #77cc62;
}

.range-txt-box .txt {
    letter-spacing: -0.5px;
}
/* 침수예상/침수흔적/예측정보 :: E */



/* 팝업 모달 :: S  - on 클래스로 오버레이 및 모달 관리 */
/* 전체 영역 */
.modal-wrapper {
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;

    display: none;
    justify-content: center;
    align-items: center;

    padding: 0 16px;

    width: 100%;
    height: 100%;
}

/* 흰색 팝업컨텐츠박스 부분 */
.modal-container {
    display: none;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;

    width: 100%;
    max-height: calc(100% - 88px);
    overflow: hidden;
}

/* 모달 show */
.modal-wrapper.on {
    display: flex;
}

/* 오버레이 */
.modal-wrapper.on .overlay {
    position: absolute;
    z-index: 11;

    background-color: rgba(0, 0, 0, 0.6);

    width: 100%;
    height: 100%;
}

.modal-wrapper.on > .modal-container.on {
    position: absolute;
    z-index: 12;

    width: calc(100% - 32px);

    display: flex;
    flex-direction: column;
}

.modal-container .modal-content {
    overflow: auto;
}

.modal-container .modal-content > hr:first-child {
    margin-top: 0;
}

/* 모달내 기본 레이아웃 */
.modal-container .title * {
    margin: 0;
}

.modal-container .title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 16px;
}

.modal-container .title p {
    font-size: 16px;
    font-weight: 800;
}

/* 모달 닫기 버튼 */
.modal-wrapper .btn_close {
    position: relative;
    outline: none;
    border: none;
    background-color: transparent;
    cursor: pointer;

    width: 20px;
    height: 20px;
}

.modal-wrapper .btn_close:before,
.modal-wrapper .btn_close:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    height: 100%;
    width: 2px;
    background-color: #0089ce;

    transform: translate(-50%, -50%);
}

.modal-wrapper .btn_close:before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.modal-wrapper .btn_close:after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-container hr {
    margin: 16px 0;
    border: none;
    border-top: 1px solid #999999;
}

/* 여기서부터는 모달 주제별 개별 스타일링  -- */
.modal-container--notice {
    height: 180px;
}

.modal-conntent--notice p {
    font-size: 14px;
    line-height: 20px;
}

/* 토글 스위치 버튼 input [checkbox] */
.toggle-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 8px;
}

.toggle-box.first {
    margin-bottom: 8px;
}

.select-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 침수 예측정보 모달*/
.modal-container--forecast-info em {
    display: block;
    font-style: normal;
    text-align: center;
    margin-bottom: 8px;
}

.semi-pie {
    position: relative;
    overflow: hidden;
    margin: 0 auto;

    width: 100%;
    max-width: 300px;
    aspect-ratio: 2 / 1;
}

.segment {
    position: absolute;
    width: 100%;
    height: 200%;
    border-radius: 50%;
    clip-path: polygon(50% 50%, 100% 50%, 100% 100%);
    transform-origin: center center;
    opacity: 0.3;
}

.segment.active {
    opacity: 1;
}

.segment.danger {
    background: #f14c51;
    transform: rotate(180deg);
}

.segment.caution {
    background: #fdbe47;
    transform: rotate(225deg);
}

.segment.watch {
    background: #4c75c4;
    transform: rotate(270deg);
}

.segment.safe {
    background: #77cc62;
    transform: rotate(315deg);
}

/* .range-txt-box p {
    position: absolute;
    z-index: 1;

    color: #fff;

    width: fit-content;
    height: fit-content;
}

.range-txt-box p.danger {
    top: 66%;
    left: 7%;
}

.range-txt-box p.caution {
    top: 17%;
    right: 62%;
}

.range-txt-box p.watch {
    top: 17%;
    left: 62%;
}

.range-txt-box p.safe {
    top: 66%;
    right: 7%;
}

.pie-txt-box {
    position: absolute;
    top: 49px;
    left: 50%;
    transform: translateX(-50%);

    background-color: #f2f3f5;
    border-radius: 50%;

    width: calc(100% - 100px);
    aspect-ratio: 1;
}

.pie-txt-box .txt {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-top: 34px;

    font-size: 14px;
    font-weight: 500;

    white-space: nowrap;
    text-align: center;

    width: 100%;
    height: fit-content;
}

.pie-txt-box .txt > strong {
    font-size: 18px;
} */

/* 대피요령 모달 */

.modal-container--evacuation-info .under-flood-content,
.modal-container--evacuation-info .vehicle-flood-content {
    display: none;
    grid-template-rows: auto;
    margin-top: 16px;
}

.modal-container--evacuation-info .under-flood-content.on,
.modal-container--evacuation-info .vehicle-flood-content.on {
    display: grid;
}

.modal-container--evacuation-info img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-text--close {
    border: 1px solid #999999;
    border-radius: 8px;
    background-color: #fff;
    font-size: 16px;
    cursor: pointer;

    width: 100%;
    height: 46px;
}

/* 팝업 모달 :: E  - on 클래스로 오버레이 및 모달 관리 */


/* 사이드바 leftPanel 오버레이 :: S */
#leftpanelClose {
    display: none;

    width: 100%;
    height: 100%;

    pointer-events: none;

    transition: display ease-in-out 250ms;
}

#leftpanelClose::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;

    width: 100%;
    height: 100%;

    opacity: 0.4;
    background-color: #000;
}

.leftPanel .float-box {
    position: absolute;
    top: 0;
    left: 100%;
}

.leftPanel button.btn_close {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 0 8px 8px 0;
    background-color: #fff;
    z-index: 10;
}

.leftPanel button.btn_close:before,
.leftPanel button.btn_close:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    height: 46%;
    width: 2px;
    background-color: #0089ce;

    transform: translate(-50%, -50%);
}

.leftPanel button.btn_close:before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.leftPanel button.btn_close:after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* 사이드바 leftPanel 오버레이 :: E */




/* 하단 */
/* 지도 위 현재위치 커서 */
.map-control-panel {
    position: absolute;
    /* bottom: 32px; */
    bottom: 16px;
    left: 0;

    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 8px;
    /* 전체 터치 비활성화 */
    pointer-events: none;
    z-index: 5;

    width: 100%;
    padding: 0 16px;
}

.map-control-panel button,
.map-control-panel .topik,
.map-control-panel .map-change-toggle {
     /* 클릭 가능한 영역만 예외 허용 */
    pointer-events: auto;
    margin-right: 0;
}

.map-control-panel > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 4px;
    height: fit-content;
}

.map-change-toggle,
.toggle--common {
    display: none;
    background-color: #f2f3f5;
    border-radius: 10px;
    padding: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    height: 36px;
    cursor: pointer;
}

.map-change-toggle.on,
.toggle--common.on {
    display: inline-flex;
}

.map-change-toggle input[type="radio"],
.toggle--common input[type="radio"] {
    display: none;
}

.map-change-toggle label,
.toggle--common label {
    display: flex;
    align-items: center;
    padding: 3px 10px;
    font-weight: 400;
    border-radius: 7px;
    color: #747474;
    background-color: transparent;
    cursor: pointer;

    height: 32px;

    transition: all 0.2s ease;
}

.map-change-toggle input[type="radio"]:checked + label,
.toggle--common input[type="radio"]:checked + label {
    background-color: #fff;
    color: #000;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* 축적 */
.scalebarpopup {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.7);

    padding: 2px 8px;
    width: 110px;
    border-radius: 10px;
}

.scalebarpopup > p {
    font-size: 10px;
    margin-right: 5px;
}

.scalebarinner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.scalebarinner p {
    text-align: center;
    font-size: 10px;
}

.scalebarinner > div {
    position: relative;
    height: 2px;
    width: 68px;
    margin-left: 4px;
    margin-top: 6px;
    background: #000;
}

.scalebarinner > div::before,
.scalebarinner > div::after {
    position: absolute;
    content: "";
    bottom: 0;
    width: 2px;
    height: 8px;
    background-color: #000;
}

.scalebarinner > div::before {
    left: 0;
}

.scalebarinner > div::after {
    right: 0;
}


/* 하단 추천경로 버튼 :: S */
.map-control-panel .topik {
    overflow: auto;
    width: 100%;
}

.map-control-panel .topik::-webkit-scrollbar {
    display: none;
}

.arrivalslide > div {
    overflow: auto;
}

.arrivalbtn {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
}

.arrivalslide > div::-webkit-scrollbar {
    display: none;
}

.arrival-button.active {
    border: 2px solid #0d57a7;
}

.arrivalbtn button {
    background-color: #fff;
    color: #000;
    border: 1px solid #999999;
    border-radius: 10px;
    white-space: nowrap;

    margin-right: 10px;
    padding: 6px 10px;

    height: 55px;
    width: calc(100% / 3);
    min-width: calc(50% - 5px);
    cursor: pointer;
}

.arrivalbtn button em {
    font-style: normal;
    font-size: 15px;
    font-weight: 600;
    margin-top: 5px;
    margin-left: 0;
}

.arrivalbtn button b {
    font-size: 14px;
    font-weight: 500;

    margin: 0;
}

.arrivalbtn button p {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 12px;
    line-height: 12px;
    border-bottom: 1px solid #999999;

    margin-left: 0;
    padding-bottom: 4px;

    min-width: 140px;
    width: 100%;
}

.arrivalbtn button p span {
    font-size: 16px;
}

.arrivalbtn button p span:nth-child(1) {
    font-size: 12px;
    font-weight: 700;
    color: #3e8b2a;

    margin-left: 0;
}

.arrivalbtn button.active p span:nth-child(1) {
    color: #0d57a7;
}

.arrivalbtn button > span {
    display: block;

    text-align: start;
    font-size: 14px;
    line-height: 14px;
    font-weight: 500;

    padding-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 하단 추천경로 버튼 :: E */



/* 우회 경로 팝업 :: S */
.change_popup {
    display: block;
    position: absolute;
    top: auto;
    bottom: -40%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;

    padding: 12px;

    background-color: #fff;
    border-radius: 12px 12px 0 0;
    box-sizing: border-box;

    width: calc(100% - 32px);
    height: 40%;

    transition: bottom 250ms ease-in-out;
}

.change_popup .changepopup_title {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.changepopup_title p {
    font-weight: 800;
    width: 100%;
}

.change_popup .changepopup_title .x_close {
    width: 24px;
    margin-right: 0;
    cursor: pointer;
    fill: #999;
    padding: 5px;
}

.changepopup_text {
    width: 100%;
    height: calc(100% - 83px);
    overflow: auto;
    padding: 0;
}

.changepopup_text > p {
    color: #333;
    padding: 12px 0;
}

.ExceptPath_List {
    display: flex;
    align-items: center;
    padding: 5px;
    padding-left: 10px;
    border-bottom: 1px solid #ebebeb;
}

.ExceptPath_List p {
    font-size: 14px;
    font-weight: 500;
    margin-left: 0;
    color: #333;
}

.ExceptPath_List svg {
    width: 24px;
    fill: #999;
    cursor: pointer;
    padding: 5px;
    margin-right: 0;
    margin-left: auto;
    flex-shrink: 0;
}

.ExceptPath_List span {
    margin-left: 0;
    margin-right: 10px;
}

.ExceptPath_List span i {
    font-size: 24px;
}

/* 우회 경로 팝업 :: E */



/* 사이드바 / 도착 경로상세 / 서비스정보제공/ 좌측 패널 :: S */
.arrivalWrap, .serviceInfoWrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -100%;
    display: flex;
    margin-left: 0;
    width: 80%;
    height: calc(100% - 32px);
    z-index: 10;
    transition: left 350ms ease-in-out;
}

.arrivalWrap > div,
.serviceInfoWrap > div {
    position: relative;
    
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    margin-left: 0;
}

#route_area > div {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 52px;
    border-top: 1px solid #ededef;
}

#route_area > div:last-child {
    border-bottom: 1px solid #ededef;
}

.arrivalmain {
    padding: 16px;
    margin: 0;
    background-color: #fff;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;

    width: 100%;
    height: 104px;
}

.arrivalinfo {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 3px;
    padding: 16px;
    border-top: 1px solid #999999;
    border-bottom: 8px solid #f2f3f5;
    width: 100%;
    height: fit-content;
}

.arrivalinfo p {
    font-size: 16px;
    font-weight: 400;
}

.arrivalinfo strong {
    font-weight: 500;
}

.arrivalinfo p:nth-child(2) {
    color: #606067;
}

.tag-box {
    margin-top: 14px;
}

.tag-box span {
    display: inline-flex;
    background-color: #f2f3f5;
    border: 1px solid #ededef;
    padding: 4px 10px;
    border-radius: 10px;
    line-height: normal;
    font-size: 12px;
    margin-right: 4px;
}

.arrivalNav {
    position: sticky;
    top: 0;

    background-color: #fff;
    display: flex;
    align-items: center;
    border: none;
    height: 52px;
    padding: 0 16px;
}

.arrivalNav:last-child {
    bottom: 0;
}

.arrivalmain > div {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;

    border: 1px solid #ededef;
    border-radius: 10px;
    background-color: #f2f3f5;

    padding: 4px 10px;
    flex: 1;
}

.arrivalmain > div > img {
    width: 20px;
    height: 25px;
}

.arrivalmain p {
    text-overflow: ellipsis;
    white-space: nowrap;

    overflow: hidden;
    width: 100%;
}

.arrivalmain input {
    background-color: #fff;
    border-radius: 15px;
    border: none;
    outline: none;
    padding: 5px 10px;
    width: 90%;
    margin: 5px auto;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arrivalmain input::placeholder {
    color: #333;
    font-weight: bold;
    font-size: 14px;
}

.arrivaldistance {
    width: 35%;
    margin: 0;
}

div.arrivaldistance p {
    text-align: center;
    color: #333;
    font-size: 18px;
}

.arrivalInner {
    position: relative;
    overflow: auto;
    width: 100%;
    flex: 1;
}

.arrivalInner div p {
    font-size: 14px;
    /* font-weight: 600;
   color: #333; */
}

.arrivalInner div p {
    margin-left: 0;
}

.arrivalInner svg,
.arrivalInner img {
    width: 20px;
    height: 25px;
    margin-left: 0;
    margin-right: 10px;
}

/* 햄버거버튼누르면 나오는 서비스정보제공 사이드바 */
.serviceInfoWrap > div .title {
    display: flex;
    align-items: center;

    font-size: 8px;
    text-align: center;

    padding: 16px 24px;
    border-bottom: 1px solid #999;

    width: 100%;
}

.serviceInfoWrap > div .title strong {
    font-size: 18px;
}

.serviceInfoWrap > div .title img {
    margin-left: 8px;
    width: 30px;
    height: 26px;
}

.info-list {
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding: 8px 16px;
    
    border-bottom: 1px solid #ededef;
    width: 100%;
}

.info-list > .info-item {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 8px;

    border-bottom: 1px solid #ededef;;
    font-size: 13px;

    height: 48px;
    cursor: pointer;
}

.info-list > .info-item img {
    width: 13px;
    height: 14px;
}

.info-list > .info-item:first-child img {
    width: 14px;
    height: 18px;
}

.info-list > .info-item:last-child {
    border: none;
}

.serviceInfoWrap > div .link_lamilab {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 24px 16px;

    width: fit-content;
    cursor: pointer;
}

.serviceInfoWrap > div .link_lamilab img:first-child {
    width: 88px;
    height: 19px;
}

.serviceInfoWrap > div .link_lamilab img:last-child {
    width: 13px;
    height: 13px;
} 
/* 사이드바 / 도착 경로상세/ 서비스정보제공/ 좌측 패널 :: E */

/* 길게눌러 출발지설정 안내표시 스타일 */
#contextMenu {
    position: absolute;
    background: white;
    border: 1px solid #999;
    border-radius: 4px;
    padding: 8px 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    font-size: 14px;
    cursor: pointer;
    display: none; /* 처음에는 숨김 */
    z-index: 1000;
}

#contextMenu:hover {
    background: #f0f0f0;
}



/* 태블릿 ~ */
@media (min-width: 768px) {
    .modal-container {
        max-width: 550px;
    }

    .arrivalbtn button {
        min-width: auto;
    }

    .arrivalWrap {
        width: 50%;
    }
}

/* 데스크탑 ~ */
@media (min-width: 1280px) {
    .info_list,
    .map-control-panel {
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
    }

    .arrivalWrap {
        width: 30%;
    }

    .change_popup {
        width: 70%;
    }

    .modal-container--notice {
        height: 160px;
    }

    .rainfall_wrap {
        width: 28%;
    }
}