/* Z-INDEX 정리 */
/*
지도 마커들 기본 : 5
지도 클러스터 역할 마커의 집 이미지 : 6
지도 클러스터 역할 마커의 개수 표시 : 7
지도 체크 역할 마커 : 8

지도 검색창 : 15
지도 검색 세부창 : 15 ( 따로 적용시키지는 않았음 )

지도 필터 : 12

지도 기능 기본 : 10

로드뷰 종료 : 30

목록 편의 기능 : 1
목록 편의 기능 활성화 : 2

목록 정렬 기능 : 12
목록 썸네일 이미지 : 9 8 7 6
목록 동영상 마크 : 10
목록 동영상 컨테이너 : 11

중간 상세 : 3
중간 상세 상단 탭 : 21
중간 상세 타호실 힌트 : 20

중개사무소 상세 : 4

이미지 뷰어 : 999
이미지 뷰어 내부 버튼들 : 1000
이미지 뷰어 내부 썸네일 리스트 : 1000
*/
/**************/

/********************************/
/****** 여기서 폰트 정의 css 시작 ******/
/********************************/

@font-face {
    font-family: 'basic_r';
    src: url('/fonts/NotoSansKR-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'static_r';
    src: url('/fonts/DoHyeon-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'static_b';
    src: url('/fonts/BlackHanSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'radius_r';
    src: url('/fonts/GowunBatang-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'radius_b';
    src: url('/fonts/GowunBatang-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'radius_rr';
    src: url('/fonts/Jua-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cute_r';
    src: url('/fonts/GamjaFlower-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cute_b';
    src: url('/fonts/SingleDay-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard-Medium';
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/woff2/Pretendard-Medium.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard-Bold';
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/woff2/Pretendard-Bold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

* {
	font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
}

@keyframes slideFadeOutRightToLeft {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(-20px);
	}
}

@keyframes slideFadeOutLeftToRight {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(20px);
	}
}

@keyframes slideFadeOutRightToLeft50 {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(-50px);
	}
}

@keyframes slideFadeOutLeftToRight50 {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(50px);
	}
}

@keyframes slideFadeInRightToLeft50 {
	from {
		opacity: 0;
		transform: translateX(50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideFadeInLeftToRight50 {
	from {
		opacity: 0;
		transform: translateX(-50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideFadeOutLeftToRightO70 {
	from {
		opacity: 0.7;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(20px);
	}
}

@keyframes slideFadeInRightToLeft {
	from {
		opacity: 0;
		transform: translateX(20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideFadeInRightToLeftO70 {
	from {
		opacity: 0;
		transform: translateX(20px);
	}
	to {
		opacity: 0.7;
		transform: translateX(0);
	}
}

@keyframes slideRightToLeft {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0);
	}
}

@keyframes slideFadeInLeftToRight {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideFadeInDownToUp20 {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideFadeInDownToUp30 {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideFadeIndDownToUp-20 {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-80px);
	}
}

@keyframes slideFadeInUpToDown-20 {
	from {
		transform: translateY(-80px);
	}
	to {
		transform: translateY(0);
	}
}

@keyframes rotateFadeInX {
	from {
		opacity: 0;
		transform: rotateX(180deg);
	}
	to {
		opacity: 1;
		transform: rotateX(0deg);
	}
}

@keyframes FadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes FadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes ZoomIn {
	from {
		opacity: 0;
		scale: 0;
	}
	to {
		opacity: 1;
		scale: 1;
	}
}

@keyframes ZoomOut {
	from {
		opacity: 1;
		scale: 1;
	}
	to {
		opacity: 0;
		scale: 0;
	}
}

@keyframes ZoomInO70 {
	from {
		opacity: 0;
		scale: 0;
	}
	to {
		opacity: 0.7;
		scale: 1;
	}
}

@keyframes ZoomOutO70 {
	from {
		opacity: 0.7;
		scale: 1;
	}
	to {
		opacity: 0;
		scale: 0;
	}
}

.fade_out {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.fade_in {
	opacity: 1;
	transition: opacity 0.3s ease;
}

/********************************/
/****** 여기서 모달 정의 css 시작 ******/
/********************************/

.send_request_modal_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99;

	opacity: 0;
    transition: all 0.5s ease;
}

.send_request_modal_overlay.show {
    animation: FadeIn 0.5s ease-out forwards;
}

.send_request_modal_overlay.hide {
	animation: FadeOut 0.3s ease-out forwards;
}

.send_request_modal {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 24px 28px;
	width: 360px;
	box-sizing: border-box;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
	text-align: center;

	display: flex;
	flex-direction: column;
    scale: 0;
    opacity: 0;
    transition: all 0.3s ease;
}

.send_request_modal.show {
	animation: ZoomIn 0.3s ease-out forwards;
}

.send_request_modal.hide {
	animation: ZoomOut 0.25s ease-out forwards;
}

.send_request_modal_close {
    position: absolute;
    width: 17px;
    top: 4px;
    right: 14px;
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    transition: color 0.2s ease;
}
.send_request_modal_close:hover {
	color: #000;
}

.send_request_modal_title {
	font-size: 14.5px;
	font-weight: 600;
	margin-bottom: 14px;
	color: #222;
	line-height: 20px;
}

.send_request_modal_title_up {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	margin-bottom: 9px;
}

.send_request_modal_title_down {
	font-size: 17px;
    line-height: 23px;
}

.send_request_modal_title_up_header {
	/* margin: 0 auto; */
	/* margin-right: 5px; */
	/* margin-bottom: 5px; */
	padding: 0px 0px;
	text-align: center;
	/* border: 1px solid #91b3ff; */
	/* background: #ffffff; */
	/* background-color: #4346ab; */
	border-radius: 50%;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	width: 80px;
	height: 80px;
	box-shadow: 2px 2px 2px rgba(1, 5, 14, 0.05);
	display: flex;
	justify-content: center;
	align-content: center;
}

.send_request_modal_buttons {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.send_request_modal_btn {
	padding: 10px 16px;
	font-size: 15px;
	font-weight: bold;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	cursor: pointer;
	color: #222;
	transition: background-position 0.6s ease;
	background-size: 200% 100%;
	background-position: left center;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.send_request_modal_certified_btn, .send_request_modal_instant_btn{
	background: linear-gradient(to right, #ffced4, #f5dee1);
	color: #eb3656;
}

.send_request_modal_certified_btn_img, .send_request_modal_instant_btn_img {
	width: calc(33px * var(--size));
}

.send_request_modal_certified_btn:hover, .send_request_modal_instant_btn:hover {
	background-position: left center;
	background: linear-gradient(to right, #f5dee1, #fff3f4);
}

.send_request_modal_login_btn {
	background: linear-gradient(to right, #98e2ff, #ccf1ff);
	color: #2c3c8d;
}

.send_request_modal_login_btn_img {
	width: calc(33px * var(--size));
}

.send_request_modal_login_btn:hover {
	background-position: left center;
	background: linear-gradient(to right, #ccf1ff, #e0f7ff);
}

.send_request_choice_modal_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99;

	opacity: 0;
    transition: all 0.5s ease;
}

.send_request_choice_modal_overlay.show {
    animation: FadeIn 0.5s ease-out forwards;
}

.send_request_choice_modal_overlay.hide {
	animation: FadeOut 0.3s ease-out forwards;
}

.send_request_choice_modal {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 24px 28px;
	width: 348px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
	text-align: center;
	display: flex;
	flex-direction: column;
	scale: 0;
	opacity: 0;
	transition: all 0.3s ease;
}

.send_request_choice_modal.show {
	animation: ZoomIn 0.3s ease-out forwards;
}

.send_request_choice_modal.hide {
	animation: ZoomOut 0.25s ease-out forwards;
}

.send_request_choice_modal_close {
    position: absolute;
    width: 17px;
    top: 4px;
    right: 14px;
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    transition: color 0.2s ease;
}
.send_request_choice_modal_close:hover {
	color: #000;
}

.send_request_choice_modal_title {
	font-size: 14.5px;
	font-weight: 600;
	margin-bottom: 14px;
	color: #222;
	line-height: 20px;
}

.send_request_choice_modal_title_up {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	margin-bottom: 9px;
}

.send_request_choice_modal_title_down_span {
    color: #0977d7;
    font-size: 20px;
}

.send_request_choice_modal_title_down {

}

.send_request_choice_modal_title_up_header {
	/* margin: 0 auto; */
	/* margin-right: 5px; */
	/* margin-bottom: 5px; */
	padding: 0px 0px;
	text-align: center;
	/* border: 1px solid #91b3ff; */
	/* background: #ffffff; */
	/* background-color: #4346ab; */
	border-radius: 50%;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	width: 80px;
	height: 80px;
	box-shadow: 2px 2px 2px rgba(1, 5, 14, 0.05);
	display: flex;
	justify-content: center;
	align-content: center;
}

.send_request_choice_modal_buttons {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.send_request_choice_modal_btn {
    padding: 13px 16px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    color: #222;
    transition: background-position 0.6s ease;
    background-size: 200% 100%;
    background-position: left center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.send_request_choice_modal_sms_btn{
	background: linear-gradient(to right, #bbe4f4, #e6f3ffe6);
	color: #03325d;
}

.send_request_choice_modal_sms_btn_img {
	width: calc(28px * var(--size));
}

.send_request_choice_modal_sms_btn:hover {
	background-position: left center;
	background: linear-gradient(to right, #c9effd, #ffffff);
}

.send_request_choice_modal_kakao_btn {
	background: linear-gradient(to right, #f7e111, #fff7b3);
	color: #000000 !important; 
	font-weight: bold !important;
}

.send_request_choice_modal_kakao_btn_img {
	width: calc(28px * var(--size));
}

.send_request_choice_modal_kakao_btn:hover {
	background-position: left center;
	background: linear-gradient(to right, #ffe866, #ffffff);
}

.calling_modal_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99;

	opacity: 0;
    transition: all 0.5s ease;
}

.calling_modal_overlay.show {
    animation: FadeIn 0.5s ease-out forwards;
}

.calling_modal_overlay.hide {
	animation: FadeOut 0.3s ease-out forwards;
}

.calling_modal {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 24px 23px;
	width: 348px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
	text-align: center;
	display: flex;
	flex-direction: column;
	scale: 0;
	opacity: 0;
	transition: all 0.3s ease;
	gap: 5px;
}

.calling_modal.show {
	animation: ZoomIn 0.3s ease-out forwards;
}

.calling_modal.hide {
	animation: ZoomOut 0.25s ease-out forwards;
}

.calling_modal_close {
    position: absolute;
    width: 17px;
    top: 4px;
    right: 14px;
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    transition: color 0.2s ease;
}
.calling_modal_close:hover {
	color: #000;
}

.calling_modal_title {
	font-size: 14.5px;
	font-weight: 600;
	margin-bottom: 14px;
	color: #222;
	line-height: 20px;
}

.calling_modal_title_up {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	margin-bottom: 17px;
}

.calling_modal_title_up_header {
	/* margin: 0 auto; */
	/* margin-right: 5px; */
	/* margin-bottom: 5px; */
	padding: 0px 0px;
	text-align: center;
	/* border: 1px solid #91b3ff; */
	/* background: #ffffff; */
	/* background-color: #4346ab; */
	border-radius: 50%;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	width: 80px;
	height: 80px;
	/* box-shadow: 2px 2px 2px rgba(1, 5, 14, 0.05); */
	display: flex;
	justify-content: center;
	align-content: center;
}

.calling_modal_title_down {font-size: 15.5px;}

.calling_modal_buttons {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.calling_modal_btn {
    padding: 9px 16px;
    font-size: 18.5px;
    font-weight: bold;
    border-radius: 8px;
    /* border: 1px solid rgba(0, 0, 0, 0.1); */
    cursor: pointer;
    color: #222;
    transition: background-position 0.6s ease;
    background-size: 200% 100%;
    background-position: left center;
    /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
	background: linear-gradient(to right, #bbe4f4, #bbe4f4);
	color: #03325d;
	cursor: default;
}

.calling_modal_btn_img {
	width: calc(41px * var(--size));
}

.send_request_login_notice {
	margin: -2px 0 -3px 0;
    padding: 10px 14px;
    background: #f3f8ff;
    border: 1px solid #d7e7ff;
    border-radius: 10px;
    font-size: 13px;
    color: #497bd1;
    text-align: center;
    line-height: 1.4;
    font-weight: 500;
}

.send_request_login_notice_highlight {
    color: #ff6b81; /* 부드러운 포인트 레드/핑크 */
    font-weight: 600;
}

.send_calling_choice_modal_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99;

	opacity: 0;
    transition: all 0.5s ease;
}

.send_calling_choice_modal_overlay.show {
    animation: FadeIn 0.5s ease-out forwards;
}

.send_calling_choice_modal_overlay.hide {
	animation: FadeOut 0.3s ease-out forwards;
}

.send_calling_choice_modal {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 24px 28px;
	width: 360px;
	box-sizing: border-box;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
	text-align: center;

	display: flex;
	flex-direction: column;
    scale: 0;
    opacity: 0;
    transition: all 0.3s ease;
}

.send_calling_choice_modal.show {
	animation: ZoomIn 0.3s ease-out forwards;
}

.send_calling_choice_modal.hide {
	animation: ZoomOut 0.25s ease-out forwards;
}

.send_calling_choice_modal_close {
    position: absolute;
    width: 17px;
    top: 4px;
    right: 14px;
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    transition: color 0.2s ease;
}
.send_calling_choice_modal_close:hover {
	color: #000;
}

.send_calling_choice_modal_title {
	font-size: 14.5px;
	font-weight: 600;
	margin-bottom: 14px;
	color: #222;
	line-height: 20px;
}

.send_calling_choice_modal_title_up {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	margin-bottom: 1px;
}

.send_calling_choice_modal_title_down {
	font-size: 17px;
    line-height: 23px;
}

.send_calling_choice_modal_title_up_header {
	padding: 0px 0px;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	width: 80px;
	height: 80px;
	box-shadow: 2px 2px 2px rgba(1, 5, 14, 0.05);
	display: flex;
	justify-content: center;
	align-content: center;
}

.send_calling_choice_modal_buttons {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.send_calling_choice_modal_btn {
	padding: 10px 16px;
	font-size: 15px;
	font-weight: bold;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	cursor: pointer;
	color: #222;
	transition: background-position 0.6s ease;
	background-size: 200% 100%;
	background-position: left center;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.send_calling_choice_modal_certified_btn,
.send_calling_choice_modal_instant_btn {
	background: linear-gradient(to right, #ffced4, #f5dee1);
	color: #eb3656;
}

.send_calling_choice_modal_certified_btn_img,
.send_calling_choice_modal_instant_btn_img {
	width: calc(33px * var(--size));
}

.send_calling_choice_modal_certified_btn:hover,
.send_calling_choice_modal_instant_btn:hover {
	background-position: left center;
	background: linear-gradient(to right, #f5dee1, #fff3f4);
}

.send_calling_choice_modal_login_btn {
	background: linear-gradient(to right, #98e2ff, #ccf1ff);
	color: #2c3c8d;
}

.send_calling_choice_modal_login_btn_img {
	width: calc(33px * var(--size));
}

.send_calling_choice_modal_login_btn:hover {
	background-position: left center;
	background: linear-gradient(to right, #ccf1ff, #e0f7ff);
}

/********************************/
/****** 여기서 모달 정의 css 끝 ******/
/********************************/

/********************************/
/****** 여기서 폰트 정의 css 끝 ******/
/********************************/

.no-drag {
	-webkit-user-drag: none; /* Chrome, Safari, Opera */
	-khtml-user-drag: none; /* Konqueror */
	-moz-user-drag: none; /* Firefox */
	-ms-user-drag: none; /* Internet Explorer/Edge */
	user-drag: none; /* Non-prefixed version, currently supported by Firefox */
}

body {
    width: 100%;
    height: 100%;
	box-sizing: content-box;
    overflow: hidden;
}

main {
	height: 93%;
	box-sizing: content-box;
    overflow: hidden;

}

section {
	height: 100%;
	box-sizing: content-box;
    overflow: hidden;
}

#map-container {
    display: flex;
    width: 100%;
    height: 100%; /* 고정 높이 */
    overflow: hidden;
}

/********************************/
/****** 여기서 지도 정의 css 시작 ******/
/********************************/

#map {
     width: calc(100% - calc(600px * var(--size)));
}

.custom-marker {
    position: relative;
    display: inline-block;
    width: calc(50px * var(--size));
    height: calc(50px * var(--size));
	z-index: 5;
}

.custom-marker img {
    width: 95%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*filter: invert(33%) sepia(87%) saturate(1500%) hue-rotate(186deg) brightness(100%) contrast(85%);*/
    z-index: 6;
}

.custom-marker .cluster-count {
    position: absolute;
    top: 54%;
    left: 49%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: max(12px, calc(13px * var(--size)));
    z-index: 7; /* 텍스트가 항상 이미지 위에 오도록 설정 */
}

.custom-marker.detected .cluster-count{
	color: #047ce5;
}

.custom-cluster {
    position: relative;
    display: inline-block;
    width: calc(50px * var(--size));
    height: calc(50px * var(--size));
}

.custom-cluster img {
    /* width: 95%; */
    /* height: auto; */
    z-index: 6;
}


.custom-cluster .cluster_content {
    height: calc(39px * var(--size));
    /* width: calc(105px * var(--size)); */
    position: absolute;
    top: 50%;
    left: 150%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: calc(14px * var(--size));
    z-index: 5;
    border-radius: 14px;
    border: 1px solid #1388e2;
    background-color: #fff;
    color: #000;
    text-indent: 5px;
    padding: 3px 24px 3px 16px;
    box-sizing: border-box;
    display: inline-flex;
}

.custom-cluster .cluster-name {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14.3px;
	font-weight: bold;
	color: #595858;
	flex-shrink: 0;
	
    font-family: 'basic_r', sans-serif !important;
}

.custom-cluster .cluster-count {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #047ce5;
    font-weight: bold;
    font-size: 14.3px;
    z-index: 7; /* 텍스트가 항상 이미지 위에 오도록 설정 */
    /* flex-shrink: 0; */
    font-family: 'basic_r', sans-serif !important;
}

.custom-cluster.detected .cluster-name{
	color: #047ce5;
}

.overlay-markers {
	cursor: pointer;
}

.checked-marker {
    position: relative;
    display: inline-block;
    width: calc(44px * var(--size));
    height: calc(50px * var(--size));
}

.checked-marker img{
    position: relative;
	right: 0px;
    z-index: 8;
}

.estate-cluster-marker {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	white-space: nowrap;
}

.estate-cluster-icon-wrapper {
	position: relative;
	width: calc(45px * var(--size));
	height: calc(45px * var(--size));
}

.estate-cluster-house-icon {
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.estate-cluster-badge {
	position: absolute;
	bottom: 3px; /* 우측 하단으로 밀기 */
	right: -4px;
	background-color: #ff5a00;
	color: white;
	font-size: max(12px, calc(12px * var(--size)));
	font-weight: bold;
	border-radius: 50%;
	width: calc(20px * var(--size));
	height: calc(20px * var(--size));
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

.estate-cluster-overlay {
	border: 1.6px solid #ff9900;
    background-color: white;
    color: #ff8400;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 16px;
    font-size: max(12px, calc(12px * var(--size)));
    cursor: pointer;
	display: flex;
    align-items: center;
    justify-content: center;
	margin-top: 3px;
}

.estate-cluster-overlay.selected {
	background-color: #fd9f28;
    color: white;
    border-color: #fd9f28;
    font-weight: 600;
}

.estate-cluster-estate-list {
	background: #fff;
	position: absolute;
	top: 106%;
	left: 50%;
	transform: translateX(-50%);
	background: white;
	border: 1px solid #ccc;
	border-radius: 8px;
	padding: 6px 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	white-space: nowrap;
	font-size: max(12px, calc(13px * var(--size)));
	z-index: 999 !important;
	cursor: pointer;
}

.estate-cluster-estate-item {
	padding: 4px 12px;
	white-space: nowrap;
}

.estate-cluster-estate-item:hover {
	background-color: #f7f7f7;
}

/********************************/
/****** 여기서 지도 정의 css 끝 ******/
/********************************/

/********************************/
/****** 여기서 지도 검색 css 시작 ******/
/********************************/

#filter_top {
    position: absolute;
    left: 10px;
    top: 10px;
    width: calc(400px * var(--size));
    z-index: 15;
}

#filter_top #keyword {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: calc(40px * var(--size));
    /*border: 1px solid var(--color-gray);*/
    background-color: var(--color-white);
    border-radius: 5px 5px 0 0;
    border: 2px solid #346dc3;
}

#filter_top #keyword #keyword-wrap {
    width: 100%;
    height: 100%;
}

#filter_top #keyword #keyword-wrap label {
    display: inline-flex;
    width: calc(40px * var(--size));
    height: calc(40px * var(--size));
    justify-content: center;
    align-items: center;
}

#filter_top #keyword #keyword-wrap label img {
    width: 50%;
    height: 50%;
}

#filter_top #keyword input {
    height: 100%;
    position: absolute;
    left: 40px;
    right: 0;
    color: black;
    background-color: initial;
    cursor: text;
}

#filter_top #keyword span {
    position: absolute;
    right: 0;
    width: calc(40px * var(--size));
    height: calc(40px * var(--size));
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

#filter_top #keyword span img {
    width: 30%;
    height: 30%;
    display: none;
}

#filter_top #keyword input::placeholder {
    color: #6B7280;
    opacity: 0.7;
    font-size: max(12px, calc(13px * var(--size)));
}

#filter_top #keyword input:not(:placeholder-shown) ~ span img {
    display: block;
    cursor: pointer;
}

#keyword-result {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    animation: fadeIn 0.3s ease-in-out;
    width: calc(920px * var(--size));
    height: calc(500px * var(--size));
    padding: 20px;
    border: solid 2px #6cb3ff;
    border-radius: 15px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.keyword-section {
    display: inline-block;
    vertical-align: top;
    padding: 10px;
    box-sizing: border-box;
}

.keyword-section-bjd {
    width: calc(250px * var(--size));
}

.keyword-section-subway {
    width: calc(200px * var(--size));
}

.keyword-section-sales {
    width: calc(300px * var(--size));
}

.section-data {
    width: 100%;
    height: calc(400px * var(--size));
    display: inline-block;
    vertical-align: top;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: scroll;
}

.section-data::-webkit-scrollbar {
    width: calc(10px * var(--size));
}

.section-data::-webkit-scrollbar-thumb {
    background: #1388e2;
    border-radius: 10px;
    background-clip: padding-box;
    border: 2px solid #fff;
}

.section-data::-webkit-scrollbar-track {
    background: #fff;
}

.separator {
    display: inline-block;
    width: calc(1px * var(--size));
    height: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-left: 20px;
    margin-right: 20px;
}

.separator div {
    height: 100%;
    border: solid 1px #6cb3ff;
    border-radius: 3px;
}

.section-title {
    padding-right: 15px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: bold;
    margin-bottom: 10px;
    background-color: #2eb1ed;
    padding-left: 15px;
    border-radius: 5px;
    color: #fff;
    font-size: calc(16px * var(--size));
    text-indent: 15px;
}

.section-exactly-title {
    font-weight: bold;
    margin-bottom: 2px;
    background-color: #88dfff;
    padding: 5px 8px 5px 8px;
    border-radius: 5px;
    font-size: calc(14px * var(--size));
}

.section-normal-title {
    font-weight: bold;
    margin-top: 2px;
    margin-bottom: 2px;
    background-color: #c4efff;
    padding: 5px 8px 5px 8px;
    border-radius: 5px;
    font-size: calc(14px * var(--size));
}

.section-exactly-data div {
    padding: 10px;
    display: flex;
    align-items: center;
    font-size: max(12px, calc(12px * var(--size)));
}

.section-exactly-bjd-data div {
    height: calc(45px * var(--size));
}

.section-exactly-subway-data div {
    height: calc(45px * var(--size));
}

.section-exactly-sales-data div {
    height: calc(60px * var(--size));
}

.section-exactly-data div:not(:first-child) {
    border-top: 1px solid #ddd;
}

.section-exactly-data div:hover {
    background-color: #e6f7ff;
    cursor: pointer;
}

.section-normal-data div {
    padding: 10px;
    display: flex;
    align-items: center;
    font-size: max(12px, calc(13px * var(--size)));
}

.section-normal-bjd-data div {
    height: calc(45px * var(--size));
}

.section-normal-subway-data div {
    height: calc(45px * var(--size));
}

.section-normal-sales-data div {
    height: calc(60px * var(--size));
}

.section-normal-data div:not(:first-child) {
    border-top: 1px solid #ddd;
}

.section-normal-data div:hover {
    background-color: #e6f7ff;
    cursor: pointer;
}

/********************************/
/****** 여기서 지도 검색 css 끝 ******/
/********************************/

/********************************/
/****** 여기서 필터 검색 css 시작 ******/
/********************************/

.filter_room input[type=checkbox],
.controller input[type=radio] {
    display: none;
}

.filter_room {
    position: absolute;
    left: 10px;
    top: 55px;
    width: calc(400px * var(--size));
    z-index: 10;
    background: var(--color-white);
    margin-bottom: 10px;
    border-radius: 0 0 5px 5px;
    /*border: 1px solid var(--color-gray);*/
    border: 2px solid #346dc3;
    font-size: calc(14px * var(--size));
}

.filter_room ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter_room ul li {
    width: 100%;
    display: flex;
    height: calc(40px * var(--size));
    position: relative;
}

.filter_room ul li:not(:last-child):after {
    content: '';
    position: absolute;
    right: 0;
    top: 30%;
    background: var(--color-dark-gray);
    width: calc(1px * var(--size));
    height: 40%;
}

.filter_room input[type=checkbox] + label {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-weight: 600;
}

.filter_room input[type=checkbox] + label:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--color-primary);
    height: calc(2px * var(--size));
    width: 0;
    transition: all .1s ease-in;
}

.filter_room input[type=checkbox]:checked + label {
    /*color: var(--color-primary);*/
    color: var(--color-primary);
    font-weight: 800;
}

.filter_room input[type=checkbox]:checked + label:after {
    width: 100%;
}

.filter_arrow-down {
    position: absolute;
    left: 10px;
    top: 105px;
    width: calc(400px * var(--size));
    text-align: center;
    background-color: #a3d0ff;
    color: white;
    cursor: pointer;
    padding: 1px 0;
    border-radius: 10px;
    border: 2px solid #606ae5;
    z-index: 12;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.filter_body {
    position: absolute;
    left: 10px;
    top: 105px;
    width: calc(400px * var(--size));
    min-height: 36%;
    z-index: 12; /* 변경: postit_container보다 높게 설정 */
    background: var(--color-white);
    margin-bottom: 10px;
    border-radius: 8px;
    border: 2px solid #606ae5;
    font-size: calc(14px * var(--size));
    box-sizing: border-box;
    transition: transform 0.5s ease, height 0.5s ease, padding 0.5s ease, margin 0.5s ease;
    overflow: visible; /* 변경: postit_container가 보이도록 설정 */
    display: flex;
    flex-direction: column;
    transform-origin: top;
}

.filter_content {
    flex-grow: 1;
    padding: 15px;
}

.filter_arrow-up {
    text-align: center;
    background-color: #5aabff;
    color: white;
    cursor: pointer;
    padding: 1px 0;
    border-radius: 0 0 5px 5px;
    border-top: 2px solid #7e9aff;
}

.hidden {
    transform: scaleY(0);
    height: 0;
    padding: 0;
    margin: 0;
}

.visible {
    transform: scaleY(1);
    margin-bottom: 10px;
}

.filter_arrow-down.show {
    opacity: 1;
}

.postit_container {
    position: absolute;
    top: 15px;
    left: 346.5px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: left;
}

.postit {
    background-color: #edf7ff;
    color: #142b6f;
    padding: 1px 10px;
    border: 2px solid #a4d9ff;
    border-left: 0px;
    border-radius: 0px 10px 10px 0px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    text-align: center;
    transition: transform 0.3s ease;
    font-size: max(12px, calc(13px * var(--size)));
    font-weight: bold;
    width: calc(79px * var(--size));
    line-height: calc(24px * var(--size));
}

.postit.active {
    transform: scale(1.05);
    border: 2px solid #606ae5;
    background-color: #fff;
    border-left: 0px;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
}

.postit:hover {
    transform: scale(1.05);
    border: 2px solid #606ae5;
    background-color: #fff;
    border-left: 0px;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
}

.filter_content_title {
    background-color: #47a1ff;
    height: calc(35px * var(--size));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(18px * var(--size));
    font-weight: bold;
    margin-bottom: 15px;
    color: #fff;
    border-radius: 6px;
}

.filter_content_subtitle {
    font-size: calc(16px * var(--size));
    font-weight: bold;
    margin-bottom: 12px;
    text-indent: 10px;
}

.filter_content_architecture {
    margin-bottom: 25px;
}

.filter_content_items {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter_content_items .item {
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter_content_items .item input[type="checkbox"] {
    display: none;
}

.filter_content_items .item input[type="checkbox"] + label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    font-size: max(12px, calc(13px * var(--size)));
    width: calc(80px * var(--size));
    height: calc(80px * var(--size));
}

.filter_content_items .item img {
    width: calc(30px * var(--size));
    height: calc(30px * var(--size));
    filter: grayscale(1);
    transition: filter 0.3s ease, color 0.3s ease;
}

.filter_content_items .item input[type="checkbox"]:checked + label {
    background-color: #6bb3ff;
    border-color: #337ab7;
    color: white;
    padding: 0px;
    border-radius: 5px;
}

.filter_content_items .item input[type="checkbox"]:checked + label img {
    filter: var(--color-white-filter);
}

.filter_content_items .item label span {
    display: block;
}

.filter_content_items .item input[type="radio"] {
    display: none;
}

.filter_content_items .item input[type="radio"] + label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    font-size: max(12px, calc(13px * var(--size)));
    width: calc(80px * var(--size));
    height: calc(30px * var(--size));
}

.filter_content_items .item input[type="radio"]:checked + label {
    background-color: #6bb3ff;
    border-color: #337ab7;
    color: white;
    padding: 0px;
    border-radius: 5px;
}

.filter_content_items .item input[type="radio"]:checked + label img {
    filter: var(--color-white-filter);
}

.filter_content_items .item label span {
    display: block;
}

.filter_content_options {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter_content_options .item {
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter_content_options .item input[type="checkbox"] {
    display: none;
}

.filter_content_options .item input[type="checkbox"] + label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    font-size: max(12px, calc(11px * var(--size)));
    width: calc(60px * var(--size));
    height: calc(60px * var(--size));
}

.filter_content_options .item img {
    width: calc(30px * var(--size));
    height: calc(30px * var(--size));
    filter: grayscale(1);
    transition: filter 0.3s ease, color 0.3s ease;
}

.filter_content_options .item input[type="checkbox"]:checked + label {
    background-color: #6bb3ff;
    border-color: #337ab7;
    color: white;
    padding: 0px;
    border-radius: 5px;
}

.filter_content_options .item input[type="checkbox"]:checked + label img {
    filter: var(--color-white-filter);
}

.filter_content_options .item label span {
    display: block;
}

.filter_content_options .item input[type="radio"] {
    display: none;
}

.filter_content_options .item input[type="radio"] + label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    font-size: max(12px, calc(13px * var(--size)));
    width: calc(80px * var(--size));
    height: calc(30px * var(--size));
}

.filter_content_options .item input[type="radio"]:checked + label {
    background-color: #6bb3ff;
    border-color: #337ab7;
    color: white;
    padding: 0px;
    border-radius: 5px;
}

.filter_content_options .item input[type="radio"]:checked + label img {
    filter: var(--color-white-filter);
}

.filter_content_options .item label span {
    display: block;
}

.filter_content_checks {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter_content_checks .item {
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter_content_checks .item input[type="checkbox"] {
    display: none;
}

.filter_content_checks .item input[type="checkbox"] + label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    font-size: max(12px, calc(13px * var(--size)));
    width: calc(80px * var(--size));
    height: calc(30px * var(--size));
}

.filter_content_checks .item img {
    width: calc(30px * var(--size));
    height: calc(30px * var(--size));
    filter: grayscale(1);
    transition: filter 0.3s ease, color 0.3s ease;
}

.filter_content_checks .item input[type="checkbox"]:checked + label {
    background-color: #6bb3ff;
    border-color: #337ab7;
    color: white;
    padding: 0px;
    border-radius: 5px;
}

.filter_content_checks .item input[type="checkbox"]:checked + label img {
    filter: var(--color-white-filter);
}

.filter_content_checks .item label span {
    display: block;
}

.filter_content_subtitle_check {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter_content_check_content {
    display: flex;
    justify-content: flex-end;
}

.filter_content_check {
    width: calc(17px * var(--size));
    height: calc(17px * var(--size));
    border: 2px solid #3c89db;
    border-radius: 4px;
    background-color: #fff;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: calc(21px * var(--size));
}

.filter_content_check.checked {
    background-image: url('/images/svg/icon_check_color.svg');
    background-color: #fff;
    border-color: #667bdf;
}

.filter_content_check_label {
    font-weight: bold;
    color: #54a7ff;
    font-size: max(12px, calc(13px * var(--size)));
    margin: 0;
    padding: 0;
    text-indent: 0;
    margin-left: 5px;
}

.filter_content_refresh {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.filter_content_refresh_structure, 
.filter_content_refresh_price_type, 
.filter_content_refresh_area, 
.filter_content_refresh_option, 
.filter_content_refresh_facility,
.filter_content_refresh_loan,
.filter_content_refresh_media,
.filter_content_refresh_all {
    display: flex;
    align-items: center;
    cursor: pointer;
    border: 1px solid #6393ff;
    border-radius: 15px;
    padding: 4px;
    padding-top: 0px;
    padding-right: 9px;
    color: #3f5cf5;
    background-color: #f2f5ff;
    transition: background-color 0.3s, transform 0.1s;
}

.filter_content_refresh_structure:hover, 
.filter_content_refresh_price_type:hover, 
.filter_content_refresh_area:hover, 
.filter_content_refresh_option:hover, 
.filter_content_refresh_facility:hover, 
.filter_content_refresh_loan:hover, 
.filter_content_refresh_media:hover, 
.filter_content_refresh_all:hover {
    background-color: #e6eaff;
}

.filter_content_refresh_structure:active, 
.filter_content_refresh_price_type:active, 
.filter_content_refresh_area:active, 
.filter_content_refresh_option:active, 
.filter_content_refresh_facility:active, 
.filter_content_refresh_loan:active, 
.filter_content_refresh_media:active, 
.filter_content_refresh_all:active {
    transform: scale(0.95);
}

.return_img {
    width: calc(20px * var(--size));
    margin-right: 5px;
    vertical-align: middle;
}

.filter_content_refresh_structure span,
.filter_content_refresh_price_type span,
.filter_content_refresh_area span,
.filter_content_refresh_option span,
.filter_content_refresh_facility span,
.filter_content_refresh_loan span,
.filter_content_refresh_media span,
.filter_content_refresh_all span {
    line-height: 1;
    display: flex;
    align-items: center;
    padding-top: 2px;
    font-weight: 400;
}

.architecture_structure_type_one_room_label.block {
    background-color: #efefef;
}

/********************************/
/****** 여기서 필터 검색 css 끝 ******/
/********************************/

/********************************/
/****** 여기서 지도 기능 css 시작 ******/
/********************************/


.controller {
    position: absolute;
    z-index: 10;
    left: 25px;
    bottom: 25px;
    display: flex;
    gap: 9px;
    transition: all 0.3s ease;
}

.controller input[type=checkbox],
.controller input[type=radio] {
    display: none;
}

.map_icon {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
	width: calc(54px * var(--size));
    height: calc(60px * var(--size));
    border: 1.5px solid #cfcfcf;
    padding: 3px;
    background-color: #fff;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.map_icon .icon {
    flex: 0 0 70%;
    width: 44%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.map_icon div:nth-child(2) {
    flex: 0 0 30%;
    width: 100%;
    text-align: center;
    font-size: max(12px, calc(13px * var(--size)));
    font-weight: 500;
}

.map_icon_in {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    width: calc(40px * var(--size));
    height: calc(40px * var(--size));
    border: 1px solid #d4dfff;
    padding: 3px;
    background-color: #fff;
    border-radius: 10px;
    font-size: max(12px, calc(11px * var(--size)));
}

.controller input[type=checkbox]:checked + label,
.controller input[type=radio]:checked + label {
    background-color: #d4e3ff;
    color: var(--color-dark-gray);
}

.controller button:active {
    background-color: var(--color-gray);
    color: var(--color-dark-gray);
}

.menu {
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s ease;
}

.menu > ul {
    position: absolute;
    left: 62px;
    top: 0;
    display: none;
    flex-direction: row;
    gap: 5px;
    z-index: 1;
}

.menu > input:checked + label + ul {
    display: flex;
}

.menu > input:checked + label {
    z-index: 2;
}

#zoom-controller {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    justify-content: space-between;
    align-items: center;
    border-radius: 13px;
    width: calc(30px * var(--size));
    border: 1px solid var(--color-gray);
}

#zoom-controller span {
    background: var(--color-gray);
    height: calc(1px * var(--size));
    width: calc(20px * var(--size));
}

#zoom-controller button {
    border-radius: 5px;
    height: calc(30px * var(--size));
    width: calc(30px * var(--size));
    font-weight: 550;
}

.controller button:active {
    background: var(--color-lignt-gray);
    color: var(--color-dark-gray);
}

.road-controller {
    z-index: 30;
    position: absolute;
    left: 20px;
    top: 20px;
    width: calc(35px * var(--size));
    height: calc(35px * var(--size));
    display: none;
}

.road-controller > div {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    background: #fff;
    padding: 5px;
    opacity: 0.3;
}

.road-controller > div button {
    background: initial;
}

.road-controller > div:hover {
    opacity: 0.8;
}

.road-controller > div img {
    width: 90%;
    height: 90%;
    border-radius: 25px;
}

#road {
    width: calc(100% - calc(600px * var(--size)));
    height: 100%;
}

#exit_road_btn {
    position: absolute;
    top: 25px;
    left: 40%;
    transform: translateX(-50%);
    z-index: 30;
    font-size: calc(21px * var(--size));
    font-weight: 500;
    display: inline-block;
    padding: 5px 15px 5px 10px;
    border: 1px solid rgba(1,5,14,0.2);
    border-radius: 10px;
    min-width: calc(40px * var(--size));
    text-align: center;
    background-color: #494949;
    box-shadow: 2px 2px 2px rgba(1, 5, 14, 0.1);
    transition: all 0.2s ease;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
	color: #fff;
}

#exit_road_btn:hover {
    background-color: #393939;
    box-shadow: none;
    box-shadow: inset 2px 2px 2px rgba(1, 5, 14, 0.05);
}

#exit_road_btn:active {
    box-shadow: inset 0 0 15px rgba(1, 5, 14, 0.3);
    padding: 7px;
}

.exit_road_btn_img {
	width: 30px;
}

#road-minimap {
	width: 350px;
	height: 350px;
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 50;
	border: 2px solid rgba(255, 255, 255, 0.8); /* 살짝 투명한 흰색 테두리 */
	border-radius: 12px; /* 둥글게 */
	overflow: hidden; /* 모서리 깔끔하게 */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* 살짝 그림자 */
	background: #fff; /* 로드뷰 로딩 중에도 흰색 배경 */
}

.map_wrap {overflow:hidden;height:330px}
/* 지도위에 로드뷰의 위치와 각도를 표시하기 위한 map walker 아이콘의 스타일 */
.MapWalker {position:absolute;margin:-26px 0 0 -51px}
.MapWalker .figure {position:absolute;width:25px;left:38px;top:-2px;
	height:39px;background:url(https://t1.daumcdn.net/localimg/localimages/07/2018/pc/roadview_minimap_wk_2018.png) -298px -114px no-repeat}
.MapWalker .angleBack {width:102px;height:52px;background: url(https://t1.daumcdn.net/localimg/localimages/07/2018/pc/roadview_minimap_wk_2018.png) -834px -2px no-repeat;}
.MapWalker.m0 .figure {background-position: -298px -114px;}
.MapWalker.m1 .figure {background-position: -335px -114px;}
.MapWalker.m2 .figure {background-position: -372px -114px;}
.MapWalker.m3 .figure {background-position: -409px -114px;}
.MapWalker.m4 .figure {background-position: -446px -114px;}
.MapWalker.m5 .figure {background-position: -483px -114px;}
.MapWalker.m6 .figure {background-position: -520px -114px;}
.MapWalker.m7 .figure {background-position: -557px -114px;}
.MapWalker.m8 .figure {background-position: -2px -114px;}
.MapWalker.m9 .figure {background-position: -39px -114px;}
.MapWalker.m10 .figure {background-position: -76px -114px;}
.MapWalker.m11 .figure {background-position: -113px -114px;}
.MapWalker.m12 .figure {background-position: -150px -114px;}
.MapWalker.m13 .figure {background-position: -187px -114px;}
.MapWalker.m14 .figure {background-position: -224px -114px;}
.MapWalker.m15 .figure {background-position: -261px -114px;}
.MapWalker.m0 .angleBack {background-position: -834px -2px;}
.MapWalker.m1 .angleBack {background-position: -938px -2px;}
.MapWalker.m2 .angleBack {background-position: -1042px -2px;}
.MapWalker.m3 .angleBack {background-position: -1146px -2px;}
.MapWalker.m4 .angleBack {background-position: -1250px -2px;}
.MapWalker.m5 .angleBack {background-position: -1354px -2px;}
.MapWalker.m6 .angleBack {background-position: -1458px -2px;}
.MapWalker.m7 .angleBack {background-position: -1562px -2px;}
.MapWalker.m8 .angleBack {background-position: -2px -2px;}
.MapWalker.m9 .angleBack {background-position: -106px -2px;}
.MapWalker.m10 .angleBack {background-position: -210px -2px;}
.MapWalker.m11 .angleBack {background-position: -314px -2px;}
.MapWalker.m12 .angleBack {background-position: -418px -2px;}
.MapWalker.m13 .angleBack {background-position: -522px -2px;}
.MapWalker.m14 .angleBack {background-position: -626px -2px;}
.MapWalker.m15 .angleBack {background-position: -730px -2px;}

.map_circle {
    position: absolute;
    width: calc(45px * var(--size));
    height: calc(45px * var(--size));
    border: 1px solid #2b93ff;
    border-radius: 50%;
    background: rgb(97 175 255 / 50%);
    z-index: 1;
}

/********************************/
/****** 여기서 지도 기능 css 끝 ******/
/********************************/

/********************************/
/****** 여기서 목록 정의 css 시작 ******/
/********************************/

#map_list {
    width: calc(600px * var(--size));
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    border-left: 1px solid #e1e1e1;
    padding: 0;
    z-index: 5;
    background-color: #f9fafc;
	position: relative;
}

.top_title {
	display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 13px 9px;
    border: 1.5px solid #ffffff;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06);
    margin: 8px 10px;
    height: calc(57px * var(--size));
    position: relative;
    font-size: calc(14px * var(--size));
    line-height: 1;
    overflow: hidden;
}

.top_title_text_wrap {
    display: flex;
	width: 175px;
    flex-direction: column;
    justify-content: center;
    padding-top: 5px;
    font-family: 'Pretendard', sans-serif;
}

.top_title_text_label {
    font-size: max(12px, calc(13px * var(--size)));
    color: #555;
    margin-bottom: 4px;
}

.top_title_text_value {
    font-size: calc(17px * var(--size));
    font-weight: bold;
    color: #111;
}

.top_title_result_icons {
    display: flex;
    width: 175px;
    align-items: center;
	justify-content: flex-end;
}

.top_title_filter_result_sort_wrap {
    display: flex;
    align-items: center;
    position: relative;
    transition: all 0.3s ease;
}

.top_title_result_icons img {
    width: calc(20px * var(--size));
    height: calc(20px * var(--size));
    cursor: pointer;
    vertical-align: middle;
}

.top_title_sort_icon_wrap {
    width: calc(20px * var(--size));
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-10px);
}

#top_title_result_sort_first,
#top_title_result_sort_second {
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.3s ease, margin-left 0.3s ease, background 0.2s ease;
    font-size: max(12px, calc(13px * var(--size)));
    color: #222;
    cursor: pointer;
}

.top_title_result_sort_first:hover,
.top_title_result_sort_second:hover {
    color: #000;
    font-weight: 500;
}

.top_title_result_sort_text {
    background-color: transparent;
    transition: background-color 0.2s ease;
    padding: 2px 4px;
    border-radius: 4px;
}

.top_title_result_sort_first:hover .top_title_result_sort_text,
.top_title_result_sort_second:hover .top_title_result_sort_text {
    background-color: rgba(33, 33, 33, 0.07);
}

.top_title_sort_dropdown_absolute {
    position: absolute;
    right: 12px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 14px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    display: none;
    z-index: 12;
    min-width: calc(160px * var(--size));
    animation: dropdownSlide 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.top_title_result_sort_column {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.top_title_result_sort_column:last-child {
    margin-right: 0;
}

.top_title_result_sort_item {
    padding: 10px 16px;
    font-size: max(12px, calc(12px * var(--size)));
    color: #222;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.top_title_result_sort_item:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: #111;
    font-weight: 500;
    border-left: 3px solid #111;
}

.top_title_result_sort_item.selected {
    color: #000;
    font-weight: 600;
    position: relative;
}

.top_title_result_sort_item.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #111;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.top_title_result_sort_item.disabled {
    color: #aaa;
    cursor: default;
    pointer-events: none;
    background-color: transparent;
    font-weight: normal;
}

.top_title_result_sort_item.disabled:hover {
    background-color: transparent;
    border-left: none;
}

#sale_list {    
    padding: 3px 10px 8px 10px;
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - calc(145px* var(--size)));
    position: relative;
    overflow: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

#sale_list .ps__rail-y {
    width: calc(10px * var(--size));
    right: 0;
    background: transparent;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
}

#sale_list.scrolling .ps__rail-y {
    opacity: 1 !important;
}

#sale_list .ps__thumb-y {
    background-color: #1388e2;
    border-radius: 10px;
    border: none;
}

#sale_list .ps__thumb-y:active {
    transform: scaleX(1) scaleY(1.1);
    transition: transform 0.1s ease;
}

.sales_row {
    display: flex;
    justify-content: space-between;
    gap: 11px;
    margin-bottom: 11px;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.sales_row.show {	
	animation: slideFadeInDownToUp30 0.5s ease-out forwards;
}

.sales_column {
    width: 49%;
    display: flex;
    flex-direction: column;
    border: 1.5px solid #ffffff;
	border-top-left-radius: 13px;
	border-top-right-radius: 13px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, all 0.5s ease;
    cursor: pointer;
}

.sales_column:hover {
    background-color: #f1f5ff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
	transform: translateY(-3px) !important;
}

.list_left_tab {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.thumbnail_outer_container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.thumbnail_container {
    position: relative;
    width: 100%;
    height: calc(200px * var(--size));
    overflow: hidden;
	border-top-left-radius: 13px;
	border-top-right-radius: 13px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.thumbnail_container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
	border-top-left-radius: 13px;
	border-top-right-radius: 13px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.thumbnail_container img.thumb-initial {
    position: relative;
    z-index: 8;
    pointer-events: auto;
}

.thumbnail_container img.not-thumb-initial {
    opacity: 0;
}

.thumbnail_container img:hover {
    filter: none;
}

img.with-overlay {
    filter: brightness(0.45);
    transition: filter 0.3s ease;
}

img.selected-border {
    border: 1.3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

/* 예전 이미지 썸네일 및 동영상 구조 생성 코드
.list_left_tab_movie {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    gap: 8px;
    padding: 5px 10px;
    background-color: #ffffff;
    color: #2b387a;
    border-radius: 15px;
    font-size: 14px;
    border: 1px solid #7384db;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.list_left_tab_movie .list_left_tab_movie_img {
    margin-right: 2px;
    filter: invert(58%) sepia(50%) saturate(1500%) hue-rotate(189deg) brightness(100%) contrast(85%);
    width: 20px;
}

.list_left_tab_movie .list_left_tab_movie_img2 {
    margin-left: -2px;
    margin-right: 2px;
    filter: invert(37%) sepia(27%) saturate(1385%) hue-rotate(168deg) brightness(117%) contrast(112%);
    width: 20px;
}
*/

.list_left_tab_movie {
	position: absolute;
    right: 8px;
    bottom: 8px;
    width: calc(33px * var(--size));
    height: calc(33px * var(--size));
    color: #ffffff;
    /* border-radius: 50%; */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    z-index: 9;
}

.list_left_tab_check {
    position: absolute;
    right: 12px;
    top: 10px;
    width: calc(22px * var(--size));
    height: calc(22px * var(--size));
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    background-image: url(/images/estate_detail_check_off.png);
    background-size: cover;
    z-index: 9;
}

.list_left_tab_check.checked {
	background-image: url('/images/estate_detail_check_on.png');
}

.list_left_tab_movie_loading-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.list_left_tab_movie_loading-dots div {
    width: calc(5px * var(--size));
    height: calc(5px * var(--size));
    background-color: white;
    border-radius: 50%;
    animation: list_left_tab_movie_bounce 1.5s infinite ease-in-out;
}

.list_left_tab_movie_loading-dots div:nth-child(1) {
    animation-delay: 0s;
}

.list_left_tab_movie_loading-dots div:nth-child(2) {
    animation-delay: 0.3s;
}

.list_left_tab_movie_loading-dots div:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes list_left_tab_movie_bounce {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

.list_left_tab_img1 {
    position: relative;
    z-index: 8;
}

.list_left_tab_img2 {
    position: absolute;
    z-index: 7;
}

.list_left_tab_img3 {
    position: absolute;
    z-index: 6;
}

.list_left_tab_img4 {
    position: absolute;
    z-index: 5;
}

/*
.list_left_tab_count {    
	position: absolute;
    right: 7px;
    bottom: 10px;
    width: 38px;
    height: 38px;
    background-color: rgb(74 155 255 / 80%);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    z-index: 9;
}
*/

/* 추천 매물 외곽선 효과 */
.recommendation-sale {
	border: 1px solid transparent;
	border-radius: 10px;
	background-clip: padding-box;
	position: relative;
}

.recommendation-sale::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 10px;
	background: linear-gradient(90deg, rgba(235, 234, 255, 0.75), rgba(100, 148, 255, 0.55), rgba(61, 99, 243, 0.35), rgba(26, 115, 232, 0.15));
	background-size: 400% 400%;
	z-index: -1;
	animation: border-color-flow 3s infinite linear;
	opacity: 1;
	pointer-events: none;
}

@keyframes border-color-flow {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* 추천 배지 */
.recommendation-badge {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 8px 12px;
	background-color: #ffffff;
	color: #7679f1;
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: calc(14px * var(--size));
	font-weight: bold;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	z-index: 10;
	pointer-events: none;
}

.recommendation-badge img {
	width: calc(18px * var(--size));
	height: calc(18px * var(--size));
	filter: invert(33%) sepia(87%) saturate(1500%) hue-rotate(214deg) brightness(144%) contrast(85%);
}

.recommendation-badge span {
	font-size: calc(14px * var(--size));
}

/* 체크박스 */
.list_check_container {
	position: relative;
	cursor: pointer;
	display: inline-block;
	padding-left: 25px;
	vertical-align: middle;
}

.list_check {
	width: calc(20px * var(--size));
	height: calc(20px * var(--size));
	border: 2px solid #3b82f6;
	border-radius: 4px;
	display: inline-block;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background-color: #fff;
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: calc(21px * var(--size));
}

.list_check.checked {
	background-color: #3b82f6;
	border-color: #3b82f6;
	background-image: url('/images/svg/icon_check_color.svg');
	background-size: calc(16px * var(--size));
	background-position: center;
	background-repeat: no-repeat;
}

.list_check_container label {
	cursor: pointer;
	position: relative;
}

.list_right_info {
	flex: 1;
	padding: 5px 12px 12px 12px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
	gap: 8px;
}

.list_right_tags {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 5px;
	font-size: max(12px, calc(13px * var(--size)));
	margin-bottom: 5px;
	line-height: 1.3;
}

.list_right_tags span {
	display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 2px;
    border-radius: 4px;
    white-space: nowrap;
    /* font-weight: 500; */
    color: #656565;
}

.list_right_info_line {
    width: calc(100% - 2px);
    height: 1px;
    background-color: #f4f4f4;
    margin: -10px 0px 0 0px;
}

.list_right_tag_icon {
	width: calc(15px * var(--size));
	height: calc(15px * var(--size));
	margin-right: 2px;
	vertical-align: middle;
}

.list_right_type {
	display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    padding-right: 13px;
    font-size: max(12px, calc(13px * var(--size)));
    color: #797979;
}

.list_right_type_left {
	display: flex;
	align-items: center;
}

.list_right_type_right {
	display: flex;
    align-items: center;
    gap: 4px;
    font-size: max(12px, calc(11.5px * var(--size)));
    /* font-weight: 500; */
    color: #777777;
}

.list_right_type_right img {
	width: calc(14px * var(--size));
	height: calc(14px * var(--size));
}

.list_right_price_row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
	padding-right: 13px;
}

.list_right_price_type {
	font-size: calc(17px * var(--size));
    font-weight: 500;
    color: #454545;
}

.list_right_price_value {
	font-size: calc(16px * var(--size));
    font-weight: 500;
    color: #454545;
}

.list_right_detail {
	font-size: calc(14px * var(--size));
	color: #666;
	margin-bottom: 2px;
}

.list_right_desc {
	font-size: calc(14px * var(--size));
    color: #6d6d6d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 99%;
}

/********************************/
/****** 여기서 목록 정의 css 끝 ******/
/********************************/

/********************************/
/****** 여기서 상세 정의 css 시작 ******/
/********************************/

#detail {
	position: absolute;
	z-index: 3;
	right: 167px; /* 초기 위치를 화면 오른쪽 밖으로 설정 */
	width: calc(405px * var(--size));
	height: 100%;
	border-left: 1px solid #ccc; /* 구분선 추가 (선택사항) */
	padding: 0px 0px 0px 0px;
	background-color: white;
	transition: right 0.5s ease-in-out; /* 슬라이드 애니메이션 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#detail.show {
	right: calc(600px * var(--size)); /* 화면 안으로 이동 */
}

#detail_in {
    position: relative;
    height: 89vh;
    overflow: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* 📌 스크롤 레일 완전 오버레이 처리 */
#detail_in .ps__rail-y {
    position: absolute;         /* 핵심 */
    top: 0;
    right: 0;
    bottom: 0;
    width: calc(10px * var(--size));
    background: transparent;    /* 공간 배경색 없앰 */
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 10;                /* 충분히 위로 */
    pointer-events: none;       /* 클릭 막기 (필요 시 제거) */
}

#detail_in.scrolling .ps__rail-y {
    opacity: 1 !important;
    pointer-events: auto;       /* 스크롤 중일 때만 클릭 가능 */
}

/* 손잡이 (바) */
#detail_in .ps__thumb-y {
    background-color: #c6e4fb;
    border-radius: 10px;
    border: none;
    right: 2px;
}

/* 누를 때 부드러운 확대 */
#detail_in .ps__thumb-y:active {
    transform: scaleX(1) scaleY(1.1);
    transition: transform 0.1s ease;
}

/* 상단 탭 전체 래퍼 */
.detail_in_tabs_wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 62px;
	z-index: 21;
	overflow: hidden;
	border-top: 4px solid #ccc;
	box-shadow: 0px 3px 4px 1px rgba(0, 0, 0, 0.08);
	background-color: #fff;
}
/* 탭 스크롤 영역 */
.detail_in_tabs_scroll {
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: 2px 0;
	scrollbar-width: none;
	display: flex;
	justify-content: flex-start;
}

.detail_in_tabs_scroll::-webkit-scrollbar {
	display: none;
}
/* 탭 내부 라인 */
.detail_in_tabs {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	padding: 0 100px;
}
.detail_in_tabs_dummy {
	flex: 0 0 120px;
	min-width: 120px;
	height: 1px;
	pointer-events: none;
	visibility: hidden;
}
/* 탭 하나 */
.detail_in_tabs_tab {
	flex: 0 0 auto;
	padding: 8px 12px;
	background: #fff;
	border-radius: 8px;
	font-size: 14px;
	cursor: pointer;
	position: relative;
	transition: transform 0.3s;
}
.detail_in_tabs_tab img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	display: block;
	margin: 0 auto 4px;
}
.detail_in_tabs_tab span {
	display: block;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
}
.detail_in_tabs_tab.selected {
	visibility: hidden;
}

.detail_in_tabs_center_marker {
	position: absolute;
	width: auto;
	height: auto;
	left: 42%;
	z-index: 100;
	pointer-events: none;
}

.detail_in_tabs_center_diamond {
    /* transform: rotate(45deg); */
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    width: 63px;
    height: 63px;
    /* margin-bottom: -2px; */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15), 0 6px 10px rgba(0, 0, 0, 0.1);
}
.detail_in_tabs_center_content {
    /* transform: rotate(-45deg); */
    text-align: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    /* margin-bottom: 6px; */
    /* margin-right: 6px; */
}
.detail_in_tabs_center_content img {
	width: 26px;
	height: 26px;
	object-fit: contain;
	margin-bottom: 3px;
}

.detail_in_tabs-fade-up-out {
	animation: slideFadeIndDownToUp-20 0.5s ease forwards;
	pointer-events: none;
}

.detail_in_tabs-fade-down-in {
	animation: slideFadeInUpToDown-20 0.5s ease forwards;
	pointer-events: auto;
}

.detail_header_real_close {
    cursor: pointer;
    position: absolute;
    width: 50px;
    height: 50px;
    left: -55px;
    /* z-index: 9999; */
    /* background-color: wheat; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail_header_real_close_content {
	width: 40px;
	height: 40px;
	border: 1.5px solid #e9e9e9;
	background-color: #ffffff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.detail_header_real_close_img {
    height: calc(28px * var(--size));
}

.detail_header {
	position: absolute;
    height: calc(36px * var(--size));
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: none;
    /* border-bottom: 1px solid #ddd; */
    padding: 0 calc(30px * var(--size));
    z-index: 2;
    width: 100%;
    background-color: rgba(255, 255, 255, 0);
    top: 14px;
}

.detail_header_real_detail {
	display: flex;
	align-items: center;
	gap: calc(6px * var(--size));
}

.detail_header_real_detail_icon {
	background-color: #00059d;
	border-radius: calc(5px * var(--size));
	width: calc(22px * var(--size));
	height: calc(22px * var(--size));
	display: flex;
	justify-content: center;
	align-items: center;
}

.detail_header_real_detail_img {
	height: calc(19px * var(--size));
}

.detail_header_real_detail_span {
	font-size: max(12px, calc(12px * var(--size)));
	color: #ffffff;
	/* font-weight: 500; */
	line-height: 1;
}

.detail_loading-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #2571fe;
}

.detail_loading-spinner {
	border: 4px solid #f3f3f3; /* 회색 테두리 */
	border-top: 4px solid #2571fe; /* 파란색 테두리 (회전 효과를 줄 부분) */
	border-radius: 50%; /* 원 모양 */
	width: calc(50px * var(--size));
	height: calc(50px * var(--size));
	animation: spin 1s linear infinite; /* 회전 애니메이션 */
	margin: 0 auto; /* 가로 중앙 정렬 */
}

.detail_loading-text {
	font-size: calc(15px * var(--size));
	color: #2571fe;
	display: block;
	margin-top: 13px; /* 스피너와의 간격 */
	font-weight: 500;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.detail_media {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 6px 6px 10px 6px;
    background-color: #f5f5f5;
}

/* 이미지 슬라이드 */
.detail_media .swiper-container {
	width: 100%;
	height: calc(280px * var(--size));
	border-radius: calc(12px * var(--size));
	overflow: hidden;
}

.detail_media .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 5px;
}

.detail_media .swiper-slide img {
    display: block;
    width: 98%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
    border: solid 3px #fff;
	box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.10);
}

.detail_media .swiper-slide video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 30px;
    border: solid 3px #fff;
    box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.10);
}

.detail_media_selecter_container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: calc(14px * var(--size));
	padding: 0 8px 4px 8px;
	gap: calc(22px * var(--size));
}

/* 기존 버튼들 유지 */
.detail_media_selecter {
	display: flex;
	align-items: center;
	gap: calc(10.5px * var(--size));
}

/* 버튼 공통 스타일 */
.detail_media_selecter > div {
	width: calc(36px * var(--size));
	height: calc(36px * var(--size));
	border-radius: 50%;
	background-color: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, transform 0.2s ease;
	cursor: pointer;
	padding: 1px;
}

/*
#detail_media_selecter_type_photo.selected {
	box-shadow: inset 0 0 0 2px #7eb2ff;
}

#detail_media_selecter_type_mov.selected {
	box-shadow: inset 0 0 0 2px #f5accc;
}

#detail_media_selecter_type_share.selected {
	box-shadow: inset 0 0 0 2px #ffdba5;
}

#detail_media_selecter_type_fav.checked {
	box-shadow: inset 0 0 0 2px #ffc967;
}
*/

/* 아이콘 유지 */
.detail_media_selecter_image_icon,
.detail_media_selecter_video_icon,
.detail_media_selecter_share_icon,
.detail_media_selecter_favorite_icon {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	/* border-radius: 50%; */
    transform-origin: center center;
    transition: transform 0.2s ease, background-image 0.2s ease;
}

.detail_media_selecter_image_icon    { background-image: url('/images/detail_media_selecter_image_icon.png'); }
.detail_media_selecter_video_icon    { background-image: url('/images/detail_media_selecter_video_icon.png'); }
.detail_media_selecter_share_icon    { background-image: url('/images/detail_media_selecter_share_icon.png'); }
.detail_media_selecter_favorite_icon { background-image: url('/images/detail_media_selecter_favorite_icon.png'); }

#detail_media_selecter_type_photo.selected .detail_media_selecter_image_icon {
	background-image: url('/images/detail_media_selecter_image_icon_selected.png');
}

#detail_media_selecter_type_mov.selected .detail_media_selecter_video_icon {
	background-image: url('/images/detail_media_selecter_video_icon_selected.png');
}

#detail_media_selecter_type_share.selected .detail_media_selecter_share_icon {
	background-image: url('/images/detail_media_selecter_share_icon_selected.png');
}

#detail_media_selecter_type_fav.checked .detail_media_selecter_favorite_icon {
	background-image: url('/images/detail_media_selecter_favorite_icon_selected.png');
}

.slide_loading {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: -55px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.05); /* 더 투명한 흰색 베일 */
}

.slide_dot {
	width: calc(8px * var(--size));
	height: calc(8px * var(--size));
	margin: 0 4px;
	background-color: #6891f9; /* 흰색 점 */
	border-radius: 50%;
	animation: dotPulse 1s infinite ease-in-out;
}

.slide_dot:nth-child(1) {
	animation-delay: 0s;
}

.slide_dot:nth-child(2) {
	animation-delay: 0.2s;
}

.slide_dot:nth-child(3) {
	animation-delay: 0.4s;
}

.slide_other_room_hint {    
	position: absolute;
    top: 3%;
    right: 10%;
    background-color: rgb(255 255 255 / 85%);
    color: #031c7d;
    padding: 6px 9px;
    border-radius: 16px;
    font-size: max(12px, calc(11px * var(--size)));
    white-space: nowrap;
    font-weight: bold;
    opacity: 1;
    transition: opacity 0.5s;
    z-index: 20;
}

.media_slide_hint {
	flex-grow: 1;
	font-size: max(12px, calc(12px * var(--size)));
	color: #888;
	padding-left: calc(6px * var(--size));
	padding-bottom: calc(3px * var(--size));
	white-space: nowrap;
	align-self: flex-end;
	align-items: center;
}

.media_slide_hint_img {
	width: calc(16px * var(--size));
	height: calc(16px * var(--size));
	margin-right: 4px;
}

.detail_media_selecter_type,
.media_slide_hint {
	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail_media_selecter_type.show,
.media_slide_hint.show {
	animation: slideFadeInDownToUp20 0.5s ease-out forwards;
}

.swiper-slide img {
	opacity: 0;
	transition: opacity 0.5s ease;
}

.swiper-slide img.loaded {
	transition: none; /* ✅ 이미 본거는 트랜지션 제거 이거 꼭 필요 */
	animation: slideFadeInRightToLeft 0.5s ease-out forwards;
}

.swiper-slide video {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.swiper-slide video.loaded {
	transition: none; /* ✅ 이미 본거는 트랜지션 제거 이거 꼭 필요 */
	animation: slideFadeInRightToLeft 0.4s ease-out forwards;
}

.detail_top {
    padding: 20px;
    background-color: #fff;
    /* border-top: 1px solid #e9e9e9; */
}

.detail_top_title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 17px;
    color: #7f7f7f;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 2.2px;
    width: 100%;
    justify-content: space-between;
}

.detail_top_title img {
    width: 22px;
    height: 22px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.detail_top_title img.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_top_title span {
	opacity: 0;
	transition: opacity 0.5s ease;
    font-family: 'basic_r', sans-serif;
}

.detail_top_title span.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_top_title_left {
	display: flex;
    align-items: center;
    gap: 7px;
}
.detail_top_title_right {
	display: flex;
	align-items: center;
	justify-content: center;
}
.detail_top_title_link_btn {
	display: inline-flex;
	background-color: #ffffff;
	color: #6d6a6a;
	padding: 5px 10px 5px 10px;
	border-radius: 6px;
	font-size: 12px;
	line-height: 1;
	position: relative;
	text-indent: 1px;
	margin-right: -8px;
	font-weight: bold;
	cursor: pointer;
	border: 1px solid #f7f7f7;
	box-shadow: 1px 1px 2px rgb(0 0 0 / 5%);
	justify-content: center;
	align-items: center;
	height: 29px;
	letter-spacing: 0.5px;
	transition: all 0.5s ease;
}
#detail_top_title_link_btn_img {
	width: 18px;
	opacity: 1;
}

.detail_top_title_link_btn.show {
	animation: slideFadeInRightToLeft 0.5s ease-out forwards !important;
	opacity: 0 !important;
}

.detail_top_title_link_btn:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	transform: translateY(-1px);
}

/* 오피스텔, 오픈형, 원룸 */
.detail_top_rooms {
    display: flex;
    gap: 6px;
    margin-bottom: 15px;
}
.detail_top_rooms > div {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #656565;
    font-weight: bold;
    box-shadow: 1px 2px 0px rgb(0 0 0 / 6%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* 홀수 번째 div 배경색 */
.detail_top_rooms > div:nth-child(odd) {
    background: #f6f6f6; /* 원하는 색으로 변경 */
}

/* 짝수 번째 div 배경색 */
.detail_top_rooms > div:nth-child(even) {
    background: #fff;
}

.detail_top_rooms > div.show {
	animation: slideFadeInDownToUp20 0.5s ease-out forwards;
}

/* 가격 + 관리비 */
.detail_top_price_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 16px;
}
.detail_top_content_price {
    font-size: 18px;
    font-weight: bold;
    color: #4b4b4b;
    letter-spacing: 0.5px;
    opacity: 0;
}

.detail_top_content_price.show {
	animation: FadeIn 1s ease-out forwards;
}

.detail_top_maintenance {
    font-size: 15px;
    color: #555;
    font-weight: bold;
	opacity: 0;
	transform: rotateX(180deg);
	transform-origin: center;
	backface-visibility: hidden;
	animation-fill-mode: forwards;
}

.detail_top_maintenance.show {
	animation: rotateFadeInX 0.8s ease-out forwards;
}

.detail_top_line {
	width: calc(100% - 2px);
	height: 1px;
	background-color: #f4f4f4;
	margin: 5px 0px 10px 0px;
}

/* 아이콘 라인 1 */
.detail_top_info_row_1 {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.detail_top_info_item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    padding: 12px 0 6px;
    font-size: 13px;
    font-weight: bold;
    color: #52525d;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.06); */
}
.detail_top_info_item.icon1 {/* background: #e8f0ff; */}
.detail_top_info_item.icon2 {/* background: #fff1f1; */}
.detail_top_info_item.icon3 {/* background: #f0fff7; */}
.detail_top_info_item.icon4 {/* background: #f5f0ff; */}
.detail_top_info_item img {
    width: 50px;
    height: 50px;
    margin-bottom: 6px;
}

.detail_top_info_item {
	opacity: 0;
	transform: translateX(0); /* 초기 상태로 리셋 */
	animation-fill-mode: forwards;
}

/* 왼쪽 → 오른쪽 */
.detail_top_info_item.icon1.show,
.detail_top_info_item.icon2.show {
	animation: slideFadeInLeftToRight 0.4s ease-out forwards;
}

/* 오른쪽 → 왼쪽 */
.detail_top_info_item.icon3.show,
.detail_top_info_item.icon4.show {
	animation: slideFadeInRightToLeft 0.4s ease-out forwards;
}

/* 아이콘 라인 2 */
.detail_top_info_row_2 {
    display: flex;
    flex-wrap: wrap;
    background: #f1f1f1;
    border-radius: 12px;
    padding: 13px 13px;
    gap: 9px 0;
    /* row-gap: 12px, column-gap: 0 */
    margin-top: 21px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.detail_top_info_row_2.show {
	animation: slideFadeInDownToUp20 0.4s ease-out forwards;
}

.detail_top_info_extra_item {
    width: 50%;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #4c5469;
    letter-spacing: -0.2px;
    line-height: 1.5;
    font-weight: bold;
    /* margin-left: 0px; */
    padding-left: 3px;
}

.detail_top_info_extra_item img {
    width: 22px;
    height: 22px;
    margin-right: 8px;
    flex-shrink: 0;
}

.detail_subject_info {
	font-family: 'Pretendard', sans-serif;
    padding: 0px 12px 25px 12px;
}

.detail_subject_info_scontent {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.detail_subject_info_box {
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 12px;
	padding: 16px 18px 18px 18px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail_subject_info_box.show {
	animation: slideFadeInDownToUp20 0.5s ease-out forwards;
}

#detail_subject_info_box_subject {
	background: #f3f9ff;
}

.detail_subject_info_title {
	font-size: 14px;
	font-weight: 800;
	color: #444;
	margin-bottom: 10px;
}

.detail_subject_info_text_wrapper {
	overflow: hidden;
	transition: max-height 0.2s ease;
}

.detail_subject_info_text_wrapper.collapsed {
	max-height: 88px; /* 22px × 4줄 */
}

.detail_subject_info_text {
	font-size: 14px;
	color: #333;
	line-height: 22px;
	letter-spacing: -0.2px;
}

.detail_subject_info_more {
    font-size: 13px;
    font-weight: 600;
    color: #3171f6;
    text-align: left;
    margin-top: 12px;
    cursor: pointer;
    user-select: none;
}
.detail_subject_info_more_img {
	width: 12px;
	height: 12px;
}

.detail_management_info {
	padding: 25px 11px 25px 11px;
}

.detail_management_info_title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 17px;
    color: #7f7f7f;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 2.2px;
	padding-left: 8px;
}

.detail_management_info_title img {
	width: 22px;
	height: 22px;

	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail_management_info_title img.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_management_info_title span {
	opacity: 0;
	transition: opacity 0.5s ease;
    font-family: 'basic_r', sans-serif;
}

.detail_management_info_title span.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_management_info_price_content {
	padding-left: 10px;
	margin-bottom: 16px;

	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail_management_info_price_content.show {
	animation: slideFadeInDownToUp20 0.5s ease-out forwards;
}

.detail_management_info_price_content_price {
	font-size: 15px;
	font-weight: bold;
	color: #2b2b2b;
	margin-bottom: 4px;
}

.detail_management_info_price_content_price_note {
	font-size: 13px;
	color: #888;
}

.detail_management_info_extra_content {
	padding-left: 10px;
	margin-bottom: 16px;

	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail_management_info_extra_content.show {
	animation: slideFadeInDownToUp20 0.5s ease-out forwards;
}

.detail_management_info_extra_content_extra {
	font-size: 14px;
	font-weight: bold;
	color: #2b2b2b;
	margin-bottom: 4px;
}

.detail_management_info_extra_content_extra_note {
	font-size: 13px;
	color: #555;
	line-height: 1.5;
}

.detail_management_info_wrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	flex-wrap: nowrap;
}

.detail_management_info_column {
	flex: 1 1 0;
	border-radius: 12px;
	padding: 13px 0px 13px 13px;
	display: flex;
	flex-direction: column;
	gap: 0px;
	box-shadow: inset 0 0 0 1.8px #f4f4f4;
	background-color: #ffffff;

	opacity: 0;
	transform: translateX(0); /* 초기 상태로 리셋 */
	animation-fill-mode: forwards;
}

.detail_management_info_column_un {
	background-color: #f4f4f4;
	box-shadow: inset 0 0 0 1.8px #f4f4f4;
}

/* 왼쪽 → 오른쪽 */
.detail_management_info_column_nun.show {
	animation: slideFadeInLeftToRight 0.4s ease-out forwards;
}

/* 오른쪽 → 왼쪽 */
.detail_management_info_column_un.show {
	animation: slideFadeInRightToLeft 0.4s ease-out forwards;
}

.detail_management_info_column_title {
	display: flex;
	align-items: center;
	font-size: 13.5px;
	font-weight: 700;
	margin-bottom: 2px;
	color: #5c6364;
	gap: 7px;
	/* position: relative; */
	/* padding-left: 28px; */
	margin-bottom: 8px;
}

.detail_management_info_column_title img {
	width: 22px;
	height: 22px;
	/* position: absolute; */
	left: 0;
	/* top: 50%; */
	/* transform: translateY(-50%); */
}

.detail_management_info_item {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: #3f3440;
	padding-right: 12px;
	font-weight: 500;
	margin-top: 5px;

	opacity: 0;
	transform: rotateX(180deg);
	transform-origin: center;
	backface-visibility: hidden;
	animation-fill-mode: forwards;
}

.detail_management_info_item.show {
	animation: rotateFadeInX 0.8s ease-out forwards;
}

.detail_management_info_item .price {
	font-weight: 600;
	font-size: 12px;
	color: #848281;
}

.detail_sale_info {
	padding: 25px 11px 25px 11px;
}

.detail_sale_info_title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 17px;
    color: #7f7f7f;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 2.2px;
	padding-left: 8px;
}

.detail_sale_info_title img {
	width: 22px;
	height: 22px;

	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail_sale_info_title span {
	opacity: 0;
	transition: opacity 0.5s ease;
    font-family: 'basic_r', sans-serif;
}

.detail_sale_info_title img.show,
.detail_sale_info_title span.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_sale_info_wrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	flex-wrap: nowrap;
}

.detail_sale_info_column {
	flex: 1 1 0;
	border-radius: 12px;
	padding: 13px 0px 13px 13px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-shadow: inset 0 0 0 1.8px #cde8ff;
	background-color: #ffffff;

	opacity: 0;
	transform: translateX(0); /* 초기 상태로 리셋 */
	animation-fill-mode: forwards;
}

.detail_sale_info_column_living {
	background-color: #ffffff;
	box-shadow: inset 0 0 0 1.8px #f6cbd3;
}

/* 왼쪽 → 오른쪽 */
.detail_sale_info_column_building.show {
	animation: slideFadeInLeftToRight 0.4s ease-out forwards;
}

/* 오른쪽 → 왼쪽 */
.detail_sale_info_column_living.show {
	animation: slideFadeInRightToLeft 0.4s ease-out forwards;
}

.detail_sale_info_column_title {
	display: flex;
	align-items: center;
	font-size: 13.5px;
	font-weight: 700;
	margin-bottom: 2px;
	color: #5c6364;
	gap: 7px;
	/* position: relative; */
	/* padding-left: 28px; */
	margin-bottom: 12px;
}

.detail_sale_info_column_title img {
	width: 20px;
	height: 20px;
	/* position: absolute; */
	left: 0;
	/* top: 50%; */
	/* transform: translateY(-50%); */
}

.detail_sale_info_item {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-direction: row;
}

.detail_sale_info_icon {
	width: 20px;
	height: 24px;
	flex-shrink: 0;
	margin-top: 2px;

	opacity: 0;
	transform: rotateX(180deg);
	transform-origin: center;
	backface-visibility: hidden;
	animation-fill-mode: forwards;
}

.detail_sale_info_icon.show {
	animation: rotateFadeInX 0.8s ease-out forwards;
}

.detail_sale_info_textgroup {
	display: flex;
	flex-direction: column;
	gap: 2px;

	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail_sale_info_textgroup.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_sale_info_label {
	font-size: 12px;
	font-weight: 500;
	color: #888;
	line-height: 1.4;
}

.detail_sale_info_value {
	font-size: 12px;
	color: #352c2d;
	line-height: 1.4;
	font-weight: 600;
}

.ansim_guide_container_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;

	opacity: 0;
	transition: all 0.5s ease;
}

.ansim_guide_container_overlay.show {
	animation: FadeIn 0.5s ease-out forwards;
}

.ansim_guide_container_overlay.hide {
	animation: FadeOut 0.3s ease-out forwards;
}

.ansim_guide_container_overlay_close {
	position: absolute;
	left: calc(50% + 375px);
	bottom: calc(50% + 385px);
	background: #000000;
	opacity: 0.5;
	border-radius: 10px;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	display: flex;
	cursor: pointer;

	opacity: 0;
	transition: all 0.5s ease;
}

.ansim_guide_container_overlay_close.show {
	animation: ZoomInO70 0.5s ease-out forwards;
}

.ansim_guide_container_overlay_close.hide {
	animation: ZoomOutO70 0.3s ease-out forwards;
}

.ansim_guide_container_overlay_close_icon {
	width: 28px;
	height: 28px;
}

.ansim_guide_container {
	width: 720px;
	height: 850px;
	background: #f9fbfb;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
	padding: 11px 12px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	
	scale: 0;
	opacity: 0;
	transition: all 0.5s ease;
}

.ansim_guide_container.show {
	animation: ZoomIn 0.5s ease-out forwards;
}

.ansim_guide_container.hide {
	animation: ZoomOut 0.3s ease-out forwards;
}

/* 제목 영역 */
.ansim_guide_container_title {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
	background-color: #60a5fa;
	border-radius: 8px;
	padding: 10px 18px 6px 18px;
}

.ansim_guide_container_title_left_tab {
	margin-right: 5px;
}

.ansim_guide_container_title_left_tab_icon {
	width: 58px;
	height: 58px;
	margin-right: 16px;
}

.ansim_guide_container_title_right_tab {
	display: flex;
	flex-direction: column;
}

.ansim_guide_container_title_right_tab_up {
	font-size: 21px;
	font-weight: 700;
	color: #fff;
	border-radius: 12px;
	margin-bottom: 4px;
	display: inline-block;
	margin-top: -4px;
}

.ansim_guide_container_title_right_tab_down {
	font-size: 13px;
	color: #ffffff;
	display: inline-block;
}

/* 카테고리 탭들 */
.ansim_guide_container_category {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: 14px;
}

.ansim_guide_container_category_line {
	display: flex;
	flex: 1;
	gap: 25px;
	justify-content: space-between;
}

.ansim_guide_container_category_tab {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background-color: #ffffff;
	border: 1px solid #ffffff;
	padding: 6px;
	gap: 6px;
	font-weight: 500;
	font-size: 12px;
	cursor: pointer;
	box-shadow: 1px 1px 2px rgb(0 0 0 / 9%);
	transition: background 0.2s ease, color 0.2s ease;
}

.ansim_guide_container_category_tab_icon {
	width: 18px;
	height: 18px;
	background-size: contain;
	background-repeat: no-repeat;
}

.ansim_guide_container_category_tab.selected {
	background: #60a5fa;
	color: #fff;
	border: 1px solid #e5e5e5;
}

.ansim_guide_container_category_tab:hover {
	background: #60a5fa;
	color: #fff;
	border: 1px solid #e5e5e5;
}

.ansim_guide_container_category_line:nth-child(1) .ansim_guide_container_category_tab:nth-child(1) .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_lessor_check_icon_off.png');
}
.ansim_guide_container_category_line:nth-child(1) .ansim_guide_container_category_tab:nth-child(1).selected .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_lessor_check_icon_on.png');
}

.ansim_guide_container_category_line:nth-child(1) .ansim_guide_container_category_tab:nth-child(2) .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_lessor_name_icon_off.png');
}
.ansim_guide_container_category_line:nth-child(1) .ansim_guide_container_category_tab:nth-child(2).selected .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_lessor_name_icon_on.png');
}

.ansim_guide_container_category_line:nth-child(1) .ansim_guide_container_category_tab:nth-child(3) .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_house_type_icon_off.png');
}
.ansim_guide_container_category_line:nth-child(1) .ansim_guide_container_category_tab:nth-child(3).selected .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_house_type_icon_on.png');
}

.ansim_guide_container_category_line:nth-child(1) .ansim_guide_container_category_tab:nth-child(4) .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_house_purpose_icon_off.png');
}
.ansim_guide_container_category_line:nth-child(1) .ansim_guide_container_category_tab:nth-child(4).selected .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_house_purpose_icon_on.png');
}

.ansim_guide_container_category_line:nth-child(1) .ansim_guide_container_category_tab:nth-child(5) .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_dgb_icon_off.png');
}
.ansim_guide_container_category_line:nth-child(1) .ansim_guide_container_category_tab:nth-child(5).selected .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_dgb_icon_on.png');
}

.ansim_guide_container_category_line:nth-child(2) .ansim_guide_container_category_tab:nth-child(1) .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_contract_start_icon_off.png');
}
.ansim_guide_container_category_line:nth-child(2) .ansim_guide_container_category_tab:nth-child(1).selected .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_contract_start_icon_on.png');
}

.ansim_guide_container_category_line:nth-child(2) .ansim_guide_container_category_tab:nth-child(2) .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_balance_icon_off.png');
}
.ansim_guide_container_category_line:nth-child(2) .ansim_guide_container_category_tab:nth-child(2).selected .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_balance_icon_on.png');
}

.ansim_guide_container_category_line:nth-child(2) .ansim_guide_container_category_tab:nth-child(3) .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_contract_end_icon_off.png');
}
.ansim_guide_container_category_line:nth-child(2) .ansim_guide_container_category_tab:nth-child(3).selected .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_contract_end_icon_on.png');
}

.ansim_guide_container_category_line:nth-child(2) .ansim_guide_container_category_tab:nth-child(4) .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_caution_icon_off.png');
}
.ansim_guide_container_category_line:nth-child(2) .ansim_guide_container_category_tab:nth-child(4).selected .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_caution_icon_on.png');
}

.ansim_guide_container_category_line:nth-child(2) .ansim_guide_container_category_tab:nth-child(5) .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_recently_icon_off.png');
}
.ansim_guide_container_category_line:nth-child(2) .ansim_guide_container_category_tab:nth-child(5).selected .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_recently_icon_on.png');
}

.ansim_guide_container_category_line:nth-child(1) .ansim_guide_container_category_tab:nth-child(1):hover .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_lessor_check_icon_on.png');
}

.ansim_guide_container_category_line:nth-child(1) .ansim_guide_container_category_tab:nth-child(2):hover .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_lessor_name_icon_on.png');
}

.ansim_guide_container_category_line:nth-child(1) .ansim_guide_container_category_tab:nth-child(3):hover .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_house_type_icon_on.png');
}

.ansim_guide_container_category_line:nth-child(1) .ansim_guide_container_category_tab:nth-child(4):hover .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_house_purpose_icon_on.png');
}

.ansim_guide_container_category_line:nth-child(1) .ansim_guide_container_category_tab:nth-child(5):hover .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_dgb_icon_on.png');
}

.ansim_guide_container_category_line:nth-child(2) .ansim_guide_container_category_tab:nth-child(1):hover .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_contract_start_icon_on.png');
}

.ansim_guide_container_category_line:nth-child(2) .ansim_guide_container_category_tab:nth-child(2):hover .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_balance_icon_on.png');
}

.ansim_guide_container_category_line:nth-child(2) .ansim_guide_container_category_tab:nth-child(3):hover .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_contract_end_icon_on.png');
}

.ansim_guide_container_category_line:nth-child(2) .ansim_guide_container_category_tab:nth-child(4):hover .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_caution_icon_on.png');
}

.ansim_guide_container_category_line:nth-child(2) .ansim_guide_container_category_tab:nth-child(5):hover .ansim_guide_container_category_tab_icon {
	background-image: url('/images/ansim_recently_icon_on.png');
}


/* 중간 제목 */
.ansim_guide_container_middle_title {
	margin-bottom: 14px;
	padding: 11px 10px 12px 19px;
	background: #ebf4ff;
	border-radius: 8px;
	/* height: 154px; */
	position: relative;
}

.ansim_guide_container_middle_title div {
	height: 16px;
}

.ansim_guide_container_middle_title_up_icon {
	width: 14px;
	height: 14px;
	margin-right: 8px;
}

.ansim_guide_container_middle_title_up {
	display: flex;
	align-items: center;
	font-size: 14px;
	font-weight: bold;
	color: #124b87;
	margin-bottom: 4px;
}

.ansim_guide_container_middle_title_down {
	font-size: 12px;
	color: #0e0e0e;
	height: 14px;
}

.ansim_guide_container_content {
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	gap: 22px;
	margin-bottom: 12px;
}

.ansim_guide_container_content p {
	margin-bottom: -5px;
}

/* 4:6 비율 */
.ansim_guide_container_content_line:nth-child(1) {
	flex: 4;
}

.ansim_guide_container_content_line:nth-child(2) {
	flex: 6;
}

.ansim_guide_container_content_line {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* 탭 요소 박스 */
.ansim_guide_container_content_line_tab {
	background-color: #fff;
	border-radius: 12px;
	padding: 16px;
	box-shadow: 2px 2px 5px 1px #dddddd40;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.ansim_guide_container_content_line_tab_title span {
	height: 16px;
}

.ansim_guide_container_content_line_tab_title_icon {
	width: 16px;
	height: 16px;
	background-size: contain;
	background-repeat: no-repeat;
}

/* 색상 순서 */
.ansim_guide_container_content_line:nth-child(1) .ansim_guide_container_content_line_tab:nth-child(1) {
	border-left: 5px solid #fbbf24;
	background-color: #fffbeb;
}
.ansim_guide_container_content_line:nth-child(1) .ansim_guide_container_content_line_tab:nth-child(1) .ansim_guide_container_content_line_tab_title {
	color: #b97954;
}
.ansim_guide_container_content_line:nth-child(1) .ansim_guide_container_content_line_tab:nth-child(1) .ansim_guide_container_content_line_tab_title .ansim_guide_container_content_line_tab_title_icon {
	background-image: url('/images/ansim_guide_container_content_line_tab_title_icon_1_1.png');
}
.ansim_guide_container_content_line:nth-child(1) .ansim_guide_container_content_line_tab:nth-child(2) {
	border-left: 5px solid #aa8ffa;
	background-color: #f2edff;
}
.ansim_guide_container_content_line:nth-child(1) .ansim_guide_container_content_line_tab:nth-child(2) .ansim_guide_container_content_line_tab_title {
	color: #6931cb;
}
.ansim_guide_container_content_line:nth-child(1) .ansim_guide_container_content_line_tab:nth-child(2) .ansim_guide_container_content_line_tab_title .ansim_guide_container_content_line_tab_title_icon {
	background-image: url('/images/ansim_guide_container_content_line_tab_title_icon_1_2.png');
}
.ansim_guide_container_content_line:nth-child(1) .ansim_guide_container_content_line_tab:nth-child(3) {
	border-left: 5px solid #34d399;
	background-color: #ecfdf5;
}
.ansim_guide_container_content_line:nth-child(1) .ansim_guide_container_content_line_tab:nth-child(3) .ansim_guide_container_content_line_tab_title {
	color: #25654c;
}
.ansim_guide_container_content_line:nth-child(1) .ansim_guide_container_content_line_tab:nth-child(3) .ansim_guide_container_content_line_tab_title .ansim_guide_container_content_line_tab_title_icon {
	background-image: url('/images/ansim_guide_container_content_line_tab_title_icon_1_3.png');
}
.ansim_guide_container_content_line:nth-child(2) .ansim_guide_container_content_line_tab:nth-child(1) {
	border-left: 4px solid #73affa;
	background-color: #fcfdff;
}
.ansim_guide_container_content_line:nth-child(2) .ansim_guide_container_content_line_tab:nth-child(1) .ansim_guide_container_content_line_tab_title {
	color: #2151cd;
}
.ansim_guide_container_content_line:nth-child(2) .ansim_guide_container_content_line_tab:nth-child(1) .ansim_guide_container_content_line_tab_title .ansim_guide_container_content_line_tab_title_icon {
	background-image: url('/images/ansim_guide_container_content_line_tab_title_icon_2_1.png');
}
.ansim_guide_container_content_line:nth-child(2) .ansim_guide_container_content_line_tab:nth-child(2) {
	border-left: 4px solid #f87b7b;
	background-color: #fef2f2;
}
.ansim_guide_container_content_line:nth-child(2) .ansim_guide_container_content_line_tab:nth-child(2) .ansim_guide_container_content_line_tab_title {
	color: #ab1918;
}
.ansim_guide_container_content_line:nth-child(2) .ansim_guide_container_content_line_tab:nth-child(2) .ansim_guide_container_content_line_tab_title .ansim_guide_container_content_line_tab_title_icon {
	background-image: url('/images/ansim_guide_container_content_line_tab_title_icon_2_2.png');
}

/* 제목 스타일 */
.ansim_guide_container_content_line_tab_title {
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 7px;
}

.ansim_guide_container_content_line:nth-child(1) .ansim_guide_container_content_line_tab_content {
	position: relative;
	font-size: 12.5px;
	height: 110px;
}

.ansim_guide_container_content_line:nth-child(2) .ansim_guide_container_content_line_tab:nth-child(1) .ansim_guide_container_content_line_tab_content {
	position: relative;
	font-size: 12.5px;
	height: 110px;
}

.ansim_guide_container_content_line:nth-child(2) .ansim_guide_container_content_line_tab:nth-child(2) .ansim_guide_container_content_line_tab_content {
	position: relative;
	font-size: 12.5px;
	height: 199px;
}

.ansim_guide_container_content_line_tab_content div {
	word-break: keep-all;
	line-height: 20px;
}

/* 힌트 */
.ansim_guide_container_content_line_tab_hint {
	background: #ffffff;
	border: 2px solid #daf1fd;
	border-radius: 3px;
	padding: 10px 10px 10px 12px;
	margin-top: 10px;
	font-size: 12px;
	line-height: 15px;
}

.ansim_guide_container_content_line_tab_hint_title {
	font-weight: bold;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 4px;
	color: #1c47bb;
}

.ansim_guide_container_content_line_tab_hint_title_icon {
	width: 16px;
	height: 16px;
}

.ansim_guide_container_content_line_tab_hint_content {
	position: relative;
	height: 43px;
}

/* 푸터 */
.ansim_guide_container_footer {
	background: #ebf4ff;
	border: 1.8px solid #1b61ab;
	border-radius: 4px;
	display: flex;
	gap: 3px;
	font-weight: bold;
	color: #333;
}

.ansim_guide_container_footer_left_tab {
	display: flex;
	background: #1b61ab;
	align-items: center;
	font-size: 13px;
	padding: 8px 16px 8px 8px;
	color: #fff;
	font-weight: bold;
	gap: 5px;
}

.ansim_guide_container_footer_left_tab_icon {
	width: 18px;
	height: 18px;
}

.ansim_guide_container_footer_right_tab {
	padding: 8px 16px;
	font-size: 13px;
}

.detail_check_info {
	padding: 25px 11px 25px 11px;
}

.detail_check_info_title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 17px;
    color: #7f7f7f;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 2.2px;
	padding-left: 8px;
}

.detail_check_info_title img {
	width: 22px;
	height: 22px;

	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail_check_info_title span {
	opacity: 0;
	transition: opacity 0.5s ease;
    font-family: 'basic_r', sans-serif;
}

.detail_check_info_title img.show,
.detail_check_info_title span.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_check_info_wrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	flex-wrap: nowrap;
	flex-direction: column;
}

.detail_check_info_top {
	display: flex;
	justify-content: space-between;
	gap: 0px;
	/* flex: 1 1 75px; */
	padding: 7px;
	padding-top: 0px;
	margin-top: -9px;
}

.detail_check_info_top_left_tab {
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* padding: 0px 0px 0px 11px; */
	flex: 0 0 67%;
	padding-top: 12px;
	opacity: 0;
	transform: translateX(0); /* 초기 상태로 리셋 */
	animation-fill-mode: forwards;
}

.detail_check_info_top_left_tab.show {
	animation: slideFadeInLeftToRight 0.4s ease-out forwards;
}

.detail_check_info_top_left_tab_up_line {
	font-weight: bold;
	font-size: 20px;
	/* font-family: 'radius_rr', sans-serif !important; */
}

.detail_check_info_top_left_tab_up_line_first {
	color: #074faf;
}

.detail_check_info_top_left_tab_up_line_second {
	color: #21c1b3;
}

.detail_check_info_top_left_tab_middle_line {
	font-weight: 500;
	font-size: 12px;
	line-height: 14px;
	/* gap: 2px; */
}

.detail_check_info_top_left_tab_down_line {
	padding-left: 3px;
	margin-top: 5px;
}

.detail_check_info_top_left_tab_down_line_btn {
	background: #1565ba;
	color: #fff;
	text-align: center;
	padding: 7px 6px;
	border-radius: 22px;
	font-weight: bold;
	font-size: 12px;
	width: 80%;
	cursor: pointer;

	opacity: 0;
	transition:
		background 0.16s,
		box-shadow 0.18s,
		transform 0.18s;
	animation-fill-mode: forwards;
}

.detail_check_info_top_left_tab_down_line_btn:hover {
	background: #257ce2;
	box-shadow: 0 2px 10px rgba(21, 101, 186, 0.13);
	transform: scale(1.04) translateX(0);
}

.detail_check_info_top_left_tab_down_line_btn.show {
	animation: slideFadeInLeftToRight 0.4s ease-out forwards;
}

.detail_check_info_top_right_tab {
	opacity: 0;
	transform: translateX(0); /* 초기 상태로 리셋 */
	animation-fill-mode: forwards;
	display: flex;
	align-items: center;
}

.detail_check_info_top_right_tab.show {
	animation: slideFadeInRightToLeft 0.4s ease-out forwards;
}

.detail_check_info_top_right_tab_icon {
	width: 100%;
	scale: 1.08;
	position: relative;
	top: 8px;
}

.detail_check_info_sale {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0 3px;
}

.detail_check_info_sale_title {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-bottom: 4px;
	padding-left: 13px;

	opacity: 0;
	transition: opacity 1.1s ease;
}

.detail_check_info_sale_title.show {
	animation: slideFadeInRightToLeft 1.1s ease-out forwards;
}

.detail_check_info_sale_title_line {
	border-bottom: solid 4px #e3f0f7;

	transform: translateX(100%);
	transition: all 1.5s ease;
}

.detail_check_info_sale_title_line.show {
	animation: slideRightToLeft 1.5s ease-out forwards;
}

.detail_check_info_sale_title_icon {
	width: 30px;
	height: 30px;
}

.detail_check_info_sale_title_text {
	padding-left: 9px;
	font-weight: bold;
	font-size: 16px;
	color: #676767;
}

.detail_check_info_sale_wrapper {
	display: flex;
	/* align-content: flex-start; */
	flex-direction: column;
	gap: 9px;
	margin-top: 15px;
}

.detail_check_info_sale_wrapper_content {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 10px 14px;
	background: #f6fbff;
	border-radius: 8px;
	justify-content: space-between;
	cursor: pointer;

	opacity: 0;
	transition: 
		opacity 0.5s ease,
		background 0.15s,
		box-shadow 0.18s,
		transform 0.18s;
}

.detail_check_info_sale_wrapper_content:hover {
	background: #e2f1ff;
	box-shadow: 0 2px 12px rgba(60, 120, 255, 0.09);
	transform: translateY(-1px) scale(1.02);
}

.detail_check_info_sale_wrapper_content.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_check_info_sale_wrapper_content_left_tab {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.detail_check_info_sale_wrapper_content_icon {
	width: 18px;
}

.detail_check_info_sale_wrapper_content_title {
	padding-left: 10px;
	font-weight: bold;
	font-size: 12px;
	color: #575757;
}

.detail_check_info_sale_wrapper_content_data {
	font-weight: bold;
	font-size: 13px;
	color: #555555;

	opacity: 0;
	transform: rotateX(180deg);
	transform-origin: center;
	backface-visibility: hidden;
	animation-fill-mode: forwards;
}

.detail_check_info_sale_wrapper_content_data.show {
	animation: rotateFadeInX 0.8s ease-out forwards;
}

.detail_check_info_sale_wrapper_content_data.good_status {
	color: #1c953d;
}

.detail_check_info_sale_wrapper_content_data.bad_status {
	color: #fb1c1c;
}

.detail_check_info_situation {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0 3px;
	margin-top: 15px;
}

.detail_check_info_situation_title {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-bottom: 4px;
	padding-left: 13px;

	opacity: 0;
	transition: opacity 1.1s ease;
}

.detail_check_info_situation_title.show {
	animation: slideFadeInRightToLeft 1.1s ease-out forwards;
}

.detail_check_info_situation_title_line {
	border-bottom: solid 4px #ffece6;

	transform: translateX(100%);
	transition: all 1.5s ease;
}

.detail_check_info_situation_title_line.show {
	animation: slideRightToLeft 1.5s ease-out forwards;
}

.detail_check_info_situation_title_icon {
	width: 30px;
	height: 30px;
}

.detail_check_info_situation_title_text {
	padding-left: 9px;
	font-weight: bold;
	font-size: 16px;
	color: #676767;
}

.detail_check_info_situation_wrapper {
	display: flex;
	/* align-content: flex-start; */
	flex-direction: column;
	gap: 9px;
	margin-top: 15px;
}

.detail_check_info_situation_wrapper_content {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 10px 14px;
	background: #fff9f6;
	border-radius: 8px;
	justify-content: space-between;
	cursor: pointer;

	opacity: 0;
	transition: 
		opacity 0.5s ease,
		background 0.15s,
		box-shadow 0.18s,
		transform 0.18s;
}

.detail_check_info_situation_wrapper_content:hover {
	background: #ffe8da;
	box-shadow: 0 2px 12px rgba(255, 120, 60, 0.09);
	transform: translateY(-1px) scale(1.02);
}

.detail_check_info_situation_wrapper_content.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_check_info_situation_wrapper_content_left_tab {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.detail_check_info_situation_wrapper_content_icon {
	width: 18px;
}

.detail_check_info_situation_wrapper_content_title {
	padding-left: 10px;
	font-weight: bold;
	font-size: 12px;
	color: #575757;
}

.detail_check_info_situation_wrapper_content_open_icon {
	width: 19px;
	padding-right: 7px;
}

.detail_property_info {
	padding: 25px 11px 25px 11px;
}

.detail_property_info_title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 17px;
    color: #7f7f7f;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 2.2px;
	padding-left: 8px;
}

.detail_property_info_title img {
	width: 22px;
	height: 22px;

	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail_property_info_title span {
	opacity: 0;
	transition: opacity 0.5s ease;
    font-family: 'basic_r', sans-serif;
}

.detail_property_info_title img.show,
.detail_property_info_title span.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_property_info_wrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	flex-wrap: nowrap;
	flex-direction: column;
}

.detail_property_info_banner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
	margin-bottom: 18px;
    padding: 0px 4px;
}

.detail_property_info_banner .banner_item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    padding: 5px 7px;
    border-radius: 8px;

	opacity: 0;
	transition: opacity 0.4s ease;
}

.detail_property_info_banner .banner_item.show {
	animation: slideFadeInLeftToRight 0.4s ease-out forwards;
}

.detail_property_info_banner .banner_icon {
    width: 21px;
    height: 20px;
}

.detail_property_info_banner .banner_text {
	font-size: 12px;
    font-weight: bold;
}

.detail_property_info_content {
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;

	overflow: hidden;
	opacity: 0;
	transition: all 0.3s ease;
}

.detail_property_info_content.show {
	animation: slideFadeInDownToUp20 0.5s ease-out forwards;
}

.detail_property_info_content .property_item {
	display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% / 5 - 8px);
    box-sizing: border-box;
    border-radius: 8px;
}

.detail_property_info_content .property_icon {
    width: calc(32px * var(--size));
    height: calc(38px * var(--size));
    object-fit: contain;
    margin-bottom: 9px;
}

.detail_property_info_content .property_text {
    text-align: center;
    font-size: max(12px, calc(12px * var(--size)));
    color: #5f5f5f;
    min-width: 40px;
}

.detail_property_info_more {
    font-size: 13px;
    font-weight: 600;
    color: #3171f6;
    text-align: right;
    margin-top: 12px;
    cursor: pointer;
    width: 100%;
    user-select: none;
    padding-right: 4px;

	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail_property_info_more.show {
	animation: slideFadeInDownToUp20 0.5s ease-out forwards;
}

.detail_property_info_more_img {
	width: 12px;
	height: 12px;
}

.detail_loan_info {
	padding: 25px 11px 25px 11px;
}

.detail_loan_info_title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 17px;
    color: #7f7f7f;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 2.2px;
	padding-left: 8px;
}

.detail_loan_info_title img {
	width: 22px;
	height: 22px;

	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail_loan_info_title span {
	opacity: 0;
	transition: opacity 0.5s ease;
    font-family: 'basic_r', sans-serif;
}

.detail_loan_info_title img.show,
.detail_loan_info_title span.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_loan_info_wrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 14px;
	flex-wrap: nowrap;
	flex-direction: column;
	padding: 0px 8px;
	width: 100%;
}

.detail_loan_info_top {
	display: flex;
	flex-direction: row;
	width: 100%;
	margin-bottom: 15px;
}

.detail_loan_info_top_title {
	flex: 0 0 37%;
	font-weight: bold;
	color: #737479;
	opacity: 0;
	transition: opacity 0.5s ease;
	color: #5e6174;
	/* border-radius: 3px; */
	font-size: 13px;
	/* align-items: center; */
}

.detail_loan_info_top_title.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_loan_info_top_content {
    flex: 0 0 63%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 5px;
    column-gap: 10px;
}

.detail_loan_info_top_content_tab {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 6px 5px;
	font-size: 12px;
	font-weight: bold;
	border-radius: 20px;

	opacity: 0;
	transition: opacity 0.3s ease;
}

.detail_loan_info_top_content_tab.show {
	animation: slideFadeInLeftToRight 0.3s ease-out forwards;
}

.detail_loan_info_others {
	display: flex;
	flex-direction: column;
	/* margin-top: 15px; */
	width: 100%;
	gap: 16px;
}

.detail_loan_info_others_part {
	display: flex;
	flex-direction: row;
}

.detail_loan_info_others_part_title {
	flex: 0 0 33%;
	font-weight: bold;
	display: flex;
	align-items: center;
	opacity: 0;
	transition: opacity 0.5s ease;
	color: #5e6174;
	/* border-radius: 3px; */
	font-size: 13px;
}

.detail_loan_info_others_part_title.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_loan_info_others_part_content {
	padding-left: 14px;
	font-weight: 500;
	color: #4f5057;
	display: flex;
	align-items: center;
	font-size: 13px;

	opacity: 0;
	transform: rotateX(180deg);
	transform-origin: center;
	backface-visibility: hidden;
	animation-fill-mode: forwards;
}

.detail_loan_info_others_part_content.show {
	animation: rotateFadeInX 0.8s ease-out forwards;
}

.detail_location_info {
	padding: 25px 11px 25px 11px;
}

.detail_location_info_title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 17px;
    color: #7f7f7f;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 2.2px;
	padding-left: 8px;
}

.detail_location_info_title img {
	width: 22px;
	height: 22px;

	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail_location_info_title span {
	opacity: 0;
	transition: opacity 0.5s ease;
    font-family: 'basic_r', sans-serif;
}

.detail_location_info_title img.show,
.detail_location_info_title span.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_location_info_contents {
	margin-bottom: 3px;
}

.detail_location_info_contents_mcon {
	display: inline-flex;
	background-color: #ffffff;
	color: #3d3d3d;
	padding: 5px 10px 5px 10px;
	border-radius: 6px;
	font-size: 12px;
	line-height: 1;
	position: relative;
	text-indent: 1px;
	margin-left: 5px;
	font-weight: bold;
	cursor: pointer;
	border: 1px solid #f7f7f7;
	box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
	justify-content: center;
	align-items: center;

	opacity: 0;
    transition: all 0.5s ease;
}

.detail_location_info_contents_mcon.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_location_info_contents_mcon:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	transform: translateY(-1px);
}

.detail_location_info_contents_mcon_icon {
	width: 16px;
	margin-right: 5px;
}

.detail_location_info_wrapper {
	padding: 5px 5px 10px 5px;
}

.detail_location_info_map_content {
	display: flex;
	min-height: 0;
	position: relative;
	/* border: 1px solid #ccc; */
	border-radius: 8px;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail_location_info_map_content.show {
	animation: slideFadeInRightToLeft 0.5s ease-out forwards;
}

.detail_location_info_map {
	width:100%;
	height:200px;
	position:relative;
	border-radius: 20px;
	border: solid 3px #fff;
	box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.10);
}

#detail_location_info_map.inactive_map {
	pointer-events: none;
}

.detail_location_info_map_address {
	font-weight: bold;
	margin-bottom: 17px;
	text-indent: 10px;
}

.detail_location_info_map_icon {
	width: 16px;
	height: 16px;
	margin-right: 5px;
}

.detail_location_info_map_address {
	font-size: 12px;
	margin-left: 5px;
	color: #838383;
}

.detail_location_info_map_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 2;
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 20px;
	border: solid 3px #fff;
	box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.10);
}

.detail_location_info_map_hint {
	background-color: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 10px 20px;
	border-radius: 20px;
	font-size: 14px;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.5s;
}

.detail_location_info_map_custom_infowindow {
	position: relative;
	bottom: 40px; /* 마커와 겹치지 않도록 조정 */
	width: 280px;
	text-align: center;
	border-radius: 10px; /* 둥근 테두리 적용 */
	border: 1px solid #ccc;
	background-color: #fff;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
	padding: 10px;
	font-size: 13px;
	color: #333;
	font-family: 'Pretendard Variable', sans-serif;
}

.detail_location_info_map_custom_infowindow_icon {
	width: 13px;
	height: 13px;
	margin-right: 3px;
}

.detail_location_info_map_custom_infowindow_title {
	font-weight: bold;
	margin-bottom: 5px;
}

.detail_location_info_around_content {
	list-style: none;
	padding: 0;
	margin-top: 24px;
	/* max-height: 70px; */
	overflow: hidden;
	transition: max-height 0.5s ease;
	/* display: flex; */
	/* flex-wrap: wrap; */
}

.detail_location_info_around_content_title {
	margin-left: 15px;
	font-size: 15px;
	font-weight: bold;
	color: #394566;

	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail_location_info_around_content_title.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_location_info_around_content_title_a {
	border-bottom: 2.5px solid #444f65;
}

.detail_location_info_around_content_list {
	margin-top: 20px;
	display: grid;
	grid-template-columns: 1fr 1fr;

	overflow: hidden;
	transition: max-height 0.28s;
}

.detail_location_info_around_content_list_item {
	/* flex: 1 1 48%; */ /* 가로 공간의 절반씩 차지 */
	display: flex;
	align-items: center;
	margin-bottom: 18px;
	font-size: 13px;
	font-weight: 500;

	opacity: 0;
	transform: rotateX(180deg);
	transform-origin: center;
	backface-visibility: hidden;
	animation-fill-mode: forwards;
}

.detail_location_info_around_content_list_item.show {
	animation: rotateFadeInX 0.8s ease-out forwards;
}

.detail_location_info_around_content_list_item:nth-child(odd) {
	margin-right: 2%;
}

.detail_location_info_around_content_list_icon {
	width: 18px;
	height: 18px;
	margin-right: 4px;
}

.detail_location_info_around_content_list_distance {
	display: flex;
	background-color: #74aff9;
	color: #fff;
	padding: 3px 6px 3px 6px;
	border-radius: 8px;
	font-size: 12px;
	line-height: 1;
	position: relative;
	text-indent: 1px;
	margin-left: 5px;
	font-weight: normal;
	align-items: center;
}

.detail_location_info_around_more {
	display: block;
	margin: 8px 0px 8px 8px;
	padding: 3px 10px 4px 10px;
	background-color: #6f85b7;
	color: #fff;
	border: none;
	border-radius: 20px;
	cursor: pointer;
	float: left; /* 왼쪽으로 당김 */
	font-size: 12px;
}

.detail_location_info_more {
	font-size: 13px;
	font-weight: 600;
	color: #3171f6;
	text-align: right;
	margin-top: 12px;
	cursor: pointer;
	width: 100%;
	user-select: none;
	padding-right: 4px;
}

.detail_location_info_more_img {
	width: 12px;
	height: 12px;
}

.detail_broker_info {
	padding: 25px 11px 25px 11px;
}

.detail_broker_info_title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 17px;
    color: #7f7f7f;
    font-weight: bold;
    margin-bottom: 18px;
    letter-spacing: 2.2px;
	padding-left: 8px;
}

.detail_broker_info_title img {
	width: 22px;
	height: 22px;

	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail_broker_info_title span {
	opacity: 0;
	transition: opacity 0.5s ease;
    font-family: 'basic_r', sans-serif;
}

.detail_broker_info_title img.show,
.detail_broker_info_title span.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_broker_info_wrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	flex-wrap: nowrap;
	flex-direction: column;
	padding: 0px 8px;
	width: 100%;
}

.detail_broker_info_contents {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.detail_broker_info_content {
	width: 100%;
	display: flex;
	flex-direction: row;
}

.detail_broker_info_content_title {
	flex: 0 0 40%;
	font-size: 13px;
	font-weight: bold;
	color: #484341;

	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail_broker_info_content_title.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_broker_info_content_value {
	flex: 0 0 60%;
	font-size: 14px;
	font-weight: bold;

	opacity: 0;
	transform: rotateX(180deg);
	transform-origin: center;
	backface-visibility: hidden;
	animation-fill-mode: forwards;
}

.detail_broker_info_content_value.show {
	animation: rotateFadeInX 0.8s ease-out forwards;
}

.detail_broker_info_caution {
	margin-top: 12px;
	font-size: 12px;
	font-weight: 500;
	color: #696969;
}











/********************************************************************************************************************************************************************/




















.undertag {
	font-size: max(12px, calc(12px * var(--size)));
	font-weight: 500;
    color: #a7a7a7;
	margin-left: 5px;
}

.uptag {
	font-size: max(12px, calc(13px * var(--size)));
	font-weight: bold;
    color: #002eb7;
	display: inline-block;
	white-space: nowrap;
}

.detail_checkdate_info {
	position: relative;
    color: #a7a7a7;
    font-weight: 500;
    margin-top: 7px;
    margin-bottom: -5px;
    font-size: max(12px, calc(13px * var(--size)));
}

.detail_checkdate {
	text-align: right;
}

.detail_estate_info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid #e7e7e7;
	padding: 18px 10px 18px 18px;
}

.detail_estate_content {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0,0,0,0.12);
	background: #fff;
	font-family: 'Apple SD Gothic Neo', sans-serif;
	width: calc(380px * var(--size));

	opacity: 0;
	transform: rotateX(180deg);
	transform-origin: center;
	backface-visibility: hidden;
	animation-fill-mode: forwards;
}

.detail_estate_content.show {
	animation: rotateFadeInX 0.8s ease-out forwards;
}

.detail_estate_info_header_gradient {
	background: linear-gradient(90deg, #3a8ef8, #2dd9a6);
	height: calc(60px * var(--size));
	position: relative;
}

.detail_estate_info_header_inner {
	position: absolute;
	bottom: -12px;
	background: #fff;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	padding: 12px;
	display: flex;
	align-items: center;
	width: calc(380px * var(--size));
	transition: background-color 0.2s ease;
	cursor: pointer;
}

.detail_estate_info_header_inner:hover {
	background-color: #f3f4f6;
}

.detail_estate_info_header_icon {
	width: calc(40px * var(--size));
	height: calc(40px * var(--size));
	border-radius: 50%;
	background: #f2f2f2;
	margin-right: 12px;
}

.detail_estate_info_header_text_group {
	opacity: 0;
	transform: rotateX(180deg);
	transform-origin: center;
	backface-visibility: hidden;
	animation-fill-mode: forwards;
}

.detail_estate_info_header_text_group.show {
	animation: rotateFadeInX 0.8s ease-out forwards;
}

.detail_estate_info_header_name {
	font-size: calc(16px * var(--size));
	font-weight: bold;
	color: #222;
}

.detail_estate_info_header_desc {
	font-size: calc(14px * var(--size));
	color: #3a8ef8;
	margin-top: 3px;
	font-weight: 500;
}

.detail_estate_info_body {
	padding: 16px 16px 10px;
}

.detail_estate_info_row {
	display: flex;
	align-items: flex-start;
	margin-bottom: 8px;
	font-size: calc(14px * var(--size));
	color: #444;

	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail_estate_info_row.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_estate_info_icon {
	width: calc(15px * var(--size));
	height: calc(15px * var(--size));
	margin-right: 8px;
	margin-top: 2px;
}

.detail_estate_info_label {
	font-weight: 500;
	margin-right: 6px;
    min-width: 33px;
}

.detail_estate_info_value {
	color: #222;
}

.detail_estate_info_row_dummy {
	width: calc(32px * var(--size));
	height: calc(32px * var(--size));
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	margin-right: 10px;
}

.detail_estate_info_row_contents {
	margin-left: 6px;
}

.detail_estate_info_row_contents_mcon {
	display: inline-flex;
	background-color: #ffffff;
	color: #3d3d3d;
	padding: 5px 10px 5px 10px;
	border-radius: 6px;
	font-size: 12px;
	line-height: 1;
	position: relative;
	text-indent: 1px;
	margin-left: 5px;
	font-weight: bold;
	cursor: pointer;
	border: 1px solid #f7f7f7;
	box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
	justify-content: center;
	align-items: center;
	transition: all 0.5s ease;
}

.detail_estate_info_row_contents_mcon:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	transform: translateY(-1px);
}

.detail_estate_info_row_contents_mcon_icon {
	width: 16px;
	margin-right: 5px;
}

.detail_estate_info_footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-top: 1px solid #eee;
	background: #ffffff;
}

.detail_estate_info_footer_profile {
	display: flex;
	align-items: center;
}

.detail_estate_info_footer_icon {
	width: calc(36px * var(--size));
	height: calc(36px * var(--size));
	border-radius: 50%;
	background: #f2f2f2;
	margin-right: 12px;

	opacity: 0;
	transform: rotateX(180deg);
	transform-origin: center;
	backface-visibility: hidden;
	animation-fill-mode: forwards;
}

.detail_estate_info_footer_icon.show {
	animation: rotateFadeInX 0.8s ease-out forwards;
}

.detail_estate_info_footer_text {
	display: flex;
	flex-direction: column;
}

.detail_estate_info_footer_label {
	font-size: max(12px, calc(12px * var(--size)));
	color: #333;
	line-height: 1;

	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail_estate_info_footer_label.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_estate_info_footer_name {
	font-weight: bold;
	color: #222;
	font-size: calc(14px * var(--size));
	line-height: 1.4;
	margin-top: 3px;

	opacity: 0;
	transition: opacity 0.5s ease;
}

.detail_estate_info_footer_name.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_estate_info_reviewhome_btn {
    display: inline-flex;
    width: 120px;
    background-color: #fdfeff;
    color: #3d3d3d;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1;
    margin-left: 5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #f2f2f2;
    box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
    justify-content: center;
    align-items: center;
    gap: 3px;

	scale: 0;
	opacity: 0;
	transition: all 0.5s ease;
}

.detail_estate_info_reviewhome_btn:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	transform: translateY(-1px);
}

.detail_estate_info_reviewhome_btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(44, 109, 239, 0.25);
}

.detail_estate_info_reviewhome_btn.show {
	animation: ZoomIn 0.5s ease-out forwards;
}

.detail_estate_info_reviewhome_btn_icon {
	width: 19px;
	height: 19px;
	margin-right: 6px;
}

.detail_estate_info_call_btn {
	display: flex;
	align-items: center;
	background: #3a8ef8;
	color: #fff;
	font-size: max(12px, calc(13px * var(--size)));
	font-weight: bold;
	border-radius: 8px;
	padding: 9px 14px;
	border: none;

	scale: 0;
	opacity: 0;
	transition: all 0.5s ease;
}

.detail_estate_info_call_btn.show {
	animation: ZoomIn 0.5s ease-out forwards;
}

.detail_estate_info_call_btn_icon {
	width: calc(14px * var(--size));
	height: calc(14px * var(--size));
	margin-right: 6px;
}

.estate_vacant_sale_image_slide {
    width: 100%;
    margin-top: 23px;
}

.estate_vacant_sale_title {
	font-size: calc(16px * var(--size));
    font-weight: bold;
    margin-bottom: 14px;

	opacity: 0;
	transition: opacity 0.5s ease;
}

.estate_vacant_sale_title.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.estate_vacant_sale_thumbnail_container {
    display: flex;
    gap: 16px;
    overflow-x: auto;
	padding-bottom: 10px;
}

.estate_vacant_sale_card {
    width: calc(163px * var(--size));
    background-color: white;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    font-family: 'Apple SD Gothic Neo', sans-serif;
    flex-shrink: 0;
    cursor: pointer;

	opacity: 0;
	transition: all 0.5s ease;
}

.estate_vacant_sale_card.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.estate_vacant_sale_card:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	transform: translateY(-1px);
}

.estate_vacant_sale_card_image_wrapper {
    width: 100%;
    height: calc(120px * var(--size));
	position: relative;
    overflow: hidden;
    background-color: #f8f8f8;
}

.estate_vacant_sale_card_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.estate_vacant_sale_card_info {
    padding: 10px;
    text-align: left;
    color: #333;
    font-size: max(12px, calc(13px * var(--size)));
}

.estate_price {
    font-weight: bold;
    font-size: calc(14px * var(--size));
    margin-bottom: 4px;
    color: #111;
}

.estate_address {
    font-size: max(12px, calc(12px * var(--size)));
    color: #666;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.estate_summary {
    font-size: max(12px, calc(12px * var(--size)));
    color: #999;
}

.detail_prime_estate_info {
	display: none;
	padding: 16px;
	background: #fff;
	border-bottom: 1px solid #e7e7e7;
	position: relative;
}

.detail_prime_estate_info .header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: calc(15px * var(--size));
	font-weight: 800;
	color: #2d3340;
	margin-top: 5px;
	margin-bottom: 18px;

	opacity: 0;
	transform: translateX(0);
	animation-fill-mode: forwards;
}

.detail_prime_estate_header_title {
	color: #2d3340;
}

.detail_prime_estate_header_word {
	position: relative;
	display: inline;
	padding: 0;
	border: 0;
	background: linear-gradient(180deg, #d8ad3b 0%, #8c6100 54%, #c99b22 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: #9b6b00;
	-webkit-text-fill-color: transparent;
	font-weight: 900;
	text-shadow: none;
}

.detail_prime_estate_header_word::after {
	content: none;
}

.detail_prime_estate_info .header.show {
	animation: slideFadeInLeftToRight 0.4s ease-out forwards;
}

.detail_prime_estate_header_badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px 9px;
	border-radius: 999px;
	background: linear-gradient(135deg, #17213a 0%, #2f68d8 45%, #e2b747 100%);
	color: #fff;
	font-size: max(12px, calc(10px * var(--size)));
	font-weight: 800;
	box-shadow: 0 4px 11px rgba(47, 104, 216, 0.22);
}

.detail_prime_estate_info_content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.detail_near_estate_card.detail_prime_estate_card {
	position: relative;
	overflow: hidden;
	border-color: #e4e7ee;
	background: #fff;
	box-shadow: 0 4px 12px rgba(31, 45, 74, 0.07);
}

.detail_near_estate_card.detail_prime_estate_card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, #2459b9 0%, #d6a735 100%);
}

.detail_near_estate_card.detail_prime_estate_card:hover {
	background: #fcfdff;
	box-shadow: 0 7px 16px rgba(31, 45, 74, 0.1);
}

.detail_prime_estate_rank_badge {
	position: absolute;
	display: none;
	top: 8px;
	right: 8px;
	min-width: 34px;
	padding: 3px 8px;
	border-radius: 999px;
	background: #1f2d4a;
	color: #ffdf74;
	font-size: max(12px, calc(11px * var(--size)));
	font-weight: 800;
	text-align: center;
	box-shadow: 0 4px 10px rgba(31, 45, 74, 0.18);
}

.detail_near_estate_area_tag.detail_prime_estate_area_tag {
	background: #34445f;
}

.detail_near_estate_title.detail_prime_estate_title {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	color: #252b36;
}

.detail_near_estate_title.detail_prime_estate_title > span:first-child {
	background: linear-gradient(110deg, #202a3f 0%, #202a3f 34%, #2f68d8 48%, #c39a2d 55%, #202a3f 70%, #202a3f 100%);
	background-size: 260% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: #202a3f;
	-webkit-text-fill-color: transparent;
	animation: primeEstateNameShine 3.07s ease-in-out infinite;
}

@keyframes primeEstateNameShine {
	0% {
		background-position: 120% 50%;
	}
	58% {
		background-position: -20% 50%;
	}
	100% {
		background-position: -20% 50%;
	}
}

.detail_prime_estate_title_badge {
	display: inline-flex;
	position: relative;
	bottom: 1px;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 2px 8px 2px 6px;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%);
	border: 1px solid rgba(128, 157, 207, 0.52);
	color: #315990;
	font-size: max(12px, calc(10px * var(--size)));
	font-weight: 800;
	box-shadow:
		0 1px 3px rgba(31, 45, 74, 0.07),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.detail_prime_estate_title_badge::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: linear-gradient(135deg, #2f68d8 0%, #d6a735 100%);
	box-shadow: 0 0 0 2px rgba(47, 104, 216, 0.11);
}

.detail_near_estate_row_request_btn.detail_prime_estate_row_request_btn {
	gap: 6px;
	background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
	border-color: #bfd2f4;
	color: #285fb8;
	box-shadow:
		0 3px 8px rgba(39, 114, 252, 0.10),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.detail_near_estate_row_request_btn.detail_prime_estate_row_request_btn::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: linear-gradient(135deg, #2f68d8 0%, #d6a735 100%);
	box-shadow: 0 0 0 3px rgba(47, 104, 216, 0.10);
	flex-shrink: 0;
}

.detail_near_estate_row_request_btn.detail_prime_estate_row_request_btn:hover {
	background: linear-gradient(180deg, #ffffff 0%, #eaf2ff 100%);
	border-color: #97b8ef;
	color: #164fa9;
	box-shadow:
		0 5px 13px rgba(39, 114, 252, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.detail_near_estate_row_request_btn.detail_prime_estate_row_request_btn:active {
	background: #dfeaff;
	box-shadow: 0 2px 7px rgba(39, 114, 252, 0.14);
}

.detail_near_estate_info {
	padding: 16px;
	background-color: #fff;
	border-bottom: 1px solid #e7e7e7;
}

.detail_near_estate_info .header {
	font-size: calc(15px * var(--size));
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 18px;

	opacity: 0;
	transform: translateX(0); /* 초기 상태로 리셋 */
	animation-fill-mode: forwards;
}

.detail_near_estate_info .header.show {
	animation: slideFadeInLeftToRight 0.4s ease-out forwards;
}

.detail_near_estate_info_content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.detail_near_estate_card {
	display: flex;
    gap: 6px;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 11px 9px 11px 9px;
    align-items: flex-start;
    background-color: #fff;
    cursor: pointer;

	opacity: 0;
	transition: all 0.5s ease;
}

.detail_near_estate_card.show {
	animation: slideFadeInLeftToRight 0.5s ease-out forwards;
}

.detail_near_estate_card:hover {
	background-color: #f3f4f6;
}

.detail_near_estate_thumb_wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 80px;
	flex-shrink: 0;
}

.detail_near_estate_image {
	width: 68px;
	height: 75px;
	background-image: url('/images/no_image.png');
	background-size: cover;
	background-position: center;
	border-radius: calc(19px * var(--size));
	margin-bottom: 4px;
}

.detail_near_estate_area_tag {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 65px;
	padding: 3px 6px;
	background: #555;
	border-radius: 4px;
	font-size: max(12px, calc(11px * var(--size)));
	color: white;
}

.detail_near_estate_area_icon {
	width: calc(13px * var(--size));
	height: calc(13px * var(--size));
	flex-shrink: 0;
}

.detail_near_estate_area_text {
	margin-left: 4px;
	flex-grow: 1;
	text-align: center;
}

.detail_near_estate_text {
	width: 100%;
	padding-top: 7px;
}

.detail_near_estate_title {
	font-size: calc(14px * var(--size));
	font-weight: bold;
	margin-bottom: 8px;
	color: #414141;
}

.detail_near_estate_row {
	display: flex;
	align-items: center;
	font-size: calc(14px * var(--size));
	color: #444;
	margin-bottom: 4px;
}

.detail_near_estate_row_name_phone {
	width: 100%;
	display: flex;
	gap: 15px;
}

.detail_near_estate_row_name {
}

.detail_near_estate_row_phone {
	display: flex;
}

.detail_near_estate_row.detail_near_estate_row_request {
	margin-top: 11px;
}

/* 방 정보 전달하고 상담받기 버튼 */
.detail_near_estate_row_request_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 18px;
	background: #f6fbff;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: #4c8fd3;
	box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.08);
	border: 1px solid #e1edf7;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color 0.18s ease-out,
		color 0.18s ease-out,
		box-shadow 0.18s ease-out,
		transform 0.12s ease-out;
}

/* hover – 살짝 강조 */
.detail_near_estate_row_request_btn:hover {
	background: #e5f3ff;
	color: #0b65c8;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
	transform: translateY(-1px);
}

/* 클릭 시 살짝 눌리는 느낌 */
.detail_near_estate_row_request_btn:active {
	background: #d6e9ff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	transform: translateY(0);
}

.detail_near_estate_icon {
	display: inline-block;
	width: calc(14px * var(--size));
	height: calc(14px * var(--size));
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-right: 6px;
	flex-shrink: 0;
	vertical-align: middle;
}

.icon-estate-rep {
	background-image: url('/images/icon_estate_rep.png');
}

.icon-estate-call {
	background-image: url('/images/icon_estate_call.png');
}

.icon-estate-room {
	background-image: url('/images/icon_estate_room.png');
}

.detail_near_estate_label {
	min-width: 50px;
	font-weight: 500;
	color: #555;
}

.detail_near_estate_value {
	color: #373737;
}

.detail_near_estate_value_downline {
	padding-left: 69px;
	margin-top: 2px;
	font-size: max(12px, calc(13px * var(--size)));
	color: #373737;
	word-break: break-word;
}

.kakao_share_btn {
	background-color: #f7e111;
	color: #000000 !important; 
	font-weight: bold !important;
}

.kakao_share_btn img {
	width: calc(28px * var(--size));
	margin-right: 5px;
}

.detail_in_content_bar {	
	width: 100%;
    height: calc(7px * var(--size));
    border-bottom: 1px solid rgb(230 230 230);
    border-top: 1px solid rgb(230 230 230);
    background-color: rgb(242 242 242);
}

.detail_footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: calc(53px * var(--size));
    background-color: #ffffff;
    padding: 3px;
    gap: 6px;
}

.detail_footer_left_btn {
	flex: 0 0 49%;
	height: 95%;
	border: 1px solid #5e93cb;
	border-radius: 5px;
}

.send_to_request_sms_btn {
	width: 100%;
	display: flex;
	color: #4190e4;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 6px;
	font-weight: bold;
	font-size: 13px;
}

.send_to_request_sms_btn_img {
	width: 20px;
	height: 20px;

}

.detail_footer_right_btn {
	flex: 0 0 49%;
	height: 95%;
	border: 1px solid #4190e4;
	border-radius: 5px;

}

.to_calling_btn {
	width: 100%;
	display: flex;
	color: #ffffff;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 6px;
	font-weight: bold;
	font-size: 13px;
	background-color: #4190e4
}

.to_calling_btn_img {
	width: 20px;
	height: 20px;
}

/********************************/
/****** 여기서 상세 정의 css 끝 ******/
/********************************/

/********************************/
/****** 여기서 이미지 뷰어 css 시작 ******/
/********************************/

.image_viewer_container {
	position: fixed;
    bottom: -180%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    transition: bottom 0.5s ease-in-out;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 999;
    justify-content: space-around;
    align-content: center;
}

.image_viewer_container.show {
	bottom: 0;
}

.image_viewer {    
	position: relative;
    width: 48.2%;
    height: calc(700px * var(--size));
    padding: 10px;
    margin-top: -115px;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.image_viewer video {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	top: 0;
	left: 0;
}

.image_viewer img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	top: 0;
	left: 0;
}

.main_nav_button {
	cursor: pointer;
	font-size: calc(60px * var(--size));
	padding: 20px 10px;
	user-select: none;
	color: #808080;
	transition: color 0.3s;
	font-weight: bold;
	font-family: 'radius_rr', sans-serif;
	margin-top: -110px;
}

.main_nav_button:hover {
	color: #fff;
}

.close_button {
	position: absolute;
	top: 20px;
	right: 20px;
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	border-radius: 10px;
	padding: 5px 10px;
	cursor: pointer;
	z-index: 1000;
	width: calc(55px * var(--size));
	height: calc(55px * var(--size));
}

.close_button img {
	width: calc(28px * var(--size));
	height: calc(28px * var(--size));
}

#loading {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	top: -55px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.05);
}

.dot {
	width: calc(8px * var(--size));
	height: calc(8px * var(--size));
	margin: 0 4px;
	background-color: #fff;
	border-radius: 50%;
	animation: dotPulse 1s infinite ease-in-out;
}

.dot:nth-child(1) {
	animation-delay: 0s;
}

.dot:nth-child(2) {
	animation-delay: 0.2s;
}

.dot:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes dotPulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.5);
	}
}

.zoom_hint {
	display: block;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 10px 20px;
	border-radius: 20px;
	font-size: calc(14px * var(--size));
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.5s;
}

.zoom_hint.show {
	opacity: 1;
}

.zoom_hint.hide {
	opacity: 0;
}

.other_room_hint {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 8px 16px;
	border-radius: 12px;
	font-size: max(12px, calc(12px * var(--size)));
	white-space: nowrap;
	opacity: 1;
	transition: opacity 0.5s;
}

.per_count {
	display: block;
    position: absolute;
    top: 3%;
    left: 7%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 7px 20px;
    border-radius: 12px;
    font-size: calc(14px * var(--size));
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.5s;
}

.image_thumbnail_container {
	max-width: 100%;
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
	padding: 10px 0;
	z-index: 1000;
}

.nav_button {
	cursor: pointer;
	font-size: calc(48px * var(--size));
	padding: 20px 10px;
	user-select: none;
	color: #808080;
	transition: color 0.3s;
	font-weight: bold;
	font-family: 'radius_rr', sans-serif;
}

.nav_button:hover {
	color: #fff;
}

.image_thumbnail {
	display: flex;
	justify-content: flex-start;
	gap: 10px;
	overflow: hidden;
	white-space: nowrap;
	flex: 1;
}

.thumbnail {
	max-width: none !important;
	max-height: none !important;
	width: calc(150px * var(--size));
	height: calc(100px * var(--size));
	cursor: pointer;
	object-fit: cover;
	flex: 0 0 auto;
	border: 2px solid transparent;
	border-radius: 8px;
}

.thumbnail.selected {
	border-color: #007bff;
}

.thumbnail-wrapper {
	position: relative;
	display: inline-block;
}

.thumbnail-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: 8px;
}

.thumbnail-wrapper:hover .thumbnail-overlay {
	display: block;
}

/********************************/
/****** 여기서 이미지 뷰어 css 끝 ******/
/********************************/








/********************************/
/****** 여기서 중개사무소 css 시작 ******/
/********************************/

#estate_detail {
	position: absolute;
	z-index: 4;
	right: 0px; /* 초기 위치를 화면 오른쪽 밖으로 설정 */
	width: calc(405px * var(--size));
	height: 100%;
	overflow-y: auto; /* 세로 스크롤 추가 */
	border-left: 1px solid #ccc; /* 구분선 추가 (선택사항) */
	border-right: 1px solid #ccc; /* 구분선 추가 (선택사항) */
	padding: 0px 0px 0px 0px;
	overflow: hidden;
	background-color: white;
	transition: right 0.5s ease-in-out; /* 슬라이드 애니메이션 */
}

#estate_detail.show {
	right: calc(600px * var(--size)); /* 화면 안으로 이동 */
}

.estate_detail_loading-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #2571fe;
}

.estate_detail_loading-spinner {
	border: 4px solid #f3f3f3; /* 회색 테두리 */
	border-top: 4px solid #2571fe; /* 파란색 테두리 (회전 효과를 줄 부분) */
	border-radius: 50%; /* 원 모양 */
	width: calc(50px * var(--size));
	height: calc(50px * var(--size));
	animation: estate_spin 1s linear infinite; /* 회전 애니메이션 */
	margin: 0 auto; /* 가로 중앙 정렬 */
}

.estate_detail_loading-text {
	font-size: calc(15px * var(--size));
	color: #2571fe;
	display: block;
	margin-top: 13px; /* 스피너와의 간격 */
	font-weight: 500;
}

@keyframes estate_spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 헤더 */
.estate_detail_header {
	position: relative;
	height: calc(105px * var(--size));
	overflow: hidden;
	border-bottom: solid 3px #555555;
	margin-bottom: 3px;
}

.estate_detail_header_bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.estate_detail_header_inner {
	position: absolute;
	top: 55%;
	left: 42%;
	transform: translate(-42%, -55%);
	display: flex;
	align-items: center;
	width: fit-content;
	max-width: 90%;	
}

.estate_detail_header_img {
	width: calc(52px * var(--size));
	height: calc(52px * var(--size));
	border-radius: 50%;
	object-fit: cover;
	/* 여기가 핵심 */
	margin-right: 12px;
	flex-shrink: 0;
}

.estate_detail_header_texts {
	color: #ffffff;
	white-space: nowrap;
	margin-top: -6px;
}

.estate_detail_header_texts_main {
	white-space: nowrap;			/* 줄바꿈 안함 */
	overflow: hidden;				/* 넘치면 자름 */
	text-overflow: ellipsis;		/* 너무 길면 ... 표시 */
	font-size: calc(19px * var(--size));
	font-weight: bold;
	line-height: 1.2;
}

.estate_detail_header_texts_sub {
	font-size: max(12px, calc(13px * var(--size)));
	line-height: 1.2;
	margin-top: 4px;
}

.estate_detail_header_close {
	position: absolute;
    top: 6px;
    right: 8px;
    cursor: pointer;
    width: calc(13px * var(--size));
}

#estate_detail_in {
    position: relative;
    height: 83vh;
    overflow: hidden; /* 기본 스크롤 숨김 */
    padding-bottom: 20px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* 스크롤 레일 */
#estate_detail_in .ps__rail-y {
    width: calc(10px * var(--size));
    right: 0;
    background: transparent; /* 🔥 회색 배경 없앰 */
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
}

/* 스크롤 중일 때만 레일 보이기 */
#estate_detail_in.scrolling .ps__rail-y {
    opacity: 1 !important;
}

/* 스크롤 thumb (파란색 바) */
#estate_detail_in .ps__thumb-y {
    background-color: #c6e4fb;
    border-radius: 10px;
    border: none;
}

/* 마우스로 클릭 시 커지는 효과 최소화 */
#estate_detail_in .ps__thumb-y:active {
    transform: scaleX(1) scaleY(1.1); /* 살짝만 확대 */
    transition: transform 0.1s ease;
}

/* 회색 선 */
.estate_detail_in_line {
	width: calc(100% - 36px); /* 좌우 18px 여백 */
	height: 1px;
	background-color: #e1e1e1;
	margin: 25px 18px 0 18px;
}

/* 회색 바 */
.estate_detail_in_content_bar {	
    width: 100%;
    height: calc(7px * var(--size));
    border-bottom: 1px solid rgb(230 230 230);
    border-top: 1px solid rgb(230 230 230);
    background-color: rgb(237 234 234);
    margin: 35px 0 30px 0;
}

/* 정보 라인 */
.estate_detail_in_info_item {
	display: flex;
	align-items: center;
	padding: 14px 18px 0 18px;
}

.estate_detail_in_info_item_icon_wrapper {
	width: calc(32px * var(--size));
	height: calc(32px * var(--size));
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	margin-right: 10px;
}

.estate_detail_in_info_item_icon {
	width: calc(30px * var(--size));
	height: calc(30px * var(--size));
}

.estate_detail_in_info_item_text {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
}

.estate_detail_in_info_item_label {
	font-size: max(12px, calc(13px * var(--size)));
	color: #333;
	margin-bottom: 2px;
}

.estate_detail_in_info_item_value {
	font-size: calc(15px * var(--size));
	font-weight: 500;
	color: #000;
	word-break: keep-all;
	line-height: 1.4;
}

.estate_detail_in_info_item_bottomline {
	padding: 2px 0 0 60px; /* 아이콘(32) + margin(10) + 여유 */
}

.estate_detail_in_info_item_dummy {
	width: calc(23px * var(--size));
	height: calc(32px * var(--size));
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	margin-right: 10px;
}

.estate_detail_in_info_item_contents {

}

.estate_detail_in_info_item_contents_mcon {
	display: inline-flex;
	background-color: #ffffff;
	color: #3d3d3d;
	padding: 5px 10px 5px 10px;
	border-radius: 6px;
	font-size: 12px;
	line-height: 1;
	position: relative;
	text-indent: 1px;
	margin-left: 5px;
	font-weight: bold;
	cursor: pointer;
	border: 1px solid #f7f7f7;
	box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
	justify-content: center;
	align-items: center;
	transition: all 0.5s ease;
}

.estate_detail_in_info_item_contents_mcon:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	transform: translateY(-1px);
}

.estate_detail_in_info_item_contents_mcon_icon {
	width: 16px;
	margin-right: 5px;
}

/* 소개 섹션 */
.estate_detail_in_intro_section {
	padding: 21px 21px 7px 21px;
	margin-top: 8px;
}

.estate_detail_in_intro_section_title {
	display: flex;
	align-items: center;
	font-size: calc(17px * var(--size));
	font-weight: bold;
	margin-bottom: 12px;
}

.estate_detail_in_intro_section_icon {
	width: calc(22px * var(--size));
	height: calc(22px * var(--size));
	margin-right: 8px;
}

.estate_detail_in_intro_section_text_wrapper {
	overflow: hidden;
	transition: max-height 0.3s ease;
	padding-left: 12px;
}

.estate_detail_in_intro_section_text {
	font-size: calc(14px * var(--size));
	line-height: 1.6;
	color: #333;
	word-break: break-word;
	overflow-wrap: break-word;
}

.estate_detail_in_intro_section_more_link {
	display: block;
	text-align: right;
	color: #2571fe;
	font-weight: bold;
	font-size: calc(14px * var(--size));
	cursor: pointer;
	user-select: none;
	margin-top: 10px;
}

.estate_detail_in_intro_section_more_link:hover {
	color: #000000;
}

/* 중개사 섹션 */
.estate_detail_in_brokers_section {
	padding: 25px 21px 10px 21px;
}

.estate_detail_in_brokers_section_title {
	display: flex;
	align-items: center;
	font-size: calc(17px * var(--size));
	font-weight: bold;
	margin-bottom: 25px;
}

.estate_detail_in_brokers_section_icon {
	width: calc(30px * var(--size));
	height: calc(30px * var(--size));
	margin-right: 8px;
}

.estate_detail_in_broker_list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
}

.estate_detail_in_broker_card {
	display: flex;
	align-items: center;
	width: calc(50% - 6px);
	padding: 10px 12px;
	border-radius: 10px;
	background-color: #ffffff;
	box-shadow: 0 0 0 1px #dfdfdf;
}

.estate_detail_in_broker_icon {
	width: calc(36px * var(--size));
	height: calc(36px * var(--size));
	margin-right: 10px;
    border-radius: 50%;
}

.estate_detail_in_broker_info {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.estate_detail_in_broker_name {
	font-size: calc(14px * var(--size));
	font-weight: 600;
	color: #222;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.estate_detail_in_broker_phone {
	font-size: max(12px, calc(12px * var(--size)));
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 중개 사무소 매물 탑 */
.estate_detail_in_result_header {
	padding: 12px;      /* margin 제거 */
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 1) 70%,
		rgba(232, 232, 232, 0.75) 92%,
		rgba(232, 232, 232, 0.05) 100%
	);
}

.estate_detail_in_result_header_inner {
	box-sizing: border-box;
	padding: 14px 16px;
	border: 1px solid #ddd;
	border-radius: 12px;
	background: white;
	box-shadow: 0 3px 4px rgba(0, 0, 0, 0.08);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: calc(14px * var(--size));
	line-height: 1;
}

.fixed_estate_detail_in_result_header {
	position: sticky;
	top: 0;
	z-index: 10;
}

.estate_detail_in_result_text_wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* padding: 10px 16px; */
	padding-top: 5px;
	border-radius: 12px;
	background: #fff;
	/* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); */
	font-family: 'Pretendard', sans-serif;
}

.estate_detail_in_result_text_label {
	font-size: max(12px, calc(13px * var(--size)));
	color: #555;
	margin-bottom: 4px;
}

.estate_detail_in_result_text_value {
	font-size: calc(17px * var(--size));
	font-weight: bold;
	color: #111;
}

/* 아이콘 전체 묶음 */
.estate_detail_in_result_icons {
	display: flex;
	align-items: center;
}

/* 정렬 아이콘 + 텍스트 묶음 */
.estate_detail_in_filter_result_sort_wrap {
	display: flex;
	align-items: center;
	position: relative;
	transition: all 0.3s ease;
}

/* 개별 아이콘 */
.estate_detail_in_result_icons img {
	margin-top: 2px;
	width: calc(20px * var(--size));
	height: calc(20px * var(--size));
	cursor: pointer;
	vertical-align: middle;
}

/* 거래 유형 아이콘 */
.estate_detail_in_type_icon_wrap {
    width: calc(20px * var(--size));
	transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-20px);
}

/* 정렬 아이콘 + 텍스트 묶음 */
.estate_detail_in_sort_icon_wrap {
	width: calc(20px * var(--size));
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateX(-10px); /* 아이콘 왼쪽으로 밀림 */
}

/* 중개 사무소 매물 탑 정렬 */
#estate_detail_in_result_sort_first,
#estate_detail_in_result_sort_second {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#estate_detail_in_result_type_dropdown,
#estate_detail_in_result_sort_first,
#estate_detail_in_result_sort_second {
	width: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: width 0.3s ease, margin-left 0.3s ease, background 0.2s ease;
	font-size: max(12px, calc(13px * var(--size)));
	color: #222;
	cursor: pointer;
}

/* 확장된 상태에서 hover 효과 */
.estate_detail_in_result_type_dropdown:hover,
.estate_detail_in_result_sort_first:hover,
.estate_detail_in_result_sort_second:hover {
	color: #000;
	font-weight: 500;
}

.estate_detail_in_result_sort_text {
	background-color: transparent;
	transition: background-color 0.2s ease;
	padding: 2px 4px;
	border-radius: 4px;
}

.estate_detail_in_result_type_dropdown:hover .estate_detail_in_result_sort_text,
.estate_detail_in_result_sort_first:hover .estate_detail_in_result_sort_text,
.estate_detail_in_result_sort_second:hover .estate_detail_in_result_sort_text {
	background-color: rgba(33, 33, 33, 0.07);
}

/* 중개 사무소 매물 탑 정렬 드롭다운 */
.estate_detail_in_sort_dropdown_absolute {
	position: absolute;
	right: 12px;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 14px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
	overflow: hidden;
	display: none;
	z-index: 12;
	min-width: calc(160px * var(--size));
	animation: dropdownSlide 0.2s ease;
	border: 1px solid rgba(0, 0, 0, 0.05);
}

@keyframes dropdownSlide {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.estate_detail_in_result_sort_column {
	display: flex;
	flex-direction: column;
	padding: 8px 0;
}

.estate_detail_in_result_sort_column:last-child {
	margin-right: 0;
}

.estate_detail_in_result_sort_item {
	padding: 10px 16px;
	font-size: max(12px, calc(12px * var(--size)));
	color: #222;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.estate_detail_in_result_sort_item:hover {
	background-color: rgba(0, 0, 0, 0.06);
	color: #111;
	font-weight: 500;
	border-left: 3px solid #111;
}

.estate_detail_in_result_sort_item.selected {
	color: #000;
	font-weight: 600;
	position: relative;
}

/* 선택된 항목 왼쪽에 강조선 */
.estate_detail_in_result_sort_item.selected::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background-color: #111;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

/* 비활성화 스타일 */
.estate_detail_in_result_sort_item.disabled {
	color: #aaa;
	cursor: default;
	pointer-events: none;
	background-color: transparent;
	font-weight: normal;
}

/* hover 시에도 아무 반응 없음 (선택자 우선순위로 재차 방지) */
.estate_detail_in_result_sort_item.disabled:hover {
	background-color: transparent;
	border-left: none;
}

/* 중개 사무소 매물 종류 섹션 */
.estate_detail_in_transaction_section {
	display: flex;
	justify-content: space-between;
	padding: 0px 15px;
	gap: 10px;
}

.estate_detail_in_transaction_card {
	flex: 1;
	background: white;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	border-radius: 12px;
	text-align: center;
	padding: 15px 10px;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
}

.estate_detail_in_transaction_card:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	transform: translateY(-1px);
}

.estate_detail_in_transaction_card.active {
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	transform: translateY(-1px);
	border: 1px solid #ddd; 
}

.estate_detail_in_transaction_icon {
	width: calc(40px * var(--size));
	height: calc(40px * var(--size));
	margin-bottom: 10px;
}

.estate_detail_in_transaction_text {
	font-size: calc(14px * var(--size));
	font-weight: 500;
	color: #333;
}

/* 중개 사무소 매물 목록 */
.estate_detail_in_list_wrap {
	padding: 10px 0;
}

.estate_detail_in_list_item {
	display: flex;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #ddd;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	margin: 0 12px 16px;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	width: 94%;
	height: calc(131px * var(--size));
}

.estate_detail_in_list_item:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	transform: translateY(-1px);
}

.estate_detail_in_list_thumb {
	position: relative;
	width: 33.5%;
	height: 100%;
	flex-shrink: 0;
}

.estate_detail_in_list_thumb img:first-child {
	width: 100%;
	height: 100%;
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
}

.estate_detail_in_list_thumb_play {
	position: absolute;
	right: 6px;
	bottom: 6px;
	width: calc(24px * var(--size));
	height: calc(24px * var(--size));
}

.list_left_tab_check.for_estate_list_in_check {
	right: 6px;
    top: 6px;
    width: 17px;
    height: 17px;
}

.estate_detail_in_list_info {
    flex: 1;
    padding: 9px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    gap: 1px;
}

.estate_detail_in_list_tags {
	display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 2px;
    font-size: max(12px, calc(11.5px * var(--size)));
    margin-bottom: 5px;
    line-height: 1.3;
}

.estate_detail_in_list_tags span {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	padding: 2px 5px;
	background: #f7f7f7;
	border-radius: 4px;
	white-space: nowrap;
	color: #656565;
}

.estate_detail_in_tag_icon {
	width: calc(12px * var(--size));
	height: calc(12px * var(--size));
	margin-right: 3px;
	vertical-align: middle;
}

/* 유형 + 월세가능 */
.estate_detail_in_list_type {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
	padding-right: 13px;
}

.estate_detail_in_list_type_left {
	font-size: max(12px, calc(11px * var(--size)));
	color: #444;
	display: flex;
	align-items: center;
}

.estate_detail_in_list_type_right {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: max(12px, calc(11px * var(--size)));
    color: #777777;
}

.estate_detail_in_list_type_right img {
	width: calc(12px * var(--size));
	height: calc(12px * var(--size));
}

/* 전세 / 가격 */
.estate_detail_in_list_price_row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
	padding-right: 13px;
}

.estate_detail_in_list_price_type {
    font-size: calc(14px * var(--size));
    font-weight: 500;
    color: #454545;
}

.estate_detail_in_list_price_value {
	font-size: calc(14px * var(--size));
    font-weight: 500;
    color: #454545;
}

/* 상세 정보 */
.estate_detail_in_list_detail {
	font-size: max(12px, calc(12px * var(--size)));
	color: #666;
	margin-bottom: 2px;
}

.estate_detail_in_list_desc {
	font-size: max(12px, calc(12px * var(--size)));
	color: #999;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 90%;
	/* padding-right: 4px; */
}

/* 중개 사무소 상세 푸터 */
.estate_detail_footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 42px;
    /* background-color: var(--color-primary); */
    background-color: #6B7280;
}

.estate_detail_footer button{
	width: 100%;
    height: 100%;
    /* width: 30%; */
    /* height: 60%; */
    /* border-radius: 10px; */
    /* background-color: var(--color-white); */
    font-size: max(12px, calc(13px * var(--size)));
    /* font-weight: 650; */
    color: var(--color-white);
    font-weight: 600;
}

/********************************/
/****** 여기서 중개사무소 css 끝 ******/
/********************************/

/********************************/
/****** 여기서 토글용 탑 리스트 기능들 css 시작 ******/
/********************************/

#top_title_text_wrap_sale {
	position: absolute;
	left: 15px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

#top_title_text_wrap_sale.show {
	animation: slideFadeInRightToLeft50 0.3s ease-out forwards;
}

#top_title_text_wrap_sale.hide {
	animation: slideFadeOutLeftToRight50 0.3s ease-out forwards;
}

#top_title_text_wrap_member {
	position: absolute;
	left: 15px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

#top_title_text_wrap_member.show {
	animation: slideFadeInLeftToRight50 0.3s ease-out forwards;
}

#top_title_text_wrap_member.hide {
	animation: slideFadeOutRightToLeft50 0.3s ease-out forwards;
}

#top_title_result_icons {
	position: absolute;
	right: 10px;
	opacity: 0;
	transition: opacity 0.4s ease;
}

#top_title_result_icons.show {
	animation: slideFadeInLeftToRight50 0.3s ease-out forwards;
}

#top_title_result_icons.hide {
	animation: slideFadeOutRightToLeft50 0.3s ease-out forwards;
}

#top_title_result_icons_member {
	position: absolute;
	right: 10px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

#top_title_result_icons_member.show {
	animation: slideFadeInRightToLeft50 0.3s ease-out forwards;
}

#top_title_result_icons_member.hide {
	animation: slideFadeOutLeftToRight50 0.3s ease-out forwards;
}

/********************************/
/****** 여기서 토글용 탑 리스트 기능들 css 끝 ******/
/********************************/

/********************************/
/****** 여기서 탑 리스트 토글 css 시작 ******/
/********************************/

/* 컨테이너 위치만 살짝 정돈 */
.map_list_choice_toggle{
	padding: 6px 0;
	display:flex;
	justify-content:center;
	z-index: 2;

	opacity: 0;
	transition: opacity 0.4s ease;
}

.map_list_choice_toggle.show {
	animation: FadeIn 0.4s ease-out forwards;
}

.map_list_choice_toggle.hide {
	animation: FadeOut 0.4s ease-out forwards;
}

/* 트랙: 얇은 라인 + 살짝 음영 */
.map_list_choice_toggle_track{
	position: relative;
	width: 180px;                 /* ✅ 150px 절대 넘지 않음 */
	height: 32px;
	padding-right: 5px;
	border-radius: 999px;
	background: #F5F6F8;          /* 카드 톤에 맞춘 연한 그레이 */
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* 인디케이터: 검정 덩어리 말고 "화이트 캡슐" + 그림자 */
.map_list_choice_toggle_indicator{
	position:absolute;
	top: 2px;
	left: 2px;
	height: calc(100% - 4px);
	width: calc(50% - 2px);
	border-radius: 999px;

	background: #FFFFFF;
	border: 1px solid rgba(0,0,0,0.06);
    box-shadow: -1px 2px 11px rgb(0 0 0 / 2%), 0 1px 2px rgba(0, 0, 0, 0.06);
	transform: translateX(0px);
	transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.2, 1);
	will-change: transform;
}

/* 버튼 텍스트: 기본은 그레이, 선택되면 진하게 */
.map_list_choice_toggle_btn{
	position:relative;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index:2;
	width:100%;
	height:100%;
	border:0;
	background:transparent;
	cursor:pointer;
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: -0.3px;
	color:#7A8293;               /* 비활성 톤 */
	transition: color 0.18s ease, transform 0.08s ease;
	user-select:none;
	-webkit-tap-highlight-color: transparent;
}

.map_list_choice_toggle_btn:hover{
	color:#2B2F38;
}

.map_list_choice_toggle_btn.active{
    color: #4f4f4f;
    font-weight: 550;
}

.map_list_choice_toggle_btn:active{
	transform: scale(0.98);
}

.map_list_choice_toggle_btn_icon {
	position: relative;
	width: 16px;
	height: 16px;
	margin-right: 4px;
}

.map_list_choice_toggle_btn_span {
	position: relative;
    top: 1px;
}

/* 버튼 기본 UA 스타일 제거 (검은 네모/아웃라인 방지) */
.map_list_choice_toggle_btn,
.map_list_choice_toggle_btn:focus,
.map_list_choice_toggle_btn:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	border: 0 !important;
	appearance: none;
	-webkit-appearance: none;
}

/* 파폭에서 button 내부 테두리(네모) 방지 */
.map_list_choice_toggle_btn::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* 혹시 클릭 상태에서 배경이 먹는 케이스 방지 */
.map_list_choice_toggle_btn:active {
	outline: none !important;
	box-shadow: none !important;
}


/********************************/
/****** 여기서 탑 리스트 토글 css 끝 ******/
/********************************/

/********************************/
/****** 여기서 토글용 리스트 css 변경점 시작 ******/
/********************************/

#sale_list,
#member_list{
	position: absolute;
	left: 0;
	right: 0;

	/* 애니메이션 */
	will-change: transform, opacity;

	/* 🔥 여기서 transform/opacity 강제하지마라 (꼬임 원인) */
	/* transform: translateX(0px); */
	/* opacity: 1; */

	pointer-events: auto;
}

/* 숨김 상태 (대상 확정) */
#sale_list.map_list_toggle_list_hidden{
	opacity: 0;
	pointer-events: none;
	transform: translateX(-500px);
}

#member_list.map_list_toggle_list_hidden{
	opacity: 0;
	pointer-events: none;
	transform: translateX(500px);
}

/* ---- 전환 애니메이션 클래스 ---- */

/* 멤버로 갈 때: sale는 왼쪽으로 사라짐 */
#sale_list.map_list_toggle_out_left{
	animation: map_list_toggle_out_left 0.28s ease forwards;
}
@keyframes map_list_toggle_out_left{
	from{ transform: translateX(0px); opacity: 1; }
	to  { transform: translateX(-500px); opacity: 0; }
}

/* 멤버로 갈 때: member는 오른쪽에서 왼쪽으로 들어옴 */
#member_list.map_list_toggle_in_left{
	animation: map_list_toggle_in_left 0.28s ease forwards;
}
@keyframes map_list_toggle_in_left{
	from{ transform: translateX(500px); opacity: 0; }
	to  { transform: translateX(0px); opacity: 1; }
}

/* 세일로 갈 때: member는 오른쪽으로 사라짐 */
#member_list.map_list_toggle_out_right{
	animation: map_list_toggle_out_right 0.28s ease forwards;
}
@keyframes map_list_toggle_out_right{
	from{ transform: translateX(0px); opacity: 1; }
	to  { transform: translateX(500px); opacity: 0; }
}

/* 세일로 갈 때: sale은 왼쪽에서 들어옴 */
#sale_list.map_list_toggle_in_right{
	animation: map_list_toggle_in_right 0.28s ease forwards;
}
@keyframes map_list_toggle_in_right{
	from{ transform: translateX(-500px); opacity: 0; }
	to  { transform: translateX(0px); opacity: 1; }
}

/********************************/
/****** 여기서 토글용 리스트 css 변경점 끝 ******/
/********************************/

/********************************/
/****** 여기서 중개사 목록 기능 추가 css 시작 ******/
/********************************/

#top_title_result_sort_first_member,
#top_title_result_sort_second_member {
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.3s ease, margin-left 0.3s ease, background 0.2s ease;
    font-size: max(12px, calc(13px * var(--size)));
    color: #222;
    cursor: pointer;
}

.top_title_result_sort_text_member {
    background-color: transparent;
    transition: background-color 0.2s ease;
    padding: 2px 4px;
    border-radius: 4px;
}

.top_title_result_sort_first_member:hover .top_title_result_sort_text,
.top_title_result_sort_second_member:hover .top_title_result_sort_text {
    background-color: rgba(33, 33, 33, 0.07);
}

/********************************/
/****** 여기서 중개사 목록 기능 추가 css 끝 ******/
/********************************/

/********************************/
/****** 여기서 중개사 리스트 css 시작 ******/
/********************************/

/* ✅ 멤버 목록 컨테이너(2열) */
#member_list {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 2px 10px 8px 10px;
	background-color: #f9fafc; /* 니 map_list 배경이랑 맞춤 */
	height: calc(100vh - calc(145px * var(--size)));
}

/* 2열 카드 래퍼 */
.member_list_row {
	display: flex;
	justify-content: space-between;
	gap: 11px;
	width: 100%;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.member_list_row.show {
	animation: slideFadeInDownToUp30 0.5s ease-out forwards;
}

/* ✅ 카드 */
.member_list_card {
	width: 49%;
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
	padding: 14px 12px;
	position: relative;
	cursor: pointer;
	transition: background-color 0.3s ease, box-shadow 0.3s ease, all 0.5s ease;
}

.member_list_card:hover {
    background-color: #f1f5ff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
	transform: translateY(-3px) !important;
}

/* ===== 상단 ===== */
.member_list_top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
}

.member_list_profile_wrap {
	display: flex;
	gap: 12px;
	min-width: 0;
	margin-left: 5.5px;
}

.member_list_profile_img {
	width: 50px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	background: #f3f3f3;
	border: 1px solid #eeeeee;
	flex-shrink: 0;
}

/* 오른쪽 텍스트 영역 */
.member_list_title_wrap {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.member_list_title_line {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

.member_list_name {
	font-size: 15px;
	font-weight: 700;
	color: #222222;
	line-height: 1.2;
	white-space: nowrap;
	
	 /* 너무 길면 잘림 */
}

.member_list_position {
	font-size: 12px;
	font-weight: 700;
	color: #222222;
	line-height: 1.2;
	white-space: nowrap;
	flex-shrink: 0;
}

/* 리뷰/조회/매물 */
.member_list_stats_row {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 550;
	color: #666;
}

.member_list_stat_item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1px;
}

.member_list_stat_item img {
	position: relative;
	width: 13px;
	height: 13px;
	bottom: 1.5px;
	transform: translateY(0.5px);
}

.member_list_stat_label {
	color: #666;
}

.member_list_stat_value {
	position: relative;
	font-weight: 500;
	font-size: 12px;
	color: #222;
	margin-left: 1px;
	top: 0.5px;
}

.member_list_stat_value_red {
	color: #e94141; /* 2번 사진처럼 빨강 포인트 */
}

/* 사무소 */
.member_list_estate_row {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	font-size: 12px;
	color: #666;
}

.member_list_estate_row img {
	position: relative;
	bottom: 1px;
	width: 13px;
	height: 13px;
	transform: translateY(0.5px);
}

.member_list_estate_text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 210px;
}

/* 체크 */
.member_list_top_right {
	position: absolute;
	flex-shrink: 0;
	right: 7.2px;
    top: 6px;
	padding-top: 2px;
}

.member_list_check {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-image: url(/images/member_list_check_off.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
}

.member_list_check.checked {
	background-image: url(/images/member_list_check_on.png);
}

/* 구분선 */
.member_list_divider_line {
	width: 100%;
	height: 1px;
	background-color: #f0f0f0;
	margin: 10px 0;
}

.member_list_divider_line_bottom {
	margin: 12px 0 10px 0;
}

/* ===== 중간(평점 + 막대) ===== */
.member_list_middle {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* 왼쪽 평균 */
.member_list_score_left {
	width: 68px; /* 2번 사진 느낌 */
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.member_list_score_value {
	font-size: 26px;
	display: flex;
	justify-content: center;
	width: 100%;
	font-weight: 700;
	color: #111;
	line-height: 1;
}

.member_list_score_stars {
	position: relative;
	margin-top: 4px;
	padding-left: 5px;
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 1;
	width: 100%;
	display: flex;
}

.member_list_score_star_base {
	color: #d9d9d9;
}

.member_list_score_star_fill {
	position: absolute;
	white-space: nowrap;
	overflow: hidden;
	color: #f6b400;
	width: 0%;
}

/* ✅ 평균/막대 사이 세로선(2번 사진 필수) */
.member_list_middle_vline {
	width: 1px;
	height: 58px;
	background-color: #efefef;
	flex-shrink: 0;
}

/* 오른쪽 점수바 */
.member_list_score_right {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0px;
}

.member_list_score_bar_row {
	display: flex;
	align-items: center;
	gap: 5px;
}

.member_list_score_bar_label {
	width: 14px;
	text-align: right;
	font-size: 12px;
	font-weight: 550;
	color: #222222;
	flex-shrink: 0;
	flex: 10% 0 0;
}

.member_list_score_bar_outer {
	flex: 70% 0 0;
	height: 4px;               /* 2번 사진처럼 얇게 */
	background-color: #e7e7e7; /* 회색 바 */
	border-radius: 999px;
	overflow: hidden;
}

.member_list_score_bar_inner {
	height: 100%;
	width: 0%;
	background-color: #f6b400; /* 별색과 동일 */
	border-radius: 999px;
}

.member_list_score_bar_count {
	width: 22px;
	font-size: 12px;
	color: #777;
	flex-shrink: 0;
}

/* ===== 하단 소개 ===== */
.member_list_info_title {
	font-size: 12.5px;
	font-weight: 600;
	color: #111;
	margin-top: 2px;
	padding-left: 5px;
}

.member_list_introduce {
	margin-top: 6px;
	padding-left: 5px;
	font-size: 12px;
	color: #222;
	height: 89px;
	line-height: 1.55;
	white-space: pre-wrap;
	word-break: break-word;
}

.member_list_introduce.none {
	color: #c7c7c7;
}

/* 반응형: 좁으면 1열 */
@media (max-width: 980px) {
	.member_list_row {
		width: 100%;
	}
}

/********************************/
/****** 여기서 중개사 리스트 css 끝 ******/
/********************************/

/********************************/
/****** 여기서 기타 요소 css 시작 ******/
/********************************/

.gradient-text {
	background: linear-gradient(90deg, blue, red);
	-webkit-background-clip: text;
	color: transparent;
	animation: gradient-animation 2s infinite;
	background-size: 200% 200%;
}

@keyframes gradient-animation {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}