*{box-sizing:border-box; margin:0px; padding:0px;}
body { margin:0; font-family:sans-serif; }
header { display:flex; justify-content:space-between; align-items:center; padding:20px; background:#222; color:#fff; }
header .logo { font-weight:bold; }
header .search-box input { padding:6px; }

#map { width:100%; height:calc(100vh - 50px); }

#listBtn {
	position:fixed; bottom:20px; right:20px;
	background:#007bff; color:#fff; padding:15px; border-radius:50%; cursor:pointer;
	z-index:10;
}

/* ====== 사이드 리스트 패널 ====== */
#estateList{
	position:fixed;
	right:0; bottom:0; top:60px;
	width:380px; max-width:95vw;
	background:#fff;
	border-left:1px solid #e5e7eb;
	box-shadow:-6px 0 16px rgba(0,0,0,.06);
	overflow-y:auto;
	transform:translateX(100%);
	transition:transform .28s ease;
	z-index:9;
}
#estateList h3{
	position:sticky; top:0;
	margin:0; padding:14px 16px;
	background:#f8fafc;
	border-bottom:1px solid #e5e7eb;
	font-size:16px; color:#111827;
}
#estateList:not(.hidden){ transform:translateX(0); }

#estateList ul{ list-style:none; margin:0; padding:10px; }
.estate-item{
	display:grid;
	grid-template-columns:100px 1fr;
	grid-gap:12px;
	padding:12px;
	border:1px solid #eef2f7;
	border-radius:12px;
	background:#fff;
	box-shadow:0 1px 2px rgba(0,0,0,.03);
	cursor:pointer;
	transition:background .2s, box-shadow .2s, border-color .2s, transform .08s;
}
.estate-item + .estate-item{ margin-top:10px; }
.estate-item:hover{
	background:#f8fbff;
	border-color:#dbeafe;
	box-shadow:0 4px 10px rgba(2,132,199,.08);
}
.estate-item.active{
	background:#e8f0ff;
	border-color:#bfdbfe;
	box-shadow:0 6px 14px rgba(29,78,216,.12);
}
.estate-thumb{
	width:100%; height:84px;
	border-radius:10px;
	background:#f3f4f6 center/cover no-repeat;
	border:1px solid #e5e7eb;
}
.estate-info{ display:flex; flex-direction:column; }
.estate-title{
	font-weight:700; font-size:16px; color:#0f172a;
	margin:2px 0 6px;
}
.estate-addr{
	color:#4b5563; font-size:13px; margin-bottom:8px;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.chip{
	display:inline-block; padding:4px 8px; font-size:12px; line-height:1;
	background:#eef2ff; color:#1e40af; border-radius:999px;
	border:1px solid #c7d2fe;
}
.chip.gray{ background:#f1f5f9; color:#334155; border-color:#e2e8f0; }
.estate-agency{
	color:#6b7280; font-size:12px;
}

/* 리스트 좌측 래퍼: 썸네일 + 별점 */
.estate-left{
	display:flex;
	flex-direction:column;
	gap:6px;
}

/* 리뷰 수 (제목 옆) */
.review-count{
	margin-left:6px;
	font-weight:600;
	font-size:12px;
	color:#475569;
}

/* 별점 */
.star-wrap{
	position:relative;
	width:100%;
	height:18px;
	line-height:18px;
	font-size:16px;
	font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}
.star-back,
.star-front{
	position:absolute;
	top:0;
	left:0;
	white-space:nowrap;
	letter-spacing:2px;
}
.star-back{
	color:#e5e7eb; /* 회색 빈 별 */
}
.star-front{
	color:#f59e0b; /* 채워진 별(노랑) */
	overflow:hidden;
	width:0;
}

/* 별점 숫자 (우측) */
.star-score{
	position:absolute;
	right:-8px;
	top:0;
	font-size:12px;
	color:#6b7280;
	letter-spacing:0;
}

/* 썸네일 높이 조정 시 별과 간격 유지 */
.estate-thumb{
	width:100%;
	height:84px;
	border-radius:10px;
	background:#f3f4f6 center/cover no-repeat;
	border:1px solid #e5e7eb;
}


/* 우측 하단 버튼 */
#listBtn{
	position:fixed; right:18px; bottom:18px;
	width:56px; height:56px; display:flex; align-items:center; justify-content:center;
	background:#2563eb; color:#fff; border-radius:50%;
	box-shadow:0 8px 20px rgba(37,99,235,.35);
	cursor:pointer; user-select:none;
	font-size:22px;
}

/* 지도 영역은 패널 너비만큼 여백(데스크톱일 때만) */
@media(min-width:1025px){
	#map{ width:calc(100% - 0px); }
	#estateList:not(.hidden) ~ #map{ width:calc(100% - 380px); }
}
/* 모바일에선 패널 높이로 전환 */
@media(max-width:768px){
	#estateList{ left:0; right:0; width:auto; top:auto; height:60%; border-left:0; border-top:1px solid #e5e7eb; }
}



.infowindow-content {
	text-align: center;
	font-size: 13px;
	padding: 5px;
	margin:0 auto;
}

.k-label{
	position:relative;
	display:inline-block;
	background:#fff;
	border:1px solid #8a8a8a;
	border-radius:4px;
	padding:4px 8px;
	font-size:13px;
	line-height:1.4;
	white-space:nowrap;
	box-shadow:0 2px 4px rgba(0,0,0,.12);
	top:-24px;
}
.k-label:after{
	content:"";
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	bottom:-6px;
	border-width:6px 6px 0 6px;
	border-style:solid;
	border-color:#fff transparent transparent transparent;
	filter: drop-shadow(0 -1px 0 #8a8a8a);
}