@charset "utf-8";
/*
	매물검색 (신규) — 지역 드릴다운 / 필터바 / 결과영역
	색은 사이트 기존 팔레트를 따른다 (진한 남색 #313942, 초록 #119b35, 테두리 #dcdcdc).
	클래스는 모두 ts- 접두어를 써서 기존 화면(main.css / style.css)과 섞이지 않게 한다.
*/

/* ── 검색 한 줄 (지역 · 필터 · 검색어 · 전환버튼) ─────── */
/*
	가운데(tsBarScroll)만 가로로 흐르고 전환 버튼은 밖에 남는다.
	그래서 화면이 좁아도 [지도]/[목록] 은 늘 오른쪽 끝 제자리에 있다.
*//*
	제목 줄 - 왼쪽에 '매물검색', 오른쪽에 [지도] 전환 단추 (2026-09-09 요청).
	목록 모드에서만 단추가 여기 있고, 지도 모드에서는 검색줄로 돌아간다(trading-search-map.js).
*/
.tsTitleRow{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.tsTitleRow .subTitle{margin-bottom:0;}
.tsTitleTools{display:flex; align-items:center; gap:6px;}


.tsBar{display:flex; align-items:center; gap:6px; margin-bottom:12px;}
.tsBarScroll{flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden;
	scrollbar-width:none; -ms-overflow-style:none;}
.tsBarScroll::-webkit-scrollbar{display:none;}
.tsBarInner{display:flex; align-items:center; gap:6px; width:max-content; padding:1px 0;}

/* 넘칠 때만 나타나는 이동 버튼 (요구사항 4) */
.tsBarNav{flex:none; display:flex; align-items:center; justify-content:center;
	width:28px; height:34px; padding:0; background:#fff; border:1px solid #c5c8cf;
	border-radius:14px; color:#555; cursor:pointer;}
.tsBarNav:hover{border-color:#313942; color:#222;}
/* display:flex 가 브라우저 기본값(display:none)을 이겨 hidden 이 안 먹는다 - 다시 눌러 준다 */
.tsBarNav[hidden]{display:none;}
.tsBarNav .material-symbols-outlined{font-size:20px;}

/* 한 줄에 서는 것들은 테두리를 포함해 같은 높이여야 줄이 맞는다 */
.tsBar .tsRegionChip, .tsBar .tsPillBtn, .tsBar .tsSearchBox, .tsBar .tsViewToggle, .tsBar .tsBarNav{
	box-sizing:border-box; height:36px;}

/* ── 지역 칩 ─────────────────────────────────────────── */

.tsRegionChip{flex:none; display:inline-flex; align-items:center; gap:4px; height:34px; padding:0 12px;
	background:#fff; border:1px solid #c5c8cf; border-radius:17px; font-size:14px; color:#333; cursor:pointer;}
.tsRegionChip:hover{border-color:#313942;}
.tsRegionChip[aria-expanded="true"]{background:#313942; border-color:#313942; color:#fff;}
.tsRegionChip[aria-expanded="true"] .tsChipCaret{transform:rotate(180deg);}

.tsChipText{font-weight:500;}
.tsChipCaret{font-size:18px; transition:transform .15s;}

/* ── 드릴다운 패널 ───────────────────────────────────── */
/*
	패널은 position:fixed 다. 버튼들이 가로 스크롤 상자 안에 있어 상자 안에 두면 잘리고,
	지도 모드에서는 지도 위로도 떠야 한다. 좌표는 trading-search-bar.js 가 넣는다.
*/
.tsRegionPanel{position:fixed; top:0; left:0; z-index:900; width:430px; padding:18px;
	background:#fff; border:1px solid #dcdcdc; border-radius:10px; box-sizing:border-box;
	box-shadow:0 4px 16px rgba(0,0,0,.12);}

/* 머리줄 - 왼쪽에 지금까지 고른 경로. 즐겨찾기 별은 뺐다 (2026-09-09 요청) */
.tsPanelHd{display:flex; align-items:flex-start; gap:8px;}
.tsPanelHd .tsBreadcrumb{flex:1 1 auto; min-width:0;}
.tsBreadcrumb{display:flex; align-items:center; flex-wrap:wrap; gap:2px; margin-bottom:14px; font-size:16px;}
.tsCrumb{background:none; border:0; padding:0 2px; font-size:16px; font-weight:700; color:#333; cursor:pointer;}
.tsCrumb:hover{text-decoration:underline;}
.tsCrumb.cur{color:#999; font-weight:500; cursor:default;}
.tsCrumb.cur:hover{text-decoration:none;}
.tsCrumbSep{color:#c5c8cf; font-size:14px; margin:0 2px;}

.tsRegionGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
	max-height:340px; overflow-y:auto;}
.tsRegionGrid button{height:38px; padding:0 6px; background:#f4f5f7; border:1px solid transparent;
	border-radius:6px; font-size:14px; color:#333; cursor:pointer; white-space:nowrap;
	overflow:hidden; text-overflow:ellipsis;}
.tsRegionGrid button:hover{background:#f3f4f9;}
.tsRegionGrid button.on{background:#fff; border-color:#2b77f8; color:#2b77f8; font-weight:700;}

/*
	여러 지역 고르기 (2026-09-09 요청).
	시·군·구·읍·면·동 단계는 고른 부모마다 묶음 하나로 낸다. 묶음의 머리 '○○ 전체' 도
	고를 수 있는 단추다 - 누르면 그 밑에 고른 것을 지워 '전체' 로 되돌린다.
	묶음이 세로로 이어지므로 묶음 자체는 한 줄을 다 쓰고(1/-1), 자식들만 세 칸 격자로 앉힌다.
*/
.tsRegionGrid .tsRegGrp{grid-column:1/-1;}
.tsRegionGrid .tsRegGrp + .tsRegGrp{margin-top:4px; padding-top:12px; border-top:1px solid #e3e4e9;}
/* 묶음이 길다(서울 25곳·경기 55곳). 머리를 붙여 두어야 지금 어느 시·도를 보고 있는지 안 놓친다 */
.tsRegionGrid .tsRegAll{position:sticky; top:0; z-index:1;
	width:100%; height:34px; margin-bottom:8px; padding:0 10px;
	background:#f4f5f7; border:1px solid transparent; border-radius:6px;
	text-align:left; font-size:13px; color:#555; cursor:pointer;
	box-shadow:0 6px 6px -6px rgba(0,0,0,.12);}
.tsRegionGrid .tsRegAll:hover{background:#f3f4f9;}
.tsRegionGrid .tsRegAll.on{background:#fff; border-color:#2b77f8; color:#2b77f8; font-weight:700;}
.tsRegionGrid .tsRegItems{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}

/* 폐지코드를 함께 조회하는 버튼 표시 (예: 강원도 ← 구 강원도 42) */
.tsRegionGrid button.tsAlias::after{content:'*'; margin-left:2px; color:#119b35; font-weight:700;}

.tsRegionLoading, .tsRegionError{grid-column:1/-1; padding:24px 0; text-align:center;
	font-size:14px; color:#999;}
.tsRegionError{color:#c12323;}

/*
	[○○ 지도로 보기] - 고른 지역이 있을 때만, 그리고 지도 모드일 때만 나온다.
	display:flex 가 [hidden] 을 이겨 늘 보이고 있었다(2026-09-09 발견) -
	시·도를 고르기도 전에 '지도로 보기' 가 떠 있었다. 이 파일에서 세 번째로 밟은 함정이다.
*/
/*
	패널 아래 단추 자리 (2026-09-09 요청 - 두 단추를 위아래로 둔다).
	위가 [하위 …], 아래가 [지역해제] 다 - 나아가는 일이 위, 되돌리는 일이 아래.
	[지역해제] 는 제 글자 폭만 차지해 왼쪽에 선다. 큰 초록 단추와 나란히 같은 폭이면
	되돌리는 일이 나아가는 일만큼 무거워 보인다.
	둘 다 없으면 자리 자체가 사라져야 한다 - 빈 칸이 남으면 패널 아래가 허전하게 벌어진다.
*/
.tsRegionActs{display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.tsRegionActs:not(:has(button:not([hidden]))){display:none;}
.tsRegionClearBtn{display:flex; align-items:center; justify-content:center; gap:4px;
	flex:0 0 auto; height:38px; padding:0 14px; background:#fff; border:1px solid #dcdcdc;
	border-radius:8px; font-size:13px; color:#555; cursor:pointer;}
.tsRegionClearBtn:hover{background:#faefef; border-color:#c12323; color:#c12323;}
.tsRegionClearBtn .material-symbols-outlined{font-size:18px;}
.tsRegionClearBtn[hidden]{display:none;}
.tsRegionDrillBtn{align-self:stretch;}
.tsRegionDrillBtn[hidden]{display:none;}
.tsRegionDrillBtn{display:flex; align-items:center; justify-content:center; gap:4px; width:100%; height:44px;
	margin-top:14px; background:#2b77f8; border:0; border-radius:6px; color:#fff; font-size:15px;
	font-weight:700; cursor:pointer;}
.tsRegionDrillBtn:hover{background:#0c4fa2;}
.tsRegionDrillBtn .material-symbols-outlined{font-size:19px;}

/* ── 결과 영역 (P2~ 에서 채운다) ─────────────────────── */
.tsResult{min-height:220px; border:1px solid #ededed; border-radius:8px; background:#fff;}
.tsEmpty{padding:80px 0; text-align:center; font-size:14px; color:#999;}

@media screen and (max-width:768px){
	.tsRegionPanel{width:min(94vw,430px);}
	.tsRegionGrid{max-height:50vh;}
}

/* ── 단지(건물) 목록 ─────────────────────────────────── */
.tsComplexHead{display:flex; align-items:center; justify-content:space-between;
	padding:14px 18px; border-bottom:1px solid #ededed;}
.tsComplexTitle{font-size:15px; color:#333;}
.tsComplexTitle b{color:#333; font-weight:700;}
/*
	정렬 선택상자의 화살표 (2026-09-18 요청).
	reset.css 가 select 에 appearance:none 을 걸고 화살표를 **배경 이미지**로 깔아 둔다.
	여기서 background 를 흰색 한 가지로 다시 쓰면 그 이미지까지 함께 지워져
	'영업일 최신순' 같은 글자만 남고 누를 수 있다는 표시가 사라진다 -
	그래서 같은 아이콘을 다시 깔고, 오른쪽에 그만큼 자리를 준다.
*/
.tsComplexSort{height:30px; padding:0 22px 0 8px; border:1px solid #dcdcdc; border-radius:4px;
	font-size:13px; color:#333; cursor:pointer;
	background:#fff url("../images/icon_selectArrow.png") no-repeat right 7px center;}

.tsComplexList{list-style:none; margin:0; padding:0;}
.tsComplexItem{padding:14px 18px; border-bottom:1px solid #f0f0f0; cursor:pointer;}
.tsComplexItem:hover{background:#fbfbfd;}
.tsComplexItem:last-child{border-bottom:0;}

.tsciTop{display:flex; align-items:center; gap:6px; margin-bottom:5px;}
.tsciBadge{flex:none; padding:2px 7px; background:#f3f4f9; border:1px solid #c5c8cf;
	border-radius:4px; font-size:11px; color:#119b35; font-weight:700;}
.tsciName{font-size:16px; font-weight:700; color:#222;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.tsciMeta{margin:0 0 3px; font-size:13px; color:#787878;}
.tsciAddr{margin:0 0 6px; font-size:12px; color:#999;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.tsciCounts{display:flex; flex-wrap:wrap; gap:4px 12px; margin:0; font-size:13px; color:#555;}
.tsciCounts b{color:#333; font-weight:700;}
/* 금액정보가 하나도 없는 단지 (2026-09-23) - 셀 것이 없다는 말이라 숫자칸보다 흐리게 둔다 */
.tsciNoAmt{color:#999;}

/* 팝업(시트) 머리 - 좁은 화면에서만 보인다. 넓은 화면에서는 버튼 바로 아래 붙으므로 필요 없다 */
.tsSheetHd{display:none;}
.tsSheetX{display:none;}

/* 쪽넘김 - 뼈대·클래스는 전체물건 검색과 같고(style.css .paging_wrap), 자리만 잡아 준다 */
.tsPaging{padding:14px 18px 18px;}
.tsPaging a{cursor:pointer;}

.tsEmpty.tsError{color:#c12323;}

/* 영역 조건을 풀고 찾았다는 안내 - 결과가 갑자기 늘어난 이유를 목록 머리 아래에 적는다 */
.tsWideNote{margin:0 0 10px; padding:8px 12px; border-radius:6px;
	background:#edf0f9; border:1px solid #c5c8cf; font-size:13px; color:#0c4fa2;}

/* ── 필터 바 (pill) ──────────────────────────────────── */
/* 지역 칩과 같은 줄에 이어 붙는다 - 줄바꿈하지 않고 넘치면 가로로 흐른다 (요구사항 2) */
.tsFilterBar{display:flex; align-items:center; flex-wrap:nowrap; gap:6px; margin:0;}
/*
	[상세검색] 이 여닫는 칸 (2026-09-11). 넓은 화면에서는 `display:contents` 로 없는 셈이 되어
	지역칩과 조건칩이 예전처럼 검색줄에 한 줄로 흐른다. 좁은 화면에서만 진짜 칸이 된다(아래).
*/
.tsAdvBox{display:contents;}

/*
	넓은 화면에서는 [초기화] 가 조건들 **뒤**에 선다 (2026-09-11).
	접히는 칸이 생기면서 DOM 차례가 `검색칸 → 초기화 → (지역선택·조건칩)` 이 되었는데,
	display:contents 로 한 줄이 되는 이 폭에서는 그대로 두면 초기화가 대열 한가운데에 낀다.
	되돌리는 단추는 되돌릴 것들 뒤에 서야 한다 - 자리만 order 로 옮긴다.
*/
@media screen and (min-width:1001px){
	.tsBarReset{order:1;}
}
.tsPill, .tsSearchBox{flex:none;}

.tsPill{position:relative;}
.tsPillBtn{display:inline-flex; align-items:center; gap:2px; height:34px; padding:0 10px 0 12px;
	background:#fff; border:1px solid #c5c8cf; border-radius:17px; font-size:14px; color:#333; cursor:pointer;}
.tsPillBtn:hover{border-color:#313942;}
.tsPill.on > .tsPillBtn{background:#2b77f8; border-color:#2b77f8; color:#fff;}
.tsPill.open > .tsPillBtn .tsPillCaret{transform:rotate(180deg);}
.tsPillCaret{font-size:18px; transition:transform .15s;}
.tsPillLabel{max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/*
	검색줄 [초기화] (2026-09-09 요청).
	조건칸이 아니라 '되돌리는 단추' 이므로 알약 대열에서 살짝 떨어뜨리고 색도 다르게 둔다 -
	같은 모양으로 두면 여덟 번째 조건칸으로 읽힌다.
*/
.tsBarReset{display:inline-flex; align-items:center; gap:3px; flex:none;
	height:34px; padding:0 12px; margin-left:4px;
	background:#fff; border:1px solid #dcdcdc; border-radius:17px;
	font-size:13px; color:#787878; cursor:pointer;}
.tsBarReset[hidden]{display:none;}
.tsBarReset:hover{background:#faefef; border-color:#c12323; color:#c12323;}
/*
	이제 늘 보이므로(2026-09-10) 지울 것이 있을 때만 진하게 둔다 -
	색까지 늘 같으면 '지금 조건이 걸려 있다' 는 신호가 사라진다.
*/
.tsBarReset.on{border-color:#c12323; color:#c12323;}

/*
	목록 머리줄의 '지금 보고 있는 동네' (2026-09-10).
	'총 N건' 과 같은 줄에 앞서 서되, 제목이 아니라 곁말이라 한 톤 흐리게 둔다.
	#666 은 흰 바탕 대비 5.74:1 - 작은 글자 AA 기준을 넉넉히 넘긴다.
	긴 이름이 '총 N건' 을 밀어내지 않도록 폭을 제한하고 넘치면 … 로 자른다.
*/
.tsAreaHint{display:flex; align-items:center; gap:4px; min-width:0;
	color:#666; font-size:14px; font-weight:400; cursor:help;}
.tsAreaHint[hidden]{display:none;}
/* 이름이 길면 여기서만 줄인다 - '총 N건' 은 언제나 온전히 보여야 한다 */
.tsAreaTxt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tsAreaHint .material-symbols-outlined{flex:none; font-size:17px; color:#999;}
.tsBarReset .material-symbols-outlined{font-size:16px;}

/*
	두 몫을 하는 조건칸 - [매매]·[임대] (2026-09-09 요청).
	글자 쪽과 화살표 쪽이 각각 다른 일을 하므로 단추가 둘인데, 보이기는 한 칸이어야 한다.
	가운데 테두리를 지우고 바깥 모서리만 둥글려 붙인다. 사이에 옅은 금을 그어
	'여기서 갈린다' 를 눈으로 알리되, 두 칸으로 보일 만큼 벌리지는 않는다.
*/
.tsPillSplit{display:inline-flex;}
.tsPillSplit .tsPillAll{border-radius:17px 0 0 17px; border-right:0; padding:0 8px 0 12px;}
.tsPillSplit .tsPillOpen{border-radius:0 17px 17px 0; padding:0 8px 0 4px;
	border-left:1px solid #e3e4e9;}
.tsPillSplit .tsPillAll:hover, .tsPillSplit .tsPillOpen:hover{border-color:#313942;}
.tsPillSplit .tsPillAll:hover{border-right:0;}
.tsPill.on.tsPillSplit > .tsPillBtn{background:#2b77f8; border-color:#2b77f8; color:#fff;}
.tsPill.on.tsPillSplit > .tsPillOpen{border-left-color:#444;}
/* 계열이 통째로 켜진 상태 - 글자 쪽을 한 번 더 누르면 다 꺼진다 */
.tsPillSplit.allOn > .tsPillAll{font-weight:700;}
.tsPill.open.tsPillSplit > .tsPillOpen .tsPillCaret{transform:rotate(180deg);}

.tsPillPanel{position:fixed; top:0; left:0; z-index:900; min-width:280px; padding:16px;
	background:#fff; border:1px solid #dcdcdc; border-radius:10px; box-sizing:border-box;
	box-shadow:0 4px 16px rgba(0,0,0,.12);}

.tsPanelTitle{margin:0 0 8px; font-size:13px; font-weight:700; color:#787878;}
/*
	묶음 제목 옆 [전체] - 그 묶음을 통째로 켜고 끈다.
	20px·11px 은 너무 작아 손가락으로 겨누기 어려웠다 (2026-09-14 요청).
	28px 로 키웠다 - 아래 조건칩(.tsOpt, 좁은 화면 38px)보다는 작게 두어
	'제목에 딸린 단추' 라는 위계는 그대로 남긴다.
*/
.tsAllBtn{margin-left:8px; height:28px; padding:0 14px; background:#f4f5f7; border:1px solid #dcdcdc;
	border-radius:14px; font-size:13px; font-weight:700; color:#787878; cursor:pointer; vertical-align:middle;}
.tsAllBtn:hover{border-color:#313942; color:#333;}
.tsAllBtn.on{background:#2b77f8; border-color:#2b77f8; color:#fff;}
.tsPanelTitle + .tsChipGrid{margin-bottom:14px;}
.tsPanelNote{margin:10px 0 0; font-size:12px; color:#999;}

.tsChipGrid{display:grid; grid-template-columns:repeat(2,1fr); gap:6px;}
.tsChipGrid.c3{grid-template-columns:repeat(3,1fr);}
.tsOpt{height:34px; padding:0 6px; background:#f4f5f7; border:1px solid transparent; border-radius:6px;
	font-size:13px; color:#555; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tsOpt:hover{background:#f3f4f9;}
.tsOpt.on{background:#fff; border-color:#2b77f8; color:#2b77f8; font-weight:700;}

/*
	면적 단위 스위치 (2026-09-09 요청).
	㎡ 와 평을 오가는 두 칸짜리 스위치다. 눌린 쪽이 지금 단위 -
	라디오처럼 보이게 두 칸을 한 테두리 안에 붙여 둔다.
	(면적 구간 자체는 가격과 같은 슬라이더를 쓴다 - .tsPrice 규칙을 그대로 물려받는다)
*/
.tsUnitRow{display:flex; align-items:center; gap:8px; margin:0 0 14px;}
.tsUnitLbl{font-size:13px; color:#787878;}
.tsUnitSw{display:inline-flex; margin-left:auto; border:1px solid #dcdcdc; border-radius:14px; overflow:hidden;}
.tsUnitBtn{min-width:44px; height:26px; padding:0 10px; background:#fff; border:0;
	font-size:12px; color:#787878; cursor:pointer;}
.tsUnitBtn + .tsUnitBtn{border-left:1px solid #dcdcdc;}
/* 켜짐이 #313942 인 단추라 마우스오름도 그 색으로 맞춘다 */
.tsUnitBtn:hover:not(.on){background:#f3f4f9; color:#2b77f8;}
.tsUnitBtn.on{background:#2b77f8; color:#fff; font-weight:700;}

.tsPanelFoot{display:flex; gap:6px; margin-top:14px; padding-top:12px; border-top:1px solid #f0f0f0;}
.tsPanelFoot button{flex:1; height:34px; border-radius:6px; font-size:13px; cursor:pointer;}
.tsReset{background:#fff; border:1px solid #dcdcdc; color:#787878;}
.tsApply{background:#313942; border:1px solid #313942; color:#fff; font-weight:700;}

/*
	상단 매물통합검색(.topInfo_wrap .topSch_wrap)과 같은 모양이다 (2026-09-09 요청) -
	180px 알약에 돋보기를 안쪽 오른끝에 두고, 손이 닿으면 300px 로 넓어지며 테두리가 붉어진다.
	그쪽 값(높이 36 · 반지름 18 · 회색 #c5c8cf · 강조 #e51414)을 그대로 따른다.
*/
.tsSearchBox{position:relative; width:180px; padding:0; background:#fff;
	border:1px solid #c5c8cf; border-radius:18px; transition:width .4s;}
.tsSearchBox.on{width:300px; border-color:#e51414;}
.tsSearchBox input{width:100%; height:100%; padding:0 44px 0 18px; border:0; outline:0;
	background:transparent; border-radius:18px; font-size:14px;}
.tsSearchBox button{position:absolute; right:10px; top:50%; transform:translateY(-50%);
	width:24px; height:24px; padding:0; border:0; background:transparent; color:#c5c8cf;
	font-size:20px; line-height:1; cursor:pointer;}
.tsSearchBox.on button{color:#e51414;}

/*
	조건 접기 단추 (2026-09-09 요청).
	좁은 화면의 지도 모드에서만 나온다 - 넓은 화면은 한 줄이라 접을 것이 없고,
	목록 모드는 지도를 덮지 않아 접을 까닭이 없다.
*/
.tsBarFold{display:none; flex:none; align-items:center; gap:3px; height:36px; padding:0 10px;
	box-sizing:border-box; background:#fff; border:1px solid #c5c8cf; border-radius:18px;
	font-size:13px; color:#333; cursor:pointer;}
.tsBarFold.on{background:#2b77f8; border-color:#2b77f8; color:#fff;}
.tsFoldCaret{font-size:18px;}
.tsFoldCnt{min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#e51414;
	color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center;}
.tsBarFold[hidden]{display:none;}

/*
	오른쪽 세로줄. 넓은 화면에서는 없는 셈 친다(display:contents) - 예전처럼 한 줄에 늘어선다.
	좁은 화면에서만 세로로 세워 [조건] 이 [지도]/[목록] 아래에 붙는다.
*/
.tsBarSide{display:contents;}

/* 스크롤 밖에 있으므로 늘 오른쪽 끝이다 (요구사항 3) */
.tsViewToggle{flex:none; display:inline-flex; align-items:center; justify-content:center; gap:4px;
	height:34px; padding:0 16px; background:#313942; border:0;
	border-radius:17px; color:#fff; font-size:14px; font-weight:700; cursor:pointer;}
.tsViewToggle .material-symbols-outlined{font-size:18px;}
.tsViewToggle:hover{background:#111;}

/* ── 결과 머리줄 ─────────────────────────────────────── */
.tsListHead{display:flex; align-items:center; justify-content:space-between; gap:10px;
	padding:14px 18px; border-bottom:1px solid #ededed;}
/*
	머리줄 왼쪽 (2026-09-10 정렬 손질).
	inline 으로 두었더니 조각마다 글자 크기가 달라(안내 14 · 건수 15 · [해제] 12)
	밑선이 제각각으로 앉고, 사이 간격도 '· ' 를 손으로 넣은 자리마다 들쭉날쭉했다.
	flex 로 세워 가운데 선에 맞추고 간격은 gap 하나로 준다.
*/
.tsListTitle{display:flex; align-items:center; gap:8px; min-width:0;
	font-size:15px; line-height:1.2; color:#333;}
.tsHeadCnt{flex:none;}
/*
	찾은 건수는 **검정**으로 적는다 (2026-09-15 요청).
	기존 목록 화면의 '총 N건'(style.css 의 .content_total - #333, strong 은 굵기만)과 같다.
	초록은 '지금 켜져 있다/고를 수 있다' 쪽 뜻인데, 건수는 그저 사실이라 색으로 말할 것이 없다.
*/
.tsListTitle b{color:#333; font-weight:700;}
/* 고른 지역 이름 - 건수보다 앞서지만 주인공은 아니다 */
.tsHeadWhere{flex:none; color:#333;}
.tsChkCount{flex:none; color:#1277e3; font-weight:700;}
.tsChkCount[hidden]{display:none;}
/* 선택 건수 옆 [해제] */
.tsChkClear{flex:none; height:22px; padding:0 8px; background:#fff; border:1px solid #c5c8cf;
	border-radius:11px; font-size:12px; color:#555; cursor:pointer; vertical-align:middle;}
.tsChkClear:hover{border-color:#313942; color:#222;}
.tsChkClear[hidden]{display:none;}
/*
	넘치면 줄을 바꾼다 (2026-09-21). 넉넉하면 예전처럼 한 줄 그대로다 -
	줄바꿈은 '들어가지 않을 때' 만 일어나므로 넓은 화면의 모양은 달라지지 않는다.
*/
.tsListTools{display:flex; align-items:center; gap:6px; flex-wrap:wrap; row-gap:6px;}
/*
	툴의 두 묶음 (2026-09-21 요청).
	  tsToolsSel - 고른 것에 하는 일 ([매물비교]·[그룹물건등록])
	  tsToolsOpt - 목록을 보는 방식 (단위전환·정렬·보기전환)
	묶음 안은 절대 줄이 바뀌지 않고(nowrap), 줄어들지도 않는다(flex:none).
	좁아져 넘칠 때 **묶음째** 다음 줄로 내려가게 하려는 것이다 - 예전에는 단추 넷이
	제각기 쪼그라들어 '매물비교' 가 세로로 뭉갰다.
*/
.tsToolsSel,
.tsToolsOpt{display:flex; align-items:center; gap:6px; flex:none; flex-wrap:nowrap;}
.tsToolsSel[hidden]{display:none;}
.tsToolsSel > button,
.tsToolsOpt > *{flex:none; white-space:nowrap;}
/* 화살표는 위 .tsComplexSort 주석 참고 (reset.css 의 배경 아이콘을 되살린다) */
.tsSortSel{height:30px; padding:0 22px 0 8px; border:1px solid #dcdcdc; border-radius:4px;
	font-size:13px; cursor:pointer; background:#fff url("../images/icon_selectArrow.png") no-repeat right 7px center;}
/*
	보기 전환(리스트형/갤러리형) - 전체물건 검색의 .tab_menu 와 같은 모양이다.
	그 규칙을 그대로 쓰지 않는 이유는 .tab_menu 가 절대배치(top:-36px)에 모바일에서는
	통째로 숨겨지기 때문이다. 여기서는 머리줄 안에 들어가야 하고 모바일에서도 보여야 한다.
	아이콘 글자(xeicon)와 색은 그쪽과 같은 값을 쓴다.
*/
.tsViewBtn{height:auto; padding:0 10px; background:transparent; border:0; border-radius:0;
	font-size:14px; font-weight:500; line-height:34px; color:#111; cursor:pointer;}
.tsViewBtn::before{display:inline-block; height:16px; margin-right:3px; font-size:16px; line-height:34px;
	font-family:'xeicon' !important; text-rendering:auto; -webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale; text-align:center; vertical-align:inherit; color:inherit;}
.tsViewBtn[data-view="list"]::before{content:'\e993';}
.tsViewBtn[data-view="gallery"]::before{content:'\e903';}
.tsViewBtn:hover{color:#0c4fa2;}
.tsViewBtn.on{color:#0c4fa2;}

/*
	면적 단위 스위치 (2026-09-10 요청).
	모양은 필지정보 패널의 [면적 단위 전환](.unitChange)과 같다 - 돌아가는 화살표에
	지금 단위를 적고, 누르면 뒤집힌다. 두 화면에서 같은 그림이 같은 일을 해야 한다.
	갤러리형은 머리줄에, 리스트형은 [면적] 열머리에 선다.
*/
.tsArUnitBtn{display:inline-flex; align-items:center; gap:3px; height:30px; padding:0 9px;
	background:#fff; border:1px solid #dcdcdc; border-radius:4px;
	font-size:13px; color:#333; cursor:pointer;}
.tsArUnitBtn:hover{border-color:#119b35; color:#119b35;}
.tsArUnitBtn .material-symbols-outlined{font-size:16px;}
.tsArUnitBtn em{font-style:normal; font-weight:700;}
/* 열머리 안에서는 글자 높이에 맞춰 작게 앉힌다 - 머리줄이 한 칸 두꺼워지면 표가 밀린다 */
.tsArTh{white-space:nowrap;}
.tsArUnitTh{height:22px; margin-left:4px; padding:0 5px; font-size:11px; vertical-align:middle;}
.tsArUnitTh .material-symbols-outlined{font-size:13px;}
/* 평으로 적을 때. ㎡ 는 .millis::after 가 붙이므로 따로 둘 것이 없다 */
.tsArPy{white-space:nowrap;}

/* ── 결과 목록 (전체물건 검색과 같은 뼈대를 쓴다) ────────
	갤러리형 .galleryList / 리스트형 .basicTable.list 는 그쪽 CSS(style.css·main.css)를 그대로 탄다.
	여기서는 이 화면에만 있는 것 - 비교표용 체크박스와 평 표기 - 만 손본다.
*/
/*
	표가 최소 폭(1300px)보다 좁은 화면에서는 이 칸 안에서 가로로 민다 (2026-09-09 요청).
	예전에는 overflow 가 없어 표가 상자 밖으로 그냥 삐져나가 오른쪽 열이 잘려 나갔다 -
	잘린 줄도 모르고 [금액등록일] 이 없는 화면으로 읽힌다.
	세로는 높이를 매지 않아 넘칠 일이 없다 - 줄 수만큼 상자가 함께 길어진다.
	(한 축이라도 auto 면 다른 축의 visible 은 auto 로 바뀐다. 그래서 굳이 적지 않는다)
*/
.tsTableBox{padding:0 4px 4px; overflow-x:auto;}
/* 몸통은 한 줄로 - 머리글은 좁아지면 줄을 바꾼다(아래 열 너비 규칙 참고) */
.tsTableBox .basicTable.list tbody th{white-space:nowrap;}
.tsChkCol{width:40px; text-align:center !important;}
.tsTdName{margin:0; font-weight:700; color:#222;}
.tsTdAddr{margin:2px 0 0; color:#787878;}
/* 숫자와 단위는 떼지 않는다 - 좁아지면 '4,018.1' 과 'm²' 가 다른 줄로 갈라졌다.
   붙여 두면 잴 때도 '이 아래로는 못 줄인다' 는 바닥에 그대로 반영된다 */
.tsTableBox .millis, .tsTableBox .tsPy, .tsTableBox .tsArPy{white-space:nowrap;}

/* 금액은 줄바꿈을 막지 않는다 - 막아 두면 좁을 때 접히는 대신 overflow:hidden 에 잘려 나간다
   ('30억 5,000만' 이 '30억 5,00' 으로 보였다). 띄어쓴 자리에서 접는 편이 낫다 */
.tsTdAmt p{margin:0;}
.tsPy{margin-left:4px; color:#999; font-size:12px; white-space:nowrap;}
/* 건물명과 동/호수가 두 span 으로 붙어 나와 한 낱말처럼 보인다 */
.galleryList .bldg_name + .bldg_name{margin-left:6px;}

.tsGalWrap{padding:16px 18px;}
/* 갤러리 카드 왼쪽 위 체크박스 - 사진 위에 얹는다 */
.galleryList li{position:relative;}
.tsGalChk{position:absolute; top:8px; left:8px; z-index:2; padding:3px;
	border-radius:4px; line-height:0;}
.tsGalLink{display:block; cursor:pointer;}

/*
	좁은 화면 (2026-09-09 요청).
	갈림길은 1000px 이다 - 전체물건 검색(sub_responsive.css)이 갤러리형만 보여 주는 폭과 같게 맞춘다.

	1) 조건 패널은 버튼 아래 말풍선이 아니라 화면 아래에서 올라오는 팝업(시트)이다.
	   손안에서는 말풍선이 화면을 거의 다 덮으면서도 버튼에 매달려 어정쩡하게 잘린다.
	   바깥의 어둠은 따로 요소를 두지 않고 box-shadow 한 겹으로 깐다 - 요소를 깔면
	   바깥클릭으로 닫는 기존 규칙(캡처 단계)과 서로 걸린다.
	2) 목록은 갤러리형만 쓴다. 보기 전환 단추는 감춘다 (JS 의 effView 와 짝).
*/
@media screen and (max-width:1000px){
	.tsPillPanel, .tsRegionPanel{
		position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important;
		top:auto !important; width:auto !important; min-width:0 !important; max-height:82vh;
		padding:0 16px 16px; border-radius:16px 16px 0 0; overflow-y:auto; overscroll-behavior:contain;
		box-shadow:0 -6px 24px rgba(0,0,0,.18), 0 0 0 100vmax rgba(0,0,0,.35);}

	.tsSheetHd{display:flex; align-items:center; justify-content:space-between; position:sticky; top:0;
		margin:0 -16px 10px; padding:12px 16px; background:#fff; border-bottom:1px solid #eee; z-index:1;}
	.tsSheetHd > span{font-size:15px; font-weight:700; color:#222;}
	.tsSheetX{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
		padding:0; background:transparent; border:0; color:#555; cursor:pointer;}
	.tsSheetX .material-symbols-outlined{font-size:22px;}
	/* 지역 패널은 제 머리줄(빵부스러기)이 있으므로 닫기만 붙인다 */
	.tsRegionPanel .tsPanelHd{position:sticky; top:0; margin:0 -16px 10px; padding:12px 16px;
		background:#fff; border-bottom:1px solid #eee; z-index:1;}

	/* 손가락으로 누르는 크기 - 칩과 [적용] 을 조금 키운다 */
	.tsPanelFoot button{height:40px;}
	.tsChipGrid .tsOpt{min-height:38px;}

	/*
		검색줄을 줄바꿈한다 (2026-09-09 요청).
		가로로 흐르게 두면 어떤 조건이 있는지 알려면 밀어 봐야 한다 - 손안에서는 그 자체가 숨김이다.
		한눈에 다 보이면 이동 단추도 필요 없어진다(넘치지 않으므로 JS 판정으로도 저절로 숨는다).
		대신 조금 작게 만들어 줄 수를 줄인다.
	*/
	.tsBar{flex-wrap:wrap; align-items:flex-start; row-gap:6px;}
	.tsBarNav{display:none !important;}
	/* 폭을 0에서 나눠 가져 [지도]/[목록] 단추가 첫 줄 오른쪽에 남게 한다 (아래로 밀리면 자리를 잃는다) */
	.tsBarScroll{flex:1 1 0; min-width:0; overflow:visible;}
	.tsBarInner{flex-wrap:wrap; width:auto; row-gap:6px;}
	/* 조건 pill 들은 이 안에 또 한 겹 들어 있다 - 여기도 풀어야 실제로 줄바꿈된다 */
	.tsFilterBar{flex-wrap:wrap; row-gap:6px;}

	.tsBar .tsRegionChip, .tsBar .tsPillBtn, .tsBar .tsSearchBox,
	.tsBar .tsViewToggle, .tsBar .tsBarNav{height:32px;}
	.tsRegionChip, .tsPillBtn{height:32px; padding:0 10px; font-size:13px;}
	.tsChipCaret, .tsPillCaret{font-size:16px;}
	.tsViewToggle{height:32px; padding:0 14px; font-size:13px;}
	/*
		남는 자리를 채우되 너무 붙들지는 않는다 - 150px 을 고집하면 지역칩이 다음 줄로 밀려
		첫 줄이 검색칸 하나로 비고 전체가 한 줄 더 길어진다([조건] 단추가 생긴 뒤 그렇게 됐다).
	*/
	.tsSearchBox{flex:1 1 110px; width:auto; min-width:100px;}
	.tsSearchBox.on{width:auto;}
	.tsSearchBox input{padding:0 40px 0 14px; font-size:13px;}

	/* [지도]/[목록] 아래에 [조건] 을 세운다 (2026-09-09 요청) */
	.tsBarSide{display:flex; flex:none; flex-direction:column; align-items:flex-end; gap:6px;}

	/*
		접기 단추는 좁은 화면이면 **두 모드 모두** 낸다 (2026-09-11 요청 - 예전에는 지도 모드만).
		목록 모드에서는 조건이 머리를 네 줄이나 차지해 들어오자마자 스크롤해야 매물이 보였다.
		이름은 JS 가 모드를 보고 [조건]/[상세검색] 으로 바꾼다.
	*/
	#tsBox .tsBarFold:not([hidden]){display:inline-flex; height:32px; padding:0 8px;}

	/*
		접었다 펴는 것은 미끄러지듯 (2026-09-11 요청 - '슬라이딩으로 나타나는 방식').
		display:none 으로 껐다 켜면 네 줄이 한 순간에 튀어나와, 무엇이 열렸는지 눈이 못 따라간다.

		flex-basis:100% - 이 줄은 언제나 제 줄을 통째로 쓴다. 내용 폭에 맡겨 두면 조건이
		  몇 개냐에 따라 검색칸 옆에 붙었다 떨어졌다 해서 여는 높이가 들쭉날쭉해진다.
		max-height:50vh - 높이를 모르는 것을 미끄러뜨리려면 상한이 필요하다. 조건줄은 네 줄
		  (≈150px)이라 화면 절반이면 넉넉하다. 덜 차도 상한이라 빈 자리는 생기지 않는다.
		visibility - 접힌 동안 탭 차례에서도 빠져야 한다(예전 display:none 이 하던 몫이다).
		  펼 때는 곧바로 보이고, 접을 때는 미끄러짐이 끝난 뒤에 감춘다(transition 의 0s 지연).
	*/
	/*
		폭은 검색줄 전체를 쓴다 (2026-09-14 제보 - '오른쪽을 비운 상태').
		이 칸은 가운데(.tsBarScroll) 안에 있어 오른쪽 세로줄([목록]·[상세검색]) 폭만큼 좁다.
		그런데 세로줄은 위 두 줄(70px)에서 끝나고 조건칩은 그 아래로 흘러가므로, 오른쪽
		90px 남짓이 끝까지 빈 채로 남아 칩만 쓸데없이 작아졌다. 그 폭(--tsSideW, trading-search-bar.js
		가 잰다)만큼 오른쪽으로 넓힌다. flex-shrink 를 0 으로 두어야 한다 - 기본값이면
		제 줄에 넘치는 만큼 도로 줄어들어 아무것도 달라지지 않는다.
	*/
	.tsAdvBox{display:flex; align-items:center; flex-wrap:wrap; gap:6px;
		flex:0 0 calc(100% + var(--tsSideW, 0px));
		overflow:hidden; max-height:50vh; opacity:1; visibility:visible;
		transition:max-height .26s ease, opacity .18s ease, visibility 0s;}
	#tsBox.tsBarFolded .tsAdvBox{max-height:0; opacity:0; visibility:hidden;
		transition:max-height .26s ease, opacity .18s ease, visibility 0s linear .26s;}
	/* 칸 안에서 지역선택은 제 줄, 조건칩은 그 아래 줄들이다 */
	.tsAdvBox .tsFilterBar{flex-basis:100%;}

	/* [초기화] 도 같은 줄에 서므로 키를 맞춘다 */
	.tsBar .tsBarReset{height:32px; padding:0 10px; margin-left:0;}
	/*
		접었으면 정말 한 줄이어야 한다 - 검색칸이 150px 을 붙들고 있으면 지역칩과 함께
		두 줄로 밀려 접은 보람이 없다. 남는 자리에 맞춰 줄어들게 둔다.
		2026-09-11 - 목록 모드에도 적용한다(.tsMapMode 를 뺐다). 그쪽은 [초기화] 까지 같은 줄에
		서야 하는데, 검색칸이 181px 을 먹어 [초기화] 가 둘째 줄로 밀려났다(실측).
	*/
	#tsBox.tsBarFolded .tsSearchBox{flex:1 1 90px; min-width:80px;}

	/*
		좁은 화면 지도보기의 검색줄은 두 줄이다 (2026-09-14 요청).
		  1줄 [검색어] [초기화] │ [목록]
		  2줄 (검색 결과 수)    │ [상세검색]
		건수 알림을 이 자리로 옮기는 일은 trading-search-map.js 의 placeInfo 가 한다 (CSS 는 DOM 을 못 옮긴다).

		`flex-basis:100%` 는 **줄을 끊으려는 것**이다 - 앞줄에 끼어들지 않고 제 줄에서 시작한다.
		`max-width:max-content` 가 그 폭을 다시 제 글만큼으로 줄인다.
		(빈 칸 하나를 끼워 끊어 봤더니 그 칸이 줄 하나를 통째로 먹어, 알림이 7px 내려앉았다)
		높이 32px·border-box 는 첫 줄 단추들과 같은 키다 - 오른쪽 [상세검색] 과 나란히 선다.
	*/
	#tsBox.tsMapMode .tsBarInner > .tsMapInfo{
		position:static; top:auto; left:auto; z-index:auto;
		flex:0 1 100%; max-width:max-content;
		box-sizing:border-box; height:32px; display:flex; align-items:center;
		overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

	/*
		2026-09-11 에 접힌 동안 [목록]·[상세검색] 을 한 줄로 세웠던 규칙은 지웠다 (2026-09-14 요청).
		그때는 둘째 줄 왼쪽이 비어 있어 한 줄로 모으는 게 나았는데, 이제 그 자리에 건수 알림이 온다.
		  1줄 [검색어] [초기화] │ [목록]
		  2줄 (검색 결과 수)    │ [상세검색]
		오른쪽 세로줄(.tsBarSide)이 다시 제 몫을 한다.
	*/

	/*
		지도 위에 얹힌 것들은 '손가락이 통과' 하게 둔다 (2026-09-09 제보).
		검색줄은 줄바꿈 뒤 지도 위 110px 을 차지하는데, 그 띠가 통째로 터치를 먹어 그 자리에서
		지도를 밀 수 없었다(실측: 검색줄 아래 120px 지점의 요소가 #tsFilterBar). 안내줄·도구도 마찬가지다.
		그릇만 통과시키고 실제로 누르는 것들(단추·입력칸·패널)은 다시 받게 한다.
	*/
	#tsBox.tsMapMode .tsBar,
	#tsBox.tsMapMode .tsBarScroll,
	#tsBox.tsMapMode .tsBarInner,
	#tsBox.tsMapMode .tsFilterBar,
	#tsBox.tsMapMode .tsBarSide,
	#tsBox.tsMapMode .tsMapInfo,
	#tsBox.tsMapMode .tsMapNotice,
	#tsBox.tsMapMode .tsMapGuide,
	#tsBox.tsMapMode .tsMapTools{pointer-events:none;}

	#tsBox.tsMapMode .tsBar button,
	#tsBox.tsMapMode .tsBar input,
	#tsBox.tsMapMode .tsBar .tsSearchBox,
	#tsBox.tsMapMode .tsBar .tsPill,
	#tsBox.tsMapMode .tsPillPanel,
	#tsBox.tsMapMode .tsRegionPanel,
	#tsBox.tsMapMode .tsMapTools button{pointer-events:auto;}

	/* 목록은 갤러리형만 (전체물건 검색과 같다) */
	.tsViewBtn{display:none;}
	.tsPaging{padding:12px 0 16px;}

	.tsSearchBox{width:150px;}
	.tsSearchBox.on{width:min(70vw, 300px);}
	.tsViewToggle{padding:0 12px;}
	.tsGalWrap{padding:12px;}
}

/*
	금액 옆의 금액등록일 (2026-09-14 요청).

	**건물년차(.tsTdAge)와 같은 모양으로 맞춘다** (2026-09-14 추가 요청) -
	빌딩명 옆의 '1991.07 · 36년차' 와 금액 옆의 날짜는 하는 일이 같다.
	둘 다 앞의 값을 거드는 곁말이라, 크기·두께·색이 다르면 눈이 따로 읽는다.
	  12px · #666 · 500 · inline-block · 왼쪽 4px  (.tsTdAge 의 계산값과 같다)

	줄을 맞춘다 (2026-09-14 추가 요청). 이 화면은 vertical-align 이 top 으로 깔려 있어,
	날짜가 줄상자 맨 위에 붙어 금액보다 3.8px 위로 떠 있었다(실측). 빌딩명 옆 년차는
	글자 크기 차가 작아(14 vs 12) 티가 안 났을 뿐 같은 처지다.
	baseline 으로 되돌리면 두 글자가 **같은 선 위에** 앉는다 - 크기가 달라도 글줄이 맞는다.
	위쪽이나 아래쪽에 맞추면 크기 차만큼 어긋나므로 여기서는 baseline 이 맞다.
	font-weight 를 못박는 까닭: 이 글자는 굵은 금액 줄(.gallCost p, 700) 안에 있어
	그냥 두면 금액과 똑같이 굵어진다. 년차는 500 을 물려받고 있어 못박을 일이 없었다 -
	그래서 '400' 이 아니라 실제로 재어 본 값 500 을 적는다.
	nowrap - 줄이 좁으면 제 줄로 내려가게 둔다. 금액을 밀어내며 '…' 로 끊기는 것보다 낫다.
*/
.tsGalCost .tsAmtDt{display:inline-block; vertical-align:baseline; margin-left:4px;
	font-size:12px; font-weight:500; color:#666; white-space:nowrap;}

.tsBack{display:inline-flex; align-items:center; height:26px; padding:0 8px 0 2px; margin-right:8px;
	background:#f4f5f7; border:1px solid #dcdcdc; border-radius:13px; font-size:12px; color:#555; cursor:pointer;}
.tsBack:hover{background:#f3f4f9;}
.tsBack .material-symbols-outlined{font-size:17px;}

/* ── 가격 슬라이더 ───────────────────────────────────── */
.tsPillPanel .tsPrice{margin-bottom:20px;}
.tsPillPanel .tsPrice:last-of-type{margin-bottom:0;}

.tsPriceHd{display:flex; align-items:center; gap:6px; margin:0 0 10px; font-size:13px; color:#787878;}
.tsPriceHd b{color:#222; font-size:14px;}
.tsPriceEdit{margin-left:auto; width:24px; height:24px; border:0; background:transparent;
	color:#999; font-size:17px; cursor:pointer;}
.tsPriceEdit:hover{color:#333;}

/* 두 개의 range 를 한 트랙 위에 겹친다. 입력 자체는 이벤트를 안 받고 손잡이만 받는다 */
.tsSlider{position:relative; height:22px;}
.tsTrack{position:absolute; top:9px; left:0; right:0; height:4px; background:#e3e4e9; border-radius:2px;}
.tsFill{position:absolute; top:0; height:100%; background:#2b77f8; border-radius:2px;}

.tsSlider .tsR{position:absolute; top:0; left:0; width:100%; height:22px; margin:0;
	background:transparent; -webkit-appearance:none; appearance:none; pointer-events:none;}
.tsSlider .tsR:focus{outline:0;}
.tsSlider .tsR::-webkit-slider-runnable-track{height:22px; background:transparent; border:0;}
.tsSlider .tsR::-moz-range-track{height:22px; background:transparent; border:0;}
.tsSlider .tsR::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; pointer-events:auto;
	width:18px; height:18px; margin-top:2px; border-radius:50%; background:#fff;
	border:2px solid #2b77f8; box-shadow:0 1px 3px rgba(0,0,0,.2); cursor:pointer;}
.tsSlider .tsR::-moz-range-thumb{pointer-events:auto; width:18px; height:18px; border-radius:50%;
	background:#fff; border:2px solid #2b77f8; box-shadow:0 1px 3px rgba(0,0,0,.2); cursor:pointer;}

.tsPriceTicks{display:flex; justify-content:space-between; margin-top:6px; font-size:11px; color:#999;}

/*
	금액 기간 - 손잡이 하나짜리다. 위의 금액 구간과 묻는 것이 달라서(얼마인가 / 언제 적힌 값인가)
	실선 하나로 갈라 둔다. 붙여 두면 '매매가·보증금·월세' 를 잇는 넷째 줄처럼 읽힌다.
*/
.tsPillPanel .tsPeriod{margin-top:18px; padding-top:16px; border-top:1px solid #ededf0;}
.tsPillPanel .tsPeriod .tsPanelNote{margin-top:10px;}

/*
	직접 입력 칸은 [연필] 을 눌러야 나온다.
	display:flex 가 [hidden] 을 이겨 늘 보이고 있었다(2026-09-09 발견) - 보이는데
	값을 넣어도 무시됐다. 코드는 hidden 속성으로 '열렸는가' 를 판정하기 때문이다.
*/
.tsPriceDirect{display:flex; align-items:center; gap:6px; margin-top:10px;}
.tsPriceDirect[hidden]{display:none;}
.tsPriceDirect input{width:0; flex:1 1 auto; min-width:0; height:30px; padding:0 8px;
	border:1px solid #dcdcdc; border-radius:4px; font-size:13px;}
.tsPriceDirect span{color:#999;}
.tsPriceDirect em{flex:none; font-style:normal; font-size:12px; color:#787878;}

.tsPill[data-pill="price"] .tsPillPanel{min-width:330px;}

/* 매물유형은 코드표를 다 싣느라 길다 - 목록만 굴린다 */
.tsPill[data-pill="orTp"] .tsPillPanel{min-width:360px;}
/* 거래유형도 매매/임대 두 묶음이라 세 칸이 필요하다 */
.tsPill[data-pill="dlngS"] .tsPillPanel,
.tsPill[data-pill="dlngL"] .tsPillPanel{min-width:300px;}
.tsPill[data-pill="org"] .tsPillPanel,
.tsPill[data-pill="exc"] .tsPillPanel{min-width:200px;}

/* 전속은 다른 조건들과 같은 칩 방식이다 - 따로 둘 규칙이 없다 */

/* ── 지도 모드 ───────────────────────────────────────── */
/*
	지도일 때는 검색줄을 지도 위로 올린다 (요구사항 7).
	상자 여백(15px)과 아래 여백(mb25)도 걷어 내 지도가 상자를 꽉 채우게 하고,
	그만큼 푸터와의 빈 칸을 줄인다 (요구사항 5). 실제 높이 맞춤은 map.js 의 fitMap 이 한다.
*/
#tsBox.tsMapMode{position:relative; padding:0; overflow:hidden; border-radius:0; box-shadow:none;}
#tsBox.tsMapMode.mb25{margin-bottom:0;}

/*
	지도일 때는 본문 여백을 전부 걷어 지도가 화면을 꽉 채우게 한다.
	위 여백(90px)만 남긴다 - 그 자리에 상단 고정 헤더가 떠 있다.
	제목도 함께 숨긴다 (목록으로 나가면 둘 다 되돌아온다).
*/
/*
	위 여백은 고정 머리줄(.topInfo_wrap) 높이와 같아야 한다. CSS 에 박힌 90px 은 머리줄(65px)보다
	커서 그 차이가 흰 띠로 남았다 (2026-09-09 제보). 실제 높이는 trading-search-bar.js 가 잰다.
*/
body.tsMapPage .contents_wrap{padding-left:0; padding-right:0; padding-bottom:0;
	padding-top:var(--tsTopH, 65px);}
/* 제목 줄 통째로 숨긴다 - h2 만 숨기면 오른쪽 단추 자리가 빈 줄로 남는다 */
body.tsMapPage .tsTitleRow{display:none;}
/*
	2026-09-10 좌우 분할 - 검색줄을 지도 위에서 내렸다.
	예전에는 지도 위에 떠 있었다(지도 하나가 자리를 다 쓰던 때라 그게 넓어 보였다).
	이제 그 자리는 왼쪽 목록과 오른쪽 지도가 나눠 쓰므로, 떠 있으면 목록 머리줄을 덮는다.
	두 칸 위에 한 줄로 얹어 둘을 함께 거느리게 한다 (Zillow 도 같은 자리다).
	position:relative 를 남기는 이유는 아래 좁은 화면의 z-index:60 이 그대로 듣게 하기 위해서다 -
	조건 패널(z-index 900)이 푸터(55) 위로 올라오는 길이 그 줄이다.
*/
/*
	위 여백 10px 은 고정 머리줄(.topInfo_wrap)의 아래 구분선과 검색칩 사이를 띄우려는 것이다
	(2026-09-11 제보: 로그인 뒤 첫 화면에서 구분선에 검색줄이 딱 붙어 보기 안 좋다).
	2026-09-09 에 없앤 25px 흰 띠와는 다른 것이다 - 그때는 검색줄이 지도 위에 떠 있어
	머리줄과 지도 사이가 통째로 비었다. 지금은 검색줄이 제 줄로 내려왔으므로, 이 10px 은
	빈 띠가 아니라 그 줄의 윗숨이다. 높이는 fitMap() 이 다시 맞추므로 지도만 10px 줄어든다.
*/
#tsBox.tsMapMode .tsBar{position:relative; z-index:6; margin:10px 12px 8px; padding:0;}
/*
	좁은 화면에서는 조건 패널이 화면 아래 팝업이라 푸터(z-index 55)와 겹친다.
	패널의 z-index 900 은 소용이 없다 - 이 .tsBar 가 z-index 6 으로 쌓임 문맥을 만들어,
	그 안의 900 은 문맥 밖과 겨루지 못하기 때문이다. 그래서 문맥 자체를 올린다.
	(이 규칙은 위 기본값보다 뒤에 있어야 이긴다 - 같은 선택자다.)
*/
/*
	2026-09-11 - 60 → 58. 좌측 메뉴(#header, style.css)가 59 라, 60 이면 메뉴를 열었을 때
	검색줄·조건칩이 메뉴 위로 올라와 메뉴를 가렸다(제보). 푸터(55)는 넘고 메뉴(59)는 넘지 않는
	자리가 56~58 이다 - 그 안에서 가장 높은 58 을 쓴다.
	이 수를 바꿀 때는 두 이웃(푸터 55 · 메뉴 59)을 함께 볼 것.
*/
@media screen and (max-width:1000px){
	#tsBox.tsMapMode .tsBar{z-index:58;}
}
#tsBox.tsMapMode .tsResult{border:0; border-radius:0; min-height:0; overflow:hidden;}

/*
	지도 도구·안내는 지도 칸의 위끝에 붙는다 (2026-09-10).
	검색줄이 지도 위에 떠 있던 동안에는 그 높이(--tsBarH)만큼 내려야 겹치지 않았는데,
	이제 검색줄이 지도 밖으로 나갔으므로 내릴 이유가 없다.
*/
#tsBox.tsMapMode .tsMapInfo,
#tsBox.tsMapMode .tsMapTools,
#tsBox.tsMapMode .tsMapNotice{top:10px;}

/*
	지역묶음 핀 (설계 §5.5).
	로그인 전 첫 페이지(index.html)와 같은 그림을 쓴다 - 파란 동그라미(icon-marker-name.png)에
	지역명, 오른쪽 위 흰 배지(icon-marker-number.png)에 개수. 두 화면이 같은 모양이어야
	"아까 보던 그 지도" 로 읽힌다.
*/
.tsGroupPin{position:relative; width:60px; height:62px; display:flex; align-items:center;
	justify-content:center; cursor:pointer;
	background:url("../images/icon-marker-name.png") no-repeat center / 60px 62px;}
.tsGroupPin:hover{filter:brightness(1.08);}
.tsGroupNm{max-width:52px; padding:0 2px; color:#fff; font-size:11px; font-weight:700;
	text-align:center; line-height:1.15; word-break:keep-all; overflow:hidden;}
.tsGroupCnt{position:absolute; top:-2px; right:-10px; min-width:38px; height:20px;
	display:flex; align-items:center; justify-content:center; padding:0 4px;
	background:url("../images/icon-marker-number.png") no-repeat center / 100% 100%;
	color:#0c4fa2; font-size:11px; font-weight:700;}

/* ── 좌우 분할 : 왼쪽 매물목록 · 오른쪽 지도 (2026-09-10 요청) ── */
/*
	두 칸은 **같은 높이로 나란히** 선다. 높이를 받는 것은 이 줄(.tsSplit)이고,
	trading-search-map.js 의 fitMap 이 '푸터 아래끝 = 화면 아래끝' 이 되도록 재서 고친다.
	목록은 제 칸 안에서만 스크롤된다(.tsListScroll) - 페이지가 통째로 길어지면 지도가
	화면 밖으로 밀려나, 좌우로 나눈 뜻이 없어진다.
*/
.tsSplit{position:relative; display:flex; align-items:stretch;
	height:calc(100vh - 240px); min-height:420px;}
/*
	목록 칸 폭 (2026-09-10 요청 - 두 번째 판).
	카드 폭을 280px 로 못박고(450 -> 360 -> 330 -> 300 -> 280), 몇 열이 들어가는지에 맞춰 칸 폭을
	정한다. 남는 폭은 지도 몫이다.
	실제 값은 trading-search-map.js 의 fitPanes 가 **줄의 폭을 재서** 인라인으로 넣는다 -
	왼쪽 메뉴가 있는 화면에서는 화면 폭과 쓸 수 있는 폭이 달라, CSS 의 화면 질의로는 못 가른다.
	여기 적은 300px 은 그 전에 잠깐 보이는 값이다(한 열 기준).
	상한(max-width)을 두지 않는다 - 예전 40% 시절에는 52% 상한이 좁은 화면을 지켰지만,
	이제 fitPanes 가 지도 몫(560px)을 먼저 떼고 남는 만큼만 내주므로 그 일을 대신한다.
	상한을 남겨 두면 2열이 들어가는 폭에서도 칸이 잘려 카드가 450px 아래로 줄었다(실측 1600px).
*/
.tsSplitList{position:relative; z-index:2; flex:none; display:flex; flex-direction:column;
	width:300px;
	background:#fff; border-right:1px solid #e3e4e9;}
/*
	스크롤막대 자리를 늘 비워 둔다 - 담긴 건수에 따라 막대가 생겼다 없어지면 카드 폭이
	그때마다 달라져, 폭을 못박은 뜻이 사라진다. fitPanes 도 이 값을 한 번 재서 칸 폭에 더한다.
*/
.tsListScroll{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
	scrollbar-gutter:stable;}
.tsSplitMap{position:relative; flex:1 1 auto; min-width:0;}
.tsSplitMap .tsMapWrap{height:100%;}
.tsSplitMap .tsMap{height:100%; min-height:0;}
/* 손잡이는 좁은 화면(≤500px)의 시트에서만 쓴다 */
.tsSheetGrip{display:none;}

/*
	접기 손잡이 (2026-09-15 → 2026-09-17 요청).

	필지정보 목록의 손잡이(.lspFold)와 **같은 모양·같은 자리**로 맞췄다 - 한 화면 안에서
	접었다 펴는 몸짓이 두 가지면 그때마다 어디를 눌러야 하는지 다시 찾아야 한다.
	칸 오른쪽 경계선에 반쯤 걸친 탭이라 접은 뒤에도 그 자리에 남는다 -
	접는 단추와 펴는 단추가 따로 있던 것을 하나로 합쳤다.

	화살표는 겹화살표다 - 한 칸 넘기는 것이 아니라 칸을 통째로 여닫는 몸짓이라
	홑화살표보다 뜻이 맞는다(필지정보 쪽도 같이 바꿨다).

	열 수(1·2)를 고르던 줄은 없앴다 - 자가 흔들리지 않게 된 뒤로는 손댈 일이 없었고,
	그 줄이 카드가 앉을 자리를 한 줄 먹고 있었다.
*/
.tsPaneFold{position:absolute; right:-20px; top:50%; transform:translateY(-50%);
	width:20px; padding:12px 0; display:flex; 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;}
.tsPaneFold:hover{background:#f5f5f5; color:#222;}
.tsPaneFoldIcon{font-size:16px; line-height:1;}
/* 글씨를 두껍게 (2026-09-17 요청) - 20px 짜리 좁은 탭에서 11px 글자는 가늘면 묻힌다 */
.tsPaneFoldTxt{writing-mode:vertical-rl; font-size:11px; letter-spacing:1px; font-weight:700;}

/*
	접었을 때 - 칸은 경계선만 남기고 지도가 그 자리까지 넓어진다.
	display:none 이 아니라 폭을 0 으로 만드는 까닭은 **손잡이가 살아남아야** 하기 때문이다
	(필지정보 쪽 body.landFoldMode 와 같은 방식이다).
	fitPanes 가 접힘 갈래에서 인라인 width 를 비우므로 !important 가 아니어도 이기지만,
	그 순서에 기대지 않도록 못박는다.
*/
.tsSplit.tsPaneOff .tsSplitList{width:0 !important; border-right:0;}
.tsSplit.tsPaneOff .tsSplitList > *:not(.tsPaneFold){display:none;}
/*
	접으면 푸터도 함께 접는다 (2026-09-17 요청).
	[접기] 는 '지도를 크게 보겠다' 는 뜻이다 - 폭만 내주고 아래는 그대로면 반만 들어준 셈이다.
	높이를 맞추는 fitMap() 에는 푸터가 감춰졌을 때의 갈래가 이미 있어(좁은 화면용) 지도가
	화면 아래끝까지 자란다.
	지도 모드일 때만 건다 - [목록] 으로 나가면 tsMapPage 가 떨어지며 푸터가 그대로 돌아온다.
*/
body.tsMapPage.tsPaneOff #footer{display:none;}

/* 머리줄(건수·정렬·보기)은 스크롤을 따라다닌다 - 아래로 내려가도 무엇을 보고 있는지 남는다 */
.tsSplitList .tsListHead{position:sticky; top:0; z-index:3; flex-wrap:wrap; row-gap:6px;
	margin:0; padding:10px; background:#fff; border-bottom:1px solid #eee;}
/*
	목록 칸이 한 열로 좁아진 자리 (2026-09-21 요청).
	[매물비교]·[그룹물건등록] 이 나타나면 툴 넷이 한 줄에 들어가지 못한다 -
	묶음째 줄이 바뀌어 두 단추가 한 줄, 단위전환·정렬이 다른 한 줄로 앉는다
	(규칙은 위 .tsListTools / .tsToolsSel·.tsToolsOpt 에 있다 - 여기에 따로 둘 것이 없다.)
*/

/*
	갤러리 카드 - 1열 또는 2열 (2026-09-10 요청).
	바탕(style.css 의 groupItem_list)은 float 5열에 높이 340px 고정이다. 좁은 칸에서는
	그 틀이 맞지 않으므로 이 칸에서만 격자로 바꾼다. 열 수는 화면 폭이 정한다 -
	목록 칸 폭이 화면 폭에 매여 있으므로(40vw) 화면 폭으로 가려도 결과가 같고,
	컨테이너 질의 없이도 2열 상한이 지켜진다.
	카드 높이는 내용에 맡긴다(340px 고정 해제) - 한 열일 때 카드가 넓어지면 사진도 함께
	커져야 하는데, 높이가 묶여 있으면 사진만 납작해진다.
*/
/*
	갤러리 카드 배열 (2026-09-10 요청 - 두 모드가 같은 규칙을 쓴다).

	바탕(style.css 의 groupItem_list)은 float 5열에 카드 높이 340px 고정이다. 화면이 아무리
	넓어도 다섯이고 좁아져도 다섯이라, 넓은 화면에서는 카드가 실없이 커지고 좁은 칸에서는
	글이 뭉갰다. 여기서는 격자로 바꿔 **카드 폭을 기준으로** 열 수가 정해지게 한다.

	  전체 폭 목록  - 350px 을 기준으로 들어가는 만큼 (auto-fill). 남는 폭은 카드가 나눠 갖는다.
	  좌우 분할     - 360px 로 못박고 1열 또는 2열 (아래 .tsSplit). 칸 폭은 fitPanes 가 맞춘다.

	카드 높이는 내용에 맡긴다 - 넓어진 카드에서 사진만 납작해지지 않도록.
*/
.tsGalWrap{padding:0 10px 10px;}
/*
	전체 폭 목록의 카드 폭은 **240~365px 사이**다 (2026-09-11 요청 - 360→400 을 거쳐 240/365 로).

	  1) 240px 을 기준으로 들어가는 만큼 열을 잡는다
	  2) 그 카드가 365px 까지 넓어진다
	  3) 그러고도 남는 폭은 카드가 아니라 **카드 사이**로 고르게 나뉜다

	1fr 로만 두었을 때는 화면이 넓어질수록 카드가 한없이 늘어, 넓은 화면에서는 사진 한 장이
	카드를 가득 채우고 글은 아래에 한 줄로 눌렸다. 위끝을 365px 로 막으면 카드 모양이
	어느 화면에서나 같고, 넉넉해진 폭은 카드 사이가 벌어지는 데 쓰여 눈이 덜 빽빽하다.

	★ 위끝을 minmax 의 max 로 적으면 안 된다(실측).
	  repeat(auto-fill, minmax(240px, 365px)) 처럼 적으면 **위끝으로 열 수를 센다** - 칸 폭이 확정값이면
	  auto-fill 이 그것으로 세기 때문이다. 그래서 1378px 자리에 네 장이 들어가는데 세 장만 놓고
	  남은 298px 을 사이에 부어, 카드 사이가 149px 씩 벌어졌다.
	  칸은 1fr 로 두어 240px 으로 세게 하고, 위끝은 카드(li)의 max-width 로 막는다.
	  justify-items:center 로 가운데를 잡으면 안 된다(실측) - 그러면 카드가 칸 채우기를 그만두고
	  제 내용 폭(287px)으로 쪼그라들어 330px 이라는 아래끝이 무너진다.
	  카드는 width:100% 로 칸을 채우되 max-width 가 365px 에서 멈춰 세운다.

	★ 365px 은 어림수가 아니다.
	  간격이 가장 벌어지는 때는 **열이 하나 더 늘기 직전**이고, 그때 칸 폭은 `최소 + (최소+간격)/열수`
	  다. 2열일 때가 가장 커서 240 + 250/2 = 365px 이다. 위끝을 그 위로 두면 카드가 남는 폭을
	  모두 먹어, 어느 창 폭에서도 간격이 10px 그대로다.
	  (실측으로 맞춘 식이다 - 300/360 은 105 예측·104 실측, 330/400 은 110·109, 260/400 은 10·10)
	  칸이 카드보다 넓어진 만큼은 카드의 자동 여백(margin:0 auto)이 좌우로 반씩 나눈다 -
	  카드 사이는 그 두 몫이 더해져 고르게 벌어지고, 양 끝에는 그 절반이 남는다.

	auto-fit 이 아니라 auto-fill 인 이유: auto-fit 은 빈 칸을 0 으로 접어 버려,
	마지막 줄에 카드가 한둘만 남으면 그 몇 장이 화면 폭만큼 벌어진다.
*/
.tsGalWrap .groupItem_list ul{display:grid; gap:10px; overflow:visible;
	grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));}
/*
	:nth-child(5n+5) 를 함께 적는 이유 (실측으로 잡은 자리).

	바탕(style.css:846)에 `... ul li:nth-child(5n+5){margin-right:0}` 이 있다. float 5열 시절
	줄 끝 카드의 오른쪽 여백을 지우던 규칙인데, 그 선택자가 이 규칙보다 무거워(0,4,1 > 0,3,1)
	**다섯 번째 카드마다 margin-right 만 0 이 되었다.** 그러면 왼쪽 auto 가 남는 폭을 혼자
	먹어 그 카드만 칸 오른쪽 끝으로 밀린다 - 실측에서 5번 카드가 29.7px 오른쪽에 서 있었고,
	둘째 줄 가운데만 어긋나 보였다.
	같은 무게로 맞받아 두면(뒤에 오는 이 파일이 이긴다) 모든 카드가 같은 자리에 선다.
*/
.tsGalWrap .groupItem_list ul li,
.tsGalWrap .groupItem_list ul li:nth-child(5n+5){float:none; width:100%; height:auto;
	max-width:365px; margin:0 auto; border-radius:8px; overflow:hidden;}
/*
	금액은 여러 줄로 쌓인다 (2026-09-11 - 매물상세와 같은 방식).
	줄마다 굵게 두고 줄간격만 조인다 - 바탕(.title p)의 한 줄 자르기는 그대로 살아 있어
	한 줄이 넘치면 … 로 끊긴다.
*/
.tsGalWrap .gallCost{margin:2px 0 3px;}
.tsGalWrap .gallCost p{font-weight:700; line-height:1.35;}
/*
	사진칸은 3:2 로 두되 210px 을 넘기지 않는다.
	카드가 넓어지면 비율만으로는 사진 하나가 300px 을 넘게 먹어, 한 화면에 카드가
	한두 장밖에 안 들어온다 - 목록으로서 쓸모가 없어진다.
	넘치는 사진은 가운데를 남기고 잘린다(바탕 .img 의 overflow:hidden).
*/
/*
	2026-09-11 - 769px 이 아니라 1001px 부터다. 769~1000px 은 이미 '모바일 카드'(사진 왼쪽·
	내용 오른쪽, sub_responsive.css 의 ≤1000px)라 세로 카드용 3:2 비율이 끼어들 자리가 아니다.
	모바일 카드의 사진 크기는 아래 한 곳(≤1000px 블록)에서만 정한다.
*/
@media screen and (min-width:1001px){
	.tsGalWrap .groupItem_list ul li .img{height:auto; aspect-ratio:3 / 2; max-height:210px;}
	.tsGalWrap .groupItem_list ul li .img img{max-height:none; max-width:100%;}
}

/*
	모바일(≤1000px) 갤러리 카드 - 사진 100×140, 내용은 calc(100% - 120px) (2026-09-11 요청).

	**여기 한 곳에서만 정한다.** 지도보기의 아래 시트도, [목록] 모드의 갤러리도 같은 카드다 -
	둘을 따로 적어 두면 한쪽만 고치는 날이 온다(실제로 시트에만 96×96 을 적어 두었다가
	두 화면의 카드가 달라졌다).

	120 = 사진 100 + 내용칸 좌우 패딩 20. 바탕(sub_responsive)의 `calc(100% - 100px)` 도
	사진 80 + 20 이었다 - 같은 셈이라 사진이 눌리지 않고 딱 맞는다.
*/
@media screen and (max-width:1000px){
	.tsGalWrap .groupItem_list ul li .img{width:100px; height:140px;}
	.tsGalWrap .groupItem_list ul li .img img{max-height:140px;}
	.tsGalWrap .groupItem_list ul li .info{width:calc(100% - 120px);}

	/*
		좌우 여백을 걷는다 (2026-09-11 제보 - '여백이 너무 많아 카드가 너무 작다').
		390px 화면에서 여백이 **한쪽에만 46px** 씩 겹쳐 있었다:
		  본문 20 + 상자 15 + 결과 테두리 1 + 갤러리 10
		그래서 카드가 298px - 화면의 76% 밖에 못 썼다. 셋을 줄여 13px 로 만든다(카드 364px).
		지도 모드는 건드리지 않는다 - 거기는 이미 여백을 통째로 걷어 지도가 꽉 찬다
		(`body.tsMapPage .contents_wrap`, `#tsBox.tsMapMode`). 그래서 `:not(.tsMapMode)` 다.
		`.tsSearchWrap` 는 이 화면의 본문에만 붙인 이름이다 - `.contents_wrap` 은 전 화면이 쓴다.
	*/
	.tsSearchWrap{padding-left:6px; padding-right:6px;}
	#tsBox.contentBox:not(.tsMapMode){padding-left:6px; padding-right:6px;}
	.tsGalWrap{padding:0 0 10px;}
}
/*
	좌우 분할의 왼쪽 칸 - 카드 폭을 360px 로 못박는다.
	칸(track)이 minmax(0, 280px) 인 것은 한 열도 못 놓는 좁은 화면에서만 그 아래로 줄기 위해서다.
	justify-content:center 는 그렇게 줄지 않았을 때 남는 몇 픽셀을 양옆으로 나눈다.
*/
.tsSplit .tsGalWrap .groupItem_list ul{
	grid-template-columns:minmax(0, 280px); justify-content:center;}
.tsSplit.tsCol2 .tsGalWrap .groupItem_list ul{
	grid-template-columns:repeat(2, minmax(0, 280px));}

/*
	지연 로딩 꼬리 (2026-09-10 요청).
	이 줄이 화면 가까이 오면 다음 쪽을 부른다. 다 불러오면 스스로 사라진다 -
	'더 없음' 을 적어 두면 스크롤 끝마다 그 말이 남아 목록이 끊긴 것처럼 보인다.
*/
.tsMore{display:flex; align-items:center; justify-content:center; gap:8px;
	padding:16px 0 22px; color:#999; font-size:13px;}
.tsMoreSpin{width:14px; height:14px; border:2px solid #dcdcdc; border-top-color:#119b35;
	border-radius:50%; animation:tsSpin .7s linear infinite;}
@keyframes tsSpin{to{transform:rotate(360deg);}}
/*
	좁은 화면(≤500px) - 지도만 보이고 목록은 아래에서 올라오는 시트다 (2026-09-10 요청).
	좌우로 나눠 봤자 둘 다 못 쓰는 폭이다. 지도를 온전히 내주고, 목록은 손잡이를 눌러 올린다.
	필지정보의 [필지목록] 시트와 같은 몸짓이라 이 화면에서 시트는 언제나 같은 방식으로 열린다.
*/
@media screen and (max-width:500px){
	/*
		그리기 안내줄을 시트 손잡이 위로 올린다 (2026-09-10).
		목록 시트가 닫혀 있어도 손잡이(46px)가 지도 아래끝을 덮는다 - 그 자리에 있던
		[완료] 단추가 손잡이에 가려 눌리지 않았다(실측: 영역 그리기가 끝나지 않음).
		안내줄은 그리는 동안만 나오므로, 손잡이 높이만큼 띄워 두면 둘이 겹칠 일이 없다.
		(선택자를 #tsBox.tsMapMode 로 무겁게 잡는 이유: 기본 .tsMapGuide 규칙이 이 줄보다
		 **아래**에 있어, 같은 무게로는 뒤엣것에 진다)
	*/
	#tsBox.tsMapMode .tsMapGuide{bottom:calc(46px + 12px); z-index:7;}

	/*
		검색줄을 지도 위로 되돌린다 (2026-09-10).
		넓은 화면에서 검색줄을 지도 밖으로 낸 것은 옆의 목록을 덮지 않으려던 것인데,
		이 폭에서는 목록이 옆에 없다(아래 시트다) - 덮을 것이 없으므로 예전처럼 얹는다.
		여기서 한 줄을 내주면 조건이 서너 줄로 접히는 폭이라 지도가 손바닥만 해진다.
	*/
	#tsBox.tsMapMode .tsBar{position:absolute; top:10px; left:12px; right:12px; margin:0;}
	#tsBox.tsMapMode .tsMapInfo,
	#tsBox.tsMapMode .tsMapTools,
	#tsBox.tsMapMode .tsMapNotice{top:calc(var(--tsBarH, 34px) + 20px);}

	.tsSplitList{position:absolute; left:0; right:0; bottom:0; top:auto;
		/*
			2026-09-11 요청 - 72% 에서 100% 로. 올리다 만 것처럼 중간에 걸려 지도가 어정쩡하게
			남았다. 기존 RPAZ 도 목록을 올리면 화면을 통째로 덮는다 - 이 폭에서 지도와 목록을
			함께 보는 것은 애초에 안 되므로, 볼 것 하나를 온전히 내주는 편이 낫다.
		*/
		width:auto; max-width:none; max-height:100%;
		border-right:0; border-top:1px solid #dcdcdc; border-radius:14px 14px 0 0;
		box-shadow:0 -4px 16px rgba(0,0,0,.16); z-index:6;
		transform:translateY(calc(100% - 46px)); transition:transform .22s ease;}
	.tsSplitList.sheetOn{transform:none;}
	.tsSheetGrip{display:flex; align-items:center; justify-content:center; gap:6px;
		flex:none; width:100%; height:46px; padding:0; border:0; background:transparent;
		font-size:13px; font-weight:700; color:#222; cursor:pointer;}
	.tsSheetGrip .tsSheetGripIcon{font-size:20px;}
	/* 닫혀 있는 동안에는 안쪽이 스크롤되지 않게 - 손가락이 시트를 스치면 목록이 흘러갔다 */
	.tsSplitList:not(.sheetOn) .tsListScroll{overflow:hidden;}

	/*
		시트가 올라와 있는 동안에는 검색줄을 감춘다 (2026-09-11).
		이 폭에서 검색줄은 지도 **위에 떠 있고**(position:absolute, z-index 60) 시트는 그
		아래(6)다. 시트가 화면을 다 덮으면 검색줄만 그 위에 남아 카드 첫 두 장을 가린다(실측).
		가릴 바에는 감춘다 - 어차피 검색줄이 얹혀 있던 지도가 안 보인다. 기존 RPAZ 도
		목록 화면에는 검색줄이 없다. 시트 맨 위 [지도 보기] 를 누르면 지도와 함께 돌아온다.
	*/
	/*
		`display:none` 이 아니라 `visibility:hidden` 인 까닭 (2026-09-11 실측으로 잡았다).
		감추면 검색줄이 자리에서 빠지고, 그 여파로 지도가 relayout 되면서 `tsMap:geo` 가 튄다 -
		목록이 통째로 다시 조회되어 시트를 열 때마다 3초쯤 빈칸이 됐다(실측: 카드 20 → 0 → 20).
		자리는 그대로 두고 보이기만 감추면 아무것도 움직이지 않는다.
		숨겨진 요소는 눌리지도, 탭 차례에 들지도 않는다.
	*/
	body.tsSheetOn #tsBox.tsMapMode .tsBar{visibility:hidden;}
	/*
		상세검색 칸도 함께 감춘다 (2026-09-15 제보 - "슬라이드를 올리면 그 위에 나타난다").
		.tsAdvBox 는 접힘을 다루느라 제 스스로 `visibility:visible` 을 들고 있는데,
		자식이 visible 을 명시하면 부모의 hidden 을 **이긴다**. 그래서 검색줄은 사라졌는데
		펼쳐 둔 조건칩만 시트 위에 떠 있었다. 여기서 한 번 더 감춰야 한다.
	*/
	body.tsSheetOn #tsBox.tsMapMode .tsAdvBox{visibility:hidden;}

	/*
		푸터를 감춘다 (2026-09-11 요청 - 기존 RPAZ 모바일 화면과 같은 모습).
		이 폭에서 지도 모드는 '한 화면에 지도 하나' 다. 그 아래에 푸터가 따라 나오면
		시트 손잡이가 화면 아래끝이 아니라 지도 아래끝에 걸리고, 손잡이를 보려고
		페이지를 한 번 굴려야 한다 - 손안에서는 그 한 번이 곧 못 찾는 것이다.
		[목록] 으로 나가면(tsMapPage 가 떨어진다) 푸터는 그대로 돌아온다.
		높이를 맞추는 fitMap() 도 이때는 푸터 대신 지도 아래끝을 화면 아래끝에 맞춘다.
	*/
	body.tsMapPage #footer{display:none;}

	/*
		시트 안의 카드는 화면 폭을 다 쓴다 (2026-09-11 요청).
		여기까지는 좌우 분할과 같은 규칙을 물려받아 280px 로 묶여 있었다 - 390px 화면에서
		양옆 38px 씩이 빈 채로 남고, 그만큼 제목·주소가 일찍 … 로 끊겼다.
		폭을 다 내주고, 카드 안은 **모바일 기존 카드 그대로** 사진 왼쪽 / 내용 오른쪽이다
		(그 배치는 sub_responsive.css 의 ≤1000px 규칙이 이미 하고 있다 - 여기서는 카드를
		 280px 로 묶어 두던 것만 풀면 된다).
		칸 사이 여백 대신 아래 실선으로 나눈다 - 폭을 꽉 채운 줄에는 그편이 목록으로 읽힌다.
	*/
	/* 시트에서는 칸 폭이라는 것이 없다 - 접는다는 것도 뜻이 없어 손잡이를 감춘다
	   (필지정보 쪽도 같은 이유로 .lspFold 를 데스크탑에서만 보인다) */
	.tsPaneFold{display:none;}
	.tsSplit .tsGalWrap{padding:0;}
	.tsSplit .tsGalWrap .groupItem_list ul{grid-template-columns:1fr; gap:0; justify-content:stretch;}
	.tsSplit .tsGalWrap .groupItem_list ul li,
	.tsSplit .tsGalWrap .groupItem_list ul li:nth-child(5n+5){
		max-width:none; margin:0; padding:10px 12px; border-radius:0;
		border-bottom:1px solid #e3e4e9;}
}

/* 필지정보 모드는 두 칸을 통째로 쓴다 - 그때 왼쪽은 필지목록이 맡는다 */
body.tsLandOn .tsSplitList{display:none;}

.tsMapWrap{position:relative;}
.tsMap{width:100%; height:calc(100vh - 240px); min-height:420px; background:#f3f4f9;}
.tsMap .tsEmpty{padding:140px 20px;}
/*
	반경·영역을 그리는 동안은 화살표 (2026-09-15 요청).
	카카오가 지도 안쪽 요소에 제 커서(grab)를 인라인으로 박으므로 !important 로 덮는다.
	공식 통로인 map.setCursor 가 먼저 돌고, 이건 그것이 없는 판을 위한 받침이다.
*/
.tsMap.tsDrawing, .tsMap.tsDrawing *{cursor:default !important;}
/* 그린 영역 위에 적는 반경·넓이 (2026-09-15 요청) */
.tsGeoLabel{display:inline-block; padding:2px 8px; border-radius:11px; background:rgba(49,57,66,.92);
	color:#fff; font-size:12px; font-weight:700; white-space:nowrap; line-height:18px;
	box-shadow:0 1px 3px rgba(0,0,0,.25); pointer-events:none;}
/*
	영역마다 붙는 닫기 아이콘 (2026-09-15 요청).
	도형을 눌러 지우던 방식은 지도를 살피다 무심코 눌러 조건이 사라질 위험이 있었다.
*/
.tsGeoClose{display:flex; align-items:center; justify-content:center; width:24px; height:24px;
	/* 지우는 단추는 붉은색이다 (2026-09-15 요청) - 나머지 전역 단추(.btn.b_red)와 같은 빨강 */
	padding:0; border:2px solid #fff; border-radius:50%; background:#c12323; color:#fff;
	cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.35);}
.tsGeoClose:hover{background:#a01818;}

/*
	그린 영역의 표시를 켜고 끄는 줄 (2026-09-15 요청).
	지도 아래쪽에 겹쳐 둔다 - 자리를 차지하면 지도 높이 계산(fitMap)이 다시 흔들린다.
	가운데 정렬이라 [축소/확대] 같은 오른쪽 도구와 겹치지 않는다.
*/
.tsShowBar{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:4;
	display:flex; gap:6px; padding:5px 6px; border-radius:20px; background:rgba(255,255,255,.94);
	box-shadow:0 2px 8px rgba(0,0,0,.2);}
.tsShowBar[hidden]{display:none;}
.tsShowBar button{height:26px; padding:0 12px; border:1px solid #c5c8cf; border-radius:13px;
	background:#fff; font-size:12px; font-weight:700; color:#787878; cursor:pointer; white-space:nowrap;}
.tsShowBar button.on{border-color:#2b77f8; background:#2b77f8; color:#fff;}
.tsShowBar button[hidden]{display:none;}
.tsGeoClose .material-symbols-outlined{font-size:16px; line-height:1;}

/*
	낱개 표식 (2026-09-15 요청) - 동그라미 안에 금액정보 건수.
	색은 지도 단추와 같은 파랑(#2b77f8)이다 - 지역묶음 핀(icon-marker-name.png, #6b99dc)보다
	진해서, 같은 화면에 둘이 섞여도 '묶음이냐 낱개냐' 가 색으로 갈린다.
	꼬리는 CSS 삼각형이다. yAnchor:1 이라 꼬리 끝이 좌표에 닿는다.
*/
.tsPin{position:relative; pointer-events:auto;    /* 감싸는 div 는 뚫려 있다 - 여기서 다시 받는다 */
	display:flex; align-items:center; justify-content:center;
	width:34px; height:34px; margin-bottom:7px; padding:0; border:2px solid #fff; border-radius:50%;
	background:#2b77f8; color:#fff; font-size:13px; font-weight:700; line-height:1;
	box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer;}
.tsPin::after{content:''; position:absolute; left:50%; top:100%; margin-left:-5px;
	border:5px solid transparent; border-top-color:#fff; border-bottom:0;}
.tsPin:hover{background:#0c4fa2;}
/*
	반경·영역을 그리는 동안에는 표식이 클릭을 가로채면 안 된다 (2026-09-15 실측으로 잡았다).
	표식이 이제 DOM 단추라, 그 위에서 찍은 점은 지도에 닿지 않아 도형이 그려지지 않았다
	(회귀 geo4·geo5 가 통째로 빨간불이 났다). 커서를 바꾸는 .tsDrawing 을 그대로 쓴다.
*/
.tsMap.tsDrawing .tsPin{pointer-events:none;}

/* 영역 밖 매물 - 흐리게, 누를 수 없게 (다음 영역을 어디에 그릴지 가늠하라고 둔다) */
.tsPinDim{opacity:.3; cursor:default; box-shadow:none;}
.tsPinDim:hover{background:#2b77f8;}

/*
	고른 매물 (2026-09-28 요청) - 목록 카드를 눌렀거나 매물상세 [큰지도보기] 로 온 매물.
	주변 표식 사이에서 한눈에 갈리도록 색과 크기를 함께 바꾼다(색만 바꾸면 색약에게 안 보인다).
	꼬리 삼각형은 흰색 그대로 둔다 - 좌표를 가리키는 끝은 다른 표식과 같아야 한다.
*/
.tsPin.tsPinSel{width:42px; height:42px; background:#f5532d; border-width:3px; font-size:14px;
	box-shadow:0 0 0 4px rgba(245,83,45,.28), 0 2px 6px rgba(0,0,0,.4);}
.tsPin.tsPinSel:hover{background:#d8401c;}

/* 지도에서 고른 매물의 목록 카드·행 - 표식과 같은 색 */
.tsCard.tsSel{outline:3px solid #f5532d; outline-offset:-3px; border-radius:6px;}
.tsRow.tsSel > td{background:#fff1ec;}

/*
	말풍선의 거래유형 줄 (2026-09-15 요청) - '매매 2건' 을 누르면 그 매물의 상세가 열린다.
	한 줄이 통째로 단추다 - 손가락으로도 눌러야 하고, 어디를 눌러야 하는지 헷갈리면 안 된다.
*/
.tsIwWait{margin:6px 0 0; font-size:12px; color:#999;}
.tsIwList{margin:6px 0 0; padding:0; list-style:none; border-top:1px solid #e3e4e9;}
.tsIwList li + li{border-top:1px solid #f0f0f0;}
.tsIwRow{display:flex; align-items:center; gap:6px; width:100%; height:30px; padding:0 2px;
	background:none; border:0; font-size:13px; color:#313942; cursor:pointer; text-align:left;}
.tsIwRow:hover{color:#2b77f8;}
.tsIwRow > span{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* 건수가 이 줄의 요점이다. 바깥 .tsMapIw em 의 초록을 물려받지 않도록 여기서 정한다 */
.tsIwRow > em{flex:none; display:inline; margin:0; font-style:normal; font-weight:700; color:#2b77f8;}
.tsIwRow > i{flex:none; font-size:16px; color:#c5c8cf;}
.tsIwRow:hover > i{color:#2b77f8;}

/* 매물 말풍선의 닫기 (2026-09-15 요청) */
.tsIwClose{position:absolute; top:4px; right:4px; display:flex; align-items:center;
	justify-content:center; width:24px; height:24px; padding:0; border:0; border-radius:50%;
	background:none; color:#c12323; cursor:pointer;}
.tsIwClose:hover{background:#faefef; color:#a01818;}
.tsIwClose .material-symbols-outlined{font-size:18px; line-height:1;}

.tsMapNotice{position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:5;
	max-width:calc(100% - 40px); padding:8px 14px; background:rgba(49,57,66,.92); color:#fff;
	border-radius:16px; font-size:12px; line-height:1.4; text-align:center;}
.tsMapNotice.err{background:rgba(193,35,35,.92);}

.tsMapIw{position:relative; min-width:160px; padding:8px 32px 8px 10px; font-size:12px; line-height:1.5;}
.tsMapIw b{display:block; font-size:13px; color:#222;}
.tsMapIw span{display:block; color:#999;}
/*
	예전에는 말풍선에 '매물 N건' 한 줄만 있었고 이 규칙이 그 줄을 칠했다.
	2026-09-15 부터는 거래유형별 줄(.tsIwRow)이 그 자리를 대신하므로, 그 줄 안의 건수는
	건드리지 않는다 - 안 그러면 나중에 선언된 이 줄이 위의 .tsIwRow > em 을 덮는다(실측).
*/
.tsMapIw em:not(.tsIwRow em){display:block; margin-top:2px; font-style:normal;
	color:#2b77f8; font-weight:700;}

@media screen and (max-width:768px){
	.tsMap{height:calc(100vh - 200px); min-height:320px;}
}

.tsMapInfo{position:absolute; top:10px; left:12px; z-index:5; padding:5px 10px;
	background:rgba(255,255,255,.94); border:1px solid #dcdcdc; border-radius:14px;
	font-size:12px; color:#555;}

/* ── 지도 도구줄 ─────────────────────────────────────── */
/*
	[목록] 전환 버튼 아래로 세로로 세운다 (2026-09-08 요청).
	2026-09-09 부터 여섯 묶음이다 - 지도배경 / 지적 / 확대축소 / 로드 / 영역 / 필지.
	묶음끼리는 사이를 벌리고 묶음 안은 붙여, 무엇이 한 벌인지 눈으로 갈리게 한다.
*/
.tsMapTools{position:absolute; top:10px; right:12px; z-index:5;
	display:flex; flex-direction:column; align-items:stretch; gap:10px; min-width:68px;}
.tsToolGrp{display:flex; flex-direction:column; gap:1px; border-radius:15px; overflow:hidden;
	box-shadow:0 1px 4px rgba(0,0,0,.15);}
.tsMapTools button{display:flex; align-items:center; justify-content:flex-start; gap:6px;
	width:100%; height:32px; padding:0 10px; background:rgba(255,255,255,.95);
	border:0; font-size:12px; color:#333; cursor:pointer;}
/* 자식이 flex 항목이라 hidden 이 눌리는 일이 없도록 못을 박는다 */
.tsMapTools button[hidden]{display:none;}
.tsMapTools button + button{border-top:1px solid #e3e4e9;}
.tsMapTools button:hover{background:#f3f4f9; color:#2b77f8;}
.tsMapTools button.on{background:#2b77f8; color:#fff; font-weight:700;}
.tsMapTools .material-symbols-outlined{font-size:18px; flex:none;}
/*
	도구줄 글자 (2026-09-09 요청).
	이름을 모두 두 글자로 맞췄으므로(2026-09-10 요청) 글자칸도 2em 으로 고정하고
	한 자씩 좌우로 벌린다 - [일 반] 처럼 서고, 세로로 선 단추들의 글자 끝이 한 줄로 맞는다.
	예전에는 가장 긴 이름([토지정보])에 칸을 맞추느라 4em 이었고, 그만큼 지도를 더 가렸다.
	글자를 <i> 로 쪼개 flex 로 벌린다(각 파일의 btn/tbtn). text-align-last:justify 는
	크롬이 한글 한 낱말에 먹이지 않아 실측에서 그대로 왼쪽에 몰렸다.
	reset.css 의 i{margin:0 3px} 도 지워야 한다 - 그대로면 긴 이름이 칸 밖으로 삐져나간다.
*/
.tsToolTxt{white-space:nowrap; display:flex; justify-content:space-between; width:2em;}
.tsToolTxt i{margin:0; font-style:normal;}

/* 로드뷰 - 지도 위를 통째로 덮는다 */
.tsRvWrap{position:absolute; inset:0; z-index:8; background:#000;}
.tsRvWrap[hidden]{display:none;}
.tsRv{width:100%; height:100%;}
.tsRvClose{position:absolute; top:10px; right:12px; z-index:9; display:flex; align-items:center;
	justify-content:center; width:34px; height:34px; padding:0; background:rgba(255,255,255,.95);
	border:1px solid #c5c8cf; border-radius:17px; color:#333; cursor:pointer;}
.tsRvClose:hover{border-color:#2b77f8; color:#2b77f8;}

/*
	좁은 화면에서는 아이콘만 남긴다 - 여섯 묶음이 글자까지 달고 서면 지도를 다 먹는다.
	(이 규칙은 위 기본값보다 파일에서 뒤에 있어야 이긴다 - 같은 선택자다.)
*/
@media screen and (max-width:1000px){
	.tsMapTools{min-width:0; gap:8px; align-items:flex-end;}
	.tsMapTools .tsToolTxt{display:none;}
	.tsMapTools button{justify-content:center; width:34px; height:32px; padding:0;}
	.tsMapTools .material-symbols-outlined{font-size:19px;}
	.tsToolGrp{width:34px;}
}

.tsMapGuide{position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:5;
	max-width:calc(100% - 40px); padding:8px 14px; background:rgba(49,57,66,.92); color:#fff;
	border-radius:16px; font-size:12px; text-align:center;}

/* 그리는 중 [완료] - 손가락에는 더블클릭이 없어 영역을 끝낼 길이 이것뿐이다 */
.tsGuideDone{margin-left:10px; height:26px; padding:0 12px; background:#2b77f8; border:0;
	border-radius:13px; color:#fff; font-size:12px; font-weight:700; cursor:pointer; pointer-events:auto;}
.tsGuideDone:hover{background:#0c4fa2;}
/* .tsGeoTag - 목록 머리줄의 영역 배지는 뺐다(2026-09-08). 지역 칩이 같은 말을 한다 */

/* ── 등록자 선택 ─────────────────────────────────────── */
.tsWhoList{display:flex; flex-wrap:wrap; gap:6px; max-height:170px; overflow-y:auto; margin-bottom:14px;}
.tsWhoList .tsOpt{height:30px; padding:0 10px; font-size:13px;}
.tsWhoList .tsOpt b{color:#333; font-weight:700; margin-left:3px;}
.tsPill[data-pill="who"] .tsPillPanel{min-width:320px;}
.tsPanelNote.tsError{color:#c12323;}

/* ── 필지정보 모드 (2026-09-09, 2026-09-10 이름 변경) ───────────────────────── */
/*
	첫 페이지의 토지 모드를 이 화면 안으로 들였다. 목록 패널의 생김새는 land-select.css 것을
	그대로 쓰고, 여기서는 '자리' 만 다시 잡는다 - 저쪽은 매물목록 자리에 끼우지만
	여기서는 지도 위에 얹기 때문이다.
*/
.tsLandWrap{position:absolute; inset:0; z-index:7;}
.tsLandWrap[hidden]{display:none;}

/* 카카오 지도는 뒤에 그대로 두고 가린다 - 나갈 때 그 자리를 이어받는다 */
body.tsLandOn #tsMap{visibility:hidden;}
/* 매물검색용 검색줄·도구줄·안내는 토지 모드에서 할 일이 없다 */
body.tsLandOn #tsBar,
body.tsLandOn #tsMapTools:not(.tsLandTools),
body.tsLandOn #tsMapInfo,
body.tsLandOn #tsMapNotice{display:none !important;}

#tsLandWrap #landOlMap{z-index:1;}

/* 목록 패널 - 지도 왼쪽에 붙인다 (첫 페이지는 매물목록 자리에 끼운다) */
#tsLandWrap .landSelectSide{position:absolute; left:0; top:0; bottom:0; float:none;
	width:300px; height:auto; z-index:3; box-shadow:2px 0 8px rgba(0,0,0,.12);}
body.tsLandFold #tsLandWrap .landSelectSide{width:0;}
/*
	필지목록을 접을 때도 푸터를 함께 접는다 (2026-09-17 요청) - 갤러리 칸과 같은 규칙이다.
	여기서도 [접기] 는 '지도를 크게 보겠다' 는 뜻이라 폭만 내주면 반만 들어준 셈이 된다.
	높이를 다시 재는 일은 trading-search-land.js 의 toggleFold 가 tsMapApi.fit() 으로 부른다.
*/
body.tsMapPage.tsLandFold #footer{display:none;}
body.tsLandFold #tsLandWrap .landSelectSide > *:not(.lspFold){display:none;}

/*
	토지 모드의 지역 칩 자리.
	목록 패널(300px) 오른쪽에 붙여 지도 왼쪽 위에 세운다. 패널을 접으면 그 자리로 당겨 온다.
*/
.tsLandTop{position:absolute; top:10px; left:316px; z-index:4; display:flex; gap:6px;}
body.tsLandFold .tsLandTop{left:12px;}
/*
	토지 모드에서도 패널 아래 단추는 남긴다.
	예전의 [○○ 지도로 보기] 는 여기서 감췄었다 - 고르는 즉시 지도가 그리로 가고 경계까지
	그리므로 한 번 더 누르라고 할 일이 없었기 때문이다.
	지금 그 자리는 [시군구]/[읍면동] 이라 뜻이 아주 다르다 - 감추면 토지 모드에서는
	크럼 말고 아래 단계로 내려갈 길이 없어진다 (2026-09-09).
*/

/* 되돌아가기 - [지도]/[목록] 전환 단추와 같은 모양이되 패널 머리줄에 맞게 조금 작다 */
.tsLandBack{height:28px; padding:0 12px; font-size:12px;}
.tsLandBack .material-symbols-outlined{font-size:16px;}

/*
	패널 머리줄의 단추들 (2026-09-09 요청).
	land-select.css 가 물려주는 것은 style.css 의 .btn.th - 높이 20px 에 각진 회색 테두리라,
	같은 화면의 [지도모드]·[완료]·[비교] 같은 둥근 단추들 사이에서 혼자 옛날 화면처럼 보였다.
	여기서만 다시 그린다(#tsLandWrap 로 묶었다) - 첫 페이지의 같은 패널은 그대로 둔다.
	높이 26px · 알약 모양 · 아이콘+글자로 통일하고, 손댈 수 없는 상태는 통째로 흐리는 대신
	바탕을 눌러 '지금은 담긴 게 없다' 를 말하게 했다.
*/
#tsLandWrap .jibunIn_list_tit .btn,
#tsLandWrap .lspAreaRow .btn{
	display:inline-flex; align-items:center; justify-content:center; gap:3px;
	min-width:0; height:26px; line-height:1; padding:0 10px; margin:0;
	background:#fff; border:1px solid #dcdcdc; border-radius:13px;
	font-size:12px; font-weight:500; color:#555; white-space:nowrap;
	transition:background .12s, border-color .12s, color .12s;
}
/* .btn.th span{font-size:14px} 를 덮는다 - 그대로 두면 알약 안에서 아이콘만 커 보인다 */
#tsLandWrap .jibunIn_list_tit .btn .material-symbols-outlined,
#tsLandWrap .jibunIn_list_tit .btn .material-icons-outlined,
#tsLandWrap .lspAreaRow .btn .material-symbols-outlined,
#tsLandWrap .lspAreaRow .btn .material-icons-outlined{font-size:15px; line-height:1;}
/*
	필지 모드의 단추는 **그 화면이 이미 쓰는 색**을 따른다 (2026-09-15 요청).
	#425470 은 필지 목록의 번호 꼬리표(.lsiLock) 배경이자, 지도 조작 단추의 켜짐 색이다
	(land-select.css 의 .lhBtn.off · .lmtBtn.on, kakao_map.css 의 .kakao_selected_btn).
	[초기화] 만 빨강 그대로다 - 되돌리는 일이라 뜻이 다르다.
*/
#tsLandWrap .jibunIn_list_tit .btn:hover:not(:disabled),
#tsLandWrap .lspAreaRow .btn:hover:not(:disabled){background:#f3f4f9; border-color:#425470; color:#425470;}
#tsLandWrap .jibunIn_list_tit .btn:active:not(:disabled),
#tsLandWrap .lspAreaRow .btn:active:not(:disabled){background:#e3e4e9;}
/*
	담긴 것이 없어 쓸 수 없는 [복사]·[다운로드].
	예전에는 opacity:.4 로 통째로 흐렸는데, 그러면 글자까지 읽히지 않아
	무슨 단추인지도 모른 채 흐릿한 덩어리만 남는다.
	읽히되 눌리지 않아 보이도록 바탕과 글자색만 바꾼다.
*/
#tsLandWrap .lspAreaRow .btn:disabled{
	opacity:1; background:#f4f5f7; border-color:#e3e4e9; color:#999; cursor:default;
}

/*
	[초기화] - 지우는 단추다. 나머지는 초록으로 물들지만 이것만 붉게 둔다.
	(위의 :hover 규칙보다 셈이 세야 하므로 같은 자리까지 다 적는다)
*/
#tsLandWrap .lspClear.noShow{display:none;}
#tsLandWrap .jibunIn_list_tit .lspClear:hover:not(:disabled){background:#faefef; border-color:#c12323; color:#c12323;}
#tsLandWrap .jibunIn_list_tit .lspClear:active:not(:disabled){background:#fb9595;}

/* 담긴 것이 없을 때는 안내줄을 감춘다 - 빈 목록 자리가 같은 말을 이미 하고 있다 */
#tsLandWrap .lspGuide.noShow{display:none;}

/* 면적 단위 - 지금 어느 단위인지가 글자다. 아이콘보다 그쪽을 굵게 둔다 */
#tsLandWrap .unitChange em{font-style:normal; font-weight:700; font-size:12px;}

/* [도로·구거·… 해제] - 남는 폭을 갖는 성질은 그대로 두고 모양만 나머지와 맞춘다 */
#tsLandWrap .lspExcludeBtn.on{
	height:26px; padding:0 10px; border-radius:13px; border-color:#fb9595;
	font-size:12px; line-height:1;
}
#tsLandWrap .lspExcludeBtn.on:hover{background:#faefef; border-color:#c12323;}

.tsLandTools{z-index:4;}
/*
	글자칸은 매물검색 도구줄과 같다 (2026-09-10) - 두 모드의 이름이 모두 두 글자라
	따로 좁힐 것이 없어졌다. 예전에는 [지적도] 세 글자 때문에 3em 으로 따로 잡았다.
*/
.tsLandGuide{z-index:5;}

@media screen and (max-width:1000px){
	/*
		좁은 화면에서는 아래에서 올라오는 시트다 - 머리줄을 누르면 오르내린다.

		2026-09-11 요청 - 올리면 **화면을 채운다** (매물목록 시트와 같다).
		예전에는 '지도를 보면서 목록을 훑으라' 고 60% 로 묶었는데, 이 폭에서는 둘을 함께 보는 것이
		애초에 안 되고 중간에 걸려 '올리다 만' 것처럼 보였다. 게다가 높이가 내용만큼이라
		필지가 한둘이면 더 낮게 멈췄다(실측 1필지 321px). 그래서 max-height 가 아니라 height 다 -
		목록(.jibun_list_box)이 남는 높이를 먹고 그 안에서만 스크롤한다(land-select.css).
	*/
	#tsLandWrap .landSelectSide{left:0; right:0; top:auto; bottom:0; width:auto;
		border-right:0; border-top:1px solid #dcdcdc; border-radius:14px 14px 0 0;
		box-shadow:0 -4px 16px rgba(0,0,0,.16);}
	#tsLandWrap .landSelectSide.sheetOn{height:100%; max-height:100%; border-radius:0;}
	#tsLandWrap .landSelectSide:not(.sheetOn){max-height:40px; overflow:hidden;}

	/*
		시트가 올라와 있는 동안 지도 위에 떠 있는 것들을 감춘다.
		도구줄(4)·지역선택(4)은 시트(3)보다 위라 그대로 두면 목록 위에 얹힌다 - 매물목록 시트에서
		검색줄을 감춘 것과 같은 까닭이다. visibility 라 자리는 그대로다(지도가 흔들리지 않는다).
	*/
	body.tsLandSheet .tsLandTools,
	body.tsLandSheet .tsLandTop,
	body.tsLandSheet .tsLandGuide{visibility:hidden;}

	/*
		[면적]·[번호] 단추(.landHideBtn)를 닫힌 시트 머리(40px) 위로 올린다 (2026-09-11 제보).
		land-select.css 의 bottom:14px 는 첫 페이지 자리라, 여기서는 시트 머리가 그 위를 덮어
		필지를 골라도 단추가 보이지 않았다(실측: 두 단추 자리의 맨 위가 .lspHead).
		그 위에 서는 안내줄·범례도 같은 만큼 올린다 - 단추 줄 바로 위라는 차례를 지킨다.
		  단추 줄   40(시트 머리) + 10
		  안내·범례 단추 줄 + 28(단추 높이) + 8
	*/
	#tsLandWrap .landHideBtn{bottom:50px;}
	#tsLandWrap .landDrawGuide{bottom:86px;}
	#tsLandWrap .landLegendPop{bottom:88px; max-height:calc(100% - 210px);}
	#tsLandWrap .lspFold{display:none;}
	#tsLandWrap .lspHead{cursor:pointer;}
	/* 좁은 화면에서는 목록이 아래 시트라 왼쪽 위가 통째로 빈다 */
	.tsLandTop{left:12px;}
}

/*
	리스트형 열 너비 (2026-09-09 요청 - 셋째 판. 지금 검색된 내용을 보고 정한다).

	폭을 정하는 것은 이제 JS 다 (trading-search-filter.js 의 fitCols).
	표를 그릴 때마다 그 쪽에 담긴 글을 재서 열마다 최소(머리글·중앙값)·기본(90분위)·최대(최대값)를
	뽑고, 남으면 여유 있는 열에 나눠 준 뒤 [제목] 이 갖고, 모자라면 비례해서 줄인다.

	**고정너비 열과 변동 열을 여기서 가른다.**
	  · 폭이 px 하나로 적힌 열(선택·관심·구분) = 고정. JS 는 이 열들을 재지도 건드리지도 않고,
	    이 값을 그대로 읽어 셈에만 넣는다. 폭을 바꾸려면 여기만 고치면 된다.
	  · clamp 로 적힌 열 = 변동. 아래 값은 JS 가 아직 못 잰 첫 그림용 밑값이다
	    (JS 가 곧바로 인라인 폭으로 덮는다). 실측 90건의 분포 언저리로 잡아 두었다.

	table-layout 은 fixed 다. auto 에서는 남는 폭을 열마다 비율로 나눠 줘서 정해 준 폭이 지켜지지 않는다
	(실측: 40px 자리인 [선택] 이 1600px 화면에서 57px 이 됐다).
	[제목] 만 밑값에서 폭을 비워 둔다 - JS 가 없을 때도 남는 자리를 가질 열이 하나는 있어야 한다.
*/
.tsTableBox table{table-layout:fixed; width:100%; min-width:994px;}
/*
	공개 화면은 [관심]·[구분]·[진행상황]·[전속/일반] 네 열이 빠진다 (2026-09-10 요청).
	그만큼(46+44+66+46=202px) 최소 폭도 줄여야 한다 - 안 줄이면 좁은 화면에서
	있지도 않은 열 자리 때문에 가로 스크롤이 남는다.
*/
.tsTableBox.tsPub table{min-width:792px;}
.tsTableBox th, .tsTableBox td{box-sizing:border-box; overflow:hidden;}

/* 고정너비 열 - JS 가 건드리지 않는다 */
.tsTableBox col.cSel {width:40px;}
.tsTableBox col.cLike{width:46px;}
/* cKind·cExc 는 2026-09-14 에 [관심]·[진행상황] 으로 각각 묶여 더는 그려지지 않는다 */
/* 변동 열 - 첫 그림용 밑값 */
.tsTableBox col.cAprv{width:clamp( 66px,  5.1vw,  96px);}
.tsTableBox col.cType{width:clamp( 66px,  5.1vw, 110px);}
.tsTableBox col.cAmt {width:clamp( 51px,  3.9vw, 130px);}
.tsTableBox col.cArea{width:clamp(145px, 11.2vw, 180px);}
/* col.cName(제목) 은 일부러 비워 둔다 - 남는 자리를 갖는 열이다 */
.tsTableBox col.cBldg{width:clamp( 92px,  7.1vw, 190px);}
.tsTableBox col.cDong{width:clamp( 56px,  4.3vw, 140px);}
.tsTableBox col.cUser{width:clamp( 53px,  4.1vw, 100px);}
.tsTableBox col.cDate{width:clamp( 84px,  6.5vw, 100px);}

/*
	열 폭을 재는 자리. 화면 밖에 표를 한 벌 복제해 놓고 재고 곧바로 비운다.
	.tsTableBox 를 함께 걸어 두는 이유는 글꼴·여백까지 같은 조건으로 재기 위해서다.
	  .tsMz  - 칸 속을 감싼 상자. 줄바꿈을 막아 '한 줄로 담기는 폭'을 얻는다.
	  .tsMzH - 머리글. 접힌 채(min-content) 재야 '두 줄이 되어도 담기는 폭'이 나온다.
*/
.tsColMeasure{position:absolute; left:-99999px; top:0; width:6000px;
	visibility:hidden; pointer-events:none;}
.tsColMeasure table{table-layout:auto !important; width:auto !important; min-width:0 !important;}
.tsColMeasure th, .tsColMeasure td{white-space:nowrap !important;}
.tsColMeasure .tsMz{display:inline-block;}
/* 두 번째 재기 - 여기서 더 줄이면 글이 잘리는 폭(min-content) */
.tsColMeasure.tsMzMin th, .tsColMeasure.tsMzMin td{white-space:normal !important;}
.tsColMeasure.tsMzMin .tsMz{width:min-content;}
.tsColMeasure .tsMzH{display:inline-block; width:min-content;
	white-space:normal !important; word-break:keep-all;}

/*
	칸 안 여백을 줄인다. 공용 표(.basicTable.list)의 좌우 8px 씩은 폭이 정해진 열에서는 사치다 -
	[진행상황] 65px 에 '계약가능' 네 글자가 안 들어가 '계약가 / 능' 으로 끊겼다.
	낱말 안에서는 자르지 않는다(keep-all). 그래도 안 들어가면 줄을 바꾼다.
*/
/* 낱말 안에서는 자르지 않되(keep-all), 그러다 칸을 넘길 지경이면 그때는 자른다 -
   띄어쓰기 없는 긴 이름 하나가 overflow:hidden 에 잘려 사라지는 것보다 낫다 */
/* '.basicTable.list tbody td{padding:8px}' 를 이겨야 한다 - 클래스를 하나 더 얹어 앞선다.
   이걸 빼먹은 동안 좌우 8px 씩이 그대로 살아 있어, 열마다 8px 을 글 대신 여백이 쓰고 있었다 */
.tsTableBox .basicTable.list tbody td{padding:8px 4px; word-break:keep-all; overflow-wrap:anywhere;}
/*
	공용 표는 머리글에 line-height:52px 를 준다 - 한 줄일 때의 높이다.
	줄이 바뀌면 그 52px 이 줄 사이 간격이 되어 글자가 멀찍이 떨어진다. 여기서만 되돌린다.
*/
.tsTableBox .basicTable.list thead th{white-space:normal; word-break:keep-all;
	line-height:1.35; padding:10px 4px;}


/*
	관심매물 (2026-09-09 요청).
	하트 자체는 전역 CSS 의 i.like_list 를 그대로 쓴다 - 전체물건 검색과 같은 그림이어야
	같은 뜻으로 읽힌다. 여기서는 자리와 손맛만 잡는다.
*/
/* 칸 전체가 관심 단추다 (2026-09-17 요청) - 누를 수 있는 자리임을 손모양·옅은 바탕으로 알린다 */
.tsLikeCol{text-align:center; cursor:pointer;}
.tsLikeCol:hover{background:#faefef;}
/*
	[관심/구분] 은 하트 아래에 구분(기본/호층/그룹)이 붙는다 (2026-09-14 요청).
	46px 밖에 안 되는 좁은 칸이라 글자를 한 치수 줄이고 줄바꿈을 막는다 -
	'호층' 두 글자가 두 줄로 갈리면 알아보기 어렵다.
*/
.tsTdKind{margin:2px 0 0; font-size:12px; color:#555; white-space:nowrap;}
.tsLike{position:relative; cursor:pointer; line-height:1;}
.tsLike.tsLikeWait{opacity:.45; pointer-events:none;}   /* 서버에 물어보는 동안은 두 번 눌리지 않게 */
/* 갤러리 카드 위의 하트 - 카드 오른쪽 위 (전체물건 갤러리와 같은 자리) */
.tsGalLike{position:absolute; top:6px; right:8px; z-index:2;}
.tsGalLike .tsLike::before{font-size:22px; text-shadow:0 1px 3px rgba(0,0,0,.35);}
.tsCard{position:relative;}

/* 사용승인 년월과 몇 년차인지 - 건물명 아래 한 줄 */
/* 사용승인일·연차 (2026-09-09 요청 - 한 단계 올림).
   11px/#999 은 너무 흐려 읽히지 않았다. 크기는 면적의 평수(.tsPy)와 같은 12px,
   색은 #666 - 팔레트의 다음 단계(#787878)는 4.42:1 로 본문 기준(4.5:1)에 못 미쳐,
   흰 바탕에서 그 기준을 넘는 가장 옅은 회색으로 한 칸만 더 내렸다 (4.54:1) */
.tsTdAge{margin:2px 0 0; font-size:12px; color:#666; white-space:nowrap;}
.tsCard .tsTdAge{display:inline-block; margin-left:4px;}

/* ── 비교표 ──────────────────────────────────────────── */
/*
	[매물비교]·[그룹물건등록] 도 이 화면의 파랑을 쓴다 (2026-09-15 요청).
	출처는 머리줄 [중개사 검색] 의 마우스오름(style.css 의 .attention.agentSch:hover, #2b77f8).
	뒤집는 방식(아웃라인 → 채우기)은 기존 관행 그대로다 - style.css 의 .btn_greenS:hover,
	.sch_closeBtn:hover(파랑판)가 똑같이 한다. 채운 단추의 짙은 짝은 팔레트의 #0c4fa2 다.
*/
.tsCmpBtn{height:30px; padding:0 12px; background:#fff; border:1px solid #2b77f8; border-radius:4px;
	font-size:13px; color:#2b77f8; font-weight:700; cursor:pointer;}
.tsCmpBtn:hover{background:#2b77f8; color:#fff;}
.tsCmpBtn[hidden]{display:none;}
/*
	[그룹물건등록] (2026-09-15 요청) - [매물비교] 옆에 선다.
	묶어 '만드는' 일이라 테두리만 두른 [매물비교] 와 달리 채워서 눈에 먼저 들어오게 한다.
*/
.tsGrpBtn{height:30px; padding:0 12px; background:#2b77f8; border:1px solid #2b77f8;
	border-radius:4px; font-size:13px; color:#fff; font-weight:700; cursor:pointer; margin-left:6px;}
.tsGrpBtn:hover{background:#0c4fa2; border-color:#0c4fa2;}
.tsGrpBtn[hidden]{display:none;}

/*
	거래유형이 섞였을 때 하나를 고르는 버튼 (SweetAlert 안).
	[매물비교] 를 누르면 나오는 창이라 그 단추와 같은 색이어야 한다 - 혼자 초록이면
	방금 누른 단추와 다른 일처럼 보인다.
*/
.tsPickMsg{margin:0 0 14px; font-size:14px; color:#333;}
.tsPick{display:flex; flex-wrap:wrap; justify-content:center; gap:8px;}
.tsPickBtn{height:40px; padding:0 18px; background:#fff; border:1px solid #2b77f8; border-radius:20px;
	font-size:14px; font-weight:700; color:#2b77f8; cursor:pointer;}
.tsPickBtn:hover{background:#2b77f8; color:#fff;}
.tsPickBtn:hover em{color:#fff;}
.tsPickBtn em{margin-left:4px; font-style:normal; font-weight:500; font-size:12px; color:#787878;}

body.tsCmpOpen{overflow:hidden;}

.tsCmpWrap{position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; background:#fff;}

.tsCmpBar{display:flex; align-items:center; gap:12px; flex:none; height:52px; padding:0 18px;
	background:#313942; color:#fff;}
.tsCmpBar b{font-size:15px;}
.tsCmpStatus{font-size:12px; color:#c5c8cf;}
.tsCmpBtns{margin-left:auto; display:flex; gap:6px;}
.tsCmpBtns button{height:30px; padding:0 12px; background:transparent; border:1px solid #666;
	border-radius:4px; color:#fff; font-size:13px; cursor:pointer;}
.tsCmpBtns button:hover{background:rgba(255,255,255,.12);}
.tsCmpBtns button.x{border-color:#c12323; background:#c12323;}

.tsCmpBody{flex:1; display:flex; min-height:0; overflow:hidden;}

/* 왼쪽 항목명 열은 고정, 오른쪽만 가로로 흐른다 */
.tsCmpKeys{flex:none; width:130px; border-right:2px solid #dcdcdc; background:#f3f4f9; overflow:hidden;}
.tsCmpScroll{flex:1; overflow:auto;}
/*
	width:max-content 가 없으면 트랙이 스크롤 컨테이너 폭에 갇혀, 좌우 여백(padL/padR)이
	스크롤 범위(scrollWidth)에 잡히지 않는다. 그러면 아무리 밀어도 첫 열에서 안 움직인다.
*/
.tsCmpTrack{display:flex; align-items:flex-start; width:max-content;}
.tsCmpPad{flex:none;}
.tsCmpCols{display:flex; flex:none;}
.tsCmpCol{flex:none; width:190px; border-right:1px solid #ededed;}

/* 행 높이를 고정해야 항목명 열과 데이터 열의 줄이 맞는다 (JS 의 ROW_H 와 같은 값) */
.tsCmpCell{height:34px; line-height:34px; padding:0 10px; box-sizing:border-box;
	border-bottom:1px solid #f0f0f0; font-size:13px; color:#444;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tsCmpKey{font-weight:700; color:#555;}
.tsCmpHead{height:34px; line-height:34px; background:#f3f4f9; border-bottom:2px solid #c5c8cf;
	font-weight:700; color:#222;}
.tsCmpKeys .tsCmpHead{background:#dcdcdc; border-bottom-color:#c5c8cf;}
.tsCmpDash{color:#c5c8cf;}

/*
	임대 서식(2026-09-24) - 항목명이 '전용면적당 평단가(NOC)' 처럼 길어 130px 에서는 잘린다.
	데이터 열 너비(COL_W)는 건드리지 않는다 - 가상 스크롤 계산이 그 값에 걸려 있다.
*/
.tsCmpLease .tsCmpKeys{width:170px;}
/* 좁은 화면에서는 한 줄에 다 못 들어간다 - 잘라 내는 대신 두 줄로 접는다(34px 안에 들어간다) */
.tsCmpLease .tsCmpKey{white-space:normal; line-height:1.3; font-size:12px;
	display:flex; align-items:center;}

/* 사진 칸 - 높이는 JS(PHOTO_H)가 인라인으로 박는다. 여기서는 사진을 칸에 맞추는 일만 한다 */
.tsCmpCell.tsCmpPhoto{padding:4px 6px; line-height:normal; display:flex; align-items:center; justify-content:center;}
.tsCmpCell.tsCmpPhoto img{max-width:100%; max-height:100%; object-fit:cover;}

@media print{
	/* 인쇄에서는 가로 스크롤이 없다. 보이는 열만 나가는 것이 맞다 - 화면과 같은 것이 인쇄된다 */
	body.tsCmpOpen > *:not(.tsCmpWrap){display:none !important;}
	.tsCmpWrap{position:static; height:auto;}
	.tsCmpBar .tsCmpBtns{display:none;}
	.tsCmpBar{background:#fff; color:#000; border-bottom:2px solid #000;}
	.tsCmpStatus{color:#555;}
	.tsCmpBody{overflow:visible;}
	.tsCmpScroll{overflow:visible;}
}

@media screen and (max-width:768px){
	.tsCmpKeys{width:100px;}
	.tsCmpLease .tsCmpKeys{width:120px;}
	.tsCmpCol{width:160px;}
}

.tsIwBtn{margin-top:6px; width:100%; height:26px; background:#2b77f8; border:0; border-radius:4px;
	color:#fff; font-size:12px; cursor:pointer;}
.tsIwBtn:hover{background:#0c4fa2;}