/* =========================================================================
 * 메인(지도탐색) 전용 레이아웃 — 호갱노노형 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;

    /* 상세패널·툴팁 등 공통 컴포넌트(land4u.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));
    border-bottom: 0; position: relative; z-index: 40;
}
.m-logo {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    font-size: var(--fs-9); font-weight: var(--fw-b); letter-spacing: var(--ls-tight); color: #fff;
    text-decoration: none; white-space: nowrap;
}
.m-logo svg { width: 26px; height: 26px; display: block; }
.m-logo b { font-weight: var(--fw-b); color: #fff; }

/* 헤더 통합검색 — 파란 바 위 흰색 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 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 .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; }
.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;
}

/* ===== 내비 (샘플: 파란 바 + 흰 탭 + 흰 밑줄) ===== */
.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-nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.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; }

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

/* 좌측 단지목록 사이드바 */
.m-side {
    flex: 0 0 400px; width: 400px; 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); }

.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; }
/* 실거래 검색조건 — 사진처럼 4열(전국·아파트·평형·가격대 / 입주년도·세대수) 2줄 */
.ms-selects.deal-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 5px; }
.ms-selects.deal-cols select { width: 100%; padding: 6px 8px; text-align: center; }
.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; }
.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); }
.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); }
/* 참조앱 .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}
.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)}
.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-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}
.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 .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 .ml-unit { margin-top: 4px; font-size: 12px; color: #6b7280; }

/* 우측 세로 레이어 툴바 */
.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; }
.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); }

/* 레일 플라이아웃(편의: 지하철/버스 등) */
.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; }

/* 분양뉴스 목록 클릭 → 지도 강조 핀 */
.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); }

/* ===== 청약 상세패널(cy) 8탭 보강 — 사업개요 버튼·하단 CTA ===== */
.cy .cy-h4row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cy .cy-acts { display: inline-flex; gap: 6px; }
.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-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: 400px; 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; }

@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; }
}
@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%; }
}