이 그대로 있어도 한 줄로 나옵니다. 축약을 쓰지 않고 원래 문구를 그대로 두려면 아래 font-size:0 / line-height:0 두 줄을 지우고 9·10번의 ::after 규칙을 지우면 됩니다. ------------------------------------------------------------ */ #mapWrapper .mapRightButtonsWrap_pc .mapRightButtonsItem .pc_title, #mapWrapper .mapRightButtonsWrap_pc .mapRightButtonsItem .text{ display: block !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: inherit !important; font-size: 0 !important; /* 원래 글자 감춤 */ line-height: 0 !important; text-align: center !important; } /* 상권 버튼 라벨 안에는 공백만 든 이 하나 더 있습니다. font-size 14px / padding 5px 0 을 그대로 갖고 있어 이 버튼만 27px 더 높아집니다. 내용이 없으므로 숨깁니다. */ #mapWrapper .mapRightButtonsWrap_pc .mapRightButtonsItem .pc_title > span, #mapWrapper .mapRightButtonsWrap_pc .mapRightButtonsItem .text > span{ display: none !important; } #mapWrapper .mapRightButtonsWrap_pc .mapRightButtonsItem .pc_title::after, #mapWrapper .mapRightButtonsWrap_pc .mapRightButtonsItem .text::after{ display: block; font-size: var(--rail-label); font-weight: 600; line-height: 1.18; letter-spacing: -.6px; text-align: center; white-space: nowrap; color: inherit; } /* ---- 6. 아이콘 ---------------------------------------------- 사이트가 이미 쓰고 있는 **Font Awesome Pro 5.13.1** 글리프를 그대로 씁니다. (/static/fonts/fontawesome-pro-5.13.1-web/) 마크업의 는 버튼마다 있기도 하고 없기도 하고, 크기가 0x0 으로 찌그러지는 것도 있어서 그대로 두지 않고 감춘 뒤, ::before 에 같은 폰트로 글리프를 찍습니다. 버튼별 글자코드는 9·10·11번에 --rail-fa 로 지정돼 있습니다. 색은 color 를 물려받으므로 hover·활성 상태에서 라벨과 함께 바뀝니다. 코드를 바꾸고 싶으면 Font Awesome 5 문서의 유니코드를 그대로 넣으면 됩니다 (예: fa-map = \f279). 굵기 400 = Regular(far). 300 은 Light(fal), 900 은 Solid(fas). ------------------------------------------------------------ */ #mapWrapper .mapRightButtonsWrap_pc .mapRightButtonsItem > i, #mapWrapper .mapRightButtonsWrap_pc .mapRightButtonsItem > img{ display: none !important; } #mapWrapper .mapRightButtonsWrap_pc .mapRightButtonsItem::before{ content: var(--rail-fa, "") !important; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: var(--rail-icon); height: var(--rail-icon); font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free", FontAwesome; font-weight: 400; font-style: normal; font-variant: normal; font-size: calc(var(--rail-icon) - 1px); line-height: 1; color: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; } /* ---- 7. 우측 레일 — 현위치 / 확대·축소 / 도구 세 카드 ---------- 네이버 지도처럼 위에서부터 현위치 · 확대축소 · 도구 세 덩어리로 나눕니다. 절대배치(position:absolute)는 쓰지 않습니다. 레일이 지도 위쪽에 붙는 레이아웃에서 카드가 화면 밖으로 잘리기 때문입니다. 전부 정상 흐름에 두고, 그림자는 각 덩어리에 box-shadow 로 줍니다. ★ wrap 에 filter 를 쓰면 안 됩니다 ★ 처음에는 wrap 에 filter:drop-shadow 를 걸어 세 덩어리 모양을 한 번에 따라가게 했는데, filter 가 걸린 요소는 그 안쪽 position:fixed 요소의 기준(포함 블록)이 되어 버립니다. 마우스오버 툴팁이 바로 이 fixed 라 Bootstrap 이 계산해 둔 화면 좌표가 wrap 기준으로 다시 해석되면서 툴팁이 엉뚱한 위치(버튼보다 한참 위)에 떴습니다. 그래서 filter 를 걷어내고, 도구 묶음은 좌우로만 번지는 그림자를 각 버튼에 나눠 줘서 이음매가 보이지 않게 했습니다. 순서 바꾸기는 order 로만 하고, 모바일에서 이 레일을 숨기는 규칙을 건드리지 않도록 넓은 화면에서만 flex 를 겁니다. 한 카드로 되돌리려면 이 블록만 지우면 됩니다. ------------------------------------------------------------ */ @media (min-width: 992px){ /* wrap 은 카드 옷을 벗고, 그림자는 아래에서 덩어리별로 줍니다 */ #mapWrapper .mapRightButtonsWrap02{ display: flex !important; flex-direction: column !important; align-items: flex-end !important; width: calc(var(--rail-btn-w) + var(--rail-pad) * 2) !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; filter: none !important; /* 위 주석 참고 — 툴팁이 어긋납니다 */ } /* 현위치 → 맨 위, 확대·축소 → 그 다음 */ #mapWrapper .mapRightButtonsWrap02 > #mapRightButtons_4{ order: -2 !important; } #mapWrapper .mapRightButtonsWrap02 > .custom_zoomcontrol{ order: -1 !important; } /* 두 개는 각각 독립 카드 */ #mapWrapper .mapRightButtonsWrap02 > #mapRightButtons_4, #mapWrapper .mapRightButtonsWrap02 > .custom_zoomcontrol{ box-sizing: border-box !important; width: calc(var(--rail-btn-w) + var(--rail-pad) * 2) !important; padding: var(--rail-pad) !important; margin: 0 0 8px !important; background: var(--rail-bg) !important; border: 1px solid var(--rail-border) !important; border-radius: 12px !important; box-shadow: var(--rail-shadow) !important; } /* 나머지 도구들은 서로 붙여서 하나의 카드처럼 보이게. "현위치 다음의 모든 버튼" 이라 버튼이 늘거나 줄어도 안전합니다. */ #mapWrapper .mapRightButtonsWrap02 > #mapRightButtons_4 ~ .mapRightButtons{ box-sizing: border-box !important; width: calc(var(--rail-btn-w) + var(--rail-pad) * 2) !important; margin: 0 !important; padding: 0 var(--rail-pad) !important; background: var(--rail-bg) !important; border: 1px solid var(--rail-border) !important; border-top: none !important; border-bottom: none !important; border-radius: 0 !important; /* 좌우로만 번지는 그림자. 번짐(blur 10)보다 수축(spread -8)을 크게 잡아 위아래로는 테두리 밖으로 아예 나오지 않게 했습니다. 그래서 버튼끼리 맞닿는 이음매가 지저분해지지 않습니다. 구분선은 그림자에 맡기지 않고 마지막 줄의 0 1px 0 으로 또렷하게 1px 만 긋습니다 (--rail-seam). */ box-shadow: -7px 0 10px -8px rgba(16,24,40,.45), 7px 0 10px -8px rgba(16,24,40,.45) !important; } /* 첫 도구 = 앞에 다른 도구가 없는 것. 인접 셀렉터(+)를 쓰지 않는 이유: 버튼에 마우스를 올리면 Bootstrap 이
을 그 버튼 바로 뒤에 끼워넣어
"+" 매칭이 끊기고 카드 윗면이 사라집니다. */
#mapWrapper .mapRightButtonsWrap02 > #mapRightButtons_4 ~ .mapRightButtons:not(#mapRightButtons_4 ~ .mapRightButtons ~ .mapRightButtons){
border-top: 1px solid var(--rail-border) !important;
border-radius: 12px 12px 0 0 !important;
padding-top: var(--rail-pad) !important;
box-shadow: -7px 0 10px -8px rgba(16,24,40,.45),
7px 0 10px -8px rgba(16,24,40,.45),
0 -7px 10px -8px rgba(16,24,40,.45) !important;
}
/* 마지막 도구 = 뒤에 다른 도구가 없는 것 (:last-child 도 툴팁에 깨짐) */
#mapWrapper .mapRightButtonsWrap02 > #mapRightButtons_4 ~ .mapRightButtons:not(:has(~ .mapRightButtons)){
border-bottom: 1px solid var(--rail-border) !important;
border-radius: 0 0 12px 12px !important;
padding-bottom: var(--rail-pad) !important;
box-shadow: -7px 0 10px -8px rgba(16,24,40,.45),
7px 0 10px -8px rgba(16,24,40,.45),
0 10px 16px -8px rgba(16,24,40,.40),
0 4px 6px -4px rgba(16,24,40,.30) !important;
}
/* 버튼 사이 간격 */
#mapWrapper .mapRightButtonsWrap02 > #mapRightButtons_4 ~ .mapRightButtons .mapRightButtonsItem{
margin-bottom: var(--rail-gap) !important;
}
#mapWrapper .mapRightButtonsWrap02 > #mapRightButtons_4 ~ .mapRightButtons:not(:has(~ .mapRightButtons)) .mapRightButtonsItem{
margin-bottom: 0 !important;
}
/* 끼어든 툴팁이 레일 안에서 자리를 차지하지 않도록.
position 은 사이트가 이미 fixed 로 쓰고 있고, Bootstrap 이
화면 좌표로 위치를 계산하므로 그대로 둡니다.
(위 filter 주석 참고 — 조상에 filter 가 있으면 어긋납니다) */
#mapWrapper .mapRightButtonsWrap02 > .tooltip{
position: fixed !important;
order: 99 !important;
}
}
/* 확대·축소 버튼 */
#mapWrapper .mapRightButtonsWrap_pc .custom_zoomcontrol > span{
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: var(--rail-btn-w) !important;
height: 34px !important;
margin: 0 0 var(--rail-gap) !important;
padding: 0 !important;
border: none !important; /* 확대 버튼 아래 회색 선 제거 */
border-radius: 8px !important;
background: transparent !important;
color: var(--rail-fg) !important;
cursor: pointer !important;
transition: background-color .12s, color .12s;
}
#mapWrapper .mapRightButtonsWrap_pc .custom_zoomcontrol > span:last-child{ margin-bottom: 0 !important; }
#mapWrapper .mapRightButtonsWrap_pc .custom_zoomcontrol > span:hover{
background: var(--rail-tint) !important;
color: var(--rail-accent) !important;
}
#mapWrapper .mapRightButtonsWrap_pc .custom_zoomcontrol > span > i,
#mapWrapper .mapRightButtonsWrap_pc .custom_zoomcontrol > span > img{ display: none !important; }
#mapWrapper .mapRightButtonsWrap_pc .custom_zoomcontrol > span::before{
content: var(--rail-fa, "") !important;
display: flex;
align-items: center;
justify-content: center;
width: var(--rail-icon);
height: var(--rail-icon);
font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free", FontAwesome;
font-weight: 400;
font-style: normal;
font-variant: normal;
font-size: calc(var(--rail-icon) - 1px);
line-height: 1;
color: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
#mapWrapper .mapRightButtonsWrap_pc .custom_zoomcontrol > span:first-child,
#mapWrapper .mapRightButtonsWrap_mo01 > .custom_zoomcontrol > span:first-child{ --rail-fa: "\f067 "; }
#mapWrapper .mapRightButtonsWrap_pc .custom_zoomcontrol > span:last-child,
#mapWrapper .mapRightButtonsWrap_mo01 > .custom_zoomcontrol > span:last-child{ --rail-fa: "\f068 "; }
/* ---- 8. 화면이 낮을 때 ---------------------------------------
좌측 약 380px · 우측 약 460px 가 필요합니다.
overflow 를 주면 하위 패널이 잘리므로 여기서는 여백만 줄입니다.
------------------------------------------------------------ */
@media (max-height: 760px){
:root{ --rail-btn-h: 38px; --rail-gap: 1px; }
#mapWrapper .mapRightButtonsWrap_pc .mapRightButtonsItem{ padding: 3px 1px !important; }
#mapWrapper .mapRightButtonsWrap_pc .custom_zoomcontrol > span{ height: 30px !important; }
}
/* ============================================================
9. 좌측 레일 — 버튼별 아이콘 + 축약 문구
각 버튼 고유 클래스로 지정합니다. 안전정보는 11번에 따로 있습니다.
============================================================ */
/* 브리핑 */
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.customerView .mapRightButtonsItem,
#mapWrapper .mapRightButtonsWrap_mo02 #customerView .mapRightButtonsItem{ --rail-fa: "\f685 "; }
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.customerView .pc_title::after,
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.customerView .text::after{ content: "\BE0C \B9AC \D551 "; }
/* 실거래 */
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.mobile_real_house_btn .mapRightButtonsItem,
#mapWrapper .mapRightButtonsWrap_mo02 #mobile_real_house_btn{ --rail-fa: "\f201 "; }
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.mobile_real_house_btn .pc_title::after,
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.mobile_real_house_btn .text::after{ content: "\C2E4 \AC70 \B798 "; }
/* 임장관리 */
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.add_imjang .mapRightButtonsItem,
#mapWrapper .mapRightButtonsWrap_mo02 .add_imjang > .mapRightButtonsItem{ --rail-fa: "\f46c "; }
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.add_imjang .pc_title::after,
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.add_imjang .text::after{ content: "\C784 \C7A5 "; }
/* 건축물검색 */
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.arch_move_btn .mapRightButtonsItem,
#mapWrapper .mapRightButtonsWrap_mo02 .arch_move_btn > .mapRightButtonsItem:not(.estate_text){ --rail-fa: "\f689 "; }
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.arch_move_btn .pc_title::after,
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.arch_move_btn .text::after{ content: "\AC74 \CD95 \BB3C "; }
/* 건물탐색 */
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.new_mapRightButtons_filter .mapRightButtonsItem,
#mapWrapper .mapRightButtonsWrap_mo02 .new_mapRightButtons_filter > .mapRightButtonsItem{ --rail-fa: "\f1ad "; }
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.new_mapRightButtons_filter .pc_title::after,
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.new_mapRightButtons_filter .text::after{ content: "\AC74 \BB3C "; }
/* 필지합산 */
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.new_mapRightButtons_sum_map .mapRightButtonsItem,
#mapWrapper .mapRightButtonsWrap_mo02 .new_mapRightButtons_sum_map > .mapRightButtonsItem{ --rail-fa: "\f5fd "; }
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.new_mapRightButtons_sum_map .pc_title::after,
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.new_mapRightButtons_sum_map .text::after{ content: "\D544 \C9C0 \D569 "; }
/* 상권정보 */
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons:has(> .sanggwon_text) .mapRightButtonsItem,
#mapWrapper .mapRightButtonsWrap_mo02 .mapRightButtonsItem.sanggwon_text{ --rail-fa: "\f54e "; }
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons:has(> .sanggwon_text) .pc_title::after,
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons:has(> .sanggwon_text) .text::after{ content: "\C0C1 \AD8C "; }
/* 중개소검색 */
#mapWrapper .mapRightButtonsWrap01 > .arch_move_btn ~ .mapRightButtons.arch_move_btn .mapRightButtonsItem,
#mapWrapper .mapRightButtonsWrap_mo02 .mapRightButtonsItem.estate_text{ --rail-fa: "\f4d9 "; }
#mapWrapper .mapRightButtonsWrap01 > .arch_move_btn ~ .mapRightButtons.arch_move_btn .pc_title::after,
#mapWrapper .mapRightButtonsWrap01 > .arch_move_btn ~ .mapRightButtons.arch_move_btn .text::after{ content: "\C911 \AC1C \C18C "; }
/* ============================================================
10. 우측 레일 — 버튼별 아이콘 + 축약 문구
현위치·지도 제자리로는 원래 라벨이 없어 아이콘만 나옵니다.
============================================================ */
/* 현위치 */
#mapWrapper .mapRightButtonsWrap02 > #mapRightButtons_4 .mapRightButtonsItem,
#mapWrapper .mapRightButtonsWrap_mo01 > #mapRightButtons_4_mo .mapRightButtonsItem{ --rail-fa: "\f601 "; }
/* 지도유형 */
#mapWrapper .mapRightButtonsWrap02 > #mapRightButtons_map .mapRightButtonsItem,
#mapWrapper .mapRightButtonsWrap_mo01 > #mapRightButtons_map_mo .mapRightButtonsItem{ --rail-fa: "\f279 "; }
#mapWrapper .mapRightButtonsWrap02 > #mapRightButtons_map .pc_title::after,
#mapWrapper .mapRightButtonsWrap02 > #mapRightButtons_map .text::after{ content: "\C9C0 \B3C4 "; }
/* 측정 */
#mapWrapper .mapRightButtonsWrap02 > .mapRightButtons:has(> #measure_selectbox) .mapRightButtonsItem{ --rail-fa: "\f545 "; }
#mapWrapper .mapRightButtonsWrap02 > .mapRightButtons:has(> #measure_selectbox) .pc_title::after,
#mapWrapper .mapRightButtonsWrap02 > .mapRightButtons:has(> #measure_selectbox) .text::after{ content: "\CE21 \C815 "; }
/* 로드뷰 */
#mapWrapper .mapRightButtonsWrap02 > #mapRightButtons_12 .mapRightButtonsItem,
#mapWrapper .mapRightButtonsWrap_mo01 > #mapRightButtons_12_mo .mapRightButtonsItem{ --rail-fa: "\f21d "; }
#mapWrapper .mapRightButtonsWrap02 > #mapRightButtons_12 .pc_title::after,
#mapWrapper .mapRightButtonsWrap02 > #mapRightButtons_12 .text::after{ content: "\B85C \B4DC \BDF0 "; }
/* 주변 */
#mapWrapper .mapRightButtonsWrap02 > #mapRightButtons_10 .mapRightButtonsItem{ --rail-fa: "\f14e "; }
#mapWrapper .mapRightButtonsWrap02 > #mapRightButtons_10 .pc_title::after,
#mapWrapper .mapRightButtonsWrap02 > #mapRightButtons_10 .text::after{ content: "\C8FC \BCC0 "; }
/* 지도 제자리로 */
#mapWrapper .mapRightButtonsWrap02 > #mapRightButtons_1 .mapRightButtonsItem,
#mapWrapper .mapRightButtonsWrap_mo01 > #mapRightButtons_1_mo .mapRightButtonsItem{ --rail-fa: "\f2f1 "; }
/* 위치복사 */
#mapWrapper .mapRightButtonsWrap02 > .mapRightButtons:has(> .urlCopyDiv) .mapRightButtonsItem,
#mapWrapper .mapRightButtonsWrap_mo01 > #mapRightButtons_2_mo .mapRightButtonsItem{ --rail-fa: "\f0c5 "; }
#mapWrapper .mapRightButtonsWrap02 > .mapRightButtons:has(> .urlCopyDiv) .pc_title::after,
#mapWrapper .mapRightButtonsWrap02 > .mapRightButtons:has(> .urlCopyDiv) .text::after{ content: "\BCF5 \C0AC "; }
/* 그리기 */
#mapWrapper .mapRightButtonsWrap02 > .mapRightButtons:has(> [onclick*="canvasOn"]) .mapRightButtonsItem{ --rail-fa: "\f040 "; }
#mapWrapper .mapRightButtonsWrap02 > .mapRightButtons:has(> [onclick*="canvasOn"]) .pc_title::after,
#mapWrapper .mapRightButtonsWrap02 > .mapRightButtons:has(> [onclick*="canvasOn"]) .text::after{ content: "\ADF8 \B9AC \AE30 "; }
/* 지도 제자리로(#mapRightButtons_1)는 마크업에 라벨 요소(.pc_title)가
아예 없고 아이콘만 있습니다. 그래서 이 버튼만 글자가 비어 어색합니다.
버튼 자체의 ::after 로 문구를 붙여 줍니다. */
#mapWrapper .mapRightButtonsWrap02 > #mapRightButtons_1 .mapRightButtonsItem::after{
content: "\CD08 \AE30 \D654 ";
display: block;
font-size: var(--rail-label);
font-weight: 600;
line-height: 1.18;
letter-spacing: -.6px;
text-align: center;
white-space: nowrap;
color: inherit;
}
/* ============================================================
11. 안전정보 버튼 (#safemapNavBtn)
좌측 레일 9번째, 관리자/직원에게만 나오는 버튼입니다.
id 가 있어 순서와 무관하게 잡힙니다.
원래 이 버튼만 border:2px solid #fff + twinkle 깜빡임이 걸려
있는데, 새 레일이 흰 배경이라 흰 테두리가 보이지 않고 깜빡임만
남아 다른 버튼과 따로 놉니다. 테두리·애니메이션을 걷어냅니다.
(패널 #safemapPanel 은 건드리지 않습니다)
============================================================ */
#mapWrapper #safemapNavBtn .mapRightButtonsItem{
--rail-fa: "\f2f7 ";
position: relative !important;
border: none !important;
animation: none !important;
}
#mapWrapper #safemapNavBtn .pc_title::after{ content: "\C548 \C804 "; }
/* NEW 배지는 재개발 버튼으로 옮겼습니다(아래 11-2번). 안전정보는 이제
새 기능이 아니므로 배지 없이 다른 버튼과 같은 모양으로 둡니다. */
/* ============================================================
11-2. 재개발 버튼 (#redevNavBtn)
안전정보 바로 아래, 관리자/직원에게만 나오는 버튼입니다.
id 가 있어 순서와 무관하게 잡힙니다.
※ 레일은 마크업의 와 원래 글자를 감추고(6번 font-size:0)
아이콘은 --rail-fa, 문구는 .pc_title::after 로 다시 그립니다.
그래서 여기에 두 값을 적어 주지 않으면 빈 흰 버튼으로 보입니다.
============================================================ */
#mapWrapper #redevNavBtn .mapRightButtonsItem{
--rail-fa: "\f64f "; /* fa-city */
position: relative !important;
border: none !important;
animation: none !important;
}
#mapWrapper #redevNavBtn .pc_title::after{ content: "\C7AC \AC1C \BC1C "; }
/* 신규 기능 표시 — 우측 상단 NEW 배지.
대표 컬러와 섞이지 않도록 핑크 고정색을 씁니다.
색을 바꾸고 싶으면 --rail-new-bg 값만 수정하면 됩니다.
버튼 상단 가운데에 걸칩니다. 높이는 --rail-new-top 으로 조절합니다.
(음수가 클수록 위로 더 올라갑니다. 레일 카드에 overflow 를
걸지 않았으므로 카드 밖으로 나가도 잘리지 않습니다.)
더 이상 새 기능이 아니게 되면 이 블록만 지우면 됩니다. */
#mapWrapper #redevNavBtn .mapRightButtonsItem{
--rail-new-bg: #FF2D78;
--rail-new-top: -3px;
}
#mapWrapper #redevNavBtn .mapRightButtonsItem::after{
content: "NEW";
position: absolute;
top: var(--rail-new-top, -3px);
left: 50%;
right: auto;
transform: translateX(-50%);
z-index: 2;
padding: 1px 3px;
border-radius: 4px;
background: var(--rail-new-bg, #FF2D78);
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 7px;
font-weight: 800;
line-height: 1.35;
letter-spacing: .02em;
white-space: nowrap;
pointer-events: none;
animation: rail-new-blink 1.6s ease-in-out .5s infinite;
}
@keyframes rail-new-blink{
0%, 55%, 100%{ opacity: 1; }
75% { opacity: .2; }
}
/* 아직 한 번도 안 눌러 본 상태에서만 깜빡입니다.
레이어를 켜면(버튼에 .active) 이미 확인한 것으로 보고 멈춥니다.
마우스를 올렸을 때도 멈춥니다.
※ .active 는 redev_layer 가 붙였다 뗍니다 — 여기서는 읽기만 합니다. */
#mapWrapper #redevNavBtn.active .mapRightButtonsItem::after,
#mapWrapper #redevNavBtn .mapRightButtonsItem:hover::after{
animation: none !important;
opacity: 1 !important;
}
/* ============================================================
12. 활성화(선택)된 버튼 — 배경색
원래는 버튼 테두리 색이 대표 컬러로 바뀌는 방식으로 활성 상태를
표시했는데, 새 레일은 테두리를 없앴기 때문에 표시가 사라졌습니다.
대신 배경을 대표 컬러로 채우고 글자·아이콘을 흰색으로 바꿉니다.
(아이콘은 color 를 물려받으므로 color 만 바꾸면 같이 따라옵니다)
사이트가 활성 상태를 표시하는 방식이 버튼마다 제각각이라
네 가지를 모두 받습니다 — 어느 것도 새로 만들지 않고 읽기만 합니다.
① .mapRightButtons 래퍼에 .active … 브리핑 실거래 임장 로드뷰
② .mapRightButtonsItem 에 .active/.on … 지도 건물 상권 필지합
③ 하위 패널의 인라인 display:block … 측정 주변
④ body 로 옮겨진 패널의 .on … 안전
⑤ 화면 어딘가의 도구모음이 열렸는지 … 그리기
※ 위치복사 / 건축물 / 중개소 / 초기화 는 누른 순간 동작만 하고
켜진 채로 남지 않는 버튼이라 활성 표시가 없습니다.
============================================================ */
/* ①② 클래스로 알 수 있는 버튼 */
#mapWrapper .mapRightButtonsWrap_pc > .mapRightButtons.active .mapRightButtonsItem,
#mapWrapper .mapRightButtonsWrap_pc .mapRightButtonsItem.active,
#mapWrapper .mapRightButtonsWrap_pc .mapRightButtonsItem.on{
background: var(--rail-active-bg) !important;
color: var(--rail-active-fg) !important;
}
/* ③④ :has() 로 하위 패널 상태를 읽는 버튼.
:has() 미지원 브라우저에서 위 규칙까지 같이 죽지 않도록 분리했습니다. */
#mapWrapper .mapRightButtonsWrap02 > .mapRightButtons:has(> #measure_selectbox[style*="display: block"]) .mapRightButtonsItem,
#mapWrapper .mapRightButtonsWrap02 > .mapRightButtons:has(> #store_selectbox[style*="display: block"]) .mapRightButtonsItem{
background: var(--rail-active-bg) !important;
color: var(--rail-active-fg) !important;
}
:root:has(#safemapPanel.on) #mapWrapper #safemapNavBtn .mapRightButtonsItem{
background: var(--rail-active-bg) !important;
color: var(--rail-active-fg) !important;
}
/* ⑤ 그리기 — 사이트가 레일 버튼에는 표시를 남기지 않고
화면 하단 도구모음(div.canvas_tools, 색상/다시 그리기/그리기 종료)만
보였다 감췄다 합니다. 그 도구모음이 떠 있으면 켜진 것으로 봅니다.
(canvasOn 은 .show(), 그리기 종료는 .hide() → 인라인 display) */
:root:has(div.canvas_tools[style*="display: block"]) #mapWrapper .mapRightButtonsWrap02 > .mapRightButtons:has(> [onclick*="canvasOn"]) .mapRightButtonsItem{
background: var(--rail-active-bg) !important;
color: var(--rail-active-fg) !important;
}
/* ============================================================
13. 그리기 도구모음 (div.canvas_tools)
그리기 버튼을 누르면 지도 하단에 뜨는 "색상 / 다시 그리기 /
그리기 종료" 막대입니다. 원래 분홍 실선 테두리(#ea0f53)에
구분선·글자 크기가 제각각이라 레일과 따로 놀았습니다.
레일 카드와 같은 모양으로 맞춥니다.
※ 이 요소의 display 는 사이트가 여닫으므로 절대 건드리지 않습니다.
안쪽 .btn 들은 항상 떠 있는 요소라 안전합니다.
레이아웃 방식(float)도 그대로 두고 겉모양만 바꿉니다.
============================================================ */
div.canvas_tools{
padding: 6px !important;
background: var(--rail-bg) !important;
border: 1px solid var(--rail-border) !important;
border-radius: 12px !important;
box-shadow: var(--rail-shadow) !important;
}
div.canvas_tools > .btn{
height: 34px !important;
padding: 0 12px !important;
margin: 0 !important;
border-right: 1px solid var(--rail-divider) !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: background-color .12s, color .12s;
}
div.canvas_tools > .btn:last-child{ border-right: none !important; }
div.canvas_tools > .btn:hover{ background: var(--rail-tint) !important; }
div.canvas_tools > .btn *{
font-size: 13px !important;
font-weight: 600 !important;
line-height: 34px !important;
color: var(--rail-fg) !important;
}
div.canvas_tools > .btn i{
margin-right: 7px !important;
font-size: 14px !important;
font-weight: 400 !important;
}
div.canvas_tools > #canvas-reset i{ color: var(--rail-accent) !important; }
div.canvas_tools > #canvas-close i{ color: #F04438 !important; }
div.canvas_tools > #canvas-close:hover{ background: #FEF3F2 !important; }
/* 색상 선택 — 34px 줄 안에서 세로 가운데로 */
div.canvas_tools > #canvas-color > span{ margin-right: 8px !important; }
div.canvas_tools > #canvas-color > #pen-color{
width: 28px !important;
height: 20px !important;
margin-top: 7px !important;
padding: 0 !important;
background: var(--rail-bg) !important;
border: 1px solid var(--rail-border) !important;
border-radius: 5px !important;
cursor: pointer !important;
}
/* ============================================================
14. 실거래 패널 (.real_house_btn_desc)
실거래 버튼을 누르면 옆에 뜨는 매물 종류 목록입니다.
(아파트 / 다세대 / 단독·다가구 / 오피스텔 / 토지 / 상가·사무실 /
공장·창고 / 상업용건물)
※ 이 패널의 display 는 사이트가 .show()/.hide() 로 여닫고,
모바일에서는 display:none !important 로 숨기므로
display 는 절대 건드리지 않습니다.
안쪽 항목의 켜짐/꺼짐도 .on 클래스로 사이트가 관리합니다 —
여기서는 읽기만 합니다.
※ 켜진 항목의 종류별 색(아파트 보라 / 토지 주황 …)은 사이트가
정한 의미 있는 색이라 그대로 둡니다. 꺼진 항목만 손봅니다.
============================================================ */
.real_house_btn_desc{
/* 가장 긴 항목("단독·다가구", "상가·사무실")이 80.6px 라
안쪽 여백까지 더해 111px 이면 충분합니다. 9px 여유를 뒀습니다. */
width: 120px !important;
padding: 6px !important;
background: var(--rail-bg) !important;
border: 1px solid var(--rail-border) !important;
border-radius: 12px !important;
box-shadow: var(--rail-shadow) !important;
}
.real_house_btn_desc .real_btn{
width: 100% !important;
padding: 0 8px !important;
border-radius: 8px !important;
transition: background-color .12s;
}
.real_house_btn_desc .real_btn:not(:last-child){ margin-bottom: 2px !important; }
/* 꺼진 항목 — 원래 회색 판(#f6f6f6)을 걷어내고 hover 만 남깁니다.
:not(.on) 으로 한정해야 켜진 항목의 종류별 색이 살아남습니다. */
.real_house_btn_desc .real_btn:not(.on){ background-color: transparent !important; }
.real_house_btn_desc .real_btn:not(.on):hover{ background-color: var(--rail-tint) !important; }
.real_house_btn_desc .real_btn:not(.on) *{ color: var(--rail-fg) !important; }
/* 글자·아이콘 — 30px/14px 로 뜨던 것을 레일 라벨과 맞춥니다 */
.real_house_btn_desc .real_btn > *{ line-height: 32px !important; }
.real_house_btn_desc .real_btn span{
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: -.3px !important;
white-space: nowrap !important;
}
.real_house_btn_desc .real_btn.on span{ font-weight: 700 !important; }
.real_house_btn_desc .real_btn span > i{
width: 17px !important;
margin-right: 7px !important;
font-size: 14px !important;
}
/* ============================================================
15. 임장관리 패널 (.add_imjang .mapRightButtonsItem_btm)
임장 버튼을 누르면 옆에 뜨는 필터입니다.
(날짜 / 전체·오늘·어제·내일 / 상태 / 담당자 / 초기화)
※ 패널의 display 는 사이트가 .show()/.hide() 로 여닫고
모바일에서는 display:none !important 로 숨기므로 손대지 않습니다.
날짜·기간 버튼의 켜짐(.on)도 사이트가 관리합니다.
※ 선택 상태 색이 #0557FE 로 박혀 있어 사이트 대표 컬러와
따로 놀았습니다. --rail-accent 를 따라가게 바꿉니다.
※ 초기화 버튼은 빨강(#FF3148)이었는데, 단순 필터 초기화라
경고색이 과해 보여 회색 → hover 시 대표 컬러로 바꿨습니다.
빨강을 유지하려면 아래 reset_btn 규칙 세 줄만 지우면 됩니다.
============================================================ */
.add_imjang .mapRightButtonsItem_btm{
background: var(--rail-bg) !important;
border: 1px solid var(--rail-border) !important;
border-radius: 12px !important;
box-shadow: var(--rail-shadow) !important;
}
.add_imjang .mapRightButtonsItem_btm .imgang_filter{
padding: 8px !important;
background: transparent !important;
border-bottom: none !important; /* 카드 안쪽의 어정쩡한 밑줄 제거 */
}
.add_imjang .mapRightButtonsItem_btm .imgang_filter_info{ margin-top: 6px !important; }
/* 입력 요소 공통 — 높이 32px 유지, 테두리·라운드·글자만 정리 */
.add_imjang .mapRightButtonsItem_btm .date_input > input,
.add_imjang .mapRightButtonsItem_btm .date_btnbox .date_btn,
.add_imjang .mapRightButtonsItem_btm .item_status,
.add_imjang .mapRightButtonsItem_btm .item_keeper,
.add_imjang .mapRightButtonsItem_btm .reset_btn{
height: 32px !important;
padding: 0 7px !important;
background: var(--rail-bg) !important;
border: 1px solid var(--rail-border) !important;
border-radius: 8px !important;
color: var(--rail-fg) !important;
font-size: 12px !important;
box-shadow: none !important;
transition: background-color .12s, border-color .12s, color .12s;
}
.add_imjang .mapRightButtonsItem_btm .date_btnbox .date_btn{
padding: 0 !important;
line-height: 30px !important;
font-weight: 600 !important;
}
.add_imjang .mapRightButtonsItem_btm .date_btnbox .date_btn:not(.on):hover{
background: var(--rail-tint) !important;
color: var(--rail-accent) !important;
}
/* 선택된 날짜 / 기간 버튼 */
.add_imjang .mapRightButtonsItem_btm .date_input > input.on,
.add_imjang .mapRightButtonsItem_btm .date_btnbox .date_btn.on{
color: var(--rail-accent) !important;
background: var(--rail-tint) !important;
border-color: var(--rail-accent) !important;
}
/* 초기화 버튼 */
.add_imjang .mapRightButtonsItem_btm .reset_btn{ padding: 0 !important; }
.add_imjang .mapRightButtonsItem_btm .reset_btn i{
color: var(--rail-fg) !important;
font-size: 13px !important;
}
.add_imjang .mapRightButtonsItem_btm .reset_btn:hover{
background: var(--rail-tint) !important;
border-color: var(--rail-accent) !important;
}
.add_imjang .mapRightButtonsItem_btm .reset_btn:hover i{ color: var(--rail-accent) !important; }
/* ============================================================
16. 건물 탐색 — 메뉴 + 필터 팝업
건물 버튼을 누르면 두 개가 뜹니다.
① 바로 옆 작은 메뉴 (건물 노후도 / 연면적 / 용적률)
→ .new_mapRightButtons_filter .mapRightButtonsItem_btm
② 그중 하나를 고르면 열리는 큰 필터 패널
→ .park_popup (#popupContent) — body 바로 밑에 있습니다
※ 둘 다 display 는 사이트가 여닫으므로 손대지 않습니다.
※ 슬라이더·색상 범례는 이미 사이트 대표 컬러를 쓰고 있어
그대로 뒀습니다. 탭 밑줄만 #444 로 박혀 있어 맞춰 줍니다.
============================================================ */
/* ---- 16-1. 작은 메뉴 ---------------------------------------- */
.new_mapRightButtons_filter .mapRightButtonsItem_btm{
padding: 4px !important;
background: var(--rail-bg) !important;
border: 1px solid var(--rail-border) !important;
border-radius: 12px !important;
box-shadow: var(--rail-shadow) !important;
}
/* 글자를 14px → 12px 로 줄여 폭이 줄면서, 옆에 열리는 필터 팝업
(left:165px)과 겹치던 것도 함께 해결됩니다. */
.new_mapRightButtons_filter .mapRightButtonsItem_btm .titlearea > a.filter_area{
padding: 7px 10px !important;
border: none !important;
border-radius: 8px !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: -.3px !important;
color: var(--rail-fg) !important;
white-space: nowrap !important;
text-decoration: none !important;
transition: background-color .12s, color .12s;
}
.new_mapRightButtons_filter .mapRightButtonsItem_btm .titlearea > a.filter_area:hover,
.new_mapRightButtons_filter .mapRightButtonsItem_btm .titlearea > a.filter_area.on{
background: var(--rail-tint) !important;
color: var(--rail-accent) !important;
}
/* ---- 16-2. 필터 팝업 ---------------------------------------- */
/* 원래 bottom:22px 로 화면 아래에 붙어 있어 건물 버튼과 한참
떨어져 보였습니다. 세로 가운데로 옮겨 레일과 눈높이를 맞춥니다.
(본문은 안쪽 .scroll 이 이미 스크롤을 담당합니다) */
.park_popup{
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
border: 1px solid var(--rail-border) !important;
border-radius: 14px !important;
overflow: hidden !important; /* 둥근 모서리 안쪽으로 내용 정리 */
box-shadow: var(--rail-shadow) !important;
}
.park_popup .mwrap{ background: var(--rail-bg) !important; }
/* 색상 범례 머리 */
.park_popup .mbp-ir{
padding: 10px !important;
background: #F9FAFB !important;
border-bottom: 1px solid var(--rail-divider) !important;
}
/* 필터 설정 / 직접 입력 탭 */
.park_popup .explore_config{ border-bottom: 1px solid var(--rail-divider) !important; }
.park_popup .explore_config button{
background: transparent !important;
font-size: 13px !important;
color: #98A2B3 !important;
}
.park_popup .explore_config button span{ color: inherit !important; }
.park_popup .explore_config button.on{ color: var(--rail-accent) !important; }
.park_popup .explore_config button.on::before{ background: var(--rail-accent) !important; }
/* 항목 제목 */
.park_popup .ptitle .htxt{
font-size: 13px !important;
font-weight: 700 !important;
color: #1D2939 !important;
}
/* ============================================================
17. 상권정보 패널 (#mapWrapper .mapRightButtonsWrap_pc #sanggwon_selectbox)
상권 버튼을 누르면 옆에 뜨는 선택지 두 개입니다.
(발달상권 / 시장·상점가)
※ display 는 사이트가 여닫으므로 손대지 않습니다.
※ 켜졌을 때의 보라색(#5733e6 / #a754cf)은 지도에 그려지는
상권 영역 색과 같은 색이라 그대로 둡니다. 꺼진 상태만 손봅니다.
※ 같은 id 가 모바일 마크업에도 중복으로 들어 있어, PC 레일
안쪽(.mapRightButtonsWrap_pc)으로 한정했습니다.
============================================================ */
#mapWrapper .mapRightButtonsWrap_pc #sanggwon_selectbox{
padding: 4px !important;
background: var(--rail-bg) !important;
border: 1px solid var(--rail-border) !important;
border-radius: 12px !important;
box-shadow: var(--rail-shadow) !important;
}
#mapWrapper .mapRightButtonsWrap_pc #sanggwon_selectbox .titlestore > label{
padding: 9px 12px !important;
border-radius: 8px !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: -.3px !important;
white-space: nowrap !important;
transition: background-color .12s, color .12s;
}
#mapWrapper .mapRightButtonsWrap_pc #sanggwon_selectbox .titlestore > label:not(.on){
background-color: transparent !important;
color: var(--rail-fg) !important;
}
#mapWrapper .mapRightButtonsWrap_pc #sanggwon_selectbox .titlestore > label:not(.on):hover{
background-color: var(--rail-tint) !important;
color: var(--rail-accent) !important;
}
/* ============================================================
18. 지도유형 패널 (#map_selectbox)
우측 레일의 지도 버튼을 누르면 왼쪽에 뜨는 선택지입니다.
(위성도 / 지적도 / 지형도 + 모두 해제)
※ display 는 사이트가 여닫으므로 손대지 않습니다.
※ 체크된 항목의 색과 체크 아이콘은 이미 사이트 대표 컬러를
쓰고 있어 그대로 살립니다. 꺼진 상태의 테두리만 바꿉니다.
============================================================ */
#map_selectbox{
width: 118px !important;
padding: 6px !important;
border: 1px solid var(--rail-border) !important;
border-radius: 12px !important;
box-shadow: var(--rail-shadow) !important;
}
/* 항목 한 줄 = 클릭 영역. 여백을 줘서 hover 가 보이게 합니다. */
#map_selectbox .label_chk_list.map_type_box > div{
padding: 6px 8px !important;
border-radius: 8px !important;
background: transparent !important;
color: var(--rail-fg) !important;
transition: background-color .12s, color .12s;
}
#map_selectbox .label_chk_list.map_type_box > div:not(:last-child){ margin-bottom: 2px !important; }
#map_selectbox .label_chk_list.map_type_box > div:hover{ background: var(--rail-tint) !important; }
#map_selectbox .label_chk_list.map_type_box > div.active{ color: var(--rail-accent) !important; }
#map_selectbox .map_type_name{
padding-left: 24px !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: -.3px !important;
}
/* 체크박스 — 항목에 준 좌측 여백(8px)만큼 같이 밀어 줍니다 */
#map_selectbox .map_type_name::before{
left: 8px !important;
width: 15px !important;
height: 15px !important;
border-radius: 4px !important;
}
#map_selectbox .label_chk_list.map_type_box > div:not(.active) .map_type_name::before{
border-color: var(--rail-border) !important;
}
#map_selectbox .label_chk_list.map_type_box > div.active .map_type_name::before{
border-color: var(--rail-accent) !important;
}
/* 모두 해제 */
#map_selectbox .maptype_check_all{
height: auto !important;
margin-top: 6px !important;
padding: 6px 8px 0 !important;
border-top: 1px solid var(--rail-divider) !important;
font-size: 11px !important;
font-weight: 600 !important;
}
/* ============================================================
19. 측정 패널 (#measure_selectbox)
측정 버튼을 누르면 옆에 뜨는 선택지입니다.
(거리재기 / 면적재기 / 반경재기 / 지우기)
※ 패널의 display 도, "지우기" 항목의 display 도 사이트가
여닫으므로 손대지 않습니다.
※ 선택된 항목의 분홍색(#ea0f53)은 JS 가 인라인으로 직접
칠하는데, 사이트 대표 컬러와 무관한 고정색이라 다른 사이트에서
혼자 튑니다. !important 로 대표 컬러를 따라가게 바꿉니다.
hover 색(#ea0f53)도 같은 이유로 대표 컬러로 맞춥니다.
※ 같은 id 가 관리자 툴바에도 있어 레일 안쪽으로 한정했습니다.
============================================================ */
#mapWrapper .mapRightButtonsWrap_pc #measure_selectbox{
padding: 6px !important;
border: 1px solid var(--rail-border) !important;
border-radius: 12px !important;
box-shadow: var(--rail-shadow) !important;
}
#mapWrapper .mapRightButtonsWrap_pc #measure_selectbox > div{
width: 88px !important;
padding: 8px !important;
border-radius: 8px !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: -.3px !important;
color: var(--rail-fg) !important;
transition: background-color .12s, color .12s;
}
#mapWrapper .mapRightButtonsWrap_pc #measure_selectbox > div:not(:last-child){ margin-bottom: 2px !important; }
#mapWrapper .mapRightButtonsWrap_pc #measure_selectbox > div:not(.active){ background: transparent !important; }
#mapWrapper .mapRightButtonsWrap_pc #measure_selectbox > div:not(.active):hover{
background: var(--rail-tint) !important;
color: var(--rail-accent) !important;
}
#mapWrapper .mapRightButtonsWrap_pc #measure_selectbox > div.active{
background: var(--rail-accent) !important;
color: #FFFFFF !important;
}
/* "지우기" 는 잰 것을 지우는 별도 기능이라, 실제로 재기 시작한
뒤에만 보이게 합니다.
※ 이 파일에서 display 를 건드리는 유일한 곳입니다. 조건을 달아
안전하게 처리했습니다:
- 거리·면적·반경 중 어느 것도 선택돼 있지 않을 때만 규칙이
걸리고, 그때만 숨깁니다.
- 하나라도 선택되면 셀렉터가 아예 매칭되지 않으므로
사이트 JS 가 넣는 인라인 display:block 이 그대로 살아납니다.
즉 사이트의 여닫기 동작과 싸우지 않고 "처음 상태"만 정리합니다.
원래 동작: 사이트 JS 는 재기를 시작할 때 display:block 을 넣기만
하고 끌 때 되돌리지 않아, 한 번 나오면 계속 남아 있었습니다.
재기를 끄거나 지우기를 누르면 JS 가 .active 를 걷어내므로
이 규칙이 다시 걸려 저절로 사라집니다. */
#mapWrapper .mapRightButtonsWrap_pc #measure_selectbox:not(:has(> div.active)) > #mapRightButtons_9{
display: none !important;
}
/* 재기 항목들과 구분되게 선 하나 */
#mapWrapper .mapRightButtonsWrap_pc #measure_selectbox > #mapRightButtons_9{
margin-top: 4px !important;
padding-top: 10px !important;
border-top: 1px solid var(--rail-divider) !important;
}
/* ============================================================
20. 주변 패널 (#store_selectbox)
주변 버튼을 누르면 옆에 뜨는 선택 상자입니다.
(버스 / 편의점 / 카페 / 은행 / 병원 … cctv)
상자와 select 의 크기·배경·그림자가 전부 마크업의 인라인
style 에 박혀 있어(width:150px; height:50px; box-shadow…)
!important 로 덮어씁니다. display 는 그대로 둡니다.
※ 펼쳤을 때 나오는 목록은 브라우저가 직접 그리는 기본 드롭다운이라
CSS 로 손댈 수 있는 범위가 거의 없습니다. 목록 배경색은 사이트
공통 스타일(option)에서 오는 것이니 그쪽에서 조정해야 합니다.
============================================================ */
/* 안쪽 select 에는 테두리를 주지 않습니다 — 바깥 상자와 겹쳐
테두리가 두 겹으로 보입니다. 상자 자체가 입력창 역할을 하고,
마우스오버·포커스 표시도 상자 쪽에서 처리합니다. */
#mapWrapper .mapRightButtonsWrap_pc #store_selectbox{
width: 150px !important;
height: auto !important;
padding: 5px 6px !important;
background: var(--rail-bg) !important;
border: 1px solid var(--rail-border) !important;
border-radius: 10px !important;
box-shadow: var(--rail-shadow) !important;
transition: border-color .12s;
}
#mapWrapper .mapRightButtonsWrap_pc #store_selectbox:hover,
#mapWrapper .mapRightButtonsWrap_pc #store_selectbox:focus-within{
border-color: var(--rail-accent) !important;
}
#mapWrapper .mapRightButtonsWrap_pc #store_selectbox > select{
width: 100% !important;
height: 28px !important;
padding: 0 2px !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
color: var(--rail-fg) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: -.3px !important;
outline: none !important;
cursor: pointer !important;
}
/* ============================================================
21. 안내 토스트 (#msgbox)
위치복사 버튼을 누르면 뜨는 "복사완료 Ctrl+V로 붙여넣기 하세요."
같은 안내 문구입니다. (지도 화면 공용 요소)
원래 240×40px 고정이라 이 문구가 상자보다 길어서 두 줄로 넘치는데
높이는 40px 로 묶여 있어 글자가 잘리고, 배경도 검정 70% 반투명이라
글자 많은 지도 위에서는 뒤 글씨와 겹쳐 읽기 어려웠습니다.
※ display 는 사이트가 여닫으므로 손대지 않습니다.
============================================================ */
#msgbox{
width: auto !important;
max-width: min(440px, 86vw) !important;
height: auto !important;
padding: 13px 20px !important;
border-radius: 12px !important;
background: rgba(16,24,40,.94) !important;
border: 1px solid rgba(255,255,255,.14) !important;
color: #FFFFFF !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: -.3px !important;
line-height: 1.45 !important;
word-break: keep-all !important; /* 줄이 넘어가도 단어 중간에서 안 끊기게 */
box-shadow: 0 10px 30px rgba(16,24,40,.45), 0 2px 6px rgba(16,24,40,.30) !important;
/* 눈에 띄게 — 나타날 때 살짝 커지며 떠오르고, 그 뒤에는 위아래로
10px 씩 흔들립니다. 사이트가 display 로 여닫으므로 뜰 때마다
애니메이션이 처음부터 다시 재생됩니다.
(처음엔 5px·1.5초였는데 실제로 재 보니 진폭이 5px 라 거의
알아채기 어려웠습니다. 10px·0.9초로 키웠습니다 — 실측 10.7px)
더 크게/작게 하려면 아래 msgbox-bob 의 -10px 과 .9s 를 조절하세요.
흔들림을 아예 빼려면 animation 의 두 번째 항목만 지우면 됩니다. */
animation: msgbox-in .24s cubic-bezier(.2,.8,.25,1),
msgbox-bob .9s ease-in-out infinite !important;
}
/* 나타나기는 opacity·scale 로, 흔들림은 translate 로 나눠 씁니다.
같은 속성을 두 애니메이션이 건드리면 서로 덮어써서 끊깁니다. */
@keyframes msgbox-in{
from{ opacity: 0; scale: .94; }
to { opacity: 1; scale: 1; }
}
@keyframes msgbox-bob{
0%, 100%{ translate: 0 0; }
50% { translate: 0 -10px; }
}
/* ============================================================
22. 모바일 레일 (.mapRightButtonsWrap_mo01 / _mo02)
모바일은 PC 와 **다른 요소**를 씁니다. 992px 이하에서 사이트가
PC 레일(_pc)을 감추고 모바일 레일(_mo01/_mo02)을 보여 줍니다.
그래서 3~10번 규칙이 하나도 걸리지 않아 모바일만 옛 모양이었습니다.
여기서 PC 와 같은 모양으로 맞춥니다.
─ 구조가 PC 와 다른 점 ──────────────────────────────────────
· 좌측(_mo02)은 버튼들이 .pc_mapbtns 라는 껍데기 안에 들어 있어
카드 옷을 그쪽에 입힙니다.
· 라벨을 감싸는 태그가 제각각입니다 — .text / .pc_title / 아예
없이 맨 텍스트(임장관리·건물탐색·상권정보·중개소검색).
그래서 PC 처럼 .pc_title::after 가 아니라 버튼 자체의 ::after 로
문구를 넣고, 버튼에 font-size:0 을 줘서 원래 글자를 감춥니다.
(모바일에는 .pc_title 을 display:none !important 로 감추는
규칙도 이미 있어서 어차피 그쪽은 못 씁니다)
· 실거래(#mobile_real_house_btn)만 .mapRightButtons 도 아니고
.mapRightButtonsItem 도 없어서 안쪽 을 버튼 몸통으로 씁니다.
· 네이버 매물(.naver)은 ![]()
아이콘이라 그대로 둡니다.
· 아이콘 그림은 9·10번 규칙에 모바일 선택자를 덧붙여 그대로
재사용합니다 (같은 data URI 를 두 번 적지 않으려고).
============================================================ */
@media (max-width: 992px){
/* ---- 22-0. 모바일 전용 치수 ----
화면이 좁으니 PC 보다 한 치수 작게 갑니다.
여기 값만 바꾸면 22번 전체가 따라옵니다 (PC 는 영향 없음). */
:root{
--rail-btn-w: 36px; /* PC 40px */
--rail-btn-h: 38px; /* PC 42px */
--rail-pad: 4px; /* PC 5px */
}
/* ---- 22-1. 레일 카드 ---- */
#mapWrapper .mapRightButtonsWrap_mo01,
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns{
box-sizing: border-box !important;
width: calc(var(--rail-btn-w) + var(--rail-pad) * 2) !important;
padding: var(--rail-pad) !important;
background: var(--rail-bg) !important;
border: 1px solid var(--rail-border) !important;
border-radius: 12px !important;
box-shadow: var(--rail-shadow) !important;
}
/* 바깥 껍데기는 자리만 잡습니다 (인라인 width:34px 를 걷어냅니다) */
#mapWrapper .mapRightButtonsWrap_mo02{
width: auto !important;
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* ---- 22-2. 우측 레일 세 카드 (PC 7번과 같은 구성) ---- */
#mapWrapper .mapRightButtonsWrap_mo01{
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
background: none !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
}
#mapWrapper .mapRightButtonsWrap_mo01 > #mapRightButtons_4_mo{ order: -2 !important; }
#mapWrapper .mapRightButtonsWrap_mo01 > .custom_zoomcontrol{ order: -1 !important; }
#mapWrapper .mapRightButtonsWrap_mo01 > #mapRightButtons_4_mo,
#mapWrapper .mapRightButtonsWrap_mo01 > .custom_zoomcontrol{
box-sizing: border-box !important;
width: calc(var(--rail-btn-w) + var(--rail-pad) * 2) !important;
height: auto !important;
padding: var(--rail-pad) !important;
margin: 0 0 8px !important;
background: var(--rail-bg) !important;
border: 1px solid var(--rail-border) !important;
border-radius: 12px !important;
box-shadow: var(--rail-shadow) !important;
overflow: visible !important;
}
/* 나머지 도구들은 한 카드로 */
#mapWrapper .mapRightButtonsWrap_mo01 > #mapRightButtons_4_mo ~ .mapRightButtons{
box-sizing: border-box !important;
width: calc(var(--rail-btn-w) + var(--rail-pad) * 2) !important;
margin: 0 !important;
padding: 0 var(--rail-pad) !important;
background: var(--rail-bg) !important;
border: 1px solid var(--rail-border) !important;
border-top: none !important;
border-bottom: none !important;
border-radius: 0 !important;
box-shadow: -7px 0 10px -8px rgba(16,24,40,.45),
7px 0 10px -8px rgba(16,24,40,.45) !important;
}
#mapWrapper .mapRightButtonsWrap_mo01 > #mapRightButtons_4_mo ~ .mapRightButtons:not(#mapRightButtons_4_mo ~ .mapRightButtons ~ .mapRightButtons){
border-top: 1px solid var(--rail-border) !important;
border-radius: 12px 12px 0 0 !important;
padding-top: var(--rail-pad) !important;
box-shadow: -7px 0 10px -8px rgba(16,24,40,.45),
7px 0 10px -8px rgba(16,24,40,.45),
0 -7px 10px -8px rgba(16,24,40,.45) !important;
}
#mapWrapper .mapRightButtonsWrap_mo01 > #mapRightButtons_4_mo ~ .mapRightButtons:not(:has(~ .mapRightButtons)){
border-bottom: 1px solid var(--rail-border) !important;
border-radius: 0 0 12px 12px !important;
padding-bottom: var(--rail-pad) !important;
box-shadow: -7px 0 10px -8px rgba(16,24,40,.45),
7px 0 10px -8px rgba(16,24,40,.45),
0 10px 16px -8px rgba(16,24,40,.40),
0 4px 6px -4px rgba(16,24,40,.30) !important;
}
/* ---- 22-3. 버튼 담는 칸 ----
크기·위치만 손봅니다.
배경을 걷어내는 것은 **좌측 레일 버튼에만** 해당합니다.
우측(_mo01)은 껍데기에 카드를 입히지 않고 버튼들이 모여
카드가 되는 구조라, 여기서 배경까지 지우면 22-2 에서 준 흰
배경이 지워져 지도가 비쳐 보입니다(반투명하게 보이던 원인). */
#mapWrapper .mapRightButtonsWrap_mo01 > #mapRightButtons_4_mo ~ .mapRightButtons,
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > .mapRightButtons,
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > #mobile_real_house_btn{
position: relative !important;
height: auto !important;
min-height: 0 !important;
line-height: normal !important;
}
/* 실거래(#mobile_real_house_btn)는 여기서 제외합니다.
이 버튼만 선택자에 id 가 들어가 우선순위가 훨씬 높은데,
23번에서 묶음 카드 배경을 흰색으로 주면 그 배경을 이 규칙이
다시 지워 버려 이 버튼만 지도가 비쳐 보였습니다.
23번 규칙이 그대로 먹도록 id 선택자를 뺐습니다. */
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > .mapRightButtons{
width: var(--rail-btn-w) !important;
margin: 0 0 var(--rail-gap) !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > *:last-child{ margin-bottom: 0 !important; }
/* 버튼 사이 구분선 — PC 3번과 같은 방식 */
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > .mapRightButtons::after,
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > #mobile_real_house_btn::after,
#mapWrapper .mapRightButtonsWrap_mo01 > #mapRightButtons_4_mo ~ .mapRightButtons::after{
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: var(--rail-btn-w);
height: 1px;
background: var(--rail-seam);
pointer-events: none;
}
/* 구분선 위치도 같은 이유로 실거래는 23번에 맡깁니다 */
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > .mapRightButtons::after{ bottom: -1px; }
#mapWrapper .mapRightButtonsWrap_mo01 > #mapRightButtons_4_mo ~ .mapRightButtons::after{ bottom: 1px; }
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > .mapRightButtons:not(:has(~ .mapRightButtons))::after,
#mapWrapper .mapRightButtonsWrap_mo01 > #mapRightButtons_4_mo ~ .mapRightButtons:not(:has(~ .mapRightButtons))::after{ content: none; }
/* ---- 22-4. 버튼 몸통 ---- */
#mapWrapper .mapRightButtonsWrap_mo01 .mapRightButtonsItem,
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns .mapRightButtonsItem:not(.naver),
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > #mobile_real_house_btn > span{
box-sizing: border-box !important;
position: static !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
row-gap: var(--rail-gap) !important;
width: var(--rail-btn-w) !important;
height: auto !important;
min-height: var(--rail-btn-h) !important;
padding: 3px 1px !important;
margin: 0 !important;
border: none !important;
border-radius: 8px !important;
background: transparent !important;
box-shadow: none !important;
color: var(--rail-fg) !important;
font-size: 0 !important; /* 원래 글자(맨 텍스트 포함) 감춤 */
line-height: 1.18 !important;
cursor: pointer !important;
float: none !important;
}
#mapWrapper .mapRightButtonsWrap_mo01 .mapRightButtonsItem:hover,
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns .mapRightButtonsItem:not(.naver):hover,
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > #mobile_real_house_btn > span:hover{
background: var(--rail-tint) !important;
color: var(--rail-accent) !important;
}
/* 안쪽 라벨 태그도 같이 감춥니다.
선택자에 .mapRightButtons 를 한 번 더 끼운 이유 —
사이트에 이런 규칙이 있어서 그냥 두면 이깁니다.
.mapRightButtonsWrap #mapRightButtons_2_mo .mapRightButtonsItem .text
{ font-size:10px !important } ← 우선순위가 같아 뒤에 온 쪽이 이김
.new_mapRightButtons_sum_map .sum_map .text
{ height:30px !important } ← 글자만 지워도 30px 자리가 남음
그래서 우선순위를 한 단계 올리고 height 까지 눕힙니다.
(위치복사가 "위치/복사" 두 줄로 나오고 필지합만 30px 더
높아지던 것이 이 두 규칙 때문이었습니다) */
#mapWrapper .mapRightButtonsWrap_mo01 .mapRightButtons .mapRightButtonsItem .text,
#mapWrapper .mapRightButtonsWrap_mo01 .mapRightButtons .mapRightButtonsItem .pc_title,
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns .mapRightButtons .mapRightButtonsItem .text,
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns .mapRightButtons .mapRightButtonsItem .pc_title{
font-size: 0 !important;
line-height: 0 !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
background: none !important;
}
/* ---- 22-5. 아이콘 ---- */
#mapWrapper .mapRightButtonsWrap_mo01 .mapRightButtonsItem > i,
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns .mapRightButtonsItem:not(.naver) > i,
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > #mobile_real_house_btn i{ display: none !important; }
#mapWrapper .mapRightButtonsWrap_mo01 .mapRightButtonsItem::before,
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns .mapRightButtonsItem:not(.naver)::before,
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > #mobile_real_house_btn > span::before{
content: var(--rail-fa, "") !important;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: var(--rail-icon);
height: var(--rail-icon);
font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free", FontAwesome;
font-weight: 400;
font-style: normal;
font-variant: normal;
font-size: calc(var(--rail-icon) - 1px);
line-height: 1;
color: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
/* 네이버 매물 버튼만 원래 이미지 아이콘을 그대로 씁니다 */
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns .mapRightButtonsItem.naver{
width: var(--rail-btn-w) !important;
min-height: var(--rail-btn-h) !important;
padding: 3px 1px !important;
border-radius: 8px !important;
background: transparent !important;
text-align: center !important;
}
/* ---- 22-6. 확대·축소 ---- */
#mapWrapper .mapRightButtonsWrap_mo01 > .custom_zoomcontrol{ background: var(--rail-bg) !important; }
#mapWrapper .mapRightButtonsWrap_mo01 > .custom_zoomcontrol > span{
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: var(--rail-btn-w) !important;
height: 34px !important;
margin: 0 0 var(--rail-gap) !important;
border: none !important;
border-radius: 8px !important;
background: transparent !important;
color: var(--rail-fg) !important;
cursor: pointer !important;
}
#mapWrapper .mapRightButtonsWrap_mo01 > .custom_zoomcontrol > span:last-child{ margin-bottom: 0 !important; }
#mapWrapper .mapRightButtonsWrap_mo01 > .custom_zoomcontrol > span:hover{
background: var(--rail-tint) !important;
color: var(--rail-accent) !important;
}
#mapWrapper .mapRightButtonsWrap_mo01 > .custom_zoomcontrol > span > i{ display: none !important; }
#mapWrapper .mapRightButtonsWrap_mo01 > .custom_zoomcontrol > span::before{
content: var(--rail-fa, "") !important;
display: flex;
align-items: center;
justify-content: center;
width: var(--rail-icon);
height: var(--rail-icon);
font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free", FontAwesome;
font-weight: 400;
font-style: normal;
font-variant: normal;
font-size: calc(var(--rail-icon) - 1px);
line-height: 1;
color: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
/* ---- 22-7. 라벨 문구 (PC 9·10번과 같은 축약) ---- */
#mapWrapper .mapRightButtonsWrap_mo01 .mapRightButtonsItem::after,
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns .mapRightButtonsItem:not(.naver)::after,
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > #mobile_real_house_btn > span::after{
display: block;
font-size: var(--rail-label);
font-weight: 600;
line-height: 1.18;
letter-spacing: -.6px;
text-align: center;
white-space: nowrap;
color: inherit;
}
#mapWrapper .mapRightButtonsWrap_mo01 > #mapRightButtons_map_mo .mapRightButtonsItem::after{ content: "\C9C0 \B3C4 "; }
#mapWrapper .mapRightButtonsWrap_mo01 > #mapRightButtons_1_mo .mapRightButtonsItem::after{ content: "\CD08 \AE30 \D654 "; }
#mapWrapper .mapRightButtonsWrap_mo01 > #mapRightButtons_12_mo .mapRightButtonsItem::after{ content: "\B85C \B4DC \BDF0 "; }
#mapWrapper .mapRightButtonsWrap_mo01 > #mapRightButtons_2_mo .mapRightButtonsItem::after{ content: "\BCF5 \C0AC "; }
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > #customerView .mapRightButtonsItem::after{ content: "\BE0C \B9AC \D551 "; }
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > #mobile_real_house_btn > span::after{ content: "\C2E4 \AC70 \B798 "; }
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > .add_imjang > .mapRightButtonsItem::after{ content: "\C784 \C7A5 "; }
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > .arch_move_btn > .mapRightButtonsItem:not(.estate_text)::after{ content: "\AC74 \CD95 \BB3C "; }
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > .new_mapRightButtons_filter > .mapRightButtonsItem::after{ content: "\AC74 \BB3C "; }
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > .new_mapRightButtons_sum_map > .mapRightButtonsItem::after{ content: "\D544 \C9C0 \D569 "; }
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns .mapRightButtonsItem.sanggwon_text::after{ content: "\C0C1 \AD8C "; }
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns .mapRightButtonsItem.estate_text::after{ content: "\C911 \AC1C \C18C "; }
}
/* ============================================================
23. 브리핑 버튼을 독립 카드로 분리 (PC · 모바일 공통)
좌측 레일에서 브리핑만 따로 떼어 위쪽에 별도 카드로 두고,
나머지 버튼들은 아래에 한 덩어리 카드로 묶습니다.
우측 레일의 현위치 카드와 같은 구성입니다(7번 참고).
※ wrap 에 filter 를 쓰면 안 됩니다 — 툴팁 위치가 어긋납니다.
그래서 그림자는 카드마다 box-shadow 로 따로 줍니다.
※ 마지막 버튼을 :last-child 로 잡지 않는 이유도 툴팁 때문입니다.
Bootstrap 이
을 레일 안에 끼워넣습니다.
============================================================ */
/* ---- 23-1. PC 좌측 레일 ---- */
@media (min-width: 992px){
/* 껍데기는 카드 옷을 벗고 자리만 잡습니다 */
#mapWrapper .mapRightButtonsWrap01{
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: calc(var(--rail-btn-w) + var(--rail-pad) * 2) !important;
padding: 0 !important;
background: none !important;
border: none !important;
box-shadow: none !important;
}
/* 브리핑 = 독립 카드 */
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.customerView{
box-sizing: border-box !important;
width: calc(var(--rail-btn-w) + var(--rail-pad) * 2) !important;
height: auto !important;
padding: var(--rail-pad) !important;
margin: 0 0 8px !important;
background: var(--rail-bg) !important;
border: 1px solid var(--rail-border) !important;
border-radius: 12px !important;
box-shadow: var(--rail-shadow) !important;
}
/* 독립 카드라 아래 구분선은 필요 없습니다 */
#mapWrapper .mapRightButtonsWrap01 > .mapRightButtons.customerView::after{ content: none; }
/* 나머지 = 한 덩어리 카드 */
#mapWrapper .mapRightButtonsWrap01 > .customerView ~ .mapRightButtons{
box-sizing: border-box !important;
width: calc(var(--rail-btn-w) + var(--rail-pad) * 2) !important;
margin: 0 !important;
padding: 0 var(--rail-pad) !important;
background: var(--rail-bg) !important;
border: 1px solid var(--rail-border) !important;
border-top: none !important;
border-bottom: none !important;
border-radius: 0 !important;
box-shadow: -7px 0 10px -8px rgba(16,24,40,.45),
7px 0 10px -8px rgba(16,24,40,.45) !important;
}
/* 첫 버튼 = 앞에 다른 버튼이 없는 것 */
#mapWrapper .mapRightButtonsWrap01 > .customerView ~ .mapRightButtons:not(.customerView ~ .mapRightButtons ~ .mapRightButtons){
border-top: 1px solid var(--rail-border) !important;
border-radius: 12px 12px 0 0 !important;
padding-top: var(--rail-pad) !important;
box-shadow: -7px 0 10px -8px rgba(16,24,40,.45),
7px 0 10px -8px rgba(16,24,40,.45),
0 -7px 10px -8px rgba(16,24,40,.45) !important;
}
/* 마지막 버튼 = 뒤에 다른 버튼이 없는 것 */
#mapWrapper .mapRightButtonsWrap01 > .customerView ~ .mapRightButtons:not(:has(~ .mapRightButtons)){
border-bottom: 1px solid var(--rail-border) !important;
border-radius: 0 0 12px 12px !important;
padding-bottom: var(--rail-pad) !important;
box-shadow: -7px 0 10px -8px rgba(16,24,40,.45),
7px 0 10px -8px rgba(16,24,40,.45),
0 10px 16px -8px rgba(16,24,40,.40),
0 4px 6px -4px rgba(16,24,40,.30) !important;
}
/* 버튼 사이 간격은 안쪽 버튼이 담당합니다 (우측 레일과 동일) */
#mapWrapper .mapRightButtonsWrap01 > .customerView ~ .mapRightButtons .mapRightButtonsItem{
margin-bottom: var(--rail-gap) !important;
}
#mapWrapper .mapRightButtonsWrap01 > .customerView ~ .mapRightButtons:not(:has(~ .mapRightButtons)) .mapRightButtonsItem{
margin-bottom: 0 !important;
}
/* 간격 구성이 바뀌었으니 구분선 위치도 우측 레일과 같게 */
#mapWrapper .mapRightButtonsWrap01 > .customerView ~ .mapRightButtons::after{ bottom: 1px; }
}
/* ---- 23-2. 모바일 좌측 레일 ----
구조가 한 겹 더 있습니다: wrap_mo02 > .pc_mapbtns > 버튼들.
그리고 실거래(#mobile_real_house_btn)만 .mapRightButtons 가 아니라
형제 선택자에 따로 적어 줘야 합니다.
툴팁이 끼어들 수 있어 *:not(.tooltip) 로 셉니다. */
@media (max-width: 992px){
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns{
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
padding: 0 !important;
background: none !important;
border: none !important;
box-shadow: none !important;
}
/* 브리핑 = 독립 카드 */
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > .customerView{
box-sizing: border-box !important;
width: calc(var(--rail-btn-w) + var(--rail-pad) * 2) !important;
height: auto !important;
padding: var(--rail-pad) !important;
margin: 0 0 8px !important;
background: var(--rail-bg) !important;
border: 1px solid var(--rail-border) !important;
border-radius: 12px !important;
box-shadow: var(--rail-shadow) !important;
}
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > .customerView::after{ content: none; }
/* 나머지 = 한 덩어리 카드 */
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > .customerView ~ *:not(.tooltip){
box-sizing: border-box !important;
width: calc(var(--rail-btn-w) + var(--rail-pad) * 2) !important;
margin: 0 !important;
padding: 0 var(--rail-pad) !important;
background: var(--rail-bg) !important;
border: 1px solid var(--rail-border) !important;
border-top: none !important;
border-bottom: none !important;
border-radius: 0 !important;
box-shadow: -7px 0 10px -8px rgba(16,24,40,.45),
7px 0 10px -8px rgba(16,24,40,.45) !important;
}
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > .customerView ~ *:not(.tooltip):not(.customerView ~ *:not(.tooltip) ~ *:not(.tooltip)){
border-top: 1px solid var(--rail-border) !important;
border-radius: 12px 12px 0 0 !important;
padding-top: var(--rail-pad) !important;
box-shadow: -7px 0 10px -8px rgba(16,24,40,.45),
7px 0 10px -8px rgba(16,24,40,.45),
0 -7px 10px -8px rgba(16,24,40,.45) !important;
}
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > .customerView ~ *:not(.tooltip):not(:has(~ *:not(.tooltip))){
border-bottom: 1px solid var(--rail-border) !important;
border-radius: 0 0 12px 12px !important;
padding-bottom: var(--rail-pad) !important;
box-shadow: -7px 0 10px -8px rgba(16,24,40,.45),
7px 0 10px -8px rgba(16,24,40,.45),
0 10px 16px -8px rgba(16,24,40,.40),
0 4px 6px -4px rgba(16,24,40,.30) !important;
}
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > .customerView ~ *:not(.tooltip) .mapRightButtonsItem,
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > #mobile_real_house_btn > span{
margin-bottom: var(--rail-gap) !important;
}
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > .customerView ~ *:not(.tooltip):not(:has(~ *:not(.tooltip))) .mapRightButtonsItem{
margin-bottom: 0 !important;
}
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > .customerView ~ *:not(.tooltip)::after{ bottom: 1px; }
}
@media (prefers-reduced-motion: reduce){
#mapWrapper .mapRightButtonsWrap_pc .mapRightButtonsItem,
#mapWrapper .mapRightButtonsWrap_pc .custom_zoomcontrol > span{ transition: none; }
#mapWrapper #redevNavBtn .mapRightButtonsItem::after{ animation: none; }
div.canvas_tools > .btn{ transition: none; }
.real_house_btn_desc .real_btn{ transition: none; }
#mapWrapper .mapRightButtonsWrap_pc #sanggwon_selectbox .titlestore > label{ transition: none; }
#map_selectbox .label_chk_list.map_type_box > div{ transition: none; }
#mapWrapper .mapRightButtonsWrap_pc #measure_selectbox > div{ transition: none; }
#mapWrapper .mapRightButtonsWrap_pc #store_selectbox{ transition: none; }
#msgbox{ animation: none !important; }
}
/* ============================================================
[종합형 전용 지정 2026-09-29]
솔루션과 클래스·클릭 위치가 다른 버튼을 여기서 맞춘다.
============================================================ */
/* 실거래 — 솔루션은 .mobile_real_house_btn, 종합형은 #real_house_btn */
#mapWrapper .mapRightButtonsWrap_pc #real_house_btn :is(.pc_title,.text){ font-size: 0 !important; line-height: 0 !important; }
#mapWrapper .mapRightButtonsWrap_pc #real_house_btn :is(.pc_title,.text)::after{ content: "실거래" !important; }
/* 건축물대장 검색 */
#mapWrapper .mapRightButtonsWrap_pc .mapRightButtons[onclick*="BugisaArchMap"] :is(.pc_title,.text){ font-size: 0 !important; line-height: 0 !important; }
#mapWrapper .mapRightButtonsWrap_pc .mapRightButtons[onclick*="BugisaArchMap"] :is(.pc_title,.text)::after{ content: "건축물" !important; }
/* 중개소 검색 */
#mapWrapper .mapRightButtonsWrap_pc .mapRightButtons[onclick*="map_estate"] :is(.pc_title,.text){ font-size: 0 !important; line-height: 0 !important; }
#mapWrapper .mapRightButtonsWrap_pc .mapRightButtons[onclick*="map_estate"] :is(.pc_title,.text)::after{ content: "중개소" !important; }
/* 그리기 — 종합형은 onclick 이 버튼이 아니라 그 안쪽에 붙어 있다 */
#mapWrapper .mapRightButtonsWrap_pc .mapRightButtons:has(.mapRightButtonsItem[onclick*="canvasOn"]) :is(.pc_title,.text){ font-size: 0 !important; line-height: 0 !important; }
#mapWrapper .mapRightButtonsWrap_pc .mapRightButtons:has(.mapRightButtonsItem[onclick*="canvasOn"]) :is(.pc_title,.text)::after{ content: "그리기" !important; }
#mapWrapper .mapRightButtonsWrap_pc .mapRightButtons:has(.mapRightButtonsItem[onclick*="canvasOn"]) .mapRightButtonsItem{ --rail-fa: "\f040"; }
/* 손님 화면 레일에는 01/02 번호가 없다. 같은 지정을 번호 없는 상자에도 건다. */
#mapWrapper .mapRightButtonsWrap_pc:not(.mapRightButtonsWrap01):not(.mapRightButtonsWrap02) > #mapRightButtons_map :is(.pc_title,.text)::after{ content: "지도" !important; }
#mapWrapper .mapRightButtonsWrap_pc:not(.mapRightButtonsWrap01):not(.mapRightButtonsWrap02) > #mapRightButtons_12 :is(.pc_title,.text)::after{ content: "로드뷰" !important; }
#mapWrapper .mapRightButtonsWrap_pc:not(.mapRightButtonsWrap01):not(.mapRightButtonsWrap02) > #mapRightButtons_10 :is(.pc_title,.text)::after{ content: "주변" !important; }
#mapWrapper .mapRightButtonsWrap_pc:not(.mapRightButtonsWrap01):not(.mapRightButtonsWrap02) > #mapRightButtons_2 :is(.pc_title,.text)::after{ content: "복사" !important; }
#mapWrapper .mapRightButtonsWrap_pc:not(.mapRightButtonsWrap01):not(.mapRightButtonsWrap02) > .mapRightButtons:has(> #measure_selectbox) :is(.pc_title,.text)::after{ content: "측정" !important; }
#mapWrapper .mapRightButtonsWrap_pc:not(.mapRightButtonsWrap01):not(.mapRightButtonsWrap02) > #mapRightButtons_10 .mapRightButtonsItem{ --rail-fa: "\f14e"; }
#mapWrapper .mapRightButtonsWrap_pc:not(.mapRightButtonsWrap01):not(.mapRightButtonsWrap02) > .mapRightButtons:has(> #measure_selectbox) .mapRightButtonsItem{ --rail-fa: "\f545"; }
/* 아이콘이 없는 버튼에만 아이콘을 그린다(있는 버튼과 겹치지 않게) */
#mapWrapper .mapRightButtonsWrap_pc > #mapRightButtons_map > .mapRightButtonsItem:not(:has(> i)){ --rail-fa: "\f279"; }
#mapWrapper .mapRightButtonsWrap_pc > #mapRightButtons_2 > .mapRightButtonsItem:not(:has(> i)){ --rail-fa: "\f0c5"; }
#mapWrapper .mapRightButtonsWrap_pc > #real_house_btn > .mapRightButtonsItem:not(:has(> i)){ --rail-fa: "\f201"; }
#mapWrapper .mapRightButtonsWrap_pc > .add_imjang > .mapRightButtonsItem:not(:has(> i)){ --rail-fa: "\f5a0"; }
#mapWrapper .mapRightButtonsWrap_pc > .new_mapRightButtons_filter > .mapRightButtonsItem:not(:has(> i)){ --rail-fa: "\f1ad"; }
#mapWrapper .mapRightButtonsWrap_pc > .new_mapRightButtons_sum_map > .mapRightButtonsItem:not(:has(> i)){ --rail-fa: "\f5ee"; }
#mapWrapper .mapRightButtonsWrap_pc > #mapRightButtons_sanggwon > .mapRightButtonsItem:not(:has(> i)){ --rail-fa: "\f54e"; }
#mapWrapper .mapRightButtonsWrap_pc > .customerView > .mapRightButtonsItem:not(:has(> i)){ --rail-fa: "\f06e"; }
/* ============================================================
[종합형 마무리 2026-09-29]
1) 확대·축소 아이콘: 솔루션은 Font Awesome 5 코드(\f067/\f068)로 그리는데
종합형은 FA6 을 싣고 FA6 에서 그 코드는 비어 있다(네모로 보인다).
마크업의 를 그대로 쓰게 되돌린다.
2) 안전·재개발 버튼의 흰 테두리 깜빡임: views/include/map_toolbar_twinkle.php 가
두 버튼에 animation 과 ::after 테두리를 건다. 레일에서는 깜빡임이 따로 놀고,
NEW 배지와도 같은 자리를 다퉈 모양이 깨진다. 깜빡임과 테두리를 끈다.
(버튼을 켰을 때 색이 바뀌는 동작은 그대로 둔다)
3) NEW 배지: 위 ::after 를 끈 자리에 재개발 버튼에만 다시 그린다.
============================================================ */
/* 1) 확대·축소는 마크업 아이콘을 쓴다 */
html body #mapWrapper .mapRightButtonsWrap_pc .custom_zoomcontrol > span > i{ display: inline-block !important; }
html body #mapWrapper .mapRightButtonsWrap_pc .custom_zoomcontrol > span::before{ content: none !important; }
/* 2) 안전·재개발 깜빡임·흰 테두리 끄기 */
html body #mapWrapper :is(#safemapNavBtn,#redevNavBtn) .mapRightButtonsItem{ animation: none !important; border: 0 !important; }
html body #mapWrapper :is(#safemapNavBtn,#redevNavBtn) .mapRightButtonsItem::after{ animation: none !important; border: 0 !important; }
html body #mapWrapper #safemapNavBtn .mapRightButtonsItem::after{ content: none !important; }
/* 3) NEW 배지 — 재개발 버튼 오른쪽 위 모서리 */
html body #mapWrapper #redevNavBtn .mapRightButtonsItem{ position: relative !important; overflow: visible !important; }
html body #mapWrapper #redevNavBtn .mapRightButtonsItem::after{
content: "NEW" !important;
position: absolute !important;
inset: auto !important;
top: -3px !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translateX(-50%) !important;
width: auto !important;
height: auto !important;
padding: 1px 3px !important;
border-radius: 4px !important;
background: #FF2D78 !important;
color: #fff !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 7px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
box-shadow: none !important;
pointer-events: none !important;
z-index: 4 !important;
}
/* 브리핑 버튼만 마크업에 font-size 가 인라인 !important 로 박혀 있어 글자가 감춰지지 않고
레일 라벨과 겹쳐 보였다. 크기로는 못 이기므로 원래 글자를 보이지 않게 하고 라벨만 남긴다. 2026-09-29 */
html body #mapWrapper :is(.mapRightButtonsWrap_pc,.mapRightButtonsWrap01) .customerView .pc_title{ visibility: hidden !important; line-height: 0 !important; }
html body #mapWrapper :is(.mapRightButtonsWrap_pc,.mapRightButtonsWrap01) .customerView .pc_title::after{ visibility: visible !important; line-height: 1.18 !important; }
/* ============================================================
[종합형 모바일 보정 2026-09-29]
모바일 레일은 솔루션과 구조가 거의 같지만 두 가지가 어긋난다.
· 브리핑 버튼 id 가 다르다 (솔루션 #customerView / 종합형 #customerViewMobile)
→ 아이콘·글자가 감춰지기만 하고 대신 그릴 것이 없어 빈 버튼이 됐다.
마크업 아이콘을 그대로 쓰고 라벨만 얹는다.
· 확대·축소는 Font Awesome 5 코드로 그리는데 종합형은 FA6 이라 그 코드가 비어 있다.
→ 마크업 아이콘을 그대로 쓴다.
============================================================ */
@media (max-width: 992px){
/* 브리핑 */
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > #customerViewMobile .mapRightButtonsItem::before{ content: none !important; }
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > #customerViewMobile .mapRightButtonsItem > i{
width: auto !important;
height: auto !important;
float: none !important;
display: block !important;
font-size: 13px !important;
line-height: 1 !important;
}
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > #customerViewMobile .mapRightButtonsItem::after{
content: "브리핑";
display: block;
margin-top: 1px;
font-size: 9px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -.6px;
color: inherit;
}
/* 확대·축소 */
#mapWrapper .mapRightButtonsWrap_mo01 > .custom_zoomcontrol > span > i{ display: inline-block !important; }
#mapWrapper .mapRightButtonsWrap_mo01 > .custom_zoomcontrol > span::before{ content: none !important; }
}
/* [종합형 모바일 위치복사 2026-09-29]
종합형 _mo02 레일에만 있는 위치복사 버튼은 매핑이 없어 빈 버튼으로 떴다. */
@media (max-width: 992px){
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > #mapRightButtons_2 > .mapRightButtonsItem{ --rail-fa: "\f0c5 " !important; }
#mapWrapper .mapRightButtonsWrap_mo02 > .pc_mapbtns > #mapRightButtons_2 > .mapRightButtonsItem::after{ content: "복사" !important; }
}