/* //////////////////////////////////////자세히보기 모달 */
.more_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px));
    z-index: 9999;
    width: 535px;
}

.overlay {
    width: 100%;
    height: 100vh;
    background-color: var(--color-bg-black);
    position: fixed;
    top: 0;
    left: 0;
    opacity: var(--opacity-6);
    z-index: var(--z-index-4);
}

.more_modal .more_b{
    padding: 20px 0;
    background: var(--color-bg-inverse);
    border-radius: var(--border-radius-20);
    overflow-y: hidden;
}


/* //////////////////////////////////////자세히보기 모달 헤더*/
/* 타이틀 박스 */
.more_modal .more_b .more_top .more_head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 28px 5px 28px;
}

/* 타이틀 */
.more_modal .more_b .more_top .more_head .tit{
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-sb);
}

/* < 버튼 */
.more_modal .more_b .more_top .more_head .icon_prev{
    display: none;
}

/* 탭 전체*/
.more_modal .more_b .more_top .more_tab_wrap{
    padding: 0 28px;
    position: relative;
}

/* 탭 전체*/
.more_modal .more_b .more_top .more_tab_wrap::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-border-primary);
}

/*자세히보기 탭*/
.more_modal .more_b .more_top .more_tab_wrap .more_tab_in{
    text-align: center;
    overflow-x: scroll;
    -ms-overflow-style: none;
    white-space: nowrap;
    scroll-snap-type: none;
}

/* 탭 ul*/
.more_modal .more_b .more_top .more_tab_wrap .more_tab_in ul{
    position: relative;
    z-index: 1;
    display: flex;
    gap: 24px;
}

.more_tab_in::-webkit-scrollbar{ 
    display: none;
}

/* 탭 항목*/
.more_modal .more_b .more_top .more_tab_wrap .more_tab_in ul li{
    height: 40px;
    line-height: 40px;
    cursor: pointer;
}

/* 탭 선택*/
.more_modal .more_b .more_top .more_tab_wrap .more_tab_in ul li.tab_active{
    font-weight: var(--font-weight-m);
    border-bottom: var(--border-width-2) solid var(--color-border-brand);
}

/* //////////////////////////////////////자세히보기 모달 내용 */
.more_modal .more_b .tab_b .more_contents{
    overflow-y: auto;
    height: 489px;
}

.more_modal .more_b .tab_b>div:not(:first-child){
    display: none;
}

.tab_b .more_contents::-webkit-scrollbar {
    width: 6px;
    height: 100%
}

.tab_b .more_contents::-webkit-scrollbar-thumb {
    height: 30%;
    background: var(--color-bg-scrollthumb);
    border-radius: 10px
}

.tab_b .more_contents::-webkit-scrollbar-track {
    background: var(--color-bg-scrolltrack)
}

/* 내용 상단 */
.more_modal .more_b .tab_b .more_contents .level_by_year{
    padding: 32px 0 0 0;
}

/* 내용 상단 */
.more_modal .more_b .tab_b .more_contents .level_by_year .lev_b{
    margin: 0 28px;
}

/* 타이틀 박스 */
.more_modal .more_b .tab_b .more_contents .level_by_year .lev_b .lev_detail{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border: var(--border-width-1) solid var(--color-border-primary);
    border-radius: var(--border-radius-12);
}

/* 항목*/
.more_modal .more_b .tab_b .more_contents .level_by_year .lev_b .lev_detail .txt_b .item{
    padding: 0 0 4px 0;
    font-weight: var(--font-weight-m);
}

/* 수치*/
.more_modal .more_b .tab_b .more_contents .level_by_year .lev_b .lev_detail .txt_b .lev_unit{
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-sb);
}

/* 단위*/
.more_modal .more_b .tab_b .more_contents .level_by_year .lev_b .lev_detail .txt_b .lev_unit .unit{
    padding: 0 0 0 4px;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-m);
    color: var(--color-text-tertiary);
}

/* 우측 상태 영역*/
.more_modal .more_b .tab_b .more_contents .level_by_year .lev_b .lev_detail .state_b>div{
    width: 64px;
    height: 64px;
    line-height: 64px;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-sb);
    text-align: center;
    border-radius: var(--border-radius-12);
}

/* 정상*/
.more_modal .more_b .tab_b .more_contents .level_by_year .lev_b .lev_detail .state_b .s_normal{
    color: var(--color-bg-brand);
    background: var(--color-bg-lightskyblue);
}

/* 주의*/
.more_modal .more_b .tab_b .more_contents .level_by_year .lev_b .lev_detail .state_b .s_attention{
    color: var(--primitive-color-secondary);
    background: var(--color-bg-badge-warning);
}

/* 정상 기준 박스 */
.more_modal .more_b .tab_b .more_contents .level_by_year .lev_b .normal_lev{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    margin: 20px 0 0 0;
    background: var(--color-bg-box);
    font-size: var(--font-size-14);
    border-radius: var(--border-radius-8);
}

/* 정상 수치 */
.more_modal .more_b .tab_b .more_contents .level_by_year .lev_b .normal_lev .standard{
    font-weight: var(--font-weight-m);
    color: var(--color-text-tertiary);
}

/* 출처 */
.more_modal .more_b .tab_b .more_contents .level_by_year .lev_b .normal_lev .source{
    color: var(--color-text-placeholder);
}


/* //////////////////////////////////////자세히보기 모달 그래프 */
.more_modal .more_b .tab_b .more_contents .level_by_year .chart_b{
    margin: 28px 28px 8px 28px;
    height: 220px;
}


/* //////////////////////////////////////자세히보기 모달 전체 리스트 */
.more_modal .more_b .tab_b .more_contents .all_list{
    padding: 28px;
}

/* 전체 N건 텍스트*/
.more_modal .more_b .tab_b .more_contents .all_list .all_tit{
    padding: 0 0 8px 0;
    font-weight: var(--font-weight-m);
    color: var(--color-text-tertiary);
}

.more_modal .more_b .tab_b .more_contents .list_b ul{
    display: flex;
    flex-direction: column;
    gap: 8px;
} 

/* 리스트 li*/
.more_modal .more_b .tab_b .more_contents .list_b ul .by_year{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
    border: var(--border-width-1) solid var(--color-border-primary);
    border-radius: var(--border-radius-12);
}

/* 리스트 날짜*/
.more_modal .more_b .tab_b .more_contents .list_b ul .by_year .text_b .date{
    padding: 0 0 4px 0;
    font-size: var(--font-size-14);
    color: var(--color-text-tertiary);
}

/* 리스트 수치*/
.more_modal .more_b .tab_b .more_contents .list_b ul .by_year .text_b .lev{
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-m);
}

/* 주의*/
.more_modal .more_b .tab_b .more_contents .list_b ul .by_year .text_b .caution_on{
    color: var(--primitive-color-secondary);
}

/* 리스트 화살표 영역*/
.more_modal .more_b .tab_b .more_contents .list_b ul .by_year .arrow_b>div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 4px 0px;
    width: 60px;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-m);
    border-radius: var(--border-radius-8);
}

/* 상승*/
.more_modal .more_b .tab_b .more_contents .list_b ul .by_year .arrow_b .increase{
    color: var(--color-text-badge-increase);
    background: var(--color-bg-badge-increase);
}

/* 감소*/
.more_modal .more_b .tab_b .more_contents .list_b ul .by_year .arrow_b .decrease{
    color: var(--color-text-badge-decrease);
    background: var(--color-bg-badge-decrease);
}


/*_______________________________________________모바일 기준으로*/
@media screen and (max-width: 767px) {

    @keyframes slidein {
        from {
        bottom: -250px;
        }
    
        to {
        bottom: 0;
        }
    }
    /* //////////////////////////////////////자세히보기 모달 */
    .more_modal{
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        height: 100%;
    }

    .more_modal .more_b{
        padding: 0;
        border-radius: 0px;
        height: 100%;
        overflow-y: auto;
    }


    /* //////////////////////////////////////상단 */
    .more_modal .more_b .more_top{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: var(--color-bg-inverse);
    }

    /* 타이틀 박스 */
    .more_modal .more_b .more_top .more_head{
        justify-content: center;
        padding: 16px 20px;
        position: relative;
    }

    /* x 버튼 */
    .more_modal .more_b .more_top .more_head .icon_close{
        display: none;
    }

    /* < 버튼 */
    .more_modal .more_b .more_top .more_head .icon_prev{
        display: flex;
        position: absolute;
        left: 20px;
    }

    /* 탭 전체*/
    .more_modal .more_b .more_top .more_tab_wrap{
        padding: 0 20px;
    }


    /* //////////////////////////////////////자세히보기 모달 내용 */
    .more_modal .more_b .tab_b .more_contents{
        height: 100%;
        overflow-y: initial;
    }

    /* 내용 상단 */
    .more_modal .more_b .tab_b .more_contents .level_by_year{
        padding: 123px 0 0 0;
    }

    /* 내용 상단 */
    .more_modal .more_b .tab_b .more_contents .level_by_year .lev_b{
        margin: 0 20px;
    }

    /* 타이틀 박스 */
    .more_modal .more_b .tab_b .more_contents .level_by_year .lev_b .lev_detail{
        padding: 16px 24px;
    }

    /* 정상 기준 박스 */
    .more_modal .more_b .tab_b .more_contents .level_by_year .lev_b .normal_lev{
        padding: 12px 16px;
        margin: 12px 0 0 0;
    }

    /* 차트 */
    .more_modal .more_b .tab_b .more_contents .level_by_year .chart_b{
        margin: 28px 20px 8px 20px;
    }


    /* //////////////////////////////////////자세히보기 모달 전체 리스트 */
    .more_modal .more_b .tab_b .more_contents .all_list{
        padding: 20px;
    }

    /* 리스트 li*/
    .more_modal .more_b .tab_b .more_contents .list_b ul .by_year{
        padding: 12px 24px;
    }
}