/* QGIS2Web 웹 지도 스타일시트 */
/* QGIS에서 웹 지도로 내보낼 때 자동 생성되는 CSS 파일 */
/* 지도의 기본 레이아웃, 팝업, 컨트롤 등의 스타일 정의 */

/* ===== 기본 지도 컨테이너 스타일 ===== */

/* 지도 배경색 설정 */
#map {
    background-color: #ffffff; /* 흰색 배경 */
}

/* HTML, BODY, 지도 컨테이너의 오버플로우 숨김 (스크롤바 제거) */
html, body, #map {
    overflow: hidden; /* 스크롤바 숨김 */
}

/* ===== 레이아웃 컬럼 스타일 ===== */

/* 9칸 컬럼 (지도 영역) - 전체 높이 설정 */
.col9 {
    height: 100% !important; /* 전체 높이 강제 적용 */
}

/* 3칸 컬럼 (사이드바 영역) - 스크롤 가능한 높이 설정 */
.col3 {
    height: 100%; /* 전체 높이 */
    overflow: auto; /* 내용이 넘칠 경우 스크롤 표시 */
}

/* ===== 정보창 스타일 ===== */

/* 기본 정보창 스타일 */
.info {
    padding: 6px 8px; /* 내부 여백 */
    font: 14px/16px Arial, Helvetica, sans-serif; /* 폰트 설정 */
    background-color: #f8f8f8 !important; /* 연한 회색 배경 */
    color: #444444 !important; /* 진한 회색 텍스트 */
    box-shadow: 0 0 15px rgba(0,0,0,0.2); /* 그림자 효과 */
    border-radius: 5px; /* 둥근 모서리 */
}

/* 정보창 제목 스타일 */
.info h2 {
    margin: 0 0 5px; /* 하단 여백만 설정 */
}

/* ===== Leaflet 컨테이너 스타일 ===== */

/* Leaflet 지도 컨테이너 */
.leaflet-container {
    background: #fff; /* 흰색 배경 */
    padding-right: 10px; /* 우측 패딩 */
}

/* ===== 팝업 스타일 ===== */

/* 스크롤 가능한 팝업의 테두리 제거 */
.leaflet-popup-scrolled {
    border-bottom: unset !important; /* 하단 테두리 제거 */
    border-top: unset !important; /* 상단 테두리 제거 */
}

/* 팝업 내용 영역 크기 제한 */
.leaflet-popup-content {
    max-height: 70vh; /* 최대 높이: 뷰포트 높이의 70% */
    max-width: 70vw; /* 최대 너비: 뷰포트 너비의 70% */
}

/* 미디어 팝업 내용 크기 자동 조정 */
.leaflet-popup-content.media {
    width: auto !important; /* 너비 자동 */
    height: auto !important; /* 높이 자동 */
}

/* 팝업 테이블 헤더 스타일 */
.leaflet-popup-content th {
    text-align: left; /* 좌측 정렬 */
    vertical-align: top; /* 상단 정렬 */
    min-width: 75px; /* 최소 너비 */
}

/* 팝업 테이블 셀 스타일 */
.leaflet-popup-content td {
    min-width: 75px; /* 최소 너비 */
}

/* 팝업 내 이미지 크기 제한 */
.leaflet-popup-content td img {
    max-height: 60vh; /* 최대 높이: 뷰포트 높이의 60% */
    max-width: 60vw; /* 최대 너비: 뷰포트 너비의 60% */
}

/* ===== 툴팁 스타일 ===== */

/* 툴팁 배경 및 테두리 제거 */
.leaflet-tooltip {
    background: none; /* 배경 없음 */
    box-shadow: none; /* 그림자 없음 */
    border: none; /* 테두리 없음 */
}

/* 툴팁 화살표 제거 */
.leaflet-tooltip-left:before, .leaflet-tooltip-right:before {
    border: 0px; /* 화살표 테두리 제거 */
}

/* ===== 전역 색상 설정 ===== */

/* FontAwesome 아이콘, 지도 컨테이너, 링크 색상 */
.fa, .leaflet-container, a {
    color: #444444 !important; /* 진한 회색 */
}

/* ===== 컨트롤 버튼 스타일 ===== */

/* 확대/축소, 위치찾기, 검색, 측정 컨트롤 버튼 */
.leaflet-control-zoom-in, .leaflet-control-zoom-out,
.leaflet-control-locate a,
.leaflet-touch .leaflet-control-geocoder-icon,
.leaflet-control-search .search-button,
.leaflet-control-measure {
    background-color: #f8f8f8 !important; /* 연한 회색 배경 */
    border-radius: 0px !important; /* 각진 모서리 */
    color: #444444 !important; /* 진한 회색 텍스트 */
}

/* ===== 요약 정보 스타일 ===== */

/* 축약된 요약 정보 (접힌 상태) */
.abstract {
    font: bold 18px 'Lucida Console', Monaco, monospace; /* 고정폭 폰트 */
    text-indent: 1px; /* 텍스트 들여쓰기 */
    background-color: #f8f8f8 !important; /* 연한 회색 배경 */
    width: 30px !important; /* 고정 너비 */
    color: #444444 !important; /* 진한 회색 텍스트 */
    height: 30px !important; /* 고정 높이 */
    text-align: center !important; /* 가운데 정렬 */
    line-height: 30px !important; /* 줄 높이 */
}

/* 펼쳐진 요약 정보 */
.abstractUncollapsed {
    padding: 6px 8px; /* 내부 여백 */
    font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; /* 폰트 */
    background-color: #f8f8f8 !important; /* 연한 회색 배경 */
    color: #444444 !important; /* 진한 회색 텍스트 */
    box-shadow: 0 0 15px rgba(0,0,0,0.2); /* 그림자 효과 */
    border-radius: 5px; /* 둥근 모서리 */
    max-width: 40%; /* 최대 너비 */
}

/* ===== 컨트롤 그림자 효과 ===== */

/* 모든 컨트롤에 그림자 적용 */
.leaflet-control {
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4) !important; /* 그림자 효과 */
}

/* 터치 디바이스용 컨트롤 테두리 */
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar,
.leaflet-control-search,
.leaflet-control-measure {
    border: 3px solid rgba(255,255,255,.4) !important; /* 반투명 흰색 테두리 */
}

/* ===== 저작권 표시 스타일 ===== */

/* 저작권 링크 색상 */
.leaflet-control-attribution a {
    color: #0078A8 !important; /* 파란색 */
}

/* ===== 축척선 스타일 ===== */

/* 축척선 테두리 및 색상 */
.leaflet-control-scale-line {
    border: 2px solid #f8f8f8 !important; /* 연한 회색 테두리 */
    border-top: none !important; /* 상단 테두리 제거 */
    color: black !important; /* 검은색 텍스트 */
}

/* ===== 검색 컨트롤 스타일 ===== */

/* 검색 버튼 및 컨테이너 그림자 제거 */
.leaflet-control-search .search-button,
.leaflet-container .leaflet-control-search,
.leaflet-control-measure {
    box-shadow: none !important; /* 그림자 제거 */
}

/* 검색 버튼 크기 및 스타일 */
.leaflet-control-search .search-button {
    width: 30px !important; /* 고정 너비 */
    height: 30px !important; /* 고정 높이 */
    font-size: 13px !important; /* 폰트 크기 */
    text-align: center !important; /* 가운데 정렬 */
    line-height: 30px !important; /* 줄 높이 */
}

/* 측정 컨트롤 크기 */
.leaflet-control-measure .leaflet-control {
    width: 30px !important; /* 고정 너비 */
    height: 30px !important; /* 고정 높이 */
}

/* 검색 컨테이너 배경 제거 */
.leaflet-container .leaflet-control-search {
    background: none !important; /* 배경 없음 */
}

/* 검색 입력창 스타일 */
.leaflet-control-search .search-input {
    margin: 0px 0px 0px 0px !important; /* 여백 제거 */
    height: 30px !important; /* 고정 높이 */
}

/* ===== 측정 컨트롤 스타일 ===== */

/* 측정 컨트롤 배경 및 모서리 */
.leaflet-control-measure {
    background: none !important; /* 배경 없음 */
    border-radius: 4px !important; /* 둥근 모서리 */
}

/* 측정 상호작용 영역 배경 */
.leaflet-control-measure .leaflet-control-measure-interaction {
    background-color: #f8f8f8 !important; /* 연한 회색 배경 */
}

/* 터치 디바이스용 측정 토글 버튼 */
.leaflet-touch .leaflet-control-measure
.leaflet-control-measure-toggle,
.leaflet-touch .leaflet-control-measure
.leaflet-control-measure-toggle:hover {
    width: 30px !important; /* 고정 너비 */
    height: 30px !important; /* 고정 높이 */
    border-radius: 0px !important; /* 각진 모서리 */
    background-color: #f8f8f8 !important; /* 연한 회색 배경 */
    color: #444444 !important; /* 진한 회색 텍스트 */
    font-size: 13px; /* 폰트 크기 */
    line-height: 30px; /* 줄 높이 */
    text-align: center; /* 가운데 정렬 */
    text-indent: 0%; /* 들여쓰기 제거 */
}

/* ===== 레이어 컨트롤 스타일 ===== */

/* 레이어 컨트롤 패널 크기 및 스타일 */
.leaflet-control-layers {
    min-width: 200px !important;
    max-width: 200px !important;
    width: 200px !important;
    padding: 10px 8px 8px 8px !important;
    border-radius: 12px !important;
    font-size: 13px;
}

/* 레이어 목록 스크롤 영역 */
.leaflet-control-layers-list {
    font-size: 13px; /* 폰트 크기 */
    max-height: 380px; /* 최대 높이 */
    overflow-y: auto; /* 세로 스크롤 */
}

/* 레이어 라벨 스타일 */
.leaflet-control-layers label {
    padding: 4px 0 4px 0; /* 상하 여백 */
    font-size: 13px; /* 폰트 크기 */
    border-radius: 6px; /* 둥근 모서리 */
}

/* 체크박스 및 라디오 버튼 스타일 */
.leaflet-control-layers input[type="checkbox"],
.leaflet-control-layers input[type="radio"] {
    width: 14px; /* 너비 */
    height: 14px; /* 높이 */
    border-radius: 4px; /* 둥근 모서리 */
    margin-right: 7px; /* 우측 여백 */
}

/* 라디오 버튼 원형 모서리 */
.leaflet-control-layers input[type="radio"] {
    border-radius: 50%; /* 완전한 원형 */
}

/* 체크박스 및 라디오 버튼 체크 표시 */
.leaflet-control-layers input[type="checkbox"]:checked:after,
.leaflet-control-layers input[type="radio"]:checked:after {
    width: 6px; /* 체크 표시 너비 */
    height: 6px; /* 체크 표시 높이 */
    margin: 2px auto; /* 가운데 정렬 */
}

/* 레이어 컨트롤 토글 버튼 크기 */
.leaflet-control-layers .leaflet-control-layers-toggle {
    width: 28px !important; /* 고정 너비 */
    height: 28px !important; /* 고정 높이 */
    font-size: 15px !important; /* 폰트 크기 */
}

/* ===== 레이어 Z-인덱스 설정 ===== */

/* 오버레이 레이어 Z-인덱스 */
.leaflet-overlay-pane {
    z-index: 550; /* 오버레이 레이어 우선순위 */
}

/* 팝업 레이어 Z-인덱스 */
.leaflet-popup-pane {
    z-index: 700; /* 팝업 레이어 최우선순위 */
}