.popup-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 999;
    background: transparent;
    display: none;
    flex-direction: column;
}
.popup-modal.show{
    display: flex;
}
.popup-modal.hide{
    display: none;
}
.popup-modal > .background{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(5px);
    background: #00000050;
    z-index: 1000;
}
.popup-modal .popup{
    position: absolute;
    top: 50svh;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    min-height: fit-content;
    max-width: 95%;
    border-radius: 2rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    justify-content: start;
    background: #fff;
    z-index: 1001;
}
body.pc .popup-modal .popup{
    transform: translate(-50%, -50%);
}
body.mobile .popup-modal .popup,
body.tablet .popup-modal .popup{
    transform: translate(-50%, calc(-50svh + 20px));
}
.popup-modal .popup > .top{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    line-height: 30px;
    height: 30px;
    width: 100%;
}
.popup-modal .popup > .content{
    width: 100%;
}
.popup-modal .popup > .bottom{
    width: 100%;
}
.popup-modal .popup > .top .text.title{
    margin-left: 30px;
    font-weight: 600;
    color: #333;
    line-height: 30px;
    height: 30px;
    width: 100%;
    text-align: center;
    
}
.popup-modal .popup .top .btn-close{
    margin-left: auto;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 30px;
    color: #333;
}

.popup-modal.member-arrive .popup{
    
}
.popup-modal.member-arrive .popup .mem-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 2rem;
}
.popup-modal.member-arrive .popup .mem-info .mem-profile{
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #3d8ec1;
}
.popup-modal.member-arrive .popup .mem-info .mem-name{
    font-weight: 500;
}

.popup-modal.member-arrive .popup .text.msg{
    font-weight: 600;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: #333;
    margin-bottom: 1rem;
}


.popup-modal.weather-info .popup{
    width: 600px;
    max-width: 95%;
    min-height: calc(100svh - 5%);
    max-height: calc(100svh - 5%);
}

.popup-modal.weather-info .popup .content{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-height: 0;
    height: 100%;
    flex: 1;
}
.popup-modal.weather-info .popup .content *{
    letter-spacing: -1px;
}
.popup-modal.weather-info .popup .content .location-info{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    width: 100%;
}
.popup-modal.weather-info .popup .content .location-info .location-name{
    font-size: 20px;
    font-weight: 600;
    color: #333;
}
.popup-modal.weather-info .popup .content .weather-info-box{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
    flex: 1;
}
.popup-modal.weather-info .popup .content .weather-info-box::-webkit-scrollbar{
    display: none;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info{
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 1rem;

}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c1{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c1 .date{
    font-weight: 600;
    font-size: 14px;
    border-radius: 20px;
    border: 1px solid #aaa;
    height: 32px;
    width: fit-content;
    line-height: 30px;
    padding: 0 10px;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c1 .now-tmpr-box{
    display: flex;
    position: relative;
    width: 170px;
    height: 100px;
    
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c1 .now-tmpr-box .icon-weather{
    width: 100px;
    height: 100px;
    background-size: 100px 100px;
    position: absolute;
    top: 50%;
    left: -15px;
    transform: translateY(-50%);
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c1 .now-tmpr-box .tmpr-value{
    position: absolute;
    top: 50%;
    left: 45px;
    transform: translateY(-50%);
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 60px;
    font-weight: 800;
    letter-spacing: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c1 .wetrtxt-box{
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: start;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c1 .wetrtxt-box .wetrtxt-value{
    font-size: 20px;
    font-weight: 700;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c1 .wetrtxt-box .than-yesterday-tmpr-value{
    font-size: 14px;
    font-weight: 400;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c1 .min-max-tmpr-box{
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: start;
    gap: 0.2rem;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c1 .min-max-tmpr-box .min-tmpr-info,
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c1 .min-max-tmpr-box .max-tmpr-info{
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: center;
    gap: 0.3rem;
    line-height: 1.5rem;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c1 .min-max-tmpr-box .min-tmpr-info .label,
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c1 .min-max-tmpr-box .max-tmpr-info .label {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4rem;
  
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c1 .min-max-tmpr-box .min-tmpr-info .tmpr-value,
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c1 .min-max-tmpr-box .max-tmpr-info .tmpr-value {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5rem;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c1 .min-max-tmpr-box .min-tmpr-info .tmpr-value{
    color: #2a74f8;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c1 .min-max-tmpr-box .max-tmpr-info .tmpr-value{
    color: #dc0100;
}














.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c2{
    width: fit-content;
    min-width: fit-content;
    position: relative;
}
.popup-modal.weather-info .popup .content .weather-info-box .col.c2 .shadow-box{
    position: absolute;
    z-index: 2;
    width: 30px;
    height: 100%;
    display: none;
}
.popup-modal.weather-info .popup .content .weather-info-box .col.c2 .shadow-box.left{
    top: 0;
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%);
}
.popup-modal.weather-info .popup .content .weather-info-box .col.c2 .shadow-box.right{
    top: 0;
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 100%);
}

.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c2 .wrapper{
    min-width: fit-content;
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c2 .wrapper::-webkit-scrollbar{
    display: none;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c2 .info-item{
    width: 100px;
    min-width: 100px;
    height: 60px;
    background: #EAF3FF;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem;
    position: relative;
    z-index: 1;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c2 .info-item.sun{
    background: #FFF5E6;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c2 .info-item .row{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
 
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c2 .info-item .row .label{
    font-weight: 400;
    font-size: 14px;
    min-width: fit-content;


}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c2 .info-item .row .value{
    font-weight: 600;
    font-size: 16px;
    width: 100%;
    text-align: center; 
}

.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c2 .info-item.pm10-pm25 .row .value,
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c2 .info-item.sun .row .value{
    text-align: end; 
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    position: relative;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 100%;
    position: relative;
    z-index: 1;
    padding: 0 14px;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .shadow-box{
    position: absolute;
    z-index: 2;
    width: 30px;
    height: 100%;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .shadow-box.left{
    top: 0;
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%);
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .shadow-box.right{
    top: 0;
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 100%);
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list::-webkit-scrollbar{
    display: none;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item{
    padding: 0.2rem 0.6rem;
    border-right: 1px solid #eee;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item.head{
    border-right: 1px solid #eee;
    min-width: fit-content;
    padding: 0.2rem 0.6rem 0.2rem 0;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item > .row{
    min-width: 34px;
    min-height: 34px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item.head > .row{
    justify-content: start;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item.head > .row .label{
    font-size: 12px;
    font-weight: 600;
    text-align: start;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 0.2rem 0.4rem;

}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item > .row .label{
    font-size: 12px;
    font-weight: 600;
    text-align: start;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 0.2rem 0.4rem;

}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item.head > .row .unit{
    font-size: 12px;
    font-weight: 400;

}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item.head > .row.hour{
    justify-content: end;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item.head > .row.hour .label{
    border-radius: 10px;
    background: #333;
    color: #fff;
    font-weight: 600;

}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item > .row.hour .label.tomorrow{
    border-radius: 10px;
    background: #7a59f1;
    color: #fff;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item > .row.hour .label.day-after-tomorrow{
    border-radius: 10px;
    background: #45c1e0;
    color: #fff;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item > .row .value{
    font-weight: 600;
    font-size: 14px;
}

.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item > .row.hour .value{
    color: #333;
    font-weight: 600;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item > .row.hour .value.tomorrow{
    color: #7a59f1;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item > .row.hour .value.day-after-tomorrow{
    color: #45c1e0;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item > .row.tmpr .value{
    color: #333;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item > .row.rain-prob .value{
    color: #888
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item > .row.rain-amt .value{
    color: #407dd0;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item > .row.humd .value{
    color: #333;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item > .row.wind .value{
    color: #333;
}
.popup-modal.weather-info .popup .content .weather-info-box .today-weather-info-detail .today-weather-detail-list .today-weather-detail-item > .row.snow-amt .value{
    color: #888;
}

@media (max-width: 768px) {

    .popup-modal.weather-info .popup .content{
        gap: 1rem;
    }
    .popup-modal.weather-info .popup .content .weather-info-box .today-weather-info{
        flex-direction: column;
    }
    .popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c2{
        width: 100%;
        min-width: 100%;
    }
    .popup-modal.weather-info .popup .content .weather-info-box .col.c2 .shadow-box{
        display: block;
    }
    .popup-modal.weather-info .popup .content .weather-info-box .today-weather-info .col.c2 .wrapper{
        min-width: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 0.4rem;
        overflow-x: scroll;
        overflow-y: hidden;
        padding: 0 14px;
    }

}