/* =========================================================================
 * 메인(지도탐색) 전용 레이아웃 — 호갱노노형 3분할(헤더/좌측목록/지도).
 *   상단 흰색 헤더(로고·통합검색·다크모드·회원) + 흰색 내비(탭·보고서)
 *   좌측 단지목록 사이드바 + 중앙 지도 + 우측 세로 레이어툴바 + 하단 지도모드
 * 이 파일은 main.jsp 에서만 링크한다(다른 서비스 페이지 GNB 미영향).
 * ========================================================================= */

/* 색상 팔레트 — 샘플 사이트(land4u-map-app) 테마와 일치 */
:root {
    --mx-bg: #f5f8fd;
    --mx-panel: #ffffff;
    --mx-ink: #131a2e;
    --mx-sub: #5f6b86;
    --mx-line: #e1e7f2;
    --mx-line-strong: #d5ddec;
    --mx-primary: #2455e6;
    --mx-primary-bar: #1f52e3;
    --mx-primary-strong: #1b45c4;
    --mx-primary-weak: #e5ecff;
    --mx-red: #e5342f;
    --mx-red-weak: #fde5e4;
    --mx-deal: #2360d8;
    --mx-deal-soft: #e3ecff;
    --mx-green: #0f9d6b;
    --mx-green-weak: #e3f5ec;
    --mx-amber-soft: #f8edd4;
    --mx-amber-ink: #916400;
    --mx-hover: #f5f8fd;
    --mx-shadow: 0 1px 2px rgba(19, 26, 46, .06), 0 8px 24px -12px rgba(19, 26, 46, .18);
    --mx-radius: 12px;

    /* ===== 타이포(샘플 land4u-map-app 스케일) ===== */
    --font: 'Pretendard', system-ui, -apple-system, 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    --fs-1: 9.5px; --fs-2: 10px; --fs-3: 11px; --fs-4: 12px; --fs-5: 13px;
    --fs-6: 14px; --fs-7: 16px; --fs-8: 18px; --fs-9: 22px; --fs-10: 26px;
    --fw-reg: 500; --fw-md: 600; --fw-sb: 700; --fw-b: 800; --fw-xb: 900;
    --ls-title: -.03em; --ls-tight: -.02em; --ls-base: -.012em;
    --r-1: 4px; --r-2: 6px; --r-3: 8px; --r-4: 10px; --r-5: 12px; --r-6: 14px; --r-pill: 999px;

    /* 상세패널·툴팁 등 공통 컴포넌트(landeye.css 토큰)를 메인 한정으로 샘플 브랜드색에 정렬 */
    --primary: #2455e6;
    --primary-dark: #1b45c4;
}

/* 메인 페이지 기본 타이포 — 샘플과 동일(Pretendard 13px/500/lh1.5/자간 -.012em) */
body {
    font-family: var(--font); font-size: var(--fs-5); font-weight: var(--fw-reg);
    line-height: 1.5; letter-spacing: var(--ls-base); -webkit-font-smoothing: antialiased;
}

/* ===== 다크 모드 (샘플 사이트 다크 팔레트) ===== */
body.mx-dark {
    --mx-bg: #080d1a;
    --mx-panel: #0f1728;
    --mx-ink: #e7ecf6;
    --mx-sub: #93a0bd;
    --mx-line: #25314c;
    --mx-line-strong: #313c58;
    --mx-primary: #5b82ff;
    --mx-primary-bar: #1f3a8a;
    --mx-primary-strong: #1f3a8a;
    --mx-primary-weak: #1a2749;
    --mx-red: #f36a63;
    --mx-red-weak: #3a1e1d;
    --mx-deal: #5b8bff;
    --mx-deal-soft: #182647;
    --mx-green: #3fbf8f;
    --mx-green-weak: #16281f;
    --mx-amber-soft: #382e18;
    --mx-amber-ink: #e0b25e;
    --mx-hover: #131d33;
    --mx-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
}
body.mx-dark { background: var(--mx-bg); color: var(--mx-ink); }

/* ===== 상단 헤더 (샘플: 파란 그라데이션 바 + 흰 글자) ===== */
.m-header {
    flex: 0 0 auto; display: flex; align-items: center; gap: 18px;
    height: 56px; padding: 0 18px;
    background: linear-gradient(180deg, var(--mx-primary), var(--mx-primary-bar));
    /* 상세 패널(.stage>.side: 데스크톱 z40, ≤900px z50)보다 위여야 헤더 통합검색 자동완성이 안 가려짐 */
    border-bottom: 0; position: relative; z-index: 60;
}
/* 사진 로고형 — 파란 헤더 배경 위 흰색 워드마크 + 'u' 위 상승 화살표 */
.m-logo {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    text-decoration: none; white-space: nowrap;
}
.m-logo .m-logo-inner {
    position: relative; display: inline-block; line-height: 1;
    font-size: var(--fs-9); font-weight: 700; letter-spacing: 0;
}
.m-logo .m-logo-word { color: #fff; }
.m-logo .m-logo-mark { position: absolute; top: -4px; right: -12px; width: 18px; height: 16.5px; display: block; color: #fff; }
.m-logo b { font-weight: var(--fw-b); color: #fff; }
/* 랜드아이 로고(사진, 2026-10-30) — 파란 머리에 바로(남색 부분만 흰색인 반전 로고, 흰 칩은 뺌) */
.m-logo .m-logo-img { display: block; height: 28px; width: auto; }

/* 헤더 통합검색 — 파란 바 위 흰색 pill */
.m-search { flex: 1; max-width: 560px; position: relative; }
.m-search input {
    width: 100%; height: 38px; box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--r-pill);
    padding: 0 44px 0 18px; font-size: var(--fs-6); font-family: inherit;
    background: #fff; color: #0f172a; outline: none; transition: box-shadow .15s, border-color .15s;
}
.m-search input::placeholder { color: #8a94a6; }
/* 검색창 왼쪽 검색 조건(통합/지도) — 흰 알약 안쪽 작은 셀렉트 */
.m-search .m-search-mode {
    position: absolute; left: 7px; top: 6px; height: 26px; z-index: 1;
    border: 0; border-radius: 13px; padding: 0 22px 0 10px; font-size: 12px; font-weight: 700; font-family: inherit;
    color: var(--mx-primary); background: var(--mx-primary-weak) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%232455e6' stroke-width='1.6'/></svg>") no-repeat right 8px center;
    appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;
}
.m-search input { padding-left: 76px; }
.m-search .m-search-mode[hidden] { display: none; }
/* 검색 조건 — 보이는 알약 단추와 그 아래 같은 모양의 항목 목록 */
.m-search .m-mode { position: absolute; left: 7px; top: 6px; z-index: 2; }
.m-search .m-mode-btn, .m-search .m-mode-list button {
    display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border: 0; border-radius: 13px;
    font-size: 12px; font-weight: 700; font-family: inherit; color: var(--mx-primary); background: var(--mx-primary-weak); cursor: pointer; white-space: nowrap;
}
.m-search .m-mode-btn:hover, .m-search .m-mode-list button:hover { background: #d6e1ff; }
.m-search .m-mode-caret { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: 2px; }
.m-search .m-mode-list { display: none; position: absolute; left: 0; top: 32px; flex-direction: column; gap: 4px; padding: 5px;
    background: var(--mx-panel); border: 1px solid var(--mx-line-strong); border-radius: 10px; box-shadow: var(--mx-shadow); min-width: 64px; }
.m-search .m-mode.open .m-mode-list { display: flex; }
.m-search .m-mode-list button { justify-content: center; width: 100%; }
.m-search .m-mode-list button.on { background: var(--mx-primary); color: #fff; }
.m-search input:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .4); }
.m-search .m-search-btn {
    position: absolute; right: 6px; top: 5px; width: 30px; height: 30px;
    border: 0; border-radius: 50%; background: none; cursor: pointer;
    color: var(--mx-primary); font-size: 15px; display: flex; align-items: center; justify-content: center;
}
.m-search .m-search-btn:hover { background: var(--mx-primary-weak); }
/* 통합검색 자동완성 */
.m-ac {
    position: absolute; left: 0; right: 0; top: 46px; z-index: 60; margin: 0; padding: 5px 0;
    list-style: none; background: var(--mx-panel); border: 1px solid var(--mx-line-strong);
    border-radius: 10px; box-shadow: var(--mx-shadow); max-height: 360px; overflow-y: auto; display: none;
}
.m-ac.on { display: block; }
.m-ac li { display: flex; align-items: center; gap: 9px; padding: 9px 16px; cursor: pointer; font-size: var(--fs-6); color: var(--mx-ink); }
.m-ac li:hover, .m-ac li.on { background: var(--mx-hover); }
.m-ac li .bdg { flex: none; font-size: var(--fs-3); color: var(--mx-red); border: 1px solid var(--mx-red); background: var(--mx-red-weak); border-radius: var(--r-1); padding: 1px 7px; line-height: 1.5; }
.m-ac li .bdg.parcel { color: var(--mx-primary); border-color: var(--mx-primary); background: var(--mx-primary-weak); }
.m-ac li .bdg.apt { color: #047857; border-color: #10b981; background: #ecfdf5; }   /* 아파트 단지(실거래) — 2026-10-05 */
.m-ac li .sub { color: var(--mx-sub); font-size: var(--fs-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-ac li.empty { color: var(--mx-sub); cursor: default; justify-content: center; }

/* 헤더 우측 유틸 */
.m-header-right { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* 오른쪽 단추 순서 = 로그인 → 다크모드 → 사이트맵(☰) → v2 (2026-10-08 사용자 지시) */
.m-header-right .m-admin { order: 0; }
.m-header-right .m-grade, .m-header-right .m-logout-form { order: 1; }
.m-header-right .m-logout-form { margin: 0; display: inline-flex; }
.m-header-right .m-mylink { order: 2; margin-left: 0; padding: 0 11px; }   /* 로그아웃 오른쪽: 내정보·쿠폰·포인트 */
/* 쿠폰 수·포인트 잔액 — 단추 아닌 글(흰 글씨, 숫자 노란 강조) */
.m-header-right .m-myval { order: 2; display: inline-flex; align-items: center; color: rgba(255, 255, 255, .9); font-size: var(--fs-5); font-weight: var(--fw-sb); white-space: nowrap; padding: 0 4px; }
.m-header-right .m-myval b { font-weight: 800; color: #ffe08a; margin: 0 1px 0 3px; }
.m-header-right #hDark { order: 3; }
.m-header-right .m-menuwrap { order: 4; }
.m-header-right .m-v2btn { order: 5; }
.m-iconbtn {
    width: 32px; height: 32px; border: 0; background: none; cursor: pointer;
    border-radius: var(--r-3); color: rgba(255, 255, 255, .9); font-size: var(--fs-7);
    display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s;
}
.m-iconbtn:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.m-grade {
    display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 13px; margin-left: 4px;
    border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--r-pill); color: #fff;
    font-size: var(--fs-5); font-weight: var(--fw-sb); text-decoration: none; white-space: nowrap; cursor: pointer;
    background: rgba(255, 255, 255, .14); font-family: inherit;
}
.m-grade:hover { background: rgba(255, 255, 255, .26); }
.m-grade .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
/* v2 테스트 화면 바로가기 버튼 — 로그인 옆 */
.m-v2btn {
    display: inline-flex; align-items: center; height: 30px; padding: 0 13px; margin-left: 4px;
    border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--r-pill);
    color: #fff; font-size: var(--fs-5); font-weight: var(--fw-sb); font-family: inherit;
    text-decoration: none; white-space: nowrap; cursor: pointer; background: rgba(255, 255, 255, .14);
}
.m-v2btn:hover { background: rgba(255, 255, 255, .26); }

/* 헤더 햄버거 메뉴 드롭다운 */
.m-menuwrap { position: relative; }
.m-menu {
    position: absolute; right: 0; top: 42px; z-index: 60; display: none; flex-direction: column;
    min-width: 168px; background: var(--mx-panel); border: 1px solid var(--mx-line-strong);
    border-radius: 10px; box-shadow: var(--mx-shadow); padding: 6px; gap: 1px;
}
.m-menu.on { display: flex; }
.m-menu a, .m-menu .mm-logout {
    display: block; width: 100%; box-sizing: border-box; text-align: left; text-decoration: none;
    border: 0; background: none; cursor: pointer; font-family: inherit; font-size: var(--fs-5); font-weight: var(--fw-md);
    color: var(--mx-ink); padding: 9px 11px; border-radius: var(--r-2);
}
.m-menu a:hover, .m-menu .mm-logout:hover { background: var(--mx-hover); }
.m-menu form { margin: 0; }
.m-menu .mm-user {
    display: block; padding: 8px 11px 9px; font-size: var(--fs-4); color: var(--mx-sub); font-weight: var(--fw-sb);
    border-bottom: 1px solid var(--mx-line); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 햄버거 = 사이트맵(네 칸 격자, 2026-10-08) */
.m-menu.m-sitemap { min-width: 0; width: 640px; max-width: calc(100vw - 24px); padding: 14px 16px 12px; gap: 0; }
.m-sitemap .sm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 18px; }
.m-sitemap .sm-col { display: flex; flex-direction: column; gap: 1px; }
.m-sitemap .sm-h { font-size: var(--fs-4); font-weight: var(--fw-sb); color: var(--mx-primary); padding: 4px 8px 5px; margin-top: 6px; border-bottom: 1px solid var(--mx-line); margin-bottom: 3px; }
.m-sitemap .sm-col .sm-h:first-child { margin-top: 0; }
.m-sitemap .sm-col a { padding: 6px 8px; font-size: var(--fs-4); font-weight: var(--fw-md); white-space: nowrap; }
@media (max-width: 720px) { .m-sitemap .sm-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== 내비 (샘플: 파란 바 + 흰 탭 + 흰 밑줄) ===== */
.m-nav {
    flex: 0 0 auto; display: flex; align-items: stretch; height: 42px; padding: 0 18px;
    background: var(--mx-primary-bar); border-bottom: 0; position: relative; z-index: 39;
}
.m-tabs { display: flex; align-items: stretch; gap: 18px; }
.m-tabs a {
    display: inline-flex; align-items: center; padding: 0; font-size: var(--fs-5); font-weight: var(--fw-md);
    color: rgba(255, 255, 255, .85); text-decoration: none; border-bottom: 2.5px solid transparent; white-space: nowrap;
    transition: color .15s;
}
.m-tabs a:hover { color: #fff; }
.m-tabs a.on { color: #fff; border-bottom-color: #fff; }
.m-tabs .beta-tag, .m-sitemap .beta-tag { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: #e0313a; color: #fff; font-size: 10px; font-weight: 800; line-height: 1.5; vertical-align: middle; }   /* 지역도형지도(베타) 표시 */
.m-nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
/* 정보 오류 신고 — 메뉴 띠 오른쪽(로그인 단추 아래 줄), 흰 테두리 작은 알약(2026-10-07) */
.m-report-err {
    display: inline-flex; align-items: center; padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--r-pill);
    background: transparent; color: rgba(255, 255, 255, .92); font-size: var(--fs-4); font-weight: var(--fw-md); font-family: inherit;
    cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s;
}
.m-report-err:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }
.m-report-count {
    display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-5); color: rgba(255, 255, 255, .9);
    font-weight: var(--fw-md); background: none; border: 0; cursor: pointer; font-family: inherit;
}
.m-report-count b { color: #fff; font-weight: var(--fw-b); }
.m-report-make {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
    background: #fff; color: var(--mx-primary); border: 0; border-radius: var(--r-pill);
    font-size: var(--fs-5); font-weight: var(--fw-b); text-decoration: none; cursor: pointer; white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .16); transition: background .15s;
}
.m-report-make:hover { background: #eaf0ff; }

/* 내 보고서 드롭다운(저장한 보고서 목록) */
.m-report-wrap { position: relative; display: inline-flex; }
.m-report-pop {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    width: 320px; max-height: 62vh; overflow-y: auto;
    background: #fff; border-radius: 12px; padding: 8px; color: #1b2330;
    box-shadow: 0 18px 50px -18px rgba(16, 39, 71, .5); border: 1px solid #e7ebf2;
}
.m-report-pop[hidden] { display: none; }
.m-report-pop .rp-empty { padding: 18px 14px; font-size: 13px; color: #6b7688; line-height: 1.62; text-align: center; }
.m-report-pop .rp-empty b { color: #2455e6; }
.m-report-pop .rp-item {
    display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 8px; cursor: pointer;
}
.m-report-pop .rp-item:hover { background: #f2f5fb; }
.m-report-pop .rp-item .rp-nm { font-size: 13.5px; font-weight: 700; color: #1b2330; }
.m-report-pop .rp-item .rp-mt { font-size: 11.5px; color: #8a94a0; margin-top: 2px; }
.m-report-pop .rp-item .rp-go { margin-left: auto; color: #2455e6; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ===== 본문(좌측목록 + 지도 + 우측패널) ===== */
/* .stage 는 explore.css 에서 flex:1 + position:relative + display:flex 지정됨 */

/* 좌측 단지목록 사이드바 — 400 → 360(2026-10-19 사용자 지시 「왼쪽 패널 조금 줄여줘」, 상세 패널 위치도 같이) */
.m-side {
    flex: 0 0 360px; width: 360px; background: var(--mx-panel);
    border-right: 1px solid var(--mx-line); display: flex; flex-direction: column; min-height: 0; z-index: 30;
}
.ms-tabs { display: flex; border-bottom: 1px solid var(--mx-line); flex: 0 0 auto; }
.ms-tabs button {
    flex: 1; height: 46px; border: 0; background: none; cursor: pointer; font-family: inherit;
    font-size: var(--fs-5); font-weight: var(--fw-sb); color: var(--mx-sub); border-bottom: 2px solid transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px; letter-spacing: var(--ls-base);
    transition: color .15s;
}
.ms-tabs button[hidden] { display: none; }
.ms-tabs button:hover { color: var(--mx-ink); }
.ms-tabs button.on { color: var(--mx-primary); border-bottom-color: var(--mx-primary); }
.ms-tabs button .cnt {
    display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: var(--r-pill);
    background: var(--mx-hover); color: var(--mx-sub); font-size: var(--fs-3); font-weight: var(--fw-b); text-align: center;
}
.ms-tabs button.on .cnt { background: var(--mx-primary-weak); color: var(--mx-primary-strong); }
/* 탭 셋(청약 · 최근 분양단지 · 지도내 분양단지, 2026-10-29) — 한 줄에 들게 글자 폭만큼 나누고 숫자 칩을 줄인다 */
.ms-tabs button { flex: 1 1 auto; min-width: 0; padding: 0 4px; white-space: nowrap; gap: 3px; font-size: 13.5px; letter-spacing: -0.02em; }
.ms-tabs button .cnt { min-width: 0; padding: 1px 5px; font-size: 11px; }

.ms-filter { padding: 12px 14px 10px; border-bottom: 1px solid var(--mx-line); flex: 0 0 auto; }
.ms-find { position: relative; margin-top: 10px; }   /* 필터(드롭다운) 아래에 위치 — 위쪽 간격 */
.ms-find input {
    width: 100%; box-sizing: border-box; height: 36px; border: 1px solid var(--mx-line-strong);
    border-radius: var(--r-3); padding: 0 34px 0 12px; font-size: var(--fs-5); font-family: inherit;
    background: var(--mx-bg); color: var(--mx-ink); outline: none; letter-spacing: var(--ls-base);
}
.ms-find input:focus { border-color: var(--mx-primary); }
.ms-find .ic { position: absolute; right: 11px; top: 9px; color: var(--mx-sub); font-size: var(--fs-6); }
/* 필터 — 참조앱 .rail-filters .fpill(칩) 형태: 알약 테두리 + 가로 배치 */
.ms-selects { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ms-selects select[hidden] { display: none; }
/* 실거래 검색조건 — 3열 2줄(전국·아파트·평형 / 매매가·입주년도·세대수, 2026-10-19 사용자 지시 — 예전 4열 4+2) */
.ms-selects.deal-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 6px; }
.ms-selects.deal-cols select { width: 100%; padding: 6px 8px; text-align: left; }
.ms-selects select {
    flex: 0 0 auto; min-width: 0; border: 1px solid var(--mx-line); border-radius: var(--r-pill);
    background: var(--mx-panel); color: var(--mx-ink); font-size: var(--fs-5); font-family: inherit; font-weight: var(--fw-md);
    padding: 6px 12px; cursor: pointer; outline: none; transition: border-color .15s, color .15s;
}
.ms-selects select:hover { border-color: var(--mx-primary); color: var(--mx-primary); }
.ms-selects select:focus { border-color: var(--mx-primary); }

.ms-body { flex: 1; overflow-y: auto; min-height: 0; }
.ms-body::-webkit-scrollbar { width: 8px; }
.ms-body::-webkit-scrollbar-thumb { background: #cfd6e0; border-radius: 4px; }
body.mx-dark .ms-body::-webkit-scrollbar-thumb { background: #39434f; }

.ms-head { padding: 12px 14px 6px; font-size: var(--fs-5); color: var(--mx-sub); font-weight: var(--fw-b); }
.ms-head b { color: var(--mx-ink); font-weight: var(--fw-b); }
.ms-note {
    margin: 4px 14px 8px; padding: 9px 11px; border-radius: var(--r-3); font-size: var(--fs-4); line-height: 1.5;
    background: var(--mx-amber-soft, #f8edd4); color: var(--mx-amber-ink, #916400); border: 1px solid #f0dca6;
}
body.mx-dark .ms-note { border-color: #4a411f; }

/* 단지 카드 (샘플 .dcard: 썸네일 좌측 + 본문) */
.ms-card {
    display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--mx-line);
    cursor: pointer; transition: background .12s;
}
.ms-card:hover { background: var(--mx-primary-weak); }
/* 선택된 카드 — 지도 마커 선택과 연동. 좌측 강조선 + 옅은 파랑 배경 */
.ms-card.sel { background: var(--mx-primary-weak); box-shadow: inset 3px 0 0 var(--mx-primary); }
.ms-card.sel .c-name { color: var(--mx-primary-strong); }
.ms-card .c-thumb {
    flex: 0 0 52px; width: 52px; height: 52px; border-radius: var(--r-4); align-self: flex-start;
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--mx-primary-weak), var(--mx-hover));
}
.ms-card .c-thumb::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--mx-primary) 20%, transparent), transparent 60%);
}
.ms-card .c-main { flex: 1; min-width: 0; }
/* 단지 사진(분양 홈페이지 대표 이미지) — 없으면 LAND EYE 눈 표시(img.def, 2026-10-19) */
.ms-card .c-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; background: #fff; }
.ms-card .c-thumb img.def { object-fit: contain; }
/* 최근 분양단지 '더보기'(30개씩) — 카드 목록 맨 아래 한 줄 버튼 */
.ms-more {
    display: block; width: calc(100% - 32px); margin: 10px 16px 14px; height: 38px;
    border: 1px solid var(--mx-line-strong); border-radius: var(--r-3); background: var(--mx-hover);
    color: var(--mx-ink); font-family: inherit; font-size: var(--fs-4); font-weight: var(--fw-sb); cursor: pointer;
}
.ms-more:hover { border-color: var(--mx-primary); color: var(--mx-primary); }
.ms-more span { color: var(--mx-sub); font-weight: var(--fw-reg); }
.ms-card .c-tags { display: flex; gap: 4px; margin-bottom: 4px; flex-wrap: wrap; }
.tagpill { font-size: var(--fs-2); font-weight: var(--fw-b); border-radius: var(--r-2); padding: 1px 7px; line-height: 1.6; }
.tagpill.recv { background: var(--mx-red-weak); color: var(--mx-red); }
.tagpill.new  { background: var(--mx-amber-soft); color: var(--mx-amber-ink); }
.tagpill.soon { background: var(--mx-deal-soft); color: var(--mx-deal); }
.tagpill.done { background: var(--mx-hover); color: var(--mx-sub); }
/* 유형(아파트·공공분양·무순위·오피스텔·도시형) — 상태 배지와 구분되게 테두리만 있는 옅은 칩 */
.tagpill.kind { background: transparent; border: 1px solid var(--mx-line-strong); color: var(--mx-sub); font-weight: var(--fw-md); }
.m-ac li .nm { font-weight: var(--fw-md); }
.ms-card .c-name { font-size: var(--fs-5); font-weight: var(--fw-sb); color: var(--mx-ink); margin: 0; letter-spacing: var(--ls-tight); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-card .c-spec { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: var(--fs-3); color: var(--mx-sub); }
.ms-card .c-spec .c-price { color: var(--mx-red); font-weight: var(--fw-b); }
.ms-card .c-spec .c-st { color: var(--mx-sub); }
.ms-card .c-tags .c-mv { color: #2455e6; }   /* 칩 옆 「입주 N개월 남음」(2026-10-29) */
/* 참조앱 .dcard .dsub2 — 지역·접수·입주 보조줄 */
.ms-card .c-sub2 { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 3px; font-size: var(--fs-1); color: var(--mx-faint, #a2acb8); }
.ms-empty { padding: 40px 20px; text-align: center; color: var(--mx-sub); font-size: var(--fs-5); }

/* 분양뉴스 카드 */
.ms-news { display: block; padding: 13px 14px; border-bottom: 1px solid var(--mx-line); cursor: pointer; text-decoration: none; transition: background .12s; }
.ms-news:hover { background: var(--mx-hover); }
.ms-news .n-cat { font-size: var(--fs-2); font-weight: var(--fw-sb); color: var(--mx-primary); }
.ms-news .n-title { font-size: var(--fs-6); font-weight: var(--fw-sb); color: var(--mx-ink); margin: 3px 0 4px; line-height: 1.4; letter-spacing: var(--ls-base); }
.ms-news .n-sum { font-size: var(--fs-4); color: var(--mx-sub); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-news .n-meta { font-size: var(--fs-3); color: var(--mx-faint, #a2acb8); margin-top: 5px; }

/* 분양뉴스(청약 캘린더) — 레퍼런스 land4u-map-app np-* 스타일 정밀 이식(색·폰트·구조 동일).
   변수는 .np-wrap 스코프에 레퍼런스 토큰 그대로 정의(라이트/다크). */
.np-wrap {
  --brand:#2455e6; --brand-bar:#1f52e3; --brand-soft:#e5ecff; --brand-ink:#1b45c4;
  --good:#0f9d6b; --purple:#6b4dff; --amber:#e0a12e; --sale:#e5342f; --sale-soft:#fde5e4;
  --ink:#131a2e; --ink-2:#334063; --muted:#5f6b86; --faint:#93a0bd;
  --line:#e1e7f2; --line-soft:#eef2f9; --surface:#ffffff; --surface-2:#f5f8fd;
  --shadow:0 1px 2px rgba(19,26,46,.06), 0 8px 24px -12px rgba(19,26,46,.18);
  --lh-tight:1.2; --lh-snug:1.35; --lh-loose:1.65;
  padding: 14px 14px 20px; display: flex; flex-direction: column; gap: 20px;
}
body.mx-dark .np-wrap {
  --brand:#5b82ff; --brand-bar:#1f3a8a; --brand-soft:#1a2749; --brand-ink:#8fb0ff;
  --good:#3fbf8f; --purple:#8f79ff; --amber:#e0b25e; --sale:#f36a63; --sale-soft:#3a1e1d;
  --ink:#e7ecf6; --ink-2:#c3cde3; --muted:#93a0bd; --faint:#5d6a88;
  --line:#25314c; --line-soft:#1a2438; --surface:#0f1728; --surface-2:#131d33;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}
/* 요약 다이제스트(이번 주 / 오늘) */
.np-digest{border:1px solid var(--line);border-radius:var(--r-6);background:var(--surface-2);box-shadow:var(--shadow);overflow:hidden;position:sticky;top:0;z-index:4}   /* 스크롤해도 위에 고정(2026-10-19 사용자 지시) */
.np-grid{display:grid;grid-template-columns:3.1rem repeat(5,1fr)}
.np-grid .nh{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 2px}
.np-grid .nh i{width:6px;height:6px;border-radius:50%;display:block}
.np-grid .nh span{font-size:var(--fs-3);font-weight:var(--fw-sb);color:var(--muted);text-align:center;line-height:var(--lh-tight)}
.np-grid .rowlab{display:flex;align-items:center;padding-left:12px;font-size:var(--fs-3);font-weight:var(--fw-b);color:var(--faint)}
.np-grid .rowlab.today{color:var(--brand)}
.np-grid .nv{display:flex;align-items:center;justify-content:center;padding:9px 2px;font-size:var(--fs-7);font-weight:var(--fw-xb);font-variant-numeric:tabular-nums;color:var(--ink);border-radius:var(--r-2)}
.np-grid .nv.zero{color:var(--line)}
.np-grid .nv.today{color:var(--brand)}
.np-grid .hr{grid-column:1/-1;border-top:1px solid var(--line)}
/* 누르면 그 절로 내려간다 — 누를 수 있는 칸만 손가락 커서 */
.np-grid .nh.go,.np-grid .nv.go{cursor:pointer;transition:background .13s}
.np-grid .nh.go:hover,.np-grid .nv.go:hover{background:var(--brand-soft);color:var(--brand)}
.np-grid .nv.go:hover.zero{color:var(--brand);opacity:.55}
.np-grid .nh.go{border-radius:var(--r-2)}
/* 방금 옮겨 간 절 — 잠깐 테두리로 알려 준다 */
.np-sec.hit .np-card{box-shadow:0 0 0 2px var(--brand);border-radius:var(--r-3)}
.dot-notice{background:var(--brand)}.dot-apply{background:var(--good)}.dot-result{background:var(--purple)}
.dot-contract{background:var(--amber)}.dot-extra{background:var(--sale)}
/* 섹션 */
.np-sections{display:flex;flex-direction:column;gap:22px}
.np-sec{display:flex;flex-direction:column;gap:9px}
.np-sec-h{display:flex;align-items:center;gap:8px}
.np-sec-h .accent{width:3px;height:15px;border-radius:var(--r-pill);display:block}
.np-sec-h h3{margin:0;font-size:var(--fs-6);font-weight:var(--fw-xb);letter-spacing:var(--ls-tight);color:var(--ink)}
.np-sec-h .cntx{font-size:var(--fs-3);font-weight:var(--fw-sb);color:var(--faint);margin-left:auto}
/* 금주 / 금일 고르개 — 누른 쪽 목록만 보여 준다 */
.np-tog{margin-left:auto;display:flex;gap:2px;background:var(--surface-3);
  border-radius:var(--r-pill);padding:2px}
.np-tog button{font-family:inherit;font-size:var(--fs-2);font-weight:var(--fw-sb);
  color:var(--muted);background:transparent;border:0;border-radius:var(--r-pill);
  padding:3px 9px;cursor:pointer;white-space:nowrap;transition:background .13s,color .13s}
.np-tog button b{font-weight:var(--fw-xb);margin-left:3px}
.np-tog button:hover{color:var(--ink)}
.np-tog button[aria-pressed="true"]{background:var(--surface);color:var(--ink);
  box-shadow:0 1px 2px rgba(16,39,71,.14)}
.np-card{border:1px solid var(--line);border-radius:var(--r-6);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.np-empty{padding:26px 12px;text-align:center;font-size:var(--fs-4);color:var(--faint)}
/* 항목 — 단지명 > 상태 > 메타 > 지표 > 일정칩 */
.np-row{padding:13px 14px 12px;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--line-soft)}
.np-row:last-child{border-bottom:0}
/* 왼쪽 단지 사진 — 최근 분양단지 카드(.ms-card .c-thumb)와 같은 크기 · 모양(2026-10-20) */
.np-row{display:flex;gap:12px}
.np-main{flex:1;min-width:0}
.np-thumb{flex:0 0 52px;width:52px;height:52px;border-radius:var(--r-4);align-self:flex-start;position:relative;overflow:hidden;background:#fff;border:1px solid var(--line-soft)}
.np-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.np-thumb img.def{object-fit:contain}
.np-row:hover,.np-row.active{background:var(--brand-soft)}
.np-r1{display:flex;align-items:center;gap:8px}
.np-r1 .nm{flex:1;min-width:0;font-size:var(--fs-6);font-weight:var(--fw-b);letter-spacing:var(--ls-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:var(--lh-snug);color:var(--ink)}
.np-row:hover .np-r1 .nm{color:var(--brand)}
.np-pre{flex:none;font-size:var(--fs-3);font-weight:var(--fw-sb);color:var(--muted);background:var(--surface-2);border:1px solid var(--line);padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap}
.np-rank{flex:none;display:inline-flex;align-items:baseline;gap:4px;font-size:var(--fs-3);background:var(--sale-soft);padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap}
.np-rank .k{color:var(--sale);opacity:.75;font-weight:var(--fw-sb)}
.np-rank b{font-size:var(--fs-4);font-weight:var(--fw-xb);color:var(--sale);font-variant-numeric:tabular-nums}
.np-r2{margin-top:5px;display:flex;align-items:center;gap:6px;font-size:var(--fs-4);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-r2 .sep{color:var(--line)}
.np-r3{margin-top:7px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.np-r3 .pp{font-size:var(--fs-4);color:var(--muted);font-variant-numeric:tabular-nums}
.np-r3 .pp b{font-size:var(--fs-5);font-weight:var(--fw-xb);color:var(--amber);margin:0 1px}
.np-appl{font-size:var(--fs-4);color:var(--muted);font-variant-numeric:tabular-nums}
.np-appl b{font-size:var(--fs-5);font-weight:var(--fw-xb);color:var(--brand);margin:0 1px}
.np-chips{margin-top:9px;display:flex;flex-wrap:wrap;gap:5px}
.np-chip{display:inline-flex;align-items:baseline;gap:5px;font-size:var(--fs-3);background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-2);padding:3px 8px}
.np-chip .k{color:var(--faint);font-weight:var(--fw-md)}
.np-chip b{color:var(--ink-2);font-weight:var(--fw-b);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-tight)}
.np-row:hover .np-chip{background:var(--surface);border-color:var(--line)}
.np-foot{margin:0;font-size:var(--fs-3);color:var(--faint);line-height:var(--lh-loose)}
.np-foot b{color:var(--muted)}

/* 인사이트 패널 — 샘플 사이트(land4u-map-app) 이식(.ins 스코프로 공통 CSS와 격리) */
.ins { display: flex; flex-direction: column; min-height: 0; }
.ins .ip-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--mx-line); }
.ins .ip-title { font-size: var(--fs-6); font-weight: var(--fw-b); color: var(--mx-ink); display: flex; align-items: center; gap: 8px; }
.ins .ip-region { font-size: var(--fs-4); font-weight: var(--fw-sb); color: var(--mx-primary); background: var(--mx-primary-weak); padding: 2px 9px; border-radius: var(--r-pill); }
.ins .metric-tabs { display: flex; flex-wrap: wrap; gap: 5px; padding: 11px 14px; border-bottom: 1px solid var(--mx-line); background: var(--mx-hover); }
.ins .metric-tabs .mt { font-size: var(--fs-3); font-weight: var(--fw-sb); color: var(--mx-sub); background: var(--mx-panel); border: 1px solid var(--mx-line-strong); border-radius: var(--r-3); padding: 5px 9px; cursor: pointer; }
.ins .metric-tabs .mt:hover { border-color: var(--mx-primary); color: var(--mx-primary); }
.ins .metric-tabs .mt.on { background: var(--mx-ink); border-color: var(--mx-ink); color: #fff; }
.ins .ip-body { flex: 1; min-height: 0; }
.ins .kpi { display: flex; gap: 10px; padding: 14px 16px; }
.ins .kpi .box { flex: 1; border: 1px solid var(--mx-line); border-radius: var(--r-5); padding: 11px 12px; background: var(--mx-hover); }
.ins .kpi .box .kn { font-size: var(--fs-9); font-weight: var(--fw-xb); letter-spacing: var(--ls-title); }
.ins .kpi .box .kn.sale { color: var(--mx-red); }
.ins .kpi .box .kn.deal { color: var(--mx-deal); }
.ins .kpi .box .kl { font-size: var(--fs-3); color: var(--mx-sub); margin-top: 3px; }
.ins .spark { padding: 12px 16px; border-bottom: 1px solid var(--mx-line); }
.ins .spark .lab { font-size: var(--fs-4); font-weight: var(--fw-sb); color: var(--mx-ink); display: flex; justify-content: space-between; margin-bottom: 8px; }
.ins .spark .lab b { color: var(--mx-amber-ink); font-weight: var(--fw-xb); }
.ins .spark .bars { display: flex; align-items: flex-end; gap: 4px; height: 52px; }
.ins .spark .bars span { flex: 1; background: color-mix(in srgb, var(--mx-amber-ink) 40%, var(--mx-hover)); border-radius: var(--r-1) var(--r-1) 0 0; transition: height .4s; }
.ins .spark .bars span:last-child { background: var(--mx-amber-ink); }
/* 분양 통계 3종(분양공고 TOP10·전국 미분양·주택 인허가) — 통계페이지 SVG 막대 이식 */
.ins .ins-charts { padding: 4px 6px 8px; }
.ins .ic-chart { padding: 12px 10px; border-bottom: 1px solid var(--mx-line); }
.ins .ic-h { font-size: var(--fs-5); font-weight: var(--fw-b); color: var(--mx-ink); margin-bottom: 6px; }
.ins .ic-h .ic-u { font-size: 11px; color: var(--mx-sub); font-weight: 400; margin-left: 6px; }
.ins .ic-h .ic-yr { float: right; font-size: 12px; font-weight: 700; color: #151b94; }
.ins .cb-legend { display: flex; gap: 14px; margin: 2px 0 6px; font-size: 11px; color: var(--mx-sub); font-weight: 600; }
.ins .cb-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.ins .cb-legend .ln i { height: 2px; width: 14px; vertical-align: 3px; }
.ins .cb-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.ins .cb-scroll::-webkit-scrollbar { height: 7px; }
.ins .cb-scroll::-webkit-scrollbar-thumb { background: #cfd6e0; border-radius: 4px; }
.ins .cb-svg { height: auto; display: block; }
/* 요약 4종(가로막대 TOP5) — 전국 미분양·시세 TOP·거래량 TOP·인구 현황 */
.ins .ins-sum { padding: 2px 0; }
.ins .is-sec { padding: 12px 16px; border-bottom: 1px solid var(--mx-line); }
.ins .is-h { font-size: var(--fs-5); font-weight: var(--fw-b); color: var(--mx-ink); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
.ins .is-h .is-u { font-size: 11px; color: var(--mx-sub); font-weight: 400; }
/* 전국 미분양 현황(전체) 표 — 시도 전 지역 랭킹, 스크롤 */
.ins .ins-sum .ua-wrap { border: 1px solid var(--mx-line); border-radius: var(--r-3); }
.ins .ua-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-4); }
.ins .ua-tbl th { background: var(--mx-hover); color: var(--mx-sub); font-weight: var(--fw-sb); padding: 9px 14px; border-bottom: 1px solid var(--mx-line); }
.ins .ua-tbl td { padding: 10px 14px; border-bottom: 1px solid var(--mx-line); color: var(--mx-ink); }
.ins .ua-tbl tbody tr:last-child td { border-bottom: 0; }
.ins .ua-tbl .ua-nm { text-align: left; font-weight: var(--fw-sb); }
.ins .ua-tbl .ua-v { text-align: right; font-weight: var(--fw-b); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ins .st-rows { display: flex; flex-direction: column; gap: 8px; }
.ins .st-row { display: flex; align-items: center; gap: 10px; }
.ins .st-row .nm { flex: 0 0 40%; font-size: var(--fs-3); color: var(--mx-ink); font-weight: var(--fw-sb); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins .st-row .track { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--mx-line); overflow: hidden; }
.ins .st-row .track i { display: block; height: 100%; border-radius: var(--r-pill); }
.ins .st-row .v { flex: 0 0 auto; font-size: var(--fs-3); font-weight: var(--fw-b); color: var(--mx-ink); min-width: 52px; text-align: right; }
.ins .panel-h { padding: 12px 16px; font-size: var(--fs-6); font-weight: var(--fw-b); color: var(--mx-ink); border-bottom: 1px solid var(--mx-line); display: flex; align-items: center; justify-content: space-between; }
.ins .panel-h.sub { border-top: 1px solid var(--mx-line); }
.ins .panel-h .x { color: var(--mx-faint, #a2acb8); font-weight: var(--fw-md); font-size: var(--fs-4); }
.ins .stat-row { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--mx-line); }
.ins .stat-row .rank { font-size: var(--fs-4); font-weight: var(--fw-sb); color: var(--mx-faint, #a2acb8); width: 16px; }
.ins .stat-row .nm { font-size: var(--fs-4); font-weight: var(--fw-sb); color: var(--mx-ink); flex: 1; }
.ins .stat-row .track { flex: 1.4; height: 6px; border-radius: var(--r-pill); background: var(--mx-line); overflow: hidden; }
.ins .stat-row .track > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--mx-primary); }
.ins .stat-row .num { font-size: var(--fs-4); font-weight: var(--fw-b); color: var(--mx-primary); font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }
.ins .ins-cta { margin: 18px 16px 16px; padding: 15px 16px; border: 1px solid var(--mx-line-strong); border-radius: var(--r-5); background: var(--mx-hover); }
.ins .ins-cta .ic-t { font-size: var(--fs-5); font-weight: var(--fw-b); color: var(--mx-ink); letter-spacing: var(--ls-tight); }
.ins .ins-cta .ic-t b { color: var(--mx-primary); font-weight: var(--fw-b); }
.ins .ins-cta .ic-d { margin-top: 5px; font-size: var(--fs-3); color: var(--mx-sub); line-height: 1.5; }
.ins .ins-cta .ic-btn { display: block; margin-top: 12px; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none; font-family: inherit; font-size: var(--fs-4); font-weight: var(--fw-b); color: #fff; background: var(--mx-primary); border: none; border-radius: var(--r-3); padding: 10px; cursor: pointer; }
.ins .ins-cta .ic-btn:hover { filter: brightness(1.08); }

/* ===== 지도 래퍼 ===== */
.m-map-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.m-map-wrap > #exploreMap { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 지도 좌상단 범례 */
.map-legend { position: absolute; top: 12px; left: 12px; z-index: 5;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 8px 12px; box-shadow: 0 2px 8px rgba(0,0,0,.12);
    font-size: 13px; color: #111827; line-height: 1.5; }
.map-legend .ml-row { display: flex; align-items: center; gap: 7px; }
.map-legend .ml-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
/* 범례 줄 = 켜고 끄는 단추. 꺼진 줄은 흐리게 + 점을 비워 상태가 보이게 */
.map-legend button.ml-row { appearance: none; background: none; border: 0; padding: 2px 4px; margin: 0 -4px; border-radius: 6px; cursor: pointer; font: inherit; color: inherit; }
.map-legend button.ml-row:hover { background: rgba(0,0,0,.05); }
.map-legend button.ml-row:not(.on) { opacity: .45; }
.map-legend button.ml-row:not(.on) .ml-dot { background: #fff !important; box-shadow: inset 0 0 0 2px currentColor; }
.map-legend button.ml-row:not(.on) span { text-decoration: line-through; }
.map-legend .ml-unit { margin-top: 4px; font-size: 12px; color: #6b7280; }
/* 범례 '실거래' 유형 목록 — 마우스 오버 시 오른쪽에(2026-09-29) */
.map-legend .ml-deal { position: relative; }
.map-legend .ml-sub { font-style: normal; font-size: 11px; color: #6b7280; margin-left: 2px; }
.map-legend .ml-cnt { font-weight: 800; color: var(--mx-primary-strong, #1d4ed8); margin-left: 1px; font-variant-numeric: tabular-nums; }   /* 「청약(7)」 개수 */
.map-legend .ml-sub:not(:empty)::before { content: '· '; }
.map-legend .ml-fly { display: none; position: absolute; left: 100%; top: -6px; margin-left: 6px; min-width: 132px;
    background: #fff; border: 1px solid #d5dbe6; border-radius: 8px; box-shadow: 0 6px 18px rgba(15,23,42,.16); padding: 4px; z-index: 6; }
.map-legend .ml-fly::before { content: ''; position: absolute; left: -10px; top: 0; bottom: 0; width: 10px; }   /* 줄 → 목록 사이 틈에서 오버가 끊기지 않게 */
.map-legend .ml-deal:hover .ml-fly, .map-legend .ml-deal:focus-within .ml-fly { display: block; }
.map-legend .ml-deal.closed .ml-fly { display: none; }
.map-legend:hover, .map-legend:focus-within { z-index: 6; }   /* 목록(아파트(민간)·무순위…)이 옆 반경 단추 줄(z 5) 위로 — 가려지지 않게(2026-10-15) */
.map-legend .ml-fly button { display: block; width: 100%; text-align: left; appearance: none; background: none; border: 0; border-radius: 6px;
    padding: 6px 10px; font: inherit; font-size: 13px; color: #1f2937; cursor: pointer; white-space: nowrap; }
.map-legend .ml-fly button:hover { background: #eef3ff; }
.map-legend .ml-fly button.on { background: #2563eb; color: #fff; font-weight: 700; }

/* 우측 세로 레이어 툴바 */
.m-rail { position: absolute; right: 14px; top: 58px; z-index: 22; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* ===== 지도/리스트 뷰 토글 (우상단, 사진 기준) ===== */
.m-viewtoggle { position: absolute; right: 14px; top: 14px; z-index: 25; display: inline-flex;
    background: #fff; border: 1px solid var(--mx-line); border-radius: var(--r-3, 8px); overflow: hidden;
    box-shadow: 0 2px 8px rgba(20,30,60,.14); }
.m-viewtoggle button { border: 0; background: #fff; cursor: pointer; font-family: inherit;
    font-size: var(--fs-4, 13px); font-weight: var(--fw-sb, 600); color: var(--mx-sub); padding: 8px 15px;
    display: inline-flex; align-items: center; gap: 5px; transition: background .12s, color .12s; }
.m-viewtoggle button + button { border-left: 1px solid var(--mx-line); }
.m-viewtoggle button:hover { color: var(--mx-primary); }
.m-viewtoggle button.on { background: var(--mx-primary); color: #fff; }
/* 단지비교 팝업이 열려 있는 동안(리스트 iframe 안) — 못 누르게 흐리게(2026-10-02) */
.m-viewtoggle.locked { pointer-events: none; opacity: .35; filter: grayscale(.4); }
.m-viewtoggle button .vi { font-size: var(--fs-5, 12px); line-height: 1; }

/* ===== 리스트 뷰 (지도 영역을 덮는 목록) ===== */
.m-listview { position: absolute; inset: 0; z-index: 24; background: var(--mx-bg, #f5f6f8);
    display: flex; flex-direction: column; }
.m-listview[hidden] { display: none; }   /* display:flex 가 UA [hidden] 규칙을 덮으므로 명시적으로 숨김 */
/* 도구 레일 — 매물/단지 토글 + 아이콘 도구를 한 카드에(참조앱 .tools) */
.m-toolbar {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: var(--mx-panel); border: 1px solid var(--mx-line); border-radius: var(--r-5);
    padding: 8px; box-shadow: var(--mx-shadow);
}
.m-toolbar .tool-toggle {
    display: flex; flex-direction: column; border: 1px solid var(--mx-line);
    border-radius: var(--r-3); overflow: hidden;
}
.m-toolbar .tool-toggle button {
    border: 0; cursor: pointer; font-family: inherit; font-size: var(--fs-3); font-weight: var(--fw-b);
    color: var(--mx-sub); padding: 6px 0; width: 44px; background: var(--mx-panel);
}
.m-toolbar .tool-toggle button + button { border-top: 1px solid var(--mx-line); }
.m-toolbar .tool-toggle button.on { background: var(--mx-primary); color: #fff; }
.m-toolbar .tool {
    width: 44px; border: 0; background: none; cursor: pointer; font-family: inherit;
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0;
    border-radius: var(--r-3); color: var(--mx-ink); transition: background .15s, color .15s;
}
.m-toolbar .tool .ic { font-size: var(--fs-6); line-height: 1; }
.m-toolbar .tool .tl { font-size: var(--fs-2); font-weight: var(--fw-sb); }
.m-toolbar .tool:hover { background: var(--mx-hover); color: var(--mx-primary); }
.m-toolbar .tool.on { background: var(--mx-primary-weak); color: var(--mx-primary-strong); }

/* 거리재기(툴바 「거리」) — 점·구간 말풍선·결과 상자(카카오 예제 모양) */
.dist-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #e0313a; box-sizing: border-box; }
.dist-lbl { display: inline-block; padding: 2px 7px; border: 1px solid #e0313a; border-radius: 4px; background: #fff; color: #e0313a; font-size: 12px; font-weight: 800; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.dist-lbl.mv { color: #c0392b; border-style: dashed; font-weight: 700; }
.dist-info { position: relative; min-width: 150px; padding: 10px 12px 8px; background: #fff; border: 1px solid #d5d9e2; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.18); font-size: 12px; color: #333; }
.dist-info .r { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; }
.dist-info .r .k { color: #666; }
.dist-info .r b { color: #e0313a; font-weight: 800; }
.dist-info .f { margin-top: 6px; padding-top: 6px; border-top: 1px solid #eee; color: #999; font-size: 11px; white-space: nowrap; }
.dist-info .dist-close { position: absolute; right: 6px; top: 4px; cursor: pointer; color: #999; font-size: 12px; }
.dist-info .dist-close:hover { color: #333; }

/* 레일 플라이아웃(편의: 지하철/버스 등) */
.rail-flyout {
    position: absolute; right: 60px; z-index: 25; display: none; flex-direction: column; gap: 2px;
    background: var(--mx-panel); border: 1px solid var(--mx-line-strong); border-radius: 10px; padding: 5px;
    box-shadow: var(--mx-shadow); min-width: 128px;
}
.rail-flyout.on { display: flex; }
.rail-flyout button {
    border: 0; background: none; cursor: pointer; font-family: inherit; text-align: left;
    border-radius: var(--r-2); padding: 8px 11px; font-size: var(--fs-5); font-weight: var(--fw-md); color: var(--mx-ink);
    display: flex; align-items: center; gap: 8px;
}
.rail-flyout button:hover { background: var(--mx-hover); }
.rail-flyout button.on { background: var(--mx-primary-weak); color: var(--mx-primary); }

/* 하단 좌측 지도모드 버튼 */
.m-mapmodes { position: absolute; left: 14px; bottom: 16px; z-index: 21; display: flex; gap: 6px; align-items: flex-end; }
.mbtn {
    position: relative; height: 32px; padding: 0 13px; border: 1px solid var(--mx-line-strong);
    background: var(--mx-panel); color: var(--mx-ink); border-radius: var(--r-pill); cursor: pointer; font-family: inherit;
    font-size: var(--fs-4); font-weight: var(--fw-sb); box-shadow: var(--mx-shadow); transition: background .12s, color .12s, border-color .12s;
}
.mbtn:hover { background: var(--mx-hover); }
.mbtn.on { background: var(--mx-primary); color: #fff; border-color: var(--mx-primary); }
.mapmode-flyout {
    position: absolute; left: 0; bottom: 42px; display: none; flex-direction: column; gap: 2px;
    background: var(--mx-panel); border: 1px solid var(--mx-line-strong); border-radius: 10px; padding: 5px;
    box-shadow: var(--mx-shadow); min-width: 122px;
}
.mapmode-flyout.on { display: flex; }
.mapmode-flyout button {
    border: 0; background: none; cursor: pointer; font-family: inherit; text-align: left;
    border-radius: var(--r-2); padding: 8px 11px; font-size: var(--fs-5); font-weight: var(--fw-md); color: var(--mx-ink);
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.mapmode-flyout button:hover { background: var(--mx-hover); }
.mapmode-flyout button.on { background: var(--mx-primary-weak); color: var(--mx-primary); }

/* 하단 중앙 범례 */
.m-legend {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 21;
    display: inline-flex; align-items: center; gap: 14px; height: 32px; padding: 0 16px;
    background: var(--mx-panel); border: 1px solid var(--mx-line); border-radius: var(--r-pill);
    box-shadow: var(--mx-shadow); font-size: var(--fs-3); font-weight: var(--fw-sb); color: var(--mx-ink);
}
.m-legend .lg { display: inline-flex; align-items: center; gap: 6px; color: var(--mx-ink); }
.m-legend .lg .dot { width: 9px; height: 9px; border-radius: 50%; }
.m-legend .lg.recv .dot { background: var(--mx-red); }
.m-legend .lg.deal .dot { background: var(--mx-deal); }
.m-legend .lg b { color: var(--mx-ink); font-variant-numeric: tabular-nums; }
.m-legend .sepv { width: 1px; height: 14px; background: var(--mx-line); }

/* ===== 마커 클릭 시 뜨는 상세패널/툴팁 — 종류 배지 색을 마커·샘플과 일치(메인 한정) ===== */
.tip .kind.sub, .side-head .kind.sub { background: var(--mx-red); }
.tip .kind.norank, .side-head .kind.norank { background: #8b5cf6; }
.tip .tip-none { color: #a0a8b8; font-weight: 400; }   /* 분양 마커 정보 창 — 원자료에 없는 값(2026-10-23) */

/* 분양뉴스 목록 클릭 → 지도 강조 핀 */
.news-focus { display: flex; flex-direction: column; align-items: center; pointer-events: none; animation: nfDrop .35s cubic-bezier(.2,.8,.3,1.2); }
.news-focus .nf-lab { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--mx-ink, #131a2e); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: -.01em; padding: 3px 9px; border-radius: 999px; margin-bottom: 3px; box-shadow: 0 2px 6px rgba(19,26,46,.28); }
.news-focus svg { filter: drop-shadow(0 3px 4px rgba(19,26,46,.32)); }
@keyframes nfDrop { 0% { transform: translateY(-14px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.tip .kind.apt, .side-head .kind.apt { background: var(--mx-deal); }
.tip .kind.opt, .side-head .kind.opt { background: #6b4dff; }
.tip .kind.lh,  .side-head .kind.lh  { background: #e0a12e; }
/* 툴팁 카드 — 샘플 톤(라운드·그림자) */
.tip { border-radius: var(--r-5); box-shadow: var(--mx-shadow); border-color: var(--mx-line); }
.tip .kind { font-weight: var(--fw-b); }
.tip h4 { letter-spacing: var(--ls-tight); }

/* ===== 지도 청약단지 배지 마커 — 참조앱(land4u-map-app) .marker.sale 과 동일 =====
   빨강(#e5342f) 바탕 · PY는 반투명 흰 알약 · 아래 다이아몬드 꼬리 · 흰 테두리 없음 */
.danji-badge {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 3px 6px 4px; border-radius: 6px; min-width: 44px;
    color: #fff; line-height: 1.1; white-space: nowrap; cursor: pointer;
    background: var(--mx-red);
    box-shadow: 0 2px 6px rgba(19, 26, 46, .32);
    transition: transform .12s, box-shadow .12s;
}
.danji-badge::after {
    content: ""; position: absolute; bottom: -4px; left: 50%;
    transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px;
    background: var(--mx-red);
}
.danji-badge .nm {
    font-size: 9.5px; font-weight: var(--fw-sb); letter-spacing: var(--ls-tight);
    padding: 0 5px; border-radius: 4px; background: rgba(255, 255, 255, .24);
}
.danji-badge .pr { font-size: var(--fs-4); font-weight: var(--fw-b); letter-spacing: var(--ls-tight); }
.danji-badge:hover, .danji-badge.sel {
    transform: scale(1.12); z-index: 5;
    box-shadow: 0 6px 16px rgba(19, 26, 46, .42);
}
/* 눌린(선택) 마커 — 흰 테두리 + 파란 글로우 링(샘플과 동일) */
.danji-badge.sel {
    outline: 2.5px solid #fff; outline-offset: 0; z-index: 6;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mx-primary) 45%, transparent), 0 6px 16px rgba(19, 26, 46, .42);
}
/* 실거래 모드 아파트 마커 — 파랑(예: 31PY 27억), 분양 배지와 동일 형태 */
.danji-badge.deal { background: var(--mx-deal); }
.danji-badge.deal::after { background: var(--mx-deal); }
/* hover 중 필지 폴리곤이 배지에 가려질 때(작은 필지) 배지를 비쳐 보이게 — main.jsp peekIfCovered() */
.danji-badge.peek { opacity: .3; transform: scale(1.12); box-shadow: none; }
.danji-badge.peek:hover { opacity: .3; }
/* 분양 마커 새 양식(2026-10-07 사용자 지시) — 단지명 · 분양가/평단가 · 분양일정(.tg 알약은 쓰지 않음) */
.danji-badge.v2 { padding: 5px 10px 5px; min-width: 0; gap: 1px; border-radius: 8px; }
.danji-badge.v2 .tg {
    position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
    padding: 1px 8px; border-radius: 999px; border: 1.5px solid #fff; background: var(--mx-red);
    font-size: 10px; font-weight: var(--fw-b); line-height: 1.3; letter-spacing: var(--ls-tight); white-space: nowrap;
    box-shadow: 0 1px 3px rgba(19, 26, 46, .3);
}
.danji-badge.v2 .nm2 { max-width: 180px; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-4); font-weight: var(--fw-b); letter-spacing: var(--ls-tight); }
.danji-badge.v2 .ln { font-size: 10.5px; font-weight: var(--fw-md); letter-spacing: var(--ls-tight); opacity: .95; }
.danji-badge.v2 .dt { opacity: .85; }

/* ===== 청약 상세패널(cy) 8탭 보강 — 사업개요 버튼·하단 CTA ===== */
.cy .cy-h4row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
/* 제목(사업개요)은 줄바꿈·찌부러짐 없이 한 덩어리로, 단추 묶음이 좁으면 단추들이 다음 줄로 내려간다
   (단추 3개가 되자 제목이 세로로 한 글자씩 깨졌던 문제, 2026-09-19) */
.cy .cy-h4row > h4 { flex: 0 0 auto; white-space: nowrap; margin-right: auto; }
.cy .cy-acts { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cy .cy-act {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 11px; border-radius: 8px;
    border: 1px solid #e1e7f2; background: #ffffff;
    color: #334063; font-size: 12px; font-weight: 700;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.cy .cy-act:hover { border-color: #2455e6; color: #2455e6; }
.cy .cy-act .tag {
    font-size: 10px; font-weight: 900; letter-spacing: .02em;
    padding: 2px 5px; border-radius: 4px; background: #0f9d6b; color: #fff;
}
.cy .cy-act .tag.pdf { background: #e2453b; }   /* 모집공고문 PDF 배지는 빨간색 */
/* 공고문 조회 중(청약홈 실시간 조회는 몇 초 걸린다) — 중복 클릭 방지 */
.cy .cy-act.is-busy { opacity: .55; pointer-events: none; cursor: progress; }
.cy .cy-cta {
    display: block; margin: 16px 0 4px; padding: 14px 16px; text-align: center;
    border-radius: var(--r-4); background: var(--mx-primary); color: #fff;
    font-size: var(--fs-6); font-weight: var(--fw-b); letter-spacing: var(--ls-tight);
    text-decoration: none; box-shadow: 0 6px 18px -8px rgba(36, 85, 230, .6);
}
.cy .cy-cta:hover { background: var(--mx-primary-strong); }

/* ===== 상세패널 위치 — 우측 슬라이드 대신 좌측목록 옆(가운데) 오버레이 =====
   참조앱(land4u-map-app) 레이아웃: 단지목록 오른쪽에 붙어 지도 위로 뜬다. */
.stage > .side {
    position: absolute; top: 0; bottom: 0; left: 360px; right: auto;
    width: 420px; flex: none; margin: 0;
    border-left: 0; border-right: 1px solid var(--mx-line);
    box-shadow: 8px 0 24px -12px rgba(19, 26, 46, .22);
    transform: translateX(-12px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .24s cubic-bezier(.22, 1, .36, 1), opacity .24s, visibility 0s .24s;
    z-index: 40;
}
.stage > .side.open {
    transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto;
    transition: transform .24s cubic-bezier(.22, 1, .36, 1), opacity .24s;
}
/* 청약 상세분석(넓은 리포트)도 같은 폭·같은 위치로 통일 */
.stage > .side.wide { width: 420px; flex: none; margin: 0; }
/* 상세 패널이 열리면 지도 왼쪽에 붙은 범례·지도모드 단추가 패널에 가려지므로 패널 폭만큼 오른쪽으로 비켜 준다(2026-10-08 사용자 지시).
   가운데 아래 범례(.m-legend)도 보이는 지도 영역의 가운데로. */
.map-legend, .m-mapmodes { transition: left .24s cubic-bezier(.22, 1, .36, 1); }
.m-legend { transition: left .24s cubic-bezier(.22, 1, .36, 1); }
.stage:has(> .side.open) .map-legend { left: 432px; }
.stage:has(> .side.open) .m-mapmodes { left: 434px; }
.stage:has(> .side.open) .m-legend { left: calc(50% + 210px); }

@media (max-width: 1024px) {
    .m-side { flex-basis: 300px; width: 300px; }
    .m-search { max-width: none; }
    .stage > .side, .stage > .side.wide { left: 300px; width: 400px; }
    .stage:has(> .side.open) .map-legend { left: 412px; }
    .stage:has(> .side.open) .m-mapmodes { left: 414px; }
    .stage:has(> .side.open) .m-legend { left: calc(50% + 200px); }
}
@media (max-width: 820px) {
    .m-side { display: none; }
    .m-tabs { gap: 14px; }
    .m-tabs a { font-size: var(--fs-5); }
    .stage > .side, .stage > .side.wide { left: 0; width: 100%; }
}

/* ── 우측 상세 패널 머리: 공유하기 + 닫기 = 테두리 네모 버튼(사진 양식, 2026-09-29) ── */
.side .side-head h2 { padding-right: 122px; }   /* 공유·관심·닫기 세 버튼 자리 */
.side .side-close, .side .side-share, .side .side-fav {
    position: absolute; top: 12px; width: 32px; height: 32px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--mx-line-strong, #d6dbe3); border-radius: 8px; background: var(--mx-panel, #fff);
    color: var(--mx-sub, #4b5563); cursor: pointer; line-height: 1;
}
.side .side-close { right: 14px; font-size: 20px; }
.side .side-fav { right: 52px; }
.side .side-share { right: 90px; }
.side .side-fav svg { width: 17px; height: 17px; display: block; }
.side .side-fav.on path { fill: url(#sFavGrad); }   /* 누르면 하트가 같은 색으로 채워진다 */
.side .side-share svg { width: 16px; height: 16px; display: block; }
.side .side-close:hover, .side .side-share:hover, .side .side-fav:hover { border-color: var(--mx-primary, #2455e6); color: var(--mx-primary, #2455e6); }
.side .side-share.copied { color: #0f9d6b; border-color: #0f9d6b; }
.side .side-share[hidden], .side .side-fav[hidden] { display: none; }
/* 링크 복사 말풍선(버튼 위) — 목록 화면(parcel.css)과 같은 모양 */
.share-toast { position: fixed; z-index: 9999; transform: translate(-50%, -100%); padding: 6px 10px; border-radius: 6px; background: #1f2937; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s ease, transform .15s ease; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.share-toast::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: #1f2937; }
.share-toast.on { opacity: 1; transform: translate(-50%, calc(-100% - 2px)); transition: none; }
.share-toast.err { background: #b42318; }
.share-toast.err::after { border-top-color: #b42318; }

/* 선택 단지 반경(500m·1km·2km) 거리 글자 — 2026-09-29 */
.mx-radius-lb { transform: translate(2px, -2px); padding: 1px 6px; border-radius: 9px; background: rgba(255,255,255,.92); color: #d02b26;
    border: 1px solid rgba(229,52,47,.45); font-size: 11px; font-weight: 700; line-height: 16px; white-space: nowrap; pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* 반경 내 인프라 카드(지도 왼쪽 아래) — 2026-09-29 */
.mx-ri { position: absolute; right: 84px; bottom: 34px; z-index: 6; width: 392px; max-width: calc(100% - 100px); max-height: 58%;   /* 오른쪽 아래(왼쪽은 상세 창이 덮음) */
    display: flex; flex-direction: column; background: #fff; border: 1px solid #e3e7ef; border-radius: 12px; box-shadow: 0 8px 24px rgba(15,23,42,.16); font-size: 12px; color: #1f2937; }
.mx-ri[hidden] { display: none; }
/* 머리 = 통합정보(.ap-head) 와 같은 파란 머리: 태그 칩 · 제목 · 출처(2026-10-14 사용자 지시 "통합정보 나오는 디자인처럼") */
.mx-ri-h { position: relative; padding: 12px 14px 10px; background: #2455e6; color: #fff; border-radius: 12px 12px 0 0; }
/* 「전체 인프라」 = 누르면 펴고 접는 단추(2026-10-21 사용자 지시 「글자 말고 버튼 형식」) — 흰 바탕 · 파란 글씨 · 펴짐/접힘 화살표 */
.mx-ri-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border: 1px solid #fff; border-radius: 999px; background: #fff; color: #2455e6;
    font-family: inherit; font-size: 12px; font-weight: 800; line-height: 1.2; cursor: pointer; box-shadow: 0 1px 4px rgba(10,30,90,.25); transition: background .15s, color .15s; }
.mx-ri-tag::after { content: "\25B4"; font-size: 10px; }   /* ▴ 펴짐 */
.mx-ri.fold .mx-ri-tag::after { content: "\25BE"; }       /* ▾ 접힘 */
.mx-ri-tag:hover { background: #eef3ff; }
.mx-ri-tag:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mx-ri-title { margin-top: 6px; font-size: 15px; font-weight: 800; }
.mx-ri-src { margin-top: 2px; font-size: 11px; color: #e6eefb; }
.mx-ri-x { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.mx-ri-x:hover { background: rgba(255,255,255,.18); }
.mx-ri.fold .mx-ri-body, .mx-ri.fold .mx-ri-load { display: none; }
.mx-ri.fold .mx-ri-h { border-radius: 12px; }
.mx-ri.fold .mx-ri-title, .mx-ri.fold .mx-ri-src { display: none; }   /* 접으면 태그 한 줄만 */
.mx-ri-load { padding: 16px 12px; color: #6b7280; }
.mx-ri-body { overflow: auto; }
.mx-ri table { width: 100%; border-collapse: collapse; }
.mx-ri th { position: sticky; top: 0; background: #fff; color: #8a94a6; font-weight: 700; padding: 8px 6px 4px; text-align: center; font-size: 11px; border-bottom: 1px solid #eef1f5; }
.mx-ri td { padding: 5px 6px; border-top: 1px solid #f1f3f7; text-align: center; white-space: nowrap; font-size: 12.5px; }
.mx-ri td.nm { padding-left: 2px; color: #2b3240; }
.mx-ri td.ck { width: 18px; padding: 5px 2px 5px 0; }
.mx-ri td.ck input { margin: 0; width: 14px; height: 14px; vertical-align: middle; cursor: pointer; }
.mx-ri td.g { display: none; }
/* 구분 줄 = 통합정보 섹션 제목(.ap-sh): 파란 점 + 굵은 글 */
.mx-ri tr.mx-ri-g td { padding: 11px 8px 5px; text-align: left; font-size: 13px; font-weight: 800; color: #2b3240; border-top: 0; border-bottom: 0; }
.mx-ri tr.mx-ri-g + tr td { border-top: 0; }
.mx-ri tr.mx-ri-g .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2455e6; margin-right: 7px; vertical-align: 1px; }
.mx-ri td b { color: #131a2e; }
.mx-ri td.nm { text-align: left; }
.mx-ri td.near { text-align: left; max-width: 120px; overflow: hidden; text-overflow: ellipsis; color: #374151; }
.mx-ri td.near em { font-style: normal; color: #8a94a6; font-size: 11px; }
.mx-ri tr[data-i] { cursor: pointer; }
.mx-ri tr[data-i]:hover td { background: #f5f8ff; }
.mx-ri tr.on td { background: #eaf1ff; }
.mx-ri-0 { color: #b6bdc9; }
.mx-ri-foot { margin: 0; padding: 6px 10px 8px; font-size: 11px; color: #8a94a6; }
.mx-ri-dot { position: relative; pointer-events: none; }
.mx-ri-dot i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #16a34a; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.mx-ri-dot span { position: absolute; left: 12px; top: -3px; white-space: nowrap; font-size: 11px; font-weight: 600; color: #14532d; background: rgba(255,255,255,.85); padding: 0 3px; border-radius: 3px; }
@media (max-width: 760px) { .mx-ri { width: calc(100% - 24px); max-height: 45%; } }
.mx-ri-dot.bus i { width: 8px; height: 8px; background: #7c3aed; }
.mx-ri-dot.bus span { color: #4c1d95; }

/* 실거래 마커 클릭 요약 카드 — 2026-09-29 */
.deal-pop { position: relative; width: 250px; margin-bottom: 40px; padding: 14px 14px 12px; background: #fff; border: 1px solid #d9e0ec; border-radius: 12px;
    box-shadow: 0 10px 28px rgba(15,23,42,.22); font-size: 12.5px; color: #1f2937; line-height: 1.45; cursor: default; }
.deal-pop::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: #fff; border-right: 1px solid #d9e0ec; border-bottom: 1px solid #d9e0ec; transform: translateX(-50%) rotate(45deg); }
.deal-pop .dp-x { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: #9aa3b2; font-size: 17px; line-height: 1; cursor: pointer; }
.deal-pop .dp-x:hover { background: #f3f5f9; color: #374151; }
.deal-pop .kind { display: inline-block; padding: 1px 7px; border-radius: 4px; background: #2563eb; color: #fff; font-size: 11px; font-weight: 700; }
.deal-pop h4 { margin: 6px 0 1px; font-size: 15px; font-weight: 800; color: #131a2e; padding-right: 18px; }
.deal-pop .dp-addr { margin: 0 0 8px; font-size: 11.5px; color: #8a94a6; }
.deal-pop dl { display: grid; grid-template-columns: 58px 1fr; gap: 3px 8px; margin: 0 0 6px; }
.deal-pop dt { color: #6b7280; }
.deal-pop dd { margin: 0; font-weight: 700; color: #1f2937; text-align: right; }
.deal-pop .dp-sub { margin: 8px 0 3px; font-size: 11.5px; color: #6b7280; }
.deal-pop .dp-load { margin: 0 0 6px; color: #9aa3b2; }
.deal-pop .dp-recent { list-style: none; margin: 0 0 8px; padding: 6px 8px; background: #f6f8fb; border-radius: 8px; max-height: 98px; overflow: auto; }
.deal-pop .dp-recent li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.deal-pop .dp-recent li span { color: #6b7280; }
.deal-pop .dp-recent li.none { color: #9aa3b2; justify-content: center; }
.deal-pop .dp-more { display: block; width: 100%; margin-top: 8px; padding: 9px 0; border: 0; border-radius: 8px; background: #2455e6; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.deal-pop .dp-more:hover { background: #1b45c4; }
.deal-pop.below { margin-bottom: 0; margin-top: 18px; }
.deal-pop.below::after { bottom: auto; top: -7px; border-right: 0; border-bottom: 0; border-left: 1px solid #d9e0ec; border-top: 1px solid #d9e0ec; }
/* 실거래 마커 툴팁 — 주소(작게·회색)·세대수/준공년도 — 2026-09-30 */
.tip .tip-addr { margin: -2px 0 8px; font-size: 11.5px; color: #8a94a6; }
.tip dl.tip-meta { margin-top: 8px; padding-top: 7px; border-top: 1px solid #eef1f6; }

/* ===== 풀HD(1920×1080) 맞춤 — 창 폭 1800px 이상에서만(그보다 작은 화면은 위 기본값 그대로, 2026-10-06 사용자 지시) =====
   왼쪽 목록 400→420 · 상세 패널 420→470(목록 바로 옆) · 목록·상세·헤더 글자 한 단계씩 키움(지도 마커 글자는 그대로)
   · 통합정보 300→330 · 반경 내 인프라 카드는 지도를 덜 가리게 높이 58%→48% */
@media (min-width: 1800px) {
    .m-header, .m-nav, .m-side, .stage > .side, .around-panel, .mx-ri {
        --fs-1: 10px; --fs-2: 10.5px; --fs-3: 11.5px; --fs-4: 12.5px; --fs-5: 14px;
        --fs-6: 15px; --fs-7: 17px; --fs-8: 19px; --fs-9: 23px; --fs-10: 28px;
    }
    .m-side { flex-basis: 380px; width: 380px; }   /* 420 → 380(2026-10-19) */
    .stage > .side, .stage > .side.wide { left: 380px; width: 470px; }
    .stage:has(> .side.open) .map-legend { left: 482px; }
    .stage:has(> .side.open) .m-mapmodes { left: 484px; }
    .stage:has(> .side.open) .m-legend { left: calc(50% + 235px); }
    .m-map-wrap .around-panel { width: 330px; }
    .mx-ri { max-height: 48%; }
}

/* 범례 옆 반경 단추(500 · 1000 · 2000 · 2000+) — 마커를 고르면 나타나고, 누른 반경 안 마커만 보인다(2026-10-14, js/main-radius.js) */
.map-radius { position: absolute; z-index: 5; display: flex; gap: 4px; padding: 6px 8px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12); font-size: 12px; }
.map-radius[hidden] { display: none; }
.map-radius .mr-lb { align-self: center; color: #6b7280; margin-right: 2px; white-space: nowrap; }
.map-radius button { appearance: none; border: 1px solid #d1d5db; background: #fff; color: #374151; border-radius: 6px; padding: 3px 8px; font: inherit; cursor: pointer; white-space: nowrap; }
.map-radius button:hover { background: #f3f4f6; }
.map-radius button.on { background: #2563eb; border-color: #2563eb; color: #fff; }   /* 누른 반경 = 파랑(2026-10-14 사용자 지시 "누르면 파랑색으로") */
/* 메인 인구 패널 「인구 및 세대수」 그래프(js/pop-chart.js, 분양공고 TOP10 그래프와 같은 모양, 2026-10-19) */
.popx-chart { padding: 10px 10px 2px; border-bottom: 1px solid var(--mx-line, #e1e7f2); }
.popx-chart .pc-legend { display: flex; gap: 14px; margin: 0 0 2px; font-size: 11px; color: var(--mx-sub, #5f6b86); font-weight: 600; }
.popx-chart .pc-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.popx-chart .pc-legend .ln i { height: 2px; width: 14px; vertical-align: 3px; }
.popx-chart svg { display: block; }

/* 「반경 내 인프라」 막대 — 메뉴 띠 오른쪽(정보 오류 신고 왼쪽). 단지를 고르면 나온다(2026-10-21 사용자 지시 「메인지도 상단에 이렇게」).
   예전 지도 오른쪽 아래 카드는 숨긴다(자료 · 지도 점 찍기는 그대로 같이 쓴다) */
#mxRadiusInfo { display: none !important; }
.rb { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 12px; border-radius: 999px; background: rgba(8, 18, 48, .38);
    color: #fff; font-size: 12.5px; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
.rb[hidden] { display: none; }
.rb-lbl { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font-weight: 800; letter-spacing: -.01em; }
.rb-lbl i { width: 7px; height: 7px; border-radius: 50%; background: #ff6b6b; box-shadow: 0 0 0 3px rgba(255, 107, 107, .25); flex: none; }
.rb-seg { display: inline-flex; gap: 2px; padding: 2px; margin-right: 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.rb-seg button { border: 0; background: transparent; color: rgba(255, 255, 255, .72); font: inherit; font-weight: 700; padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.rb-seg button:hover { color: #fff; }
.rb-seg button.on { background: #4f7cff; color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.rb-gw { position: relative; display: inline-flex; }
.rb-g { border: 1px solid transparent; background: transparent; color: rgba(255, 255, 255, .88); font: inherit; font-weight: 700; padding: 3px 9px; border-radius: 999px; cursor: pointer; }
.rb-g b { margin-left: 2px; color: #a9c4ff; font-weight: 800; }
.rb-g:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.rb-g.open { border-color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .12); color: #fff; }
.rb-g.on { background: #fff; color: #1b2a5c; }
.rb-g.on b { color: #2455e6; }
.rb-dd { position: absolute; top: calc(100% + 9px); left: 0; z-index: 80; display: grid; grid-template-columns: minmax(130px, auto); gap: 2px;   /* 한 줄씩 아래로(2026-10-21 사용자 지시) */
    padding: 8px 10px; background: #1b2440; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; box-shadow: 0 12px 28px rgba(0, 0, 0, .32); }
.rb-it { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 5px; color: #e8edf8; font-weight: 600; cursor: pointer; }
.rb-it:hover { background: rgba(255, 255, 255, .08); }
.rb-it input { width: 14px; height: 14px; margin: 0; cursor: pointer; }
@media (max-width: 1560px) { .rb-lt { display: none; } .rb-lbl { margin-right: 2px; } }   /* 좁으면 「반경 내 인프라」 글은 빼고 점만 */
@media (max-width: 1280px) { .rb-seg button { padding: 3px 7px; } .rb-g { padding: 3px 6px; } }
/* 지도 범례(● 청약 · ● 실거래)를 막대 안(2km 와 학교 사이)으로 옮겼을 때 — 막대 단추 모양으로(2026-10-21) */
.rb .map-legend.in-rb { position: static; display: inline-flex; align-items: center; gap: 2px; margin: 0 4px 0 0; padding: 0 6px 0 0;
    background: transparent; border: 0; border-right: 1px solid rgba(255, 255, 255, .22); border-radius: 0; box-shadow: none;
    color: #fff; font-size: 12.5px; line-height: 1.2; transition: none; z-index: auto; }
.rb .map-legend.in-rb .ml-deal { display: inline-flex; }
.rb .map-legend.in-rb button.ml-row { margin: 0; padding: 3px 8px; gap: 5px; border-radius: 999px; color: rgba(255, 255, 255, .92); font-weight: 700; }
.rb .map-legend.in-rb button.ml-row:hover { background: rgba(255, 255, 255, .12); }
.rb .map-legend.in-rb .ml-dot { width: 8px; height: 8px; }
.rb .map-legend.in-rb .ml-cnt { color: #a9c4ff; }
.rb .map-legend.in-rb .ml-sub, .rb .map-legend.in-rb .ml-unit { display: none; }
.rb .map-legend.in-rb .ml-fly { left: 0; top: 100%; margin: 9px 0 0; color: #111827; z-index: 80; }
.rb .map-legend.in-rb .ml-fly::before { left: 0; right: 0; top: -12px; bottom: auto; width: auto; height: 12px; }   /* 단추 → 목록 사이 틈에서 오버가 끊기지 않게 */
.rb .map-legend.in-rb button.ml-row:not(.on) .ml-dot { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); }
/* 지도 왼쪽 위 반경 마커 필터 단추(500 · 1000 · 2000 · 2000+)는 숨기고 메뉴 띠 막대의 반경 단추가 대신한다(2026-10-21 사용자 지시) */
#mapRadius { display: none !important; }
.rb-seg button.sel { color: #fff; box-shadow: inset 0 0 0 1.5px #7ea2ff; }   /* 개수 반경(주변 마커는 숨김) */
/* 반경을 바꿔 숫자 자릿수가 달라져도 막대 폭이 늘었다 줄었다 하지 않게 — 숫자 칸 폭 고정(2026-10-21 사용자 지시) */
.rb-g b { display: inline-block; min-width: 2.8em; text-align: left; font-variant-numeric: tabular-nums; }
.rb .map-legend.in-rb .ml-cnt { display: inline-block; min-width: 2.9em; text-align: left; font-variant-numeric: tabular-nums; }
@media (max-width: 1500px) { .rb { gap: 1px; padding-left: 8px; } .rb-seg { margin-right: 2px; } .rb .map-legend.in-rb { margin-right: 2px; padding-right: 3px; } .rb-seg button { padding: 3px 7px; } .rb-g { padding: 3px 6px; } .rb .map-legend.in-rb button.ml-row { padding: 3px 6px; } }
/* 목록 항목 옆 개수(고른 반경 안) — 오른쪽 끝에 맞춤, 0 은 흐리게(2026-10-21) */
.rb-it .rb-in { flex: 1 1 auto; }
.rb-it .rb-n { margin-left: 14px; font-style: normal; font-weight: 800; color: #a9c4ff; font-variant-numeric: tabular-nums; min-width: 2.4em; text-align: right; }
.rb-it .rb-n.z { color: rgba(255, 255, 255, .35); font-weight: 600; }
/* 목록 폭 = 글 길이만큼(좁은 단추 안에 붙어 있어 폭이 눌려 「유치원·어린이집 36」 숫자가 상자 밖으로 삐져나오던 것, 2026-10-21) */
.rb-dd { width: max-content; min-width: 190px; }
.rb-it { white-space: nowrap; }
/* 목록 상자는 단추 오른쪽 끝에 맞춰 왼쪽으로 펼친다 — 아래로 내려오되 옆(왼쪽)으로 비켜 지도 오른쪽 위 지도/리스트 단추를 가리지 않게(2026-10-21 사용자 지시) */
.rb-dd { left: auto; right: 0; }
/* 범례 「청약」 구분 목록은 붉은 계열(청약 마커 색) — 실거래는 파랑 그대로(2026-10-21 사용자 지시) */
.map-legend #lgSaleFly button:hover { background: #fdecec; }
.map-legend #lgSaleFly button.on { background: #e5342f; color: #fff; }
.map-legend #lgSaleTog .ml-cnt { color: #dc2626; }
.rb .map-legend.in-rb #lgSaleTog .ml-cnt { color: #ff9b9b; }
/* 사이트맵 아래 약관 링크 · 메인 지도 오른쪽 아래 약관 링크(2026-10-27, 개인정보처리방침은 굵게) */
.m-sitemap .sm-legal { display: flex; gap: 14px; margin-top: 10px; padding: 8px 8px 0; border-top: 1px solid var(--mx-line); font-size: 12px; }
.m-sitemap .sm-legal a { padding: 0; color: var(--mx-muted, #6b7280); }
.m-sitemap .sm-legal a.pv { font-weight: 700; color: var(--mx-ink, #1f2937); }
.m-map-wrap .m-legal { position: absolute; right: 8px; bottom: 6px; z-index: 6; display: flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.85); font-size: 11px; color: #6b7280; }
.m-map-wrap .m-legal a { color: #4b5563; text-decoration: none; }
.m-map-wrap .m-legal a:hover { text-decoration: underline; }
.m-map-wrap .m-legal a.pv { font-weight: 700; color: #1f2937; }
/* 말풍선 종류 옆 작은 표시 — 버스정류소 광역 · 일반(2026-10-27) */
.tip .kind-b { display: inline-block; margin-left: 5px; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1.4; vertical-align: top; }
.tip .kind-b.wide { background: #fdecec; color: #e5484d; border: 1px solid #f5b5b7; }
.tip .kind-b.basic { background: #eaf2ff; color: #1b63d6; border: 1px solid #b9d0f5; }
/* 버스정류소 정보 창 — 광역 · 일반 묶음, 노선 번호 칩 + 기점 → 종점(2026-10-27) */
.tip .bt-grp { margin-top: 9px; }
.tip .bt-grp + .bt-grp { padding-top: 9px; border-top: 1px solid #eef1f6; }
.tip .bt-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 12px; font-weight: 700; }
.tip .bt-grp.wide .bt-h { color: #e5484d; }
.tip .bt-grp.basic .bt-h { color: #1b63d6; }
.tip .bt-h span { font-size: 11px; font-weight: 500; color: #8a94a6; }
.tip .bt-grp ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.tip .bt-grp li { display: flex; align-items: flex-start; gap: 7px; }
.tip .bt-no { flex: none; min-width: 42px; padding: 2px 6px; border-radius: 5px; font-size: 11.5px; font-weight: 700; line-height: 1.35; text-align: center; color: #fff; }
.tip .bt-grp.wide .bt-no { background: #e5484d; }
.tip .bt-grp.basic .bt-no { background: #1b8cf0; }
.tip .bt-dir { min-width: 0; font-size: 11.5px; line-height: 1.4; color: #6b7588; word-break: keep-all; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tip .bt-dir i { font-style: normal; margin: 0 3px; color: #b0b8c6; }
.tip .bt-dir strong { color: #1f2937; font-weight: 700; }
.tip .bt-more { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tip .bt-more span { padding: 1px 6px; border-radius: 5px; font-size: 11px; font-weight: 600; background: #f1f4f8; color: #4b5565; }
.tip .bt-grp.wide .bt-more span { background: #fdecec; color: #c4373c; }
.tip .bt-more em { font-style: normal; font-size: 11px; color: #8a94a6; align-self: center; }
.tip .bt-none { margin: 6px 0 0; font-size: 12px; color: #8a94a6; }
/* 청약 탭 검색(2026-10-28) — 캘린더 위 검색창 · 결과 머리의 건수 */
.np-find { margin: 10px 0; }
.np-sec-h .np-cnt { margin-left: auto; font-size: 11.5px; color: #8a94a6; font-weight: 500; }

/* 상세 패널 교통 칸 — 가까운 6곳만, 나머지는 「외 N곳 더보기」 · 펼치면 「접기」(2026-10-28) */
.cy-trmore > summary::-webkit-details-marker { display: none; }
.cy-trmore[open] > summary .m, .cy-trmore:not([open]) > summary .l { display: none; }