@charset "utf-8";

/*dashboardpage*/
.Dashboardpage {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200000;
}
.Dashboardpage .legend_box {
	color: #fff;
}
.Dashboardpage .ic_traffic_green,
.Dashboardpage .ic_traffic_yellow,
.Dashboardpage .ic_traffic_red,
.Dashboardpage .ic_traffic_purple {
	width: 40px;
  	margin-right: 5px;
}
.Dashboardpage .Dashboardpage_wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background: #151329;
}
.Dashboardpage .intro_overlay {
    display: none !important;
}
.Dashboardpage .intro_overlay.is-visible {
    display: block !important;
}

/*intro_overlay*/
.intro_overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200001;
    background: rgba(0,0,0,0.8);
}
.intro_overlay.is-visible {
    display: block;
}

.intro_overlay_inner h3 {
    position: absolute;
    top: 30px;
    left: 200px;
    font-size: 1.5rem;
    color: #fff;
    font-weight: 700;
}
.emissions_description {
    position: fixed;
    width: 280px;
    left: 15px;
    top: 444px;
    transform: translateY(-50%);
}
.emissions_description img {
    display: block;
    width: 100%;
    height: auto;
}
.emissions_description02 {
    position: fixed;
    width: 650px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.emissions_description02 img {
    display: block;
    width: 100%;
    height: auto;
}
.emissions_description02 .description_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.emissions_description03 {
    position: fixed;
    width: 500px;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: -1;
}
.emissions_description04 {
    position: fixed;
    width: 230px;
    top: 82px;
    left: 10px;
}
.emissions_description03 .description_box {
    position: absolute;
    top: 180px;
    left: -350px;
    border: 1px solid #999;
}
.emissions_description04 .description_box {
    position: absolute;
    top: 60px;
    left: 235px;
    transform: translateY(-50%);
    border: 1px solid #999;
}
.description_box {
    position: absolute;
    padding: 10px;
    background-color: rgba(185,227,0,0.05);
    border: 1px solid #B9E300;
    border-radius: 10px;
    color: #fff;
    left: 50px;
    width: 350px;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1;
}
.description_box p {
    margin-left: 25px;
}
.description_box .txt {
    display: flex;
    gap: 5px;
    font-weight: 700;
    color: #fff;
    align-items: center;
}
.description_box .txt::before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    background: url(/static/assets/ic_magnifier.svg) no-repeat center center;
    background-size: contain;
}
.intro_button {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}
.intro_button button {
    padding: 10px;
    width: 160px;
    border: 1px solid #fff;
    border-radius: 10px;
    color: #fff;
    background-color: rgba(255,255,255,0.05);
    font-size: 0.85rem;
    transition: transform .25s ease, box-shadow .25s ease;
    transform: translateY(0);
    will-change: transform;
}

.intro_button button:hover {
    transform: translateY(-3px);
    animation: intro_button_wobble .6s ease;
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.intro_button button:active {
    transform: translateY(-1px);
    animation: none;
}

@keyframes intro_button_wobble {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    30% {
        transform: translateY(-4px) rotate(-1.2deg);
    }
    60% {
        transform: translateY(-4px) rotate(1.2deg);
    }
    100% {
        transform: translateY(-3px) rotate(0deg);
    }
}



/*inner*/
.Dashboardpage_inner {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.Dashboardpage_inner .Dashboardpage_header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 0 20px;
}

/*header*/
.Dashboardpage_header img {
    width: 120px;   
}
.Dashboardpage_header a {
    width: 180px;
    padding: 10px 15px;
    background-color: rgba(185,227,0,0.3);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #B9E300;
    font-size: 0.85rem;
}
.Dashboardpage_header a:hover {
    text-decoration: underline;
}
.Dashboardpage_header a::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background: url(/static/assets/ic_arrow_up.svg) no-repeat center center;
}

/*content*/
.Dashboardpage_content {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex: 1 0;
    flex-basis: 0;
    overflow: hidden;
    padding: 0 20px;
}

/*left*/
.DB_left  {
    position: relative;
    height: 100%;
}
.DB_left .DB_left_inner {
    display: flex;
    flex-direction: column;
    gap: 30px;
  	height: 100%;
}
.DB_left .description_wrap {
    padding: 10px 0;
}
.DB_left .legend_wrap ,
.DB_left .description_wrap ,
.DB_left .emissions_wrap {
    position: relative;
    width: 100%;
}
.DB_left .emissions_wrap {
    flex: 1 0;
    flex-basis: 0;
}
.DB_left .DB_left_inner 
.DB_left .DB_left_inner > div {
    position: relative;
    width: 100%;
}
.DB_center {
    flex: 1 0;
    flex-basis: 0;
}
.DB_center .sunburst_chart {
    display: flex;
    justify-content: center;
}

.DB_left .DB_left_inner > div:not(:last-of-type)::after {
    content:'';
    display: block;
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(255,255,255,0.2);
}

.legend_wrap ul {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 5px;
}
.legend_wrap ul li {
    display: flex;
    align-items: center;
  	gap: 10px;
    color: #fff;
  	font-size: var(--fs-16);
}

/*description*/
.DB_left .description_wrap {
    position: relative;
}
.DB_left .description_wrap button {
    text-decoration: underline;
    font-size: 0.85rem;
    color: #fff;
    display: flex;
    gap: 5px;
    align-items: center;
}
.DB_left .description_wrap button:hover {
    color: #B9E300;
}
.DB_left .description_wrap button::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url(/static/assets/ic_file_btn.svg) no-repeat center center;
    background-size: contain;
}

/* Dashboardpage_description */
.Dashboardpage_description {
    
    width: 100%;
    height: 100%;
} 

/* emissions_wrap */
.emissions_wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.emissions_wrap h3 {
    font-size: 1.25rem;
    color: #fff;
    font-weight: 700;
}
.map_select_wrap {
    width: 100%;
    display: flex;
    gap: 10px;
}
.select_navy select {
    width: 130px;
    padding: 10px 30px 7px 15px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff; 
    font-size: 0.85rem;
    /* 기본 화살표 제거 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url(/static/assets/ic_dashboard_select.svg) no-repeat center center ;
    background-position: right 12px center;
    background-color: #151329;
    transition: all 0.3s ease;
}

/* emissions_graph_wrap */
.emissions_graph_wrap {
    width: 100%;
    position: relative;
    padding: 30px;
  	flex: 1 0;
  	flex-basis: 0;
    border-radius: 15px;
  	overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(to bottom, #030625, #2B354C);
    border: 1px solid rgba(255,255,255,0.2);
}
.emissions_graph_wrap .graph_txt {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.emissions_graph_wrap .graph_txt h3 {
    color: #666;
    font-size: 0.85rem;
    font-weight: 400;
}
.emissions_graph_wrap .graph_txt .data_txt {
    display: flex;
    align-items: center;
    color: #fff;
    gap: 3px;
}
.emissions_graph_wrap .graph_txt .data_txt p {
    margin-right: 5px;
    font-size: 1.25rem;
}

.DB_right_body {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.DB_right.basic .click_wrap {
    padding: 0 15px 15px 15px;
    color: #fff;
    font-size: 0.85rem;
}
.DB_right.basic .click_wrap .click_cont {
    border-radius: 5px;
    border: 1px solid #fff;
    padding: 10px;
}
.DB_right.basic .click_wrap .click_cont button {
    width: 100%;
    margin-top: 10px;
}
.DB_right.basic .DB_right_body {
    display: none;
 	overflow-y: auto;
    overflow-x: hidden;
}
.DB_right.basic .DB_right_body.on {
    display: inline-flex;
}
.DB_right.basic .legend_wrap {
    padding: 15px;
}
.DB_right.basic li.legend_box,
.DB_right.basic li.legend_box span {
    font-size: var(--fs-16);
}
.DB_right .txt_wrap .ic_traffic_green {
    color: #1BEA9A;
}
.DB_right .txt_wrap .ic_traffic_yellow {
    color: #FFFB9B;
}
.DB_right .txt_wrap .ic_traffic_red {
    color: #FF3C69;
}
.DB_right .txt_wrap .ic_traffic_purple {
    color: #CB73FF;
}

/* DB_right */
.DB_right {
    position: relative;
    width: 400px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #030625, #2B354C);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 15px;
}



/* 사이드 핸들: 접혔을 때 우측 화면 모서리에 고정되어 항상 보임 */
.DB_right .DB_right_handle {
    display: none; /* 데스크탑 기본 숨김, 1200px 이하에서 사용 */
}
.DB_right .trend_txt span.text_white {
    color: #fff; 
    font-size: 0.85rem;
}
.DB_right .trend_txt {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
}
.DB_right .trend_txt::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 30px);
    height: 1px;
    background-color: rgba(255,255,255,0.2);
}
.DB_right .trend_txt h3 {
    font-size: 1.25rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
}
.DB_right .trend_txt h3:before {
    content: '';
    display: block;
    gap: 5px;
    width: 25px;
    height: 25px;
    background: url(/static/assets/ic_energy.svg) no-repeat center center;
    background-size: contain;
}
.DB_right .trend_txt p {
    color: #666;
    font-size: 0.85rem;
}
.DB_right .trend_graph_wrap {
    position: relative;
    width: 100%;
    padding: 15px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    flex: 1 0;
    flex-basis: 0;
}
.DB_right .trend_graph_wrap > ul > li h2 {
    color: #fff;
    font-weight: 400;
    font-size: 0.85rem;
}
.DB_right .trend_graph_wrap > ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.DB_right .trend_graph_wrap > ul > li {
    position: relative;
    width: 100%;
}

.DB_center .sunburst_chart {
    display: flex;
    justify-content: center;
    height: 100%;
}

.trend_graph_wrap > ul > li .txt_wrap {
    display: flex;
    flex-direction: column;
}
.trend_graph_wrap > ul > li .txt_trend_wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.trend_graph_wrap > ul > li .txt_wrap {
    width: calc(100% - 200px);
}
.trend_graph_wrap > ul > li .trend_graph_box {
    width: 200px;
}
.trend_graph_wrap > ul > li .trend_graph_box p {
    display: none;
    color:#fff;
    font-size: 0.65rem;
    text-align: center;
}
.trend_graph_wrap > ul > li .trend_graph_box.data_none p {
    display: block;
}


/* dashboardpage_footer */
.dashboardpage_footer {
    width: 100%;
    padding: 10px 20px;
    background-color: rgba(0,0,0,0.2);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dashboardpage_footer h2 {
    color: #fff;
    font-size: 0.85rem;
}


/* 반응형: 사이드 드로어(>1200px), 슬라이드 패널(<=1200px), 바텀시트(<=768px) */
@media (max-width: 1200px) {
    .Dashboardpage_header img {
        display: none;
    }
    /* 오버레이는 1200px 이하면 항상 숨김 (is-visible 무시) */
    .Dashboardpage .intro_overlay,
    .Dashboardpage .intro_overlay.is-visible {
        display: none !important;
    }
    .Dashboardpage_content {
        align-items: stretch;
    }
    .DB_left {
        width: 230px;
    }
    .DB_right {
        position: relative;
        transform: none;
        width: 400px;
        max-width: none;
        height: auto;
        border-radius: 15px;
        z-index: auto;
    }
    .DB_left .DB_left_inner {
        padding: 15px;
    }
    .map_select_wrap {
        gap: 10px;
    }
    .emissions_wrap {
        gap: 15px;
    }
    .select_navy select {
        width: auto;
    }
    .DB_left .description_wrap {
        display: none;
    }
    .Dashboardpage_header a {
        padding: 5px;
        width: 150px;
    }
    .DB_left .DB_left_inner > div:not(:last-of-type)::after {
        display: none;
    }
    .Dashboardpage_content {
        align-items: stretch;
    }

    .DB_right_toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 36px;
        padding: 0 14px;
        margin-bottom: 12px;
        border-radius: 8px;
        background-color: rgba(185,227,0,0.2);
        color: #B9E300;
    }

    /* 오른쪽에서 들어오는 슬라이드 패널 */
    .DB_right {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        overflow-y: visible;
        overflow-x: visible;
        width: min(86vw, 400px);
        max-width: 420px;
        border-radius: 0;
        transform: translateX(calc(100% - 30px)); /* 닫힘 시 내용 일부 노출 */
        transition: transform .28s ease;
        z-index: 10000;
    }
    .DB_right.is-open {
        transform: translateX(0);
        max-height: 100%;
    }
    /* 좌측 고정으로 가려지는 중앙영역을 위해 내부 여백 확보 */
    .DB_right .trend_graph_wrap {
        overflow-y: visible;
        max-height: calc(100% - 90px);
    }   
    /* 사이드 드로어 높이에 맞춰 내부 스크롤 */
    .trend_graph_wrap {
        height: calc(100% - 90px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* 푸터를 하단 고정 + 좌측 사이드바 폭만큼 여백 확보 */
    .dashboardpage_footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9500;
        padding-left: 280px; /* .Dashboardpage_inner 좌측 패딩과 동일 */
    }

    /* 핸들: 패널(box) 기준으로 내부 좌측에 부착 (닫힘 상태에서도 좌측 36px 영역에 노출) */
    .DB_right .DB_right_handle {
        display: block;
        position: absolute;
        left: -35px;
        width: 36px;
        height: 80px;
        border: none;
        border-radius: 10px 0 0 10px;
        background: rgba(185,227,0,0.9);
        cursor: pointer;
        z-index: 2;
        color: transparent;
        text-indent: -9999px;
    }
    /* 아이콘: 기본 상태 */
    .DB_right .DB_right_handle::after {
        content: '';
        position: absolute;
        display: block;
        top: 36px;
        left: 13px;
        width: 12px;
        height: 12px;
        margin: 0 auto;
        background: url('/static/assets/ic_prev_white.svg') no-repeat center center;
        background-size: 12px 12px;
        --base-rot: 0deg;
        transform: rotate(var(--base-rot));
        transition: transform .28s ease;
    }
    /* 패널 열림 상태에서는 기본 회전각을 유지 방향으로 설정 */
    .DB_right.is-open .DB_right_handle::after {
        --base-rot: 180deg;
    }
    /* 버튼을 누르는 동안만 회전 */
    .DB_right .DB_right_handle:active::after {
        transform: rotate(180deg);
    }
    /* JS로 부착되는 is-spinning 동안은 360도 회전 애니메이션 */
    .DB_right .DB_right_handle.is-spinning::after {
        animation: db_handle_spin .35s ease;
    }
    .dashboardpage_footer {
        display: none;
    }
    .dashboardpage_footer {
        display: none;
    }
    .Dashboardpage .intro_overlay ,
    .Dashboardpage .intro_overlay.is-visible {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* 바텀시트 전환: 전환 애니메이션을 리사이즈 시점에는 보이지 않도록 최소화 */
    .DB_right {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        max-width: 100vw;
        height: 45vh;
        max-height: 80vh;
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
        transform: translateY(calc(100% - 50px));
        transition: none;
        z-index: 10000;
    }
    .DB_left .DB_left_inner {
        padding: 0;
    }
    .DB_left {
        width: 100%;
        height: auto;
    }
  	.legend_wrap ul {
  		gap: 0 10px;
  	}	
    .Dashboardpage_content {
        flex-direction: column;
        gap: 20px;
    }
    .DB_left .description_wrap,
    .DB_left .emissions_wrap {
        display: none;
    }
  	.Dashboardpage .ic_traffic_green,
    .Dashboardpage .ic_traffic_yellow,
    .Dashboardpage .ic_traffic_red,
  	.Dashboardpage .ic_traffic_purple {
  		width: 40px;
  	}
    .legend_wrap ul {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }
  	.trend_graph_wrap > ul > li .txt_wrap {
  		width: calc(100% - 150px);	
  	}
  	.trend_graph_wrap > ul > li .trend_graph_box {
  		width: 150px;
  	}
    .DB_right .trend_txt,
    .DB_right .trend_graph_wrap {
        padding: 10px;
    }
    .DB_right .trend_graph_wrap > ul {
        gap: 5px;
    }
    .DB_right .DB_right_handle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .Dashboardpage_header a {
        width: 130px;
    }
    .Dashboardpage_header a::after {
        display: none;
    }
    .DB_right.is-open {
        transform: translateY(0);
    }
    /* 사용자 액션 시에만 부드럽게 동작 */
    .DB_right.animating {
        transition: transform .28s ease;
    }

    /* 바텀시트 내부 스크롤 컨테이너 높이 조정 */
    .DB_right_body {
        height: calc(65vh - 60px);
        max-height: calc(80vh - 60px);
    }

    /* 바텀시트에서도 좌측 핸들 유지 (사용자 요청 사항) */
    .DB_right .DB_right_handle {
        position: absolute;
        left: 50%;
        right: auto;
        top: -14px;
        transform: translate(-50%, -50%);
        width: 120px;
        height: 25px;
        border: none;
        border-radius: 10px 10px 0 0;
        background: rgba(185,227,0,0.9);
    }
    .DB_right .DB_right_handle::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 45px;
        width: 30px;
        height: 30px;
        margin: 0 auto;
        background: url('/static/assets/ic_prev_white.svg') no-repeat center center;
        --base-rot: 90deg;
        transform: rotate(var(--base-rot));
        transition: transform .28s ease;
    }
    /* 바텀시트 열림 상태: 위쪽을 가리키도록 기본 회전각 설정 */
    .DB_right.is-open .DB_right_handle::after {
        --base-rot: -90deg;
    }
    .DB_right .DB_right_handle:active::after {
        transform: rotate(270deg);
    }
    .DB_right .DB_right_handle.is-spinning::after {
        animation: db_handle_spin .35s ease;
    }
}