/* 웹접근성 개선 */
.skip-link {position: absolute;left: -9999px;z-index: 99999;}
.skip-link:focus {left: 50%;transform: translateX(-50%);top: 10px;padding: 10px 20px;background: #d23836;color: #fff;text-decoration: none;border-radius: 4px;}

/* 키보드 포커스 스타일 */
.filter-tabs .filter-btn:focus {outline: 3px solid #4a90e2;outline-offset: 2px;}
.facility-table tr:focus {outline: 3px solid #4a90e2;outline-offset: -2px;}
.facility-card:focus {outline: 3px solid #4a90e2;outline-offset: 2px;}
.btn:focus {outline: 3px solid #4a90e2;outline-offset: 2px;}
.pagination a:focus {outline: 3px solid #4a90e2;outline-offset: 2px;}
.childmap-modal-close:focus {outline: 3px solid #4a90e2;outline-offset: 2px;}

/* 키보드 접근 가능한 테이블 행 */
.facility-table tr {cursor: pointer;}
.facility-table tr[tabindex="0"]:focus {background: #e3f2fd;outline: 3px solid #4a90e2;outline-offset: -2px;}

.new-window-icon { display: inline-block; margin-left: 4px; font-size: 0.9em; vertical-align: middle; opacity: 0.7; }
.filter-btn .new-window-icon { font-weight: normal; }

/* 스크린 리더용 숨김 텍스트 */
.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border-width: 0;}

/* 탭 필터 */
.filter-tabs {display: flex;flex-wrap: wrap;gap: 20px;margin:30px 0;padding: 20px;background: #f8f9fa;border-radius: 8px; border:1px #ddd solid;}
.filter-tabs .tab-group {display: flex;flex-wrap: wrap;gap: 10px;align-items: flex-start;width: 100%;padding-bottom: 20px;border-bottom: 1px solid #e9ecef;}
.filter-tabs .tab-group:last-child {margin-bottom: 0;padding-bottom: 0;border-bottom: none;}
.filter-tabs .tab-group label {font-weight: 600;color: #333;margin-right: 20px;flex: 0 0 80px;padding: 8px 0;text-align: end;}
.filter-tabs .filter-group-content {flex: 1;display: flex;flex-wrap: wrap;gap: 10px;align-items: center;min-width: 200px;}
.filter-tabs .filter-btn {display: inline-block;padding: 10px 20px;border: 1px solid #ddd;border-radius: 25px;background: #fff;color: #333;font-size: 16px;cursor: pointer;transition: all 0.2s;white-space: nowrap;user-select: none;position: relative;}
.filter-tabs .filter-btn:hover {border-color: #d23836;color: #d23836;}
.filter-tabs .filter-btn.active {background: #4a5568;border-color: #4a5568;color: #fff;}
.filter-tabs .filter-btn.filter-all {background: #e9ecef;border-color: #ced4da;font-weight: 600;}
.filter-tabs .filter-btn.filter-all.active {background: #4a5568;border-color: #4a5568;color: #fff;}

/* 검색 폼 스타일 */
.filter-tabs .search-form {width: 100%;}
.filter-tabs .search-input-wrapper {display: flex;gap: 10px;align-items: center;width: 100%;flex-wrap: wrap;}
.filter-tabs .search-input {flex: 1;padding: 10px 15px;border: 1px solid #ddd;border-radius: 5px;font-size: 16px;outline: none;transition: all 0.2s;max-width: 400px;}
.filter-tabs .search-input:focus {border-color: #d23836;box-shadow: 0 0 0 3px rgba(210, 56, 54, 0.1);}


/* 버튼 스타일 */
.btn {display: inline-block;padding: 10px 20px;border: none;border-radius: 4px;font-size: 14px;cursor: pointer;text-decoration: none;transition: all 0.2s;}
.btn-nm {padding: 10px 20px;font-size: 14px;}
.btn-orange {background: #d23836;color: #fff;}
.btn-orange:hover {background: #b82d2b;}
.btn-gray {background: #6c757d;color: #fff;}
.btn-gray:hover {background: #5a6268;}

/* 지도 영역 */
.map-section {margin-bottom: 30px;position: relative;}
.map-container {width: 100%;height: 500px;border: 1px solid #ddd;border-radius: 8px;overflow: hidden;}

/* 리스트 영역 */
.list-section {margin-bottom: 30px;}
.list-header {margin-bottom:30px; padding:15px 0; border-bottom:2px solid #222;}
.list-header .count {font-size: 18px;font-weight: 600;color: #333;}
.list-header .count strong {color: #d23836;}

.facility-table-wrapper {overflow-x: auto;width: 100%;}
.facility-table {width: 100%;border-collapse: collapse;background: #fff;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
.facility-table th {background-color:#4a5568 !important; color:#fff !important; padding:15px; text-align:left; font-weight:600;}
.facility-table td {padding: 15px;border-bottom: 1px solid #e9ecef;}
.facility-table td:first-child {text-align:center;}
.facility-table tr:hover {background: #f8f9fa;cursor: pointer;}
.facility-table tr:hover td {background: #f8f9fa;}

/* 시설 소개 스타일 - 여러 줄 표시 후 넘치는 부분 숨김 */
.facility-info {max-height: 3em;line-height: 1.5;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow: ellipsis;word-break: break-word;}

/* 홈페이지 링크 스타일 */
.homepage-link {}
.homepage-link img {width: 30px; height: 30px;}
.homepage-link:hover img {opacity: 0.8;}
.homepage-link.disabled img {opacity: 0.5;cursor: default;}
.homepage-link:focus img {outline: 3px solid #4a90e2;outline-offset: 2px;}

/* 모바일 카드 리스트 */
.facility-card-list {display: none;}
.facility-card {background: #fff;border-radius: 8px;padding: 15px;margin-bottom: 15px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);cursor: pointer;transition: all 0.2s;border-left: 4px solid #d23836;}
.facility-card:hover {box-shadow: 0 4px 8px rgba(0,0,0,0.15);transform: translateY(-2px);}
.facility-card:focus {outline: 3px solid #4a90e2;outline-offset: 2px;}
.facility-card-header {display: flex;justify-content: space-between;align-items: flex-start;margin-bottom: 12px;padding-bottom: 12px;border-bottom: 1px solid #e9ecef;}
.facility-card-title {font-size: 1em;font-weight: 600;color: #333;margin-bottom: 5px;line-height: 1.4;}
.facility-card-badge {display: inline-block;padding: 4px 10px;border-radius: 12px;font-size: 0.8em;background: #4a5568;color: #fff;margin-top: 5px;}
.facility-card-info {display: flex;flex-direction: column;gap: 8px;}
.facility-card-row {display: flex;align-items: flex-start;gap: 10px;}
.facility-card-label {font-weight: 600;color: #666;font-size: 0.8em;min-width: 70px;flex-shrink: 0;}
.facility-card-value {flex: 1;font-size: 0.9em;color: #333;line-height: 1.5;word-break: break-word;}
.facility-card-description {font-size: 0.8em;color: #666;margin-top: 8px;padding-top: 8px;border-top: 1px solid #f0f0f0;line-height: 1.5;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.facility-card-homepage {margin-top: 12px;padding-top: 12px;border-top: 1px solid #f0f0f0;}
.facility-card-homepage .homepage-link {display: inline-block;padding: 8px 16px;background: #d23836;color: #fff;text-decoration: none;border-radius: 4px;font-size: 0.85em;transition: all 0.2s;width: 100%;text-align: center;}
.facility-card-homepage .homepage-link:hover {background: #b82d2b;color: #fff;}
.facility-card-homepage .homepage-link:focus {outline: 3px solid #4a90e2;outline-offset: 2px;}

/* 페이징 */
.pagination {display: flex;justify-content: center;align-items: center;gap: 10px;margin-top: 30px;}
.pagination a {padding: 10px 15px;border: 1px solid #ddd;border-radius: 4px;text-decoration: none;color: #333;transition: all 0.2s;}
.pagination a:hover {background: #4a5568;color: #fff;border-color: #4a5568;}
.pagination .current {background: #d23836;color: #fff;border-color: #d23836;font-weight: 600;padding: 10px 15px;border: 1px solid #ddd;border-radius: 4px;}

/* 모달 */
.childmap-modal {display: none;position: fixed;z-index: 30005;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.5);animation: childmap-fadeIn 0.3s;}
.childmap-modal[aria-hidden="true"] {display: none;}
.childmap-modal[aria-hidden="false"], .childmap-modal.show {display: flex;align-items: center;justify-content: center;padding-top: 30px;}
.childmap-modal-content {background-color: #fff;margin: auto;padding-bottom: 10px;border-radius: 8px;width: 96%;max-width: 1200px;max-height: 90vh;overflow: hidden;box-shadow: 0 4px 20px rgba(0,0,0,0.3);animation: childmap-slideIn 0.3s;display: flex;flex-direction: column;}

#design form {margin: 0px;}
@keyframes childmap-fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes childmap-slideIn {
	from {transform: translateY(-50px);opacity: 0;}
	to {transform: translateY(0);opacity: 1;}
}

.childmap-modal-header {padding: 10px 30px;border-bottom: 1px solid #e9ecef;display: flex;justify-content: space-between;align-items: center;background: #f8f9fa;}
.childmap-modal-header h2 {font-size: 24px;color: #333;margin: 0;}
.childmap-modal-close {background: none;border: none;font-size: 50px;color: #666;cursor: pointer;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;border-radius: 50%;transition: all 0.2s;}
.childmap-modal-close:hover {background: #e9ecef;color: #333;}
.childmap-modal-body {padding: 30px;display: flex;gap: 30px;overflow-y: auto;flex: 1;}

.childmap-modal-info {flex: 1;min-width: 400px;}
.childmap-modal-map {flex: 1;min-width: 400px;position: relative;}

.childmap-modal-info .info-section {margin-bottom: 25px;}
.childmap-modal-info .info-section:last-child {margin-bottom: 0;}
.childmap-modal-info .info-label {font-weight: 600;color: #333;margin-bottom: 8px;font-size: 16px;}
.childmap-modal-info .info-value {font-size: 14px;color: #555;line-height: 1.6;padding: 12px;background: #f8f9fa;border-radius: 4px;border-left: 3px solid #d23836;}
.childmap-modal-info .info-value-title {font-size: 18px;font-weight: 600;color: #333;}
.childmap-modal-map #detailMap {width: 100%;height: 400px;border-radius: 8px;border: 1px solid #ddd;}

/* 반응형 */
@media screen and (max-width: 768px) {
	.childmap-container {padding: 0px;}
	.childmap-container .childmap-header {padding: 20px 15px;}
	.childmap-container .childmap-header h1 {font-size: 26px;}
	.childmap-container .search-form .btn {flex: 1;}
	
	.filter-tabs {flex-direction: column;padding: 15px 10px;gap: 15px;}
	.filter-tabs .tab-group {display: flex;flex-wrap: wrap;gap: 10px;align-items: flex-start;width: 100%;margin-bottom: 0px;padding-bottom: 15px;border-bottom: 1px solid #e9ecef;}
	.filter-tabs .tab-group:last-child {border-bottom: none;padding-bottom: 0;}
	.filter-tabs .tab-group label {font-weight: 600;color: #333;width: 100%;margin-right: 0;flex: none;padding: 8px 0;text-align: left;font-size: 15px;border-bottom: 2px solid #d23836;margin-bottom: 10px;}
	.filter-tabs .filter-group-content {flex: none;width: 100%;gap: 8px;}
	.filter-tabs .filter-btn {padding: 8px 16px;font-size: 13px;}
	.filter-tabs .search-input {min-width: 100%;font-size: 14px;}
	
	.map-section {margin-bottom: 20px;padding: 0 10px;}
	.map-container {height: 350px;border-radius: 4px;}
	
	.list-section {padding: 0 10px;}
	.list-header {flex-direction: column;align-items: flex-start;gap: 10px;}
	.list-header .count {font-size: 16px;}
	
	/* 모바일에서는 테이블 숨기고 카드 리스트 표시 */
	.facility-table-wrapper {display: none;}
	.facility-card-list {display: block;}
	.facility-card {margin-bottom: 12px;}
	
	.pagination {flex-wrap: wrap;gap: 5px;padding: 15px 0;}
	.pagination a, .pagination .current {padding: 8px 12px;font-size: 13px;}
	
	.childmap-modal-content {width: 96%;max-width: 100%;height: 100%;max-height: 90vh;border-radius: 10px;}
	.childmap-modal-body {flex-direction: column;padding: 20px 15px;gap: 20px;}
	.childmap-modal-info, .childmap-modal-map {min-width: 100%;width: 100%;}
	.childmap-modal-map #detailMap {height: 300px;}
	.childmap-modal-header {padding: 15px 20px;}
	.childmap-modal-header h2 {font-size: 20px;}
}

@media screen and (max-width: 480px) {
	.childmap-container .childmap-header {padding: 15px 12px;}
	.childmap-container .childmap-header h1 {font-size: 20px;}
	
	.filter-tabs {padding: 12px 8px;}
	.filter-tabs .tab-group {padding-bottom: 12px;}
	.filter-tabs .tab-group label {font-size: 14px;}
	.filter-tabs .filter-btn {padding: 7px 14px;font-size: 12px;}
	
	.map-container {height: 300px;}
	
	.facility-card-title {font-size: 15px;}
	.facility-card-label {min-width: 60px;font-size: 12px;}
	.facility-card-value {font-size: 14px;}
	.facility-card-badge {font-size: 10px;padding: 3px 8px;}
	.facility-card-description {font-size: 11px;}
	
	.pagination a, .pagination .current {padding: 7px 10px;font-size: 12px;}
	
	.childmap-modal-header {padding: 12px 15px;}
	.childmap-modal-header h2 {font-size: 18px;}
	.childmap-modal-body {padding: 15px 12px;}
	.childmap-modal-map #detailMap {height: 250px;}
	.childmap-modal-info .info-value-title {font-size: 16px;}
	.childmap-modal-info .info-label {font-size: 14px;}
	.childmap-modal-info .info-value {font-size: 14px;padding: 10px;}
}