@charset "utf-8";
/*************************************************
* 프로젝트명 : 국문 > 재난포털 다크모드
* comment : dark01.css 링크에 추가
* prefers-color-scheme:dark
https://qa-r.yna.co.kr/m-kr/home/v03/css/dark01.css 참고하여 개발
*************************************************/

/* =============== 재난포털 =============== */
:root body.site-safe{
	/* 무채색 */
	--safe-tag001:#1E1E1E;  /* bg */
	--safe-tag002:#333;

	--safe-tag020:#232426;
	--safe-tag021:#2C2C2C;
	--safe-tag022:#232426;
	--safe-tag023:#333;
	--safe-tag031:#3A6EA5;
	--safe-tag041:#F1F1F1;
	/* [font]무채색 */
	--safe-font001:#888;
	--safe-font003:#A0A0A0;
	--safe-font004:#F1F1F1;
	--safe-font022:#7DB2EA;

	/* 필터(아이콘) */
	--safe-filter001:brightness(0) saturate(100%) invert(68%) sepia(0%); /* 아이콘 */
}

/* ===============#### 메인, 레이아웃======================== */
.logo-unit001,
.logo-unit002{filter:var(--ui-filter001);}
.header-unit001 .utility-zone .btn-jebo01{background-color:var(--safe-tag021);}
.header-unit001 .gnb-wrap .list>li.active{color:var(--safe-font022);}

.btn-unit-menu .line{background-color:var(--ui-tag003);}

.search-area .area:after{background-color:var(--safe-tag023);}

/* 기상특보 티커 - 일반시(safe) */
.ticker-unit02{background-color:var(--safe-tag020);}
.ticker-unit02.active .item-box02{background-color:var(--safe-tag001);border-color:var(--safe-tag020);}
.ticker-unit02 .tit{background-color:var(--safe-tag021);}

/* 기상특보 티커 - 재해시(disaster) */
.news-line01 .tt-con{background-color:var(--safe-tag021);color:var(--safe-font003);}
.news-line01 .list-wrap .list01>li,
.news-line01 .list-wrap .list01>li:first-child article{background-color:var(--safe-tag020);}

/* 메인 주요기사 기사탭 */
.tab-unit001 .txt{color:var(--safe-font003);}
.tab-unit001 .list>li.active button,
.tab-unit001 .list>li.active a{background-color:var(--safe-tag031);}

.nav-unit001 .info-txt{color:var(--safe-font022);}

/* 버튼 */
.btn-unit01{background-color:var(--safe-tag021);}
.btn-unit08-more02{background-color:var(--safe-tag021);}

/* 메인 제보하기 띠배너(PC) */
.site-unit021{background-color:var(--safe-tag020);}

/* 메인 재난안전정보 */
.site-unit022 .list>li{background-color:var(--safe-tag020);}

/* 메인 스페셜(기후위기현장을 가다) */
.list-unit022 .tag-unit{background-color:var(--safe-tag021);}

/* 메인 한눈에 보는 행동요령 */
.tab-unit002 .list>li.active .txt{color:var(--font-color003);}

/* 지진 tab-item01 */
.m-behave .tab-content .tab-item01 .item01>.img-con>img{content:url('../img/img_behave01_03_01_dark.svg');}
.m-behave .tab-content .tab-item01 .item02>.img-con>img{content:url('../img/img_behave01_03_02_dark.svg');}
.m-behave .tab-content .tab-item01 .item03>.img-con>img{content:url('../img/img_behave01_03_03_dark.svg');}
.m-behave .tab-content .tab-item01 .item04>.img-con>img{content:url('../img/img_behave01_03_04_dark.svg');}
.m-behave .tab-content .tab-item01 .item05>.img-con>img{content:url('../img/img_behave01_03_05_dark.svg');}

/* 태풍 tab-item02 */
.m-behave .tab-content .tab-item02 .item01>.img-con>img{content:url('../img/img_behave02_03_01_dark.svg');}
.m-behave .tab-content .tab-item02 .item02>.img-con>img{content:url('../img/img_behave02_03_02_dark.svg');}
.m-behave .tab-content .tab-item02 .item03>.img-con>img{content:url('../img/img_behave02_03_03_dark.svg');}
.m-behave .tab-content .tab-item02 .item04>.img-con>img{content:url('../img/img_behave02_03_04_dark.svg');}
.m-behave .tab-content .tab-item02 .item05>.img-con>img{content:url('../img/img_behave02_03_05_dark.svg');}

/* 폭염 tab-item03 */
.m-behave .tab-content .tab-item03 .item01>.img-con>img{content:url('../img/img_behave03_03_01_dark.svg');}
.m-behave .tab-content .tab-item03 .item02>.img-con>img{content:url('../img/img_behave03_03_02_dark.svg');}
.m-behave .tab-content .tab-item03 .item03>.img-con>img{content:url('../img/img_behave03_03_03_dark.svg');}
.m-behave .tab-content .tab-item03 .item04>.img-con>img{content:url('../img/img_behave03_03_04_dark.svg');}
.m-behave .tab-content .tab-item03 .item05>.img-con>img{content:url('../img/img_behave03_03_05_dark.svg');}

/* 미세먼지 tab-item04 */
.m-behave .tab-content .tab-item04 .item01>.img-con>img{content:url('../img/img_behave04_03_01_dark.svg');}
.m-behave .tab-content .tab-item04 .item02>.img-con>img{content:url('../img/img_behave04_03_02_dark.svg');}
.m-behave .tab-content .tab-item04 .item03>.img-con>img{content:url('../img/img_behave04_03_03_dark.svg');}
.m-behave .tab-content .tab-item04 .item04>.img-con>img{content:url('../img/img_behave04_03_04_dark.svg');}

/* 한파 tab-item05 */
.m-behave .tab-content .tab-item05 .item01>.img-con>img{content:url('../img/img_behave05_03_01_dark.svg');}
.m-behave .tab-content .tab-item05 .item02>.img-con>img{content:url('../img/img_behave05_03_02_dark.svg');}
.m-behave .tab-content .tab-item05 .item03>.img-con>img{content:url('../img/img_behave05_03_03_dark.svg');}
.m-behave .tab-content .tab-item05 .item04>.img-con>img{content:url('../img/img_behave05_03_04_dark.svg');}
.m-behave .tab-content .tab-item05 .item05>.img-con>img{content:url('../img/img_behave05_03_05_dark.svg');}

/* 대설 tab-item06 */
.m-behave .tab-content .tab-item06 .item01>.img-con>img{content:url('../img/img_behave06_03_01_dark.svg');}
.m-behave .tab-content .tab-item06 .item02>.img-con>img{content:url('../img/img_behave06_03_02_dark.svg');}
.m-behave .tab-content .tab-item06 .item03>.img-con>img{content:url('../img/img_behave06_03_03_dark.svg');}
.m-behave .tab-content .tab-item06 .item04>.img-con>img{content:url('../img/img_behave06_03_04_dark.svg');}
.m-behave .tab-content .tab-item06 .item05>.img-con>img{content:url('../img/img_behave06_03_05_dark.svg');}

/* 호우(홍수) tab-item08 */
.m-behave .tab-content .tab-item08 .item01>.img-con>img{content:url('../img/img_behave08_03_01_dark.svg');}
.m-behave .tab-content .tab-item08 .item02>.img-con>img{content:url('../img/img_behave08_03_02_dark.svg');}
.m-behave .tab-content .tab-item08 .item03>.img-con>img{content:url('../img/img_behave08_03_03_dark.svg');}
.m-behave .tab-content .tab-item08 .item04>.img-con>img{content:url('../img/img_behave08_03_04_dark.svg');}
.m-behave .tab-content .tab-item08 .item05>.img-con>img{content:url('../img/img_behave08_03_05_dark.svg');}

/* 산불 tab-item09 */
.m-behave .tab-content .tab-item09 .item01>.img-con>img{content:url('../img/img_behave09_03_01_dark.svg');}
.m-behave .tab-content .tab-item09 .item02>.img-con>img{content:url('../img/img_behave09_03_02_dark.svg');}
.m-behave .tab-content .tab-item09 .item03>.img-con>img{content:url('../img/img_behave09_03_03_dark.svg');}
.m-behave .tab-content .tab-item09 .item04>.img-con>img{content:url('../img/img_behave09_03_04_dark.svg');}
.m-behave .tab-content .tab-item09 .item05>.img-con>img{content:url('../img/img_behave09_03_05_dark.svg');}

/* 메인 재난행동요령 */
.box-unit023{background-color:var(--safe-tag001);}
.box-unit023 .site-unit023 .part-tit{background-color:var(--safe-tag021);}
.box-unit023 .site-unit023 .tit{color:var(--safe-font003);}
.box-unit023 .site-unit023 .tit[class*="act"]:before{filter:var(--ui-filter001);}

/* 메인 기타정보(연락처 및 링크) */
.site-unit025 .item-box[class*="bg"]{background-color:var(--safe-tag020);}
.site-unit025 [class*='link-unit0']>li{background-color:var(--safe-tag021);}

/* 재난행동요령 - .page-prevent */
.page-prevent [class*='site-unit03'] .info-con .tit{background-color:var(--safe-tag031);}
.page-prevent .site-unit031 article .tit .txt{background-color:var(--safe-tag021);color:var(--font-color003);}
.page-prevent .site-unit031 article .lead{color:var(--font-color003);}

.site-unit032 .info-box{background-color:var(--safe-tag021);color:var(--safe-font003);}
.page-prevent .site-unit032 [class*='info-item'] .list li{color:var(--safe-font004);}
.page-prevent .site-unit032 [class*='info-item'] .list li:before{background-color:var(--safe-font004);}

/* 날씨관련 */
body[data-weather] .weekly-area .weekly-field01{border-top-color:var(--safe-tag023);}

/* 재해시 - 태풍페이지 */
body.disaster-mode[data-weather] .typhoon-detail-info{border-top:0;}

/* ===============#### 본문(국문 article, layout) ======================== */
.nav-path01 li.current>a,
.nav-path01 li.current>span{color:var(--safe-font022);}

/* ===============#### 포토맵 ======================== */
.box-photomap01 .info_content,
.box-photomap01 .info_content:after{background-color:var(--safe-tag022);}
.box-photomap01 .photo_thumbnail{background-color:var(--safe-tag041);}
.box-photomap01 .ptm_infowindow_title .tit{}
.box-photomap01 .ptm_infowindow_text{color:var(--safe-font003);}
.box-photomap01 .info_content .ptm_infowindow_close{width:16px;height:16px;content:url(../img/ico_ptm_layerclose01_dark.png);}