@charset "utf-8";

/* ----------------------------------

Name: responsive.css
Categorie : 반응형 레이아웃
Author : 이상혁
Version : v.1.0
Created : 2024-09-09
Last update : 2024-09-09
-------------------------------------

Table of contents

	01. 레이아웃

------------------------------------- */

/* ===================================
	01. 레이아웃 시작
====================================== */
@media (min-width: 768px) {
	.page-main.page-portal .main-container-inner,
    .page-front .page-content-wrapper,
    .page-front .navbar-global-inner,
    .page-front .navbar-collapse-wrapper,
    .page-front .header-global-wrapper,
    .page-front .page-footer .page-footer-inner {
        width: 750px;
    }
	.form-inline.row {
		display: block;
	}
	.form-list > .form-inline.row {
		margin-bottom: 0px;
	}
	.form-list > .form-inline.row > .input-group {
		margin-bottom: 4px;
	}
	.form-list > .form-inline.row:last-child > .input-group:last-child {
		margin-bottom: 0px;
	}
}
@media (min-width: 992px) {
	.page-main.page-portal .main-container-inner,
    .page-front .page-content-wrapper,
    .page-front .navbar-global-inner,
    .page-front .navbar-collapse-wrapper,
    .page-front .header-global-wrapper,
    .page-front .page-footer .page-footer-inner {
        width: 970px;
    }
	.form-list > .form-inline.row:last-child > .input-group {
		margin-bottom: 4px;
	}
}
@media (min-width: 1200px) {
	.page-main.page-portal .main-container-inner,
    .page-front .page-content-wrapper,
    .page-front .navbar-global-inner,
    .page-front .navbar-collapse-wrapper,
    .page-front .header-global-wrapper,
    .page-front .page-footer .page-footer-inner {
        width: 1280px;
    }
	.form-list > .form-inline.row:last-child > .input-group {
		margin-bottom: 0px;
	}
}
@media (max-width: 1200px) {
	.navbar-nav > li.dropdown > a::after, 
	.navbar-nav > li.dropdown.active > a::after {
		right: -14px;
	}
	header .total-search-wrapper {
		margin-left: -136px;
		width: 278px;
	}
	header nav.navbar .navbar-nav > li > a, 
	nav.navbar.bootsnav ul.nav > li > a {
		padding: 0px 30px 0px 30px;
		font-size: 21px;
	}
	.page-admin header nav.navbar .navbar-nav > li > a, 
	.page-admin nav.navbar.bootsnav ul.nav > li > a {
		padding: 0px 14px 0px 14px;
        font-size: 16px;
	}

	.service-contents {
		max-width: 300px;
	}
	.faq-contents {
		max-width: 300px;
	}
	.notice-contents {
		max-width: 300px;
	}
	.faq-list-text {
		width: 240px;
	}
	.faq-list-division,
	.service-day {
		display: none;
	}
	.service-box-con {
		padding: 18px 24px;
	}
	.service-box-con .btn {
		right: 10px;
		bottom: 10px;
	}
	.username-li {
		display: none !important;
	}
	header .logo.logo-iseoulu .logo-dark,
	.page-family-site {
		display: none;
	}

	.page-main.page-portal .main-visual-wrapper {
		margin-bottom: 20px;
	}
	.page-main.page-portal .main-visual-wrapper .main-visual-slogan .slogan-text-02 {
		font-size: 36px;
		line-height: 36px;
	}
	.page-main.page-portal .main-visual-wrapper .main-visual-slogan .slogan-text-03 {
		font-size: 16px;
		line-height: 18px;	
	}

	.page-main.page-portal .main-visual-wrapper::before {
		width: 510px;
	}

	.page-main.page-portal .latest-posts-wrapper {
		display: flex;
		flex-direction: column;
		gap: 30px;
	}
	.page-main.page-portal .latest-posts-box {
		width: 100%;
	}
	.main-middle-slogan {
		display: none;
	}
	.main-middle-wrapper .main-middle-box-group {
		display: flex;
		flex-direction: row;
		gap: 30px;
	}
	.main-middle-wrapper .main-middle-box-group .main-middle-box {
		width: 100%;
	}
	.main-bottom-wrapper .main-bottom-box-group .main-bottom-box {
		width: 256px;
		padding: 24px;
	}
	.main-bottom-wrapper .main-bottom-box-group .main-bottom-box .bottom-box-btn {
		text-align: center;
	}
}
@media (max-width: 992px) {
	header .total-search-wrapper {
		margin-left: -190px;
    	width: 286px;
	}
	.page-admin header nav.navbar .navbar-nav > li > a, 
	.page-admin nav.navbar.bootsnav ul.nav > li > a {
		padding: 0px 20px 0px 20px;
        font-size: 20px;
	}
	
	header nav.navbar .navbar-nav > li > a, 
	nav.navbar.bootsnav ul.nav > li > a {
		padding: 0px 20px 0px 20px;
		font-size: 17px;
	}

	.bottom-contents-wrap .bottom-contents-row {
		display: block;
	}
	.service-contents,
	.faq-contents,
	.notice-contents {
		margin-top: 40px;
	}
	.service-contents {
		max-width: 100%;
	}
	.faq-contents {
		max-width: 100%;
		margin-left: 0px;
	}
	.notice-contents {
		max-width: 100%;
		margin-left: 0px;
	}
	.faq-list-text {
		width: 240px;
	}
	.faq-list-division,
	.service-day {
		display: none;
	}
	.service-box-con {
		padding: 18px 24px;
	}
	.service-box-con .btn {
		right: 10px;
		bottom: 10px;
	}
	.page-main .page-container::before {
		display: none;
	}
	.map-service-page .map-search-wrap,
	.map-service .map-search-wrap {
		display: block;
	}

	.map-service-page .contents-explanation,
	.map-service-page .legend-wrapper,
	.map-service .contents-explanation,
	.map-service .legend-wrapper {
		display: none;
	}
	.map-service-page .page-content,
	.map-service-page .map-wrapper,
	.map-service .page-content,
	.map-service .map-wrapper {
		padding: 0px;
	}
	.map-service-page .page-sidebar-right-closed .page-sidebar-wrapper,
	.map-service .page-sidebar-right-closed .page-sidebar-wrapper {
		width: 0px;
	}
	.map-service-page .page-sidebar-right-closed .page-content,
	.map-service-page .page-sidebar-right-closed .map-wrapper,
	.map-service .page-sidebar-right-closed .page-content,
	.map-service .page-sidebar-right-closed .map-wrapper {
		padding: 0px;
	}

	.step-info-wrapper.step-specialist > li {
		padding: 0px;
		margin-bottom: 80px;
	}
	.step-info-wrapper.step-specialist > li::before {
		content: "";
		top: auto;
		right: 50%;
		margin-top: 0px;
		transform: rotate( 90deg );
		bottom: -143px;
		margin-right: -40px;
	}
	.step-info-wrapper.step-specialist > li:last-child::before {
		content:none;
	}
	
	.mt-checkbox-inline .mt-checkbox, 
	.mt-checkbox-inline .mt-radio, 
	.mt-radio-inline .mt-checkbox, 
	.mt-radio-inline .mt-radio {
		display: block;
	}

	.page-main.page-portal .main-contents-box.protected-area-search-wrapper {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-direction: column;
	}
	.page-main.page-portal .main-contents-box.protected-area-search-wrapper .row .form-group + .form-group, 
	.page-main.page-portal .main-contents-box.protected-area-search-wrapper .row .input-group + .input-group {
		padding-top: 4px;
	}
	.page-main.page-portal .main-contents-box.protected-area-search-wrapper .form-inline .input-group + .input-group {
		padding-left: 0px;
	}
	.page-main.page-portal .main-visual-wrapper::before {
		width: 380px;
		top: -26px;
	}
	.page-main.page-portal .main-visual-wrapper .main-visual-slogan .slogan-text-02 {
		font-size: 32px;
        line-height: 34px;
	}
	.main-bottom-wrapper .main-bottom-box-group .main-bottom-box {
		width: 182px;
	}
	.page-main.page-portal .bottom-box-btn .btn {
		padding: 10px 20px;
	}
	.main-title-wrap .visitor-toggle .btn {
		font-size: 16px;
		padding: 10px 18px;
	}
}
@media (max-width: 767px) {
    .nav-header-bg,
    .global-notice,
    .slide-nav,
	.category-wrapper,
	.page-family-site,
	.print-wrapper,
	.logo-iseoulu {
        display: none !important;
    }
    .nav-header-bg,
    .navbar-collapse-wrapper,
    .navbar-collapse.collapse,
    nav.navbar.navbar-default ul.nav > li > a {
        height: auto;
    }

	nav.navbar.navbar-default ul.nav > li {
		border-top: 1px solid #d1d1d1;
	}

	.yamm .nav,
	.yamm .collapse,
	.yamm .dropup,
	.yamm .yamm-fw {
		position: relative !important;
	}
    .navbar-collapse-wrapper {
        
    }
	.page-front.map-service-page .navbar-collapse-wrapper {
		padding: 0px;
	}
    .dropdown > .dropdown-menu,
    .yamm-content {
        background-color: #dfdfdf !important;
    }
    .navbar-fixed-top {
        position: relative;
    }
    .page-container {
        padding-top: 0px !important;
    }
    nav.navbar.bootsnav .navbar-nav {
        margin: 0px;
        width: 100%;
		background-color: #e9e9e9;
    }
	.head-etc {
		justify-content: center;
	}
    .page-content-wrapper,
    .navbar-global-wrapper,
    .header-global-wrapper,
    .page-footer .page-footer-inner {
        padding-left: 15px;
        padding-right: 15px;
    }
	.page-content-wrapper {
		padding-top: 15px;
		padding-bottom: 15px;
	}
	.page-main.page-portal .page-content-wrapper {
		padding: 0px;
	}
	.page-main.page-portal .main-container {
		padding-left: 15px;
        padding-right: 15px;
		padding-top: 15px;
		padding-bottom: 15px;
	}
	header .total-search-wrapper {
		top: 110px;
		left: 0px;
		width: 100%;
		margin: 0px;
    	padding: 0px 10px;
	}
	.header-global-wrapper {
		height: 177px;
	}
    .navbar-fixed-top .navbar-collapse {
        max-height: none;
    }
	header .logo-wrapper {
		flex-direction: column;
	}
	.map-service-page header .logo-wrapper,
	header .logo-wrapper {
        left: 50%;
        margin-left: -92px;
    }
	.page-specialist header .logo-wrapper {
		text-align: center;
		margin: 0px auto;
		position: relative;
		left:auto;
		top: auto;
		display: block;
    }
	.page-specialist header .page-system-title {
		display: block;
		margin-left: 0px;
	}
	.map-service-page header .global-link-wrapper, 
	.map-service-page header .member-wrapper,
	.page-specialist header .member-wrapper {
		right: auto;
	}
    header .logo .logo-dark {
        height: 68px;
    }
	header .member-wrapper {
		top: 119px;
        width: 100%;
        position: relative;
        display: inline-block;
        height: auto;
	}
	.page-specialist header .member-wrapper {
		margin-top: 10px;
	}
	header .member-wrapper ul li {
		width: 50%;
		padding: 0px 4px;
		margin: 0px;
	}
	header .global-link-wrapper,
	.navbar-header {
		right: 10px;
	}
	.page-admin .page-sidebar-wrapper {
		display: none;
	}
	.page-admin .page-content {
		padding-left: 0px;
	}
	header .global-link-wrapper ul li {
		margin: 0px 6px 0px 0px;
		padding: 0px 6px 0px 0px;
		font-size: 14px;
	}
	.form-inline {
		display: block;
	}
	.form-inline.only-inline {
		display: flex;
	}
	.form-inline.fileinput-inline {
		display: flex;
	}
	.form-inline .input-group + .input-group, 
	.form-inline .input-group + .form-group, 
	.form-inline .form-group + .input-group, 
	.form-inline .form-group + .form-group {
		padding-left: 0px;
	}
	.form-inline.fileinput-inline .input-group + .input-group {
		padding-left: 4px;
	}
	.row .form-group + .form-group, 
	.row .input-group + .input-group {
		padding-top: 4px;
	}

	.row .form-group > .row .form-group, 
	.row .input-group > .row .input-group {
		padding-top: 0px;
	}

	input.form-control, 
	select.form-control {
		min-width: auto;
	}
	.grid-table .table thead > tr > th .mt-radio, 
	.grid-table .table > tbody > tr > td .mt-radio, 
	.grid-table .table thead > tr > th .mt-checkbox, 
	.grid-table .table > tbody > tr > td .mt-checkbox {
		display: block;
		margin-right: 0px;
	}
	.page-top-search .row {
		margin-left: 0px;
		margin-right: 0px;
	}
	/* 게시판 검색 영역 — CSS Grid (1행: 라벨 / 2행: 컨트롤 / 3행: 버튼) */
	.page-top-search {
		padding: 12px;
	}
	.page-top-search .form-inline {
		display: grid;
		grid-template-columns: 110px 1fr;
		column-gap: 8px;
		row-gap: 12px;
		align-items: start;
	}
	.page-top-search .form-inline > .input-group {
		display: contents;
	}
	.page-top-search .form-inline > .input-group:first-child .input-group-label {
		grid-column: 1;
		grid-row: 1;
		align-self: end;
	}
	.page-top-search .form-inline > .input-group:first-child .form-control {
		grid-column: 1;
		grid-row: 2;
	}
	.page-top-search .form-inline > .input-group:last-child .input-group-label {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
	}
	.page-top-search .form-inline > .input-group:last-child .form-control {
		grid-column: 2;
		grid-row: 2;
	}
	.page-top-search .input-group-btn {
		display: contents;
	}
	.page-top-search .input-group-btn .btn:first-child {
		grid-column: 1;
		grid-row: 3;
	}
	.page-top-search .input-group-btn .btn:last-child {
		grid-column: 2;
		grid-row: 3;
	}
	.page-top-search .input-group-label {
		padding: 0 0 4px 0;
		white-space: normal;
	}
	.page-top-search .input-group-label .input-label-display {
		margin: 0;
		padding: 0;
		font-size: 13px;
		background-image: none;
	}
	.page-top-search .form-control {
		display: block;
		width: 100%;
		height: 38px;
		padding: 6px 10px;
		font-size: 13px;
		line-height: 1.4;
		box-sizing: border-box;
	}
	.page-top-search .input-group-btn .btn {
		height: 38px;
		padding: 6px 10px;
		font-size: 13px;
		line-height: 1.4;
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin: 0;
	}
	.page-footer {
		height: 200px;
	}
	.page-footer .page-footer-inner {
		height: 240px;
	}
	.page-footer .page-footer-inner .page-footer-logo {
		float: none;
		text-align: center;
	}
	.page-footer .page-footer-inner .page-footer-container .address, 
	.page-footer .page-footer-inner .page-footer-container .tel {
		display: block;
		padding: 0px;
		margin: 0px;
		margin-bottom: 4px;
	}
	.page-footer .page-footer-inner .page-footer-container .address::after {
		content: none;
	}
	.page-footer .page-footer-inner .page-footer-container {
		margin: 20px;
		text-align: center;
		position: relative;
		display: block;
	}
	.total-search-wrapper .search-select {
		width: 100%;
		position: relative;
		top: 0px;
		left: 0px;
	}
	.nav-tabs {
		position: relative;
		display: flex !important;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100% !important;
		vertical-align: middle;
		border-bottom: 0px;
	}
	.nav-tabs::before {
		content: " ";
		position: absolute;
		display: block;
		border-bottom: 4px solid #000000;
		bottom: 0px;
		width: 100%;
		height: 4px;
		z-index: 1;
		left: 0px;
	}
	.nav-tabs > li {
		float: none;
		display: block;
		flex: 0 0 auto;
	}
	.nav-tabs > li > a {
		white-space: nowrap;
		word-break: keep-all;
		overflow-wrap: normal;
	}
	.nav-tabs > li.active > a, 
	.nav-tabs > li.active > a:focus, 
	.nav-tabs > li.active > a:hover {
		padding: 14px 10px;
		color: #000;
		background-color: #fff;
		border: 4px solid #000000;
		border-bottom: 0px;
		z-index: 1;
	}
	.nav-tabs > li > a {
		padding: 13px 10px;
		font-size: 14px;
		border: 4px solid #e5ebf0;
		border-bottom: 0px;
	}
	.nav-tabs > li > a:hover, 
	.nav-tabs > li > a:focus {
		border: 4px solid #eeeeee;
		border-bottom: 0px;
	}
	.related-logo-img {
		margin-right: 0px;
		float: none;
	}
	.page-title-typeA .page-title-text {
		padding: 0px 50px 0px 50px;
		font-size: 26px;
	}
	.page-title-typeA .page-title-text::before {
		width: 40px;
	}
	.page-title-typeA .page-title-text::after {
		width: 40px;
	}
	.navbar-default .navbar-nav .open .dropdown-menu > li > a {
		color: #000;
	}
	.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, 
	.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
		color: #009ee5;
	}
	.visitor-menu .menu-list .menu-list-item {
		width: 50%;
	} 
	.visitor-menu .menu-list {
		padding: 0px;
	}
	.visitor-menu .bx-wrapper .bx-prev {
		left: -10px;
	}
	.visitor-menu .bx-wrapper .bx-next {
		right: -10px;
	}
	ul.navbar-nav > li.active > a::after {
		content: none !important;
	}
	.page-content-inner {
		padding: 0px;
	}
	.faq-list-text {
		width: calc(100vw - 100px);
	}
	.step-bar {
		height: auto;
	}
	.step-info-wrapper {

	}
	.step-info-wrapper > li {
		padding: 0px;
		margin-bottom: 80px;
	}
	.step-info-wrapper > li::before {
		content: "";
		top: auto;
		right: 50%;
		margin-top: 0px;
		transform: rotate( 90deg );
		bottom: -143px;
		margin-right: -40px;
	}
	.step-info-wrapper.step-info-sm > li {
		margin-bottom: 12px;
	}
	.step-info-wrapper.step-info-sm > li::before {
		content: "";
		top: auto;
		right: 50%;
		margin-top: 0px;
		transform: rotate( 90deg );
		bottom: -30px;
		margin-right: -10px;
	}
	.step-li {
		border-right: 1px solid #5e666e;
		font-size: 12px;
	}
	.step-li.active {
		border: none;
	}
	.step-li .step-text {
		display: block;
		line-height: 26px;
		margin: 10px;
	}
	.step-li .step-ul-text {
		font-size: 14px;
		line-height: 20px;
		
	}
	.step-li::after {
		top: 50%;
		margin-top: -25px;
		background-size: 52% !important;
		right: -10px;
	}
	ul.title-ul-list {
		padding-left: 10px;
	}
	ul.title-ul-list > li {
		padding-left: 28px;
	}
	.check-support-how-list .how-list-right {
		float: none;
		margin-left: 0px;
		margin-top: 4px;
	}
	.page-explanation .numberic-contents-text {
		padding-left: 80px;
	}
	.related-sites-wrapper.row {
		display: block;
	}
	.related-sites-contents {
		padding: 10px 0px;
	}
	
	.error-page {
		padding: 10px !important;
	}
	.error-page .content {
		width: auto;
	}
	.error-page .details {
		margin-top: 20px;
		margin-left: 0px;
	}
	.login-page .page-content {
		padding: 10px 10px 40px 10px !important;
	}
	.login-content, 
	.login-options, 
	.login-guide {
		width: auto;
	}
	.main-divPopup {
		position:absolute !important;
		top: 178px !important;
		left: auto !important;
		width: 100% !important;
		margin-left:auto !important;
	}
	.popup-manager-row {
		display: block;
	}
	.popup-manager-col {
		flex-basis: auto;
    	flex-grow: inherit;
		padding: 0px;
		margin-top: 20px;
	}
	.popup-manager-col:first-child {
		padding-left: 0px;
	}
	.table-title-control {
		position: relative;
	}
	.input-group-xs-block {
		display: block !important;
	}
	.mt-checkbox-inline .mt-checkbox, 
	.mt-checkbox-inline .mt-radio, 
	.mt-radio-inline .mt-checkbox, 
	.mt-radio-inline .mt-radio {
		display: block;
	}
	.mt-inline-form {
		margin-left: 30px;
		width: 90%;
	}
	.mt-inline-form .form-control {
		width: 100% !important;
	}
	.visitor-menu {
		margin-top: 40px;
	}
	.navbar-nav > li.dropdown > a::after, 
	.navbar-nav > li.dropdown.active > a::after {
		right: 15px;
	}

	.page-main.page-portal .prot-area-search-form-group .search-toggle {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-direction: column;
		gap: 4px;
	}
	.page-main.page-portal .main-visual-wrapper .main-visual-slogan {
		display: none;
	}
	.page-main.page-portal .main-visual-wrapper::before {
		content: none;
	}
	.page-main.page-portal .main-visual-wrapper {
		display: block;
		margin-bottom: 0px;
	}
	.main-visual-wrapper .visual-menu {
		width: 100%;
	}
	.visual-menu .menu-list > ul {
		justify-content: center;
	}
	.main-middle-wrapper .main-middle-box-group {
		flex-direction: column;
	}
	.color-container {
		display: none;
	}
}

@media (min-width: 600px) and (max-width: 1023px) {
	.search-list {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 599px) {
	.search-list {
		grid-template-columns: 1fr;
	}
	.search-list .li {
		/* flex-direction: row; */
        flex-wrap: wrap;
	}
	.search-list .card-top {
		order: -1;
        flex: 1;
        flex-wrap: nowrap;
        min-width: fit-content;
	}
	.search-list .card-btm {
		width: 100%;
	}
}
@media (max-width: 1023px) {
	.pagination-info,
	.pagination.w-page {
		display: none;
	}
	.pagination.m-page {
		display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        gap: 2.4rem;
	}
	.pagination.m-page .page-navis {
		display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: row;
        gap: 0.8rem;
	}
	.page-footer-link {
        display: none;
    }
}
/* ===================================
	02. 관리(admin) / 지도(map) / 윈도우팝업(window-popup) 반응형 추가
	   - 포털/메인(.page-portal, .page-front) 기존 블록은 위쪽에 유지
	   - 본 블록은 추가 페이지 군만 타겟
====================================== */

/* --------- 관리 화면(admin) --------- */
@media (max-width: 1199px) {
	.page-admin .page-content-wrapper,
	.page-admin .nav-header-container,
	.page-admin .navbar,
	.page-admin .page-footer {
		width: 100%;
		min-width: 0;
	}
	.page-admin .page-front .page-content-wrapper,
	.page-admin .page-front .navbar-global-inner,
	.page-admin .page-front .navbar-collapse-wrapper,
	.page-admin .page-front .header-global-wrapper,
	.page-admin .page-front .page-footer .page-footer-inner {
		width: 100%;
		max-width: 1280px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media (max-width: 991px) {
	.page-admin .page-sidebar {
		width: 240px;
	}
	.page-admin .table-responsive {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.page-admin header nav.navbar .navbar-nav > li > a,
	.page-admin nav.navbar.bootsnav ul.nav > li > a {
		padding: 0 12px;
	}
}
@media (max-width: 767px) {
	.page-admin .page-content-inner {
		padding: 16px 12px;
	}
	.page-admin .page-sidebar-wrapper {
		width: 100%;
		position: relative;
	}
	.page-admin .page-content {
		padding-left: 0;
	}
	.page-admin .navbar-nav > li {
		float: none;
	}
	.page-admin .main-contents-col {
		width: 100%;
		display: block;
	}
}

/* --------- 지도 화면(map) 모바일 전면 레이아웃 ---------
   대상: .system-map-page, .map-daemin-page, .fact-finding-survey-map-page */

/* 데스크탑 기본 - 햄버거/backdrop 숨김 (미디어쿼리 밖이라 항상 적용, 모바일 블록에서 덮어씀) */
.map-mobile-hamburger,
.map-mobile-backdrop {
	display: none;
}

@media (max-width: 1199px) {
	.system-map-page .page-content-wrapper,
	.map-daemin-page .page-content-wrapper,
	.system-map-page .navbar,
	.map-daemin-page .navbar,
	.system-map-page .page-footer,
	.map-daemin-page .page-footer {
		width: 100%;
		min-width: 0;
	}
}
@media (max-width: 991px) {
	.system-map-page .page-sidebar-wrapper,
	.map-daemin-page .page-sidebar-wrapper {
		width: 280px;
	}
	.system-map-page .map-wrapper,
	.map-daemin-page .map-wrapper {
		padding-left: 280px;
	}
	.system-map-page .sidebar-toggler,
	.map-daemin-page .sidebar-toggler {
		left: 280px;
	}
}
/* === Bootstrap 호환 hidden 유틸 (게시판 컬럼 모바일 숨김에 사용) === */
@media (max-width: 991px) {
	.hidden-sm { display: none !important; }
}
@media (max-width: 767px) {
	.hidden-xs { display: none !important; }
}

/* ==========================================================================
   [PATCH] 360px 모바일 환경 지도/좌측메뉴 반반 깨짐 및 그리드 충돌 방어
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. 360px 해상도에서 검색 영역 라벨이 공간을 너무 많이 차지하는 것 방지 */
    .page-top-search .form-inline {
        grid-template-columns: 85px 1fr !important; /* 110px에서 85px로 축소하여 여유 공간 확보 */
        column-gap: 4px !important;
    }

    /* 2. 지도 페이지의 부모 wrapper 내부에서 자식들이 뚫고 나오지 못하도록 강제 */
    .system-map-page .page-container,
    .map-daemin-page .page-container,
    .fact-finding-survey-map-page .page-container {
        display: block !important;
        width: 100% !important;
        position: relative;
    }

    /* 3. 사이드바 드로우어가 열려있든 닫혀있든, 우측 지도 영역의 '최소 너비 기본값'을 0으로 초기화
       (Flex나 내부 고정 px 스크립트가 작동해도 부모를 찢고 나가지 않게 차단) */
    .system-map-page .map-wrapper,
    .map-daemin-page .map-wrapper,
    .fact-finding-survey-map-page .map-wrapper {
        position: absolute !important;
        top: var(--map-header-h, 50px) !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - var(--map-header-h, 50px)) !important;
        min-width: 0 !important; /* 핵심: 반반으로 쪼개지는 현상 방지 */
        z-index: 10 !important;
    }

    /* 4. 지도 API가 강제로 div에 인라인 style="width: xxxpx"을 주입하는 경우 매칭 오버라이드 */
    .system-map-page .map-wrapper div[id^="map"],
    .map-daemin-page .map-wrapper div[id^="map"],
    .system-map-page #map, 
    .map-daemin-page #map {
        width: 100% !important; /* 스크립트가 억지로 180px 등을 주입해도 100%로 고정 */
    }
}

@media (max-width: 767px) {
	/* === 게시판 grid-table 모바일 가독성 === */
	.grid-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.grid-table .table > tbody > tr > td,
	.grid-table .table > thead > tr > th {
		word-break: keep-all;
		overflow-wrap: break-word;
		font-size: 13px;
		padding: 8px 6px;
		white-space: normal;
	}
	.grid-table .table > tbody > tr > td a {
		word-break: keep-all;
		overflow-wrap: break-word;
	}

	/* === A. viewport 잠금 (페이지 자체 스크롤 차단) — 지도 페이지에서만 === */
	html, body {
		overflow-x: hidden;
	}
	body.system-map-page,
	body.map-daemin-page,
	body.fact-finding-survey-map-page {
		height: 100vh;
		overflow: hidden;
	}
	body.system-map-page .page-container,
	body.map-daemin-page .page-container,
	body.fact-finding-survey-map-page .page-container,
	body.system-map-page .page-content-wrapper,
	body.map-daemin-page .page-content-wrapper,
	body.fact-finding-survey-map-page .page-content-wrapper,
	body.system-map-page .page-content,
	body.map-daemin-page .page-content,
	body.fact-finding-survey-map-page .page-content {
		height: 100%;
		overflow: hidden;
	}

	/* === B. 햄버거 — body class 없이 단독 selector + 강한 시각 === */
	.map-mobile-hamburger {
		display: flex !important;
		position: fixed !important;
		top: 8px;
		left: 8px;
		width: 40px;
		height: 40px;
		align-items: center;
		justify-content: center;
		background-color: #003675;
		color: #fff;
		border: 0;
		border-radius: 6px;
		font-size: 18px;
		padding: 0;
		z-index: 99999;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
		cursor: pointer;
	}
	.map-mobile-hamburger .fa {
		color: #fff;
		font-size: 18px;
	}
	/* backdrop: 사이드바가 열렸을 때만 표시 (지도 영역 클릭 → 사이드바 닫힘) */
	.map-mobile-backdrop {
		display: none;
	}
	.map-mobile-backdrop.is-open {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.35);
		z-index: 90000; /* 사이드바(99997) 아래로 확실히 (회귀 방지) */
	}

	/* === C. 사이드바 드로우어 === */
	.system-map-page .page-sidebar-wrapper,
	.map-daemin-page .page-sidebar-wrapper,
	.fact-finding-survey-map-page .page-sidebar-wrapper {
		position: fixed !important;
		top: var(--map-header-h, 50px);
		left: 0;
		width: 80% !important;
		max-width: 320px;
		height: calc(100% - var(--map-header-h, 50px));
		transform: translateX(-100%);
		transition: transform 0.25s ease-in-out;
		background-color: #fff;
		box-shadow: 2px 0 12px rgba(0, 0, 0, 0.18);
		overflow-y: auto;
		z-index: 99997;
	}
	.system-map-page .page-sidebar-wrapper.is-open,
	.map-daemin-page .page-sidebar-wrapper.is-open,
	.fact-finding-survey-map-page .page-sidebar-wrapper.is-open {
		transform: translateX(0);
	}
	/* 사이드바 탭 라벨 한 글자 wrap 방지 */
	.system-map-page .system-left-tab-group,
	.map-daemin-page .system-left-tab-group {
		display: flex;
		width: 100%;
	}
	.system-map-page .system-left-tab-group > li,
	.map-daemin-page .system-left-tab-group > li {
		display: block;
		flex: 1;
	}
	.system-map-page .system-left-tab-group > li > a,
	.map-daemin-page .system-left-tab-group > li > a {
		padding: 10px 4px;
		font-size: 12px;
		white-space: nowrap;
		text-align: center;
	}

	/* === D. 지도 캔버스 풀폭 + 헤더 제외한 viewport 채움 === */
	.system-map-page .map-wrapper,
	.map-daemin-page .map-wrapper,
	.fact-finding-survey-map-page .map-wrapper {
		padding-left: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: calc(100vh - var(--map-header-h, 50px)) !important;
	}
	/* 지도 데이터 안내 박스 모바일 축소 (inline style 오버라이드) */
	.map-text {
		font-size: 11px !important;
		padding: 6px 8px !important;
		right: 6px !important;
		bottom: 10px !important;
		max-width: 70vw;
		line-height: 1.3;
	}

	/* 시설정보 form-table — input 컴팩트화 + 라벨 줄바꿈 완화 */
	.form-table .form-control {
		width: auto !important;
		max-width: 70px;
		min-width: 50px;
		display: inline-block;
	}
	.form-table .td-head {
		word-break: keep-all;
		overflow-wrap: break-word;
		white-space: normal;
		font-size: 12px;
		padding: 6px 4px;
	}
	.form-table .input-group {
		display: flex;
		align-items: center;
		gap: 6px;
		flex-wrap: wrap;
	}
	.form-table .input-group-label,
	.form-table .control-label {
		white-space: nowrap;
	}

	/* === 사고정보 팝업(page-window-popup) 모바일 반응형 === */
	.page-window-popup {
		overflow-x: hidden;
	}
	.page-window-popup .page-container,
	.page-window-popup .page-content-wrapper,
	.page-window-popup .page-content {
		width: 100%;
		padding: 0;
		margin: 0;
	}
	.page-window-popup .page-content-inner,
	.page-window-popup .content-wrapper {
		padding: 8px;
	}
	/* 가로 나란히(portlet-inline) → 모바일에선 세로 적층 (차트가 아래로) */
	.page-window-popup .portlet-inline {
		flex-direction: column;
	}
	.page-window-popup .portlet-inline .portlet {
		margin: 0 0 12px 0;
	}
	.page-window-popup .portlet {
		margin-bottom: 12px;
	}
	.page-window-popup .portlet-title {
		padding: 8px 10px;
	}
	.page-window-popup .portlet-title .form-title {
		font-size: 14px;
		font-weight: bold;
	}
	.page-window-popup .portlet-body {
		padding: 8px;
	}
	.page-window-popup .table-scrollable {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.page-window-popup .table-scrollable > .table {
		min-width: 100%;
		width: auto;
	}
	.page-window-popup .table > thead > tr > th,
	.page-window-popup .table > tbody > tr > td,
	.page-window-popup .table > tbody > tr > th {
		word-break: keep-all;
		overflow-wrap: break-word;
		white-space: nowrap;
		font-size: 12px;
		padding: 6px 8px;
	}
	.page-window-popup .contents-row.marT20 {
		margin-top: 8px !important;
	}
	.page-window-popup #chartdiv_lineChart {
		width: 100% !important;
		max-width: 100%;
		height: 280px !important;
	}
	.system-map-page .page-content,
	.map-daemin-page .page-content,
	.fact-finding-survey-map-page .page-content {
		padding-left: 0;
		width: 100%;
	}
	.system-map-page .page-container,
	.map-daemin-page .page-container,
	.fact-finding-survey-map-page .page-container {
		width: 100%;
		padding-top: 0;
	}

	/* === E. 헤더 컴팩트 + 큰 메뉴 5개 숨김 === */
	.system-map-page header,
	.map-daemin-page header {
		height: auto;
		min-height: 50px;
		padding: 8px 8px 8px 56px !important; /* 좌측 햄버거 자리 */
		flex-wrap: wrap;
		position: relative;
		z-index: 99998; /* 헤더 > 사이드바(99997) > 백드롭(99996), 햄버거(99999) 아래 */
	}
	/* 모달이 열려 있을 때 헤더/햄버거는 모달 아래로 내려가야 함
	   (모달-backdrop 10049 / 모달 10050 / 모달-dialog 10051) */
	body.modal-open header,
	body.modal-open .map-mobile-hamburger {
		z-index: 1 !important;
	}
	/* 모달을 모바일 헤더(99998)/햄버거(99999)보다 위로 올림
	   — body.modal-open 가드가 적용 안 되는 경우까지 안전하게 보장 */
	.modal {
		z-index: 100050 !important;
	}
	.modal-dialog {
		z-index: 100051 !important;
	}
	.modal-backdrop {
		z-index: 100049 !important;
	}
	/* 모바일에서 불필요한 지도 컨트롤 버튼 숨김 (거리재기/면적재기/취소/인쇄하기)
	   — .map-top-default-btn-group > li { display:block !important } 보다 구체성 높게 */
	.system-map-page .header-top-btn-group .map-top-default-btn-group > li.map-control-mobile-hide,
	.map-daemin-page .header-top-btn-group .map-top-default-btn-group > li.map-control-mobile-hide,
	.map-control-mobile-hide {
		display: none !important;
	}
	.system-map-page header .page-header-logo .header-project-name,
	.map-daemin-page header .page-header-logo .header-project-name {
		font-size: 13px;
		line-height: 16px;
	}
	/* 헤더 5개 메뉴 — 식별 클래스 .header-top-btn-group 기반 강제 표시 */
	.system-map-page .header-top-btn-group,
	.map-daemin-page .header-top-btn-group {
		display: block !important;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	.system-map-page .header-top-btn-group .map-top-default-control-group,
	.map-daemin-page .header-top-btn-group .map-top-default-control-group {
		display: block !important;
		width: 100%;
	}
	.system-map-page .header-top-btn-group .map-top-default-btn-group,
	.map-daemin-page .header-top-btn-group .map-top-default-btn-group {
		display: flex !important;
		/*flex-wrap: wrap;*/
		gap: 4px;
		padding: 0;
		margin: 0;
		list-style: none;
		width: 100%;
		visibility: visible !important;
		opacity: 1 !important;
	}
	.system-map-page .header-top-btn-group .map-top-default-btn-group > li,
	.map-daemin-page .header-top-btn-group .map-top-default-btn-group > li {
		display: block !important;
		list-style: none;
		flex: 1 1 0;            /* 한 줄에 균등 분배 (3개 한 줄) */
		min-width: 0;
		visibility: visible !important;
	}
	/* 측정 모드일 때만 노출되는 li (hidden 속성 존중) */
	.system-map-page .header-top-btn-group .map-top-default-btn-group > li#base_cancel_li[hidden],
	.map-daemin-page .header-top-btn-group .map-top-default-btn-group > li#base_cancel_li[hidden] {
		display: none !important;
	}
	.system-map-page .header-top-btn-group .map-top-default-btn-group .btn,
	.map-daemin-page .header-top-btn-group .map-top-default-btn-group .btn {
		display: block !important;
		width: 100%;
		font-size: 11px !important;
		padding: 6px 4px !important;
		line-height: 1.3 !important;
		height: auto;
		visibility: visible !important;
		opacity: 1 !important;
		white-space: normal;        /* 긴 라벨은 버튼 안에서 줄바꿈 허용 */
		word-break: keep-all;
		text-align: center;
		color: #000;
	}
	/* m-page-btn-group 드롭다운 숨김 (5개 메뉴 보이니까) */
	.system-map-page .header-top-btn-group .m-page-btn-group,
	.map-daemin-page .header-top-btn-group .m-page-btn-group {
		display: none !important;
	}
	/* 데스크탑용 토글러는 모바일에서 불필요 */
	.system-map-page .sidebar-toggler,
	.map-daemin-page .sidebar-toggler,
	.system-map-page .sidebar-right-toggler,
	.map-daemin-page .sidebar-right-toggler,
	.system-map-page .sidebar-top-toggler,
	.map-daemin-page .sidebar-top-toggler {
		display: none !important;
	}

	/* === F. 상단 컨트롤 카드 (베이스맵 + 도로 ON/OFF + 셀렉트) === */
	/* mapMain.jsp의 .map-top-control-wrapper를 정상 흐름 카드로 */
	.system-map-page .map-top-control-wrapper,
	.map-daemin-page .map-top-control-wrapper {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		height: auto;
		background-color: rgba(255, 255, 255, 0.96);
		padding: 8px;
		margin: 0;
		box-sizing: border-box;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	}
	.system-map-page .page-top-btn-group,
	.map-daemin-page .page-top-btn-group {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		padding: 0;
		box-sizing: border-box;
		justify-content: flex-start !important;
	}
	/* 지도화면 테마 셀렉트 */
	.system-map-page .select-group,
	.map-daemin-page .select-group {
		display: flex;
		align-items: center;
		gap: 6px;
		width: 100%;
		font-size: 13px;
	}
	.system-map-page .select-group::after,
	.map-daemin-page .select-group::after {
		display: none;
	}
	.system-map-page .select-group .input-group-label,
	.map-daemin-page .select-group .input-group-label {
		font-size: 13px;
		font-weight: bold;
	}
	.system-map-page .select-group #mapType,
	.map-daemin-page .select-group #mapType {
		flex: 0 1 auto;
		min-width: 80px;
		width: auto;
	}
	/* map-top-default-control-group: 카드 안 그룹은 살림 */
	.system-map-page .map-top-default-control-group,
	.map-daemin-page .map-top-default-control-group {
		width: 100%;
		min-width: 0;
	}
	.system-map-page .map-top-control-wrapper .map-top-default-btn-group,
	.map-daemin-page .map-top-control-wrapper .map-top-default-btn-group {
		display: block !important;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	.system-map-page .map-view-control-wrapper,
	.map-daemin-page .map-view-control-wrapper {
		float: none !important;
		display: block;
		width: 100%;
		min-width: 0;
	}
	.system-map-page .map-view-control-group,
	.map-daemin-page .map-view-control-group {
		width: 100%;
		min-width: 0;
		overflow: visible;
	}
	.system-map-page .map-view-btn-group,
	.map-daemin-page .map-view-btn-group {
		width: 100%;
		padding: 0;
		margin: 0 0 6px 0;
	}
	.system-map-page .map-view-btn-group > li,
	.map-daemin-page .map-view-btn-group > li {
		width: 100%;
		min-width: 0;
	}
	/* 베이스맵 3분할 — overflow 해제 + min-width 차단 */
	.system-map-page .toggle-btn-group,
	.map-daemin-page .toggle-btn-group {
		display: flex;
		gap: 4px;
		width: 100%;
		min-width: 0;
		overflow: visible !important;
	}
	.system-map-page .toggle-btn-group .map-view-icon,
	.map-daemin-page .toggle-btn-group .map-view-icon,
	.system-map-page .toggle-btn-group .btn,
	.map-daemin-page .toggle-btn-group .btn {
		flex: 1 1 0;
		min-width: 0 !important;
		max-width: 100%;
		height: auto !important;
		padding: 6px 4px !important;
		font-size: 11px !important;
		line-height: 14px;
		word-break: keep-all;
	}
	/* 핵심: ::before 의사요소가 라벨 가리지 않도록 무력화 */
	.system-map-page .toggle-btn-group .map-view-icon::before,
	.map-daemin-page .toggle-btn-group .map-view-icon::before {
		display: none !important;
	}
	.system-map-page .toggle-btn-group .map-view-icon label,
	.map-daemin-page .toggle-btn-group .map-view-icon label {
		font-size: 11px;
		line-height: 14px;
		margin: 0;
		padding: 0;
		white-space: nowrap;
		overflow: visible;
		color: #000;
		pointer-events: none;
		text-align: center;
		display: block;
	}
	.system-map-page .toggle-btn-group .map-view-icon input[type="radio"],
	.map-daemin-page .toggle-btn-group .map-view-icon input[type="radio"] {
		margin-right: 4px;
	}
	/* 도로 ON/OFF 체크박스 */
	.system-map-page .mt-checkbox-inline,
	.map-daemin-page .mt-checkbox-inline {
		display: block;
		width: 100%;
		min-width: 0;
		padding: 6px 0 !important;
		margin: 0;
		font-size: 13px;
	}
	.system-map-page .mt-checkbox-inline .checkbox-label-group,
	.map-daemin-page .mt-checkbox-inline .checkbox-label-group {
		margin: 0;
	}
	.system-map-page .mt-checkbox-inline .mt-checkbox,
	.map-daemin-page .mt-checkbox-inline .mt-checkbox {
		display: inline-flex;
		margin-right: 0;
		flex: 0 1 auto;
	}

	/* === F-2. 카드 안 자식 visibility 명시 (V-WORLD 클릭 전에도 보이도록) === */
	.system-map-page .map-top-control-wrapper .select-group,
	.map-daemin-page .map-top-control-wrapper .select-group,
	.system-map-page .map-top-control-wrapper .mt-checkbox-inline,
	.map-daemin-page .map-top-control-wrapper .mt-checkbox-inline,
	.system-map-page .map-top-control-wrapper .map-view-control-wrapper,
	.map-daemin-page .map-top-control-wrapper .map-view-control-wrapper {
		visibility: visible !important;
		opacity: 1 !important;
	}

	/* === G. 우측 줌 컨트롤 — fixed bottom-right === */
	.system-map-page .map-right-control-wrapper,
	.map-daemin-page .map-right-control-wrapper,
	.fact-finding-survey-map-page .map-right-control-wrapper {
		position: fixed !important;
		right: 10px;
		bottom: 100px;
		top: auto;
		left: auto;
		float: none;
		width: auto;
		z-index: 998;
	}
	.system-map-page .map-right-control-group,
	.map-daemin-page .map-right-control-group {
		width: auto;
	}
	.system-map-page .map-right-btn-group,
	.map-daemin-page .map-right-btn-group {
		width: auto;
		display: flex;
		flex-direction: column;
		gap: 6px;
	}
	.system-map-page .map-right-btn-group > li .map-right-btn,
	.map-daemin-page .map-right-btn-group > li .map-right-btn,
	.fact-finding-survey-map-page .map-right-btn-group > li .map-right-btn {
		width: 44px;
		height: 44px;
		font-size: 0;
		line-height: 0;
		border-radius: 50%;
		padding: 0;
		background-color: #fff;
		border: 1px solid #003675;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	}
	.system-map-page .map-right-btn-group > li .map-right-btn::before,
	.map-daemin-page .map-right-btn-group > li .map-right-btn::before,
	.fact-finding-survey-map-page .map-right-btn-group > li .map-right-btn::before {
		width: 100% !important;
		height: 100% !important;
		top: 0 !important;
		left: 0 !important;
		margin: 0 !important;
		background-size: 24px auto !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
	}

	/* === H. 5개 메뉴 버튼 아이콘 제거 (모바일에서만) === */
	.system-map-page .header-top-btn-group .btn.btn-icon-left,
	.map-daemin-page .header-top-btn-group .btn.btn-icon-left {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
	.system-map-page .header-top-btn-group .btn.btn-icon-left::before,
	.map-daemin-page .header-top-btn-group .btn.btn-icon-left::before {
		display: none !important;
	}

	/* === I. 셀렉트 그룹 컴팩트화 + 카드 padding 축소 === */
	.system-map-page .map-top-control-wrapper,
	.map-daemin-page .map-top-control-wrapper {
		padding: 6px !important;
	}
	.system-map-page .map-top-control-wrapper .page-top-btn-group,
	.map-daemin-page .map-top-control-wrapper .page-top-btn-group {
		gap: 4px;
	}
	.system-map-page .map-top-control-wrapper .select-group,
	.map-daemin-page .map-top-control-wrapper .select-group {
		gap: 4px;
	}
	.system-map-page .map-top-control-wrapper .select-group .input-group-label,
	.map-daemin-page .map-top-control-wrapper .select-group .input-group-label,
	.system-map-page .map-top-control-wrapper .select-group .input-label-display,
	.map-daemin-page .map-top-control-wrapper .select-group .input-label-display {
		font-size: 12px;
		font-weight: bold;
		white-space: nowrap;
		margin: 0;
	}
	.system-map-page .map-top-control-wrapper #mapType,
	.map-daemin-page .map-top-control-wrapper #mapType {
		height: 28px !important;
		padding: 2px 6px !important;
		font-size: 12px;
	}
	.system-map-page .map-top-control-wrapper .toggle-btn-group .map-view-icon,
	.map-daemin-page .map-top-control-wrapper .toggle-btn-group .map-view-icon {
		padding: 4px 2px !important;
		height: auto !important;
	}
	.system-map-page .map-top-control-wrapper .mt-checkbox-inline,
	.map-daemin-page .map-top-control-wrapper .mt-checkbox-inline {
		padding: 2px 0 !important;
		font-size: 12px;
	}

	/* === K. 도로 ON/OFF를 셀렉트 좌측에 inline 배치 (세로 중앙 정렬) === */
	.system-map-page .map-top-control-wrapper .page-top-btn-group,
	.map-daemin-page .map-top-control-wrapper .page-top-btn-group {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
	}
	/* 도로 ON/OFF — 셀렉트보다 앞에 배치 (order:1) + 세로 중앙 */
	.system-map-page .map-top-control-wrapper .mt-checkbox-inline,
	.map-daemin-page .map-top-control-wrapper .mt-checkbox-inline {
		position: static !important;
		top: auto !important;
		right: auto !important;
		width: auto !important;
		padding: 0 !important;
		margin: 0 !important;
		flex: 0 0 auto;
		order: 1;
		white-space: nowrap;
		display: inline-flex;
		align-items: center;
		font-size: 12px;
	}
	.system-map-page .map-top-control-wrapper .mt-checkbox-inline label,
	.map-daemin-page .map-top-control-wrapper .mt-checkbox-inline label {
		font-size: 12px;
		margin: 0;
		white-space: nowrap;
		display: inline-flex;
		align-items: center;
	}
	/* 셀렉트 그룹 — 도로 ON/OFF 다음 (order:2), 세로 중앙 */
	.system-map-page .map-top-control-wrapper .select-group,
	.map-daemin-page .map-top-control-wrapper .select-group {
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0;
		order: 2;
		display: flex;
		align-items: center;
		gap: 6px;
	}
	/* 베이스맵 그룹은 다음 row로 (order:3) */
	.system-map-page .map-top-control-wrapper .map-top-default-control-group,
	.map-daemin-page .map-top-control-wrapper .map-top-default-control-group {
		width: 100%;
		order: 3;
	}

	/* === L. 사이드바 상단 패딩 제거
	   (헤더 회피는 sidebar의 top: var(--map-header-h)가 담당) === */
	.system-map-page .page-sidebar-wrapper,
	.map-daemin-page .page-sidebar-wrapper,
	.fact-finding-survey-map-page .page-sidebar-wrapper {
		padding-top: 0 !important;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.system-map-page .page-sidebar .system-left-tab-wrapper,
	.map-daemin-page .page-sidebar .system-left-tab-wrapper {
		padding-top: 0;
	}
	.system-map-page .page-sidebar .system-left-tab-wrapper .tab-content,
	.map-daemin-page .page-sidebar .system-left-tab-wrapper .tab-content {
		padding-top: 8px;
	}

	/* === J. 우측 줌 컨트롤 부모 흰 배경/테두리 제거 + li 회색선 제거 === */
	.system-map-page .map-right-control-group,
	.map-daemin-page .map-right-control-group,
	.fact-finding-survey-map-page .map-right-control-group {
		background-color: transparent !important;
		background: none !important;
		border: none !important;
		box-shadow: none !important;
	}
	.system-map-page .map-right-control-wrapper,
	.map-daemin-page .map-right-control-wrapper,
	.fact-finding-survey-map-page .map-right-control-wrapper {
		background: none !important;
		border: none !important;
		box-shadow: none !important;
	}
	/* li의 회색 테두리 제거 (map.css:1200 .map-right-btn-group > li { border:1px solid #b6b6b6 } 차단) */
	.system-map-page .map-right-btn-group > li,
	.map-daemin-page .map-right-btn-group > li,
	.fact-finding-survey-map-page .map-right-btn-group > li {
		border: none !important;
		margin: 0 !important;
		float: none !important;
		width: auto !important;
		background: none !important;
	}

	/* === M. 사이드바 검색결과 카드형 — 1열 가변폭으로 빈 공간 없음 === */
	.system-map-page .page-sidebar table tbody tr,
	.map-daemin-page .page-sidebar table tbody tr {
		display: flex !important;
		flex-direction: row;
		align-items: center;
		padding: 8px;
		border-bottom: 1px solid #e0e0e0;
		gap: 8px;
	}
	/* 1열: 시설명+주소 — 남은 공간 모두 차지 */
	.system-map-page .page-sidebar table tbody tr > td:first-child,
	.map-daemin-page .page-sidebar table tbody tr > td:first-child {
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
		display: block !important;
		border: none !important;
		padding: 0 !important;
		margin: 0;
	}
	/* 2/3열 (t-center): 우측 끝 고정 */
	.system-map-page .page-sidebar table tbody tr > td.t-center,
	.map-daemin-page .page-sidebar table tbody tr > td.t-center {
		flex: 0 0 auto !important;
		width: auto !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		border: none !important;
		padding: 0 !important;
		margin: 0;
	}

	/* 시설명/주소 텍스트 정상 wrap */
	.system-map-page .search-result-title,
	.map-daemin-page .search-result-title {
		font-size: 14px !important;
		display: block;
		word-break: keep-all;
		white-space: normal;
	}
	.system-map-page .search-result-address,
	.map-daemin-page .search-result-address {
		font-size: 12px !important;
		display: block;
		word-break: keep-all;
		white-space: normal;
		color: #555;
	}
	.system-map-page .search-result-group,
	.map-daemin-page .search-result-group {
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-start;
		gap: 8px;
	}
	.system-map-page .search-result-icon,
	.map-daemin-page .search-result-icon {
		flex: 0 0 auto;
		width: 24px;
		height: 24px;
		line-height: 24px;
		font-size: 12px;
	}
	.system-map-page .search-result-text-group,
	.map-daemin-page .search-result-text-group {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* 댓글 버튼 컴팩트 */
	.system-map-page .page-sidebar .btn.btn-default,
	.map-daemin-page .page-sidebar .btn.btn-default {
		font-size: 11px;
		padding: 4px 8px;
		height: auto;
		min-width: 0;
	}

	/* 테이블 헤더 숨김 (카드형에서 불필요) */
	.system-map-page .page-sidebar table thead,
	.map-daemin-page .page-sidebar table thead {
		display: none;
	}
}

/* --------- 윈도우팝업(window-popup) --------- */
@media (max-width: 991px) {
	.page-window-popup .page-content {
		padding: 16px;
	}
}
@media (max-width: 767px) {
	.page-window-popup .page-content {
		padding: 12px;
	}
	.page-window-popup .contents-row.row-blank {
		padding: 0 12px;
	}
	.page-window-popup .window-popup-map-top-bar .map-top-bar-inner,
	.page-window-popup .map-top-bar-inner {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	.page-window-popup .table-responsive {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ===================================
	01. 레이아웃 끝
====================================== */