@charset "utf-8";
/* land-select.css — 초기화면 지적편집도의 토지 선택(정보 열람) UI + 지도영역 레이아웃 */

/*
	지도영역 최대화 모드 : 검색바와 푸터를 접어 지도 + 좌측 목록이 화면을 꽉 채우게 한다.
	실제 높이 계산은 index.html 의 resizeMapArea() 가 한다(검색바가 접히면 지도 상단도 따라 올라간다).
*/
body.mapMaxMode .search_bar { display: none !important; }
body.mapMaxMode #footer { display: none !important; }

/*
	[토지] 모드 전용 지적편집도(OpenLayers). 카카오 지도(#map) 자리를 그대로 덮는다.
	지도 컨트롤들은 DOM 상 뒤에 오는 position 요소라 이 위에 그대로 그려진다.
*/
#landOlMap { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #f2f2f2; }
#landOlMap.on { display: block; }
#landOlMap .ol-viewport { cursor: pointer; }	/* 필지를 클릭해 선택하는 화면이므로 */

/*
	토지 모드에서는 카카오 지도를 숨긴다.
	카카오 지도 내부 요소들이 z-index 를 갖고 있어 그냥 두면 #landOlMap 위로 올라온다.
	(그러면 확대할 때 카카오가 타일을 새로 그리는 순간에만 아래의 지적편집도가 비쳐 보이고,
	 마우스 휠·클릭도 카카오 지도가 가져간다)
	visibility 로 숨기면 레이아웃 크기가 남아 있어 복귀 시 map.relayout() 이 정상 동작하고,
	숨겨진 동안에는 포인터 이벤트도 받지 않아 OpenLayers 지도가 조작을 온전히 받는다.
*/
body.landOlMode #map { visibility: hidden; }

/*
	지적편집도(토지) 모드에서는 지도 컨트롤을 확대/축소와 영역 최대화만 남긴다.
	나머지는 이 모드에서 쓸 수 없거나(지도/위성·지적·로드뷰는 OpenLayers 지도에 적용되지 않는다)
	화면을 어지럽히기만 한다. 모드에서 빠져나가는 길은 좌측 패널의 [매물목록] 버튼이다.
	OpenLayers 를 못 써 카카오 지적편집도로 대체된 경우에도 같게 보이도록 CSS 로 묶었다.
*/
/* 지적편집도만 보면 되는 모드라 검색바도 접는다 (지도 높이는 resizeMapArea 가 다시 계산한다) */
body.landSelectMode .search_bar { display: none !important; }

body.landSelectMode .custom_typecontrol,		/* 지도 / 위성 */
body.landSelectMode .custom_areacontrol,		/* 지적 */
body.landSelectMode .custom_pointcontrol,		/* 현위치 */
body.landSelectMode #btnRoadview { display: none !important; }

/*
	토지 패널이 매물목록(440px)보다 좁으므로 지도의 왼쪽 시작점도 같이 당긴다.
	그러지 않으면 패널과 지도 사이에 빈 띠가 남는다.
	(원래 값 — 기본 440px / 좌측 내비 펼침 510px : style.css, kakao_map.css)

	※ 반드시 데스크탑으로 한정한다. 모바일은 지도가 전폭(left:0)이고 그 규칙의 선택자가
	   이보다 약해서, 미디어쿼리 없이 두면 모바일 지도까지 왼쪽으로 밀려난다.
*/
@media all and (min-width: 1001px) {
	body.landSelectMode #container.nomal > .contents_wrap > .kakao_map_wrap { left: 300px; }
	body.landSelectMode #header.navOn + #container .kakao_map_wrap { left: 370px; }	/* 내비 폭 70px 만큼 더 */

	/*
		접기 손잡이(.lspFold)로 목록을 접은 상태 — 패널은 경계선만 남기고 지도가 그 자리까지 넓어진다.
		손잡이는 접힌 뒤에도 남아야 펼칠 수 있으므로 그것만 빼고 내용을 숨긴다.
		모바일에는 하단 시트가 따로 있으므로 이 규칙 전체를 데스크탑으로 한정한다.
	*/
	.landSelectSide.on .lspFold { display: flex; }
	body.landFoldMode .landSelectSide { width: 0; }
	body.landFoldMode .landSelectSide > *:not(.lspFold) { display: none; }
	body.landSelectMode.landFoldMode #container.nomal > .contents_wrap > .kakao_map_wrap { left: 0; }
	body.landSelectMode.landFoldMode #header.navOn + #container .kakao_map_wrap { left: 70px; }
}

/* 출처 표기 (타일을 직접 그리는 지도라 카카오 SDK 로고가 없다 — 대신 직접 남긴다) */
#landOlMap .landOlCredit {
	position: absolute; left: 8px; bottom: 6px; z-index: 1;
	padding: 1px 5px; border-radius: 3px;
	background: rgba(255, 255, 255, .75);
	font-size: 11px; color: #555; pointer-events: none;
}

.custom_maxcontrol {
	position: absolute; top: 10px; left: 10px;
	width: 36px; height: 36px;
	overflow: hidden; z-index: 2;
	background-color: #fafafa;
}
.custom_maxcontrol .kakao_span {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; cursor: pointer; color: #333;
}
.custom_maxcontrol .material-symbols-outlined { font-size: 20px; line-height: 1; user-select: none; }
.custom_maxcontrol .kakao_btn:hover { background: #f5f5f5; background: linear-gradient(#f5f5f5, #e3e3e3); }
.custom_maxcontrol .kakao_selected_btn { color: #fff; background: #425470; background: linear-gradient(#425470, #5b6d8a); }

/*
	지적편집도 표시 옵션 (면적 / 번호 / 용도지역 / 범례) — 토지 선택 모드에서만 노출.
	관련지번 팝업의 .hide_btn 과 같이 지도 하단 가운데에 둔다 (좌측 하단은 카카오 로고 자리).
*/
.landHideBtn { display: none; position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 2; gap: 6px; }
.landHideBtn.on { display: flex; }
.landHideBtn .lhBtn {
	height: 30px; padding: 0 12px;
	background: #fff; border: 1px solid #919191; border-radius: 5px;
	font-size: 12px; color: #333; cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.landHideBtn .lhBtn:hover { background: #f5f5f5; }
.landHideBtn .lhBtn.off { background: #425470; border-color: #425470; color: #fff; }	/* 숨김 적용 중 */
/* 지금 지도타입에서 쓸 수 없어 감춘 버튼 (noZone: 색면 없음 · noUse: 지도타입이 대신함) */
.landHideBtn .lhBtn.noZone,
.landHideBtn .lhBtn.noUse { display: none; }

/*
	지도타입 (지도 / 스카이뷰 / 지적편집도) — 토지 선택 모드에서만 노출.
	카카오 지도의 지도타입 컨트롤이 있던 자리대로 좌측 상단에 두되,
	최대화 토글(.custom_maxcontrol, 36px + 여백)을 피해 그 오른쪽에서 시작한다.
	모양·크기는 위 .lhBtn 을 그대로 따르고 고른 버튼만 색을 뒤집는다.
*/
.landMapTypeBtn { display: none; position: absolute; left: 56px; top: 10px; z-index: 2; gap: 4px; }
.landMapTypeBtn.on { display: flex; }
.landMapTypeBtn.noOl { display: none; }	/* 배경 전환은 OpenLayers 지도에만 있다 (카카오 폴백이면 감춘다) */
.landMapTypeBtn .lmtBtn {
	height: 30px; padding: 0 12px;
	background: #fff; border: 1px solid #919191; border-radius: 5px;
	font-size: 12px; color: #333; cursor: pointer; white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.landMapTypeBtn .lmtBtn:hover { background: #f5f5f5; }
.landMapTypeBtn .lmtBtn.on { background: #425470; border-color: #425470; color: #fff; }	/* 켜진 버튼 */

/*
	용도지역 범례. 버튼 줄(.landHideBtn) 바로 위, 지도 오른쪽에 띄운다.
	범례가 세로로 길어(도시지역만 700px) 지도 안에 들어오는 만큼만 쓰고 그 안에서 스크롤한다.
	높이를 지도(.kakao_map_wrap) 기준으로 잡는 이유: vh 로 잡으면 지도가 짧을 때(최소 400px)
	위로 삐져나와 확대/축소 컨트롤(top 50~120px)을 덮는다. 190px = 아래 여백 60 + 컨트롤 자리 130.
*/
.landLegendPop {
	display: none; position: absolute; right: 12px; bottom: 60px; z-index: 3;
	width: 190px; max-height: calc(100% - 190px);
	background: #fff; border: 1px solid #919191; border-radius: 5px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	flex-direction: column; overflow: hidden;
}
.landLegendPop.on { display: flex; }
.landLegendPop .llHead {
	flex: none; position: relative; padding: 8px 30px 8px 12px;
	border-bottom: 1px solid #e0e0e0; background: #f7f7f7;
	font-size: 12px; font-weight: 600; color: #333;
}
.landLegendPop .llClose {
	position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	width: 22px; height: 22px; padding: 0;
	background: none; border: 0; font-size: 12px; color: #666; cursor: pointer;
}
.landLegendPop .llBody { flex: 1; overflow-y: auto; padding: 8px 10px 12px; }
.landLegendPop .llGroup + .llGroup { margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px; }
.landLegendPop .llName { margin-bottom: 4px; font-size: 12px; font-weight: 600; color: #425470; }
.landLegendPop .llBody img { display: block; max-width: 100%; }

/*
	[토지] 버튼은 매물목록의 "검색결과 총 N건" 행 오른쪽에 둔다 (지도 컨트롤 스택에서 옮겨 왔다).
	그 행은 검색할 때마다 새로 그려지므로 마크업은 index.html 의 resultTitHtml() 이 만든다.
*/
.serch_result .result_tit .resultTitLandBtn { float: right; margin: 10px 0 0; }

/*
	선택 토지 패널 — 매물목록(.serch_result) 자리에 대신 들어간다.
	좌측 플로트는 같고 폭만 좁으며(아래), 세로는 헤더+검색바(157px) 아래 영역을 채운다.
	(157px = .contents_wrap.type2 padding 65px + 검색바 높이 — .kakao_map_wrap 의 top 값과 같다)
*/
.landSelectSide {
	display: none;
	float: left;
	position: relative;	/* 오른쪽 경계선의 접기 손잡이(.lspFold) 기준 · z-index 도 이걸로 산다 */
	/* 매물목록(440px)보다 좁게 — 토지 목록은 읍·면·동 이하 주소만 보이면 되므로 지도를 더 넓게 쓴다 */
	width: 300px; height: calc(100vh - 157px);
	background: #fff;
	border-right: 1px solid #dcdcdc;
	box-sizing: border-box;
	z-index: 1;
	font-size: 12px;
	flex-direction: column;
	/*
		매물목록(.serch_result)과 같이 클릭으로 다루는 영역이라 글자 선택을 막는다.
		(머리행 · [매물목록] · 총 N필지 · [초기화] · 단위 토글 · 선택된 필지 목록)
	*/
	-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.landSelectSide.on { display: flex; }

.landSelectSide .lspHead {
	display: flex; align-items: center; justify-content: space-between;
	height: 40px; padding: 0 20px; box-sizing: border-box;
	background: #fff; color: #333;
	border-bottom: 1px solid #ededed;
}
.landSelectSide .lspTitle { font-size: 14px; }
.landSelectSide .lspSheet { display: none; }	/* 모바일 하단 시트 손잡이 */

/*
	PC 접기 손잡이 — 모바일 하단 시트 손잡이의 좌·우 버전.
	패널 오른쪽 경계선에 반쯤 걸친 탭 모양으로 붙어(지도 위로 넘어온다) 목록을 접었다 펼친다.
	모바일에는 하단 시트 손잡이가 따로 있으므로 데스크탑에서만 보인다(아래 미디어쿼리).
*/
.landSelectSide .lspFold {
	display: none;
	position: absolute; right: -20px; top: 50%; transform: translateY(-50%);
	width: 20px; padding: 12px 0;
	flex-direction: column; align-items: center; gap: 3px;
	background: #fff;
	border: 1px solid #dcdcdc; border-left: 0; border-radius: 0 6px 6px 0;
	box-shadow: 2px 0 4px rgba(0, 0, 0, .08);
	color: #555; cursor: pointer; z-index: 3;
	-webkit-user-select: none; -moz-user-select: none; user-select: none;	/* 연타해도 글자가 선택되지 않게 */
}
.landSelectSide .lspFold:hover { background: #f5f5f5; color: #222; }
.landSelectSide .lspFoldIcon { font-size: 16px; line-height: 1; }
.landSelectSide .lspFoldTxt { writing-mode: vertical-rl; font-size: 11px; letter-spacing: 1px; }
.landSelectSide .lspHeadBtn { display: flex; gap: 4px; align-items: center; }
.landSelectSide .lspHeadBtn .btn { margin: 0; }

/*
	지역 검색 팝업 (지도 오른쪽 위 [지역] 버튼으로 연다).
	셀렉트는 검색바의 드롭다운(.search_bar .select_box > span, main.css)과 같은 모양으로 —
	흰 알약에 오른쪽 화살표. 네이티브 화살표는 지우고 같은 아이콘을 깐다.
*/
#landAreaPop .layerPopup { width: 360px; max-width: 92vw; padding-bottom: 20px; }
#landAreaPop .layerPopup_c { padding: 0 20px; }
#landAreaPop .landAreaRow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#landAreaPop .landAreaRow label { flex: 0 0 62px; font-size: 14px; color: #333; }
#landAreaPop .landAreaRow select {
	flex: 1 1 auto; min-width: 0;
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	/*
		reset.css 가 select 에 height:28px 를 걸어 둔다.
		여기에 위아래 padding 을 더하면 글자가 상자 밖으로 밀려 아예 보이지 않는다.
		높이는 명시하고 세로 padding 은 0 으로 둔다 (프로젝트의 다른 팝업 select 와 같은 40px).
	*/
	box-sizing: border-box;
	height: 40px; line-height: 38px;
	padding: 0 28px 0 10px;
	background: #fff url(../images/icon_btnoff.png) no-repeat right 10px center;
	background-size: 10px;
	border: 1px solid #dcdcdc; border-radius: 4px;
	font-size: 14px; color: #333; cursor: pointer;
}
/*
	선택됨 표시는 테두리·굵기로만 준다.
	배경을 어둡게 하면 글자가 보이지 않는다 — 닫힌 select 의 글자색은 select 가 아니라
	선택된 option 의 색을 따르는 브라우저가 있어(크롬), select 에 color:#fff 를 줘도 먹지 않는다.
*/
#landAreaPop .landAreaRow select.on { border-color: #313942; color: #111; font-weight: 600; }
/* 상세주소 입력 — 같은 줄의 셀렉트와 높이·테두리를 맞춘다 (화살표 자리가 없어 오른쪽 padding 만 다르다) */
#landAreaPop .landAreaRow input.landDetailInput {
	flex: 1 1 auto; min-width: 0;
	box-sizing: border-box;
	height: 40px; line-height: 38px;
	padding: 0 10px;
	background: #fff;
	border: 1px solid #dcdcdc; border-radius: 4px;
	font-size: 14px; color: #333;
}
#landAreaPop .landAreaRow input.landDetailInput:focus { border-color: #313942; color: #111; }
#landAreaPop .landAreaGuide { margin: 14px 0 0; font-size: 12px; color: #777; }

/*
	토지 모드 상단 버튼 줄 — 지도 오른쪽 위, 확대/축소 컨트롤 바로 위.
	그 자리의 [지도/위성] 은 토지 모드에서 숨겨지므로 겹치지 않는다.
	[지역 검색] [영역 선택] 순서로 놓는다 (영역 선택이 오른쪽 끝).
	두 버튼 다 아이콘 + 글자라 폭이 내용에 따라 달라지므로, 좌표를 각각 주지 않고
	이 줄을 오른쪽에 붙인 뒤 안에서 흘려 놓는다.
*/
.land_topcontrol {
	display: none;
	position: absolute; top: 10px; right: 10px; z-index: 1;
	gap: 6px;
}
body.landSelectMode .land_topcontrol { display: flex; }

.custom_areasearchcontrol,
.custom_drawcontrol {
	font-weight: bold;
	height: 30px;
	overflow: hidden;
	background-color: #fafafa;
	font-size: 12px;
	font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
}
/* OpenLayers 를 못 써 카카오 지적편집도로 폴백한 경우 (그리기 기능 없음) */
.custom_drawcontrol.noDraw { display: none; }

.custom_areasearchcontrol .kakao_span,
.custom_drawcontrol .kakao_span {
	display: flex; align-items: center; gap: 3px;
	height: 30px; padding: 0 9px;
	cursor: pointer; white-space: nowrap;
}
.custom_areasearchcontrol .lasIcon,
.custom_drawcontrol .lasIcon { font-size: 16px; line-height: 1; }
.custom_areasearchcontrol .kakao_btn:hover,
.custom_drawcontrol .kakao_btn:hover { background: #f5f5f5; background: linear-gradient(#f5f5f5, #e3e3e3); }
.custom_areasearchcontrol .kakao_btn:active,
.custom_drawcontrol .kakao_btn:active { background: #e6e6e6; background: linear-gradient(#e6e6e6, #fff); }

/*
	토지 모드 닫기(X) — 상단 줄 오른쪽 끝. 아이콘만 있는 정사각 버튼이라 폭을 고정한다
	(옆 두 버튼은 글자 폭에 따라 넓이가 달라지므로 높이만 맞춰 준다).
*/
.custom_landclosecontrol {
	height: 30px;
	overflow: hidden;
	background-color: #fafafa;
	font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
}
.custom_landclosecontrol .kakao_span {
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px;
	font-size: 13px; color: #333; cursor: pointer;
}
.custom_landclosecontrol .kakao_btn:hover { background: #f5f5f5; background: linear-gradient(#f5f5f5, #e3e3e3); }
.custom_landclosecontrol .kakao_btn:active { background: #e6e6e6; background: linear-gradient(#e6e6e6, #fff); }

/* 그리는 중에는 진하게 — 지금 지도 클릭이 꼭짓점 찍기라는 표시 */
.custom_drawcontrol.on { background-color: #425470; color: #fff; }
.custom_drawcontrol.on .kakao_btn:hover { background: #4d5f7d; }

/* 그리는 중 안내 — 표시 옵션 버튼 줄(.landHideBtn) 바로 위, 같은 가운데 정렬 */
.landDrawGuide {
	display: none; position: absolute; left: 50%; transform: translateX(-50%); bottom: 58px; z-index: 2;
	padding: 6px 12px;
	background: rgba(66, 84, 112, .92); border-radius: 5px;
	font-size: 12px; color: #fff; white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.landDrawGuide.on { display: block; }

.landSelectSide .lspGuide { padding: 8px 20px; color: #666; background: #f7f9fc; border-bottom: 1px solid #eee; line-height: 1.4; }

/*
	필지 수 · 합계 · 목록은 매물 상세의 [관련지번 지도보기] 팝업 스타일(style.css)을 그대로 쓴다.
	여기서는 이 패널(세로 flex, 높이 고정)에 맞추는 것만 덧붙인다.
*/
.landSelectSide .jibunIn_list_hd { flex: 0 0 auto; text-align: center; }	/* 팝업에서는 .jibunIn_list 가 가운데 정렬을 준다 */
.landSelectSide .jibunIn_list_tit { margin-bottom: 5px; }
/*
	양옆(필지수 · 내보내기/단위전환)을 같은 너비로 잡아 가운데 [초기화] 가 정확히 중앙에 오게 한다.
	모바일은 중앙이 시트 손잡이 자리와 겹쳐 오탭을 부르므로 아래 미디어쿼리에서 왼쪽으로 옮긴다.
*/
.landSelectSide .jibunIn_list_tit > span:first-child { flex: 1 1 0; text-align: left; }
.landSelectSide .jibunIn_list_tit > .jbilti_btn { flex: 1 1 0; display: flex; justify-content: flex-end; gap: 2px; }

/* 내보내기(주소 복사 / CSV) — 아이콘만 있는 정사각 버튼이라 단위전환 버튼보다 좁게 둔다 */
.landSelectSide .lspExport { min-width: 0; padding: 0 6px; }
.landSelectSide .lspExport .material-symbols-outlined { font-size: 16px; line-height: 1; vertical-align: middle; }
.landSelectSide .lspExport:disabled { opacity: .4; cursor: default; }
.landSelectSide .jibunIn_list_hdIn { margin: 0 3px; }
.landSelectSide .jbilhi_div { padding: 5px 4px; }	/* 패널이 팝업보다 좁아 합계 두 칸이 붙는다 */
/*
	둘째 줄 [지목 해제] [복사] [다운로드] — 어떻게 고른 목록이든 늘 보인다.
	내보내기는 한 건씩 클릭해 담은 목록에서도 쓸 일이 있어서다
	(담을 것이 없으면 두 버튼은 disabled 로 흐려진다 — index.html onChange).
	[지목 해제] 는 해당 지목이 섞였을 때만 나오므로 오른쪽 정렬을 기본으로 두고,
	그 버튼이 나올 때는 남는 폭을 그쪽이 가져가며 자연히 양끝으로 갈린다.
*/
.landSelectSide .lspAreaRow {
	display: flex; align-items: center; justify-content: flex-end; gap: 3px;
	margin: 0 3px 5px;
}
.landSelectSide .lspAreaRow .lspExport {
	flex: 0 0 auto; margin: 0;
	display: inline-flex; align-items: center; gap: 2px;
}
.landSelectSide .lspAreaRow .lspExport .material-symbols-outlined { font-size: 15px; line-height: 1; }

/*
	해제할 지목(도로·구거·하천·제방)이 섞여 있을 때만 (index.html onChange 가 .on 을 붙인다).
	영역 선택이든 한 건씩 클릭한 목록이든 똑같이 쓴다. 남는 폭은 이 버튼이 갖는다.
*/
.landSelectSide .lspExcludeBtn { display: none; }
.landSelectSide .lspExcludeBtn.on {
	display: block; flex: 1 1 auto; min-width: 0;
	height: 26px; padding: 0 6px;
	background: #fff; border: 1px solid #c0392b; border-radius: 4px;
	font-size: 11px; color: #c0392b; cursor: pointer;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.landSelectSide .lspExcludeBtn.on:hover { background: #fdf2f0; }

/* 면적이 없는 목록(주소만)에서는 합계와 면적 단위 전환을 감춘다 */
.landSelectSide .jibunIn_list_hdIn.noShow,
.landSelectSide .unitChange.noShow { display: none; }

/* 주소만 받은 필지가 합계에서 빠졌다는 안내 (해당될 때만 .on) */
.landSelectSide .lspNote { display: none; padding: 4px 3px 0; font-size: 11px; color: #c0392b; line-height: 1.3; }
.landSelectSide .lspNote.on { display: block; }

.landSelectSide .jibun_list_box { flex: 1 1 auto; height: auto; min-height: 0; }	/* 팝업의 height:500px 를 패널 높이에 맡긴다 */
.landSelectSide .landSelectEmpty { padding: 30px 20px; color: #999; text-align: center; line-height: 1.5; }

/*
	주소만 받은 필지 — 순번 + 주소 한 줄. 수백~수천 건이 쌓이므로 최대한 가볍게 둔다.
	(상세 행 .jblb_div 의 테두리·여백은 그대로 물려받고 안쪽 구성만 다르다)
*/
.landSelectSide .jblbAddrOnly { display: flex; align-items: baseline; gap: 6px; padding-right: 22px; }
.landSelectSide .jblbAddrOnly .divIn1_num { flex: 0 0 auto; }
.landSelectSide .jblbAddrTxt { flex: 1 1 auto; text-align: left; word-break: keep-all; line-height: 1.4; }

/* 해제 버튼(.jblb_div a)이 우측 상단에 겹쳐 놓이므로, 첫 줄(면적)이 그 자리까지 오지 않게 비워 둔다 */
.landSelectSide .jblb_divIn1 { padding-right: 22px; }
.landSelectSide .jblb_divIn2 { padding-right: 22px; word-break: keep-all; }

/* 지도 위 필지 오버레이 (순번 + 면적) */
.landSelectOverlay {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 2px 6px;
	background: rgba(255, 255, 255, .9);
	border: 1px solid #070EBB; border-radius: 10px;
	font-size: 11px; color: #222; white-space: nowrap;
	transform: translate(-50%, -50%);
}
.landSelectOverlay .lsoNum {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 15px; height: 15px; padding: 0 3px;
	background: #070EBB; color: #fff; border-radius: 8px; font-size: 10px;
}

/* 모바일 : 하단 시트 (main_responsive.css 와 동일한 1000px 기준) */
@media all and (max-width: 1000px) {
	/* 모바일은 지도 높이를 flex 가 잡으므로 최대화 토글을 노출하지 않는다 */
	.custom_maxcontrol { display: none; }
	.land_topcontrol { top: 7px; }	/* 모바일 컨트롤 스택에 맞춘다 */
	.landHideBtn { bottom: 14px; }
	.landHideBtn .lhBtn { height: 28px; padding: 0 6px; font-size: 11px; }
	/* 버튼 4개가 한 줄에 안 들어가므로 접히게 두고, 범례는 좁은 화면에 맞춰 줄인다 */
	.landHideBtn { flex-wrap: wrap; justify-content: center; max-width: 94%; }
	/* 최대화 토글을 감추는 화면이라 왼쪽 끝에서 시작한다 */
	.landMapTypeBtn { left: 10px; top: 7px; }
	.landMapTypeBtn .lmtBtn { height: 28px; padding: 0 6px; font-size: 11px; }
	.landLegendPop { right: 8px; bottom: 52px; width: 170px; max-height: calc(100% - 175px); }
	.landDrawGuide { bottom: 50px; font-size: 11px; padding: 5px 10px; white-space: normal; max-width: 90%; text-align: center; }
	.landSelectSide .lspExport { padding: 0 4px; }

	/*
		모바일은 매물목록과 마찬가지로 하단 시트(.mainContent) 안을 채운다.
		높이를 auto 로 두면 내용만큼만 차지해 시트 아래쪽에 빈 띠가 남으므로 시트 높이를 그대로 받는다
		(시트가 접히면 50px, 펼치면 화면 높이 — .mainContent 는 main_responsive.css 가 잡는다).
		목록(.jibun_list_box)은 세로 flex 에서 남는 높이를 모두 먹고 그 안에서만 스크롤한다.
	*/
	.landSelectSide {
		float: none;
		width: 100%; height: 100%;
		border-right: 0;
	}
	.landSelectSide .lspHead,
	.landSelectSide .lspGuide { padding-left: 10px; padding-right: 10px; }

	/*
		하단 시트 손잡이 — 매물목록의 .result_tit(높이 50px, 위쪽 드래그바, 가운데 안내문구)과 같게 맞춘다.
		시트가 접히면 .mainContent 가 50px 로 줄어 이 줄만 보이고, 눌러서 펼친다.
	*/
	.landSelectSide .lspHead {
		height: 50px; align-items: flex-start;
		padding-top: 12px; padding-bottom: 0;
		position: relative; cursor: pointer;
	}
	.landSelectSide .lspHead:after {
		content: ''; position: absolute; top: 10px; left: 50%; transform: translate(-50%, -50%);
		width: 35px; height: 3px; border-radius: 3px; background-color: #bbb;
	}
	.landSelectSide .lspTitle { font-size: 13px; line-height: 20px; }
	.landSelectSide .lspSheet {
		display: block; position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%);
		font-size: 13px; font-weight: 600; white-space: nowrap; line-height: 16px;
	}
	.landSelectSide .lspSheetIcon { font-size: 20px; color: #e72727; font-weight: 900; vertical-align: middle; }
	/* 45vh 로 묶어 두면 시트 아래쪽이 잘려 보인다 — 남는 높이를 다 쓰게 두고 목록 안에서만 스크롤 */
	.landSelectSide .jibun_list_box { max-height: none; }

	/*
		[초기화] 를 가운데에서 왼쪽(필지 수 옆)으로 옮긴다 (2026-08).
		가운데 바로 위가 시트 손잡이 문구([토지목록 보기] / [지적편집도 보기]) 자리이고
		그 문구와 [초기화] 사이가 4px 밖에 안 되어, 손잡이를 누르려다 목록을 지우는 일이 있었다.
		손잡이는 머리행 전체가 눌리는 넓은 과녁이므로, 위험한 쪽을 중앙에서 비켜 주는 것이 맞다.
		위쪽 여백도 함께 벌려 머리행과 붙지 않게 한다.
	*/
	.landSelectSide .jibunIn_list_hd { padding-top: 8px; }
	.landSelectSide .jibunIn_list_tit { justify-content: flex-start; gap: 6px; }
	.landSelectSide .jibunIn_list_tit > span:first-child { flex: 0 0 auto; }
	.landSelectSide .jibunIn_list_tit > .jbilti_btn { flex: 1 1 auto; }
}