/* .main-content {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 30px;
	} */
	/* .map-panel { */
	/* flex: 1; */
	/* min-width: 350px; */
	/* background: white; */
	/* border-radius: 10px; */
	/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
	/* } */
	.map-container {
	/* flex: 2; */
	/* min-width: 500px; */
	/* height: 90vh; */
	/* min-height: 400px !important; */
	/* border-radius: 10px; */
	overflow: hidden;
	/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
	position: relative;
	/* background-color: #f5f7fa; */
	}
	.openMap {
	width: 100%;
	height: 100%;
	min-height: 100vh;
	position: static;
	}
	/* .file-upload-area {
	border: 2px dashed #3498db;
	border-radius: 8px;
	padding: 30px 20px;
	text-align: center;
	margin-bottom: 25px;
	transition: all 0.3s;
	cursor: pointer;
	background-color: #f8fafc;
	}
	.file-upload-area:hover {
	border-color: #2980b9;
	background-color: #edf7ff;
	}
	.file-upload-area.dragover {
	border-color: #27ae60;
	background-color: #e8f6ef;
	} */
	/* .upload-icon {
	font-size: 48px;
	color: #3498db;
	margin-bottom: 15px;
	}
	.upload-text {
	font-size: 16px;
	color: #555;
	margin-bottom: 10px;
	}
	.file-input {
	display: none;
	} */
	/* .file-list {
	margin-top: 20px;
	} */
	.file-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 15px;
	background-color: #f8f9fa;
	border-radius: 6px;
	margin-bottom: 10px;
	border-left: 4px solid #3498db;
	}
	.file-name {
	font-weight: 600;
	color: #2c3e50;
	}
	.file-size {
	color: #7f8c8d;
	font-size: 0.9rem;
	}
	.file-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 0.8rem;
	font-weight: 600;
	}
	.status-success {
	background-color: #d5f4e6;
	color: #27ae60;
	}
	.status-processing {
	background-color: #ffeaa7;
	color: #f39c12;
	}
	.status-error {
	background-color: #fadbd8;
	color: #e74c3c;
	}
	.status-warning {
	background-color: #fef5e7;
	color: #f39c12;
	}
	/* .info-panel {
	background: white;
	border-radius: 10px;
	padding: 20px;
	margin-top: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}
	.info-panel h3 {
	color: #2c3e50;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
	} */
	.shape-info {
	background-color: #f8f9fa;
	padding: 15px;
	border-radius: 6px;
	max-height: 300px;
	overflow-y: auto;
	white-space: pre-wrap;
	font-size: 0.9rem;
	line-height: 1.4;
	}
	.controls {
	/* background: white; */
	/* padding: 15px;
	border-radius: 8px; */
	/* margin-top: 20px; */
	/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
	}
	/* .control-group {
	margin-bottom: 15px;
	}
	.control-group label {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
	color: #2c3e50;
	}
	.control-group input, .control-group select {
	width: 100%;
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	} */
	.dbf-warning {
	background-color: #fff3cd;
	border: 1px solid #ffeaa7;
	color: #856404;
	padding: 15px;
	border-radius: 6px;
	margin-top: 15px;
	font-size: 0.9rem;
	display: none;
	}
	.dbf-warning strong {
	color: #e74c3c;
	}
	/* .map-message-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.95);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	text-align: center;
	padding: 40px;
	}
	.map-message-icon {
	font-size: 64px;
	color: #e74c3c;
	margin-bottom: 20px;
	}
	.map-message-title {
	font-size: 24px;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 15px;
	}
	.map-message-content {
	color: #7f8c8d;
	max-width: 500px;
	margin-bottom: 25px;
	line-height: 1.6;
	}
	.map-message-list {
	text-align: left;
	max-width: 500px;
	margin-bottom: 25px;
	padding-left: 20px;
	}
	.map-message-list li {
	margin-bottom: 8px;
	color: #555;
	} */
	.color-scheme-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 10px;
	padding: 10px;
	background-color: #f8f9fa;
	border-radius: 5px;
	}
	.color-item {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	}
	.color-box {
	width: 20px;
	height: 20px;
	border-radius: 3px;
	border: 1px solid #ddd;
	}
	.legend-container {
	position: absolute;
	bottom: 20px;
	right: 20px;
	background: white;
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	z-index: 999;
	max-width: 300px;
	max-height: 200px;
	min-width:150px;
	overflow-y: auto;
	display: none;
	}
	.legend-title {
	font-weight: bold;
	margin-bottom: 10px;
	color: #2c3e50;
	border-bottom: 1px solid #eee;
	padding-bottom: 5px;
	}
	.legend-item {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	font-size: 13px;
	}
	.legend-color {
	width: 20px;
	height: 20px;
	border-radius: 3px;
	margin-right: 10px;
	border: 1px solid #ddd;
	}
	.legend-text {
	flex: 1;
	}
	.legend-count {
	color: #7f8c8d;
	font-size: 11px;
	margin-left: 5px;
	}
	
	/* .progress-container {
	margin-top: 20px;
	display: none;
	}
	.progress-bar {
	width: 100%;
	height: 10px;
	background-color: #ecf0f1;
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 10px;
	} */
	/* .progress-fill {
	height: 100%;
	background-color: #2ecc71;
	width: 0%;
	transition: width 0.3s;
	} */
	/* .progress-text {
	text-align: center;
	font-size: 0.9rem;
	color: #7f8c8d;
	} */
	/* .sig-stats {
	margin-top: 15px;
	background-color: #f8f9fa;
	padding: 10px;
	border-radius: 5px;
	font-size: 12px;
	display: none;
	} */
	/* .coordinate-info {
	background-color: #e8f4fc;
	padding: 10px;
	border-radius: 6px;
	margin-top: 10px;
	font-size: 12px;
	margin-bottom: 15px;
	} */
	/* .debug-info {
	background-color: #f8f9fa;
	padding: 10px;
	border-radius: 5px;
	margin-top: 10px;
	font-size: 12px;
	color: #666;
	display: none;
	} */
	@media (max-width: 768px) {
	/* .main-content {
	flex-direction: column;
	} */
	/* .map-container, .map-panel {
	min-width: 100%;
	} */
	.legend-container {
	position: relative;
	bottom: auto;
	right: auto;
	margin-top: 20px;
	max-width: 100%;
	}
	}
	.korea-only-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: rgba(231, 76, 60, 0.9);
	color: white;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: bold;
	z-index: 1000;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	}
	.map-restriction-info {
	position: absolute;
	bottom: 50px;
	left: 10px;
	background-color: rgba(255, 255, 255, 0.9);
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 11px;
	color: #333;
	z-index: 999;
	max-width: 250px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	}
	.version-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: rgba(52, 152, 219, 0.9);
	color: white;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: bold;
	z-index: 1000;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	}
	.leaflet-interactive:focus, .leaflet-interactive:active {
	outline: 0px solid #e74c3c !important;
	outline-offset: 2px !important;
	}
	/* path.leaflet-interactive:focus {
	stroke: #cad7e0 !important;
	stroke-width: 2px !important;
	stroke-opacity: 1 !important;
	fill: #62bfea !important;
	}
 

	path.leaflet-interactive:hover {
	stroke: #cad7e0 !important;
	stroke-width: 2px !important;
	stroke-opacity: 1 !important;
	fill: #62bfea !important;
	} */
	.search-container {
	position: absolute;
	top: 10px;
	right: 10px;
	/* transform: translateX(-50%); */
	z-index: 700;
	background: white;
	padding: 8px 16px;
	border-radius: 2px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	width: 200px;
	display: none;
	border-radius: 20px;
	}
	.search-input-group {
	display: flex;
	gap: 5px;
	}
	.search-input {
	flex: 1;
	padding: 4px 8px;
	border: 1px solid #ddd;
	/* border-radius: 20px; */
	font-size: 14px;
	outline: none;
	width:100px;
	}
	.search-btn {
	/* background-color: #3498db;
	color: white;
	border: none;
	border-radius: 20px;
	padding: 8px 15px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600; */
	}
	.search-btn:hover {
	/* background-color: #2980b9; */
	}
	.search-toggle-btn {
	position: absolute;
	top: 15px;
	right: 10px;
	/* transform: translateX(-50%); */
	z-index: 500;
	background: white;
	padding: 8px 15px;
	border-radius: 18px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 5px;
	}
	.config-toggle-btn{
		position: absolute;
		top: 15px;
		left: 24px;
		transform: translateX(-50%);
		z-index: 500;
		cursor: pointer;
		font-size: 14px;
		font-weight: 600;
		display: flex;
		align-items: center;
		gap: 5px;
	}
	.mapSaveAsImg {
		position: absolute;
		top: 130px;
		left: 24px;
		transform: translateX(-50%);
		z-index: 500;
		cursor: pointer;
		font-size: 14px;
		font-weight: 600;
		display: flex;
		align-items: center;
		gap: 5px;
	}
	.scroll-top-map{
		position: absolute;
		top: 290px;
		right: 0px;
		transform: translateX(-50%);
		z-index: 500;
		cursor: pointer;
		font-size: 14px;
		font-weight: 600;
		display: flex;
		align-items: center;
		gap: 5px;
		/* opacity: 0.6; */
		display: none;
	}
	.scroll-down-map{
		position: absolute;
		top: 323px;
		right: 0px;
		transform: translateX(-50%);
		z-index: 500;
		cursor: pointer;
		font-size: 14px;
		font-weight: 600;
		display: flex;
		align-items: center;
		gap: 5px;
		/* opacity: 0.6; */
		display: none;
	}
	.leaflet-top .leaflet-control {
		margin-top: 50px;
		margin-left: 0px;
	}

	.search-results {
	position: absolute;
	top: 50px;
	right: 10px;
	width: 180px;
	background: white;

	/* border-radius: 10px; */
	box-shadow: 0 5px 15px rgba(0,0,0,0.2);
	max-height: 300px;
	overflow-y: auto;
	display: none;
	z-index: 1000;
	}
	.search-result-item {
	border-left: 4px solid #3498db;
	padding: 8px 15px;
	border-bottom: 1px solid #eee;
	cursor: pointer;
	font-size: 14px; 
	/* border-radius: 5px; */
	}
	.search-result-item:hover {
	background-color: #f5f7fa;
	}
	.search-result-item.active {
	background-color: #e8f4fc;
	border-left: 4px solid #3498db;
	}
	.result-name {
	font-weight: 600;
	color: #2c3e50;
	}
	.result-details {
	font-size: 12px;
	color: #7f8c8d;
	margin-top: 3px;
	}
	.no-background-info {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(255, 255, 255, 0.95);
	padding: 30px;
	border-radius: 10px;
	text-align: center;
	z-index: 500;
	max-width: 500px;
	box-shadow: 0 5px 20px rgba(0,0,0,0.2);
	display: none;
	}
	.no-background-info h3 {
	color: #2c3e50;
	margin-bottom: 15px;
	}
	.no-background-info p {
	color: #7f8c8d;
	margin-bottom: 20px;
	line-height: 1.6;
	}
	/* .loading-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
	display: none;
	}
	.spinner {
	width: 50px;
	height: 50px;
	border: 5px solid #f3f3f3;
	border-top: 5px solid #3498db;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	} */
	/* @keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
	} */
	/* .selected-layer {
	animation: pulse 1.5s infinite;
	stroke: #cad7e0 !important;
	stroke-width: 1px !important;
	fill: #62bfea !important;
	fill-opacity: 0.8 !important;
	} */
	@keyframes pulse {
	0% { opacity: 1; }
	50% { opacity: 0.8; }
	100% { opacity: 1; }
	}
	body.shift-pressed .leaflet-interactive {
	cursor: crosshair !important;
	}
	.multiselect-hint {
	position: absolute;
	top: 0;
	right: 20px;
	background: rgba(52, 152, 219, 0.9);
	color: white;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 12px;
	z-index: 500;
	display: none;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	}
	.selected-layer-item:hover {
	background-color: #e8f4fc !important;
	}
	.shift-active {
	border: 2px solid #3498db !important;
	}
	.leaflet-top, .leaflet-bottom {
	position: static;
	}
	.leaflet-control-attribution.leaflet-control {
	display: none;
	}
	.map-wrapper {
	position: relative; /* 기준점 */
	}
	.leaflet-container {
	background-color: #fff;
	}
	/*  
	.map-backgroundYn-group-label {
	position: absolute;
	top: 15px;      
	right: 45px;
	z-index: 500;   
	} */
	/* .map-backgroundYn-group {
	position: absolute;
	top: 35px;       
	right: 15px;
	z-index: 500;   
	} */
	   /* CSS 파일에 추가 */
.thumbnailMap svg {
    background-color: #f5f5f5;
}
.thumbnailMap path {
    stroke: #888888 !important;
    fill: #cccccc !important;
}
/* #target {
  width: 300px;
  height: 300px;   
  background: #eee;
} */

 .blank-box {
    width: 100%;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
    margin: 0 auto;
    background: #ffffff;
	width: 90px;
	height: 90px;
 }
 @media (max-width: 575.98px) {
  .blank-box {
    width: 62px;
	height: 62px;
  }
  .openMap {
	width: 100%;
	height: 100%;
	min-height: 600px;
	position: static;
	}
	.scroll-top-map {
		display: block; 
	}
	.scroll-down-map {
		display: block; 
	}
}
@keyframes dash {
  to { stroke-dashoffset: -10; }
}

  
.selected-layer {
  /* 1. 테두리 애니메이션 (기존 코드) */
  stroke: #ffffff  ;
  stroke-width: 2px ;
  stroke-dasharray: 10;
  animation: dash 1s linear infinite;

  /* 2. 백그라운드 패턴 추가 */
  /* url(#id)를 통해 위에서 만든 SVG 패턴을 호출합니다 */
  fill: url(#diagonal-stripe) !important;
  
  /* 마우스 커서 변경 */
  cursor: pointer;
  filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}


.mouseover-layer {
  /* 1. 테두리 애니메이션 (기존 코드) */
  stroke: #ffffff ;
  stroke-width: 1px ;
  /* stroke-dasharray: 5;
  animation: dash 1s linear infinite; */

  /* 2. 백그라운드 패턴 추가 */
  /* url(#id)를 통해 위에서 만든 SVG 패턴을 호출합니다 */
  fill: url(#mouseover-stripe) ;
  
  /* 마우스 커서 변경 */	
  cursor: pointer;
  filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}
.disable-text-selection {
  /* 글자 선택(블록)만 비활성화 */
  user-select: none;
  -webkit-user-select: none; /* Safari용 */
}

.openMapSelectionInfo {
		   position: absolute; 
            top: 20px;
            right:10px; /* 우측 상단에 배치 */
		 
		background: white; 
		padding: 15px; 
		border-radius: 8px; 
		box-shadow: 0 2px 10px rgba(0,0,0,0.2); 
		z-index: 900; 
		max-width: 230px; 
		max-height: 260px; 
		/* overflow-y: auto; */
	}

	.selectionInfoTitle {
		cursor: move; /* 드래그 핸들 */
	}
	.clearSelectionOpenMapBtn {
		float: right; 
		background: #e74c3c; 
		color: white; 
		border: none; 
		border-radius: 4px; 
		padding: 2px 8px; 
		font-size: 12px; 
		cursor: pointer;
	}
 	.selected-layer-item {
		padding: 8px; 
		margin-bottom: 5px; 
		background: #f8f9fa; 
		border-radius: 4px; 
		border-left: 4px solid #3498db; 
		cursor: pointer;
	}
	.selectionInfoList {
		max-height: 120px;
		min-height:60px;
		overflow-y: auto;
		width:100%;
	}
	.selectionInfoTitle {
		margin-bottom: 10px; 
		border-bottom: 1px solid #eee; 
		padding-bottom: 5px;
	}
	.selectionInfoBottom {
		margin-top: 0px; padding-top: 5px; 
		border-top: 1px solid #eee; 
		font-size: 12px; color: #666;
	} 
/* 2. 점선 애니메이션 정의 */
        @keyframes dash {
            to { stroke-dashoffset: -20; }
        }

       

  .custom-div-icon {
    border: none !important;
    background: none !important;
}

.label-wrapper {
    /* 1. 글자가 아래로 떨어지지 않게 강제 한 줄 설정 */
    white-space: nowrap !important; 
    /* 2. div 너비가 0이더라도 내부 콘텐츠는 다 보이게 설정 */
    display: inline-block; 
}

.label-wrapper span {
    display: inline-block;
    padding: 4px 8px;
    /* 텍스트가 너무 길어지는 것을 방지하고 싶다면 최대 너비 지정 가능 */
    max-width: 200px; 
    overflow: visible;
}

.legend-list-item {
	cursor: pointer;
}