/* ... existing styles ... */

/* 범례 컨테이너 스타일 (map-init.js 또는 JSP에서 ID 지정) */
#map-legend-container {
    position: absolute; /* 지도 컨테이너 기준 위치 */
    top: 10px; /* 아래쪽에서 20px 떨어진 위치 */
    left: 10px; /* 오른쪽에서 20px 떨어진 위치 */
    z-index: 999; /* 지도 컨트롤이나 오버레이 아래, 지도 위에 표시 */
    display: flex; /* 여러 범례가 있을 경우 쌓이도록 */
    flex-direction: column; /* 세로 방향으로 쌓기 */
    gap: 10px; /* 범례 간 간격 */
    pointer-events: none; /* 기본적으로 컨테이너는 클릭 안 되게 */
}

#map-legend-container * {
    pointer-events: auto; /* 내부 요소는 클릭 가능하게 */
}


/* 각 범례 스타일 */
.map-legend {
    background: rgba(255, 255, 255, 0.95); /* 반투명 흰색 배경 */
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* 내용이 테두리 밖으로 나가지 않도록 */
    font-family: sans-serif;
    font-size: 13px;
    min-width: 150px;
    max-width: 250px;
}

/* 범례 헤더 (제목 및 닫기 버튼) */
.legend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background-color: #f8f9fa; /* 헤더 배경색 */
    border-bottom: 1px solid #eee;
    font-weight: bold;
}

.legend-title {
    flex-grow: 1; /* 제목이 공간 채우도록 */
    margin-right: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.close-legend-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    margin: 0;
}

.close-legend-btn:hover {
    color: #333;
}

/* 범례 본문 (항목 목록) */
.legend-body {
    padding: 8px 10px;
}

/* 각 범례 항목 (색상 및 라벨) */
.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.legend-item:last-child {
    margin-bottom: 0; /* 마지막 항목 하단 마진 제거 */
}

.legend-color {
    display: inline-block;
    width: 20px; /* 색상 사각형 크기 */
    height: 14px; /* 색상 사각형 크기 */
    margin-right: 8px;
    border: 1px solid #aaa; /* 색상 구분을 위한 테두리 */
    box-sizing: border-box; /* 테두리 포함 크기 */
}

.legend-label {
    flex-grow: 1; /* 라벨이 남은 공간 채우도록 */
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 컬러맵 범례에만 적용될 추가 스타일 */
.colormap-legend .legend-item {
    /* 컬러맵에 특화된 스타일 */
}