@charset "utf-8";

.col-group{display: flex; flex-direction: column; gap: 8px;}
.row-group{display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px;}
.row-group.center{justify-content: center;}
.row-group.between{justify-content: space-between;}
.row-group.toggle{display: none;}
.row-group:nth-of-type(1){margin-top: 0;}
.flex-1{flex: 1;}
.borderBottom{padding-bottom: 12px; border-bottom: 1px solid #00000021;}
.borderTop{padding-top: 8px; border-top: 1px solid #00000021;}
.swiper-button-disabled{opacity: 0.5; pointer-events: none;}

.counter-square{counter-reset: counter-square;}
.counter-square > li{position: relative; padding: 3px 0 8px 28px;}
.counter-square > li::before{display: flex; justify-content: center; align-items: center; counter-increment: counter-square; content: counter(counter-square); position: absolute; top: 0; left: 0; color: white; background-color: var(--color-guide); border-radius: 4px; width: 24px; aspect-ratio: 1 / 1; line-height: 0; font-size: 14px;}

.ul-line > li{position: relative; padding-left: 13px;}
.ul-line > li::before{display: block; content: '-'; position: absolute; top: -1px; left: 0; color: var(--color-guide); font-weight: 500;}



/*스크롤바 시작*/
.css-scroll{overflow-y: auto !important; scrollbar-gutter: stable;}
.css-scroll::-webkit-scrollbar{width: 6px; height: 6px;}
.css-scroll::-webkit-scrollbar-thumb{background-color: #BCBCBC; border-radius: 6px; background-clip: padding-box;}
.css-scroll::-webkit-scrollbar-track{background-color: #f4f5f3; margin: 10px 0;}
@-moz-document url-prefix() {
    .css-scroll{scrollbar-width: 6px; scrollbar-color: #BCBCBC transparent;}
}
/*스크롤바 끝*/

/*tab*/
.js-tab-cont{display: none;}
.js-tab-cont.active{display: block;}

/*table*/
.scroll-table{overflow-x: auto; position: relative;}
.tbl-basic table{width:100%; word-break: keep-all;}
.tbl-basic th,
.tbl-basic td{border-right: 1px solid #d5d5d5;}
.tbl-basic tr th:first-child,
.tbl-basic tr td:first-child{border-left:0}
.tbl-basic tr th:last-child,
.tbl-basic tr td:last-child{border-right:0}
.tbl-basic thead th{background-color:var(--color-bg); padding: 4px 8px; text-align:center; font-weight:normal; color:var(--color-m); border-bottom: 1px solid #d5d5d5;}
.tbl-basic tbody td{text-align:center; padding: 4px 8px;}
.tbl-basic tbody th{font-weight:normal; padding: 4px 8px; background-color:var(--color-bg)}


.sidebar{display: flex; flex-direction: column; position: fixed; top: 14px; left: 20px; z-index: 900; width: 400px;}
.sidebar.open{height: calc(100% - 28px);}
.sidebar.close{height: auto;}


.sidebar-header{position: relative; border-radius: 12px; box-shadow: 6px 14px 20px #00000033;}
.sidebar-header .header-inner{position: relative; z-index: 20; padding: 12px 20px 16px; background: linear-gradient(45deg, #6A31C8, #7551E4); border-radius: 12px;}
.sidebar-header .logo{margin-bottom: 8px;}
.sidebar-header .guide-btn{position: absolute; top: 8px; right: 20px; display: flex; flex-direction: row-reverse; align-items: center; gap: 4px; aspect-ratio: 1 / 1; height: 44px;}
.sidebar-header .guide-btn i{font-size: 1.5rem; color: #FFD545;}
.sidebar-header .guide-btn p{font-size: 14px; font-weight: 500; letter-spacing: -1px; color: white; transition: .3s;}
.sidebar-header .guide-btn:hover p{color: #FFD545;}

/*header - 검색*/
.sidebar-header .search-form{position: relative; margin-bottom: 12px;}
.sidebar-header .search-form .search-bar{width: 100%; padding: 8px 16px; font-weight: 600; color: white; background-color: #28117B; border: none; border-radius: 8px;}
.sidebar-header .search-form .search-bar::placeholder{color: #9388BD;}
.sidebar-header .search-form .btn-search{position: absolute; top: 50%; right: 16px; transform: translateY(-50%);}

/*header - 검색 리스트*/
.sidebar-header .search-detail{position: absolute; top: 46px; left: 0; z-index: 950; display: block; width: 100%; max-height: 400px; padding: 16px 12px; background-color: rgba(255, 255, 255, 0.9); border: 1px solid white; border-radius: 8px;}
.sidebar-header .search-detail .inner{position: relative; width: 100%; height: 100%;}
.sidebar-header .search-detail .btn-close{display: block; margin-left: auto}
.sidebar-header .search-detail .detail-list{overflow-x: hidden; height: 100%; max-height: 340px;}
.sidebar-header .search-detail .item{display: block; width: 100%; padding: 8px 0; border-bottom: 1px solid #ddd; text-align: left;}
.sidebar-header .search-detail .item .title{font-size: 1.125rem; font-weight: 700; margin-bottom: 8px}
.sidebar-header .search-detail .item .cont{color: #555;}
.sidebar-header .search-detail .item.active .title{color: var(--color-m);}
.sidebar-header .search-detail .item.active .cont{color: var(--color-m);}



/*header 메뉴*/
.sidebar-header .nav-list{display: flex; gap: 4px;}
.sidebar-header .nav-list > li{flex: 1;}
.sidebar-header .nav-list .menu-item{position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; height: 84px; padding-top: 8px; font-size: 15px; font-weight: 600; text-align: center; word-break: keep-all; background: white;  color: var(--color-m); border: 1px solid #fff; border-radius: 8px;}
.sidebar-header .nav-list .menu-item .icon{width: 45px; height: 28px; background-size: contain; background-position: center;background-repeat: no-repeat;}
.sidebar-header .nav-list .menu-item:where(:hover, .active){background: linear-gradient(180deg, #ffffff 30%, #FFD545); border: 1px solid #FFEFB7;}
.sidebar-header .nav-list .menu-item.active::after{position: absolute; bottom: -12px; left: 50%; transform: translate(-50%, -50%) rotate(45deg); content: ''; display: block; width: 12px; height: 12px; background-color: #FFD545;}
.sidebar-header .nav-list > li:nth-of-type(1) .menu-item .icon{background-image: url(../../images/home/navBtn-icon02.png);}
.sidebar-header .nav-list > li:nth-of-type(2) .menu-item .icon{background-image: url(../../images/home/navBtn-icon03.png);}
.sidebar-header .nav-list > li:nth-of-type(3) .menu-item .icon{background-image: url(../../images/home/navBtn-icon04.png);}
.sidebar-header .nav-list > li:nth-of-type(4) .menu-item .icon{background-image: url(../../images/home/navBtn-icon05.png);}

/*header 하단 토글 버튼*/
.sidebar-header .sidebar-toggle{position: absolute; bottom: -15px; left: 50%; z-index: 10; transform: translateX(-50%); width: 76px; height: 16px; background: url(../../images/home/ico-toggle-close.png) center no-repeat, linear-gradient(180deg, #6e3dd3,#8668E3); border: 1px solid #613ED2; border-radius: 0 0 10px 10px;}
.sidebar-header .sidebar-toggle.open{background: url(../../images/home/ico-toggle-open.png) center no-repeat, linear-gradient(180deg, #6e3dd3,#8668E3);}

/*메뉴 콘텐츠*/
.aside-cont{z-index: 1; margin-top: 20px; background-color: #ffffff99; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid #ffffff; border-radius: 12px; box-shadow: 6px 14px 20px #00000033;}
.aside-cont .aside-inner{position: relative; padding: 20px 12px 20px;}
.aside-cont .map-type{position: absolute; top: 16px; right: 12px; display: flex;}
.aside-cont .map-type .item{width: 68px; height: 28px; font-size: 14px; font-weight: 500; background-color: white; border: 1px solid #A9A9A9;}
.aside-cont .map-type .item:first-of-type{border-radius: 4px 0 0 4px; border-right: 0;}
.aside-cont .map-type .item:last-of-type{border-radius: 0 4px 4px 0; border-left: 0;}
.aside-cont .map-type .item.active{color: white; background-color: var(--color-m); border-color: var(--color-m);}

.aside-cont .yslf-popup-btn{position: absolute; top: 10px; right: 10px; display: flex; flex-direction: row-reverse; align-items: center; gap: 4px; color: #582bba; transition: .3s;}
.aside-cont .yslf-popup-btn i{font-size: 1.5rem;}
.aside-cont .yslf-popup-btn p{font-size: 14px; letter-spacing: -1px;}
.aside-cont .yslf-popup-btn:hover{color: #381289;}

.aside-cont .cont-title{margin-bottom: 12px;}
.aside-cont .cont-title .title{font-size: 1.25rem; font-weight: 700; margin-bottom: 7px;}
.aside-cont .cont-title .desc{font-size: 15px; color: #858191;}


.aside-cont .tab-type01{display: flex; width: 100%; height: 40px; margin-bottom: 12px; background-color: var(--color-s); border: 1px solid #BAAEE6; border-radius: 6px; box-shadow: inset -6px 6px 12px -4px #00000014;}
.aside-cont .tab-type01 .item{flex: 1; position: relative; color: #7E72A9; transition: .3s;}
.aside-cont .tab-type01 .item:not(:last-of-type)::after{content: ''; display: block; position: absolute; top: 0; right: 0; width: 1px; height: 100%; border-right: 1px solid #BAAEE6;}
.aside-cont .tab-type01 .item.active{color: #fff; background-color:  var(--color-m); border-radius: 6px; box-shadow: 3px 2px 5px -2px #33217366;}
.aside-cont .tab-type01 .item.active::after,
.aside-cont .tab-type01 .item.active + .item::after,
.aside-cont .tab-type01 .item:has(+ .active)::after {content: none;}
.aside-cont .tab-type01 .item:first-of-type.active + .item::after{content: '';}

.aside-cont .form-group{margin-bottom: 12px;}
.aside-cont .form-group .form-title-box{display: flex; align-items: center; gap: 4px; margin-bottom: 8px;}
.aside-cont .form-group .form-title-box .form-title{margin-bottom: 0;}
.aside-cont .form-group .form-title{margin-bottom: 4px; font-size: 15px; font-weight: 600; color: #454545;}
.aside-cont .form-group .group-cont{padding: 8px 12px; background-color: #ffffff80; border: 1px solid #00000021; border-radius: 6px;}
.aside-cont .form-group .form-tab{display: flex; margin-bottom: 12px; border-bottom: 1px solid #0000001A;}
.aside-cont .form-group .form-tab .item{flex: 1; display: block; position: relative; padding-bottom: 8px; color: #888888;}
.aside-cont .form-group .form-tab .item.active{font-weight: 700; color: var(--color-m);}
.aside-cont .form-group .form-tab .item::after{content: ''; display: block; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background-color: transparent; transition: .3s;}
.aside-cont .form-group .form-tab .item.active::after{background-color: var(--color-m);}

.aside-cont .form-group .form-btn{padding: 8px; text-align: center; color: #7E72A9; background-color: var(--color-s); border: 1px solid #BAAEE6; border-radius: 6px; transition: .3s;}
.aside-cont .form-group .form-btn:hover{color: white; background-color: var(--color-m); border-color: var(--color-m);}

.aside-cont .bottom-btn-wrap{display: flex; gap: 4px; margin-top: 28px;}
.aside-cont .bottom-btn-wrap .btn-common:first-of-type(2){background: url(../../images/home/ico-chart.png) #AAA2C4 center right 12px no-repeat;}
.aside-cont .bottom-btn-wrap .btn-common:first-of-type:hover(2){background-color: #948bb1; border-color: #948bb1;}
.aside-cont .bottom-btn-wrap .btn-common:nth-of-type{background: url(../../images/home/ico-analyze.png) var(--color-m) center right 12px no-repeat;}
.aside-cont .bottom-btn-wrap .btn-common:nth-of-type:hover{background-color: #502bd3; border-color: #502bd3;}


.map-wrap{position: relative; display: flex; width: 100%; height: 100dvh; overflow: hidden;}
.map{position: relative; width: 100%; height: 100%;}

/*point- 맵 포인트*/
.map-point{position: fixed; top: 50%; left: 50%;}
.map-point .point-inner{position: relative; z-index: 50; min-width: 140px; padding: 16px 12px 24px; text-align: center; color: #303030; background-color: white; border-radius: 16px;}
.map-point .point-inner::after{content: ''; position: absolute; bottom: -16px; left: 50%; z-index: 40; display: block; width: 0px; height: 0px; border-top: 20px solid white; border-left: 15px solid transparent; border-right: 15px solid transparent; transform: translateX(-50%);}
.map-point .point-title{margin-bottom: 8px; padding-bottom: 8px; font-weight: 700; border-bottom: 1px solid #d0d0d0;}
.map-point .point-list{width: fit-content; margin: auto;}
.map-point .point-list .item{display: flex; gap: 10px; margin-bottom: 12px; font-size: 14px;}
.map-point .point-list .item:last-of-type{margin-bottom: 0;}

/*map-hover*/
.map-hover-item{margin-bottom: 3px; font-size: 14px;}
.map-hover-item:last-of-type{margin-bottom: 0;}
.map-hover-item.icon{padding-left: 20px; background-position: center left; background-repeat: no-repeat;}
.map-hover-item.icon-01{background-image: url(../../images/home/ico-day.png);}/*낮*/
.map-hover-item.icon-02{background-image: url(../../images/home/ico-night.png);}/*밤*/
.map-hover-item.icon-03{background-image: url(../../images/home/ico-lateNight.png);}/*심야*/
.map-hover-item.icon-04{background-image: url(../../images/home/ico-home.png);}/*주거*/
.map-hover-item.icon-05{background-image: url(../../images/home/ico-building.png);}/*직장*/
.map-hover-item.icon-06{background-image: url(../../images/home/ico-visit.png);}/*방문*/
.map-hover-item.icon-07{background-image: url(../../images/home/ico-male.png);}/*남*/
.map-hover-item.icon-08{background-image: url(../../images/home/ico-female.png);}/*녀*/


/*util - 유틸*/
/*.util-wrap .util-top{position: absolute; top: 20px; right: 20px; z-index: 999; display: flex; justify-content: flex-end; align-items: flex-start; gap: 12px;}*/
.util-wrap .util-title{font-weight: 600; margin-bottom: 8px}

.util-wrap .util-top .map-popul{position: absolute; top: 10px; left: 430px; z-index: 899; max-width: calc(100% - 680px); padding: 4px; font-size: 14px; background-color: rgba(255, 255, 255, 0.7); border: 1px solid white; border-radius: 4px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.util-wrap .util-top .map-popul .tbl-basic{font-family: 'HakgyoansimBareondotum'; font-weight: 600;}

.util-wrap .mo-top-btn{display: none;}
.util-wrap .mo-top-btn .item{}

.util-wrap .map-zoom .js-view-btn .item .main{display: block;}
.util-wrap .map-zoom .js-view-btn .item .white{display: none;}
.util-wrap .map-zoom .js-view-btn .item.active{background-color: var(--color-m); border-color: var(--color-m);}
.util-wrap .map-zoom .js-view-btn .item.active .main{display: none;}
.util-wrap .map-zoom .js-view-btn .item.active .white{display: block;}

.util-wrap .util-top .map-type{position: absolute; top: 10px; right: 182px; z-index: 899; display: flex; flex-direction: column; width: 52px; height: 64px; background-color: white; border-radius: 4px; overflow: hidden;}
.util-wrap .util-top .map-type .item{flex: 1; font-size: 14px; border: 1px solid #A9A9A9;}
.util-wrap .util-top .map-type .item:first-of-type{border-radius: 4px 4px 0 0;}
.util-wrap .util-top .map-type .item:last-of-type{border-radius: 0 0 4px 4px;}
.util-wrap .util-top .map-type .item.active{color: white; background-color: var(--color-m); border: 1px solid #3B0CE5;}

.util-wrap .util-top .map-style{position: absolute; top: 10px; right: 10px; z-index: 899; display: flex; flex-wrap: wrap; gap: 4px; width: 168px;}
.util-wrap .util-top .map-style .item{display: flex; flex-direction: column; width: calc((100% / 3) - (8px / 3)); height: 64px; background-color: white; border: 1px solid #A9A9A9; border-radius: 4px; box-shadow: 0 4px 8px -2px #00000026; overflow: hidden;}
.util-wrap .util-top .map-style .item .img-box{height: 40px;}
.util-wrap .util-top .map-style .item .style-name{display: flex; justify-content: center; align-items: center; flex: 1; font-size: 12px; text-align: center;}
.util-wrap .util-top .map-style .item:hover{border-color: var(--color-m);}
.util-wrap .util-top .map-style .item.active{border-color: var(--color-m);}
.util-wrap .util-top .map-style .item.active .style-name{color: var(--color-m); font-weight: 700;}

.util-wrap .util-top .map-zoom{position: absolute; top: 108px; right: 10px; z-index: 899; display: flex; flex-direction: column; gap: 4px;}
.util-wrap .util-top .map-zoom .btn-zoom{flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 44px; aspect-ratio: 1 / 1; background-color: white; border: 1px solid #A9A9A9; border-radius: 4px;}
.util-wrap .util-top .map-zoom .btn-zoom:hover{border-color: var(--color-m);}
.util-wrap .util-top .map-zoom .btn-zoom .text{font-size: 12px; font-weight: 500; letter-spacing : -1px; color: #333;}
.util-wrap .util-top .map-zoom .btn-zoom .text.main{color: var(--color-m);}
.util-wrap .util-top .map-zoom .btn-zoom .text.white{color: white;}

/*.util-wrap .util-bottom{position: absolute; bottom: 40px; right: 20px; z-index: 999; display: flex; justify-content: flex-end; align-items: flex-end; gap: 12px;}*/

.util-wrap .util-bottom .guide-wrap{position: absolute; bottom: 20px; right: 256px; z-index: 899; max-width: calc(100% - 686px); padding: 4px 8px; background-color: rgba(255, 255, 255, 0.7); border: 1px solid white; border-radius: 4px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.util-wrap .util-bottom .guide-wrap .text{position: relative; padding-left: 16px;}
.util-wrap .util-bottom .guide-wrap .text::before{content: '※'; position: absolute; top: 0; left: 0; }

.util-wrap .util-bottom .legend-wrap{position: absolute; bottom: 20px; right: 10px; z-index: 899; display: flex; flex-direction: column; gap: 8px;}
.util-wrap .util-bottom .map-legend{width: 236px; padding: 10px; background-color: rgba(255, 255, 255, 0.7); border: 1px solid white; border-radius: 4px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.util-wrap .util-bottom .map-legend .legend-title{text-align: center;}
.util-wrap .util-bottom .map-legend .text{display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 13px; font-weight: 600;}
.util-wrap .util-bottom .map-legend .legend-bar{display: flex; height: 8px; border-radius: 2px;}
.util-wrap .util-bottom .map-legend .color{flex: 1;}
.util-wrap .util-bottom .map-legend .color-1{background-color: #FF63DD;}
.util-wrap .util-bottom .map-legend .color-2{background-color: #925CFF;}
.util-wrap .util-bottom .map-legend .color-3{background-color: #4E80FF;}
.util-wrap .util-bottom .map-legend .color-4{background-color: #72D5FF;}
.util-wrap .util-bottom .map-legend .color-5{background-color: #D8FFFA;}

/*사이드 차트 side-chart*/
.map-wrap.show-chart .map{width: calc(100% - 400px);}
.map-wrap.show-chart .side-chart{display: block;}
.side-chart{display: none; width: 400px; height: 100%; padding: 7px; background-color: #EDEDED;}
.side-chart .inner{display: flex; flex-direction: column; height: 100%;}
.side-chart .btn-chart-close{display: none; margin-left: auto;}
.side-chart .title-box{margin-bottom: 12px;}
.side-chart .title{font-size: 1.15rem; font-weight: 600; text-align: center; margin-bottom: 12px;}
.side-chart .ref{text-align: center;}
.side-chart .detail-ref{padding: 8px 12px; background-color: rgba(255, 255, 255, 0.5); border: 1px solid white; border-radius: 12px;}
.side-chart .detail-ref .item{display: flex; gap: 8px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #ddd;}
.side-chart .detail-ref .item:last-of-type{margin-bottom: 0; padding-bottom: 0; border-bottom: 0}
.side-chart .detail-ref dt{position: relative; flex: 3.4; font-weight: 600; color: #2b186f;}
.side-chart .detail-ref dt::after{content:''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: block; width: 1px; height: 70%; background-color: #bbb;}
.side-chart .detail-ref dd{flex: 6.6;}
.side-chart .date-wrap{flex: 1; padding-right: 4px;}
.side-chart .data-group:not(:last-of-type){margin-bottom: 8px;}
.side-chart .data-group.row{display: flex; gap: 8px;}
.side-chart .chart-item{flex: 1;}
.side-chart .chart-item .chart-box{display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 4px 4px 0 4px; background-color: rgba(255, 255, 255, 0.5); border: 1px solid white; border-radius: 12px;}
.side-chart .chart-item .chart-title{width: 100%; margin-top: 5px; margin-left: 10px; font-size: 15px; font-weight: 600; color: #2b186f;}
.side-chart .chart-item .chart-box img{width: 100%;}
.side-chart .chart-item .legend-box{display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px;}
.side-chart .chart-item .legend-item{display: flex; align-items: center; gap: 2px; font-size: 12px;}
.side-chart .chart-item .legend-item .color{width: 8px; aspect-ratio: 1 / 1; border-radius: 50%;}
.side-chart .chart-tab{display: flex; justify-content: center; margin-bottom: 8px;}
.side-chart .chart-tab .item{display: flex; justify-content: center; align-items: center; min-width: 80px; padding: 4px 8px; font-weight: 600; background-color: white; border: 1px solid #ddd; border-right: 0;}
.side-chart .chart-tab .item:last-of-type{border-right: 1px solid #ddd;}
.side-chart .chart-tab .item.active{color: white; background-color: var(--color-m);}
.side-chart .download-ex{display: flex; justify-content: center; align-items: center; width: 100%; padding: 8px 12px; color: white; background-color: #107C41; border-radius: 4px;}
.side-chart .download-ex:hover{background-color: #0A5325;}

/*사이드차트 완료시 삭제
.side-chart{display: block;}
*/

/*popup-팝업*/
.popup-wrap{position: fixed; z-index: 1200; top: 0; left: 0; width: 100vw; height: 100dvh; background-color: #00000080;}
.popup-wrap .popup-inner{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; max-width: 1284px; width: calc(100% - 40px); max-height: 776px; height: calc(100dvh - 40px); background-color: white; border-radius: 16px; overflow: hidden;}

.popup-wrap .popup-header{position: relative; padding: 28px 0; border-bottom: 1px solid #c2c2c2;}
.popup-wrap .popup-header .popup-title{padding-left: 72px; padding-right: 80px; font-size: 1.75rem; font-weight: 700;}
.popup-wrap .popup-header .btn-close{position: absolute; top: 50%; right: 28px; transform: translateY(-50%);}

.popup-wrap .popup-cont{flex: 1; padding: 40px 20px 40px 72px; overflow: hidden;}
.popup-wrap .popup-cont .cont-inner{display: flex; flex-direction: column; height: 100%; padding-right: 80px;}
.popup-wrap .popup-cont .img-box{float: left; margin-right: 40px; margin-bottom: 40px; width: 420px;}
.popup-wrap .popup-cont .cont-title{font-size: 1.75rem; font-weight: 700; color: var(--color-m);}
.popup-wrap .popup-cont .cont-desc{margin: 16px 0 40px; font-size: 1.25rem; font-weight: 600; line-height: 32px;}
.popup-wrap .popup-cont .cont-text{font-size: 1.125rem; font-weight: 300; line-height: 30px; color: #666666;}

.popup-inner {position: relative;}
.popup-side {position: absolute; left: 0; top: 150px; width: 360px; height: calc(100% - 170px); padding-left: 30px; overflow-y: auto;}


.popup-list {margin: 12px 0 12px 0; padding-left: 0; list-style: none;}
.popup-list li {margin-bottom: 12px; line-height: 1.5;}
.list-title {display: block; font-weight: 600; color: #333;}
.list-title::before {content: "• "; color: var(--color-m);}
.list-desc {display: block; margin-left: 15px; font-size: 0.95rem; color: #666;}
/* explain css End */

.popup-wrap.chart{display: none;}
.popup-wrap.chart .popup-cont .cont-inner{display: block;}
.popup-wrap.chart .papup-chart-cont{height: 1200px; background-color: gray;}

/*유저 가이드*/
.popup-wrap.user-guide .popup-inner{max-width: 1040px; max-height: 780px;}

.popup-wrap.user-guide .cont-inner{position: relative; display: block;}

.popup-wrap.user-guide .guide-tab{position: absolute; top: 0; left: 340px; z-index: 1000; display: flex; gap: 8px; margin-bottom: 20px; background-color: white;}
.popup-wrap.user-guide .guide-tab .item{position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 88px; height: 84px; padding: 8px 4px 0; font-size: 15px; font-weight: 600; text-align: center; word-break: keep-all; background: white;  color: var(--color-m); border: 1px solid #ddd; border-radius: 8px;}
.popup-wrap.user-guide .guide-tab .item .icon{width: 45px; height: 28px; background-size: contain; background-position: center;background-repeat: no-repeat;}
.popup-wrap.user-guide .guide-tab .item:where(:hover, .active){background: linear-gradient(180deg, #ffffff 30%, #FFD545); border: 1px solid #FFEFB7;}
.popup-wrap.user-guide .guide-tab .item.active::after{position: absolute; bottom: -12px; left: 50%; transform: translate(-50%, -50%) rotate(45deg); content: ''; display: block; width: 12px; height: 12px; background-color: #FFD545;}
.popup-wrap.user-guide .guide-tab .item:nth-of-type(1) .icon{background-image: url(../../images/home/navBtn-iconMain.png);}
.popup-wrap.user-guide .guide-tab .item:nth-of-type(2) .icon{background-image: url(../../images/home/navBtn-icon02.png);}
.popup-wrap.user-guide .guide-tab .item:nth-of-type(3) .icon{background-image: url(../../images/home/navBtn-icon03.png);}
.popup-wrap.user-guide .guide-tab .item:nth-of-type(4) .icon{background-image: url(../../images/home/navBtn-icon04.png);}
.popup-wrap.user-guide .guide-tab .item:nth-of-type(5) .icon{background-image: url(../../images/home/navBtn-icon05.png);}

.popup-wrap.user-guide .left-img{width: 320px;}
.popup-wrap.user-guide .left-img img{width: 100%;}

.popup-wrap.user-guide .tab-cont{overflow: hidden; height: 100%;}
.popup-wrap.user-guide .guide-cont{height: 100%;}
.popup-wrap.user-guide .guide-cont .swiper{height: 100%;}
.popup-wrap.user-guide .guide-cont .slide-item{display: flex; gap: 20px;  background-color: white; opacity: 0 !important; transition: .3s;}
.popup-wrap.user-guide .guide-cont .slide-item.swiper-slide-visible{opacity: 1 !important;}
.popup-wrap.user-guide .guide-cont .slide-item .guide-right{display: flex; flex-direction: column; flex: 1; margin-top: 100px; padding-bottom: 40px;}
.popup-wrap.user-guide .guide-cont .guide-title{margin-bottom: 16px; font-size: 1.5rem; font-weight: 700; color: var(--color-m);}
.popup-wrap.user-guide .guide-cont .desc-box{padding: 4px 0;}
.popup-wrap.user-guide .guide-cont .control-btn-wrap{position: absolute; bottom: 0; right: 0; z-index: 1000; display: flex; gap: 40px;}
.popup-wrap.user-guide .guide-cont .control-btn{width: 68px; height: 28px; cursor: pointer;}
.popup-wrap.user-guide .guide-cont .control-btn.prev{text-align: right; background: url(../../images/home/ico-guideLeft.png) bottom / 100% no-repeat;}
.popup-wrap.user-guide .guide-cont .control-btn.next{background: url(../../images/home/ico-guideRight.png) bottom / 100% no-repeat;}

/* explain css Start */
.popup-wrap.user-guide .guide-main .left-img{height: 320px; background-color: #ddd; border-radius: 12px;}
.popup-wrap.user-guide .guide-main .desc-title {font-size: 1.5rem; font-weight: 700; color: var(--color-m); margin-bottom: 8px;}
.popup-wrap.user-guide .guide-main ul {margin: 8px 0 20px 8px;}
.popup-wrap.user-guide .guide-main .desc-note {font-size: 0.85rem; color: #666; padding-top: 10px; border-top: 1px dashed #ddd;}

/*생활인구란 팝업*/
.popup-wrap.yslf-guide .popup-inner{max-width: 1040px; max-height: 520px;}
.popup-wrap.yslf-guide .cont-inner{display: flex; flex-direction: row; align-items: flex-start; gap: 20px;}
.popup-wrap.yslf-guide .left-img{width: 320px; aspect-ratio: 1 / 1; background-color: #ddd; border-radius: 12px;}
.popup-wrap.yslf-guide .guide-right{flex: 1;}
.popup-wrap.yslf-guide .guide-title{margin-bottom: 16px; font-size: 1.5rem; font-weight: 700; color: var(--color-m);}
.popup-wrap.yslf-guide .desc-note {font-size: 0.85rem; color: #666; padding-top: 10px; border-top: 1px dashed #ddd;}

/*차트*/
.blocker{z-index: 1000;}
.modal{max-width: 1200px; width: calc(100% - 20px); height: calc(100vh - 50px); padding: 0; overflow: hidden;}
.modal #ui-modal-page{display: flex; flex-direction: column; height: 100%;}
.modal #ui-modal-page #title{padding: 28px 80px 28px 72px; background-color: #f9f7ff; border-bottom: 1px solid #c2c2c2; font-size: 1.75rem; font-weight: 700;}
.modal a.close-modal{top: 36px; right: 28px; width: 20px; height: 20px; background-image: url(../../images/home/ico-popupClose.png);}
.modal .chart-wrapper{margin-bottom: 28px;}
.modal .chart-wrapper .chart-item { margin-bottom: 28px;}
.modal .popup-cont{padding: 20px 0px 20px 30px; overflow: hidden;}
.modal .popup-cont .cont-inner{display: flex; flex-direction: column; height: 100%; padding-right: 30px;}
.modal .popup-cont .modal-btn-wrap{display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 12px;}
.popup-chart-btn{padding: 8px 12px; color: white; background-color: var(--color-m); border-radius: 4px;}

.modal .chart-wrapper .chart-item { margin-bottom: 28px;overflow-x: auto;overflow-y: visible;flex-shrink: 0;}
.modal .chart-wrapper .chart-item canvas { width: auto !important; height: 550px !important;}

/*모달창 탭*/
.tabs-header{display:flex;justify-content:space-between;align-items:center;margin-bot tom:12px;border-bottom:1px solid #ddd;}
.tab-menu { display: flex; gap: 10px; border-bottom: 1px solid #ddd; padding-left: 0; margin: 0 0 10px 0; }
.tab-menu li { list-style: none; padding: 8px 16px; cursor: pointer; font-weight: bold; border-bottom: 2px solid transparent; }
.tab-menu li.active { border-bottom: 2px solid #007bff; color: #007bff; }


/* 축적도 */
.leaflet-top, .leaflet-bottom{z-index: 900;}
.leaflet-control-scale-line {position: absolute; right: 0; top: 68px; width: 52px !important; padding: 2px; color: var(--color-m); background-color: #f6f3ff; border: 2px solid var(--color-m); border-top: 0; text-align: center;}

/* 차트라벨 */
.chart-label{background: rgba(255, 255, 255, 0.95);color: #000;padding: 5px;border-radius: 3px;border: 1px solid #ccc;font-size: 12px;display: flex;align-items: center;gap: 5px;box-shadow: 0px 2px 6px rgba(0,0,0,0.1);}

@media (max-width:1600px){

}

@media (max-width:1400px){
    .sidebar{max-width: 400px; width: 32%;}
    .sidebar-header .header-inner{padding: 12px;}

    .map-wrap.show-chart .map{width: 100%;}
    .side-chart{position: absolute !important; top: 0; right: 0; z-index: 980;}
    .side-chart .btn-chart-close{display: block}

    .popup-wrap.user-guide .popup-cont{margin-left: 0; overflow-y: auto;}
    .popup-wrap.user-guide .popup-side{position: static; width: 100%; height: auto; margin-bottom: 12px; padding-left: 0;}
    .popup-wrap.user-guide .popup-side .guide-desc{padding-left: 0;}
}

@media (max-width:1200px){
    .util-wrap .util-top .map-popul{top: 84px; left: calc(32% + 30px); max-width: calc(68% - 96px);}
    .util-wrap .util-bottom .guide-wrap{max-width: calc(68% - 286px);}
}

@media (max-width:1024px){
    .sidebar{position: unset;}
    .sidebar-header{position: fixed; top: 10px; left: 10px; z-index: 950; width: calc(100% - 20px);}
    .sidebar-header .nav-list .menu-item{height: 72px;}
    .sidebar-header .sidebar-toggle.open{background: url(../../images/home/ico-toggle-close.png) center no-repeat, linear-gradient(180deg, #6e3dd3,#8668E3);}
    .sidebar-header .sidebar-toggle.close{background: url(../../images/home/ico-toggle-open.png) center no-repeat, linear-gradient(180deg, #6e3dd3,#8668E3);}

    .aside-cont{position: absolute !important; bottom: 0; left: 10px; z-index: 990; display: none; width: calc(100% - 20px); height: calc(100% - 220px); margin-top: 0; border-radius: 12px 12px 0 0;}

    /*.util-wrap .util-top{top: 220px; right: 10px; z-index: 910; flex-wrap: wrap; width: calc(100% - 20px);}*/
    .util-wrap .util-top .map-popul{top: 294px; left: 10px; max-width: none; width: calc(100% - 76px); height: 90px;}
    .util-wrap .util-top .map-style{top: 222px;}
    .util-wrap .util-top .map-zoom{top: 318px;}
    .util-wrap .util-top .map-type{top: 222px;}
    /*.util-wrap .util-bottom{bottom: 10px; right: 10px; z-index: 910; width: calc(100% - 20px);}*/
    .util-wrap .util-bottom .guide-wrap{max-width: calc(100% - 266px);}


    .side-chart{top: auto; bottom: 0; left: 0px; width: 100%; height: calc(100% - 220px); border-radius: 16px 16px 0 0;}



    .popup-wrap .popup-header .popup-title{padding-left: 40px;}
    .popup-wrap .popup-cont{padding: 40px 20px 40px 42px;}
    .popup-wrap .popup-cont .cont-inner{padding-right: 20px;}
    .popup-wrap .popup-cont .img-box{width: 50%; margin-right: 20px; margin-bottom: 8px;}
    .popup-wrap .popup-cont .cont-desc{margin: 16px 0 20px;}

    .popup-wrap.user-guide .guide-tab{left: 280px; flex-wrap: wrap; width: calc(100% - 280px);}
    .popup-wrap.user-guide .guide-tab .item{width: calc((100% / 3) - (16px / 3)); height: 64px;}
    .popup-wrap.user-guide .guide-cont .slide-item{gap: 20px;}
    .popup-wrap.user-guide .left-img{width: 260px;}
    .popup-wrap.user-guide .guide-cont .slide-item .guide-right{margin-top: 150px;}


    .popup-wrap.yslf-guide .left-img{width: 40%;}



    .modal #ui-modal-page #title{padding-left: 40px;}
    .modal .popup-cont .cont-inner{padding-right: 20px;}

	/* 축적도 */
	.leaflet-control-scale-line {top: 280px;text-align: center;}
}


@media (max-width:640px){
    .sidebar-header .nav-list .menu-item{height: 80px;}
    .aside-cont{height: calc(100% - 224px);}
    .util-wrap .util-top{top: 224px;}
    .util-wrap .util-bottom{flex-direction: column-reverse;}
    .util-wrap .util-bottom .guide-wrap{bottom: 95px; right: 10px; max-width: none; width: calc(100% - 20px);}
    .util-wrap .util-bottom .legend-wrap{width: calc(100% - 20px); flex-direction: row}
    .util-wrap .util-bottom .map-legend{flex: 1; width: auto;}

    .util-wrap .mo-top-btn{position: absolute; top: 222px; right: 10px; z-index: 899; display: flex; flex-direction: column; gap: 4px;}
    .util-wrap .mo-top-btn .item{flex: 1; display: flex; justify-content: center; align-items: center; width: 40px; aspect-ratio: 1 / 1; background-color: white; border: 1px solid #A9A9A9; border-radius: 4px;}
    .util-wrap .mo-top-btn .item.active{background-color: var(--color-m); border-color: var(--color-m)}
    .util-wrap .mo-top-btn .item .white{display: none;}
    .util-wrap .mo-top-btn .item.active .main{display: none;}
    .util-wrap .mo-top-btn .item.active .white{display: block;}
    .util-wrap .mo-top-inner{display: none;}
    .util-wrap .mo-top-inner.active{display: block;}
    .util-wrap .util-top .map-zoom{top: 292px; right: 60px;}
    .util-wrap .util-top .map-style{right: 60px;}
    .util-wrap .util-top .map-style .item .img-box{display: none;}
    .util-wrap .util-top .map-style .item{height: 40px; padding: 4px;}
    .util-wrap .util-top .map-type{right: 232px;}
    .util-wrap .util-top .map-type .item{font-size: 14px; font-weight: normal;}
    .leaflet-control-scale-line{top: 256px; right:50px; display: none;}
    .leaflet-control-scale-line.active{display: block;}
    .util-wrap .util-top .map-zoom .js-view-btn{display: none;}

    .util-wrap .util-top .map-popul{top: 222px; right: 58px; width: calc(100% - 64px);}


    .popup-wrap .popup-header{padding: 16px 0;}
    .popup-wrap .popup-header .popup-title{padding-left: 20px; font-size: 1.5rem;}
    .popup-wrap .popup-cont{padding: 20px 10px 20px 20px;}
    .popup-wrap .popup-cont .cont-inner{height: auto; padding-right: 10px;}
    .popup-wrap .popup-cont .img-box{width: 100%; float: unset;}
    .popup-wrap .popup-cont .cont-title{font-size: 1.5rem;}

    .popup-wrap.user-guide .popup-cont{overflow: auto;}
    .popup-wrap.user-guide .guide-tab{position: static; width: 100%;}
    .popup-wrap.user-guide .guide-tab .item{height: 88px;}
    .popup-wrap.user-guide .tab-cont{height: auto;}
    .popup-wrap.user-guide .guide-cont .slide-item{flex-direction: column; padding: 0 2px;}
    .popup-wrap.user-guide .left-img{width: 100%; margin: auto;}
    .popup-wrap.user-guide .left-img img{display: block; max-width: 360px; margin: auto;}
    .popup-wrap.user-guide .guide-cont .slide-item .guide-right{height: calc(100% - 260px); margin-top: 0;}
    .popup-wrap.user-guide .guide-cont .guide-title{font-size: 1.125rem;}
    .popup-wrap.user-guide .guide-main .left-img{max-height: 280px; height: auto; aspect-ratio: 1 / 1;}
    .popup-wrap.user-guide .guide-main .left-img img{width: 100%; height: 100%; object-fit: cover;}

    .popup-wrap.yslf-guide .popup-inner{max-height: calc(100dvh - 40px); height: auto;}
    .popup-wrap.yslf-guide .cont-inner{flex-direction: column;}
    .popup-wrap.yslf-guide .left-img{width: 100%; max-height: 280px; height: auto; aspect-ratio: 1 / 1; margin: auto;}
    .popup-wrap.yslf-guide .left-img img{display: block; max-width: 360px; width: 100%; height: 100%; object-fit: cover; margin: auto;}
    .popup-wrap.yslf-guide .guide-title{font-size: 1.125rem;}

    .modal #ui-modal-page #title{padding-left: 20px; font-size: 1.5rem;}
    .modal .popup-cont{padding: 16px 10px 16px 20px;}
    .modal .popup-cont .cont-inner{padding-right: 10px;}
    .modal a.close-modal{top: 32px;}

}


@media (max-width:480px){
    .row-group input.input-text,
    .row-group select.input-text{flex: unset;}
    .sidebar-header .header-inner{padding: 12px 8px;}
    .sidebar-header .logo{width: 140px;}
    .sidebar-header .guide-btn{top: 4px; right: 10px;}
    .sidebar-header .search-form .search-bar{padding: 12px;}
    .sidebar-header .search-detail{top: 44px;}
    .sidebar-header .nav-list .menu-item{height: 80px; padding-top: 8px; font-size: 14px;}
    .sidebar-header .nav-list > li .menu-item .icon{width: 32px; height: 28px; background-size: 32px;}
    .aside-cont{height: calc(100% - 222px);}
    .aside-cont .group-cont .row-group > label{width: 100%;}


}