/* ① 기본: 가로 오버 방지 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden; /* 가로 스크롤 자체를 차단 */
  box-sizing: border-box;
}
/* 사이드/메뉴/토글/로드뷰/백드롭: 레이아웃 비참여 */
#menu-buttons,
#menubuttons-toggle,
#toggle-sidebar,
#sidebar,
#sidebar-backdrop,
#roadview-container,
#roadview-mobile {
  position: fixed;
}

/* 모바일 로드뷰: 100vw 금지 → 실제 뷰포트 폭만 사용 */
#roadview-mobile {
  left: 0;
  right: 0;
  width: auto !important;     /* 기존 width:100vw 제거 */
}

footer{
	display:none
}
/* 기본 hdr 스타일 */
.hdr {
  position: fixed !important;
  z-index: 1003 !important;
  width: 100%;
  transform: translateY(0);
  top: 0;
  left: 0;
  transition: transform 0.3s ease;
}

/* 숨겨진 상태 */
.hdr.hidden {
  transform: translateY(-100%);
}

.btn{border-radius:0;}
main {
	position:relative;
    max-width: 100%;
    min-width: 100%;
    width: 100%;
	height:100%;
    margin: 0 auto;
	padding:0;
	background: #000;

}
.page-map #map-container {
  position: fixed;
  inset: 0;             /* top:0; right:0; bottom:0; left:0; 과 동일 */
  width: auto;
  height: auto;
  min-width: 0;         /* flex/그리드 부모 영향 대비 */
  min-height: 0;
}

.page-map #map {
  width: 100%;
  height: 100%;
  min-width: 0;
}

/* ③ iOS 안전영역 보정이 필요하면(선택) */
:root {
  --safe-left: env(safe-area-inset-left);
  --safe-right: env(safe-area-inset-right);
}
/* .radius_border */
.radius_border {
    border: 1px solid #919191;
    border-radius: 5px;
}
/* 헤더 토글 버튼: 좌측 상단에 플로팅 */
#hdr-toggle-btn {
  position: absolute;         /* map-container 기준으로 고정 */
  top: 0;
  right: 0;
  z-index: 1200;
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  color: #fff;
  font-size: 18px;            /* 살짝 줄여도 좋음 */
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  backdrop-filter: saturate(1.2) blur(2px);
  background:#000;

  /* 중앙 정렬 핵심 */
  display: flex;
  align-items: center;  /* 세로 가운데 */
  justify-content: center; /* 가로 가운데 */

  /* 불필요 → line-height 제거 */
  transition: background-color .2s ease, transform .1s ease, opacity .2s ease;
}

/* 손잡이: 햄버거 바로 아래 고정 */
/* 공통 스타일 */
.menubuttons-handle {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:none;
  cursor:pointer;
  color:#fff;
  background:#007bff;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  font-size:14px;
  font-weight:700;
}

/* 햄버거 바로 아래 고정 */
#menubuttons-toggle.menubuttons-handle {
  position:fixed;
  top:40px;    /* 햄버거 아래 여백 */
  right:0px;
  border-radius:0px; /* 독립 버튼이므로 전체 모서리 둥글림 */
  z-index:1100;
}

/* 패널 안쪽 손잡이 버전 (컨테이너 측면에 붙는 경우) */
.menubuttons .menubuttons-handle {
  position:absolute;
  top:40px;
  right:0;
  border-radius:6px 0 0 6px;
}


#hdr-toggle-btn:active { transform: scale(.95); }

/* 상태별 색상 */
#hdr-toggle-btn.btn-open   { background: #f00; } /* 헤더 보임 → 닫기(X) */
#hdr-toggle-btn.btn-closed { background: #fff; color:#000; } /* 헤더 숨김 → 열기(☰) */
/* 패널 공통 */
.menubuttons{
  position:fixed;
  top:115px; right:0;
  width:180px;
  height:auto;
  background:rgba(0,0,0,.2);
  z-index:999;
  padding:15px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:10px;
  border:1px solid #fff;
  border-right:none;
  z-index:1099;

  /* 슬라이드 애니메이션 */
  transform: translateX(0);
  transition: transform .28s ease;
}
/* 닫힘: 패널 전체를 오른쪽(바깥)으로 밀어 숨김.
   손잡이 폭만큼은 화면 안쪽에 노출되도록 백분율에서 손잡이 폭을 빼서 계산 */
.menubuttons.closed{
  transform: translateX(calc(100% + 16px)); /* +16은 right 여백 보정 */
}
/* 닫힘 상태일 때 손잡이 색상 변경(선택) */

#menubuttons-toggle.closed {
  background:#e53935;
}

.menubuttons.closed .menubuttons-handle{
  background:#e53935;             /* 닫힘 상태 색상 */
}

.menubuttons-row-flex{
	display:flex;
	justify-content:center;
	flex-direction:row;
	gap:10px;
}
.menubuttons .menubuttons-column-flex{
	display:flex;
	flex-direction:column;
	gap:10px;
}
/* .custom_typecontrol 및 내부 요소 */
.custom_typecontrol {
    width: 160px;
    height: 30px;
    z-index: 100;
    font-size: 12px;
    font-family: 'Malgun Gothic', sans-serif;
    display: flex;
    border: 1px solid #999;
    border-radius: 5px;
    overflow: hidden;
}

.custom_typecontrol span {
    display: inline-block;
    height: 30px;
	width:50%;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    box-sizing: border-box; /* ✅ 안정적 */
}

.custom_typecontrol span .label{
	text-align:center;
	width:100%;
}

.custom_typecontrol .btn {
    background: #fff;
    background: linear-gradient(#fff, #e6e6e6);
}

.custom_typecontrol .btn:hover {
    background: #f5f5f5;
    background: linear-gradient(#f5f5f5, #e3e3e3);
}

.custom_typecontrol .btn:active {
    background: #e6e6e6;
    background: linear-gradient(#e6e6e6, #fff);
}

.custom_typecontrol .selected_btn {
    color: #fff;
    background: #425470;
    background: linear-gradient(#425470, #5b6d8a);
}
.custom_typecontrol span:last-child {
    border-right: none;
}

.custom_typecontrol .selected_btn {
    background: #425470;
    color: #fff;
}
.custom_typecontrol .customer_btn {
    background: #fff;
    color: #425470;
}

.custom_typecontrol .btn:hover {
    background: #eee;
}
.custom_typecontrol .selected_btn:hover {
    color: #fff;
}

.custom_zoomcontrol {
    width: 73px;
    height: 36px;
    overflow: hidden;
    z-index: 100;
    background-color: #f5f5f5;
    box-sizing: content-box;
}

/* .custom_zoomcontrol 및 내부 요소 */
.custom_zoomcontrol span {
    display: inline-block;
    width: 36px;
    height: 36px;
    text-align: center;
    cursor: pointer;
}

.custom_zoomcontrol span img {
    width: 15px;
    height: 15px;
    padding: 11px 0;
    border: none;
}

.custom_zoomcontrol span:first-child {
    border-right: 1px solid #bfbfbf;
}
.custom_roadviewcontrol {
    width: 36px;
    height: 36px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    z-index: 1;
    font-size: 12px;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    box-sizing: content-box;
    border: 1px solid #919191;
    border-radius: 5px;
	z-index:100;
}

.custom_roadviewcontrol button {
    display: block;
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    cursor: pointer;
    background: #fff;
    background: linear-gradient(#fff, #e6e6e6);
    border: none;
    font-weight: 600;
    color: #000;
    box-sizing: content-box;
    transition: background 0.3s ease;
	border:none;
	padding:0;
}
#btnRoadviewToggle img{
	width:36px;
}
.custom_roadviewcontrol button:hover {
    background: #f5f5f5;
    background: linear-gradient(#f5f5f5, #e3e3e3);
}

.custom_roadviewcontrol button:active {
    background: #e6e6e6;
    background: linear-gradient(#e6e6e6, #fff);
}

/* 로드뷰 켜진 상태 버튼 (selected_btn) */
.custom_roadviewcontrol .selected_btn {
    color: #fff;
    background: #425470;
    background: linear-gradient(#425470, #5b6d8a);
}

.custom_roadviewcontrol .selected_btn:hover {
    background: #3a4b65;
    background: linear-gradient(#3a4b65, #4e607a);
    color: #fff;
}

#btnRoadviewToggle.disabled {
    background-color: #ccc !important;
    cursor: not-allowed;
    opacity: 0.6;
}

#btnRoadviewToggle i {
    pointer-events: none; /* 아이콘 클릭 방지 */
}

/* 로드뷰 사이즈 변경하는 스타일 코드 */
.roadview-size-controls {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10000;
    display: flex;
    border: 1px solid #999;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

.roadview-size-controls button {
    flex: 1;
    padding: 6px 12px;
    font-size: 13px;
    border: none;
    border-right: 1px solid #999;
    background: linear-gradient(#fdfdfd, #eee);
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.roadview-size-controls button:last-child {
    border-right: none;
}

.roadview-size-controls button:hover {
    background: linear-gradient(#f0f0f0, #ddd);
}

.roadview-size-controls button.active {
    background: linear-gradient(#d0e4ff, #a3c9ff);
    font-weight: bold;
    color: #004080;
    box-shadow: inset 0 0 5px rgba(0, 64, 128, 0.3);
    transform: scale(1.02);
}

/* 컨테이너가 툴팁을 가리지 않도록 변경 */
#poi-buttons{
  width:76px;
  margin:0 auto;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap; 
  gap:2px;  /* ← 줄바꿈 */
  border-radius:5px;
  overflow: visible; /* ← 중요: 기존 hidden을 visible로 */
}

#poi-buttons button{
	width:36px;
	position:relative;
	cursor:pointer;
}
/* 기본: 버튼의 오른쪽에 말풍선 */
#poi-buttons .poi-btn::after{
  content: attr(data-type);
  position:absolute;
  left: calc(100% + 10px);      /* 버튼 오른쪽 바깥 */
  right: auto;
  top: 50%;
  transform: translateY(-50%) translateX(-6px); /* 등장 시작점 */
  background: rgba(0,0,0,.85);
  color:#fff; font-size:12px; line-height:1;
  padding:6px 8px; border-radius:6px; white-space:nowrap;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 2000;
}
#poi-buttons .poi-btn::before{
  content:"";
  position:absolute; top:50%; left:100%;  /* 풍선의 왼쪽 가장자리 */
  right:auto;
  transform: translateY(-50%);
  border-width:6px; border-style: solid;
  /* 왼쪽 방향 화살표(왼쪽 border에 색) */
  border-color: transparent transparent transparent rgba(0,0,0,.85);
  opacity:0; transition: opacity .18s ease; z-index:2000;
}

/* 보여줄 때(공통) */
#poi-buttons .poi-btn:hover::after,
#poi-buttons .poi-btn:focus-visible::after,
#poi-buttons .poi-btn.active::after{
  opacity:1; transform: translateY(-50%) translateX(0);
}
#poi-buttons .poi-btn:hover::before,
#poi-buttons .poi-btn:focus-visible::before,
#poi-buttons .poi-btn.active::before{
  opacity:1;
}

/* 홀수(1,3,5,...)만 버튼의 왼쪽에 배치 */
#poi-buttons .poi-btn:nth-child(odd)::after{
  right: calc(100% + 10px);     /* 버튼 왼쪽 바깥 */
  left: auto;
  transform: translateY(-50%) translateX(6px);  /* 반대쪽에서 등장 */
}
#poi-buttons .poi-btn:nth-child(odd)::before{
  right:100%; left:auto;        /* 풍선의 오른쪽 가장자리 */
  /* 오른쪽 방향 화살표(오른쪽 border에 색) */
  border-color: transparent rgba(0,0,0,.85) transparent transparent;
}


/* 시설별 색상 지정 */
.custom-icon-marker.편의점 img {
    background: #03458d; /* 노랑 */
}

.custom-icon-marker.카페 img {
    background: #fff; /* 브라운/연커피색 */
	border: 1px solid #0c9df2;
}

.custom-icon-marker.약국 img {
    background: #c8e6c9; /* 연녹색 */
}

.custom-icon-marker.은행 img {
    background: #0c9df2; /* 연파랑 */
}

.custom-icon-marker.식당 img {
    background: #ffe0b2; /* 주황빛 */
}
/* 동동이 관련 스타일 코드 */
.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; }

button.close{
	position:absolute;
	display:block;
	top:5px;
	right:5px;
	z-index:10001;
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	border:1px solid #ccc;
	background:#fff;
	color:#000;
	border-radius:50%;
	cursor:pointer;
}

button.close i{
	font-size:18px;
}

/*sidebar 열고 닫기 버튼스타일*/
#toggle-sidebar{
  cursor:pointer;
  position: fixed;         /* 화면 고정 */
  top: 0px;
  left: 0;                 /* 초기값: 닫힘 상태에서 화면 왼쪽 */
  z-index: 999;
  display: block !important;
  width: 28px; height: 80px;
  line-height: 18px; text-align: center;
  font-size: 12px;
  color: #fff; background: #e53935;;
  border: none; border-radius: 0 4px 4px 0;
  box-shadow: 2px 2px 5px rgba(0,0,0,.4);
  transition: left .28s ease, background-color .2s ease, opacity .2s ease;
}

#toggle-sidebar.open { background:#007bff;} /* 열림=닫기 버튼(빨강) */
#toggle-sidebar .lbl { display:block; padding:4px; }


/*sidebar 스타일*/
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
	overflow:hidden;
    background: #f9f9f9;
    border-right: 1px solid #ddd;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1001;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);

    /* ✅ 스크롤바 관련 */
    scrollbar-width: thin;         /* Firefox */
    scrollbar-color: #999 transparent; /* Firefox */
}

/* ✅ Webkit 기반 브라우저 (크롬, 엣지, 사파리) */
#sidebar::-webkit-scrollbar {
    width: 6px;     /* 아주 얇게 */
}
#sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.3);
    border-radius: 3px;
}
#sidebar::-webkit-scrollbar-track {
    background: transparent;
}

/* ✅ 기본적으로 스크롤바를 숨기고, 스크롤 중일 때만 보이게 */
#sidebar::-webkit-scrollbar {
    opacity: 0;
    transition: opacity 0.3s;
}
#sidebar:hover::-webkit-scrollbar {
    opacity: 1;
}

#sidebar.open {
    transform: translateX(0);
}
#search-container{
	width:300px;
	height:70px;
	position:fixed;
	top:0;
	left:0;
	margin:0px;
	box-sizing:border-box;
	z-index:2000;
	background:#fff;	
}
.search-box{
	margin:10px;
	width:280px;
	z-index:1002;
	box-sizing:border-box;
}
#search-input{
	width:100%;
	height:50px;
	padding:5px;
	border:2px solid #ccc;
	box-sizing:border-box;
}
#autocomplete-list{
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
    max-height: 300px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	background: #fff;
	border: 1px solid #ccc;
	border-top: none;
	max-height: 160px;
	overflow-y: auto;
	z-index: 9999;
	display: none;
	font-size: 12px;
	font-family: '돋움', Arial;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* 안내 메시지 전용 스타일 */
#autocomplete-list li.info-message {
    font-style: italic;
    color: #888;
    cursor: default;
}
/* 터치 피드백 */
#autocomplete-list li:active {
    background-color: #f0f0f0;
}
/* 일반 자동완성 항목 */
#autocomplete-list li {
    padding: 10px;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#search-icon{
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: #888;
	cursor:pointer;
}

#location-container{
	height:calc(100% - 70px);
	margin-top: 70px;
	overflow-y:auto;
}
#location-list {
    list-style: none;
    padding:0;
	margin:0;
}

#location-list li {
    padding: 8px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
	font-size:12px;
	font-family:'돋움',Arial;
}

#location-list .list-box{
	display:flex;
	flex-direction:row;
	gap:10px;
	padding:0;
}

#location-list .list-img-box {
  width: 50px;      /* 필요 크기로 조정 */
  height: 50px;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #ccc;
}

.rv-thumb {
  width: 100%;
  height: 100%;
  position: relative;
}

.rv-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 로드뷰 로드 완료 시 fallback 숨김 */
.rv-thumb.loaded .rv-fallback { display: none; }


#location-list .list-box .list-text-box{
	display:flex;
	flex-direction:column;
	gap:5px;
}

#location-list .list-box .list-text-box span.list-center-name{
	display:block;
	font-weight: bold;
	font-size: 12px;
}

#location-list .list-box .list-text-box span.list-address{
	display:block;
	font-size: 11px;
	color: #888;
}

#location-list li:hover {
    background: #eee;
}

.list-img-box img{
	width:50px;
	height:50px;
}

#location-list li.active {
    background: linear-gradient(to right, #dceeff, #f0f9ff);
    border-left: 4px solid #007bff;
}

#load-more-btn{
	display:block;
	width:90%;
	height:40px;
	line-height:40px;
	text-align:center;
	border:none;
	background:#999;
	cursor:pointer;
	color:#fff;
	font-weight:bold;
	margin:10px auto;
	border-radius:5px;
	transition: background-color 0.3s ease, color 0.3s ease;
}
#load-more-btn:hover{
	background-color:#666;
}

#site-detail-wrapper {
    position: absolute;
    top: 0;
	background:#fff;
    left: 300px; /* 사이드바 너비 */
	width:300px;
    height: 100%;
    z-index: 1000;
    transition: transform 0.3s ease;
    transform: translateX(-200%);
	box-sizing:border-box;
	overflow:hidden;
}

/* 내부 스크롤 전용 컨테이너 */
#site-detail-scroll {
  position: absolute;
  inset: 0;                     /* top/right/bottom/left:0 */
  overflow-y: auto;              /* 세로 스크롤 */
  -webkit-overflow-scrolling: touch; /* iOS 관성 스크롤 */
  overscroll-behavior: contain;  /* 바운스/뒤로가기 방지 */
}

#site-detail-wrapper.show {
    transform: translateX(0%);
	background:#fff;
	border-left:1px solid #ccc;
	z-index:1000;
}
#site-detail-content{
	padding:20px;
	position:relative;
}
.detail-close {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
	border-top:none;
    line-height: 28px;
    top: 0px;
    right: 0px; 
    background: #000;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
	z-index:1000;
}

.detail-title {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0 20px;
    color: #222;
}

.detail-info {
	margin-top:10px;
    display: grid;
    grid-template-columns: 80px 1fr; /* 좌: 제목(dt), 우: 내용(dd) */
    background-color: #ccc; /* 행 구분선 */
    font-size: 12px;
	font-family:'돋움',Arial;
    border: 1px solid #ccc;
	border-bottom:none;
}
/* CSS */
#unitToggle.unit-toggle{

  display:inline-flex; align-items:center; gap:6px;
  justify-content:start-end;
  height:26px; padding:0 8px; border:none;
  background:#fff; border-radius:999px; font-size:12px;
  font-family:'돋움', Arial, sans-serif; cursor:pointer;
  user-select:none; transition:box-shadow .15s ease;
}
#unitToggle.unit-toggle:focus-visible{ outline:2px solid #4c9aff; outline-offset:2px; }

#unitToggle .switch{
  width:30px; height:16px; border-radius:999px; border:1px solid #d0d0d0;
  position:relative; flex:0 0 30px; background:#f5f5f5;
}
#unitToggle .switch::after{
  content:""; position:absolute; top:2px; left:1px;
  width:12px; height:12px; border-radius:50%;
  background:#000; transition:transform .18s ease;
}
#unitToggle[data-unit="pyeong"] .switch::after{ transform:translateX(0); }
#unitToggle[data-unit="m2"] .switch::after{ transform:translateX(14px); }

/* 라벨 가독성(활성 측 진하게) */
#unitToggle .label{ color:#666; }
#unitToggle[data-unit="pyeong"] .label:first-of-type{ color:#111; font-weight:600; }
#unitToggle[data-unit="m2"]    .label:last-of-type{  color:#111; font-weight:600; }


#toggle-unit-btn:hover {
    background-color: #e0e0e0;
}
.detail-info dt,
.detail-info dd {
    padding: 6px 8px;
    background: #fff;
	line-height:1.4;
	margin:0;
	border-bottom:1px solid #ccc;
}

.detail-info dt {
    font-weight: bold;
    text-align: center;
    background: #f0f0f0;
}

.custom-marker {
    position: relative;
    width: 30px;
    height: 30px;
    background-color: rgba(0,123,255,0.8);
    border: 2px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-marker i {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 30px;
    text-align: center;
    color: #fff;
    background-color: transparent;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

/* 마우스 오버 시 */
.custom-marker:hover {
	background:#fff;
    border-color: #f00;
    transform: scale(1.05); /* 약간 커짐 */
}

.custom-marker i:hover {
    transform: scale(1.1);
	color:#f00;
}

/* 선택된 마커 */
.custom-marker.active {
    background-color: #f00;
    border-color: #f00;
    z-index: 9999;
}

.custom-marker.active i {
    color: #fff;
    background-color: transparent;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

.marker-wrapper {
    position: relative;
    width: 30px;
    height: 30px;
}

.count-badge {
    position: absolute;
    top: -5px;
    left: 25px;
    background: #e9e9e9;
    color: #000;
    font-family: '돋움', Arial;
    font-size: 10px;
    font-weight: normal;
    padding: 2px;
    min-width: 20px;              /* 숫자 1~3자리까지 여유 있게 */
    aspect-ratio: 1 / 1;          /* 정사각형 유지 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 20;
}

.detail-overlay {
	width:200px !important;
	position: relative;
    font-size: 13px;
    line-height: 1.4;
    color: #333;
    padding: 8px;
    background: #fff;
    border: 1px solid #f00 !important;
    box-shadow: 0 2px 5px rgba(255, 200, 100, 0.7);
	z-index:998;
    border-radius: 4px;
	box-sizing: border-box;     /* padding 포함한 폭 계산 */
    overflow-wrap: anywhere;    /* 긴 단어도 줄바꿈 */
    word-break: break-word;     /* 구형 브라우저 호환 */
}

.detail-overlay h4 {
    margin: 0;
    font-size: 14px !important;
	padding:5px 10px 5px 0 !important;
	overflow-wrap: anywhere !important;    /* 단어 단위 줄바꿈 */
	word-break: break-word;     /* 구형 브라우저 호환 */
	white-space:wrap;
}

.detail-overlay ul {
    width: 100%;                /* 부모 폭 꽉 채움 */
    list-style: none;
    margin: 0;
    padding: 0;
}

.detail-overlay li {
	font-size:12px;
    margin-bottom: 5px !important;
    white-space: normal !important;        /* 자동 줄바꿈 허용 */
    overflow-wrap: anywhere !important;    /* 단어 단위 줄바꿈 */
    word-break: break-word !important;     /* 긴 URL/영문 강제 줄바꿈 */
}
.detail-overlay .popup-list li{
	margin-top:10px;
	font-size:11px;
}
.detail-button{
  position:absolute;
  top:-30px;
  right:5px;
  height:30px;
  padding:3px 8px;
  border:none;
  z-index:999;
  background:#f00;
  color:#fff;
  font-size:12px;
  border-radius:10px 10px 0 0;
  cursor:pointer;
  user-select:none;
  transition:box-shadow .15s ease, opacity .15s ease;
}
.detail-button:hover{ font-weight:bold; }
.detail-button.open{ border-color:#4c9aff; box-shadow:0 0 0 2px rgba(76,154,255,.2) inset; }

.overlay-close-btn{
	position:absolute;
	top:3px;
	right:5px;
	cursor:pointer;
	color:red;
	font-weight:bold;
	cursor:pointer;
}
.detail-overlay .triangle {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #f00 !important; /* 상세 오버레이 배경색 */
	z-index:998;
}

.custom-icon-marker img {
    width: 30px;
    height: 30px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 50%;
    background: #ff0; /* 기본값 (예: 노랑) */
}


/* 마커 호버 시 살짝 강조 */
.custom-marker.hovered {
  box-shadow: 0 0 0 3px rgba(0,123,255,.35);
  transform: scale(1.08);
}

/* 지도 위 임시 호버 링 */
.hover-pulse {
  width: 30px; height: 30px;
  margin-left: 0px; margin-top: 0px; /* 중심 정렬 */
  border-radius: 50%;
  border: 5px solid rgba(255,0,0,.7);
  box-shadow: 0 0 12px rgba(0,123,255,.35);
  animation: hoverPulse 1.2s ease-out infinite;
  background: rgba(0,123,255,.08);
  pointer-events: none;
}
@keyframes hoverPulse {
  0%   { transform: scale(0.5); opacity: .9; }
  70%  { transform: scale(0.8); opacity: .25; }
  100% { transform: scale(1); opacity: 0; }
}
#sidebar-backdrop{
  display:none;
}
.no-scroll { overflow: hidden;
  height: 100vh;
 }
/* 헤더 토글 버튼 – 기본 */

/* 헤더 숨김/표시 애니메이션 */
.hdr{
  position: fixed; top:0; left:0; width:100%; height:60px;
  background:#fff; z-index:2000000;
  transform: translateY(0);
  transition: transform .28s ease;
}
.hdr.hidden{ transform: translateY(-100%); }
@media(max-width:768px){
	#sidebar{
		width:240px;
		z-index:1000;
	}
	#site-detail-wrapper {
		left: 0; /* 사이드바 너비 */
		width:240px;
		transition: transform 0.3s ease;
		transform: translateX(-100%);
		overflow:visible;
	}

	#site-detail-wrapper.show {
		transform: translateX(0%);
		background:#fff;
		border-left:1px solid #ccc;
		z-index:1001;
	}
	#site-detail-content{
		padding:5px;
		position:relative;
	}

	#search-container{
		width:240px;	
	}
	.search-box{
		width:220px;
	}
	.detail-close {
		width: 30px;
		height: 80px;
		border: 1px solid #ccc;
		border-top:none;
		line-height: 28px;
		top: 0px;
		right: -30px; 
		background: #000;
		color: #fff;
		cursor: pointer;
		font-size: 15px;
		z-index:1000;
		border-radius:0 5px 5px 0;
	}
}
@media(min-width:421px){
	.custom_typecontrol span i{
		display:none;
	}
}
@media(max-width:420px){
	
	#site-detail-wrapper {
		position: absolute;
		top: 0;
		background:#fff;
		left: 0; /* 사이드바 너비 */
		width:100%;
		height: 100%;
		z-index: 1000;
		transition: transform 0.3s ease;
		transform: translateX(-200%);
		box-sizing:border-box;
		overflow:hidden;
		z-index:9999 !important;
	}
	#hdr-toggle-btn {
		width: 40px;
        height: 40px;
        font-size: 18px;
        background: rgba(255,255,255,0.7);
		color:#000;
        top: 0;
		border:none;
	}
	.menubuttons{
	  --handle-width: 36px;          /* 손잡이 너비 */
	  position:absolute;
	  top:80px; right:0;
	  width:41px;
	  height:auto;
	  background:rgba(0,0,0,.2);
	  z-index:999;
	  padding:5px;
	  box-sizing:border-box;
	  display:flex;
	  flex-direction:column;
	  gap:10px;

	  /* 슬라이드 애니메이션 */
	  transform: translateX(0);
	  transition: transform .28s ease;
	}
	/* .custom_typecontrol 및 내부 요소 */
	.custom_typecontrol {
		width: 30px;
		height: 60px;
		z-index: 100;
		font-size: 12px;
		font-family: 'Malgun Gothic', sans-serif;
		display: flex;
		flex-direction:column;
		border: 1px solid #999;
		border-radius: 5px;
		overflow: hidden;
	}


	.custom_typecontrol span .label {
		display: none;
	}

	.custom_typecontrol span {
		padding: 7.5px;
		font-size: 15px; /* 아이콘 크기 */
		width:30px;
		height:30px;
		line-height:30px;
	}
	
	.custom_typecontrol span i{
		display:block;
		line-height:1;
	}

	.custom_typecontrol .selected_btn {
		width:30px;
	}
	.menubuttons-row-flex{
		display:flex;
		justify-content:center;
		flex-direction:column;
		gap:10px;
	}
	.menubuttons-column-flex{
		display:flex;
		flex-direction:column;
		gap:10px;
	}
	#btnRoadviewToggle img{
		width:30px;
	}
	.custom_zoomcontrol {
		width: 30px;
		height: 60px;
		overflow: hidden;
		z-index: 100;
		background-color: #f5f5f5;
		box-sizing: content-box;
	}
	.custom_zoomcontrol span:first-child {
		border-bottom: 1px solid #bfbfbf;
	}
	.custom_roadviewcontrol {
		width: 30px;
		height: 30px;
		overflow: hidden;
	}
	.custom_roadviewcontrol button {
		width: 30px;
		height: 30px;
		line-height: 30px;
	}
	.custom_zoomcontrol span {
		width: 30px;
		height: 30px;
		display:block;
	}
	.custom_zoomcontrol span img{
		padding:7.5px;
	}
	#poi-buttons{
	  width:30px;
	}
	#poi-buttons button{
		width:30px;
		height:30px;
		border-radius:5px;
		border:1px solid #999;
	}
	#poi-buttons .poi-btn::after {
		right: calc(100% + 10px); /* 버튼 왼쪽 바깥 */
		left: auto;
		transform: translateY(-50%) translateX(6px); /* 왼쪽에서 등장 */
	}
	#poi-buttons .poi-btn::before {
		right: 100%;
		left: auto;
		border-color: transparent rgba(0,0,0,.85) transparent transparent;
	}
	#poi-buttons button.active{
		background:#fff;
		border:1px solid #333;
	}
	.detail-close {
		width:30px;
		height:30px;
		right: 0px; 
		border-radius:0;
	}
}