/* 1. 카카오 지도 100% 확장 및 정보창 숨김 */
.root_daum_roughmap,
.root_daum_roughmap .wrap_map {
	width: 100% !important;
}
.root_daum_roughmap .cont {
	display: none !important;
}
.root_daum_roughmap {
	border: 1px solid #ddd !important;
}

/* 2. 탭 버튼 스타일 */
.map_tabs {
	list-style: none;
	padding: 0;
	margin: 0 0 20px 0;
	display: flex;
	width: 100%;
}
.map_tabs li {
	flex: 1;
	text-align: center;
}
.map_tabs li a {
	display: block;
	padding: 12px 0;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	color: #666;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-bottom: 2px solid #ddd; /* 탭 구분선 */
}
/* 활성화된 버튼 */
.map_tabs li.on a {
	color: #fff;
	background: #333;
	border-color: #333;
}

/* 3. 지도 컨텐츠 영역 숨김/표시 처리 (가장 중요) */
.map_content_wrap {
	position: relative;
	width: 100%;
}
.tab-content {
	position: absolute; /* 크기는 유지하되 화면에서 띄움 */
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0; /* 투명하게 숨김 */
	z-index: -1;
	pointer-events: none; /* 숨겨진 상태에서 클릭 방지 */
}
.tab-content.active {
	position: relative; /* 화면에 정상 배치 */
	opacity: 1; /* 보이게 됨 */
	z-index: 1;
	pointer-events: auto;
}

.map_txt p { margin: 5px 0; }

/* 탭 전환 — 원본 changeMapTab() 의 클래스 토글을 :target 으로 재현
   (JS 없이도 동작하며 원본 .on/.active 기본 상태를 그대로 유지한다) */
.map_content_wrap .tab-content:target {
	position: relative;
	opacity: 1;
	z-index: 2;
	pointer-events: auto;
}
/* 2번 탭이 선택되면 기본 활성(1번)을 물린다 */
.map_content_wrap:has(#map_content2:target) #map_content1.active {
	position: absolute;
	opacity: 0;
	z-index: -1;
	pointer-events: none;
}
/* 탭 버튼 활성 표시도 같은 규칙으로 따라간다 */
body:has(#map_content2:target) #btn_map1.on a {
	color: #666;
	background: #f5f5f5;
	border-color: #ddd;
}
body:has(#map_content2:target) #btn_map2 a {
	color: #fff;
	background: #333;
	border-color: #333;
}

/* 정적 지도 이미지 — 원본 위젯 실측 844x360 */
.root_daum_roughmap .wrap_map {
	height: 360px;
	overflow: hidden;
}
.root_daum_roughmap .map_static {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* '길찾기' — 원본 위젯 내장 컨트롤을 카카오맵 외부링크로 대체.
   원본 위젯 실측 높이는 362px(=지도 360 + 보더 2)이고 컨트롤은 지도 영역
   '안'에 얹혀 있다. 아래로 쌓으면 위젯이 46.6px 높아져 CENTER/TABLE/TBODY
   전체가 밀린다(파리티 633 → 683.6). 지도 위에 겹쳐 원본 높이를 지킨다. */
.root_daum_roughmap {
	position: relative;
}
.root_daum_roughmap .wrap_controllers {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 8px 10px;
	text-align: right;
}
.root_daum_roughmap .wrap_btn_roadview .txt {
	display: inline-block;
	padding: 6px 16px;
	font-size: 13px;
	line-height: 1.2;
	color: #333;
	text-decoration: none;
	background: #fff;
	border: 1px solid #c8c8c8;
	border-radius: 2px;
}
.root_daum_roughmap .wrap_btn_roadview .txt:hover,
.root_daum_roughmap .wrap_btn_roadview .txt:focus {
	color: #fff;
	background: #333;
	border-color: #333;
}

/* 5. 좌측 ABOUT 사이드바 인라인 이미지 디센더 갭 제거 (parity r3)
 * 원본 실측(_trees/...map.src.json): 사이드바 table h=339. 우리는 347(+8).
 * 원인: 이 표의 6행 중 subleft1/2/3 은 원본 마크업에 align="absmiddle"(vertical-align:middle)
 * 이 있어 TD==IMG 인데, align 속성이 없는 subleft_t1.jpg 와 customer.jpg 만
 * baseline 정렬이라 라인박스 디센더가 셀에 각각 4px 씩 붙었다(TD 54 vs IMG 50 / TD 161 vs IMG 157).
 * → 그 2장만 display:block 으로 좁혀 셀 높이를 이미지 높이와 일치시킨다.
 * (전역 img{display:block} 은 absmiddle 3장의 원본 정렬을 깨므로 금지 — 셀렉터를 2장으로 한정) */
#content center > table[width="1078"] > tbody > tr > td[width="220"] img[src$="/subleft_t1.jpg"],
#content center > table[width="1078"] > tbody > tr > td[width="220"] img[src$="/customer.jpg"] {
	display: block;
}

/* 반응형 리플로우 — 원본은 1078px 고정폭 테이블이다 */
@media (max-width: 1100px) {
	#content center > table[width="1078"] {
		width: 100% !important;
		max-width: 1078px;
	}
	#content center > table[width="1078"] td[width="847"] {
		width: auto;
	}
}
@media (max-width: 860px) {
	#content center > table[width="1078"],
	#content center > table[width="1078"] > tbody,
	#content center > table[width="1078"] > tbody > tr,
	#content center > table[width="1078"] > tbody > tr > td {
		display: block;
		width: 100% !important;
		max-width: 100%;
	}
	/* 좌측 ABOUT 사이드바는 좁은 폭에서 본문 위로 단일열 배치 */
	#content center > table[width="1078"] > tbody > tr > td[width="220"] > table {
		width: 100%;
	}
	#content center > table[width="1078"] > tbody > tr > td[width="14"] {
		display: none;
	}
	#content center img {
		max-width: 100%;
		height: auto;
	}
	.root_daum_roughmap .wrap_map {
		height: 300px;
	}
}
@media (max-width: 480px) {
	.map_tabs li a {
		font-size: 14px;
		padding: 10px 0;
	}
	.root_daum_roughmap .wrap_map {
		height: 240px;
	}
	.map_txt p {
		font-size: 13px;
		line-height: 1.6;
		word-break: keep-all;
	}
}