@charset "utf-8";

/*******************************
 * 파일명 : dust-info-detail.css
 * 설명	  : 에어코리아 App
 * Update : 2026.03.10.
********************************/

/***** common new-main.css *****/
.inner-box {
    border-radius:18px;
    padding:12px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.white { color:#FFFFFF; }
.bg-white { background-color:#FFFFFF; }
.bg-table-gray { background-color: #F5F5F5; }

.good { color:#2258c5; }
.normal { color:#01b56e; }
.bad { color:#f9b600; }
.verybad { color:#db3438; }

.stroke-good { stroke: #2258c5; }
.stroke-normal { stroke: #01b56e; }
.stroke-bad { stroke: #f9b600; }
.stroke-verybad { stroke: #db3438; }

.bg-good { background-color:#2258c5; }
.bg-normal { background-color:#01b56e; }
.bg-bad { background-color:#f9b600; }
.bg-verybad { background-color:#db3438; }
.bg-gray { background-color:#808080; }

.fw-600 {
    font-weight: 600;
}
.fw-800 {
    font-weight: 800;
}
/*******************************/

.d-flex {
    display: flex;
}

.justify-center {
    justify-content: center;
}

.align-center {
    align-items: center;
}

.text-nowrap {
    white-space: nowrap;
}

/* font-size = px / 2.2 */
.fs-24 {
    font-size: 10.9px;
}
.fs-26 {
    font-size: 11.8px;
}
.fs-28 {
    font-size: 12.7px;
}
.fs-30 {
    font-size: 13.6px;
}
.fs-32 {
    font-size: 14.5px;
}
.fs-34 {
    font-size: 15.4px;
}
.fs-36 {
    font-size: 16.3px;
}
.fs-38 {
    font-size: 17.2px;
}
.fs-42 {
    font-size: 19px;
}
.fs-46 {
    font-size: 20.9px;
}
.fs-48 {
    font-size: 21.8px;
}
.fs-50 {
    font-size: 22.7px;
}
.fs-120 {
    font-size: 54.5px;
}

.black-2 {
    color: #0A0A0A;
}
.black-3 {
    color: #646464;
}

.line {
    border-top: 1px solid #E6E6E6;
    margin: 10px 0 10px 0;
}

.bg-container-good {
    background: url('/images/good-bg.png');
    background-size: cover !important;
    /*background-attachment: fixed;*/
}
.bg-container-normal {
    background: url('/images/normal-bg.png');
    background-size: cover !important;
    /*background-attachment: fixed;*/
}
.bg-container-bad {
    background: url('/images/bad-bg.png');
    background-size: cover !important;
    /*background-attachment: fixed;*/
}
.bg-container-verybad {
    background: url('/images/verybad-bg.png');
    background-size: cover !important;
    /*background-attachment: fixed;*/
}

header {
    padding: 0 20px 0 20px;
}

section {
    margin: 0 20px 0 20px;
    padding: 12px 20px 20px;
    border-radius: 15px;
    background-color: rgba(0, 0, 0, 0.6);
}

h2.section-title {
    border-bottom: 1px solid rgba(255, 255, 255 ,0.4);
    padding-bottom: 6px;
    margin-bottom: 16px;
    position: relative; /* 251021 pjs */
}
.dust-info-detail-container {
    width: 100%;
    padding: 20px 0 20px 0;
}
.dust-info-detail-container > *:not(:last-child) {
    margin-bottom: 15px;
}
.dust-info-detail-container header {
    display: flex;
    justify-content: space-between;
}
.dust-info-detail-container header h1.header-title {
    line-height: initial;
    text-shadow: -2px 0 #FFFFFF, 0 2px #FFFFFF, 2px 0 #FFFFFF, 0 -2px #FFFFFF;
}
.dust-info-detail-container header .weather .highlight {
    text-shadow: -1px 0 #FFFFFF, 0 1px #FFFFFF, 1px 0 #FFFFFF, 0 -1px #FFFFFF;
}
.dust-info-detail-container header .weather > div {
    width: 100%;
    text-align: end;
}
.dust-info-detail-container header .weather > div img {
    width: 60%;
}
.dust-info-detail-container header .weather > p {
    text-align: end;
}
.dust-info-detail-container .dust-info {
    width: 100%;
    display: flex;
}
.dust-info-detail-container .dust-info > * {
    flex: 1;
    padding: 0 15px 0 15px;
    text-align: center;
}
.dust-info-detail-container .dust-info > *:not(:last-child) {
    border-right: 1px solid #E6E6E6;
    /* line-vertical */
}
.dust-info-detail-container .dust-info .dust-info-description > div {
    width: 100%;
}
.dust-info-detail-container .dust-info .dust-info-description > div img {
    width: 65px;
    /* 130px */
}
.dust-info-detail-container .dust-info-value {
    width: 100%;
    position: absolute;
    top: 73px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dust-info-detail-container .dust-info-value > *:not(:last-child) {
    margin-bottom: 10px;
}
.dust-info-detail-container .dust-info-value-box {
    width: 80%;
    min-width: 80px;
    max-width: 120px;
    padding: 2px 0;
    border-radius: 30px;
}
.dust-info-detail-container .dust-info-table-container .dust-info-table-description {
    display: flex;
    margin: 60px 0 10px 0;
}
.dust-info-detail-container .dust-info-table-container .dust-info-table-description > * {
    flex: 1;
}
.dust-info-detail-container .dust-info-table-container .dust-info-table-description p {
    text-align: center;
    padding: 0 15px 0 15px;
    white-space: nowrap;
}
.dust-info-detail-container .dust-info-table-container .table {
    border: 1px solid #F5F5F5;
    /* bg-table-gray */
    border-top: 1px solid #646464;
    /* black-3 */
}
.dust-info-detail-container .dust-info-table-container .table .thead .table-th {
    height: 40px !important;
}
.dust-info-detail-container .dust-info-table-container .table .table-tr {
    display: flex;
    align-items: center;
}
.dust-info-detail-container .dust-info-table-container .table .table-tr > * {
    width: 36%;
}
.dust-info-detail-container .dust-info-table-container .table .table-tr > *:nth-child(1) {
    width: 28%;
}

.dust-info-detail-container .dust-info-table-container .table .table-th, .dust-info-detail-container .dust-info-table-container .table .table-td {
    padding: 10px;
    text-align: center;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    max-height: 80px;
}
.dust-info-detail-container .dust-info-table-container .table .table-th.table-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 15px;
}
.dust-info-detail-container .dust-info-table-container .table .table-th {
    height: 60px;
}
.dust-info-detail-container .dust-info-table-container .table img {
    width: 40px;
}
.dust-info-detail-container .dust-info-table-container .table .dust-info-other-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dust-info-detail-container .dust-info-table-container .table .dust-info-other-value > p {
    line-height: 14px !important;
}
.dust-info-detail-container .dust-info-table-container .table .dust-info-other-value .dust-info-other-value-weather > img {
    width: 35px;
}
.dust-info-detail-container section.section-02 .list .item > p {
    height: 45px;
    text-align: center;
    margin-bottom: 4px;
    line-height: 120%;
}
.dust-info-detail-container section.section-02 .doughnut-chart {
    height: 100%;
    position: relative;
}
.dust-info-detail-container section.section-02 .doughnut-chart .doughnut-chart-gauge {
    position: absolute;
    top: 54%;
    left: 50%;
    line-height: 100%;
    transform: translateX(-50%) translateY(-50%);
}
.dust-info-detail-container section.section-02 .doughnut-chart .text {
    position: absolute;
    top: 64%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
    line-height: 12px;
}
.dust-info-detail-container section.section-02 .doughnut-chart .text > span {
    font-size: 15px;
}
.dust-info-detail-container section.section-02 .doughnut-chart .svg {
    display: block;
    margin: 0 auto;
}
.dust-info-detail-container section.section-02 .doughnut-chart .border {
    fill: #FFFFFF;
    stroke: #E0DFDF;
    stroke-width: 8;
}
.dust-info-detail-container section.section-02 .doughnut-chart .progress {
    fill: none;
    stroke-width: 8;
    /* 2r* π = 2 * 반지름(30) * π(3.14) = max: 188.4 */
    stroke-dasharray: 188.4;
    transform-origin: center;
    transform: rotate(-90deg);
}
.dust-info-detail-container section.section-03 .list > *:not(:last-child) {
    margin-bottom: 15px;
}
.dust-info-detail-container section.section-03 .list p::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #FFFFFF;
    margin-bottom: 10px;
    border-radius: 50%;
    vertical-align: -webkit-baseline-middle;
    margin-right: 8px;
}
.dust-info-detail-container section.section-03 .tab {
    display: flex;
    justify-content: space-around;
    margin: 10px 0 10px 0;
}
.dust-info-detail-container section.section-03 .tab-active {
    border-bottom: 1px solid #FFFFFF;
}
.dust-info-detail-container section.section-03 .outlook {
    width: 100%;
    height: 220px;
    background-color: #FFFFFF;
    border-radius: 18px;
}
.dust-info-detail-container section.section-04 .list > *:not(:last-child) {
    margin-bottom: 15px;
}
.dust-info-detail-container section.section-04 .list .list-text {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2px;
}
.dust-info-detail-container section.section-04 .list .list-text > p {
    letter-spacing: -1px;
}
.dust-info-detail-container section.section-04 .list p:first-child::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #FFFFFF;
    margin-bottom: 10px;
    border-radius: 50%;
    vertical-align: -webkit-baseline-middle;
    margin-right: 8px;
}
.pm25graph, .pm10graph, .o3graph {
    overflow-y: hidden;
    overflow-x: scroll;
}
.graph-box {
    position: relative;
}
.graph-box img {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    z-index: 100;
}
.graph-box img.left-arrow-btn {
    left: -18px;
    transform: translateY(-50%);
}
.graph-box img.right-arrow-btn {
    right: -18px;
    transform: rotate(180deg) translateY(50%);
}

.dust-info-detail-container section.section-05 .alert-container > *:not(:last-child) {
    margin-bottom: 10px;
}
.dust-info-detail-container section.section-05 .siren-container {
    margin-right: 19px;
}
.dust-info-detail-container section.section-05 .siren-container > img {
    width: 25.5px;
}
.dust-info-detail-container section.section-05 .siren-disabled {
    color: #7d7d7d;
}
.dust-info-detail-container section.section-05 .inner-box {
    border-radius: 18px;
    padding: 20px;
}
.dust-info-detail-container section.section-06 .location {
    width: 100%;
    height: 300px;
    background-color: #FFFFFF;
    border-radius: 18px;
    overflow: hidden;
}
.dust-info-detail-container section.section-06 .marker > img {
    width: 30px;
}

.area-tooltip-position {
    position: absolute;
    right: 0px;
    bottom: 5px;
}

img.area-tooltip-icon {
    width: 20px;
    height: 20px;
    margin-left: 4px;
}

div.area-tooltip-text {
    padding: 12px 16px;
    border-radius: 10px;
    background-color: #fff;
    white-space: nowrap;
}

div.area-tooltip-text .red {
    color: #e13938;
}
[v-cloak] {
    display: none;
}

/*  Override  */
.outlook {
    padding: 15px 15px 30px !important;
    height: fit-content !important;
    min-height: 220px;

}

/* 과거 대기질 그래프 */
#PM2\.5-chart-div > div > div > div > svg > g:nth-child(3) > g:nth-child(2) > g:nth-child(4) > rect {
    display: none;
}
#PM2\.5-chart-div > div > div > div > svg > g:nth-child(3) > g:nth-child(3) > circle {
    transform: translateY(-4px);
}
#PM2\.5-chart-div > div > div > div > svg > g:nth-child(3) > g:nth-child(2) > g:nth-child(3) > path {
    transform: translateY(-4px);
}
#PM2\.5-chart-div > div > div > div > svg > g > g:nth-child(2) > g:first-child > rect {
    width: 12px;
    transform: translateX(-4px);
}

#PM10-chart-div > div > div > div > svg > g:nth-child(3) > g:nth-child(2) > g:nth-child(4) > rect {
    display: none;
}
#PM10-chart-div > div > div > div > svg > g:nth-child(3) > g:nth-child(3) > circle {
    transform: translateY(-4px);
}
#PM10-chart-div > div > div > div > svg > g:nth-child(3) > g:nth-child(2) > g:nth-child(3) > path {
    transform: translateY(-4px);
}
#PM10-chart-div > div > div > div > svg > g > g:nth-child(2) > g:first-child > rect {
    width: 12px;
    transform: translateX(-4px);
}

#O3-chart-div > div > div > div > svg > g:nth-child(3) > g:nth-child(2) > g:nth-child(4) > rect {
    display: none;
}
#O3-chart-div > div > div > div > svg > g:nth-child(3) > g:nth-child(3) > circle {
    transform: translateY(-4px);
}
#O3-chart-div > div > div > div > svg > g:nth-child(3) > g:nth-child(2) > g:nth-child(3) > path {
    transform: translateY(-4px);
}
#O3-chart-div > div > div > div > svg > g > g:nth-child(2) > g:first-child > rect {
    width: 12px;
    transform: translateX(-4px);
}
/* Tippy.js library */
/* https://atomiks.github.io/tippyjs/v6/themes/ */
.tippy-box[data-theme~='tippy-area-tooltip'] {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 5px 8.7px 20px 0 rgba(0, 0, 0, 0.2);
}

.tippy-box[data-theme~='tippy-area-tooltip'] > .tippy-content {
    padding: 0;
}

.tippy-box[data-theme~='tippy-area-tooltip'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: #fff;
}

.tippy-box[data-theme~='tippy-area-tooltip'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: #fff;
}

.tippy-box[data-theme~='tippy-area-tooltip'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: #fff;
}

.tippy-box[data-theme~='tippy-area-tooltip'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: #fff;
}

.table_shl_wrap{}
.table_shl{}
.table_shl thead{  position:sticky; top:0;}
.table_shl thead:after{ display:block; content:""; position:absolute; left:0; top:0px; width:100%; height:2px; background:#000;}
.table_shl thead:before { display:block; content:""; position:absolute; left:0; top:0px; width:100%; height:100%; z-index:-1;}
.table_shl thead th,
.table_shl tbody th,
.table_shl tbody td{ padding: 10px; text-align: center; border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; font-size: 14.5px;}
.table_shl thead th{ position: relative; background-color: #F5F5F5; }
.table_shl thead th::before{}

.btn_total_map_move{ padding-right: 16px; font-size: 14.5px; position: absolute; right: 0; top: 4px; font-weight: normal; color: #ffdf50;}
.btn_total_map_move::before,
.btn_total_map_move::after{ content: ""; background-color: #ffdf50; width: 8px; height: 2px; position: absolute; right: 0; transform: rotate(45deg); top: 7px;}
.btn_total_map_move::after{ transform: rotate(-45deg); top: 11px;}

/************* 측정소 위치정보  ***********/
/* Tab Menu */
.tab_shter{ position: absolute; border: 1px solid #ddd; border-radius: 6px; display: flex; top: 15px; right: 15px; background-color: #fff; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); z-index: 98;}
.tab_shter li{ position: relative; padding: 4px;}
.tab_shter li:not(:first-child)::before{ content: ""; background-color: #ededed; width: 1px; height: 20px; position: absolute; left: 0; top: 6px;}
.tab_shter li button{ font-size: 13px; border-radius: 4px; width: 58px; height: 26px; background-color: #fff; display: inline-flex; justify-content: center; align-items: center; padding-top: 3px;}
.tab_shter li.on button{ background-color: #0b6dc3; color: #fff; font-weight: 600;}

/* Map : 내위치/확대/축소 */
.sht_map_ctrl{ position: absolute; right: 15px; bottom: 46px; z-index: 98;}
.btn_stay_myloc{ width: 34px; height: 34px; border-radius: 34px; border: 1px solid #dedede; background: url("../images/icon_myloc.png") no-repeat center #fff; background-size: 18px; margin-bottom: 4px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); }

.sht_map_zoom{ display: flex; flex-direction: column; gap: 2px;}
.sht_map_zoom button{ position: relative; border: 1px solid #dedede; width: 34px; height: 32px; background-color: #fff; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); }
.sht_map_zoom .zoomin{ border-radius: 5px 5px 0 0;}
.sht_map_zoom .zoomout{ border-radius: 0 0 5px 5px;}

.sht_map_zoom button::before,
.sht_map_zoom button::after{ content: ""; width: 14px; height: 2px; background-color: #474747; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.sht_map_zoom .zoomin::after{ transform: translate(-50%, -50%) rotate(-90deg);}

.sht_map_size{ border-radius: 3px; background-color:rgba(0, 0, 0, 0.3); opacity:1; color: #fff; font-size: 12px; padding: 2px 8px 0px 8px; letter-spacing: 0; position: absolute; right: 15px; bottom: 15px;}

.btn_sht_mapreload{ position: absolute; background-color: #fff; border: 1px solid #dedede; height: 28px; border-radius: 28px; padding: 0 15px; font-size: 13px; display: flex; align-items: center; gap: 6px; left: 50%; transform: translateX(-50%); bottom: 15px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); }
.btn_sht_mapreload::before{ content: ""; width: 12px; height: 18px; background: url("../images/icon_map_reload.png") no-repeat center; background-size: contain; display: inline-flex;}

.sht_vworld{ position: absolute; left: 15px; bottom: 15px; font-weight: bold; z-index: 98;
    text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
}

.sht_tooltip{}
.sht_tooltip{ position: absolute; background-color: #fff; text-align: center; border-radius: 10px; width: max-content; max-width: 280px; padding: 10px 20px; border: 1px solid #ddd; z-index: 99;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); 
}
.sht_tooltip:after{content: ""; position: absolute; display: inline-block; left: 50%; transform: translateX(-50%); bottom: -9px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:9px solid #fff;}
.sht_tooltip strong{ font-size: 14px;}
.sht_tooltip .dt_adrs{ margin-top: 2px;}
.sht_tooltip .dt_adrs span{ font-size: 13px; color: #7d7d7d; display: inline-flex; align-items: center;}
.sht_tooltip .dt_adrs span:last-child{ position: relative; padding-left: 7px; margin-left: 2px;}
.sht_tooltip .dt_adrs span:last-child::before{ content: "●"; color: #7d7d7d; font-size: 4px; position: absolute; left: 0; top: 0;}


.btn_sht_wayshk{ margin-top: 6px; background-color: #ec7500; width: 100px; height: 26px; border-radius: 26px; color: #fff; font-size: 13px; display: inline-flex; justify-content: center; align-items: center; gap: 6px; line-height: 0; /*26.03.10 김준희-오류 해결 전까지 임시 조치 display:none;*/}
.btn_sht_wayshk::before{ content: ""; width: 8px; height: 8px; background: url("../images/icon_arr_right_turn.png") no-repeat; background-size: cover;}