/* ================================================================
   areum-villa — 전체화면 빌라 매물 지도 앱 스타일
   원본: areum-villa-map.html <style> 을 avv- 접두사 + .avv-app 스코프로 재현.
   모든 셀렉터는 .avv-app 하위로 스코프해 테마 충돌 방지.
   ================================================================ */

/* ---- 디자인 토큰 (원본 :root 변수) ---- */
.avv-app {
	--avv-green:      #03C75A;
	--avv-green-d:    #02B33B;
	--avv-ink:        #222;
	--avv-body:       #444;
	--avv-muted:      #8C8C8C;
	--avv-line:       #E5E5E5;
	--avv-line-soft:  #F0F0F0;
	--avv-bg:         #FFFFFF;
	--avv-panel:      #FAFAFA;
	--avv-red:        #E5436F;
	--avv-sale:       #1A73E8;

	font-family: 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--avv-ink);
	background: var(--avv-bg);
	-webkit-font-smoothing: antialiased;

	/* 세로 flex 컨테이너: GNB·필터 고정 + avv-stage flex:1 */
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.avv-app * { box-sizing: border-box; margin: 0; padding: 0; }
.avv-app a  { color: inherit; text-decoration: none; }
.avv-app button { font-family: inherit; cursor: pointer; }

/* ---- 전체화면 보정 (app.js가 height 동적 계산) ---- */
.avv-app.avv-fullscreen {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ================================================================
   GNB
   ================================================================ */
.avv-app .avv-gnb {
	height: 54px;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 0 18px;
	border-bottom: 1px solid var(--avv-line);
	background: #fff;
	position: relative;
	z-index: 30;
	flex-shrink: 0;
}

.avv-app .avv-gnb__logo {
	display: flex;
	align-items: center;
	gap: 7px;
	font-weight: 800;
	font-size: 18px;
	letter-spacing: -.02em;
	white-space: nowrap;
}

.avv-app .avv-gnb__mark {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: var(--avv-green);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 900;
}

.avv-app .avv-gnb__logo small {
	font-size: 11px;
	color: var(--avv-muted);
	font-weight: 500;
	margin-left: 2px;
}

.avv-app .avv-gnb__search {
	flex: 1;
	max-width: 440px;
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid var(--avv-green);
	border-radius: 8px;
	padding: 8px 14px;
}

.avv-app .avv-gnb__search-ico {
	color: var(--avv-green);
	font-weight: 800;
}

.avv-app .avv-search {
	border: none;
	outline: none;
	flex: 1;
	font-size: 14px;
	background: transparent;
	font-family: inherit;
	color: var(--avv-ink);
}

.avv-app .avv-search::placeholder { color: var(--avv-muted); }

.avv-app .avv-gnb__right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--avv-muted);
	font-size: 13px;
}

.avv-app .avv-gnb__right a:hover { color: var(--avv-ink); }

/* ================================================================
   필터 칩 바
   ================================================================ */
.avv-app .avv-filter {
	height: 50px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 18px;
	border-bottom: 1px solid var(--avv-line);
	background: #fff;
	position: relative;
	z-index: 20;
	overflow-x: auto;
	flex-shrink: 0;
}

.avv-app .avv-filter::-webkit-scrollbar { display: none; }

.avv-app .avv-filter__tabs {
	display: flex;
	border: 1px solid var(--avv-line);
	border-radius: 8px;
	overflow: hidden;
}

.avv-app .avv-filter__tab {
	border: none;
	background: #fff;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--avv-muted);
	border-right: 1px solid var(--avv-line);
	white-space: nowrap;
}

.avv-app .avv-filter__tab:last-child { border-right: none; }

.avv-app .avv-filter__tab--on {
	background: var(--avv-sale);
	color: #fff;
}

.avv-app .avv-filter__chip {
	border: 1px solid var(--avv-line);
	background: #fff;
	border-radius: 8px;
	padding: 7px 14px;
	font-size: 13px;
	color: var(--avv-body);
	font-weight: 500;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 6px;
}

.avv-app .avv-filter__chip:hover { border-color: var(--avv-ink); }

.avv-app .avv-filter__arr {
	font-size: 9px;
	color: var(--avv-muted);
}

.avv-app .avv-filter__chip--active {
	border-color: var(--avv-sale);
	color: var(--avv-sale);
	font-weight: 700;
}

/* ================================================================
   Stage (리스트 + 지도)
   ================================================================ */
.avv-app .avv-stage {
	display: flex;
	flex: 1;
	min-height: 0;
}

/* ================================================================
   좌측 리스트 사이드바 (380px — 원본과 동일)
   ================================================================ */
.avv-app .avv-list {
	width: 380px;
	flex-shrink: 0;
	border-right: 1px solid var(--avv-line);
	background: #fff;
	display: flex;
	flex-direction: column;
}

.avv-app .avv-list__head {
	padding: 14px 18px;
	border-bottom: 1px solid var(--avv-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}

.avv-app .avv-list__cnt {
	font-size: 14px;
	font-weight: 700;
}

.avv-app .avv-count {
	color: var(--avv-sale);
}

.avv-app .avv-list__sort {
	font-size: 12px;
	color: var(--avv-muted);
}

.avv-app .avv-list__body {
	flex: 1;
	overflow-y: auto;
}

.avv-app .avv-list__body::-webkit-scrollbar { width: 6px; }
.avv-app .avv-list__body::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 3px; }

/* ---- 매물 카드 ---- */
.avv-app .avv-card {
	display: flex;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--avv-line-soft);
	cursor: pointer;
	transition: background .15s;
}

.avv-app .avv-card:hover { background: #F7FBF8; }

.avv-app .avv-card--on {
	background: #F1F9F3;
	box-shadow: inset 3px 0 0 var(--avv-green);
}

.avv-app .avv-card__thumb {
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	background: var(--avv-line);
	position: relative;
}

.avv-app .avv-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.avv-app .avv-card__tag {
	position: absolute;
	top: 6px;
	left: 6px;
	background: var(--avv-green);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 4px;
}

.avv-app .avv-card__info {
	flex: 1;
	min-width: 0;
}

.avv-app .avv-card__type {
	font-size: 11px;
	color: var(--avv-muted);
	font-weight: 600;
}

.avv-app .avv-card__price {
	font-size: 17px;
	font-weight: 800;
	color: var(--avv-ink);
	margin: 2px 0 4px;
	letter-spacing: -.01em;
}

.avv-app .avv-card__spec {
	font-size: 12.5px;
	color: var(--avv-body);
	line-height: 1.45;
}

.avv-app .avv-card__desc {
	font-size: 12px;
	color: var(--avv-muted);
	margin-top: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.avv-app .avv-card__badges {
	display: flex;
	gap: 4px;
	margin-top: 6px;
	flex-wrap: wrap;
}

.avv-app .avv-card__badges span {
	font-size: 10px;
	border: 1px solid var(--avv-line);
	border-radius: 4px;
	padding: 1px 6px;
	color: var(--avv-muted);
}

/* ================================================================
   지도 영역
   ================================================================ */
.avv-app .avv-map-wrap {
	flex: 1;
	position: relative;
	display: flex; /* #avvMap을 실제 높이를 가진 flex 요소로 만들기 위함 (nmap-redev 동일 방식) */
	background: #E8EDF0;
	min-width: 0;
	min-height: 400px; /* 테마가 flex 높이 체인을 깨도 지도가 0px이 되지 않도록 가드 */
}

/* 네이버 지도를 절대위치 자식이 아니라 flex:1 실제 요소에 직접 렌더.
   nmap-redev의 .nmap-redev-map(flex:1)과 동일 — 절대위치일 때 생성 시점 0px 인식되어
   타일이 안 그려지던 문제 해결. 폴백/컨트롤/상세는 position:absolute 오버레이로 유지. */
.avv-app #avvMap {
	flex: 1;
	position: relative;
	min-width: 0;
	min-height: 400px;
}

/* ---- 폴백 그리드 지도 ---- */
.avv-app .avv-map-fallback {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background:
		linear-gradient(#dfe7d8 1px, transparent 1px) 0 0/100% 46px,
		linear-gradient(90deg, #dfe7d8 1px, transparent 1px) 0 0/46px 100%,
		radial-gradient(circle at 30% 38%, #cfe3d0 0 16%, transparent 55%),
		radial-gradient(circle at 70% 66%, #d6e6ef 0 18%, transparent 52%),
		#eef3ea;
	transform-origin: center;
	transition: transform .2s;
}

.avv-app .avv-road {
	position: absolute;
	background: #fff;
	box-shadow: 0 0 0 1px #e3e3e3;
}

.avv-app .avv-road--h { height: 14px; left: -5%; right: -5%; }
.avv-app .avv-road--v { width: 14px; top: -5%; bottom: -5%; }
.avv-app .avv-road--big {
	height: 22px;
	background: #ffe9b8;
	box-shadow: 0 0 0 1px #f0d493;
}

.avv-app .avv-map-label {
	position: absolute;
	font-size: 12px;
	color: #5a6b54;
	font-weight: 600;
	opacity: .75;
}

.avv-app .avv-station {
	position: absolute;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: #d6336c;
	padding: 2px 7px;
	border-radius: 4px;
	transform: translate(-50%, -50%);
}

.avv-app .avv-station--l1 { background: #1450a3; }

/* ---- 폴백 마커 래퍼 ---- */
.avv-app .avv-fb-marker {
	position: absolute;
	transform: translate(-50%, -100%);
	z-index: 4;
}

/* ---- 줌 컨트롤 ---- */
.avv-app .avv-map-ctrl {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 6;
}

.avv-app .avv-map-ctrl button {
	width: 38px;
	height: 38px;
	border: 1px solid var(--avv-line);
	background: #fff;
	border-radius: 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--avv-body);
	box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* ---- 폴백 노트 ---- */
.avv-app .avv-map-note {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	background: rgba(34,34,34,.86);
	color: #fff;
	font-size: 12px;
	padding: 8px 16px;
	border-radius: 20px;
	z-index: 6;
	white-space: nowrap;
	max-width: 90%;
	text-align: center;
}

.avv-app .avv-map-note b { color: #7CF09A; }

/* ================================================================
   가격 핀 마커 (네이버 지도 + 폴백 공용)
   ================================================================ */
.avv-price-pin {
	background: var(--avv-sale, #1A73E8);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	padding: 6px 11px;
	border-radius: 18px;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0,0,0,.25);
	position: relative;
	cursor: pointer;
	border: 2px solid #fff;
}

.avv-price-pin::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -7px;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--avv-sale, #1A73E8);
}

/* 대표 매물 — 빨간 핀 */
.avv-price-pin--subj {
	background: #E5436F;
	z-index: 5;
	transform: scale(1.08);
}

.avv-price-pin--subj::after {
	border-top-color: #E5436F;
}

/* 네이버 마커 앵커 보정 */
.avv-app .avv-naver-pin-wrap {
	transform: translate(-50%, -100%);
	display: inline-block;
}

/* ================================================================
   상세 드로어 (오른쪽 슬라이드)
   ================================================================ */
.avv-app .avv-detail {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 400px;
	background: #fff;
	border-left: 1px solid var(--avv-line);
	box-shadow: -8px 0 24px rgba(0,0,0,.08);
	z-index: 15;
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
	display: flex;
	flex-direction: column;
}

.avv-app .avv-detail--open { transform: translateX(0); }

/* 드로어 헤더 */
.avv-app .avv-detail__head {
	padding: 14px 18px;
	border-bottom: 1px solid var(--avv-line);
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.avv-app .avv-detail__close {
	margin-left: auto;
	font-size: 22px;
	color: var(--avv-muted);
	background: none;
	border: none;
	line-height: 1;
}

.avv-app .avv-detail__tag {
	background: var(--avv-green);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 5px;
}

.avv-app .avv-detail__id {
	font-size: 11px;
	color: var(--avv-muted);
}

/* 드로어 바디 스크롤 */
.avv-app .avv-detail__body {
	flex: 1;
	overflow-y: auto;
}

.avv-app .avv-detail__body::-webkit-scrollbar { width: 6px; }
.avv-app .avv-detail__body::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 3px; }

/* ---- 갤러리 그리드 (원본: 2fr 1fr 1fr / 2행) ---- */
.avv-app .avv-gallery {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 3px;
	height: 230px;
}

.avv-app .avv-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--avv-line);
	display: block;
}

.avv-app .avv-gallery img:first-child { grid-row: span 2; }

/* 갤러리 이미지 수가 적을 때 */
.avv-app .avv-gallery--single {
	display: block;
	height: 230px;
}

.avv-app .avv-gallery--single img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- 패드 내부 ---- */
.avv-app .avv-detail__pad { padding: 18px; }

.avv-app .avv-d-type {
	font-size: 12px;
	color: var(--avv-muted);
	font-weight: 600;
}

.avv-app .avv-d-price {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 2px 0 4px;
}

.avv-app .avv-d-sub {
	font-size: 13px;
	color: var(--avv-body);
}

/* ---- 스펙 그리드 ---- */
.avv-app .avv-spec-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 18px 0;
	border: 1px solid var(--avv-line);
	border-radius: 10px;
	overflow: hidden;
}

.avv-app .avv-spec-grid .avv-cell {
	padding: 13px 15px;
	border-bottom: 1px solid var(--avv-line-soft);
}

.avv-app .avv-spec-grid .avv-cell:nth-child(odd) {
	border-right: 1px solid var(--avv-line-soft);
}

.avv-app .avv-spec-grid .avv-k {
	font-size: 11px;
	color: var(--avv-muted);
	margin-bottom: 3px;
}

.avv-app .avv-spec-grid .avv-v {
	font-size: 14px;
	font-weight: 700;
}

/* ---- 섹션 h4 ---- */
.avv-app .avv-detail__pad h4 {
	font-size: 14px;
	font-weight: 800;
	margin: 18px 0 8px;
	padding-top: 18px;
	border-top: 1px solid var(--avv-line);
}

/* ---- feat 태그 ---- */
.avv-app .avv-feat {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.avv-app .avv-feat span {
	font-size: 12px;
	background: var(--avv-panel);
	border: 1px solid var(--avv-line);
	border-radius: 6px;
	padding: 5px 10px;
	color: var(--avv-body);
}

/* ---- 매물 설명 노트 ---- */
.avv-app .avv-note {
	font-size: 13px;
	color: var(--avv-body);
	line-height: 1.7;
}

/* ---- 중개 블록 (agency) ---- */
.avv-app .avv-agency {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding: 14px;
	background: var(--avv-panel);
	border-radius: 10px;
}

.avv-app .avv-agency__ava {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--avv-green);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	flex-shrink: 0;
}

.avv-app .avv-agency__nm {
	font-size: 13px;
	font-weight: 700;
}

.avv-app .avv-agency__rg {
	font-size: 11px;
	color: var(--avv-muted);
}

/* ---- 하단 CTA 2버튼 ---- */
.avv-app .avv-detail__cta {
	display: flex;
	gap: 8px;
	padding: 14px 18px;
	border-top: 1px solid var(--avv-line);
	background: #fff;
	flex-shrink: 0;
}

.avv-app .avv-detail__cta a {
	flex: 1;
	text-align: center;
	padding: 13px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14px;
	display: block;
}

.avv-app .avv-cta-blog {
	background: #fff;
	border: 1.5px solid var(--avv-green);
	color: var(--avv-green-d);
}

.avv-app .avv-cta-blog:hover { background: #F1F9F3; }

.avv-app .avv-cta-consult {
	background: var(--avv-green);
	border: 1.5px solid var(--avv-green);
	color: #fff;
}

.avv-app .avv-cta-consult:hover { background: var(--avv-green-d); }

/* ================================================================
   반응형
   ================================================================ */
@media (max-width: 860px) {
	.avv-app .avv-list { width: 300px; }
	.avv-app .avv-detail { width: 100%; }
}

@media (max-width: 640px) {
	.avv-app .avv-gnb__search { display: none; }
	.avv-app .avv-list { display: none; }
}

/* ================================================================
   [villa_listing] 미니 지도 카드 (app.css 통합)
   ================================================================ */
.avv-listing-card {
	border: 1px solid #E5E5E5;
	border-radius: 12px;
	overflow: hidden;
	max-width: 360px;
	margin: 20px 0;
	font-family: 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
	cursor: pointer;
}

.avv-listing-card__map {
	background: #E8EDF0;
	position: relative;
}

.avv-listing-card__info {
	padding: 14px 16px;
	background: #fff;
}

.avv-listing-card__name {
	font-size: 15px;
	font-weight: 700;
	color: #222;
	margin-bottom: 6px;
}

.avv-listing-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 10px;
}

.avv-listing-card__tag {
	font-size: 11px;
	border: 1px solid #E5E5E5;
	border-radius: 4px;
	padding: 2px 7px;
	color: #8C8C8C;
}

.avv-listing-card__tag--stage {
	border-color: #00C73C;
	color: #00C73C;
	font-weight: 600;
}

.avv-listing-card__link {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: #1A73E8;
}

.avv-listing-card-section { margin: 32px 0; }

.avv-listing-card-section__title {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 12px;
}