@charset "utf-8";

/* ============================================================
 * 대성테크윈 - 국내거래처현황 (dmap) Renewal CSS
 * ------------------------------------------------------------
 * ★ plugin/dmap/css/map.css 를 "덮어쓰는" 용도입니다.
 *    플러그인 원본은 업데이트 시 덮어써질 수 있으므로 건드리지 않고,
 *    dmap.php 에서 map.css 다음에 이 파일을 로드해 재정의합니다.
 * ★ 모든 셀렉터는 .dmap-page 로 스코프를 격리해 다른 페이지에 영향 없음.
 * ★ 지도/리스트의 id·class(#map-area, #map, .Item-list, .ListWrap 등)는
 *    dmap.js(난독화·도메인락) 가 참조하므로 이름을 바꾸지 말 것.
 * ============================================================ */

.dmap-page {
	--primary: #004B8D;
	--secondary: #1E293B;
	--surface: #FFFFFF;
	--surface-alt: #F8FAFC;
	--on-surface: #0F172A;
	--on-surface-alt: #475569;
	--on-primary: #FFFFFF;
	--edge: #E5E7EB;
	--radius-md: 16px;
	--radius-sm: 10px;
	--radius-pill: 9999px;
	--shadow-card: 0 12px 36px rgba(0, 0, 0, 0.06);

	color: var(--on-surface);
	word-break: keep-all;
	position: relative;
	z-index: 1;
}

.dmap-page, .dmap-page *, .dmap-page *:before, .dmap-page *:after { box-sizing: border-box; }

.dmap-page .tracking-kr-tight { letter-spacing: -0.05em; }
.dmap-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.dmap-page .focus-ring:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

.dmap-page h1, .dmap-page h2, .dmap-page h3, .dmap-page h4, .dmap-page h5 { margin-top: 0; margin-bottom: 0; }

.dmap-page .container {
	max-width: var(--site-width, 1760px);
	width: 100%;
	margin: 0 auto;
	padding: 0 1.25rem;
	box-sizing: border-box;
}
@media (min-width: 768px)  { .dmap-page .container { padding: 0 2.5rem; } }
@media (min-width: 1024px) { .dmap-page .container { padding: 0 5rem; } }
@media (min-width: 1440px) { .dmap-page .container { padding: 0 7rem; } }
@media (min-width: 1760px) { .dmap-page .container { padding: 0 5rem; } }


/* ==========================================
   1. 서브페이지 헤더 (ok1~ok5 와 동일 패턴)
========================================== */
.dmap-page .sub-page-header {
	padding: 1.75rem 0 1.25rem;
	background: var(--surface);
	position: relative;
	z-index: 30;
}
@media (min-width: 768px)  { .dmap-page .sub-page-header { padding: 2.25rem 0 1.5rem; } }
@media (min-width: 1024px) { .dmap-page .sub-page-header { padding: 2.75rem 0 1.75rem; } }

.dmap-page .sub-crumb-list {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
	list-style: none; margin: 0 0 1rem; padding: 0;
	font-size: 0.875rem; font-weight: 700;
	color: var(--on-surface-alt); letter-spacing: -0.02em;
}
.dmap-page .sub-crumb-item { display: inline-flex; align-items: center; }
.dmap-page .sub-crumb-link {
	color: var(--on-surface-alt); transition: color 0.3s ease;
	display: inline-flex; align-items: center; gap: 0.25rem; line-height: 1;
	text-decoration: none;
}
.dmap-page .sub-crumb-link i { font-size: 1rem; }
.dmap-page a.sub-crumb-link:hover { color: var(--primary); }
.dmap-page .sub-crumb-current { color: var(--primary); font-weight: 800; }
.dmap-page .sub-crumb-sep {
	color: var(--on-surface-alt); opacity: 0.5; font-size: 0.75rem;
	display: inline-flex; align-items: center;
}

.dmap-page .sub-page-headline {
	font-size: 2rem; font-weight: 900; line-height: 1.15;
	letter-spacing: -0.05em; color: var(--on-surface); margin: 0;
	word-break: keep-all;
}
.dmap-page .sub-page-desc {
	margin: 0.875rem 0 0;
	font-size: 0.9375rem; font-weight: 500; line-height: 1.7;
	color: var(--on-surface-alt); word-break: keep-all;
}
@media (min-width: 768px)  { .dmap-page .sub-page-headline { font-size: 2.75rem; } .dmap-page .sub-page-desc { font-size: 1rem; } }
@media (min-width: 1024px) { .dmap-page .sub-page-headline { font-size: 3.25rem; } }
@media (min-width: 1440px) { .dmap-page .sub-page-headline { font-size: 3.5rem; } }


/* ==========================================
   2. 본문 레이아웃 — 플러그인의 absolute 레이아웃 무력화
   ------------------------------------------
   기존: .page-content2 { position:absolute; top:126px; bottom:0 }
         → 부모 .at-body 의 min-height:700px 에 얹혀 높이가 584px 로 "우연히" 고정
   변경: 일반 흐름 + flex, 높이는 JS 가 계산한 --dmap-body-h (뷰포트 채움)
========================================== */
.dmap-page .dmap-body {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	height: var(--dmap-body-h, 640px);
	min-height: 420px;
	border-top: 1px solid var(--edge);
	background: var(--surface-alt);
	overflow: hidden;
}

/* 지도 */
.dmap-page #map-area {
	position: relative;
	top: auto; left: auto; right: auto; bottom: auto;
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	border-right: 1px solid var(--edge);
	background: var(--surface-alt);
}
.dmap-page #map { width: 100% !important; height: 100% !important; }

/* 리스트 패널 */
.dmap-page #map-content,
.dmap-page .List.map-page {
	position: relative;
	top: auto; right: auto; bottom: auto; left: auto;
	flex: 0 0 380px;
	width: 380px;
	max-width: 42vw;
	height: 100%;
	background: var(--surface);
	box-shadow: none;
	overflow: hidden;
	z-index: 2;
}
@media (min-width: 1440px) {
	.dmap-page #map-content, .dmap-page .List.map-page { flex-basis: 420px; width: 420px; }
}

.dmap-page .ListOutWrap {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}


/* ==========================================
   3. 리스트 상단 바
========================================== */
.dmap-page .List.map-page .ListInfo,
.dmap-page .ListInfo {
	position: relative;
	top: auto; left: auto;
	width: 100%;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: var(--primary);
	color: var(--on-primary);
	border-bottom: none;
}
.dmap-page .ListInfo:before,
.dmap-page .ListInfo:after { content: none; }

.dmap-page .dmap-count {
	display: inline-flex;
	align-items: baseline;
	gap: 0.375rem;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	white-space: nowrap;
}
.dmap-page .dmap-count strong {
	font-size: 1.25rem;
	font-weight: 900;
	line-height: 1;
}

/* 지도 유형 select */
.dmap-page #selected {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 9.5rem;
	padding: 0.5rem 0.75rem !important;
	border-radius: var(--radius-sm) !important;
	border: 1px solid rgba(255,255,255,0.35);
	background: rgba(255,255,255,0.12);
	color: #fff;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.625rem center;
	padding-right: 1.75rem !important;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.dmap-page #selected:hover { background-color: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.55); }
.dmap-page #selected option { color: #0F172A; background: #fff; font-weight: 600; }


/* ==========================================
   4. 리스트 본문
========================================== */
.dmap-page .List.map-page .ListWrap,
.dmap-page .ListWrap {
	position: relative;
	top: auto; right: auto; bottom: auto; left: auto;
	flex: 1 1 auto;
	width: 100%;
	height: auto;
	min-height: 0;
	margin-bottom: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--surface);
}
/* 스크롤바 */
.dmap-page .ListWrap::-webkit-scrollbar { width: 8px; }
.dmap-page .ListWrap::-webkit-scrollbar-track { background: transparent; }
.dmap-page .ListWrap::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 999px; border: 2px solid #fff; }
.dmap-page .ListWrap::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

.dmap-page .List.map-page .Item-tree { padding: 0; background: transparent; }
.dmap-page .List.map-page .AreaItem { padding-bottom: 0; }
.dmap-page .AreaItem { padding: 0; }

.dmap-page .Item-list,
.dmap-page .List.map-page .AreaItem .Item-list {
	list-style: none;
	margin: 0;
	padding: 0.75rem;
	background: transparent;
	font-size: 0.9375rem;
	color: var(--on-surface);
}

/* --- 거래처 카드 --- */
.dmap-page .Item-item {
	display: block;
	width: auto;
	position: relative;
	margin: 0 0 0.5rem;
	padding: 0;
	border: 1px solid var(--edge);
	border-radius: var(--radius-md);
	background: var(--surface);
	color: var(--on-surface);
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.dmap-page .Item-item:last-child { margin-bottom: 0; }
.dmap-page .Item-item:hover {
	background: var(--surface);
	border-color: var(--primary);
	box-shadow: var(--shadow-card);
	transform: translateY(-2px);
}
.dmap-page .Item-item.is-active {
	border-color: var(--primary);
	box-shadow: 0 0 0 2px rgba(0,75,141,0.15);
}

.dmap-page .Item-item > a {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.875rem 1rem;
	text-decoration: none;
	color: inherit;
}

.dmap-page .dmap-card-idx {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-sm);
	background: var(--surface-alt);
	color: var(--primary);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	transition: background 0.2s ease, color 0.2s ease;
}
.dmap-page .Item-item:hover .dmap-card-idx { background: var(--primary); color: var(--on-primary); }

.dmap-page .dmap-card-thumb {
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--radius-sm);
	background-color: var(--surface-alt);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.dmap-page .dmap-card-body { flex: 1 1 auto; min-width: 0; }

.dmap-page .Item-name,
.dmap-page .dmap-card-name {
	display: block;
	margin: 0 0 0.25rem;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.04em;
	color: var(--on-surface);
	word-break: keep-all;
}
.dmap-page .Item-summary,
.dmap-page .dmap-card-addr {
	display: block;
	width: auto;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--on-surface-alt);
	word-break: keep-all;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dmap-page .Item-summary span:after { content: none; }

.dmap-page .dmap-card-arrow {
	flex: 0 0 auto;
	font-size: 1rem;
	color: #CBD5E1;
	transition: color 0.2s ease, transform 0.2s ease;
}
.dmap-page .Item-item:hover .dmap-card-arrow { color: var(--primary); transform: translateX(2px); }

/* ★ 방어 규칙 — 어떤 이유로든 플러그인 원본 카드 마크업이 렌더될 경우 대비.
   원본은 display:table 기반이라 .Item-detail{width:100000px; max-width:1px} 인데,
   카드 a 에 flex 를 걸면 이 max-width 가 그대로 먹어 글자가 1px 폭으로 잘린다. */
.dmap-page .Item-detail {
	display: block;
	width: auto !important;
	max-width: none !important;
	padding-left: 0;
	margin-left: 0 !important;
}
.dmap-page .Item-preview { width: auto; }
.dmap-page .Item-preview_mask { width: 3.5rem; height: 3.5rem; }
.dmap-page .Item-preview_image { border-radius: var(--radius-sm); }
.dmap-page .Itemlist-header:before,
.dmap-page .Itemlist-header:after { content: none; }

/* 부동산 플러그인 잔재 숨김 (가격 라벨 / 하트 / 방문표시) */
.dmap-page .Item-icons,
.dmap-page .Item-favorite,
.dmap-page .Item-visited,
.dmap-page .Item-types,
.dmap-page .Item-options { display: none !important; }
/* .Item-price 는 원본에서 상호명을 감싸는 래퍼라 숨기면 안 된다 (float 만 해제) */
.dmap-page .Item-price { float: none; font-size: inherit; line-height: inherit; color: inherit; }


/* ==========================================
   5. 결과 없음 / 로딩 / 페이징
========================================== */
.dmap-page .dmap-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 3.5rem 1.5rem;
	text-align: center;
	color: var(--on-surface-alt);
}
.dmap-page .dmap-empty i { font-size: 2.5rem; color: #CBD5E1; }
.dmap-page .dmap-empty p { margin: 0; font-size: 0.9375rem; font-weight: 600; word-break: keep-all; }

.dmap-page .ListZero { position: static; background: none; }

.dmap-page .ListLoading {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: auto; height: auto;
}
.dmap-page .ListLoading-icon:before,
.dmap-page .ListLoading-icon:after { top: 40%; }

.dmap-page .List.map-page .ListPagination,
.dmap-page .ListPagination {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	bottom: auto;
	height: auto;
	padding: 0.75rem 0.5rem;
	border-top: 1px solid var(--edge);
	background: var(--surface);
	text-align: center;
}
.dmap-page .Pagination {
	display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 0.25rem;
	font-size: 0.8125rem; font-weight: 700; padding: 0; margin: 0;
}
.dmap-page .Pagination > li { display: inline-flex; margin: 0; }
.dmap-page .Pagination > li + li { margin-left: 0; }

/* 숫자 버튼만 정사각 고정폭 */
.dmap-page .Pagination-item {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 1.75rem; height: 1.75rem; padding: 0 0.25rem;
	line-height: 1;
	border-radius: var(--radius-pill);
	color: var(--on-surface-alt);
	white-space: nowrap;
}
.dmap-page .Pagination-item:hover { background: var(--surface-alt); color: var(--primary); line-height: 1; }
.dmap-page .Pagination-item.active {
	padding: 0 0.25rem;
	background-color: var(--primary) !important;
	color: var(--on-primary);
	line-height: 1;
}
/* ★ PREV / NEXT 는 "< PREV" · "NEXT >" 문구가 들어가므로 고정폭을 풀어야 한다.
   (플러그인의 width:auto 보다 특이성이 높은 규칙이 필요) */
.dmap-page .Pagination .Pagination-item--prev,
.dmap-page .Pagination .Pagination-item--next {
	min-width: 0;
	width: auto;
	padding: 0 0.625rem;
	white-space: nowrap;
	font-weight: 700;
	color: var(--on-surface-alt);
}
.dmap-page .Pagination .Pagination-item--prev:hover,
.dmap-page .Pagination .Pagination-item--next:hover { background: transparent; color: var(--primary); }
.dmap-page .Pagination .Pagination-item--prev.disable,
.dmap-page .Pagination .Pagination-item--next.disable { opacity: 0.4; }


/* ==========================================
   6. 지도 마커 — 브랜드 컬러 적용
========================================== */
.dmap-page .map .pin-marker-overlay { background-color: rgba(0, 75, 141, 0.22); }
.dmap-page .map .pin-marker-overlay:before { background-color: var(--primary); }


/* 목록 접기 버튼 — 1023px 이하에서만 노출 */
.dmap-page .dmap-list-toggle {
	display: none;
	flex: 0 0 auto;
	width: 2rem; height: 2rem;
	align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: var(--radius-sm);
	background: rgba(255,255,255,0.12);
	color: #fff;
	font-size: 1rem;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s ease, transform 0.25s ease;
}
.dmap-page .dmap-list-toggle:hover { background: rgba(255,255,255,0.22); }
.dmap-page.is-list-collapsed .dmap-list-toggle { transform: rotate(180deg); }


/* ==========================================
   7. 반응형 — 1024px 미만에서는 지도 위 / 리스트 아래로 세로 배치
   (기존 dmap.php 인라인의 #map-area{height:810px !important} 는 제거함)
========================================== */
@media (max-width: 1023px) {
	.dmap-page .dmap-body {
		flex-direction: column;
		height: auto;
		overflow: visible;
	}
	.dmap-page #map-area {
		flex: 0 0 auto;
		width: 100%;
		height: var(--dmap-map-h, 52vh);
		min-height: 300px;
		border-right: none;
		border-bottom: 1px solid var(--edge);
	}
	.dmap-page #map-content,
	.dmap-page .List.map-page {
		flex: 1 1 auto;
		width: 100%;
		max-width: none;
		height: var(--dmap-list-h, 46vh);
		min-height: 280px;
	}
}

@media (max-width: 1023px) {
	.dmap-page .dmap-list-toggle { display: inline-flex; }
	.dmap-page .ListInfo { cursor: pointer; }

	/* 목록 접힘 상태 — 지도를 넓게 */
	.dmap-page.is-list-collapsed #map-area { height: var(--dmap-map-h-open, 72vh); }
	.dmap-page.is-list-collapsed .ListWrap,
	.dmap-page.is-list-collapsed .ListPagination { display: none; }
	.dmap-page.is-list-collapsed #map-content,
	.dmap-page.is-list-collapsed .List.map-page { height: auto; min-height: 0; flex: 0 0 auto; }
}

/* 인쇄 시 목록만 */
@media print {
	.dmap-page #map-area { display: none; }
	.dmap-page .dmap-body { height: auto; display: block; }
	.dmap-page #map-content, .dmap-page .List.map-page { width: 100%; max-width: none; height: auto; }
	.dmap-page .ListWrap { overflow: visible; height: auto; }
}